/* ============================================================
   SPENCER GABOR — design tokens
   Faithful reconstruction of tokens observed on spencergabor.work.
   All-uppercase, oversized condensed display, single-weight-per-family,
   soft-black on pure white, color only in project tiles.
   ============================================================ */

/* Anton (Google Fonts) — free, condensed, heavy display face used as the
   primary headline type. Loaded via @import at the top of this file so
   it's always available wherever tokens.css is linked. */
/* Headline stack: Helvetica (Mac/iOS) → Arial (Windows) → Helvetica Neue.
   All system fonts — zero network cost, identical rendering for every visitor. */
@font-face {
  font-family: "Inter";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: local("Inter Medium"),
       url("./fonts/Inter-Medium.woff2") format("woff2"),
       /* CDN fallback until a local .woff2 is supplied */
       url("https://fonts.gstatic.com/s/inter/v18/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2") format("woff2");
}

:root {
  /* --- Colors (from :root tokens + DOM) --------------------- */
  --color-white:       #FFFFFF;
  --color-black:       #2C2C2C;  /* soft black — token */
  --color-ink:         #363636;  /* primary text — observed */
  --color-grey:        #CBCBCB;  /* token */
  --color-grey-ghost:  #D2D2D2;  /* h2 ghost type, chips */

  --color-primary:     var(--color-white);
  --color-secondary:   var(--color-grey);
  --color-on-primary:  var(--color-black);
  --color-on-secondary:var(--color-black);

  /* Portfolio tile accents */
  --tile-cream:  #EDE6D3;
  --tile-blue:   #0779FF;
  --tile-green:  #37AF5D;
  --tile-purple: #3C0350;

  /* Accent — muted amber, drawn from the same warm family as --tile-cream */
  --color-amber:       #B88A3E;
  --color-amber-deep:  #8E6826;

  /* --- Typography ------------------------------------------- */
  --font-family-body:     "Inter", sans-serif;
  --font-family-headline: "Helvetica", "Arial", "Helvetica Neue", sans-serif;

  /* Shorthands (as observed on :root) */
  --font-body: 500 1rem/1.3 var(--font-family-body);
  --font-h1:   4.125rem / .82 var(--font-family-headline);
  --font-h2:   2.5rem   / .82 var(--font-family-headline);
  --font-h4:   .875rem  / 1   var(--font-family-headline);
  --font-h6:   500 .5625rem / 1 var(--font-family-body);

  /* Observed size scale (px): 9, 13.33, 14, 16, 22.4, 28.8, 64, 160.37, 756.03 */

  /* --- Layout ----------------------------------------------- */
  --max-width: 860px;
  --padding:   1rem;
  --gap:       1rem;
  --safe-top:    env(safe-area-inset-top);
  --safe-right:  env(safe-area-inset-right);
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-left:   env(safe-area-inset-left);

  /* --- Borders / radii -------------------------------------- */
  --border-hairline: 1px solid rgba(0,0,0,0.1);
  --radius-card:    16px;
  --radius-pill:    800px;   /* the "pill hack" */
  --radius-circle:  50%;

  /* --- Elevation -------------------------------------------- */
  --shadow:
    0px 9px  21px rgba(0,0,0,0.10),
    0px 38px 38px rgba(0,0,0,0.09),
    0px 85px 51px rgba(0,0,0,0.05);
  --shadow-soft:
    0px 9px  21px rgba(0,0,0,0.050),
    0px 38px 38px rgba(0,0,0,0.043),
    0px 85px 51px rgba(0,0,0,0.024);

  /* --- Motion tokens — full observed set -------------------- */
  --ease-linear:         cubic-bezier(.25,.25,.75,.75);
  --ease-in-sine:        cubic-bezier(.47,0,.745,.715);
  --ease-out-sine:       cubic-bezier(.39,.575,.565,1);
  --ease-in-out-sine:    cubic-bezier(.445,.05,.55,.95);
  --ease-in-quad:        cubic-bezier(.55,.085,.68,.53);
  --ease-out-quad:       cubic-bezier(.25,.46,.45,.94);
  --ease-in-out-quad:    cubic-bezier(.455,.03,.515,.955);
  --ease-in-cubic:       cubic-bezier(.55,.055,.675,.19);
  --ease-out-cubic:      cubic-bezier(.215,.61,.355,1);
  --ease-in-out-cubic:   cubic-bezier(.645,.045,.355,1);
  --ease-in-quart:       cubic-bezier(.895,.03,.685,.22);
  --ease-out-quart:      cubic-bezier(.165,.84,.44,1);
  --ease-in-out-quart:   cubic-bezier(.77,0,.175,1);
  --ease-in-quint:       cubic-bezier(.755,.05,.855,.06);
  --ease-out-quint:      cubic-bezier(.23,1,.32,1);
  --ease-in-out-quint:   cubic-bezier(.86,0,.07,1);
  --ease-in-expo:        cubic-bezier(.95,.05,.795,.035);
  --ease-out-expo:       cubic-bezier(.19,1,.22,1);
  --ease-in-out-expo:    cubic-bezier(1,0,0,1);
  --ease-in-circ:        cubic-bezier(.6,.04,.98,.335);
  --ease-out-circ:       cubic-bezier(.075,.82,.165,1);
  --ease-in-out-circ:    cubic-bezier(.785,.135,.15,.86);
  --ease-in-back:        cubic-bezier(.6,-.28,.735,.045);
  --ease-out-back:       cubic-bezier(.175,.885,.32,1.275);
  --ease-in-out-back:    cubic-bezier(.68,-.55,.265,1.55);
}

/* ── Horizontal stability ──────────────────────────────────────────────
   Keep the page locked to the viewport width so a stray swipe, trackpad
   nudge, or an element that's a hair too wide can never shift the layout
   sideways or reveal blank space. `overflow-x: clip` (with a `hidden`
   fallback) contains overflow WITHOUT creating a scroll container, so
   position: sticky keeps working. `overscroll-behavior-x: none` stops the
   horizontal rubber-band / swipe-to-go-back gesture, especially on mobile. */
html, body {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior-x: none;
}
body { position: relative; }

/* Global element defaults (from observed computed styles) */
.sg-root {
  font: var(--font-body);
  color: var(--color-ink);
  background: var(--color-white);
}
.sg-root h1, .sg-root h2 {
  font: var(--font-h1);
  font-size: 10rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
}
.sg-root h2 { color: var(--color-grey-ghost); }
.sg-root h4 {
  font: var(--font-h4);
  font-size: 4rem;
  line-height: 52.48px;
  letter-spacing: -1.28px;
  text-transform: uppercase;
  margin: 0;
}
.sg-root p {
  font: var(--font-h6);
  font-size: 14px;
  line-height: 14px;
  letter-spacing: 1.26px;
  text-transform: uppercase;
  margin: 0;
}
.sg-root .eyebrow {
  font-family: var(--font-family-headline);
  font-size: 9px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
}
.sg-root .btn, .sg-root .chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  background: var(--color-grey-ghost);
  color: var(--color-black);
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-family-headline);
  font-size: 22.4px;
  line-height: 22.4px;
  text-transform: uppercase;
  cursor: pointer;
}
.sg-root .card {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  background: var(--color-white);
}