/*
 * ANTI-FØRMULA STUDIO
 * Global — Reset · Grid · Type · Utilities
 */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,600;1,8..60,300;1,8..60,400;1,8..60,600&family=Space+Grotesk:wght@300;400;500;600&family=IBM+Plex+Mono:ital,wght@0,300;0,400;1,300;1,400&display=swap');

/* ─── RESET ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  background: var(--c-black);
  color: var(--c-white);
  font-family: var(--f-sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  cursor: none;
}
a    { color: inherit; text-decoration: none; }
img  { display: block; max-width: 100%; }
ul   { list-style: none; }
button { cursor: none; background: none; border: none; font: inherit; color: inherit; }

/* ─── PAPER GRAIN ───────────────────────────────────────────── */
/* Removed: SVG feTurbulence filter forces full-page repaint on every
   scroll frame, causing motion blur throughout the site. */

/* ─── GRID ──────────────────────────────────────────────────── */
.wrap {
  display: grid;
  grid-template-columns:
    var(--g-margin)
    var(--g-ann)
    var(--g-breath)
    1fr
    var(--g-margin);
  max-width: var(--g-max);
  margin: 0 auto;
  width: 100%;
}
.a  { grid-column: 2; }   /* annotation */
.b  { grid-column: 3; }   /* breath     */
.c  { grid-column: 4; }   /* content    */
.ac { grid-column: 2/5; } /* full span  */

/* ─── TYPOGRAPHY ─────────────────────────────────────────────── */

/* Argument voice */
.serif-96 { font-family: var(--f-serif); font-size: 96px;  line-height: 1.01; font-weight: 300; letter-spacing: -0.025em; }
.serif-80 { font-family: var(--f-serif); font-size: 80px;  line-height: 1.05; font-weight: 300; letter-spacing: -0.02em;  }
.serif-60 { font-family: var(--f-serif); font-size: 60px;  line-height: 1.08; font-weight: 300; letter-spacing: -0.015em; }
.serif-48 { font-family: var(--f-serif); font-size: 48px;  line-height: 1.12; font-weight: 300; letter-spacing: -0.01em;  }
.serif-36 { font-family: var(--f-serif); font-size: 36px;  line-height: 1.25; font-weight: 300; }
.serif-28 { font-family: var(--f-serif); font-size: 28px;  line-height: 1.35; font-weight: 300; }
.serif-22 { font-family: var(--f-serif); font-size: 22px;  line-height: 1.55; font-weight: 300; }
.serif-em { font-style: italic; }
.serif-wt { font-weight: 400; }

/* Precision voice */
.sans-18 { font-family: var(--f-sans); font-size: 18px; line-height: 1.5;  font-weight: 400; }
.sans-15 { font-family: var(--f-sans); font-size: 15px; line-height: 1.65; font-weight: 400; }
.sans-13 { font-family: var(--f-sans); font-size: 13px; line-height: 1.6;  font-weight: 400; }

/* Specimen voice */
.mono     { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 400; }
.mono-sm  { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 300; }
.mono-cap { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.05em; font-weight: 400; }

/* Color modifiers */
.col-mid    { color: var(--c-mid);       }
.col-orange { color: var(--c-orange);    }
.col-white  { color: var(--c-white);     }
.col-dark   { color: var(--c-dark-body); }

/* ─── RULES ─────────────────────────────────────────────────── */
.rule        { display: block; width: 100%; height: 1px; background: var(--c-dark-rule); border: none; }
.rule--heavy { height: 3px; background: var(--c-black); }
.rule--dim   { background: var(--c-dark-rule); }
.rule--mark  { height: 2px; background: var(--c-orange); }

/* ─── ANNOTATION STRUCTURE ──────────────────────────────────── */
.sec-mark {
  display: block;
  padding-top: 3px;
  border-top: 2px solid var(--c-orange);
  margin-bottom: var(--s3);
}
.anno-block {
  margin-top: var(--s3);
  padding-top: var(--s2);
  border-top: 1px solid var(--c-light);
}
.anno-block--dim {
  border-top-color: var(--c-dark-rule);
}
.anno-label {
  font-family: var(--f-mono); font-size: 9px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--c-dark-mid); margin-bottom: 4px;
}
.anno-label--dim { color: var(--c-dark-mid); }
.anno-val   { font-family: var(--f-mono); font-size: 10px; line-height: 1.55; color: var(--c-dark-body); }
.anno-val--dim   { color: var(--c-dark-body); }
.anno-val--mark  { color: var(--c-orange); }

/* Light surface sections — annotation text needs to be dark for contrast */
.ab-section--light .anno-label,
.ab-section--surface .anno-label,
.ab-founder .anno-label,
.method .anno-label,
.work .anno-label,
.section--surface .anno-label,
.ss-section .anno-label {
  color: #5A5860;
}
.ab-section--light .anno-val,
.ab-section--surface .anno-val,
.ab-founder .anno-val,
.method .anno-val,
.work .anno-val,
.section--surface .anno-val,
.ss-section .anno-val {
  color: #1A1820;
}
.ab-section--light .anno-block,
.ab-section--surface .anno-block,
.method .anno-block,
.work .anno-block,
.section--surface .anno-block {
  border-top-color: var(--c-light);
}

/* Dark sections — restore annotation to dark-appropriate colours */
.ss-section--dark .anno-label,
.ss-section--dark .anno-label--dim,
.ab-section--dark .anno-label,
.ab-section--dark .anno-label--dim,
.home-close .anno-label,
.ab-close .anno-label {
  color: var(--c-dark-mid) !important;
}
.ss-section--dark .anno-val,
.ss-section--dark .anno-val--dim,
.ab-section--dark .anno-val,
.ab-section--dark .anno-val--dim,
.home-close .anno-val,
.ab-close .anno-val {
  color: var(--c-dark-body) !important;
}

/* ─── BUTTONS ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-sans); font-size: 13px; font-weight: 500;
  letter-spacing: 0.02em; white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  padding: 14px 28px;
}
.btn-fill   { background: var(--c-black); color: var(--c-white); }
.btn-fill:hover { background: #2A2826; }
.btn-border { background: transparent; color: var(--c-black); border: 1px solid var(--c-black); }
.btn-border:hover { background: var(--c-black); color: var(--c-white); }
.btn-border--inv { background: transparent; color: var(--c-white); border: 1px solid rgba(255,255,255,0.55); }
.btn-border--inv:hover { background: var(--c-white); color: var(--c-black); border-color: var(--c-white); }
.btn-ghost  { padding: 0; background: transparent; color: var(--c-white); border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: 3px; }
.btn-ghost:hover { color: var(--c-white); border-bottom-color: var(--c-white); }
.arrow { font-family: var(--f-mono); font-size: 15px; }

/* ─── TAGS ──────────────────────────────────────────────────── */
.tag { display: inline-block; border: 1px solid var(--c-light); padding: 3px 9px; font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-mid); }

/* ─── REVEAL ANIMATIONS ─────────────────────────────────────── */
/*
 * WEIGHTED MOMENTUM
 * Spring curve: cubic-bezier(0.34, 1.56, 0.64, 1)
 * Slight overshoot — elements have mass, settle into place.
 * Combined with staggered delays, creates depth.
 */

/* Clip reveal — text slides in from bottom with spring */
.reveal {
  overflow: hidden;
  display: block;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.reveal-inner {
  display: block;
  transform: translateY(108%);
  transition: transform 0.85s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding-top: 0.05em;
}
.reveal-inner.in { transform: translateY(0); }

/* Fade + rise — weighted upward movement with spring */
.rise {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.6s cubic-bezier(0.34, 1.2, 0.64, 1),
    transform 0.75s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.rise.in { opacity: 1; transform: translateY(0); }

/* Delay utilities — wider spread for more visible stagger */
.rise-d1 { transition-delay: 0.08s; }
.rise-d2 { transition-delay: 0.16s; }
.rise-d3 { transition-delay: 0.25s; }
.rise-d4 { transition-delay: 0.34s; }
.rise-d5 { transition-delay: 0.44s; }
.rise-d6 { transition-delay: 0.55s; }

/* Fade only */
.fade { opacity: 0; transition: opacity 0.6s cubic-bezier(0.34, 1.2, 0.64, 1); }
.fade.in { opacity: 1; }

/* Line draw — left to right with spring */
.draw {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.draw.in { transform: scaleX(1); }

/* ─── ACCENT WORD HIGHLIGHT ─────────────────────────────────── */
/* Signal Red on key words — used sparingly, max one per heading */
.accent { color: var(--c-orange); font-style: normal; }
.accent-subtle { color: var(--c-orange); opacity: .8; }

/* ─── LIGHT SURFACE SECTIONS ─────────────────────────────────
   Work section, founder, philosophy cards, image containers.
   Apply .section--surface to switch back to light context.
────────────────────────────────────────────────────────────── */
.section--surface {
  background: var(--c-surface);
  color: var(--c-black);
}
/* Light surface section resets handled in annotation block above */
.section--surface .btn-border { color: var(--c-black); border-color: var(--c-black); }
.section--surface .btn-border:hover { background: var(--c-black); color: var(--c-white); }
.section--surface .btn-ghost { color: var(--c-black); border-bottom-color: var(--c-mid); }
.section--surface .btn-ghost:hover { color: var(--c-black); border-bottom-color: var(--c-black); }

/* Anno val/label base colours set in annotation block above */
.fault-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; background: var(--c-orange); color: var(--c-white);
  font-family: var(--f-mono); font-size: 9px; font-weight: 400; letter-spacing: 0;
  flex-shrink: 0;
}

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1200px) {
  :root { --g-margin: 48px; --g-ann: 160px; --g-breath: 80px; }
  .serif-96 { font-size: 72px; }
  .serif-80 { font-size: 64px; }
  .serif-60 { font-size: 48px; }
}
@media (max-width: 900px) {
  :root { --g-margin: 0px; }
  .wrap {
    display: block;
    padding-left: 24px;
    padding-right: 24px;
  }
  /* Annotation column — show section number only, hide all detail */
  .a {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: none;
  }
  .a .sec-mark {
    margin-bottom: 0;
    border-top: none;
    padding-top: 0;
    flex-shrink: 0;
  }
  .a .sec-mark::before { display: none; }
  /* Hide all annotation detail blocks — section number is enough */
  .anno-block { display: none; }
  .b { display: none; }
  /* Type scale — readable on 375px */
  .serif-96 { font-size: 48px; line-height: 1.04; letter-spacing: -1px; }
  .serif-80 { font-size: 40px; line-height: 1.05; }
  .serif-60 { font-size: 36px; line-height: 1.08; letter-spacing: -.5px; }
  .serif-48 { font-size: 28px; line-height: 1.15; }
  .serif-36 { font-size: 24px; }
  .serif-28 { font-size: 22px; }
  /* Section padding — tighter on mobile */
  body { cursor: auto; }
  /* Buttons — full width on mobile */
  .btn { padding: 13px 22px; }
}
@media (max-width: 600px) {
  .wrap { padding-left: 20px; padding-right: 20px; }
  .serif-96 { font-size: 38px; letter-spacing: -1px; }
  .serif-80 { font-size: 32px; }
  .serif-60 { font-size: 30px; }
  .serif-48 { font-size: 26px; }
}

/* ─── STICKY ANNOTATION COLUMN (desktop only) ───────────────
   Defined globally so all pages inherit it.
   Top offset uses --header-h set by components.js,
   which accounts for the declaration bar + nav height.
────────────────────────────────────────────────────────────── */
@media (min-width: 901px) {
  .sticky-anno {
    position: sticky;
    top: calc(var(--header-h, 92px) + 32px);
    align-self: start;
    height: fit-content;
  }
}

/* ─── LIGHT SURFACE: override mid grey to darker value ──────────
   --c-mid is calibrated for dark backgrounds.
   On surface/light sections it needs to be darker for contrast.
────────────────────────────────────────────────────────────── */
.section--surface,
.ab-section--light,
.ab-section--surface,
.ab-founder,
.method,
.work,
.fault-cta,
.mission-block,
.ss-section--surface {
  --c-mid: var(--c-mid-on-light);
}

/* ─── SECTION BREAK ACCENTS (mobile) ────────────────────────────
   On mobile, a 2px coloured bar marks section entries.
   Applied globally so any page can use these classes.
────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .section-break--dark::before {
    content: '';
    display: block;
    height: 2px;
    background: var(--c-orange);
    width: 40px;
    margin: 0 24px 40px;
  }
  .section-break--light::before {
    content: '';
    display: block;
    height: 2px;
    background: var(--c-black);
    width: 40px;
    margin: 0 24px 40px;
  }
}
@media (max-width: 600px) {
  .section-break--dark::before,
  .section-break--light::before { margin: 0 20px 32px; }
}