/* =========================================================================
   Two Slow People — Colors & Type tokens (FINAL)
   =========================================================================
   Palette: 03 · Maple Stream
   Accent set: Autumn polychrome
   Header surface: --paper

   A quiet, considered system. Editorial sans + the dot-pair motif.
   "Slow" demands restraint — saturated colors are moments, not surfaces.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* =====================================================================
     COLOR — Maple Stream
     ===================================================================== */

  /* ---------- Surfaces (the stone ladder) ---------- */
  --white:        #F2F1E6;        /* brightest — used sparingly       */
  --paper:        #E6E5DA;        /* CARDS · HEADER · quote bg        */
  --washi:        #DCDBD0;        /* PAGE bg — primary stone          */
  --washi-2:      #CFCEC1;        /* inset / deeper card              */
  --washi-3:      #B8B7AA;        /* deepest stone accent             */

  /* ---------- Ink scale ---------- */
  --ink:          #1B1916;        /* sumi — primary text, dark sections */
  --ink-2:        #28251F;        /* secondary text                   */
  --ink-3:        #4F4C45;        /* tertiary / metadata              */
  --ink-4:        #80807A;        /* muted / placeholder              */
  --sumi:         var(--ink);

  /* ---------- Accents — Autumn polychrome ----------
     Five hues drawn from autumn-garden references. All sit at the same
     desaturated chroma — a page can hold three of them and still read quiet.
     Order: warm → cool. */
  --ginkgo:       #C9A03A;        /* ginkgo yellow — sun, warmth      */
  --ginkgo-soft:  #ECDDB4;
  --momiji:       #B5612C;        /* maple rust — THE primary accent  */
  --momiji-soft:  #ECDBC5;
  --momiji-hover: #934C20;
  --kaki:         #A04534;        /* persimmon — secondary warm       */
  --kaki-soft:    #E8C9C0;
  --moss:         #5C7048;        /* moss — leaf, stem, success-feel  */
  --moss-soft:    #C5CDB6;
  --sora:         #6E8390;        /* wet-stone blue — sky, water      */
  --sora-soft:    #C8D2D6;

  /* ---------- Hairlines ---------- */
  --rule:         rgba(14,14,14,0.12);
  --rule-strong:  rgba(14,14,14,0.22);
  --rule-inverse: rgba(220,219,208,0.14);

  /* ---------- Semantic states ---------- */
  --link:         var(--momiji);
  --link-hover:   var(--momiji-hover);
  --success:      var(--moss);
  --warning:      var(--ginkgo);
  --danger:       var(--kaki);

  /* =====================================================================
     SEMANTIC ROLE TOKENS — use these in components, not raw hues
     ===================================================================== */

  /* Foreground */
  --fg-1:           var(--ink);
  --fg-2:           var(--ink-2);
  --fg-3:           var(--ink-3);
  --fg-4:           var(--ink-4);
  --fg-inverse:     var(--washi);
  --fg-accent:      var(--momiji);

  /* Background — five named surface roles */
  --bg-page:        var(--washi);    /* primary page                  */
  --bg-card:        var(--paper);    /* cards · article surfaces      */
  --bg-header:      var(--paper);    /* nav header — same as card     */
  --bg-inset:       var(--washi-2);  /* deeper inset                  */
  --bg-inverse:     var(--ink);      /* dark sections, footer         */

  /* Tinted backgrounds (for soft callouts, tags, etc.) */
  --bg-momiji-soft: var(--momiji-soft);
  --bg-ginkgo-soft: var(--ginkgo-soft);
  --bg-kaki-soft:   var(--kaki-soft);
  --bg-moss-soft:   var(--moss-soft);
  --bg-sora-soft:   var(--sora-soft);

  /* =====================================================================
     TYPOGRAPHY
     Plus Jakarta Sans is THE brand face. Voice differentiates by weight
     and size, not by family. JetBrains Mono for the rare metadata moment.
     ===================================================================== */
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Type scale — generous, slow */
  --t-display:    clamp(56px, 7.5vw, 120px);
  --t-h1:         clamp(44px, 5vw, 76px);
  --t-h2:         clamp(34px, 3.6vw, 52px);
  --t-h3:         30px;
  --t-h4:         22px;
  --t-h5:         18px;
  --t-body-lg:    19px;
  --t-body:       16px;
  --t-body-sm:    14px;
  --t-caption:    13px;
  --t-eyebrow:    12px;

  --w-light:      300;
  --w-regular:    400;
  --w-medium:     500;
  --w-semibold:   600;
  --w-bold:       700;
  --w-black:      900;

  --lh-tight:     1.0;
  --lh-snug:      1.15;
  --lh-normal:    1.4;
  --lh-relaxed:   1.65;
  --lh-loose:     1.85;

  --ls-tightest:  -0.03em;
  --ls-tight:     -0.015em;
  --ls-normal:    0;
  --ls-wide:      0.04em;
  --ls-eyebrow:   0.14em;

  /* =====================================================================
     SPACING (4pt base, rhythm leans larger)
     ===================================================================== */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --s-11: 192px;

  /* =====================================================================
     RADII — system leans flat. Radii present but small.
     ===================================================================== */
  --r-xs:    2px;
  --r-sm:    4px;
  --r-md:    6px;
  --r-lg:    10px;
  --r-xl:    16px;
  --r-pill:  999px;

  /* =====================================================================
     SHADOWS — quiet. No glow. No drama.
     ===================================================================== */
  --shadow-xs:    0 1px 2px rgba(14,14,14,0.04);
  --shadow-sm:    0 2px 6px rgba(14,14,14,0.05);
  --shadow-md:    0 8px 24px rgba(14,14,14,0.06);
  --shadow-lg:    0 24px 48px rgba(14,14,14,0.08);
  --shadow-inset: inset 0 0 0 1px rgba(14,14,14,0.06);

  /* =====================================================================
     MOTION — slow by name, slow by default.
     ===================================================================== */
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-slow:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    180ms;
  --dur:         360ms;
  --dur-slow:    600ms;
  --dur-slower:  900ms;

  /* =====================================================================
     LAYOUT
     ===================================================================== */
  --container:       1160px;
  --container-prose: 680px;
  --gutter:          56px;
  --gutter-mobile:   24px;

  /* =====================================================================
     BACKWARD-COMPAT ALIASES
     Existing components reference --bone / --clay / --beni / --matcha /
     --sage / --kuri. Map them to the final tokens so nothing breaks.
     New code should NOT use these.
     ===================================================================== */
  --bone:           var(--washi);
  --bone-2:         var(--washi-2);
  --bone-3:         var(--washi-3);

  --beni:           var(--momiji);
  --beni-hover:     var(--momiji-hover);
  --beni-soft:      var(--momiji-soft);

  --clay:           var(--momiji);
  --clay-hover:     var(--momiji-hover);
  --clay-soft:      var(--momiji-soft);

  --matcha:         var(--moss);
  --matcha-soft:    var(--moss-soft);
  --sage:           var(--moss);
  --sage-soft:      var(--moss-soft);

  --kuri:           #6B5230;
  --kuri-soft:      #D6C9B0;

  --bg-1:           var(--bg-page);
  --bg-2:           var(--bg-card);
  --bg-3:           var(--bg-inset);
  --bg-beni-soft:   var(--bg-momiji-soft);
  --bg-clay-soft:   var(--bg-momiji-soft);
  --bg-matcha-soft: var(--bg-moss-soft);
  --bg-sage-soft:   var(--bg-moss-soft);
}

/* =========================================================================
   Element styles
   ========================================================================= */

html { background: var(--bg-page); color: var(--fg-1); }

body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01';
}

.display, h1.display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: var(--w-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tightest);
  color: var(--fg-1);
  text-wrap: balance;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: var(--w-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

h4, .h4 {
  font-family: var(--font-body);
  font-size: var(--t-h4);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

h5, .h5 {
  font-family: var(--font-body);
  font-size: var(--t-h5);
  font-weight: var(--w-medium);
  line-height: var(--lh-normal);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}

.lead {
  font-size: var(--t-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  font-weight: var(--w-regular);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

.caption {
  font-size: var(--t-caption);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

/* Plus Jakarta has no italic discipline; we emphasize via weight bump */
.italic, em.display, em {
  font-style: normal;
  font-weight: var(--w-semibold);
  color: var(--fg-1);
}

code, .code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--washi-2);
  padding: 0.1em 0.4em;
  border-radius: var(--r-xs);
  color: var(--fg-1);
}

/* =========================================================================
   Surface utilities — dotted notebook page is a first-class surface.
   ========================================================================= */

.surface-dotted {
  background-color: var(--washi);
  background-image: radial-gradient(circle, rgba(14,14,14,0.16) 1px, transparent 1.2px);
  background-size: 24px 24px;
  background-position: 12px 12px;
}

.surface-dotted-sm {
  background-image: radial-gradient(circle, rgba(14,14,14,0.10) 0.9px, transparent 1.1px);
  background-size: 16px 16px;
  background-position: 8px 8px;
}

.surface-grid {
  background-color: var(--washi);
  background-image:
    linear-gradient(rgba(14,14,14,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,14,14,0.06) 1px, transparent 1px);
  background-size: 24px 24px;
}

.surface-dotted-dark {
  background-color: var(--ink);
  background-image: radial-gradient(circle, rgba(244,239,224,0.18) 1px, transparent 1.2px);
  background-size: 24px 24px;
  background-position: 12px 12px;
  color: var(--washi);
}

a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--link-hover); }

/* The dot-pair motif — reusable inline ornament from the logo */
.dots, .dotpair {
  display: inline-flex;
  align-items: center;
  gap: 0.18em;
  vertical-align: middle;
}
.dots::before,
.dots::after {
  content: '';
  width: 0.34em;
  height: 0.34em;
  background: currentColor;
  border-radius: 50%;
}
.dots::before { transform: translateY(-0.45em); }
.dots::after  { transform: translateY( 0.20em); }

.bignum {
  font-family: var(--font-display);
  font-size: clamp(72px, 9vw, 144px);
  font-weight: var(--w-semibold);
  line-height: 1;
  letter-spacing: var(--ls-tightest);
  color: var(--fg-1);
}

.arrow-link {
  font-family: var(--font-body);
  font-weight: var(--w-medium);
  color: var(--fg-1);
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  border-bottom: none;
}
.arrow-link::after {
  content: '→';
  display: inline-block;
  transition: transform var(--dur) var(--ease-slow);
}
.arrow-link:hover::after { transform: translateX(4px); }