/* Ahmad Dibo — design tokens
   Swiss / clinical. White paper, black ink, hairline rules, Helvetica.
   No color. No gradients. Structure comes from type weight, scale, and rules. */

:root {
  /* --- surface --------------------------------------------------------- */
  --paper: #ffffff;       /* pure white — the brief is emphatic */
  --ink: #0a0a0a;         /* near-black, softer than #000 on white */
  --ink-mute: #6b6b6b;    /* secondary text — discipline, year, meta */
  --rule: #e4e4e4;        /* hairline rules between rows/sections */
  --rule-strong: #0a0a0a; /* the deliberate, heavy rule under H1s */
  --accent: #B81411;      /* the single deliberate accent — link hover only */

  /* --- type ------------------------------------------------------------ */
  --font: "Helvetica", "Helvetica Neue", "Arial", sans-serif;

  /* Modular scale, tuned for editorial contrast (massive vs hairline) */
  --t-mega: clamp(3.5rem, 11vw, 9rem);   /* hero city-name scale */
  --t-h1: clamp(2.25rem, 5vw, 3.5rem);
  --t-h2: clamp(1.5rem, 3vw, 2rem);
  --t-lead: clamp(1.25rem, 2.2vw, 1.75rem);
  --t-body: 1rem;
  --t-small: 0.8125rem;   /* 13px — nav, meta, running headers */
  --t-micro: 0.6875rem;   /* 11px — labels, copyright, timeline */

  --w-regular: 400;
  --w-medium: 500;
  --w-bold: 700;

  --tracking-wide: 0.08em;   /* all-caps labels */
  --tracking-wider: 0.14em;  /* micro labels */
  --tracking-tight: -0.02em; /* big display type */

  /* --- space ----------------------------------------------------------- */
  --gutter: clamp(1.25rem, 4vw, 3.5rem); /* page side padding */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2.5rem;
  --s-5: 4rem;
  --s-6: 6.5rem;
  --s-7: 10rem;

  --maxw: 1600px;

  /* --- alignment grid --------------------------------------------------
     The nav is the ruler for the whole site. Index / About / Contact are a
     flex row starting on the col-1 line, separated by --nav-gap. Because
     that gap is fluid, the nav items do NOT sit at fixed percentages —
     they drift with viewport width. Any page content that must align under
     a nav item therefore has to be built from the SAME measurements, not
     from a hand-tuned percentage.

       Ahmad Dibo©                Index    About    Contact       Notice
       |-------- col-1 --------|<-item->|<-item->|<-item->|        (right)

     --nav-item is the width of one nav cell: its longest label plus the
     gap. "Contact" is the widest of the three, so it sets the step. */
  --col-1: 57.3%;                        /* wordmark → Index          */
  --nav-gap: clamp(1.5rem, 4.4vw, 5rem); /* the flex gap between items  */
  /* The Index→About step: the rendered width of the word "Index" plus the
     gap. Measured against the actual render — "Index" at --t-small is
     ~3.7ch of the ROOT font size (ch resolves at 1rem here, not 13px).
     Do NOT use the longest label ("Contact", 7ch): that overshoots by a
     whole word and lands content under Contact instead of About. */
  --nav-item: calc(3.7ch + var(--nav-gap));

  /* The header row's own column-gap sits between the col-1 line and the
     start of "Index" — the nav labels have no padding of their own, so
     this gap alone is the offset content must clear to align under Index. */
  --head-gap: clamp(0.75rem, 2vw, 1.75rem);
  --nav-start: var(--head-gap);

  /* the nav labels sit inside a cell with this much optical inset; add it
     to anything that must line up with the "I" of Index rather than the
     raw grid line. */
  --col-inset: calc(0.4rem + 1px);

  /* The rendered width of the word "Notice" — the header's right-gutter
     item, which sits in an auto column flush to the wrap's right edge. Its
     LEFT edge is therefore exactly this far in from that edge, so anything
     that must start on the "N" of Notice offsets by this much from the
     right. Measured against the actual render, like --nav-item: "Notice"
     advances 36.9px at --t-small, and the consumers of this token are set
     at --t-small too, so ch resolves there (7.2px) — 36.9 / 7.2 = 5.13ch.
     Re-measure if the label is ever renamed or the type changes. */
  --notice-w: 5.13ch;

  /* --- first content line ----------------------------------------------
     Every page starts its first row of content on the SAME horizontal line,
     so moving between pages never makes the type jump. On an inner page
     that line falls below the page-head; the landing has no title, so it
     reproduces the same distance directly. Derived from the type scale, not
     a magic number. */
  --first-line: calc(
    var(--s-5)      /* .page-head padding-top   */
    + var(--t-h1)   /* the title's cap height   */
    + var(--s-3)    /* title margin-bottom      */
    + var(--s-5)    /* first section top space  */
  );

  /* --- motion ---------------------------------------------------------- */
  /* Intentional, restrained. Long easings, never bouncy. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.25s;
  --dur: 0.5s;
  --dur-slow: 0.8s;
}

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