/* ═══════════════════════════════════════════════════════════════
 * Proscaper · Brand v2 — "Built on the tailgate. Not in a corporate office."
 * Vibe target: Swanson Russell (swansonrussell.com)
 *
 * Landscape-maintenance, owner-operator. Photography-led. Confident sans.
 * Earthy earned palette: deep forest + burnt spark + bone + ink.
 * No Fraunces italic hero. No "turn-word" treatment.
 * Small-caps eyebrows. Tight grotesk display. Tall caps numerals.
 *
 * The single source of truth for ProScaper brand tokens.
 * ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Archivo+Narrow:wght@500;600;700;800;900&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
  /* ── Brand — earned, landscape maintenance ─────────────────── */
  --forest:            #1F4430;   /* deep forest — primary */
  --forest-deep:       #14301F;   /* near-black forest */
  --forest-dim:        #2A5940;   /* secondary surface */
  --forest-bright:     #3E7A5A;   /* hover / link */
  --forest-wash:       #E8ECE5;   /* subtle green-tinted bone */

  --spark:             #C24E1A;   /* burnt orange — the "spark" accent */
  --spark-deep:        #973C13;   /* pressed / shadow */
  --spark-warm:        #E4661F;   /* highlight tint */
  --spark-wash:        #F3E4D8;   /* tint surface */

  --ochre:             #B3872B;   /* supporting warm — used sparingly, e.g. numerals */
  --clay:              #8A3A1A;   /* darkest warm — reserved for emphasis */

  /* ── Neutrals — earthy, not editorial ──────────────── */
  --bone:              #ECE7DC;   /* warm bone — primary paper */
  --bone-2:            #E3DBCB;
  --bone-3:            #D4C9B5;
  --bone-sand:         #CBBEA4;
  --ink:               #141210;   /* warm near-black, not pure */
  --ink-2:             #2A2621;
  --graphite:          #4A4540;
  --graphite-2:        #6E6862;
  --stone:             #9A938A;

  /* ── Semantic fills ─── */
  --ok:                #1F4430;
  --warn:              #B3872B;
  --alert:             #C24E1A;
  --stop:              #8A2318;

  /* ── Surfaces ─── */
  --bg:                #ECE7DC;
  --bg-ink:            #141210;
  --bg-forest:         #1F4430;
  --surface-1:         #ECE7DC;
  --surface-2:         #E3DBCB;
  --surface-3:         #D4C9B5;
  --border:            #C6BBA3;
  --border-strong:     #141210;
  --rule-hair:         #141210;

  /* ── Type families ─── */
  --font-sans:         "Archivo", "Neue Haas Grotesk", -apple-system, "Helvetica Neue", sans-serif;
  --font-narrow:       "Archivo Narrow", "Archivo", "Helvetica Neue", sans-serif;
  --font-serif:        "Source Serif 4", "Tiempos", Georgia, serif;        /* used for body longform only */
  --font-mono:         "JetBrains Mono", ui-monospace, Menlo, monospace;   /* metadata rails only */

  /* ── Weights ─── */
  --fw-med:   500;
  --fw-semi:  600;
  --fw-bold:  700;
  --fw-black: 800;
  --fw-heavy: 900;

  /* ── Scale — swans-adjacent; bigger hero, smaller body ─ */
  --fs-monument:  180px;   /* homepage / deck cover */
  --fs-display:   108px;
  --fs-h1:        64px;
  --fs-h2:        40px;
  --fs-h3:        24px;
  --fs-lede:      20px;
  --fs-body:      17px;
  --fs-sm:        15px;
  --fs-eyebrow:   11px;
  --fs-micro:     10px;

  /* ── Tracking ─── */
  --ls-xtight:   -0.055em;   /* monument */
  --ls-tight:    -0.035em;   /* display */
  --ls-h:        -0.02em;
  --ls-normal:    0;
  --ls-caps:      0.16em;    /* eyebrows */
  --ls-allcaps:   0.22em;    /* big rail labels */

  /* ── Line heights ─── */
  --lh-tight:   0.92;
  --lh-snug:    1.05;
  --lh-body:    1.5;

  /* ── Radii — zero. no rounded corners anywhere. ─── */
  --radius-0:   0;
  --radius-pill: 999px;   /* chip only */

  /* ── Spacing (8pt) ─── */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --space-32: 128px;

  /* ── Motion ─── */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  140ms;
  --dur-base:  220ms;

  /* ── Shadow (near-never used) ─── */
  --shadow-none: 0 0 0 rgba(0,0,0,0);
  --shadow-sm:   0 1px 0 rgba(0,0,0,.06);
}

html.dark {
  --bg:             #141210;
  --bg-ink:         #ECE7DC;
  --surface-1:      #1C1917;
  --surface-2:      #2A2621;
  --border:         #3A342D;
  --ink:            #ECE7DC;
  --bone:           #1C1917;
  --graphite:       #C8C0B2;
  --graphite-2:     #948B7D;
}

/* ═════════════ Base ═════════════════════════════════════ */

body.v2 {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bone);
  font-feature-settings: "ss01", "ss02", "cv11";
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}

/* ═════════════ Type classes — use these instead of .ds-* ═ */

.t-monument {
  font-family: var(--font-narrow);
  font-weight: var(--fw-heavy);
  font-size: clamp(96px, 13vw, 180px);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-xtight);
  text-transform: uppercase;
  color: var(--ink);
}

.t-display {
  font-family: var(--font-sans);
  font-weight: var(--fw-heavy);
  font-size: clamp(56px, 8vw, 108px);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}

.t-h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: clamp(40px, 5.2vw, 64px);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-h);
}

.t-h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.08;
  letter-spacing: var(--ls-h);
}

.t-h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semi);
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.t-lede {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-lede);
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--graphite);
}

.t-body { font-size: var(--fs-body); line-height: var(--lh-body); }

.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--spark);
}
.t-eyebrow--ink { color: var(--ink); }
.t-eyebrow--bone { color: var(--bone); }

.t-rail {
  font-family: var(--font-mono);
  font-weight: var(--fw-med);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite-2);
}

.t-numeral {
  font-family: var(--font-narrow);
  font-weight: var(--fw-heavy);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 0.9;
}

/* ═════════════ Primitives ═══════════════════════════════ */

.rule-ink  { height:1px; background: var(--ink); border:0; }
.rule-hair { height:1px; background: var(--border); border:0; }

.btn-v2 {
  display:inline-flex; align-items:center; justify-content:center;
  height:56px; padding:0 28px;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  text-decoration:none;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.btn-v2:hover { background: var(--ink); color: var(--bone); }
.btn-v2--spark { background: var(--spark); color: var(--bone); border-color: var(--spark); }
.btn-v2--spark:hover { background: var(--spark-deep); border-color: var(--spark-deep); color: var(--bone); }
.btn-v2--forest { background: var(--forest); color: var(--bone); border-color: var(--forest); }
.btn-v2--forest:hover { background: var(--forest-deep); border-color: var(--forest-deep); }
.btn-v2--ghost  { color: var(--bone); border-color: var(--bone); }
.btn-v2--ghost:hover { background: var(--bone); color: var(--ink); }

/* ═════════════ Photo frame (placeholder standard) ═══════
 * Used everywhere until real crew photography lands.
 * .photo-frame holds aspect ratio + labeled caption.
 */

.photo-frame {
  position:relative;
  background: var(--forest-deep);
  color: var(--bone);
  overflow:hidden;
}
.photo-frame::before {
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(135deg, rgba(20,18,16,.55) 0%, rgba(20,18,16,.15) 60%, rgba(194,78,26,.35) 100%),
    repeating-linear-gradient(45deg, rgba(236,231,220,.04) 0 2px, transparent 2px 22px);
}
.photo-frame .ph-caption {
  position:absolute; left:20px; bottom:20px; right:20px;
  display:flex; justify-content:space-between; gap:16px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone);
  opacity: 0.92;
  z-index:2;
}
.photo-frame .ph-caption .lbl { max-width:420px; }
.photo-frame .ph-caption .code { opacity:.7; }
.photo-frame .ph-note {
  position:absolute; left:20px; top:20px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--spark-warm);
  font-weight: 700;
  z-index:2;
}
.photo-frame .ph-bracket {
  position:absolute; inset:20px; border:1px solid rgba(236,231,220,.2); z-index:1;
  pointer-events:none;
}