/* ==========================================================================
   ARBITER DEFENSE GROUP / SERVICES SITE — the STONE system.
   The web form of the proposal laws (arbiter-proposals/shared/proposal.css;
   translations recorded in docs/site-laws.md). Stone paper, warm ink,
   oxblood chrome on paper, rose chrome on dark. Rules, never boxes.
   Dark #131114 is threshold-only. One column, sized by the measure.
   ========================================================================== */

/* ---- faces (self-hosted, mirrored from arbiter-proposals/shared/fonts) -- */

@font-face {
  font-family: 'EB Garamond';
  src: url('../fonts/eb-garamond.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond.woff2') format('woff2');
  font-weight: 500; /* the Medium cut — the registered display face */
  font-display: swap;
}

/* ---- baseline (pinned; auto-dark browsers can't invert us) ---- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* Stone on the root element, not only on body. The canvas takes its colour
     from html when html declares one; leaving it to body means any frame the
     UA paints before this sheet applies is the default white — and the site
     contains no white anywhere. Paired with the one-line critical style in
     every page head, which covers the frames before this file has loaded. */
  background: #ece5d6;
  color-scheme: only light;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.1875rem; /* 19px — the web body size */
  line-height: 1.4;
  color: #211d18;
  background: #ece5d6; /* stone */
  font-variant-numeric: lining-nums;
}

img,
svg {
  max-width: 100%;
}
img {
  height: auto;
  display: block;
}
a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid #8e1e2b;
  outline-offset: 3px;
}
.on-dark :focus-visible,
.dark :focus-visible {
  outline-color: #b06a72;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #ece5d6;
  color: #211d18;
  padding: 0.5em 1em;
  z-index: 10;
}
.skip-link:focus {
  left: 0;
}

/* ---- page-to-page (cross-document view transitions) ----

   Pure CSS, progressive enhancement: browsers without support navigate
   instantly and nothing else changes. Both documents must opt in, which
   they do — every page loads this sheet. Under reduced motion the
   navigation opt-in is withdrawn entirely, so the pseudo-elements below
   are never generated in the first place.

   The threshold, not a dissolve — and it is a CUT to the dark, not a dip.
   Departure is instant, arrival is gracious: the menu's close-faster-than-
   open rule (see the doors, below) applied to pages. The dark is there on
   the first frame, holds a beat, and the new page rises out of it — the
   same threshold the cover uses, spent between pages.

   The outgoing snapshot is suppressed outright rather than faded, and
   that is load-bearing, not a stylistic preference. `::view-transition-
   old(root)` intermittently carries a BLANK WHITE snapshot image: on
   8–20% of navigations (26 of 224 measured) the pseudo-element's image
   is pure white pixels instead of the page it is supposed to be holding.
   It is Chrome's bug, not ours — it reproduces on a twelve-line two-page
   test with no fonts, images, scripts or site CSS — and no authored CSS
   on either document can reach it: `html` background, an inline critical
   style, and a `background-color` on the pseudo itself were each tinted a
   different colour and the fading layer stayed pure white through all
   three. So any rule that paints that snapshot, at any opacity, will show
   white about one navigation in six. The only structural fix is never to
   paint it. Verified at 0 flashes in 72 navigations across three page
   pairs (verdict 2026-08-01, ratified). Do not reintroduce a fade on
   `old(root)` to "restore the dip" — the dip is what the bug rides in on.

   The earlier plus-lighter fix still holds and is why `new(root)` keeps
   an explicit `animation` SHORTHAND: the shorthand drops the UA animation
   list, and with it the `-ua-mix-blend-mode-plus-lighter` pairing that
   made a plain crossfade additive. With `old(root)` gone there is no
   second layer left to blend against in any case.

   240ms total (180ms rise after a 60ms hold on the dark), inside the
   300ms budget. */

@view-transition {
  navigation: auto;
}

::view-transition {
  background-color: #131114;
}

::view-transition-old(root) {
  animation: none;
  opacity: 0;
}

::view-transition-new(root) {
  animation: vt-in 180ms ease-out 60ms both;
}

@keyframes vt-in {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

/* ---- the column (measure-governed; one column for everything) ---- */

.col {
  max-width: 41rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* chrome column: masthead + footer run wider than the measure so the
   nav fits inside the ruled width (round-1 verdict: the hairline must
   reach the full chrome edge — nav never overhangs the rule) */
.chrome {
  max-width: 56rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

p {
  max-width: 65ch;
  margin-bottom: 0.75em;
}

p.lead {
  font-size: 1.12em;
  line-height: 1.38;
  margin-bottom: 0.9em;
}

/* ---- chrome registers ---- */

.kicker {
  font-size: 0.7em;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #8e1e2b; /* oxblood chrome on paper */
  margin: 0 0 0.9em;
}

h1,
h2,
h3 {
  font-family: 'Cormorant Garamond', 'EB Garamond', serif;
  font-weight: 500;
  line-height: 1.15;
  margin: 1.4em 0 0.4em;
}

.kicker + h1,
.kicker + h2,
.kicker + h3 {
  margin-top: 0;
}

h1 {
  font-size: 2.3em;
}
h2 {
  font-size: 2em;
}
h3 {
  font-size: 1.6em;
}

/* ---- sections ---- */

.section {
  padding: 4.5rem 0 3.2rem;
}

.section + .section {
  padding-top: 0;
}

.hairline {
  border: 0;
  border-top: 1px solid #d6cdb8;
  margin: 0;
}

/* ---- the dark thresholds (entry + at most one mid-page) ---- */

.dark {
  background: #131114;
  color: #cfc9bd; /* dimmed body on dark; full ivory only at display size */
}

.dark .kicker {
  color: #b06a72; /* rose chrome on dark */
}

.dark h1,
.dark h2,
.dark h3 {
  color: #e8e4da;
}

.dark .hairline {
  border-top-color: #37333a;
}

/* ---- the cover (the homepage's dark entry; settled round 2c) ---- */

.cover {
  min-height: min(100vh, 56rem);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.5rem;

  /* The surface: a lift and a grain, so the field reads as a material rather
     than as a fill. #131114 alone is a flat digital value under an
     engraved-plate composition, and on a large screen that mismatch is what
     reads as unfinished. Settled 2026-08-02 against four other candidates
     (centred lift, top-down lift, corner vignette, coarser grains); the
     verdict and what was rejected are in docs/site-laws.md.

     Both layers ride on .cover's own `background-image` rather than on
     ::before/::after. Pseudo-elements would need `position: absolute`, which
     paints them over the in-flow .stacked and .title and forces a z-index on
     each — new stacking contexts on the two elements the cover intro
     animates, for no gain. Layered backgrounds change no boxes at all.

     The grain's opacity is baked into the SVG (on the rect) for the same
     reason: a layer in a background list can't carry its own opacity, and
     the alternative is the pseudo-element this exists to avoid.

     LIFT — anchored on the lockup at 50% 43%, not the geometric centre: the
     light should find the mark, and the falloff is what stops the sides
     reading as unused space. 6% toward the dark-surface ink (#cfc9bd), never
     toward neutral grey, which lands cold and pulls away from the stone the
     page returns to below the fold.

     GRAIN — fractal noise at 1px, the finest rung, at 3%. Grain size is set
     by the tile's user space (the viewBox), NOT by baseFrequency: frequency
     is in user units, so varying it against a 1:1 space just walks along the
     resolution limit and every value comes back as the same per-pixel static
     (measured: correlation at a 2px lag of 0.00 across 0.9 / 0.62 / 0.34).
     Coarser rungs mean a smaller viewBox, not a smaller frequency.

     The noise is a mid-grey layer, so it also raises the black point:
     measured mean luminance 93.6/255 puts the corner of the field at
     #161417 rather than #131114. That lift is part of the effect, but it is
     why the grain can't be turned up freely — past roughly 8% the field
     greys out instead of gaining tooth.

     ~450 bytes, no request, no JS. */
  background-color: #131114;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.03'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 60% 46% at 50% 43%, #1e1c1e 0%, #131114 70%);
  background-size:
    180px 180px,
    auto;
}

.cover .stacked {
  /* Scales with the field on desktop and holds at the 1920 value. The cover's
     height is capped at 56rem, so an uncapped vw slope eventually runs the
     composition into the ceiling: measured at 2560, the mark's top lands 1px
     under the link row and the cover overflows to 914px. The cap is forced by
     that, not chosen. Below ~848px the 15rem floor wins and the phone is
     untouched (verified byte-identical at 375 / 390 / 430). */
  width: clamp(15rem, 28.3vw, 34rem);
  color: #cfc9bd;
}

.cover .stacked svg {
  width: 100%;
  height: auto;
  max-width: none;
  display: block;
}

.cover .title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(1.35rem, 3.59vw, 4.31rem);
  line-height: 1.35;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: #e8e4da;
  max-width: 26em;
  margin-top: clamp(2.6rem, 4.91vw, 5.9rem);
  --hy-ink: #e8e4da;
}

/* The caps hyphen (the middot lesson again). Cormorant's hyphen is cut for
   lowercase: it centers on the x-height and carries the face's oblique cut,
   so between caps at display size it sits low and reads tilted. The face
   ships no case-sensitive forms. The face's own minus (U+2212) is dead
   straight; it is overlaid at cap-center (measured: minus ink-center sits
   0.123em below cap-center at this weight) while the real hyphen stays in
   the text, transparent, for selection and screen readers. Ink comes via
   --hy-ink because the span's transparent color would swallow currentColor. */
.hy {
  position: relative;
  color: transparent;
}
.hy::after {
  content: '\2212';
  position: absolute;
  left: 50%;
  top: -0.123em;
  transform: translateX(-50%);
  color: var(--hy-ink, #211d18);
}

.cover-links {
  position: absolute;
  top: 2.1rem;
  right: 2.3rem;
  z-index: 5;
  display: flex;
  gap: 1.6rem;
}

.cover-links a {
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  color: #a29c92;
}

.cover-links a:hover {
  color: #e8e4da;
}

.cover-links a.cta {
  color: #b06a72;
}

.menu-btn {
  position: absolute;
  top: 2.1rem;
  right: 2.3rem;
  z-index: 5;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #a29c92;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.3rem 0.2rem;
}

.menu-btn:hover {
  color: #e8e4da;
}

/* ---- the cover intro — "the impression" ----

   The rule draws, the ink settles into it, the title rises last.
   Runs once per session; ?intro=1 forces a replay. The class is set on
   .cover by the inline script in index.html before first paint. Nothing
   here blocks input: the page scrolls and the nav links answer
   throughout, and .cover-links / .menu-btn never animate. Under reduced
   motion none of this exists and the cover renders in its final state.

   Total 1.15s (600ms title delay + 550ms title), inside the 1.2s
   motion budget. */

@media (prefers-reduced-motion: no-preference) {
  /* fill-mode is `backwards`, never `both`, throughout: a filling-forwards
     animation holds its element on a composited layer after it finishes,
     which switches text off subpixel antialiasing — the cover would then
     render measurably differently on the intro visit than on every visit
     after it. `backwards` covers the delay and releases the property on
     completion. Same reason stroke-dasharray lives inside the keyframes
     rather than on the rule: left declared, it survives the animation and
     re-renders the hairline through dash logic forever. */
  .cover.intro .stacked .rule {
    animation: intro-rule 400ms ease-out backwards;
  }

  .cover.intro .stacked .ink {
    transform-box: fill-box;
    transform-origin: center;
    animation: intro-ink 500ms ease-out 150ms backwards;
  }

  /* The title waits for the ink to settle (150 + 500 = 650ms) rather
     than overlapping it, and travels a short 5px on a long-tail ease:
     the first tuning started at 500ms and ran 400ms over 8px, which
     read as rushed against the deliberate rule-draw. */
  .cover.intro .title {
    animation: intro-title 550ms cubic-bezier(0.22, 1, 0.36, 1) 600ms
      backwards;
  }

  @keyframes intro-rule {
    from {
      stroke-dasharray: 480; /* the line's own length, x1 60 → x2 540 */
      stroke-dashoffset: 480;
    }
    to {
      stroke-dasharray: 480;
      stroke-dashoffset: 0;
    }
  }

  @keyframes intro-ink {
    from {
      opacity: 0;
      transform: scale(0.985);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes intro-title {
    from {
      opacity: 0;
      transform: translateY(5px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}

@media (max-width: 640px) {
  .cover-links {
    display: none;
  }
}

@media (min-width: 641px) {
  .cover > .menu-btn {
    display: none;
  }
}

/* ---- the scrolled-in masthead ---- */

.scroll-masthead {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: #131114;
  border-bottom: 1px solid #37333a;
  transform: translateY(-100%);
  transition: transform 0.28s ease;
}

.scroll-masthead.shown {
  transform: translateY(0);
}

.scroll-masthead .bar {
  max-width: 56rem;
  margin: 0 auto;
  padding: 0.8rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}

.scroll-masthead .lockup {
  display: block;
  color: #cfc9bd;
  width: 160px;
  flex: none;
}

.scroll-masthead .lockup svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

.scroll-masthead nav {
  display: flex;
  gap: 1.6rem;
  align-items: baseline;
}

.scroll-masthead nav a {
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  color: #a29c92;
}

.scroll-masthead nav a:hover {
  color: #e8e4da;
}

.scroll-masthead nav a.cta {
  color: #b06a72;
}

.scroll-masthead .menu-btn {
  position: static;
}

@media (min-width: 641px) {
  .scroll-masthead .menu-btn {
    display: none;
  }
}

@media (max-width: 640px) {
  .scroll-masthead nav {
    display: none;
  }
}

/* ---- the menu room (frame stays here; cover lost its own) ---- */

/* The room is always laid out; only its threshold changes. Closed is
   visibility:hidden (unfocusable, click-transparent) rather than
   display:none, so the state is transitionable. This base pair carries
   the whole show/hide on its own — reduced-motion and no-support
   browsers get an instant, working menu without the motion block. */
.menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #131114;
  display: flex;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.menu.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.menu .frame {
  position: absolute;
  inset: 1.1rem;
  border: 1px solid #37333a;
  pointer-events: none;
}

.menu .close-btn {
  position: absolute;
  top: 2.1rem;
  right: 2.3rem;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #a29c92;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.3rem 0.2rem;
}

.menu .close-btn:hover {
  color: #e8e4da;
}

.menu nav {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.menu nav a {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: #cfc9bd;
}

.menu nav a:hover {
  color: #e8e4da;
}

.menu nav a.cta {
  color: #b06a72;
}

body.menu-locked {
  overflow: hidden;
}

/* ---- the menu room, in motion (law: only thresholds animate) ----

   The doors close faster than they open: 240ms out, 150ms back. The
   visibility transition-delay trick holds the room addressable while
   it fades and drops it the instant the fade completes. */

@media (prefers-reduced-motion: no-preference) {
  /* CLOSE — opacity 150ms ease-in; visibility flips at the end. */
  .menu {
    transition:
      opacity 150ms ease-in,
      visibility 0s linear 150ms;
  }

  /* OPEN — opacity 240ms ease-out; visibility flips immediately. */
  .menu.open {
    transition:
      opacity 240ms ease-out,
      visibility 0s linear 0s;
  }

  /* the engraved frame: the room's lights come up */
  .menu .frame {
    opacity: 0;
    transform: scale(1.015);
    transition:
      opacity 300ms ease-out,
      transform 300ms ease-out;
  }

  .menu.open .frame {
    opacity: 1;
    transform: scale(1);
  }

  /* the five links, in order */
  .menu nav a {
    opacity: 0;
    transform: translateY(6px);
    transition:
      opacity 260ms ease-out,
      transform 260ms ease-out;
  }

  .menu.open nav a {
    opacity: 1;
    transform: none;
  }

  .menu.open nav a:nth-child(1) {
    transition-delay: 0ms;
  }
  .menu.open nav a:nth-child(2) {
    transition-delay: 30ms;
  }
  .menu.open nav a:nth-child(3) {
    transition-delay: 60ms;
  }
  .menu.open nav a:nth-child(4) {
    transition-delay: 90ms;
  }
  .menu.open nav a:nth-child(5) {
    transition-delay: 120ms;
  }
}

/* ---- the photo band (warm-mono plate; EP comp stand-in) ---- */

.photo-band .plate img {
  height: 21rem;
  width: 100%;
  object-fit: cover;
  filter: grayscale(1) sepia(0.18) contrast(1.02);
}

@media (max-width: 640px) {
  .photo-band .plate img {
    height: 13rem;
  }
}

/* ---- masthead ---- */

.masthead {
  padding: 1.4rem 0 1.1rem;
}

.masthead .inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  border-bottom: 1px solid #37333a;
  padding-bottom: 1.1rem;
}

.masthead .lockup {
  display: block;
  color: #cfc9bd;
  width: 138px; /* 1300:340 viewBox at 36px tall */
  flex: none;
}

.masthead .lockup svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

.masthead nav {
  display: flex;
  gap: 1.6rem;
  align-items: baseline;
}

.masthead nav a {
  font-size: 0.68em;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  color: #a29c92;
}

.masthead nav a:hover {
  color: #e8e4da;
}

.masthead nav a.cta {
  color: #b06a72;
}

/* ---- hero ---- */

.hero {
  padding: 5rem 0 5.5rem;
}

.hero h1 {
  font-size: clamp(2.4rem, 6vw, 3.3rem);
  max-width: 14em;
  margin: 0 0 0.55em;
}

.hero .lead {
  color: #cfc9bd;
}

/* ---- links in copy ---- */

.caps-link {
  display: inline-block;
  font-size: 0.7em;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  color: #8e1e2b;
  border-bottom: 1px solid rgba(142, 30, 43, 0.35);
  padding-bottom: 0.15em;
  margin-top: 0.6em;
}

.caps-link:hover {
  border-bottom-color: #8e1e2b;
}

.dark .caps-link {
  color: #b06a72;
  border-bottom-color: rgba(176, 106, 114, 0.4);
}

.dark .caps-link:hover {
  border-bottom-color: #b06a72;
}

/* ---- the quiet list (law 15: at most three, full width, hairlines) ---- */

.feature-list {
  margin: 1.5em 0 0;
}

.feature-list .feature {
  padding: 1.4em 0;
  border-top: 1px solid #d6cdb8;
}

.feature-list .feature:first-child {
  border-top: none;
  padding-top: 0.6em;
}

.feature h3 {
  font-size: 1.35em;
  margin: 0 0 0.35em;
}

.feature h3 a {
  text-decoration: none;
}

.feature h3 a:hover {
  color: #8e1e2b;
}

.feature p {
  color: #464035;
  margin-bottom: 0;
}

/* ---- two-column burst grid (data register; fragments legal here) ---- */

.cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5em 2.2rem;
  margin: 1.8em 0 0;
}

.cols-2 .entry h3 {
  font-size: 1.15em;
  margin: 0 0 0.25em;
}

.cols-2 .entry p {
  font-size: 0.92em;
  line-height: 1.45;
  color: #464035;
  margin: 0;
}

@media (max-width: 640px) {
  .cols-2 {
    grid-template-columns: 1fr;
    gap: 1.4em 0;
  }
}

/* ---- tables: ledger grammar ---- */

table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.4em 0 1.75em;
  font-size: 0.9em;
  font-variant-numeric: lining-nums tabular-nums;
  border-bottom: 1px solid #b3a789; /* closed ledger */
}

th {
  font-size: 0.78em;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #6e6759;
  font-weight: normal;
  text-align: left;
  padding: 0 0 0.45em;
  border-bottom: 1px solid #b3a789;
}

td {
  padding: 0.7em 0;
  vertical-align: top;
  border-top: 1px solid #d6cdb8;
  color: #464035;
  line-height: 1.45;
}

table tr:first-child td {
  border-top: none;
}

table.timeline td:first-child {
  width: 7.2em;
  white-space: nowrap;
  color: #211d18;
  padding-right: 1.2em;
}

/* ---- plates & imagery (law 19: float mount, captions label objects) ---- */

.plate {
  border: 1px solid #b3a789;
  padding: 4px; /* the page-colored gap inside the rule */
  background: #ece5d6;
}

.screens-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin: 2.2em 0 0;
}

.plate-caption {
  font-size: 0.65em;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #6e6759;
  text-align: center;
  margin-top: 0.55em;
  max-width: none;
}

/* ---- the note register (the centered opt-out) ---- */

.note {
  font-size: 0.8em;
  color: #6e6759;
  text-align: center;
  max-width: none;
  margin: 1.6em auto 0;
}

/* ---- the closing statement (anchored close, heavy anchor) ---- */

.statement-rule {
  border: 0;
  border-top: 1px solid #b3a789;
  width: 3.6rem;
  margin: 0 0 1.1em;
}

.statement {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 1.5em;
  line-height: 1.3;
  color: #211d18;
  max-width: 24em;
  margin-bottom: 0.4em;
}

/* ---- footer ---- */

footer {
  padding: 2.6rem 0 2.8rem;
}

footer .inner {
  border-top: 1px solid #b3a789;
  padding-top: 2rem;
}

footer .lockup {
  display: block;
  color: #211d18;
  width: 118px;
}

footer .lockup svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  margin: 1.5rem 0 1.6rem;
}

footer nav a {
  font-size: 0.68em;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  color: #6e6759;
}

footer nav a:hover {
  color: #211d18;
}

.legal-line {
  font-size: 0.72em;
  letter-spacing: 0.04em;
  color: #6e6759;
  max-width: none;
  margin: 0;
}

/* ---- phone ---- */

@media (max-width: 640px) {
  body {
    font-size: 1.125rem; /* 18px on the small screen */
  }

  .col {
    padding: 0 1.25rem;
  }

  .masthead nav a {
    display: none;
  }

  .masthead nav a.cta {
    display: inline;
  }

  .hero {
    padding: 3.6rem 0 4rem;
  }

  .section {
    padding: 3.4rem 0 2.6rem;
  }

  .screens-row {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding-bottom: 0.6rem;
    -webkit-overflow-scrolling: touch;
  }

  .screens-row figure {
    flex: 0 0 68%;
    min-width: 0;
    scroll-snap-align: center;
  }

  /* flex-wrap reads jumbled at phone width; a fixed two-column grid
     keeps the seven footer links on a legible ledger */
  footer nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem 1.5rem;
  }
}

/* ---- static masthead for interior pages (dark strip, always visible) ---- */

.masthead-static {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #131114;
  border-bottom: 1px solid #37333a;
}

.masthead-static .bar {
  max-width: 56rem;
  margin: 0 auto;
  padding: 0.8rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}

.masthead-static .lockup {
  display: block;
  color: #cfc9bd;
  width: 160px;
  flex: none;
}

.masthead-static .lockup svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

.masthead-static nav {
  display: flex;
  gap: 1.6rem;
  align-items: baseline;
}

.masthead-static nav a {
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  color: #a29c92;
}

.masthead-static nav a:hover {
  color: #e8e4da;
}

.masthead-static nav a.cta {
  color: #b06a72;
}

.masthead-static .menu-btn {
  position: static;
}

@media (min-width: 641px) {
  .masthead-static .menu-btn {
    display: none;
  }
}

@media (max-width: 640px) {
  .masthead-static nav {
    display: none;
  }
}