/* ============================================================
   COMPONENTS — the reusable layer.
   ============================================================
   Everything here is page-agnostic: header, footer, buttons,
   section shell, and the content blocks a section can compose
   (facts, issue rows, editorial cards, stat rows, ledger,
   story panel, tagline band). A new page assembles these; it
   does not restyle them.

   Colors come from tokens.css. Nothing here names a hue. */

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.site-header.is-scrolled {
  background: var(--header-bg);
  box-shadow: 0 1px 0 var(--line);
  backdrop-filter: blur(8px);
}
/* A page that does not open with a hero paints the bar from the
   first pixel, so its content is never read through a
   transparent header. */
.site-header.is-solid {
  background: var(--header-bg);
  box-shadow: 0 1px 0 var(--line);
  backdrop-filter: blur(8px);
}
/* The bar is fixed, so a page that paints it from the first pixel
   also has to clear it. A hero supplies its own top padding; a
   page that opens with ordinary content gets it here, once, for
   every such page rather than in each view. */
body[data-solid-header] main { padding-top: var(--header-h); }
.header-inner {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  padding-top: 14px;
  padding-bottom: 14px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--brand-deep);
}
.brand-mark {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.24rem;
  letter-spacing: -0.01em;
}
.brand-by {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 3px;
}

.main-nav { flex: 1; }
.main-nav ul {
  list-style: none;
  display: flex;
  gap: clamp(10px, 2vw, 26px);
}
.main-nav a {
  display: inline-block;
  padding: 10px 4px;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.main-nav a:hover { color: var(--brand-deep); }
.main-nav a:hover,
.main-nav a:focus-visible { border-color: var(--accent); }
.main-nav a:active { color: var(--accent-deep); }
/* The section a visitor is currently reading. */
.main-nav a[aria-current="page"] {
  color: var(--brand-deep);
  border-color: var(--brand);
}

/* ---- utility links: storefront and backoffice -------------- */
.header-utils {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 20px);
}
.util-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--brand-deep);
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.util-link:hover { border-color: var(--accent); }
.util-link:active { color: var(--accent-deep); }

/* ---- mobile drawer toggle ---------------------------------- */
/* Hidden on desktop, where the bar itself carries the links. */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  color: var(--brand-deep);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.nav-toggle:hover { border-color: var(--brand); }
.nav-toggle:active { background: var(--brand-tint); }
.nav-toggle__bars {
  display: grid;
  gap: 4px;
  width: 18px;
}
.nav-toggle__bars span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
/* Open: the bars become a cross. */
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ---- mobile drawer ----------------------------------------- */
/* Sits under the fixed header and holds the same links the bar
   shows on a wider screen. */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: color-mix(in srgb, var(--brand-deep) 45%, transparent);
  backdrop-filter: blur(2px);
}
.nav-drawer[hidden] { display: none; }
.nav-drawer__panel {
  position: absolute;
  inset: var(--header-h) 0 auto 0;
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  background: var(--paper);
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  padding: 18px var(--pad-x) 26px;
  display: grid;
  gap: 14px;
  animation: drawer-in 0.22s ease;
}
@keyframes drawer-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
.nav-drawer__nav ul { list-style: none; }
.nav-drawer__link {
  display: block;
  min-height: 48px;
  line-height: 48px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  color: var(--brand-deep);
  border-bottom: 1px solid var(--line);
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.nav-drawer__link:hover,
.nav-drawer__link:active {
  color: var(--accent-deep);
  padding-left: 6px;
}
.nav-drawer__utils {
  display: grid;
  padding-top: 4px;
}
.nav-drawer .btn { justify-content: center; }

@media (max-width: 940px) {
  .main-nav { display: none; }
  .header-inner .header-utils { display: none; }
  /* Scoped to the bar so it outranks `.btn`, which is declared
     later in this sheet at equal specificity. */
  .header-inner .header-cta { display: none; }
  .nav-toggle { display: inline-flex; }
  .header-inner { justify-content: space-between; }
}

/* The drawer belongs to the narrow layout only: widening the
   window past the breakpoint closes it rather than leaving a
   panel floating over the desktop bar. */
@media (min-width: 941px) {
  .nav-drawer { display: none; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 26px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease,
    border-color 0.2s ease, transform 0.15s ease;
}
.btn-sm { min-height: 42px; padding: 0 18px; font-size: 0.82rem; }
.btn-primary { background: var(--accent); color: var(--on-brand); }
.btn-primary:hover { background: var(--accent-deep); }
.btn-primary:active { transform: scale(0.97); }
.btn-ghost {
  border: 1.5px solid var(--brand);
  color: var(--brand-deep);
}
.btn-ghost:hover { background: var(--brand-tint); }
.btn-ghost:active { transform: scale(0.97); }
.btn-light {
  background: var(--paper);
  color: var(--brand-deep);
}
.btn-light:hover { background: var(--brand-tint); }
.btn-light:active { transform: scale(0.97); }
.btn .arrow { transition: transform 0.2s ease; }
.btn:hover .arrow { transform: translateX(4px); }

/* A destructive step, worded as a link rather than dressed as a
   button: emptying the cart and dropping a line are not the
   action the page is for, and a second solid button next to the
   checkout would compete with it. It still takes a full touch
   target. */
.link-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-size: 0.86rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.link-button:hover { color: var(--danger); }

/* ============================================================
   ALERT — a change the server refused.
   ============================================================

   The one element on the page that does not follow the brand.
   A refusal painted in the palette reads as part of the design
   rather than as something that went wrong, so it keeps its own
   pair of tokens.
   ============================================================ */
.alert {
  margin-bottom: clamp(18px, 3vh, 28px);
  padding: 14px 16px;
  border: 1px solid var(--danger);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  background: var(--danger-tint);
  color: var(--danger);
  font-size: 0.92rem;
  list-style: none;
}
.alert__line + .alert__line { margin-top: 6px; }

/* ============================================================
   SECTION SHELL
   ============================================================ */
.section { padding: var(--section-y) 0; }
.section-tint { background: var(--brand-tint); }
/* Inverted band. The ink is set here, not inherited, so a
   heading on a dark surface is never light-surface gray. */
.section-invert {
  background: var(--brand-deep);
  color: var(--on-brand-strong);
}
.section-invert .eyebrow { color: var(--brand-bright); }
.section-invert .section-title { color: var(--on-brand); }
.section-invert .section-title .accent { color: var(--brand-bright); }
.section-invert .section-lede { color: var(--on-brand-muted); }

.section-head { margin-bottom: clamp(28px, 5vh, 54px); }
.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.6vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin-top: 12px;
  max-width: 20ch;
  text-wrap: balance;
}
.section-title .accent { color: var(--brand); }
.section-lede {
  margin-top: 18px;
  max-width: 52ch;
  font-size: 1.02rem;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* A split section: copy on one side, content on the other. The
   `is-wide-first` variant gives the copy the larger column. */
.split-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.split-grid.is-top { align-items: start; }
.split-grid.is-wide-first {
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
}
@media (max-width: 860px) {
  .split-grid,
  .split-grid.is-wide-first { grid-template-columns: 1fr; }
}

/* Centered section: heading, copy and band all on the axis. */
.section-center { text-align: center; }
.section-center .section-title {
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}
/* Body copy in a centered section. Scoped to its own class on
   purpose: a descendant rule reaching every `p` here would also
   repaint the copy inside a nested band that sets its own ink. */
.section-copy {
  margin: 20px auto 0;
  max-width: 56ch;
  color: var(--ink-soft);
  font-size: 1.04rem;
  text-wrap: pretty;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  padding-top: clamp(112px, 15vh, 168px);
  padding-bottom: clamp(48px, 7vh, 96px);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 4.4vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 15ch;
  margin: 16px 0 22px;
  text-wrap: balance;
}
.hero-title .accent { color: var(--brand); }
.hero-lede {
  max-width: 44ch;
  font-size: 1.08rem;
  color: var(--ink-soft);
  margin-bottom: 18px;
  text-wrap: pretty;
}
.hero-claim {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--brand-deep);
  border-left: 3px solid var(--accent);
  padding: 2px 0 2px 14px;
  margin-bottom: 30px;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
}

/* ---- hero scene: two numbers become one -------------------- */
.scene { position: relative; }
.count-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.count-card {
  background: var(--brand-tint);
  border: 1px solid var(--brand-tint-deep);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
}
.count-card .who {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.count-card .qty {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4.6vw, 2.9rem);
  line-height: 1.1;
  margin-top: 6px;
  color: var(--brand-deep);
  font-variant-numeric: tabular-nums;
}
.count-card .unit {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
}
.gap-badge {
  position: relative;
  z-index: 2;
  margin: 14px auto;
  width: max-content;
  background: var(--accent-tint);
  color: var(--accent-deep);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  padding: 7px 16px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  animation: nudge 3.4s ease-in-out infinite;
}
@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.truth-card {
  background: var(--brand);
  color: var(--on-brand);
  border-radius: 12px;
  padding: 22px 22px 20px;
  box-shadow: var(--shadow-card);
}
.truth-card .who {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-bright);
}
.truth-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-top: 6px;
}
.truth-card .qty {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 5vw, 3.2rem);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.truth-card .tick {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--on-brand);
}
.truth-card .note {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line-on-brand);
  font-size: 0.84rem;
  color: var(--on-brand-soft);
}
.scene-caption {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
}

/* ============================================================
   TICKER
   ============================================================ */
.ticker {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding: 13px 0;
  background: var(--paper);
}
.ticker-track {
  display: flex;
  gap: 44px;
  width: max-content;
  animation: ticker 38s linear infinite;
}
.ticker span {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
.ticker span::after {
  content: "·";
  margin-left: 44px;
  color: var(--accent);
}
@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; flex-wrap: wrap; width: auto; }
  .ticker-track > .dup { display: none; }
}

/* ============================================================
   FACT ROW — a small grid of headline numbers.
   ============================================================ */
.fact-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.fact {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 18px;
}
.fact .n {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.fact .l {
  margin-top: 8px;
  font-size: 0.86rem;
  color: var(--ink-soft);
}
@media (max-width: 520px) {
  .fact-row { grid-template-columns: 1fr; }
}

/* ============================================================
   ISSUE LIST — icon, name and description, trailing metric.
   ============================================================ */
.issue-list { list-style: none; border-top: 1px solid var(--line); }
.issue-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(14px, 3vw, 34px);
  padding: clamp(18px, 3vh, 28px) 6px;
  border-bottom: 1px solid var(--line);
  transition: background-color 0.25s ease, padding-left 0.25s ease;
}
.issue-row:hover { background: var(--brand-tint); padding-left: 16px; }
.issue-icon {
  display: grid;
  place-items: center;
  width: clamp(46px, 6vw, 60px);
  height: clamp(46px, 6vw, 60px);
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--brand-tint-deep);
  color: var(--brand);
  transition: background-color 0.25s ease, border-color 0.25s ease,
    transform 0.25s ease;
}
.issue-row:hover .issue-icon {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
  transform: rotate(-6deg);
}
.issue-icon svg { width: 24px; height: 24px; }
.issue-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.12rem, 2.2vw, 1.45rem);
  line-height: 1.25;
}
.issue-desc {
  margin-top: 4px;
  font-size: 0.94rem;
  color: var(--ink-soft);
  max-width: 54ch;
  text-wrap: pretty;
}
.issue-metric {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-deep);
  text-align: right;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .issue-row { grid-template-columns: auto minmax(0, 1fr); }
  .issue-metric { grid-column: 2; text-align: left; margin-top: 8px; }
}

.pull-quote {
  margin-top: clamp(32px, 5vh, 56px);
  border-left: 4px solid var(--accent);
  padding: 6px 0 6px 22px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 2.6vw, 1.8rem);
  line-height: 1.3;
  max-width: 26ch;
  color: var(--brand-deep);
  text-wrap: balance;
}

/* ============================================================
   NOTE STACK — short titled blocks in a column.
   ============================================================ */
.note-stack { display: grid; gap: 14px; }
.note-item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: 8px;
  padding: 18px 20px;
}
.note-item h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  margin-bottom: 5px;
}
.note-item p {
  font-size: 0.94rem;
  color: var(--ink-soft);
  text-wrap: pretty;
}
/* Marks the block that carries the consequence. */
.note-item.is-accent { border-left-color: var(--accent); }

/* ============================================================
   EDITORIAL GRID — offset cards with media and body.
   ============================================================ */
.editorial-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(16px, 2.4vw, 30px);
}
.editorial-card { position: relative; }
/* The four offsets that give the grid its rhythm. */
.editorial-card.pos-a { grid-column: 1 / 7; }
.editorial-card.pos-b { grid-column: 7 / 13; margin-top: 8%; }
.editorial-card.pos-c { grid-column: 1 / 6; margin-left: 6%; }
.editorial-card.pos-d { grid-column: 6 / 13; margin-top: 6%; }

.card-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--brand-tint-deep);
  aspect-ratio: 5 / 2.9;
  display: grid;
  place-items: center;
}
.editorial-card.pos-a .card-media { aspect-ratio: 5 / 3.2; }
.card-media svg {
  width: 74%;
  max-width: 330px;
  color: var(--brand);
  transition: transform 0.5s ease;
}
.editorial-card:hover .card-media svg { transform: scale(1.05); }

/* Real photo layer. It takes over the slot only once the file
   actually loads, so a missing image leaves the line
   illustration in place instead of a hole. */
.card-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--photo-filter);
  transition: transform 0.6s ease, filter 0.5s ease;
}
.editorial-card:hover .card-photo {
  transform: scale(1.04);
  filter: var(--photo-filter-hover);
}
.card-photo.is-missing { display: none; }
.card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--photo-wash);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.card-media.has-photo::after { opacity: 1; }
.editorial-card:hover .card-media.has-photo::after { opacity: 0.72; }
.card-media.has-photo svg { display: none; }
.card-media.has-photo .photo-slot { display: none; }
.photo-slot {
  position: absolute;
  left: 12px;
  bottom: 12px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--slot-bg);
  border-radius: 4px;
  padding: 5px 9px;
}
.card-body { padding: 16px 2px 0; }
.card-tag {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.card-body h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.25;
  margin: 6px 0 8px;
  text-wrap: balance;
}
.card-body p {
  font-size: 0.96rem;
  color: var(--ink-soft);
  max-width: 46ch;
  text-wrap: pretty;
}
@media (max-width: 860px) {
  .editorial-grid { grid-template-columns: 1fr; }
  .editorial-card.pos-a,
  .editorial-card.pos-b,
  .editorial-card.pos-c,
  .editorial-card.pos-d {
    grid-column: 1;
    margin: 0;
  }
}

/* ============================================================
   STORY SWITCHER — role picker plus the panel it drives.
   ============================================================ */
.switch-copy { position: sticky; top: 108px; }
.switch-copy p {
  margin-top: 18px;
  max-width: 44ch;
  color: var(--on-brand-muted);
  text-wrap: pretty;
}
.role-picker {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.role-btn {
  min-height: 46px;
  padding: 0 20px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--on-brand-edge);
  color: var(--on-brand);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.85rem;
  transition: background-color 0.2s ease, border-color 0.2s ease,
    color 0.2s ease;
}
.role-btn:hover { border-color: var(--on-brand); }
.role-btn:active { background: var(--on-brand-press); }
.role-btn[aria-pressed="true"] {
  background: var(--on-brand);
  border-color: var(--on-brand);
  color: var(--brand-deep);
}
.switch-note {
  margin-top: 24px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--on-brand-faint);
}

.story-panel {
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 3vw, 32px);
  box-shadow: var(--shadow-float);
}
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.panel-role {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--brand-deep);
}
.panel-step {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.panel-block { margin-top: 20px; }
.panel-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.panel-said {
  background: var(--brand-tint);
  border-radius: var(--radius);
  padding: 16px 18px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--brand-deep);
}
.panel-arrow {
  display: grid;
  place-items: center;
  height: 34px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
}
.panel-built {
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 16px 18px;
}
.panel-built h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 5px;
}
.panel-built p { font-size: 0.94rem; color: var(--ink-soft); }
.panel-foot {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand);
}
@media (max-width: 960px) {
  .switch-copy { position: static; }
}

/* ============================================================
   STAT ROW — the headline figures of a result.
   ============================================================ */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 26px);
  margin: clamp(26px, 4vh, 44px) 0 30px;
}
.stat .n {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
}
.stat .l {
  margin-top: 8px;
  font-size: 0.88rem;
  color: var(--ink-soft);
  max-width: 18ch;
}
@media (max-width: 560px) {
  .stat-row { grid-template-columns: 1fr; gap: 20px; }
  .stat .l { max-width: none; }
}

/* ============================================================
   LEDGER — a printed receipt, torn at the bottom edge.
   ============================================================ */
.ledger {
  background: var(--receipt-paper);
  color: var(--receipt-ink);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.7;
  padding: 30px 26px 40px;
  max-width: 400px;
  margin: 0 auto;
  box-shadow: var(--shadow-paper);
  transform: rotate(-1.2deg);
  --zz: 10px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--zz)),
    95% 100%, 90% calc(100% - var(--zz)), 85% 100%,
    80% calc(100% - var(--zz)), 75% 100%,
    70% calc(100% - var(--zz)), 65% 100%,
    60% calc(100% - var(--zz)), 55% 100%,
    50% calc(100% - var(--zz)), 45% 100%,
    40% calc(100% - var(--zz)), 35% 100%,
    30% calc(100% - var(--zz)), 25% 100%,
    20% calc(100% - var(--zz)), 15% 100%,
    10% calc(100% - var(--zz)), 5% 100%,
    0 calc(100% - var(--zz)));
}
.ledger-head {
  text-align: center;
  border-bottom: 1px dashed var(--receipt-line);
  padding-bottom: 12px;
  margin-bottom: 14px;
}
.ledger-head .l-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: var(--brand-deep);
}
.ledger-head .l-sub {
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--receipt-ink-soft);
}
.ledger-group { margin-bottom: 14px; }
.ledger-group .g-name {
  font-weight: 700;
  letter-spacing: 0.02em;
}
.ledger-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--receipt-ink-mid);
  font-variant-numeric: tabular-nums;
}
.ledger-row .roi { color: var(--accent-deep); font-weight: 700; }
.ledger-total {
  border-top: 1px dashed var(--receipt-line);
  margin-top: 12px;
  padding-top: 12px;
  font-weight: 700;
}
.ledger-total .ledger-row { color: var(--receipt-ink); }
.ledger-foot {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--receipt-line);
  text-align: center;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
}
.ledger-foot .ok {
  color: var(--brand);
  font-weight: 700;
  display: block;
  margin-bottom: 3px;
}

/* The return section pairs copy with the receipt; the receipt
   rotates, so the section clips its own overflow. */
.section-ledger { overflow: hidden; }

/* ============================================================
   TAGLINE BAND — the closing call to action.
   ============================================================ */
.tagline-band {
  margin-top: clamp(34px, 5vh, 56px);
  background: var(--brand);
  color: var(--on-brand);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 48px);
}
.tagline-band .t {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.6vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--on-brand);
  max-width: 20ch;
  margin: 0 auto;
  text-wrap: balance;
}
.tagline-band .s {
  margin: 14px auto 26px;
  max-width: 46ch;
  color: var(--on-brand-soft);
  text-wrap: pretty;
}
.band-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--brand-deep);
  color: var(--on-brand-dim);
  padding: clamp(48px, 8vh, 88px) 0 34px;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 60px);
}
.footer-brand .brand { color: var(--on-brand); }
.footer-brand .brand-name { font-size: 1.5rem; }
.footer-brand .brand-by { color: var(--brand-bright); }
.footer-brand p {
  margin-top: 14px;
  max-width: 34ch;
  font-size: 0.9rem;
  color: var(--on-brand-dim);
}
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-bright);
  margin-bottom: 14px;
}
.footer-col ul { list-style: none; }
.footer-col a {
  display: inline-block;
  padding: 5px 0;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--on-brand-soft);
  transition: color 0.2s ease;
}
.footer-col a:hover { color: var(--brand-bright); }
.footer-col a:active { color: var(--accent); }
.footer-bottom {
  margin-top: clamp(36px, 6vh, 62px);
  padding-top: 22px;
  border-top: 1px solid var(--line-on-brand);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-brand-faint);
}
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SHOP TOOLBAR — the store's own bar, under the site header.

   It is not part of the header: the header belongs to every
   public page, and a cart badge on the homepage would report on
   a store the visitor is not standing in. This bar appears only
   on shop pages and sticks below the header so the cart stays
   reachable down a long catalog.
   ============================================================ */
.shop-toolbar {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  /* Opaque, not translucent like the header above it. A product
     card scrolling underneath a blurred bar reads as a rendering
     fault, and the count sitting on it becomes unreadable. */
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.shop-toolbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.shop-toolbar__count {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.shop-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* The way back, for a shop page that is not the listing. Sized
   like the cart across from it so the bar reads as one row. */
.shop-toolbar__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-left: -8px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.shop-toolbar__back:hover {
  background: var(--brand-tint);
  color: var(--brand-deep);
}
.shop-toolbar__back-icon { width: 15px; height: 15px; }

/* ---- cart link --------------------------------------------- */
.shop-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1.5px solid var(--brand);
  border-radius: var(--radius-sm);
  color: var(--brand-deep);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.15s ease;
}
.shop-cart:hover { background: var(--brand-tint); }
.shop-cart:active { transform: scale(0.97); }
.shop-cart__icon { width: 18px; height: 18px; }
.shop-cart__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--accent);
  color: var(--on-brand);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1;
}
@media (max-width: 560px) {
  .shop-cart__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .shop-cart { padding: 0 12px; }
}

/* ============================================================
   FILTER BAR — a GET form that narrows a listing.
   ============================================================ */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-card);
}
.filter-bar__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 180px;
}
.filter-bar__field--grow { flex: 1 1 260px; }
.filter-bar__label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.filter-bar__input,
.filter-bar__select {
  min-height: 44px;
  padding: 0 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.94rem;
  transition: border-color 0.2s ease;
}
.filter-bar__input:hover,
.filter-bar__select:hover { border-color: var(--brand-bright); }
.filter-bar__input:focus,
.filter-bar__select:focus { border-color: var(--brand); }
.filter-bar__submit {
  display: flex;
  align-items: center;
  gap: 14px;
}
.filter-bar__clear {
  font-size: 0.86rem;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.filter-bar__clear:hover { color: var(--brand); }
@media (max-width: 640px) {
  .filter-bar__field,
  .filter-bar__field--grow,
  .filter-bar__submit { flex: 1 1 100%; min-width: 0; }
  .filter-bar__submit .btn { flex: 1; justify-content: center; }
}

/* ============================================================
   PRODUCT PHOTO — one product photograph, in any frame.
   ============================================================

   Written once for the three places that show a product: the
   catalog card, the detail page and a cart line's thumbnail.
   ADR-0018 and ADR-0019 each wrote this out on their own page and
   a third, hand-written copy left the `is-missing` rule behind,
   so the broken frame came back.

   The blank sits behind the photo in the markup. A photo that
   loads covers it; one that fails is marked `is-missing` by
   `site.js` and hidden here, which uncovers the mark. Marking
   without this rule is the failure mode; they live together.

   `scale-down`, not `contain` and not `cover`: contain enlarges a
   48px icon to fill the frame and shows it blurred, and cover
   slices the top off a tall bottle or a flat package shot —
   usually the label that identifies the product. scale-down never
   paints a photograph larger than it was uploaded, so a small file
   stays sharp and a large one is fitted whole. Both alternatives
   were measured against nine geometries in ADR-0018 and rejected.
   ============================================================ */
.product-photo {
  position: relative;
  display: block;
  /* Paper, not tint. Product photography is overwhelmingly shot
     against white, and a tinted frame turns every such shot into a
     visible white rectangle floating inside the frame. The tint is
     kept for the blank state below, which needs the contrast. */
  background: var(--paper);
  overflow: hidden;
}
.product-photo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: scale-down;
  /* Opaque, so the blank behind it does not show through the
     letterbox gaps a fitted photo leaves. */
  background: var(--paper);
}
/* A src that 404s, times out or points nowhere. Hiding the broken
   photo uncovers the blank behind it, so every frame shows the
   mark instead of an empty rectangle. */
.product-photo__img.is-missing { display: none; }
/* A product without a photograph gets the mark, not a broken
   frame: a grid keeps its rhythm and a card still reads. */
.product-photo__blank {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--brand-tint);
  color: var(--brand);
  opacity: 0.55;
}
.product-photo__blank svg { width: 34px; height: 34px; }
.product-photo__blank-text {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---- the card frame ---------------------------------------- */
.product-photo--card { aspect-ratio: 4 / 3; }
.product-photo--card .product-photo__img {
  padding: 12px;
  transition: transform 0.4s ease;
}
.product-card:hover .product-photo__img { transform: scale(1.03); }
/* On a phone the grid is one column, so a 4:3 photo turns every
   card into most of a screen and twelve products into a very long
   scroll. A shallower frame keeps more than one product in view. */
@media (max-width: 560px) {
  .product-photo--card { aspect-ratio: 16 / 9; }
}

/* ---- the detail frame -------------------------------------- */
.product-photo--detail {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.product-photo--detail .product-photo__img {
  padding: clamp(16px, 2.4vw, 30px);
}
.product-photo--detail .product-photo__blank { gap: 10px; }
.product-photo--detail .product-photo__blank svg {
  width: 46px;
  height: 46px;
}
.product-photo--detail .product-photo__blank-text {
  font-size: 0.66rem;
}

/* ---- the cart line thumbnail -------------------------------
   Square and small: it identifies a line a visitor already chose,
   so it only has to be recognisable beside the name. The mark
   loses its caption at this size — the words would be smaller than
   the icon they label — and keeps the icon. */
.product-photo--line {
  width: 72px;
  height: 72px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.product-photo--line .product-photo__img { padding: 6px; }
.product-photo--line .product-photo__blank svg {
  width: 26px;
  height: 26px;
}
.product-photo--line .product-photo__blank-text { display: none; }
@media (max-width: 620px) {
  .product-photo--line { width: 56px; height: 56px; }
  .product-photo--line .product-photo__blank svg {
    width: 22px;
    height: 22px;
  }
}

/* ============================================================
   PRODUCT GRID — the catalog listing.
   ============================================================ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
  list-style: none;
  margin-top: clamp(26px, 4vh, 40px);
}
.product-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.2s ease,
    border-color 0.2s ease;
}
.product-card:hover {
  border-color: var(--brand-bright);
  box-shadow: var(--shadow-card);
  transform: translateY(-3px);
}
.product-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.product-card__category {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  background: var(--slot-bg);
  backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-deep);
}
.product-card__head {
  display: block;
  padding: 16px 18px 0;
}
.product-card__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.3;
  color: var(--ink);
  /* Two lines, always. A one-word product and a long one leave
     their prices on the same line across a row, so a grid of
     cards reads as a price list rather than a ragged edge. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
.product-card__link:hover .product-card__name { color: var(--brand); }
.product-card__sku {
  display: block;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.product-card__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 12px 18px 0;
}
.product-card__amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.32rem;
  color: var(--brand-deep);
}
.product-card__currency {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.product-card__meta {
  padding: 4px 18px 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

/* The add form sits at the bottom of every card, so a row of
   cards of different copy lengths still lines its buttons up. */
.product-card__add {
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: end;
  gap: 10px;
  margin-top: auto;
  padding: 16px 18px 18px;
}
.product-card__quantity-label {
  grid-column: 1;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: -4px;
}
.product-card__quantity {
  grid-column: 1;
  width: 100%;
  min-height: 44px;
  padding: 0 10px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  transition: border-color 0.2s ease;
}
.product-card__quantity:hover { border-color: var(--brand-bright); }
.product-card__quantity:focus { border-color: var(--brand); }
.product-card__add .btn {
  grid-column: 2;
  grid-row: 2;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
}

/* ============================================================
   EMPTY STATE — a listing with nothing in it, and the way out.
   ============================================================ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  margin-top: clamp(26px, 4vh, 40px);
  padding: clamp(40px, 8vh, 76px) var(--pad-x);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--brand-tint);
}
.empty-state__mark {
  width: 44px;
  height: 44px;
  color: var(--brand);
  opacity: 0.7;
}
.empty-state__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  color: var(--brand-deep);
}
.empty-state__text {
  max-width: 44ch;
  font-size: 0.95rem;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.empty-state .btn { margin-top: 6px; }

/* ============================================================
   PAGER — previous, page position, next.
   ============================================================ */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(28px, 5vh, 48px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.pager__page {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.pager__controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pager__step {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1.5px solid var(--brand);
  border-radius: var(--radius-sm);
  color: var(--brand-deep);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.pager__step:hover { background: var(--brand-tint); }
/* An end of the run is shown, not hidden: the control keeps its
   place so the row does not shift as a visitor pages. */
.pager__step.is-off {
  border-color: var(--line);
  color: var(--ink-soft);
  opacity: 0.55;
}
.pager__page { padding: 0 6px; }
@media (max-width: 560px) {
  .pager { justify-content: center; }
  .pager__controls { width: 100%; justify-content: space-between; }
}

/* ============================================================
   SHOP PAGE SHELL — a listing page opens under the header.
   ============================================================ */
.shop-page { padding: clamp(30px, 5vh, 54px) 0 var(--section-y); }
.shop-page__head { margin-bottom: clamp(20px, 3vh, 32px); }
.shop-page__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin-top: 10px;
  color: var(--ink);
}
.shop-page__lede {
  margin-top: 12px;
  max-width: 52ch;
  font-size: 1rem;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* ============================================================
   PRODUCT DETAIL — one product, at full size.
   ============================================================

   Two columns on a wide screen: the photograph on the left, the
   panel that sells and adds on the right. On a phone they stack,
   photo first, so the thing being bought is what opens the page.
   ============================================================ */
.product-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 3vw, 44px);
  align-items: start;
  margin-top: clamp(18px, 3vh, 30px);
}
@media (min-width: 860px) {
  .product-detail { grid-template-columns: 1.05fr 1fr; }
}

/* ---- panel ------------------------------------------------- */
.product-detail__category {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
}
.product-detail__title {
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: pretty;
}
.product-detail__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 16px;
}
.product-detail__amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3vw, 2.1rem);
  color: var(--brand-deep);
}
.product-detail__currency {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.product-detail__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.product-detail__fact dt {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.product-detail__fact dd {
  margin-top: 4px;
  font-size: 0.98rem;
  color: var(--ink);
}
.product-detail__note {
  margin-top: 16px;
  max-width: 46ch;
  font-size: 0.86rem;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* The add control is the point of the page, so it gets its own
   panel rather than trailing the copy as one more paragraph. */
.product-detail__add {
  display: grid;
  grid-template-columns: 116px 1fr;
  align-items: end;
  gap: 12px;
  margin-top: 24px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-card);
}
.product-detail__quantity-label {
  grid-column: 1;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: -4px;
}
.product-detail__quantity {
  grid-column: 1;
  width: 100%;
  min-height: 48px;
  padding: 0 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.98rem;
  transition: border-color 0.2s ease;
}
.product-detail__quantity:hover { border-color: var(--brand-bright); }
.product-detail__quantity:focus { border-color: var(--brand); }
.product-detail__add .btn {
  grid-column: 2;
  grid-row: 2;
  justify-content: center;
  min-height: 48px;
}
@media (max-width: 460px) {
  .product-detail__add { grid-template-columns: 1fr; }
  .product-detail__add .btn { grid-column: 1; grid-row: auto; }
}

/* ============================================================
   CART — the lines a visitor collected, and the way on.
   ============================================================

   Two columns on a wide screen: the lines on the left, the
   summary panel with the checkout on the right. On a phone they
   stack, lines first, because the step out of the cart is only
   worth showing after what is in it.

   Nothing here paints money. The session cart holds identities
   and quantities; the amount of an order is the store's answer
   when the order is created.
   ============================================================ */
.cart {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 3vw, 40px);
  align-items: start;
  margin-top: clamp(18px, 3vh, 30px);
}
@media (min-width: 900px) {
  .cart { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}
/* An empty cart has no summary panel beside it, so the empty
   state takes the whole measure instead of leaving a column of
   nothing where the panel would have been. */
@media (min-width: 900px) {
  .cart--empty { grid-template-columns: minmax(0, 1fr); }
}

/* ---- lines ------------------------------------------------- */
.cart-lines {
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}
.cart-line {
  display: grid;
  /* The thumbnail, what the line is about, and its controls. The
     photo column is a fixed track: it identifies the line, so it
     keeps the same width whatever the name beside it does. */
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px 20px;
  padding: 18px;
}
.cart-line + .cart-line { border-top: 1px solid var(--line); }
/* The line the last change was refused for. It is marked, and it
   points at the announcement above rather than restating the
   reason next to itself. */
.cart-line--invalid {
  border-left: 4px solid var(--danger);
  background: var(--danger-tint);
  padding-left: 14px;
}
.cart-line .product-photo--line { grid-column: 1; grid-row: 1; }
.cart-line__product { grid-column: 2; min-width: 0; }
.cart-line__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.3;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.cart-line__sku {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}
.cart-line__update {
  grid-column: 3;
  grid-row: 1;
  display: grid;
  grid-template-columns: 104px auto;
  align-items: end;
  gap: 10px;
}
.cart-line__quantity-label {
  grid-column: 1;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: -4px;
}
.cart-line__quantity {
  grid-column: 1;
  width: 100%;
  min-height: 44px;
  padding: 0 10px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.94rem;
  transition: border-color 0.2s ease;
}
.cart-line__quantity:hover { border-color: var(--brand-bright); }
.cart-line__quantity:focus { border-color: var(--brand); }
.cart-line__update .btn {
  grid-column: 2;
  grid-row: 2;
  justify-content: center;
  min-height: 44px;
}
.cart-line__remove { grid-column: 2; grid-row: 2; }

/* Under ~620px the update control no longer fits beside the
   name, so the line keeps only the photo column — the thumbnail
   stays next to the name it belongs to — and the two controls
   drop below it at the full measure, where the quantity box has
   the width it needs to stay tappable. */
@media (max-width: 620px) {
  .cart-line {
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: stretch;
    gap: 12px 14px;
  }
  .cart-line .product-photo--line { grid-column: 1; grid-row: 1; }
  .cart-line__product { grid-column: 2; grid-row: 1; }
  .cart-line__update,
  .cart-line__remove {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .cart-line__update { grid-template-columns: 1fr auto; }
  .cart-line__update .btn { grid-column: 2; grid-row: 2; }
}

.cart__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

/* ---- summary panel ----------------------------------------- */
.cart-summary {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-card);
}
.cart-summary__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.06rem;
  color: var(--brand-deep);
}
.cart-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.cart-summary__label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.cart-summary__value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
}
.cart-summary__note {
  margin-top: 14px;
  font-size: 0.84rem;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.cart-summary__checkout {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}
.cart-summary__back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 6px;
  font-size: 0.86rem;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cart-summary__back:hover { color: var(--brand); }

/* ============================================================
   FORM — the kit asks for data.
   ============================================================

   Until the checkout migrated, the site kit could show, list and
   mutate but had no way to ask a visitor for anything: the only
   control in this sheet was the catalog's own filter. These
   rules are the general case of that filter, and they carry the
   two things it did not need — a message attached to one field,
   and a box a visitor must mark themselves.

   Every control is at least 44px tall, checkbox included: a
   twelve-field form on a phone is where a small target costs the
   most.
   ============================================================ */
.fieldset { border: 0; }
.fieldset + .fieldset { margin-top: clamp(22px, 3vh, 34px); }
.fieldset__legend {
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* The fields of one group. Two per row where there is room, so a
   name and a surname are read as the pair they are; one per row
   on a phone, where a half-width box stops being typable. */
.fieldset__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px 18px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* ---- one field --------------------------------------------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
/* The long ones take the full measure whatever the grid does: a
   street, a note or a direction wraps, and half a row of it is
   half a sentence. The page says which; the sheet does not name
   a field. */
.field--wide { grid-column: 1 / -1; }
.field__label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* Said, not implied. A visitor should not submit the form to
   find out which boxes they could have left alone. */
.field__optional {
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  opacity: 0.8;
}
.field__control {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.94rem;
  transition: border-color 0.2s ease;
}
.field__control:hover { border-color: var(--brand-bright); }
.field__control:focus { border-color: var(--brand); }
.field__control--long {
  min-height: 92px;
  padding: 12px;
  line-height: 1.5;
  resize: vertical;
}
/* The field the server refused. It is outlined and it points at
   its own message below, so the reason is next to the box that
   caused it rather than only at the top of the page. */
.field__control[aria-invalid="true"] { border-color: var(--danger); }
.field__error {
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--danger);
  text-wrap: pretty;
}

/* ---- the consent box --------------------------------------- */
/* A box, its sentence, and the message that refuses it. The
   sentence names two published documents by their titles and
   links them; it is not a label that can be shortened. */
.consent {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 4px 12px;
  margin-top: clamp(22px, 3vh, 34px);
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--brand-tint);
}
.consent__box {
  grid-column: 1;
  width: 22px;
  height: 22px;
  margin: 11px 0;
  accent-color: var(--brand);
  cursor: pointer;
}
.consent__label {
  grid-column: 2;
  /* Block, not flex. The sentence contains two links, and a flex
     label makes each of them a flex item: the words break into
     columns and the sentence stops being one. It reaches its
     touch height by padding instead. */
  display: block;
  min-height: 44px;
  padding: 10px 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
  cursor: pointer;
}
/* The box is drawn at 22px and reached at 44. A checkbox sized
   to a thumb is a checkbox that dominates the sentence it
   belongs to, so the label — which toggles it — claims the strip
   the box sits in instead. The two links inside the sentence sit
   above it, so naming a document still opens it. */
.consent__label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 50px;
}
.consent__label a {
  position: relative;
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.consent__label a:hover { color: var(--accent-deep); }
.consent .field__error { grid-column: 2; }

/* ============================================================
   CHECKOUT — the form, and what it is about to buy.
   ============================================================

   The same two-column shape as the cart: what the visitor is
   working on at the left, the panel that counts it at the right.
   On a phone they stack, form first — the summary is a reminder,
   and the form is what the page is for.
   ============================================================ */
.checkout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 3vw, 40px);
  align-items: start;
  margin-top: clamp(18px, 3vh, 30px);
}
@media (min-width: 900px) {
  .checkout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}
.checkout__form {
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-card);
}
.checkout__submit {
  display: flex;
  margin-top: clamp(20px, 3vh, 28px);
}
.checkout__submit .btn { flex: 1; justify-content: center; }

/* ============================================================
   ORDER RESULT — what became of an order.
   ============================================================

   One panel for the three outcomes, distinguished by the accent
   on its leading edge. The previous stylesheet already treated
   them as one rule with two modifiers while the markup was
   copied into three files; this is that rule, in the kit, with
   the markup finally matching it.

   The tones come from the approved palette and mean what the
   palette says they mean. `--brand` is the site's own green and
   carries the outcome that ended well. `--accent` is the warm
   accent the brand guide allows for highlights, and carries the
   order that needs looking at: it draws the eye without
   accusing, which is what `--danger` would do — that pair is
   reserved for a refusal a visitor caused and can correct, and
   an order held for review is neither.

   The outcome still in flight takes no accent at all. Nothing
   has happened yet, and a colored edge would be saying otherwise.
   ============================================================ */
.order-result {
  max-width: 34rem;
  padding: clamp(20px, 2.6vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-card);
}
.order-result__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.32rem, 1.05rem + 1.1vw, 1.72rem);
  line-height: 1.18;
  color: var(--brand-deep);
  text-wrap: balance;
}
/* The outcome colors the words that carry it.

   Three earlier attempts were worse. A colored rail down the left
   edge put the meaning in hue alone and read as template chrome. A
   small-caps status line with a colored dot replaced it with a
   second badge stacked under the page's own `YOUR ORDER` eyebrow —
   two labels shouting before the sentence that actually says what
   happened.

   The site already had the answer and was using it on the homepage:
   `.hero-title .accent` and `.section-title .accent` tint the words
   that matter inside a heading. So the heading says "Your order is
   confirmed" and `confirmed` is the word that carries the color.
   Nothing is added to the page; one word changes weight. */
.order-result__title .accent {
  color: var(--brand);
  font-weight: 700;
}
.order-result--attention .order-result__title .accent {
  color: var(--accent-deep);
}
/* The reference is the one thing on this page a visitor may need
   to write down or read back to somebody, so it is set apart
   from the prose and in the face that does not confuse a zero
   with an O. */
.order-result__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.order-result__label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.order-result__value {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.order-result__body {
  margin-top: 18px;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.order-result__body p + p { margin-top: 12px; }
.order-result__note {
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.order-result__action {
  margin-top: clamp(20px, 3vh, 28px);
}

/* ============================================================
   PAYMENT FORM — the card step, inside the order panel.

   The field a visitor types a card into is not ours: Square
   paints an iframe into the container below. So this block
   styles everything AROUND that frame and nothing inside it —
   a border here would frame a frame that already has one, and
   a background would show through as a seam while the SDK is
   still mounting.
   ============================================================ */
.payment-form {
  margin-top: clamp(18px, 2.4vw, 24px);
}
/* The container is reserved at its mounted height before the SDK
   answers, so the submit button does not jump down the page under
   a visitor who was already reaching for it. */
.payment-form__card {
  min-height: 90px;
}
.payment-form__submit {
  width: 100%;
  justify-content: center;
  margin-top: 18px;
}
/* The panel's own exit sits below a form that already has a
   primary action, so it reads as the quieter of the two. */
.payment-form + .order-result__note {
  margin-top: 18px;
}

/* ============================================================
   LEGAL DOCUMENT — long prose, at a readable measure.

   The kit grew from a marketing page and four store pages, so
   until now every rule it owned hung off a class: the two legal
   documents are the first content it renders that arrives as
   bare `<h2>` and `<p>`, included from a versioned view whose
   markup this stylesheet does not get to change (ADR-0012).

   That is why the element selectors below are scoped under
   `.document` rather than written against the page. A rule like
   `.wrap p` would reach the copy inside every inverted band and
   tinted section the site nests, and repaint it — the kind of
   contrast failure a screenshot reads as "slightly dim" rather
   than as a bug.
   ============================================================ */
.document {
  max-width: 68ch;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.7;
  text-wrap: pretty;
}

/* The heading of a clause sits closer to the paragraph it opens
   than to the one it follows, so the document reads as sections
   rather than as an even column of text. */
.document h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: clamp(28px, 3.4vw, 40px) 0 10px;
}

.document h2:first-child {
  margin-top: 0;
}

.document p {
  margin: 0 0 14px;
}

.document p:last-child {
  margin-bottom: 0;
}

/* The version the checkout records, stated under the title. It
   is the one line on the page a reader may need to quote back,
   so it is set in the measured face the order panel uses for
   references rather than in the body face. */
.document__version {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}