/* ============================================================
   NUNZIO ORSINI: V2 Design System ("Brand Lift"), DARK
   Swiss grid + restraint, now on the original site's dark ground.
   Palette lifted verbatim from nunzio-orsini.com (style2.css).
   Typography kept: Cormorant Garamond (display) + Switzer (text).

   Audited against Howie's Figma round (V2.1 through V3.2, 2026-08):
   - Tokens unchanged; sole-blue is the single action color
     (solid buttons, text links, notice bar, prices, focus states).
   - Grid unchanged: 1440 frame, 56px gutters, 112/72 display scale.
   - Pre-order band: copy column widened to 755, gap tightened to 25.
   - Footer: photo footer (V3.1), 850px, columns 29px top padding.

   V4, from Doug's 2026-09-01 review:
   - Solid buttons move to sole-blue-deep, sampled from the leather
     sole photography; the light blue stays for text and accents.
   - Pre-order module becomes the full-bleed manifesto band.
   - Signatures showcase promoted here, now shared with Our Story.
   ============================================================ */


:root {
  /* ---- Color: original dark navy ground ---- */
  --paper:      #080F1A;   /* page ground */
  --paper-deep: #0D1624;   /* recessed panels */
  --surface-2:  #122030;   /* inverted / feature bands */
  --surface-3:  #172840;   /* offset */
  --surface-lift: #0F2742; /* Howie 9/3 Figma: ALT COLOUR BG, the lifted ground under the
                              opening statement that fades into paper so the collection
                              reads as its own section (Doug: the two were blending) */
  --ink:        #E0E8F4;   /* primary text */
  --ink-soft:   #7A92B8;   /* secondary text */
  --ink-faint:  #3A5070;   /* faintest text */
  --hairline:   #253A60;   /* rules and borders */
  --divider:    #1E3050;
  --sole-blue:  #3B98FF;   /* Howie 9/3 Figma: NEW SOLE-BLUE, aligned to the actual leather sole */
  --sole-blue-deep: #2F6BB4; /* V4 (Doug) interim button fill. Retired 2026-09-14: Howie's
                                9/3 frames put the CTA on the new sole-blue with ink type,
                                which is what .btn--solid now does. Token kept for reference. */
  --copy:       #77C3FF;   /* Howie 9/3 Figma: BODY COPY BLUE. Lifts body copy from
                              6.64:1 to 10.09:1 on --paper; his frame called the old
                              value washed out */
  --bronze:     #C9A84C;   /* the house gold, small accents only */

  /* ---- Type ---- */
  --font-display: 'Cormorant Garamond', 'Palatino Linotype', Georgia, serif;
  --font-text: 'Switzer', 'Helvetica Neue', Arial, sans-serif;

  --text-xs:  0.6875rem;
  --text-sm:  0.8125rem;
  --text-base: 1rem;
  --text-lg:  clamp(1.125rem, 1rem + 0.5vw, 1.375rem); /* @kind other */
  --display-sm: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); /* @kind other */
  --display-md: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem); /* @kind other */
  --display-lg: clamp(3.25rem, 1.5rem + 6.5vw, 7.5rem); /* @kind other */

  /* ---- Grid ---- */
  --max: 1360px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem); /* @kind spacing */
  --band: clamp(4rem, 9vw, 9rem); /* @kind spacing */
  --topbar-h: 110px;
}

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

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar-h) + 1rem); color-scheme: dark; }

body {
  font-family: var(--font-text);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  min-height: 100dvh;
}
body.pad-top { padding-top: var(--topbar-h); }

img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--sole-blue); }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
::selection { background: color-mix(in srgb, var(--sole-blue) 30%, transparent); color: #fff; }
:focus-visible { outline: 2px solid var(--sole-blue); outline-offset: 3px; }

/* ---- Primitives ---- */

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

.overline {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.display { font-family: var(--font-display); font-weight: 400; line-height: 1.04; letter-spacing: -0.01em; }
.display em { font-style: italic; }

.rule { border: 0; border-top: 1px solid var(--hairline); }

.btn {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-size: var(--text-sm); font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 1.05rem 2.4rem;
  border: 1px solid var(--ink);
  color: var(--ink);
  white-space: nowrap;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* Howie 9/3 Figma, "Accessible lift colours": the CTA carries NEW SOLE-BLUE
   #3B98FF, sampled off the leather sole in the photography, with ink type
   (#080F1A on #3B98FF measures 6.5:1). Body copy takes the lighter blue, so
   one colour no longer does two jobs. Answers Doug's "button looks faded". */
.btn--solid { background: var(--sole-blue); color: var(--paper); border-color: var(--sole-blue); }
.btn--solid:hover { background: #5CADFF; border-color: #5CADFF; color: var(--paper); }

/* V3.1 (Howie): text links go bold */
.textlink {
  font-size: var(--text-sm); font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sole-blue);
  border-bottom: 1px solid var(--sole-blue);
  padding-bottom: 0.3rem;
}
.textlink:hover { color: var(--ink); border-color: var(--ink); }

/* ---- Topbar: transparent on load, hides on scroll down, returns on scroll up ---- */

.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: transform 480ms cubic-bezier(0.16,1,0.3,1), background 320ms ease, border-color 320ms ease, backdrop-filter 320ms ease;
}
.topbar::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,15,26,0.62), rgba(8,15,26,0));
  opacity: 1; transition: opacity 320ms ease;
}
.topbar.is-solid { background: color-mix(in srgb, var(--paper) 84%, transparent); backdrop-filter: blur(14px); border-bottom-color: var(--hairline); }
.topbar.is-solid::before { opacity: 0; }
.topbar.is-hidden { transform: translateY(-101%); }

.header { position: relative; z-index: 1; }
.header__inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  height: 76px;
}
.header__nav { display: flex; gap: 2.2rem; align-items: center; }
.header__nav a, .header__aux a {
  font-size: var(--text-xs); font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  white-space: nowrap;
}
.header__nav a:hover, .header__aux a:hover { color: var(--sole-blue); }
.brand {
  font-family: var(--font-display);
  font-size: 1.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  white-space: nowrap;
}
.brand:hover { color: inherit; }
.header__aux { display: flex; gap: 2.2rem; justify-content: flex-end; align-items: center; }

/* V4 rollout: live cart control in the aux slot; the count comes from
   cart.js through the #cart-badge hook and hides while the cart is empty */
.cartlink {
  display: inline-flex; align-items: baseline; gap: 0.45em;
  font-size: var(--text-xs); font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  white-space: nowrap;
}
.cartlink { position: relative; }
.cartlink:hover { color: var(--sole-blue); }
/* Count pinned to the top right of the word, CTA blue with a white number
   (Doug and Howie, 10/19). Scoped to .cartlink so cart.css's legacy gold
   badge, which loads after this file on some pages, can't win. */
.cartlink .cart-badge {
  position: absolute; top: -0.95em; right: -1.45em;
  min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
  border-radius: 999px;
  background: var(--sole-blue); color: #fff;
  font-family: var(--font-body); font-size: 10px; font-weight: 600;
  letter-spacing: 0; line-height: 1;
  align-items: center; justify-content: center;
  pointer-events: none;
}

.notice {
  position: relative; z-index: 1;
  text-align: center;
  font-size: var(--text-xs); letter-spacing: 0.2em; text-transform: uppercase;
  padding: 0.55rem var(--gutter);
  color: var(--copy);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 320ms ease, color 320ms ease;
}
.topbar.is-solid .notice { border-bottom-color: var(--divider); }

/* ---- Footer ---- */

.footer { border-top: 1px solid var(--hairline); margin-top: var(--band); }
.footer__inner {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem;
  padding-block: 4rem;
}
.footer h4 { font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; margin-bottom: 1.1rem; color: var(--copy); }
.footer li { margin-bottom: 0.55rem; font-size: var(--text-sm); }
.footer li a:hover { color: var(--sole-blue); }
.footer__brand p { max-width: 34ch; color: var(--copy); font-size: var(--text-sm); margin-top: 1rem; }
.footer__bottom {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-block: 1.4rem;
  border-top: 1px solid var(--hairline);
  font-size: var(--text-xs); color: var(--copy); letter-spacing: 0.06em;
}

/* ---- Photo footer (Howie 9/3 Figma, FOOTER FEEDBACK revision): the heel
   lineup photo at the crop he set (a 2000x1068 window of his portrait
   frame, pre-cropped into footer-heels-v2.jpg), the link columns sitting
   on a paper fade that covers the top 319px, and a black fade under the
   copyright row ---- */

.footer-photo { position: relative; height: 852px; background: #000; overflow: hidden; }
.footer-photo__grad {
  position: absolute; top: 0; left: 0; right: 0; height: 319px; z-index: 2;
  background: linear-gradient(180deg, var(--paper) 45%, rgba(0,0,0,0) 100%);
}
.footer-photo__img {
  position: absolute; top: 82px; left: 0; width: 100%; height: 770px;
  object-fit: cover; object-position: center center;
}
.footer-photo__cols {
  position: absolute; top: 82px; left: 0; right: 0; z-index: 3;
  display: flex; gap: 2rem; align-items: flex-start;
  padding: 5px var(--gutter) 0;
}
.footer-photo__cols > div { flex: 1; }
/* Howie 9/3 Figma: footer secondary text sits on the body-copy blue */
.footer-photo__cols .brandcol p { max-width: 275px; color: var(--copy); font-size: var(--text-sm); line-height: 1.7; margin-top: 1rem; }
.footer-photo__cols h4 { font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--copy); margin-bottom: 0.7rem; }
.footer-photo__cols li { margin-bottom: 0.55rem; font-size: var(--text-sm); }
.footer-photo__cols li a:hover { color: var(--sole-blue); }
.footer-photo__bottom {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 3;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem;
  padding: 22px var(--gutter);
  /* Doug 2026-09-28: the hairline rule that sat across the photo above this
     row is gone; it was decorative, and the black fade already seats the
     copyright line on the photograph */
  font-size: var(--text-xs); color: var(--copy);
  background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 81%);
}

@media (max-width: 900px) {
  .footer-photo { height: auto; min-height: 640px; }
  .footer-photo__cols { position: relative; flex-wrap: wrap; }
}

/* ---- Shared media helpers ---- */

.bleed { width: 100%; }
.bleed img { width: 100%; height: 100%; object-fit: cover; }

.caption {
  font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--copy); margin-top: 0.8rem;
}

/* ---- Full-bleed manifesto band, Our Story only (Howie's 9/3 Figma,
   "BOARDROOM FEEDBACK" revision, used by the starred Our Story frame): the
   boardroom photo blown up to the frame, cropped 1440x820, a radial
   fall-off on the left, and the pre-order copy stacked at the left edge
   with the button under the note. The homepage closes differently, see
   .stairs and .closing in index.html ---- */
.manifesto { position: relative; margin-top: var(--band); background: var(--paper-deep); overflow: hidden; aspect-ratio: 1440 / 820; }
.manifesto__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.manifesto__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 62% 74% at 6% 42%, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.52) 38%, rgba(0,0,0,0) 74%),
    linear-gradient(180deg, rgba(8,15,26,0) 72%, rgba(8,15,26,0.5) 100%);
}
.manifesto__content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 0 var(--gutter); max-width: 780px;
}
.manifesto__content .overline { color: var(--copy); font-size: var(--text-base); letter-spacing: 0.28em; }
.manifesto__content .display { font-size: var(--display-md); margin-top: 0.6rem; }
.manifesto__note { color: var(--copy); max-width: 46ch; margin-top: 1.4rem; font-size: var(--text-sm); line-height: 1.7; }
.manifesto__content .btn { margin-top: 1.5rem; }
@media (max-width: 900px) {
  .manifesto { aspect-ratio: auto; min-height: 72svh; }
  .manifesto__img { object-position: 42% center; }
  .manifesto__content { justify-content: flex-end; padding-bottom: clamp(2rem, 6vh, 3.5rem); }
  .manifesto__content .display { font-size: var(--display-sm); }
}

/* ---- Signatures showcase (V4: shared by Home signatures and Our Story
   materials): copy left, sticky image right, hover swaps the photo ---- */
.signatures {
  display: grid; grid-template-columns: minmax(0, 1fr) 50vw;
  gap: clamp(1.5rem, 3.5vw, 3.5rem); align-items: start;
}
.signatures__copy { padding-left: var(--gutter); padding-right: 0; }
.signatures__copy .section__head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 2rem;
  margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
}
.signatures__media { position: sticky; top: calc(var(--topbar-h) + 1rem); }
.signatures__media .frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-deep); }
.sig-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 700ms cubic-bezier(0.16,1,0.3,1), transform 1400ms cubic-bezier(0.16,1,0.3,1); transform: scale(1.03); }
.sig-img.is-active { opacity: 1; transform: scale(1); }
.signatures__media .caption { padding-right: var(--gutter); }
.sig-list li { border-top: 1px solid var(--hairline); padding: 2rem 0; display: grid; grid-template-columns: 4rem 1fr; gap: 1rem; cursor: pointer; transition: border-color 300ms ease; }
.sig-list li:last-child { border-bottom: 1px solid var(--hairline); }
.sig-list .num { font-size: var(--text-sm); letter-spacing: 0.2em; color: var(--ink-faint); padding-top: 0.4rem; transition: color 300ms ease; }
.sig-list h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; margin-bottom: 0.5rem; transition: color 300ms ease; }
.sig-list p { color: var(--copy); max-width: 52ch; font-size: var(--text-sm); line-height: 1.7; }
.sig-list li.is-active { border-top-color: var(--sole-blue); }
.sig-list li.is-active .num { color: var(--sole-blue); }
.sig-list li.is-active + li { border-top-color: var(--sole-blue); }
@media (max-width: 900px) {
  .signatures { grid-template-columns: minmax(0, 1fr); }
  .signatures__copy { padding-inline: var(--gutter); min-width: 0; }
  .signatures__media { position: static; }
}

/* ---- Showcase slider under 900px (Joseph, 9/14): the hover swap has no
   hover on a phone and the photo sat below the whole list, so v2.js turns
   the four items into swipe slides that each carry their own photo and
   text, with dots and a count so it is obvious there are more ---- */
.sig-carousel { display: none; }
@media (max-width: 900px) {
  .sig-carousel { display: block; min-width: 0; max-width: 100%; }
  .signatures .sig-list, .signatures .signatures__media { display: none; }
  .sig-carousel__track {
    position: relative; display: flex; gap: 0.75rem; width: 100%;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sig-carousel__track::-webkit-scrollbar { display: none; }
  .sig-carousel__track::after { content: ""; flex: 0 0 14%; }
  .sig-carousel__slide { flex: 0 0 86%; min-width: 0; scroll-snap-align: start; }
  .sig-carousel__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-deep); }
  .sig-carousel__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .sig-carousel__body { padding-top: 1.1rem; display: grid; grid-template-columns: 2.6rem 1fr; gap: 0.6rem; }
  .sig-carousel__body .num { font-size: var(--text-sm); letter-spacing: 0.2em; color: var(--sole-blue); padding-top: 0.4rem; }
  .sig-carousel__body h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; margin-bottom: 0.45rem; }
  .sig-carousel__body p { color: var(--copy); font-size: var(--text-sm); line-height: 1.7; }
  .sig-carousel__body .caption { grid-column: 2; margin-top: 0.7rem; }
  .sig-carousel__dots { display: flex; align-items: center; gap: 0.6rem; margin-top: 1.4rem; }
  .sig-carousel__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hairline); padding: 0; transition: background 200ms ease, transform 200ms ease; }
  .sig-carousel__dot.is-active { background: var(--sole-blue); transform: scale(1.3); }
  .sig-carousel__count { margin-left: auto; font-size: var(--text-xs); letter-spacing: 0.2em; color: var(--copy); }
}

/* ---- Full-bleed video hero ---- */

.vhero { position: relative; height: 100svh; min-height: 540px; overflow: hidden; background: var(--paper-deep); }
.vhero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vhero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,15,26,0.45) 0%, rgba(8,15,26,0.05) 32%, rgba(8,15,26,0.10) 58%, rgba(8,15,26,0.85) 100%);
}
.vhero__foot {
  position: absolute; left: 0; right: 0; bottom: clamp(1.6rem, 4vh, 3rem);
  display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem;
}
.vhero__cap, .vhero__scroll {
  font-size: var(--text-xs); font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 80%, transparent);
}
.vhero__scroll { display: inline-flex; align-items: center; gap: 0.7rem; }
.vhero__scroll::after { content: ""; width: 1px; height: 34px; background: currentColor; opacity: 0.5; animation: vhero-cue 2.4s cubic-bezier(0.16,1,0.3,1) infinite; transform-origin: top; }
@keyframes vhero-cue { 0% { transform: scaleY(0.2); opacity: 0.15 } 45% { transform: scaleY(1); opacity: 0.6 } 100% { transform: scaleY(0.2); opacity: 0.15 } }

@media (prefers-reduced-motion: reduce) {
  .vhero__scroll::after { animation: none; }
  .topbar { transition: none; }
}

@media (max-width: 1080px) {
  .header__nav { display: none; }
  .header__inner { grid-template-columns: auto 1fr; }
  .header__aux { justify-content: flex-end; }
}

@media (max-width: 900px) {
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .vhero__scroll { display: none; }
}

/* ---- Mobile navigation: full-screen panel for the header__nav links
   under 1080px, injected at runtime by v2.js, the same pattern cart.js
   uses for the cart drawer ---- */

.menu-toggle {
  display: none;
  font-size: var(--text-xs); font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
}
.menu-toggle:hover { color: var(--sole-blue); }

@media (max-width: 1080px) {
  .menu-toggle { display: inline-flex; }
}

.mobile-menu {
  position: fixed; inset: 0; z-index: 300;
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  display: flex; flex-direction: column;
  padding: calc(var(--topbar-h) + 1.5rem) var(--gutter) 2.5rem;
  overflow-y: auto;
  opacity: 0; pointer-events: none;
  transition: opacity 280ms ease;
}
.mobile-menu.is-open { opacity: 1; pointer-events: auto; }

.mobile-menu__close {
  position: absolute; top: 1.9rem; right: var(--gutter);
  font-size: var(--text-xs); font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
}
.mobile-menu__close:hover { color: var(--sole-blue); }

.mobile-menu__links { list-style: none; }
.mobile-menu__links a.primary {
  display: block;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2rem, 9vw, 2.75rem); line-height: 1.1;
  color: var(--ink);
  padding: 1.05rem 0;
  border-top: 1px solid var(--hairline);
}
.mobile-menu__links a.primary:hover { color: var(--sole-blue); }
.mobile-menu__links a.sub {
  display: block;
  font-size: var(--text-sm);
  color: var(--ink-soft);
  padding: 0.45rem 0;
  letter-spacing: 0.06em;
}
.mobile-menu__links a.sub:hover { color: var(--sole-blue); }
.mobile-menu__subs { padding: 0.35rem 0 1.1rem; }

.mobile-menu__cta { margin-top: auto; padding-top: 2rem; }
.mobile-menu__cta .btn { width: 100%; justify-content: center; }

body.menu-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .mobile-menu { transition: none; }
}

@media (max-width: 560px) {
  .header__aux { gap: 1.2rem; }
  .brand { font-size: 1.35rem; }
  /* The bar holds brand, Contact, Cart and Menu, which overruns a 375px
     screen and pushes the Menu toggle off the right edge. Contact already
     lives inside the mobile menu, so the header copy of it goes. Matched on
     a substring: home and Our Story link Contact to the #contact anchor,
     the interior pages to contact.html. */
  .header__aux > a[href*="contact"] { display: none; }
}

/* ---- Large screens (Joseph, 9/14): Howie's frames are 1440 wide with no
   wider breakpoint, and the text column already stops at --max. Above
   1600px the full-bleed content blocks stop at the 1440 canvas too, so a
   grid of shoes or a photo band never runs on past the copy beside it.
   The heroes and the photo footer stay full width; they are atmosphere,
   not content, and their heights are already bound ---- */
@media (min-width: 1600px) {
  :root { --canvas: 1440px; }
  .grid-collection, .cgrid, .signatures, .craft__media, .craftband__media,
  .stairs, .manifesto, .journal-band { max-width: var(--canvas); margin-inline: auto; }
  .signatures { grid-template-columns: minmax(0, 1fr) 720px; }
  .signatures__copy { padding-left: 0; }
}

/* ============================================================
   Howie's 2026-09-17 markup, the parts that apply to every V2 page.
   "CTA / BUTTON COLOUR!!!!", "REMOVED STROKES", "REMOVE LITTLE DASH
   ELWMEMENT FROM EVERYTHING".
   ============================================================ */

/* Outline buttons carry the sole blue, solid ones keep ink on blue */
.btn { border-color: var(--sole-blue); color: var(--sole-blue); }
.btn--solid, .btn--solid:hover { color: var(--paper); }

/* The signature ledger keeps one hairline rule, no blue bar */
.sig-list li.is-active,
.sig-list li.is-active + li { border-top-color: var(--hairline); }

/* The little dash retires from everything */
.divider, .shoe-detail__divider, .policy-block__divider { display: none !important; }
.vhero__scroll::after { content: none; }