/* =========================================================================
   base.css — design tokens, resets and the shared type system.
   Every other stylesheet builds on the variables defined here.
   ========================================================================= */

:root{
  /* sky palette (also read by js/components/sky.js) */
  --sky-top:#5f97de;
  --sky-low:#a9c3e2;
  --cloud:#f4f7fb;

  /* text on the sky */
  --ink:#ffffff;
  --ink-soft:rgba(255,255,255,.72);
  --glass:rgba(255,255,255,.16);
  --glass-line:rgba(255,255,255,.38);

  /* grey placeholder blocks */
  --block:#c9ccd2;
  --block-back:#a9adb5;
  --block-ink:#7d828b;

  /* type: headings = Cormorant Garamond Medium Italic, running text = Assistant */
  --display:"Cormorant Garamond","Cormorant",Garamond,"Times New Roman",serif;
  --ui:"Assistant","Helvetica Neue",Arial,sans-serif;

  /* the one gutter used by every fixed bar and page */
  --gutter:clamp(16px,3.4vw,48px);

  /* a soft, sky-tinted halo behind white text — shown only while a cloud is behind it
     (js/components/textShield.js adds .cloudy) */
  --sky-shadow:0 1px 2px rgba(18,40,88,.24),0 0 12px rgba(18,40,88,.22),0 0 30px rgba(18,40,88,.14);

  color-scheme:light;
}

html,body{height:100%}
body{margin:0;background:var(--sky-top);color:var(--ink);font-family:var(--ui);overflow:hidden;-webkit-font-smoothing:antialiased}

/* white text on the sky: the halo fades in while a cloud passes behind it, and out again */
.mark,header nav a,.chrome,#loader .num,.mm-links a,.mm-foot,.lb-back,.works-head,.windex a,
.p-name,.p-year,.p-grid dl,.p-info p,.p-next a,.ep figcaption,
.pm-meta,.pm-lines,.pm-script,.pm-star,.pm-corner,.cd-meta,.cd-line,.cd-hint{transition:text-shadow .9s ease}
.cloudy{text-shadow:var(--sky-shadow)}
/* the big Contact word is a canvas, so it takes the halo as a filter */
.cd-word{transition:filter .9s ease}
.cd-word.cloudy{filter:drop-shadow(0 0 14px rgba(18,40,88,.24))}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1.5px solid var(--ink);outline-offset:4px;border-radius:4px}

/* ---------- type system ---------- */
h1,h2{font-family:var(--display);font-style:italic;font-weight:500;margin:0;text-wrap:balance;line-height:.95}
.big{font-size:clamp(52px,10vw,150px);letter-spacing:-.01em}
.big em{font-style:italic}
.eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}

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