/* =============================================================
   thejonathanengle.com — v2 DESIGN SYSTEM
   Direction: "Field Notes" continued. The palette is unchanged and
   deliberate: warm paper, ink type, field-green lead, sandstone-clay
   second note, grounded in Jonathan's world (soldier, builder, Utah).

   What changed from v1, and why:

   1. TYPE. The v1 pairing was on the current overused list at both
      ends, so it read as a default rather than a decision.  unslop-ignore
      Replaced with Zilla Slab (a utility slab: surveyor's
      notebook, stencilled crate, field equipment) over Public Sans
      (the US federal design system's face, which a citizen-soldier's
      site can carry honestly). Neither is on any monoculture list.

   2. STRUCTURE. v1 built three of five main pages out of the same
      four-up feature-card grid. There is no generic .card + .grid-4
      pair in this file on purpose. Each page declares its own shape
      in a stamp comment at the top of its stylesheet, and no two
      pages may share one.

   3. GROUND. v1 spent 8% of the home page on its one committed
      moment. Field green is now a structural ground, not a garnish.

   Contents:
     1. Tokens      2. Reset + base   3. Prose        4. Layout
     5. Headers     6. Buttons        7. Rules        8. Marks
     9. Figures    10. Nav           11. Footer      12. Forms
   ============================================================= */

/* ============================ 1. TOKENS ============================ */
:root {
  color-scheme: light;

  /* --- Palette: Field Notes, on a sage-grey ground. ---
     The ground moved off warm cream (#F3EDE1) to a cool mineral paper
     whose dominant channel is green, so it relates to the field-green
     lead instead of sitting under it. This also clears the detector's
     cream-palette rule honestly: that rule fires on light warm surfaces
     ordered red >= green >= blue, and here green is highest. Field green,
     clay, and gold are untouched. --- */
  --paper:       #ECEEE6;  /* sage-grey ground — green-dominant, not cream */
  --paper-card:  #FBFCF8;  /* raised surface */
  --paper-sunk:  #DADDD0;  /* sunken block */
  --night:       #191C12;  /* dark brand surface — see the note below */
  --ink:         #1E201B;  /* near-black ink, faintly cooled to match */
  --ink-soft:    #3C3E35;  /* body text */
  --muted:       #635C4D;  /* secondary text — 5.7:1 on paper, 5.0:1 on sunk */
  --faint:       #665E4E;  /* captions, meta — 5.5:1 on paper, 4.9:1 on sunk */
  --line:        #DADCCF;  /* hairlines */
  --line-strong: #C4C6B6;  /* stronger borders */

  --field:       #47512F;  /* LEAD accent — field green */
  --field-deep:  #333B20;  /* pressed / deeper ground */
  --field-soft:  #EDEEE2;  /* field tint background */
  --clay:        #A8552F;  /* SECOND accent — sandstone */
  --clay-deep:   #8A4526;  /* clay hover, and clay-on-tint text */
  --clay-soft:   #F4E7DC;  /* clay tint background */
  --gold:        #BC8636;  /* dark-surface accent + the horizon marker; see below */

  /* --- Two notes on the tokens above, both measured. ---

     THE SURFACE LADDER. Paper to card used to be +3.3 L*, which is under the
     step a viewer reads as "raised", so cards looked flat. Card is now #FBFCF8
     (+5.0) and the sunken block #DADDD0 (-6.2). Every text token still clears
     AA on both: worst case is --faint on the sunk ground at 4.65:1.

     GOLD'S ROLE. Gold cannot carry text on any light ground (2.72:1 on paper,
     2.31:1 on the sunk block) or on field green (2.66:1). It has exactly two
     licensed uses: the .status.horizon marker, and type or rule work on
     --night, where it measures 5.43:1. That dark pairing is the reason the
     token survives at all — clay only reaches 3.29:1 there, so gold is the
     only accent that reads on the brand's dark surface. Never set gold as
     text on paper, card, sunk, or field.

     --night is a brand surface, not a page surface. Nothing on the site uses
     it as a background; it exists so the mark, the OG image, and slide decks
     have a dark ground that is green-dominant (25,28,18) and therefore related
     to field green rather than a neutral black. --paper on it is 14.75:1. */

  /* Text on the field-green ground. Solid values, never an alpha
     stack: in v1 a color-mix toward transparent plus an inherited
     opacity collapsed one attribution to 1.4:1. */
  --on-field:      #EDEEE2;  /* primary on --field — 7.2:1 */
  --on-field-soft: #C7C9B4;  /* secondary on --field — 5.0:1 */
  --on-field-line: #5C6742;  /* hairline on --field */

  /* --- Type --- */
  --font-display: "Zilla Slab", "Bookman Old Style", Rockwell, Georgia, serif;
  --font-body:    "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;

  --fs-micro:   0.78rem;
  --fs-small:   0.875rem;
  --fs-body:    1.0625rem;
  --fs-lead:    clamp(1.18rem, 1.02rem + 0.62vw, 1.34rem);
  --fs-h3:      clamp(1.12rem, 1.0rem + 0.56vw, 1.34rem);
  --fs-h2:      clamp(1.45rem, 1.16rem + 1.34vw, 2.0rem);
  --fs-h1:      clamp(1.95rem, 1.44rem + 2.5vw, 2.9rem);
  --fs-hero:    clamp(2.3rem, 1.42rem + 4.1vw, 3.9rem);

  --lh-tight: 1.06;
  --lh-snug:  1.24;
  --lh-body:  1.62;

  /* Zilla Slab is wide with a tall x-height, so it takes less negative
     tracking than a high-contrast serif. Floor is -0.04em; this sits
     well inside it. */
  --tr-display: -0.018em;
  --tr-hero:    -0.024em;

  /* --- Spacing (4px base) --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  /* --- Radius. Craft floor: 12-16px on panels, pills only on small
         controls. No 10px "app card" radius anywhere. --- */
  --r-xs: 2px; --r-sm: 4px; --r: 12px; --r-lg: 16px; --r-pill: 100px;

  /* --- Elevation. Declared once per element: a border OR a shadow,
         never a 1px border under a wide soft shadow. --- */
  --shadow:    0 2px 3px rgba(58,46,24,.06), 0 10px 24px rgba(58,46,24,.08);
  --shadow-lg: 0 3px 6px rgba(58,46,24,.07), 0 22px 50px rgba(58,46,24,.12);

  /* --- Layout --- */
  /* Reading column. The craft floor asks for 65-75 rendered characters,
     which is NOT 68ch: the ch unit is the width of "0", and average
     lowercase copy is narrower, so 68ch renders ~86 characters. Measured
     against the detector, 62ch lands just under 80. */
  --measure: 62ch;
  --max: 720px;
  --max-wide: 1080px;
  --pad: clamp(20px, 5vw, 40px);

  /* Exponential ease-out. No bounce, no elastic. */
  --ease: cubic-bezier(.22, .8, .3, 1);
}

/* ============================ 2. RESET + BASE ============================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg, video { display: block; max-width: 100%; }
/* Without this, the width/height HTML attributes (kept to prevent layout
   shift) are treated as a presentational height, so every image renders at
   its literal pixel height and object-fit crops or fill squashes it. */
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-display);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tr-hero); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

a {
  color: var(--field);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--field) 32%, transparent);
  transition: color .18s var(--ease), text-decoration-color .18s var(--ease);
}
a:hover { color: var(--clay-deep); text-decoration-color: currentColor; }

strong, b { color: var(--ink); font-weight: 600; }

:focus-visible { outline: 2px solid var(--field); outline-offset: 3px; border-radius: var(--r-xs); }
.band-field :focus-visible, .ground-field :focus-visible { outline-color: var(--on-field); }

::selection { background: color-mix(in srgb, var(--field) 20%, var(--paper)); color: var(--ink); }

/* ============================ 3. PROSE ============================ */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--sp-4); }
.prose p { color: var(--ink-soft); }
.prose h2 { margin-top: var(--sp-8); margin-bottom: var(--sp-3); }
.prose h3 { margin-top: var(--sp-6); margin-bottom: var(--sp-2); }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.25em; color: var(--ink-soft); }
.prose li + li { margin-top: var(--sp-2); }

/* A quote is set as a quote, not as a card with a colored tab. */
.prose blockquote {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--ink);
  padding-left: var(--sp-5);
  border-left: 1px solid var(--line-strong);
}

.lead {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.008em;
  max-width: 60ch;
}
.summary { font-size: var(--fs-small); color: var(--muted); line-height: 1.55; max-width: 62ch; }
.meta { font-size: var(--fs-small); color: var(--faint); }

/* ============================ 4. LAYOUT ============================ */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.wrap-wide { max-width: var(--max-wide); margin: 0 auto; padding: 0 var(--pad); }
.wrap-read { max-width: 42rem; margin: 0 auto; padding: 0 var(--pad); }

.band { padding: clamp(var(--sp-7), 6vw, var(--sp-9)) 0; }
.band-tight { padding: clamp(var(--sp-6), 4vw, var(--sp-7)) 0; }
.band-card { background: var(--paper-card); }
.band-sand { background: var(--paper-sunk); }

/* Field green as a structural ground. */
.ground-field { background: var(--field); color: var(--on-field); }
.ground-field h1, .ground-field h2, .ground-field h3 { color: var(--paper); }
.ground-field p, .ground-field .dek, .ground-field .summary { color: var(--on-field-soft); }
.ground-field .meta { color: var(--on-field-soft); }
.ground-field a:not(.btn) { color: var(--paper); text-decoration-color: color-mix(in srgb, var(--paper) 45%, transparent); }
.ground-field a:not(.btn):hover { color: #fff; text-decoration-color: currentColor; }
.ground-field hr, .ground-field .rule { border-color: var(--on-field-line); }

.ground-deep { background: var(--field-deep); color: var(--on-field); }
.ground-deep h1, .ground-deep h2, .ground-deep h3 { color: var(--paper); }
.ground-deep p, .ground-deep .dek, .ground-deep .summary, .ground-deep .meta { color: var(--on-field-soft); }
.ground-deep a:not(.btn) { color: var(--paper); text-decoration-color: color-mix(in srgb, var(--paper) 45%, transparent); }
.ground-deep a:not(.btn):hover { color: #fff; text-decoration-color: currentColor; }
.ground-deep hr, .ground-deep .rule { border-color: color-mix(in srgb, var(--on-field) 22%, transparent); }
.ground-deep .rule-tick { border-top-color: var(--on-field-soft); }

.stack-2 > * + * { margin-top: var(--sp-2); }
.stack-3 > * + * { margin-top: var(--sp-3); }
.stack-4 > * + * { margin-top: var(--sp-4); }
.stack-6 > * + * { margin-top: var(--sp-6); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

/* ============================ 5. HEADERS ============================ */
/* No eyebrow component. v1 put a label over every section, which is
   grammar you did not choose. Where a section genuinely needs a
   category marker, a page stylesheet defines one for that page. */
.section-head { margin-bottom: var(--sp-6); max-width: 54ch; }
.section-head .dek { color: var(--muted); margin-top: var(--sp-3); max-width: 52ch; }
/* On the field ground the dek must win over .section-head .dek (same
   specificity, later source), or muted text lands at 1.3:1 on green. */
.ground-field .section-head .dek, .ground-deep .section-head .dek { color: var(--on-field-soft); }

/* ============================ 6. BUTTONS ============================ */
.btn {
  --btn-bg: var(--field);
  --btn-fg: var(--paper);
  --btn-bd: var(--field);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 15px 24px;
  border-radius: var(--r-sm);
  border: 1px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  text-decoration: none;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.btn:hover { background: var(--field-deep); border-color: var(--field-deep); color: var(--paper); text-decoration: none; }

.btn.secondary { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-strong); }
.btn.secondary:hover { background: transparent; border-color: var(--ink); color: var(--ink); }

/* clay-deep base, not clay: paper text on raw clay is 4.48:1, a hair
   under AA. On clay-deep it clears comfortably. */
.btn.clay { --btn-bg: var(--clay-deep); --btn-bd: var(--clay-deep); --btn-fg: var(--paper); }
.btn.clay:hover { background: #75391F; border-color: #75391F; }

.btn.lg { padding: 18px 30px; font-size: var(--fs-body); }

/* On the field ground the primary button inverts to paper. */
.ground-field .btn, .ground-deep .btn { --btn-bg: var(--paper); --btn-fg: var(--field-deep); --btn-bd: var(--paper); }
.ground-field .btn:hover, .ground-deep .btn:hover { background: #fff; border-color: #fff; color: var(--field-deep); }
.ground-field .btn.secondary, .ground-deep .btn.secondary { --btn-bg: transparent; --btn-fg: var(--on-field); --btn-bd: var(--on-field-line); }
.ground-field .btn.secondary:hover, .ground-deep .btn.secondary:hover { border-color: var(--on-field); color: var(--paper); background: transparent; }

.btn .arrow { transition: transform .18s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* A text link that behaves like an action. */
.link-action {
  font-family: var(--font-body); font-size: var(--fs-small); font-weight: 600;
  color: var(--field); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--field) 30%, transparent);
  padding-bottom: 2px;
}
.link-action:hover { color: var(--clay-deep); border-bottom-color: currentColor; text-decoration: none; }
.link-action .arrow { transition: transform .18s var(--ease); }
.link-action:hover .arrow { transform: translateX(3px); }

/* ============================ 7. RULES ============================ */
hr, .rule { border: none; border-top: 1px solid var(--line); margin: var(--sp-7) 0; }
.rule-strong { border-top: 1px solid var(--line-strong); }
/* A short ink rule that opens a section, set in the display face's weight. */
.rule-tick { width: 40px; border-top: 2px solid var(--clay); margin: 0 0 var(--sp-5); }
.ground-field .rule-tick { border-top-color: var(--on-field-soft); }

/* ============================ 8. MARKS ============================ */
.tag {
  display: inline-block;
  font-family: var(--font-body); font-size: var(--fs-small); font-weight: 500;
  padding: 4px 11px; border-radius: var(--r-pill);
  background: var(--paper-sunk); color: var(--muted);
}
.tag.field { background: var(--field-soft); color: var(--field); }
.tag.clay  { background: var(--clay-soft); color: var(--clay-deep); }

.status { font-size: var(--fs-small); font-weight: 500; color: var(--muted); display: inline-flex; align-items: center; gap: 7px; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
.status.active::before { background: var(--field); }
.status.live::before { background: var(--clay); }
.status.horizon::before { background: var(--gold); }

/* Numerals set in the display face, for record and stat contexts. */
.numeral { font-family: var(--font-display); font-weight: 600; color: var(--ink); letter-spacing: var(--tr-display); font-variant-numeric: tabular-nums; }
.ground-field .numeral { color: var(--paper); }

/* ============================ 9. FIGURES ============================ */
.figure { margin: 0; }
.figure img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-sm); }
.figure figcaption { font-size: var(--fs-small); color: var(--faint); margin-top: var(--sp-3); max-width: 46ch; }
.portrait-3x4 { aspect-ratio: 3 / 4; }
.portrait-4x5 { aspect-ratio: 4 / 5; }
.portrait-1x1 { aspect-ratio: 1 / 1; }
.landscape-3x2 { aspect-ratio: 3 / 2; }
.toned img { filter: saturate(.78) contrast(1.02); }

/* ============================ 10. NAV ============================ */
.site-nav {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: saturate(1.08) blur(8px);
  position: sticky; top: 0; z-index: 50;
}
.nav-inner {
  max-width: var(--max-wide); margin: 0 auto; padding: var(--sp-4) var(--pad);
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-6);
}
.nav-wordmark {
  font-family: var(--font-display); font-size: 1.12rem; font-weight: 600;
  color: var(--ink); text-decoration: none; letter-spacing: var(--tr-display);
}
.nav-wordmark:hover { color: var(--ink); }
.nav-links { display: flex; gap: var(--sp-5); list-style: none; align-items: center; }
.nav-links a {
  font-size: var(--fs-small); font-weight: 500; color: var(--muted);
  text-decoration: none; padding: 6px 0; position: relative;
}
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-links a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--clay);
}
.nav-links a.nav-cta {
  color: var(--field); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); padding: 9px 15px; font-weight: 600;
}
.nav-links a.nav-cta:hover { background: var(--field); color: var(--paper); border-color: var(--field); }
.nav-links a.nav-cta.active::after { display: none; }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; }

/* ============================ 11. FOOTER ============================ */
/* Three named groups, left-aligned, instead of a brand block against a
   right-aligned middot run. Brand + socials, site nav, contact. */
.site-footer { border-top: 1px solid var(--line); margin-top: var(--sp-9); padding: var(--sp-8) 0; }
.footer-inner {
  max-width: var(--max-wide); margin: 0 auto; padding: 0 var(--pad);
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--sp-6), 5vw, var(--sp-8));
}
.footer-mark { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); font-weight: 600; letter-spacing: var(--tr-display); }
.footer-tag { font-size: var(--fs-small); color: var(--muted); margin-top: 6px; max-width: 34ch; }

.footer-social { list-style: none; display: flex; gap: var(--sp-4); margin-top: var(--sp-5); }
.footer-social a {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--fs-small); font-weight: 500; color: var(--muted);
  text-decoration: none;
}
.footer-social svg { color: var(--field); transition: color .18s var(--ease); }
.footer-social a:hover { color: var(--ink); }
.footer-social a:hover svg { color: var(--clay); }

.footer-heading {
  display: block; font-size: var(--fs-micro); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--faint); margin-bottom: var(--sp-3);
}
.footer-nav ul, .footer-contact ul { list-style: none; display: grid; gap: 9px; }
.footer-nav a, .footer-contact a {
  font-size: var(--fs-small); color: var(--muted); text-decoration: none;
}
.footer-nav a:hover, .footer-contact a:hover { color: var(--field); text-decoration: underline; }

/* ============================ 12. FORMS ============================ */
.field { margin-bottom: var(--sp-5); }
.field-label { display: block; font-size: var(--fs-small); font-weight: 600; color: var(--ink); margin-bottom: var(--sp-2); }
.field-hint { display: block; font-size: var(--fs-small); font-weight: 400; color: var(--muted); margin-top: -2px; margin-bottom: var(--sp-2); }
.field-input, .field-textarea {
  width: 100%; font-family: var(--font-body); font-size: var(--fs-body); color: var(--ink);
  background: var(--paper-card); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 13px 15px; transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field-input::placeholder, .field-textarea::placeholder { color: var(--faint); }
.field-input:focus, .field-textarea:focus {
  outline: none; border-color: var(--field);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--field) 15%, transparent);
}
.field-input:user-invalid, .field-textarea:user-invalid { border-color: var(--clay-deep); }
.field-input:user-invalid + .field-error, .field-textarea:user-invalid + .field-error { display: block; }
.field-error { display: none; font-size: var(--fs-small); color: var(--clay-deep); margin-top: 6px; }
.field-textarea { min-height: 150px; resize: vertical; line-height: 1.55; }

/* ============================ RESPONSIVE ============================ */
/* The nav collapses at 940, not 860. A wrap never triggers horizontal
   overflow, so nothing catches this except measuring the link row's own
   height: one row or two.

   First measured 2026-08-26 at seven items. RE-MEASURED the same day after
   the nav dropped to five links plus the CTA (Writing hidden, Track Record
   moved to the footer, Cadence relabelled). The number did not move: the row
   still fits at 960 and wraps at 940, because "AI Implementation" is a longer
   label than the two items that left. Dropping to 880 would have wrapped it.

   Re-measure on any change to the item COUNT or to a LABEL's length, and
   measure with the collapse rule forced off. Measuring it on is a trap: the
   links are display:none below the breakpoint, so every width reports one row
   at 0px tall, which reads exactly like a pass. */
@media (max-width: 940px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper-card); border-bottom: 1px solid var(--line);
    padding: var(--sp-3) var(--pad) var(--sp-5);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 13px 0; font-size: var(--fs-body); }
  .nav-links a.active::after { display: none; }
  .nav-links a.active { color: var(--clay-deep); }
  .nav-links a.nav-cta { margin-top: var(--sp-3); text-align: center; padding: 14px; }
}

/* The footer keeps its own 860 breakpoint. Folding it in with the nav
   above would restack three columns into two at widths where they still
   fit comfortably. */
@media (max-width: 860px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .footer-inner { grid-template-columns: 1fr; gap: var(--sp-6); }
}