:root {
    --paper: #FBFCF8;
    --surface: #FFFFFF;
    --wash: #EEF5EF;
    --ink: #16211B;
    --text-mid: #46524B;
    --brand: #197649;
    --brand-deep: #0F5A36;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --gutter: 24px;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { background: var(--paper); color: var(--ink); font-family: Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }

  /* ===== shared type (3 sizes per screen) ===== */
  .overline { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand); }
  .display { font-family: Fraunces, Georgia, serif; font-weight: 300; font-variation-settings: "opsz" 144;
    font-size: clamp(72px, 6.4vw, 92px); line-height: 1.05; letter-spacing: -0.01em; margin-top: 24px; text-wrap: balance; }
  .display em { font-style: italic; font-weight: 300; color: var(--brand); }
  .body { font-size: 18px; line-height: 1.6; color: var(--text-mid); max-width: 36ch; margin-top: 32px; }

  /* ===== HERO (approved v2.1, unchanged) ===== */
  .hero { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; }
  .hero__media { position: absolute; inset: 0; z-index: -2; }
  .hero__media video, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 68% 50%; display: block; transform-origin: left center; }
  .hero__media [data-clip="hero-loop"] { transform: scale(1.12); }
  .hero__scrim { position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(251,252,248,0.55) 0%, rgba(251,252,248,0.30) 40%, rgba(251,252,248,0) 62%); }
  .hero__inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
  .hero__copy { max-width: 620px; padding-top: 120px; padding-bottom: 120px; }
  .cta { display: inline-block; margin-top: 40px; background: var(--brand); color: #fff; text-decoration: none; font-size: 18px; font-weight: 500; padding: 18px 32px; border-radius: 6px; transition: background 400ms var(--ease); }
  .cta:hover { background: var(--brand-deep); }
  .nav { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 10; width: min(1200px, calc(100% - 2 * var(--gutter)));
    display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 10px 12px 10px 20px; border-radius: 999px;
    background: rgba(255,255,255,0.62); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border: 1px solid rgba(22,33,27,0.08); }
  .nav__logo img { height: 22px; width: auto; display: block; }
  .nav__links { display: flex; gap: 28px; list-style: none; }
  .nav__links a { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
  .nav__cta { font-size: 13px; font-weight: 500; color: var(--ink); text-decoration: none; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(22,33,27,0.18); }
  .nav__burger { display: none; width: 38px; height: 38px; border: 1px solid rgba(22,33,27,0.18); border-radius: 999px; background: transparent; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; }
  .nav__burger span { display: block; width: 16px; height: 1.5px; background: var(--ink); transition: transform 300ms var(--ease), opacity 300ms var(--ease); }
  .nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(2.75px) rotate(45deg); }
  .nav__burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-2.75px) rotate(-45deg); }
  .nav__mcta { display: none; }
  .reveal { opacity: 0; transform: translateY(18px); animation: rise 700ms var(--ease) forwards; }
  .reveal:nth-child(2) { animation-delay: 120ms; } .reveal:nth-child(3) { animation-delay: 240ms; } .reveal:nth-child(4) { animation-delay: 360ms; }
  @keyframes rise { to { opacity: 1; transform: none; } }
  .hero__media video { opacity: 0; transition: opacity 700ms var(--ease); }
  .hero__media video.is-front { opacity: 1; }

  /* ===== PIECE 2 — signature moment: scroll-driven film ===== */
  /* One idea: the method. The scroll IS the gesture: you place the capsule, and the three questions follow. */
  .sig { position: relative; height: 340svh; background: var(--wash); }
  .sig__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; }
  .sig__film { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; display: block; }
  .sig__scrim { position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(251,252,248,0.72) 0%, rgba(251,252,248,0.42) 38%, rgba(251,252,248,0) 60%); }
  .sig__inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); height: 100svh; display: flex; align-items: center; }
  .sig__copy { position: relative; width: min(620px, 100%); min-height: 420px; }
  .sig__step { position: absolute; inset: 0; opacity: 0; transform: translateY(14px); pointer-events: none;
    transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
  .sig__step.is-active { opacity: 1; transform: none; pointer-events: auto; }
  .sig__step .display { font-size: clamp(72px, 6.4vw, 92px); }

  /* progress: the only chrome — one thin line, one accent */
  .sig__rail { position: absolute; left: 50%; bottom: 40px; width: 160px; height: 1px; background: rgba(22,33,27,0.14); transform: translateX(-50%); }
  .sig__rail i { position: absolute; left: 0; top: -0.5px; height: 2px; width: 0; background: var(--brand); transition: width 120ms linear; }


  @media (prefers-reduced-motion: reduce) {
    .reveal { animation: none; opacity: 1; transform: none; }
    .proof__num i { transition: none !important; transform: scaleX(1); }
    .hero__media video { display: none; }
    .sig { height: auto; }
    .sig__stage { position: relative; height: auto; overflow: visible; }
    .sig__film { position: relative; inset: auto; height: 60svh; object-fit: cover; }
    .sig__inner { height: auto; padding-block: 120px; display: block; }
    .sig__copy { min-height: 0; }
    .sig__step { position: relative; opacity: 1; transform: none; pointer-events: auto; margin-bottom: 96px; }
    .sig__scrim, .sig__rail { display: none; }
  }

  @media (max-width: 767px) {
    .nav__links { display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; flex-direction: column; gap: 0; background: rgba(255,255,255,0.92); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border: 1px solid rgba(22,33,27,0.08); border-radius: 16px; padding: 8px; }
    .nav.is-open .nav__links { display: flex; }
    .nav__links a { display: block; padding: 12px 14px; }
    .nav__mcta { display: none; } .nav.is-open .nav__mcta { display: block; } .nav__mcta a { color: var(--brand); }
    .nav__burger { display: flex; }
    .nav__cta { display: none; }
    .nav { padding: 8px 8px 8px 16px; }
    .nav__logo img { height: 18px; }
    .hero__media video, .hero__media img { object-position: 40% 50%; transform: none !important; }
    .overline, .pr .pr__idx { font-size: 12px; }
    .hero__scrim { background: linear-gradient(180deg, rgba(251,252,248,0.86) 0%, rgba(251,252,248,0.72) 55%, rgba(251,252,248,0.2) 100%); }
    .hero__inner { justify-content: flex-end; }
    .hero__copy { padding-top: 96px; padding-bottom: 72px; }
    .display, .sig__step .display { font-size: 68px; }   /* 68 / 17 = 4.0 */
    .body { font-size: 17px; margin-top: 24px; }
    .cta { font-size: 17px; margin-top: 32px; }

    .sig__scrim { background: linear-gradient(180deg, rgba(251,252,248,0.10) 0%, rgba(251,252,248,0.62) 48%, rgba(251,252,248,0.90) 100%); }
    .sig__inner { align-items: flex-end; }
    .sig__copy { min-height: 380px; padding-bottom: 88px; }
    .sig__step { inset: auto 0 72px 0; }
    .sig__rail { bottom: 24px; width: 120px; }
    .proof { padding-block: 96px; }
    .proof__list { margin-top: 64px; }
    .proof__row { grid-template-columns: 1fr; row-gap: 12px; padding-block: 24px 32px; }
    .proof__num { font-size: 88px; }   /* 88 / 17 = 5.2 */
    .proof__cap { font-size: 17px; }
  }

  /* ===== PIECE 3  — la postura: tres principios ===== */
  /* One idea: what we ask of you before you buy anything. Light band (--paper) after the --wash film. */
  .pr { background: var(--paper); padding-block: 160px; }
  .pr__inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
  .pr__idx { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: 0.12em; color: var(--text-mid); }
  .pr__stmt { font-family: Fraunces, Georgia, serif; font-weight: 300; font-variation-settings: "opsz" 144; line-height: 1.05; letter-spacing: -0.01em; text-wrap: balance; color: var(--ink); }
  .pr__stmt em { font-style: italic; font-weight: 300; color: var(--brand); }
  .pr__txt { font-size: 18px; line-height: 1.6; color: var(--text-mid); max-width: 64ch; }
  .pr__close { font-family: Fraunces, Georgia, serif; font-weight: 300; font-style: italic; font-variation-settings: "opsz" 144; color: var(--brand); line-height: 1.05; letter-spacing: -0.01em; text-wrap: balance; }
  
  /* ---- E · "Lo que no vas a leer aquí": el reclamo de siempre, tachado; el principio, en su lugar ---- */
  .prE__head { max-width: 620px; }
  .prE__title { font-size: clamp(72px, 6.4vw, 92px); margin-top: 24px; }
  .prE__list { list-style: none; margin-top: 96px; }
  .prE__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; align-items: start; padding-block: 64px 56px; border-top: 1px solid rgba(22,33,27,0.12); }
  .prE__no { font-family: Fraunces, Georgia, serif; font-weight: 300; font-variation-settings: "opsz" 144; font-size: clamp(72px, 6.4vw, 92px); line-height: 1.05; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; position: relative; display: inline; transition: color 700ms var(--ease); }
  /* One gesture per row, in three beats, fired when the row enters:
     1. the claim flashes in like an ad (blur → sharp, 500 ms)
     2. the green line strikes it (700 ms, per line)
     3. the principle writes itself behind it, word by word (clip wipe + rise, 600 ms, stagger 70 ms) */
  .prE__no { background-image: linear-gradient(var(--brand), var(--brand)); background-repeat: no-repeat; background-size: 0% 4px; background-position: 0 0.54em; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 0.02em;
    opacity: 0; filter: blur(12px); transform: translateY(10px) scale(1.02); transform-origin: left center; }
  .prE__row.is-in .prE__no { opacity: 1; filter: blur(0); transform: none; color: rgba(22,33,27,0.62); background-size: 100% 4px;
    transition: opacity 500ms var(--ease), filter 500ms var(--ease), transform 500ms var(--ease), background-size 700ms var(--ease) 700ms, color 600ms var(--ease) 1300ms; }
  .prE__yes .pr__idx, .prE__yes .pr__txt { opacity: 0; transform: translateY(12px); }
  .prE__row.is-in .prE__yes .pr__idx { opacity: 1; transform: none; transition: opacity 500ms var(--ease) 1500ms, transform 500ms var(--ease) 1500ms; }
  .prE__row.is-in .prE__yes .pr__txt { opacity: 1; transform: none; transition: opacity 600ms var(--ease) 2200ms, transform 600ms var(--ease) 2200ms; }
  .w { display: inline-block; padding-right: 0.32em; margin-right: -0.32em; clip-path: inset(-0.2em 100% -0.2em 0); transform: translateY(0.28em); }   /* padding/negative margin: room for the italic overhang so the final clip never cuts the glyph */
  .prE__row.is-in .w, .prE__close.is-in .w { clip-path: inset(-0.2em -0.05em -0.2em -0.05em); transform: none; transition: clip-path 600ms var(--ease), transform 600ms var(--ease); transition-delay: calc(1600ms + var(--i) * 70ms); }
  .prE__close .w { clip-path: none; opacity: 0; filter: blur(10px); transform: translateY(0.2em); }
  .prE__close.is-in .w { opacity: 1; filter: blur(0); transform: none; transition: opacity 700ms var(--ease), filter 700ms var(--ease), transform 700ms var(--ease); transition-delay: calc(var(--i) * 90ms); }
  .prE__yes .pr__stmt { font-size: clamp(72px, 6.4vw, 92px); }
  .prE__yes .pr__txt { margin-top: 24px; }
  .prE__close { margin-top: 96px; padding-top: 48px; border-top: 1px solid rgba(22,33,27,0.12); font-size: clamp(72px, 6.4vw, 92px); }
  .prE__yes { position: relative; }
  .prE__idx { display: block; position: absolute; top: -32px; left: 0; }

  @media (prefers-reduced-motion: reduce) {
    .prE__no, .w { opacity: 1 !important; filter: none !important; transform: none !important; clip-path: none !important; transition: none !important; }
    .prE__no { color: rgba(22,33,27,0.62) !important; background-size: 100% 4px !important; }
    .prE__yes .pr__idx, .prE__yes .pr__txt { opacity: 1 !important; transform: none !important; }
  }
  @media (max-width: 767px) {
    .pr { padding-block: 96px; }
    .pr__txt { font-size: 17px; }
    .prE__list { margin-top: 56px; }
    .prE__row { grid-template-columns: 1fr; row-gap: 48px; padding-block: 32px 40px; }
    .prE__idx { position: static; margin-bottom: 16px; }
    .prE__no { background-position: 0 0.5em; }
    .prE__no, .prE__yes .pr__stmt, .prE__close, .prE__title { font-size: 68px; }
    .prE__close { margin-top: 64px; }
  }


  /* ===== PIECE 4 — categorías · estudio previo sobre antotipos (?v=a|b|c) ===== */
  /* Image language: anthotype sun-prints (chlorophyll on paper, the object leaves its white silhouette). Made with daylight and spinach: the site's idea, literally. */
  .ct { display: none; }
  .ct.is-v { display: block; }
  .ct__inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
  .ct__title { font-family: Fraunces, Georgia, serif; font-weight: 300; font-variation-settings: "opsz" 144; font-size: clamp(72px, 6.4vw, 92px); line-height: 1.05; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
  .ct__title em, .ct a em { font-style: italic; font-weight: 300; color: var(--brand); }
  .ct a { color: inherit; text-decoration: none; }
  .ct__txt { font-size: 18px; line-height: 1.6; color: var(--text-mid); max-width: min(52ch, 100%); min-width: 0; }
  .ct__print { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }


  /* ---- B · "El sol eres tú": cuatro antotipos sin exponer; el cursor es el sol y revela la silueta desde donde toca ---- */
  .ctB { background: var(--wash); padding-block: 160px; }
  .ctB__head { display: flex; justify-content: space-between; align-items: end; gap: 48px; }
  .ctB__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 80px; }
  .ctB__tile { display: block; cursor: crosshair; }
  .ctB__fig { aspect-ratio: 4 / 5; }
  /* The prints are cut out of their paper (alpha), so the chlorophyll wash floats on the band with its brush edges.
     Unexposed: a pale ghost (the wash barely tinted, the silhouette only hinted). Exposed: the print as it is.
     An anthotype does not develop in a wipe: the whole sheet darkens at once, slowly. One filter transition, 1100 ms, one direction. */
  .ctB__fig img { display: block; width: 100%; height: 100%; object-fit: contain;
    opacity: 0.72; filter: contrast(0.32) brightness(1.12) saturate(1.15);
    transition: opacity 1100ms var(--ease), filter 1100ms var(--ease); }
  .ctB__tile.is-exposed .ctB__fig img { opacity: 1; filter: none; }
  .ctB__cap { margin-top: 24px; display: grid; grid-template-columns: 2ch 1fr; align-items: baseline; column-gap: 0.75em; opacity: 0.38; transition: opacity 600ms var(--ease) 300ms; }   /* museum label: body size, anchored to the print's left edge */
  .ctB__tile.is-exposed .ctB__cap { opacity: 1; }
  .ctB__cap .ct__title { font-size: 18px; line-height: 1.6; }
  

  @media (prefers-reduced-motion: reduce) {
    .ctB__cap { transition: none !important; }
    .ctB__fig img { opacity: 1 !important; filter: none !important; transition: none !important; } .ctB__cap { opacity: 1; }
  }
  @media (max-width: 767px) {
    .ct__title { font-size: 68px; }
    .ct__txt { font-size: 17px; }
    .ctB { padding-block: 96px; }
    .ctB__head { flex-direction: column; align-items: flex-start; gap: 16px; }
    .ctB__row { grid-template-columns: repeat(2, 1fr); gap: 24px 12px; margin-top: 48px; }
    .ctB__cap { margin-top: 12px; }
    .ctB__cap .ct__title { font-size: 17px; }
  }

  /* ===== PIECE 5 — "Doce mañanas": twelve photographs, one light. The index IS the photograph: twelve louvres, the one you touch opens ===== */
  .dm { background: var(--paper); padding-block: 160px 120px; }
  .dm__inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
  .dm__head { display: flex; justify-content: space-between; align-items: end; gap: 48px; }
  .dm__title { font-family: Fraunces, Georgia, serif; font-weight: 300; font-variation-settings: "opsz" 144; font-size: clamp(72px, 6.4vw, 92px); line-height: 1.05; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; margin-top: 24px; }
  .dm__title em { font-style: italic; font-weight: 300; color: var(--brand); }
  .dm__txt { font-size: 18px; line-height: 1.6; color: var(--text-mid); max-width: min(52ch, 100%); }
  .dm__meta { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mid); }
  /* the strip: full-bleed, one light. Each article is a louvre 32 px wide; the open one takes the rest (flex-grow is the only thing that animates) */
  .dm__strip { display: flex; gap: 2px; height: min(78vh, 780px); margin-top: 40px; width: 100vw; margin-left: calc(50% - 50vw); background: var(--paper); }
  .dm__item { position: relative; flex: 0 0 40px; min-width: 0; overflow: hidden; text-decoration: none; color: var(--ink); cursor: pointer; transition: flex-grow 600ms var(--ease); }
  .dm__item.is-on { flex-grow: 1; cursor: default; }
  .dm__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; filter: saturate(0.12) brightness(1.18) contrast(0.82); transition: filter 600ms var(--ease); }
  .dm__no { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); writing-mode: vertical-rl; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: 0.12em; color: var(--ink); opacity: 0.55; transition: opacity 400ms var(--ease); }
  .dm__item.is-on .dm__no { opacity: 0; }
  .dm__item:hover .dm__no { opacity: 1; }
  .dm__item.is-on img { filter: none; }
  .dm__item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
  /* caption: on the light scrim of the same paper tone as the hero's */
  .dm__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 200px 48px 48px; background: linear-gradient(180deg, rgba(251,252,248,0) 0%, rgba(251,252,248,0.78) 52%, rgba(251,252,248,0.96) 100%);
    opacity: 0; transform: translateY(12px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); pointer-events: none; }
  .dm__item.is-on .dm__cap { opacity: 1; transform: none; transition-delay: 240ms; pointer-events: auto; }
  .dm__cap .dm__meta { display: block; }
  .dm__h { font-family: Fraunces, Georgia, serif; font-weight: 300; font-variation-settings: "opsz" 144; font-size: 72px; line-height: 1.05; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; max-width: 18ch; margin-top: 16px; }
  .dm__ex { font-size: 18px; line-height: 1.6; color: var(--text-mid); max-width: 52ch; margin-top: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .dm__read { display: inline-block; margin-top: 24px; font-size: 18px; color: var(--brand); text-decoration: underline; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
  /* index under the strip: the same twelve, as a thin line of dates; the open one in ink */
  .dm__idx { list-style: none; display: flex; justify-content: space-between; gap: 8px; margin-top: 24px; }
  .dm__idx li { white-space: nowrap; }
  .dm__idx a { white-space: nowrap; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand); text-decoration: none; }
  .dm__idx button { all: unset; cursor: pointer; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: 0.12em; color: rgba(22,33,27,0.38); transition: color 400ms var(--ease); }
  .dm__idx button.is-on, .dm__idx button:hover { color: var(--brand); }
  .dm__all { display: inline-block; margin-top: 64px; font-size: 18px; line-height: 1.6; color: var(--brand); text-decoration: underline; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }

  @media (prefers-reduced-motion: reduce) { .dm__item, .dm__item img, .dm__cap { transition: none !important; } }
  @media (max-width: 767px) {
    .dm { padding-block: 96px 80px; }
    .dm__title { font-size: 68px; }
    .dm__txt { font-size: 17px; }
    .dm__head { flex-direction: column; align-items: flex-start; gap: 16px; }
    .dm__strip { margin-top: 32px; height: 80svh; gap: 1px; }
    .dm__item { flex-basis: 5px; }
    .dm__no { display: none; }

    .dm__cap { padding: 120px 16px 20px; }
    .dm__cap .dm__meta { font-size: 12px; } .dm__cap .dm__cat { display: block; }
    .dm__h { font-size: 56px; max-width: 100%; margin-top: 12px; hyphens: auto; overflow-wrap: anywhere; }   /* no 17px body in the mobile band: the read link is mono 12 */
    .dm__read { margin-top: 16px; }
    .dm__ex { display: none; }
    .dm__read { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; }
    .dm__idx { display: flex; justify-content: flex-start; } .dm__idx li:not(:last-child) { display: none; }
  }
  /* ===== PIECE 6 — study: three concepts for Contacto + Footer (toggle with ?v=a|b|c) ===== */
  .cf { display: none; }
  .cf.is-v { display: block; }
  .cf__inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
  .cf .display { margin-top: 24px; }
  .cf .body { max-width: min(52ch, 100%); }
  .cf a { color: inherit; }
  /* shared: the address at display size, set in serif like a headline — the only thing on the page that looks like this and is a link */
  .cf__mail { display: inline-block; font-family: Fraunces, Georgia, serif; font-weight: 300; font-variation-settings: "opsz" 144; font-size: clamp(72px, 6.4vw, 92px); line-height: 1.05; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; overflow-wrap: anywhere;
    background-image: linear-gradient(var(--brand), var(--brand)); background-repeat: no-repeat; background-size: 0% 2px; background-position: 0 100%; padding-bottom: 0.06em; transition: background-size 600ms var(--ease), color 400ms var(--ease); }
  .cf__mail:hover, .cf__mail:focus-visible { background-size: 100% 2px; color: var(--brand-deep); outline: none; }
  .cf__mail .w { display: inline-block; clip-path: inset(-0.2em -0.05em 110% -0.05em); transform: translateY(0.35em); transition: clip-path 600ms var(--ease), transform 600ms var(--ease); }
  .cf.is-in .cf__mail .w { clip-path: inset(-0.2em -0.05em -0.2em -0.05em); transform: none; }
  .cf__mail .w:nth-child(2) { transition-delay: 90ms; } .cf__mail .w:nth-child(3) { transition-delay: 180ms; }
  .cf__note { margin-top: 24px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mid); min-height: 1.6em; }
  .cf__note.is-copied { color: var(--brand); }
  /* shared footer: one hairline, then the utilities in mono. No columns, no icon row. */
  .ft__logo img { height: 18px; width: auto; display: block; }
  .ft__links { display: flex; gap: 24px; list-style: none; flex-wrap: wrap; }
  .ft__links a, .ft__lang a, .ft__copy { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
  .ft__links a:hover { color: var(--brand); }
  .ft__lang { display: flex; gap: 12px; list-style: none; } .ft__lang a[aria-current] { color: var(--brand); } .ft__lang a:not([aria-current]) { color: var(--text-mid); }
  .ft__copy { color: var(--text-mid); }




  @media (prefers-reduced-motion: reduce) { .cf .w { transition: none !important; clip-path: none !important; transform: none !important; opacity: 1 !important; } }
  @media (max-width: 767px) {
    .cf .display, .cf__mail { font-size: 68px; }
    .cf .body { font-size: 17px; }
    .ft__links a, .ft__lang a, .ft__copy, .cf__note { font-size: 12px; }
  }

  /* the museum label under the print: the footer, in one paragraph and one line */
  .cfD__label { max-width: 1200px; margin: 0 auto; padding: 72px var(--gutter) 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 64px; align-items: start; }
  .cfD__cap { font-size: 18px; line-height: 1.6; color: var(--text-mid); max-width: 52ch; }
  .cfD__cap a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.22em; text-decoration-thickness: 1px; text-decoration-color: var(--brand); }
  .cfD__util { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
  .cfD__util .ft__links, .cfD__util .ft__lang { margin: 0; }
  .cfD__util .ft__logo img { height: 18px; }

  /* E · "El día se acaba en la misma encimera": the home opens on the marble at morning (hero) and closes on it at dusk. On arrival the morning frame fades to the evening one (1400 ms, once): the capsule is gone, the light is low. The address sits on the marble. */
  .cfE { background: var(--paper); }
  .cfE__scene { position: relative; height: 100svh; min-height: 640px; overflow: hidden; isolation: isolate; }
  .cfE__scene video, .cfE__scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
  .cfE__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(251,252,248,0.66) 0%, rgba(251,252,248,0.42) 48%, rgba(251,252,248,0) 74%); }
  .cfE__on { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter) 120px; }
  .cfE__on .cf__mail { font-size: clamp(72px, 7.2vw, 104px); }
  .cfE__on .body { margin-top: 0; margin-bottom: 32px; color: var(--ink); }
  .cfE__on .cf__note { color: var(--ink); }   /* feedback on the photo stays in ink: never lower contrast right at the confirmation */

  @media (max-width: 767px) {
    .cfE__scene { min-height: 0; }
    .cfD__label { grid-template-columns: 1fr; padding: 40px var(--gutter) 32px; } .cfD__cap { font-size: 17px; }
    .cfE__on { padding-bottom: 72px; } .cfE__on .cf__mail { background-size: 100% 2px; } .cfE__on .cf__mail { font-size: 68px; } .cfE__scrim { background: linear-gradient(180deg, rgba(251,252,248,0) 30%, rgba(251,252,248,0.72) 70%); }
  }