/* say2's shared look: every page starts from this file, so nothing feels patched on.
   Dark by default, living film grain, serif headlines that move with the scroll, and Setu. */
:root{
  --bg:#0A0A09;--ink:#E8E1D4;--muted:#958E83;--faint:#3A3733;--line:rgba(232,225,212,.09);--line-strong:rgba(232,225,212,.2);
  --card:rgba(255,255,255,.025);--card-hover:rgba(255,255,255,.045);--field:rgba(255,255,255,.035);
  --brass:#C4A56C;--brass-soft:rgba(196,165,108,.16);--red:#CB263B;
  --em:#BFA683;--eyebrow:#A8977C;
  --grain:.06;--vignette:transparent;--header:rgba(10,10,9,.62);
  --serif:"Instrument Serif",Georgia,serif;--sans:"Geist",system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:dark;
}
:root[data-theme=light]{
  --bg:#E9E4DB;--ink:#24211D;--muted:#665F55;--faint:#CFC8BC;--line:rgba(36,33,29,.10);--line-strong:rgba(36,33,29,.24);
  --card:rgba(255,255,255,.32);--card-hover:rgba(255,255,255,.5);--field:rgba(255,255,255,.55);
  --brass:#8E6F3E;--brass-soft:rgba(142,111,62,.14);
  --em:#8A5A3E;--eyebrow:#8E6F3E;
  --grain:.16;--vignette:rgba(60,50,35,.14);--header:rgba(233,228,219,.7);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.7 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;
  transition:background .6s,color .6s}
a{color:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:8px}
::selection{background:var(--brass-soft)}
svg.i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.14em;flex:none}

/* ---------- the night: pure black, with a fine living grain ---------- */
.s2-grain{position:fixed;inset:-50%;z-index:-1;pointer-events:none;opacity:var(--grain);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .48  0 0 0 0 .45  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation:s2grain 1s steps(6) infinite}
@keyframes s2grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}}
.s2-vignette{display:none}

/* ---------- header ---------- */
.s2-top{position:sticky;top:0;z-index:50;transition:background .5s,border-color .5s,backdrop-filter .5s;border-bottom:1px solid transparent}
.s2-top.scrolled{background:var(--header);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}
.s2-bar{max-width:1180px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;gap:18px}
.s2-mark{display:flex;align-items:center;gap:10px;text-decoration:none}
.s2-mark img{display:block;height:34px;width:auto;margin:-4px 0 -6px}
.s2-mark .s2-badge{height:36px;width:36px;margin:0;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.s2-badge-l,:root[data-theme=light] .s2-badge-d{display:none!important}
:root[data-theme=light] .s2-badge-l{display:block!important}
.s2-bar nav{margin-left:auto;display:flex;align-items:center;gap:22px;font-size:14.5px}
.s2-bar nav a{text-decoration:none;color:var(--muted);transition:color .3s}
.s2-bar nav a:hover{color:var(--ink)}
.s2-theme{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:transparent;
  color:var(--muted);cursor:pointer;font-size:15px;transition:color .3s,border-color .3s}
.s2-theme:hover{color:var(--ink);border-color:var(--line-strong)}
.s2-theme .moon,:root[data-theme=light] .s2-theme .sun{display:none}
:root[data-theme=light] .s2-theme .moon{display:block}

/* ---------- type ---------- */
.s2-kicker{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--eyebrow);margin:0 0 18px}
.s2-display{font:400 clamp(52px,8vw,118px)/1 var(--serif);letter-spacing:-.02em;margin:0}
.s2-display em,.s2-h2 em{color:var(--em)}
.s2-h2{font:400 clamp(32px,3.8vw,48px)/1.08 var(--serif);letter-spacing:-.01em;margin:6px 0 14px}
.s2-lead{font-size:clamp(16px,1.4vw,19px);color:var(--muted);max-width:48ch;margin:22px 0 0}
.s2-lead a,.s2-text a{color:var(--ink);text-decoration-color:var(--line-strong);text-underline-offset:3px;transition:text-decoration-color .3s}
.s2-lead a:hover,.s2-text a:hover{text-decoration-color:var(--brass)}

/* words that rise in from blur and drift away (say2.js sets each word's values) */
.s2-w{display:inline-block;will-change:transform,opacity,filter}
.s2-words:not(.s2-ready){opacity:0}

/* ---------- surfaces ---------- */
.s2-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px;transition:background .4s,border-color .4s}
.s2-card:hover{background:var(--card-hover)}
.s2-btn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:14.5px;border-radius:999px;padding:10px 18px;cursor:pointer;
  border:1px solid var(--line-strong);background:transparent;color:var(--ink);text-decoration:none;transition:background .3s,border-color .3s}
.s2-btn:hover{background:var(--brass-soft);border-color:var(--brass)}

/* ---------- footer ---------- */
.s2-foot{position:relative;border-top:1px solid var(--line);margin-top:40px}
.s2-foot .s2-bar{padding:28px 24px 36px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.s2-foot .s2-mark img{height:28px}
.s2-foot .s2-mark .s2-badge{height:30px;width:30px}
.s2-foot small{font-size:13px}

/* ---------- Setu: wanders by himself, and you can pick him up ---------- */
.s2-setu{position:fixed;left:0;top:0;z-index:60;width:52px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;will-change:transform}
.s2-setu.held{cursor:grabbing}
.s2-setu svg{display:block;width:100%;height:auto;transition:transform .25s var(--ease)}
.s2-setu.held svg{transform:scale(1.12) rotate(-6deg)}
.s2-setu .eye{transform-box:fill-box;transform-origin:center;animation:s2blink 6s infinite}
/* sitting: little legs come out and swing, like a kid whose feet don't reach the floor */
.s2-setu svg{overflow:visible}
.s2-setu .legs{opacity:0;transition:opacity .4s}
.s2-setu.parked .legs{opacity:1}
.s2-setu .leg{transform-box:fill-box;transform-origin:50% 0}
.s2-setu.parked .leg.l{animation:s2swing 1.5s ease-in-out infinite alternate}
.s2-setu.parked .leg.r{animation:s2swing 1.5s ease-in-out -.75s infinite alternate}
@keyframes s2swing{from{transform:rotate(-18deg)}to{transform:rotate(16deg)}}
@keyframes s2blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
.s2-setu .tip{position:absolute;left:50%;top:-24px;transform:translateX(-50%);white-space:nowrap;font:italic 14px var(--serif);color:var(--muted);
  opacity:0;transition:opacity .4s;pointer-events:none}
.s2-setu:hover .tip,.s2-setu.held .tip{opacity:1}
/* what Setu says: a quiet line above him, never a loud bubble */
.s2-say{position:fixed;left:0;top:0;z-index:61;max-width:min(280px,72vw);padding:9px 14px;border-radius:14px;border:1px solid var(--line-strong);
  background:color-mix(in srgb,var(--bg) 96%,transparent);box-shadow:0 12px 30px -12px rgba(0,0,0,.6);
  font:italic 17px/1.35 var(--serif);color:var(--ink);text-align:center;pointer-events:none;opacity:0;transition:opacity .5s;will-change:transform}
.s2-say.on{opacity:1}
/* his moods */
.s2-setu.thinking svg{animation:s2think 1.6s ease-in-out infinite}
.s2-setu.happy svg{animation:s2hop .7s var(--ease)}
.s2-setu.sad svg{animation:s2wob .5s ease}
@keyframes s2think{50%{transform:rotate(-8deg) translateY(-2px)}}
@keyframes s2hop{35%{transform:translateY(-16px) scale(1.04,.96)}70%{transform:translateY(0) scale(1.06,.92)}}
@keyframes s2wob{25%{transform:rotate(-10deg)}50%{transform:rotate(8deg)}75%{transform:rotate(-4deg)}}
.s2-drop-over{outline:1px dashed var(--brass);outline-offset:6px;border-radius:999px}
.s2-shadow{position:fixed;left:0;top:0;z-index:59;width:36px;height:7px;border-radius:50%;pointer-events:none;
  background:radial-gradient(rgba(0,0,0,.5),transparent 70%);will-change:transform,opacity}
:root[data-theme=light] .s2-shadow{background:radial-gradient(rgba(60,50,35,.25),transparent 70%)}

@media (max-width:560px){ .s2-bar nav a.opt{display:none} .s2-setu{width:42px} }
@media (prefers-reduced-motion:reduce){
  .s2-grain,.s2-setu .eye,.s2-setu .leg{animation:none!important}
  .s2-words:not(.s2-ready){opacity:1}
  html{scroll-behavior:auto}
}
.s2-say.on ~ .s2-setu .tip{opacity:0!important}