/* ===========================================================================
   THEME — the only file you need to touch to change how the site feels.
   ---------------------------------------------------------------------------
   Everything visual is a token declared here. site.css references these tokens
   and never names a colour, font, or size of its own, so edits in this file
   cannot break the layout. Change a value, reload, done.

   Current direction: OLD-WORLD STONE & INK.
   Palette drawn from the essay's own materials — quarried limestone, the
   antimony-lead of Gutenberg's type, oil-based printer's ink, terracotta roof
   tile, and asphalt for the section about asphalt.

   QUICK EDITS
     Warmer / cooler ....... shift the hues in "Raw materials" below
     Darker overall ........ swap --bg and --fg roles in "Stone ground"
     Less rustic ........... desaturate --accent toward --lead
     Bigger text ........... raise --step-0
     Tighter page .......... lower --measure
     Photos less unified ... weaken --img-treatment
   =========================================================================== */

:root {

  /* -----------------------------------------------------------------------
     1. RAW MATERIALS
     Named for the thing, not the role, so the palette stays legible when you
     retune it. Roles are assigned in section 2.
     -------------------------------------------------------------------- */

  --bone:        #f4efe6;   /* page ground — warm, papery                   */
  --limestone:   #e7ded0;   /* raised surfaces, quiet panels                */
  --quarry:      #c9bca4;   /* rules, borders, quarried edges               */
  --lead:        #8a8781;   /* antimony-lead type metal — the cool note     */
  --ink:         #1f1a14;   /* oil-based printer's ink, warm near-black     */
  --tile:        #a6543a;   /* terracotta roof tile — the one accent        */
  --asphalt:     #24231f;   /* the counter-subject: paving, erasure         */
  --asphalt-lit: #33322d;   /* raised surfaces on asphalt                   */
  --chalk:       #e8e3d8;   /* text on asphalt                              */


  /* -----------------------------------------------------------------------
     2. STONE GROUND  (the default)
     Semantic roles. site.css only ever uses these.
     -------------------------------------------------------------------- */

  --bg:           var(--bone);
  --bg-raised:    var(--limestone);
  --fg:           var(--ink);
  --fg-quiet:     #5b5348;      /* body asides, captions                    */
  --fg-faint:     var(--lead);  /* labels, metadata, the rail at rest       */
  --rule:         var(--quarry);
  --rule-hair:    #ded4c2;      /* the lightest divider that still reads    */
  --accent:       var(--tile);
  --accent-quiet: #c98f76;      /* accent at lower intensity                */
  --selection:    #e3cdc2;


  /* -----------------------------------------------------------------------
     3. TYPOGRAPHY
     Three families, each with one job.

       display + body — EB Garamond. Claude Garamond's forms descend directly
         from the presses this essay opens with. Handles long-form reading and
         still has real presence at 80px.
       utility — IBM Plex Sans. The engineer's voice: spec-sheet, neutral,
         letterspaced. Used for the vantage rail, labels, and captions. The
         serif/sans split is doing argumentative work — humanist prose against
         the engineered register the essay is criticising.
       forme — Cardo. A Bembo revival built for early-print scholarship. Used
         in exactly one place: the Genesis line found at the bottom of the
         zoom. One voice, one moment.
     -------------------------------------------------------------------- */

  --font-display: 'EB Garamond', 'Hoefler Text', Georgia, serif;
  --font-body:    'EB Garamond', 'Hoefler Text', Georgia, serif;
  --font-util:    'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --font-forme:   'Cardo', 'EB Garamond', Georgia, serif;

  /* Fluid type scale. Each step clamps between a phone and a projector. */
  --step--2: clamp(0.69rem, 0.67rem + 0.10vw, 0.75rem);   /* slot hints     */
  --step--1: clamp(0.80rem, 0.77rem + 0.14vw, 0.88rem);   /* labels, rail   */
  --step-0:  clamp(1.06rem, 1.00rem + 0.30vw, 1.22rem);   /* body           */
  --step-1:  clamp(1.25rem, 1.15rem + 0.45vw, 1.50rem);   /* lede           */
  --step-2:  clamp(1.55rem, 1.35rem + 0.90vw, 2.10rem);   /* h3, pull quote */
  --step-3:  clamp(2.00rem, 1.60rem + 1.90vw, 3.30rem);   /* h2             */
  --step-4:  clamp(2.70rem, 1.90rem + 3.60vw, 5.60rem);   /* h1, numerals   */

  --weight-body:    400;
  --weight-medium:  500;
  --weight-display: 600;

  --leading-tight:  1.06;   /* display headings                             */
  --leading-snug:   1.30;   /* ledes, pull quotes                           */
  --leading-body:   1.62;   /* long-form prose — the number that matters    */
  --leading-verse:  1.48;   /* short-line blocks                           */

  --track-tight:  -0.021em; /* large display sizes                          */
  --track-normal:  0;
  --track-label:   0.15em;  /* uppercase utility text                       */
  --track-wide:    0.055em; /* the vantage rail                             */


  /* -----------------------------------------------------------------------
     4. RHYTHM
     -------------------------------------------------------------------- */

  --measure:      36rem;    /* reading column — ~66 characters at --step-0  */
  --measure-wide: 52rem;    /* pull quotes, comparisons                     */
  --gutter:       clamp(1.25rem, 4vw, 3rem);

  --space-1: 0.35rem;
  --space-2: 0.7rem;
  --space-3: 1.15rem;
  --space-4: 1.9rem;
  --space-5: 3rem;
  --space-6: 4.75rem;
  --space-7: 7.5rem;

  --para-gap:    var(--space-3);  /* between prose paragraphs               */
  --block-gap:   var(--space-5);  /* around figures, quotes, lists          */
  --section-gap: var(--space-7);  /* between sections                       */


  /* -----------------------------------------------------------------------
     5. IMAGES
     Your photos come from wildly mixed sources — stock, AI renders, phone
     shots, screenshots. Left raw they clash. This one filter pass pulls them
     toward a common tone so the page reads as a single thing regardless of
     what you drop in. Weaken it as your real images land.
     -------------------------------------------------------------------- */

  --img-treatment: saturate(0.84) contrast(1.03) brightness(0.99) sepia(0.07);
  --img-treatment-dark: saturate(0.72) contrast(1.06) brightness(0.86);
  --img-radius: 0;          /* stone doesn't have rounded corners           */
  --opener-height: clamp(20rem, 62vh, 40rem);
  --opener-scrim: 0.42;     /* darkening behind opener titles, 0–1          */

  /* Paper. Deliberately not the screen palette — printing the stone ground
     would flood a page with warm ink for no reading benefit. */
  --print-bg: #ffffff;
  --print-fg: #000000;


  /* -----------------------------------------------------------------------
     6. MOTION
     Restrained on purpose. Reduced-motion is honoured in site.css.
     -------------------------------------------------------------------- */

  --ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-quick:  160ms;
  --dur-calm:   420ms;
  --dur-slow:   900ms;
}


/* ===========================================================================
   ASPHALT GROUND
   The essay's second section is about paving, stroads, and erasure. The page
   stands on asphalt while it argues that, then returns to stone. This override
   is the whole mechanism — every role is simply reassigned.
   =========================================================================== */

[data-ground='asphalt'] {
  --bg:        var(--asphalt);
  --bg-raised: var(--asphalt-lit);
  --fg:        var(--chalk);
  --fg-quiet:  #a9a49a;
  --fg-faint:  #7d7972;
  --rule:      #45433d;
  --rule-hair: #35342f;
  --accent:    #cf7d5f;                 /* tile, lifted to read on dark    */
  --accent-quiet: #8d5f4c;
  --selection: #4a463d;
  --img-treatment: var(--img-treatment-dark);
}