:root{
    --bg:#F0E7D6; --bg-2:#E9DEC9; --card:#F7F0E1; --ink:#2A2018; --muted:#8A7F6E;
    --line:#DBD1C1; --sun:#C56A1E; --sun-2:#DE8A34; --sea:#215060; --sea-deep:#173a47;
    --sky-warm:#F1D9B0; --sail:#FBF6EA;
    --font-display:"Iowan Old Style","Hoefler Text","Palatino Linotype",Palatino,Georgia,serif;
    --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,ui-sans-serif,sans-serif;
    --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
    --maxw:1120px; --read:660px;
  }
  @media (prefers-color-scheme:dark){
    :root{
      --bg:#1E1610; --bg-2:#261C13; --card:#2A2016; --ink:#EFE4D1; --muted:#A99C85;
      --line:#3A2E22; --sun:#E0913E; --sun-2:#F0A54F; --sea:#316073; --sea-deep:#1a3742;
      --sky-warm:#5a3a1f; --sail:#F3ECDC;
    }
  }
  :root[data-theme="light"]{
    --bg:#F0E7D6; --bg-2:#E9DEC9; --card:#F7F0E1; --ink:#2A2018; --muted:#8A7F6E;
    --line:#DBD1C1; --sun:#C56A1E; --sun-2:#DE8A34; --sea:#215060; --sea-deep:#173a47;
    --sky-warm:#F1D9B0; --sail:#FBF6EA;
  }
  :root[data-theme="dark"]{
    --bg:#1E1610; --bg-2:#261C13; --card:#2A2016; --ink:#EFE4D1; --muted:#A99C85;
    --line:#3A2E22; --sun:#E0913E; --sun-2:#F0A54F; --sea:#316073; --sea-deep:#1a3742;
    --sky-warm:#5a3a1f; --sail:#F3ECDC;
  }

  *{box-sizing:border-box}
  body{margin:0; background:var(--bg)}
  /* the day: a fixed sky layer behind everything; JS moves the sun + shifts the
     palette dawn→noon→dusk as you scroll. .site rides above it, transparent. */
  #sky{position:fixed; inset:0; width:100vw; height:100svh; z-index:0; display:block; pointer-events:none}
  .site{position:relative; z-index:1; background:transparent; color:var(--ink); font-family:var(--font-ui); -webkit-font-smoothing:antialiased; overflow-x:hidden}
  ::selection{background:var(--sun); color:var(--bg)}
  a{color:inherit}
  :focus-visible{outline:2.5px solid var(--sun); outline-offset:3px; border-radius:3px}

  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,52px)}
  .eyebrow{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--sun); margin:0}
  .serif{font-family:var(--font-display)}

  /* ---- top bar ---- */
  .top{position:absolute; top:0; left:0; right:0; z-index:5}
  .top .wrap{display:flex; align-items:center; justify-content:space-between; padding-top:22px; padding-bottom:22px}
  .mark{font-family:var(--font-display); font-size:22px; font-weight:600; letter-spacing:.02em; text-decoration:none; display:inline-flex; align-items:baseline; gap:.5px}
  .mark .dot{color:var(--sun)}
  .topnav{display:flex; gap:26px; align-items:center}
  .topnav a{font-size:13.5px; text-decoration:none; color:var(--ink); opacity:.75; transition:opacity .15s}
  .topnav a:hover{opacity:1}
  .topnav a.cta{opacity:1; color:var(--sun); font-weight:600}
  @media (max-width:620px){ .topnav a.link{display:none} }

  /* ---- hero ---- */
  /* --horizon: fraction of the hero that is SKY. The sun/water live on a fixed,
     viewport-anchored canvas, so the hero is EXACTLY 100svh (height, not min-height)
     to keep the layout's reserved water aligned with the painted waterline — otherwise
     a tall headline grows the hero past the viewport and the two diverge. On shorter
     screens the horizon rises (less water) to leave room for the headline. */
  .hero{position:relative; height:100svh; display:flex; align-items:center; isolation:isolate;
    --horizon:.74;
    padding-bottom:calc((1 - var(--horizon)) * 100svh + clamp(24px,5vh,60px))}
  @media (max-height:880px){ .hero{--horizon:.80} }
  @media (max-height:720px){ .hero{--horizon:.84} }
  #coast{position:absolute; inset:0; width:100%; height:100%; z-index:0; display:block}
  .hero .wrap{position:relative; z-index:2; width:100%; padding-top:clamp(88px,13vh,140px); padding-bottom:0}
  .hero-in{max-width:720px}
  .hero .eyebrow{margin-bottom:20px}
  .hero h1{
    font-family:var(--font-display); font-weight:600; font-style:normal;
    font-size:clamp(40px,7.4vw,82px); line-height:1.02; letter-spacing:-.015em;
    margin:0 0 22px; text-wrap:balance;
  }
  .hero h1 em{font-style:italic; color:var(--sun)}
  .hero .lede{font-size:clamp(17px,2.1vw,21px); line-height:1.5; color:var(--ink); max-width:34ch; margin:0 0 18px; opacity:.9}
  .hero .sig{font-family:var(--font-mono); font-size:12.5px; letter-spacing:.02em; color:var(--muted); margin:0 0 34px}
  .flag{font-size:.92em; margin-left:.2em; vertical-align:-.05em}
  .cta-row{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
  .btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-ui); font-size:15px; font-weight:600; text-decoration:none; padding:13px 22px; border-radius:999px; transition:transform .08s ease, background .2s ease}
  .btn.primary{background:var(--sun); color:#fff}
  .btn.primary:hover{background:var(--sun-2)}
  .btn:active{transform:translateY(1px)}
  .btn.ghost{color:var(--ink); opacity:.8}
  .btn.ghost:hover{opacity:1}

  /* reveal */
  .rise{opacity:0; transform:translateY(16px); animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
  .rise.d1{animation-delay:.15s} .rise.d2{animation-delay:.28s} .rise.d3{animation-delay:.4s} .rise.d4{animation-delay:.52s}
  @keyframes rise{to{opacity:1; transform:none}}
  @media (prefers-reduced-motion:reduce){ .rise{animation:none; opacity:1; transform:none} }

  /* ---- sections ---- */
  section.band{padding:clamp(72px,11vw,140px) 0}
  .band.alt{background:transparent}  /* let the sky show through — the day continues */
  .sec-head{max-width:var(--read); margin-bottom:clamp(34px,5vw,56px)}
  .sec-head h2{font-family:var(--font-display); font-weight:600; font-size:clamp(28px,4.2vw,44px); line-height:1.08; letter-spacing:-.01em; margin:14px 0 0; text-wrap:balance}
  .sec-head p{font-size:17px; line-height:1.6; color:var(--muted); margin:16px 0 0; max-width:52ch}

  /* work grid */
  .menu{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2.4vw,26px)}
  @media (max-width:720px){ .menu{grid-template-columns:1fr} }
  .dish{position:relative; background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column; transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s}
  .dish:hover{transform:translateY(-4px); box-shadow:0 18px 46px -22px rgba(42,32,24,.45)}
  .dish.feature{grid-column:1 / -1}
  .dish .art{position:relative; aspect-ratio:16/7; background:var(--sea); overflow:hidden}
  .dish.small .art{aspect-ratio:16/9}
  .dish .art canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
  .dish .body{padding:22px 24px 26px}
  .dish .kicker{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
  .dish h3{font-family:var(--font-display); font-weight:600; font-size:clamp(19px,2.4vw,26px); line-height:1.14; margin:9px 0 0; letter-spacing:-.01em}
  .dish p{font-size:14.5px; line-height:1.55; color:var(--muted); margin:11px 0 0; max-width:52ch}
  .dish .open{margin-top:16px; font-size:13.5px; font-weight:600; color:var(--sun); display:inline-flex; gap:6px; align-items:center}
  .dish.blank{background:transparent; border-style:dashed}
  .dish.blank .art{background:transparent; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center}
  .dish.blank .art span{font-family:var(--font-display); font-style:italic; font-size:22px; color:var(--muted); opacity:.7}

  /* now / soul reading blocks */
  .read{max-width:var(--read)}
  .read p{font-size:clamp(17px,2vw,19px); line-height:1.62; margin:0 0 18px}
  .read .quiet{color:var(--muted)}
  .note{font-family:var(--font-display); font-size:clamp(19px,2.4vw,24px); line-height:1.5; font-style:italic}
  .note + .by{font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:24px; display:flex; align-items:center; gap:10px}
  .rule{height:1px; background:var(--line); border:0; margin:0}

  /* CTA band — transparent so the underwater sky shows through */
  .invite{background:transparent; color:var(--sail)}
  .invite .eyebrow{color:var(--sun-2)}
  .invite h2{color:var(--sail)}
  .invite .sec-head p{color:rgba(251,246,234,.75)}
  .invite .btn.primary{background:var(--sun)}

  /* ACT 3 — underwater: JS adds .is-deep to <body> once we sink under the surface,
     flipping the closing text to light ink on the deep sea. */
  .site h1,.site h2,.site h3,.site p,.site a,.site .eyebrow{transition:color .55s ease}
  .is-deep .site{color:var(--sail)}
  .is-deep .sec-head p,.is-deep .read p,.is-deep .read .quiet{color:rgba(251,246,234,.80)}
  .is-deep .eyebrow{color:var(--sun-2)}
  .is-deep .sec-head h2,.is-deep .note{color:var(--sail)}
  .is-deep footer{border-top-color:rgba(251,246,234,.14)}
  .is-deep footer a,.is-deep footer .home,.is-deep footer .coast{color:rgba(251,246,234,.72)}

  /* footer */
  footer{padding:44px 0 52px; border-top:1px solid var(--line)}
  footer .wrap{display:flex; flex-wrap:wrap; gap:18px 32px; align-items:center; justify-content:space-between}
  footer .fl{display:flex; align-items:center; gap:24px; flex-wrap:wrap}
  footer a{font-size:13.5px; color:var(--muted); text-decoration:none; transition:color .15s}
  footer a:hover{color:var(--ink)}
  footer .home{font-family:var(--font-mono); font-size:12.5px; color:var(--ink)}
  footer .coast{font-family:var(--font-display); font-style:italic; font-size:15px; color:var(--muted)}