/* ============ CHECKIN · BASE ============ */
:root{
  --ivory:#F4F2EC;
  --ivory-2:#EAE7DE;
  --ivory-3:#DBD6C7;
  --ink:#101010;
  --ink-2:#1A1A1A;
  --ink-3:#242424;
  --violet:#654BFF;
  --violet-soft:#E4DEFF;
  --violet-deep:#3E2FBD;
  --lime:#C7FF3A;
  --warm:#A7A6A1;
  --warm-2:#8B8A85;
  --line:rgba(16,16,16,.09);
  --line-2:rgba(16,16,16,.18);
  --shadow:0 40px 80px -30px rgba(16,16,16,.35);

  --f-display:"Instrument Serif", serif;
  --f-sans:"Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --f-mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --e-out: cubic-bezier(.22,.61,.36,1);
  --e-inout: cubic-bezier(.65,.05,.36,1);
  --e-spring: cubic-bezier(.34,1.56,.64,1);
}

*, *::before, *::after{ box-sizing:border-box; }
html, body{ margin:0; padding:0; }
html{ background:var(--ivory); color:var(--ink); font-family:var(--f-sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scroll-behavior:smooth; }
body{
  font-size:16px; line-height:1.45; letter-spacing:-0.005em;
  background:var(--ivory);
  overflow-x:hidden;
  cursor:none;
}
@media (pointer:coarse){ body{ cursor:auto; } }

img, svg, canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }

::selection{ background:var(--violet); color:#fff; }

/* Grain overlay reusable */
.grain{
  position:absolute; inset:0; pointer-events:none; z-index:2; opacity:.18; mix-blend-mode:multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.06 0 0 0 0 0.06 0 0 0 0 0.06 0 0 0 .8 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Loader */
#loader{
  position:fixed; inset:0; z-index:1000; background:var(--ivory);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px;
  transition:opacity .8s var(--e-out), visibility .8s var(--e-out);
}
#loader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
.loader__mark-svg{
  width:clamp(40px,7vw,90px); color:var(--violet);
  opacity:0; transform:translateY(10px); animation:markIn .6s .1s var(--e-out) forwards;
}
.loader__mark-svg svg{ width:100%; height:auto; display:block; }
@keyframes markIn{ to{ opacity:1; transform:none; } }
.loader__mark{ display:flex; gap:2px; font-family:var(--f-sans); font-weight:700; letter-spacing:-.04em; font-size:clamp(36px,7vw,96px); color:var(--ink); }
.loader__mark span{ display:inline-block; opacity:0; transform:translateY(20px); animation:letterIn .5s var(--e-out) forwards; }
.loader__violet{ color:var(--violet); }
.loader__mark span:nth-child(1){ animation-delay:.15s }
.loader__mark span:nth-child(2){ animation-delay:.20s }
.loader__mark span:nth-child(3){ animation-delay:.25s }
.loader__mark span:nth-child(4){ animation-delay:.30s }
.loader__mark span:nth-child(5){ animation-delay:.35s }
.loader__mark span:nth-child(6){ animation-delay:.40s }
.loader__mark span:nth-child(7){ animation-delay:.45s }
.loader__mark span:nth-child(8){ animation-delay:.50s }
.loader__mark span:nth-child(9){ animation-delay:.55s }
.loader__mark span:nth-child(10){ animation-delay:.60s }
.loader__mark span:nth-child(11){ animation-delay:.65s }
@keyframes letterIn{ to{ opacity:1; transform:none; } }

.loader__dots{ display:flex; gap:8px; }
.loader__dots i{ width:6px; height:6px; border-radius:50%; background:var(--ink); opacity:.2; animation:dot 1.2s infinite; }
.loader__dots i:nth-child(2){ animation-delay:.15s }
.loader__dots i:nth-child(3){ animation-delay:.3s }
@keyframes dot{ 0%,100%{opacity:.15; transform:scale(1)} 50%{opacity:1; transform:scale(1.5)} }

.loader__welcome{
  position:absolute; bottom:8vh; font-family:var(--f-mono); font-size:11px; letter-spacing:.28em; color:var(--warm-2);
}

/* Buttons */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px; border-radius:100px; font-size:14px; font-weight:500; letter-spacing:-.005em;
  border:1px solid transparent; transition:transform .3s var(--e-out), background .3s, color .3s, border-color .3s;
  overflow:hidden;
}
.btn__label{ position:relative; z-index:2; }
.btn__arrow{ position:relative; z-index:2; transition:transform .3s var(--e-out); }
.btn:hover .btn__arrow{ transform:translateX(4px); }
.btn__node{
  position:absolute; z-index:1; left:-8px; top:50%; width:8px; height:8px; border-radius:50%;
  background:var(--lime); transform:translate(-100%,-50%) scale(0); opacity:0;
  transition:transform .5s var(--e-out), opacity .3s;
}
.btn:hover .btn__node{ opacity:.9; transform:translate(calc(100% + var(--nodeX,0px)), -50%) scale(1); }
.btn--primary{ background:var(--ink); color:var(--ivory); }
.btn--primary:hover{ background:var(--violet); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--ghost:hover{ background:var(--ink); color:var(--ivory); border-color:var(--ink); }
.btn--lime{ background:var(--lime); color:var(--ink); font-weight:600; padding:18px 30px; font-size:15px; }
.btn--lime:hover{ padding:18px 42px; }
.btn--outline{ background:transparent; color:var(--ivory); border-color:rgba(244,242,236,.25); padding:18px 30px; }
.btn--outline:hover{ background:var(--ivory); color:var(--ink); border-color:var(--ivory); }
.btn--text{ padding:8px 0; color:var(--ivory); opacity:.7; }
.btn--text:hover{ opacity:1; padding-left:6px; }

/* Tags */
.tag{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink); padding:6px 12px; border:1px solid var(--line-2); border-radius:100px;
}
.tag--muted{ color:var(--warm-2); border-color:var(--line); }
.tag--light{ color:var(--ivory); border-color:rgba(244,242,236,.2); }

/* Chapter progress rail */
#chapter-progress{
  position:fixed; left:24px; top:50%; transform:translateY(-50%);
  z-index:60; display:flex; flex-direction:column; gap:12px;
  writing-mode:vertical-rl; transform-origin:left top;
  mix-blend-mode:difference; color:#fff;
}
.cp__label{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.28em;
  display:flex; gap:12px; align-items:center;
}
.cp__label #cp-num{ opacity:.6; }
.cp__bar{
  writing-mode:horizontal-tb;
  width:2px; height:180px; background:rgba(255,255,255,.15); position:relative; overflow:hidden;
}
.cp__bar i{ position:absolute; top:0; left:0; width:100%; height:0%; background:#fff; transition:height .4s var(--e-out); }
@media (max-width:900px){ #chapter-progress{ display:none; } }

/* Reveal utility */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .8s var(--e-out), transform .8s var(--e-out); }
.reveal.is-in{ opacity:1; transform:none; }

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
}