/* ============================================================
   Gessura — design system v5 «Monochrome premium»
   The token layer. Every surface builds on these; nothing
   downstream may invent a colour, radius, duration or hairline.
   Contract: /BRIEF-V5-PAGES.md (token names below still carry
   their v4 spelling — --coal / --ember — for compatibility)
   ============================================================ */

:root {
  /* -- colour: pure black, bone type, one mint accent -------- */
  --coal:      #0A0A0C;
  --coal-2:    #111114;
  --coal-3:    #17171B;
  --hairline:   rgba(255, 255, 255, .08);
  --hairline-2: rgba(255, 255, 255, .18);

  --bone:       #F5F6F7;
  --bone-soft:  rgba(245, 246, 247, .6);    /* 6.85:1 on --coal */
  /* faint carries caps labels AND body-size quiet text (excerpts, notes,
     hints), so it must clear WCAG AA 4.5:1 on --coal: .48 composites to
     #7B7B7D = 4.68:1 (was .36 = #5F5F61, 3.1:1). .47 is the bare minimum;
     .48 keeps a margin for compositing rounding and --coal-2 surfaces. */
  --bone-faint: rgba(245, 246, 247, .48);

  --ember:      #6EE7A8;
  --ember-hi:   #93F0BE;
  --ember-deep: #2FB877;
  --ember-ink:  #04140C;
  --danger:     #FF5C5C;

  /* the one permitted gradient — light, never a surface fill */
  --glow: radial-gradient(closest-side, rgba(110, 231, 168, .14), rgba(110, 231, 168, .05) 55%, transparent 75%);
  --bloom: 0 0 60px -24px rgba(110, 231, 168, .22);

  /* -- v3 compatibility aliases (inner pages still reference
        these; they now resolve into the foundry palette) ------ */
  --paper:      var(--coal);
  --paper-2:    var(--coal-2);
  --card:       var(--coal-2);
  --kiln:       var(--coal-3);
  --kiln-2:     #1D1D22;
  --ink:        var(--bone);
  --ink-soft:   var(--bone-soft);
  --ink-faint:  var(--bone-faint);
  --line:       var(--hairline);
  --line-kiln:  var(--hairline);
  --paper-on-kiln: var(--bone);
  --soft-on-kiln:  var(--bone-soft);
  --faint-on-kiln: var(--bone-faint);
  --accent:      var(--ember);
  --accent-hov:  #57D992;
  --accent-deep: var(--ember-hi);   /* accent-as-text must stay readable on coal */
  --accent-ink:  var(--ember-ink);

  /* -- type -------------------------------------------------- */
  --font-display: 'Poppins', system-ui, sans-serif;
  --font-body:    'Poppins', -apple-system, system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  /* -- shape ------------------------------------------------- */
  --r-ctl:  6px;
  --r-card: 12px;

  /* -- motion ------------------------------------------------ */
  --t-quick: .18s;
  --t-base:  .34s;
  --t-slow:  .9s;
  --ease:    cubic-bezier(.19, 1, .22, 1);

  /* -- layout ------------------------------------------------ */
  --w-read: min(720px, 90vw);
  --w-base: min(1560px, 94vw);
  --w-wide: min(1840px, 96vw);
  --pad:    clamp(88px, 9vw, 150px);
  --gutter: clamp(20px, 3vw, 40px);

  --shadow-contact: var(--bloom);

  /* bridge tokens for the studio SPA (reads --site-*) */
  --site-bg: var(--coal);
  --site-surface: var(--coal-2);
  --site-text: var(--bone);
  --site-accent: var(--ember);
}

/* ============================================================
   Base
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--coal);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.65;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
/* Plates are cast flush: always square-cornered. */
img { border-radius: 0; }

a { color: inherit; text-decoration: none; }
p a, li a, .g3-prose a {
  text-decoration: underline;
  text-decoration-color: var(--hairline-2);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--t-quick) var(--ease);
}
p a:hover, li a:hover, .g3-prose a:hover { text-decoration-color: var(--ember); }

button { font: inherit; cursor: pointer; }

::selection { background: rgba(255, 90, 31, .3); }

:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 2px;
  border-radius: 2px;
}
/* a section that only receives focus because an in-page link moved the
   reader there (main.js) is a landmark, not a control — no ring */
[data-g3-anchor-target]:focus { outline: none; }

/* ============================================================
   Display type
   ============================================================ */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  margin: 0;
  text-wrap: balance;
}

.g3-h1 {
  font-size: clamp(40px, 4.6vw, 84px);
  line-height: 1.14;
  letter-spacing: -.01em;
  font-weight: 400;
}

.g3-h2 {
  font-size: clamp(28px, 2.9vw, 50px);
  line-height: 1.18;
  letter-spacing: -.008em;
  font-weight: 400;
}

.g3-h3 {
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: 0;
  font-weight: 500;
}

/* the marked word: quiet mint, nothing louder (strict premium) */
.g3-h1 em, .g3-h2 em, .g3-hot {
  font-style: normal;
  color: var(--ember);
}

.g3-lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--bone-soft);
  max-width: 58ch;
}

/* v3 serif lede hook — now a quiet large lede (serif is gone) */
.g3-lede-serif {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(19px, 1.5vw, 23px);
  line-height: 1.5;
  color: var(--bone-soft);
}

.g3-meta {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--bone-soft);
}

/* mono readout — a technical label beside a number */
.g3-spec {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: .03em;
  font-variant-numeric: tabular-nums;
  color: var(--bone-soft);
}
.g3-spec b, .g3-spec strong { font-weight: 500; color: var(--bone); }

/* cast mark: short ember rule above a spec block */
.g3-label { padding-top: 10px; position: relative; }
.g3-label::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 28px; height: 1px;
  background: var(--hairline-2);
}

/* chapter stamp: uppercase mono numeral */
.g3-stamp {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-faint);
}

/* ============================================================
   Layout
   ============================================================ */

.g3-read { width: var(--w-read); margin-inline: auto; }
.g3-base { width: var(--w-base); margin-inline: auto; }
.g3-wide { width: var(--w-wide); margin-inline: auto; }

.g3-sec { padding-block: var(--pad); }
.g3-sec-tint { background: var(--coal-2); }

/* v3 inversion hook — degrades to a raised coal band */
.on-kiln { background: var(--coal-3); color: var(--bone); }
.on-kiln .g3-lede, .on-kiln .g3-meta, .on-kiln .g3-lede-serif { color: var(--bone-soft); }
.on-kiln .g3-spec { color: var(--bone-soft); }
.on-kiln .g3-spec b, .on-kiln .g3-spec strong { color: var(--bone); }
.on-kiln .g3-h1 em, .on-kiln .g3-h2 em { /* hot word works on any coal */ }

.g3-rule { border: 0; border-top: 1px solid var(--hairline); margin: 0; }
.on-kiln .g3-rule { border-color: var(--hairline); }

/* ============================================================
   Buttons — graphite plates. No pills.
   The hover is a thin light running around the contour.
   ============================================================ */

@property --g3a {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.g3-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 24px;
  border-radius: var(--r-ctl);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--t-quick) var(--ease),
              color var(--t-quick) var(--ease),
              border-color var(--t-quick) var(--ease),
              box-shadow var(--t-quick) var(--ease);
}

/* the running light: a 1px ring drawn by a conic sweep, hover-only */
.g3-btn::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--r-ctl) + 1px);
  padding: 1px;
  background: conic-gradient(from var(--g3a),
    transparent 0turn,
    transparent .62turn,
    rgba(245, 246, 247, .25) .78turn,
    rgba(245, 246, 247, .95) .87turn,
    var(--ember) .94turn,
    transparent 1turn);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
  pointer-events: none;
  z-index: 1;
}
.g3-btn:hover::after, .g3-btn:focus-visible::after {
  opacity: 1;
  animation: g3-ring-run 1.5s linear infinite;
}
/* the primary wears its ring at all times, slow — hover only quickens it */
.g3-btn-primary::after {
  opacity: 1;
  animation: g3-ring-run 5s linear infinite;
}
.g3-btn-primary:hover::after, .g3-btn-primary:focus-visible::after {
  animation-duration: 1.6s;
}
@keyframes g3-ring-run {
  to { --g3a: 1turn; }
}
@media (prefers-reduced-motion: reduce) {
  .g3-btn::after, .g3-btn:hover::after, .g3-btn-primary::after { animation: none; opacity: .7; }
}

.g3-btn-primary {
  background: #1B1B1F;
  color: var(--bone);
  border-color: rgba(255, 255, 255, .12);
}
.g3-btn-primary:hover {
  background: #242429;
  border-color: rgba(255, 255, 255, .22);
}
.g3-btn .g3-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ember);
  display: inline-block;
}

.g3-btn-ink {
  background: transparent;
  color: var(--bone);
  border-color: rgba(242, 234, 217, .4);
}
.g3-btn-ink:hover { background: var(--bone); color: var(--coal); border-color: var(--bone); }

.on-kiln .g3-btn-ink { color: var(--bone); border-color: rgba(242, 234, 217, .4); }
.on-kiln .g3-btn-ink:hover { background: var(--bone); color: var(--coal); }

.g3-btn-quiet {
  background: transparent;
  color: var(--bone);
  border-color: var(--hairline);
}
.g3-btn-quiet:hover { border-color: var(--hairline-2); }

.g3-btn[disabled], .g3-btn.is-disabled { opacity: .45; pointer-events: none; }

.g3-link {
  font-weight: 600;
  border-bottom: 1.5px solid var(--hairline-2);
  padding-bottom: 2px;
  transition: border-color var(--t-quick) var(--ease);
}
.g3-link:hover { border-color: var(--ember); }

/* ============================================================
   Cards & frames
   ============================================================ */

.g3-card {
  background: var(--coal-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: clamp(22px, 2.4vw, 34px);
  transition: border-color var(--t-quick) var(--ease), box-shadow var(--t-quick) var(--ease);
}
/* hover = the edge heats: brighter hairline + faint bloom */
a.g3-card:hover, .g3-card.is-hoverable:hover {
  border-color: var(--hairline-2);
  box-shadow: var(--bloom);
}
.on-kiln .g3-card { background: var(--kiln-2); border-color: var(--hairline); }

.g3-frame {
  border: 1px solid var(--hairline);
  background: var(--coal-2);
  overflow: hidden;
}
.g3-frame img { width: 100%; }

/* contact sheet: hairline-celled grid, flush cells */
.g3-sheet {
  display: grid;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.g3-sheet > * { background: var(--coal-2); min-width: 0; }

/* a cast on the floor: bloom behind it */
.g3-render { position: relative; }
.g3-render img { box-shadow: var(--bloom); }

/* ============================================================
   Chips, badges, inputs
   ============================================================ */

.g3-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-ctl);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--bone-soft);
  background: transparent;
  transition: border-color var(--t-quick) var(--ease), color var(--t-quick) var(--ease);
}
.g3-chip:hover { border-color: var(--hairline-2); color: var(--bone); }
.g3-chip.is-active {
  border-color: var(--ember);
  color: var(--ember-hi);
}

.g3-live {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13.5px;
  color: var(--ember-hi);
}
.g3-live b { font-weight: 500; font-size: 15px; }

.g3-input, .g3-select, .g3-textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  background: var(--coal-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-ctl);
  font: inherit;
  color: var(--bone);
  transition: border-color var(--t-quick) var(--ease);
}
.g3-input:hover, .g3-select:hover, .g3-textarea:hover { border-color: var(--hairline-2); }
.g3-input:focus, .g3-select:focus, .g3-textarea:focus {
  outline: none;
  border-color: var(--ember);
  box-shadow: 0 0 0 1px var(--ember);
}
.g3-input::placeholder, .g3-textarea::placeholder { color: var(--bone-faint); }

.g3-field { display: grid; gap: 6px; }
.g3-field > label { font-size: 14px; font-weight: 500; }
.g3-field .g3-help { font-size: 13px; color: var(--bone-faint); }
.g3-field .g3-error { font-size: 13px; color: var(--danger); }

/* ============================================================
   Section head
   ============================================================ */

.g3-head { max-width: 24ch; margin-bottom: clamp(36px, 4vw, 64px); }
.g3-head .g3-lede, .g3-head .g3-lede-serif { margin-top: 18px; }
.g3-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: clamp(36px, 4vw, 64px);
}
.g3-head-row .g3-head { margin-bottom: 0; }

/* ============================================================
   Motion primitives
   ============================================================ */

.will-reveal { opacity: 0; }
.no-motion .will-reveal, .no-js .will-reveal { opacity: 1; }

[data-g3-mask] { clip-path: inset(12% 12% 12% 12%); }
.no-motion [data-g3-mask], .no-js [data-g3-mask] { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .will-reveal { opacity: 1 !important; transform: none !important; }
  [data-g3-mask] { clip-path: inset(0 0 0 0) !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   Utilities
   ============================================================ */

.g3-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter); }
.g3-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.g3-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }

@media (max-width: 1024px) {
  .g3-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .g3-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .g3-grid-2, .g3-grid-3, .g3-grid-4 { grid-template-columns: 1fr; }
  .g3-head-row { flex-direction: column; align-items: flex-start; }
}

.g3-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}