/* 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;
}

* {
  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 {
  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;
}

.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: minmax(9rem, 1fr) 1fr auto;
  align-items: center;
  gap: 1.5rem;
  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;
}

body[data-nav-tone="light"] .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;
  gap: clamp(1rem, 2.5vw, 2.75rem);
}

.masthead__nav a {
  color: var(--color-muted);
  transition: color .25s var(--ease);
}

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

.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 .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;
}

.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: 1fr auto auto;
  }

  .masthead__nav {
    gap: 1.2rem;
  }

  .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;
  }
}

@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,
.shop-hero,
.page-section {
  position: relative;
  z-index: 1;
  overflow: clip;
}

.page-hero,
.shop-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,
.shop-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 > *,
.shop-hero__inner > *,
.page-section__inner > * {
  position: relative;
  z-index: 2;
}

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

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

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

.page-hero__copy > p:last-child,
.shop-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,
.shop-hero__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,
.shop-catalog__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,
.shop-catalog__heading > div {
  grid-column: 1 / span 7;
}

.membership-heading h2,
.network-heading h2,
.shop-catalog__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,
.shop-catalog__heading > p {
  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-hero {
  min-height: 100svh;
}

.shop-hero__inner {
  align-content: center;
}

.shop-hero__copy {
  z-index: 3;
}

.shop-hero__object {
  position: absolute;
  z-index: 2;
  right: 7%;
  bottom: 11%;
  width: min(32vw, 28rem);
  transform: rotate(-8deg);
  filter: drop-shadow(0 2rem 1.5rem rgb(0 0 0 / .38));
}

.shop-hero__object img {
  width: 100%;
  object-fit: contain;
}

.shop-catalog__heading > p {
  color: color-mix(in oklch, var(--color-night-ink) 70%, transparent);
}

.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,
  .shop-hero__inner,
  .page-section__inner {
    display: block;
    min-height: 0;
    padding-top: 7.5rem;
    padding-bottom: 7.5rem;
  }

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

  .page-hero__copy,
  .shop-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,
  .shop-catalog__heading,
  .plan-grid,
  .network-explorer,
  .shop-controls,
  .product-grid,
  .shop-note__media {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  .page-hero__copy,
  .shop-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,
  .shop-catalog__heading,
  .network-explorer,
  .shop-controls,
  .product-grid,
  .shop-note__media {
    margin-top: 4rem;
  }

  .page-hero__copy h1,
  .shop-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,
  .shop-catalog__heading h2 {
    font-size: clamp(3.4rem, 14.4vw, 5.76rem);
  }

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

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

  .membership-heading,
  .shop-catalog__heading {
    display: block;
  }

  .membership-heading > p,
  .network-heading > p:last-child,
  .shop-catalog__heading > p {
    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;
  }

  .shop-hero__object {
    right: 2rem;
    bottom: 6rem;
    width: 45%;
  }

  .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;
  }

  .shop-hero__object {
    transform: none;
  }
}

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

body[data-nav-tone="dark"] .masthead__nav a {
  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);
}

.shop-hero {
  min-height: 0;
  background: var(--color-void);
}

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

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

.shop-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.72) contrast(1.12) brightness(.55);
}

.shop-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) 38%, transparent) 60%, color-mix(in oklch, var(--color-void) 75%, transparent)), linear-gradient(180deg, color-mix(in oklch, var(--color-void) 74%, transparent), transparent 40%, color-mix(in oklch, var(--color-void) 90%, transparent));
}

.shop-hero__inner {
  min-height: clamp(42rem, 88svh, 58rem);
  padding-top: clamp(6.5rem, 10vh, 8rem);
  padding-bottom: clamp(4rem, 7vh, 6rem);
  align-content: center;
}

.shop-hero__copy {
  grid-column: 2 / span 7;
  align-self: center;
  margin-top: 0;
}

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

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

.shop-hero__copy .chapter__actions {
  margin-top: 2rem;
}

.shop-hero__object {
  right: 7%;
  bottom: 7%;
  width: min(39vw, 36rem);
  transform: rotate(-8deg) translate3d(0, 0, 0);
}

.shop-hero__note {
  z-index: 4;
  bottom: 8%;
}

.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-hero__inner {
    display: block;
    min-height: 43rem;
    padding-top: 7.5rem;
    padding-bottom: 5rem;
  }

  .shop-hero__copy {
    max-width: 20rem;
    margin-top: 3.8rem;
  }

  .shop-hero__copy h1 {
    font-size: clamp(3.6rem, 15.2vw, 5.6rem);
  }

  .shop-hero__copy > p:not(.chapter__kicker) {
    max-width: 19rem;
  }

  .shop-hero__object {
    right: -1rem;
    bottom: 3.2rem;
    width: min(72vw, 19rem);
    opacity: .68;
  }

  .shop-hero__note {
    right: var(--gutter);
    bottom: 1.4rem;
  }

  .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);
  }
}