/* base.css — global reset, base typography, layout primitives, reveal/assemble, cursor, no-js (shared by every page) */

/* ============================================================
   reset + base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--fg);
  font-weight:300;
  line-height:1.55;
  letter-spacing:.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--amber);color:var(--ink)}

/* cinematic film grain */
body::after{
  content:"";position:fixed;inset:0;z-index:9000;pointer-events:none;
  opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   type helpers
   ============================================================ */
.eyebrow{
  font-family:var(--font-ui);
  font-size:clamp(.64rem,.82vw,.76rem);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:500;
}
.serif{font-family:var(--font-display);font-weight:300;line-height:.98;letter-spacing:-.02em}
.italic{font-style:italic}
.amber{color:var(--amber-soft)}
.steel{color:var(--steel)}

/* ============================================================
   layout primitives
   ============================================================ */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{position:relative;padding-block:clamp(5rem,11vh,9rem)}
.section-head{display:flex;gap:1.5rem 3rem;flex-wrap:wrap;align-items:baseline;justify-content:space-between;margin-bottom:clamp(2.5rem,6vh,4.5rem)}
.section-head .index{font-family:var(--font-ui);font-size:.72rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.section-title{font-family:var(--font-display);font-weight:300;font-size:clamp(2.2rem,5.5vw,4.6rem);line-height:1;letter-spacing:-.03em;max-width:16ch}

/* ============================================================
   custom cursor
   ============================================================ */
.cursor,.cursor-dot{position:fixed;top:0;left:0;z-index:9500;pointer-events:none;border-radius:50%;will-change:transform;opacity:0;transition:opacity .4s ease}
.cursor{width:46px;height:46px;border:1px solid rgba(236,220,190,.55);margin:-23px 0 0 -23px;transition:opacity .4s ease,width .4s var(--ease),height .4s var(--ease),background-color .4s var(--ease),border-color .4s var(--ease)}
.cursor-dot{width:5px;height:5px;background:var(--sand);margin:-2.5px 0 0 -2.5px}
.cursor.is-hover{width:76px;height:76px;margin:-38px 0 0 -38px;background:rgba(197,130,74,.16);border-color:transparent}
.cursor.is-view{width:96px;height:96px;margin:-48px 0 0 -48px;background:var(--sand);border-color:transparent}
.cursor__label{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-ui);font-weight:500;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);opacity:0;transition:opacity .3s ease}
.cursor.is-view .cursor__label{opacity:1}
.using-cursor *{cursor:none !important}
@media (hover:none),(pointer:coarse){.cursor,.cursor-dot,.sol-preview{display:none !important}}

/* scroll progress */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:9200;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--bronze),var(--amber),var(--gold))}

/* ============================================================
   reveal (IntersectionObserver-driven, screenshot-safe)
   ============================================================ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
.no-js .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important;transform:none !important;transition:none !important}
}

/* assemble-on-scroll: chars start scattered/blurred and come together (inverse of the dust-dissolve) */
.assemble .aword{display:inline-block;white-space:nowrap}
.assemble .ach{display:inline-block;white-space:pre;will-change:transform,filter,opacity;opacity:0;filter:blur(12px);
  transform:translate(var(--dx,0),var(--dy,18px)) rotate(var(--r,0)) scale(1.35);
  transition:opacity .7s var(--ease-out),filter .7s var(--ease),transform .9s var(--ease-out);transition-delay:var(--d,0ms)}
.assemble.is-in .ach{opacity:1;filter:blur(0);transform:none}
.no-js .assemble .ach{opacity:1;filter:none;transform:none}
@media (prefers-reduced-motion:reduce){.assemble .ach,.assemble.is-in .ach{opacity:1;filter:none;transform:none;transition:none}}