/* V1 editorial system — Home. First MUBI Notebook / LRB-style pass
   (2026-08-24, product decision): centered editorial masthead + expandable
   territory nav + image-led content river + flat newsletter band, on the
   site's own paper/ink palette and Instrument Serif display — not MUBI's
   colors/typeface, only the compositional idea. Iterating with feedback. */
html.v1 .intro{position:fixed;inset:0;z-index:900;background:#000;overflow:hidden}
html.v1 .intro[hidden]{display:none}
html.v1 .intro__stage{position:absolute;inset:0;display:grid;place-items:center;background:#000}
html.v1 .intro__video{max-width:100%;max-height:100%;width:auto;height:100%;object-fit:contain;display:block;background:#000}
html.v1 .intro__panel{position:absolute;inset:0;background-image:url('hero-tinta-final.jpg?v=2');background-size:cover;background-position:center;opacity:0;pointer-events:none}
html.v1 .intro__panel--l{clip-path:inset(0 50% 0 0)}
html.v1 .intro__panel--r{clip-path:inset(0 0 0 50%)}

/* El boton de entrar aparece recien cuando la tinta ya se ha ido (T_END del
   video ~4.5s), para no competir con el momento cinematografico; con
   reduced-motion se muestra ya desde el principio, sin animacion. */
@keyframes intro-enter-in{from{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translate(-50%,0)}}
html.v1 .intro__enter{position:absolute;left:50%;bottom:clamp(4.5rem,15vh,7.5rem);z-index:2;transform:translate(-50%,6px);appearance:none;font-family:var(--font-ui);font-weight:600;font-size:1rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dp-paper);background:color-mix(in srgb,#000 25%,transparent);border:1px solid color-mix(in srgb,var(--dp-paper) 55%,transparent);border-radius:999px;padding:.9rem 3rem;cursor:pointer;opacity:0;transition:background .2s ease,border-color .2s ease}
html.v1 .intro__enter:hover,html.v1 .intro__enter:focus-visible{background:color-mix(in srgb,var(--dp-paper) 16%,transparent);border-color:var(--dp-paper)}
@media(prefers-reduced-motion:no-preference){
  html.v1 .intro__enter{animation:intro-enter-in .9s ease-out 4.6s forwards}
}
@media(prefers-reduced-motion:reduce){
  html.v1 .intro__enter{opacity:1;transform:translate(-50%,0)}
}

/* Salida: la foto se parte en dos y cada mitad se desliza a un lado. El
   fondo negro de .intro se vuelve transparente en cuanto empieza a salir,
   para que se vea (y se pueda usar) la Home por debajo sin esperar a que
   .intro se oculte del todo. */
html.v1 .intro--leaving{background:transparent;pointer-events:none;transition:background .3s ease}
html.v1 .intro--leaving .intro__stage{opacity:0;transition:opacity .25s ease}
html.v1 .intro--leaving .intro__enter{animation:none;opacity:0;transition:opacity .2s ease}
html.v1 .intro--leaving .intro__panel{opacity:1;transition:transform .8s cubic-bezier(.65,0,.35,1),opacity .2s ease}
html.v1 .intro--leaving .intro__panel--l{transform:translateX(-100%) rotate(-2deg)}
html.v1 .intro--leaving .intro__panel--r{transform:translateX(100%) rotate(2deg)}
@media(prefers-reduced-motion:reduce){
  html.v1 .intro--leaving{transition:opacity .3s ease;opacity:0}
  html.v1 .intro--leaving .intro__panel{display:none}
}

html.intro-lock{overflow:hidden;height:100%}
html.intro-lock .assistant-widget{display:none}

/* Masthead — LRB's centered logotype: name + kicker, nothing else. No
   author photo here (tried twice at small sizes and it never read as a
   face, just a blob — dropped rather than force a bad crop; his photo
   already carries the Feria/Autor cells further down). */
html.v1 .masthead{max-width:var(--layout-wide);margin:0 auto;padding:clamp(2.5rem,6vw,4rem) var(--page-gutter) clamp(1.75rem,3.5vw,2.5rem);text-align:center;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:.4rem}
html.v1 .masthead__name{margin:0;width:100%;font-family:var(--font-display);font-weight:400;font-size:clamp(2.35rem,1.95rem + 3vw,4.6rem);line-height:.94;letter-spacing:-.02em;overflow-wrap:break-word;text-wrap:balance}
html.v1 .masthead__kicker{margin:0;text-transform:uppercase;letter-spacing:.2em;font-size:.8rem;font-weight:400;color:var(--color-muted)}
@media (max-width:389px){
  html.v1 .masthead__name{font-size:clamp(2.5rem,2.2rem + 6vw,3.4rem)}
}
@media (orientation:landscape) and (max-height:520px) and (pointer:coarse){
  html.v1 .masthead{padding-top:1.5rem;padding-bottom:1.5rem}
}

/* Masthead nav — LRB's all-caps nav row is set in the SAME serif as the
   logotype and body copy, not the sans-serif UI font (that was the earlier
   mistake). Each item can expand a text-only preview panel below on
   hover/focus, reusing the same 5 stable territories the Explorar dialog
   documents (Obras/Autor/Cuaderno/Herramientas/Prensa — no one book gets
   its own top-level slot). :has() drives the reveal, no JS. */
html.v1 .masthead-nav{border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}
html.v1 .masthead-nav__list{max-width:var(--layout-max);margin:0 auto;padding:0 var(--page-gutter);list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem clamp(2rem,4vw,3.5rem)}
html.v1 .masthead-nav__list a{display:inline-flex;align-items:center;overflow:hidden;min-height:52px;text-decoration:none;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.18em;font-size:.92rem;font-weight:400;color:var(--color-text);border-bottom:2px solid transparent}
html.v1 .masthead-nav__list a:hover,html.v1 .masthead-nav__list a:focus-visible{color:var(--color-accent-strong);border-color:var(--color-accent-strong)}
html.v1 .masthead-nav__preview-panel{display:none}
@media (min-width:900px){
  html.v1 .masthead-nav__preview{max-width:var(--layout-wide);margin:0 auto;padding:0 var(--page-gutter)}
  html.v1 .masthead-nav__preview-panel{padding:1.25rem 0}
  html.v1 .masthead-nav__preview-label{margin:0;font-family:var(--font-display);font-size:1.5rem;line-height:1}
  html.v1 .masthead-nav__preview-text{margin:.35rem 0 0;color:var(--color-muted);max-width:52ch}
  html.v1 .masthead-nav:has([data-territory="works-hub"]:hover) [data-preview-panel="works-hub"],
  html.v1 .masthead-nav:has([data-territory="works-hub"]:focus-visible) [data-preview-panel="works-hub"],
  html.v1 .masthead-nav:has([data-territory="author"]:hover) [data-preview-panel="author"],
  html.v1 .masthead-nav:has([data-territory="author"]:focus-visible) [data-preview-panel="author"],
  html.v1 .masthead-nav:has([data-territory="notebook-hub"]:hover) [data-preview-panel="notebook-hub"],
  html.v1 .masthead-nav:has([data-territory="notebook-hub"]:focus-visible) [data-preview-panel="notebook-hub"],
  html.v1 .masthead-nav:has([data-territory="tools-hub"]:hover) [data-preview-panel="tools-hub"],
  html.v1 .masthead-nav:has([data-territory="tools-hub"]:focus-visible) [data-preview-panel="tools-hub"],
  html.v1 .masthead-nav:has([data-territory="press"]:hover) [data-preview-panel="press"],
  html.v1 .masthead-nav:has([data-territory="press"]:focus-visible) [data-preview-panel="press"]{display:grid;border-top:1px solid var(--color-border)}
}
@media (max-width:899px){
  html.v1 .masthead-nav__preview{display:none}
}
@media (max-width:639px){
  html.v1 .masthead-nav__list{display:block;padding:0}
  html.v1 .masthead-nav__list li{border-bottom:1px solid var(--color-border)}
  html.v1 .masthead-nav__list li:first-child{border-top:1px solid var(--color-border)}
  html.v1 .masthead-nav__list a{display:flex;width:100%;min-height:56px;font-size:1.05rem;overflow-wrap:break-word}
}

/* River grid — LRB's actual homepage pattern (inspected live, 2026-08-24):
   a lead image, two text cells (one carrying an eyebrow), a second text row
   where the middle cell is a tinted "from the blog" callout, and a second
   image closing the grid diagonally opposite the first. Hairline dividers
   between cells, no card borders/shadows/rounding — image cells bleed to
   the cell edge, text cells get a small circular arrow like LRB's. */
html.v1 .river-grid{max-width:var(--layout-max);margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"lead samuel premios" "antologia blog feria";border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}
html.v1 .river-cell--lead{grid-area:lead}
html.v1 .river-cell--samuel{grid-area:samuel}
html.v1 .river-cell--premios{grid-area:premios}
html.v1 .river-cell--antologia{grid-area:antologia}
html.v1 .river-cell--blog{grid-area:blog}
html.v1 .river-cell--feria{grid-area:feria}
html.v1 .river-cell{position:relative;min-width:0;display:flex;flex-direction:column;padding:clamp(1.75rem,3vw,2.5rem) var(--page-gutter);border-right:1px solid var(--color-border);border-bottom:1px solid var(--color-border);font-family:var(--font-reading)}
html.v1 .river-cell--premios,html.v1 .river-cell--feria{border-right:0}
html.v1 .river-cell--antologia,html.v1 .river-cell--blog,html.v1 .river-cell--feria{border-bottom:0}
html.v1 .river-cell--blog{background:var(--dp-sky)}
html.v1 .river-cell--lead,html.v1 .river-cell--feria{padding-top:0}
html.v1 .river-cell__media{display:block;aspect-ratio:4/3;overflow:hidden;margin:0 calc(-1 * var(--page-gutter)) clamp(1.25rem,2.5vw,1.75rem);background:var(--surface-quiet)}
html.v1 .river-cell__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--motion-continuity) var(--ease-standard)}
html.v1 .river-cell:hover .river-cell__media img{transform:scale(1.02)}
html.v1 .river-cell .eyebrow{display:block;margin:0 0 .75rem;text-transform:uppercase;letter-spacing:.13em;font-size:.74rem;font-weight:600;font-family:var(--font-ui);color:var(--color-muted)}
html.v1 .river-cell--blog .eyebrow{color:var(--dp-petrol-ink)}
html.v1 .river-cell h3{font-family:var(--font-display);font-weight:400;font-size:clamp(1.25rem,1rem + 1vw,1.65rem);line-height:1.1;margin:0 0 .5rem;text-wrap:balance}
html.v1 .river-cell--lead h3{font-size:clamp(1.65rem,1.18rem + 1.9vw,2.35rem)}
html.v1 .river-cell h3 a{text-decoration:none;color:var(--color-text)}
html.v1 .river-cell h3 a:hover,html.v1 .river-cell h3 a:focus-visible{text-decoration:underline;text-underline-offset:.12em}
html.v1 .river-cell__byline{margin:0 0 .5rem;font-size:.85rem;color:var(--color-muted)}
html.v1 .river-cell>p:last-of-type{margin:0;color:var(--color-muted);max-width:42ch}
html.v1 .river-cell__arrow{margin-top:1.25rem;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:34px;height:34px;border:1px solid var(--color-border);border-radius:50%;color:var(--color-text)}
html.v1 .river-cell__arrow svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:1023px){
  html.v1 .river-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"lead lead" "samuel premios" "antologia blog" "feria feria"}
  html.v1 .river-cell--blog{border-right:0}
  html.v1 .river-cell--antologia,html.v1 .river-cell--blog{border-bottom:1px solid var(--color-border)}
  html.v1 .river-cell--lead h3{font-size:clamp(1.8rem,1.3rem + 2vw,2.4rem)}
}
@media (max-width:599px){
  html.v1 .river-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"lead" "samuel" "premios" "antologia" "blog" "feria"}
  html.v1 .river-cell{border-right:0;border-bottom:1px solid var(--color-border)}
  html.v1 .river-cell--feria{border-bottom:0}
}

/* Comprar — flash-sale-style pink promo band, pointing at the one product
   there is to sell: Samuel entre mundos. */
html.v1 .promo-band{background:var(--dp-blush);display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(1.5rem,4vw,3rem);max-width:var(--layout-wide);margin:0 auto;padding:clamp(2.5rem,5vw,4rem) var(--page-gutter)}
html.v1 .promo-band__cover{width:clamp(90px,14vw,160px);height:auto;box-shadow:var(--shadow-object)}
html.v1 .promo-band__copy h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.58rem,1.32rem + 1.2vw,2.25rem);margin:.35rem 0 .6rem}
html.v1 .promo-band__copy p{max-width:44ch;margin:0 0 1.25rem;color:color-mix(in srgb,var(--dp-ink) 80%,transparent)}
@media (max-width:599px){
  html.v1 .promo-band{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
  html.v1 .promo-band__copy p{margin-inline:auto}
}

/* Newsletter — flat tinted band, centered, inline form: MUBI Notebook's
   "DON'T MISS..." strip, in the warm tan LRB uses for its subscribe band.
   Form markup/IDs untouched (DOI wiring in script.js keys off them); only
   the shell around it changes. */
html.v1 .newsletter{max-width:none;background:color-mix(in srgb,var(--dp-sand) 55%,var(--dp-white));border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);text-align:center;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;padding:clamp(3rem,6vw,5rem) var(--page-gutter)}
html.v1 .newsletter__copy{max-width:44ch}
html.v1 .newsletter .eyebrow{text-transform:uppercase;letter-spacing:.1em;font-size:.76rem;font-weight:700;color:var(--color-muted)}
html.v1 .newsletter h2{font-family:var(--font-ui);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(1.2rem,1.05rem + .8vw,1.6rem);line-height:1.15;margin:.6rem 0 .75rem}
html.v1 .newsletter__copy>p:last-child{color:var(--color-muted);margin:0 0 .5rem}
html.v1 .newsletter__form{width:100%;max-width:34rem;margin-top:1.5rem}
html.v1 .newsletter__form .form-row{display:flex;gap:.6rem}
html.v1 .newsletter__form .form-input{flex:1;min-width:0}
html.v1 .newsletter__form .form-consent{justify-content:center;text-align:left}

@media (max-width:1023px){
  html.v1 main a[href^="mailto:"]{overflow-wrap:anywhere;word-break:break-word}
}
@media (max-width:767px){
  html.v1 .newsletter{padding-top:clamp(3.5rem,14vw,5.5rem);padding-bottom:clamp(3.5rem,14vw,5.5rem)}
  html.v1 .newsletter__form .form-row{flex-direction:column}
}

/* FAQ — native <details>/<summary>, no JS toggle. */
html.v1 .faq-native{grid-column:2;max-width:68ch;display:grid;gap:0}
html.v1 .faq-native details{border-top:1px solid var(--color-border);padding:1.1rem 0}
html.v1 .faq-native details:last-child{border-bottom:1px solid var(--color-border)}
html.v1 .faq-native summary{cursor:pointer;font-weight:600;font-size:1.02rem;list-style:none;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;align-items:baseline}
html.v1 .faq-native summary::-webkit-details-marker{display:none}
html.v1 .faq-native summary::after{content:"+";color:var(--color-muted);font-weight:400;flex:0 0 auto}
html.v1 .faq-native details[open] summary::after{content:"–"}
html.v1 .faq-native details p{margin:.85rem 0 0;color:var(--color-muted);font-family:var(--font-reading);font-size:1.02rem;line-height:1.6;max-width:60ch}
@media(max-width:1199px){html.v1 .faq-native{grid-column:1/-1}}

/* Yale Review prototype, 2026-08-25. This intentionally removes the banner
   rhythm from the enhanced Home and tests a cleaner magazine front page:
   white field, black/blue type, hairline grid and one strong lead story. */
html.v1[data-lrb-home="true"]{
  --surface-page:#fff;
  --surface-quiet:#f7f8f9;
  --color-border:rgba(0,0,0,.18);
  --color-muted:#50565b;
  --color-accent:#1d4f96;
  --color-accent-strong:#1d4f96;
  --home-image-blue:#f1f8fc;
  --home-image-blue-deep:#e5f3fa;
  background:#fff;
}
html.v1[data-lrb-home="true"] body,
html.v1[data-lrb-home="true"] .v1-main,
html.v1[data-lrb-home="true"] main,
html.v1[data-lrb-home="true"] .editorial-home-flow{background:#fff;color:#030303}
html.v1[data-lrb-home="true"] .masthead-sticky,
html.v1[data-lrb-home="true"] .masthead-sticky__inner,
html.v1[data-lrb-home="true"] .masthead{
  background:#fff;
  box-shadow:none;
}
html.v1[data-lrb-home="true"] .masthead{
  width:min(100%,var(--layout-wide));
  padding:clamp(.65rem,1.7vw,1.25rem) var(--page-gutter) clamp(.55rem,1.2vw,.85rem);
  justify-items:center;
}
html.v1[data-lrb-home="true"] .masthead__name{font-family:var(--font-ui);font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:#060606}
html.v1[data-lrb-home="true"] .masthead__name.has-logo-image{min-height:clamp(96px,9.2vw,132px);place-items:center}
html.v1[data-lrb-home="true"] .masthead__logo-image{
  /* height first, width derived from the image's real 1208x353 ratio (not a
     separate viewport-relative width) -- a box wider than that ratio made
     object-fit:contain letterbox ~61px of empty space on each side, which
     read as the avatar sitting much farther from the wordmark than the
     8.8px flex gap alone would suggest. max-width is only a safety cap for
     very narrow containers, not the normal sizing driver. */
  width:auto;
  max-width:min(48vw,560px);
  height:128px;
  object-fit:contain;
  object-position:center center;
  margin:0 auto;
}
html.v1[data-lrb-home="true"] .masthead__kicker{font-family:var(--font-ui);font-weight:800;color:#1d4f96;letter-spacing:.15em}
/* The wavy version (a repeated sine-wave SVG tile) was tried and rejected
   by the author -- "no me gustan las ondas, mejor igual que el section
   break de abajo para que encaje" -- so this is now the exact same
   double-line + diamond motif as .yale-home-section etc. below, just
   anchored to the bottom of the nav instead of the top of a section. */
html.v1[data-lrb-home="true"] .masthead-nav{
  background:#fff;
  border-top:0;
  border-bottom:0;
  box-shadow:none;
  position:relative;
  padding-bottom:8px;
  background-image:linear-gradient(#1d4f96,#1d4f96),linear-gradient(#b8860b,#b8860b);
  background-repeat:no-repeat,no-repeat;
  background-size:100% 1.5px,100% 1.5px;
  background-position:left bottom 5px,left bottom;
}
html.v1[data-lrb-home="true"] .masthead-nav::after{
  content:"";
  position:absolute;
  bottom:1.3px;
  left:50%;
  width:8px;
  height:8px;
  background:#1d4f96;
  transform:translate(-50%,50%) rotate(45deg);
  pointer-events:none;
}
html.v1[data-lrb-home="true"] .masthead-nav__list{justify-content:center;gap:clamp(1.4rem,3.2vw,3rem)}
html.v1[data-lrb-home="true"] .masthead-nav__list a{
  min-height:48px;
  font-family:var(--font-ui);
  font-weight:800;
  letter-spacing:.05em;
  font-size:.82rem;
  color:#050505;
}
html.v1[data-lrb-home="true"] .masthead-nav__list a:hover,
html.v1[data-lrb-home="true"] .masthead-nav__list a:focus-visible{color:#1d4f96;border-color:#1d4f96}

html.v1[data-lrb-home="true"] .yale-home-flow{
  box-sizing:border-box;
  width:min(100%,var(--layout-max));
  margin:0 auto;
  padding:clamp(1.7rem,3.4vw,2.7rem) var(--page-gutter) clamp(2.2rem,4.4vw,3.6rem);
  background:#fff;
}
html.v1[data-lrb-home="true"] .yale-home-flow :is(section,article,aside,div,header,h1,h2,h3,p,a){
  min-width:0;
  max-width:100%;
}
html.v1[data-lrb-home="true"] .yale-home-issue__heading{
  display:grid;
  gap:.4rem;
  margin-bottom:clamp(.6rem,1.2vw,1rem);
}
/* Every other section eyebrow on the page ("Obras", "Universo publicado",
   "Para escribir", "Leer y recursos", "Agenda · Archivo") now shares the
   hero kicker's exact style (author request: "OBRAS ponerlo como obra
   actual" -- unify text-by-text, not just colours) -- same font, size,
   gold, and underline highlight. Scoped to the section-head eyebrow only
   (.yale-home-section__head/.home-events__head), not every card-level
   .editorial-card__eyebrow sitewide, which would be far too heavy applied
   to every small label in a dense grid. */
html.v1[data-lrb-home="true"] .yale-home-issue__kicker,
html.v1[data-lrb-home="true"] .yale-home-section__head .editorial-card__eyebrow,
html.v1[data-lrb-home="true"] .home-events__head .editorial-card__eyebrow,
html.v1[data-lrb-home="true"] .install-web .editorial-card__eyebrow,
html.v1[data-lrb-home="true"] .yale-signup__copy .editorial-card__eyebrow{
  position:relative;
  display:inline-block;
  /* .yale-home-issue__heading is display:grid, and a grid item's default
     justify-self is stretch -- so despite display:inline-block, this <p>
     was stretching to the full grid-column width (way past the "Obra
     actual" text), and the ::before underline below (sized relative to
     this box) stretched with it into the stray line the underline was
     supposed to not be. justify-self:start (plus width:fit-content as a
     belt-and-suspenders for non-grid contexts) keeps the box shrunk to
     its own text. */
  justify-self:start;
  width:fit-content;
  margin:0 0 -.1rem;
  font-family:'Yellowtail',var(--font-ui),cursive;
  /* Floor raised from 1.3rem to 1.5rem (24px): WCAG 1.4.3's relaxed 3:1
     contrast minimum for "large text" only applies at >=24px regular
     weight -- below that this needs the full 4.5:1, which a gold-on-white
     gradient can't clear at its lighter end without losing the gold look
     entirely (verified: #f0c467 was 1.64:1 against white, failing even the
     large-text floor). */
  font-size:clamp(1.5rem,2.4vw,1.7rem);
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
  /* Darkened from #f0c467 to #b8860b (darkgoldenrod) -- #f0c467 measured
     1.64:1 against white (fails even the large-text 3:1 floor); #b8860b
     measures 3.25:1, clearing it. Flat colour, not the previous 3-stop
     gradient into #a8681f/#7a4a15 -- those are orange/brown, the same
     off-hue mistake fixed on the h1 below, and having the kicker on a
     different gold than everywhere else (h1 stroke, avatar ring, nav wave)
     was exactly the inconsistency the author flagged. #b8860b is now the
     one gold used everywhere; #1d4f96 is the one blue. */
  color:#b8860b;
}
/* Subtle underline highlight spanning the full "Obra actual" width, cropped
   from the same reference sheet as the header avatar frame ("Recursos
   diseño web" > highlights, thin diagonal streak), recolored to the site's
   blue (matches the h1 gradient below it) instead of its original gold. */
html.v1[data-lrb-home="true"] .yale-home-issue__kicker::before,
html.v1[data-lrb-home="true"] .yale-home-section__head .editorial-card__eyebrow::before,
html.v1[data-lrb-home="true"] .home-events__head .editorial-card__eyebrow::before,
html.v1[data-lrb-home="true"] .install-web .editorial-card__eyebrow::before,
html.v1[data-lrb-home="true"] .yale-signup__copy .editorial-card__eyebrow::before{
  content:"";
  position:absolute;
  left:-3%;
  right:-3%;
  bottom:.06em;
  height:.55em;
  background:url(/assets/highlight-8-blue-rect.png) center/100% 100% no-repeat;
  opacity:.8;
  pointer-events:none;
}
html.v1[data-lrb-home="true"] .yale-home-issue h1{
  margin:0;
  /* .yale-home-issue__heading is display:grid, so like the kicker above,
     this h1 was stretching to the full grid-column width -- width:fit-content
     keeps its box matched to the actual text instead. */
  width:fit-content;
  font-family:var(--font-ui);
  font-weight:800;
  font-size:clamp(1.9rem,3.8vw,3.6rem);
  line-height:.96;
  letter-spacing:-.018em;
  /* Solid blue + thin gold outline (option 3 of the 5-way comparison) --
     a blue-to-gold gradient was tried at several splits (50/50, 70/30) and
     a vertical version, all rejected by the author. #1d4f96 (8.04:1
     against white) for the fill, #b8860b (goldenrod, already validated for
     the kicker) for the stroke. */
  color:#1d4f96;
  -webkit-text-stroke:0.35px rgba(184,134,11,.55);
  overflow-wrap:anywhere;
  text-wrap:balance;
}
/* align-items:stretch (author request) so .yale-rail's box -- and its
   border-left -- stretches down to match the taller .yale-lead column,
   instead of stopping short at the rail's own (shorter) content and
   leaving a gap before the next section's top divider. That gap was the
   "sube la section break para que se una con la línea vertical" ask: with
   align-items:start the two grid items sized independently, so the rail's
   border-left ended well above where the divider actually sat. */
html.v1[data-lrb-home="true"] .yale-home-issue__grid{
  display:grid;
  grid-template-columns:minmax(0,2.15fr) minmax(18rem,.85fr);
  gap:clamp(1.75rem,4vw,3rem);
  align-items:stretch;
}
/* align-items:center (author request) so the "La nueva novela..." copy
   centers against the book cover image instead of both just starting flush
   at the top when the image is taller than the text. */
html.v1[data-lrb-home="true"] .yale-lead{
  display:grid;
  grid-template-columns:minmax(13rem,.88fr) minmax(0,1.12fr);
  gap:clamp(1.4rem,3vw,2.4rem);
  align-items:center;
}
/* Corner-bracket frame (author request) instead of the plain gray
   left+bottom border -- two nested L-brackets per corner (outer blue,
   inner gold, matching the avatar ring/section-break palette), top-left
   and bottom-right, from the same reference sheet as the ring. One SVG
   asset drawn for the top-left orientation; the bottom-right copy is just
   that image rotated 180deg, since a top-left bracket rotated a half-turn
   is exactly a bottom-right one. */
html.v1[data-lrb-home="true"] .yale-lead__media{
  display:grid;
  min-height:clamp(19rem,33vw,28rem);
  place-items:center;
  background:transparent;
  border:0;
  position:relative;
  overflow:hidden;
}
html.v1[data-lrb-home="true"] .yale-lead__media::before,
html.v1[data-lrb-home="true"] .yale-lead__media::after{
  content:"";
  position:absolute;
  width:34px;
  height:34px;
  background:url(/assets/corner-bracket-blue-gold.svg) center/contain no-repeat;
  pointer-events:none;
}
html.v1[data-lrb-home="true"] .yale-lead__media::before{top:0;left:0}
html.v1[data-lrb-home="true"] .yale-lead__media::after{bottom:0;right:0;transform:rotate(180deg)}
html.v1[data-lrb-home="true"] .yale-lead__media img{
  width:min(68%,20rem);
  height:auto;
  max-height:88%;
  object-fit:contain;
  filter:drop-shadow(0 16px 22px rgba(0,0,0,.16));
}
html.v1[data-lrb-home="true"] .yale-lead__copy h2,
html.v1[data-lrb-home="true"] .yale-tile h3,
html.v1[data-lrb-home="true"] .yale-rail-card h3,
html.v1[data-lrb-home="true"] .home-events h2,
html.v1[data-lrb-home="true"] .home-event h3,
html.v1[data-lrb-home="true"] .install-web h2,
html.v1[data-lrb-home="true"] .yale-signup h2{
  font-family:var(--font-ui);
  font-weight:800;
  letter-spacing:-.018em;
  color:#050505;
  overflow-wrap:anywhere;
}
html.v1[data-lrb-home="true"] .yale-lead__copy h2{
  margin:.35rem 0 .55rem;
  font-size:clamp(1.7rem,3.3vw,3.05rem);
  line-height:1;
  max-width:12ch;
}
html.v1[data-lrb-home="true"] .yale-lead__copy h2 a,
html.v1[data-lrb-home="true"] .yale-tile h3 a,
html.v1[data-lrb-home="true"] .yale-rail-card h3 a,
html.v1[data-lrb-home="true"] .home-event h3 a{color:inherit;text-decoration:none}
html.v1[data-lrb-home="true"] .yale-lead__copy h2 a:hover,
html.v1[data-lrb-home="true"] .yale-tile h3 a:hover,
html.v1[data-lrb-home="true"] .yale-rail-card h3 a:hover,
html.v1[data-lrb-home="true"] .home-event h3 a:hover{text-decoration:underline;text-decoration-color:#1d4f96;text-underline-offset:.12em}
html.v1[data-lrb-home="true"] .yale-lead__deck{
  margin:.2rem 0 .75rem;
  max-width:19ch;
  font-family:var(--font-display);
  font-size:clamp(1.45rem,2.7vw,2.35rem);
  line-height:1;
  letter-spacing:-.02em;
}
html.v1[data-lrb-home="true"] .yale-lead__actions{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;margin-top:1.35rem}
/* The cursive/gradient treatment used to be a separate --gradient modifier
   class, only ever added to the hero's "Ver la obra"/"Leer fragmentos" and
   the sidebar rail's "Abrir" links. Every other "Abrir"/"Todas las X"/"Ver
   X" link on the page kept the plain uppercase-sans style, which is what
   the author meant by "Abrir todo sin cambiar la letra... como los de las
   manecillas" -- the hero's own links already had this look, nothing else
   did. Folded straight into the base .yale-text-link rule instead of
   requiring the modifier class at every call site, since manually adding
   it to each of the ~12 other addTextLink() calls is exactly the kind of
   thing that's already been missed more than once this session. */
html.v1[data-lrb-home="true"] .yale-text-link{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  min-height:30px;
  font-family:'Yellowtail',var(--font-ui),cursive;
  font-size:1.15rem;
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
  color:#1d4f96;
  text-decoration:none;
}
html.v1[data-lrb-home="true"] .yale-lead__copy .editorial-card__meta{display:block;margin-top:.85rem}
html.v1[data-lrb-home="true"] .yale-text-link:hover,
html.v1[data-lrb-home="true"] .yale-text-link:focus-visible{color:#0d2c57}
html.v1[data-lrb-home="true"] .yale-text-link::after{content:"\2192";color:currentColor}
/* Same cursive treatment as .yale-text-link (author: "agenda archivo
   tampoco has hecho todo lo que he pedido") -- .home-event__link is a
   separate class for the same "Abrir" role inside the events cards. */
html.v1[data-lrb-home="true"] .home-event__link{
  font-family:'Yellowtail',var(--font-ui),cursive;
  font-size:1.15rem;
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
  color:#1d4f96;
  text-decoration:none;
}
html.v1[data-lrb-home="true"] .home-event__link:hover,
html.v1[data-lrb-home="true"] .home-event__link:focus-visible{color:#004f73}
html.v1[data-lrb-home="true"] .home-event__link::after{content:"\2192";margin-left:.35rem;color:currentColor}
/* Rail dividers unified to the page's blue/gold palette (author request) --
   #1d4f96 replaces the plain #0075b8. Clarified after the first pass: not
   one divider blue and the next gold, but every divider is its own 3-line
   stack (blue, then a slightly wider gold, then blue again) directly under
   each card's "Abrir" link. Each card is pulled flush to the rail's own
   left edge (negative margin-left cancelling the rail's padding-left,
   padding-left re-added on the card so the text keeps the same indent) so
   the stack actually touches the rail's border-left at the corner instead
   of stopping short at the padding gap -- the "join the two lines" part of
   the request. */
/* background-image instead of border-left: browsers round sub-pixel
   border-width to the nearest device pixel (2.5px was rendering as 2px),
   so it never actually matched the 2.5px gold horizontal lines it was
   supposed to equal (author's "es del mismo grosor?" question -- it
   wasn't). A background gradient isn't rounded the same way, so this now
   renders at the same true thickness. */
html.v1[data-lrb-home="true"] .yale-rail{
  background-image:linear-gradient(90deg,#1d4f96,#1d4f96);
  background-repeat:no-repeat;
  background-size:2.5px 100%;
  background-position:top left;
  padding-left:clamp(1.2rem,2.6vw,2rem);
}
html.v1[data-lrb-home="true"] .yale-rail-card{
  margin-left:calc(-1 * clamp(1.2rem,2.6vw,2rem));
  padding:clamp(1.2rem,2vw,1.7rem) 0 clamp(1.2rem,2vw,1.7rem) clamp(1.2rem,2.6vw,2rem);
  border-bottom:0;
  background-image:linear-gradient(#1d4f96,#1d4f96),linear-gradient(#b8860b,#b8860b),linear-gradient(#1d4f96,#1d4f96);
  background-repeat:no-repeat,no-repeat,no-repeat;
  background-size:100% 1.5px,100% 2.5px,100% 1.5px;
  background-position:left bottom 8px,left bottom 4px,left bottom 0;
}
html.v1[data-lrb-home="true"] .yale-rail-card:last-child{background-image:none}
html.v1[data-lrb-home="true"] .yale-rail-card:first-child{padding-top:0}
html.v1[data-lrb-home="true"] .yale-rail-card h3{margin:.4rem 0 .35rem;font-size:clamp(1.2rem,1.75vw,1.6rem);line-height:1.1}
html.v1[data-lrb-home="true"] .yale-rail-card p:not(.editorial-card__eyebrow){margin:0 0 .75rem;font-family:var(--font-reading);font-size:1.05rem;line-height:1.35}

/* Section-break rule redone in the same double-line/diamond-accent motif as
   the header avatar ring and the masthead-nav wave (author request: "usa lo
   mismo que has usado para el anillo de la foto... en formato línea recta
   no círculo") -- two thin horizontal lines (via layered background
   gradients, so they stretch cleanly to any section width with no
   distortion) plus a small diamond centered on top via ::after (a fixed
   px size, not stretched, so it stays a true diamond instead of an
   ellipse). #1d4f96 (blue, top line) and #b8860b (gold, bottom line) --
   the same two tones used everywhere else on this page now -- replace the
   plain #0075b8 border for consistency. */
/* margin-top:0, not clamp(): every one of these sections is always
   preceded by another one (hero/works/samuel/tools/reading/events/install-
   web), never the page's own top, so a nonzero margin-top here just
   reopened the gap between a preceding vertical divider (.yale-rail,
   .yale-feature-book, .home-events__grid) and this section's own top
   divider -- confirmed via measurement: Samuel's book stretched correctly
   to match its sibling column (align-items:stretch is the grid default
   here, no override needed), but a 35px gap still opened up before
   Herramientas' divider purely from this margin. Zeroing it here fixes
   every section transition at once instead of special-casing the one
   after the hero. */
/* padding-top raised from 8px (barely more than the divider lines'
   own height) to 28px -- author: "Libros y territorios está muy pegado a
   universo publicado, no dejas mínimo margen". margin-top stays 0 (that's
   what keeps the divider flush with the previous section's vertical
   line); this is a separate space, AFTER the divider, before this
   section's own heading content starts. */
html.v1[data-lrb-home="true"] .yale-home-section,
html.v1[data-lrb-home="true"] .home-events,
html.v1[data-lrb-home="true"] .install-web,
html.v1[data-lrb-home="true"] .yale-signup{
  position:relative;
  margin-top:0;
  border-top:0;
  padding-top:28px;
  background-image:linear-gradient(#1d4f96,#1d4f96),linear-gradient(#b8860b,#b8860b);
  background-repeat:no-repeat,no-repeat;
  background-size:100% 1.5px,100% 1.5px;
  background-position:top left,left 5px;
}
html.v1[data-lrb-home="true"] .yale-home-section::after,
html.v1[data-lrb-home="true"] .home-events::after,
html.v1[data-lrb-home="true"] .install-web::after,
html.v1[data-lrb-home="true"] .yale-signup::after{
  content:"";
  position:absolute;
  top:1.3px;
  left:50%;
  width:8px;
  height:8px;
  background:#1d4f96;
  transform:translate(-50%,-50%) rotate(45deg);
  pointer-events:none;
}
/* .home-events's own horizontal padding (v1-home-editorial-v3.css) assumes
   it spans a full 100vw band and recenters itself with
   (100vw - layout-max)/2. It actually sits inside .yale-home-flow, which is
   already capped and centered at --layout-max, so on very wide viewports
   (2560px+) that recentering math double-applies and collapses the
   section's inner width to 0. Neutralize the horizontal component here,
   same as .install-web/.yale-signup already do below. */
html.v1[data-lrb-home="true"] .home-events{padding-left:0;padding-right:0}
/* Extra bottom padding (author: "en herramientas hace falta un pelín de
   margen entre las cajas y el título") -- most noticeable on the bordered
   tool-card grid, but applied to every section head for consistency. */
html.v1[data-lrb-home="true"] .yale-home-section__head,
html.v1[data-lrb-home="true"] .home-events__head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:1rem;
  align-items:end;
  padding:1.1rem 0 1.7rem;
}
/* Same blue-fill + gold-outline treatment as the hero h1 (author request:
   "Libros y territorios como las manecillas") -- colour/effect only, kept
   at each section's own (smaller) font-size rather than also matching the
   hero's much larger one. */
html.v1[data-lrb-home="true"] .yale-home-section__head h2,
html.v1[data-lrb-home="true"] .home-events h2{
  margin:.35rem 0 0;
  font-size:clamp(1.55rem,2.6vw,2.3rem);
  line-height:1.05;
  color:#1d4f96;
  -webkit-text-stroke:0.35px rgba(184,134,11,.55);
}
html.v1[data-lrb-home="true"] .yale-tile-grid,
html.v1[data-lrb-home="true"] .home-events__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid #b8860b;
  border-left:1px solid #1d4f96;
}
html.v1[data-lrb-home="true"] .yale-tile-grid--reading{grid-template-columns:repeat(4,minmax(0,1fr))}
html.v1[data-lrb-home="true"] .yale-tile-grid--tools{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Libros y territorios: only the two flagship books (Manecillas, Samuel)
   get an L accent (a real capital "L": left + bottom, not left + top); the
   antología stays completely unlined. The grid has no gap between cells
   (see .yale-tile-grid above -- no gap: declared, so it defaults to 0), so
   a full-height/width border on each cell would butt straight into the
   neighbouring cell's own border with zero seam and read as one continuous
   line instead of two separate marks. A short, fixed-length corner bracket
   anchored to each tile's own bottom-left corner has no such dependency on
   gap math -- it physically cannot touch the next tile's bracket. */
html.v1[data-lrb-home="true"] .yale-tile-grid--works{border-top:0;border-left:0}
html.v1[data-lrb-home="true"] .yale-tile-grid--works .yale-tile{background:transparent;border:0}
html.v1[data-lrb-home="true"] .yale-tile-grid--works .yale-tile:nth-child(1),
html.v1[data-lrb-home="true"] .yale-tile-grid--works .yale-tile:nth-child(2),
html.v1[data-lrb-home="true"] .yale-tile-grid--works .yale-tile:nth-child(3){position:relative}
html.v1[data-lrb-home="true"] .yale-tile-grid--works .yale-tile:nth-child(1)::before,
html.v1[data-lrb-home="true"] .yale-tile-grid--works .yale-tile:nth-child(2)::before,
html.v1[data-lrb-home="true"] .yale-tile-grid--works .yale-tile:nth-child(3)::before{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:1px;
  height:2.25rem;
  background:#1d4f96;
}
html.v1[data-lrb-home="true"] .yale-tile-grid--works .yale-tile:nth-child(1)::after,
html.v1[data-lrb-home="true"] .yale-tile-grid--works .yale-tile:nth-child(2)::after,
html.v1[data-lrb-home="true"] .yale-tile-grid--works .yale-tile:nth-child(3)::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:2.25rem;
  height:1px;
  background:#b8860b;
}
/* Gray grid lines (rgba(0,0,0,.18)) recoloured to the page's blue/gold
   (author request: "los cuadros grises como el azul y amarillo") -- the
   vertical separators between cards in blue, the horizontal ones in gold,
   so both tones show rather than picking just one. */
html.v1[data-lrb-home="true"] .yale-tile,
html.v1[data-lrb-home="true"] .home-event{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:clamp(1.1rem,2vw,1.55rem);
  background:#fff;
  border-right:1px solid #1d4f96;
  border-bottom:1px solid #b8860b;
}
html.v1[data-lrb-home="true"] .yale-tile{min-height:18rem}
html.v1[data-lrb-home="true"] .home-event{gap:.35rem}
html.v1[data-lrb-home="true"] .yale-tile--blue{background:#eefaff}
/* Same corner-bracket frame as .yale-lead__media/.yale-feature-book__media
   (author: "los 3 libros siguen con el marco gris") -- a third, independent
   instance of the same plain gray border, on the image container nested
   inside each works-grid tile (separate from that tile's own small
   bottom-left accent near "Abrir", which stays as its own thing). */
html.v1[data-lrb-home="true"] .yale-tile__media{
  display:grid;
  place-items:end center;
  min-height:13rem;
  margin:calc(-1 * clamp(1.1rem,2vw,1.55rem)) calc(-1 * clamp(1.1rem,2vw,1.55rem)) 1rem;
  background:transparent;
  border:0;
  position:relative;
  overflow:hidden;
}
html.v1[data-lrb-home="true"] .yale-tile__media::before,
html.v1[data-lrb-home="true"] .yale-tile__media::after{
  content:"";
  position:absolute;
  width:28px;
  height:28px;
  background:url(/assets/corner-bracket-blue-gold.svg) center/contain no-repeat;
  pointer-events:none;
}
html.v1[data-lrb-home="true"] .yale-tile__media::before{top:0;left:0}
html.v1[data-lrb-home="true"] .yale-tile__media::after{bottom:0;right:0;transform:rotate(180deg)}
html.v1[data-lrb-home="true"] .yale-tile__media img{
  width:min(58%,12rem);
  max-height:14rem;
  object-fit:contain;
  filter:drop-shadow(0 11px 16px rgba(0,0,0,.14));
}
html.v1[data-lrb-home="true"] .yale-tile h3{margin:.45rem 0 .45rem;font-size:clamp(1.2rem,1.75vw,1.56rem);line-height:1.08}
html.v1[data-lrb-home="true"] .yale-tile p:not(.editorial-card__eyebrow),
html.v1[data-lrb-home="true"] .home-event p,
html.v1[data-lrb-home="true"] .install-web p,
html.v1[data-lrb-home="true"] .yale-signup p{
  margin:0 0 1rem;
  font-family:var(--font-reading);
  line-height:1.45;
  color:#2a2e31;
}
html.v1[data-lrb-home="true"] .yale-tile .yale-text-link,
html.v1[data-lrb-home="true"] .home-event .yale-text-link,
html.v1[data-lrb-home="true"] .home-event__link{margin-top:auto;align-self:flex-start}
html.v1[data-lrb-home="true"] .yale-feature__grid,
html.v1[data-lrb-home="true"] .home-events__feature{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(1.75rem,4vw,3rem);
}
html.v1[data-lrb-home="true"] .yale-feature__grid--reverse{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}
/* Stack + cards echo .yale-rail's single accent rule instead of the boxed
   ledger grid used by the tile components -- this is the hero's own
   "reversed" layout, not a spreadsheet of cells. */
html.v1[data-lrb-home="true"] .yale-feature__stack,
html.v1[data-lrb-home="true"] .home-events__grid{
  display:grid;
  grid-template-columns:1fr;
}
/* Unified with .yale-rail's system (author request: apply the new
   blue/gold motif across the whole home page, not just the hero) --
   background-image instead of border-left (border-width rounds to the
   nearest device pixel and wouldn't reliably match the gold line weight),
   #1d4f96 instead of #0075b8, and the same 3-line blue/gold/blue stack
   under each card instead of a single flat border-bottom. */
html.v1[data-lrb-home="true"] .home-events__grid{
  background-image:linear-gradient(90deg,#1d4f96,#1d4f96);
  background-repeat:no-repeat;
  background-size:2.5px 100%;
  background-position:top left;
  padding-left:clamp(1.2rem,2.6vw,2rem);
}
/* The accent rail sits between the two columns (as it does for Manecillas'
   own .yale-lead/.yale-rail pair), not at the section's outer edge -- for
   Samuel's mirrored layout the book card is the second/right column, so it
   carries the border instead of the stack. */
html.v1[data-lrb-home="true"] .yale-feature-book{
  background-image:linear-gradient(90deg,#1d4f96,#1d4f96);
  background-repeat:no-repeat;
  background-size:2.5px 100%;
  background-position:top left;
  padding-left:clamp(1.2rem,2.6vw,2rem);
}
html.v1[data-lrb-home="true"] .yale-feature-card,
html.v1[data-lrb-home="true"] .home-events__grid .home-event{
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  margin-left:calc(-1 * clamp(1.2rem,2.6vw,2rem));
  padding:clamp(1.2rem,2vw,1.7rem) 0 clamp(1.2rem,2vw,1.7rem) clamp(1.2rem,2.6vw,2rem);
  background-image:linear-gradient(#1d4f96,#1d4f96),linear-gradient(#b8860b,#b8860b),linear-gradient(#1d4f96,#1d4f96);
  background-repeat:no-repeat,no-repeat,no-repeat;
  background-size:100% 1.5px,100% 2.5px,100% 1.5px;
  background-position:left bottom 8px,left bottom 4px,left bottom 0;
  border-right:0;
}
html.v1[data-lrb-home="true"] .yale-feature-card:last-child,
html.v1[data-lrb-home="true"] .home-events__grid .home-event:last-child{background-image:none}
html.v1[data-lrb-home="true"] .yale-feature-card:first-child,
html.v1[data-lrb-home="true"] .home-events__grid .home-event:first-child{padding-top:0}
/* Mirrors .yale-lead's own media|copy split (photo beside text) instead of
   stacking the cover above the description -- same system as the hero, but
   reversed at BOTH levels: the book card sits on the opposite side of the
   section from the hero's lead (see .yale-feature__grid--reverse), and the
   media/copy order inside the card is flipped too (text first, cover last)
   so the whole read is a true mirror end to end, not just an outer swap. */
html.v1[data-lrb-home="true"] .yale-feature-book{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(11rem,.9fr);
  gap:clamp(1.2rem,2.6vw,2rem);
  align-items:start;
  min-height:12rem;
  /* NOT background:transparent -- that's a shorthand and clobbers the
     accent-rail background-image set on this same selector earlier in the
     file (same specificity, this rule wins by being later), which is
     exactly what was silently breaking Samuel's vertical divider. */
}
html.v1[data-lrb-home="true"] .yale-feature-book__body{order:1}
html.v1[data-lrb-home="true"] .yale-feature-book__media{order:2}
html.v1[data-lrb-home="true"] .yale-feature-card h3,
html.v1[data-lrb-home="true"] .yale-feature-book h3{
  margin:.45rem 0 .45rem;
  font-family:var(--font-ui);
  font-size:clamp(1.28rem,2vw,1.78rem);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-.018em;
  color:#050505;
}
html.v1[data-lrb-home="true"] .yale-feature-card h3 a,
html.v1[data-lrb-home="true"] .yale-feature-book h3 a{color:inherit;text-decoration:none}
html.v1[data-lrb-home="true"] .yale-feature-card h3 a:hover,
html.v1[data-lrb-home="true"] .yale-feature-book h3 a:hover{text-decoration:underline;text-decoration-color:#1d4f96;text-underline-offset:.12em}
html.v1[data-lrb-home="true"] .yale-feature-card p:not(.editorial-card__eyebrow),
html.v1[data-lrb-home="true"] .yale-feature-book p:not(.editorial-card__eyebrow){
  margin:0 0 1rem;
  font-family:var(--font-reading);
  line-height:1.45;
  color:#2a2e31;
}
html.v1[data-lrb-home="true"] .yale-feature-card .yale-text-link,
html.v1[data-lrb-home="true"] .yale-feature-book .yale-text-link{margin-top:auto;align-self:flex-start}
/* Same corner-bracket frame as the hero's .yale-lead__media (author: "la
   foto del libro no tiene el marco") -- this was still the old plain gray
   border, missed when the hero's own version was fixed since the two use
   different class names despite looking identical. */
html.v1[data-lrb-home="true"] .yale-feature-book__media{
  display:grid;
  min-height:clamp(18rem,28vw,24rem);
  place-items:center;
  background:transparent;
  border:0;
  position:relative;
  overflow:hidden;
}
html.v1[data-lrb-home="true"] .yale-feature-book__media::before,
html.v1[data-lrb-home="true"] .yale-feature-book__media::after{
  content:"";
  position:absolute;
  width:34px;
  height:34px;
  background:url(/assets/corner-bracket-blue-gold.svg) center/contain no-repeat;
  pointer-events:none;
}
html.v1[data-lrb-home="true"] .yale-feature-book__media::before{top:0;left:0}
html.v1[data-lrb-home="true"] .yale-feature-book__media::after{bottom:0;right:0;transform:rotate(180deg)}
html.v1[data-lrb-home="true"] .yale-feature-book__media img{
  width:min(54%,13rem);
  height:auto;
  max-height:20rem;
  object-fit:contain;
  filter:drop-shadow(0 14px 20px rgba(0,0,0,.15));
}
html.v1[data-lrb-home="true"] .yale-feature-book__body{min-width:0}
html.v1[data-lrb-home="true"] .home-events__feature{grid-template-columns:minmax(0,1.18fr) minmax(18rem,.82fr)}
html.v1[data-lrb-home="true"] .home-events__grid{border-top:0}
html.v1[data-lrb-home="true"] .home-event--lead{padding:0;min-height:0;background:transparent;border:0}
html.v1[data-lrb-home="true"] .home-event--lead time,
html.v1[data-lrb-home="true"] .home-event--lead h3,
html.v1[data-lrb-home="true"] .home-event--lead p,
html.v1[data-lrb-home="true"] .home-event--lead .home-event__link{margin-left:clamp(1.1rem,2vw,1.55rem);margin-right:clamp(1.1rem,2vw,1.55rem)}
html.v1[data-lrb-home="true"] .home-event--lead time{margin-top:clamp(1.1rem,2vw,1.55rem)}
html.v1[data-lrb-home="true"] .home-event--lead .home-event__link{margin-bottom:clamp(1.1rem,2vw,1.55rem)}
html.v1[data-lrb-home="true"] .home-event__media{
  display:block;
  aspect-ratio:16/10;
  background:#eef8fc;
  border-bottom:1px solid #b8860b;
  overflow:hidden;
}
html.v1[data-lrb-home="true"] .home-event--lead .home-event__media{aspect-ratio:4/5}
html.v1[data-lrb-home="true"] .home-event__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 40%;
  filter:saturate(.9) contrast(.98);
}
html.v1[data-lrb-home="true"] .home-event time{font-family:var(--font-ui);font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#1d4f96}
/* Lives inside .home-events__grid, as a 4th stacked item after the three
   event cards -- not a separate full-width bar below the whole feature
   grid. Its own copy is short enough not to need the events' time/link
   layout, so it keeps a compact block layout instead of the row's flex. */
html.v1[data-lrb-home="true"] .home-events__cta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.6rem;
  padding:clamp(1.1rem,2vw,1.55rem);
  background:#eefaff;
  border-right:1px solid #1d4f96;
  border-bottom:1px solid #b8860b;
}
html.v1[data-lrb-home="true"] .home-events__cta h3{margin:0;font-size:clamp(1rem,1.4vw,1.18rem);line-height:1.2;font-weight:600}
html.v1[data-lrb-home="true"] .home-events__cta p{margin:0;font-family:var(--font-reading);font-size:.92rem;line-height:1.4;color:#2a2e31}
html.v1[data-lrb-home="true"] .home-events__cta .yale-text-link{font-weight:700}
html.v1[data-lrb-home="true"] .install-web{
  background:#fff;
  color:#050505;
  border-bottom:1px solid #1d4f96;
}
html.v1[data-lrb-home="true"] .install-web::before{display:none}
/* .install-web's own background:#fff above (line ~764) clears the section-
   break gradient lines set earlier in this file (background is a shorthand
   that resets background-image when not repeated), and this rule used to
   blanket-disable ::after too, which took the new divider diamond out with
   it. Re-applied here, after both of those, so this section keeps the same
   section-break motif as the others instead of silently reverting to no
   divider at all. */
html.v1[data-lrb-home="true"] .install-web{
  background-image:linear-gradient(#1d4f96,#1d4f96),linear-gradient(#b8860b,#b8860b);
  background-repeat:no-repeat,no-repeat;
  background-size:100% 1.5px,100% 1.5px;
  background-position:top left,left 5px;
}
html.v1[data-lrb-home="true"] .install-web::after{display:block}
/* Same blue-fill + gold-outline treatment as every other section title
   (author request to unify text-by-text) instead of plain black. */
html.v1[data-lrb-home="true"] .install-web h2,
html.v1[data-lrb-home="true"] .yale-signup h2{color:#1d4f96;-webkit-text-stroke:0.35px rgba(184,134,11,.55)}
html.v1[data-lrb-home="true"] .install-web__status{color:#2a2e31}
html.v1[data-lrb-home="true"] .install-web,
html.v1[data-lrb-home="true"] .yale-signup{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(18rem,.72fr);
  gap:clamp(1.25rem,3vw,2.5rem);
  align-items:center;
  padding:clamp(1.5rem,3vw,2.4rem) 0;
}
html.v1[data-lrb-home="true"] .install-web__panel,
html.v1[data-lrb-home="true"] .yale-signup__form{justify-self:end;width:min(100%,30rem)}
html.v1[data-lrb-home="true"] .yale-signup__copy,
html.v1[data-lrb-home="true"] .yale-signup__form,
html.v1[data-lrb-home="true"] .yale-signup .form-row,
html.v1[data-lrb-home="true"] .yale-signup .form-input,
html.v1[data-lrb-home="true"] .yale-signup .form-submit{
  min-width:0;
  max-width:100%;
}
html.v1[data-lrb-home="true"] .install-web__button,
html.v1[data-lrb-home="true"] .form-submit,
html.v1[data-lrb-home="true"] .header-buy{
  border:1px solid #0a4d9f;
  border-radius:4px;
  background:#fff;
  color:#0a4d9f;
  font-family:var(--font-ui);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
  white-space:normal;
  overflow-wrap:anywhere;
}

@media(max-width:1100px){
  html.v1[data-lrb-home="true"] .yale-home-issue__grid,
  html.v1[data-lrb-home="true"] .yale-lead,
  html.v1[data-lrb-home="true"] .yale-feature__grid,
  html.v1[data-lrb-home="true"] .yale-feature__grid--reverse,
  html.v1[data-lrb-home="true"] .yale-feature-book,
  html.v1[data-lrb-home="true"] .home-events__feature{grid-template-columns:1fr}
  /* .yale-rail and .yale-feature-book's vertical dividers are both
     background-images now (see their base rules above), not borders, so
     they keep working correctly at this width with no override needed
     here -- the old rules that swapped border-left for border-top (and
     zeroed padding-left) are gone; border-top rendering was unreliable
     anyway, and the line persisting through the stacked layout, joining
     the section divider below it, reads fine as-is. */
  html.v1[data-lrb-home="true"] .yale-tile-grid,
  html.v1[data-lrb-home="true"] .yale-tile-grid--reading,
  html.v1[data-lrb-home="true"] .yale-tile-grid--tools,
  html.v1[data-lrb-home="true"] .home-events__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  html.v1[data-lrb-home="true"] .home-events__cta{grid-column:1 / -1}
  /* 4/5 (a tall portrait crop) makes sense filling the left column's own
     height next to the right column's stacked list at desktop widths, but
     once the feature grid collapses to one column this same ratio reads
     as an oversized photo relative to the caption beneath it. */
  html.v1[data-lrb-home="true"] .home-event--lead .home-event__media{aspect-ratio:16/9}
}
@media(max-width:640px){
  html.v1[data-lrb-home="true"] .yale-home-flow{padding-top:1.4rem}
  html.v1[data-lrb-home="true"] .masthead__name.has-logo-image{min-height:78px}
  html.v1[data-lrb-home="true"] .masthead__logo-image{width:auto;max-width:min(80vw,340px);height:92px}
  html.v1[data-lrb-home="true"] .masthead-nav__list{display:none}
  html.v1[data-lrb-home="true"] .yale-lead__media{min-height:18rem}
  html.v1[data-lrb-home="true"] .yale-home-issue h1{font-size:clamp(1.8rem,9vw,2.65rem)}
  html.v1[data-lrb-home="true"] .yale-lead__copy h2{font-size:clamp(2rem,10.5vw,2.85rem)}
  html.v1[data-lrb-home="true"] .yale-lead__deck{max-width:none;font-size:clamp(1.9rem,10vw,2.7rem)}
  html.v1[data-lrb-home="true"] .yale-home-section__head,
  html.v1[data-lrb-home="true"] .home-events__head,
  html.v1[data-lrb-home="true"] .install-web,
  html.v1[data-lrb-home="true"] .yale-signup{grid-template-columns:minmax(0,1fr)}
  html.v1[data-lrb-home="true"] .yale-signup .form-row{display:grid;grid-template-columns:minmax(0,1fr)}
  html.v1[data-lrb-home="true"] .yale-signup .form-input,
  html.v1[data-lrb-home="true"] .yale-signup .form-submit{width:100%}
  html.v1[data-lrb-home="true"] .yale-tile-grid,
  html.v1[data-lrb-home="true"] .yale-tile-grid--reading,
  html.v1[data-lrb-home="true"] .yale-tile-grid--tools,
  html.v1[data-lrb-home="true"] .home-events__grid{grid-template-columns:1fr}
  html.v1[data-lrb-home="true"] .yale-tile,
  html.v1[data-lrb-home="true"] .home-event{min-height:auto}
  html.v1[data-lrb-home="true"] .install-web__panel,
  html.v1[data-lrb-home="true"] .yale-signup__form{justify-self:stretch;width:100%}
}
/* Social icon circles alternate blue/gold/blue (author request), subtly --
   same two tones as everywhere else on the page, home-scoped since
   .social-icon itself (v1-shell-base.css) is shared sitewide and this is
   a home-page-only treatment for now. */
html.v1[data-lrb-home="true"] .social-icon:nth-child(odd){border-color:#1d4f96}
html.v1[data-lrb-home="true"] .social-icon:nth-child(even){border-color:#b8860b}