/* ═══════════════════════════════════════════════════════════════
   DÆMN STUDIO — one system, every page.
   Both pages load this and nothing else, so they cannot drift apart.

   The palette is "halo": pale luminous ground, light blooming from the
   centre, warm sand and rose in the mid-tones, near-black ink. No hard
   contrast anywhere — everything is bathed rather than lit. The only
   colour in the whole system is one iridescent sweep, saved for the mark.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --halo:#FBF4EF;        /* the bloom — near white, warm */
  --sky:#EDE0DC;         /* the ground */
  --mist:#DFCCCC;        /* panels */
  --stone:#E7DCCF;       /* warm sand */
  --deep:#C9B5BA;        /* the far edge of the gradient */
  --ink:#1B1512;
  --ink2:#4C3D37;
  --ink3:rgba(76,61,55,.56);
  --line:rgba(76,61,55,.15);
  --iris:linear-gradient(115deg,#E9C7D6,#CBD3EE,#DCE9DE,#F2DEC6);
  --display:Jost,"Century Gothic",Futura,ui-sans-serif,sans-serif;
  --body:Archivo,"Helvetica Neue",Inter,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --pad:clamp(20px,4vw,34px);
}
*{box-sizing:border-box}
html,body{background:var(--sky)}
body{margin:0;color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  background:
    radial-gradient(80% 55% at 50% 22%, var(--halo) 0%, transparent 62%),
    radial-gradient(120% 90% at 50% 120%, var(--deep) 0%, transparent 55%),
    var(--sky);
  background-attachment:fixed}
.wrap{max-width:1320px;margin:0 auto;padding:0 var(--pad);position:relative;z-index:2}
a{color:inherit}
img,video{max-width:100%}

/* ── type ─────────────────────────────────────────────────────── */
h1{font-family:var(--display);font-weight:200;text-transform:uppercase;letter-spacing:.01em;
  line-height:.9;font-size:clamp(38px,7.2vw,104px);margin:0 0 32px;text-wrap:balance}
h2{font-family:var(--display);font-weight:200;text-transform:uppercase;letter-spacing:.05em;
  line-height:1;font-size:clamp(24px,3.4vw,40px);margin:0 0 18px;text-wrap:balance}
h3{font-family:var(--display);font-weight:300;text-transform:uppercase;letter-spacing:.05em;
  font-size:19px;margin:0 0 10px}
p{color:var(--ink2);max-width:58ch;margin:0 0 15px}
b,strong{color:var(--ink);font-weight:500}
.lede{max-width:52ch;font-size:16.5px;line-height:1.7}
.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink3);margin:0 0 20px}
.mono{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
section{padding:clamp(72px,11vh,140px) 0 0}

/* ── nav — identical on every page ────────────────────────────── */
nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;gap:24px;
  padding:20px var(--pad);
  background:linear-gradient(to bottom,color-mix(in srgb,var(--halo) 78%,transparent),transparent);
  backdrop-filter:blur(6px)}
nav .mark{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;color:var(--ink)}
nav .sp{margin-left:auto}
nav a.link{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink3);text-decoration:none;transition:color .3s ease}
nav a.link:hover,nav a.link[aria-current]{color:var(--ink)}

/* ── buttons — one shape, two weights, everywhere ─────────────── */
.btn{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;padding:15px 30px;border-radius:999px;
  background:var(--ink);color:var(--halo);border:1px solid var(--ink);cursor:pointer;
  transition:background .3s ease,color .3s ease,border-color .3s ease}
.btn:hover{background:transparent;color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink)}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.note{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--ink3);margin-top:14px}

/* ── cards ────────────────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:30px}
.card{background:color-mix(in srgb,var(--halo) 72%,transparent);padding:26px 24px 24px;
  display:flex;flex-direction:column;transition:background .35s ease}
.card:hover{background:var(--halo)}
.card .num{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--ink3);margin-bottom:14px}
.card p{font-size:13.5px;margin:0 0 18px}
.card ul{list-style:none;padding:0;margin:0 0 20px;font-family:var(--mono);font-size:11.5px;
  color:var(--ink3);line-height:2}
.card ul li:before{content:"→ ";color:var(--ink2)}
.card .foot{margin-top:auto}

/* ── footer — identical on every page ─────────────────────────── */
footer{border-top:1px solid var(--line);margin-top:14vh;padding:30px 0 60px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink3);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer a{text-decoration:none}
footer a:hover{color:var(--ink)}
.disclosure{font-family:var(--mono);font-size:10px;line-height:1.9;color:var(--ink3);
  max-width:94ch;text-transform:none;letter-spacing:.02em;margin-top:18px}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* ── mobile ───────────────────────────────────────────────────
   Smaller rhythm, full-width buttons, a nav that fits, and no
   fixed background (iOS repaints it every scroll frame). */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media(max-width:760px){
  body{background-attachment:scroll;font-size:15.5px}
  h1{font-size:clamp(34px,10vw,54px);line-height:.95;margin-bottom:22px}
  h2{font-size:clamp(23px,6.4vw,32px)}
  .lede{font-size:16px}
  section{padding:64px 0 0}
  nav{padding:14px 18px;gap:14px}
  nav .mark{font-size:10px;letter-spacing:.14em}
  nav a.link{font-size:9.5px;letter-spacing:.1em}
  .btn{padding:15px 22px;font-size:10.5px;text-align:center}
  .btns{gap:10px}
  .btns .btn{flex:1 1 100%}
  .cards{border-radius:12px}
  .card{padding:22px 20px}
  footer{flex-direction:column;gap:10px;padding:24px 0 44px}
}
@media(max-width:420px){
  nav a.link[href*="github"]{display:none}
}
/* pointer-coarse: no custom cursor, bigger hit areas */
@media(hover:none){
  body{cursor:auto!important}
  #cur{display:none!important}
  a,button{min-height:44px}
}