/* ==========================================================================
   valentinbeck.com  ::  the whole site's stylesheet, one file.
   Served blocking from /site.css. There is no build step: edit this file and
   it is live, exactly like the PHP. No CDN, no import, no external host.

   Order matters, do not shuffle the sections:
     1. Fonts and tokens
     2. Base: reset, body, selection, links, skip link
     3. Nav          (shared chrome)
     4. Highlight    (shared chrome)
     5. Footer       (shared chrome)
     6. Home page    (.intro, .timeline, .shift, .now-*, .cta-*, form)
     7. Essays       (/essais/ index and essay pages)
     8. Mentions legales  (fully scoped under body.page-legales: that page
                           styles bare h1/h2/p/footer/a and would otherwise
                           repaint the whole site)
     9. Per-page overrides, last so they win

   Every page carries a body class: page-home, page-essais, page-legales.
   Sections 8 and 9 depend on it. Adding a page means adding its class.
   ========================================================================== */

/* ===== 1-5. Shared chrome ================================================= */
    @font-face {
      font-family: 'DM Serif Display';
      font-style: normal;
      font-weight: 400;
      font-display: block;
      src: url('/fonts/dm-serif-display-400.woff2') format('woff2');
    }
    @font-face {
      font-family: 'DM Serif Display';
      font-style: italic;
      font-weight: 400;
      font-display: block;
      src: url('/fonts/dm-serif-display-400-italic.woff2') format('woff2');
    }
    @font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 300 600;
      font-display: block;
      src: url('/fonts/inter.woff2') format('woff2');
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --night:      #0C1219;
      --night-soft: #16222F;
      --cream:      #EDE8D8;
      --orange:     #D4601A;
      --muted:      #9A9081;
      --rule:       #1E2A35;
      --pin-top:    0.75rem;
    }

    body {
      font-family: 'Inter', system-ui, sans-serif;
      background: var(--night);
      color: var(--cream);
      line-height: 1.6;
    }

    /* Selection. Safari falls back to a pale system highlight that renders
       muted text as gray on gray. Reuse the highlight tile pairing instead,
       and invert it inside .highlight so orange never lands on orange. */
    ::selection {
      background: var(--orange);
      color: var(--night);
    }

    .highlight::selection,
    .highlight *::selection {
      background: var(--night);
      color: var(--orange);
    }

    a { color: inherit; text-decoration: none; }

    .skip-link {
      position: absolute;
      left: 1rem;
      top: 1rem;
      padding: 0.6em 1em;
      background: var(--orange);
      color: var(--night);
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      border-radius: 4px;
      transform: translateY(-200%);
      transition: transform 0.15s;
      z-index: 2000;
    }
    .skip-link:focus { transform: translateY(0); outline: none; }

    nav {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding: 2.5rem 3rem;
      border-bottom: 1px solid var(--rule);
    }

    .nav-name {
      font-family: 'DM Serif Display', Georgia, serif;
      font-size: 1.4rem;
      font-weight: 400;
      letter-spacing: 0.01em;
    }

    .nav-right {
      display: flex;
      align-items: baseline;
      gap: 2.5rem;
    }

    .lang-switch {
      display: flex;
      align-items: baseline;
      gap: 0.5rem;
      padding-left: 2.5rem;
      border-left: 1px solid var(--rule);
      visibility: hidden;
    }

    .lang-switch a {
      font-size: 0.8rem;
      font-weight: 500;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--muted);
      transition: color 0.12s;
    }

    .lang-switch a.lang-current { color: var(--cream); }
    .lang-switch a:hover { color: var(--cream); }

    .lang-sep {
      font-size: 0.65rem;
      color: var(--muted);
      opacity: 0.4;
    }

    .nav-home {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      text-decoration: none;
      color: inherit;
    }

    .nav-mark {
      position: relative;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 1px solid rgba(237, 232, 216, 0.4);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.53rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      padding-left: 0.12em;
      color: var(--cream);
      opacity: 0.8;
      flex-shrink: 0;
      transition: opacity 0.12s;
    }

    .nav-mark::after {
      content: '';
      position: absolute;
      top: 7px;
      right: 5px;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--orange);
      border: 1.5px solid var(--night);
    }

    .nav-home:hover .nav-mark { opacity: 1; }

    @media (max-width: 640px) {
      nav { padding: 1.75rem 1.5rem; }
      .nav-name { font-size: 1.15rem; }
      .nav-right { gap: 1.25rem; }
      .lang-switch { padding-left: 1.25rem; gap: 0.4rem; }
    }

    @media (max-width: 380px) {
      nav { padding: 1.5rem 1.1rem; }
      .nav-home { gap: 0.5rem; }
      .nav-right { gap: 0.9rem; }
      .lang-switch { padding-left: 0.9rem; }
      .lang-switch a { font-size: 0.72rem; letter-spacing: 0.16em; }
    }

    .highlight {
      background: var(--orange);
      color: var(--night);
      padding: 0.05em 0.5em 0.1em;
      font-style: inherit;
    }

    .site-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 1.5rem 2.5rem;
      padding: 2rem 3rem 2rem calc(3rem + 1.25rem + 2px);
      border-top: 1px solid var(--rule);
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 0.72rem;
      letter-spacing: 0.02em;
      color: var(--muted);
      line-height: 1.6;
    }

    .site-footer-lockup {
      display: flex;
      align-items: center;
      gap: 0.9rem;
    }

    .site-footer-mark {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 1px solid rgba(237, 232, 216, 0.4);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      padding-left: 0.14em;
      color: var(--cream);
      flex-shrink: 0;
    }

    .site-footer-text {
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
    }

    .site-footer-name {
      font-family: 'DM Serif Display', Georgia, serif;
      font-size: 1.05rem;
      font-weight: 400;
      letter-spacing: 0.01em;
      color: var(--cream);
      line-height: 1.15;
    }

    .site-footer-tag {
      font-style: italic;
      font-size: 0.72rem;
      color: var(--muted);
      line-height: 1.5;
    }

    .site-footer-meta {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.4rem 1.25rem;
    }

    .site-footer-meta p {
      font-size: inherit;
      letter-spacing: inherit;
      color: inherit;
    }

    .site-footer .footer-sep {
      opacity: 0.45;
      margin: 0 0.35rem;
    }

    .site-footer-meta a {
      background: var(--orange);
      color: var(--night);
      padding: 0.05em 0.5em 0.1em;
      text-decoration: none;
      transition: background 0.12s;
    }

    .site-footer-meta a:hover {
      background: var(--night);
      color: var(--cream);
    }

    @media (max-width: 640px) {
      .site-footer { padding: 1.5rem 1.5rem 5rem; }
      .site-footer-meta {
        width: 100%;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0.5rem 1rem;
      }
      .site-footer-meta p { white-space: nowrap; }
    }

/* ===== 6. Home page ====================================================== */

    .intro {
      padding: 6rem 3rem 5rem;
      position: relative;
      border-bottom: 1px double rgba(237, 232, 216, 0.07);
    }

    .intro-label {
      font-size: 0.78rem;
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--orange);
      margin-bottom: 2rem;
    }

    .intro-label::before {
      content: '';
      display: block;
      width: 1.5rem;
      height: 1px;
      background: var(--orange);
      margin-bottom: 0.75rem;
    }

    .intro h2 {
      font-family: 'DM Serif Display', Georgia, serif;
      font-size: clamp(2.5rem, 5vw, 4rem);
      font-weight: 400;
      line-height: 1.55;
      color: var(--cream);
    }

    .intro h2 em {
      font-style: italic;
      color: var(--orange);
    }

    .intro-sub-wrap {
      margin-top: 1.5rem;
      max-width: 640px;
      border-left: 2px solid rgba(212, 96, 26, 0.6);
      padding-left: 1.25rem;
    }

    .intro-sub {
      font-size: 0.92rem;
      color: var(--muted);
      line-height: 1.7;
    }

    .intro-sub + .intro-sub {
      margin-top: 0.6rem;
    }

    @media (max-width: 640px) {
      .intro { padding: 3rem 1.5rem 2.5rem; }
    }

    .timeline {
      display: grid;
      grid-template-columns: minmax(240px, 18vw) minmax(0, 1fr) minmax(160px, 18vw);
    }

    @media (max-width: 900px) {
      .timeline { grid-template-columns: minmax(240px, 22vw) minmax(0, 1fr); }
      .shift-aside { display: none; }
    }

    @media (max-width: 640px) {
      .timeline { grid-template-columns: minmax(0, 1fr); }
    }

    .shift {
      display: grid;
      grid-column: 1 / -1;
      grid-template-columns: subgrid;
      --year-font: clamp(3rem, 7vw, 4.5rem);
      --year-lh: 1;
      --year-lead: 7px;
      --year-box: calc(var(--year-font) * var(--year-lh) + var(--year-lead));
      --title-font: clamp(1.5rem, 3.5vw, 2.25rem);
      --title-line: 1.15;
      --title-offset: clamp(10px, 1.5vw, 23px);
      --title-cover: calc(1.25rem + var(--title-offset));
      --pill-offset: clamp(13px, calc(3.5vw - 11px), 33px);
      --pill-h: calc(0.7rem * 1.8 + 2px);
      --dot-offset: clamp(22px, calc(3.5vw - 2px), 42px);
      --row-h: max(
        var(--year-box),
        calc(var(--title-offset) + var(--title-font) * var(--title-line) + var(--title-cover)),
        calc(var(--pill-offset) + var(--pill-h))
      );
    }

    .shift--interlude {
      --year-font: clamp(1.75rem, 3.5vw, 2.75rem);
      --year-lead: 0px;
      --title-font: clamp(1.1rem, 2vw, 1.4rem);
      --title-offset: clamp(4px, 0.6vw, 9px);
      --title-cover: 1.25rem;
      --pill-offset: clamp(3px, calc(1.75vw - 11px), 11px);
      --dot-offset: clamp(11px, calc(1.75vw - 3px), 19px);
    }

    @media (min-width: 641px) {
      .shift {
        --year-lh: 0.75;
        --year-lead: 0px;
        --row-mid: calc(var(--year-font) * var(--year-lh) / 2 + 1.5px);
        --title-offset: calc(var(--row-mid) - var(--title-font) * var(--title-line) / 2);
        --pill-offset: calc(var(--row-mid) - var(--pill-h) / 2);
        --dot-offset: calc(var(--row-mid) - 3px);
        --title-cover: 1.25rem;
      }
      .shift--interlude { --title-cover: 0.75rem; }
    }

    .shift-left {
      padding: 2.75rem 3rem 3.5rem;
      border-right: 1px solid rgba(212, 96, 26, 0.2);
      border-bottom: 1px solid var(--rule);
      position: relative;
    }

    .shift-left-stack {
      position: sticky;
      top: var(--pin-top);
      display: flex;
      flex-direction: column;
      height: var(--row-h);
      box-sizing: border-box;
    }

    .shift-left-stack::after {
      content: '';
      position: absolute;
      right: calc(-3rem - 3px);
      top: var(--dot-offset);
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--orange);
      border: 1.5px solid var(--night);
    }

    .shift--interlude .shift-left-stack::after {
      opacity: 0.3;
    }

    @media (max-width: 640px) {
      .shift-left {
        display: block;
        border-right: none;
        border-bottom: none;
        padding: 1.5rem 1.5rem 0.625rem;
      }
      .shift-num {
        position: static;
        display: block;
        margin-bottom: 0.15rem;
      }
    }

    .shift-num {
      position: absolute;
      top: 1.5rem;
      left: 3rem;
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: 0.28em;
      color: var(--muted);
    }

    @media (max-width: 640px) {
      .shift-num { position: static; }
      .shift-left-stack { position: static; height: auto; }
      .shift-left-stack::after { display: none; }
    }

    .shift-year {
      font-family: 'DM Serif Display', Georgia, serif;
      font-size: var(--year-font);
      font-weight: 400;
      line-height: var(--year-lh);
      color: var(--orange);
      margin-top: var(--year-lead);
    }

    .shift-right {
      padding: 2.75rem 3rem 3.5rem;
      border-bottom: 1px solid var(--rule);
    }

    @media (max-width: 640px) {
      .shift-right { padding: 0.75rem 1.5rem 2.5rem; }
    }

    .shift-aside {
      padding: 2.75rem 2.5rem 3.5rem;
      border-bottom: 1px solid var(--rule);
      border-left: 1px solid rgba(212, 96, 26, 0.12);
      text-align: right;
    }

    .shift-aside-anchor {
      position: sticky;
      top: var(--pin-top);
      display: block;
      text-align: right;
      padding-top: var(--pill-offset);
      height: var(--row-h);
      box-sizing: border-box;
    }

    .shift-aside-theme {
      display: inline-block;
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 0.7rem;
      font-weight: 500;
      line-height: 1;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--orange);
      border: 1px solid rgba(212, 96, 26, 0.4);
      padding: 0.4em 0.95em;
      border-radius: 999px;
    }

    .shift--interlude .shift-aside-theme {
      color: var(--muted);
      border-color: rgba(154, 144, 129, 0.4);
    }

    .shift-theme { display: none; }

    @media (max-width: 640px) {
      .shift-num { display: inline; }
      .shift-theme {
        display: inline;
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 0.62rem;
        font-weight: 600;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .shift-theme + .shift-num::before {
        content: "·";
        margin: 0 0.5em;
        font-weight: 400;
        color: var(--muted);
      }
      .shift-left-stack { margin-top: 0.5rem; }
    }

    .shift-title-anchor {
      position: sticky;
      top: var(--pin-top);
      z-index: 10;
      display: flex;
      flex-direction: column;
      height: var(--row-h);
      box-sizing: border-box;
    }

    .shift-title {
      font-family: 'DM Serif Display', Georgia, serif;
      font-size: var(--title-font);
      font-style: italic;
      font-weight: 400;
      line-height: var(--title-line);
      color: var(--cream);
      margin: 0;
      padding: var(--title-offset) 0 var(--title-cover) 0;
      background: var(--night);
      width: 100%;
      flex: 1;
      box-sizing: border-box;
      position: relative;
      z-index: 5;
    }

    .shift-title::before {
      content: '';
      position: absolute;
      top: calc(-1 * var(--pin-top));
      left: 0;
      right: 0;
      height: var(--pin-top);
      background: var(--night);
      pointer-events: none;
    }

    @media (max-width: 640px) {
      .shift-title-anchor { top: 1rem; }
      .shift-title::before { top: -1rem; height: 1rem; }
    }

    .shift-body {
      font-size: 0.92rem;
      color: var(--muted);
      line-height: 1.75;
      max-width: 820px;
      margin-top: 0.25rem;
    }

    .shift-body em { font-style: inherit; color: var(--cream); }

    .shift-body a {
      color: var(--orange);
      border-bottom: 1px solid rgba(212, 96, 26, 0.35);
      transition: border-color 0.12s;
    }
    .shift-body a:hover { border-bottom-color: var(--orange); }

    .shift-body + .shift-body {
      margin-top: 1.25rem;
      padding-top: 1.25rem;
      border-top: 1px solid rgba(212, 96, 26, 0.2);
    }

    .shift--interlude .shift-year {
      letter-spacing: 0.04em;
    }

    .shift--interlude .shift-title-anchor + .shift-body {
      margin-top: 1rem;
    }

    @media (min-width: 641px) {
      .shift-title-anchor + .shift-body,
      .shift-title-anchor + .dev-badge { margin-top: 1.5rem; }
      .shift--interlude .shift-title-anchor + .shift-body { margin-top: 1.25rem; }
    }

    .shift--soon .shift-left { border-right-color: rgba(154, 144, 129, 0.2); }
    .shift--soon .shift-aside { border-left-color: rgba(154, 144, 129, 0.12); }
    .shift--soon .shift-body + .shift-body { border-top-color: rgba(154, 144, 129, 0.2); }
    .shift--soon .shift-left-stack::after { background: var(--muted); }
    .shift--soon .shift-icon { color: var(--muted); }
    .shift--soon .shift-aside-theme {
      color: var(--muted);
      border-color: rgba(154, 144, 129, 0.4);
    }
    .shift--soon .shift-body a {
      color: var(--muted);
      border-bottom-color: var(--rule);
    }
    .shift--soon .shift-body a:hover { border-bottom-color: var(--muted); }
    .shift--soon .project-shot { filter: grayscale(1); opacity: 0.7; }

    .dev-badge {
      margin-top: 0.6rem;
      margin-bottom: 0.85rem;
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 0.66rem;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--orange);
    }

    .dall-e-gallery {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.75rem;
      margin-top: 1.5rem;
      margin-bottom: 1.5rem;
      max-width: 420px;
    }

    .dall-e-figure {
      margin: 0;
    }

    .dall-e-frame {
      display: block;
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      cursor: pointer;
      border-radius: 4px;
      border: 1px solid var(--rule);
      filter: brightness(0.8) saturate(0.5);
    }

    .dall-e-caption {
      display: block;
      margin-top: 0.4rem;
      font-size: 0.72rem;
      font-style: italic;
      color: var(--muted);
      opacity: 0.7;
      line-height: 1.4;
    }

    .project-shot-wrap {
      display: block;
      max-width: 420px;
      overflow: hidden;
      margin-top: 1.5rem;
      border-radius: 4px;
      border: 1px solid var(--rule);
    }
    .project-shot {
      display: block;
      width: 100%;
      height: auto;
    }

    .project-shot-row {
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
      max-width: 560px;
      margin-top: 1.5rem;
    }
    .project-shot-row .project-shot-wrap {
      margin-top: 0;
      max-width: none;
      flex: 1 1 0;
      min-width: 0;
    }

    .install-strip {
      max-width: 820px;
      margin-top: 1.5rem;
      padding-top: 1.5rem;
      border-top: 1px solid rgba(212, 96, 26, 0.2);
    }

    .install-label {
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 0.55rem;
    }

    .install-note {
      font-size: 0.82rem;
      color: var(--muted);
      line-height: 1.65;
      margin-bottom: 1.25rem;
    }

    .install-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.7rem;
    }

    .install-row {
      display: flex;
      align-items: baseline;
      gap: 1.25rem;
    }

    .pkg-name {
      min-width: 9rem;
      font-size: 0.85rem;
      color: var(--cream);
      transition: color 0.12s;
    }

    .pkg-name:hover { color: var(--orange); }

    .pkg-links {
      display: flex;
      gap: 1.25rem;
    }

    .pkg-link {
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted);
      transition: color 0.12s;
    }

    .pkg-link:hover { color: var(--orange); }

    .shift-icon {
      position: absolute;
      left: 0;
      top: calc(var(--dot-offset) + 3px);
      transform: translateY(-50%);
      width: clamp(4.25rem, 8.5vw, 6.65rem);
      height: auto;
      color: var(--orange);
    }

    @media (min-width: 641px) {
      .shift-icon { width: var(--year-font); }
    }

    @media (max-width: 640px) {
      .shift-icon {
        position: static;
        transform: none;
      }
      .project-shot-wrap { max-width: none; }
      .dall-e-gallery { max-width: none; }
      .install-row { flex-wrap: wrap; gap: 0.4rem 1.25rem; }
      .pkg-name { min-width: 0; }
    }

    #lightbox {
      display: none;
      position: fixed;
      inset: 0;
      /* --night at 0.92, never pure black (design note 16.1) */
      background: rgba(12, 18, 25, 0.92);
      z-index: 1000;
      align-items: center;
      justify-content: center;
      cursor: zoom-out;
      overscroll-behavior: contain;
      touch-action: none;
    }

    #lightbox.open { display: flex; }

    #lightbox-img {
      max-width: 92vw;
      max-height: 92vh;
      object-fit: contain;
      cursor: default;
      display: block;
    }

    #lightbox-close {
      position: absolute;
      top: 1.25rem;
      right: 1.5rem;
      background: none;
      border: none;
      color: var(--cream);
      font-size: 2rem;
      line-height: 1;
      cursor: pointer;
      opacity: 0.7;
      padding: 0.25rem 0.5rem;
      font-family: 'Inter', system-ui, sans-serif;
      font-weight: 300;
    }

    #lightbox-close:hover { opacity: 1; }

    .now-header {
      background: var(--night);
      border-top: 1px solid var(--rule);
      border-bottom: 1px solid var(--rule);
      display: grid;
      grid-template-columns: minmax(240px, 18vw) minmax(0, 1fr) minmax(160px, 18vw);
      --year-font: clamp(3rem, 7vw, 4.5rem);
      --year-lh: 1;
      --year-lead: 7px;
      --year-box: calc(var(--year-font) * var(--year-lh) + var(--year-lead));
      --title-font: clamp(1.5rem, 3.5vw, 2.25rem);
      --title-line: 1.15;
      --title-offset: clamp(10px, 1.5vw, 23px);
      --title-cover: calc(1.25rem + var(--title-offset));
      --pill-offset: clamp(13px, calc(3.5vw - 11px), 33px);
      --pill-h: calc(0.7rem * 1.8 + 2px);
      --dot-offset: clamp(22px, calc(3.5vw - 2px), 42px);
      --row-h: max(
        var(--year-box),
        calc(var(--title-offset) + var(--title-font) * var(--title-line) + var(--title-cover)),
        calc(var(--pill-offset) + var(--pill-h))
      );
    }

    @media (min-width: 641px) {
      .now-header {
        --year-lh: 0.75;
        --year-lead: 0px;
        --row-mid: calc(var(--year-font) * var(--year-lh) / 2 + 1.5px);
        --title-offset: calc(var(--row-mid) - var(--title-font) * var(--title-line) / 2);
        --pill-offset: calc(var(--row-mid) - var(--pill-h) / 2);
        --dot-offset: calc(var(--row-mid) - 3px);
        --title-cover: 1.25rem;
      }
      .now-title-anchor + .now-body { margin-top: 1.5rem; }
    }

    .now-header-left {
      padding: 2.75rem 3rem 2.5rem;
      border-right: 1px solid rgba(212, 96, 26, 0.2);
      position: relative;
    }

    .now-header-stack {
      position: sticky;
      top: var(--pin-top);
      display: flex;
      flex-direction: column;
      height: var(--row-h);
      box-sizing: border-box;
    }

    .now-header-stack::after {
      content: '';
      position: absolute;
      right: calc(-3rem - 3px);
      top: var(--dot-offset);
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--orange);
      border: 1.5px solid var(--night);
    }

    .now-year {
      font-family: 'DM Serif Display', Georgia, serif;
      font-size: var(--year-font);
      font-weight: 400;
      line-height: var(--year-lh);
      color: var(--orange);
      margin-top: var(--year-lead);
    }

    .now-header-content {
      padding: 2.75rem 3rem 2.5rem;
      max-width: 920px;
    }

    .now-title-anchor {
      position: sticky;
      top: var(--pin-top);
      z-index: 10;
      display: flex;
      flex-direction: column;
      height: var(--row-h);
      box-sizing: border-box;
    }

    .now-title {
      font-family: 'DM Serif Display', Georgia, serif;
      font-size: var(--title-font);
      font-style: italic;
      font-weight: 400;
      line-height: var(--title-line);
      color: var(--cream);
      margin: 0;
      padding: var(--title-offset) 0 var(--title-cover) 0;
      background: var(--night);
      width: 100%;
      flex: 1;
      box-sizing: border-box;
      position: relative;
      z-index: 5;
    }

    .now-title::before {
      content: '';
      position: absolute;
      top: calc(-1 * var(--pin-top));
      left: 0;
      right: 0;
      height: var(--pin-top);
      background: var(--night);
      pointer-events: none;
    }

    .now-body {
      font-size: 0.92rem;
      color: var(--muted);
      line-height: 1.75;
    }

    .now-body em {
      font-style: italic;
      color: var(--cream);
    }

    .now-coda {
      font-family: 'DM Serif Display', Georgia, serif;
      font-style: italic;
      font-size: clamp(1rem, 1.8vw, 1.25rem);
      color: var(--cream);
      margin-top: 1rem;
    }

    .now-header-aside {
      padding: 2.5rem 2.5rem;
      border-left: 1px solid rgba(212, 96, 26, 0.12);
      text-align: right;
    }

    .now-theme-anchor {
      position: sticky;
      top: var(--pin-top);
      display: block;
      text-align: right;
      padding-top: var(--pill-offset);
      height: var(--row-h);
      box-sizing: border-box;
    }

    .now-theme {
      display: inline-block;
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--orange);
      border: 1px solid rgba(212, 96, 26, 0.4);
      padding: 0.4em 0.95em;
      border-radius: 999px;
    }

    @media (max-width: 900px) {
      .now-header { grid-template-columns: minmax(240px, 22vw) minmax(0, 1fr); }
      .now-header-aside { display: none; }
    }

    @media (max-width: 640px) {
      .now-header { grid-template-columns: minmax(0, 1fr); }
      .now-header-left {
        border-right: none;
        padding: 1.5rem 1.5rem 0.625rem;
      }
      .now-header-stack { position: static; height: auto; margin-top: 0.5rem; }
      .now-header-stack::after { display: none; }
      .now-header-content { padding: 0.75rem 1.5rem 2.5rem; }
      .now-title-anchor { top: 1rem; }
      .now-title::before { top: -1rem; height: 1rem; }
    }

    .cta-section {
      display: grid;
      grid-template-columns: minmax(240px, 18vw) minmax(0, 1fr) minmax(160px, 18vw);
      border-top: 1px solid var(--rule);
      border-bottom: 1px solid var(--rule);
    }

    .cta-left {
      padding: 4rem 3rem 4.5rem;
      border-right: 1px solid rgba(212, 96, 26, 0.2);
      position: relative;
    }

    .cta-left-stack {
      position: relative;
    }

    .cta-left-stack::after {
      content: '';
      position: absolute;
      right: calc(-3rem - 3px);
      top: clamp(10px, calc(2vw - 3px), 18px);
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--orange);
      border: 1.5px solid var(--night);
    }

    .cta-content {
      padding: 4rem 3rem 4.5rem;
    }

    .cta-availability {
      font-family: 'Inter', system-ui, sans-serif;
      font-style: italic;
      font-size: 0.92rem;
      color: var(--muted);
      line-height: 1.7;
      max-width: 560px;
      margin-bottom: 1.5rem;
    }

    .cta-prompt {
      font-family: 'DM Serif Display', Georgia, serif;
      font-style: italic;
      font-size: clamp(1.5rem, 3.5vw, 2.25rem);
      font-weight: 400;
      line-height: 1.15;
      color: var(--cream);
      margin-bottom: 1.75rem;
    }

    .cta-button {
      display: inline-flex;
      align-items: center;
      gap: 0.75em;
      font-family: inherit;
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--night);
      background: var(--orange);
      border: 0;
      padding: 1em 1.75em;
      border-radius: 6px;
      text-decoration: none;
      cursor: pointer;
      transition: box-shadow 0.15s, background 0.15s, color 0.15s;
    }

    /* Hover never moves anything (design note 14.1): no transform, not even on
       the arrow. The signal is a halo plus an opacity reveal on a glyph that is
       already in the flow. */
    .cta-button:hover {
      box-shadow: 0 0 0 3px rgba(212, 96, 26, 0.35);
    }

    .cta-button .arrow {
      font-size: 1.15em;
      line-height: 1;
      letter-spacing: 0;
      opacity: 0.75;
      transition: opacity 0.15s;
    }

    .cta-button:hover .arrow {
      opacity: 1;
    }

    .cta-aside {
      padding: 4rem 2.5rem 4.5rem;
      border-left: 1px solid rgba(212, 96, 26, 0.12);
      text-align: right;
    }

    @media (max-width: 900px) {
      .cta-section { grid-template-columns: minmax(240px, 22vw) minmax(0, 1fr); }
      .cta-aside { display: none; }
    }

    @media (max-width: 640px) {
      .cta-section { grid-template-columns: minmax(0, 1fr); }
      .cta-left { display: none; }
      .cta-left-stack::after { display: none; }
      .cta-content { padding: 3rem 1.5rem 3rem; }
    }

    .contact-form {
      max-width: 560px;
      margin-top: 1.5rem;
    }

    .form-field {
      margin-bottom: 1.25rem;
    }

    .form-field label {
      display: block;
      font-size: 0.72rem;
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 0.4rem;
    }

    .form-field input,
    .form-field textarea {
      width: 100%;
      background: var(--night-soft);
      border: 1px solid var(--rule);
      border-radius: 4px;
      padding: 0.75rem 0.9rem;
      color: var(--cream);
      font-family: inherit;
      font-size: 0.92rem;
      line-height: 1.5;
      transition: border-color 0.12s;
    }

    .form-field input:focus,
    .form-field textarea:focus {
      outline: none;
      border-color: var(--orange);
    }

    .form-field textarea {
      resize: vertical;
      min-height: 140px;
    }

    .form-success {
      font-family: 'DM Serif Display', Georgia, serif;
      font-style: italic;
      font-size: clamp(1.25rem, 2.5vw, 1.5rem);
      color: var(--cream);
      line-height: 1.5;
    }

    .form-errors {
      border-left: 2px solid var(--orange);
      padding-left: 1rem;
      margin-bottom: 1.5rem;
      max-width: 560px;
    }

    .form-errors p {
      font-size: 0.85rem;
      color: var(--cream);
      margin: 0.2rem 0;
    }

    .hp-field {
      position: absolute;
      left: -9999px;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }


/* ===== 7. Essays ========================================================= */
    .nav-section {
      font-size: 0.8rem;
      font-weight: 500;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--muted);
      transition: color 0.12s;
    }

    .nav-section:hover { color: var(--cream); }
    .nav-section[aria-current='page'] { color: var(--cream); }

    /* ---------- essays index ---------- */

    .essais-intro {
      padding: 6rem 3rem 4rem;
      border-bottom: 1px double rgba(237, 232, 216, 0.07);
    }

    .eyebrow {
      font-size: 0.78rem;
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--orange);
      margin-bottom: 2rem;
    }

    .eyebrow::before {
      content: '';
      display: block;
      width: 1.5rem;
      height: 1px;
      background: var(--orange);
      margin-bottom: 0.75rem;
    }

    .essais-intro h2 {
      font-family: 'DM Serif Display', Georgia, serif;
      font-size: clamp(2.1rem, 4.4vw, 3.4rem);
      font-weight: 400;
      line-height: 1.5;
      color: var(--cream);
    }

    .essais-intro h2 em {
      font-style: italic;
      color: var(--orange);
    }

    .essais-lede {
      margin-top: 1.75rem;
      max-width: 640px;
      border-left: 2px solid rgba(212, 96, 26, 0.6);
      padding-left: 1.25rem;
    }

    .essais-lede p {
      font-size: 0.92rem;
      color: var(--muted);
      line-height: 1.7;
    }

    .essais-lede p + p { margin-top: 0.6rem; }

    .essay-list { padding: 0 3rem 3rem; }

    .essay-row {
      display: grid;
      grid-template-columns: minmax(160px, 18vw) minmax(0, 1fr);
      gap: 2rem;
      padding: 2.75rem 0;
      border-bottom: 1px solid var(--rule);
      transition: border-color 0.12s;
    }

    .essay-row:hover { border-bottom-color: rgba(212, 96, 26, 0.5); }

    .essay-row-theme {
      font-size: 0.72rem;
      font-weight: 500;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: var(--orange);
    }

    .essay-row-date {
      display: block;
      margin-top: 0.5rem;
      font-size: 0.72rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .essay-row-title {
      font-family: 'DM Serif Display', Georgia, serif;
      font-style: italic;
      font-size: clamp(1.4rem, 2.6vw, 2rem);
      font-weight: 400;
      line-height: 1.2;
      color: var(--cream);
      transition: color 0.12s;
    }

    .essay-row:hover .essay-row-title { color: var(--orange); }

    .essay-row-hook {
      margin-top: 0.85rem;
      max-width: 660px;
      font-size: 0.92rem;
      color: var(--muted);
      line-height: 1.75;
    }

    .essay-row-more {
      display: inline-block;
      margin-top: 1rem;
      font-size: 0.72rem;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted);
      transition: color 0.12s;
    }

    .essay-row:hover .essay-row-more { color: var(--orange); }

    /* ---------- essay page ---------- */

    .essay { padding: 5rem 3rem 3rem; }

    .essay-inner { max-width: 680px; }

    .essay-title {
      font-family: 'DM Serif Display', Georgia, serif;
      font-size: clamp(2.1rem, 4.8vw, 3.25rem);
      font-weight: 400;
      line-height: 1.2;
      color: var(--cream);
    }

    .essay-meta {
      margin-top: 1.25rem;
      font-size: 0.72rem;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .essay-standfirst {
      margin-top: 2rem;
      max-width: 640px;
      border-left: 2px solid rgba(212, 96, 26, 0.6);
      padding-left: 1.25rem;
      font-family: 'DM Serif Display', Georgia, serif;
      font-style: italic;
      font-size: clamp(1.1rem, 2vw, 1.35rem);
      line-height: 1.5;
      color: var(--cream);
    }

    .essay-body { margin-top: 3rem; }

    .essay-body p {
      font-size: 0.98rem;
      color: var(--muted);
      line-height: 1.85;
    }

    .essay-body p + p { margin-top: 1.4rem; }

    .essay-body em { font-style: normal; color: var(--cream); }

    .essay-body a {
      color: var(--orange);
      border-bottom: 1px solid rgba(212, 96, 26, 0.35);
      transition: border-color 0.12s;
    }
    .essay-body a:hover { border-bottom-color: var(--orange); }

    /* Scoped under .essay-body so these beat the generic `.essay-body p` rule
       above (0,1,1). A bare `.essay-address` (0,1,0) silently loses to it. */
    .essay-body .essay-address {
      margin-top: 3rem;
      margin-bottom: 0;
      font-size: 0.72rem;
      font-weight: 500;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: var(--orange);
    }

    .essay-body .essay-address + p { margin-top: 0.9rem; }

    .essay-creed {
      margin: 1.75rem 0;
      padding-left: 1.25rem;
      border-left: 2px solid rgba(212, 96, 26, 0.6);
      list-style: none;
    }

    .essay-creed li {
      font-size: 0.98rem;
      color: var(--cream);
      line-height: 1.5;
    }

    .essay-creed li + li { margin-top: 1.1rem; }

    .essay-creed li span {
      display: block;
      margin-top: 0.3rem;
      font-size: 0.92rem;
      color: var(--muted);
      line-height: 1.75;
    }

    .essay-body .essay-closer {
      margin-top: 3.5rem;
      padding-top: 2.75rem;
      border-top: 1px solid rgba(212, 96, 26, 0.25);
      font-family: 'DM Serif Display', Georgia, serif;
      font-style: italic;
      font-size: clamp(1.3rem, 2.6vw, 1.85rem);
      line-height: 1.45;
      color: var(--cream);
    }

    .essay-note {
      margin-top: 3rem;
      padding: 1.25rem 1.5rem;
      background: var(--night-soft);
      border-left: 2px solid var(--orange);
      border-radius: 0 4px 4px 0;
      font-size: 0.85rem;
      color: var(--muted);
      line-height: 1.7;
      max-width: 640px;
    }

    .essay-note strong {
      display: block;
      margin-bottom: 0.35rem;
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--cream);
    }

    .essay-foot {
      margin-top: 4rem;
      padding-top: 2rem;
      border-top: 1px solid var(--rule);
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 1rem 2rem;
    }

    .essay-foot a {
      font-size: 0.72rem;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted);
      transition: color 0.12s;
    }

    .essay-foot a:hover { color: var(--cream); }
    .essay-foot .essay-foot-next:hover { color: var(--orange); }

    /* essays responsive (the nav and footer breakpoints live in the chrome
       section above; only the essay-specific rules are repeated here) */
    @media (max-width: 900px) {
      .essay-row { grid-template-columns: minmax(140px, 22vw) minmax(0, 1fr); gap: 1.5rem; }
    }

    @media (max-width: 640px) {
      .nav-section { font-size: 0.72rem; letter-spacing: 0.16em; }

      .essais-intro { padding: 3rem 1.5rem 2.5rem; }
      .essay-list { padding: 0 1.5rem 2rem; }
      .essay-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.9rem;
        padding: 2rem 0;
      }
      .essay-row-date { display: inline; margin-top: 0; }
      .essay-row-theme::after {
        content: '·';
        margin: 0 0.5em;
        opacity: 0.5;
        color: var(--muted);
      }

      .essay { padding: 3rem 1.5rem 2rem; }
      .essay-body { margin-top: 2.25rem; }
      .essay-closer { margin-top: 2.75rem; padding-top: 2rem; }
    }

/* ===== 8. Mentions legales =============================================== */
/* Every rule here is scoped to body.page-legales on purpose. That page styles
   bare h1 / h2 / p / footer / a, which unscoped would hit the home page and
   the essays. Do not remove the prefix. */

    body.page-legales a { color: var(--orange); text-decoration: none; transition: color 0.12s; }
    body.page-legales a:hover { color: var(--cream); }

    body.page-legales .wrap {
      max-width: 720px;
      margin: 0 auto;
      padding: 4rem 1.75rem 5rem;
    }

    body.page-legales .back {
      display: inline-block;
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 3rem;
    }

    body.page-legales .back:hover { color: var(--cream); }

    body.page-legales h1 {
      font-family: 'DM Serif Display', Georgia, serif;
      font-weight: 400;
      font-size: clamp(2rem, 4vw, 2.75rem);
      line-height: 1.2;
      color: var(--cream);
      margin-bottom: 0.5rem;
    }

    body.page-legales .subtitle {
      font-size: 0.8rem;
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--orange);
      margin-bottom: 2.5rem;
    }

    body.page-legales .subtitle::before {
      content: '';
      display: block;
      width: 1.5rem;
      height: 1px;
      background: var(--orange);
      margin-bottom: 0.6rem;
    }

    body.page-legales h2 {
      font-family: 'DM Serif Display', Georgia, serif;
      font-style: italic;
      font-weight: 400;
      font-size: clamp(1.25rem, 2.5vw, 1.6rem);
      line-height: 1.3;
      color: var(--cream);
      margin-top: 2.75rem;
      margin-bottom: 1rem;
    }

    body.page-legales h2 .num {
      font-style: normal;
      color: var(--orange);
      font-size: 0.7em;
      letter-spacing: 0.04em;
      margin-right: 0.6em;
      vertical-align: 0.1em;
    }

    body.page-legales p { color: var(--muted); margin-bottom: 0.85rem; }
    body.page-legales p strong { color: var(--cream); font-weight: 500; }

    body.page-legales .info {
      background: var(--night-soft);
      border-left: 2px solid var(--orange);
      padding: 1.25rem 1.5rem;
      margin: 1.25rem 0 0.5rem;
      border-radius: 0 4px 4px 0;
    }

    body.page-legales .info p { color: var(--cream); margin-bottom: 0.4rem; font-size: 0.92rem; }
    body.page-legales .info p:last-child { margin-bottom: 0; }
    body.page-legales .info p span { color: var(--muted); margin-right: 0.5em; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; }

    body.page-legales footer {
      margin-top: 5rem;
      padding-top: 2rem;
      border-top: 1px solid var(--rule);
      font-size: 0.75rem;
      color: var(--muted);
      letter-spacing: 0.04em;
    }

    @media (max-width: 640px) {
      body.page-legales .wrap { padding: 2.5rem 1.25rem 4rem; }
    }

/* ===== 9. Per-page overrides ============================================= */
/* The six rules where the pages genuinely disagreed before the merge. Kept
   explicit rather than reconciled, so this file reproduces the previous
   rendering exactly. Reconciling them is a design decision, not a refactor. */

    /* the essays nav centres its items; the home page sits them on the baseline */
    body.page-essais nav { align-items: center; }
    body.page-essais .nav-right { align-items: center; }

    /* the home page reserves extra bottom padding on mobile for the sticky CTA */
    @media (max-width: 640px) {
      body.page-essais .site-footer { padding: 1.5rem 1.5rem 3rem; }
    }

    /* mentions legales runs looser and slightly smaller than the rest */
    body.page-legales {
      line-height: 1.7;
      font-size: 0.95rem;
    }