/* ── Fonts (reused from the live site) ─────────────────────────── */
    @font-face{font-family:'Syne';font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/syne-700-normal-latin.woff2") format("woff2");}
    @font-face{font-family:'Syne';font-style:normal;font-weight:800;font-display:swap;src:url("/assets/fonts/syne-800-normal-latin.woff2") format("woff2");}
    @font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/instrument-serif-400-normal-latin.woff2") format("woff2");}
    @font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url("/assets/fonts/instrument-serif-400-italic-latin.woff2") format("woff2");}
    @font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/dm-mono-400-normal-latin.woff2") format("woff2");}
    @font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/dm-mono-500-normal-latin.woff2") format("woff2");}

    :root{
      --ink:#06070b;
      --paper:#ece9e1;
      --muted:color-mix(in oklch, var(--paper) 52%, transparent);
      --faint:color-mix(in oklch, var(--paper) 30%, transparent);
      --line:color-mix(in oklch, var(--paper) 14%, transparent);
      --accent:#1fb389;            /* green — the smoke green, primary accent */
      --teal:#5fd0d6;              /* teal — secondary */
      --amber:#e2a35a;             /* amber — warm tertiary */
      --serif:'Instrument Serif',Georgia,serif;
      --disp:'Syne',system-ui,sans-serif;
      --mono:'DM Mono',ui-monospace,monospace;
      --ease:cubic-bezier(.22,1,.36,1);
      --gutter:clamp(16px,3.4vw,76px);
      --maxw:1760px;
    }

    *{box-sizing:border-box;margin:0;padding:0;}
    html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-gutter:stable;}
    body{
      background:var(--ink); color:var(--paper);
      font-family:var(--disp); font-weight:400;
      -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
      overflow-x:hidden;
    }
    ::selection{background:var(--accent);color:var(--ink);}
    a{color:inherit;text-decoration:none;}

    /* ── The WebGL measured field — fixed backdrop ─────────────────── */
    #field{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;}
    /* Vignette + legibility wash over the field */
    .veil{position:fixed;inset:0;z-index:1;pointer-events:none;
      background:
        radial-gradient(130% 90% at 50% 8%, transparent 0%, transparent 42%, color-mix(in oklch, var(--ink) 55%, transparent) 100%),
        linear-gradient(180deg, color-mix(in oklch, var(--ink) 55%, transparent) 0%, transparent 22%, transparent 60%, color-mix(in oklch, var(--ink) 92%, transparent) 100%);
    }
    .grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.015;mix-blend-mode:overlay;
      background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size:180px 180px;}

    /* ── Foreground ────────────────────────────────────────────────── */
    .wrap{position:relative;z-index:2;}
    .bar{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);}

    /* Masthead */
    .masthead{position:fixed;top:0;left:0;right:0;z-index:30;
      backdrop-filter:saturate(120%) blur(2px);
      border-bottom:1px solid transparent;transition:border-color .5s var(--ease),background .5s var(--ease);}
    .masthead.is-stuck{border-color:var(--line);background:color-mix(in oklch, var(--ink) 60%, transparent);}
    .masthead-in{display:flex;align-items:center;justify-content:space-between;gap:24px;
      padding-block:clamp(12px,1.5vw,18px);max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);}
    .wordmark{font-family:var(--disp);font-weight:800;letter-spacing:-.04em;font-size:clamp(18px,1.7vw,23px);position:relative;z-index:31;}
    .nav{display:flex;gap:clamp(14px,1.8vw,36px);font-family:var(--mono);font-size:clamp(11px,.95vw,13px);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
    .nav a{position:relative;padding-block:4px;transition:color .3s var(--ease);}
    .nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--accent);transition:right .35s var(--ease);}
    .nav a:hover{color:var(--paper);}
    .nav a:hover::after{right:0;}
    .issue{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--faint);text-transform:uppercase;white-space:nowrap;}
    .menu-btn{display:none;position:relative;z-index:31;background:none;border:1px solid var(--line);color:var(--paper);
      font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:9px 16px;border-radius:999px;cursor:pointer;
      transition:border-color .3s var(--ease),color .3s var(--ease);}
    .menu-btn:hover{border-color:var(--accent);color:var(--accent);}

    /* Full-screen mobile menu */
    .mobile-menu{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;justify-content:center;gap:2px;
      padding:clamp(86px,15vh,130px) var(--gutter) clamp(34px,7vh,72px);background:color-mix(in oklch, var(--ink) 98%, transparent);backdrop-filter:blur(12px);
      opacity:0;visibility:hidden;transform:translateY(-10px);
      transition:opacity .45s var(--ease),transform .55s var(--ease),visibility 0s linear .45s;}
    body.menu-open{overflow:hidden;}
    body.menu-open .mobile-menu{opacity:1;visibility:visible;transform:none;transition:opacity .45s var(--ease),transform .55s var(--ease);}
    .mobile-menu a{display:flex;align-items:baseline;gap:16px;font-family:var(--serif);font-size:clamp(34px,8.5vw,62px);
      line-height:1.18;letter-spacing:-.01em;color:var(--paper);}
    .mobile-menu a .mm-n{font-family:var(--mono);font-size:13px;color:var(--accent);letter-spacing:.1em;}
    .mobile-menu .mm-foot{margin-top:auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
      font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
      border-top:1px solid var(--line);padding-top:22px;}

    /* Hero */
    .hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
      padding-bottom:clamp(40px,8vh,120px);padding-top:clamp(96px,16vh,150px);}
    .kicker{font-family:var(--mono);font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--accent);
      display:flex;align-items:center;gap:14px;margin-bottom:clamp(22px,3vh,38px);}
    .kicker::before{content:"";width:46px;height:1px;flex:none;background:var(--accent);opacity:.7;}
    .headline{font-family:var(--serif);font-weight:400;line-height:.95;letter-spacing:-.015em;
      font-size:clamp(40px,8.6vw,168px);max-width:15ch;}
    .headline em{font-style:italic;}
    .headline .o{color:var(--faint);}
    .hero-foot{margin-top:clamp(34px,5vh,64px);display:flex;flex-wrap:wrap;align-items:flex-end;
      justify-content:space-between;gap:28px;border-top:1px solid var(--line);padding-top:24px;}
    .lede{font-family:var(--serif);font-size:clamp(18px,2vw,26px);line-height:1.32;color:var(--muted);max-width:34ch;}
    .lede em{font-style:italic;color:var(--paper);}
    .cue{font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--faint);
      display:inline-flex;flex-direction:column;align-items:center;gap:9px;}
    .cue svg{animation:bob 2.4s var(--ease) infinite;}
    @keyframes bob{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(5px);opacity:1}}

    /* Sheet — a translucent ink veil so the morphing field stays alive BEHIND
       the editorial content as you scroll, while text stays legible. */
    .sheet{position:relative;padding-top:6vh;
      background:linear-gradient(180deg,transparent 0,color-mix(in oklch, var(--ink) 72%, transparent) 11%,color-mix(in oklch, var(--ink) 72%, transparent) 87%,color-mix(in oklch, var(--ink) 96%, transparent) 100%);}

    section.block{max-width:var(--maxw);margin:0 auto;padding:clamp(64px,11vh,150px) var(--gutter);
      border-top:1px solid var(--line);}
    .block:first-child{border-top:0;}
    .eyebrow{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:clamp(34px,5vh,64px);}
    .eyebrow h2{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--paper);}
    .eyebrow .meta{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--faint);text-transform:uppercase;}

    /* NOW — dispatches list */
    .now{display:grid;gap:0;}
    .now-row{display:grid;grid-template-columns:64px 1fr auto;align-items:baseline;gap:clamp(16px,3vw,48px);
      padding:clamp(20px,3vh,34px) 0;border-top:1px solid var(--line);}
    .now-row:first-child{border-top:0;}
    .now-row .n{font-family:var(--mono);font-size:13px;color:var(--teal);letter-spacing:.1em;}
    .now-row .t{font-family:var(--serif);font-size:clamp(26px,4.4vw,52px);line-height:1.04;letter-spacing:-.01em;}
    .now-row .t em{font-style:italic;color:var(--accent);}
    .now-row .s{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);white-space:nowrap;}

    /* ROOMS index */
    .rooms{display:grid;gap:0;}
    .room{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:clamp(16px,3vw,48px);
      padding:clamp(22px,3.4vh,40px) 0;border-top:1px solid var(--line);transition:padding-left .4s var(--ease);}
    .room:hover{padding-left:18px;}
    .room .n{font-family:var(--mono);font-size:13px;color:var(--teal);}
    .room .name{font-family:var(--disp);font-weight:700;letter-spacing:-.02em;font-size:clamp(34px,6.4vw,84px);line-height:1;}
    .room .desc{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted);text-align:right;max-width:26ch;}
    .room .arrow{font-family:var(--serif);font-size:28px;color:var(--faint);transition:transform .4s var(--ease),color .4s var(--ease);}
    .room:hover .arrow{transform:translateX(8px);color:var(--accent);}
    /* ── Responsive ─────────────────────────────────────────────── */
    /* tablet portrait & down: desktop nav → menu button */
    @media(max-width:880px){
      .nav,.issue{display:none;}
      .menu-btn{display:inline-block;}
    }
    /* large phone & down */
    @media(max-width:680px){
      .room{grid-template-columns:36px 1fr;}
      .room .desc{display:none;}
      .now-row{grid-template-columns:36px 1fr;}
      .now-row .s{display:none;}
      .hero-foot{flex-direction:column;align-items:flex-start;gap:22px;}
      .cue{display:none;}
      .eyebrow{flex-direction:column;align-items:flex-start;gap:8px;}
      .foot-top{flex-direction:column;gap:34px;}
    }
    /* ultrawide: fill the real estate with type */
    @media(min-width:1700px){
      .headline{font-size:clamp(150px,8.8vw,210px);}
      .now-row .t{font-size:clamp(48px,3.4vw,62px);}
      .room .name{font-size:clamp(70px,5vw,98px);}
    }
    /* short landscape (rotated phones): don't trap the hero off-screen */
    @media(max-height:560px) and (orientation:landscape){
      .hero{min-height:auto;padding-top:90px;padding-bottom:44px;}
      .headline{font-size:clamp(32px,5.6vw,60px);}
      .mobile-menu a{font-size:clamp(24px,5vw,38px);}
    }

    /* FIELD NOTES — principles (real substance) */
    .notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--line);
      border:1px solid var(--line);}
    .note{background:var(--ink);padding:clamp(24px,3vw,42px);min-height:200px;display:flex;flex-direction:column;justify-content:space-between;gap:30px;}
    .note .n{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.12em;}
    .note p{font-family:var(--serif);font-size:clamp(20px,2.2vw,30px);line-height:1.18;letter-spacing:-.01em;}
    .note p em{font-style:italic;}

    /* Closing */
    .closing{text-align:center;padding-block:clamp(80px,16vh,200px);}
    .closing .big{font-family:var(--serif);font-size:clamp(40px,7vw,108px);line-height:1;letter-spacing:-.02em;}
    .closing .big em{font-style:italic;}
    .enter{display:inline-flex;align-items:center;gap:12px;margin-top:44px;font-family:var(--mono);font-size:13px;
      letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:16px 26px;
      transition:border-color .35s var(--ease),color .35s var(--ease),gap .35s var(--ease);}
    .enter:hover{border-color:var(--accent);color:var(--accent);gap:18px;}

    footer.foot{border-top:1px solid var(--line);}
    .foot-top{max-width:var(--maxw);margin:0 auto;padding:clamp(50px,9vh,96px) var(--gutter) clamp(36px,6vh,60px);
      display:flex;flex-wrap:wrap;gap:44px;justify-content:space-between;}
    .foot-brand{font-family:var(--disp);font-weight:800;letter-spacing:-.04em;font-size:clamp(30px,4.4vw,56px);display:block;line-height:.9;}
    .foot-built{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:20px;}
    .foot-tag{font-family:var(--serif);font-style:italic;font-size:clamp(18px,2vw,25px);color:var(--faint);margin-top:8px;max-width:32ch;line-height:1.3;}
    .foot-connect{display:flex;flex-direction:column;gap:18px;align-items:flex-start;}
    .foot-handle{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
    .foot-icons{display:flex;gap:10px;}
    .foot-icons a{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--muted);
      transition:color .3s var(--ease),border-color .3s var(--ease),transform .35s var(--ease),background .3s var(--ease);}
    .foot-icons a:hover{color:var(--ink);background:var(--accent);border-color:var(--accent);transform:translateY(-4px);}
    .foot-base{max-width:var(--maxw);margin:0 auto;padding:24px var(--gutter);border-top:1px solid var(--line);
      display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;
      font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);}
    .foot-base a:hover{color:var(--accent);}

    /* entrance reveal */
    /* Reveal only when JS is on — no-JS users get fully-visible content. */
    html.js [data-rise]{opacity:0;transform:translateY(26px);filter:blur(7px);transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1.1s var(--ease);}
    html.js [data-rise].in{opacity:1;transform:none;filter:blur(0);}
    @media(prefers-reduced-motion:reduce){html.js [data-rise]{opacity:1;transform:none;filter:none;transition:none;}.cue svg{animation:none;}}

/* ── Cursor light ─────────────────────────────────────────────────── */
/* Hide the OS cursor only when the custom light is active (desktop, motion on). */
html.has-cursor, html.has-cursor *{cursor:none;}
html.has-cursor input, html.has-cursor textarea, html.has-cursor [contenteditable]{cursor:auto;}
.cursor{position:fixed;left:0;top:0;z-index:60;pointer-events:none;width:26px;height:26px;margin:-13px 0 0 -13px;
  border-radius:50%;border:1px solid color-mix(in oklch, var(--accent) 70%, transparent);
  box-shadow:0 0 18px color-mix(in oklch, var(--accent) 45%, transparent);
  opacity:0;transition:opacity .3s var(--ease),width .25s var(--ease),height .25s var(--ease);mix-blend-mode:screen;}
.cursor.show{opacity:.85;}
.cursor.hot{width:46px;height:46px;}
@media(pointer:coarse){.cursor{display:none;}}
@media(prefers-reduced-motion:reduce){.cursor{display:none;}}

/* ── View transition: content leaves up / next rises in, around the live field.
   Enter is graceful (.55s); leave is quick (.28s) so the outgoing content is
   fully faded by swap-time and never gets yanked mid-fade (the old hitch). ── */
.wrap{transition:opacity .55s var(--ease), transform .6s var(--ease), filter .55s var(--ease);}
.wrap.is-leaving{transition:opacity .28s var(--ease), transform .42s var(--ease), filter .28s var(--ease);
  opacity:0; transform:translateY(-16px); filter:blur(7px); pointer-events:none;}
.wrap.is-entering{opacity:0; transform:translateY(26px); filter:blur(8px);}
@media(prefers-reduced-motion:reduce){
  .wrap{transition:opacity .2s linear;}
  .wrap.is-leaving,.wrap.is-entering{transform:none;filter:none;}
}

/* ── Account / app pages ──────────────────────────────────────────── */
button.enter{background:none;color:inherit;font:inherit;cursor:pointer;}
/* Hero CTAs — the single touch-point row in a hero. Pages either have these
   OR the scroll cue, never both. */
.hero-actions{margin-top:clamp(26px,4vh,44px);display:flex;flex-wrap:wrap;gap:14px;}
.hero-actions .enter{margin-top:0;}
/* A secondary CTA reads quieter than the primary. */
.hero-actions .enter.is-ghost{opacity:.7;}
.hero-actions .enter.is-ghost:hover{opacity:1;}
.acct-state{color:var(--accent);}
/* Signed-out: dim the account detail, keep the hero + sign-in actionable. */
body.is-signed-out .sheet .block{opacity:.32;filter:saturate(.5);transition:opacity .4s var(--ease),filter .4s var(--ease);pointer-events:none;}
body.is-signed-out [data-account-state]{color:var(--amber);}

/* ── Light easter-egg mode (monochrome ink on paper) ──────────────── */
html.mode-light .veil{ background:linear-gradient(180deg, transparent 58%, color-mix(in oklch, var(--ink) 45%, transparent)); }
html.mode-light .grain{ opacity:.02; mix-blend-mode:multiply; }
html.mode-light ::selection{ background:var(--accent); color:#fff; }
/* Cursor: the dark-mode ring uses screen-blend + glow, which vanishes on paper.
   In ink mode it becomes a solid dark ink ring (normal blend, no glow). */
html.mode-light .cursor{ mix-blend-mode:normal; box-shadow:none;
  border-color:color-mix(in oklch, var(--paper) 70%, transparent); }
html.mode-light .cursor.hot{ background:color-mix(in oklch, var(--paper) 10%, transparent); }