/* ---------------------------------------------------------------------------
   The four faces, declared once. Consolidated 2026-09-08.

   They were declared 18 times across six stylesheets, with descriptors that
   disagreed: the homepage declared "Cormorant Garamond" with a weight range,
   while the book, character and teacher pages declared "Cormorant" with no
   range at all. Two consequences, both visible: a rule asking for the family
   name its page did not declare fell back to Georgia, and every bold weight on
   those pages was SYNTHESISED rather than the real instance -- which is why the
   Story Map plaque measured 113.83px on book pages and 114.61px everywhere
   else, from identical CSS.

   Ranges below are read from the font files themselves:
     cormorant-garamond-latin.woff2   variable, wght 300-700
     montserrat-latin.woff2           variable, wght 100-900
     cormorant-garamond-italic-600    static 600 italic
     limelight-regular                static 400
   Both Cormorant names are declared because the stylesheets use both.
   Paths are root-absolute so they resolve the same from any directory.
   --------------------------------------------------------------------------- */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;src:url('/assets/fonts/cormorant-garamond-latin.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:600;font-display:swap;src:url('/assets/fonts/cormorant-garamond-italic-600.woff2') format('woff2')}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:300 700;font-display:swap;src:url('/assets/fonts/cormorant-garamond-latin.woff2') format('woff2')}
@font-face{font-family:'Cormorant';font-style:italic;font-weight:600;font-display:swap;src:url('/assets/fonts/cormorant-garamond-italic-600.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/montserrat-latin.woff2') format('woff2')}
@font-face{font-family:'Limelight';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/limelight-regular.woff2') format('woff2')}

/* ============================================================================
   rfb-tokens.css — the Red Fedora Books storyworld, defined once.
   Load FIRST on every page, before any other stylesheet.

   Rule: no hex literal belongs in any other stylesheet. If a colour is needed
   that is not here, add it here first. Phase 3 of the repair plan converts the
   remaining legacy files onto these tokens.

   Established 2026-09-08. See 00. Design Docs/15-design-and-frontend-audit.
   ========================================================================= */

:root{
  /* ---- colour: one value each, no exceptions ------------------------- */
  --rfb-crimson:      #b62135;   /* the fedora. Was 4 different values.   */
  --rfb-crimson-deep: #8f2638;
  --rfb-crimson-lit:  #e0455c;

  --rfb-brass:        #d8b461;   /* Was 4 different values.               */
  --rfb-brass-lit:    #f5dda0;
  --rfb-brass-deep:   #8c7539;
  --rfb-brass-edge:   #6b5624;

  --rfb-paper:        #f2e3bd;   /* Was 3 different values.               */
  --rfb-paper-dim:    #d4c5a8;
  --rfb-paper-warm:   #fff1b9;

  --rfb-night:        #080d14;   /* Was 2 different values.               */
  --rfb-night-2:      #101720;
  --rfb-night-3:      #1a232e;
  --rfb-ink:          #100d0b;   /* near-black on parchment               */

  --rfb-focus:        #ffd66f;

  /* ---- scene colours: recurring storyworld materials, not brand marks ---- */
  --rfb-ember:        #e94a25;   /* the magic trail and lamp flame          */
  --rfb-ember-lit:    #ff6738;
  --rfb-wood:         #5b3424;   /* dark wood, leather, trunk               */
  --rfb-wood-deep:    #35210f;
  --rfb-wood-lit:     #8c6a3a;
  --rfb-moss:         #35452d;   /* Maymont and the gardens                 */
  --rfb-slate-blue:   #1c3a52;   /* rain, midnight glass                    */


  /* ---- surfaces and scrims ------------------------------------------- */
  --rfb-shell:        rgba(8,13,20,.94);
  --rfb-shell-solid:  #0a1018;
  --rfb-scrim-top:    linear-gradient(180deg, rgba(6,10,16,.86) 0%, rgba(6,10,16,.62) 46%, rgba(6,10,16,0) 100%);
  --rfb-hairline:     rgba(216,180,97,.28);
  /* Scrims. Was 15 hand-written black/white alphas across 193 declarations;
     four steps, no shift larger than 6% alpha. */
  --rfb-scrim-1: rgba(0,0,0,.47);
  --rfb-scrim-2: rgba(0,0,0,.56);
  --rfb-scrim-3: rgba(0,0,0,.70);
  --rfb-scrim-4: rgba(0,0,0,.84);
  --rfb-hairline-soft:rgba(216,180,97,.14);

  /* ---- type ----------------------------------------------------------- */
  --rfb-display: "Cormorant Garamond", Cormorant, Georgia, "Times New Roman", serif;
  --rfb-theatre: Limelight, "Cormorant Garamond", Georgia, serif;
  --rfb-ui:      Montserrat, "Helvetica Neue", Arial, sans-serif;

  /* Fluid scale: interpolates 390px -> 1440px instead of jumping at
     breakpoints. This is what stops tablet inheriting phone or desktop type. */
  --rfb-t-micro: clamp(12px, 11px + .25vw,  14px);
  --rfb-t-label: clamp(13px, 12px + .3vw,   15px);
  --rfb-t-body:  clamp(15px, 14px + .35vw,  17px);
  --rfb-t-lead:  clamp(17px, 15px + .6vw,   21px);
  --rfb-t-h3:    clamp(20px, 17px + 1.1vw,  28px);
  --rfb-t-h2:    clamp(28px, 22px + 2.2vw,  46px);
  --rfb-t-h1:    clamp(38px, 27px + 4.2vw,  84px);

  /* Tracking: was 28 hand-written values across 127 declarations. Five
     steps, nothing moved by more than 13% (sub-pixel at these sizes). */
  --rfb-track-display: .012em; /* optical tightening on big Limelight type */
  --rfb-track-tight: .06em;
  --rfb-track-body:  .1em;
  --rfb-track-label: .15em;   /* uppercase UI labels                      */
  --rfb-track-wide:  .3em;
  --rfb-track-word:  .2em;    /* the wordmark                             */

  /* ---- space ---------------------------------------------------------- */
  --rfb-s1: 4px;  --rfb-s2: 8px;  --rfb-s3: 12px; --rfb-s4: 16px;
  --rfb-s5: 24px; --rfb-s6: 32px; --rfb-s7: 48px; --rfb-s8: 64px;
  --rfb-s9: 96px; --rfb-s10:128px;
  --rfb-gutter: clamp(16px, 4vw, 56px);

  /* ---- targets: the 44px floor, expressed as a token ------------------ */
  --rfb-tap:      44px;
  --rfb-tap-lg:   52px;

  /* ---- shell geometry -------------------------------------------------- */
  --rfb-head-h:   64px;

  /* ---- shape and depth -------------------------------------------------- */
  --rfb-r-sm: 3px;  --rfb-r-md: 6px;  --rfb-r-lg: 18px;
  --rfb-r-pill: 999px;  --rfb-r-round: 50%;
  /* Elevation: opaque drops for art sitting on a scene, distinct from the
     semi-transparent --rfb-lift-* used on UI surfaces. */
  --rfb-drop-1: 0 12px 30px #000;
  --rfb-drop-2: 0 20px 70px #000;
  --rfb-drop-3: 0 30px 100px #000;
  /* One focus ring, two sizes. */
  --rfb-ring:    0 0 0 4px #f0c823, 0 0 18px #f0c8a0;
  --rfb-ring-lg: 0 0 0 8px #f0c823, 0 0 25px #f0c8a0;
  --rfb-lift-1: 0 2px 10px rgba(0,0,0,.45);
  --rfb-lift-2: 0 12px 32px rgba(0,0,0,.5);
  --rfb-lift-3: 0 28px 70px rgba(0,0,0,.62);

  /* ---- z-index: eight tokens replacing twenty-eight ad-hoc values ----- */
  --rfb-z-under: -1;
  --rfb-z-base:   1;
  --rfb-z-raise: 10;
  --rfb-z-scene: 20;
  --rfb-z-rail:  60;
  --rfb-z-head:  80;
  --rfb-z-panel: 90;
  --rfb-z-modal:120;
  --rfb-z-toast:140;

  /* ---- motion ---------------------------------------------------------- */
  /* Motion vocabulary. Was 20 near-identical cubic-beziers plus 5 keyword
     easings; five curves, each with a job, so motion reads as one hand. */
  --rfb-ease-arrive:  cubic-bezier(.2,.78,.22,1);   /* things entering: quick out, soft landing */
  --rfb-ease-snap:    cubic-bezier(.2,.9,.25,1);    /* small, confident: toggles, plaques */
  --rfb-ease-depart:  cubic-bezier(.4,.05,.2,1);    /* things leaving: gathers speed */
  --rfb-ease-breathe: cubic-bezier(.42,0,.58,1);    /* ambient loops, symmetrical */
  --rfb-ease-door:    cubic-bezier(.62,.02,.24,1);  /* weighted reveals: the curtain */
  --rfb-ease: var(--rfb-ease-arrive);
  /* Durations come from an 11-step scale (ratio ~1.35). These are the named
     rungs most rules reach for; no timing moved by more than 15%. */
  --rfb-quick: .1s;
  --rfb-fast:  .16s;
  --rfb-med:   .3s;
  --rfb-slow:  .55s;
  --rfb-scene: 1s;
}

@media (min-width:760px){ :root{ --rfb-head-h: 84px; } }

/* The calm class and the OS preference both mean the same thing: no ambient
   motion. Content never depends on it. */
body.calm *,
body.calm *::before,
body.calm *::after{
  animation-duration:.001ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.001ms !important;
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}