/* ==========================================================================
   style.css — Quiet Days Press landing page
   Editorial / restrained. Rules and space instead of cards and shadows.
   ========================================================================== */

/* ---------------------------- primitives ---------------------------- */

.shell {
  width: 100%;
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

@media (min-width: 48rem) {
  .shell {
    padding-inline: var(--space-10);
  }
}

.measure {
  max-width: var(--content-narrow);
}

section {
  position: relative;
}

.band {
  padding-block: clamp(var(--space-16), 9vw, var(--space-32));
  border-top: 1px solid var(--color-divider);
}

.band--flush {
  border-top: 0;
}

/* Eyebrow: letter-spaced sans, the imprint's functional voice */
.eyebrow {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}

.eyebrow--brass {
  color: var(--color-primary);
}

.rule {
  width: 3.25rem;
  height: 1px;
  border: 0;
  background: var(--color-primary);
  margin-block: var(--space-5);
  opacity: 0.7;
}

.display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.012em;
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  margin-top: var(--space-4);
}

.lede {
  font-size: var(--text-lg);
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.lede--spaced {
  margin-top: var(--space-5);
}

.prose--spaced {
  margin-top: var(--space-4);
}

.prose p + p {
  margin-top: var(--space-4);
}

.prose {
  color: var(--color-text-muted);
}

.prose strong {
  color: var(--color-text);
  font-weight: 500;
}

/* ---------------------------- links & buttons ---------------------------- */

a {
  color: inherit;
}

.link {
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-primary-quiet);
  padding-bottom: 1px;
}

.link:hover {
  border-bottom-color: var(--color-primary);
  color: var(--color-primary);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--space-4) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  min-height: 3rem;
}

.btn--primary {
  background: var(--color-text);
  color: var(--color-text-inverse);
}

.btn--primary:hover {
  background: var(--color-primary-hover);
}

[data-theme='dark'] .btn--primary:hover {
  background: var(--color-primary);
  color: #0a0a0a;
}

.btn--ghost {
  border-color: var(--color-border);
  color: var(--color-text);
  background: transparent;
}

.btn--ghost:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Non-live commerce button. Reads as a label, not a lie. */
.btn--pending {
  border-color: var(--color-border);
  color: var(--color-text-muted);
  background: transparent;
  cursor: not-allowed;
}

.btn--pending:hover {
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

.btn--pending .dot {
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  flex: none;
}

/* ---------------------------- header ---------------------------- */

.skip {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: 100;
  transform: translateY(-200%);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  text-decoration: none;
}

.skip:focus {
  transform: none;
}

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-divider);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  min-height: 4.5rem;
  padding-block: var(--space-3);
}

@media (min-width: 56rem) {
  .masthead__inner {
    flex-wrap: nowrap;
    padding-block: 0;
  }
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text);
}

.wordmark__text {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.2;
}

.wordmark__text span {
  display: block;
  color: var(--color-text-faint);
  letter-spacing: 0.12em;
  font-weight: 400;
  text-transform: none;
  font-family: var(--font-display);
  font-style: italic;
}

/* Tighten the imprint mark's tracking on the narrowest phones so it never wraps. */
@media (max-width: 26rem) {
  .wordmark__text {
    letter-spacing: 0.12em;
  }

  .wordmark__text span {
    letter-spacing: 0.06em;
  }
}

/* Primary nav. On phones it drops to a second row under the wordmark —
   no hamburger, because four links do not need one. */
.nav {
  order: 3;
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
}

.nav a {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--color-text-muted);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}

.nav a:hover {
  color: var(--color-primary);
}

/* Current page: a hairline under the link, matching the imprint rule.
   aria-current="true" marks the parent section of a child page (the Mind Field
   card page sits under Framework Cards) — same rule, quieter label. */
.nav a[aria-current='page'] {
  color: var(--color-text);
  border-bottom-color: var(--color-primary);
}

.nav a[aria-current='true'] {
  color: var(--color-text-muted);
  border-bottom-color: var(--color-primary-quiet);
}

@media (max-width: 26rem) {
  .nav {
    gap: var(--space-3);
  }

  .nav a {
    letter-spacing: 0.05em;
  }
}

/* Five links, so the second row is centred and its gaps tighten instead of
   the row overflowing. No hamburger: every destination stays visible. */
@media (max-width: 55.99rem) {
  .nav {
    justify-content: flex-start;
    gap: var(--space-3) var(--space-5);
  }
}

@media (max-width: 30rem) {
  .nav {
    gap: var(--space-2) var(--space-4);
  }

  .nav a {
    letter-spacing: 0.04em;
    font-size: 0.6875rem;
  }
}

/* Between the phone row and full desktop the labels stay on one line but the
   gaps close up first. */
@media (min-width: 56rem) {
  .nav {
    order: 0;
    width: auto;
    flex-wrap: nowrap;
    gap: var(--space-5);
    padding-top: 0;
    border-top: 0;
  }

  .nav a {
    letter-spacing: 0.08em;
  }
}

@media (min-width: 72rem) {
  .nav {
    gap: var(--space-7, 1.75rem);
  }

  .nav a {
    letter-spacing: 0.12em;
  }
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
}

.theme-toggle:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* ---------------------------- hero ---------------------------- */

.hero {
  padding-block: clamp(var(--space-12), 7vw, var(--space-24));
}

.hero__grid {
  display: grid;
  gap: clamp(var(--space-10), 6vw, var(--space-20));
  align-items: start;
}

@media (min-width: 60rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
  }
}

.hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-top: var(--space-5);
}

.hero h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--color-primary);
}

.hero__sub {
  margin-top: var(--space-6);
  color: var(--color-text-muted);
  max-width: 46ch;
}

/* Card figure — a print artefact set on the page, not a "card component" */
.card-figure {
  margin: 0;
}

.card-figure__frame {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  padding: clamp(var(--space-4), 3vw, var(--space-8));
  box-shadow: var(--shadow-lg);
}

.card-figure__frame img {
  width: 100%;
  border: 1px solid var(--color-divider);
}

.card-figure figcaption {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-10);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
}

.stat dt {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-primary);
}

.stat dd {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-top: var(--space-1);
}

/* ---------------------------- opt-in form ---------------------------- */

.optin {
  margin-top: var(--space-8);
}

.optin__row {
  display: grid;
  gap: var(--space-3);
  max-width: 32rem;
}

@media (min-width: 30rem) {
  .optin__row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}

.field label {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.optin input[type='email'] {
  width: 100%;
  min-height: 3rem;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
}

.optin input[type='email']::placeholder {
  color: var(--color-text-faint);
}

.optin input[type='email']:focus-visible {
  border-color: var(--color-primary);
}

.optin input[aria-invalid='true'] {
  border-color: var(--color-error);
}

.optin__fine {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  max-width: 46ch;
  line-height: 1.7;
}

/* Status region: error + preview-mode notice */
.form-status {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  min-height: 1.25rem;
}

.form-status:empty {
  margin-top: 0;
  min-height: 0;
}

.form-status[data-state='error'] {
  color: var(--color-error);
}

.notice {
  border-left: 2px solid var(--color-primary);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-2);
  display: grid;
  gap: var(--space-2);
  max-width: 34rem;
}

.notice p.notice__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text);
  font-weight: 600;
  line-height: 1.3;
}

.notice p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin: 0;
}

.notice code {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 0.9em;
  color: var(--color-primary);
}

/* ---------------------------- steps (how it works) ---------------------------- */

.steps {
  counter-reset: step;
  display: grid;
  gap: var(--space-10);
  margin-top: var(--space-12);
  list-style: none;
}

@media (min-width: 48rem) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-8);
  }
}

.steps li {
  counter-increment: step;
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-5);
  max-width: none;
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--color-primary);
  display: block;
  margin-bottom: var(--space-3);
}

.steps h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.steps p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* ---------------------------- framework ---------------------------- */

.framework__grid {
  display: grid;
  gap: clamp(var(--space-10), 6vw, var(--space-16));
  margin-top: var(--space-12);
}

@media (min-width: 52rem) {
  .framework__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.half__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  border-bottom: 1px solid var(--color-text);
  padding-bottom: var(--space-3);
}

.half__head h3 {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.half__head span {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-text-faint);
  font-size: var(--text-sm);
}

.qlist {
  list-style: none;
  margin-top: var(--space-2);
}

.qlist li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: baseline;
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  max-width: none;
}

.qlist .num {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-primary);
  font-size: var(--text-sm);
}

.qlist .q {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.3;
}

.qlist .note {
  grid-column: 2;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  letter-spacing: 0.04em;
  margin-top: var(--space-1);
}

.virtues {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-6);
  list-style: none;
}

.virtues li {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  max-width: none;
}

.virtues li::before {
  content: '';
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid var(--color-primary);
  margin-right: var(--space-2);
}

.pullquote {
  margin-top: clamp(var(--space-12), 6vw, var(--space-20));
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-divider);
  text-align: center;
}

.pullquote blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--color-text);
  margin-inline: auto;
  max-width: 30ch;
}

.pullquote cite {
  display: block;
  margin-top: var(--space-5);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  font-style: normal;
}

/* ---------------------------- product: Mind Field ---------------------------- */

/* Per-title accent scope. Future journals: duplicate this block with a new
   [data-product="..."] value and override only these three variables. */
[data-product='mind-field'] {
  --color-primary: #6f5d38;
  --color-primary-hover: #514328;
  --color-primary-quiet: #cfc6ac;
}

[data-theme='dark'] [data-product='mind-field'] {
  --color-primary: #b8985b;
  --color-primary-hover: #cdae72;
  --color-primary-quiet: #453a24;
}

.product__grid {
  display: grid;
  gap: clamp(var(--space-10), 6vw, var(--space-16));
  margin-top: var(--space-12);
  align-items: start;
}

@media (min-width: 60rem) {
  .product__grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  }
}

.cover {
  margin: 0;
  background: var(--color-ink-field);
  padding: clamp(var(--space-3), 2vw, var(--space-5));
  box-shadow: var(--shadow-lg);
}

.cover img {
  width: 100%;
}

.spec {
  margin-top: var(--space-8);
  border-top: 1px solid var(--color-divider);
}

.spec div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-divider);
  font-size: var(--text-sm);
}

.spec dt {
  color: var(--color-text-faint);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.spec dd {
  text-align: right;
  color: var(--color-text);
}

.feature-list {
  list-style: none;
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-3);
}

.feature-list li {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  max-width: 60ch;
}

.feature-list li::before {
  content: '·';
  color: var(--color-primary);
  font-size: 1.25em;
  line-height: 1.2;
  text-align: center;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.status-line {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  letter-spacing: 0.04em;
}

/* Spreads strip */
.spreads {
  margin-top: clamp(var(--space-12), 6vw, var(--space-16));
}

.spreads__scroller {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  padding-bottom: var(--space-4);
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.spread {
  flex: 0 0 min(88vw, 34rem);
  scroll-snap-align: start;
  margin: 0;
}

.spread button {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--color-divider);
  background: #ffffff;
}

.spread button:hover {
  border-color: var(--color-primary);
}

.spread img {
  width: 100%;
}

.spread figcaption {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  place-items: center;
  padding: var(--space-4);
  background: rgb(10 10 10 / 0.92);
}

.lightbox.is-open {
  display: grid;
}

.lightbox__figure {
  margin: 0;
  max-width: min(96vw, 68rem);
}

.lightbox__figure img {
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  background: #fff;
  border: 1px solid #333;
}

.lightbox__figure figcaption {
  margin-top: var(--space-4);
  color: #e8e2d4;
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

.lightbox__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  color: #e8e2d4;
  border: 1px solid #333;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
}

.lightbox__close:hover {
  border-color: #b8985b;
  color: #b8985b;
}

/* ---------------------------- collection ---------------------------- */

.collection {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-12);
  list-style: none;
}

@media (min-width: 48rem) {
  .collection {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.collection li {
  border-top: 1px solid var(--color-text);
  padding-top: var(--space-5);
  max-width: none;
  display: grid;
  align-content: start;
  gap: var(--space-3);
}

.collection h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
}

.collection p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin: 0;
}

.tag {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.tag::before {
  content: '';
  width: 4px;
  height: 4px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
}

.channel-note {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ---------------------------- about ---------------------------- */

.about__grid {
  display: grid;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  margin-top: var(--space-10);
}

@media (min-width: 52rem) {
  .about__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  }
}

.colophon {
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.colophon dd + dt {
  margin-top: var(--space-5);
}

.colophon dd {
  margin-top: var(--space-1);
  color: var(--color-text);
}

.colophon dt {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

/* ---------------------------- final CTA ---------------------------- */

.closer {
  background: var(--color-ink-field);
  color: #e8e2d4;
  --color-text: #e8e2d4;
  --color-text-muted: #98928a;
  --color-text-faint: #6b665e;
  --color-text-inverse: #0a0a0a;
  --color-primary: #b8985b;
  --color-primary-hover: #cdae72;
  --color-primary-quiet: #453a24;
  --color-surface: #141312;
  --color-surface-2: #141312;
  --color-divider: #262421;
  --color-border: #3a3833;
}

.closer h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  margin-top: var(--space-4);
}

.closer .btn--primary {
  background: var(--color-primary);
  color: #0a0a0a;
}

.closer .btn--primary:hover {
  background: var(--color-primary-hover);
}

/* ---------------------------- footer ---------------------------- */

.footer {
  border-top: 1px solid var(--color-divider);
  padding-block: var(--space-12);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.footer__top {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 48rem) {
  .footer__top {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
}

.footer nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
}

.footer nav a {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text-muted);
}

.footer nav a:hover {
  color: var(--color-primary);
}

.footer__base {
  margin-top: var(--space-10);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-divider);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

/* ---------------------------- reveal on scroll ---------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   MULTI-PAGE COMPONENTS
   Added when the single landing page became a connected site.
   ========================================================================== */

/* ---------------------------- page head ----------------------------
   Interior pages open with a restrained title block rather than a hero. */

.pagehead {
  padding-block: clamp(var(--space-12), 7vw, var(--space-20)) 0;
}

.pagehead h1 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-top: var(--space-5);
}

.pagehead h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--color-primary);
}

.pagehead__sub {
  margin-top: var(--space-6);
  color: var(--color-text-muted);
  max-width: 52ch;
}

/* Breadcrumb-ish back link */
.backlink {
  display: inline-flex;
  margin-bottom: var(--space-6);
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text-faint);
}

.backlink:hover {
  color: var(--color-primary);
}

.backlink::before {
  content: '\2190';
  font-size: 1.1em;
  line-height: 1;
}

/* ---------------------------- home: the three offers ----------------------------
   A ledger of what the press currently has, not a row of cards. */

.offers {
  display: grid;
  gap: var(--space-12);
  margin-top: var(--space-12);
  list-style: none;
}

@media (min-width: 52rem) {
  .offers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-10);
  }
}

.offer {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  border-top: 1px solid var(--color-text);
  padding-top: var(--space-5);
  max-width: none;
}

/* All three plates share one aspect ratio so the headings below them sit on
   the same baseline, even though the three products are different shapes. */
.offer__figure {
  margin: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  padding: var(--space-4);
  order: -1;
  aspect-ratio: 1 / 1.25;
  overflow: hidden;
}

.offer__figure--ink {
  background: var(--color-ink-field);
  border-color: transparent;
  padding: var(--space-3);
}

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

.offer h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
}

.offer p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin: 0;
}

.offer__link {
  justify-self: start;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-primary);
  padding-bottom: 2px;
}

.offer__link:hover {
  color: var(--color-primary);
}

/* ---------------------------- home hero ---------------------------- */

.homehero {
  padding-block: clamp(var(--space-16), 9vw, var(--space-32)) clamp(var(--space-12), 6vw, var(--space-20));
}

.homehero h1 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-top: var(--space-5);
  max-width: 26ch;
}

.homehero h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--color-primary);
}

.homehero__sub {
  margin-top: var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  font-family: var(--font-display);
  font-style: italic;
  line-height: 1.5;
  max-width: 44ch;
}

.homehero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-8);
}

/* ---------------------------- ascend accent scope ----------------------------
   Mind Field is black + brass. One Percent is indigo + a red seal. Ascend is
   forest + brass: the colour of the Volume One wrap, warmed by the same brass
   the covers are drawn in. Volume Two's cover is a dawn, so the scope also
   carries a second warm tone used only for Volume Two's own markers. */

[data-product='ascend'] {
  --color-primary: #2f4034;
  --color-primary-hover: #22301f;
  --color-primary-active: #1a2519;
  --color-primary-quiet: #c3cec4;
  --color-brass: #8a6f3d;
  --color-dawn: #b06a4a;
}

/* The closer band is always an ink field, so it carries its own palette.
   Scope the product accent into it too, or Ascend would borrow the default
   brass and the two volumes would lose their thread. */
[data-product='ascend'] .closer {
  --color-primary: #9db8a2;
  --color-primary-hover: #bcd0c0;
  --color-primary-quiet: #2a332b;
  --color-brass: #c3a367;
  --color-dawn: #d99271;
}

[data-theme='dark'] [data-product='ascend'] {
  --color-primary: #9db8a2;
  --color-primary-hover: #bcd0c0;
  --color-primary-active: #d3e2d6;
  --color-primary-quiet: #2a332b;
  --color-brass: #c3a367;
  --color-dawn: #d99271;
}

/* ---------------------------- page previews (sheet grid) ----------------------------
   Interior pages are single sheets, so they are presented as sheets:
   paper on the page background, no frames or shadows stacked on top. */

.sheets {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-12);
  list-style: none;
}

@media (min-width: 36rem) {
  .sheets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 62rem) {
  .sheets--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.sheet {
  margin: 0;
  max-width: none;
}

.sheet button,
.sheet .sheet__plate {
  display: block;
  width: 100%;
  padding: 0;
  background: #ffffff;
  border: 1px solid var(--color-border);
}

.sheet button:hover {
  border-color: var(--color-primary);
}

.sheet img {
  width: 100%;
}

.sheet figcaption {
  margin-top: var(--space-3);
  display: grid;
  gap: var(--space-1);
}

.sheet__label {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text);
}

.sheet__note {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  letter-spacing: 0.02em;
}

/* Compact gallery strip for the remaining pages */
.gallery {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  margin-top: var(--space-8);
  padding-bottom: var(--space-4);
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.gallery .sheet {
  flex: 0 0 min(62vw, 15rem);
  scroll-snap-align: start;
}

/* ---------------------------- format / fact table ---------------------------- */

.facts {
  margin-top: var(--space-10);
  border-top: 1px solid var(--color-divider);
}

.facts div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}

@media (min-width: 34rem) {
  .facts div {
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: var(--space-4);
    align-items: baseline;
  }
}

.facts dt {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.facts dd {
  font-size: var(--text-sm);
  color: var(--color-text);
}

/* ---------------------------- buy options (non-live editions) ---------------------------- */

.editions {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-10);
  list-style: none;
}

@media (min-width: 40rem) {
  .editions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.edition {
  border-top: 1px solid var(--color-text);
  padding-top: var(--space-5);
  display: grid;
  align-content: start;
  gap: var(--space-3);
  max-width: none;
}

.edition__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
}

.edition__price {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.edition p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.edition .btn {
  justify-self: start;
  margin-top: var(--space-2);
}

/* ---------------------------- audience ---------------------------- */

.audience {
  list-style: none;
  margin-top: var(--space-8);
  display: grid;
  gap: 0;
  border-top: 1px solid var(--color-divider);
}

.audience li {
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  max-width: none;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: baseline;
}

.audience .num {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-primary);
}

.audience strong {
  color: var(--color-text);
  font-weight: 500;
}

/* ---------------------------- cross links (page footers) ---------------------------- */

.crosslinks {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-10);
  list-style: none;
}

@media (min-width: 44rem) {
  .crosslinks {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  }
}

.crosslinks li {
  max-width: none;
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-4);
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.crosslinks a {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  text-decoration: none;
  color: var(--color-text);
}

.crosslinks a:hover {
  color: var(--color-primary);
}

.crosslinks p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* ---------------------------- about ---------------------------- */

.principles {
  list-style: none;
  counter-reset: principle;
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-12);
}

@media (min-width: 52rem) {
  .principles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-10) var(--space-16);
  }
}

.principles li {
  counter-increment: principle;
  max-width: none;
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-5);
}

.principles li::before {
  content: counter(principle, decimal-leading-zero);
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-primary);
  display: block;
  margin-bottom: var(--space-3);
}

.principles h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.principles p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* ---------------------------- thank-you page ---------------------------- */

.dev-banner {
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-3);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.dev-banner strong {
  color: var(--color-primary);
  font-weight: 500;
}

.inbox {
  list-style: none;
  margin-top: var(--space-10);
  border-top: 1px solid var(--color-divider);
}

.inbox li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  max-width: none;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  align-items: baseline;
}

.inbox .num {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-primary);
}

.inbox strong {
  color: var(--color-text);
  font-weight: 500;
}

/* ---------------------------- misc ---------------------------- */

.section-title--tight {
  max-width: 34ch;
}

.band--quiet {
  background: var(--color-surface-2);
}

.inline-note {
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ==========================================================================
   ONE PERCENT + FRAMEWORK CARD HUB
   Added when Volume II joined the catalogue.
   ========================================================================== */

/* ---------------------------- product: One Percent ----------------------------
   Mind Field is black and brass. Ascend is forest and brass. One Percent
   is the indigo cover with its red square-in-square seal, so it gets an indigo
   accent and a seal colour used only for small marks. */

[data-product='one-percent'] {
  --color-primary: #2e3a63;
  --color-primary-hover: #1b2445;
  --color-primary-active: #141b33;
  --color-primary-quiet: #c3c8d8;
  --color-seal: #a8341f;
}

/* The closer band is always an ink field and carries its own palette. */
[data-product='one-percent'] .closer {
  --color-primary: #93a2cf;
  --color-primary-hover: #b1bde0;
  --color-primary-quiet: #232a41;
  --color-seal: #cf5b43;
}

[data-theme='dark'] [data-product='one-percent'] {
  --color-primary: #93a2cf;
  --color-primary-hover: #b1bde0;
  --color-primary-active: #ccd4ec;
  --color-primary-quiet: #232a41;
  --color-seal: #cf5b43;
}

/* The cover plate: the actual indigo of the printed cover. */
.offer__figure--indigo {
  background: #1b2445;
  border-color: #1b2445;
}

/* The seal — a 2px square inside a hairline square, the cover mark redrawn in
   CSS at eyebrow scale. Decorative only; never carries meaning alone. */
.seal {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid var(--color-seal, var(--color-primary));
  padding: 1px;
  margin-right: var(--space-2);
  vertical-align: 0.02em;
}

.seal::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-seal, var(--color-primary));
}

/* ---------------------------- home: catalogue groups ----------------------------
   The catalogue is read as three groups, not five loose cards. */

.catgroup {
  margin-top: var(--space-16);
}

.catgroup:first-of-type {
  margin-top: var(--space-12);
}

.catgroup__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  border-bottom: 1px solid var(--color-text);
  padding-bottom: var(--space-3);
}

.catgroup__head h3 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text);
}

.catgroup__count {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  letter-spacing: 0.04em;
  margin-left: auto;
  text-align: right;
}

/* Inside a group the offers sit in their own grid, and the ledger rule moves
   up to the group head. */
.catgroup .offers {
  margin-top: var(--space-8);
}

.catgroup .offer {
  border-top: 0;
  padding-top: 0;
}

@media (min-width: 52rem) {
  .catgroup .offers--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 46rem;
  }

  .catgroup .offers--1 {
    grid-template-columns: minmax(0, 26rem);
  }

  /* The cards entry carries two plates, so it gets the width of both journals. */
  .catgroup .offers--1.offers--wide {
    grid-template-columns: minmax(0, 46rem);
  }
}

/* Two card fronts in one plate, side by side, for the framework-cards entry.
   The two cards are different shapes — one portrait, one landscape — so each
   sits in an equal square cell and is contained rather than cropped. */
.offer__figure--duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: center;
  aspect-ratio: auto;
  padding: var(--space-5);
}

.offer__figure--duo img {
  width: 100%;
  height: auto;
  border: 1px solid var(--color-divider);
}

/* Three cards, two shapes. The portrait Stoic card holds the left column; the
   two landscape cards stack down the right so nothing is orphaned. */
.offer__figure--trio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--space-4);
  align-items: start;
  aspect-ratio: auto;
  padding: var(--space-5);
}

.offer__figure--trio img {
  width: 100%;
  height: auto;
  border: 1px solid var(--color-divider);
}

.offer__figure--trio img:first-child {
  grid-row: span 2;
  align-self: center;
}

@media (max-width: 33.99rem) {
  .offer__figure--trio {
    grid-template-columns: minmax(0, 1fr);
  }

  .offer__figure--trio img:first-child {
    grid-row: auto;
  }
}

/* ---------------------------- framework-card hub ---------------------------- */

.cards {
  display: grid;
  gap: var(--space-12);
  margin-top: var(--space-12);
  list-style: none;
}

@media (min-width: 54rem) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-10);
  }
}

.cardoffer {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  border-top: 1px solid var(--color-text);
  padding-top: var(--space-5);
}

.cardoffer__figure {
  order: -1;
  margin: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  padding: var(--space-5);
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 0.82;
  overflow: hidden;
}

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

.cardoffer h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
}

.cardoffer p {
  color: var(--color-text-muted);
}

.cardoffer__spec {
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

/* ---------------------------- the daily ritual (three fields) ---------------------------- */

.ritual {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-10);
  list-style: none;
  counter-reset: ritual;
}

@media (min-width: 48rem) {
  .ritual {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-8);
  }
}

.ritual li {
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-4);
  max-width: none;
}

.ritual dfn {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: normal;
  font-weight: 600;
  color: var(--color-text);
}

.ritual p {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* ---------------------------- the two card faces ---------------------------- */

.faces {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-8);
  list-style: none;
}

@media (min-width: 40rem) {
  .faces {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.faces figure {
  margin: 0;
  max-width: none;
}

.faces button {
  display: block;
  width: 100%;
  padding: 0;
  background: #ffffff;
  border: 1px solid var(--color-border);
}

.faces button:hover {
  border-color: var(--color-primary);
}

.faces img {
  width: 100%;
  height: auto;
}

.faces figcaption {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

/* A card funnel sitting inside a page rather than at the end of it. */
.cardfunnel__grid {
  display: grid;
  gap: clamp(var(--space-8), 5vw, var(--space-12));
  margin-top: var(--space-8);
  align-items: start;
}

@media (min-width: 58rem) {
  .cardfunnel__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }
}

/* ---------------------------- the language table ---------------------------- */

.glossary {
  margin-top: var(--space-10);
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 44rem) {
  .glossary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-8);
  }
}

.glossary div {
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-4);
}

.glossary dt {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-primary);
}

.glossary dd {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.glossary dd em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-text);
}

/* A link that closes a definition gets air above it, so it reads as an action
   rather than as the last words of the sentence. */
.facts dd .link {
  display: inline-block;
  margin-top: var(--space-2);
}

/* ==========================================================================
   ASCEND COMPONENTS
   Added for the two-volume Ascend series. Three pieces: a series block that
   lets the homepage catalogue read the two volumes as one product; an arc
   strip that draws the hundred and twenty days; and a score strip that shows
   the shared 0-10 sabotage scale as it is actually printed.
   ========================================================================== */

/* ---------------------------- series block (homepage catalogue) ----------------------------
   Two volumes joined by a rule, so the pair never reads as two unrelated
   books sitting next to each other. */

.series {
  margin-top: var(--space-12);
  border-top: 1px solid var(--color-text);
  padding-top: var(--space-6);
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 58rem) {
  .series {
    grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
    gap: var(--space-12);
    align-items: start;
  }
}

.series__head {
  display: grid;
  align-content: start;
  gap: var(--space-3);
}

.series__head h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.1;
}

.series__head p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin: 0;
  max-width: 34rem;
}

.series__volumes {
  display: grid;
  gap: var(--space-8);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 34rem) {
  .series__volumes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.series__volumes li {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  max-width: none;
}

.series__volumes figure {
  margin: 0 0 var(--space-2);
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  aspect-ratio: 800 / 1306;
}

.series__volumes img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.series__volumes h4 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.2;
}

.series__volumes p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin: 0;
}

.series__spec {
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

/* ---------------------------- the arc (120 days, in two halves) ----------------------------
   A horizontal reading of the series: sixty days down, sixty days up, with
   the sabotage score running underneath both. */

.arc {
  margin-top: var(--space-12);
  display: grid;
  gap: var(--space-6);
  list-style: none;
  padding: 0;
  counter-reset: arc;
}

@media (min-width: 46rem) {
  .arc {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-10);
  }
}

.arc li {
  max-width: none;
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 2px solid var(--color-primary);
  position: relative;
}

/* The second half sits a little lower on wide screens: the shape of a climb
   rather than two equal boxes. */
@media (min-width: 46rem) {
  .arc li + li {
    margin-top: calc(var(--space-8) * -1);
  }
}

.arc__days {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.arc h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
}

.arc p {
  color: var(--color-text-muted);
  margin: 0;
}

.arc__pair {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
  font-size: var(--text-sm);
}

.arc__pair div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: baseline;
}

.arc__pair dt {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.arc__pair dd {
  margin: 0;
  color: var(--color-text-muted);
}

/* ---------------------------- sabotage score strip ----------------------------
   The 0-10 scale as it is printed in both volumes: eleven marks, the two ends
   labelled, nothing in between. */

.scorebar {
  margin-top: var(--space-10);
  border: 1px solid var(--color-divider);
  background: var(--color-surface);
  padding: var(--space-6) var(--space-5);
}

.scorebar__scale {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-2);
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
}

.scorebar__scale li {
  flex: 1 1 0;
  text-align: center;
  max-width: none;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-text-faint);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-primary-quiet);
  position: relative;
}

/* A tick above each number, taller at the two ends, the way the page prints it. */
.scorebar__scale li::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1px;
  height: var(--space-2);
  background: var(--color-primary-quiet);
}

.scorebar__scale li:first-child::after,
.scorebar__scale li:last-child::after {
  height: var(--space-4);
  background: var(--color-primary);
}

.scorebar__ends {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.scorebar__ends span:last-child {
  text-align: right;
}

.scorebar__note {
  margin: var(--space-5) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 44rem;
}

/* ---------------------------- volume heading (product page) ----------------------------
   Marks which of the two volumes a section belongs to without shouting. */

.volhead {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

.volhead::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-primary-quiet);
}

/* Volume Two's cover is a dawn rather than a forest, so its marker borrows the
   warm tone from the accent scope. */
.volhead--two {
  color: var(--color-dawn, var(--color-primary));
}

/* Ascend's covers are drawn in brass on forest. Forest carries the structure —
   rules, ticks, links — and brass is kept for the eyebrows that mark the free
   card and the release, so the two tones do the same work here as on the wrap. */
[data-product='ascend'] .eyebrow--brass {
  color: var(--color-brass);
}

/* ---------------------------- three card families ----------------------------
   The hub carried two cards; with Ascend it carries three. Two up stays the
   readable maximum for a landscape card, so the third takes the full width of
   the row and shows both of its faces. */

@media (min-width: 54rem) {
  .cards--3 > .cardoffer--wide {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    column-gap: var(--space-10);
    align-items: start;
  }

  .cards--3 > .cardoffer--wide > .cardoffer__faces {
    order: -1;
    grid-row: span 5;
  }
}

.cardoffer__faces {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.cardoffer__faces li {
  max-width: none;
}

.cardoffer__faces figure {
  margin: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  padding: var(--space-3);
}

.cardoffer__faces img {
  display: block;
  width: 100%;
  height: auto;
}

.cardoffer__faces figcaption {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}