/* ==========================================================================
   HOUSE OF PRACHAR: design tokens (second edition, 2026-11-01)
   Primitive -> semantic -> role. Every colour, size, space and motion value
   on the site comes from here. Contrast ratios are WCAG 2.x, measured.
   ========================================================================== */

:root {
  /* ---- PRIMITIVES: colour ---------------------------------------------- */
  --paper:      #E6E6E1;  /* cool newsprint grey. The page. Not cream */
  --paper-deep: #D9D9D2;  /* the same stock, one shade down. Bands, hover */
  --sheet:      #F4F4F0;  /* the lightest stock. Text on ink, cards that lift */
  --ink:        #092A33;  /* logo teal-ink. Text, rules, dark bands. 12.1:1 on paper */
  --ink-soft:   #44575C;  /* secondary text. 5.9:1 on paper */
  --press:      #C8461B;  /* press orange. LARGE type (24px+), pen notes, rules. 3.9:1 on paper */
  --fire:       #EA8225;  /* card orange. FILLS ONLY: shapes behind photos, buttons with ink text (5.6:1) */

  /* ---- SEMANTIC ---------------------------------------------------------- */
  --bg:           var(--paper);
  --bg-band:      var(--paper-deep);
  --bg-dark:      var(--ink);
  --text:         var(--ink);
  --text-soft:    var(--ink-soft);
  --text-on-dark: var(--sheet);
  --accent-type:  var(--press);
  --accent-fill:  var(--fire);
  --rule:         rgb(9 42 51 / .22);   /* hairlines between content */
  --gridline:     rgb(9 42 51 / .07);   /* the visible 12-column layout grid */
  --rule-on-dark: rgb(244 244 240 / .22);  /* hairlines on the ink band */
  --veil:         rgb(230 230 225 / .92);  /* paper behind the sticky nav */
  --shadow-lift:  0 30px 60px -30px rgb(0 0 0 / .6);  /* the one shadow: a card lifted off the desk */
  --focus:        var(--press);

  /* ---- TYPE: families ---------------------------------------------------- */
  --f-serif: "EB Garamond", Garamond, Georgia, serif;                  /* headlines, italics, reading text */
  --f-sans:  "Urbanist", system-ui, sans-serif;                         /* interface, labels, buttons */
  --f-pen:   "Nanum Pen Script", "Segoe Print", cursive;               /* proof marks, margin notes */

  /* ---- TYPE: fluid scale (375px -> 1440px) ------------------------------- */
  --fs-hero:  clamp(2.9rem, .4rem + 11.6vw, 12rem);    /* EB Garamond 700 caps, the shout */
  --fs-h1:    clamp(2.75rem, 1.3rem + 6.2vw, 7rem);
  --fs-h2:    clamp(2.1rem, 1.15rem + 4vw, 4.75rem);
  --fs-h3:    clamp(1.5rem, 1.15rem + 1.4vw, 2.25rem);
  --fs-big:   clamp(1.75rem, 1rem + 3.2vw, 4rem);      /* manifesto paragraph */
  --fs-lead:  clamp(1.25rem, 1.05rem + .8vw, 1.75rem);
  --fs-body:  1.1875rem;                               /* 19px EB Garamond */
  --fs-ui:    1rem;                                    /* Urbanist interface text */
  --fs-small: .875rem;
  --fs-label: .75rem;                                  /* Urbanist 500 spaced caps */
  --fs-pen:   clamp(1.6rem, 1.3rem + 1vw, 2.4rem);
  --lh-hero: .84; --lh-head: 1.02; --lh-body: 1.55;
  --track-hero: -.045em; --track-head: -.03em; --track-label: .14em;

  /* ---- SPACE: 8pt ---------------------------------------------------------- */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem;   --s-7: 3rem;  --s-8: 4rem;   --s-9: 6rem; --s-10: 9rem;
  --section-y: clamp(5rem, 3rem + 7vw, 10rem);

  /* ---- GRID ---------------------------------------------------------------- */
  --maxw: 1440px;
  --margin: clamp(1.25rem, .5rem + 3vw, 3rem);
  --gutter: clamp(1rem, .5rem + 1.5vw, 1.75rem);
  /* breakpoints: 640 / 900 / 1200 */

  /* ---- SHAPE: one rule. Interactive = pill. Content = square. Photos may sit in an arch. */
  --r-pill: 999px; --r-none: 0; --r-arch: 50% 50% 0 0 / 38% 38% 0 0;

  /* ---- MOTION -------------------------------------------------------------- */
  --d-fast: .18s; --d-base: .45s; --d-slow: .9s;
  --ease-out:   cubic-bezier(.22, 1, .36, 1);
  --ease-press: cubic-bezier(.7, 0, .2, 1);

  /* ---- LAYERS -------------------------------------------------------------- */
  --z-content: 1; --z-nav: 50; --z-progress: 70; --z-menu: 80; --z-cursor: 90; --z-loader: 100;
}

/* ==========================================================================
   BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 var(--fs-body)/var(--lh-body) var(--f-serif);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
::selection { background: var(--fire); color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }

/* ==========================================================================
   TYPE ROLES
   ========================================================================== */
/* The shout: EB Garamond Bold in capitals, set tight. One per page. */
.t-hero  { font: 700 var(--fs-hero)/var(--lh-hero) var(--f-serif);
           letter-spacing: var(--track-hero); text-transform: uppercase; }
/* The answer: EB Garamond Italic, lowercase. Always follows a shout. */
.t-whisper { font: italic 400 var(--fs-hero)/var(--lh-head) var(--f-serif);
             letter-spacing: var(--track-hero); padding-bottom: .06em; }
.t-h1    { font: 400 var(--fs-h1)/var(--lh-head) var(--f-serif); letter-spacing: var(--track-head); }
.t-h2    { font: 400 var(--fs-h2)/var(--lh-head) var(--f-serif); letter-spacing: var(--track-head); }
.t-h3    { font: 500 var(--fs-h3)/1.15 var(--f-serif); letter-spacing: -.015em; }
/* Section headlines mix the two voices: plain Urbanist words, one EB Garamond italic word that carries the meaning. */
.t-mix   { font: 500 var(--fs-h2)/1.04 var(--f-sans); letter-spacing: -.035em; }
.t-mix em{ font: italic 400 1.08em/1 var(--f-serif); letter-spacing: -.03em; padding-right: .04em; }
.t-big   { font: 400 var(--fs-big)/1.14 var(--f-serif); letter-spacing: -.02em; }
.t-lead  { font: 400 var(--fs-lead)/1.4 var(--f-serif); }
.t-ui    { font: 400 var(--fs-ui)/1.5 var(--f-sans); }
.t-label { font: 500 var(--fs-label)/1.3 var(--f-sans); letter-spacing: var(--track-label); text-transform: uppercase; }
.t-pen   { font: 400 var(--fs-pen)/1 var(--f-pen); color: var(--press); }

/* ==========================================================================
   BUTTONS (pill, Urbanist, one label per intent)
   ========================================================================== */
.btn {
  --_bg: transparent; --_fg: var(--ink); --_bd: var(--ink); --_hbg: var(--ink); --_hfg: var(--sheet);
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: .9em;
  padding: .85em .85em .85em 1.6em; border: 1px solid var(--_bd); border-radius: var(--r-pill);
  background: var(--_bg); color: var(--_fg); cursor: pointer; white-space: nowrap;
  font: 500 var(--fs-ui)/1 var(--f-sans); text-decoration: none;
  transition: color var(--d-base) var(--ease-out), transform var(--d-fast) var(--ease-out);
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--_hbg); border-radius: inherit;
               transform: scaleX(0); transform-origin: left; transition: transform var(--d-base) var(--ease-press); }
.btn:hover, .btn:focus-visible { color: var(--_hfg); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn:active { transform: translateY(1px); }
.btn__arrow { display: grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: 50%;
              background: var(--ink); color: var(--sheet); transition: background var(--d-base), color var(--d-base); }
.btn:hover .btn__arrow, .btn:focus-visible .btn__arrow { background: var(--fire); color: var(--ink); }
.btn--fire { --_bg: var(--fire); --_bd: var(--fire); --_hbg: var(--ink); --_hfg: var(--sheet); }
.btn--on-dark { --_fg: var(--sheet); --_bd: var(--sheet); --_hbg: var(--sheet); --_hfg: var(--ink); }
.btn--on-dark .btn__arrow { background: var(--sheet); color: var(--ink); }

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
                           transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--s-4); top: -4rem; z-index: 100; padding: .6em 1.2em; border-radius: var(--r-pill);
        background: var(--ink); color: var(--sheet); font: 500 var(--fs-ui)/1 var(--f-sans); }
.skip:focus { top: var(--s-4); }