/* ---------- the Continuing Education Project: every shared value, in one place ----------
   Every page on bringrecords.com loads this file FIRST (scripts/check-design.js fails the
   build if one doesn't), and no other file defines a color, a typeface, a duration or an
   easing curve. Components read these; they never restate a number. What each value is for,
   and why the site moves the way it does, is written in DESIGN.md at the repo's root: read
   it before building or changing anything a visitor sees. The home page is React Native and
   cannot read CSS, so it mirrors the motion values in constants/motion.js, and the build
   check fails if the two ever disagree.  (One file since Oct 7, 2026: until then these
   values were copied into three stylesheets and had begun to drift.) */

:root{
  /* COLOR — paper and ink. Words are --ink, --ink-2 or --soft; --faint is for marks only. */
  --paper:#f4f2ec; --paper-2:#efece4; --card:#fbfaf6;
  --ink:#1a1815; --ink-2:#322e28; --soft:#6f6a60; --faint:#9a9488;
  --undeveloped:#dbd5c7;                       /* text before it develops to ink */
  --line:rgba(26,22,16,.16); --line-2:rgba(26,22,16,.09);

  /* TYPE — three faces, three jobs. The reading face is Timeless Serif (Oct 13, 2026; Source Serif 4
     until then), in its Text style, at 95% of the size Source Serif 4 had: the faces below set it
     that much smaller (size-adjust), so every size on the site stays as written. The roles and the
     settings are in the CE vault's Type.md; DESIGN.md §8 says how this site carries them out. */
  --serif:"Timeless Serif",Georgia,serif;     /* everything you read */
  --serif-style:"STYL" 100;                   /* the Text style (0 is Display); set once, on html, and every element inherits it */
  --serif-alts:"ss11" 1,"ss15" 1;             /* the alternate ampersand and the vertical M (Sha, Oct 9, 2026) */
  --serif-alts-italic:"ss11" 1,"ss15" 1,"ss09" 1,"ss04" 1;   /* the italic numbers the same two ss09 and ss04, which in the upright are an r and a c */
  --w-read:450;                               /* reading weight */
  --w-head:500;                               /* headings: page, section and item titles, names */
  --label:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;   /* tags and controls only; the one mono, everywhere (Sha, Oct 8, 2026) */

  /* TIME — one clock (DESIGN.md, Motion). The room never moves faster than --t-answer. */
  --t-pause:.15s;      /* the wait before the room answers a hover: a hover has to be meant  */
  --t-answer:.6s;      /* the room answering you: hover, press, focus, a box ticked, a control settling */
  --t-exhale:1.2s;     /* the room speaking: something opening, arriving, or closing          */
  --t-develop:2.4s;    /* ink developing on the page                                          */
  --beat:1.2s;         /* the pause between two things the room says (= --t-exhale)           */
  --t-stagger:90ms;    /* between items that arrive one after another (a playlist's tracks)   */

  /* CURVES — two, and only two */
  --ease-breath:cubic-bezier(.22,.55,.3,1);   /* whatever arrives, answers or opens: a long settle */
  --ease-exhale:cubic-bezier(.65,0,.35,1);    /* whatever leaves or closes: an even release        */

  /* the two answers, ready to drop into a transition: `transition:color var(--answer-hover);` */
  --answer:var(--t-answer) var(--ease-breath);                       /* to something you did   */
  --answer-hover:var(--t-answer) var(--ease-breath) var(--t-pause);  /* to where your cursor is */

  /* SPACE — the tiers of a page: the menu, the wordmark, the page */
  --s-tier:clamp(1.6rem,5vw,2.4rem);
}

/* ---------- Timeless Serif, served from /fonts/timeless/ (the Project's font kit, LICENSE.pdf beside it) ----------
   Upright and italic, each in a Latin piece and a Latin Extended piece that loads only when a page
   shows one of its letters. font-display:block with the Latin upright preloaded on every page, so
   the words arrive once, already in Timeless, and never swap faces in front of a reader. */
@font-face{font-family:"Timeless Serif"; src:url("/fonts/timeless/timeless-serif-latin.woff2") format("woff2");
  font-weight:200 700; font-style:normal; font-display:block; size-adjust:95%;
  unicode-range:U+0020-007E, U+00A0-00A3, U+00A5-00AB, U+00AD-00B0, U+00B4, U+00B6-00B8, U+00BA-00FF, U+02C6, U+02D8-02DC, U+0300-0301, U+0303, U+0323, U+0326, U+1ECA-1ECD, U+1EE4-1EE5, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2153-215E, U+2190-2199, U+2202, U+2211-2212, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25A0-25A1, U+25AA, U+25B2-25B3, U+25B6-25B7, U+25BA-25BD, U+25C0-25C1, U+25C4-25C5, U+25CA-25CB, U+25CF, U+2713;}
@font-face{font-family:"Timeless Serif"; src:url("/fonts/timeless/timeless-serif-latin-ext.woff2") format("woff2");
  font-weight:200 700; font-style:normal; font-display:block; size-adjust:95%;
  unicode-range:U+0100-0110, U+0112-0137, U+0139-0148, U+014A-017E, U+018F, U+01FC-01FD, U+0218-021B, U+0232-0233, U+0237, U+02C7, U+02DD, U+1E80-1E85, U+1EF2-1EF3, U+20B9, U+20BD, U+20BF;}
@font-face{font-family:"Timeless Serif"; src:url("/fonts/timeless/timeless-serif-italic-latin.woff2") format("woff2");
  font-weight:300 700; font-style:italic; font-display:block; size-adjust:95%;
  unicode-range:U+0020-007E, U+00A0-00A3, U+00A5-00AB, U+00AD-00B0, U+00B4, U+00B6-00B8, U+00BA-00FF, U+02C6, U+02D8-02DC, U+0300-0301, U+0303, U+0323, U+0326, U+1ECA-1ECD, U+1EE4-1EE5, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2153-215E, U+2190-2199, U+2202, U+2211-2212, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25A0-25A1, U+25AA, U+25B2-25B3, U+25B6-25B7, U+25BA-25BD, U+25C0-25C1, U+25C4-25C5, U+25CA-25CB, U+25CF, U+2713;}
@font-face{font-family:"Timeless Serif"; src:url("/fonts/timeless/timeless-serif-italic-latin-ext.woff2") format("woff2");
  font-weight:300 700; font-style:italic; font-display:block; size-adjust:95%;
  unicode-range:U+0100-0110, U+0112-0137, U+0139-0148, U+014A-017E, U+018F, U+01FC-01FD, U+0218-021B, U+0232-0233, U+0237, U+02C7, U+02DD, U+1E80-1E85, U+1EF2-1EF3, U+20B9, U+20BD, U+20BF;}
/* (the font's one emoji, U+1F9B6, is left out of the ranges so an emoji always comes from the device) */

/* ---------- IBM Plex Mono, served from /fonts/ibm-plex-mono/ (SIL Open Font License, OFL.txt beside it) ----------
   Since Oct 13, 2026 (it came from Google Fonts until then). The cuts the site uses: 300 (the home page's box, the
   liner notes), 400, 500, 700 and italic 400, each in a Latin and a Latin Extended piece; a page downloads only the
   ones it shows (each Latin Extended rule comes first, as Google wrote them: where their ranges overlap, the face declared
   last is tried first, and œ ı and the combining marks live only in the Latin piece). font-display:block with the Latin 400
   preloaded, like Timeless, so labels never swap faces. */
@font-face{font-family:"IBM Plex Mono"; src:url("/fonts/ibm-plex-mono/IBMPlexMono-300-latin-ext.woff2") format("woff2");
  font-weight:300; font-style:normal; font-display:block; unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"IBM Plex Mono"; src:url("/fonts/ibm-plex-mono/IBMPlexMono-300-latin.woff2") format("woff2");
  font-weight:300; font-style:normal; font-display:block; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"IBM Plex Mono"; src:url("/fonts/ibm-plex-mono/IBMPlexMono-400-latin-ext.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:block; unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"IBM Plex Mono"; src:url("/fonts/ibm-plex-mono/IBMPlexMono-400-latin.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:block; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"IBM Plex Mono"; src:url("/fonts/ibm-plex-mono/IBMPlexMono-500-latin-ext.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:block; unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"IBM Plex Mono"; src:url("/fonts/ibm-plex-mono/IBMPlexMono-500-latin.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:block; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"IBM Plex Mono"; src:url("/fonts/ibm-plex-mono/IBMPlexMono-700-latin-ext.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:block; unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"IBM Plex Mono"; src:url("/fonts/ibm-plex-mono/IBMPlexMono-700-latin.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:block; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"IBM Plex Mono"; src:url("/fonts/ibm-plex-mono/IBMPlexMono-400i-latin-ext.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:block; unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"IBM Plex Mono"; src:url("/fonts/ibm-plex-mono/IBMPlexMono-400i-latin.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:block; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* the style and the alternates reach every element: form controls don't inherit them on their own,
   and an italic switches to the italic's numbering. IBM Plex Mono has no stylistic sets, so the
   labels are untouched. A rule that sets font-style:italic sets --serif-alts-italic with it. */
html{font-variation-settings:var(--serif-style); font-feature-settings:var(--serif-alts);}
button,input,select,textarea{font-variation-settings:inherit; font-feature-settings:inherit;}
em,i,cite,dfn,var,address{font-feature-settings:var(--serif-alts-italic);}

/* reduced motion: everything still works, at once (scripts read CE_MOTION.reduced) */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:0s !important; transition-delay:0s !important;
    animation-duration:0s !important; animation-delay:0s !important; scroll-behavior:auto !important;}
}