/* ============================================================================
   BONUM Â· Studio Notes â€” stylesheet (v10 Â· anatomÃ­a julio 2026)
   ---------------------------------------------------------------------------
   Reemplaza POR COMPLETO la v9. Cambios respecto de v9:

     Â· ANCHOS POR ROL â€” Fig. 1 "la escena" (open) sube a 57.5rem (~920px,
       horizontal 3:2, hero). Fig. 2 "la evidencia" (inset) queda en 32.5rem
       (~520px, vertical 4:5).
     Â· STANDFIRST â€” nuevo .bn-standfirst: viaja en el cuerpo pegado (Custom
       HTML), ya no se lee del campo Excerpt. Muere .bn-deck.
     Â· SUBTÃ�TULO â€” nuevo h2.bn-section (Fraunces, palabra en oro con em).
     Â· PLACAS â€” .bn-figcaption gana .bn-prov (procedencia, itÃ¡lica, derecha).
     Â· CODA â€” solo "With care â€” Bonum Studio". Muere .bn-sign-names;
       .bn-sign-studio pasa a ser el protagonista.
     Â· CIERRE â€” muere toda la lÃ³gica de "Next" (.bn-next / .bn-next-final).
       Toda nota cierra igual: .bn-return (lÃ­nea + Continue in the Library).
     Â· ESPACIADO â€” recorte ~15% donde el aire era eco, no drama:
       masthead 7.6â†’6.5 Â· plato apertura 4/4.7â†’3.6/4 Â· lead top 4.8â†’4.2 Â·
       panel salvia 10.4/10.8â†’8.2/8.6 Â· firma 5.4/7.2â†’4.4/4.2.

   Contrato de markup (lo emite single.php + la plantilla v6):
     Â· Masthead .bn-masthead: kicker + rule + tÃ­tulo. SIN deck.
     Â· Cuerpo: .bn-standfirst â†’ platos figure.bn-plate(.bn-plate-open|
       .bn-plate-inset) â†’ .bn-body â†’ h2.bn-section â†’ .bn-lead â†’
       .bn-apply â†’ .bn-endnote (.bn-lead + .bn-outro opcional).
     Â· Cierre estÃ¡tico: .bn-close > .bn-sign (.bn-sign-intro +
       .bn-sign-studio) + nav.bn-return (.bn-final-line + .bn-library-link).

   Todo scopeado bajo .bn-note-canvas. Ãšnica excepciÃ³n: el spacer blanco
   antes del footer oscuro (marcado abajo).
   ============================================================================ */

/* ============================================================================
   TOKENS
   ============================================================================ */
.bn-note-canvas {
  --field:      #ffffff;   /* campo de lectura â€” blanco museo, formal, mÃ¡ximo enfoque */
  --white:      #ffffff;
  --linen:      #faf7f1;
  --paper:      #f6f1e7;   /* calidez reservada a objetos                     */
  --ash:        #f6f4ef;

  --ink:        #171613;
  --ink-body:   rgba(27, 24, 21, .88);
  --ink-60:     rgba(27, 24, 21, .56);
  --ink-45:     rgba(27, 24, 21, .38);
  --hair:       rgba(90, 70, 45, .11);

  --gold:       #9a7a42;
  --gold-soft:  #b08d56;
  --terracotta: #8a3f26;

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:  'Instrument Sans', Arial, Helvetica, sans-serif;

  --read:  43rem;   /* columna de texto */
  --plate: 60rem;   /* riel del plato â€” apenas mÃ¡s ancho que el hero */

  /* "In your home" â€” banda atmosfÃ©rica salvia */
  --home-sage-top:    #ffffff;
  --home-sage-soft:   #f8faf7;
  --home-sage-mid:    #f3f6f2;
  --home-sage-bottom: #eef2ee;
  --home-phrase:      #2c3a2e;
  --home-number:      #9a7a42;
  --home-rule:        rgba(154, 122, 66, .16);
  --home-line:        rgba(80, 74, 62, .10);

  /* Escala de platos por ROL (anatomÃ­a julio 2026):
       open  = Fig. 1 "la escena"    â€” horizontal 3:2, hero  (~920px)
       inset = Fig. 2 "la evidencia" â€” vertical 4:5          (~520px)
     El min() con el viewport evita desbordes; no hace falta tope de altura. */
  --plate-open-editorial:  57.5rem;
  --plate-open-max-height: none;
  --plate-inset-editorial: 32.5rem;

  background: var(--field);
  color: var(--ink-body);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  position: relative;
  overflow-x: hidden;

  /* IntegraciÃ³n con el chrome central (files-4 header.php + footer.php) */
  z-index: 1;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
}

.bn-note-canvas *,
.bn-note-canvas *::before,
.bn-note-canvas *::after { box-sizing: border-box; }

.bn-note-canvas p,
.bn-note-canvas h1,
.bn-note-canvas h2,
.bn-note-canvas h3 { margin: 0; }

.bn-note-canvas a { color: inherit; text-decoration: none; }

.bn-note-canvas > *,
.bn-note-canvas > .bn-note-content { position: relative; z-index: 2; }
.bn-note-canvas > .window-light { z-index: 0; }

/* ============================================================================
   ATMÃ“SFERA â€” grano + luz direccional + cursor  (sin cambios)
   ============================================================================ */
.bn-note-canvas::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .045; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.bn-note-canvas .window-light {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 72% at 82% -10%, rgba(255,252,246,.34) 0%, rgba(255,252,246,0) 46%),
    radial-gradient(110% 80% at 6% 110%, rgba(215,202,180,.045) 0%, rgba(215,202,180,0) 50%);
}
@media (prefers-reduced-motion: reduce) {
  .bn-note-canvas .window-light { opacity: .8; }
}

.bn-note-canvas .cursor-dot,
.bn-note-canvas .cursor-ring {
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999;
  border-radius: 50%; transform: translate(-50%, -50%);
  mix-blend-mode: difference; will-change: transform;
}
.bn-note-canvas .cursor-dot {
  width: 5px; height: 5px; background: #f4efe6;
  transition: width .25s, height .25s, opacity .2s;
}
.bn-note-canvas .cursor-ring {
  width: 28px; height: 28px; border: 1px solid rgba(244,239,230,.6);
  transition: width .4s cubic-bezier(.2,.8,.2,1), height .4s cubic-bezier(.2,.8,.2,1), opacity .3s;
}
.bn-note-canvas.hovering .cursor-dot  { width: 12px; height: 12px; opacity: 0; }
.bn-note-canvas.hovering .cursor-ring { width: 48px; height: 48px; border-color: rgba(244,239,230,.95); }
@media (pointer: coarse) {
  .bn-note-canvas .cursor-dot,
  .bn-note-canvas .cursor-ring { display: none; }
}

/* ============================================================================
   RIELES DE LAYOUT
   ============================================================================ */
.bn-note-canvas .bn-wrap {
  max-width: var(--plate); margin: 0 auto;
  padding: 0 1.75rem;
}
.bn-note-canvas .bn-col { max-width: var(--read); margin-left: auto; margin-right: auto; }
.bn-note-canvas .bn-note-content { position: relative; }

/* ============================================================================
   MASTHEAD â€” kicker + rule + tÃ­tulo. El deck/excerpt ya no existe:
   el standfirst viaja en el cuerpo (.bn-standfirst).
   ============================================================================ */
.bn-note-canvas .bn-masthead { padding: 6.5rem 0 0; }

.bn-note-canvas .bn-meta {
  display: flex; align-items: baseline; justify-content: center; gap: .9rem; flex-wrap: wrap;
  font-family: var(--sans); font-size: .58rem; letter-spacing: .32em; font-weight: 500;
  text-transform: uppercase; color: rgba(90, 78, 66, .46);
}
.bn-note-canvas .bn-meta .bn-arc { color: #a98a57; }
.bn-note-canvas .bn-meta .bn-dot { color: rgba(90, 78, 66, .28); }

.bn-note-canvas .bn-meta-rule {
  max-width: 38rem; height: 1px; margin: 1.8rem auto 4rem;
  background: rgba(90, 70, 45, .10);
}

.bn-note-canvas .bn-title {
  font-family: var(--serif); font-optical-sizing: auto; font-weight: 360;
  max-width: 48rem; margin: 0 auto 2rem; text-align: center; color: var(--ink);
  font-size: clamp(2.75rem, 5.7vw, 4.15rem); line-height: 1.02; letter-spacing: -.025em;
  font-variation-settings: "SOFT" 18, "opsz" 96;
}
.bn-note-canvas .bn-title em { font-style: italic; color: var(--terracotta); }

/* ============================================================================
   STANDFIRST â€” nuevo. Primera lÃ­nea del cuerpo pegado; hereda el rol
   editorial del viejo deck sin depender del campo Excerpt.
   ============================================================================ */
.bn-note-canvas .bn-standfirst {
  font-family: var(--serif); font-style: italic; font-weight: 340; text-align: center;
  max-width: 37rem; margin: 0 auto; padding: 0 1.75rem;
  font-size: clamp(1.12rem, 2vw, 1.34rem); line-height: 1.68; color: rgba(27, 24, 21, .54);
}
.bn-note-canvas .bn-standfirst em { color: var(--gold); font-style: italic; }

/* ============================================================================
   SUBTÃ�TULO DE SECCIÃ“N â€” nuevo h2.bn-section (palabra en oro con em)
   ============================================================================ */
.bn-note-canvas .bn-section {
  font-family: var(--serif); font-optical-sizing: auto; font-weight: 380;
  max-width: 30rem; margin: 4.4rem auto 2.3rem; text-align: center; color: var(--ink);
  font-size: clamp(1.7rem, 3vw, 2.35rem); line-height: 1.16; letter-spacing: -.018em;
  font-variation-settings: "SOFT" 18, "opsz" 90;
}
.bn-note-canvas .bn-section em { font-style: italic; color: var(--gold); }

/* ============================================================================
   PLATOS (museum plates) â€” [bonum_fig] â†’ figure.bn-plate
   ============================================================================ */
.bn-note-canvas .bn-plate { margin: 0 auto; }

/* Marco base (vale para inset; el open lo afina mÃ¡s abajo) */
.bn-note-canvas .bn-plate-frame {
  position: relative; background: transparent; padding: 0; border: 0; overflow: visible;
  box-shadow:
    0 36px 68px -30px rgba(18, 16, 14,
 .36),
    0 16px 26px -18px rgba(18, 16, 14, .20);
}
.bn-note-canvas .bn-plate-frame::after {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: -20px; height: 30px;
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,.18) 0%, rgba(0,0,0,.08) 36%, rgba(0,0,0,0) 74%);
  filter: blur(11px); z-index: 0; pointer-events: none;
}
.bn-note-canvas .bn-plate-img {
  position: relative; z-index: 1; display: block;
  width: 100%; height: auto; background: var(--ash);
}

/* FIG. 1 â€” LA ESCENA (open) Â· horizontal 3:2 Â· hero a ancho editorial */
.bn-note-canvas .bn-plate-open {
  max-width: min(var(--plate-open-editorial), calc(100vw - 3.5rem));
  margin: 3.6rem auto 4rem; text-align: center;
}
.bn-note-canvas .bn-plate-open .bn-plate-frame {
  display: inline-block; max-width: 100%; vertical-align: top;
  box-shadow:
    0 24px 44px -30px rgba(18, 16, 14, .28),
    0 10px 20px -18px rgba(18, 16, 14, .15);
}
.bn-note-canvas .bn-plate-open .bn-plate-frame::after {
  left: 12%; right: 12%; bottom: -14px; height: 22px; opacity: .72;
}
.bn-note-canvas .bn-plate-open .bn-plate-img {
  width: auto; max-width: 100%; height: auto;
  max-height: var(--plate-open-max-height); object-fit: contain; margin: 0 auto;
}
.bn-note-canvas .bn-plate-open .bn-figcaption {
  max-width: min(var(--plate-open-editorial), calc(100vw - 3.5rem));
  margin: .9rem auto 0; text-align: left;
}

/* FIG. 2 â€” LA EVIDENCIA (inset) Â· vertical 4:5 Â· obra real montada */
.bn-note-canvas .bn-plate-inset {
  max-width: min(var(--plate-inset-editorial), calc(100vw - 3.5rem));
  margin: 4.6rem auto;
}

/* Placa museÃ­stica: nÃºmero Â· descripciÃ³n Â· procedencia */
.bn-note-canvas .bn-figcaption {
  display: flex; flex-wrap: wrap; gap: .85rem; align-items: baseline; margin: 1rem .05rem 0;
  font-family: var(--sans); font-size: .72rem; line-height: 1.55; color: rgba(27, 24, 21, .46);
}
.bn-note-canvas .bn-fig {
  flex: 0 0 auto; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(154, 122, 66, .84); padding-top: .05rem;
}
.bn-note-canvas .bn-prov {
  margin-left: auto; padding-left: 1rem;
  font-style: italic; color: rgba(27, 24, 21, .36); white-space: nowrap;
}

/* ============================================================================
   CUERPO + FRASES-TESIS (.bn-lead)
   ============================================================================ */
.bn-note-canvas .bn-body p:not(.bn-lead) {
  font-family: var(--sans); max-width: var(--read); margin: 0 0 1.65rem;
  font-size: 1.03rem; line-height: 1.95; color: var(--ink-body);
}

.bn-note-canvas .bn-lead {
  font-family: var(--serif); font-optical-sizing: auto; font-weight: 350; font-style: normal;
  max-width: 39rem; margin: 4.2rem auto 2.5rem; padding-top: 2.45rem;
  font-size: clamp(2.08rem, 4vw, 3.12rem); line-height: 1.1; letter-spacing: -.028em;
  color: var(--ink); text-align: center; position: relative;
  font-variation-settings: "SOFT" 22, "opsz" 96;
}
.bn-note-canvas .bn-lead::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 1.95rem; height: 1px; background: rgba(154, 122, 66, .78);
}
.bn-note-canvas .bn-lead em { color: var(--gold); font-style: italic; font-weight: 350; }

/* Bloque final de la nota (.bn-endnote): la tesis de cierre respira mÃ¡s
   arriba; la outro opcional se pega debajo. */
.bn-note-canvas .bn-endnote .bn-lead { margin-top: 6rem; margin-bottom: 0; }
.bn-note-canvas .bn-outro {
  font-family: var(--sans); max-width: 34rem; margin: 1.6rem auto 0;
  text-align: center; font-size: 1rem; line-height: 1.7; color: var(--ink-60);
}

/* ============================================================================
   "IN YOUR HOME" â€” banda atmosfÃ©rica salvia, full-width
   (respiraciÃ³n exterior recortada 10.4/10.8 â†’ 8.2/8.6; interior intacto)
   ============================================================================ */
.bn-note-canvas .bn-apply {
  width: 100vw; max-width: none;
  margin: 8.2rem 0 8.6rem; margin-left: 50%; transform: translateX(-50%);
  padding:
    clamp(7.4rem, 9vw, 10rem)
    max(1.75rem, calc((100vw - 84rem) / 2))
    clamp(7.4rem, 9vw, 10rem);
  background: linear-gradient(180deg,
    var(--home-sage-top) 0%, var(--home-sage-top) 12%,
    var(--home-sage-soft) 34%, var(--home-sage-mid) 62%, var(--home-sage-bottom) 100%);
  border: 0;
  display: grid;
  grid-template-columns: minmax(21rem, 25rem) minmax(34rem, 1fr);
  grid-template-rows: auto auto;
  column-gap: clamp(3rem, 5vw, 5.8rem); row-gap: 3.7rem;
  align-items: center;
}

.bn-note-canvas .bn-apply .bn-kicker {
  grid-column: 1 / -1; grid-row: 1;
  width: 100%; margin: 0; padding: 0 0 1.45rem;
  font-family: var(--sans); font-size: .64rem; line-height: 1; letter-spacing: .34em;
  font-weight: 560; text-transform: uppercase; color: rgba(154, 122, 66, .84);
}
.bn-note-canvas .bn-apply .bn-kicker::after {
  content: ""; display: block; width: 100%; height: 1px; margin-top: 1.25rem;
  background: linear-gradient(90deg,
    rgba(154, 122, 66, .24) 0%, rgba(154, 122, 66, .10) 44%, rgba(154, 122, 66, 0) 100%);
}

/* Manifiesto izquierdo â€” POR NOTA (v10.1). Viaja en el cuerpo pegado como
   <p class="bn-manifesto"> dentro de .bn-apply: es la conclusiÃ³n de la nota,
   la idea que el lector se lleva a la prÃ¡ctica.
   FALLBACK: una nota vieja sin manifiesto propio conserva la frase fija vÃ­a
   ::before; apenas la nota trae su .bn-manifesto, el fallback se apaga solo. */
.bn-note-canvas .bn-apply .bn-manifesto,
.bn-note-canvas .bn-apply::before {
  grid-column: 1; grid-row: 2;
  display: block; align-self: center; max-width: 24rem; margin: 0;
  font-family: var(--serif); font-size: clamp(2.5rem, 3.15vw, 3.58rem);
  line-height: 1.04; letter-spacing: -.042em; font-weight: 350;
  color: var(--home-phrase); font-variation-settings: "SOFT" 20, "opsz" 96;
}
.bn-note-canvas .bn-apply::before {
  content: "Art is not hung for noon.\AIt is lived at the hour when the home comes alive.";
  white-space: pre-line;
}
.bn-note-canvas .bn-apply:has(.bn-manifesto)::before { content: none; }
.bn-note-canvas .bn-apply .bn-manifesto em { font-style: italic; color: var(--gold); }

/* Bloque de notas (derecha) */
.bn-note-canvas .bn-apply ol {
  grid-column: 2; grid-row: 2;
  list-style: none; counter-reset: step; margin: 0;
  padding: 0 0 0 2.25rem; border-left: 1px solid var(--home-rule); display: block;
}
.bn-note-canvas .bn-apply li {
  counter-increment: step; position: relative;
  display: grid; grid-template-columns: 4.85rem minmax(0, 1fr);
  column-gap: 1.42rem; row-gap: .34rem;
  margin: 0; padding: 1.2rem 0 1.38rem;
  background: transparent; border: 0; border-bottom: 1px solid var(--home-line);
  box-shadow: none; min-height: 0;
}
.bn-note-canvas .bn-apply li:last-child { border-bottom: 0; padding-bottom: 0; }
.bn-note-canvas .bn-apply li::after  { display: none; }
.bn-note-canvas .bn-apply li::before {
  content: counter(step, decimal-leading-zero);
  grid-column: 1; grid-row: 1 / span 2; align-self: start;
  display: block; margin: 0;
  font-family: var(--serif); font-size: clamp(2.18rem, 2.55vw, 3.05rem);
  line-height: .9; font-weight: 345; letter-spacing: -.04em;
  color: var(--home-number); font-variation-settings: "SOFT" 14, "opsz" 96;
}
.bn-note-canvas .bn-apply li b {
  grid-column: 2; display: block; margin: 0 0 .42rem;
  font-family: "Cormorant Garamond", "Playfair Display", var(--serif);
  font-size: clamp(1.18rem, 1.32vw, 1.42rem); line-height: 1.16;
  font-weight: 400; letter-spacing: .018em; text-transform: none;
  color: rgba(23, 22, 19, .96); font-variation-settings: "SOFT" 16, "opsz" 80;
}
.bn-note-canvas .bn-apply li b::before { display: none; }
.bn-note-canvas .bn-apply li span {
  grid-column: 2; display: block; max-width: 44rem; margin: 0;
  font-family: var(--sans); font-size: .98rem; line-height: 1.66; color: rgba(32, 28, 24, .70);
}

@media (hover: hover) and (pointer: fine) {
  .bn-note-canvas .bn-apply li         { transition: transform .28s ease, border-color .28s ease; }
  .bn-note-canvas .bn-apply li::before { transition: color .28s ease, transform .28s ease; }
  .bn-note-canvas .bn-apply li:hover {
    transform: translateX(.14rem); border-bottom-color: rgba(154, 122, 66, .18);
  }
  .bn-note-canvas .bn-apply li:hover::before {
    color: rgba(154, 122, 66, .92); transform: translateX(.04rem);
  }
}

/* ============================================================================
   CIERRE â€” coda "With care â€” Bonum Studio" + retorno Ãºnico a la Library.
   Toda nota cierra idÃ©ntico. EstÃ¡tico, sin condicionales, sin "Next".
   ============================================================================ */
.bn-note-canvas .bn-close { padding: 0; }

/* Coda: raya dorada â†’ WITH CARE â†’ Bonum Studio (protagonista) */
.bn-note-canvas .bn-sign {
  max-width: 30rem; margin: 4.4rem auto 4.2rem; padding-top: 1.35rem;
  text-align: center; position: relative;
}
.bn-note-canvas .bn-sign::before {
  content: ""; display: block; width: 1.85rem; height: 1px; margin: 0 auto 1.5rem;
  background: rgba(154, 122, 66, .42);
}
.bn-note-canvas .bn-sign-intro {
  display: block; margin-bottom: .52rem;
  font-family: var(--sans); font-size: .6rem; line-height: 1; letter-spacing: .28em;
  text-transform: uppercase; font-style: normal; font-weight: 500; color: rgba(27, 24, 21, .38);
}
.bn-note-canvas .bn-sign-studio {
  display: block;
  font-family: var(--serif); font-size: clamp(1.35rem, 2vw, 1.58rem); line-height: 1.05;
  font-style: italic; font-weight: 350; color: rgba(27, 24, 21, .72);
  font-variation-settings: "SOFT" 24, "opsz" 80;
}

/* Retorno a la Library â€” el mismo para todas las notas */
.bn-note-canvas .bn-return {
  max-width: 34rem; margin: 0 auto;
  padding: 3rem 1.2rem 6.6rem; border-top: 1px solid rgba(90, 70, 45, .12);
  text-align: center;
}
.bn-note-canvas .bn-final-line
 {
  max-width: 30rem; margin: 0 auto 1.9rem;
  font-family: var(--serif); font-size: clamp(1.35rem, 2.1vw, 1.72rem); line-height: 1.38;
  font-style: italic; font-weight: 340; color: rgba(27, 24, 21, .62);
  font-variation-settings: "SOFT" 26, "opsz" 80;
}
.bn-note-canvas .bn-library-link {
  display: inline-block;
  font-family: var(--sans); font-size: .68rem; line-height: 1; letter-spacing: .26em;
  text-transform: uppercase; font-weight: 560;
  color: rgba(154, 122, 66, .95);
  border-bottom: 1px solid rgba(154, 122, 66, .42); padding-bottom: .32rem;
  transition: border-color .25s ease, color .25s ease, transform .25s ease;
}
.bn-note-canvas .bn-library-link:hover {
  color: var(--gold); border-color: var(--gold); transform: translateY(-1px);
}

/* ============================================================================
   ÃšNICA EXCEPCIÃ“N DE FRONTERA: spacer blanco antes del footer oscuro.
   Se conserva tal cual estÃ¡ en vivo. (Si algÃºn dÃ­a querÃ©s respetar la regla
   "el canvas nunca estiliza el chrome", esto se muda a footer.php.)
   ============================================================================ */
body.single-post .bonum-footer,
body.single-post .site-footer,
body.single-post footer {
  position: relative;
  margin-top: clamp(5rem, 8vw, 8rem) !important;
}
body.single-post .bonum-footer::before,
body.single-post .site-footer::before,
body.single-post footer::before {
  content: ""; position: absolute; left: 0; right: 0;
  top: calc(clamp(5rem, 8vw, 8rem) * -1);
  height: clamp(5rem, 8vw, 8rem); background: #ffffff;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

/* â”€â”€ Tablet ancho â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
@media (max-width: 1100px) {
  .bn-note-canvas .bn-apply {
    padding-left:  max(1.75rem, calc((100vw - 70rem) / 2));
    padding-right: max(1.75rem, calc((100vw - 70rem) / 2));
    grid-template-columns: minmax(18rem, 21rem) minmax(30rem, 1fr);
    column-gap: 3.4rem;
  }
  .bn-note-canvas .bn-apply .bn-manifesto,
  .bn-note-canvas .bn-apply::before { max-width: 21rem; }
}

/* â”€â”€ Tablet / 980 â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
@media (max-width: 980px) {
  .bn-note-canvas {
    /* el min() con 100vw ya capa el hero; el inset baja un punto */
    --plate-inset-editorial: 29rem;
  }

  .bn-note-canvas .bn-plate-open  { margin: 3.4rem auto 3.8rem; }
  .bn-note-canvas .bn-plate-inset { margin: 4.2rem auto; }
  .bn-note-canvas .bn-lead        { margin-top: 3.8rem; margin-bottom: 2.35rem; }
  .bn-note-canvas .bn-section     { margin-top: 3.8rem; }

  .bn-note-canvas .bn-apply {
    width: 100vw; max-width: none;
    margin-top: 6.6rem; margin-bottom: 7rem;
    padding: 5.8rem max(1.2rem, calc((100vw - 43rem) / 2)) 6.2rem;
    display: block;
  }
  .bn-note-canvas .bn-apply .bn-kicker { width: 100%; margin: 0 0 2.35rem; }
  .bn-note-canvas .bn-apply .bn-manifesto,
  .bn-note-canvas .bn-apply::before {
    width: 100%; max-width: 34rem; margin: 0 0 3rem;
    font-size: clamp(2.15rem, 6vw, 3rem); line-height: 1.06;
  }
  .bn-note-canvas .bn-apply ol { padding-left: 0; border-left: 0; }
}

/* â”€â”€ MÃ³vil / 680 â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
@media (max-width: 680px) {
  .bn-note-canvas {
    --read: 100%; --plate: 100%;
    --plate-open-editorial:  100%;
    --plate-open-max-height: none;
    --plate-inset-editorial: 92%;
    font-size: 17px;
  }

  .bn-note-canvas .bn-wrap { padding-left: 1.2rem; padding-right: 1.2rem; }

  .bn-note-canvas .bn-masthead { padding-top: 4.2rem; }
  .bn-note-canvas .bn-meta { font-size: .55rem; letter-spacing: .24em; gap: .65rem; }
  .bn-note-canvas .bn-meta-rule { margin: 1.3rem auto 2.5rem; }
  .bn-note-canvas .bn-title {
    margin-bottom: 1.5rem; font-size: clamp(2.25rem, 12vw, 3rem); line-height: 1.04;
  }
  .bn-note-canvas .bn-standfirst { font-size: 1.06rem; line-height: 1.58; padding: 0 1.2rem; }
  .bn-note-canvas .bn-section {
    margin: 3.4rem auto 2rem; font-size: clamp(1.5rem, 7vw, 1.9rem);
  }

  .bn-note-canvas .bn-plate-open {
    max-width: 100%; margin: 3.2rem auto 3.8rem;
  }
  .bn-note-canvas .bn-plate-open .bn-plate-img { width: 100%; max-height: none; }
  .bn-note-canvas .bn-plate-inset { max-width: 92%; margin: 3.8rem auto; }

  .bn-note-canvas .bn-figcaption { row-gap: .3rem; }
  .bn-note-canvas .bn-prov { white-space: normal; }

  .bn-note-canvas .bn-body p:not(.bn-lead) { font-size: 1rem; line-height: 1.86; }

  .bn-note-canvas .bn-lead {
    max-width: 22rem; margin: 3.5rem auto 2.2rem; padding-top: 2rem;
    font-size: clamp(1.85rem, 9vw, 2.45rem); line-height: 1.1;
  }
  .bn-note-canvas .bn-endnote .bn-lead { margin-top: 5rem; }

  .bn-note-canvas .bn-apply {
    margin-top: 5.4rem; margin-bottom: 5.8rem;
    padding: 4.9rem 1.2rem 5.4rem;
  }
  .bn-note-canvas .bn-apply .bn-kicker {
    margin-bottom: 2rem; padding-bottom: 1.1rem; font-size: .61rem; letter-spacing: .28em;
  }
  .bn-note-canvas .bn-apply .bn-manifesto,
  .bn-note-canvas .bn-apply::before {
    margin-bottom: 2.7rem; font-size: clamp(1.98rem, 9vw, 2.55rem); line-height: 1.08;
  }
  .bn-note-canvas .bn-apply li {
    grid-template-columns: 4.1rem minmax(0, 1fr); column-gap: 1rem; padding: 1rem 0 1.18rem;
  }
  .bn-note-canvas .bn-apply li::before { font-size: 2.3rem; }
  .bn-note-canvas .bn-apply li b { font-size: 1.08rem; }
  .bn-note-canvas .bn-apply li span { max-width: none; font-size: .97rem; line-height: 1.68; }

  .bn-note-canvas .bn-sign { margin: 3.6rem auto 3.2rem; }

  .bn-note-canvas .bn-return { padding: 2.6rem 1.2rem 5.2rem; }
  .bn-note-canvas .bn-final-line {
    margin-bottom: 1.7rem; font-size: clamp(1.22rem, 5.5vw, 1.5rem); line-height: 1.42;
  }
  .bn-note-canvas .bn-library-link { font-size: .64rem; letter-spacing: .22em; }
}
