/* ============================================================
   SIGNAL SOUTH · DESIGN SYSTEM TOKENS
   Direction B · Pattern
   ============================================================ */

:root {
  /* — Colour: surfaces ——————————————————————————————————— */
  --paper:       #F4F2EE;   /* base paper */
  --paper-2:     #EBE8E2;   /* tinted surface */
  --paper-3:     #DFDBD2;   /* deeper tint, dividers/cells */
  --ink:         #0B0B0C;   /* primary text / dark surface */
  --ink-2:       #15151A;   /* card surface, slightly off-black */
  --ink-3:       #232228;   /* hover / pressed dark */

  /* — Colour: text ——————————————————————————————————————— */
  --text:        var(--ink);
  --text-mid:    #4A4A48;   /* secondary body */
  --text-mute:   #8A8A86;   /* tertiary / captions */
  --text-on-ink: #F4F2EE;   /* paper on ink */
  --text-on-ink-mid: #B6B5B0;
  --text-on-ink-mute: #6E6D69;

  /* — Colour: signal (the accent — swappable via tweaks) ——— */
  --signal:      #DBF23A;   /* lime — default */
  --signal-ink:  #0B0B0C;   /* text colour against signal */

  /* — Colour: rules ————————————————————————————————————— */
  --rule:        #D9D6CF;
  --rule-strong: #B8B4AB;
  --rule-on-ink: #2A2A2F;

  /* — Type ————————————————————————————————————————————— */
  --font-display: "Bricolage Grotesque", "Inter Tight", sans-serif;
  --font-body:    "Geist", "Inter Tight", -apple-system, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, monospace;

  --tracking-display: -0.035em;
  --tracking-body:    -0.005em;
  --tracking-mono:    0.02em;
  --tracking-caps:    0.22em;

  /* — Spacing (8-based) ——————————————————————————————— */
  --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;

  /* — Layout ————————————————————————————————————————— */
  --page-pad-x: clamp(20px, 5vw, 80px);
  --page-max:   1440px;
  --col-gap:    24px;

  /* — Motion ————————————————————————————————————————— */
  --t-fast: 120ms;
  --t-base: 180ms;
  --t-slow: 320ms;
  --ease:   cubic-bezier(0.2, 0.7, 0.2, 1);

  /* — Radius (hard-edged direction — use sparingly) ————— */
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;
  --r-pill: 999px;
}

/* ============================================================
   BASE
   ============================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body { font-feature-settings: "ss01", "cv11"; }

::selection { background: var(--signal); color: var(--signal-ink); }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }

/* ============================================================
   TYPE SCALE
   ============================================================ */

.t-display-xl {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(56px, 9vw, 144px);
  line-height: 0.98;
  letter-spacing: -0.04em;
}
.t-display-l {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 5.6vw, 88px);
  line-height: 1.04;
  letter-spacing: var(--tracking-display);
}

/* Mobile: relax display line-heights a touch further. The clamp floor
   shrinks the type while descender depth stays roughly proportional,
   so wrapped headings need slightly more breathing room on small screens. */
@media (max-width: 880px) {
  .t-display-xl { line-height: 1.04; }
  .t-display-l  { line-height: 1.1; }
}
.t-display-m {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.02;
  letter-spacing: -0.025em;
}
.t-display-s {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.t-lede {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--text-mid);
}
.t-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
}
.t-body-s {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.55;
}

.t-mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: var(--tracking-mono);
}
.t-tag {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.t-micro {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

/* ============================================================
   LAYOUT
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding-inline: var(--page-pad-x);
}

.section {
  padding-block: clamp(64px, 9vw, 144px);
  position: relative;
}
.section--tight { padding-block: clamp(48px, 6vw, 96px); }

.section--ink {
  background: var(--ink);
  color: var(--text-on-ink);
}
.section--ink .t-lede { color: var(--text-on-ink-mid); }
.section--ink .t-mono, .section--ink .t-tag { color: var(--text-on-ink-mute); }

/* ============================================================
   COMPONENTS
   ============================================================ */

/* — Button ————————————————————————————————————————————— */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: inherit;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  user-select: none;
  white-space: nowrap;
}
.btn .arrow { display: inline-block; transition: transform var(--t-base) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--signal);
  color: var(--signal-ink);
}
.btn--primary:hover { background: var(--ink); color: var(--signal); }

.btn--secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--secondary:hover { background: var(--ink); color: var(--paper); }

.section--ink .btn--secondary {
  color: var(--paper);
  border-color: rgba(244,242,238,0.3);
}
.section--ink .btn--secondary:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.btn--ghost {
  padding-inline: 0;
  color: var(--text-mid);
}
.btn--ghost:hover { color: var(--ink); }

/* — Tag / chip ——————————————————————————————————————— */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 9px;
  background: var(--ink);
  color: var(--signal);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}
.tag--signal {
  background: var(--signal);
  color: var(--signal-ink);
}
.tag--paper {
  background: var(--paper-2);
  color: var(--ink);
}
.tag--outline {
  background: transparent;
  color: var(--text-mid);
  border: 1px solid var(--rule);
}

/* — Rule ————————————————————————————————————————————— */
.rule { height: 1px; background: var(--rule); width: 100%; }
.section--ink .rule { background: var(--rule-on-ink); }

/* — Eyebrow (mono caps label preceding a section title) ——— */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 24px;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
  display: inline-block;
  opacity: 0.6;
}

/* — Card ———————————————————————————————————————————— */
.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 28px;
  transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.card:hover { border-color: var(--ink); }
.card--ink { background: var(--ink-2); color: var(--text-on-ink); border-color: var(--rule-on-ink); }

/* — Bracket frame (signature container) ———————————————— */
.bracket {
  position: relative;
  padding: 28px;
}
.bracket::before, .bracket::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
}
.bracket::before { top: 0; left: 0; border-right: none; border-bottom: none; }
.bracket::after { bottom: 0; right: 0; border-left: none; border-top: none; }

.bracket--full::before,
.bracket--full::after { width: 14px; }
.bracket--full > .bracket-tl,
.bracket--full > .bracket-tr,
.bracket--full > .bracket-bl,
.bracket--full > .bracket-br { position: absolute; width: 14px; height: 14px; border: 2px solid currentColor; }
.bracket--full > .bracket-tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.bracket--full > .bracket-tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.bracket--full > .bracket-bl { bottom: 0; left: 0; border-right: none; border-top: none; }
.bracket--full > .bracket-br { bottom: 0; right: 0; border-left: none; border-top: none; }

/* ============================================================
   UTILITIES
   ============================================================ */

.signal-dot { color: var(--signal); }
.signal-dot::after {
  content: ".";
  color: var(--signal);
}

.muted { color: var(--text-mute); }
.mid { color: var(--text-mid); }
.tabular { font-variant-numeric: tabular-nums; }

.stack-1 > * + * { margin-top: var(--s-1); }
.stack-2 > * + * { margin-top: var(--s-2); }
.stack-3 > * + * { margin-top: var(--s-3); }
.stack-4 > * + * { margin-top: var(--s-4); }
.stack-5 > * + * { margin-top: var(--s-5); }
.stack-6 > * + * { margin-top: var(--s-6); }
.stack-7 > * + * { margin-top: var(--s-7); }

.row { display: flex; }
.row-gap-2 { gap: var(--s-2); }
.row-gap-3 { gap: var(--s-3); }
.row-gap-4 { gap: var(--s-4); }
.row-gap-5 { gap: var(--s-5); }
.row-center { align-items: center; }
.row-between { justify-content: space-between; }

/* ============================================================
   THEME: PHOTOGRAPHY ON/OFF
   ============================================================ */
[data-photos="off"] .photo-only { display: none !important; }
[data-photos="off"] .graphic-fallback { display: block !important; }
[data-photos="on"]  .graphic-fallback { display: none !important; }