/* ===================================================================
   IRONWOOD TECHNOLOGY GROUP — shared stylesheet
   World: "The spiral on the full plate" (approved mock v1g-d1,
   2026-08-30). The whole site is ONE continuous warm ink-dark pressed
   plate; construction lines are blind-embossed (struck twice — a
   shadow line above, a caught-light line below, no ink). Cream is
   spent exactly once per page at most: the BitClock pressed label.
   EB Garamond letterpress craft throughout.

   φ spatial scale ...... 1 · 1.618 · 2.618 · 4.236 · 6.854 (rem)
   φ type scale ......... 1.125 × √φ^n →
                          1.125 · 1.431 · 1.82 · 2.315 · 2.944 · 3.745 · 4.764
   Leading .............. 1.618
   The site is ONE LONG PAGE (index.html): the full-page embossed φ
   construction (inline script there) threads every anchored section
   and closes at its eye in the colophon. 404.html keeps the quiet
   signature — one small embossed compass-eye. SVG geometry is
   styled with PRESENTATION ATTRIBUTES in the markup, never CSS.
   =================================================================== */

:root {
  --bg: #F1EDE7;            /* the card stock — spent once, on the label */
  --ink: #2A1E1F;
  --ink-muted: #6C5A56;

  --panel: #241A1B;         /* the plate — the whole page */
  --panel-2: #2E2123;
  --on-panel: #EDE6E0;
  --on-panel-muted: #BCAAA4;  /* 7.4:1 on --panel */

  --verdi: #4C6B5F;
  --verdi-strong: #7FA396;  /* 6.1:1 on --panel */
  --verdi-deep: #3A5348;    /* 7.2:1 on --bg */

  --rule: rgba(42, 30, 31, 0.22);            /* on the card stock */
  --rule-panel: rgba(237, 230, 224, 0.22);
  --rule-panel-soft: rgba(237, 230, 224, 0.12);

  --serif: "EB Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html {
  background: var(--panel);
  scrollbar-color: var(--verdi) var(--panel-2);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* anchor targets breathe below the imprint line */
main [id] { scroll-margin-top: calc(var(--header-h) + 1.618rem); }
:root { --header-h: 5.6rem; }
@media (max-width: 700px) { :root { --header-h: 9rem; } }

body {
  margin: 0;
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* one plate; a whisper of caught light where the press bore hardest */
  background: var(--panel);
  background-image: radial-gradient(140% 640px at 50% 0%, rgba(237, 230, 224, 0.035), rgba(237, 230, 224, 0) 70%);
  color: var(--on-panel);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.618;      /* φ leading */
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  caret-color: var(--verdi-strong);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body > footer.site { margin-top: auto; }

/* -- the browser surfaces carry the world too -- */
::selection { background: var(--verdi); color: var(--bg); }
.label ::selection { background: var(--verdi-deep); color: var(--bg); }
a {
  color: inherit;
  text-decoration-color: var(--verdi-strong);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:focus-visible,
:focus-visible { outline: 2px solid var(--verdi-strong); outline-offset: 3px; border-radius: 1px; }
.label :focus-visible { outline-color: var(--verdi-deep); }
.label { caret-color: var(--verdi-deep); }

/* -- plate grain: one fixed pass of pale fibre over the whole surface -- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.93 0 0 0 0 0.9 0 0 0 0 0.88 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23p)'/%3E%3C/svg%3E");
}

/* homepage's full-page embossed construction sits under everything */
#sheet { position: absolute; top: 0; left: 0; display: block; pointer-events: none; z-index: 0; }
main, footer.site, .masthead { position: relative; z-index: 1; }
/* the menu bar rides with the reader through the anchors — same plate,
   its seam doubling as the sticky edge */
header.site {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--panel);
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
  padding-left: clamp(1.25rem, 5vw, 4rem);
  padding-right: clamp(1.25rem, 5vw, 4rem);
}

h1, h2, h3 {
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
  letter-spacing: -0.005em;
}

/* impressed type — the press left its pressure in the surface */
.impress-light {           /* light type pressed into the plate */
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.55), 0 1px 1px rgba(237, 230, 224, 0.07);
}
.impress-dark {            /* dark type pressed into the card stock */
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* small-caps utility voice of the world */
.smallcaps {
  font-variant-caps: all-small-caps;
  font-feature-settings: "smcp" 1;
}

/* vesica divider: hairline — vesica piscis — hairline */
.orn-divider {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  color: var(--verdi-strong);
}
.orn-divider::before,
.orn-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--rule-panel);
}
.orn-divider svg { flex: none; display: block; }
.divider-wrap { max-width: 34rem; margin: 0 auto; padding-inline: clamp(1.25rem, 5vw, 4rem); }

/* trinity band on the label — three circles chained centre-to-centre */
.orn-band {
  display: flex;
  justify-content: center;
  color: var(--verdi-deep);
  margin: 1.618rem auto;
}
.orn-band svg { display: block; }

/* blind-embossed score line — a rule struck into the plate, no ink */
.score {
  width: 4.236rem;
  border-top: 1px solid rgba(0, 0, 0, 0.55);
  border-bottom: 1px solid rgba(237, 230, 224, 0.14);
  margin: 1.618rem 0 0;
}

/* threshold: the double hairline scored across the plate where one
   section of the long sheet gives way to the next */
.threshold {
  border-top: 1px solid var(--rule-panel-soft);
  padding-top: 3px;
  border-bottom: 1px solid var(--rule-panel);
  margin-bottom: clamp(2.618rem, 6vw, 4.236rem);
}

/* ---------------- header : the printer's imprint line ----------------
   No panel of its own — the plate is already everywhere. */

header.site .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  padding-top: 1.4rem;
  padding-bottom: 1.4rem;
}
.wordmark {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  text-decoration: none;
}
/* the monogram plate: the I inside a vesica piscis of faint verdigris */
.plate {
  width: 2.6rem;
  height: 2.6rem;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--verdi-deep);
  box-shadow: inset 0 0 0 3px var(--panel), inset 0 0 0 4px rgba(127, 163, 150, 0.55),
              inset 0 2px 4px rgba(0, 0, 0, 0.55);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%237FA396' stroke-opacity='0.38'%3E%3Ccircle cx='23.5' cy='32' r='17'/%3E%3Ccircle cx='40.5' cy='32' r='17'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 100% 100%;
  color: var(--verdi-strong);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1;
  user-select: none;
}
.wordmark .lines { display: flex; flex-direction: column; line-height: 1.15; }
.wordmark .name {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--on-panel);
}
.wordmark .kind {
  font-variant-caps: all-small-caps;
  font-feature-settings: "smcp" 1;
  font-size: 0.95rem;
  letter-spacing: 0.28em;
  color: var(--verdi-strong);
  margin-top: 0.15rem;
}
nav.primary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem clamp(0.9rem, 2vw, 1.618rem);
}
nav.primary a {
  font-variant-caps: all-small-caps;
  font-feature-settings: "smcp" 1;
  font-size: 1.02rem;
  letter-spacing: 0.16em;
  text-decoration: none;
  color: var(--on-panel-muted);
  border-bottom: 1px solid transparent;
  padding-bottom: 0.2rem;
  white-space: nowrap;
  transition: color 0.25s ease, border-color 0.25s ease;
}
nav.primary a:hover,
nav.primary a:focus-visible { color: var(--on-panel); border-color: var(--verdi-strong); }
nav.primary a[aria-current] { color: var(--on-panel); border-color: var(--verdi); }

/* double hairline seam under the imprint — a scored line in the plate */
header.site .seam {
  border-top: 1px solid var(--rule-panel);
  padding-top: 3px;
  border-bottom: 1px solid var(--rule-panel-soft);
}

/* ---------------- hero : the broadside in its chase (homepage) ------
   At desk widths the chase is cut as a true golden rectangle — it
   stands in the construction's largest square. */

.hero { padding: clamp(1.618rem, 5vw, 2.618rem) 0 clamp(2.618rem, 6vw, 4.236rem); }
.chase {
  border: 1px solid rgba(127, 163, 150, 0.5);
  position: relative;
  padding: clamp(2.618rem, 6.5vw, 4.236rem) clamp(1.25rem, 5vw, 4.236rem);
  text-align: center;
}
@media (min-width: 960px) {
  .chase {
    aspect-ratio: 1.618 / 1;  /* the golden rectangle */
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
.chase::before {                 /* inner hairline of the double frame */
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(127, 163, 150, 0.22);
  pointer-events: none;
}
.chase .plate {
  margin: 0 auto 1.618rem;
  width: 3.2rem;
  height: 3.2rem;
  font-size: 1.8rem;
}
.hero h1 {
  font-size: clamp(2.315rem, 6.5vw, 4.764rem);
  line-height: 1.06;
  font-weight: 500;
  max-width: 17ch;
  margin-inline: auto;
  color: var(--on-panel);
}
.hero .advantage {
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.2rem, 2.4vw, 1.618rem);
  color: var(--on-panel-muted);
  margin: 1rem 0 0;
}
.hero .orn-divider {
  width: min(22rem, 100%);
  margin: 1.618rem auto;
}
.hero .tagline {
  font-variant-caps: all-small-caps;
  font-feature-settings: "smcp" 1;
  font-size: clamp(1.25rem, 2.2vw, 1.431rem);
  letter-spacing: 0.22em;
  color: var(--verdi-strong);
  margin: 0;
}

/* ---------------- creed : set statements (homepage) ---------------- */

section.creed { padding: clamp(2.618rem, 7vw, 4.236rem) 0 clamp(2.618rem, 6vw, 4.236rem); }
.creed .lede {
  font-size: clamp(1.431rem, 3.6vw, 2.315rem);
  line-height: 1.3;
  font-weight: 500;
  text-align: center;
  max-width: 26ch;
  margin: 0 auto;
  text-wrap: balance;
  color: var(--on-panel);
}
.creed .columns {
  margin-top: clamp(2.618rem, 5vw, 4.236rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.618rem, 4vw, 2.618rem);
  max-width: 62rem;
  margin-inline: auto;
}
.creed .columns > p {
  margin: 0;
  max-width: 42ch;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  color: var(--on-panel);
}
.creed .columns > p + p {
  border-left: 1px solid var(--rule-panel);
  padding-left: clamp(1.618rem, 4vw, 2.618rem);
}
.creed .columns > p::first-line { font-variant-caps: small-caps; letter-spacing: 0.04em; }
@media (max-width: 700px) {
  .creed .columns { grid-template-columns: 1fr; }
  .creed .columns > p { text-align: left; hyphens: manual; max-width: 60ch; }
  .creed .columns > p + p { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule-panel); padding-top: 1.618rem; }
}
/* the creed's set statement now speaks for Why Ironwood: the page's
   heading as the centred lede, its quote set beneath */
.creed .quote {
  font-style: italic;
  font-size: clamp(1.2rem, 2.4vw, 1.431rem);
  line-height: 1.618;
  text-align: center;
  text-wrap: balance;
  max-width: 46ch;
  margin: 2.618rem auto 0;
  color: var(--on-panel);
}

/* ---------------- the pressed label ----------------
   The page's ONE spend of cream: a card-stock label pressed onto the
   plate. Homepage flagship notice and the portfolio's BitClock card. */

section.flagship {
  position: relative;
  padding: clamp(2.618rem, 7vw, 4.236rem) 0 clamp(4.236rem, 8vw, 6.854rem);
}
section.band + section.flagship { padding-top: 0; }   /* portfolio rhythm */
/* on the long sheet the label sits inside #portfolio, after the prose */
.label-wrap { margin-top: clamp(4.236rem, 8vw, 6.854rem); }
.label {
  position: relative;
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
  background: var(--bg);
  color: var(--ink);
  padding: clamp(2rem, 5vw, 3.236rem) clamp(1.25rem, 4.5vw, 3.236rem) clamp(2.618rem, 5vw, 3.236rem);
  border: 1px solid rgba(0, 0, 0, 0.35);
  /* seated in the plate: a close dark seat and the wider bruise of the press */
  box-shadow:
    0 1px 0 rgba(237, 230, 224, 0.08),
    0 2px 5px rgba(0, 0, 0, 0.55),
    0 10px 30px rgba(0, 0, 0, 0.4);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
/* THE one authored motion moment: before the press falls, the label
   floats a few millimetres off the plate; entering view, it settles
   once — exponential ease-out, shadow drawing in. Reduced motion or
   no JS: already seated (the base state above). */
.label.unset {
  transform: translateY(-12px) scale(1.012);
  box-shadow:
    0 1px 0 rgba(237, 230, 224, 0.08),
    0 12px 18px rgba(0, 0, 0, 0.42),
    0 30px 60px rgba(0, 0, 0, 0.34);
}
.label::before {       /* the label's own scored hairline frame */
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid var(--rule);
  pointer-events: none;
}
.label h2, .label h3 {
  font-size: clamp(2.315rem, 5vw, 3.745rem);
  font-weight: 600;
  line-height: 1.08;
  color: var(--ink);
}
.label .subline {
  font-variant-caps: all-small-caps;
  font-feature-settings: "smcp" 1;
  font-size: 1.125rem;
  letter-spacing: 0.26em;
  color: var(--verdi-deep);
  margin: 0.8rem 0 0;
}
.label .body {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  max-width: 65ch;
  margin: 0 auto;
  color: var(--ink);
}
.label .body::first-letter {
  float: left;
  font-size: 3.236em;      /* 2φ */
  line-height: 0.82;
  padding: 0.06em 0.12em 0 0;
  font-weight: 500;
  color: var(--verdi-deep);
}
@media (max-width: 640px) {
  .label .body { text-align: left; hyphens: manual; }
}
.label .visit {
  display: inline-block;
  margin-top: 2.618rem;
  font-variant-caps: all-small-caps;
  font-feature-settings: "smcp" 1;
  font-size: 1.125rem;
  letter-spacing: 0.2em;
  text-decoration: none;
  color: var(--verdi-deep);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 0.55rem 1.618rem;
  transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}
.label .visit:hover,
.label .visit:focus-visible {
  color: var(--bg);
  background: var(--verdi-deep);
  border-color: var(--verdi-deep);
}

/* ---------------- masthead : interior threshold ----------------
   Each interior page opens on the same plate with its quiet
   signature — a small compass-eye blind-embossed at the right of the
   threshold (inline SVG, presentation attributes) — an over-line of
   small caps, the impressed title, and a blind-embossed score. */

.masthead { padding: clamp(2.618rem, 6vw, 4.236rem) 0 0; }
.masthead .wrap, main.notfound .wrap { position: relative; }
.sig {
  position: absolute;
  top: 0.2rem;
  right: clamp(1.25rem, 5vw, 4rem);
}
.masthead .over {
  display: block;
  font-variant-caps: all-small-caps;
  font-feature-settings: "smcp" 1;
  font-size: 1.125rem;
  letter-spacing: 0.26em;
  color: var(--verdi-strong);
  margin: 0 0 0.9rem;
}
.masthead h1 {
  font-size: clamp(2.315rem, 5vw, 3.745rem);
  line-height: 1.08;
  font-weight: 500;
  max-width: 22ch;
  color: var(--on-panel);
}

/* ---------------- interior prose : the set page ----------------
   The section head stands off the copy across a hairline cut line —
   the same rule the creed's columns share on the homepage. */

section.band { padding: clamp(2.618rem, 6vw, 4.236rem) 0 clamp(4.236rem, 8vw, 6.854rem); }
.split {
  display: grid;
  grid-template-columns: minmax(160px, 260px) 1fr;
  gap: clamp(1.618rem, 4vw, 2.618rem);
}
.split h2 {
  font-size: clamp(1.431rem, 2.4vw, 1.82rem);
  line-height: 1.2;
  font-weight: 600;
  color: var(--on-panel);
}
/* the collapsed masthead: on the long sheet each section's head carries
   the old page title as h2, its impressed statement line, and the score */
.split .sect-head h2 {
  font-size: clamp(1.82rem, 3.2vw, 2.315rem);
  line-height: 1.15;
  font-weight: 500;
}
.sect-line {
  font-style: italic;
  font-size: 1.125rem;
  color: var(--on-panel-muted);
  margin: 0.6rem 0 0;
}
.split .body-copy {
  border-left: 1px solid var(--rule-panel);
  padding-left: clamp(1.618rem, 4vw, 2.618rem);
  max-width: 62ch;
  color: var(--on-panel);
}
@media (max-width: 760px) {
  .split { grid-template-columns: 1fr; gap: 1.25rem; }
  .split .body-copy { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule-panel); padding-top: 1.618rem; }
}
.split .body-copy p { margin: 0 0 1.1em; }
.split .body-copy p:last-child { margin-bottom: 0; }
/* the opening paragraph is set as the homepage sets its label body:
   a dropped capital, the first line in small caps */
.body-copy > p.opening::first-letter {
  float: left;
  font-size: 3.236em;      /* 2φ */
  line-height: 0.82;
  padding: 0.06em 0.12em 0 0;
  font-weight: 500;
  color: var(--verdi-strong);
}
.body-copy > p.opening::first-line { font-variant-caps: small-caps; letter-spacing: 0.04em; }
.body-copy .lead-quote {
  font-size: clamp(1.431rem, 3vw, 2.315rem);
  line-height: 1.3;
  font-weight: 500;
  color: var(--on-panel);
  text-wrap: balance;
}

/* small-caps in-copy link, on the plate */
a.cta {
  font-variant-caps: all-small-caps;
  font-feature-settings: "smcp" 1;
  font-size: 1.125rem;
  letter-spacing: 0.16em;
  text-decoration: none;
  color: var(--verdi-strong);
  border-bottom: 1px solid transparent;
  padding-bottom: 0.15rem;
  transition: color 0.25s ease, border-color 0.25s ease;
}
a.cta:hover,
a.cta:focus-visible { color: var(--on-panel); border-color: var(--verdi-strong); }

/* "more to come" notice — a scored aside in the plate */
.note-coming {
  margin-top: 2.618rem;
  padding: 1.1rem 1.618rem;
  border-top: 1px solid var(--rule-panel);
  border-bottom: 1px solid var(--rule-panel-soft);
  color: var(--on-panel-muted);
  max-width: 62ch;
}
.note-coming strong { color: var(--on-panel); font-weight: 600; }

/* contact block */
.contact-block { margin: 0; max-width: 62ch; }
.contact-block dt {
  font-variant-caps: all-small-caps;
  font-feature-settings: "smcp" 1;
  font-size: 1.125rem;
  letter-spacing: 0.2em;
  color: var(--verdi-strong);
  margin-bottom: 0.4rem;
}
.contact-block dd { margin: 0 0 1.618rem; font-size: 1.2rem; overflow-wrap: anywhere; }
.contact-block dd:last-child { margin-bottom: 0; }

/* ---------------- 404 ---------------- */

main.notfound { flex: 1; display: flex; align-items: center; padding: clamp(3.5rem, 10vw, 6.854rem) 0; }
main.notfound .code {
  font-variant-caps: all-small-caps;
  font-feature-settings: "smcp" 1;
  font-size: 1.125rem;
  letter-spacing: 0.26em;
  color: var(--verdi-strong);
  margin: 0 0 1rem;
}
main.notfound h1 {
  font-size: clamp(2.315rem, 5vw, 3.745rem);
  line-height: 1.08;
  font-weight: 500;
  color: var(--on-panel);
}
main.notfound .score { margin: 1.618rem 0 1.4rem; }
main.notfound p.lead { max-width: 52ch; color: var(--on-panel-muted); margin: 0 0 2.618rem; }
a.home {
  display: inline-block;
  font-variant-caps: all-small-caps;
  font-feature-settings: "smcp" 1;
  font-size: 1.125rem;
  letter-spacing: 0.2em;
  text-decoration: none;
  color: var(--verdi-strong);
  border-top: 1px solid var(--rule-panel);
  border-bottom: 1px solid var(--rule-panel);
  padding: 0.55rem 1.618rem;
  transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}
a.home:hover,
a.home:focus-visible { color: var(--bg); background: var(--verdi); border-color: var(--verdi); }

/* ---------------- footer : the colophon ----------------
   The same plate, only scored off by a double hairline. */

footer.site { color: var(--on-panel-muted); padding: 0 0 2rem; }
footer.site .seam-top {
  border-top: 1px solid var(--rule-panel-soft);
  padding-top: 3px;
  border-bottom: 1px solid var(--rule-panel);
  margin-bottom: clamp(2.618rem, 6vw, 4.236rem);
}
footer.site .foot-top {
  display: grid;
  grid-template-columns: 1.618fr 1fr;   /* the colophon splits at φ */
  gap: 2.618rem;
  padding-bottom: 2.25rem;
  border-bottom: 1px solid var(--rule-panel-soft);
}
@media (max-width: 700px) { footer.site .foot-top { grid-template-columns: 1fr; gap: 2rem; } }
.foot-brand { display: flex; align-items: flex-start; gap: 0.9rem; }
.foot-brand .plate { width: 2.3rem; height: 2.3rem; font-size: 1.25rem; }
.foot-name {
  color: var(--on-panel);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin: 0 0 0.45rem;
}
.foot-addr { font-size: 0.95rem; margin: 0; overflow-wrap: anywhere; }
.foot-addr a { text-decoration-color: var(--verdi-strong); }
.foot-addr a:hover { color: var(--on-panel); }
footer.site nav.foot-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem 1.75rem;
  align-content: start;
}
@media (max-width: 420px) { footer.site nav.foot-nav { grid-template-columns: 1fr; } }
footer.site nav.foot-nav a {
  font-variant-caps: all-small-caps;
  font-feature-settings: "smcp" 1;
  font-size: 0.98rem;
  letter-spacing: 0.14em;
  text-decoration: none;
  color: var(--on-panel-muted);
  border-bottom: 1px solid transparent;
  width: fit-content;
  transition: color 0.25s ease, border-color 0.25s ease;
}
footer.site nav.foot-nav a:hover,
footer.site nav.foot-nav a:focus-visible { color: var(--on-panel); border-color: var(--verdi-strong); }
footer.site .legal-line {
  padding-top: 1.618rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  font-variant-numeric: oldstyle-nums;
}
footer.site .copyright { font-size: 0.85rem; letter-spacing: 0.03em; }
footer.site .disclaimer {
  font-size: 0.92rem;
  line-height: 1.65;
  max-width: 90ch;
  color: var(--on-panel-muted);   /* 7.4:1 on the plate */
  font-style: italic;
  margin: 0;
}

/* ---------------- reduced motion ---------------- */

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .label.unset { transform: none; }
}