/* Hallmark · pre-emit critique: P5 H4 E5 S5 R5 V5 */
/* Hallmark · macrostructure: full-bleed hero carousel · nav: quiet section tone · footer: statement */

/* Self-hosted brand fonts, the same families the admin shell uses. The site
   never loads a third-party font CDN: one product, one stack. */
@font-face {
  font-family: "Montserrat";
  src: url("/fonts/Montserrat-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Variable.ttf") format("truetype-variations");
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-void: hsl(0 0% 6%);
  --color-surface: hsl(0 0% 8%);
  --color-surface-soft: hsl(0 0% 15%);
  --color-paper: hsl(0 0% 95%);
  --color-ink: hsl(0 0% 95%);
  --color-muted: hsl(0 0% 60%);
  --color-faint: hsl(0 0% 52%);
  --color-rule: hsl(0 0% 95% / .17);
  --color-rule-strong: hsl(0 0% 95% / .32);
  --color-accent: hsl(103 22% 56%);
  --color-accent-deep: hsl(103 30% 45%);
  --color-accent-ink: hsl(0 0% 6%);
  --color-night-ink: hsl(0 0% 6%);
  --color-gold: hsl(30 26% 44%);
  --color-gold-deep: hsl(30 35% 35%);
  --font-display: "Montserrat", system-ui, sans-serif;
  --font-body: "Open Sans", system-ui, sans-serif;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease: cubic-bezier(.25, .46, .45, .94);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --gutter: clamp(1.25rem, 4vw, 4.75rem);
  --section-space: clamp(7rem, 15vw, 15rem);
  --max-copy: 38rem;
  --masthead-scrolled-bg: #fff;
  --masthead-scrolled-ink: hsl(0 0% 6%);
  --masthead-scrolled-link: hsl(0 0% 24%);
  --masthead-scrolled-hover: hsl(103 32% 30%);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--color-void);
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-void);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  overflow-x: clip;
}

body[data-age-gated],
body[data-menu-open] {
  overflow: hidden;
}

body::before {
  position: fixed;
  z-index: 70;
  inset: 0;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
  content: "";
  opacity: .06;
  mix-blend-mode: soft-light;
}

body[data-nav-tone="light"] .masthead {
  color: var(--color-night-ink);
}

body[data-nav-tone="light"] .masthead__nav a,
body[data-nav-tone="light"] .masthead__signout button {
  color: color-mix(in oklch, var(--color-night-ink) 72%, transparent);
}

button,
a,
input {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  border: 0;
  cursor: pointer;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 5px;
}

img {
  display: block;
  max-width: 100%;
}

em {
  color: var(--color-accent);
  font-style: normal;
}

h1,
h2,
h3,
p,
figure {
  margin: 0;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.035em;
  text-wrap: pretty;
}

p {
  text-wrap: pretty;
}

/* The hidden attribute always wins: JS shows and hides the bag drawer, bag
   lines and summaries with it, and a component `display` rule must never
   leave a hidden layer on screen. */
[hidden] {
  display: none !important;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 1rem;
  left: 1rem;
  padding: .7rem 1rem;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  transform: translateY(-150%);
  transition: transform .35s var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

.grid-system {
  position: fixed;
  z-index: 0;
  top: 0;
  right: var(--gutter);
  bottom: 0;
  left: var(--gutter);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(1rem, 3vw, 3rem);
  pointer-events: none;
  opacity: .36;
}

.grid-system span {
  border-left: 1px solid var(--color-rule);
}

.grid-system span:last-child {
  border-right: 1px solid var(--color-rule);
}

.masthead {
  position: fixed;
  z-index: 50;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.25rem;
  padding: 1.2rem var(--gutter);
  color: var(--color-ink);
  mix-blend-mode: normal;
  transition: color .5s var(--ease), background-color .5s var(--ease), border-color .5s var(--ease);
}

.masthead::after {
  position: absolute;
  right: var(--gutter);
  bottom: 0;
  left: var(--gutter);
  border-bottom: 1px solid var(--color-rule);
  content: "";
  opacity: .8;
}

.masthead__brand {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  width: fit-content;
}

.masthead__brand img {
  width: clamp(7.75rem, 12vw, 9.5rem);
  height: auto;
}

/* Header only: the footer reuses .masthead__brand on its always-dark band. */
body[data-nav-tone="light"] .masthead .masthead__brand img {
  filter: invert(1);
}

.masthead__nav,
.masthead__menu-toggle,
.chapter__kicker,
.section-index,
.hero-index,
.chapter-media figcaption,
.location-explorer__top,
.filter-group button,
.developer-row__type,
.filter-status,
.rail-heading,
.editorial-rail article > span,
.article-list a > span:first-child,
.event-list time,
.event-list article > span,
.portrait figcaption,
.city-panel small,
.journal-grid > a > span,
.footer-label,
.site-footer__bottom,
.age-gate__mark {
  font-size: .66rem;
  letter-spacing: .12em;
  line-height: 1.25;
  text-transform: uppercase;
}

.masthead__nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: clamp(.9rem, 1.6vw, 2.25rem);
}

.masthead__nav a,
.masthead__signout button {
  color: var(--color-muted);
  white-space: nowrap;
  transition: color .25s var(--ease);
}

.masthead__nav a:hover,
.masthead__nav a:focus-visible,
.masthead__signout button:hover,
.masthead__signout button:focus-visible {
  color: var(--color-accent);
}

.masthead__signout {
  margin: 0;
}

.masthead__signout button,
.menu-panel__signout button {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  letter-spacing: inherit;
  text-transform: inherit;
}

.masthead__member {
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.masthead__menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: .35rem 0 .35rem .5rem;
  background: transparent;
  color: currentColor;
  text-transform: uppercase;
}

.masthead__menu-toggle i,
.masthead__menu-toggle i::after {
  display: block;
  width: 1.6rem;
  height: 1px;
  background: currentColor;
  content: "";
  transition: transform .4s var(--ease-out);
}

.masthead__menu-toggle i::after {
  transform: translateY(.42rem);
}

.masthead__menu-toggle[aria-expanded="true"] i {
  transform: rotate(45deg);
}

.masthead__menu-toggle[aria-expanded="true"] i::after {
  transform: translateY(0) rotate(-90deg);
}

.menu-panel {
  position: fixed;
  z-index: 45;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(33rem, 100vw);
  padding: 7.5rem var(--gutter) 3rem;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  transform: translateX(0);
  transition: transform .65s var(--ease-drawer);
}

.menu-panel[hidden] {
  display: block;
  transform: translateX(105%);
}

.menu-panel__inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.menu-panel__note {
  max-width: 12rem;
  margin-bottom: 3rem;
  font-size: .82rem;
}

.menu-panel__nav {
  display: grid;
}

.menu-panel__nav a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: .55rem 0;
  border-bottom: 1px solid color-mix(in oklch, var(--color-accent-ink) 28%, transparent);
  font-family: var(--font-display);
  font-size: clamp(1.68rem, 4vw, 2.8rem);
  letter-spacing: -.035em;
  line-height: .9;
  transition: padding .4s var(--ease-out), color .25s var(--ease);
}

.menu-panel__nav a span {
  font-family: var(--font-body);
  font-size: .65rem;
  letter-spacing: .1em;
}

.menu-panel__nav a:hover,
.menu-panel__nav a:focus-visible {
  padding-left: .6rem;
  color: var(--color-ink);
}

.menu-panel__signout {
  margin: 0;
}

.menu-panel__signout button {
  display: block;
  width: 100%;
  padding: .55rem 0;
  border-bottom: 1px solid color-mix(in oklch, var(--color-accent-ink) 28%, transparent);
  color: inherit;
  font-family: var(--font-display);
  font-size: clamp(1.68rem, 4vw, 2.8rem);
  letter-spacing: -.035em;
  line-height: .9;
  text-align: left;
}

.menu-panel__signout button:hover,
.menu-panel__signout button:focus-visible {
  color: var(--color-ink);
}

.menu-panel .text-link {
  margin-top: auto;
  color: var(--color-accent-ink);
}

.chapter {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: clip;
}

.chapter--hero,
.chapter--urban,
.chapter--coffee,
.chapter--fashion,
.chapter--automotive,
.chapter--events,
.chapter--people,
.chapter--journal,
.chapter--newsletter {
  --chapter-bg: var(--color-void);
  background: var(--color-void);
}

.chapter--ecosystem:not([data-nav-tone="light"]),
.chapter--cannabis:not([data-nav-tone="light"]),
.chapter--developers:not([data-nav-tone="light"]),
.chapter--creative:not([data-nav-tone="light"]),
.chapter--cities:not([data-nav-tone="light"]),
.chapter--community:not([data-nav-tone="light"]) {
  --chapter-bg: var(--color-surface);
  --color-paper: var(--color-surface-soft);
  --color-night-ink: var(--color-ink);
  background: var(--color-surface);
  color: var(--color-ink);
}

/* Light sections are opt-in: the home page marks the sections that keep the
   original paper treatment, so the page alternates light and dark while every
   other page stays dark. The paper palette is restored here, which puts the
   dark-on-light descendants back on ink-on-paper. */
.chapter[data-nav-tone="light"],
.page-section[data-nav-tone="light"] {
  --chapter-bg: var(--color-paper);
  --color-paper: var(--color-ink);
  --color-night-ink: var(--color-void);
  background: var(--color-paper);
  color: var(--color-night-ink);
}

/* The dark-surface helpers assume a dark section: inside an opted-in light
   section they have to read as ink on paper instead. */
/* Sage accent text is too light on paper (2.4:1), so accent-coloured text in a
   light section uses a darker sage that clears 4.5:1. */
.chapter[data-nav-tone="light"] .section-index,
.chapter[data-nav-tone="light"] .section-index--dark,
.chapter[data-nav-tone="light"] .chapter__kicker,
.chapter[data-nav-tone="light"] h2 em,
.chapter[data-nav-tone="light"] .ecosystem-list span {
  color: hsl(103 32% 30%);
}

.chapter[data-nav-tone="light"] .section-index--dark span + span {
  color: color-mix(in oklch, var(--color-night-ink) 54%, transparent);
}

.chapter[data-nav-tone="light"] .text-link--dark {
  border-color: color-mix(in oklch, var(--color-night-ink) 34%, transparent);
  color: var(--color-night-ink);
}

.chapter[data-nav-tone="light"] .button--dark {
  background: var(--color-night-ink);
  color: var(--color-paper);
}

.chapter[data-nav-tone="light"] .button--dark:hover,
.chapter[data-nav-tone="light"] .button--dark:focus-visible {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.chapter__inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 3vw, 3rem);
  width: min(100%, 100rem);
  min-height: inherit;
  margin: 0 auto;
  padding: var(--section-space) var(--gutter);
}

.chapter__inner--hero {
  align-content: center;
  min-height: 100svh;
  padding-top: clamp(9rem, 13vw, 12rem);
  padding-bottom: clamp(5rem, 7vw, 7rem);
}

.chapter--hero {
  isolation: isolate;
}

.hero-backdrop,
.hero-wash {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.035);
  transition: opacity .95s var(--ease-in-out), transform 7s var(--ease-in-out);
  will-change: opacity, transform;
}

.hero-slide--active,
.hero-slide[data-hero-active="true"] {
  opacity: 1;
  transform: scale(1);
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.82) contrast(1.08) brightness(.7);
}

.hero-wash {
  z-index: 1;
  background:
    linear-gradient(90deg, color-mix(in oklch, var(--color-void) 92%, transparent), color-mix(in oklch, var(--color-void) 18%, transparent) 48%, color-mix(in oklch, var(--color-void) 72%, transparent)),
    linear-gradient(180deg, color-mix(in oklch, var(--color-void) 78%, transparent), transparent 34%, color-mix(in oklch, var(--color-void) 82%, transparent));
  animation: hero-wash 12s var(--ease-in-out) infinite alternate;
}

@keyframes hero-wash {
  from {
    opacity: .83;
    transform: scale(1);
  }

  to {
    opacity: .97;
    transform: scale(1.025);
  }
}

.chapter__inner--tight {
  min-height: auto;
  padding-top: clamp(8rem, 12vw, 11rem);
  padding-bottom: clamp(8rem, 12vw, 11rem);
}

.chapter__intro {
  position: relative;
  z-index: 3;
  grid-column: 3 / span 8;
  align-self: center;
  width: min(100%, 46rem);
  margin-inline: auto;
  text-align: center;
}

.chapter__kicker {
  margin-bottom: 1.2rem;
  color: var(--color-accent);
}

.chapter__intro h1 {
  max-width: none;
  margin-inline: auto;
  font-size: clamp(2.8rem, 6.2vw, 6.2rem);
  letter-spacing: -.055em;
  line-height: .79;
}

.hero-title__line {
  display: inline-block;
  white-space: nowrap;
}

.chapter__lede {
  max-width: 27rem;
  margin: 2rem auto 0;
  color: var(--color-muted);
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  font-weight: 300;
}

.chapter__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.4rem 2rem;
  margin-top: 2.25rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-width: 11rem;
  padding: .9rem 1rem .9rem 1.15rem;
  border: 1px solid transparent;
  font-size: .73rem;
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
  transition: transform .35s var(--ease-out), background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}

.button span {
  font-size: 1.1rem;
  line-height: .6;
}

.button--lime {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.button--lime:hover,
.button--lime:focus-visible {
  background: var(--color-ink);
}

.button--outline {
  border-color: var(--color-rule-strong);
  color: var(--color-ink);
}

.button--outline:hover,
.button--outline:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.button--dark {
  background: var(--color-ink);
  color: var(--color-void);
}

.button--dark:hover,
.button--dark:focus-visible {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  width: fit-content;
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--color-rule-strong);
  color: var(--color-ink);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: gap .35s var(--ease-out), color .25s var(--ease), border-color .25s var(--ease);
}

.text-link:hover,
.text-link:focus-visible {
  gap: 1rem;
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.text-link--lime {
  border-color: var(--color-accent-deep);
  color: var(--color-accent);
}

.text-link--dark {
  border-color: color-mix(in oklch, var(--color-ink) 34%, transparent);
  color: var(--color-ink);
}

.hero-index {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(5.5rem, 10vw, 8rem);
  display: flex;
  gap: 2rem;
  color: var(--color-faint);
}

.hero-side {
  position: absolute;
  z-index: 3;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  color: var(--color-ink);
  font-size: .66rem;
  letter-spacing: .12em;
  line-height: 1.25;
  text-transform: uppercase;
  transform: translateY(-50%);
}

.hero-side--left {
  left: var(--gutter);
}

.hero-side--right {
  right: var(--gutter);
}

.hero-side__label,
.hero-side__location,
.hero-side__total {
  color: var(--color-muted);
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.hero-side__number {
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: -.02em;
}

.hero-side__rule {
  width: 1px;
  height: clamp(4rem, 10vh, 7rem);
  background: linear-gradient(to bottom, transparent, var(--color-accent), transparent);
}

.hero-side--right .hero-side__rule {
  background: linear-gradient(to bottom, transparent, var(--color-gold), transparent);
}

.hero-controls {
  display: flex;
  gap: .4rem;
  margin-top: .35rem;
}

.hero-control {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  border: 1px solid var(--color-rule-strong);
  background: color-mix(in oklch, var(--color-void) 20%, transparent);
  color: var(--color-ink);
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease-out);
}

.hero-control:hover,
.hero-control:focus-visible {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.hero-announcement {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.chapter__scroll-cue {
  position: absolute;
  right: var(--gutter);
  bottom: 2.2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--color-muted);
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.chapter__scroll-cue i {
  display: block;
  width: 2.6rem;
  height: 1px;
  background: var(--color-accent);
}

.section-index {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid color-mix(in oklch, currentColor 28%, transparent);
  color: var(--color-accent);
}

.section-index span + span {
  display: inline;
  margin-top: 0;
  color: var(--color-faint);
  line-height: 1.45;
}

.section-index--dark {
  color: var(--color-accent);
}

.section-index--dark span + span {
  color: var(--color-faint);
}

.chapter__heading {
  grid-column: 3 / span 5;
}

.chapter__heading h2,
.urban-copy h2,
.fashion-copy h2,
.creative-intro h2,
.people-heading h2,
.cities-heading h2,
.community-statement h2,
.newsletter-copy h2 {
  font-size: clamp(3.2rem, 6.8vw, 6.96rem);
  letter-spacing: -.065em;
  line-height: .78;
}

.chapter__heading > p:last-child,
.urban-copy > p:last-child,
.fashion-copy > p:last-child,
.creative-intro > p:last-child,
.people-heading > p:last-child,
.newsletter-copy > p:last-child {
  max-width: 20rem;
  margin-top: 2rem;
  color: var(--color-muted);
  font-size: 1rem;
  font-weight: 300;
}

.chapter--ecosystem .chapter__heading > p:last-child,
.chapter--developers .chapter__heading > p:last-child,
.chapter--cannabis .chapter__heading > p:last-child,
.chapter--cities .chapter__heading > p:last-child,
.chapter--community .chapter__heading > p:last-child {
  color: color-mix(in oklch, var(--color-night-ink) 70%, transparent);
}

.chapter__heading--split {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 2rem;
  grid-column: 3 / span 8;
}

.chapter--ecosystem .chapter__heading--split {
  grid-column: 1 / -1;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  margin-top: clamp(3.5rem, 6vw, 6rem);
}

.chapter--ecosystem .chapter__heading--split h2 {
  grid-column: 1 / span 7;
}

.chapter--ecosystem .chapter__heading--split > p {
  grid-column: 9 / span 4;
}

.chapter__heading--split > p {
  align-self: end;
  margin-bottom: .4rem;
  color: var(--color-muted);
}

.ecosystem-list {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 7rem;
  border-top: 1px solid color-mix(in oklch, var(--color-night-ink) 20%, transparent);
}

.ecosystem-list article {
  min-height: 12.5rem;
  padding: 1.1rem 0 0;
  border-right: 1px solid color-mix(in oklch, var(--color-night-ink) 16%, transparent);
}

.ecosystem-list article:last-child {
  border-right: 0;
}

.ecosystem-list span {
  color: var(--color-accent-deep);
  font-size: .7rem;
  letter-spacing: .1em;
}

.ecosystem-list h3 {
  margin-top: 3.8rem;
  font-size: clamp(1.6rem, 2.4vw, 2.4rem);
  line-height: .9;
}

.ecosystem-list p {
  max-width: 10rem;
  margin-top: .7rem;
  color: color-mix(in oklch, var(--color-night-ink) 65%, transparent);
  font-size: .82rem;
}

.chapter-media {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-rule-strong);
}

.chapter-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.86) contrast(1.04);
  transition: transform .8s var(--ease-out), filter .5s var(--ease);
}

.chapter-media:hover img {
  transform: scale(1.025);
  filter: saturate(1) contrast(1.04);
}

.chapter-media figcaption {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--color-ink);
  text-shadow: 0 1px 1rem rgb(0 0 0 / .6);
}

.chapter-media figcaption span:last-child {
  color: var(--color-accent);
  text-align: right;
}

.chapter-media--wide {
  grid-column: 1 / -1;
  height: min(59vw, 37rem);
  margin-top: 8rem;
  border-radius: 0 0 0 1.6rem;
}

.chapter-media--hero {
  grid-column: 7 / -1;
  align-self: center;
  width: 100%;
  height: min(62vw, 43rem);
  overflow: hidden;
  border: 1px solid var(--color-rule-strong);
  background: var(--color-surface);
  border-radius: 0 0 1.6rem 0;
}

.chapter-media--hero img {
  object-fit: cover;
}

.chapter__inner--urban {
  align-content: center;
  min-height: 100vh;
  min-height: 100dvh;
}

.urban-copy {
  position: relative;
  z-index: 3;
  grid-column: 1 / span 4;
  align-self: center;
}

.urban-copy h2 {
  font-size: clamp(4rem, 7.2vw, 7.6rem);
}

.urban-copy > p:last-child {
  max-width: 17rem;
}

.location-explorer {
  position: relative;
  z-index: 3;
  grid-column: 1 / span 4;
  grid-row: 2;
  align-self: end;
  padding: 1rem 0 0;
  border-top: 1px solid var(--color-rule-strong);
}

.location-explorer__top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--color-faint);
}

.location-explorer__top span:last-child {
  color: var(--color-accent);
  text-align: right;
}

.location-explorer__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem .7rem;
  margin-top: 1.5rem;
}

.location-explorer__buttons button,
.filter-group button {
  padding: .6rem .7rem;
  border: 1px solid var(--color-rule);
  background: transparent;
  color: var(--color-muted);
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}

.location-explorer__buttons button:hover,
.location-explorer__buttons button[aria-pressed="true"],
.filter-group button:hover,
.filter-group button[aria-pressed="true"] {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.location-explorer__description {
  max-width: 19rem;
  margin-top: 1.2rem;
  color: var(--color-muted);
  font-size: .9rem;
  font-weight: 300;
}

.chapter-media--urban {
  position: absolute;
  z-index: 1;
  top: 17%;
  right: var(--gutter);
  width: min(49vw, 51rem);
  height: min(66vh, 44rem);
  opacity: .84;
  border-radius: 1.6rem 0 0 0;
}

.chapter--developers .chapter__heading {
  grid-column: 3 / span 5;
}

.developer-intro {
  grid-column: 9 / span 3;
  align-self: end;
}

.developer-intro > p {
  color: color-mix(in oklch, var(--color-night-ink) 70%, transparent);
  font-size: .95rem;
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: 1.5rem;
}

.filter-group button {
  border-color: color-mix(in oklch, var(--color-night-ink) 20%, transparent);
  color: color-mix(in oklch, var(--color-night-ink) 70%, transparent);
}

.developer-list {
  grid-column: 3 / span 9;
  margin-top: 8rem;
}

.developer-row {
  display: grid;
  grid-template-columns: 2rem 1fr auto 1.4rem;
  align-items: center;
  gap: 1.5rem;
  padding: 1.3rem 0;
  border-top: 1px solid color-mix(in oklch, var(--color-night-ink) 18%, transparent);
  transition: padding .45s var(--ease-out), color .25s var(--ease);
}

.developer-row:last-child {
  border-bottom: 1px solid color-mix(in oklch, var(--color-night-ink) 18%, transparent);
}

.developer-row[hidden] {
  display: none;
}

.developer-row:hover {
  padding-right: .6rem;
  padding-left: .6rem;
  color: var(--color-accent-deep);
}

.developer-row > span:first-child,
.developer-row__type {
  color: color-mix(in oklch, var(--color-night-ink) 58%, transparent);
  font-size: .67rem;
  letter-spacing: .1em;
}

.developer-row h3 {
  font-size: clamp(1.6rem, 3.04vw, 2.88rem);
  line-height: .9;
}

.developer-row p {
  margin-top: .35rem;
  color: color-mix(in oklch, var(--color-night-ink) 55%, transparent);
  font-size: .78rem;
}

.developer-row__arrow {
  color: var(--color-accent-deep);
  font-size: 1.5rem;
}

.filter-status {
  grid-column: 3 / span 9;
  margin-top: 1rem;
  color: color-mix(in oklch, var(--color-night-ink) 48%, transparent);
}

.chapter--coffee .chapter__heading {
  grid-column: 3 / span 6;
}

.coffee-feature {
  position: relative;
  grid-column: 3 / span 9;
  min-height: min(42vw, 34rem);
  margin-top: 7rem;
}

.chapter-media--coffee {
  width: min(64%, 38rem);
  height: min(42vw, 34rem);
  border-radius: 0 1.6rem 0 0;
}

.coffee-feature__copy {
  position: absolute;
  right: 0;
  bottom: 2.5rem;
  width: 37%;
}

.coffee-feature__copy h3 {
  font-size: clamp(2.4rem, 4.4vw, 4.8rem);
  line-height: .78;
}

.coffee-feature__copy .text-link {
  margin-top: 2rem;
}

.cutout {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  object-fit: contain;
  filter: drop-shadow(0 1.5rem 1rem rgb(0 0 0 / .24));
}

.cutout--cup {
  top: 9%;
  left: 48%;
  width: 21%;
  transform: rotate(-8deg);
}

.rail-heading {
  display: flex;
  grid-column: 3 / span 9;
  justify-content: space-between;
  align-items: center;
  margin-top: 7rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--color-rule);
  color: var(--color-faint);
}

.rail-control {
  width: 2rem;
  height: 2rem;
  margin-left: .4rem;
  border: 1px solid var(--color-rule-strong);
  background: transparent;
  color: var(--color-ink);
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}

.rail-control:hover,
.rail-control:focus-visible {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.editorial-rail {
  display: flex;
  grid-column: 3 / span 9;
  gap: 1rem;
  padding-top: 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--color-accent-deep) transparent;
}

.editorial-rail article {
  flex: 0 0 min(25vw, 17rem);
  min-height: 11rem;
  padding: .5rem .8rem .5rem 0;
  border-right: 1px solid var(--color-rule);
}

.editorial-rail article h3 {
  margin-top: 3.8rem;
  font-size: clamp(1.85rem, 3vw, 2.8rem);
  line-height: .87;
}

.editorial-rail article p {
  margin-top: .65rem;
  color: var(--color-muted);
  font-size: .78rem;
}

.chapter--cannabis .chapter__inner,
.chapter--creative .chapter__inner,
.chapter--cities .chapter__inner,
.chapter--community .chapter__inner {
  min-height: 100vh;
  min-height: 100dvh;
}

.cannabis-layout {
  display: contents;
}

.chapter--cannabis .chapter__heading {
  grid-column: 3 / span 4;
}

.chapter--cannabis .chapter__heading > p:last-child {
  max-width: 19rem;
  color: color-mix(in oklch, var(--color-night-ink) 66%, transparent);
}

.chapter-media--cannabis {
  grid-column: 8 / span 4;
  height: min(56vw, 42rem);
  margin-top: -2rem;
  border-radius: 0 0 1.6rem 1.6rem;
}

.article-list {
  grid-column: 3 / span 9;
  margin-top: 6rem;
  border-top: 1px solid color-mix(in oklch, var(--color-night-ink) 20%, transparent);
}

.article-list a {
  display: grid;
  grid-template-columns: 7rem 1fr 1.5rem;
  gap: 1rem;
  align-items: center;
  padding: 1.2rem 0;
  border-bottom: 1px solid color-mix(in oklch, var(--color-night-ink) 20%, transparent);
  transition: padding .4s var(--ease-out), color .25s var(--ease);
}

.article-list a:hover,
.article-list a:focus-visible {
  padding-right: .5rem;
  padding-left: .5rem;
  color: var(--color-accent-deep);
}

.article-list a > span:first-child {
  color: color-mix(in oklch, var(--color-night-ink) 54%, transparent);
}

.article-list h3 {
  font-size: clamp(1.36rem, 2.4vw, 2.4rem);
  line-height: .9;
}

.chapter__inner--fashion {
  align-content: center;
  min-height: 100vh;
  min-height: 100dvh;
}

.fashion-copy {
  position: relative;
  z-index: 4;
  grid-column: 1 / span 5;
  align-self: center;
}

.fashion-copy h2 {
  font-size: clamp(4.32rem, 8vw, 8.32rem);
}

.fashion-copy > p:last-child {
  max-width: 18rem;
}

.fashion-copy .button {
  margin-top: 2rem;
}

.chapter-media--fashion {
  position: absolute;
  top: 14%;
  right: 12%;
  width: min(46vw, 43rem);
  height: min(73vh, 49rem);
  border-radius: 1.6rem 0 1.6rem 0;
}

.cutout--sneaker {
  right: 7%;
  bottom: 11%;
  width: min(24vw, 19rem);
  transform: rotate(-7deg);
}

.chapter__heading--wide {
  grid-column: 3 / span 7;
}

.chapter-media--automotive {
  grid-column: 2 / span 10;
  height: min(55vw, 44rem);
  margin-top: 6rem;
  border-radius: 0 1.6rem 0 1.6rem;
}

.automotive-rail-wrap {
  grid-column: 3 / span 9;
}

.editorial-rail--automotive {
  padding-bottom: .5rem;
}

.creative-intro {
  grid-column: 3 / span 5;
}

.creative-intro h2 {
  font-size: clamp(3.84rem, 6.4vw, 6.8rem);
}

.creative-intro > p:last-child {
  color: color-mix(in oklch, var(--color-night-ink) 66%, transparent);
}

.portrait-grid {
  position: relative;
  grid-column: 3 / span 9;
  min-height: 44rem;
  margin-top: 5rem;
}

.portrait {
  position: absolute;
  overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--color-night-ink) 24%, transparent);
}

.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.78);
  transition: transform .8s var(--ease-out), filter .5s var(--ease);
}

.portrait:hover img {
  transform: scale(1.03);
  filter: saturate(1);
}

.portrait--large {
  top: 0;
  left: 0;
  width: 57%;
  height: 34rem;
  border-radius: 50% 0 0 0;
}

.portrait--small {
  right: 2%;
  bottom: 0;
  width: 32%;
  height: 21rem;
  border-radius: 0 0 0 50%;
}

.portrait--cutout {
  overflow: visible;
  border: 0;
  background: transparent;
}

.portrait--cutout img {
  object-fit: contain;
}

.portrait figcaption {
  position: absolute;
  right: .8rem;
  bottom: .8rem;
  left: .8rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--color-ink);
  text-shadow: 0 1px 1rem rgb(0 0 0 / .6);
}

.portrait figcaption span:last-child {
  color: var(--color-accent);
  text-align: right;
}

.portrait-note {
  position: absolute;
  right: 1%;
  top: 18%;
  width: 25%;
  padding-top: .8rem;
  border-top: 1px solid color-mix(in oklch, var(--color-night-ink) 32%, transparent);
}

.portrait-note span {
  color: var(--color-accent-deep);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.portrait-note p {
  margin-top: 1.2rem;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: .92;
}

.chapter--events .chapter__heading {
  grid-column: 3 / span 8;
}

.event-list {
  grid-column: 3 / span 9;
  margin-top: 7rem;
  border-top: 1px solid var(--color-rule);
}

.event-list article {
  display: grid;
  grid-template-columns: 7rem 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--color-rule);
  transition: padding .4s var(--ease-out), color .25s var(--ease);
}

.event-list article:hover {
  padding-right: .6rem;
  padding-left: .6rem;
  color: var(--color-accent);
}

.event-list time,
.event-list article > span {
  color: var(--color-faint);
}

.event-list h3 {
  font-size: clamp(1.44rem, 2.8vw, 2.64rem);
  line-height: .88;
}

.event-list p {
  margin-top: .35rem;
  color: var(--color-muted);
  font-size: .8rem;
}

.chapter--events .text-link {
  grid-column: 3 / span 4;
  margin-top: 2rem;
}

.people-heading {
  grid-column: 3 / span 5;
}

.people-heading h2 {
  font-size: clamp(4rem, 7.2vw, 7.68rem);
}

.people-heading > p:last-child {
  max-width: 16rem;
}

.people-rail {
  grid-column: 3 / span 9;
  margin-top: 7rem;
}

.people-rail article {
  flex-basis: min(27vw, 19rem);
  min-height: 27rem;
}

.people-portrait {
  height: 17rem;
  margin-bottom: 1rem;
  overflow: hidden;
  border: 1px solid var(--color-rule);
  border-radius: 0 1.2rem 0 0;
}

.people-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.78);
  transition: transform .8s var(--ease-out), filter .5s var(--ease);
}

.people-portrait--cutout {
  display: grid;
  place-items: end center;
  background: var(--color-surface-soft);
}

.people-portrait--cutout img {
  width: 92%;
  height: 92%;
  object-fit: contain;
  filter: saturate(.9);
}

.people-rail article:hover .people-portrait img {
  transform: scale(1.04);
  filter: saturate(1);
}

.people-rail article h3 {
  margin-top: .8rem;
  font-size: 2.3rem;
  line-height: .9;
}

.people-rail article p {
  margin-top: .4rem;
  color: var(--color-muted);
  font-size: .78rem;
}

.cities-heading {
  grid-column: 3 / span 7;
}

.cities-heading h2 {
  font-size: clamp(3.6rem, 6.64vw, 6.88rem);
}

.city-grid {
  display: grid;
  grid-column: 2 / span 10;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 6rem;
}

.city-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: min(29vw, 26rem);
  min-height: 15rem;
  overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--color-night-ink) 30%, transparent);
  color: var(--color-ink);
}

.city-panel--joburg {
  border-radius: 0 1.6rem 0 0;
}

.city-panel--cape {
  border-radius: 1.6rem 0 0 0;
}

.city-panel--durban {
  border-radius: 0 0 1.6rem 0;
}

.city-panel--pretoria {
  border-radius: 0 0 0 1.6rem;
}

.city-panel::after {
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(transparent, rgb(0 0 0 / .72));
  content: "";
}

.city-panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.64) brightness(.72);
  transition: transform .8s var(--ease-out), filter .5s var(--ease);
}

.city-panel:hover img,
.city-panel:focus-visible img {
  transform: scale(1.04);
  filter: saturate(.92) brightness(.82);
}

.city-panel span,
.city-panel small {
  position: relative;
  z-index: 1;
  margin-right: .9rem;
  margin-left: .9rem;
}

.city-panel span {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.72vw, 2.56rem);
  line-height: .85;
}

.city-panel small {
  margin-bottom: .9rem;
  color: var(--color-accent);
}

.journal-grid {
  display: grid;
  grid-column: 3 / span 9;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: 7rem;
  background: var(--color-rule);
}

.journal-grid > a {
  min-height: 14rem;
  padding: 1.4rem;
  background: var(--color-void);
  transition: background-color .35s var(--ease), color .35s var(--ease);
}

.journal-grid > a:hover,
.journal-grid > a:focus-visible {
  background: var(--color-surface);
}

.journal-feature {
  grid-row: span 2;
}

.journal-grid > a > span {
  color: var(--color-accent);
}

.journal-grid > a h3 {
  max-width: 10ch;
  margin-top: 5rem;
  font-size: clamp(1.84rem, 3.2vw, 3.36rem);
  line-height: .85;
}

.journal-grid > a p {
  max-width: 16rem;
  margin-top: .8rem;
  color: var(--color-muted);
  font-size: .85rem;
}

.journal-feature img {
  width: 100%;
  height: 19rem;
  margin: -1.4rem -1.4rem 0;
  max-width: calc(100% + 2.8rem);
  object-fit: cover;
  filter: saturate(.75);
  border-radius: 0 0 1.6rem 0;
}

.journal-feature h3 {
  margin-top: 2rem !important;
}

.chapter__inner--community {
  align-content: center;
}

.community-statement {
  grid-column: 2 / span 6;
  align-self: center;
}

.community-statement h2 {
  font-size: clamp(4rem, 8vw, 8.4rem);
}

.community-copy {
  grid-column: 9 / span 3;
  align-self: center;
}

.community-copy > p {
  color: color-mix(in oklch, var(--color-night-ink) 72%, transparent);
  font-size: 1rem;
  font-weight: 300;
}

.community-copy .chapter__actions {
  align-items: flex-start;
  flex-direction: column;
}

.chapter__inner--newsletter {
  align-content: center;
  min-height: 75vh;
}

.newsletter-copy {
  grid-column: 2 / span 5;
}

.newsletter-copy h2 {
  font-size: clamp(4rem, 7.6vw, 7.6rem);
}

.newsletter-copy > p:last-child {
  max-width: 18rem;
}

.newsletter-form {
  grid-column: 8 / span 4;
  align-self: center;
}

.newsletter-form label {
  display: block;
  margin-bottom: .8rem;
  color: var(--color-faint);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.newsletter-form__field {
  display: flex;
  border-bottom: 1px solid var(--color-rule-strong);
}

.newsletter-form input {
  min-width: 0;
  flex: 1;
  padding: .8rem 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-ink);
  font-size: 1rem;
}

.newsletter-form input::placeholder {
  color: var(--color-faint);
  letter-spacing: .12em;
}

.newsletter-form button {
  padding: .8rem 0 .8rem 1rem;
  background: transparent;
  color: var(--color-accent);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .25s var(--ease), transform .35s var(--ease-out);
}

.newsletter-form button:hover,
.newsletter-form button:focus-visible {
  color: var(--color-ink);
  transform: translateX(.25rem);
}

.newsletter-form__status {
  min-height: 1.4rem;
  margin-top: .8rem;
  color: var(--color-accent);
  font-size: .78rem;
}

.newsletter-form small {
  display: block;
  margin-top: 1.2rem;
  color: var(--color-faint);
  font-size: .7rem;
}

/* WP11b: real sign-up form with an explicit consent checkbox. */
.newsletter-form__fields {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.newsletter-form__fields:disabled {
  opacity: .55;
}

.newsletter-form__fields:disabled button {
  cursor: not-allowed;
  transform: none;
}

.newsletter-form .newsletter-form__consent {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin: 1.1rem 0 0;
  color: var(--color-muted);
  font-size: .82rem;
  letter-spacing: 0;
  line-height: 1.5;
  text-transform: none;
  cursor: pointer;
}

.newsletter-form .newsletter-form__consent input {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin: .2rem 0 0;
  padding: 0;
  border: 0;
  accent-color: var(--color-accent);
}

.newsletter-form__status[data-state="failed"],
.newsletter-form__status[data-state="invalid"] {
  color: var(--color-ink);
}

.newsletter-form small a {
  color: var(--color-accent);
}

.site-footer {
  position: relative;
  z-index: 1;
  padding: 4rem var(--gutter) 1.3rem;
  background: var(--color-surface);
}

.site-footer__top {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  gap: 2rem;
  padding-bottom: 4rem;
  border-bottom: 1px solid var(--color-rule);
}

.site-footer__top p {
  color: var(--color-muted);
  font-size: .9rem;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding: 3rem 0 5rem;
}

.site-footer__grid > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .45rem;
}

.footer-label {
  margin-bottom: 1rem;
  color: var(--color-accent);
}

.site-footer__grid a,
.site-footer__grid span:not(.footer-label) {
  color: var(--color-muted);
  font-size: .83rem;
  transition: color .25s var(--ease);
}

.site-footer__grid a:hover,
.site-footer__grid a:focus-visible {
  color: var(--color-accent);
}

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--color-faint);
}

.site-footer__bottom a:hover,
.site-footer__bottom a:focus-visible {
  color: var(--color-accent);
}

.age-gate {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.25rem;
}

.age-gate[hidden] {
  display: none;
}

.age-gate__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(17 20 17 / .82);
  backdrop-filter: blur(12px);
}

.age-gate__panel {
  position: relative;
  width: min(31rem, 100%);
  padding: clamp(2rem, 6vw, 4.3rem);
  border: 1px solid var(--color-rule-strong);
  background: var(--color-void);
  box-shadow: 0 2rem 6rem rgb(0 0 0 / .32);
}

.age-gate__mark {
  color: var(--color-accent);
}

.age-gate h2 {
  margin-top: 3.8rem;
  font-size: clamp(3.2rem, 8vw, 5.6rem);
  line-height: .8;
}

.age-gate__panel > p:not(.age-gate__safety) {
  margin-top: 2rem;
  color: var(--color-muted);
  font-size: .95rem;
  font-weight: 300;
}

.age-gate__safety {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-rule);
  color: var(--color-faint);
  font-size: .78rem;
}

.age-gate__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}

.age-gate__actions .text-link {
  background: transparent;
}

/* Numbered chapters share O2's top index and full-gutter content rhythm. */
.chapter--developers .chapter__heading,
.chapter--coffee .chapter__heading,
.chapter--cannabis .chapter__heading,
.chapter--automotive .chapter__heading--wide,
.chapter--creative .creative-intro,
.chapter--events .chapter__heading,
.chapter--people .people-heading,
.chapter--cities .cities-heading,
.chapter--journal .chapter__heading,
.chapter--community .community-statement {
  grid-column: 1 / -1;
  margin-top: clamp(3.5rem, 6vw, 6rem);
}

.chapter--developers .developer-intro,
.chapter--developers .developer-list,
.chapter--developers .filter-status,
.chapter--coffee .coffee-feature,
.chapter--coffee .rail-heading,
.chapter--coffee .editorial-rail,
.chapter--cannabis .chapter-media--cannabis,
.chapter--cannabis .article-list,
.chapter--automotive .chapter-media--automotive,
.chapter--automotive .automotive-rail-wrap,
.chapter--creative .portrait-grid,
.chapter--events .event-list,
.chapter--events .text-link,
.chapter--people .people-rail,
.chapter--cities .city-grid,
.chapter--journal .journal-grid,
.chapter--community .community-copy {
  grid-column: 1 / -1;
}

.chapter--community .community-copy {
  max-width: 30rem;
  margin-left: auto;
}

@media (max-width: 1050px) {
  .masthead {
    grid-template-columns: auto 1fr auto;
  }

  .masthead__nav {
    gap: .9rem;
  }

  .chapter__intro {
    grid-column: 1 / span 7;
  }

  .chapter__heading--split {
    grid-column: 3 / span 9;
  }

  .chapter-media--wide {
    grid-column: 1 / -1;
  }

  .chapter-media--hero {
    grid-column: 7 / -1;
    width: 100%;
    height: min(62vw, 38rem);
    margin-top: 0;
  }

  .chapter-media--urban {
    right: 0;
    width: 55vw;
  }

  .city-grid {
    grid-column: 2 / span 10;
  }
}

/* Too narrow for one line of nav plus the toggle: the menu toggle takes over. */
@media (max-width: 1023px) {
  .masthead {
    grid-template-columns: 1fr auto;
  }

  .masthead__nav {
    display: none;
  }
}

@media (max-width: 740px) {
  :root {
    --gutter: 1.2rem;
    --section-space: 7rem;
  }

  .grid-system {
    right: var(--gutter);
    left: var(--gutter);
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    opacity: .22;
  }

  .grid-system span:nth-child(n + 4) {
    display: none;
  }

  .masthead {
    grid-template-columns: 1fr auto;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .masthead__nav {
    display: none;
  }

  .masthead__menu-toggle span {
    display: none;
  }

  .masthead__menu-toggle {
    padding-right: 0;
  }

  .chapter__inner,
  .chapter__inner--hero,
  .chapter__inner--tight,
  .chapter__inner--urban,
  .chapter__inner--fashion,
  .chapter__inner--community,
  .chapter__inner--newsletter {
    display: block;
    min-height: 0;
    padding-top: 7.5rem;
    padding-bottom: 7.5rem;
  }

  .chapter--hero .chapter__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100svh;
    padding-top: 9rem;
  }

  .chapter__intro,
  .chapter__heading,
  .chapter__heading--split,
  .section-index,
  .ecosystem-list,
  .chapter-media--wide,
  .urban-copy,
  .location-explorer,
  .developer-intro,
  .developer-list,
  .filter-status,
  .coffee-feature,
  .rail-heading,
  .editorial-rail,
  .chapter--cannabis .chapter__heading,
  .chapter-media--cannabis,
  .article-list,
  .fashion-copy,
  .chapter__heading--wide,
  .chapter-media--automotive,
  .automotive-rail-wrap,
  .creative-intro,
  .portrait-grid,
  .chapter--events .chapter__heading,
  .event-list,
  .chapter--events .text-link,
  .people-heading,
  .people-rail,
  .cities-heading,
  .city-grid,
  .journal-grid,
  .community-statement,
  .community-copy,
  .newsletter-copy,
  .newsletter-form {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  .chapter__intro h1 {
    font-size: clamp(2.4rem, 11vw, 5rem);
  }

  .chapter__intro {
    grid-column: auto;
  }

  .chapter__lede {
    max-width: 19rem;
  }

  .hero-side {
    top: auto;
    bottom: 4.8rem;
    flex-direction: row;
    gap: .55rem;
    transform: none;
  }

  .hero-side--left {
    left: var(--gutter);
  }

  .hero-side--right {
    right: var(--gutter);
  }

  .hero-side__label,
  .hero-side__location,
  .hero-side__total {
    display: none;
  }

  .hero-side__rule {
    width: 2rem;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--color-accent), transparent);
  }

  .hero-side__number {
    font-size: 1.15rem;
  }

  .hero-controls {
    margin-top: 0;
  }

  .hero-control {
    width: 2rem;
    height: 2rem;
  }

  .chapter__scroll-cue {
    right: var(--gutter);
    bottom: 1.4rem;
    left: var(--gutter);
    justify-content: space-between;
  }

  .chapter__heading--split {
    display: block;
  }

  .chapter__heading--split > p {
    max-width: 18rem;
    margin-top: 1.7rem;
  }

  .chapter__heading h2,
  .urban-copy h2,
  .fashion-copy h2,
  .creative-intro h2,
  .people-heading h2,
  .cities-heading h2,
  .community-statement h2,
  .newsletter-copy h2 {
    font-size: clamp(3.52rem, 14.4vw, 6rem);
  }

  .ecosystem-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    margin-top: 4rem;
  }

  .ecosystem-list article {
    min-height: 10rem;
    padding: 1rem .8rem 1rem 0;
    border-bottom: 1px solid color-mix(in oklch, var(--color-night-ink) 16%, transparent);
  }

  .ecosystem-list article:nth-child(2n) {
    padding-left: .8rem;
    border-right: 0;
  }

  .ecosystem-list h3 {
    margin-top: 2.8rem;
  }

  .chapter-media--wide,
  .chapter-media--urban,
  .chapter-media--cannabis,
  .chapter-media--fashion,
  .chapter-media--automotive {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    height: 22rem;
    margin-top: 4rem;
  }

  .urban-copy {
    position: relative;
  }

  .location-explorer {
    margin-top: 4rem;
  }

  .developer-intro {
    margin-top: 2.5rem;
  }

  .developer-list {
    margin-top: 4rem;
  }

  .developer-row {
    grid-template-columns: 1.5rem 1fr 1.3rem;
    gap: .7rem;
  }

  .developer-row__type {
    display: none;
  }

  .developer-row h3 {
    font-size: 2.15rem;
  }

  .coffee-feature {
    min-height: 0;
    margin-top: 4rem;
  }

  .chapter-media--coffee {
    width: 100%;
    height: 22rem;
  }

  .coffee-feature__copy {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    margin-top: 3rem;
  }

  .coffee-feature__copy h3 {
    font-size: clamp(2.2rem, 11vw, 3.2rem);
  }

  .cutout--cup {
    top: 13rem;
    left: auto;
    right: 2%;
    width: 35%;
  }

  .rail-heading,
  .editorial-rail,
  .article-list,
  .event-list,
  .people-rail,
  .journal-grid {
    margin-top: 4rem;
  }

  .editorial-rail article {
    flex-basis: 72vw;
  }

  .article-list a {
    grid-template-columns: 4.5rem 1fr 1rem;
    gap: .6rem;
  }

  .article-list h3 {
    font-size: 1.65rem;
  }

  .fashion-copy .button {
    margin-top: 1.7rem;
  }

  .cutout--sneaker {
    right: 1rem;
    bottom: 3rem;
    width: 45%;
  }

  .chapter-media--automotive {
    height: 18rem;
  }

  .portrait-grid {
    min-height: 33rem;
    margin-top: 4rem;
  }

  .portrait--large {
    width: 70%;
    height: 25rem;
  }

  .portrait--small {
    right: 0;
    width: 45%;
    height: 15rem;
  }

  .portrait-note {
    top: auto;
    right: 0;
    bottom: 0;
    width: 45%;
  }

  .portrait-note p {
    font-size: 1.65rem;
  }

  .event-list article {
    grid-template-columns: 1fr auto;
    gap: .75rem;
  }

  .event-list time {
    grid-column: 1 / -1;
  }

  .event-list article > span {
    grid-column: 2;
    grid-row: 2;
    max-width: 6rem;
    text-align: right;
  }

  .city-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: .65rem;
    margin-top: 4rem;
  }

  .city-panel {
    height: 16rem;
    min-height: 0;
  }

  .city-panel span {
    font-size: 2.1rem;
  }

  .journal-grid {
    display: block;
    background: transparent;
  }

  .journal-grid > a {
    display: block;
    min-height: 0;
    margin-bottom: 1px;
    padding: 1.1rem;
  }

  .journal-grid > a h3 {
    margin-top: 3.5rem;
    font-size: 3rem;
  }

  .journal-feature img {
    height: 15rem;
    margin: -1.1rem -1.1rem 0;
    max-width: calc(100% + 2.2rem);
  }

  .community-copy,
  .newsletter-form {
    margin-top: 3rem;
  }

  .site-footer__top {
    grid-template-columns: 1fr auto;
  }

  .site-footer__top p {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 1rem;
    padding-bottom: 3rem;
  }

  .site-footer__bottom {
    flex-wrap: wrap;
    font-size: .58rem;
  }
}

@media (max-width: 390px) {
  .chapter__intro h1 {
    font-size: clamp(2.2rem, 10.4vw, 3rem);
  }

  .chapter__heading h2,
  .urban-copy h2,
  .fashion-copy h2,
  .creative-intro h2,
  .people-heading h2,
  .cities-heading h2,
  .community-statement h2,
  .newsletter-copy h2 {
    font-size: clamp(2.6rem, 15.8vw, 4.15rem);
  }

  .city-grid {
    grid-template-columns: 1fr;
  }

  .city-panel {
    height: 12.5rem;
  }

  .newsletter-form__field {
    display: block;
    border-bottom: 0;
  }

  .newsletter-form input,
  .newsletter-form button {
    display: block;
    width: 100%;
    border-bottom: 1px solid var(--color-rule-strong);
  }

  .newsletter-form button {
    padding-left: 0;
    text-align: left;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .chapter-media img,
  .portrait img,
  .people-portrait img,
  .city-panel img {
    transform: none !important;
  }
}

/* Extension pages + new homepage chapters */
.page-hero,
.page-section {
  position: relative;
  z-index: 1;
  overflow: clip;
}

.page-hero,
.page-section--dark,
.chapter--membership {
  background: var(--color-void);
  color: var(--color-ink);
}

/* One dark theme by default: sections that used to flip to paper render on the
   dark surface unless they opt into the light tone with
   data-nav-tone="light" (the home page does). The paper palette is remapped in
   this scope so every descendant rule written for dark-on-light stays readable. */
.page-section--paper:not([data-nav-tone="light"]),
.chapter--network:not([data-nav-tone="light"]) {
  --color-paper: var(--color-surface-soft);
  --color-night-ink: var(--color-ink);
  background: var(--color-surface);
  color: var(--color-ink);
}

.page-hero__inner,
.page-section__inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 3vw, 3rem);
  width: min(100%, 100rem);
  min-height: 100svh;
  margin: 0 auto;
  padding: var(--section-space) var(--gutter);
}

.page-hero__media,
.page-hero__wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.page-hero__media {
  z-index: 0;
}

.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.7) contrast(1.08) brightness(.58);
}

.page-hero__wash {
  z-index: 1;
  background: linear-gradient(90deg, color-mix(in oklch, var(--color-void) 88%, transparent), color-mix(in oklch, var(--color-void) 30%, transparent) 56%, color-mix(in oklch, var(--color-void) 76%, transparent)), linear-gradient(180deg, color-mix(in oklch, var(--color-void) 74%, transparent), transparent 38%, color-mix(in oklch, var(--color-void) 92%, transparent));
}

.page-hero__inner > *,
.page-section__inner > * {
  position: relative;
  z-index: 2;
}

.page-hero__inner .section-index,
.page-section__inner > .section-index {
  grid-column: 1 / -1;
  align-self: start;
}

.page-hero__copy {
  grid-column: 2 / span 7;
  align-self: center;
  margin-top: 3rem;
}

.page-hero__copy h1 {
  max-width: 8ch;
  font-size: clamp(4rem, 8vw, 8rem);
  letter-spacing: -.065em;
  line-height: .78;
}

.page-hero__copy > p:last-child {
  max-width: 27rem;
  margin-top: 2rem;
  color: var(--color-muted);
  font-size: 1.08rem;
  font-weight: 300;
}

.page-hero__side-note {
  grid-column: 10 / span 3;
  align-self: end;
  justify-self: end;
  max-width: 12rem;
  color: var(--color-muted);
  font-size: .68rem;
  letter-spacing: .11em;
  line-height: 1.5;
  text-align: right;
  text-transform: uppercase;
}

.page-section__inner {
  min-height: 0;
  padding-top: clamp(8rem, 12vw, 12rem);
  padding-bottom: clamp(8rem, 12vw, 12rem);
}

.about-story__heading,
.about-principles__intro,
.about-invitation__statement,
.shop-note__copy {
  grid-column: 1 / span 6;
  margin-top: clamp(3.5rem, 6vw, 6rem);
}

.about-story__heading h2,
.about-principles__intro h2,
.about-invitation__statement h2,
.shop-note__copy h2 {
  font-size: clamp(3.84rem, 7.04vw, 7.2rem);
  letter-spacing: -.065em;
  line-height: .78;
}

.about-story__copy,
.about-invitation__copy {
  grid-column: 9 / span 4;
  align-self: end;
  margin-top: clamp(3.5rem, 6vw, 6rem);
}

.about-story__copy p,
.about-invitation__copy > p {
  max-width: 22rem;
  color: color-mix(in oklch, var(--color-night-ink) 72%, transparent);
  font-size: 1.02rem;
  font-weight: 300;
}

.about-story__copy p + p {
  margin-top: 1.2rem;
}

.about-story__copy .text-link,
.about-invitation__copy .chapter__actions {
  margin-top: 2rem;
}

.about-story__media {
  grid-column: 1 / -1;
  height: min(57vw, 37rem);
  margin-top: 8rem;
  border-radius: 0 1.6rem 0 0;
}

.about-principles__intro > p:last-child {
  max-width: 18rem;
  margin-top: 2rem;
  color: var(--color-muted);
  font-weight: 300;
}

.principle-list {
  display: grid;
  grid-column: 8 / -1;
  gap: 0;
  margin-top: clamp(3.5rem, 6vw, 6rem);
}

.principle-list article {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--color-rule);
}

.principle-list article > span {
  color: var(--color-accent);
  font-size: .7rem;
  letter-spacing: .1em;
}

.principle-list h3 {
  font-size: clamp(1.84rem, 3.2vw, 3.36rem);
  line-height: .86;
}

.principle-list p {
  grid-column: 2;
  max-width: 20rem;
  margin-top: .7rem;
  color: var(--color-muted);
  font-size: .9rem;
  font-weight: 300;
}

.about-invitation__copy > p {
  color: color-mix(in oklch, var(--color-night-ink) 72%, transparent);
}

.about-invitation__copy .chapter__actions {
  align-items: flex-start;
  flex-direction: column;
}

.chapter__inner--membership,
.chapter__inner--network {
  min-height: 0;
}

.membership-heading,
.network-heading {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 3vw, 3rem);
  margin-top: clamp(3.5rem, 6vw, 6rem);
}

.membership-heading > div,
.network-heading > div {
  grid-column: 1 / span 7;
}

.membership-heading h2,
.network-heading h2 {
  font-size: clamp(3.84rem, 6.96vw, 7.04rem);
  letter-spacing: -.065em;
  line-height: .78;
}

.membership-heading > p,
.network-heading > p:last-child {
  grid-column: 9 / span 4;
  align-self: end;
  max-width: 20rem;
  margin-bottom: .4rem;
  color: var(--color-muted);
  font-weight: 300;
}

.plan-grid {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(5rem, 8vw, 8rem);
  background: var(--color-rule);
}

.plan-card {
  position: relative;
  display: flex;
  min-height: 31rem;
  flex-direction: column;
  padding: 1.3rem;
  background: var(--color-void);
  border-top: 2px solid var(--color-rule-strong);
}

.plan-card--featured {
  border-top-color: var(--color-accent);
}

.plan-card__badge {
  position: absolute;
  top: 1.3rem;
  right: 1.3rem;
  color: var(--color-accent);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.plan-card__top {
  display: flex;
  min-height: 4.2rem;
  flex-direction: column;
  gap: .25rem;
}

.plan-card__top > span {
  font-family: var(--font-display);
  font-size: 2.8rem;
  line-height: .85;
}

.plan-card__top small,
.plan-card__note,
.plan-card__offer {
  color: var(--color-muted);
  font-size: .78rem;
  font-weight: 300;
}

.plan-card__price {
  display: flex;
  align-items: baseline;
  gap: .2rem;
  margin-top: 3rem;
  color: var(--color-accent);
}

.plan-card__price span {
  font-family: var(--font-display);
  font-size: 2rem;
}

.plan-card__price strong {
  font-family: var(--font-display);
  font-size: clamp(4rem, 6.4vw, 6.4rem);
  font-weight: 400;
  letter-spacing: -.08em;
  line-height: .68;
}

.plan-card__price small {
  color: var(--color-muted);
  font-size: .75rem;
}

.plan-card__price--text strong {
  max-width: 8ch;
  color: var(--color-accent);
  font-size: clamp(2.72rem, 4vw, 4.32rem);
  line-height: .78;
}

.plan-card__offer {
  margin-top: 2.5rem;
  color: var(--color-accent);
}

.plan-card__offer + .plan-card__price {
  margin-top: 1.5rem;
}

.plan-card__note {
  margin-top: 1.2rem;
}

.plan-card ul {
  display: grid;
  gap: .45rem;
  margin: 1.5rem 0 2rem;
  padding: 0;
  color: var(--color-muted);
  font-size: .82rem;
  font-weight: 300;
  list-style: none;
}

.plan-card li::before {
  margin-right: .55rem;
  color: var(--color-accent);
  content: "+";
}

.plan-card .button {
  width: 100%;
  margin-top: auto;
}

.membership-footnote {
  grid-column: 1 / -1;
  margin-top: 1rem;
  color: var(--color-faint);
  font-size: .72rem;
}

.network-heading > p:last-child {
  color: color-mix(in oklch, var(--color-night-ink) 70%, transparent);
}

.network-explorer {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(16rem, 4fr) minmax(0, 8fr);
  gap: clamp(2rem, 5vw, 6rem);
  margin-top: clamp(5rem, 8vw, 8rem);
}

.network-places {
  align-self: start;
  border-top: 1px solid color-mix(in oklch, var(--color-night-ink) 26%, transparent);
}

.network-place {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid color-mix(in oklch, var(--color-night-ink) 18%, transparent);
  background: transparent;
  color: color-mix(in oklch, var(--color-night-ink) 58%, transparent);
  text-align: left;
  transition: color .2s var(--ease), padding .25s var(--ease-out), border-color .2s var(--ease);
}

.network-place:hover,
.network-place:focus-visible,
.network-place[aria-selected="true"] {
  padding-left: .8rem;
  border-color: var(--color-accent-deep);
  color: var(--color-night-ink);
}

.network-place span {
  display: grid;
  gap: .25rem;
}

.network-place strong {
  font-family: var(--font-display);
  font-size: clamp(1.44rem, 2.4vw, 2.4rem);
  font-weight: 400;
  line-height: .88;
}

.network-place small {
  color: color-mix(in oklch, var(--color-night-ink) 48%, transparent);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.network-place i {
  color: var(--color-accent-deep);
  font-size: 1.25rem;
  font-style: normal;
}

.network-places__note {
  max-width: 17rem;
  margin-top: 1.2rem;
  color: color-mix(in oklch, var(--color-night-ink) 50%, transparent);
  font-size: .75rem;
}

.network-map {
  min-width: 0;
}

.network-map__meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid color-mix(in oklch, var(--color-night-ink) 26%, transparent);
  color: color-mix(in oklch, var(--color-night-ink) 54%, transparent);
  font-size: .66rem;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.network-map__meta span:last-child {
  color: var(--color-accent-deep);
  text-align: right;
}

.network-map__frame {
  position: relative;
  height: min(44vw, 32rem);
  min-height: 20rem;
  margin-top: 1rem;
  overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--color-night-ink) 26%, transparent);
  background: var(--color-surface-soft);
}

.network-map__frame iframe {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: .88;
  filter: saturate(.58) contrast(1.04) sepia(.1);
  transition: opacity .22s var(--ease);
}

.network-map[data-changing="true"] .network-map__frame iframe {
  opacity: .22;
}

.network-map__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .8rem;
  background-color: #73786d;
  background-image: linear-gradient(26deg, transparent 48%, rgb(255 255 255 / .1) 49%, transparent 50%), linear-gradient(-12deg, transparent 48%, rgb(0 0 0 / .14) 49%, transparent 50%);
  background-size: 9rem 7rem, 12rem 11rem;
  color: var(--color-ink);
}

.network-map__fallback span {
  display: grid;
  width: 4rem;
  height: 4rem;
  place-items: center;
  border: 1px solid var(--color-paper);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.6rem;
}

.network-map__fallback i {
  width: 1px;
  height: 2rem;
  background: var(--color-paper);
}

.network-map__fallback small {
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.network-map__address {
  margin-top: .8rem;
  color: color-mix(in oklch, var(--color-night-ink) 55%, transparent);
  font-size: .78rem;
}

.shop-controls {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 4rem;
}

.shop-controls button {
  padding: .65rem .85rem;
  border: 1px solid color-mix(in oklch, var(--color-night-ink) 22%, transparent);
  background: transparent;
  color: color-mix(in oklch, var(--color-night-ink) 62%, transparent);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}

.shop-controls button:hover,
.shop-controls button:focus-visible,
.shop-controls button[aria-pressed="true"] {
  border-color: var(--color-accent-deep);
  background: var(--color-accent-deep);
  color: var(--color-ink);
}

.product-grid {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem) 1rem;
  margin-top: 2rem;
}

.product-card[hidden] {
  display: none;
}

.product-card__media {
  position: relative;
  height: min(31vw, 28rem);
  overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--color-night-ink) 25%, transparent);
  background: var(--color-surface-soft);
}

.product-card:nth-child(2) .product-card__media { border-radius: 1.6rem 0 0 0; }
.product-card:nth-child(3) .product-card__media { border-radius: 0 0 1.6rem 0; }
.product-card:nth-child(4) .product-card__media { border-radius: 0 1.6rem 0 0; }
.product-card:nth-child(5) .product-card__media { border-radius: 1.6rem 0 0 0; }
.product-card:nth-child(6) .product-card__media { border-radius: 0 0 0 1.6rem; }

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.7) contrast(1.03);
  transition: transform .65s var(--ease-out), filter .35s var(--ease);
}

.product-card:nth-child(2) .product-card__media img,
.product-card:nth-child(3) .product-card__media img {
  object-fit: contain;
  padding: 12%;
}

.product-card__media span {
  position: absolute;
  right: .8rem;
  bottom: .8rem;
  left: .8rem;
  color: var(--color-ink);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-shadow: 0 1px 1rem rgb(0 0 0 / .75);
}

.product-card__meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: .9rem;
}

.product-card__meta h3 {
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: .88;
}

.product-card__meta p {
  margin-top: .35rem;
  color: color-mix(in oklch, var(--color-ink) 60%, transparent);
  font-size: .75rem;
}

.product-card__meta strong {
  flex: 0 0 auto;
  color: var(--color-accent);
  font-size: .82rem;
  font-weight: 500;
}

.product-card > .text-link {
  margin-top: 1.3rem;
}

.shop-status {
  grid-column: 1 / -1;
  margin-top: 3rem;
  color: color-mix(in oklch, var(--color-night-ink) 54%, transparent);
  font-size: .75rem;
}

.shop-note__copy > p:not(.chapter__kicker) {
  max-width: 20rem;
  margin-top: 2rem;
  color: var(--color-muted);
  font-weight: 300;
}

.shop-note__copy .button {
  margin-top: 2rem;
}

.shop-note__media {
  grid-column: 8 / -1;
  height: min(52vw, 38rem);
  margin-top: clamp(3.5rem, 6vw, 6rem);
  border-radius: 0 0 0 1.6rem;
}

@media (hover: hover) and (pointer: fine) {
  .product-card:hover .product-card__media img {
    transform: scale(1.025);
    filter: saturate(.94) contrast(1.03);
  }
}

@media (max-width: 740px) {
  .page-hero__inner,
  .page-section__inner {
    display: block;
    min-height: 0;
    padding-top: 7.5rem;
    padding-bottom: 7.5rem;
  }

  .page-hero__inner {
    min-height: 100svh;
  }

  .page-hero__copy,
  .about-story__heading,
  .about-principles__intro,
  .about-invitation__statement,
  .shop-note__copy,
  .about-story__copy,
  .about-invitation__copy,
  .principle-list,
  .membership-heading,
  .network-heading,
  .plan-grid,
  .network-explorer,
  .shop-controls,
  .product-grid,
  .shop-note__media {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  .page-hero__copy,
  .about-story__heading,
  .about-principles__intro,
  .about-invitation__statement,
  .shop-note__copy,
  .about-story__copy,
  .about-invitation__copy,
  .principle-list,
  .membership-heading,
  .network-heading,
  .network-explorer,
  .shop-controls,
  .product-grid,
  .shop-note__media {
    margin-top: 4rem;
  }

  .page-hero__copy h1,
  .about-story__heading h2,
  .about-principles__intro h2,
  .about-invitation__statement h2,
  .shop-note__copy h2,
  .membership-heading h2,
  .network-heading h2 {
    font-size: clamp(3.4rem, 14.4vw, 5.76rem);
  }

  .page-hero__side-note {
    margin-top: 4rem;
    text-align: left;
  }

  .about-story__media {
    height: 22rem;
    margin-top: 4rem;
  }

  .membership-heading {
    display: block;
  }

  .membership-heading > p,
  .network-heading > p:last-child {
    max-width: 19rem;
    margin-top: 1.7rem;
  }

  .plan-grid,
  .product-grid {
    display: block;
  }

  .plan-card,
  .product-card {
    margin-bottom: 1px;
  }

  .plan-card {
    min-height: 0;
  }

  .network-explorer {
    display: block;
  }

  .network-map {
    margin-top: 4rem;
  }

  .network-map__frame {
    height: 22rem;
    min-height: 0;
  }

  .product-card__media {
    height: 22rem;
  }

  .shop-note__media {
    height: 22rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .network-map__frame iframe,
  .product-card__media img {
    transition: none;
  }
}

/* Current page refinements: dark masthead state, ecosystem links and product detail */
body[data-nav-tone="dark"] .masthead {
  color: var(--color-ink);
}

body[data-nav-tone="dark"] .masthead__nav a,
body[data-nav-tone="dark"] .masthead__signout button {
  color: color-mix(in oklch, var(--color-ink) 76%, transparent);
}

body[data-nav-tone="dark"] .masthead::after {
  border-color: color-mix(in oklch, var(--color-ink) 22%, transparent);
}

body[data-nav-tone="light"] .masthead::after {
  border-color: color-mix(in oklch, var(--color-night-ink) 20%, transparent);
}

/* Scrolled: a solid white bar whatever section is behind it. The body[data-nav-tone]
   prefix outranks the tone rules above so the section flip no longer recolours it. */
body[data-nav-tone] .masthead.is-scrolled {
  background: var(--masthead-scrolled-bg);
  box-shadow: 0 1px 0 hsl(0 0% 0% / .08), 0 6px 20px hsl(0 0% 0% / .08);
  color: var(--masthead-scrolled-ink);
}

body[data-nav-tone] .masthead.is-scrolled::after {
  display: none;
}

body[data-nav-tone] .masthead.is-scrolled .masthead__brand img {
  filter: invert(1);
}

body[data-nav-tone] .masthead.is-scrolled .masthead__nav a,
body[data-nav-tone] .masthead.is-scrolled .masthead__signout button {
  color: var(--masthead-scrolled-link);
}

body[data-nav-tone] .masthead.is-scrolled .masthead__nav a:hover,
body[data-nav-tone] .masthead.is-scrolled .masthead__nav a:focus-visible,
body[data-nav-tone] .masthead.is-scrolled .masthead__signout button:hover,
body[data-nav-tone] .masthead.is-scrolled .masthead__signout button:focus-visible {
  color: var(--masthead-scrolled-hover);
}

.shop-preview__copy {
  grid-column: 1 / span 5;
  align-self: center;
  margin-top: clamp(3.5rem, 6vw, 6rem);
}

.shop-preview__copy h2 {
  max-width: 7ch;
  font-size: clamp(3.84rem, 7.04vw, 7.2rem);
  letter-spacing: -.065em;
  line-height: .78;
}

.shop-preview__copy > p:not(.chapter__kicker) {
  max-width: 23rem;
  margin-top: 2rem;
  color: var(--color-muted);
  font-weight: 300;
}

.shop-preview__copy .chapter__actions {
  align-items: flex-start;
  flex-direction: column;
  margin-top: 2rem;
}

.about-ecosystem__heading {
  grid-column: 1 / span 5;
  margin-top: clamp(3.5rem, 6vw, 6rem);
}

.about-ecosystem__heading h2 {
  font-size: clamp(3.84rem, 7.04vw, 7.2rem);
  letter-spacing: -.065em;
  line-height: .78;
}

.about-ecosystem__intro {
  grid-column: 9 / span 4;
  align-self: end;
  max-width: 20rem;
  margin-top: clamp(3.5rem, 6vw, 6rem);
  color: color-mix(in oklch, var(--color-night-ink) 70%, transparent);
  font-weight: 300;
}

.about-ecosystem__grid {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(5rem, 8vw, 8rem);
  background: color-mix(in oklch, var(--color-night-ink) 18%, transparent);
}

.about-ecosystem__grid a {
  position: relative;
  display: grid;
  min-height: 16rem;
  align-content: end;
  gap: .7rem;
  padding: 1.2rem;
  background: var(--color-paper);
  transition: color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease-out);
}

.about-ecosystem__grid a > span,
.about-ecosystem__grid a small {
  color: color-mix(in oklch, var(--color-night-ink) 52%, transparent);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.about-ecosystem__grid a strong {
  max-width: 9ch;
  font-family: var(--font-display);
  font-size: clamp(1.92rem, 3.2vw, 3.44rem);
  font-weight: 400;
  line-height: .82;
}

.about-ecosystem__grid a small {
  max-width: 15rem;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
}

.about-ecosystem__grid a i {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  color: var(--color-accent-deep);
  font-size: 1.25rem;
  font-style: normal;
}

@media (hover: hover) and (pointer: fine) {
  .about-ecosystem__grid a:hover {
    background: color-mix(in oklch, var(--color-accent) 20%, var(--color-paper));
    color: var(--color-night-ink);
    transform: translateY(-.35rem);
  }
}

.product-hero {
  position: relative;
  z-index: 1;
  min-height: 0;
  overflow: clip;
  background: var(--color-void);
  color: var(--color-ink);
}

.product-hero__media,
.product-hero__wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.product-hero__media {
  z-index: 0;
}

.product-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.65) contrast(1.1) brightness(.42);
}

.product-hero__wash {
  z-index: 1;
  background: linear-gradient(90deg, color-mix(in oklch, var(--color-void) 92%, transparent), color-mix(in oklch, var(--color-void) 52%, transparent) 54%, color-mix(in oklch, var(--color-void) 80%, transparent)), linear-gradient(180deg, color-mix(in oklch, var(--color-void) 75%, transparent), transparent 45%, color-mix(in oklch, var(--color-void) 90%, transparent));
}

.product-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 3vw, 3rem);
  width: min(100%, 100rem);
  min-height: clamp(44rem, 92svh, 60rem);
  margin: 0 auto;
  padding: 7.5rem var(--gutter) 5rem;
}

.product-hero__inner > * {
  position: relative;
  z-index: 2;
}

.product-hero__back {
  grid-column: 1 / -1;
  align-self: start;
}

.product-hero__copy {
  grid-column: 2 / span 5;
  align-self: center;
  margin-top: 1rem;
}

.product-hero__copy h1 {
  max-width: 7ch;
  font-size: clamp(3.6rem, 6.8vw, 6.8rem);
  letter-spacing: -.065em;
  line-height: .78;
}

.product-hero__copy > p:not(.chapter__kicker):not(.shop-status) {
  max-width: 23rem;
  margin-top: 2rem;
  color: var(--color-muted);
  font-weight: 300;
}

.product-hero__price {
  display: flex;
  align-items: baseline;
  gap: .25rem;
  margin-top: 2rem;
  color: var(--color-accent);
}

.product-hero__price span,
.product-hero__price strong {
  font-family: var(--font-display);
}

.product-hero__price span {
  font-size: 1.7rem;
}

.product-hero__price strong {
  font-size: clamp(3.2rem, 4.8vw, 4.8rem);
  font-weight: 400;
  letter-spacing: -.08em;
  line-height: .7;
}

.product-hero__price small {
  margin-left: .4rem;
  color: var(--color-muted);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.product-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}

.product-hero__actions label {
  display: grid;
  gap: .45rem;
  color: var(--color-muted);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.product-hero__actions select {
  min-width: 8rem;
  padding: .8rem 2.2rem .8rem .8rem;
  border: 1px solid color-mix(in oklch, var(--color-ink) 32%, transparent);
  background: transparent;
  color: var(--color-ink);
  font-size: .82rem;
}

.product-hero__status {
  max-width: 24rem;
  margin-top: 1rem;
  color: var(--color-muted);
  font-size: .72rem;
}

.product-hero__object {
  grid-column: 8 / span 5;
  align-self: center;
  justify-self: end;
  width: min(100%, 32rem);
  margin-top: 2rem;
}

.product-hero__object img {
  width: 100%;
  filter: drop-shadow(0 2rem 1.5rem rgb(0 0 0 / .42));
  transform: rotate(-9deg);
}

.product-hero__object figcaption {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
  color: var(--color-muted);
}

.product-specs__heading {
  grid-column: 1 / span 6;
  margin-top: clamp(3.5rem, 6vw, 6rem);
}

.product-specs__heading h2 {
  font-size: clamp(3.84rem, 7.04vw, 7.2rem);
  letter-spacing: -.065em;
  line-height: .78;
}

.product-specs__copy {
  grid-column: 9 / span 4;
  align-self: end;
  max-width: 21rem;
  margin-top: clamp(3.5rem, 6vw, 6rem);
  color: color-mix(in oklch, var(--color-night-ink) 72%, transparent);
  font-weight: 300;
}

.product-specs__copy p + p {
  margin-top: 1.2rem;
}

.product-specs__list {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(5rem, 8vw, 8rem);
  background: color-mix(in oklch, var(--color-night-ink) 18%, transparent);
}

.product-specs__list div {
  display: grid;
  min-height: 8rem;
  align-content: space-between;
  gap: 1rem;
  padding: 1rem;
  background: var(--color-paper);
}

.product-specs__list span {
  color: color-mix(in oklch, var(--color-night-ink) 48%, transparent);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.product-specs__list strong {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.8vw, 2.8rem);
  font-weight: 400;
  line-height: .86;
}

.product-close__copy {
  grid-column: 2 / span 6;
  margin-top: clamp(3.5rem, 6vw, 6rem);
}

.product-close__copy h2 {
  font-size: clamp(3.84rem, 7.04vw, 7.2rem);
  letter-spacing: -.065em;
  line-height: .78;
}

.product-close__copy .button {
  margin-top: 2rem;
}

.product-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem 1rem;
}

@media (max-width: 740px) {
  .shop-preview__copy,
  .about-ecosystem__heading,
  .product-specs__heading,
  .product-close__copy {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .about-ecosystem__intro,
  .product-specs__copy {
    width: 100%;
    margin-top: 3.5rem;
  }

  .about-ecosystem__grid,
  .product-specs__list {
    grid-template-columns: 1fr;
    margin-top: 3.5rem;
  }

  .about-ecosystem__grid a {
    min-height: 12rem;
  }

  .product-hero__inner {
    display: block;
    min-height: 48rem;
    padding-top: 7.5rem;
    padding-bottom: 4rem;
  }

  .product-hero__copy {
    max-width: 20rem;
    margin-top: 4rem;
  }

  .product-hero__copy h1 {
    font-size: clamp(3.2rem, 13.6vw, 4.8rem);
  }

  .product-hero__object {
    width: min(75vw, 19rem);
    margin: 1.5rem 0 0 auto;
    opacity: .7;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-hero__object img {
    transform: none;
  }

  .about-ecosystem__grid a {
    transition: color .2s var(--ease), background-color .2s var(--ease);
  }
}

/* Smallest phones (320px class): the widest display headlines step down once more. */
@media (max-width: 340px) {
  .community-statement h2,
  .network-heading h2 {
    font-size: 2.5rem;
  }
}

/* Prefooter: the closing invitation, above the footer on every page. */
.prefooter {
  padding: clamp(4rem, 9vw, 7rem) var(--gutter);
  border-top: 1px solid var(--color-rule);
  background: var(--color-surface);
}

.prefooter__inner {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  max-width: 60rem;
  margin-inline: auto;
}

.prefooter h2 {
  font-size: clamp(1.6rem, 4.6vw, 3.2rem);
  line-height: .95;
}

.prefooter p {
  max-width: 34rem;
  color: color-mix(in oklch, var(--color-ink) 72%, transparent);
  font-size: .95rem;
}

.prefooter__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem;
}

/* Store: a traditional e-commerce grid built from the existing tokens. */
.store-header,
.store,
.store-product-section {
  padding-inline: var(--gutter);
}

.store-header__inner,
.store__inner,
.store-product-section__inner {
  max-width: 96rem;
  margin-inline: auto;
}

/* Below the fixed masthead, so the header never sits under it. */
.store-header,
.store-product-section {
  padding-top: clamp(7rem, 14vh, 10rem);
}

.store-header {
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.store-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  color: var(--color-muted);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.store-breadcrumb a {
  color: color-mix(in oklch, var(--color-ink) 72%, transparent);
  text-decoration: none;
}

.store-breadcrumb a:hover,
.store-breadcrumb a:focus-visible {
  color: var(--color-accent);
}

.store-header h1 {
  margin-top: 1rem;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: .95;
}

.store-count {
  margin-top: .5rem;
  color: var(--color-muted);
  font-size: .82rem;
}

.store {
  padding-bottom: var(--section-space);
}

.store-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-rule);
}

.store-toolbar__categories {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.store-pill {
  padding: .45rem 1rem;
  border: 1px solid var(--color-rule);
  border-radius: 999px;
  color: color-mix(in oklch, var(--color-ink) 78%, transparent);
  font-size: .72rem;
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}

.store-pill:hover,
.store-pill:focus-visible,
.store-pill[aria-current="page"] {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.store-sort {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.store-sort__label {
  color: var(--color-muted);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.store-sort select,
.store-sort__apply {
  padding: .45rem .8rem;
  border: 1px solid var(--color-rule);
  border-radius: .5rem;
  font: inherit;
  font-size: .8rem;
}

.store-sort select {
  background: var(--color-surface-soft);
  color: var(--color-ink);
}

.store-sort__apply {
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
}

.store-sort__apply:hover,
.store-sort__apply:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.store-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.store-card {
  display: grid;
  align-content: start;
  gap: .55rem;
  color: inherit;
  text-decoration: none;
}

.store-card__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--color-surface-soft);
}

.store-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s var(--ease-out);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .store-card:hover .store-card__media img {
    transform: scale(1.03);
  }
}

.store-card__category {
  color: var(--color-muted);
  font-size: .8rem;
}

.store-card__name {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: -.01em;
}

.store-card__price {
  color: var(--color-accent);
  font-size: .84rem;
}

.store-card:focus-visible,
.store-pill:focus-visible,
.store-sort select:focus-visible,
.store-sort__apply:focus-visible,
.store-pagination a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.store-empty {
  color: var(--color-muted);
  font-size: .9rem;
}

.store-pagination {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.store-pagination > div,
.store-pagination nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .4rem;
}

.store-pagination a,
.store-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  min-height: 2.4rem;
  padding: 0 .6rem;
  border: 1px solid var(--color-rule);
  border-radius: .5rem;
  color: color-mix(in oklch, var(--color-ink) 78%, transparent);
  font-size: .78rem;
  text-decoration: none;
}

.store-product {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
}

.store-product__image {
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--color-surface-soft);
}

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

.store-product__thumbs {
  display: grid;
  gap: .6rem;
  margin: .8rem 0 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.store-product__thumbs li {
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--color-surface-soft);
}

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

.store-product__info {
  display: grid;
  align-content: start;
  gap: .8rem;
}

.store-product__category {
  color: var(--color-muted);
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.store-product__info h1 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: .95;
}

.store-product__price {
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: 1.4rem;
}

.store-product__availability,
.store-product__description {
  color: color-mix(in oklch, var(--color-ink) 72%, transparent);
  font-size: .85rem;
}

.store-product__variants {
  display: grid;
  gap: .35rem;
  color: var(--color-muted);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.store-product__variants select {
  padding: .5rem .8rem;
  border: 1px solid var(--color-rule);
  border-radius: .5rem;
  background: var(--color-surface-soft);
  color: var(--color-ink);
  font: inherit;
  font-size: .85rem;
  text-transform: none;
}

.store-product__details h2 {
  font-size: 1.1rem;
}

.store-product__details dl {
  display: grid;
  gap: .4rem;
  margin: .6rem 0 0;
}

.store-product__details dl > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--color-rule);
}

.store-product__details dt {
  color: var(--color-muted);
  font-size: .85rem;
}

.store-product__details dd {
  margin: 0;
  color: var(--color-ink);
  font-size: .85rem;
}

.store-related__heading {
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
}

@media (max-width: 1024px) {
  .store-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 840px) {
  .store-product {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 740px) {
  .store-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 360px) {
  .store-grid {
    gap: .75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Home product grid: real products first, then "Coming soon" placeholders, so
   the row always reads as a three-up shop edit. */
.store-grid--home {
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.store-card--soon img {
  opacity: .72;
}

.store-card__soon {
  color: var(--color-muted);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

@media (max-width: 740px) {
  .store-grid--home {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .store-grid--home {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Commerce demo system: filters, bag drawer, cart, checkout and confirmation */
body[data-cart-open] {
  overflow: hidden;
}

.masthead__actions {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(.9rem, 2vw, 1.5rem);
}

.masthead__bag {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem 0;
  background: transparent;
  color: currentColor;
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.masthead__bag b {
  display: inline-grid;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: .58rem;
  font-weight: 400;
  letter-spacing: 0;
}

.masthead__bag:hover,
.masthead__bag:focus-visible {
  color: var(--color-accent);
}

.shop-filter-shell {
  grid-column: 1 / -1;
  margin-top: clamp(4rem, 7vw, 7rem);
}

.shop-filter-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 0;
  border-top: 1px solid color-mix(in oklch, var(--color-night-ink) 25%, transparent);
  border-bottom: 1px solid color-mix(in oklch, var(--color-night-ink) 16%, transparent);
  color: color-mix(in oklch, var(--color-night-ink) 56%, transparent);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.shop-filter-top p {
  margin: 0;
}

.shop-sort,
.shop-price-filter {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: color-mix(in oklch, var(--color-night-ink) 52%, transparent);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.shop-sort select,
.shop-price-filter select {
  min-width: 9rem;
  padding: .62rem 2rem .62rem .65rem;
  border: 1px solid color-mix(in oklch, var(--color-night-ink) 24%, transparent);
  background: transparent;
  color: var(--color-night-ink);
  font-size: .72rem;
  letter-spacing: .05em;
  text-transform: none;
}

.shop-filter-shell .shop-controls {
  display: flex;
  grid-column: auto;
  align-items: center;
  margin-top: 1rem;
}

.shop-filter-clear {
  margin-left: auto;
  border: 0 !important;
  background: transparent !important;
  color: color-mix(in oklch, var(--color-night-ink) 54%, transparent) !important;
  text-decoration: underline;
  text-underline-offset: .25rem;
}

.shop-filter-clear:hover,
.shop-filter-clear:focus-visible {
  color: var(--color-night-ink) !important;
}

.shop-empty {
  grid-column: 1 / -1;
  padding: 4rem 0;
  color: color-mix(in oklch, var(--color-night-ink) 58%, transparent);
}

.cart-drawer {
  position: fixed;
  z-index: 65;
  inset: 0;
  display: block;
  background: rgb(0 0 0 / .42);
  opacity: 0;
  transition: opacity .22s var(--ease);
}

.cart-drawer[data-open="true"] {
  opacity: 1;
}

/* `display: block` above would otherwise beat the hidden attribute and leave
   an invisible full-screen layer over the page that swallows every click. */
.cart-drawer[hidden] {
  display: none;
}

.cart-drawer__backdrop {
  position: absolute;
  inset: 0;
}

.cart-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: min(31rem, 100vw);
  flex-direction: column;
  padding: clamp(1.4rem, 4vw, 3rem);
  background: var(--color-void);
  color: var(--color-ink);
  transform: translateX(100%);
  transition: transform .3s var(--ease-drawer);
}

.cart-drawer[data-open="true"] .cart-drawer__panel {
  transform: translateX(0);
}

.cart-drawer__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-rule);
}

.cart-drawer__header h2 {
  margin-top: .35rem;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: 1;
  white-space: nowrap;
}

.cart-drawer__close {
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--color-rule-strong);
  background: transparent;
  color: var(--color-ink);
  font-size: 1.5rem;
  line-height: 1;
}

.cart-drawer__items {
  min-height: 0;
  overflow-y: auto;
  padding: 1rem 0;
}

.cart-drawer__empty {
  margin: auto 0;
  color: var(--color-muted);
  font-size: .9rem;
  font-weight: 300;
}

.cart-drawer__footer {
  display: grid;
  gap: .9rem;
  margin-top: auto;
  padding-top: 1.2rem;
  border-top: 1px solid var(--color-rule);
}

.cart-drawer__total,
.checkout-summary__total,
.cart-summary__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.cart-drawer__total {
  color: var(--color-muted);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.cart-drawer__total strong,
.checkout-summary__total strong,
.cart-summary__top strong {
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 400;
  letter-spacing: -.04em;
}

.cart-drawer__footer .text-link {
  justify-self: start;
}

.cart-line {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-rule);
}

.cart-line img {
  width: 5rem;
  height: 5.5rem;
  object-fit: cover;
  background: var(--color-surface-soft);
}

.cart-line__content {
  min-width: 0;
}

.cart-line__content h3 {
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 400;
  line-height: .86;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-line__content p {
  margin-top: .4rem;
  color: var(--color-muted);
  font-size: .72rem;
  text-transform: capitalize;
}

.cart-line__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .9rem;
}

.cart-line__quantity {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  border: 1px solid var(--color-rule-strong);
}

.cart-line__quantity-button {
  width: 1.7rem;
  height: 1.7rem;
  background: transparent;
  color: currentColor;
}

.cart-line__quantity span {
  min-width: 1rem;
  text-align: center;
}

.cart-line__remove {
  background: transparent;
  color: var(--color-muted);
  font-size: .68rem;
  text-decoration: underline;
  text-underline-offset: .2rem;
}

.cart-page__heading,
.checkout-page__heading {
  grid-column: 1 / span 6;
  margin-top: clamp(3.5rem, 6vw, 6rem);
}

.cart-page__heading h1,
.checkout-page__heading h1 {
  font-size: clamp(5rem, 9vw, 9.5rem);
  letter-spacing: -.065em;
  line-height: .78;
}

.cart-page__heading > p:last-child,
.checkout-page__heading > p:last-child {
  max-width: 22rem;
  margin-top: 2rem;
  color: color-mix(in oklch, var(--color-night-ink) 70%, transparent);
  font-weight: 300;
}

.cart-page__grid {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 7fr) minmax(16rem, 4fr);
  gap: clamp(2rem, 6vw, 6rem);
  margin-top: clamp(5rem, 8vw, 8rem);
}

.cart-page__items {
  min-width: 0;
}

.cart-page__items .cart-line {
  border-color: color-mix(in oklch, var(--color-night-ink) 18%, transparent);
}

.cart-page__items .cart-line img {
  background: color-mix(in oklch, var(--color-night-ink) 9%, var(--color-paper));
}

.cart-page__items .cart-line__content p,
.cart-page__items .cart-line__remove {
  color: color-mix(in oklch, var(--color-night-ink) 55%, transparent);
}

.cart-page__empty {
  padding: 2rem 0;
  color: color-mix(in oklch, var(--color-night-ink) 55%, transparent);
}

.cart-summary {
  align-self: start;
  display: grid;
  gap: 1rem;
  padding: 1.3rem;
}

.cart-summary__top {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-rule);
  color: var(--color-muted);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.cart-summary__line {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--color-muted);
  font-size: .76rem;
}

.cart-summary[data-empty="true"] .button,
.checkout-summary[data-empty="true"] {
  opacity: .45;
}

.cart-summary .is-disabled {
  pointer-events: none;
  opacity: .4;
}

.cart-page__note {
  grid-column: 1 / -1;
  margin-top: 1.2rem;
  color: color-mix(in oklch, var(--color-night-ink) 48%, transparent);
  font-size: .72rem;
}

.checkout-page__grid {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 7fr) minmax(16rem, 4fr);
  gap: clamp(2rem, 6vw, 6rem);
  margin-top: clamp(5rem, 8vw, 8rem);
}

.checkout-form {
  display: grid;
  gap: 2.5rem;
}

.checkout-form fieldset {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 1.2rem 0 0;
  border: 0;
  border-top: 1px solid color-mix(in oklch, var(--color-night-ink) 22%, transparent);
}

.checkout-form legend {
  margin-bottom: .3rem;
  color: color-mix(in oklch, var(--color-night-ink) 52%, transparent);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.checkout-form label {
  display: grid;
  gap: .45rem;
  color: color-mix(in oklch, var(--color-night-ink) 62%, transparent);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.checkout-form input,
.checkout-form textarea {
  width: 100%;
  padding: .85rem .8rem;
  border: 1px solid color-mix(in oklch, var(--color-night-ink) 24%, transparent);
  border-radius: 0;
  background: transparent;
  color: var(--color-night-ink);
  font-size: .92rem;
  letter-spacing: 0;
  text-transform: none;
}

.checkout-form input:focus-visible,
.checkout-form textarea:focus-visible,
.shop-filter-shell select:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.checkout-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.checkout-form__notice {
  margin: -.2rem 0 .2rem;
  color: color-mix(in oklch, var(--color-night-ink) 58%, transparent);
  font-size: .82rem;
  font-weight: 300;
}

.checkout-form__check {
  display: flex !important;
  grid-template-columns: none;
  align-items: flex-start;
  gap: .65rem !important;
  letter-spacing: 0 !important;
  line-height: 1.4;
  text-transform: none !important;
}

.checkout-form__check input {
  width: 1rem;
  height: 1rem;
  margin-top: .1rem;
}

.checkout-form__status {
  min-height: 1.4rem;
  color: hsl(30 70% 72%);
  font-size: .8rem;
}

.checkout-summary {
  align-self: start;
  display: grid;
  gap: 1rem;
  padding: 1.3rem;
}

.checkout-summary__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-rule);
  color: var(--color-muted);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.checkout-summary__items {
  display: grid;
  gap: .7rem;
}

.checkout-summary__item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--color-muted);
  font-size: .8rem;
}

.checkout-summary__item strong {
  color: var(--color-ink);
  font-weight: 400;
}

.checkout-summary__total {
  padding-top: 1rem;
  border-top: 1px solid var(--color-rule);
}

.checkout-summary > p {
  color: var(--color-muted);
  font-size: .74rem;
  font-weight: 300;
}

.thank-you {
  position: relative;
  z-index: 1;
  min-height: 80svh;
  overflow: clip;
  background: var(--color-void);
  color: var(--color-ink);
}

.thank-you__media,
.thank-you__wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.thank-you__media {
  z-index: 0;
}

.thank-you__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.65) contrast(1.1) brightness(.44);
}

.thank-you__wash {
  z-index: 1;
  background: linear-gradient(90deg, color-mix(in oklch, var(--color-void) 91%, transparent), color-mix(in oklch, var(--color-void) 48%, transparent) 70%, color-mix(in oklch, var(--color-void) 84%, transparent));
}

.thank-you__inner {
  position: relative;
  z-index: 2;
  display: grid;
  width: min(100%, 100rem);
  min-height: 80svh;
  align-content: center;
  margin: 0 auto;
  padding: 8rem var(--gutter) 6rem;
}

.thank-you__inner h1 {
  max-width: 8ch;
  margin-top: 1rem;
  font-size: clamp(5rem, 10vw, 10rem);
  letter-spacing: -.065em;
  line-height: .78;
}

.thank-you__inner > p:not(.chapter__kicker) {
  max-width: 26rem;
  margin-top: 2rem;
  color: var(--color-muted);
  font-weight: 300;
}

.thank-you__reference {
  display: grid;
  gap: .35rem;
  width: fit-content;
  margin-top: 2rem;
  padding: .8rem 1rem;
  border: 1px solid var(--color-rule-strong);
}

.thank-you__reference span {
  color: var(--color-muted);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.thank-you__reference strong {
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 400;
  letter-spacing: .04em;
}

.thank-you__inner .chapter__actions {
  margin-top: 2rem;
}

@media (max-width: 740px) {
  .shop-filter-top {
    align-items: flex-start;
    flex-direction: column;
  }

  .shop-filter-shell .shop-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .shop-filter-shell .shop-controls button,
  .shop-price-filter,
  .shop-price-filter select {
    width: 100%;
  }

  .shop-price-filter {
    justify-content: space-between;
  }

  .shop-filter-clear {
    margin-left: 0;
    text-align: left;
  }

  .cart-page__heading,
  .checkout-page__heading {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .cart-page__grid,
  .checkout-page__grid {
    display: block;
    margin-top: 3.5rem;
  }

  .cart-summary,
  .checkout-summary {
    margin-top: 3rem;
  }

  .checkout-form__row {
    grid-template-columns: 1fr;
  }

  .thank-you__inner {
    min-height: 70svh;
    padding-top: 8rem;
    padding-bottom: 5rem;
  }

  .thank-you__inner h1 {
    font-size: clamp(4.5rem, 18vw, 7rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cart-drawer,
  .cart-drawer__panel {
    transition: none;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Shop polish (2026-10-04): store cards, filters, product page, bag,
   checkout and confirmation. Appended so earlier rules keep their order. */

/* Store card: one link (image, category, name, price), then the bag control
   outside the link. Colours follow the section through currentColor. */
.store-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1rem;
}

.store-card__link {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1rem;
  color: inherit;
  text-decoration: none;
}

.store-card__link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

.store-card__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid color-mix(in oklch, currentColor 14%, transparent);
  background: var(--color-surface-soft);
}

.store-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease-out);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .store-card__link:hover .store-card__media img {
    transform: scale(1.03);
  }
}

.store-card__body {
  display: grid;
  gap: .4rem;
  min-width: 0;
}

.store-card__category {
  color: color-mix(in oklch, currentColor 62%, transparent);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.store-card__name {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.1vw, 1.125rem);
  letter-spacing: -.02em;
  line-height: 1.2;
  overflow-wrap: anywhere;
  transition: color .2s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .store-card__link:hover .store-card__name {
    color: var(--color-accent);
  }
}

.store-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .15rem .6rem;
  color: var(--color-accent);
  font-size: 1rem;
}

.store-card__price s {
  margin: 0;
  color: var(--color-muted);
  font-size: .875rem;
}

.store-card__action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  width: 100%;
  min-height: 2.75rem;
  margin-top: auto;
  padding: .7rem 1rem;
  border: 1px solid color-mix(in oklch, currentColor 32%, transparent);
  background: transparent;
  color: inherit;
  font-size: .72rem;
  letter-spacing: .1em;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}

.store-card__action span {
  font-size: 1rem;
  line-height: 1;
}

.store-card__action:hover,
.store-card__action:focus-visible {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.store-card__action:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Shop grid: 4 up on desktop, 3 on tablet, 2 on phones; never wider than
   the section. */
.product-grid--store {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(2.5rem, 4vw, 3.5rem) clamp(1rem, 1.6vw, 1.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

@media (max-width: 1180px) {
  .product-grid--store {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 740px) {
  .product-grid.product-grid--store {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.25rem .75rem;
    margin-top: 2rem;
  }

  .store-card__action {
    padding: .65rem .75rem;
    letter-spacing: .06em;
  }
}

/* Dark selects: shop sort, price filter and the product option picker. */
.shop-sort select,
.shop-price-filter select,
.store-product__variants select {
  min-width: 11rem;
  min-height: 2.75rem;
  padding: .6rem 2.6rem .6rem .9rem;
  border: 1px solid var(--color-rule-strong);
  border-radius: 0;
  background: var(--color-void) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23f2f2f2' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right .9rem center / .75rem auto;
  color: var(--color-ink);
  color-scheme: dark;
  font-family: var(--font-body);
  font-size: .875rem;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .2s var(--ease);
}

.shop-sort select:hover,
.shop-price-filter select:hover,
.store-product__variants select:hover {
  border-color: var(--color-accent);
}

.shop-sort select:focus-visible,
.shop-price-filter select:focus-visible,
.store-product__variants select:focus-visible {
  border-color: var(--color-accent);
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.shop-sort select option,
.shop-price-filter select option,
.store-product__variants select option {
  background: var(--color-surface);
  color: var(--color-ink);
}

.shop-filter-shell .shop-controls {
  gap: .5rem;
}

.shop-filter-shell .shop-price-filter {
  margin-left: .5rem;
}

@media (max-width: 740px) {
  .shop-sort {
    width: 100%;
    justify-content: space-between;
  }

  .shop-sort select {
    flex: 1;
    min-width: 0;
  }

  .shop-filter-shell .shop-controls {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .shop-filter-shell .shop-price-filter {
    width: 100%;
    margin: .75rem 0 0;
  }

  .shop-filter-shell .shop-price-filter select {
    width: auto;
    flex: 1;
    min-width: 0;
  }
}

/* Product page: the shared shop band (Shop v2, below), then gallery + info. */
.product-detail {
  position: relative;
  z-index: 1;
}

.product-detail__inner {
  width: min(100%, 100rem);
  margin: 0 auto;
  padding-inline: var(--gutter);
  padding-top: clamp(1.5rem, 2.5vw, 2.25rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

.product-detail__grid {
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  align-items: start;
  gap: clamp(2rem, 4vw, 4.5rem);
}

.product-detail__gallery {
  display: grid;
  gap: .75rem;
  min-width: 0;
}

.product-detail__main {
  width: 100%;
  max-height: calc(100svh - 17rem);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--color-rule);
  background: var(--color-surface);
}

.product-detail__main img {
  width: 100%;
  height: 100%;
  padding: clamp(.75rem, 2vw, 2rem);
  object-fit: contain;
}

.product-detail__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.product-detail__thumbs button {
  width: 4.75rem;
  height: 4.75rem;
  padding: .25rem;
  border: 1px solid var(--color-rule);
  background: var(--color-surface);
  transition: border-color .2s var(--ease);
}

.product-detail__thumbs button:hover,
.product-detail__thumbs button[aria-pressed="true"] {
  border-color: var(--color-accent);
}

.product-detail__thumbs button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.product-detail__thumbs img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-detail__info {
  position: sticky;
  top: 6.5rem;
  display: grid;
  align-content: start;
  gap: .9rem;
  min-width: 0;
}

.product-detail__info h1 {
  font-size: clamp(1.8rem, 2.6vw, 2.5rem);
  letter-spacing: -.045em;
  line-height: 1;
  overflow-wrap: anywhere;
}

.product-detail__info .store-product__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem .75rem;
  font-size: clamp(1.4rem, 2vw, 1.75rem);
}

.product-detail__info .store-product__price s {
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: 1rem;
}

.product-detail__info .store-product__availability {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .9375rem;
}

.product-detail__info .store-product__availability::before {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--color-accent);
  content: "";
}

.product-detail__info .store-product__availability[data-sold-out="true"]::before {
  background: var(--color-gold);
}

.product-detail__info .store-product__variants {
  gap: .5rem;
  margin-top: .35rem;
}

.product-detail__info .store-product__variants select {
  width: 100%;
}

.product-detail__buy {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: .35rem;
}

.product-detail__quantity {
  display: inline-flex;
  align-items: stretch;
  min-height: 3rem;
  border: 1px solid var(--color-rule-strong);
}

.product-detail__quantity button {
  width: 2.75rem;
  background: transparent;
  color: var(--color-ink);
  font-size: 1.15rem;
  transition: color .2s var(--ease);
}

.product-detail__quantity button:hover {
  color: var(--color-accent);
}

.product-detail__quantity button:focus-visible {
  outline-offset: -2px;
}

.product-detail__quantity span {
  display: grid;
  min-width: 2rem;
  place-items: center;
  font-size: 1rem;
}

.product-detail__actions {
  display: flex;
  flex: 1 1 20rem;
  flex-wrap: wrap;
  gap: .75rem;
}

.product-detail__actions .button {
  flex: 1 1 10rem;
  min-width: 0;
  min-height: 3rem;
}

.product-detail__actions .button--outline {
  background: transparent;
}

.product-detail__actions .button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.product-detail__cash-note {
  color: var(--color-muted);
  font-size: .9375rem;
}

.product-detail__status {
  color: var(--color-accent);
  font-size: .9375rem;
}

.product-detail__status:empty {
  margin-top: -.9rem;
}

.product-detail__accordions {
  margin-top: .75rem;
  border-top: 1px solid var(--color-rule);
}

.product-detail__accordions details {
  border-bottom: 1px solid var(--color-rule);
}

.product-detail__accordions summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3rem;
  padding: .75rem 0;
  font-size: .75rem;
  letter-spacing: .12em;
  list-style: none;
  text-transform: uppercase;
  cursor: pointer;
}

.product-detail__accordions summary::-webkit-details-marker {
  display: none;
}

.product-detail__accordions summary::after {
  color: var(--color-muted);
  font-size: 1.1rem;
  letter-spacing: 0;
  content: "+";
}

.product-detail__accordions details[open] summary::after {
  content: "\2212";
}

.product-detail__accordions summary:hover {
  color: var(--color-accent);
}

.product-detail__accordions summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.product-detail__accordions details > p {
  padding-bottom: 1.1rem;
  color: color-mix(in oklch, var(--color-ink) 76%, transparent);
  font-size: .9375rem;
  line-height: 1.6;
}

.product-detail__accordions dl {
  display: grid;
  gap: .4rem;
  margin: 0;
  padding-bottom: 1.1rem;
}

.product-detail__accordions dl > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--color-rule);
  font-size: .9375rem;
}

.product-detail__accordions dt {
  color: var(--color-muted);
}

.product-detail__accordions dd {
  margin: 0;
  text-align: right;
}

.store--related,
.store--recent {
  padding-top: clamp(3.5rem, 6vw, 5.5rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
  border-top: 1px solid var(--color-rule);
}

@media (max-width: 900px) {
  .product-detail__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-detail__info {
    position: static;
  }

  .product-detail__main {
    max-height: none;
  }
}

/* Bag and checkout: readable sizes. */
.cart-line__content p {
  font-size: .875rem;
  text-transform: none;
}

.cart-line__remove {
  min-height: 1.75rem;
  font-size: .875rem;
}

.cart-line__quantity-button {
  width: 2rem;
  height: 2rem;
}

.cart-summary__line {
  font-size: .875rem;
}

.cart-summary .text-link {
  justify-self: start;
}

.checkout-gate {
  display: grid;
  align-content: start;
  gap: 1.25rem;
  padding-top: 1.2rem;
  border-top: 1px solid color-mix(in oklch, var(--color-night-ink) 22%, transparent);
}

.checkout-gate h2 {
  font-size: clamp(2rem, 3.4vw, 3rem);
  letter-spacing: -.045em;
  line-height: 1;
}

.checkout-gate p {
  max-width: 32rem;
  color: color-mix(in oklch, var(--color-night-ink) 72%, transparent);
  font-size: 1rem;
  font-weight: 300;
}

.checkout-gate__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: .5rem;
}

.checkout-form label {
  font-size: .75rem;
}

.checkout-form .checkout-form__check {
  align-items: center;
  min-height: 1.75rem;
  color: var(--color-night-ink);
  font-size: .9375rem;
}

.checkout-form__check input {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0;
  accent-color: var(--color-accent);
}

.checkout-form__check[aria-disabled="true"] {
  color: color-mix(in oklch, var(--color-night-ink) 50%, transparent);
}

.checkout-form__notice {
  font-size: .9375rem;
}

.checkout-form > .button {
  justify-self: start;
}

.checkout-form__status:empty {
  display: none;
}

.checkout-summary__header a {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: .25rem;
}

.checkout-summary__header a:hover,
.checkout-summary__header a:focus-visible {
  color: var(--color-accent);
}

.checkout-summary__header [data-checkout-count] {
  margin-left: .35rem;
  color: var(--color-ink);
}

.checkout-summary__item,
.checkout-summary__status {
  font-size: .875rem;
}

.checkout-summary__status {
  color: var(--color-muted);
}

.checkout-summary__items .text-link {
  margin-top: .25rem;
}

.checkout-summary > p {
  font-size: .875rem;
}

/* Confirmation: order lines as rows, actions aligned with the copy. */
.thank-you__summary {
  display: grid;
  gap: .75rem;
  width: min(100%, 30rem);
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-rule);
}

.thank-you__lines {
  display: grid;
  gap: .6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.thank-you__lines li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: color-mix(in oklch, var(--color-ink) 82%, transparent);
  font-size: .9375rem;
}

.thank-you__lines strong {
  flex: 0 0 auto;
  color: var(--color-ink);
  font-weight: 400;
}

.thank-you__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-top: .75rem;
  border-top: 1px solid var(--color-rule);
  color: var(--color-muted);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.thank-you__total strong {
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 400;
  letter-spacing: -.03em;
  text-transform: none;
}

.thank-you__payment {
  color: var(--color-muted);
  font-size: .9375rem;
}

.thank-you__inner .chapter__actions {
  justify-content: flex-start;
}

/* Shop pagination: previous / page x of y / next. */
.shop-pagination {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .75rem 1.5rem;
  margin-top: clamp(3rem, 5vw, 4.5rem);
}

.shop-pagination__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1.1rem;
  border: 1px solid var(--color-rule-strong);
  color: var(--color-ink);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}

a.shop-pagination__link:hover,
a.shop-pagination__link:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.shop-pagination__link[aria-disabled="true"] {
  border-color: var(--color-rule);
  color: var(--color-faint);
}

.shop-pagination__status {
  color: var(--color-muted);
  font-size: .875rem;
}

/* ==========================================================================
   Shop v2 (2026-10-05): the commerce path is fully dark, like the rest of the
   site. Shop, product, bag and checkout sit on the void page; the slim band,
   the shop filter bar, the product buy panel, the review form and the bag /
   checkout summaries are raised panels one surface step lighter. Every
   section keeps data-nav-tone="dark", and the scrolled masthead stays dark on
   these pages (see "Commerce masthead" below).
   ========================================================================== */

/* Commerce sections: rules written for the old paper sections use
   --color-night-ink for text and --color-paper for the opposite fill; here
   they map onto the dark palette. */
.shop-catalog,
.product-detail,
.store--related,
.store--recent,
.cart-page,
.checkout-page {
  --color-night-ink: var(--color-ink);
  --color-paper: var(--color-surface-soft);
  background: var(--color-void);
  color: var(--color-ink);
}

/* Raised panels: one surface step up from the page, with a hairline edge. */
.shop-band,
.shop-panel,
.shop-catalog .shop-filter-shell,
.cart-summary,
.checkout-summary {
  border: 1px solid var(--color-rule);
  background: var(--color-surface);
  color: var(--color-ink);
}

/* Slim band: breadcrumb, then the page title (shop) on one line. Shared by
   the shop and product pages; it clears the fixed masthead. */
.shop-band {
  position: relative;
  z-index: 1;
  border-width: 0 0 1px;
}

.shop-band__inner {
  display: grid;
  gap: clamp(.9rem, 1.6vw, 1.4rem);
  width: min(100%, 100rem);
  margin: 0 auto;
  padding: calc(5rem + clamp(.75rem, 1.5vw, 1.25rem)) var(--gutter) clamp(.9rem, 1.5vw, 1.25rem);
}

.shop-band .store-breadcrumb {
  min-width: 0;
}

.shop-band .store-breadcrumb [aria-current="page"] {
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

.shop-band__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem clamp(1.5rem, 3vw, 3rem);
  padding-bottom: clamp(.4rem, 1vw, .9rem);
}

.shop-band__title h1 {
  font-size: clamp(2.2rem, 3vw, 2.6rem);
  letter-spacing: -.045em;
  line-height: 1;
}

.shop-band__title p {
  min-width: 0;
  color: color-mix(in oklch, var(--color-ink) 78%, transparent);
  font-size: 1rem;
  font-weight: 300;
}

/* Shop catalogue: same container and bottom spacing as the product page;
   #catalog links land with the filter bar just below the fixed masthead. */
.shop-catalog {
  scroll-margin-top: 3rem;
}

.shop-catalog .page-section__inner {
  padding-top: clamp(1.5rem, 2.5vw, 2.25rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

.shop-catalog .shop-filter-shell {
  margin-top: 0;
  padding: .25rem clamp(1rem, 1.6vw, 1.5rem) clamp(1rem, 1.6vw, 1.25rem);
}

.shop-catalog .shop-filter-top {
  border-top: 0;
  font-size: .75rem;
}

.shop-catalog .store-empty {
  grid-column: 1 / -1;
  padding: 3rem 0;
  font-size: 1rem;
}

/* Product page: gallery on the page, purchase column as a raised panel. */
.product-detail__info.shop-panel {
  padding: clamp(1.25rem, 2.2vw, 2rem);
}

/* Thumbnails: one row that scrolls sideways once there are more than fit
   (up to 12), snapping per thumb. Arrow keys move focus (app.js). The focus
   ring sits inside the thumb so the scroll box never clips it. */
.product-detail__thumbs {
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 4px 4px 6px;
  margin: -4px;
  scroll-padding-inline: 4px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.product-detail__thumbs button {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.product-detail__thumbs button:focus-visible {
  outline-offset: -2px;
}

.store--related .store__inner,
.store--recent .store__inner {
  max-width: calc(100rem - 2 * var(--gutter));
}

/* Commerce masthead: on the shop, product, bag, checkout and thank-you pages
   the scrolled bar stays dark (elsewhere it turns white). The extra body
   class outranks the global body[data-nav-tone] .masthead.is-scrolled rules,
   so the logo is not inverted here. */
body[data-nav-tone]:is(.page-shop, .page-product, .page-bag, .page-checkout, .page-thank-you) .masthead.is-scrolled {
  background: color-mix(in oklch, var(--color-void) 94%, transparent);
  box-shadow: 0 1px 0 var(--color-rule), 0 8px 24px hsl(0 0% 0% / .35);
  color: var(--color-ink);
}

body[data-nav-tone]:is(.page-shop, .page-product, .page-bag, .page-checkout, .page-thank-you) .masthead.is-scrolled .masthead__brand img {
  filter: none;
}

body[data-nav-tone]:is(.page-shop, .page-product, .page-bag, .page-checkout, .page-thank-you) .masthead.is-scrolled .masthead__nav a,
body[data-nav-tone]:is(.page-shop, .page-product, .page-bag, .page-checkout, .page-thank-you) .masthead.is-scrolled .masthead__signout button {
  color: color-mix(in oklch, var(--color-ink) 76%, transparent);
}

body[data-nav-tone]:is(.page-shop, .page-product, .page-bag, .page-checkout, .page-thank-you) .masthead.is-scrolled .masthead__nav a:hover,
body[data-nav-tone]:is(.page-shop, .page-product, .page-bag, .page-checkout, .page-thank-you) .masthead.is-scrolled .masthead__nav a:focus-visible,
body[data-nav-tone]:is(.page-shop, .page-product, .page-bag, .page-checkout, .page-thank-you) .masthead.is-scrolled .masthead__signout button:hover,
body[data-nav-tone]:is(.page-shop, .page-product, .page-bag, .page-checkout, .page-thank-you) .masthead.is-scrolled .masthead__signout button:focus-visible {
  color: var(--color-accent);
}

/* Bag badge: plain at 0, filled with the accent once the bag holds anything,
   and a brief pulse when an item is added. */
.masthead__bag b {
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}

.masthead__bag b[data-filled="true"] {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-weight: 600;
}

.masthead__bag b.is-bumped {
  animation: bag-badge-pulse .55s var(--ease-out);
}

@keyframes bag-badge-pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in oklch, var(--color-accent) 60%, transparent); }
  35% { transform: scale(1.28); }
  100% { transform: scale(1); box-shadow: 0 0 0 .55rem transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .masthead__bag b.is-bumped {
    animation: none;
  }
}

/* Bag lines (drawer and bag page): smaller titles that wrap instead of
   truncating. */
.cart-drawer .cart-line__content h3,
.cart-page__items .cart-line__content h3 {
  overflow: visible;
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  letter-spacing: -.01em;
  line-height: 1.25;
  overflow-wrap: anywhere;
  white-space: normal;
}

.cart-page__items .cart-line__content h3 {
  font-size: clamp(1.125rem, 1.4vw, 1.35rem);
}

@media (max-width: 740px) {
  .shop-band__inner {
    padding-top: calc(4.5rem + .75rem);
  }

  .shop-band__title h1 {
    font-size: 2rem;
  }

  .shop-catalog .page-section__inner {
    padding-top: 1.25rem;
    padding-bottom: 4rem;
  }

  .shop-catalog .shop-filter-shell {
    padding-inline: 1rem;
  }
}

/* Product page, below the two columns: "About this piece" (long description
   + specs) at a readable measure, then reviews: summary and list on the page,
   the form (or the reason it is not shown) in a raised panel. */
.product-long,
.product-reviews {
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  align-items: start;
  gap: 1.25rem clamp(2rem, 4vw, 4.5rem);
  margin-top: clamp(3.5rem, 6vw, 5.5rem);
  padding-top: clamp(2rem, 3.5vw, 3rem);
  border-top: 1px solid var(--color-rule);
}

.product-long h2,
.product-reviews h2 {
  font-size: clamp(1.6rem, 2.2vw, 2rem);
  letter-spacing: -.035em;
  line-height: 1.1;
}

.product-long {
  grid-template-columns: minmax(0, 1fr);
}

.product-long__body {
  display: grid;
  gap: 1rem;
  max-width: 70ch;
}

.product-long__body > p {
  color: color-mix(in oklch, var(--color-ink) 82%, transparent);
  font-size: 1rem;
  line-height: 1.7;
}

.product-specs {
  width: 100%;
  margin-top: 1rem;
  border-collapse: collapse;
  font-size: .9375rem;
}

.product-specs caption {
  padding-bottom: .6rem;
  color: var(--color-muted);
  font-size: .75rem;
  letter-spacing: .12em;
  text-align: left;
  text-transform: uppercase;
}

.product-specs th,
.product-specs td {
  padding: .7rem 0;
  border-top: 1px solid var(--color-rule);
  text-align: left;
  vertical-align: top;
}

.product-specs tr:last-child th,
.product-specs tr:last-child td {
  border-bottom: 1px solid var(--color-rule);
}

.product-specs th {
  width: 40%;
  padding-right: 1rem;
  color: var(--color-muted);
  font-weight: 400;
}

.product-specs td {
  overflow-wrap: anywhere;
}

.product-reviews__main {
  display: grid;
  align-content: start;
  gap: 1.1rem;
  min-width: 0;
}

.product-reviews__stars {
  color: var(--color-accent);
  font-size: 1.05rem;
  letter-spacing: .12em;
}

.product-reviews__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .9rem;
  color: var(--color-muted);
  font-size: .9375rem;
}

.product-reviews__summary .product-reviews__stars {
  font-size: 1.35rem;
}

.product-reviews__status {
  padding: .85rem 1rem;
  border-left: 3px solid var(--color-accent);
  background: color-mix(in oklch, var(--color-ink) 6%, transparent);
  font-size: .9375rem;
}

.product-reviews__empty {
  color: var(--color-muted);
  font-size: 1rem;
}

.product-reviews__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-reviews__list > li {
  padding: 1.25rem 0;
  border-top: 1px solid var(--color-rule);
}

.product-reviews__list > li:last-child {
  border-bottom: 1px solid var(--color-rule);
}

.product-review {
  display: grid;
  gap: .45rem;
  max-width: 70ch;
}

.product-review h3 {
  font-size: 1.125rem;
  letter-spacing: -.015em;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.product-review__body {
  color: color-mix(in oklch, var(--color-ink) 82%, transparent);
  font-size: .9375rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.product-reviews__meta {
  color: var(--color-muted);
  font-size: .875rem;
}

/* Form / reason panel: the dark column, like the buy panel above. */
.product-reviews__form,
.product-reviews__aside {
  display: grid;
  gap: 1.1rem;
  min-width: 0;
  padding: clamp(1.25rem, 2.2vw, 2rem);
}

.product-reviews__form h3 {
  font-size: 1.35rem;
  letter-spacing: -.025em;
}

.product-reviews__form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.product-reviews__form legend,
.product-reviews__field label {
  display: block;
  margin-bottom: .5rem;
  color: var(--color-muted);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.product-reviews__field {
  display: grid;
}

.product-reviews__field input,
.product-reviews__field textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: .7rem .85rem;
  border: 1px solid var(--color-rule-strong);
  border-radius: 0;
  background: transparent;
  color: var(--color-ink);
  font: inherit;
  font-size: .9375rem;
  line-height: 1.5;
}

.product-reviews__field textarea {
  min-height: 8rem;
  resize: vertical;
}

.product-reviews__field input:hover,
.product-reviews__field textarea:hover {
  border-color: color-mix(in oklch, var(--color-ink) 55%, transparent);
}

.product-reviews__field input:focus-visible,
.product-reviews__field textarea:focus-visible {
  border-color: var(--color-accent);
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.product-reviews__note {
  color: var(--color-muted);
  font-size: .875rem;
}

.product-reviews__error {
  display: block;
  margin-top: .45rem;
  color: hsl(30 70% 72%);
  font-size: .875rem;
}

.product-reviews__form .button {
  justify-self: start;
  min-height: 3rem;
}

.product-reviews__reason {
  color: color-mix(in oklch, var(--color-ink) 82%, transparent);
  font-size: .9375rem;
}

.product-reviews__reason .text-link {
  font-size: .75rem;
}

/* Star picker: five radios, one star each. The radio stays the real control
   (Tab in, arrows move, Space picks); it is visually hidden but focusable,
   and its label carries the focus ring. Stars up to the checked one (or the
   hovered one) fill with the accent. */
.star-picker {
  position: relative;
  display: inline-flex;
  gap: .25rem;
}

.star-picker__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.star-picker__star {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 1px solid var(--color-rule-strong);
  color: color-mix(in oklch, var(--color-ink) 38%, transparent);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}

.star-picker:has(.star-picker__input:checked) .star-picker__star,
.star-picker__input:checked + .star-picker__star {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.star-picker__input:checked + .star-picker__star ~ .star-picker__star {
  border-color: var(--color-rule-strong);
  color: color-mix(in oklch, var(--color-ink) 38%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  .star-picker:hover .star-picker__star {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }

  .star-picker .star-picker__star:hover ~ .star-picker__star {
    border-color: var(--color-rule-strong);
    color: color-mix(in oklch, var(--color-ink) 38%, transparent);
  }
}

.star-picker__input:focus-visible + .star-picker__star {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .product-reviews {
    grid-template-columns: minmax(0, 1fr);
  }
}

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

/* Content pages: contact, support, music, gift, careers, press, welcome,
   legal hub and the 404. A compact page hero, a heading/body split on the
   12-column grid, and body copy that never drops below 14px. */
.page-hero--compact .page-hero__inner {
  min-height: 72svh;
}

.site-footer__grid {
  grid-template-columns: repeat(5, 1fr);
}

.info-heading {
  grid-column: 1 / span 5;
  margin-top: clamp(3.5rem, 6vw, 6rem);
}

.info-heading h2 {
  font-size: clamp(2.8rem, 5.4vw, 5.6rem);
  letter-spacing: -.06em;
  line-height: .82;
}

.info-body {
  grid-column: 7 / span 6;
  align-self: end;
  margin-top: clamp(3.5rem, 6vw, 6rem);
}

.info-body > p,
.legal-hub__section > p,
.faq details p {
  max-width: 36rem;
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1.65;
}

.info-body > p + p,
.legal-hub__section > p + p {
  margin-top: 1rem;
}

.info-inline {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-accent-deep);
  text-underline-offset: .2em;
}

.info-inline:hover,
.info-inline:focus-visible {
  color: var(--color-accent);
}

.info-note,
.info-status {
  color: var(--color-ink);
  font-size: 1rem;
}

.info-status {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  letter-spacing: -.02em;
}

.info-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem 2rem;
  margin-top: 2.25rem;
}

.info-links {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-rule);
  list-style: none;
}

.info-links a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1.5rem;
  min-height: 3rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--color-rule);
  transition: color .25s var(--ease);
}

.info-links span {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  letter-spacing: -.03em;
}

.info-links small {
  color: var(--color-muted);
  font-size: .875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.info-links i {
  color: var(--color-accent);
  font-style: normal;
}

.info-links a:hover,
.info-links a:focus-visible {
  color: var(--color-accent);
}

.info-anchors {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2.5rem;
}

.info-anchors a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: .55rem 1rem;
  border: 1px solid var(--color-rule-strong);
  color: var(--color-ink);
  font-size: .875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}

.info-anchors a:hover,
.info-anchors a:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.faq,
.legal-hub__sections {
  grid-column: 1 / -1;
  display: grid;
  gap: clamp(3rem, 5vw, 4.5rem);
  margin-top: clamp(3rem, 5vw, 4.5rem);
}

.faq__group,
.legal-hub__section {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 3vw, 3rem);
  scroll-margin-top: 6rem;
}

.faq__group > h2,
.legal-hub__section > h2 {
  grid-column: 1 / span 4;
  grid-row: 1 / span 20;
  font-size: clamp(1.75rem, 2.8vw, 2.6rem);
  letter-spacing: -.045em;
  line-height: .95;
}

.faq__group > details,
.legal-hub__section > :not(h2) {
  grid-column: 6 / span 7;
}

.legal-hub__section {
  padding-top: clamp(2rem, 3vw, 3rem);
  border-top: 1px solid var(--color-rule);
}

.legal-hub__section > .text-link,
.legal-hub__section > .info-actions {
  margin-top: 1.5rem;
}

.faq details {
  border-bottom: 1px solid var(--color-rule);
}

.faq details:first-of-type {
  border-top: 1px solid var(--color-rule);
}

.faq summary {
  position: relative;
  padding: 1.25rem 2.5rem 1.25rem 0;
  color: var(--color-ink);
  font-size: 1.0625rem;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
  transition: color .25s var(--ease);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  position: absolute;
  top: 1.2rem;
  right: .25rem;
  color: var(--color-accent);
  content: "+";
  font-size: 1.25rem;
  line-height: 1;
}

.faq details[open] summary::after {
  content: "\2212";
}

.faq summary:hover,
.faq summary:focus-visible {
  color: var(--color-accent);
}

.faq summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

.faq details p {
  padding-bottom: 1.4rem;
}

.music-slots {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  margin: clamp(3.5rem, 6vw, 6rem) 0 0;
  padding: 0;
  list-style: none;
}

.music-slots li {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  min-height: 15rem;
  padding: 1.5rem;
  border: 1px dashed var(--color-rule-strong);
}

.music-slots__tag {
  align-self: flex-start;
  padding: .3rem .6rem;
  border: 1px solid var(--color-gold);
  color: var(--color-ink);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.music-slots strong {
  margin-top: auto;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight: 400;
  letter-spacing: -.035em;
}

.music-slots small {
  color: var(--color-muted);
  font-size: .9375rem;
}

.welcome-steps {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  margin: clamp(3.5rem, 6vw, 6rem) 0 0;
  padding: 0;
  list-style: none;
}

.welcome-steps li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-rule-strong);
}

.welcome-steps li > span {
  color: var(--color-accent);
  font-size: .875rem;
  letter-spacing: .12em;
}

.welcome-steps h2 {
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  letter-spacing: -.05em;
  line-height: .9;
}

.welcome-steps p {
  flex: 1;
  color: var(--color-muted);
  font-size: 1rem;
}

@media (max-width: 1050px) {
  .site-footer__grid {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 3rem;
  }
}

@media (max-width: 900px) {
  .info-heading,
  .info-body {
    grid-column: 1 / -1;
  }

  .info-body {
    margin-top: 2.5rem;
  }

  .faq__group > h2,
  .legal-hub__section > h2 {
    grid-column: 1 / -1;
    grid-row: auto;
    margin-bottom: 1.5rem;
  }

  .faq__group > details,
  .legal-hub__section > :not(h2) {
    grid-column: 1 / -1;
  }

  .music-slots,
  .welcome-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .music-slots li {
    min-height: 11rem;
  }
}

@media (max-width: 740px) {
  .page-hero--compact .page-hero__inner {
    min-height: 80svh;
  }

  .info-heading,
  .info-body,
  .info-anchors,
  .faq,
  .legal-hub__sections,
  .music-slots,
  .welcome-steps {
    margin-top: 3rem;
  }

  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}