/* =============================================================
   PALIMPSEST — Colors & Type foundations
   A palimpsest is a manuscript page scraped and rewritten, the
   ghosts of older writing showing through. The system is built
   around warm parchment and ink — layered, atmospheric, nostalgic.
   ============================================================= */

/* Display face: Tsukimi Rounded (Google Fonts) — loaded via <link> in each HTML head.
   Body face: Inter (Google Fonts) — loaded via the same <link>. */

/* Disables mobile Safari/Chrome's automatic text-size "boosting" — a
   heuristic that inflates font-size to make text more readable inside
   narrow, scrollable columns, based on the viewport width at the moment it
   runs. Every page here is exactly that shape (an overflow-y:auto column
   — .ps-detail-scroll, .pg, etc.), so rotating the device re-triggers the
   heuristic against the new width and can leave text visibly larger than
   its actual CSS font-size; rotating back doesn't reliably reset it, since
   the boost is cached per element rather than recomputed from scratch.
   100% pins every element to its authored font-size regardless of
   viewport/orientation, in every page's shared CSS entry point (this file
   is <link>ed on every page, before experience.css/pages.css). */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:root {
  /* ---------------------------------------------------------
     CORE PALETTE  (the five brand colors)
     --------------------------------------------------------- */
  --ink:    #2E2C28;   /* warm near-black — primary text, dark surfaces */
  --stone:  #8B8578;   /* muted taupe — secondary text, captions      */
  --sand:   #E8DEC8;   /* warm parchment — fills, cards, dividers      */
  --paper:  #FAF8F4;   /* paper white — page background                */

  /* ---------------------------------------------------------
     DERIVED TINTS & SHADES  (oklch-harmonised from the core 5)
     --------------------------------------------------------- */
  --ink-900: #1C1B18;  /* deepest — full-bleed dark backgrounds        */
  --ink-700: #2E2C28;  /* = --ink                                      */
  --ink-500: #4A463F;  /* softened ink — body on paper when ink is too hard */

  --stone-600: #6E685C; /* darker taupe — readable secondary on paper  */
  --stone-400: #8B8578; /* = --stone                                   */
  --stone-200: #B7B0A2; /* hairline borders on dark, disabled text     */

  --sand-300: #DED2B6;  /* parchment border / divider                  */
  --sand-200: #E8DEC8;  /* = --sand                                    */
  --sand-100: #F1EADA;  /* faint card fill on paper                    */

  --paper-50: #FAF8F4;  /* = --paper                                   */
  --paper-0:  #FFFFFF;  /* pure white — rare, for lifted surfaces       */

  /* ---------------------------------------------------------
     SEMANTIC SURFACES
     --------------------------------------------------------- */
  --bg:            var(--paper-50);   /* default page background       */
  --bg-raised:     var(--sand-100);   /* cards, panels on paper        */
  --bg-inset:      var(--sand-200);   /* wells, quiet fills            */
  --bg-inverse:    var(--ink-900);    /* dark immersive sections       */

  --fg:            var(--ink-700);    /* primary text on paper         */
  --fg-muted:      var(--stone-600);  /* secondary text                */
  --fg-subtle:     var(--stone-400);  /* captions, metadata            */
  --fg-on-dark:    var(--sand-200);   /* primary text on ink           */
  --fg-on-dark-muted: var(--stone-400);   /* secondary text on ink     */

  --border:        var(--sand-300);   /* default hairline on paper     */
  --border-strong: var(--stone-200);  /* emphasised divider            */

  /* ---------------------------------------------------------
     TYPE FAMILIES
     --------------------------------------------------------- */
  /* --font-body was 'Segoe UI' — a Windows-only system font with no
     fallback chain, so it silently dropped to the browser's own default on
     every non-Windows device (all of mobile included). Replaced with
     Inter, a proper web font (loaded via <link> — see the family=Inter
     param on the Google Fonts URL in each HTML head, alongside Tsukimi
     Rounded — at weights 300/400/500/600, italic and regular, matching
     --weight-regular/-medium/-semibold and the italic briefs/form-error
     text), so it renders identically everywhere instead of depending on
     what's already installed on the device. --font-display keeps its own
     fallback for the same reason Tsukimi Rounded's <link> can still fail
     to load (slow network, blocked request). */
  --font-display: 'Tsukimi Rounded', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;

  /* ---------------------------------------------------------
     EDITORIAL SCALE — the canonical Palimpsest sizes (per the
     Figma design system). Restrained & literary: titles top out
     at 28px. Tsukimi Rounded sets titles; Inter sets body.
     Prefer these for product/editorial surfaces; the larger
     --text-* values above are reserved for campaign/marketing.
     --------------------------------------------------------- */
  --title-lg: 28px;
  --title-md: 24px;
  --title-base: 20px;
  --body-lg: 18px;    /* 1.25rem */
  --body-md: 16px;    /* 1rem    */
  --body-base: 14px;  /* 0.875rem */

  /* Weights — Tsukimi Rounded is loaded at 300/400 (see the <link> in each
     HTML head); most display-face usage sits at 300. Body uses Inter Light
     for a thinner reading texture. */
  --weight-regular: 300;
  --weight-medium: 500;
  --weight-semibold: 600;

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  --tracking-display: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-eyebrow: 0.22em;  /* generous letterspacing for eyebrows  */

  /* ---------------------------------------------------------
     SPACING  (4px base unit)
     --------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---------------------------------------------------------
     RADII  — soft, never pill-like; editorial restraint
     --------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-full: 999px;

  /* ---------------------------------------------------------
     SHADOWS  — warm-tinted, soft, low. Light feels like dusk.
     --------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(46,44,40,0.06);
  --shadow-sm: 0 2px 8px rgba(46,44,40,0.07);
  --shadow-md: 0 8px 24px rgba(46,44,40,0.10);
  --shadow-lg: 0 20px 48px rgba(46,44,40,0.14);

  /* ---------------------------------------------------------
     MOTION — slow, dreamlike. Everything fades & drifts.
     --------------------------------------------------------- */
  --ease-drift: cubic-bezier(0.22, 0.61, 0.36, 1);  /* @kind other */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);        /* @kind other */
  --dur-fast: 180ms;    /* @kind other */
  --dur-base: 320ms;    /* @kind other */
  --dur-slow: 600ms;    /* @kind other */
  /* atmospheric reveals */
  --dur-veil: 1100ms;   /* @kind other */

  --container: 1200px;
  --container-narrow: 760px;
}

/* =============================================================
   SEMANTIC ELEMENT STYLES
   Apply with the .ps- prefix or copy into your own selectors.
   ============================================================= */

.ps-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--stone-600);
}

.ps-display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 100;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg);
}

.ps-h1 { font-family: var(--font-display); font-size: var(--text-h1); font-weight: 300; line-height: var(--leading-tight); letter-spacing: var(--tracking-display); color: var(--fg); }
.ps-h2 { font-family: var(--font-display); font-size: var(--text-h2); font-weight: 300; line-height: var(--leading-snug); color: var(--fg); }
.ps-h3 { font-family: var(--font-display); font-size: var(--text-h3); font-weight: 300; line-height: var(--leading-snug); color: var(--fg); }
.ps-h4 { font-family: var(--font-body); font-size: var(--text-h4); font-weight: var(--weight-semibold); line-height: var(--leading-snug); color: var(--fg); }

.ps-lead {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--fg-muted);
}

.ps-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--fg);
}

.ps-small {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
}

.ps-caption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--fg-subtle);
}

.ps-quote {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-style: normal;
  line-height: var(--leading-snug);
  color: var(--fg);
}

.ps-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0;
  color: var(--fg-muted);
}