@import url('./tokens.css');

/*
 * Arkira web stylesheet.
 *
 * Implements Arkira + Viation Brand Specification v2.0.0 for the
 * Arkira web surface. Source spec lives at
 * ~/Developer/arkira-design-system/House Brand/arkira-viation-brand-spec.md
 *
 * Arkira web is Curtain Red dark-mode only per spec section 8. Light
 * surface tokens belong to documents and applications, not this site.
 */

/* ============================================================
 * Web fonts (spec section 3.2)
 * Drop the listed WOFF2 files into assets/fonts/.
 * Satoshi is self-host only (no CDN per spec section 8).
 * Fraunces and Source Serif 4 are variable WOFF2.
 * ============================================================ */

@font-face {
  font-family: 'Fraunces';
  src: url('../assets/fonts/fraunces-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('../assets/fonts/source-serif-4-variable.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

/* Italic faces: the design-system ships no italic variable subset, and
   adding two more variable WOFF2 files would push the payload well past
   the spec section 3.2 budget of 180kb. Pull-quote and emphasis italics
   therefore synthesize an oblique from the variable roman above. If a
   dedicated italic subset is licensed later, add the two @font-face
   blocks back (fraunces-italic-variable.woff2,
   source-serif-4-italic-variable.woff2) and the romans will defer to
   them automatically. */
@font-face {
  font-family: 'Satoshi';
  src: url('../assets/fonts/satoshi-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../assets/fonts/satoshi-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../assets/fonts/satoshi-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
 * Reset
 * ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--color-bg); min-height: 100%; }
img, video { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

/* ============================================================
 * Body and typography defaults, spec section 4 and 6
 * ============================================================ */

body {
  background: var(--color-bg);
  color: var(--color-fg);  /* body reads cream; section titles are muted */
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  letter-spacing: var(--track-body);
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-variant-ligatures: common-ligatures;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--color-fg);
}

/* H1, hero display. Fraunces in the warm-contrast "Hybrid 2" cut.
   Sizing scaled up to 48 -> 92px (2026-05-29) for magazine-cover pop
   after the earlier 32-56px cap read as too quiet. Hero and section
   openers (h2) share one cut so they no longer look like two fonts. */
h1 {
  font-family: var(--font-display);
  font-weight: 330;
  font-size: clamp(3rem, 6vw + 0.5rem, 5.75rem);  /* 48 -> 92, magazine-cover scale */
  line-height: 1.04;
  letter-spacing: -0.018em;
  /* Warm-contrast display ("Hybrid 2", approved 2026-05-29). High optical
     contrast for masthead pop, with the SOFT axis raised so the thin
     strokes are warm rather than fragile. Hero and section openers (h2)
     share this cut so they read as one family. Explicit opsz intentionally
     overrides the auto optical sizing, so we do not also declare
     font-optical-sizing: auto (it would be a no-op). */
  font-variation-settings: 'opsz' 132, 'SOFT' 18;
  text-wrap: balance;
}

/* H2, section opener. Fraunces Display Regular per spec section 7.3
   (Arkira). Discretionary ligatures on at this size and above. */
h2 {
  font-family: var(--font-display);
  font-weight: 370;
  color: var(--color-muted);  /* section titles recede; body leads in cream */
  font-size: var(--type-section);
  line-height: var(--leading-section);
  letter-spacing: -0.008em;
  /* Same warm-contrast cut as the h1 hero ("Hybrid 2"), one step down in
     weight and optical contrast so section openers read as the same family
     as the hero. Explicit opsz overrides auto optical sizing. */
  font-variation-settings: 'opsz' 100, 'SOFT' 16;
  font-variant-ligatures: common-ligatures discretionary-ligatures;
}

/* H3, subhead. Fraunces Regular at subhead size, sentence case. */
h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--type-subhead);
  line-height: var(--leading-subhead);
  letter-spacing: -0.004em;
  /* Same warm-contrast Fraunces cut as h1/h2, scaled for subhead size, so
     card titles and section openers read as one family. */
  font-variation-settings: 'opsz' 48, 'SOFT' 14;
}

h4 {
  font-family: var(--font-utility);
  font-weight: var(--weight-medium);
  font-size: var(--type-body-lg);
  line-height: 1.30;
  letter-spacing: 0;
}

p {
  margin: 0 0 var(--space-3);
}
p:last-child { margin-bottom: 0; }

a {
  color: var(--color-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}
a:hover, a:focus-visible {
  color: var(--color-link-hover);
  border-bottom-color: var(--color-accent);
}

/* Inline links in running prose read as gold at rest (obvious, no
   underline). On hover the text shifts to cream and the gold underline
   appears, which is the spec 5.1 hover behavior. Scoped to paragraph
   links, so nav, buttons, and card links keep their own treatments.
   Note: gold body-size text is a documented deviation from the spec's
   gold gating (gold not for type below 24px); contrast on Curtain Red
   measures ~4.6:1, which clears AA. */
p a {
  color: var(--arkira-gold);
  border-bottom: 0;
  text-decoration: none;
}
p a:hover, p a:focus-visible {
  color: var(--color-fg);
  border-bottom: 0;
  text-decoration: underline;
  text-decoration-color: var(--arkira-gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection {
  background: var(--arkira-gold);
  color: var(--arkira-surface-primary);
}

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

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
@media (min-width: 880px) {
  .container { padding-inline: var(--space-7); }
}
.container--lane {
  max-width: var(--container-lane);
}
.container--narrow {
  max-width: var(--container-narrow);
}
.container--prose {
  max-width: var(--container-prose);
}

/* Magazine rhythm: tighter than spec minimums for web reading.
   Spec 4.3 says section padding minimum 96px desktop / 56px mobile.
   Flagged deviation in CLAUDE.md. */
.section {
  padding-block: var(--space-5);   /* 40px mobile */
}
@media (min-width: 880px) {
  .section {
    padding-block: var(--space-6); /* 48px desktop */
  }
}

.section--tight    { padding-block: var(--space-5); }
.section--spacious { padding-block: var(--space-8); }

.stack > * + * { margin-top: var(--space-3); }
.stack-lg > * + * { margin-top: var(--space-5); }
.stack-xl > * + * { margin-top: var(--space-7); }

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--arkira-surface-secondary);
  color: var(--arkira-text-primary);
  padding: var(--space-2) var(--space-3);
  z-index: 100;
}
.skip-link:focus {
  left: var(--space-2);
  top: var(--space-2);
}

/* ============================================================
 * Eyebrows, ledes, small caps
 * ============================================================ */

.eyebrow {
  font-family: var(--font-utility);
  font-weight: var(--weight-medium);
  font-size: var(--type-small);
  line-height: 1.4;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-3);
}

.lede {
  font-family: var(--font-body);
  font-size: var(--type-body-lg);
  line-height: var(--leading-body-lg);
  color: var(--color-fg);
}

.small-caps {
  font-variant-caps: small-caps;
  letter-spacing: var(--track-nav);
}

.muted { color: var(--color-muted); }

/* Running prose holds the reading measure (spec 4.3) rather than the full
   880px column, which otherwise runs ~85 characters. */
.prose > p,
.prose > blockquote {
  max-width: var(--measure);
}

/* ============================================================
 * Section openers and rules, spec section 7.3 and 6.6
 * ============================================================ */

.section-head {
  margin-bottom: var(--space-4);  /* 32px, tightened from 48px for magazine rhythm */
}
.section-head .eyebrow {
  margin-bottom: var(--space-2);  /* eyebrow sits tight to the H2 */
}

/* Drop cap, spec section 6.3.
   Fraunces Display Light, --arkira-gold, four lines tall.
   Apply by adding class="drop-cap" to the first paragraph of a section. */
.drop-cap::first-letter {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: 5.2em;
  line-height: 0.9;
  float: left;
  margin: 0.05em 0.12em 0 0;
  color: var(--arkira-gold);
  font-feature-settings: 'lnum';
  /* Warm-contrast initial to match the new h1/h2 cut. */
  font-variation-settings: 'opsz' 144, 'SOFT' 14;
}
.section-head > h1,
.section-head > h2 {
  position: relative;
  padding-bottom: var(--space-2);
}
/* Magazine-style token rule: short hairline, not a full-column 2px slab.
   Spec 7.3 calls for 2px full column; we use a 1px short rule on web
   for editorial restraint. Flagged deviation. */
.section-head > h1::after,
.section-head > h2::after {
  content: '';
  display: block;
  width: 4rem;
  height: 1px;
  background: var(--color-accent);
  margin-top: var(--space-3);
}

.rule {
  border: 0;
  border-top: 1px solid var(--color-rule);
  margin: var(--space-7) 0;
}

/* Asterism, spec section 6.5. Used INSIDE long-form copy as a soft
   break, never as a structural divider between sections (that would
   stack onto section padding and read cavernous). */
.asterism {
  text-align: center;
  color: var(--color-accent);
  font-size: 1.5rem;
  line-height: 1;
  margin: var(--space-5) auto;
  padding: 0;
  border: 0;
}
.asterism::before { content: '\2042'; }

/* ============================================================
 * Buttons
 * ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-utility);
  font-weight: var(--weight-medium);
  font-size: var(--type-small);
  line-height: 1.2;
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--arkira-text-primary);
  background: transparent;
  border: 1px solid rgba(236, 227, 207, 0.32);  /* visible outline on Curtain Red; --color-rule (10%) reads as floating text */
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background-color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out);
}
.btn:hover, .btn:focus-visible {
  background: var(--arkira-surface-secondary);
  border-color: var(--color-accent);
  color: var(--arkira-text-primary);
}
.btn--primary {
  background: var(--arkira-surface-secondary);
  border-color: var(--color-accent);
}
.btn--primary:hover, .btn--primary:focus-visible {
  background: var(--arkira-gold);
  color: var(--arkira-surface-primary);
  border-color: var(--arkira-gold);
}

/* ============================================================
 * Site header and nav, spec section 7.5
 * ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--arkira-surface-primary);
  border-bottom: 1px solid var(--color-rule);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
}

.site-header__brand img {
  height: 36px;
  width: auto;
  display: block;
}
@media (min-width: 880px) {
  .site-header__brand img { height: 44px; }
}

.site-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--color-accent);
  border-radius: var(--radius-sm);
}
.site-nav__toggle .bar,
.site-nav__toggle .bar::before,
.site-nav__toggle .bar::after {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  position: relative;
}
.site-nav__toggle .bar::before,
.site-nav__toggle .bar::after {
  content: '';
  position: absolute;
  left: 0;
}
.site-nav__toggle .bar::before { top: -7px; }
.site-nav__toggle .bar::after  { top:  7px; }

.site-nav { display: none; }
.site-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.site-nav__link {
  font-family: var(--font-utility);
  font-weight: var(--weight-medium);
  font-size: var(--type-small);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--color-fg);
  border-bottom: 1px solid transparent;
  padding-block: var(--space-1);
}
.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}
.site-nav__link[aria-current="page"] {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.site-header__cta { display: none; }

/* Mobile drawer */
.site-nav[data-open="true"] {
  display: block;
  position: fixed;
  inset: 64px 0 0 0;
  background: var(--arkira-surface-primary);
  padding: var(--space-5) var(--space-4);
  border-top: 1px solid var(--color-rule);
}
.site-nav[data-open="true"] .site-nav__list {
  gap: var(--space-4);
}

@media (min-width: 880px) {
  .site-nav__toggle { display: none; }
  .site-nav {
    display: block;
    position: static;
    inset: auto;
    background: transparent;
    padding: 0;
    border-top: 0;
  }
  .site-nav__list {
    flex-direction: row;
    gap: var(--space-5);
  }
  .site-header__cta { display: inline-flex; }
}

/* ============================================================
 * Hero
 * ============================================================ */

/* Hero spacing: spec 7.1 says 160px minimum below hero. This site
   uses much less for magazine front-of-book rhythm. Flagged deviation. */
.hero {
  padding-top: var(--space-5);
  padding-bottom: var(--space-6);
}
@media (min-width: 880px) {
  .hero {
    padding-top: var(--space-6);
    padding-bottom: var(--space-7);
  }
}

/* Hero masthead row: small colophon at top, opposite the eyebrow.
   Magazine cover energy without imagery. */
.hero__masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-rule);
}
.hero__masthead .eyebrow {
  margin: 0;
}
.hero__colophon {
  font-family: var(--font-utility);
  font-weight: var(--weight-medium);
  font-size: var(--type-small);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--color-muted);
  text-align: right;
  margin: 0;
}
.hero__colophon span {
  display: inline-block;
  margin-left: var(--space-3);
  color: var(--color-accent);
}
@media (max-width: 600px) {
  .hero__colophon { display: none; }  /* hide colophon on small screens */
}
.hero__head { max-width: 22ch; }
.hero__subhead {
  margin-top: var(--space-4);
  max-width: 50ch;
  color: var(--color-fg);  /* lead text reads cream */
  font-size: var(--type-body-lg);
  line-height: var(--leading-body-lg);
}
.hero__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}
@media (min-width: 880px) {
  .hero__layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--space-7);
  }
}
.hero__media img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

/* ============================================================
 * Services grid
 * ============================================================ */

.services {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
/* Three-up lanes go straight from stacked to three columns (no wrapped
   two-column row), so card internals can share row tracks via subgrid and
   the title and copy baselines align across the row. */
@media (min-width: 1024px) {
  .services:not(.services--pair) {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: var(--space-5);
    row-gap: var(--space-2);
  }
  .services:not(.services--pair) > .service {
    grid-row: span 3;
    grid-template-rows: subgrid;
  }
}
/* A lane with two sub-practices balances as a full-width pair. */
@media (min-width: 768px) {
  .services--pair {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto 1fr;
    column-gap: var(--space-5);
    row-gap: var(--space-2);
  }
  .services--pair > .service {
    grid-row: span 3;
    grid-template-rows: subgrid;
  }
}

.service {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-4) var(--space-5);
  background: rgba(236, 227, 207, 0.06);   /* cream at 6% */
  border-top: 2px solid var(--color-accent); /* gold accent rule per spec 6.6 */
  border-radius: 0;
  transition: background-color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.service:hover {
  background: rgba(236, 227, 207, 0.10);
  transform: translateY(-2px);
}
/* If the service is a link card (Ledger essays), lift the link itself */
.service a {
  color: var(--color-fg);
  border-bottom: 1px solid transparent;
}
.service a:hover,
.service a:focus-visible {
  color: var(--arkira-gold);
  border-bottom-color: var(--arkira-gold);
}
.service__num {
  font-family: var(--font-utility);
  font-weight: var(--weight-medium);
  font-size: var(--type-small);
  letter-spacing: var(--track-eyebrow);
  color: var(--color-accent);
  font-variant-numeric: oldstyle-nums tabular-nums;
}
.service__name {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--type-subhead);
  line-height: var(--leading-subhead);
  margin: var(--space-1) 0 var(--space-2);
}
.service__copy {
  color: var(--color-fg);
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

/* ============================================================
 * Lane header (Services / Labs): a large gold number anchors each
 * lane and gives the page editorial pop. Number sits beside the
 * lane title on desktop, stacks above it on mobile.
 * ============================================================ */

.lane-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
@media (min-width: 720px) {
  .lane-head {
    grid-template-columns: auto 1fr;
    gap: var(--space-6);
    align-items: start;
  }
}
.lane-head__num {
  font-family: var(--font-display);
  font-weight: 330;
  font-size: clamp(3.25rem, 5vw + 1rem, 5.5rem);
  line-height: 0.86;
  letter-spacing: -0.02em;
  color: var(--color-accent);
  font-variation-settings: 'opsz' 132, 'SOFT' 18;
  font-variant-numeric: lining-nums;
}
.lane-head__body { max-width: 60ch; }
.lane-head .eyebrow { margin-bottom: var(--space-2); }
.lane-head h2 { margin-bottom: var(--space-3); }
.lane-head h2::after { content: none; }
.lane-head .lede { color: var(--color-fg); }  /* lane lede is a lead, reads cream */

/* ============================================================
 * Detail block (Services and Labs long-form)
 * ============================================================ */

.detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-rule);
}
@media (min-width: 880px) {
  .detail {
    grid-template-columns: 12rem 1fr;
    gap: var(--space-6);
  }
}
.detail__num {
  font-family: var(--font-utility);
  font-weight: var(--weight-medium);
  font-size: var(--type-small);
  letter-spacing: var(--track-eyebrow);
  color: var(--color-accent);
  text-transform: uppercase;
}
.detail__body h2 {
  font-size: var(--type-subhead);
  line-height: var(--leading-subhead);
  margin-bottom: var(--space-3);
}
.detail__body h2::after { content: none; }
.detail__body p {
  color: var(--color-fg);
  max-width: 62ch;
}

/* ============================================================
 * Further reading (Ledger essays inside a Services lane / Labs)
 * Lighter than the .service card band on Home: a hairline-topped
 * editorial list so the supporting essays sit under a lane without
 * competing with its sub-practices.
 * ============================================================ */

.reading {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-rule);
}
/* Editorial index: a gold arrow leads each row, hairline dividers stack
   the essays full width as a "more from The Ledger" list. */
.reading__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.reading__item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-3);
  row-gap: var(--space-0_5);
  padding-block: var(--space-3);
  border-top: 1px solid var(--color-rule);
}
.reading__item:last-child {
  border-bottom: 1px solid var(--color-rule);
}
.reading__item::before {
  content: '\2192';
  grid-column: 1;
  grid-row: 1;
  color: var(--color-accent);
  font-family: var(--font-utility);
  font-size: var(--type-body);
  line-height: var(--leading-subhead);
}
.reading__title {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--type-body-lg);
  line-height: var(--leading-subhead);
  letter-spacing: -0.004em;
  font-variation-settings: 'opsz' 36, 'SOFT' 14;
  color: var(--color-fg);
  width: fit-content;
  border-bottom: 0;
  transition: color var(--duration-base) var(--ease-out);
}
.reading__title:hover,
.reading__title:focus-visible {
  color: var(--arkira-gold);
}
.reading__gloss {
  grid-column: 2;
  grid-row: 2;
  color: var(--color-muted);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  max-width: 60ch;
}

/* ============================================================
 * Blockquote / pull quote, spec section 6.7 and 7.4
 * ============================================================ */

blockquote {
  margin: var(--space-7) 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-accent);
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: var(--type-subhead);
  line-height: var(--leading-pull);
  color: var(--color-fg);
}
blockquote cite {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-utility);
  font-style: normal;
  font-weight: var(--weight-medium);
  font-size: var(--type-small);
  letter-spacing: var(--track-eyebrow);
  font-variant-caps: small-caps;
  color: var(--color-muted);
}

/* ============================================================
 * Contact section + form
 * ============================================================ */

.contact {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 880px) {
  .contact { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}

.contact__channel {
  font-family: var(--font-utility);
  font-weight: var(--weight-medium);
  font-size: var(--type-small);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-1);
}
.contact__value {
  font-family: var(--font-display);
  font-size: var(--type-subhead);
  font-weight: var(--weight-regular);
  line-height: var(--leading-subhead);
  letter-spacing: -0.004em;
  font-variation-settings: 'opsz' 48, 'SOFT' 14;
}
.contact__value a { border-bottom: 1px solid var(--color-rule); }

.form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
.form label {
  display: block;
  font-family: var(--font-utility);
  font-weight: var(--weight-medium);
  font-size: var(--type-small);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-1);
}
.form input,
.form textarea {
  width: 100%;
  background: transparent;
  color: var(--color-fg);
  border: 0;
  border-bottom: 1px solid var(--color-rule);
  padding: var(--space-2) 0;
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  transition: border-color var(--duration-base) var(--ease-out);
}
.form input:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}
.form textarea { resize: vertical; min-height: 8rem; }
.form .honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form__actions { margin-top: var(--space-3); }

/* ============================================================
 * Footer
 * ============================================================ */

.site-footer {
  background: var(--arkira-surface-primary);
  border-top: 1px solid var(--color-rule);
  padding-block: var(--space-5);
  margin-top: var(--space-6);
}
.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: start;
}
@media (min-width: 880px) {
  .site-footer__inner {
    grid-template-columns: 1fr auto;
    align-items: start;  /* nav shares the brand's top line rather than floating at the bottom */
  }
}
.site-footer__brand {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--type-body-lg);
  letter-spacing: -0.004em;
  font-variation-settings: 'opsz' 36, 'SOFT' 14;
  color: var(--color-fg);
}
.site-footer__legal {
  font-family: var(--font-utility);
  font-size: var(--type-small);
  color: var(--color-muted);
  letter-spacing: var(--track-body);
}
.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-family: var(--font-utility);
  font-weight: var(--weight-medium);
  font-size: var(--type-small);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
}

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

.text-center { text-align: center; }
.text-right  { text-align: right; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}