/* Section styles — §1 Hero, §2 Thesis (steps 3) */

/* Screenshot mode: use with ?compact=1 */
body.is-compact .hero { min-height: 900px; }

/* ============ §1 HERO ============ */
/* Photo-led hero: the jacket fills the fold, an even ink veil sits over it,
   and the type (eyebrow → h1 → tagline, plus the pinned scroll hint) rides
   on top, centred. */
.hero {
  position: relative;
  min-height: 100svh;
  background-color: var(--ink);
  color: #F0EDE8;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: calc(var(--header-h) + clamp(1rem, 2.5vh, 2rem))
           clamp(1.25rem, 4vw, 3rem)
           clamp(3.5rem, 7vh, 5rem); /* bottom room for pinned scroll hint */
}

.hero__inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(1rem, 2vh, 1.75rem);
  width: 100%;
  opacity: 0;
  transform: translateY(6px);
  animation: heroFadeIn 1200ms var(--ease-out) 120ms forwards;
}

@media (prefers-reduced-motion: reduce) {
  .hero__inner {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

@keyframes heroFadeIn {
  to { opacity: 1; transform: translateY(0); }
}

.hero__eyebrow {
  margin: 0;
  color: var(--gold);
  max-width: 100%;
  overflow-wrap: break-word;
}

/* The old ramp topped out at 2.75rem because the headline was a 25–28
   character sentence per line. The copy is now a two-beat declaration —
   longest line 6.72em in en, 5.04em in ja — and at 2.75rem it sat in the
   middle of a full-bleed photograph looking like a caption. 8vw is the
   brief's step-5 slope; the 4.25rem cap is where the fold reads as
   headline-led without the type starting to shout. */
.hero__h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 8vw, 4.25rem);
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: #F0EDE8;
  max-width: 46rem;
}
.hero__h1 span { display: block; }

/* English hero headline is set in caps. Scoped to lang-en: text-transform is
   a no-op on kana and kanji, but the wider tracking and lower floor below are
   not, so ja must not inherit any of it.
   The string in content.en.json stays sentence case — assistive technology
   reads the DOM text, and words in caps can be announced letter by letter.
   Tracking goes 0.02em → 0.05em: caps sit on a common baseline with no
   ascender/descender variation, so the default fit reads tight.
   The floor drops 2rem → 1.65rem for en only. Caps plus tracking take the
   long line from 6.93em to 8.45em; at 2rem that leaves 0.16 of a character
   either side at 320px, which is the same too-close-to-the-edge margin the
   offer heading was just moved off. At 1.65rem it is 1.08 characters. */
body.lang-en .hero__h1 {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: clamp(1.65rem, 8vw, 4.25rem);
}
/* CJK: keep each authored line on one line by avoiding mid-run breaks. */
body.lang-ja .hero__h1 span {
  word-break: keep-all;
  overflow-wrap: normal;
}
/* Japanese needs its own ramp below the tablet breakpoint. Each authored line
   is 14 full-width characters — roughly 14em — where the English lines are
   nearer 8em at the same size, so the shared clamp overflowed the margins and
   keep-all (correctly) refused to break mid-phrase. 5.4vw leaves ~10% of the
   padded width spare at 320px — enough that a different CJK fallback (Hiragino
   vs Yu Gothic vs Noto, none of which we control) can be wider than the one
   measured here without overflowing. The 1.72rem cap meets the desktop ramp's
   value at 768px so there is no step at the breakpoint. */
/* No ja-specific ramp any more. It existed because the old ja headline ran to
   14 full-width characters — about 14em — against 8em of English, so one
   clamp could not serve both. The new lines are 5.04em in ja against 6.72em
   in en, so English is now the wider of the two and the shared ramp is sized
   by it. Keep this in mind if the ja copy grows again. */

/* The fold is 100svh at every width. It was briefly capped at 56svh on phones
   to keep both sleeves in frame — the jacket spans the master edge to edge, so
   a full-width crop needs a box no taller than width ÷ 0.8. On an iPhone that
   read as a photo block sitting above a field of ink, which undoes the reason
   the hero went full-bleed at all. The sleeves are the cheaper thing to lose:
   the chest-to-hip band that survives carries the snap placket, the melton
   against the lacquered leather, and the rib, and that is enough to say
   varsity. See the design brief §1. */

/* Full-bleed background layer. Source master is 800×1000, so at this size it
   is being upscaled — see the note in the design brief §8 on reshooting or
   re-exporting a wider master. */
.hero__photo {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
  overflow: hidden;
}
.hero__photo > img,
.hero__photo > picture,
.hero__photo > picture > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
/* Narrow screens crop tall: bias upward so the chest and collar stay in
   frame rather than centring on the hem. */
@media (max-width: 767px) {
  .hero__photo > img,
  .hero__photo > picture > img {
    object-position: 50% 30%;
  }
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: rgba(10, 10, 10, 0.45);
  pointer-events: none;
}

.hero__tagline {
  margin: 0;
  max-width: 32rem;
  font-family: var(--font-body-en);
  font-weight: 300;
  font-size: var(--step-1);
  line-height: 1.5;
  color: rgba(240, 237, 232, 0.72);
}
body.lang-ja .hero__tagline { font-family: var(--font-body-ja); }

@media (max-width: 480px) {
  .hero__eyebrow {
    letter-spacing: 0.08em;
    font-size: 0.7rem;
  }
  .site-header__cta { padding: 0.55em 1em; }
  .site-header__nav { gap: 0.75rem; }
}

.hero__scroll {
  position: absolute;
  z-index: 2; /* above .hero__scrim */
  bottom: clamp(1.5rem, 4vh, 2.5rem);
  left: 50%;
  transform: translateX(-50%);
  /* left:50% with no right leaves only half the hero as available width, so
     the longer ja string wrapped at 320px. It is one short line by design. */
  white-space: nowrap;
  font-family: var(--font-utility);
  font-weight: 500;
  font-size: var(--step-0);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(240, 237, 232, 0.4);
  margin: 0;
  opacity: 0;
  animation: scrollFadeIn 1400ms var(--ease-out) 900ms forwards;
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll { animation: none; opacity: 1; }
}

@keyframes scrollFadeIn {
  to { opacity: 1; }
}

/* ============ §2 THESIS ============ */
.thesis {
  background-color: var(--ink);
  color: #E9E7E3;
  padding: var(--space-section) clamp(1.25rem, 4vw, 3rem);
  display: flex;
  justify-content: center;
}

.thesis__inner {
  max-width: var(--measure);
  width: 100%;
  text-align: center;
}

.thesis__question {
  margin: 0 0 clamp(2rem, 4vh, 3rem);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-3);
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: #F0EDE8;
}

.thesis__para {
  margin: 0;
  font-family: var(--font-body-en);
  font-weight: 300;
  font-size: var(--step-2);
  line-height: 1.5;
  color: rgba(240, 237, 232, 0.82);
}

.thesis__para + .thesis__para {
  margin-top: var(--space-block);
}

.thesis__para--em {
  font-style: italic;
  color: rgba(240, 237, 232, 0.95);
  line-height: 1.45;
}

/* ============ §3 THE REVEAL ============ */
/* Sticky 300vh scroll region. Two panels split left/right revealing a
   solid --crimson placeholder that will be swapped for the Kyo-ori
   jacquard image (either an <img> inside .reveal__sticky or via
   background-image on .reveal__bg). */

.reveal {
  position: relative;
  height: 300vh;
  background: var(--ink);
}

.reveal__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--ink);
}

.reveal__bg {
  position: absolute;
  inset: 0;
  /* Kept as the fallback ground under the <picture> so the sticky
     stage is never flash-black before the image decodes. */
  background-color: var(--crimson);
  opacity: 1;
  transform: scale(var(--reveal-bg-scale, 1.05));
  transform-origin: center;
  will-change: transform;
}

.reveal__bg > picture,
.reveal__bg > picture > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Ink band under the copy only — the top 60% of the photo stays untouched so
   the crimson and gold keep their strength. Hard top edge, one even value:
   a gradient would read as a lighting effect on the fabric. Sits outside
   .reveal__bg so the bg's scale animation doesn't drag it. */
.reveal__scrim {
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  z-index: 1;
  background-color: rgba(10, 10, 10, 0.55);
  pointer-events: none;
}

.reveal__panels {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 2;
  pointer-events: none;
}

.reveal__panel {
  flex: 1 1 50%;
  background-color: var(--ink);
  will-change: transform;
}

/* Panels use --reveal-panel-x (0 → 1.05, driven by JS) so they retract
   fully — with a small overshoot — well before scroll progress hits 1.
   That gives a long "settled" state where crimson fills the viewport. */
.reveal__panel--left  { transform: translate3d(calc(var(--reveal-panel-x, 0) * -100%), 0, 0); }
.reveal__panel--right { transform: translate3d(calc(var(--reveal-panel-x, 0) *  100%), 0, 0); }

/* Bottom-left, inside the page margins. Centred copy landed on the name tag
   woven into the middle of the photo, where white-on-white killed it. */
.reveal__copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  text-align: left;
  padding: 0 clamp(1.25rem, 4vw, 3rem) clamp(3rem, 10vh, 6rem);
  z-index: 3;
  opacity: var(--reveal-copy-opacity, 0);
  pointer-events: none;
}

.reveal__h {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-4);
  letter-spacing: 0.02em;
  line-height: 1;
  margin: 0;
  color: #F0EDE8;
}

.reveal__sub {
  /* Wide gap — at the old spacing the two blocks fused into one mass
     against the woven pattern. */
  margin: clamp(2rem, 5vh, 3.25rem) 0 0;
  font-family: var(--font-body-en);
  font-weight: 300;
  font-size: var(--step-1);
  line-height: 1.6;
  color: rgba(240, 237, 232, 0.9);
  max-width: 32rem;
}

.reveal__sub span { display: block; }

/* Reduced motion: no sticky, no panels; degrade to a static crimson
   panel with the copy visible, following the design brief. */
@media (prefers-reduced-motion: reduce) {
  .reveal { height: auto; }
  .reveal__sticky { position: static; height: 100svh; }
  .reveal__bg { opacity: 1; transform: none; }
  .reveal__panels { display: none; }
  .reveal__copy { opacity: 1; }
}

/* ============ Placeholder swatch ============ */
/* Shared visual language for image/video placeholders. Real assets are
   dropped in by replacing the placeholder <div> with a <picture> or by
   setting background-image; see swap comments next to each usage. */
[data-ph] {
  position: relative;
  background-color: #DAD5CE;
  background-image:
    repeating-linear-gradient(45deg,
      rgba(0, 0, 0, 0.03) 0 10px,
      rgba(0, 0, 0, 0)   10px 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ============ §4 FILM (crimson → bone) ============ */
.film {
  /* crimson at top continues the §3 Reveal palette, then transitions
     into the bone territory that carries §5–§6. */
  background: linear-gradient(
    180deg,
    var(--crimson) 0%,
    var(--crimson) 18%,
    var(--bone)    58%,
    var(--bone)   100%
  );
  padding: var(--space-section) clamp(1.25rem, 4vw, 3rem);
}
.film__inner { max-width: 72rem; margin: 0 auto; }

.film__player {
  position: relative;
  margin: 0 0 clamp(1.5rem, 3vh, 2.5rem);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--ink);
}
.film__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background-color: var(--ink);
  z-index: 1;
}
.film__ph {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-color: #1A1A1A;
  background-image:
    repeating-linear-gradient(45deg,
      rgba(255, 255, 255, 0.07) 0 10px,
      rgba(255, 255, 255, 0)   10px 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 240ms var(--ease-out);
}
.film__ph[hidden] { display: none; }
.film__ph-mark {
  color: rgba(240, 237, 232, 0.55);
  font-family: var(--font-utility);
  font-weight: 500;
  font-size: var(--step-0);
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.film__link {
  text-align: center;
  margin: 0;
}
.film__link a {
  font-family: var(--font-utility);
  font-weight: 500;
  font-size: var(--step-0);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(0, 0, 0, 0.3);
}

/* ============ §5 FOUR REGIONS (bone, 2×2) ============ */
.regions {
  background-color: var(--bone);
  color: var(--paper-ink);
  padding: var(--space-section) clamp(1.25rem, 4vw, 3rem);
}
.regions__inner { max-width: 72rem; margin: 0 auto; }

.regions__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem) clamp(1.5rem, 3vw, 3rem);
}
@media (max-width: 720px) {
  .regions__grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

.region { margin: 0; }
.region__figure { margin: 0; }
.region__img { aspect-ratio: 4 / 5; }
.region__img > img,
.region__img > picture,
.region__img > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.region__ph-mark {
  color: var(--gold);
  font-family: var(--font-utility);
  font-weight: 500;
  font-size: var(--step-0);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.region__cap { margin-top: clamp(0.85rem, 1.5vh, 1.25rem); }
.region__place {
  font-family: var(--font-utility);
  font-weight: 500;
  font-size: var(--step-0);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-ink);
  margin: 0 0 0.4rem;
}
.region__body {
  margin: 0;
  font-family: var(--font-body-en);
  font-weight: 300;
  font-size: var(--step-1);
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.7);
}

/* ============ §6 THE DETAILS (bone, alternating) ============ */
.details {
  background-color: var(--bone);
  color: var(--paper-ink);
  padding: 0 clamp(1.25rem, 4vw, 3rem) var(--space-section);
}
.details__inner { max-width: 72rem; margin: 0 auto; }

.detail {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
  margin: 0 0 clamp(3rem, 8vh, 6rem);
}
.detail:last-of-type { margin-bottom: 0; }

/* Alternate left / right within .details__inner (headers don't count for
   :nth-of-type since the header is a <header>, not a <figure>). */
.detail:nth-of-type(odd)  .detail__img { grid-column: 1 / span 8; }
.detail:nth-of-type(even) .detail__img { grid-column: 5 / span 8; }
.detail:nth-of-type(odd)  .detail__cap { grid-column: 1 / span 8; }
.detail:nth-of-type(even) .detail__cap { grid-column: 5 / span 8; }

.detail__img { aspect-ratio: 3 / 2; }
.detail__img > img,
.detail__img > picture,
.detail__img > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.detail__ph-mark {
  color: var(--gold);
  font-family: var(--font-utility);
  font-weight: 500;
  font-size: var(--step-0);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.detail__cap {
  margin: clamp(0.85rem, 1.5vh, 1.25rem) 0 0;
  font-family: var(--font-utility);
  font-weight: 500;
  font-size: var(--step-0);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

@media (max-width: 720px) {
  .detail { grid-template-columns: 1fr; }
  .detail:nth-of-type(odd)  .detail__img,
  .detail:nth-of-type(even) .detail__img,
  .detail:nth-of-type(odd)  .detail__cap,
  .detail:nth-of-type(even) .detail__cap { grid-column: 1 / -1; }
}

/* ============ §7 THE FIRST THIRTY (ink) ============ */
.offer {
  background-color: var(--ink);
  color: var(--bone);
  padding: var(--space-section) clamp(1.25rem, 4vw, 3rem);
  text-align: center;
}
.offer__inner { max-width: 42rem; margin: 0 auto; }

.offer__eyebrow {
  margin: 0 0 clamp(1.5rem, 3vh, 2.25rem);
  color: rgba(240, 237, 232, 0.55);
}

.offer__number {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-5);
  letter-spacing: 0;
  line-height: 0.9;
  color: var(--crimson);
  margin: 0 0 clamp(1.25rem, 2.5vh, 2rem);
}

.offer__h {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-3);
  letter-spacing: 0.02em;
  line-height: 1.15;
  margin: 0 0 clamp(1.5rem, 3vh, 2.25rem);
  color: #F0EDE8;
}
.offer__h span { display: block; }
/* Kept even where the line now fits: it is what puts any break on the 読点
   rather than inside 「もの。」, and copy grows. Inert when nothing wraps. */
body.lang-ja .offer__h span {
  word-break: keep-all;
  overflow-wrap: normal;
}

/* Japanese gets its own ramp below the tablet breakpoint. The second line is
   13.125em; centred, fitting it on one line with a character of air at each
   end needs 15.125em inside the column, and the column at 320px is the padded
   width, 280px. That caps the type at 280 ÷ 15.125 ≈ 18.5px, so 5.7vw.
   English is not held to this — it breaks between words, so wrapping costs it
   nothing, and the shared ramp still serves it. This is the opposite call to
   the hero, where shrinking ja would have bought nothing editorially; here
   the one-line ja heading is the point.
   The 30 above stays at --step-5 (56px through all phone widths), so the
   heading sits well under it. */
@media (max-width: 767px) {
  /* English comes down too. It wraps between words, so nothing breaks, but a
     three-line heading at 28.8px carries as much weight as the 56px 30 above
     it — and the hierarchy this section is built on shouldn't depend on which
     language you're reading. Its long line is 13.125em, the same as the ja
     one; at 5.9vw both authored lines land on one rendered line each at 320
     with ~0.85 characters clear at either end. 6.2vw also fit, but only by
     half a character — not enough to survive the fallback face while Barlow
     Condensed loads, or a webfont that never arrives. Exactly one character
     would need 5.75vw; 5.9 is the value asked for and the difference is
     0.15 of a character. */
  .offer__h {
    font-size: clamp(1rem, 5.9vw, 2.6rem);
  }
  /* ja stays a little smaller still — its 読点 and 句点 carry their own
     trailing space, so the same clearance costs it more type. */
  body.lang-ja .offer__h {
    font-size: clamp(1rem, 5.7vw, 2.6rem);
  }
}

/* .offer__body removed with the lead paragraph — the h2 carries it now, and
   .offer__h's bottom margin sets the gap to the figure. */

/* 3:2 rather than 4:5. At --measure the portrait crop would stand ~680px
   tall, pushing the three perks off the fold and outweighing the 30 numeral,
   which is the section's anchor. The card case is a small object; a landscape
   frame suits it and keeps the list's rhythm intact. */
.offer__figure {
  max-width: var(--measure);
  margin: 0 auto clamp(1.25rem, 2vh, 1.75rem);
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.offer__figure > picture,
.offer__figure > picture > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
/* Size only — [data-ph] supplies its own flex centring for the label. */
.offer__figure > .offer__ph {
  width: 100%;
  height: 100%;
}
.offer__ph-mark {
  font-family: var(--font-utility);
  font-weight: 500;
  font-size: var(--step-0);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(10, 10, 10, 0.45);
}

.offer__list {
  list-style: none;
  padding: 0;
  margin: 0 auto clamp(2rem, 3.5vh, 2.75rem);
  max-width: var(--measure);
  text-align: left;
}
/* No leading dash — the hairline rules already separate the items, and a
   marker on top of them reads as a doubled divider. */
.offer__item {
  padding: 1em 0;
  border-top: 1px solid rgba(240, 237, 232, 0.1);
  font-family: var(--font-body-en);
  font-weight: 300;
  font-size: var(--step-1);
  line-height: 1.55;
  color: rgba(240, 237, 232, 0.9);
}
.offer__item:last-child { border-bottom: 1px solid rgba(240, 237, 232, 0.1); }

.offer__note {
  font-family: var(--font-body-en);
  font-style: italic;
  font-weight: 300;
  font-size: var(--step-0);
  color: rgba(240, 237, 232, 0.55);
  line-height: 1.7;
  margin: 0;
}

/* ============ §8 RESERVE (ink continued, CTA) ============ */
.reserve {
  background-color: var(--ink);
  color: var(--bone);
  padding: var(--space-section) clamp(1.25rem, 4vw, 3rem);
  text-align: center;
  border-top: 1px solid rgba(240, 237, 232, 0.08);
}
.reserve__inner { max-width: 40rem; margin: 0 auto; }

.reserve__price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-5);
  letter-spacing: 0.02em;
  line-height: 1;
  margin: 0 0 1rem;
  color: #F0EDE8;
}
.reserve__sub {
  font-family: var(--font-body-en);
  font-weight: 300;
  font-size: var(--step-1);
  color: rgba(240, 237, 232, 0.75);
  margin: 0 0 0.5rem;
  line-height: 1.5;
}
.reserve__ship {
  font-family: var(--font-utility);
  font-weight: 500;
  font-size: var(--step-0);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(240, 237, 232, 0.5);
  margin: 0 0 clamp(2rem, 4vh, 3rem);
}

.reserve__cta-wrap { margin: 0 0 1.5rem; }
.reserve__cta {
  display: inline-block;
  min-width: 16rem;
  padding: 1.1em 2em;
  background-color: var(--bone);
  color: var(--ink);
  font-family: var(--font-utility);
  font-weight: 500;
  font-size: var(--step-1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background-color 200ms var(--ease-out),
              color            200ms var(--ease-out),
              transform        200ms var(--ease-out);
}
.reserve__cta:hover,
.reserve__cta:focus-visible {
  background-color: var(--crimson);
  color: var(--bone);
  opacity: 1;
  transform: translateY(-1px);
}

.reserve__under {
  font-family: var(--font-body-en);
  font-style: italic;
  font-weight: 300;
  font-size: var(--step-0);
  color: rgba(240, 237, 232, 0.5);
  line-height: 1.7;
  margin: 0;
}

/* ============ §9 FAQ (bone) ============ */
.faq {
  background-color: var(--bone);
  color: var(--paper-ink);
  padding: var(--space-section) clamp(1.25rem, 4vw, 3rem);
}
.faq__inner { max-width: 42rem; margin: 0 auto; }

.faq__list { border-top: 1px solid rgba(0, 0, 0, 0.12); }
.faq__item { border-bottom: 1px solid rgba(0, 0, 0, 0.12); }

.faq__item > summary {
  list-style: none;
  cursor: pointer;
  padding: 1.4em 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-2);
  letter-spacing: 0.01em;
  color: var(--paper-ink);
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::marker { display: none; }

.faq__q-mark {
  width: 14px;
  height: 14px;
  position: relative;
  flex: 0 0 auto;
}
.faq__q-mark::before,
.faq__q-mark::after {
  content: "";
  position: absolute;
  background-color: currentColor;
}
.faq__q-mark::before { top: 6px; left: 0; right: 0; height: 2px; }
.faq__q-mark::after {
  left: 6px; top: 0; bottom: 0; width: 2px;
  transition: transform 220ms var(--ease-out);
}
.faq__item[open] .faq__q-mark::after { transform: scaleY(0); }

.faq__a {
  padding: 0 0 1.6em;
  font-family: var(--font-body-en);
  font-weight: 300;
  font-size: var(--step-1);
  line-height: 1.65;
  color: rgba(0, 0, 0, 0.72);
}
.faq__a p { margin: 0; max-width: 34rem; }

/* ============ Footer (bone) ============ */
.site-footer {
  background-color: var(--bone);
  color: var(--paper-ink);
  padding: clamp(3rem, 8vh, 5rem) clamp(1.25rem, 4vw, 3rem) clamp(2rem, 5vh, 3rem);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.site-footer__inner {
  max-width: 72rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.25rem 3rem;
}
.site-footer__brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.14em;
  color: var(--paper-ink);
  justify-self: start;
}
.site-footer__tagline {
  font-family: var(--font-body-en);
  font-style: italic;
  font-size: var(--step-0);
  color: rgba(0, 0, 0, 0.55);
  text-align: center;
  margin: 0;
}
.site-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1.5rem;
  justify-content: flex-end;
  font-family: var(--font-utility);
  font-weight: 500;
  font-size: var(--step-0);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  justify-self: end;
}
.site-footer__copy {
  grid-column: 1 / -1;
  text-align: center;
  margin: 0.75rem 0 0;
  font-family: var(--font-utility);
  font-size: var(--step-0);
  letter-spacing: 0.1em;
  color: rgba(0, 0, 0, 0.4);
  text-transform: uppercase;
}
@media (max-width: 640px) {
  .site-footer__inner { grid-template-columns: 1fr; text-align: center; gap: 1rem; }
  .site-footer__brand,
  .site-footer__links { justify-self: center; }
}