/* Layout: a full-bleed pixel meadow at the top and bottom of the page, rounded only where they meet the quiet 1120px column between.
   Every scene is a pixel-fixed loop; headings are set in a serif and redrawn on a coarse pixel grid. */
:root{
  --paper:#F4F5F0;
  --card:#FBFBF8;
  --ink:#1B1D19;
  --ink-2:#8A8E84;
  --ink-3:#B3B7AC;
  --line:#E0E2D9;
  --seed:#E3AE12;
  --btn:#262824;
  --btn-ink:#F7F7F3;
  --shadow:rgba(28,40,18,.16);

  --f-serif:"Newsreader", "Iowan Old Style", Georgia, serif;
  --f-sans:"Host Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --wrap:1120px;
  --gut:max(16px, 4vw);
  --round:clamp(18px, 2vw, 30px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#121410; --card:#1D1F1A; --ink:#ECEEE6; --ink-2:#8D9187; --ink-3:#5A5E55;
    --line:#2A2D26; --seed:#F0C53C; --btn:#ECEEE6; --btn-ink:#141612; --shadow:rgba(0,0,0,.5);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#121410; --card:#1D1F1A; --ink:#ECEEE6; --ink-2:#8D9187; --ink-3:#5A5E55;
  --line:#2A2D26; --seed:#F0C53C; --btn:#ECEEE6; --btn-ink:#141612; --shadow:rgba(0,0,0,.5);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.5 var(--f-sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--seed);outline-offset:3px}
h1,h2,h3{font-weight:400;margin:0;text-wrap:balance}
p{margin:0}
.wrap{max-width:calc(var(--wrap) + 2*var(--gut));margin-inline:auto;padding-inline:var(--gut)}
.mute{color:var(--ink-2)}

/* pixel headings */
[data-pix]{position:relative;font-family:var(--f-serif);font-optical-sizing:none}
[data-pix].pxd{-webkit-text-fill-color:transparent}
.pxc{position:absolute;left:0;image-rendering:pixelated;pointer-events:none}

/* pixel icons (pixelarticons, MIT) drawn 1:1 so every stroke stays a clean 2px block */
.ico{width:24px;height:24px;flex:none;fill:currentColor;shape-rendering:crispEdges}

/* buttons */
.btn{display:inline-flex;align-items:center;height:42px;padding:0 18px;border-radius:8px;font:500 15px/1 var(--f-sans);white-space:nowrap;transition:transform .15s,box-shadow .2s}
.btn:active{transform:translateY(1px)}
.btn-white{background:#fff;color:#111;box-shadow:0 1px 2px rgba(0,0,0,.12),0 6px 18px -8px rgba(10,30,60,.45)}
.btn-white:hover{box-shadow:0 1px 2px rgba(0,0,0,.12),0 10px 24px -8px rgba(10,30,60,.55)}

/* full-bleed scenes: rounded only on the side that meets the page */
.card{position:relative;overflow:hidden;isolation:isolate}
.card .bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.card .bg img,.card .bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated}

/* ── hero ─────────────────────────────── */
.hero{--fade:1.5s;height:clamp(600px,52vw,800px);border-radius:0 0 var(--round) var(--round);--h-ink:#fff;--h-ink-2:rgba(255,255,255,.88)}
.hero[data-sky="dusk"]{--h-ink:#3A2230;--h-ink-2:rgba(58,34,48,.84)}
.hero .bg video{object-position:80% 50%;opacity:0;transition:opacity var(--fade) ease}
.hero .bg video.on{opacity:1}
.top{position:absolute;top:0;left:0;right:0;z-index:2;padding-top:env(safe-area-inset-top,0px)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:22px 0}
.brand{display:inline-block;font-size:27px;line-height:1}
.brand [data-pix]{display:inline-block;font-weight:500}
.hero-in{padding-top:clamp(116px,17vw,240px);color:var(--h-ink);transition:color var(--fade) ease}
.hero h1{font-size:clamp(44px,5.6vw,84px);line-height:1;font-weight:500}
.hero-in p{margin-top:22px;max-width:36ch;font-size:clamp(17px,1.5vw,20px);font-weight:500;color:var(--h-ink);transition:color var(--fade) ease,text-shadow var(--fade) ease;
  text-shadow:0 0 1px rgba(8,38,92,.55),0 1px 3px rgba(8,38,92,.5),0 2px 18px rgba(8,38,92,.45)}
.hero[data-sky="dusk"] .hero-in p{text-shadow:0 0 1px rgba(255,240,232,.6),0 1px 3px rgba(255,240,232,.55),0 2px 18px rgba(255,240,232,.5)}
.hero .pxc{transition:opacity var(--fade) ease}
.hero .pxc.ink-dark{opacity:0}
.hero[data-sky="dusk"] .pxc.ink-dark{opacity:1}
.hero[data-sky="dusk"] .pxc.ink-light{opacity:0}
.hero h1 .pxc.ink-light{filter:drop-shadow(0 0 1px rgba(8,38,92,.5)) drop-shadow(0 2px 14px rgba(8,38,92,.32))}
.hero h1 .pxc.ink-dark{filter:drop-shadow(0 0 1px rgba(255,240,232,.55)) drop-shadow(0 2px 14px rgba(255,240,232,.35))}

/* ── idea ─────────────────────────────── */
.section{padding-block:clamp(104px,14vw,190px)}
.idea{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,88px);align-items:end}
.lede{font-size:clamp(32px,3.6vw,50px);line-height:1.1;max-width:16ch}
.frame{padding:6px;border-radius:12px;background:var(--card);border:1px solid var(--line);box-shadow:0 18px 40px -28px var(--shadow)}
.frame img{border-radius:6px;width:100%;height:auto;object-fit:cover;image-rendering:pixelated}
figure{margin:0}
@media (max-width:760px){.idea{grid-template-columns:1fr;align-items:start}}

/* ── steps ────────────────────────────── */
.cycle-head h2,.land h2{font-size:clamp(34px,3.8vw,52px);line-height:1.05}
.steps{list-style:none;margin:clamp(48px,6vw,80px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,28px)}
.step{display:grid;gap:18px;align-content:start}
.step .frame img{aspect-ratio:1;object-position:50% 55%}
.step-t{display:flex;align-items:center;gap:12px}
.step h3{font-size:30px;line-height:1}
.step p{color:var(--ink-2);max-width:32ch}
@media (max-width:760px){.steps{grid-template-columns:1fr}.step .frame img{aspect-ratio:4/3}}

/* ── channels ─────────────────────────── */
.land{text-align:center}
.field{display:grid;grid-template-columns:repeat(18,minmax(0,1fr));max-width:800px;margin:56px auto 0;font:400 clamp(12px,2vw,20px)/1 var(--f-mono);row-gap:clamp(16px,2.2vw,26px);user-select:none}
.field span{color:var(--ink-3);transition:color .35s;position:relative}
.field span.on{color:var(--ink)}
.field span.on::after{content:"";position:absolute;left:50%;bottom:-9px;width:4px;height:4px;margin-left:-2px;background:var(--seed)}
.chans{list-style:none;margin:64px auto 0;padding:0;max-width:960px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 24px;text-align:left}
.chans li{display:grid;gap:6px;align-content:start;padding-top:14px;border-top:1px solid var(--line);transition:border-color .35s}
.chans .ico{margin:6px 0 8px;color:var(--ink-2);transition:color .35s}
.chans li.on .ico{color:var(--seed)}
.chans b{font-weight:500;font-size:15px}
.chans span{font-size:14px;color:var(--ink-2)}
.chans li.on{border-top-color:var(--seed)}
@media (max-width:760px){.chans{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── closing meadow ───────────────────── */
.scene{--meadow:clamp(380px,42.92vw,640px);background:#91C2FB;border-radius:var(--round) var(--round) 0 0}
.scene .bg{top:auto;height:var(--meadow)}
.scene .bg img{object-position:50% 0%}
.scene-in{padding-top:clamp(64px,7vw,108px);padding-bottom:calc(var(--meadow) * .8);display:grid;justify-items:center;gap:clamp(22px,2.4vw,32px);text-align:center;color:#0F2440}
.scene h2{font-size:clamp(34px,4vw,56px);line-height:1.08;font-weight:500;max-width:24ch}
.scene .cta{font-size:clamp(16px,1.3vw,18px);color:rgba(15,36,64,.74)}
.scene .cta .ico{width:18px;height:18px;margin-left:6px;vertical-align:-3px;color:#0F2440}

.mail{font-weight:500;color:#0F2440;text-decoration:underline;text-decoration-color:rgba(15,36,64,.3);text-underline-offset:5px;transition:text-decoration-color .2s}
.mail:hover{text-decoration-color:#0F2440}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,12px);padding:10px 14px;border-radius:8px;background:var(--btn);color:var(--btn-ink);font-size:15px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:40}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* icon sprite lives off-screen */
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ── 404 ──────────────────────────────── */
.nf{min-height:100svh;display:grid;place-content:center;justify-items:center;gap:22px;padding:var(--gut);text-align:center}
.nf img{image-rendering:pixelated}
.nf h1{font:500 clamp(34px,4vw,52px)/1.05 var(--f-serif)}