body{margin:0;background:#E2EDF6}

/* ---------- Design tokens: polar ---------- */
.hub{
  --sky-top:#C3DBEF; --sky-mid:#E2EDF6; --sky-low:#F4F8FB;
  --cloud:#FFFFFF; --cloud-o:.8; --star:#FFFFFF; --star-o:0; --aurora-o:0;
  --flake:#FFFFFF; --flake-o:.9;
  --grain-o:.06; --grain-blend:multiply;
  --snow-far:#D3E2EF; --snow-mid:#E5EEF6; --snow-near:#F9FBFD; --snow-edge:#C2D5E6;
  --igloo:#FFFFFF; --igloo-line:#B6CADD; --door:#33415E; --glow-o:0;
  --surface:rgba(255,255,255,.82); --surface-solid:#FFFFFF;
  --hairline:rgba(20,32,56,.10); --hairline-strong:rgba(20,32,56,.18);
  --ink:#142038; --ink-soft:#3F4B66; --ink-faint:#55617A;
  --accent:#F2B872; --on-accent:#1B2030; --glow:#F2B872;
  --btn:#F2B872; --on-btn:#1B2030; --btn-edge:transparent;
  --thumb-dim:rgba(0,0,0,0); --focus:#142038;
  --font-display:"Fraunces","Iowan Old Style",Georgia,serif;
  --font-body:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --r-card:24px; --r-thumb:16px; --r-pill:999px;
  --dur:300ms; --dur-slow:400ms; --ease:cubic-bezier(.22,.61,.36,1);
}
.hub.t-dark{
  --sky-top:#0C1430; --sky-mid:#1A2547; --sky-low:#2B365D;
  --cloud:#A4ACCB; --cloud-o:0; --star:#F5EEE3; --star-o:1; --aurora-o:.55;
  --flake:#E6ECF7; --flake-o:.7;
  --grain-o:.10; --grain-blend:soft-light;
  --snow-far:#34425F; --snow-mid:#435170; --snow-near:#58678B; --snow-edge:#7383A8;
  --igloo:#6D7CA2; --igloo-line:#4B597C; --door:#F2B872; --glow-o:.45;
  --accent:#7FE0BC; --on-accent:#0E2A20;
  --btn:#1E7D61; --on-btn:#FFFFFF; --btn-edge:rgba(127,224,188,.55);
  --surface:rgba(22,29,50,.84); --surface-solid:#182038;
  --hairline:rgba(255,244,230,.12); --hairline-strong:rgba(255,244,230,.22);
  --ink:#F5EEE3; --ink-soft:#D6CDBF; --ink-faint:#BDB4A6;
  --thumb-dim:rgba(10,14,28,.20); --focus:#F5EEE3;
}

/* ---------- Base ---------- */
.hub *,.hub *::before,.hub *::after{box-sizing:border-box}
.hub{position:relative;min-height:100vh;color:var(--ink);font-family:var(--font-body);font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased}
.hub h1,.hub h2,.hub h3{font-family:var(--font-display);font-weight:400;font-variation-settings:"SOFT" 100;letter-spacing:-0.015em;line-height:1.1;margin:0;text-wrap:balance}
.hub p{margin:0;text-wrap:pretty}
.hub a{color:inherit}
.hub :focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.hub [tabindex="-1"]:focus{outline:none}
.ico{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.skip{position:absolute;left:16px;top:-72px;z-index:60;background:var(--surface-solid);color:var(--ink);padding:10px 18px;border-radius:var(--r-pill);border:1px solid var(--hairline-strong);text-decoration:none;transition:transform var(--dur) var(--ease)}
.skip:focus{transform:translateY(88px)}

/* ---------- Scene: polar sky, snowfall, drifts, igloo ---------- */
.scene{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 55%,var(--sky-low) 100%);transition:background var(--dur-slow) var(--ease)}
.grain{position:absolute;inset:0;width:100%;height:100%;opacity:var(--grain-o);mix-blend-mode:var(--grain-blend)}
.layer{position:absolute;inset:0;transition:opacity var(--dur-slow) var(--ease)}
.stars{opacity:var(--star-o)}
.stars svg{display:block;width:100%;height:70%}
.stars circle{fill:var(--star)}
.stars .s2{opacity:.7} .stars .s3{opacity:.45}
.twinkle{animation:twinkle 6s ease-in-out infinite}
.twinkle.t2{animation-duration:9s;animation-delay:-4s}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.35}}
.aurora{opacity:var(--aurora-o)}
.aurora svg{display:block;width:100%;height:60%;overflow:visible;transform-origin:50% 0;animation:aurora 24s ease-in-out infinite alternate}
.au1{fill:#7FE0BC} .au2{fill:#8DB5F2}
/* Breathes in place (no sideways travel), so the band's ends never come into view. */
@keyframes aurora{0%{transform:scaleY(1);opacity:.85}50%{opacity:1}100%{transform:translate3d(0,2%,0) scaleY(1.14);opacity:.8}}
.clouds{opacity:var(--cloud-o)}
.cloud{position:absolute;animation:drift 260s linear infinite;will-change:transform}
.cloud svg{display:block;width:100%;height:auto}
.cloud rect,.cloud circle{fill:var(--cloud)}
.c1{top:10%;left:9%;width:200px;--from:calc(-9vw - 220px);--to:calc(91vw + 20px);animation-delay:-80s}
.c2{top:22%;left:66%;width:130px;--from:calc(-66vw - 150px);--to:calc(34vw + 20px);animation-duration:320s;animation-delay:-180s}
@keyframes drift{from{transform:translate3d(var(--from),0,0)}to{transform:translate3d(var(--to),0,0)}}
.snow{opacity:var(--flake-o)}
.sway{position:absolute;inset:0;animation:sway 9s ease-in-out infinite alternate}
.sway.far{animation-duration:13s;animation-delay:-5s}
@keyframes sway{from{transform:translate3d(-14px,0,0)}to{transform:translate3d(14px,0,0)}}
.fall{position:absolute;top:0;left:0;width:100%;height:200%;display:flex;flex-direction:column;animation:fall 46s linear infinite;will-change:transform}
.far .fall{animation-duration:80s}
.fall svg{display:block;flex:none;width:100%;height:50%}
.fall circle{fill:var(--flake)}
@keyframes fall{from{transform:translate3d(0,-50%,0)}to{transform:translate3d(0,0,0)}}
.drifts{position:absolute;left:0;right:0;bottom:0;height:300px}
.drifts svg{display:block;width:100%;height:100%}
.d-far{fill:var(--snow-far)} .d-mid{fill:var(--snow-mid)} .d-near{fill:var(--snow-near)}
.d-edge{fill:none;stroke:var(--snow-edge);stroke-width:1.5;stroke-linecap:round}
.ig-dome{fill:var(--igloo)}
.ig-lines{fill:none;stroke:var(--igloo-line);stroke-width:1.6;stroke-linecap:round}
.ig-door{fill:var(--door);transition:fill var(--dur-slow) var(--ease)}
.ig-glow{opacity:var(--glow-o);transition:opacity var(--dur-slow) var(--ease)}
.gl0{stop-color:var(--glow);stop-opacity:.9}
.gl1{stop-color:var(--glow);stop-opacity:.35}
.gl2{stop-color:var(--glow);stop-opacity:0}
.ig-base{fill:var(--snow-near)}

/* ---------- Shell ---------- */
.shell{position:relative;z-index:1;display:flex;flex-direction:column;min-height:100vh}
.bar{width:100%;max-width:1184px;margin:0 auto;padding:24px 32px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.mark{font-family:var(--font-display);font-variation-settings:"SOFT" 100;font-size:20px;letter-spacing:-0.01em;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}
.nav{display:flex;align-items:center;gap:2px}
.nav a{position:relative;text-decoration:none;padding:10px 14px;min-height:44px;display:inline-flex;align-items:center;border-radius:var(--r-pill);font-weight:500}
.nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:7px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--ease)}
.nav a:hover::after{transform:scaleX(1)}
.toggle{width:44px;height:44px;margin-left:8px;border-radius:var(--r-pill);border:1px solid var(--hairline-strong);background:var(--surface);color:var(--ink);display:inline-grid;place-items:center;cursor:pointer;padding:0;transition:transform var(--dur-slow) var(--ease)}
.toggle:hover{transform:rotate(-14deg)}
.toggle .ico{width:18px;height:18px}
.main{flex:1}
.screen{animation:enter var(--dur-slow) var(--ease) both}
@keyframes enter{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
.wrap{width:100%;max-width:1184px;margin:0 auto;padding:0 32px}
.sec{padding-bottom:96px}

/* ---------- Hero ---------- */
.hero{min-height:600px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px;padding:40px 32px 128px}
.hero h1{font-size:clamp(3.5rem,10vw,7.5rem);font-weight:300;line-height:1;letter-spacing:-0.035em}
.role{font-family:var(--font-display);font-variation-settings:"SOFT" 100;font-size:clamp(1.25rem,2.4vw,1.625rem);color:var(--ink-soft);line-height:1.3}
.lede{max-width:34ch;font-size:16px;color:var(--ink-soft)}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:var(--r-pill);border:1px solid var(--hairline-strong);background:var(--surface);color:var(--ink);font:inherit;font-weight:500;text-decoration:none;cursor:pointer;transition:transform var(--dur) var(--ease)}
.pill:hover{transform:translateY(-2px)}
.pill-primary{background:var(--btn);color:var(--on-btn);border-color:var(--btn-edge)}
.hero .pill{margin-top:14px}

/* ---------- Site cards (same layout as the portfolio) ---------- */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;margin-bottom:24px}
.sec-head h2{font-size:clamp(1.75rem,3.2vw,2.5rem)}
.sec-head p{color:var(--ink-soft);font-size:14px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.card{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-card);padding:12px;transition:transform var(--dur-slow) var(--ease)}
.card:hover{transform:translateY(-3px)}
.card-body{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:16px 10px 8px}
.card-title{font-size:1.5rem;line-height:1.2;letter-spacing:-0.01em}
.card-sub{color:var(--ink-soft);font-size:15px;margin-top:4px}
.card-url{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-size:14px;font-weight:500;color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:5px}
.go{width:44px;height:44px;border-radius:var(--r-pill);border:1px solid var(--hairline-strong);display:grid;place-items:center;flex:none;transition:transform var(--dur) var(--ease),background var(--dur) var(--ease)}
.card:hover .go{transform:translate(2px,-2px);background:var(--btn);color:var(--on-btn);border-color:var(--btn-edge)}
.thumb{display:block;position:relative;aspect-ratio:16/10;border-radius:var(--r-thumb);overflow:hidden;isolation:isolate}
.thumb::after{content:"";position:absolute;inset:0;background:var(--thumb-dim);pointer-events:none}
.th-layer{position:absolute;inset:0;display:block;transition:transform 600ms var(--ease)}
.card:hover .th-layer{transform:scale(1.035)}
.th-orb{position:absolute;display:block;aspect-ratio:1/1;border-radius:50%}
.th-art{position:absolute;inset:0;display:block;width:100%;height:100%}
.ascii text{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:7.6px;font-weight:600;fill:#EEE8FF;text-anchor:middle;white-space:pre}
.badge{position:absolute;top:12px;left:12px;z-index:1;font-size:13px;font-weight:500;padding:4px 12px;border-radius:var(--r-pill);background:var(--surface-solid);color:var(--ink)}
.soon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:100%;min-height:200px;padding:32px 24px;text-align:center;border:1.5px dashed var(--hairline-strong);border-radius:var(--r-card);color:var(--ink-soft)}
.soon .ttl{font-family:var(--font-display);font-variation-settings:"SOFT" 100;font-size:1.375rem;color:var(--ink)}

/* ---------- Footer ---------- */
.foot{padding:8px 16px 260px;display:flex;justify-content:center}
.foot-inner{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:0 8px;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-pill);padding:4px 8px;font-size:14px}
.foot-inner .who{color:var(--ink-soft);margin-right:8px}
.foot-inner a{padding:10px 12px;min-height:44px;display:inline-flex;align-items:center;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:5px}

/* ---------- Scroll reveal ---------- */
@keyframes reveal{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .reveal{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px){ .drifts{height:230px} }
@media (max-width: 720px){
  .bar{padding:16px}
  .wrap{padding:0 16px}
  .mark{font-size:18px}
  .nav a{padding:10px 10px}
  .nav a::after{left:10px;right:10px}
  .toggle{margin-left:4px}
  .hero{min-height:520px;padding:24px 16px 96px}
  .grid2{grid-template-columns:minmax(0,1fr);gap:20px}
  .sec{padding-bottom:72px}
  .soon{min-height:140px}
  .drifts{height:170px}
  .c1{width:140px}
  .c2{display:none}
  .foot{padding-bottom:184px}
  .foot-inner{border-radius:24px;padding:6px 10px}
  .foot-inner .who{width:100%;text-align:center;margin:6px 0 0}
}

/* ---------- Reduced motion: a still scene ---------- */
@media (prefers-reduced-motion: reduce){
  .hub *,.hub *::before,.hub *::after{animation:none !important;transition:none !important}
}

/* Theme toggle icons (static build) */
.toggle .i-sun,.toggle .i-moon{display:inline-grid;place-items:center}
.hub.t-dark .toggle .i-moon,.hub:not(.t-dark) .toggle .i-sun{display:none}

/* ---------- Production fixes (not in the design file) ----------
   1. ".hub a{color:inherit}" outranks ".pill-primary", so the "See the sites" link got --ink on
      --btn (4.37:1 in dark theme). Restore the intended --on-btn.
   2. body is always light; in dark theme match the night sky so overscroll isn't light blue. */
.hub a.pill-primary{color:var(--on-btn)}
body:has(.hub.t-dark){background:#1A2547}
/* 3. Dark theme: text that sits straight on the scene (hero, section head, "More on the way")
      can scroll over the near snow drift and the igloo, where it drops to 2.6-3.6:1. A soft
      night-sky halo keeps it above 4.5:1 everywhere (WCAG 2.2 AA). Light theme is unchanged. */
.hub.t-dark .hero,.hub.t-dark .sec-head,.hub.t-dark .soon{text-shadow:0 0 2px #0C1430,0 0 6px #0C1430,0 0 12px rgba(12,20,48,.85)}
.hub.t-dark .pill{text-shadow:none}