/* WIN site draft (c42, 2026-10-23). Three brand directions as themes on <html data-dir="a|b|c">. Light only, calm. */
:root,[data-dir="a"]{
  --paper:#F7F3EC; --paper-2:#FFFFFF; --band:#EFE9DE; --ink:#1E1F24; --muted:#5E5A52;
  --accent:#2F4A6B; --accent-ink:#F7F3EC; --label:#7A5C40;
  --d1:#E8B98A; --d2:#A9C0D6; --d3:#B1C5A4; --line:#DCD4C6;
  --display:"Fraunces",Georgia,serif; --text:"Inter",system-ui,sans-serif; --display-wt:340; --display-track:-.01em;
}
[data-dir="b"]{
  --paper:#F3F1EC; --paper-2:#FFFFFF; --band:#E8E6E0; --ink:#1C2533; --muted:#5A5F6B;
  --accent:#22324A; --accent-ink:#F3F1EC; --label:#7E5E17;
  --d1:#C9A24A; --d2:#6F8FB8; --d3:#7FA07A; --line:#D6D3CB;
  --display:"Newsreader",Georgia,serif; --text:"Space Grotesk",system-ui,sans-serif; --display-wt:400; --display-track:-.015em;
}
[data-dir="c"]{
  --paper:#F6F0E4; --paper-2:#FFFCF6; --band:#EDE3D1; --ink:#22201C; --muted:#625A4C;
  --accent:#2E6E6A; --accent-ink:#F6F0E4; --label:#8A5F18;
  --d1:#B8862F; --d2:#2E6E6A; --d3:#C9B48A; --line:#DDD0B8;
  --display:"Bricolage Grotesque",system-ui,sans-serif; --text:"Inter",system-ui,sans-serif; --display-wt:600; --display-track:-.03em;
}
:root{--pad:clamp(16px,5vw,64px); --wide:1200px; --narrow:720px; --ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.06rem/1.6 var(--text);transition:background .8s var(--ease),color .8s var(--ease)}
a{color:var(--accent)} img{max-width:100%}
.skip{position:absolute;left:-9999px}.skip:focus{left:8px;top:8px;z-index:20;background:var(--paper-2);padding:8px 12px}
.draft{background:var(--band);color:var(--muted);font-size:.82rem;text-align:center;padding:8px var(--pad)}
.ph{color:var(--muted);font-style:italic}
.eyebrow{font:500 .76rem/1.2 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--label)}
h1,h2,h3{font-family:var(--display);font-weight:var(--display-wt);letter-spacing:var(--display-track);line-height:1.06;margin:0 0 .5em}
h1{font-size:clamp(2.6rem,7.4vw,6rem)} h2{font-size:clamp(2rem,4.4vw,3.4rem)} h3{font-size:clamp(1.4rem,2.2vw,1.8rem)}

/* header */
.site{position:absolute;inset:auto 0 auto 0;z-index:5;padding:18px var(--pad)}
.site .row{max-width:var(--wide);margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:600 1rem/1 var(--text)}
.brand svg{width:34px;height:34px}
nav{display:flex;gap:4px;flex-wrap:wrap}
nav a{color:var(--ink);text-decoration:none;font-size:.92rem;padding:8px 12px;border-radius:999px;transition:background .3s}
nav a:hover,nav a:focus-visible{background:color-mix(in srgb,var(--paper-2) 70%,transparent)}
nav a[aria-current]{background:var(--paper-2)}
.inner .site{position:relative}

/* hero */
.hero{position:relative;min-height:min(100svh,900px);display:grid;align-items:end;overflow:hidden;isolation:isolate}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.hero .copy{max-width:var(--wide);width:100%;margin:0 auto;padding:140px var(--pad) clamp(56px,10vh,120px)}
.hero h1{max-width:12ch}
.hero p{max-width:46ch;font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--muted)}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--accent-ink);text-decoration:none;font-weight:500;padding:.8rem 1.25rem;border-radius:999px;transition:transform .3s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.scrollcue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font-size:.8rem;color:var(--muted)}

/* sections */
section{padding:clamp(72px,12vw,160px) var(--pad)}
.wrap{max-width:var(--wide);margin:0 auto}.narrow{max-width:var(--narrow);margin:0 auto}
.manifesto p{font-family:var(--display);font-weight:var(--display-wt);letter-spacing:var(--display-track);font-size:clamp(1.6rem,3.4vw,2.7rem);line-height:1.25;margin:0}
.manifesto .s{opacity:.28;transition:opacity .9s var(--ease)}
.manifesto .s.lit{opacity:1}
.quiet{color:var(--muted);margin-top:28px}

.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:40px}
.pillar{background:var(--paper-2);border-radius:24px;padding:32px 28px 36px;position:relative;overflow:hidden;min-height:280px;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.pillar:hover{transform:translateY(-4px);box-shadow:0 18px 40px -24px color-mix(in srgb,var(--ink) 35%,transparent)}
.pillar .glyph{width:64px;height:64px;margin-bottom:28px}
.pillar .n{position:absolute;right:24px;top:20px;font:500 .8rem var(--text);color:var(--muted)}

.band{background:var(--band)}
.three{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(24px,4vw,56px);margin-top:36px}
.three blockquote{margin:0;font-family:var(--display);font-weight:var(--display-wt);font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.2;
  padding-top:22px;border-top:2px solid var(--ink)}
.three blockquote::before{content:"Imagination as";display:block;font:500 .76rem/1 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--label);margin-bottom:14px}

.gather{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,5vw,72px);align-items:center}
.gather .card{background:var(--accent);color:var(--accent-ink);border-radius:28px;padding:clamp(28px,4vw,48px);min-height:300px;display:flex;flex-direction:column;justify-content:space-between}
.gather .card .ph{color:color-mix(in srgb,var(--accent-ink) 78%,transparent)}
.gather .card .big{font-family:var(--display);font-weight:var(--display-wt);font-size:clamp(2.4rem,5vw,4rem);line-height:1}
@media (max-width:760px){.gather{grid-template-columns:1fr}}

.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:28px;margin-top:40px}
.people figure{margin:0;text-align:center}
.people img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;background:var(--band);filter:saturate(.9)}
.people figcaption{margin-top:12px;font-weight:500}

.page-head{padding-top:clamp(56px,9vw,120px);padding-bottom:0}
.lead{font-size:clamp(1.15rem,1.8vw,1.4rem);line-height:1.5}
.days{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:36px}
.day{background:var(--paper-2);border-radius:22px;padding:28px}
.day .big{font-family:var(--display);font-size:3rem;line-height:1;color:var(--accent)}

footer.foot{padding:56px var(--pad) 120px;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}
footer.foot .row{max-width:var(--wide);margin:0 auto;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* direction switcher */
.switch{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:10;display:flex;align-items:center;gap:4px;
  background:color-mix(in srgb,var(--paper-2) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:999px;padding:5px;box-shadow:0 10px 30px -18px rgba(0,0,0,.35);max-width:calc(100vw - 24px)}
.switch .lbl{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:0 8px 0 10px}
.switch button{font:500 .85rem/1 var(--text);color:var(--ink);background:transparent;border:0;border-radius:999px;padding:9px 12px;cursor:pointer;display:flex;align-items:center;gap:7px;white-space:nowrap}
.switch button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.switch .dot{width:10px;height:10px;border-radius:50%;flex:none}
@media (max-width:560px){.switch .lbl,.switch .long{display:none}}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}*{transition:none!important}
  .reveal{opacity:1;transform:none}.manifesto .s{opacity:1}
}