/* ==========================================================================
   House Dressed — Home (review build, Sept 21, 2026)
   Built on the House Dressed design system: tokens.json + components/bundle.css.
   Every colour, radius, size and type style below is a token from that system.
   Placeholders: [PHOTO] linen blocks with a putty tag · [COPY] literal Lorem Ipsum with a tag.
   ========================================================================== */
:root {
  /* colour (the ten, and nothing else) */
  --color-charcoal: #2B2A27;
  --color-field-charcoal: #3A3734;
  --color-brass: #9E7B42;
  --color-brass-pressed: #87682F;
  --color-putty: #8A8072;
  --color-putty-text: #6F675B;
  --color-linen: #DDD6C9;
  --color-ivory: #F3EEE6;
  --color-warm-white: #FFFDF9;
  --color-espresso: #453226;
  /* type */
  --font-display: Cormorant, "Cormorant Garamond", Georgia, serif;
  --font-text: Montserrat, "Helvetica Neue", Arial, sans-serif;
  /* spacing (4px base) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-24: 96px;
  --space-section-mobile: 40px;   /* 40–56 mobile; Build 3 sits at the tight end */
  --space-section-desktop: 64px;  /* 64–96 desktop; Build 3 sits at the tight end */
  --space-gutter-mobile: 24px;
  /* radius */
  --radius-field: 12px; --radius-button: 12px; --radius-card: 14px; --radius-pill: 999px; --radius-image: 0px;
  /* size */
  --size-button-height: 52px; --size-tap-target-min: 44px; --size-hairline: 1px; --size-focus-ring: 2px;
  --size-wordmark-nav-w: 135px; --size-wordmark-nav-h: 20px;
  --size-lockup-monogram: 64px; --size-lockup-wordmark: 176px;
  --size-app-store-badge-min-h: 40px;
  --size-status-inset-app: 54px; --size-nav-bar-app: 44px;
  /* layout */
  --layout-content-max: 1200px; --layout-measure: 65ch;
  --layout-phone-width: 390px; --layout-phone-height: 844px;
  /* motion */
  --motion-hero-zoom: 12000ms;
}

/* ---- Ground ---- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--color-ivory); color: var(--color-charcoal); font-family: var(--font-text); font-size: 16px; line-height: 26px; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: var(--size-focus-ring) solid var(--color-charcoal); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hidden { display: none !important; }
.wrap { max-width: var(--layout-content-max); margin: 0 auto; padding: 0 var(--space-gutter-mobile); }

/* ---- Type (web scale) ---- */
.h1 { margin: 0; font-family: var(--font-display); font-size: 36px; line-height: 40px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.h2 { margin: 0; font-family: var(--font-display); font-size: 30px; line-height: 36px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.h3 { margin: 0; font-family: var(--font-display); font-size: 21px; line-height: 28px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.quote { margin: 0; font-family: var(--font-display); font-size: 26px; line-height: 38px; font-weight: 500; font-style: italic; }
.body { margin: 0; font-family: var(--font-text); font-size: 16px; line-height: 26px; font-weight: 400; max-width: var(--layout-measure); }
.caption { margin: 0; font-family: var(--font-text); font-size: 13px; line-height: 20px; color: var(--color-putty-text); }
.label { margin: 0; font-family: var(--font-text); font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.eyebrow { color: var(--color-brass); }
@media (min-width: 1024px) {
  .h1 { font-size: 56px; line-height: 60px; }
  .h2 { font-size: 40px; line-height: 46px; }
}


/* ---- Buttons: 52px, 12px, one brass per viewport ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; height: var(--size-button-height); padding: 0 var(--space-6); border: var(--size-hairline) solid transparent; border-radius: var(--radius-button); background: transparent; font-family: var(--font-text); font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; }
.btn-primary { background: var(--color-brass); border-color: var(--color-brass); color: var(--color-warm-white); }
.btn-primary:active { background: var(--color-brass-pressed); border-color: var(--color-brass-pressed); }
.btn-secondary { border-color: var(--color-charcoal); color: var(--color-charcoal); }
.btn-secondary:active { background: var(--color-charcoal); color: var(--color-warm-white); }
.link { font-family: var(--font-text); font-size: 16px; line-height: 26px; color: var(--color-charcoal); text-decoration: underline; text-decoration-color: var(--color-linen); text-decoration-thickness: var(--size-hairline); text-underline-offset: 4px; background: none; border: 0; padding: 0; cursor: pointer; }
.link:active { text-decoration-color: var(--color-charcoal); }
.on-dark .link { color: var(--color-warm-white); text-decoration-color: var(--color-putty); }

/* ---- Fields ---- */
.field { display: block; width: 100%; height: var(--size-button-height); padding: 0 var(--space-4); margin: 0; background: var(--color-ivory); border: var(--size-hairline) solid var(--color-linen); border-radius: var(--radius-field); font-family: var(--font-text); font-size: 16px; line-height: 24px; color: var(--color-charcoal); outline: none; appearance: none; }
.field::placeholder { color: var(--color-putty-text); opacity: 1; }
.field:focus { border-color: var(--color-charcoal); }
.form-row { display: flex; flex-direction: column; gap: var(--space-2); }
@media (min-width: 768px) { .form-row { flex-direction: row; } .form-row .field { flex: 1 1 auto; min-width: 0; } }

/* ---- Placeholders ---- */
.ph { position: relative; background: var(--color-linen); border-radius: var(--radius-image); overflow: hidden; }
.ph-tag { position: absolute; left: var(--space-3); top: var(--space-3); margin: 0; font-family: var(--font-text); font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-putty); z-index: 1; }

/* ---- Logo images (current files; Gardi's finals replace them) ---- */
.logo-wordmark { display: block; width: 135px; height: 20px; }
.lockup-mono { display: block; width: var(--size-lockup-monogram); height: var(--size-lockup-monogram); border-radius: 14px; }
.lockup-wordmark { display: block; width: var(--size-lockup-wordmark); height: 26px; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.social-icon { display: block; width: 24px; height: 24px; fill: currentColor; }
.phone-shot { display: block; width: var(--layout-phone-width); height: var(--layout-phone-height); }
.launch-head { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.wordmark { display: inline-flex; align-items: center; height: var(--size-wordmark-nav-h); font-family: var(--font-display); font-size: 19px; line-height: 20px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-charcoal); text-decoration: none; white-space: nowrap; }
.wordmark-wrap { display: inline-flex; align-items: center; gap: var(--space-2); }

/* ---- Header (V2 layout lives in additions.css; only the shared bits stay here) ---- */
.header { position: sticky; top: 0; z-index: 20; height: 56px; background: var(--color-ivory); border-bottom: var(--size-hairline) solid var(--color-linen); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--size-tap-target-min); height: var(--size-tap-target-min); margin: 0; padding: 0; border: 0; background: transparent; color: var(--color-charcoal); cursor: pointer; }
.icon { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Hero ---- */
.hero { position: relative; }
.hero-photo { position: relative; width: 100%; }
.badge { display: inline-block; padding: calc(var(--size-app-store-badge-min-h) / 4); text-decoration: none; line-height: 0; }
.badge img { height: 48px; width: auto; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.lockup { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.monogram { width: var(--size-lockup-monogram); height: var(--size-lockup-monogram); display: flex; align-items: center; justify-content: center; border: var(--size-hairline) solid var(--color-brass); font-family: var(--font-text); font-size: 9px; line-height: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-brass); text-align: center; }
.lockup-word { width: var(--size-lockup-wordmark); font-family: var(--font-display); font-size: 24px; line-height: 28px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.hero-support { max-width: 32ch; }

/* Variant A: lockup in warm white over the charcoal scrim on the photo (the app's Welcome treatment) */
.hero-a { display: none; }
body[data-hero="a"] .hero-a { display: block; }
.hero-a .hero-photo { min-height: 560px; }
/* the scrim from the app spec: charcoal from 47% down, 0 → 82%. The one gradient the guide allows. */
.hero-a .scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(43,42,39,0) 28%, rgba(43,42,39,0.55) 58%, rgba(43,42,39,0.88) 100%); }
.hero-a .hero-content { position: absolute; left: 0; right: 0; top: 0; color: var(--color-warm-white); display: flex; flex-direction: column; }
.hero-a .hero-content .monogram { border-color: var(--color-warm-white); color: var(--color-warm-white); }
@media (min-width: 1024px) {
}

/* Variant B: photo on one side, charcoal lockup on ivory on the other (the two-tone colorway) */
.hero-b { display: none; }
body[data-hero="b"] .hero-b { display: block; }
.hero-b .hero-grid { display: flex; flex-direction: column; }
.hero-b .hero-photo { aspect-ratio: 4 / 5; order: 1; }
.hero-b .hero-content { order: 2; }
.hero-b .hero-content { padding: var(--space-8) var(--space-gutter-mobile) var(--space-10); display: flex; flex-direction: column; gap: var(--space-4); }
@media (min-width: 1024px) {
  .hero-b .hero-grid { display: grid; grid-template-columns: 1fr 1fr; min-height: min(84vh, 800px); }
  .hero-b .hero-photo { aspect-ratio: auto; height: 100%; order: 2; }
  .hero-b .hero-content { order: 1; justify-content: center; padding: var(--space-12) var(--space-16) var(--space-12) calc(max(var(--space-6), (100vw - var(--layout-content-max)) / 2) + var(--space-6)); }
}

/* ---- Sections ---- */
.section { padding: var(--space-section-mobile) 0; }
.section + .section { border-top: var(--size-hairline) solid var(--color-linen); }
@media (min-width: 1024px) { .section { padding: var(--space-section-desktop) 0; } }
.section-head { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-6); }

/* ---- How it works: three phone frames ---- */
.steps { display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--space-gutter-mobile); padding: 0 var(--space-gutter-mobile) var(--space-2); margin: 0 calc(-1 * var(--space-gutter-mobile)); scrollbar-width: none; }
.steps::-webkit-scrollbar { display: none; }
.step { flex: 0 0 82%; scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--space-4); }
.step-copy { display: flex; flex-direction: column; gap: var(--space-1); }
.step-num { color: var(--color-brass); }
/* phone frame: the 390×844 artboard in a plain charcoal outline (from the system), scaled to fit */
.phone-scale { width: 100%; aspect-ratio: 418 / 872; position: relative; }
.phone { position: absolute; left: 0; top: 0; width: 418px; height: 872px; padding: 12px; border: 2px solid var(--color-charcoal); border-radius: 56px; background: var(--color-ivory); overflow: hidden; transform-origin: top left; }
.phone-screen { width: var(--layout-phone-width); height: var(--layout-phone-height); background: var(--color-ivory); display: flex; flex-direction: column; overflow: hidden; }
.navbar { position: relative; height: calc(var(--size-status-inset-app) + var(--size-nav-bar-app)); padding: var(--size-status-inset-app) var(--space-2) 0; display: flex; align-items: center; justify-content: space-between; }
.navbar-slot { width: var(--size-tap-target-min); height: var(--size-tap-target-min); display: flex; align-items: center; justify-content: center; color: var(--color-charcoal); }
.navbar .wordmark { font-size: 17px; letter-spacing: 0.12em; }
.phone-screen .ph { flex: 1 1 auto; }
@media (min-width: 768px) {
  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); overflow: visible; padding: 0; margin: 0 auto; max-width: 1000px; }
  .step { flex: none; max-width: 296px; margin: 0 auto; width: 100%; }
}


/* ---- Launch video: a branded player (poster, brass play, brass progress) ---- */
.video { margin-top: var(--space-8); max-width: 960px; margin-left: auto; margin-right: auto; }
.player { position: relative; aspect-ratio: 16 / 9; background: var(--color-charcoal); overflow: hidden; }
.player-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--color-charcoal); }
.player-cover { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-6); background: linear-gradient(to bottom, rgba(43,42,39,0) 40%, rgba(43,42,39,0.78) 100%); color: var(--color-warm-white); cursor: pointer; }
.player-cover-text { display: flex; flex-direction: column; gap: var(--space-1); padding-right: 88px; }
.player-eyebrow { color: var(--color-warm-white); opacity: 0.85; }
.player-title { margin: 0; font-family: var(--font-display); font-size: 26px; line-height: 32px; font-weight: 500; font-style: italic; }
.player-play { position: absolute; right: var(--space-6); bottom: var(--space-6); width: 72px; height: 72px; border: 0; border-radius: var(--radius-pill); background: var(--color-brass); color: var(--color-warm-white); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.player-play:active { background: var(--color-brass-pressed); }
.player-play svg { width: 28px; height: 28px; fill: currentColor; margin-left: 3px; }
.player[data-state="playing"] .player-cover, .player[data-state="paused"] .player-cover { display: none; }
.player-bar { position: absolute; left: 0; right: 0; bottom: 0; display: none; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: linear-gradient(to top, rgba(43,42,39,0.82), rgba(43,42,39,0)); color: var(--color-warm-white); }
.player[data-state="playing"] .player-bar, .player[data-state="paused"] .player-bar { display: flex; }
.player-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--size-tap-target-min); height: var(--size-tap-target-min); border: 0; background: transparent; color: var(--color-warm-white); cursor: pointer; padding: 0; }
.player-btn svg { width: 24px; height: 24px; fill: currentColor; }
.player-btn .i-play, .player-btn .i-muted { display: none; }
.player[data-state="paused"] .i-play { display: block; } .player[data-state="paused"] .i-pause { display: none; }
.player[data-muted="true"] .i-muted { display: block; } .player[data-muted="true"] .i-sound { display: none; }
.player-track { position: relative; flex: 1 1 auto; height: 4px; border-radius: 2px; background: rgba(255,253,249,0.32); cursor: pointer; }
.player-track::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; bottom: -12px; }
.player-fill { position: absolute; left: 0; top: 0; height: 4px; width: 0; border-radius: 2px; background: var(--color-brass); }
.player-time { font-family: var(--font-text); font-size: 13px; line-height: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-4); }
@media (min-width: 768px) { .player-title { font-size: 32px; line-height: 38px; } }

/* ---- Join ---- */
.join-grid { display: flex; flex-direction: column; gap: var(--space-8); }
.join-form { display: flex; flex-direction: column; gap: var(--space-3); max-width: 520px; }
.socials { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.social { display: inline-flex; align-items: center; justify-content: center; width: var(--size-tap-target-min); height: var(--size-tap-target-min); color: var(--color-charcoal); text-decoration: none; }
.social span { display: block; width: 24px; height: 24px; border: var(--size-hairline) solid var(--color-putty); border-radius: var(--radius-pill); background: var(--color-linen); }
.joined { display: none; padding: var(--space-4) 0; }
body[data-joined="true"] .joined { display: block; }
body[data-joined="true"] .join-form { display: none; }
@media (min-width: 1024px) { .join-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-12); align-items: start; } }

/* ---- Footer ---- */
.footer { padding: var(--space-10) 0; border-top: var(--size-hairline) solid var(--color-linen); }
.footer-grid { display: flex; flex-direction: column; gap: var(--space-10); }
.footer-heading { margin: 0 0 var(--space-4); color: var(--color-putty-text); }
.footer-links { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.footer-links a { font-size: 15px; line-height: 24px; color: var(--color-charcoal); text-decoration: none; }
.footer-form { max-width: 440px; margin-top: var(--space-4); }
.footer-legal { max-width: var(--layout-content-max); margin: var(--space-12) auto 0; padding: 0 var(--space-gutter-mobile); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); font-size: 13px; line-height: 20px; color: var(--color-putty-text); }
.footer-legal a { color: var(--color-putty-text); text-decoration: underline; text-decoration-color: var(--color-linen); text-underline-offset: 4px; }
@media (min-width: 768px) { .footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-10); } }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ==========================================================================
   Site-wide additions (multi-page build)
   ========================================================================== */

/* ---- Page hero (inner pages) ---- */
.page-hero { padding: var(--space-10) 0 var(--space-8); }
.page-hero .wrap { display: flex; flex-direction: column; gap: var(--space-3); }
.page-hero .body { max-width: 52ch; }
@media (min-width: 1024px) { .page-hero { padding: var(--space-16) 0 var(--space-10); } }
.page-hero-photo { position: relative; width: 100%; aspect-ratio: 16 / 7; overflow: hidden; background: var(--color-linen); }
.page-hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band { padding: var(--space-12) 0; }
.band-ivory { background: var(--color-ivory); }
.eyebrow-row { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-6); }

/* ---- How it works: alternating steps ---- */
.flow { display: flex; flex-direction: column; gap: var(--space-12); }
.flow-step { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: center; }
.flow-copy { display: flex; flex-direction: column; gap: var(--space-2); }
.flow-copy .body { max-width: 44ch; }
.flow-phone { width: min(300px, 78%); margin: 0 auto; }
@media (min-width: 768px) {
  .flow-step { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
  .flow-step:nth-child(even) .flow-copy { order: 2; }
  .flow-phone { width: min(320px, 90%); }
}

/* ---- Design result demo with hotspots ---- */
.result-demo { position: relative; max-width: 720px; margin: 0 auto; background: var(--color-linen); }
.result-demo img { display: block; width: 100%; height: auto; }
.hotspot { position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; padding: 0; border: 2px solid var(--color-warm-white); border-radius: 999px; background: var(--color-brass); cursor: pointer; }
@keyframes hdPulse { 0% { box-shadow: 0 0 0 0 rgba(158,123,66,0.55); } 100% { box-shadow: 0 0 0 14px rgba(158,123,66,0); } }
.hotspot { animation: hdPulse 2.4s ease-out infinite; }
.hotspot.d2 { animation-delay: .8s; } .hotspot.d3 { animation-delay: 1.6s; }
@media (prefers-reduced-motion: reduce) { .hotspot { animation: none; } }
.hotspot-label[hidden] { display: none; }
.hotspot-label { position: absolute; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--color-warm-white); border: var(--size-hairline) solid var(--color-linen); border-radius: var(--radius-field); font-family: var(--font-text); font-size: 13px; line-height: 20px; color: var(--color-charcoal); white-space: nowrap; }
.hotspot-label .pill { display: inline-flex; align-items: center; height: 32px; padding: 0 var(--space-3); border-radius: 999px; background: var(--color-brass); color: var(--color-warm-white); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.disclosure { margin: var(--space-4) 0 0; font-size: 13px; line-height: 20px; color: var(--color-putty-text); }

/* ---- Cards ---- */
.card { background: var(--color-warm-white); border: var(--size-hairline) solid var(--color-linen); border-radius: var(--radius-card); overflow: hidden; color: inherit; text-decoration: none; display: flex; flex-direction: column; }
.card-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.card-img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--color-linen); }
.card-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 768px) { .card-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } }
@media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
.card-dark { background: var(--color-field-charcoal); border-color: var(--color-field-charcoal); color: var(--color-warm-white); }
.card-dark .caption { color: var(--color-warm-white); opacity: 0.8; }
.card-dark .card-body { padding: var(--space-6); }
.card-dark .quote { font-size: 30px; line-height: 36px; }
@media (min-width: 1024px) { .card-dark .quote { font-size: 40px; line-height: 46px; } }
.featured { display: grid; grid-template-columns: 1fr; margin-bottom: var(--space-8); }
@media (min-width: 1024px) { .featured { grid-template-columns: 1.2fr 1fr; } .featured .card-img { aspect-ratio: auto; height: 100%; } .featured .card-body { justify-content: flex-end; } }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: var(--size-hairline) solid var(--color-linen); border-radius: 999px; background: var(--color-ivory); color: var(--color-putty-text); font-family: var(--font-text); font-size: 13px; line-height: 16px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.chip[aria-pressed="true"], .chip.is-active { background: var(--color-charcoal); border-color: var(--color-charcoal); color: var(--color-warm-white); }

/* ---- Membership ---- */
.plans { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 768px) { .plans { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } }
@media (min-width: 1024px) { .plans { grid-template-columns: repeat(4, 1fr); } }
.plan { padding: var(--space-6); gap: var(--space-3); }
.plan-price { margin: 0; font-family: var(--font-text); font-size: 30px; line-height: 36px; font-weight: 600; }
.plan-price small { font-size: 13px; line-height: 20px; font-weight: 400; color: var(--color-putty-text); }
.plan-was { margin: 0; font-size: 13px; line-height: 20px; color: var(--color-putty-text); text-decoration: line-through; }
.plan-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); font-size: 15px; line-height: 24px; }
.plan-list li { padding-left: 18px; position: relative; }
.plan-list li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 999px; background: var(--color-brass); }
.plan-best { outline: 2px solid var(--color-charcoal); outline-offset: -2px; }
.cta-band { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-12) var(--space-gutter-mobile); border-top: var(--size-hairline) solid var(--color-linen); }
.cta-band .h2 { max-width: 620px; }
.cta-band .hero-actions-row { margin-top: var(--space-2); }
.cta-band .badge img { height: 48px; }

/* ---- Our story ---- */
.story { max-width: 62ch; display: flex; flex-direction: column; gap: var(--space-4); }
.story .quote { margin: var(--space-4) 0; padding-left: var(--space-6); border-left: 2px solid var(--color-brass); }
.credit { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; padding: var(--space-10) var(--space-gutter-mobile); border-top: var(--size-hairline) solid var(--color-linen); border-bottom: var(--size-hairline) solid var(--color-linen); }
.credit-rule { display: flex; align-items: center; gap: var(--space-3); }
.credit-rule::before, .credit-rule::after { content: ""; width: 22px; height: 1px; background: var(--color-brass); }
.designers { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 768px) { .designers { grid-template-columns: repeat(3, 1fr); } }
.designer .card-img { aspect-ratio: 1 / 1; object-position: 50% 20%; }

/* ---- Style quiz ---- */
.quiz { max-width: 960px; margin: 0 auto; }
.quiz-progress { display: flex; gap: var(--space-2); margin-bottom: var(--space-6); }
.quiz-progress span { flex: 1 1 0; height: 4px; border-radius: 2px; background: var(--color-linen); }
.quiz-progress span.is-done { background: var(--color-brass); }
.quiz-step { display: none; flex-direction: column; gap: var(--space-6); }
.quiz-step.is-active { display: flex; }
.quiz-head { display: flex; flex-direction: column; gap: var(--space-2); }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
@media (min-width: 768px) { .tiles { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } .tiles-3 { grid-template-columns: repeat(3, 1fr); } }
.tile { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer; color: var(--color-charcoal); font-family: var(--font-text); font-size: 13px; line-height: 18px; font-weight: 500; }
.tile-img { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-card); overflow: hidden; border: var(--size-hairline) solid var(--color-linen); background: var(--color-warm-white); }
.tile-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tile[aria-pressed="true"] .tile-img { box-shadow: 0 0 0 2px var(--color-charcoal); }
.tile-check { position: absolute; right: 8px; top: 8px; width: 22px; height: 22px; border-radius: 999px; background: var(--color-brass); display: none; align-items: center; justify-content: center; }
.tile[aria-pressed="true"] .tile-check { display: flex; }
.tile-check svg { width: 14px; height: 14px; fill: none; stroke: var(--color-warm-white); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.swatch { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; aspect-ratio: 4 / 3; }
.swatch span { display: block; }
.quiz-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.quiz-form { display: flex; flex-direction: column; gap: var(--space-3); max-width: 480px; }
.quiz-form label { font-family: var(--font-text); font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.inbox { display: flex; flex-direction: column; gap: var(--space-4); max-width: 52ch; }
.result { display: flex; flex-direction: column; gap: var(--space-8); }
.result-head { display: flex; flex-direction: column; gap: var(--space-2); }
.result-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 768px) { .result-grid { grid-template-columns: 1fr 1fr; } }
.result-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-card); }
.palette { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.palette div { aspect-ratio: 1 / 1; border-radius: var(--radius-field); border: var(--size-hairline) solid var(--color-linen); }
.palette-names { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); font-size: 11px; line-height: 16px; color: var(--color-putty-text); text-align: center; }
.prompt-box { position: relative; background: var(--color-warm-white); border: var(--size-hairline) solid var(--color-linen); border-radius: var(--radius-card); padding: var(--space-4); }
.prompt-box textarea { display: block; width: 100%; min-height: 150px; border: 0; background: transparent; resize: vertical; font-family: var(--font-text); font-size: 15px; line-height: 24px; color: var(--color-charcoal); outline: none; }
.prompt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-3); }
.copied { font-size: 13px; color: var(--color-putty-text); }

/* ---- Journal post ---- */
.post { max-width: 68ch; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-4); }
.post-hero { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--color-linen); }
.post .quote { margin: var(--space-4) 0; padding-left: var(--space-6); border-left: 2px solid var(--color-brass); }
.related { margin-top: var(--space-12); }

/* ---- Support / legal pages ---- */
.faq { display: flex; flex-direction: column; gap: var(--space-6); max-width: 62ch; }
.faq dt { font-family: var(--font-display); font-size: 21px; line-height: 28px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: var(--space-2); }
.faq dd { margin: 0; }

.tiles-photo .tile-img { aspect-ratio: 4 / 5; }
.result-photo { aspect-ratio: 4 / 5; }

/* ---- Inner-page proportion: headlines a step down from the hero ---- */
@media (min-width: 1024px) { .page-hero .h1 { font-size: 48px; line-height: 52px; } }

/* ---- Explore: the app's Explore tab, on the web ---- */
.explore-row { padding: var(--space-8) 0; border-top: var(--size-hairline) solid var(--color-linen); }
.explore-row:first-of-type { border-top: 0; padding-top: 0; }
.row-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.row-head .h3 { margin: 0; }
.row-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
@media (min-width: 768px) { .row-cards { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } }
.row-cards .card-img { aspect-ratio: 4 / 3; }
.row-cards .card-body { padding: var(--space-3); gap: var(--space-1); }
.row-cards .h3 { font-size: 17px; line-height: 22px; }
.spotlight { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 768px) { .spotlight { grid-template-columns: 1fr 1fr; } }
.spotlight .card-img { aspect-ratio: 3 / 2; }

/* ---- Designer review module ---- */
.designer-module { display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: center; }
@media (min-width: 768px) { .designer-module { grid-template-columns: 200px 1fr; gap: var(--space-8); } }
.designer-module img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 20%; border-radius: var(--radius-card); }
.designer-module .body { max-width: 52ch; }

/* ---- 404 ---- */
.notfound { min-height: 50vh; display: flex; flex-direction: column; justify-content: center; gap: var(--space-4); }

/* ==========================================================================
   Build 3 (Sept 25): tight. Centred section heads with real H2s, the launch video first, a brass Join band,
   socials in the community section, and hover states derived from the guide's pressed states.
   ========================================================================== */

/* ---- Section heads on Home: eyebrow + H2 + one line, centred over centred content ---- */
.section-head.center { align-items: center; text-align: center; margin-left: auto; margin-right: auto; }
.section-head.center .body { max-width: 52ch; }
.section-head .h2 { max-width: 24ch; }
.section-head.center .h2 { max-width: 36ch; }
.hero + .section { padding-top: var(--space-6); }            /* the feather already supplies the air */
@media (min-width: 1024px) { .hero + .section { padding-top: var(--space-8); } }

/* ---- Launch video as its own section ---- */
.section-video .video { margin-top: 0; }
.video-foot { justify-content: center; margin-top: var(--space-4); }

/* ---- How it works: copy centred under each phone, one foot link ---- */
.step-copy { align-items: center; text-align: center; }
.step-copy .body { max-width: 30ch; }
.steps-foot { display: flex; justify-content: center; margin-top: var(--space-8); }
@media (min-width: 768px) { .step-copy { gap: var(--space-1); } .steps-foot { margin-top: var(--space-10); } }

/* ---- Brass band (Join). The one brass field on the page: warm-white type, a warm-white field, a charcoal button.
   One brass button per viewport still holds: there is none on this band. ---- */
.section-brass { background: var(--color-brass); color: var(--color-warm-white); }
.section + .section-brass { border-top: 0; }
.section-brass .eyebrow, .section-brass .caption { color: var(--color-warm-white); opacity: 0.82; }
.section-brass .field { background: var(--color-warm-white); border-color: var(--color-warm-white); color: var(--color-charcoal); }
.section-brass .field:focus { border-color: var(--color-charcoal); }
.section-brass .field::placeholder { color: var(--color-putty-text); }
.section-brass .joined { color: var(--color-warm-white); }
.section-brass :focus-visible { outline-color: var(--color-warm-white); }
.btn-charcoal { background: var(--color-charcoal); border-color: var(--color-charcoal); color: var(--color-warm-white); }
.btn-charcoal:active { background: var(--color-field-charcoal); border-color: var(--color-field-charcoal); }
.join-form .caption { margin-top: calc(-1 * var(--space-1)); }
.follow { display: flex; flex-direction: column; gap: var(--space-2); max-width: 520px; }
.follow .socials { margin-left: calc(-1 * (var(--size-tap-target-min) - 24px) / 2); }
.section-brass .follow { margin-top: var(--space-6); padding-top: var(--space-5); border-top: var(--size-hairline) solid rgba(255,253,249,0.35); }
.section-brass .follow .label { color: var(--color-warm-white); opacity: 0.82; }
.section-brass .social { color: var(--color-warm-white); }
.section-brass .h2 { font-size: 28px; line-height: 34px; }
@media (min-width: 1024px) { .join-grid { gap: var(--space-16); } .section-brass .h2 { font-size: 40px; line-height: 46px; max-width: 500px; } }

/* ---- Hover states. The guide defines pressed states and no hover; the ten colours and nothing else. So: hover shows the
   guide's pressed state, arriving in 160ms; the press itself settles the button 1px. Keyboard focus keeps the charcoal ring.
   Only on devices that can hover, so nothing sticks on touch. ---- */
.btn, .link, .header-link, .footer-links a, .social, .card, .chip, .tile-img, .player-play, .legal a, .badge, .icon-btn { transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, text-decoration-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease, transform 160ms ease; }
.btn:active { transform: translateY(1px); }
@media (hover: hover) {
  .btn-primary:hover { background: var(--color-brass-pressed); border-color: var(--color-brass-pressed); }
  .btn-secondary:hover { background: var(--color-charcoal); color: var(--color-warm-white); }
  .btn-charcoal:hover { background: var(--color-field-charcoal); border-color: var(--color-field-charcoal); }
  .link:hover { text-decoration-color: var(--color-charcoal); }
  .on-dark .link:hover, .hero-designer .link:hover { text-decoration-color: var(--color-warm-white); }
  .header-link { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: var(--size-hairline); text-underline-offset: 6px; }
  .header-link:hover { text-decoration-color: var(--color-linen); }
  .header-link[aria-current="page"]:hover { text-decoration-color: var(--color-charcoal); }
  .footer-links a:hover { text-decoration: underline; text-decoration-color: var(--color-linen); text-decoration-thickness: var(--size-hairline); text-underline-offset: 4px; }
  .social:hover { color: var(--color-brass); }
  .section-brass .social:hover { color: var(--color-charcoal); }
  .card:hover { border-color: var(--color-putty); }
  .chip:hover { border-color: var(--color-putty); }
  .tile:hover .tile-img { box-shadow: 0 0 0 1px var(--color-putty); }
  .player-play:hover { background: var(--color-brass-pressed); }
  .badge:hover { opacity: 0.88; }
  .icon-btn:hover { color: var(--color-brass); }
}

/* ==========================================================================
   V2 (Sept 28): Kara's revision list. Header with the icon far left, three links each side of a centred wordmark,
   hover dropdowns; a left-side drawer on mobile; the hero re-proportioned to her concept; her phone mockups;
   brass-topped plan cards; contact and partner forms; footer per her list; field-charcoal legal bar.
   ========================================================================== */

/* ---- Header ---- */
.header { height: 56px; }
.header-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 0 var(--space-2) 0 var(--space-3); }
.header-icon { display: block; width: 36px; height: 36px; flex: none; }
.header-icon img { display: block; width: 100%; height: 100%; }
.header-brand { --word-w: 200px; --cap: calc(var(--word-w) / 11.2); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: block; height: var(--cap); }
.brand-wordmark { display: block; max-width: none; }
.header-brand .brand-wordmark { width: var(--word-w); height: calc(var(--cap) * 1.56); margin-top: calc(var(--cap) * -0.024); }
.header-nav, .header-cta { display: none; }
.menu-btn .i-close { display: none; }
.menu-btn[aria-expanded="true"] .i-burger { display: none; }
.menu-btn[aria-expanded="true"] .i-close { display: block; }
.header-spacer { display: none; }
@media (min-width: 1280px) {
  /* five columns: icon | left nav | wordmark space | right nav | button. The outer columns are the same width so the
     middle column, and the wordmark centred on the screen, line up; each nav group is centred in its own track. */
  .header { height: 84px; }
  .header-inner { display: grid; grid-template-columns: 156px 1fr 256px 1fr 156px; align-items: center; gap: 0; padding: 0 var(--space-6); }
  .header-icon { width: 52px; height: 52px; grid-column: 1; }
  .header-brand { --word-w: 256px; }
  .header-nav { display: block; justify-self: center; }
  .header-nav-left { grid-column: 2; }
  .header-nav-right { grid-column: 4; }
  .header-cta { display: inline-flex; grid-column: 5; justify-self: end; min-width: 156px; }
  .menu-btn { display: none; }
  .header-links { display: flex; align-items: stretch; gap: var(--space-5); margin: 0; padding: 0; list-style: none; height: 84px; }
  .header-links > li { display: flex; align-items: center; position: relative; }
  .header-link { font-family: var(--font-text); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-charcoal); text-decoration: none; white-space: nowrap; }
  .header-link[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--color-linen); text-decoration-thickness: var(--size-hairline); text-underline-offset: 6px; }
}
@media (min-width: 1440px) { .header-links { gap: var(--space-8); } }

/* ---- Dropdowns (desktop): open on hover or keyboard focus; the panel hangs from the header's bottom edge ---- */
.dropdown { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); padding-top: 2px; display: none; z-index: 30; }
.has-menu:hover .dropdown, .has-menu:focus-within .dropdown { display: block; }
.dropdown-panel { min-width: 208px; background: var(--color-warm-white); border: var(--size-hairline) solid var(--color-linen); border-top: 2px solid var(--color-brass); border-radius: 0 0 var(--radius-field) var(--radius-field); padding: var(--space-2); box-shadow: 0 14px 32px rgba(43,42,39,0.10); display: flex; flex-direction: column; }
.dropdown-link { display: block; padding: 9px var(--space-3); border-radius: 8px; font-family: var(--font-text); font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: 0.02em; color: var(--color-charcoal); text-decoration: none; white-space: nowrap; transition: background-color 120ms ease, color 120ms ease; }
.dropdown-link:hover, .dropdown-link:focus-visible { background: var(--color-ivory); color: var(--color-brass); outline: none; }

/* ---- Mobile drawer: a left-side panel under the header, two levels (like the Pottery Barn reference) ---- */
.menu { display: none; }
.drawer { position: fixed; inset: 56px 0 0 0; z-index: 25; visibility: hidden; pointer-events: none; }
.drawer[data-open="true"] { visibility: visible; pointer-events: auto; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(43,42,39,0); transition: background-color 240ms ease; }
.drawer[data-open="true"] .drawer-scrim { background: rgba(43,42,39,0.38); }
.drawer-panel { position: absolute; left: 0; top: 0; bottom: 0; width: min(82vw, 360px); background: var(--color-ivory); overflow-y: auto; box-shadow: 8px 0 24px rgba(43,42,39,0.14); transform: translateX(-100%); transition: transform 240ms ease; }
.drawer[data-open="true"] .drawer-panel { transform: none; }
.drawer-list { list-style: none; margin: 0; padding: 0; }
.drawer-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; min-height: 56px; margin: 0; padding: 0 var(--space-5); border: 0; border-bottom: var(--size-hairline) solid var(--color-linen); background: transparent; color: var(--color-charcoal); font-family: var(--font-text); font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; text-align: left; cursor: pointer; }
.drawer-sublink { min-height: 52px; font-size: 15px; line-height: 20px; font-weight: 500; letter-spacing: 0.02em; text-transform: none; }
.drawer-back { justify-content: flex-start; background: var(--color-warm-white); }
.drawer-cta { margin: var(--space-5); }
.chev { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.chev-back { margin-right: var(--space-1); }
body.menu-open { overflow: hidden; }
@media (min-width: 1280px) { .drawer { display: none; } }

/* ---- Hero, re-proportioned to Kara's concept: content set from the top, spaced by the hero's height ---- */
.hero-a .hero-content, .hero-b .hero-content { align-items: center; text-align: center; }
.hero-actions-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4); }
@media (min-width: 1024px) { .hero-b .hero-content { padding-left: var(--space-16); padding-right: var(--space-16); } }
.hero-a .hero-photo { --hero-h: min(calc(100svh - 56px), 760px); height: var(--hero-h); min-height: 560px; max-height: none; }
.hero-a .hero-content { top: 0; bottom: auto; justify-content: flex-start; padding: calc(var(--hero-h) * var(--hero-top, 0.10)) var(--space-gutter-mobile) 0; gap: 0; }
.hero-mark { display: block; width: var(--hd-w, 66px); height: auto; }
.hero-word { display: block; width: var(--word-w, 258px); height: auto; margin-top: calc(var(--hero-h) * var(--g-word, 0.02)); }
.hero .h1 { margin-top: calc(var(--hero-h) * var(--g-h1, 0.06)); font-size: clamp(20px, 5.8vw, 24px); line-height: 1.25; }
.hero .hero-support { margin-top: calc(var(--hero-h) * var(--g-support, 0.05)); max-width: 40ch; }
.hero-designer { margin-top: calc(var(--hero-h) * var(--g-designer, 0.03)); max-width: 44ch; font-size: 14px; line-height: 21px; }
.hero-designer .link { color: var(--color-warm-white); text-decoration-color: var(--color-putty); font-size: inherit; line-height: inherit; }
.caption .link { font-size: inherit; line-height: inherit; }
.hero-b .hero-designer .link { color: var(--color-charcoal); text-decoration-color: var(--color-linen); }
.hero-actions-row { margin-top: calc(var(--hero-h) * var(--g-actions, 0.025)); }
.hero-actions-row .badge img { height: 40px; }
.hero-see { margin-top: calc(var(--hero-h) * var(--g-see, 0.015)); }
.hero-a .hero-content { z-index: 2; }
@media (min-width: 1024px) {
  .hero-a .hero-photo { --hero-h: min(88vh, 860px); }
  .hero-a .hero-content { --hd-w: 121px; --word-w: 473px; max-width: none; padding-left: var(--space-6); padding-right: var(--space-6); }
  .hero .h1 { font-size: 32px; line-height: 38px; max-width: 500px; }
  .hero-actions-row .badge img { height: 48px; }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .hero-a .hero-content { --hero-top: 0.08; --hd-w: 108px; --word-w: 424px; --g-h1: 0.045; --g-support: 0.035; --g-designer: 0.02; --g-actions: 0.02; --g-see: 0.012; }
}
@media (max-width: 1023px) and (max-height: 700px) {
  .hero-a .hero-content { --hero-top: 0.07; --g-h1: 0.04; --g-support: 0.03; --g-designer: 0.02; --g-actions: 0.02; --g-see: 0.012; }
}
/* hero B keeps the same split lockup */
.hero-b .hero-content { gap: var(--space-4); }
.hero-b .hero-mark { --hd-w: 96px; margin-bottom: calc(-1 * var(--space-2)); }
.hero-b .hero-word { --word-w: 380px; margin-top: 0; }
.hero-b .h1, .hero-b .hero-support, .hero-b .hero-designer, .hero-b .hero-actions-row, .hero-b .hero-see { margin-top: 0; }
/* the scrim stays; the ivory feather now starts near the bottom (Kara: let the photo run longer) */
.hero-a .scrim { background: linear-gradient(to bottom, rgba(43,42,39,0) 0%, rgba(43,42,39,0) 22%, rgba(43,42,39,0.015) 28%, rgba(43,42,39,0.058) 35%, rgba(43,42,39,0.126) 42%, rgba(43,42,39,0.215) 48%, rgba(43,42,39,0.319) 54%, rgba(43,42,39,0.430) 61%, rgba(43,42,39,0.541) 68%, rgba(43,42,39,0.645) 74%, rgba(43,42,39,0.734) 80%, rgba(43,42,39,0.802) 87%, rgba(43,42,39,0.845) 94%, rgba(43,42,39,0.860) 100%); }
.hero-a .hero-photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 84px; background: linear-gradient(to bottom, rgba(243,238,230,0) 0%, rgba(243,238,230,0.017) 8.3%, rgba(243,238,230,0.067) 16.7%, rgba(243,238,230,0.146) 25%, rgba(243,238,230,0.250) 33.3%, rgba(243,238,230,0.371) 41.7%, rgba(243,238,230,0.500) 50%, rgba(243,238,230,0.629) 58.3%, rgba(243,238,230,0.750) 66.7%, rgba(243,238,230,0.854) 75%, rgba(243,238,230,0.933) 83.3%, rgba(243,238,230,0.983) 91.7%, rgba(243,238,230,1) 100%); pointer-events: none; z-index: 1; }
@media (min-width: 1024px) { .hero-a .hero-photo::after { height: 104px; } }
.player-cover { background: linear-gradient(to bottom, rgba(43,42,39,0) 0%, rgba(43,42,39,0) 34%, rgba(43,42,39,0.019) 41%, rgba(43,42,39,0.074) 47%, rgba(43,42,39,0.161) 54%, rgba(43,42,39,0.269) 60%, rgba(43,42,39,0.390) 67%, rgba(43,42,39,0.511) 74%, rgba(43,42,39,0.619) 80%, rgba(43,42,39,0.706) 87%, rgba(43,42,39,0.761) 93%, rgba(43,42,39,0.780) 100%); }

/* ---- Anchored sections clear the sticky header ---- */
[id] { scroll-margin-top: 72px; }
@media (min-width: 1280px) { [id] { scroll-margin-top: 100px; } }

/* ---- How it works on Home: Kara's phone mockups (backgrounds removed) ---- */
.mock { display: block; width: 78%; max-width: 280px; height: auto; margin: 0 auto; filter: drop-shadow(0 18px 28px rgba(43,42,39,0.16)); }
.section-head.center .body.lead { font-weight: 600; }
.section-head.center .body.wide { max-width: 64ch; }
.steps-foot .link { text-transform: none; }

/* ---- Portrait player (Explore: Inspiration) ---- */
.inspiration-foot { max-width: 960px; margin: var(--space-6) auto 0; }
.inspiration-foot .featured { margin-bottom: 0; }

/* ---- Membership (V3, Oct 2; revised in round 2). Kara's concept in brand colours and fonts: brass-outlined cards with
   a brass bar, Yearly in charcoal. Numerals are Montserrat (brand rule: prices never in Cormorant): SemiBold 30px, the
   unit 13px putty on the same baseline, the "was" line 13px struck through beneath. Every card's price row is 84px and
   its "was" row 28px, so the four amounts share a baseline and the four lists start on the same line. Yearly's amount
   sits on a brass seal drawn behind it, which takes no space. "Best value!" and "For a limited time!" are the display
   italic, the brand's nearest thing to script. ---- */
.founding { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); max-width: 60ch; margin: 0 auto var(--space-6); text-align: center; }
.plans { align-items: stretch; }
.plan { position: relative; padding: 0; gap: 0; background: var(--color-warm-white); border: 2px solid var(--color-brass); border-radius: var(--radius-card); overflow: hidden; display: flex; flex-direction: column; }
.plan-bar { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: var(--space-3) var(--space-4); background: var(--color-brass); color: var(--color-warm-white); font-family: var(--font-text); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; text-align: center; }
.plan-body { flex: 1 1 auto; display: flex; flex-direction: column; padding: var(--space-3) var(--space-5) var(--space-6); }
.plan-best { outline: 0; border: 3px solid var(--color-charcoal); }
.plan-best .plan-bar { background: var(--color-charcoal); min-height: 47px; }   /* 1px shorter: its border is 1px thicker, so the amounts stay on one baseline */
.plan-price { display: flex; flex-wrap: wrap; align-content: center; align-items: baseline; gap: var(--space-2); height: 84px; margin: 0; }
.plan-amount { position: relative; z-index: 0; font-family: var(--font-text); font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: 0; color: var(--color-charcoal); }
.plan-unit { font-family: var(--font-text); font-size: 13px; line-height: 20px; color: var(--color-putty-text); }
.plan-amount-seal { color: var(--color-warm-white); padding: 0 var(--space-2); }
.plan-amount-seal::before { content: ""; position: absolute; left: 50%; top: 50%; width: 90px; height: 90px; transform: translate(-50%, -50%); background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%20120'%3E%3Cpath%20fill='%239E7B42'%20d='M119.0%2060.0L118.1%2062.0L116.0%2063.9L113.7%2065.6L112.5%2067.4L112.9%2069.3L114.5%2071.6L116.1%2074.0L116.7%2076.3L115.6%2078.1L113.1%2079.3L110.4%2080.3L108.5%2081.6L108.0%2083.4L108.8%2085.9L109.8%2088.8L109.9%2091.2L108.6%2092.8L106.1%2093.5L103.1%2093.7L100.7%2094.2L99.6%2095.6L99.5%2098.1L99.7%20101.1L99.3%20103.7L97.8%20105.1L95.3%20105.2L92.4%20104.6L89.8%20104.2L88.1%20105.0L87.2%20107.2L86.6%20110.1L85.7%20112.6L84.0%20113.8L81.6%20113.5L79.0%20112.1L76.6%20111.0L74.6%20111.0L73.1%20112.5L71.7%20115.1L70.1%20117.4L68.2%20118.4L66.1%20117.7L63.9%20115.8L61.9%20113.8L60.0%20113.0L58.1%20113.8L56.1%20115.8L53.9%20117.7L51.8%20118.4L49.9%20117.4L48.3%20115.1L46.9%20112.5L45.4%20111.0L43.4%20111.0L41.0%20112.1L38.4%20113.5L36.0%20113.8L34.3%20112.6L33.4%20110.1L32.8%20107.2L31.9%20105.0L30.2%20104.2L27.6%20104.6L24.7%20105.2L22.2%20105.1L20.7%20103.7L20.3%20101.1L20.5%2098.1L20.4%2095.6L19.3%2094.2L16.9%2093.7L13.9%2093.5L11.4%2092.8L10.1%2091.2L10.2%2088.8L11.2%2085.9L12.0%2083.4L11.5%2081.6L9.6%2080.3L6.9%2079.3L4.4%2078.1L3.3%2076.3L3.9%2074.0L5.5%2071.6L7.1%2069.3L7.5%2067.4L6.3%2065.6L4.0%2063.9L1.9%2062.0L1.0%2060.0L1.9%2058.0L4.0%2056.1L6.3%2054.4L7.5%2052.6L7.1%2050.7L5.5%2048.4L3.9%2046.0L3.3%2043.7L4.4%2041.9L6.9%2040.7L9.6%2039.7L11.5%2038.4L12.0%2036.6L11.2%2034.1L10.2%2031.2L10.1%2028.8L11.4%2027.2L13.9%2026.5L16.9%2026.3L19.3%2025.8L20.4%2024.4L20.5%2021.9L20.3%2018.9L20.7%2016.3L22.2%2014.9L24.7%2014.8L27.6%2015.4L30.2%2015.8L31.9%2015.0L32.7%2012.8L33.4%209.9L34.3%207.4L36.0%206.2L38.4%206.5L41.0%207.9L43.4%209.0L45.4%209.0L46.9%207.5L48.3%204.9L49.9%202.6L51.8%201.6L53.9%202.3L56.1%204.2L58.1%206.2L60.0%207.0L61.9%206.2L63.9%204.2L66.1%202.3L68.2%201.6L70.1%202.6L71.7%204.9L73.1%207.5L74.6%209.0L76.6%209.0L79.0%207.9L81.6%206.5L84.0%206.2L85.7%207.4L86.6%209.9L87.2%2012.8L88.1%2015.0L89.8%2015.8L92.4%2015.4L95.3%2014.8L97.8%2014.9L99.3%2016.3L99.7%2018.9L99.5%2021.9L99.6%2024.4L100.7%2025.8L103.1%2026.3L106.1%2026.5L108.6%2027.2L109.9%2028.8L109.8%2031.2L108.8%2034.1L108.0%2036.6L108.5%2038.4L110.4%2039.7L113.1%2040.7L115.6%2041.9L116.7%2043.7L116.1%2046.0L114.5%2048.4L112.9%2050.7L112.5%2052.6L113.7%2054.4L116.0%2056.1L118.1%2058.0Z'/%3E%3C/svg%3E") center / contain no-repeat; z-index: -1; }
.plan-amount-seal + .plan-unit { margin-left: var(--space-1); }
.plan-was-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2) var(--space-3); height: 28px; margin: 0; }
.plan-was { margin: 0; font-size: 13px; line-height: 20px; color: var(--color-putty-text); text-decoration: line-through; }
.plan-body .plan-list { margin-top: var(--space-3); }
.plan-note { display: inline-flex; align-items: center; gap: 2px; margin: 0; font-family: var(--font-display); font-style: italic; font-size: 24px; line-height: 28px; font-weight: 500; color: var(--color-brass); }
.plan-arrow { width: 26px; height: 26px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.plan-note-foot { margin-top: auto; padding-top: var(--space-4); align-self: center; }

/* ---- Forms (Contact, Partner with us) ---- */
.form-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.form-stack label { font-family: var(--font-text); font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.form-field { display: flex; flex-direction: column; gap: var(--space-2); }
.field-textarea { height: auto; min-height: 150px; padding: var(--space-3) var(--space-4); line-height: 24px; resize: vertical; }
.field-select { padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B2A27' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }
.form-stack .btn { align-self: flex-start; margin-top: var(--space-2); }
.form-card { background: var(--color-warm-white); border: var(--size-hairline) solid var(--color-linen); border-radius: var(--radius-card); padding: var(--space-6); }
@media (min-width: 768px) { .form-card { padding: var(--space-10); } }
.form-card-head { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-8); }
.form-card-head .body { max-width: 56ch; }
.form-card .field { background: var(--color-ivory); }
.form-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 768px) { .form-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-6); } .form-span { grid-column: 1 / -1; } }
.form-actions { display: flex; justify-content: flex-start; margin-top: var(--space-1); }
.form-actions .btn { margin-top: 0; }
.contact-grid .form-card { min-width: 0; }
.contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-10); align-items: start; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--space-16); } }
.contact-aside { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-2); }
.contact-aside .h3 { font-size: 24px; line-height: 30px; }
.partner-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 768px) { .partner-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }
.partner-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); background: var(--color-warm-white); border: var(--size-hairline) solid var(--color-linen); border-radius: var(--radius-card); }
.partner-card .h3 { font-size: 22px; line-height: 28px; }
.partner-form { max-width: 640px; }
.popup { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: var(--space-6); background: rgba(43,42,39,0.45); }
.popup[hidden] { display: none; }
.popup-card { width: 100%; max-width: 440px; padding: var(--space-8) var(--space-6); background: var(--color-warm-white); border-radius: var(--radius-card); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); box-shadow: 0 24px 60px rgba(43,42,39,0.25); }
.popup-card .quote { font-size: 24px; line-height: 32px; }
body.popup-open { overflow: hidden; }

/* ---- Resources hub, FAQ ---- */
.hub { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 768px) { .hub { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } }
.hub .card-body { padding: var(--space-6); }
.faq { max-width: 68ch; }

/* ---- Story sections and stubs ---- */
.story-section { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: center; }
@media (min-width: 1024px) { .story-section { grid-template-columns: 1fr 1fr; gap: var(--space-16); } .story-section.flip .story-copy { order: 2; } }
.story-copy { display: flex; flex-direction: column; gap: var(--space-3); }
.story-copy .body { max-width: 56ch; }

/* ---- Footer per Kara's list: wordmark only, her credit, Follow along, two link columns; field-charcoal legal bar ---- */
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.footer-word { --word-w: 220px; --cap: calc(var(--word-w) / 11.2); display: block; height: var(--cap); margin-bottom: calc(var(--cap) * 0.6); }
.footer-word .brand-wordmark { width: var(--word-w); height: calc(var(--cap) * 1.56); margin-top: calc(var(--cap) * -0.024); }
@media (min-width: 1024px) { .footer-word { --word-w: 280px; } }
.footer-follow { margin-top: var(--space-3); }
.footer-follow .label { color: var(--color-putty-text); }
.legal { background: var(--color-field-charcoal); color: var(--color-warm-white); }
.legal-inner { max-width: var(--layout-content-max); margin: 0 auto; padding: var(--space-4) var(--space-gutter-mobile); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-6); font-family: var(--font-text); font-size: 13px; line-height: 20px; }
.legal-links { display: flex; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.legal a { color: var(--color-warm-white); text-decoration: none; }
.legal a:hover { text-decoration: underline; text-underline-offset: 4px; }
.legal .legal-mark { display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: var(--color-brass); margin-right: var(--space-3); vertical-align: middle; }
.footer { padding-bottom: var(--space-10); }

/* ---- Legal pages (V12, Oct 12): the Termly copy, quiet and readable, in the article's voice. Cormorant headings,
   Montserrat body; the section numbers (spans from the build) and the "Last updated" line set in Montserrat. ---- */
.legal-section { padding-top: var(--space-10); }
.legal-doc { max-width: 720px; text-align: left; }
.legal-doc h1 { margin: 0; font-family: var(--font-display); font-size: 36px; line-height: 40px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.legal-doc h1 + p { margin: var(--space-3) 0 var(--space-10); font-size: 13px; line-height: 20px; color: var(--color-putty-text); }
.legal-doc h1 + p strong { font-weight: 500; }
.legal-doc h2 { margin: var(--space-12) 0 var(--space-4); font-family: var(--font-display); font-size: 30px; line-height: 36px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.legal-doc h3 { margin: var(--space-8) 0 var(--space-3); font-family: var(--font-display); font-size: 21px; line-height: 28px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.legal-doc .num { font-family: var(--font-text); font-size: 0.74em; font-weight: 600; letter-spacing: 0.06em; margin-right: 0.1em; }
.legal-doc [id] { scroll-margin-top: 72px; }
.legal-doc p { margin: 0 0 var(--space-4); font-family: var(--font-text); font-size: 16px; line-height: 26px; }
.legal-doc ul { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
.legal-doc li { margin: 0 0 var(--space-2); font-family: var(--font-text); font-size: 16px; line-height: 26px; }
.legal-doc li > ul { margin: var(--space-2) 0 0; }
.legal-doc a { color: var(--color-brass); text-decoration: underline; text-decoration-thickness: var(--size-hairline); text-underline-offset: 3px; }
.legal-doc .toc { margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.legal-doc .toc li { margin: 0; font-size: 14px; line-height: 22px; }
.legal-doc .toc .num { font-size: 1em; margin-right: 0.3em; }
.legal-doc .toc a { text-decoration: none; }
.legal-doc .toc a:hover { text-decoration: underline; }
.legal-doc .table-scroll { overflow-x: auto; margin: 0 0 var(--space-6); -webkit-overflow-scrolling: touch; }
.legal-doc table { width: 100%; min-width: 560px; border-collapse: collapse; }
.legal-doc th, .legal-doc td { padding: var(--space-2) var(--space-3); border: var(--size-hairline) solid var(--color-linen); text-align: left; vertical-align: top; font-family: var(--font-text); font-size: 14px; line-height: 21px; }
.legal-doc th { font-weight: 600; }
@media (min-width: 1024px) { .legal-section { padding-top: var(--space-16); } .legal-doc h1 { font-size: 48px; line-height: 52px; } }

/* ==========================================================================
   V3 (Oct 2): Kara's content round, with the round-2 review fixes folded in. Design Services with her photo; Our Story
   rebuilt around her copy and photos; Community with a Creator Spotlight feature, a gallery and a Coming soon line; one
   editorial template for the Creator Spotlight page and the Thanksgiving article on Explore; the Support guide as
   cards; an Android waitlist in the FAQ; the app band on every page; a sticky footer; the phone steps stacked on
   phones. The drawer's overview rows are gone (build.py).
   ========================================================================== */

/* ---- Sticky footer: short pages (Resources, Contact) end at the legal bar, not in empty ivory ---- */
html { min-height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }

/* ---- Photo + text splits. The photo sits in a wrapper the image covers, so the column can stretch. From 1024px the
   photo column stretches to the text column's height, 680px at least; shorter text is centred beside it. A 16:9
   photo (Design Services) keeps its ratio and centres instead, so nothing is cropped away. ---- */
.story-photo { position: relative; aspect-ratio: 4 / 5; background: var(--color-linen); overflow: hidden; }
.story-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-photo-wide { aspect-ratio: 16 / 9; }
@media (min-width: 1024px) {
  .story-section { align-items: stretch; }
  .story-section .story-copy { align-self: center; }
  .story-photo { aspect-ratio: auto; min-height: 680px; }
  .story-photo-wide { aspect-ratio: 16 / 9; min-height: 0; align-self: center; }
}

/* ---- Sign-off (Our Story): the signature 200px wide, 32px under the last paragraph, a label beneath ---- */
.signoff { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); margin-top: calc(var(--space-8) - var(--space-3)); }
.signature { display: block; width: 200px; max-width: 70%; height: auto; }
.signoff .label { color: var(--color-putty-text); }

/* ---- Two-column page tops (Our Story's founder block, Community). Photo left, the right column top-aligned.
   Our Story: the portrait shows at its natural 3:5 and sets the row height; under the bio, the cottage at its natural
   4:5 beside the credentials, pushed to the foot so both columns end level. Community: the photo takes the text
   column's height. ---- */
.founder { padding-top: var(--space-6); }
.founder-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
.founder-photo { position: relative; aspect-ratio: 3 / 5; background: var(--color-linen); overflow: hidden; }
.founder-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; }
.founder-copy { display: flex; flex-direction: column; gap: var(--space-3); }
.founder-copy .body { max-width: 60ch; }
.founder-row { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-top: var(--space-2); }
.founder-home { position: relative; aspect-ratio: 4 / 5; background: var(--color-linen); overflow: hidden; }
.founder-home img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.founder-cred { display: flex; flex-direction: column; justify-content: center; gap: var(--space-3); }
.founder-divider { height: var(--size-hairline); background: var(--color-linen); margin: var(--space-3) 0; }
.community-photo { aspect-ratio: 5 / 6; }
.community-photo img { object-position: 50% 50%; }
@media (min-width: 1024px) {
  .founder { padding-top: var(--space-10); }
  .founder-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-16); align-items: stretch; }
  .founder-copy .h1 { font-size: 48px; line-height: 52px; }
  .founder-row { grid-template-columns: 1.15fr 1fr; gap: var(--space-6); margin-top: auto; padding-top: var(--space-4); }
  .community-photo { aspect-ratio: auto; min-height: 480px; }
}

/* ---- Row heads on Community and Explore: H2 like every other section title, the See All link at the baseline ---- */
.row-head { align-items: baseline; margin-bottom: var(--space-5); }
.row-head .h2, .row-head .h3 { margin: 0; }
.row-head .link { white-space: nowrap; }

/* ---- Community: the Creator Spotlight feature, the gallery, News & events, Coming soon ---- */
.plain { color: inherit; text-decoration: none; }
@media (hover: hover) { .plain:hover { text-decoration: underline; text-decoration-color: var(--color-linen); text-decoration-thickness: var(--size-hairline); text-underline-offset: 6px; } }
.feature { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
.feature-photos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.feature-photos img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--color-linen); transition: box-shadow 160ms ease; }
@media (hover: hover) { .feature-photos:hover img { box-shadow: 0 0 0 1px var(--color-putty); } }
.feature-copy { display: flex; flex-direction: column; gap: var(--space-2); }
.feature-title { margin: 0; font-family: var(--font-display); font-size: 24px; line-height: 30px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.feature-copy .body { max-width: 44ch; }
.feature-more { margin-top: var(--space-1); }
.feature-under-video { max-width: 960px; margin: var(--space-8) auto 0; }
@media (min-width: 1024px) {
  .feature { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; }
  .feature-photos { gap: var(--space-4); }
  .feature-title { font-size: 28px; line-height: 34px; }
}
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.gallery img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-card); border: var(--size-hairline) solid var(--color-linen); background: var(--color-linen); }
.gallery-8 img:nth-child(n+5) { display: none; }
@media (min-width: 768px) { .gallery { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } .gallery-8 img:nth-child(n+5) { display: block; } }
.news { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); background: var(--color-warm-white); border: var(--size-hairline) solid var(--color-linen); border-left: 3px solid var(--color-brass); border-radius: var(--radius-card); }
.news-title { margin: 0; font-family: var(--font-display); font-size: 26px; line-height: 32px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.coming { margin: 0; font-family: var(--font-display); font-size: 24px; line-height: 30px; font-style: italic; font-weight: 500; color: var(--color-putty-text); }

/* ---- The article template (the Creator Spotlight page, the Inspiration article on Explore): a centred head
   (eyebrow, title, standfirst, meta) over the 960px feature width, photo rows at 960, a 720px text column, pull
   quotes, and split image + text passages. ---- */
.article-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); width: 100%; max-width: 960px; margin: 0 auto; }
.article-head .h1, .article-head .h2 { max-width: 30ch; }
.article-head .body { max-width: 52ch; }
.page-hero .article-head { gap: var(--space-3); }
.article { display: flex; flex-direction: column; gap: var(--space-6); width: 100%; max-width: 960px; margin: 0 auto; }
.article .post { width: 100%; max-width: 720px; margin: 0 auto; }
.post .lead { font-weight: 600; }
.photos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); width: 100%; }
.photos img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--color-linen); }
.photos-3 img:first-child { grid-column: 1 / -1; }
.photo-1 { width: 100%; max-width: 480px; margin: 0 auto; }
.photo-1 img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--color-linen); }
.split { display: grid; grid-template-columns: 1fr; gap: var(--space-5); width: 100%; align-items: center; }
.split img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--color-linen); }
.split .post { margin: 0; }
@media (min-width: 768px) {
  .photos { gap: var(--space-4); }
  .photos-3 { grid-template-columns: repeat(3, 1fr); }
  .photos-3 img, .photos-3 img:first-child { grid-column: auto; aspect-ratio: 3 / 4; }
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--space-10); }
}
@media (min-width: 1024px) { .article { gap: var(--space-8); } .feature-under-video { margin-top: var(--space-10); } }

/* ---- Support: the guide, as cards; the hero carries "Make the most of House Dressed" ---- */
.page-hero .h2 { margin-top: var(--space-3); }
.guide { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.guide .card-body { padding: var(--space-6); gap: var(--space-3); }
.guide-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); font-size: 16px; line-height: 26px; }
.guide-list li { position: relative; padding-left: 18px; }
.guide-list li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 999px; background: var(--color-brass); }
.idea-title { margin: 0; font-family: var(--font-display); font-size: 24px; line-height: 30px; font-style: italic; font-weight: 500; }
.template { margin: 0; padding: var(--space-4) var(--space-5); background: var(--color-ivory); border-left: 3px solid var(--color-brass); border-radius: 0 var(--radius-field) var(--radius-field) 0; font-family: var(--font-display); font-size: 21px; line-height: 30px; font-style: italic; font-weight: 500; }
@media (min-width: 768px) {
  .guide { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
  .guide-span { grid-column: 1 / -1; }
  .guide-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-6); }
}
@media (min-width: 1024px) { .guide-3 { grid-template-columns: repeat(3, 1fr); } }

/* ---- FAQ: the Android waitlist (Netlify form `android`; the return state is #android-joined) ---- */
.android-form { margin-top: var(--space-3); max-width: 520px; }
.android-form .btn { flex: none; }
.android-joined { display: none; margin-top: var(--space-3); color: var(--color-putty-text); }
body[data-android-joined="true"] .android-form { display: none; }
body[data-android-joined="true"] .android-joined { display: block; }

/* ---- Style quiz, parked: a coming-soon page with the join form (the quiz builds unchanged at /style-quiz/draft/) ---- */
.soon { padding-bottom: var(--space-12); }
@media (min-width: 1024px) { .soon { padding-bottom: var(--space-16); } }
.soon-join { margin-top: var(--space-3); }
.soon-join .join-form { max-width: 520px; }
.soon-join .joined { padding: 0; }

/* ---- Home on phones: the three steps stack, each phone about 60% of the screen, copy beneath ---- */
@media (max-width: 767px) {
  .steps { display: flex; flex-direction: column; gap: var(--space-8); overflow: visible; scroll-snap-type: none; padding: 0; margin: 0; }
  .step { flex: none; width: 100%; }
  .mock { width: 60vw; max-width: 280px; }
}

/* ==========================================================================
   V4 (Oct 4): Before & After. Kara's gifs (Oct 3) as muted, looping videos: the cover of each category on Explore, and
   every tile on /explore/before-and-after/ with an enlarged view. Every tile is 4:5 and nothing is cropped; the poster
   is the first frame (the before), so the loop starts without a jump. On phones the home headline sits a little higher.
   ========================================================================== */

/* ---- Tiles: the Community gallery's treatment (14px radius, hairline linen, linen behind the poster while it loads).
   The frame holds the 4:5 box and clips the video; hover is the gallery's putty hairline, and the caption (Explore)
   underlines like a plain link. A tile is a link on Explore and a button on the Before & After page. ---- */
.ba-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--space-3); }
@media (min-width: 768px) { .ba-row { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } }
.ba-tile { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); width: 100%; margin: 0; padding: 0; border: 0; border-radius: var(--radius-card); background: transparent; color: var(--color-charcoal); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.ba-frame { display: block; position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius-card); overflow: hidden; border: var(--size-hairline) solid var(--color-linen); background: var(--color-linen); transition: box-shadow 160ms ease; }
.ba-frame video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--color-linen); }
.ba-caption { display: block; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: var(--size-hairline); text-underline-offset: 5px; transition: text-decoration-color 160ms ease; }
@media (hover: hover) {
  .ba-tile:hover .ba-frame { box-shadow: 0 0 0 1px var(--color-putty); }
  .ba-tile:hover .ba-caption { text-decoration-color: var(--color-linen); }
}

/* ---- The enlarged view: a charcoal scrim, the 640x800 rendition centred and fitted to the viewport at 4:5, close top
   right, previous and next beside it (under it on phones), the category and count beneath. Opened, the page behind
   stops scrolling and its tiles pause. ---- */
.ba-lightbox { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: var(--space-16) var(--space-6) var(--space-6); color: var(--color-warm-white); }
.ba-lightbox[hidden] { display: none; }
.ba-scrim { position: absolute; inset: 0; background: rgba(43,42,39,0.85); }
.ba-dialog { position: relative; display: grid; grid-template-columns: var(--size-tap-target-min) auto var(--size-tap-target-min); grid-template-areas: "stage stage stage" "prev count next"; align-items: center; justify-items: center; gap: var(--space-3) var(--space-2); }
.ba-stage { grid-area: stage; width: min(640px, calc(100vw - 48px), calc((100vh - 168px) * 4 / 5)); width: min(640px, calc(100vw - 48px), calc((100svh - 168px) * 4 / 5)); aspect-ratio: 4 / 5; border-radius: var(--radius-card); overflow: hidden; background: var(--color-charcoal); }
.ba-full { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--color-charcoal); }
.ba-prev { grid-area: prev; }
.ba-next { grid-area: next; }
.ba-count { grid-area: count; text-align: center; opacity: 0.82; }
.ba-close { position: fixed; top: var(--space-2); right: var(--space-2); }
.ba-lightbox .icon-btn { color: var(--color-warm-white); border-radius: var(--radius-pill); }
.ba-lightbox :focus-visible { outline-color: var(--color-warm-white); }
@media (hover: hover) { .ba-lightbox .icon-btn:hover { background: rgba(255,253,249,0.14); } }
@media (min-width: 768px) {
  .ba-dialog { grid-template-areas: "prev stage next" ". count ."; gap: var(--space-4) var(--space-4); }
  .ba-stage { width: min(640px, calc(100vw - 168px), calc((100vh - 168px) * 4 / 5)); width: min(640px, calc(100vw - 168px), calc((100svh - 168px) * 4 / 5)); }
  .ba-close { top: var(--space-5); right: var(--space-5); }
}
html.ba-lock, body.ba-lock { overflow: hidden; }

/* ---- Home hero on phones: the headline 12px higher (0.016 of the 760px hero), clear of the sconces in the photo, with
   33px still under the wordmark. Short screens keep their own tighter setting above; desktop is unchanged. ---- */
@media (max-width: 767px) and (min-height: 701px) { .hero-a .hero-content { --g-h1: 0.044; } }

/* ==========================================================================
   Motion (Oct 7): scroll reveals, in the manner of havenly.com. One move only: a block fades from 0 and rises into
   place (16px, 12px on phones) over 600ms on an ease-out curve, once, when about 15% of it is in view; within a
   staggered group the children arrive 80ms apart, 400ms at most (site.js). Transform and opacity only, so nothing
   reflows. A block is hidden only once JavaScript has run (html.js, set by the one-line script in the head, before
   the first paint); with "reduce motion" on, the page shows as is; a block taller than the viewport only fades
   (.is-flat); anything in the first viewport on load simply shows (.is-still); a finished block drops back to its
   own styles (.is-done). :where() keeps the hidden rule's specificity low; a browser without it ignores the rule
   and hides nothing. Round 2 (the same day) adds the arrival, lingering photos, the enlarged view's fade and the page
   cross-fade, below.
   ========================================================================== */
:root { --reveal-rise: 16px; --reveal-ease: cubic-bezier(.2,.7,.2,1); }
@media (max-width: 767px) { :root { --reveal-rise: 12px; } }
html.js [data-reveal]:where(:not(.is-done)), html.js [data-reveal-group] > :where(:not(.is-done)) { opacity: 0; transform: translateY(var(--reveal-rise)); transition: opacity 600ms var(--reveal-ease), transform 600ms var(--reveal-ease); }
html.js [data-reveal].is-in, html.js [data-reveal-group] > .is-in { opacity: 1; transform: none; }
html.js [data-reveal].is-flat, html.js [data-reveal-group] > .is-flat { transform: none; transition-property: opacity; }
html.js [data-reveal].is-still, html.js [data-reveal-group] > .is-still { transition: none; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal], html.js [data-reveal-group] > * { opacity: 1; transform: none; transition: none; }
  html.arrive .hero-img, html.arrive .scrim, html.arrive .hero-content > *, html.arrive .page-hero .wrap > *, html.arrive .article-head > * { animation: none; }
}

/* ---- Round 2 (Oct 7): the arrival. When a page opens fresh at the top with the tab visible, the head script sets
   html.arrive (a plain navigation, no hash, not a reload or a back, not reduced motion): the hero photo and its scrim
   fade in over 600ms with no rise and, from 250ms, the hero's parts arrive in reading order with the standard move,
   100ms apart (Home: mark, wordmark, headline, support line, designer line, badges with the Learn More link; inner
   pages: each line of the page head in turn, an article head's byline and caption together, the style quiz's join
   form last). site.js continues the sequence with the reveal units already in the first viewport, eight beats at
   most, and takes html.arrive off once everything has landed. A reload mid-page, a back navigation or an anchor link
   skips it: those units simply show. While a page cross-fade is running (html.vt) the arrival holds. ---- */
@keyframes hd-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hd-arrive { from { opacity: 0; transform: translateY(var(--reveal-rise)); } to { opacity: 1; transform: none; } }
html.arrive .hero-a .hero-photo { background: var(--color-ivory); }
html.arrive .hero-img, html.arrive .scrim { animation: hd-fade-in 600ms ease-out both; }
html.arrive .hero-content > *, html.arrive .page-hero .wrap > :not(.article-head), html.arrive .article-head > * { animation: hd-arrive 600ms var(--reveal-ease) both; }
html.arrive .hero-mark, html.arrive .page-hero .wrap > :nth-child(1), html.arrive .article-head > :nth-child(1) { animation-delay: 250ms; }
html.arrive .hero-word, html.arrive .page-hero .wrap > :nth-child(2), html.arrive .article-head > :nth-child(2) { animation-delay: 350ms; }
html.arrive .hero-content > .h1, html.arrive .page-hero .wrap > :nth-child(3), html.arrive .article-head > :nth-child(n+3) { animation-delay: 450ms; }
html.arrive .hero-support, html.arrive .page-hero .wrap > :nth-child(4) { animation-delay: 550ms; }
html.arrive .hero-designer, html.arrive .page-hero .wrap > :nth-child(5) { animation-delay: 650ms; }
html.arrive .hero-actions-row, html.arrive .hero-see, html.arrive .page-hero .wrap > :nth-child(n+6) { animation-delay: 750ms; }
html.vt .hero-img, html.vt .scrim, html.vt .hero-content > *, html.vt .page-hero .wrap > :not(.article-head), html.vt .article-head > * { animation-play-state: paused; }   /* the same selectors as the shorthand above, after it, so the pause wins */

/* ---- Photos linger: inside a group, an image unit (a split's photo, the founder photo, each photo of a row, each
   gallery tile) takes 900ms instead of 600, so it still leads by 80ms and lands last; copy stays at 600. ---- */
html.js [data-reveal-group] > :where(img, .story-photo, .founder-photo) { transition-duration: 900ms; }

/* ---- The enlarged view: the scrim fades in over 200ms and the video arrives with the standard move over 300ms;
   closing reverses in 160ms. Without html.js (reduce motion) it appears and goes at once, as before. ---- */
html.js .ba-scrim, html.js .ba-dialog { opacity: 0; transition: opacity 160ms ease; }
html.js .ba-stage { opacity: 0; transform: translateY(var(--reveal-rise)); transition: opacity 160ms ease, transform 160ms ease; }
html.js .ba-lightbox.is-open .ba-scrim, html.js .ba-lightbox.is-open .ba-dialog { opacity: 1; transition-duration: 200ms; }
html.js .ba-lightbox.is-open .ba-stage { opacity: 1; transform: none; transition: opacity 300ms var(--reveal-ease), transform 300ms var(--reveal-ease); }

/* ---- Page cross-fade, progressive: between two pages of the site the browser cross-fades the old and the new over
   250ms where it can (Chrome, Safari), the header pinned in place; other browsers, and reduce motion, get the plain
   load. The head script holds the arrival until the cross-fade has finished. ---- */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 250ms; }
.header { view-transition-name: site-header; }

/* ---- Kit handoff (Oct 11): the one-line error under a form when /api/subscribe fails ---- */
.form-error { margin-top: var(--space-2); color: var(--color-espresso); }
.section-brass .form-error { color: var(--color-warm-white); }

/* ---- Cutover (Oct 12): the App Store badge's caption ("Coming soon" then; "Coming this November" since Nov 1, SOON in
   build.py), there until APP_LIVE in build.py. A quiet
   Montserrat label under the badge, tucked up into the badge's padding so it sits close; the row's items align to the
   top, so the Google Play badge stays level with the App Store badge and the caption hangs under it. Warm white on
   the hero photo, putty on ivory. ---- */
.badge-soon { display: inline-flex; flex-direction: column; align-items: center; }
.badge-note { margin-top: calc(2px - var(--size-app-store-badge-min-h) / 4); font-family: var(--font-text); font-size: 10px; line-height: 14px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-putty-text); white-space: nowrap; }
.on-dark .badge-note { color: var(--color-warm-white); opacity: 0.8; }
.hero-actions-row:has(.badge-soon) { align-items: flex-start; }
.hero-actions-row:has(.badge-soon) > .link { align-self: center; }   /* the quiz draft's "Retake the quiz" beside the badge */

/* ---- Cookie Policy (Oct 12): Termly's per-cookie tables are two narrow columns (Name, Purpose, Provider...), so they
   keep their own width on phones instead of the wide CCPA table's scroll. ---- */
.legal-doc .cookie-table { margin: 0 0 var(--space-4); min-width: 0; }
.legal-doc .cookie-table th { width: 7em; white-space: nowrap; }
.legal-doc .cookie-table + .cookie-table { margin-top: var(--space-4); }

/* ---- Sign-up confirmed (Oct 12): the page Kit sends people to after they confirm. One hero: on phones the copy, the
   buttons, "Come say hi" (the footer's follow pattern and its five icons) and then the home page's living room, in the
   rounded card treatment of the tiles; from 900px two columns, the copy centred against the photo, with less room below
   so the footer sits in view at 1440x900. The arrival animates the two columns as units (the wrap's direct children). ---- */
.confirmed-hero.page-hero { padding-bottom: var(--space-10); }
.confirmed-copy { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.confirmed-actions { justify-content: flex-start; margin-top: var(--space-3); }
.confirmed-hi { margin-top: var(--space-6); }
.confirmed-hi .caption { max-width: 44ch; }
.confirmed-photo { position: relative; width: 100%; aspect-ratio: 4 / 3; margin-top: var(--space-6); border-radius: var(--radius-card); overflow: hidden; border: var(--size-hairline) solid var(--color-linen); background: var(--color-linen); }
.confirmed-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .confirmed-hero.page-hero { padding: var(--space-12) 0; }
  .confirmed-hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--space-12); }
  .confirmed-photo { aspect-ratio: 1 / 1; max-width: 560px; margin: 0 0 0 auto; }
}

/* ==========================================================================
   Kara's Oct 13 round: the portrait walkthrough on How It Works, and the launch countdown on Home (replaced Nov 1 by the
   hero signup, below).
   ========================================================================== */

/* ---- Portrait player (.player-portrait, build.py's portrait=True): Kara's app walkthrough is 9:16, so the slot takes
   that shape rather than letterboxing the reel. The cover is the brass play button alone, centred, with no gradient:
   the section's H1 already names the video, so the eyebrow and title stay in the markup for screen readers but are
   visually hidden. A linen hairline keeps the ivory app screen from melting into the page. Once playing, the control
   bar and fullscreen are the other players'; in fullscreen the frame shows whole (contain) and the hairline goes. ---- */
.player-portrait { aspect-ratio: 9 / 16; border: var(--size-hairline) solid var(--color-linen); }
.player-portrait .player-cover { justify-content: center; align-items: center; padding: 0; background: none; }
.player-portrait .player-cover-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.player-portrait .player-play { position: static; }
.player-portrait:fullscreen { border: 0; }
.player-portrait:fullscreen .player-video { object-fit: contain; }

/* ---- How It Works: the page hero and the walkthrough are one split hero (.walk-hero, still section.page-hero with
   id="what-is-house-dressed" for the nav and Home's "See The Full Walkthrough"). From 900px the copy sits beside the
   video (360px wide, 380 from 1200px; 64px between, 96 from 1200px), the two centred on each other; under 900px the
   copy comes first and the video follows, min(100%, 360px) wide and centred. ---- */
.walk-hero .wrap { gap: var(--space-8); }
.walk-copy { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.walk-media { width: min(100%, 360px); margin: 0 auto; }
@media (min-width: 900px) {
  .walk-hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 360px; column-gap: var(--space-16); align-items: center; }
  .walk-media { width: auto; margin: 0; }
}
@media (min-width: 1200px) {
  .walk-hero .wrap { grid-template-columns: minmax(0, 1fr) 380px; column-gap: var(--space-24); }
}
/* The arrival on this hero: the three lines of the copy one at a time (250, 350, 450ms), as on every inner page, then
   the video on the next beat (550ms); the copy column itself does not move, so nothing animates twice. The same
   holds and exceptions as the arrival above (the cross-fade pauses it; reduce motion shows the page as is). */
html.arrive .page-hero .wrap > .walk-copy { animation: none; }
html.arrive .walk-copy > * { animation: hd-arrive 600ms var(--reveal-ease) both; }
html.arrive .walk-copy > :nth-child(1) { animation-delay: 250ms; }
html.arrive .walk-copy > :nth-child(2) { animation-delay: 350ms; }
html.arrive .walk-copy > :nth-child(n+3) { animation-delay: 450ms; }
html.arrive .page-hero .wrap > .walk-media { animation-delay: 550ms; }
html.vt .walk-copy > * { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { html.arrive .walk-copy > * { animation: none; } }

/* ---- Hero signup (Nov 1; hero_signup in build.py, while APP_LIVE is False): the launch countdown's place in the home hero,
   both variants, between the designer line and the badges. One line, "Coming this November to the App Store", in the label
   style the countdown's label used (Montserrat 11px, tracked caps; nothing larger), and the brass band's join form under it
   at the band's 520px: the field as it is everywhere; the button, in hero A, warm white with charcoal text (the hero's own
   colorway, beside the white badge) and in hero B the band's charcoal. The thank-you line takes the form's place through
   body[data-joined], the state the band's form sets, so the two forms agree. No motion of its own beyond the arrival.
   Hero A: warm white on the photo; hero B: putty line, charcoal field text. No brass. ---- */
.hero-signup { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; max-width: 520px; margin-top: calc(var(--hero-h) * var(--g-count, 0.03)); }
.hero-b .hero-signup { margin-top: 0; }
.hero-signup-label { text-wrap: balance; }   /* on phones the line breaks in two even halves ("Coming this November / to the App Store"), never a lone word on the second line */
.hero-signup .join-form { width: 100%; margin-top: var(--space-3); }
.hero-signup .form-row .btn { white-space: nowrap; }
.hero-signup .joined { padding: 0; margin-top: var(--space-3); }
.hero-a .hero-signup { color: var(--color-warm-white); }
.hero-a .hero-signup .btn-charcoal { background: var(--color-warm-white); border-color: var(--color-warm-white); color: var(--color-charcoal); }
.hero-a .hero-signup .btn-charcoal:active { background: var(--color-ivory); border-color: var(--color-ivory); }
@media (hover: hover) { .hero-a .hero-signup .btn-charcoal:hover { background: var(--color-ivory); border-color: var(--color-ivory); } }
.hero-a .hero-signup .form-error { color: var(--color-warm-white); }
.hero-a .hero-signup :focus-visible { outline-color: var(--color-warm-white); }
.hero-b .hero-signup-label { color: var(--color-putty-text); }
/* While the hero carries the line, the home hero's App Store badge drops its "Coming this November" caption (the line says
   it); the caption stays everywhere else, and the Google Play badge is untouched. */
.hero-content:has(.hero-signup) .badge-note { display: none; }
/* The signup takes about 80px on desktop (the line and one row) and about 140px on phones (the field and the button
   stack below 768px), which would carry Learn More down into the ivory feather at the photo's foot (warm white loses its
   contrast there), so while it is up hero A gives the room back, as it did for the countdown: on desktop the short-screen
   preset (the one for heights up to 820px, above) applies at every height, and on a short desktop screen or a short phone
   (an iPhone SE) a tighter one still, the lockup a little smaller and the gaps closer. The badges and Learn More stay on
   the first screen and above the feather at every size shot5.js measures. */
@media (min-width: 1024px) {
  .hero-a .hero-content:has(.hero-signup) { --hero-top: 0.08; --hd-w: 108px; --word-w: 424px; --g-h1: 0.045; --g-support: 0.035; --g-designer: 0.02; --g-actions: 0.02; --g-see: 0.012; }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .hero-a .hero-content:has(.hero-signup) { --hero-top: 0.05; --hd-w: 92px; --word-w: 380px; --g-word: 0.015; --g-h1: 0.032; --g-support: 0.025; --g-designer: 0.015; --g-count: 0.02; --g-actions: 0.015; --g-see: 0.01; }
}
/* Phones (the field and the button stack, so the signup is about 70px taller than the countdown was): the gaps close up so
   the badges and Learn More still clear the feather on a 390x844 or 414x896 screen with room to spare. */
@media (max-width: 767px) and (min-height: 701px) {
  .hero-a .hero-content:has(.hero-signup) { --hero-top: 0.07; --g-word: 0.015; --g-h1: 0.034; --g-support: 0.032; --g-designer: 0.02; --g-count: 0.02; --g-actions: 0.016; --g-see: 0.01; }
}
/* A short phone (an iPhone SE, 375x667): the tightest gaps, and the photo runs 60px longer than the screen so the badges
   and Learn More sit above the feather (the line is two lines at 375 in Montserrat), Learn More's foot still inside the
   first screen. */
@media (max-width: 1023px) and (max-height: 700px) {
  .hero-a .hero-photo:has(.hero-signup) { min-height: 670px; }
  .hero-a .hero-content:has(.hero-signup) { --hero-top: 0.04; --hd-w: 56px; --word-w: 232px; --g-word: 0.01; --g-h1: 0.026; --g-support: 0.018; --g-designer: 0.012; --g-count: 0.016; --g-actions: 0.012; --g-see: 0.008; }
  .hero-a .hero-signup .join-form { margin-top: var(--space-2); }
  .hero-a .hero-signup .form-row { gap: var(--space-1); }
}
/* The arrival: the signup comes in on the badges' beat (750ms); no motion of its own after that. */
html.arrive .hero-signup { animation-delay: 750ms; }

/* ---- Hero A legibility (Oct 13, Kara): on phones the headline sits over the sconces' glow and the warm-white letters
   wash out there. The hero's text carries a soft charcoal halo with no offset, so it reads as the room being a touch
   darker behind the words rather than as a drop shadow. Text only: the logo is a placed vector and takes no effects. ---- */
.hero-a .hero-content .h1 { text-shadow: 0 0 28px rgba(43,42,39,0.85), 0 0 12px rgba(43,42,39,0.7), 0 0 3px rgba(43,42,39,0.5); }
.hero-a .hero-support, .hero-a .hero-designer, .hero-a .hero-signup-label, .hero-a .hero-signup .joined, .hero-a .hero-see { text-shadow: 0 0 16px rgba(43,42,39,0.6), 0 0 4px rgba(43,42,39,0.4); }

/* ==========================================================================
   Content Round B (Oct 22): the design tips (four step-by-step articles and their row on Explore), the Creator
   Spotlight grid on Community, and two new pieces in the spotlight bodies (Amanda's wide photo, Patti's befores).
   ========================================================================== */

/* ---- A design tip's page: the steps as an ordered list in the article's 720px text column at every width. Each step
   is its number (the label style in brass, two digits), the title in bold run into the text, and its photo at its own
   shape, full column width, never cropped (a step without one is text alone). The numbers are written out, so the
   browser's markers go. ---- */
.tip-steps { list-style: none; width: 100%; max-width: 720px; margin: 0 auto; padding: 0; display: flex; flex-direction: column; gap: var(--space-10); }
.tip-step { display: flex; flex-direction: column; gap: var(--space-2); }
.tip-num { color: var(--color-brass); }
.tip-step img { width: 100%; height: auto; margin-top: var(--space-2); background: var(--color-linen); }
@media (min-width: 1024px) { .tip-steps { gap: var(--space-12); } }

/* ---- Explore, Design Tips: the Before & After row's grid (two across on phones, four from 768px, the same gaps) of
   cards, each one link: the cover at 4:5 in the gallery's treatment (14px radius, hairline linen, the putty hairline on
   hover, the title underlining like a plain link), the title in the feature-title style sized for a quarter-width card,
   the read time, and from 1024px the summary (at two columns it wraps too long). ---- */
.tips-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--space-3); }
.tip-card { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); min-width: 0; color: var(--color-charcoal); text-decoration: none; }
.tip-frame { position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius-card); overflow: hidden; border: var(--size-hairline) solid var(--color-linen); background: var(--color-linen); transition: box-shadow 160ms ease; }
.tip-frame img { width: 100%; height: 100%; object-fit: cover; }
.tip-title { margin-top: var(--space-1); font-size: 19px; line-height: 25px; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: var(--size-hairline); text-underline-offset: 5px; transition: text-decoration-color 160ms ease; }
.tip-summary { display: none; }
@media (hover: hover) {
  .tip-card:hover .tip-frame { box-shadow: 0 0 0 1px var(--color-putty); }
  .tip-card:hover .tip-title { text-decoration-color: var(--color-linen); }
}
@media (min-width: 768px) { .tips-row { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } }
@media (min-width: 1024px) {
  .tip-title { font-size: 22px; line-height: 28px; }
  .tip-summary { display: block; margin-top: var(--space-1); }
}

/* ---- Community, Creator Spotlight: a grid of the feature card, one per creator, each with one photo (the entry's
   cover) at 4:5 in the card's own treatment. One column on phones, two from 768px; the cover sits above the copy until
   1024px and beside it from there, the copy column a little wider than the photo and centred against it. The cover,
   eyebrow, title and Read More open the creator's page; the Instagram link stays external. ---- */
.spotlight-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-10); }
.spot-card { gap: var(--space-4); }
.spot-card .feature-photos { grid-template-columns: 1fr; }
@media (min-width: 768px) { .spotlight-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-10) var(--space-6); } }
@media (min-width: 1024px) {
  .spotlight-grid { gap: var(--space-12) var(--space-8); }
  .spot-card { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-6); align-items: center; }
  .spot-card .feature-title { font-size: 24px; line-height: 30px; }
}

/* ---- Two new pieces in the spotlight bodies (the markup is in the partials). .photo-wide (Amanda): one landscape photo
   at the full 960px article width, at its own 3:2, never cropped. figure.before (Patti): three befores of different
   shapes, each carrying flex: <width/height> inline, so in one flex row their widths come out in proportion to their
   shapes and their heights equal, nothing cropped, the row filling the width (from 768px). On phones the first two share
   a row the same way and the third, the landscape one, takes a row of its own: min-width makes it wrap, the inline flex
   basis untouched. The caption sits under the photos in the label style, left aligned, and the browser's figure margins
   go. The befores carry a small MLS watermark, which this never crops or covers. ---- */
.photo-wide { width: 100%; }
.photo-wide img { width: 100%; height: auto; background: var(--color-linen); }
figure.before { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; margin: 0; }
.before-photos { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.before-photos img { min-width: 0; height: auto; background: var(--color-linen); }
.before-photos img:nth-child(3) { min-width: 100%; }
figure.before figcaption { text-align: left; }
@media (min-width: 768px) {
  .before-photos { flex-wrap: nowrap; gap: var(--space-4); }
  .before-photos img:nth-child(3) { min-width: 0; }
}