/* =========================================================================
   nōmo — Colors & Type tokens
   Monochrome only. Ink + paper. No accent color, ever.
   ========================================================================= */

/* Web-safe substitutes:
   - Söhne / Acumin Pro  → Inter (self-hosted woff2) — SUBSTITUTION, flag to user
   - System body sans    → Inter
   - Handwritten         → Caveat (self-hosted woff2)
   Body always set against monochrome; never use color for emphasis.
*/
/* Self-hosted fonts — woff2 subsets downloaded from Google Fonts (gstatic),
   served locally from /assets/fonts/ to avoid render-blocking + RU CDN issues.
   Inter & Caveat are served as variable-axis files per subset, so one file
   covers all the weights below; the weight is selected from the binary.
   Subsets: latin, latin-ext, cyrillic, cyrillic-ext. font-display: swap. */

/* ---------- Inter ---------- */
@font-face { font-family:'Inter'; font-style:normal; font-weight:300 700; font-display:swap; src:url('/assets/fonts/inter-cyrillic-ext.woff2') format('woff2'); unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:300 700; font-display:swap; src:url('/assets/fonts/inter-cyrillic.woff2') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:300 700; font-display:swap; src:url('/assets/fonts/inter-latin-ext.woff2') format('woff2'); 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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:300 700; font-display:swap; src:url('/assets/fonts/inter-latin.woff2') format('woff2'); 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; }

/* ---------- Caveat ---------- */
@font-face { font-family:'Caveat'; font-style:normal; font-weight:400 600; font-display:swap; src:url('/assets/fonts/caveat-cyrillic-ext.woff2') format('woff2'); unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family:'Caveat'; font-style:normal; font-weight:400 600; font-display:swap; src:url('/assets/fonts/caveat-cyrillic.woff2') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Caveat'; font-style:normal; font-weight:400 600; font-display:swap; src:url('/assets/fonts/caveat-latin-ext.woff2') format('woff2'); 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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Caveat'; font-style:normal; font-weight:400 600; font-display:swap; src:url('/assets/fonts/caveat-latin.woff2') format('woff2'); 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; }
:root {
  /* ---------- Color (the only colors that exist) ---------- */
  --ink:       #0A0A0A;   /* primary text on paper; primary background on dark */
  --paper:     #EEE8DC;   /* primary background on light; primary text on ink */
  --card-dark: #1A1714;   /* warm-black surface, one notch above ink */
  --mute:      #6B6457;   /* warm-grey, captions / meta / placeholders — AA contrast on paper */
  --warm:      #C9B89B;   /* dim cream, dividers on ink, sub-captions on ink */
  --warm-ink:  #8A7550;   /* warm accent on PAPER (light) bg — AA-contrast 3.6:1; NOT for dark bg */

  /* Semantic — light surfaces */
  --bg:         var(--paper);
  --fg:         var(--ink);
  --fg-mute:    var(--mute);
  --rule:       rgba(10, 10, 10, 0.14);

  /* Semantic — dark surfaces */
  --bg-dark:        var(--ink);
  --fg-on-dark:     var(--paper);
  --fg-mute-on-dark: var(--warm);
  --rule-on-dark:   rgba(238, 232, 220, 0.16);

  /* ---------- Type stacks ---------- */
  --font-display: "Inter", "Söhne", "Acumin Pro", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", "Söhne", "Helvetica Neue", Arial, sans-serif;
  --font-hand:    "Caveat", "Bradley Hand", "Apple Chancery", cursive;

  /* ---------- Scale ---------- */
  --fs-mega:    clamp(80px, 11vw, 168px);   /* hero/manifest one-liners */
  --fs-display: clamp(56px, 7vw,  104px);   /* section openers, big quotes */
  --fs-h1:      clamp(40px, 4.4vw, 64px);
  --fs-h2:      clamp(28px, 2.6vw, 40px);
  --fs-h3:      clamp(20px, 1.4vw, 24px);
  --fs-body:    17px;
  --fs-small:   14px;
  --fs-meta:    12px;   /* nōmo uses ALL-CAPS sparingly — only meta lines like "01 / PATRIARSHIE PRUDY" stay tracked */
  --fs-hand:    clamp(28px, 3.2vw, 48px);

  --lh-tight:   1.04;
  --lh-snug:    1.18;
  --lh-body:    1.5;
  --lh-loose:   1.6;

  --ls-tight:   -0.035em;  /* headlines */
  --ls-snug:    -0.015em;  /* sub-headlines */
  --ls-normal:  0;
  --ls-wide:    0.14em;    /* meta lines, captions */

  /* ---------- Layout ---------- */
  --gutter:      clamp(20px, 4vw, 64px);
  --measure:     68ch;
  --measure-narrow: 36ch;

  /* nōmo has almost no rounded geometry. radii live only on the contact pill. */
  --radius-pill: 999px;

  /* No shadow system. Surfaces sit flat; depth is found in photography, not UI. */

  /* Motion — almost none. Used only for fades and hover-opacity. */
  --ease:       cubic-bezier(.22, .61, .36, 1);
  --dur-fast:   140ms;
  --dur:        260ms;
  --dur-slow:   600ms;
}

/* =========================================================================
   Base elements (semantic map)
   ========================================================================= */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-weight: 500;
  margin: 0;
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-weight: 500;
  margin: 0;
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  font-weight: 500;
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  font-weight: 500;
  margin: 0;
}
p, .p {
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  max-width: var(--measure);
  text-wrap: pretty;
  margin: 0 0 1.1em;
}
small, .small {
  font-size: var(--fs-small);
  color: var(--fg-mute);
  line-height: var(--lh-body);
}
.meta {
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-mute);
  font-weight: 500;
}
.hand {
  font-family: var(--font-hand);
  font-size: var(--fs-hand);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: 0;
}
.mega {
  font-family: var(--font-display);
  font-size: var(--fs-mega);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-weight: 500;
}
a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; transition: opacity var(--dur) var(--ease); }
a:hover { opacity: 0.6; }
hr { border: 0; height: 1px; background: var(--rule); margin: 4rem 0; }

/* On-ink helper — swap palette for dark sections */
.on-ink {
  background: var(--bg-dark);
  color: var(--fg-on-dark);
}
.on-ink .meta, .on-ink small, .on-ink .small { color: var(--fg-mute-on-dark); }
.on-ink hr { background: var(--rule-on-dark); }

/* =========================================================================
   Wordmark — render via HTML when Inter is loaded, not via the SVG.
   The SVG mark.svg is used standalone (favicon, big mark, billboards).
   ========================================================================= */
.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.04em;
  font-size: 1em;
  display: inline-flex;
  line-height: 1;
  color: currentColor;
}
.wordmark > .wm-o {
  position: relative;
  display: inline-block;
}
.wordmark > .wm-o::before {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  top: -0.16em;
  height: 0.135em;
  background: currentColor;
}

/* Pill button — the ONE radius the brand uses, on the contact CTA. */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 1em 2.2em;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.005em;
  border-radius: var(--radius-pill);
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.btn-pill:hover { background: currentColor; color: var(--bg-dark); }
.on-ink .btn-pill:hover { color: var(--bg); }
.btn-pill:active { transform: none; opacity: 0.85; }