/* =========================================================================
   Gentlemen's Closet — prospect demo
   Distinctive / Level 1 / zero dependencies.
   One authored editorial portrait: the doorway -> step inside -> the density
   and character -> Papa Dean -> what people find -> real stories -> the
   occasions -> come see for yourself.
   Palette sampled from the real storefront (brick / cream) and the fitting-
   room curtain. Display face: Playfair Display (self-hosted, subset).
   ========================================================================= */

@font-face {
  font-family: "Playfair Display";
  src: url("fonts/playfair-display.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("fonts/playfair-display-italic.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --cream: #f4efe4;
  --cream-2: #efe6d5;
  --ink: #211c15;
  --ink-2: #59513f;
  --brick: #9a2b21;
  --brick-2: #7c2019;
  --rule: #d8ccb4;

  --wrap: 1180px;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --edge: max(var(--gutter), calc((100vw - var(--wrap)) / 2));

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.15rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0; font-weight: 500; }
p { margin: 0 0 1.1em; text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: inherit; }
figure { margin: 0; }
blockquote { margin: 0; }

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  background: var(--ink);
  color: var(--cream);
  padding: 0.7rem 1rem;
  z-index: 200;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 1rem; }

/* ---------- shared type ---------- */
.h-display {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: 0.006em;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 7.2vw, 5.4rem);
  text-wrap: balance;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.eyebrow::before {
  content: "";
  width: 2.4rem;
  height: 2px;
  background: var(--brick);
  flex: none;
}

.attr {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ---------- buttons ---------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 46px;
  padding: 0.7rem 1.2rem;
  font: 600 0.95rem/1 var(--sans);
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1.5px solid var(--btn-bd);
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.btn--lg { min-height: 52px; padding: 0.9rem 1.55rem; font-size: 1rem; }
.btn--primary { --btn-bg: var(--brick); --btn-fg: #fdf7ec; --btn-bd: var(--brick); }
.btn--primary:hover { --btn-bg: var(--brick-2); --btn-bd: var(--brick-2); }
.btn--ghost:hover { --btn-bg: var(--ink); --btn-fg: var(--cream); }
.btn__icon { font-size: 0.82em; line-height: 1; }
.btn__arrow { transition: transform 0.16s ease; }
.btn--primary:hover .btn__arrow { transform: translateX(3px); }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--cream) 84%, transparent);
  backdrop-filter: blur(9px) saturate(1.35);
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--cream) 95%, transparent);
  box-shadow: 0 1px 0 var(--rule);
}
.site-header__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(0.6rem, 1.3vw, 0.95rem) var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  transition: padding-block 0.25s ease;
}
.site-header.is-scrolled .site-header__inner { padding-block: 0.55rem; }

.brand { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; color: inherit; }
.brand__mark { width: auto; height: 2.5rem; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.08rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
.brand__place {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 0.16rem;
}

.site-nav { display: flex; gap: 1.6rem; margin-left: clamp(1.5rem, 4vw, 3rem); margin-right: auto; }
.site-nav a {
  text-decoration: none;
  font: 600 0.76rem/1 var(--sans);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 0.4rem 0;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.site-nav a:hover { color: var(--ink); border-color: var(--brick); }

.site-header__actions { display: flex; gap: 0.6rem; margin-left: auto; }
.site-header__actions .btn { min-height: 44px; padding: 0.55rem 0.95rem; font-size: 0.82rem; }
.btn__label--short { display: none; }

/* ============================ HERO ============================ */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  grid-template-rows: minmax(min(78vh, 620px), auto);
  border-bottom: 1px solid var(--rule);
}
.hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.25rem, 5vw, 3.75rem) clamp(1.5rem, 4vw, 3rem)
           clamp(2.25rem, 5vw, 3.75rem) var(--edge);
}
.hero__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.15rem, 8.7vw, 5rem);
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.012em;
  margin: 0.18em 0 0.32em;
}
.hero__place {
  font-size: 0.95rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 0.5rem;
}
.hero__since {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 1.1rem + 0.7vw, 1.6rem);
  line-height: 1.15;
  color: var(--ink);
  margin: 0.55rem 0 2rem;
  padding-left: 1rem;
  border-left: 2px solid var(--brick);
}
.hero__meta {
  font-style: normal;
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 0.45rem;
  font-size: 0.8rem;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--ink-2);
  max-width: 33rem;
}
.hero__figure { position: relative; overflow: hidden; min-height: 46vh; }
.hero__figure picture { display: block; height: 100%; }
.hero__figure img {
  width: 100%;
  height: 100%;
  max-height: min(82vh, 720px);
  object-fit: cover;
  /* favour the physical sign — the full store name should read comfortably */
  object-position: 42% 24%;
}
.hero__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--cream) 0.5%, rgba(244, 239, 228, 0) 14%);
  pointer-events: none;
}

/* ======================= THE STORE ITSELF ======================= */
.store { padding-block: 0 clamp(1rem, 3vw, 2.5rem); }

.store__open {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(3rem, 7vw, 5.5rem) var(--gutter) 0;
}
.store__open .h-display { margin-top: 0.1em; }

.store__anchor { margin-block: clamp(2rem, 4.5vw, 3.25rem) clamp(2.25rem, 5vw, 3.75rem); }
.store__anchor img {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: clamp(440px, 82vh, 860px);
  object-fit: cover;
  object-position: 50% 48%;
}
.store__anchor-cap {
  max-width: var(--wrap);
  margin: 1.15rem auto 0;
  padding-inline: var(--gutter);
  font-size: 0.78rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* the store in motion — the client's Facebook Reel, given a real editorial
   moment rather than dropped in as a social widget. Facebook's own embed does
   not render this reel reliably (it returns "video unavailable" in the browser),
   so the section is built on a self-hosted <video>: a photographic poster now,
   the client's encoded Reel dropped straight into the <source> slot later. The
   overlay play button and the caption link both go to Facebook until then, so
   the beat is never a dead player. */
.reel {
  max-width: var(--wrap);
  margin: clamp(3rem, 6.5vw, 4.75rem) auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.reel__copy {
  text-align: center;
  margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem);
}
.reel__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 0.9rem;
}
.reel__eyebrow::before {
  content: "";
  width: 2.4rem;
  height: 2px;
  background: var(--brick);
  flex: none;
}
.reel__lead {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0;
}
.reel__frame {
  position: relative;
  width: min(24rem, 100%);
  aspect-ratio: 9 / 16;
  background: var(--ink);
  overflow: hidden;
  box-shadow: 0 22px 60px -22px rgba(33, 28, 21, 0.55);
  outline: 1px solid var(--rule);
  outline-offset: -1px;
}
.reel__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
.reel__play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.95rem;
  text-decoration: none;
  color: #fdf7ec;
  background: linear-gradient(to bottom, rgba(33, 28, 21, 0.05) 0%, rgba(33, 28, 21, 0.5) 100%);
  transition: background-color 0.2s ease;
}
.reel__play:hover { background: linear-gradient(to bottom, rgba(33, 28, 21, 0.15) 0%, rgba(33, 28, 21, 0.62) 100%); }
.reel__play-btn {
  width: 4.6rem;
  height: 4.6rem;
  border-radius: 50%;
  background: var(--brick);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 26px rgba(33, 28, 21, 0.4);
  transition: transform 0.16s ease, background-color 0.16s ease;
}
.reel__play-btn svg { margin-left: 3px; }
.reel__play:hover .reel__play-btn { transform: scale(1.07); background: var(--brick-2); }
.reel__play-label {
  font: 600 0.72rem/1 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.reel__cap {
  margin-top: clamp(1rem, 2.5vw, 1.5rem);
  font-size: 0.78rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.1rem;
}
.reel__link {
  color: var(--brick);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.reel__link-arrow { transition: transform 0.16s ease; display: inline-block; }
.reel__link:hover .reel__link-arrow { transform: translateX(3px); }

/* desktop: the reel becomes a two-column editorial feature — the portrait frame
   held on the right, the title and the Facebook line stacked and vertically
   centred against it on the left. The frame's own height sets the block; the
   1fr spacer rows keep the copy optically centred beside it. */
@media (min-width: 901px) {
  .reel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(22rem, 38vw);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas:
      ".    frame"
      "copy frame"
      "cap  frame"
      ".    frame";
    column-gap: clamp(2.5rem, 7vw, 6rem);
    align-items: start;
  }
  .reel__copy {
    grid-area: copy;
    text-align: left;
    margin: 0 0 clamp(1.1rem, 2.6vw, 1.75rem);
    align-self: end;
  }
  .reel__eyebrow { justify-content: flex-start; }
  .reel__lead { font-size: clamp(2.4rem, 3.8vw, 3.6rem); }
  .reel__frame { grid-area: frame; width: 100%; }
  .reel__cap {
    grid-area: cap;
    text-align: left;
    justify-content: flex-start;
    margin: 0;
    max-width: 24rem;
    align-self: start;
  }
}

.store__goods {
  max-width: var(--wrap);
  margin: clamp(2.75rem, 6vw, 4.5rem) auto clamp(2.5rem, 6vw, 4rem);
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  column-gap: clamp(1.75rem, 5vw, 4.25rem);
  row-gap: clamp(0.9rem, 2vw, 1.4rem);
  align-items: center;
}
.store__goods-list {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.3rem, 6.4vw, 4.6rem);
  line-height: 1.0;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0;
}
.store__goods-sub {
  grid-column: 1;
  grid-row: 2;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  color: var(--ink-2);
  margin: 0;
}
.store__goods-quote {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  line-height: 1.4;
  color: var(--ink);
  max-width: 22ch;
  margin: 0;
  padding-left: clamp(1.1rem, 2vw, 1.6rem);
  border-left: 2px solid var(--brick);
}
.store__goods-quote .attr { display: block; margin-top: 0.5rem; font-style: normal; }

/* merchandise: one editorial spread, not two cards. The sport-coat rack is the
   dominant inventory statement — tall, off the left edge; the tie rack is the
   secondary counterpoint — shorter, held inside the text column on the right,
   its label set in the step of air above it. One slim cream gutter between
   them, a shared baseline below. No frames, borders or shadows. */
.details {
  display: grid;
  grid-template-columns: minmax(0, 1.78fr) minmax(0, 1fr);
  column-gap: clamp(0.75rem, 2vw, 1.5rem);
  align-items: end;
  margin-block: clamp(3.5rem, 8vw, 5.5rem);
  padding-right: var(--edge);
}
.details__main { margin: 0; }
.details__sub {
  margin: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.details__main img {
  width: 100%;
  height: clamp(460px, 78vh, 720px);
  object-fit: cover;
  object-position: 50% 40%;
}
.details__sub img {
  width: 100%;
  height: clamp(360px, 62vh, 600px);
  object-fit: cover;
  object-position: 54% 40%;
}
.details__main figcaption {
  max-width: var(--wrap);
  margin: 0.95rem auto 0;
  padding-inline: var(--edge) var(--gutter);
  font-size: 0.76rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.details__sub figcaption {
  order: -1;
  margin: 0 0 auto;
  padding: 0.1rem 0 clamp(1.1rem, 3vw, 1.9rem);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.7vw, 1.42rem);
  line-height: 1.34;
  color: var(--ink-2);
  max-width: 19ch;
}

/* Papa Dean — the human beat. Two real views of the same man in the store: the
   seated portrait dominant on the right, framed so he sits naturally in it
   (full head, face, hands and the wall of belts all held); the on-the-floor
   photograph smaller, overlapping its lower-left like a print laid on top. The
   type block is one composed statement — "PAPA DEAN", then "95." monumental in
   brick, then "Still comes to work." — set hard against the portrait's edge and
   right-aligned so the words point at the man rather than float in the cream. */
.papa {
  max-width: var(--wrap);
  margin: clamp(1.75rem, 4vw, 3rem) auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  align-items: center;
  column-gap: clamp(1.5rem, 3.5vw, 3rem);
  overflow: hidden;
}
.papa__media--seated { grid-column: 2; grid-row: 1; }
.papa__media--seated img {
  width: 100%;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  object-position: 50% 12%;
}
.papa__media--rack {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  justify-self: start;
  width: min(13rem, 40%);
  margin: 0 0 clamp(-1.25rem, -1.8vw, -0.5rem) -1.75rem;
  z-index: 2;
  box-shadow: 0 0 0 7px var(--cream);
}
.papa__media--rack img {
  width: 100%;
  aspect-ratio: 11 / 10;
  object-fit: cover;
  object-position: 50% 22%;
}
.papa__text {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  justify-content: center;
  padding: clamp(1rem, 2.5vw, 2rem) 0;
}
.papa__label {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
}
.papa__label::before {
  content: "";
  display: block;
  width: 3rem;
  height: 2px;
  background: var(--brick);
  margin: 0 0 clamp(0.8rem, 1.6vw, 1.2rem) auto;
}
.papa__age {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(5.5rem, 11.5vw, 10.5rem);
  line-height: 0.82;
  letter-spacing: -0.03em;
  color: var(--brick);
  margin: clamp(0.2rem, 0.8vw, 0.5rem) 0 0;
}
.papa__foot { margin: clamp(0.85rem, 2vw, 1.45rem) 0 0; }
.papa__line {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.7vw, 2.2rem);
  line-height: 1.14;
  margin: 0;
  text-wrap: balance;
}
.papa__note {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: clamp(1rem, 2.2vw, 1.6rem) 0 0;
}

/* ===================== MORE THAN THE SUIT ===================== */
/* One authored composition, not three product cards: the store's own phrase
   set large, then a tall sock frame commanding the right while the bow-tie and
   shoe frames stack wide on the left. Scale contrast carries it; a light
   scroll-linked drift (native, guarded, killable) gives the beat some life. */
.more {
  max-width: var(--wrap);
  margin: clamp(3.5rem, 8vw, 6rem) auto;
  padding-inline: var(--gutter);
}
.more__head {
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.more__phrase {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.5rem, 7.2vw, 5.4rem);
  line-height: 0.98;
  letter-spacing: 0.004em;
  margin: 0 0 0.6rem;
  text-wrap: balance;
}
.more__sub {
  font-size: clamp(1rem, 0.98rem + 0.3vw, 1.15rem);
  color: var(--ink-2);
  letter-spacing: 0.01em;
  margin: 0;
}
.more__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  column-gap: clamp(1.25rem, 3vw, 2.75rem);
  row-gap: clamp(1rem, 2.2vw, 1.75rem);
  align-items: start;
}
.more__item { margin: 0; min-width: 0; }
.more__item img { width: 100%; display: block; }
.more__item--a { grid-column: 1; grid-row: 1; }
.more__item--c { grid-column: 1; grid-row: 2; }
.more__item--b {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
}
.more__item--b picture { flex: 1 1 auto; min-height: 0; display: block; }
.more__item--a img { aspect-ratio: 800 / 505; object-fit: cover; }
.more__item--c img { aspect-ratio: 1100 / 829; object-fit: cover; object-position: 50% 62%; }
.more__item--b img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.more__item figcaption {
  margin-top: 0.7rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ========================= REAL STORIES ========================= */
.stories {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(1.25rem, 3vw, 2rem) var(--gutter) clamp(1.5rem, 3.5vw, 2.25rem);
}
.stories__eyebrow { margin-bottom: clamp(1.5rem, 3.5vw, 2.25rem); }

/* the lead review is set as a sequence of short thought-units, one real review
   broken into lines — the signature scroll reveal resolves them line by line */
.story-lead {
  max-width: 52rem;
  margin: 0 0 clamp(3rem, 7vw, 5rem);
}
.story-lead__quote { margin: 0 0 1.6rem; }
.story-lead__quote .ln {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.3vw, 2.5rem);
  line-height: 1.24;
  margin: 0 0 0.42em;
  text-wrap: balance;
}
.story-lead__quote .ln--payoff {
  color: var(--brick);
  font-style: italic;
}
.story-lead figcaption {
  font: 600 0.78rem/1 var(--sans);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.story-more {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
}
.story-more li {
  margin: 0;
  padding-top: clamp(0.9rem, 1.8vw, 1.25rem);
  border-top: 2px solid var(--brick);
}
.story-more__q {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  line-height: 1.3;
  margin: 0 0 0.7rem;
}
.story-more .attr { color: var(--ink-2); }

/* ===================== WEDDINGS & FORMALWARE ===================== */
/* A genuine conversion destination, not a "wedding services" block. The
   heading asks the real question; "$150" is the typographic anchor beside the
   one formalwear frame; the copy stays evidence-led — a choice and an
   invitation, no packages, no guarantees. */
.weddings {
  background: var(--cream-2);
  border-block: 1px solid var(--rule);
  padding-block: clamp(3rem, 7vw, 5rem);
}
.weddings__intro,
.weddings__anchor,
.weddings__body {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.weddings__intro { margin-bottom: clamp(0.9rem, 2vw, 1.5rem); }
.weddings__intro .h-display { margin-top: 0.15em; }

/* the price anchor gets its own centred moment, framed by hairlines and air —
   the commercial memory hook, sized to stand beside Papa Dean's "95." The "$"
   is lifted out of the flow and hung in the left margin so it is the numerals
   "150" — not the string "$150" — that sit on the optical centre line, level
   with the lead above and the note below. */
.weddings__anchor {
  text-align: center;
  padding-block: clamp(1.1rem, 2.6vw, 1.9rem);
  margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem);
  border-block: 1px solid var(--rule);
}
.weddings__price-lead {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 clamp(0.5rem, 1.4vw, 0.9rem);
}
.weddings__price-fig {
  position: relative;
  display: inline-block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(4.5rem, 16.5vw, 11rem);
  line-height: 0.82;
  letter-spacing: 0.005em;
  color: var(--brick);
  margin: 0;
}
.weddings__price-num { display: block; }
.weddings__price-cur {
  position: absolute;
  right: 100%;
  top: 0.32em;
  font-size: 0.5em;
  font-weight: 500;
  letter-spacing: 0;
  margin-right: 0.08em;
}
.weddings__price-note {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  color: var(--ink);
  margin: clamp(0.7rem, 1.8vw, 1.25rem) 0 0;
}

.weddings__body {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  column-gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.weddings__media { grid-column: 1; overflow: hidden; }
.weddings__media img { width: 100%; height: auto; aspect-ratio: 1146 / 720; }
.weddings__say { grid-column: 2; max-width: 32rem; }
.weddings__say-copy {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.58;
  margin: 0 0 clamp(1.4rem, 3.5vw, 2rem);
}
.weddings__cta { margin: 0; }

/* ===================== COME SEE FOR YOURSELF ===================== */
.closing {
  background: var(--cream);
  border-top: 1px solid var(--rule);
  padding-block: clamp(3.75rem, 9vw, 6.5rem);
}
.closing__inner { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.closing__title { margin: 0 0 clamp(2rem, 5vw, 3.25rem); }
.closing__body {
  max-width: 42rem;
  border-top: 1px solid var(--rule);
  padding-top: clamp(1.75rem, 4vw, 2.5rem);
}
.closing__addr {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  line-height: 1.24;
  margin: 0 0 0.9rem;
}
.closing__hours {
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 0.5rem;
}
.closing__ctx {
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
}
.closing__cta { margin-bottom: 1.6rem; }
.closing__social { margin: 0; display: flex; gap: 1.6rem; }
.closing__social a {
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--brick);
  padding-bottom: 2px;
}
.closing__social a:hover { color: var(--brick); }

/* ---------- footer ---------- */
.site-footer {
  background: var(--ink);
  color: color-mix(in srgb, var(--cream) 82%, var(--ink));
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.site-footer__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  gap: 1.1rem;
  text-align: center;
  justify-items: center;
}
.brand--footer { flex-direction: column; gap: 0.55rem; }
.brand--footer .brand__mark { height: 2.75rem; filter: brightness(0) invert(1); opacity: 0.82; }
.brand--footer .brand__name { color: var(--cream); font-size: 1.02rem; }
.site-footer__meta { margin: 0; font-size: 0.85rem; line-height: 1.75; }
.site-footer__meta a { color: inherit; }
.site-footer__social { margin: 0; display: flex; gap: 1.4rem; }
.site-footer__social a {
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cream);
  border-bottom: 1px solid color-mix(in srgb, var(--brick) 82%, var(--cream));
  padding-bottom: 2px;
}
.site-footer__fine {
  margin: 0.5rem 0 0;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--cream) 52%, var(--ink));
}

/* =========================================================================
   Motion — Level 1 native. Weighted reveals, a beat-later resolve for
   captions/labels, one clip-path wipe for the bow tie, header condense.
   Uses `translate` / `scale` / `clip-path` (not `transform`) so full-bleed
   layout math is never disturbed.
   ========================================================================= */
.js [data-reveal] {
  opacity: 0;
  translate: 0 26px;
  transition: opacity 0.55s ease-out, translate 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.js [data-reveal].is-visible { opacity: 1; translate: 0 0; }

/* anchor: image scale-settles inside the rising figure; caption a beat later */
.js .store__anchor[data-reveal] img { scale: 1.05; transition: scale 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js .store__anchor[data-reveal].is-visible img { scale: 1; }
.js .store__anchor[data-reveal] .store__anchor-cap { opacity: 0; translate: 0 10px; transition: opacity 0.5s ease-out, translate 0.5s ease-out; }
.js .store__anchor[data-reveal].is-visible .store__anchor-cap { opacity: 1; translate: 0 0; transition-delay: 0.3s; }

/* Papa Dean: the text resolves a beat after the photo, "95." landing last */
.js .papa[data-reveal] .papa__label,
.js .papa[data-reveal] .papa__age,
.js .papa[data-reveal] .papa__line,
.js .papa[data-reveal] .papa__note { opacity: 0; translate: 0 12px; transition: opacity 0.5s ease-out, translate 0.5s ease-out; }
.js .papa[data-reveal].is-visible .papa__label { opacity: 1; translate: 0 0; transition-delay: 0.28s; }
.js .papa[data-reveal].is-visible .papa__age { opacity: 1; translate: 0 0; transition-delay: 0.44s; }
.js .papa[data-reveal].is-visible .papa__line { opacity: 1; translate: 0 0; transition-delay: 0.54s; }
.js .papa[data-reveal].is-visible .papa__note { opacity: 1; translate: 0 0; transition-delay: 0.62s; }
/* the on-the-floor print settles in a beat after the portrait */
.js .papa[data-reveal] .papa__media--rack { opacity: 0; translate: 0 18px; transition: opacity 0.55s ease-out, translate 0.55s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js .papa[data-reveal].is-visible .papa__media--rack { opacity: 1; translate: 0 0; transition-delay: 0.4s; }

/* merchandise: the tie photo lands a beat after the dominant rack */
.js .details__sub { opacity: 0; translate: 0 16px; transition: opacity 0.6s ease-out, translate 0.6s ease-out; }
.js .details[data-reveal].is-visible .details__sub { opacity: 1; translate: 0 0; transition-delay: 0.18s; }

/* more than the suit: the three frames arrive in sequence — the left stack,
   then the tall sock frame a beat later. The scale contrast in the composition
   does the rest; nothing here is load-bearing, and it degrades to a still,
   composed trio under reduced motion / no-JS. */
.js .more[data-reveal] { opacity: 1; translate: none; transition: none; }
.js .more__item { opacity: 0; translate: 0 20px; transition: opacity 0.6s ease-out, translate 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js .more[data-reveal].is-visible .more__item--a { opacity: 1; translate: 0 0; }
.js .more[data-reveal].is-visible .more__item--c { opacity: 1; translate: 0 0; transition-delay: 0.12s; }
.js .more[data-reveal].is-visible .more__item--b { opacity: 1; translate: 0 0; transition-delay: 0.26s; }

/* a slow scale-settle on the tall sock frame as it crosses the viewport, where
   the browser supports scroll-linked animation — contained by overflow, so it
   can never disturb layout; absent under reduced motion and on narrow screens */
.more__item--b { overflow: hidden; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 761px) {
    .js .more[data-reveal].is-visible .more__item--b img {
      animation: more-settle linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 85%;
    }
  }
}
@keyframes more-settle { from { scale: 1.07; } to { scale: 1; } }

/* weddings: the price anchor rises in as one unit */
.js .weddings__anchor[data-reveal] { opacity: 0; translate: 0 20px; transition: opacity 0.6s ease-out, translate 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js .weddings__anchor[data-reveal].is-visible { opacity: 1; translate: 0 0; }

/* story lead — the SIGNATURE: one real review, set as short lines that resolve
   from clearly muted to full ink one thought-unit at a time, continuously
   scrubbed by scroll position (see script.js). No typewriter costume — the
   refined serif is untouched; the story is written into the page as you arrive. */
.js .story-lead__quote .ln {
  color: color-mix(in srgb, var(--ink) 12%, var(--cream));
  translate: 0 5px;
  transition: color 0.7s ease, translate 0.7s ease;
}
.js .story-lead__quote .ln.lit { color: var(--ink); translate: 0 0; }
.js .story-lead__quote .ln--payoff.lit { color: var(--brick); }

/* weddings: the bow-tie frame settles into focus */
.js .weddings__media[data-reveal] img { scale: 1.06; transition: scale 0.95s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js .weddings__media[data-reveal].is-visible img { scale: 1; }

/* hero photo one-time settle */
.js .hero__figure img { scale: 1.035; transition: scale 0.85s ease-out; }
.js .hero.is-loaded .hero__figure img { scale: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal],
  .js [data-reveal] * { opacity: 1 !important; translate: none !important; scale: none !important; clip-path: none !important; transition: none !important; animation: none !important; }
  .js .details__sub { opacity: 1 !important; translate: none !important; transition: none !important; }
  .js .story-lead__quote .ln { color: var(--ink) !important; translate: none !important; }
  .js .story-lead__quote .ln--payoff { color: var(--brick) !important; }
  .js .hero__figure img { scale: none !important; transition: none !important; }
  .btn, .btn__arrow, .site-header, .site-header__inner, .site-nav,
  .reel__play, .reel__play-btn, .reel__link-arrow { transition: none !important; }
}

/* =========================================================================
   Responsive recomposition — not a shrink
   ========================================================================= */

/* narrow desktop / small laptop — keep the two-column layouts but ease the
   header and the hero wordmark so nothing clips or wraps mid-word */
@media (min-width: 901px) and (max-width: 1140px) {
  .site-header__inner { gap: 0.9rem; }
  .site-nav { gap: 1.05rem; margin-left: clamp(1rem, 2.5vw, 1.75rem); }
  .site-nav a { font-size: 0.72rem; letter-spacing: 0.1em; }
  .site-header__actions .btn__label--long {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .site-header__actions .btn__label--short { display: inline; }
  .site-header__actions .btn { padding: 0.55rem 0.8rem; }
  .hero__title { font-size: clamp(2.1rem, 6.6vw, 3.7rem); }
}

@media (max-width: 900px) {
  html { scroll-padding-top: 6.75rem; }

  /* the nav drops to a slim second row so "Weddings" stays reachable at every
     width; on scroll it folds away and the wordmark + the two actions carry on */
  .site-header__inner { flex-wrap: wrap; row-gap: 0.4rem; }
  .site-nav {
    order: 4;
    width: 100%;
    margin: 0.15rem 0 0;
    padding-top: 0.5rem;
    border-top: 1px solid var(--rule);
    justify-content: space-between;
    gap: 0.4rem;
    overflow: hidden;
    max-height: 3.5rem;
    transition: max-height 0.25s ease, padding-top 0.25s ease, margin-top 0.25s ease, opacity 0.2s ease;
  }
  .site-nav a { font-size: 0.68rem; letter-spacing: 0.07em; padding: 0.4rem 0; }
  .site-header.is-scrolled .site-nav {
    max-height: 0;
    padding-top: 0;
    margin-top: 0;
    opacity: 0;
    pointer-events: none;
  }

  .site-header__actions .btn__label--long {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .site-header__actions .btn__label--short { display: inline; }
  .site-header__actions .btn { padding: 0.55rem 0.85rem; gap: 0.45rem; }

  .hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .hero__copy { order: 1; padding: clamp(2rem, 8vw, 3rem) var(--gutter) clamp(1.75rem, 6vw, 2.5rem); }
  .hero__since { font-size: clamp(1.15rem, 4.6vw, 1.45rem); }
  .hero__figure { order: 2; min-height: 0; aspect-ratio: 4 / 3.4; }
  .hero__figure img { max-height: none; object-position: 50% 40%; }
  .hero__figure::after { background: linear-gradient(to bottom, var(--cream) 0.5%, rgba(244, 239, 228, 0) 12%); }
  .hero__meta { max-width: none; font-size: 0.74rem; letter-spacing: 0.04em; }

  .store__anchor img { width: 100%; margin-left: 0; height: min(78vh, 600px); object-position: 50% 52%; }

  .store__goods { display: block; }
  .store__goods-list { font-size: clamp(2.1rem, 9vw, 3.4rem); }
  .store__goods-sub { margin-top: 0.6em; }
  .store__goods-quote { max-width: 30ch; margin: clamp(1.5rem, 5vw, 2.25rem) 0 0; padding-left: 1rem; }

  .details { display: block; margin-block: clamp(2.5rem, 9vw, 4rem); padding: 0; }
  .details__main { width: 100%; margin: 0; }
  .details__main img { height: min(66vh, 580px); aspect-ratio: auto; object-fit: cover; object-position: 50% 42%; }
  .details__sub { width: 100%; margin: clamp(1.25rem, 4vw, 2rem) 0 0; display: block; }
  .details__sub img { height: min(58vh, 500px); aspect-ratio: auto; object-fit: cover; object-position: 50% 45%; }
  .details__sub figcaption { order: 0; margin: 0.85rem 0 0; max-width: none; font-style: italic; }
  .details__main figcaption { padding-inline: var(--gutter); }

  .more__head { display: block; }
  .more__phrase { margin-bottom: 0.7rem; }
  .more__sub { margin: 0; }
  .more__grid { display: block; }
  .more__item { margin-bottom: clamp(1.5rem, 6vw, 2.5rem); }
  .more__item:last-child { margin-bottom: 0; }
  .more__item--b { display: block; }
  .more__item--b img { height: min(78vh, 640px); aspect-ratio: auto; object-fit: cover; object-position: 50% 34%; }
  .more__item--c img { aspect-ratio: 1100 / 829; }

  .papa {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-width: none;
    padding: 0;
    margin: clamp(3rem, 12vw, 4.5rem) 0;
  }
  .papa__text {
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
  }
  .papa__label::before { margin-left: 0; margin-right: auto; }
  .papa__media--seated { order: 1; }
  .papa__text { order: 2; }
  .papa__media--rack { order: 3; }
  .papa__age { line-height: 0.82; margin-top: clamp(0.5rem, 2vw, 0.9rem); }
  .papa__line { margin: 0; }
  .papa__foot { margin-top: clamp(0.75rem, 3vw, 1.25rem); }
  .papa__media--seated,
  .papa__media--rack { width: 100%; margin: 0; box-shadow: none; }
  .papa__media--seated img { height: min(78vh, 620px); aspect-ratio: auto; object-fit: cover; object-position: 50% 18%; }
  .papa__media--rack { margin-top: clamp(0.9rem, 3vw, 1.5rem); }
  .papa__media--rack img { height: auto; aspect-ratio: auto; }
  .papa__text {
    padding-inline: var(--gutter);
    margin-top: clamp(1.1rem, 4vw, 1.75rem);
    margin-bottom: clamp(1rem, 4vw, 1.75rem);
  }

  .story-lead { max-width: none; margin-bottom: clamp(2.5rem, 9vw, 3.5rem); }
  .story-lead__quote .ln { font-size: clamp(1.3rem, 5vw, 1.8rem); }

  .story-more { display: block; }
  .story-more li { margin-block: clamp(1.5rem, 6vw, 2.25rem); padding-top: clamp(0.9rem, 3vw, 1.25rem); border-top: 2px solid var(--brick); }
  .story-more li:first-child { margin-top: 0; }

  .weddings__anchor { padding-block: clamp(1.75rem, 8vw, 2.75rem); margin-bottom: clamp(1.75rem, 7vw, 2.5rem); }
  .weddings__body { display: block; }
  .weddings__media {
    margin-bottom: clamp(1.75rem, 7vw, 2.5rem);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    border-block: 3px solid var(--brick);
  }
  .weddings__say { max-width: none; }
  .weddings__say-copy { margin-bottom: clamp(1.5rem, 6vw, 2rem); }
}

@media (max-width: 600px) {
  .hero__figure { aspect-ratio: 1 / 1.02; }
  .cta-row .btn { flex: 1 1 100%; justify-content: center; }
  .store__anchor img { height: 74vh; }
  /* phones are narrow enough to show the full rack without a giant frame */
  .details__main img { height: auto; aspect-ratio: 900 / 1200; }
  .details__sub img { height: auto; aspect-ratio: 648 / 989; }
  .more__item--b img { height: auto; aspect-ratio: 720 / 1152; object-position: 50% 50%; }
  .papa__media--seated img { height: auto; aspect-ratio: 900 / 1120; }
}

@media (max-width: 480px) {
  .site-header__inner { gap: 0.4rem 0.5rem; padding-inline: clamp(0.9rem, 4vw, 1.25rem); }
  .brand { gap: 0.45rem; flex: 1 1 0%; min-width: 0; }
  .brand__text { min-width: 0; }
  .brand__mark { height: 1.9rem; }
  .brand__name { font-size: 0.9rem; letter-spacing: 0.015em; white-space: normal; line-height: 1.08; }
  .brand__place { display: none; }          /* location is already in the hero and everywhere below */
  .site-nav { margin-left: 0; margin-right: 0; }
  .site-header__actions { gap: 0.35rem; flex: 0 0 auto; margin-left: 0.5rem; }
  .site-header__actions .btn { padding: 0.5rem 0.6rem; font-size: 0.74rem; min-height: 40px; gap: 0.4rem; }
  .eyebrow { letter-spacing: 0.15em; font-size: 0.66rem; gap: 0.6rem; }
  .eyebrow::before { width: 1.7rem; }
}
@media (max-width: 360px) {
  .brand__mark { display: none; }
  .site-header__actions .btn { font-size: 0.72rem; padding: 0.5rem 0.5rem; }
}