/* SHCH. Shared styles for every page. Light and dark follow the device. */
:root{
  --bg:#F4F3F0; --ink:#141414; --mute:#5F5B55; --rule:#D9D5CE; --acc:#141414; --card:#FFFFFF;
  --spd:.4s; --run:9s;
  --ease:cubic-bezier(.22,.61,.36,1);
  --cond:"Big Shoulders Display",sans-serif; --serif:"Newsreader",Georgia,serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--bg:#0F0F10; --ink:#F1EDE6; --mute:#A39F97; --rule:#2A2A2C; --acc:#F1EDE6; --card:#18181A}
}
:root[data-theme="dark"]{--bg:#0F0F10; --ink:#F1EDE6; --mute:#A39F97; --rule:#2A2A2C; --acc:#F1EDE6; --card:#18181A}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--serif);min-height:100vh;
  transition:background-color var(--spd) var(--ease),color var(--spd) var(--ease)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

/* header */
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;max-width:1360px;margin:0 auto;padding:22px 24px 0}
.brand{font-family:var(--cond);font-weight:900;font-size:30px;letter-spacing:.04em;line-height:1}
.links{display:flex;gap:8px;align-items:center}
.pill{white-space:nowrap;font-size:16px;border:1px solid var(--ink);padding:10px 16px;border-radius:999px;transition:border-color var(--spd)}
.pill:hover{background:var(--ink);color:var(--bg)}

/* section labels */
.label{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:10px;border-bottom:2px solid var(--ink);margin-bottom:16px;transition:border-color var(--spd)}
.label h3{font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.label span,.label a{font-size:16px;color:var(--mute);transition:color var(--spd)}
.label a{color:var(--ink);border-bottom:1px solid currentColor;padding:8px 0}

/* the 20 slots */
.big{font-family:var(--cond);font-weight:900;text-transform:uppercase;font-size:clamp(34px,3.2vw,46px);line-height:.95}
.def{font-size:16px;line-height:1.4;color:var(--mute);margin:8px 0 14px;transition:color var(--spd)}
.slots{display:grid;grid-template-columns:repeat(10,1fr);gap:6px}
.slot{aspect-ratio:1;border:1.5px dashed var(--rule);border-radius:6px;position:relative;display:flex;align-items:flex-end;padding:5px;font-family:var(--mono);font-size:11px;color:var(--mute);transition:border-color var(--spd),transform .3s var(--ease)}
.slot.full{border:0;background:var(--c);color:var(--ci)}
.slot.full .usd{position:absolute;top:4px;right:6px;font-size:12px}
.slot.on{transform:translateY(-5px)}


/* quote, contact, footer */
.quote blockquote{font-family:var(--cond);font-weight:900;text-transform:uppercase;font-size:clamp(40px,6vw,84px);line-height:.95;max-width:17ch}
.quote .why{margin-top:14px;font-size:18px;color:var(--mute);transition:color var(--spd)}
.hi-say{font-family:var(--cond);font-weight:900;text-transform:uppercase;font-size:clamp(36px,5vw,72px);line-height:.95;max-width:16ch}
.hi-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.foot{margin-top:64px;font-size:15px;color:var(--mute);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;transition:color var(--spd)}
.foot a{display:inline-block;padding:12px 0}
.rule-top{border-top:2px solid var(--ink);padding-top:36px;transition:border-color var(--spd)}

@media (max-width:480px){.brand{font-size:26px}.pill{font-size:14px;padding:9px 12px}}
@media (prefers-reduced-motion: reduce){
  *{transition-duration:.01ms!important}
}