/* Faceless Author — local prototype styles. Colors, fonts and fog timing come from tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1.5rem; }
body {
  margin: 0;
  color: var(--fa-text);
  background: var(--fa-bg);
  font-family: var(--fa-ui);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, fieldset, legend { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }

h1, h2, h3, .h3, .editorial-copy, .nav-link, .btn, .price { font-family: var(--fa-display); }
h1 { font-size: clamp(3.25rem, 7vw, 6rem); line-height: 0.96; font-weight: 300; letter-spacing: -0.025em; }
h2 { font-size: clamp(2.5rem, 4.5vw, 4rem); line-height: 1.02; font-weight: 400; letter-spacing: -0.015em; }
h3, .h3 { font-size: clamp(1.875rem, 3vw, 2.75rem); line-height: 1.1; font-weight: 400; letter-spacing: 0; }
.editorial-copy { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.35; font-weight: 400; }
.eyebrow { font: 600 0.75rem/1.4 var(--fa-ui); letter-spacing: 0.22em; text-transform: uppercase; color: var(--fa-ivory); }
.muted { color: var(--fa-text-muted); }

.wrap { width: min(100% - 2 * var(--fa-gutter), var(--fa-content-width)); margin-inline: auto; position: relative; z-index: 1; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: 0.75rem 1rem; background: var(--fa-ivory); color: var(--fa-bg); font-weight: 600; }
.skip-link:focus { top: 1rem; }

:is(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--fa-focus); outline-offset: 3px; }

.rule { display: block; width: 4.5rem; height: 2px; background: var(--fa-burgundy); }
.eyebrow--lined { display: flex; align-items: center; gap: 1rem; white-space: nowrap; width: 100%; }
.eyebrow--lined::after { content: ''; flex: 0 1 8rem; height: 1px; background: var(--fa-line); }

/* ── Buttons and links ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0.7rem 1.75rem;
  border: 1px solid var(--fa-ivory); border-radius: var(--fa-radius);
  background: transparent; color: var(--fa-ivory);
  font-size: 1.25rem; line-height: 1.1; font-weight: 500; text-decoration: none; text-align: center;
  cursor: pointer; transition: background-color 0.2s, border-color 0.2s;
}
.btn--primary { background: var(--fa-burgundy); border-color: var(--fa-burgundy); }
.btn--primary:hover { background: var(--fa-burgundy-hover); border-color: var(--fa-burgundy-hover); }
.btn--secondary:hover { background: rgba(216, 197, 178, 0.1); }
.btn--small { min-height: 2.75rem; padding-inline: 1.25rem; font-size: 1.125rem; }
.btn--block { width: 100%; }
.btn:disabled { cursor: not-allowed; border-style: dashed; border-color: var(--fa-taupe); background: transparent; color: var(--fa-taupe); }
.actions { display: flex; flex-wrap: wrap; gap: 0.875rem; }
.text-link { text-decoration: underline; text-decoration-color: var(--fa-taupe); text-underline-offset: 0.3em; text-decoration-thickness: 1px; }
.text-link:hover { text-decoration-color: var(--fa-ivory); }
.link-button { padding: 0.5rem 0; border: 0; background: none; cursor: pointer; text-decoration: underline; text-decoration-color: var(--fa-taupe); text-underline-offset: 0.3em; }
.link-button:hover { text-decoration-color: var(--fa-ivory); }

/* ── Review-only markers ── */
.review-note {
  max-width: 36rem; padding: 0.6rem 0.8rem;
  border: 1px dashed rgba(216, 197, 178, 0.5); background: rgba(19, 18, 17, 0.88);
  color: var(--fa-ivory); font: 400 0.875rem/1.5 var(--fa-ui); letter-spacing: 0; text-transform: none; text-align: left;
}
.review-note__tag {
  display: inline-block; margin-right: 0.35rem; padding: 0.05rem 0.4rem;
  background: var(--fa-ivory); color: var(--fa-bg);
  font: 600 0.6875rem/1.5 var(--fa-ui); letter-spacing: 0.12em; text-transform: uppercase; vertical-align: 0.05em;
}
html[data-notes='off'] .review-note { display: none; }

.proto-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.25rem 1.25rem;
  padding: 0.4rem var(--fa-gutter);
  background: var(--fa-surface); border-bottom: 1px solid var(--fa-line-soft);
  font-size: 0.8125rem; line-height: 1.4; text-align: center;
  position: relative; z-index: 20;
}
.proto-bar__toggle { padding: 0.2rem 0.6rem; border: 1px solid var(--fa-line); background: none; cursor: pointer; font-size: 0.75rem; }
.proto-bar__toggle:hover { border-color: var(--fa-ivory); }

/* ── Header ── */
.site-header { position: relative; z-index: 10; height: var(--fa-header-h); background: var(--fa-bg); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 100%; }
.site-header__logo { display: block; flex: none; }
.site-header__logo img { width: clamp(11rem, 20vw, 16.5rem); }
.site-nav ul { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.75rem); }
.nav-link { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 1.1875rem; line-height: 1.2; font-weight: 500; letter-spacing: 0.02em; text-decoration: none; border-bottom: 1px solid transparent; }
.nav-link:hover, .nav-link[aria-current='page'] { border-bottom-color: var(--fa-ivory); }
.cart-count { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; margin-left: 0.45rem; padding-inline: 0.35rem; border: 1px solid var(--fa-line); font: 600 0.8125rem/1 var(--fa-ui); }
.cart-count[data-filled] { background: var(--fa-burgundy); border-color: var(--fa-burgundy); }
.nav-toggle { display: none; align-items: center; gap: 0.6rem; min-height: 2.75rem; padding: 0.4rem 0.9rem; border: 1px solid var(--fa-line); background: var(--fa-bg); cursor: pointer; font: 500 1.125rem/1 var(--fa-display); }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { display: block; width: 1.1rem; height: 1px; background: var(--fa-ivory); }
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ''; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -5px; }
.nav-toggle__bars::after { top: 5px; }

@media (min-width: 60rem) {
  /* Home: the header sits over the dark upper-left of the hero art. */
  .page-home .site-header { background: transparent; }
  .page-home .hero { margin-top: calc(-1 * var(--fa-header-h)); padding-top: var(--fa-header-h); }
}
@media (max-width: 59.99rem) {
  .js .nav-toggle { display: inline-flex; }
  .js .site-nav { display: none; position: absolute; inset: 100% 0 auto 0; padding: 0.5rem var(--fa-gutter) 1.25rem; background: var(--fa-bg); border-bottom: 1px solid var(--fa-line); }
  .js .site-nav[data-open] { display: block; }
  .js .site-nav ul { display: block; }
  .js .site-nav .nav-link { display: flex; min-height: 3.25rem; font-size: 1.375rem; border-bottom: 1px solid var(--fa-line-soft); }
  html:not(.js) .site-header { height: auto; padding-block: 0.75rem; }
  html:not(.js) .site-header__inner { flex-wrap: wrap; }
  html:not(.js) .site-nav ul { flex-wrap: wrap; gap: 0.25rem 1.25rem; }
}

/* ── Fog: static base + one barely-moving layer. Books, logo, text and the rose never move. ── */
.fog { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); }
.fog__base, .fog__drift { position: absolute; background-repeat: no-repeat; background-position: center bottom; background-size: max(100%, 82rem) auto; }
.fog__base { inset: 0; }
.fog__drift { inset: -12px; opacity: 0.55; will-change: transform, opacity; animation: fog-drift var(--fa-fog-cycle) ease-in-out infinite; animation-play-state: var(--fa-fog-play); }
.fog__drift--a { background-image: url('../img/fog/fog-drift-a.webp'); }
.fog__drift--b { background-image: url('../img/fog/fog-drift-b.webp'); animation-duration: calc(var(--fa-fog-cycle) + 5s); animation-delay: -11s; animation-direction: reverse; }
.fog__base--shelf-home { background-image: url('../img/fog/fog-shelf-home.webp'); }
.fog__base--shelf-library { background-image: url('../img/fog/fog-shelf-library.webp'); }
.fog__base--stage-product { background-image: url('../img/fog/fog-stage-product.webp'); }
.fog__base--band { background-image: url('../img/fog/fog-band.webp'); }
.fog--quiet { opacity: 0.55; }
.fog--flip { transform: scaleX(-1); }
@keyframes fog-drift {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.5; }
  50% { transform: translate3d(var(--fa-fog-shift-x), var(--fa-fog-shift-y), 0); opacity: 0.62; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fog__drift { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* ── Hero (Home) ── */
.hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: clamp(34rem, 80vh, 46rem); border-bottom: 1px solid var(--fa-line-soft); }
.hero__art img { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: 72% 48%; }
.hero__shade { position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg, rgba(4, 5, 5, 0.9) 0%, rgba(4, 5, 5, 0) 26%),
    linear-gradient(0deg, rgba(4, 5, 5, 0.85) 0%, rgba(4, 5, 5, 0) 22%),
    linear-gradient(90deg, rgba(4, 5, 5, 0.86) 0%, rgba(4, 5, 5, 0.62) 34%, rgba(4, 5, 5, 0) 60%); }
/* Faint moving fog along the lower-left only, masked well clear of the rose. */
.fog--hero { z-index: -1; top: 55%;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 22%, transparent 46%); mask-image: linear-gradient(90deg, #000 0%, #000 22%, transparent 46%); }
.hero__inner { display: grid; gap: 1.5rem; justify-items: start; padding-block: 4rem; }
.hero__inner h1 { max-width: 12ch; text-shadow: 0 2px 24px rgba(4, 5, 5, 0.7); }
@media (max-width: 47.99rem) {
  .hero { display: block; min-height: 0; }
  .hero__art img { position: relative; height: 19rem; object-position: 84% 45%; }
  .hero__shade { height: 19rem; inset: 0 0 auto 0; background: linear-gradient(180deg, rgba(4, 5, 5, 0.35) 0%, rgba(4, 5, 5, 0) 30%, rgba(4, 5, 5, 0) 55%, var(--fa-bg) 100%); }
  .fog--hero { display: none; }
  .hero__inner { margin-top: -3.5rem; padding-block: 0 3.5rem; }
}

/* ── Section heads ── */
.section-head { display: grid; gap: 1rem; justify-items: center; text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head--left { justify-items: start; text-align: left; }
.page-title { font-size: clamp(1rem, 1.2vw, 1.125rem); font-family: var(--fa-ui); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; line-height: 1.4; color: var(--fa-taupe); }

/* ── Book shelf: one fog scene behind every book in the row ── */
.shelf { position: relative; isolation: isolate; padding-block: clamp(4rem, 8vw, 6.5rem) clamp(3.5rem, 6vw, 5rem); border-bottom: 1px solid var(--fa-line-soft); }
.fog--shelf { bottom: 6rem; }
.shelf__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.shelf__row--pair { grid-template-columns: repeat(2, minmax(0, 24rem)); justify-content: center; gap: clamp(2rem, 8vw, 7rem); }
.shelf__item { display: grid; justify-items: center; text-align: center; }
.shelf__cover { display: flex; align-items: flex-end; justify-content: center; }
/* Book: flattened cover turned slightly, thin page edge on the right. Sized by --bk-h. */
.bk { --bk-h: min(30rem, 62vh); display: block; flex: none; width: min(100%, calc(var(--bk-h) * 2 / 3)); perspective: 110rem; filter: drop-shadow(0 1.75rem 1.5rem rgba(0, 0, 0, 0.7)); }
.bk__body { position: relative; display: block; aspect-ratio: 2 / 3; transform-style: preserve-3d; transform: rotateY(-17deg); }
.bk__cover { display: block; width: 100%; height: 100%; object-fit: cover; }
.bk__body::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 2.5%, rgba(255, 255, 255, 0.07) 3.6%, rgba(0, 0, 0, 0) 6.5%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0.22) 100%); }
.bk__pages { position: absolute; top: 0.5%; bottom: 0.5%; left: 100%; width: 6.5%; transform-origin: left center; transform: rotateY(90deg);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0.3)), repeating-linear-gradient(90deg, #b3a999 0 1px, #8f8678 1px 2.5px); }
.shelf__caption { display: grid; gap: 0.5rem; justify-items: center; padding-top: 1.75rem; }
.shelf__caption .eyebrow { font-size: 0.6875rem; }
.shelf__series { color: var(--fa-ivory); font: 400 1.25rem/1.3 var(--fa-display); }
.shelf__price { font: 500 1.5rem/1.2 var(--fa-display); }
.shelf__caption .btn, .shelf__caption .text-link { margin-top: 0.5rem; }
.shelf__caption .text-link { display: inline-flex; align-items: center; min-height: 2.75rem; }
@media (max-width: 47.99rem) {
  .shelf__row, .shelf__row--pair { grid-template-columns: 1fr; gap: 3.5rem; }
  .bk { --bk-h: 24rem; }
  .fog__base, .fog__drift { background-size: 52rem auto; }
}

/* ── Strips ── */
.strip { padding-block: clamp(3rem, 6vw, 4.5rem); border-bottom: 1px solid var(--fa-line-soft); }
.strip__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.strip__inner > div { display: grid; gap: 0.75rem; max-width: 40rem; }
.strip--teaser { background: var(--fa-surface); }

/* ── About ── */
.about { padding-block: clamp(4rem, 8vw, 6.5rem); border-bottom: 1px solid var(--fa-line-soft); }
.about__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 2rem clamp(2rem, 6vw, 6rem); align-items: start; }
.about__inner header { display: grid; gap: 1rem; }
@media (max-width: 47.99rem) { .about__inner { grid-template-columns: 1fr; } }

/* ── Newsletter ── */
.newsletter { position: relative; isolation: isolate; padding-block: clamp(4rem, 8vw, 6rem); text-align: center; }
.newsletter__inner { display: grid; gap: 1rem; justify-items: center; }
.newsletter__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem; align-items: end; width: min(100%, 36rem); margin-top: 1rem; text-align: left; }
.newsletter__hint, .newsletter__form .form-status { grid-column: 1 / -1; }
.newsletter__hint { color: var(--fa-ivory); font-size: 0.875rem; }
@media (max-width: 30rem) { .newsletter__form { grid-template-columns: 1fr; } }

.field { display: grid; gap: 0.4rem; }
.field label, .options legend { font: 600 0.9375rem/1.4 var(--fa-ui); }
.field input { width: 100%; min-height: 3rem; padding: 0.6rem 0.9rem; border: 1px solid var(--fa-line); border-radius: 0; background: rgba(4, 5, 5, 0.85); }
.field input:hover { border-color: var(--fa-taupe); }
.form-status { padding: 0.7rem 0.9rem; border-left: 2px solid var(--fa-ivory); background: var(--fa-surface); font-size: 0.9375rem; }
.form-status[data-kind='error'] { border-left-style: dashed; }

/* ── Library feature ── */
.feature { position: relative; isolation: isolate; padding-block: clamp(2.5rem, 5vw, 4rem) clamp(4rem, 7vw, 6rem); border-bottom: 1px solid var(--fa-line-soft); }
.feature__inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 2rem clamp(2rem, 5vw, 5rem); align-items: center; }
.feature__text { display: grid; gap: 1.1rem; justify-items: start; }
.feature__text .page-title { margin-bottom: clamp(1rem, 3vw, 2.5rem); }
.feature__text h2 { font-size: clamp(3rem, 6vw, 5.25rem); font-weight: 300; letter-spacing: -0.02em; }
.feature__cover { display: flex; justify-content: center; }
.feature__cover .bk { --bk-h: min(36rem, 70vh); }
.status { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; }
.status__dot { width: 0.5rem; height: 0.5rem; background: var(--fa-ivory); border-radius: 50%; }
@media (max-width: 47.99rem) {
  .feature__inner { grid-template-columns: 1fr; }
  .feature__cover .bk { --bk-h: 26rem; }
}

/* ── Shop list ── */
.shop { padding-block: clamp(4rem, 8vw, 6rem); border-bottom: 1px solid var(--fa-line-soft); }
.shop-list { border-top: 1px solid var(--fa-line); }
.shop-list__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 1rem 2rem; align-items: center; padding-block: 1.5rem; border-bottom: 1px solid var(--fa-line); }
.shop-list__title { font-size: clamp(1.625rem, 2.4vw, 2rem); }
.shop-list__title a { text-decoration: none; }
.shop-list__title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.shop-list__detail { margin-top: 0.3rem; color: var(--fa-taupe); font-size: 0.9375rem; }
.shop-list__price { font: 500 1.75rem/1 var(--fa-display); }
@media (max-width: 40rem) {
  .shop-list__row { grid-template-columns: 1fr auto; }
  .shop-list__row > div { grid-column: 1 / -1; }
}

/* ── Product pages ── */
.product { position: relative; isolation: isolate; padding-block: 1.5rem clamp(4rem, 7vw, 6rem); border-bottom: 1px solid var(--fa-line-soft); }
.breadcrumb { margin-bottom: clamp(1.5rem, 4vw, 3rem); font: 500 1.0625rem/1.4 var(--fa-display); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; }
.breadcrumb li + li::before { content: '/'; margin-right: 0.75rem; color: var(--fa-taupe); }
.breadcrumb a { display: inline-block; padding-block: 0.5rem; color: var(--fa-taupe); text-decoration: none; }
.breadcrumb a:hover { color: var(--fa-ivory); text-decoration: underline; text-underline-offset: 0.25em; }
.breadcrumb [aria-current] { display: inline-block; padding-block: 0.5rem; }
.product__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: 2.5rem clamp(2rem, 6vw, 6rem); align-items: center; }
.product__media { display: grid; gap: 1.5rem; justify-items: center; }
.product__media .bk { --bk-h: min(40rem, 76vh); }
.product__buy { display: grid; gap: 1rem; }
.product__buy h1 { font-size: clamp(3rem, 5.5vw, 4.75rem); }
.buy-panel { display: grid; gap: 1.25rem; margin-top: 0.75rem; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--fa-line); background: var(--fa-surface); }
.buy-panel__format { font: 400 1.625rem/1.2 var(--fa-display); }
.price { font-size: clamp(2.25rem, 3.5vw, 3rem); line-height: 1; font-weight: 500; padding-bottom: 1.25rem; border-bottom: 1px solid var(--fa-line); }
.options { display: grid; gap: 0.6rem; }
.options legend { margin-bottom: 0.6rem; }
.option { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 0.85rem; align-items: center; min-height: 3.25rem; padding: 0.6rem 0.9rem; border: 1px solid var(--fa-line-soft); cursor: pointer; }
.option input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.option__mark { width: 1.25rem; height: 1.25rem; border: 1px solid var(--fa-ivory); border-radius: 50%; display: grid; place-items: center; }
.option__mark::after { content: ''; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--fa-ivory); transform: scale(0); }
.option:has(input:checked) { border-color: var(--fa-ivory); background: rgba(77, 16, 24, 0.55); }
.option:has(input:checked) .option__mark::after { transform: scale(1); }
.option:has(input:focus-visible) { outline: 2px solid var(--fa-focus); outline-offset: 3px; }
.option:hover { border-color: var(--fa-taupe); }
.option__price { font-weight: 600; white-space: nowrap; }
.stepper { display: inline-grid; grid-template-columns: 3rem 4.25rem 3rem; border: 1px solid var(--fa-line); width: max-content; }
.stepper__btn { min-height: 3rem; border: 0; background: transparent; cursor: pointer; font-size: 1.375rem; line-height: 1; }
.stepper__btn:hover { background: rgba(216, 197, 178, 0.1); }
.stepper input { min-height: 3rem; padding: 0; border: 0; border-inline: 1px solid var(--fa-line); text-align: center; background: transparent; appearance: textfield; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.buy-panel__fact { text-align: center; }
.placeholder { display: grid; gap: 0.6rem; place-content: center; justify-items: center; width: min(100%, 28rem); aspect-ratio: 4 / 5; padding: 2rem; border: 1px dashed rgba(216, 197, 178, 0.5); background: rgba(19, 18, 17, 0.6); text-align: center; font: 400 1.5rem/1.25 var(--fa-display); }
.placeholder .muted { font: 400 0.9375rem/1.5 var(--fa-ui); }
@media (max-width: 55rem) {
  .product__grid { grid-template-columns: 1fr; }
  .product__media .bk { --bk-h: 27rem; }
  .placeholder { aspect-ratio: 4 / 3; }
}

.details { padding-block: clamp(3.5rem, 7vw, 5.5rem); border-bottom: 1px solid var(--fa-line-soft); }
.details__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 3rem clamp(2rem, 6vw, 6rem); align-items: start; }
.details__grid > div { display: grid; gap: 1.25rem; }
.facts { padding-left: clamp(0rem, 4vw, 3rem); border-left: 1px solid var(--fa-line); }
.facts dl > div, .cart-summary dl > div { display: flex; justify-content: space-between; gap: 1.5rem; padding-block: 0.7rem; border-bottom: 1px solid var(--fa-line-soft); }
.facts dt { color: var(--fa-taupe); }
.facts dd { text-align: right; font-weight: 500; }
.facts__more { font-size: 1rem; }
.contents { display: grid; gap: 0; border-top: 1px solid var(--fa-line-soft); }
.contents li { display: flex; gap: 1rem; align-items: baseline; padding-block: 0.8rem; border-bottom: 1px solid var(--fa-line-soft); font: 400 1.375rem/1.3 var(--fa-display); }
.contents li::before { content: ''; flex: none; width: 0.4rem; height: 0.4rem; background: var(--fa-burgundy); outline: 1px solid var(--fa-taupe); transform: translateY(-0.2em) rotate(45deg); }
@media (max-width: 47.99rem) {
  .details__grid { grid-template-columns: 1fr; }
  .facts { padding-left: 0; border-left: 0; }
}

/* ── Cart ── */
.cart { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(4rem, 8vw, 7rem); min-height: 60vh; }
.cart__wrap { max-width: 62rem; }
.cart .section-head { margin-bottom: 2rem; }
.cart .section-head h1 { font-size: clamp(3rem, 6vw, 4.75rem); }
.cart__empty { display: grid; gap: 1.5rem; justify-items: start; padding-block: 1rem 2rem; }
.cart__filled { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem); gap: 2rem clamp(2rem, 5vw, 4rem); align-items: start; }
.cart-list { border-top: 1px solid var(--fa-line); }
.cart-item { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: 0.75rem 1.25rem; align-items: start; padding-block: 1.5rem; border-bottom: 1px solid var(--fa-line); }
.cart-item__thumb { width: 4.5rem; aspect-ratio: 2 / 3; display: grid; place-items: center; }
.cart-item__thumb img { width: 100%; height: auto; }
.cart-item__thumb--none { border: 1px dashed rgba(216, 197, 178, 0.4); color: var(--fa-taupe); font-size: 0.6875rem; line-height: 1.3; text-align: center; padding: 0.25rem; }
.cart-item__title { font: 400 1.625rem/1.15 var(--fa-display); }
.cart-item__title a { text-decoration: none; }
.cart-item__title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.cart-item__meta { color: var(--fa-taupe); font-size: 0.9375rem; }
.cart-item__total { font: 500 1.625rem/1.15 var(--fa-display); text-align: right; }
.cart-item__controls { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; }
.cart-item .stepper { grid-template-columns: 2.75rem 3.5rem 2.75rem; }
.cart-item .stepper__btn, .cart-item .stepper input { min-height: 2.75rem; }
.cart-summary { display: grid; gap: 1.25rem; padding: 1.5rem; border: 1px solid var(--fa-line); background: var(--fa-surface); }
.cart-summary dl > div:first-child dd { font: 500 1.75rem/1 var(--fa-display); }
.cart-summary dl > div { align-items: baseline; }
.cart-summary dl .muted dd { text-align: right; font-size: 0.875rem; }
.cart-summary__note { font-size: 0.875rem; line-height: 1.5; }
.cart-summary__links { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; font-size: 0.9375rem; }
@media (max-width: 50rem) { .cart__filled { grid-template-columns: 1fr; } }

/* ── Footer ── */
.site-footer { padding-block: 3rem 3.5rem; border-top: 1px solid var(--fa-line); }
.site-footer__inner { display: grid; grid-template-columns: auto 1fr auto; gap: 2rem 3rem; align-items: start; }
.site-footer__logo { width: 11rem; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; font: 500 1.125rem/1.2 var(--fa-display); }
.site-footer__links a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; }
.site-footer__links a:hover { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; }
.site-footer__contact { display: grid; gap: 0.75rem; max-width: 22rem; }
.site-footer__fine { grid-column: 1 / -1; padding-top: 1.5rem; border-top: 1px solid var(--fa-line-soft); color: var(--fa-taupe); font-size: 0.875rem; }
@media (max-width: 55rem) { .site-footer__inner { grid-template-columns: 1fr; } }

/* ════════════ Reference-layout pass: composition and type follow the supplied page references ════════════ */

h1 { font-weight: 500; letter-spacing: -0.02em; }
h2 { font-weight: 400; }
.rule--short { width: 3rem; height: 2px; }
.rule--ivory { width: 2.75rem; height: 1px; background: var(--fa-ivory); }
.nav-link { font-size: 1.0625rem; letter-spacing: 0.03em; }
.site-nav ul { gap: clamp(1.25rem, 2.6vw, 2.25rem); }
.caps-title { font-size: clamp(2.25rem, 4.2vw, 3.5rem); font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.05; }
.caps-title--small { font-size: clamp(1.75rem, 3vw, 2.5rem); }

/* Hero: a shorter band, as in the reference, with a heavier two-line headline. */
.hero { min-height: clamp(27rem, 58vh, 34rem); }
.hero__inner { gap: 1.75rem; padding-block: 3rem; }
.hero__inner h1 { max-width: none; font-size: clamp(3.25rem, 6.6vw, 5.75rem); line-height: 0.98; }
.hero .btn { min-width: 12rem; }
@media (max-width: 47.99rem) { .hero__inner { padding-block: 0 3.5rem; } .hero .btn { min-width: 0; } }

/* Shelf: big books standing in one pooled fog scene; uppercase titles with a burgundy rule. */
.shelf { padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(3.5rem, 6vw, 5rem); }
.fog--shelf { bottom: 0; }
.shelf__heading { margin-bottom: clamp(2.5rem, 5vw, 4rem); text-align: center; font-size: clamp(2.5rem, 4.6vw, 4rem); font-weight: 400; letter-spacing: -0.01em; line-height: 1.02; }
.section-head .shelf__heading { margin-bottom: 0; }
.shelf__row { gap: clamp(1.5rem, 3vw, 3rem); }
.shelf__link { display: grid; justify-items: center; gap: 1.75rem; text-decoration: none; }
.shelf__link .shelf__cover { display: flex; align-items: flex-end; justify-content: center; }
.shelf .bk { --bk-h: min(36rem, 72vh); }
.shelf__title { position: relative; padding-bottom: 0.9rem; font-size: clamp(1.125rem, 1.6vw, 1.375rem); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; line-height: 1.2; text-shadow: 0 1px 12px var(--fa-bg), 0 0 24px var(--fa-bg); }
.shelf__title::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 5.5rem; height: 3px; background: var(--fa-burgundy); transform: translateX(-50%); transition: width 0.25s; }
.shelf__link:hover .shelf__title::after, .shelf__link:focus-visible .shelf__title::after { width: 100%; }
@media (max-width: 47.99rem) { .shelf .bk { --bk-h: 26rem; } }

/* Shop cards add price lines under the shelf titles. */
.shop-card { gap: 0.3rem; }
.shop-card .shelf__link { margin-bottom: 0.6rem; }
.shop-card__meta, .shop-card__fine { text-shadow: 0 1px 10px var(--fa-bg); }
.shop-card__meta { font: 400 1.25rem/1.3 var(--fa-display); }
.shop-card__price { font: 500 2rem/1.1 var(--fa-display); }
.shop-card__fine { font-size: 0.9375rem; }
.placeholder--card { aspect-ratio: 2 / 3; width: auto; height: min(36rem, 72vh); max-width: 100%; font-size: 1.25rem; }
.shelf--shop .bk { --bk-h: min(30rem, 60vh); }
.placeholder--card { height: min(30rem, 60vh); }
@media (max-width: 47.99rem) { .placeholder--card { height: 18rem; } }

/* Books page: library masthead + newest release, cover on the right with the supplied rose beside it. */
.feature { padding-block: clamp(2rem, 4vw, 3.5rem) clamp(3.5rem, 6vw, 5rem); }
.feature__inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.feature__text { gap: 1rem; }
.feature__h1 { font-size: clamp(3.25rem, 7vw, 6.25rem); line-height: 0.92; }
.feature__text h2.caps-title { font-size: clamp(2.25rem, 4.2vw, 3.5rem); font-weight: 400; letter-spacing: 0.06em; }
.feature { overflow: hidden; }
.btn { gap: 0.5rem; }
.feature__lead { display: flex; flex-wrap: wrap; gap: 0.25rem clamp(2rem, 8vw, 7rem); font: 400 clamp(1.25rem, 1.9vw, 1.5rem)/1.3 var(--fa-display); letter-spacing: 0.02em; }
.feature__eyebrow { margin-top: 1.25rem; }
.feature__eyebrow::after { flex-basis: 16rem; background: var(--fa-taupe); }
.feature__blurb { max-width: 26rem; }
.feature .actions { margin-top: 0.75rem; }
.feature__cover { position: relative; isolation: isolate; }
.feature__cover .bk { --bk-h: min(38rem, 74vh); }
.feature__rose { position: absolute; z-index: -1; left: 50%; bottom: -1.5rem; width: 44rem; aspect-ratio: 2103 / 748; transform: translateX(-39%);
  background: url('../img/hero/rose-fog-header-1200.webp') center / cover no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 30% 62% at 72% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 30% 62% at 72% 50%, #000 55%, transparent 100%); }
@media (max-width: 47.99rem) {
  .feature__inner { grid-template-columns: 1fr; }
  .feature__rose { width: 34rem; transform: translateX(-42%); }
}

/* Series: cover with its caption set beside it. */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem clamp(1.5rem, 4vw, 4rem); max-width: 68rem; margin-inline: auto; }
.duo__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1rem, 2.5vw, 2rem); align-items: center; }
.duo__cover .bk { --bk-h: min(32rem, 66vh); }
.duo__caption { display: grid; gap: 1rem; justify-items: start; }
.duo__title { font-size: clamp(1.625rem, 2.6vw, 2.25rem); font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.12; max-width: 8em; text-shadow: 0 1px 12px var(--fa-bg); }
.duo__title a { text-decoration: none; }
.duo__title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.duo__price { font-size: 0.9375rem; text-shadow: 0 1px 10px var(--fa-bg); }
@media (max-width: 62rem) { .duo__item { grid-template-columns: 1fr; justify-items: center; } .duo__caption { justify-items: center; text-align: center; } .duo__title { max-width: none; } }
@media (max-width: 47.99rem) { .duo { grid-template-columns: 1fr; } .duo__cover .bk { --bk-h: 25rem; } }

.teaser { position: relative; isolation: isolate; padding-block: clamp(3.5rem, 7vw, 5.5rem); border-bottom: 1px solid var(--fa-line-soft); }
.teaser .wrap { display: grid; gap: 1rem; }
.teaser .eyebrow--lined::after { flex-basis: 10rem; background: var(--fa-taupe); }
.teaser__title { font-size: clamp(2rem, 4vw, 3.25rem); }
.fog--teaser { -webkit-mask-image: linear-gradient(90deg, transparent 25%, #000 70%); mask-image: linear-gradient(90deg, transparent 25%, #000 70%); }

/* Newsletter band, as in the reference: centred title, tracked line, field and Join side by side. */
.newsletter { padding-block: clamp(3.5rem, 7vw, 5rem) clamp(3.5rem, 7vw, 5.5rem); }
.newsletter__inner { gap: 0.9rem; }
.newsletter__title { font-size: clamp(2.25rem, 3.6vw, 3rem); font-weight: 400; letter-spacing: 0; line-height: 1.05; }
.newsletter__sub { font-weight: 500; letter-spacing: 0.28em; }
.newsletter__form { width: min(100%, 40rem); margin-top: 1.25rem; }
.newsletter__form .field label { font-size: 0.8125rem; font-weight: 500; color: var(--fa-ivory); }
.newsletter__form input { min-height: 3.5rem; border-color: rgba(216, 197, 178, 0.6); font: 400 1.125rem/1.2 var(--fa-display); letter-spacing: 0.03em; }
.newsletter__form input::placeholder { color: var(--fa-taupe); opacity: 1; }
.newsletter__form .btn { min-height: 3.5rem; min-width: 9rem; font-size: 1.375rem; }
.newsletter__hint { text-align: center; }
/* Fog gathers in the lower corners and stays clear of the form. */
.fog--band { -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.15) 34%, rgba(0, 0, 0, 0.15) 66%, #000 100%); mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.15) 34%, rgba(0, 0, 0, 0.15) 66%, #000 100%); }
.newsletter--page { min-height: 62vh; display: grid; align-items: center; padding-block: clamp(5rem, 12vw, 9rem); }
.newsletter--page .newsletter__title { font-size: clamp(3rem, 6.4vw, 5.5rem); font-weight: 500; letter-spacing: -0.02em; }

/* About page: copy on the left, the supplied rose art held to the right. */
.about { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(30rem, 66vh, 40rem); display: flex; align-items: center; padding-block: clamp(3.5rem, 8vw, 6rem); }
.about__art { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--fa-bg) 0%, rgba(4, 5, 5, 0.75) 38%, rgba(4, 5, 5, 0.1) 70%), linear-gradient(0deg, var(--fa-bg) 0%, rgba(4, 5, 5, 0) 30%), url('../img/hero/rose-fog-header.webp') 78% 50% / cover no-repeat; }
.about__inner { display: grid; grid-template-columns: 1fr; gap: 1.25rem; justify-items: start; }
.about__inner > * { max-width: 36rem; }
.about__inner .eyebrow--lined { width: auto; }
.about__inner .actions { margin-top: 1rem; }
@media (max-width: 47.99rem) { .about__art { background: linear-gradient(180deg, rgba(4, 5, 5, 0.2) 0%, var(--fa-bg) 17rem), url('../img/hero/rose-fog-header-1200.webp') 84% 0 / auto 18rem no-repeat; } .about { align-items: flex-start; padding-top: 14rem; } }

/* Product page: larger cover, open outlined purchase panel, plain radio rows. */
.product__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 30rem); align-items: start; }
.product__media .bk { --bk-h: min(44rem, 82vh); }
.product__buy { gap: 0.75rem; padding-top: clamp(0rem, 3vw, 2.5rem); }
.product__buy h1 { font-size: clamp(3.25rem, 6vw, 5.25rem); line-height: 0.95; }
.product__tagline { font-weight: 500; letter-spacing: 0.32em; }
.buy-panel { gap: 1.5rem; margin-top: 1.25rem; padding: clamp(1.5rem, 3vw, 2.25rem); border-color: rgba(216, 197, 178, 0.55); background: rgba(4, 5, 5, 0.72); }
.buy-panel__format { font-size: clamp(1.75rem, 2.6vw, 2.125rem); }
.price { margin-top: 0.35rem; padding-bottom: 1.5rem; font-size: clamp(2.5rem, 4vw, 3.25rem); border-bottom-color: rgba(216, 197, 178, 0.55); }
.options { gap: 0.15rem; padding-bottom: 1.25rem; border-bottom: 1px solid rgba(216, 197, 178, 0.55); }
.options legend.eyebrow { margin-bottom: 0.75rem; font: 500 0.75rem/1.4 var(--fa-ui); letter-spacing: 0.3em; }
.option, .option:has(input:checked) { grid-template-columns: auto auto 1fr; min-height: 3rem; padding: 0.25rem 0; border: 0; background: none; font: 400 1.375rem/1.2 var(--fa-display); }
.option__mark { width: 1.75rem; height: 1.75rem; border-width: 1.5px; }
.option__mark::after { width: 0.7rem; height: 0.7rem; }
.option:has(input:checked) .option__mark { box-shadow: inset 0 0 0 4px var(--fa-burgundy); }
.option:hover .option__mark { border-color: #fff; }
.option__price { font-weight: 400; color: var(--fa-ivory); }
.field--qty label { font: 400 1.25rem/1.2 var(--fa-display); }
.buy-panel .btn--block { min-height: 3.75rem; font-size: 1.5rem; }
.buy-panel__fact { font: 400 1.125rem/1.3 var(--fa-display); letter-spacing: 0.04em; }

.details__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; }
.details__story h2 { font-size: clamp(2.5rem, 4.6vw, 3.75rem); }
.details__story .editorial-copy { max-width: 30rem; font-size: clamp(1.375rem, 2.1vw, 1.625rem); }
.details__story .eyebrow--lined::after { flex-basis: 7rem; background: var(--fa-taupe); }
.included { display: grid; gap: 1.25rem; padding-left: clamp(0rem, 4vw, 3rem); border-left: 1px solid rgba(216, 197, 178, 0.45); }
.included h2 { font-weight: 500; letter-spacing: 0.3em; }
.included ul { display: grid; gap: 0.9rem; }
.included li { display: flex; align-items: center; gap: 1rem; font: 400 1.375rem/1.25 var(--fa-display); }
.tick { flex: none; color: var(--fa-ivory); }
.included__more { font-size: 0.9375rem; }
@media (max-width: 55rem) { .product__grid { grid-template-columns: 1fr; } .product__media .bk { --bk-h: 28rem; } .product__media { order: 0; } }
@media (max-width: 47.99rem) { .details__grid { grid-template-columns: 1fr; } .included { padding-left: 0; border-left: 0; } }

.site-footer__inner { align-items: center; }

.fog--teaser { opacity: 0.6; }
.fog--band { opacity: 0.8; }

/* ════════════ Travelling fog: the drift layer slides sideways continuously, very slowly ════════════
   The layer is two seamless tiles wide and moves exactly one tile per cycle, so there is no jump.
   It sits behind the books and text; nothing else on the page moves. */
.fog { --fog-tile: max(100vw, 90rem); }
.fog__drift { inset: 0 auto 0 0; width: calc(2 * var(--fog-tile)); background-repeat: repeat-x; background-position: left bottom; background-size: var(--fog-tile) auto;
  opacity: 0.7; will-change: transform; animation: fog-travel var(--fa-fog-cycle) linear infinite; animation-play-state: var(--fa-fog-play); }
.fog__drift--b { animation-duration: calc(var(--fa-fog-cycle) * 1.35); animation-delay: -40s; animation-direction: reverse; }
@keyframes fog-travel { to { transform: translate3d(calc(-1 * var(--fog-tile)), 0, 0); } }
@media (max-width: 47.99rem) { .fog { --fog-tile: 56rem; } }
@media (prefers-reduced-motion: reduce) { .fog__drift { animation: none; } }

/* ════════════ Living fog (js/fog.js): a WebGL canvas replaces the image layers when available ════════════ */
.fog__gl { position: absolute; inset: 0; width: 100%; height: 100%; animation: fog-in 1.2s ease-out both; }
.fog[data-gl] .fog__base, .fog[data-gl] .fog__drift { display: none; }
@keyframes fog-in { from { opacity: 0; } }
/* Per-area shape: how far up the smoke bank reaches (0–1 from the bottom) and its peak opacity. */
.fog--shelf { --fog-horizon: 0.38; --fog-strength: 0.56; }
.fog--feature, .fog--stage { --fog-horizon: 0.34; --fog-strength: 0.5; }
.fog--band { --fog-horizon: 0.42; --fog-strength: 0.5; opacity: 1; }
.fog--teaser { --fog-horizon: 0.6; --fog-strength: 0.46; opacity: 1; }
.fog--hero { --fog-horizon: 0.5; --fog-strength: 0.34; }
/* The shader fades its own lower edge, so the generic bottom fade-out is dropped for the canvas. */
.fog[data-gl]:not(.fog--hero):not(.fog--band):not(.fog--teaser) { -webkit-mask-image: none; mask-image: none; }

/* Only areas marked .fog--live move (Home: "Your next obsession."). Every other fog area is a still image. */
.fog:not(.fog--live) .fog__drift { animation: none; }

/* Home: the book section's fog thins out before the section ends, so there is no hard edge against the
   newsletter band, and the dividing rule is dropped. */
.fog.fog--live[data-gl]:not(.fog--hero):not(.fog--band):not(.fog--teaser) {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 74%, transparent 97%); mask-image: linear-gradient(to bottom, #000 0%, #000 74%, transparent 97%); }
.shelf--home { border-bottom: 0; padding-bottom: clamp(4.5rem, 8vw, 7rem); }

/* Newsletter band: black at the top, fog lying low along the bottom edge only. */
.fog--band { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 52%, #000 86%); mask-image: linear-gradient(to bottom, transparent 0%, transparent 52%, #000 86%); }
.fog--band .fog__base, .fog--band .fog__drift { background-position: center calc(100% + 7rem); }
.newsletter { padding-bottom: clamp(5.5rem, 10vw, 8.5rem); }

/* Newsletter band carries no fog (Tyler's direction); normal bottom padding restored. */
.newsletter { padding-bottom: clamp(3.5rem, 7vw, 5.5rem); }

/* Books page: the rose beside the Prince of Noctis cover is a transparent cut-out of the supplied bloom
   (no box, soft edges), half as large again as before, tucked behind the book. */
.feature__rose { left: 50%; bottom: -2.25rem; width: 22rem; aspect-ratio: 686 / 547; transform: translateX(12%);
  background: url('../img/hero/rose-cutout.webp') center / contain no-repeat;
  -webkit-mask-image: none; mask-image: none; filter: drop-shadow(0 1rem 1.5rem rgba(0, 0, 0, 0.6)); }
@media (max-width: 47.99rem) { .feature__rose { width: 16rem; transform: translateX(2%); bottom: -1.5rem; } }
@media (min-width: 48rem) {
  .feature__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .feature__cover { justify-content: flex-start; padding-left: clamp(0rem, 3vw, 3rem); }
  .feature__cover .bk { --bk-h: min(34rem, 70vh); }
  .feature__rose { left: clamp(13rem, 21vw, 19rem); transform: none; }
}
@media (max-width: 47.99rem) {
  .feature__cover { justify-content: flex-start; padding-left: 0.5rem; }
  .feature__cover .bk { --bk-h: 22rem; }
  .feature__rose { left: 10.5rem; width: 13.5rem; transform: none; bottom: -1.25rem; }
}

/* Books page, "Coming in 2027": the Book Two cover stands at the right in a soft pool of fog.
   The fog is masked to an ellipse around the book, so it fades out on every side with no hard edge. */
.teaser { overflow: hidden; padding-block: clamp(3rem, 6vw, 4.5rem); }
.teaser .wrap.teaser__inner { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 2rem clamp(2rem, 5vw, 5rem); align-items: center; }
.teaser__text { display: grid; gap: 1rem; }
.teaser__cover { display: flex; justify-content: center; }
.teaser__cover .bk { --bk-h: min(24rem, 52vh); }
.fog--teaser { opacity: 1; inset: -1px 0;
  -webkit-mask-image: radial-gradient(ellipse 46% 62% at 76% 68%, #000 0%, rgba(0, 0, 0, 0.75) 38%, transparent 100%);
  mask-image: radial-gradient(ellipse 46% 62% at 76% 68%, #000 0%, rgba(0, 0, 0, 0.75) 38%, transparent 100%); }
.fog--teaser .fog__base { background-position: 80% 100%; background-size: max(120%, 90rem) auto; }
@media (max-width: 47.99rem) {
  .teaser .wrap.teaser__inner { grid-template-columns: 1fr; }
  .teaser__cover .bk { --bk-h: 20rem; }
  .fog--teaser { -webkit-mask-image: radial-gradient(ellipse 90% 45% at 50% 78%, #000 0%, rgba(0, 0, 0, 0.75) 40%, transparent 100%); mask-image: radial-gradient(ellipse 90% 45% at 50% 78%, #000 0%, rgba(0, 0, 0, 0.75) 40%, transparent 100%); }
  .fog--teaser .fog__base { background-size: 60rem auto; background-position: 50% 100%; }
}
/* Give the fog room to die away below the book, well before the section's lower edge. */
.teaser { padding-bottom: clamp(5.5rem, 9vw, 7.5rem); border-bottom: 0; }
.fog--teaser { -webkit-mask-image: radial-gradient(ellipse 44% 30% at 76% 68%, #000 0%, rgba(0, 0, 0, 0.8) 35%, transparent 100%); mask-image: radial-gradient(ellipse 44% 30% at 76% 68%, #000 0%, rgba(0, 0, 0, 0.8) 35%, transparent 100%); }
.fog--teaser .fog__base { background-position: 80% calc(100% - 3.5rem); }
@media (max-width: 47.99rem) {
  .fog--teaser { -webkit-mask-image: radial-gradient(ellipse 95% 20% at 50% 78%, #000 0%, rgba(0, 0, 0, 0.8) 35%, transparent 100%); mask-image: radial-gradient(ellipse 95% 20% at 50% 78%, #000 0%, rgba(0, 0, 0, 0.8) 35%, transparent 100%); }
  .fog--teaser .fog__base { background-position: 50% calc(100% - 2.5rem); }
}
/* Keep the fog image anchored to the section floor (its own lower edge must never show); the ellipse mask does the fading. */
.fog--teaser .fog__base { background-position: 80% 100%; }
.fog--teaser { -webkit-mask-image: radial-gradient(ellipse 46% 34% at 76% 64%, #000 0%, rgba(0, 0, 0, 0.8) 35%, transparent 100%); mask-image: radial-gradient(ellipse 46% 34% at 76% 64%, #000 0%, rgba(0, 0, 0, 0.8) 35%, transparent 100%); }
@media (max-width: 47.99rem) {
  .fog--teaser .fog__base { background-position: 50% 100%; }
  .fog--teaser { -webkit-mask-image: radial-gradient(ellipse 95% 24% at 50% 74%, #000 0%, rgba(0, 0, 0, 0.8) 35%, transparent 100%); mask-image: radial-gradient(ellipse 95% 24% at 50% 74%, #000 0%, rgba(0, 0, 0, 0.8) 35%, transparent 100%); }
}
/* The rose cut-out carries no CSS shadow or filter: only its own pixels are drawn, so no box can appear around it. */
.feature__rose { filter: none; box-shadow: none; background-color: transparent; }

/* ════════════ About: a portrait page, deliberately unlike the others ════════════
   No fog and no rose. A black-and-white portrait in a fine double ring, first-person copy set large,
   and the closing lines given a band of their own. */
.bio { border-bottom: 1px solid var(--fa-line-soft); }
.bio__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 3rem clamp(2.5rem, 7vw, 7rem); align-items: center; padding-block: clamp(3rem, 7vw, 6rem) clamp(3.5rem, 7vw, 6rem); }
.bio__portrait { position: relative; margin: 0; justify-self: center; width: min(100%, 31rem); aspect-ratio: 1; padding: clamp(0.75rem, 1.6vw, 1.25rem); }
.bio__portrait::before { content: ''; position: absolute; inset: 0; border: 1px solid rgba(216, 197, 178, 0.55); border-radius: 50%; }
.bio__ring { position: absolute; inset: 0; border: 1px solid var(--fa-burgundy); border-radius: 50%; outline: 1px solid transparent; transform: translate(1.1rem, 1.1rem); box-shadow: 0 0 0 1px rgba(77, 16, 24, 0.5); }
.bio__portrait img { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.bio__text { display: grid; gap: 1.35rem; justify-items: start; max-width: 36rem; }
.bio__text .eyebrow--lined { width: auto; }
.bio__text .eyebrow--lined::after { flex: none; width: 5rem; background: var(--fa-taupe); }
.bio__text h1 { font-size: clamp(3.75rem, 8vw, 7rem); font-weight: 400; font-style: italic; letter-spacing: -0.02em; line-height: 0.92; }
.bio__lead { font: 400 clamp(1.5rem, 2.5vw, 2rem)/1.28 var(--fa-display); }
.bio__text > p:not(.eyebrow):not(.bio__lead) { font: 400 clamp(1.25rem, 1.7vw, 1.4375rem)/1.5 var(--fa-display); }
.bio__close { padding-block: clamp(3.5rem, 8vw, 6.5rem); background: var(--fa-surface); border-top: 1px solid var(--fa-line-soft); text-align: center; }
.bio__close .wrap { display: grid; gap: 2rem; justify-items: center; }
.bio__mark { width: 1px; height: 3.5rem; background: linear-gradient(180deg, transparent, var(--fa-ivory)); }
.bio__quote { max-width: 20ch; font: 400 italic clamp(2.25rem, 5vw, 4rem)/1.08 var(--fa-display); letter-spacing: -0.01em; }
.bio__quote span { display: block; max-width: none; margin-top: 1.25rem; font-style: normal; font-size: clamp(1.375rem, 2.2vw, 1.75rem); line-height: 1.3; letter-spacing: 0; }
.bio__close .actions { justify-content: center; margin-top: 0.5rem; }
@media (max-width: 55rem) {
  .bio__grid { grid-template-columns: 1fr; }
  .bio__portrait { width: min(82%, 24rem); }
  .bio__ring { transform: translate(0.7rem, 0.7rem); }
}
.bio__quote { max-width: 26ch; text-wrap: balance; }
.bio__quote span, .bio__lead { text-wrap: balance; }

/* ════════════ About: motion ════════════
   1. Copy and portrait ease in, one after another, as they come into view.
   2. The burgundy ring slowly circles the portrait.
   3. The closing band is black with living fog rising behind the words (replaces the flat charcoal).
   All of it is switched off for visitors who prefer reduced motion. */
.js [data-reveal] { opacity: 0; transform: translateY(1.1rem); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--d, 0) * 0.14s); }
.js [data-reveal][data-shown] { opacity: 1; transform: none; }
.js .bio__portrait[data-reveal] { transform: scale(0.965); transition-duration: 1.6s; }
.js .bio__portrait[data-reveal][data-shown] { transform: none; }

.bio__ring { transform: rotate(45deg) translateX(1.5rem); animation: ring-orbit 38s linear infinite; }
@keyframes ring-orbit { from { transform: rotate(45deg) translateX(1.5rem); } to { transform: rotate(405deg) translateX(1.5rem); } }
.bio__mark { transform-origin: top; animation: mark-breathe 5.5s ease-in-out infinite; }
@keyframes mark-breathe { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
@media (max-width: 55rem) {
  .bio__ring { transform: rotate(45deg) translateX(1rem); animation-name: ring-orbit-sm; }
  @keyframes ring-orbit-sm { from { transform: rotate(45deg) translateX(1rem); } to { transform: rotate(405deg) translateX(1rem); } }
}

.bio__close { position: relative; isolation: isolate; overflow: hidden; background: var(--fa-bg); border-top: 0; padding-block: clamp(5rem, 11vw, 9rem); }
.bio { border-bottom: 0; }
.fog--close { --fog-horizon: 0.5; --fog-strength: 0.5; }
.fog.fog--live.fog--close, .fog.fog--live.fog--close[data-gl]:not(.fog--hero):not(.fog--band):not(.fog--teaser) {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 42%, #000 72%, transparent 97%); mask-image: linear-gradient(to bottom, transparent 0%, #000 42%, #000 72%, transparent 97%); }
.bio__quote, .bio__quote span { text-shadow: 0 0 1.25rem var(--fa-bg), 0 0 2.5rem var(--fa-bg), 0 1px 2px var(--fa-bg); }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .bio__ring, .bio__mark { animation: none; }
}
/* About: close the gap between the bio and the closing band. */
.bio__grid { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.bio__close { padding-top: clamp(2rem, 4vw, 3rem); }

/* ════════════ Reveal on scroll, every page ════════════
   Text eases up into place once as it enters view (same motion as the About page). Books, images and
   the logo are not included. The list must match REVEAL in js/site.js. If the script never runs, or the
   visitor prefers reduced motion, html.fa-shown shows everything at once. */
.js main :is(h1, h2, h3, .eyebrow:not(legend), .editorial-copy, .actions, .shelf__series, .shop-card__meta, .shop-card__price, .shop-card__fine,
  .duo__price, .feature__lead, .price, .buy-panel__format, .options, .field--qty, .buy-panel__fact, .included li, .included__more,
  .newsletter__form, .breadcrumb, .rule),
.js main .buy-panel .btn, .js main .cart__empty > * {
  opacity: 0; transform: translateY(1.1rem);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1), background-color 0.2s, border-color 0.2s;
  transition-delay: calc(var(--d, 0) * 0.14s), calc(var(--d, 0) * 0.14s), 0s, 0s; }
html.js main [data-shown][data-shown] { opacity: 1; transform: none; }
html.fa-shown main :is(h1, h2, h3, .eyebrow, .editorial-copy, .actions, .shelf__series, .shop-card__meta, .shop-card__price, .shop-card__fine,
  .duo__price, .feature__lead, .price, .buy-panel__format, .options, .field--qty, .buy-panel__fact, .included li, .included__more,
  .newsletter__form, .breadcrumb, .rule, .btn, [data-reveal]), html.fa-shown main .cart__empty > * { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .js main :is(h1, h2, h3, .eyebrow, .editorial-copy, .actions, .shelf__series, .shop-card__meta, .shop-card__price, .shop-card__fine,
    .duo__price, .feature__lead, .price, .buy-panel__format, .options, .field--qty, .buy-panel__fact, .included li, .included__more,
    .newsletter__form, .breadcrumb, .rule, .btn), .js main .cart__empty > * { opacity: 1; transform: none; transition: none; }
}

/* ════════════ Apparel ════════════ */
.apparel { padding-block: clamp(4rem, 8vw, 6rem); border-bottom: 1px solid var(--fa-line-soft); }
.apparel__group { margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.apparel__group > h3 { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--fa-line); }
.apparel__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem clamp(1rem, 2.5vw, 2rem); }
.apparel-card { display: grid; gap: 0.35rem; text-align: center; }
.apparel-card a { display: grid; gap: 1rem; text-decoration: none; }
.apparel-card__views { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--fa-line-soft); border: 1px solid var(--fa-line-soft); }
.apparel-card__views img { width: 100%; }
.apparel-card a:hover .apparel-card__views, .apparel-card a:focus-visible .apparel-card__views { border-color: var(--fa-ivory); }
.apparel-card__name { font: 500 1.25rem/1.2 var(--fa-display); letter-spacing: 0.2em; text-transform: uppercase; }
.apparel-card__price { font: 500 1.625rem/1.1 var(--fa-display); }
@media (max-width: 47.99rem) { .apparel__row { grid-template-columns: 1fr; } }

.product--apparel .product__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 28rem); align-items: start; }
.garment-views { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; justify-items: stretch; }
.garment-views figure { margin: 0; display: grid; gap: 0.75rem; text-align: center; }
.garment-views img { width: 100%; border: 1px solid var(--fa-line-soft); }
.sizes__row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.4rem; }
.size { position: relative; display: block; cursor: pointer; }
.size input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.size span { display: grid; place-items: center; min-height: 3rem; border: 1px solid var(--fa-line); font: 600 0.9375rem/1 var(--fa-ui); }
.size:hover span { border-color: var(--fa-taupe); }
.size input:checked + span { border-color: var(--fa-ivory); background: var(--fa-burgundy); }
.size input:focus-visible + span { outline: 2px solid var(--fa-focus); outline-offset: 3px; }
@media (max-width: 55rem) { .product--apparel .product__grid { grid-template-columns: 1fr; } }
@media (max-width: 26rem) { .sizes__row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.js main :is(.apparel-card__name, .apparel-card__price, figcaption) { opacity: 0; transform: translateY(1.1rem); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--d, 0) * 0.14s); }
html.fa-shown main :is(.apparel-card__name, .apparel-card__price, figcaption) { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) { .js main :is(.apparel-card__name, .apparel-card__price, figcaption) { opacity: 1; transform: none; transition: none; } }
/* The Add to Cart button's hide rule is more specific than the grouped fallbacks above, so name it explicitly:
   it must be visible when motion is reduced or the reveal script has not run. */
html.fa-shown main .buy-panel .btn { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) { html.js main .buy-panel .btn { opacity: 1; transform: none; transition: none; } }

/* Apparel on photographed blanks */
.included__blank { font: 500 1.375rem/1.25 var(--fa-display); }
.product--apparel + .details .included li { font-size: 1.1875rem; align-items: flex-start; }
.product--apparel + .details .tick { margin-top: 0.1rem; }
.apparel__row { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2rem clamp(0.75rem, 1.5vw, 1.25rem); }
.apparel-card__views { grid-template-columns: 1fr; position: relative; }
.apparel-card__views img:first-child { position: absolute; inset: 0; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.35s; }
.apparel-card a:hover .apparel-card__views img:first-child, .apparel-card a:focus-visible .apparel-card__views img:first-child { opacity: 1; }
.apparel-card__name { font-size: 1.0625rem; letter-spacing: 0.14em; }
@media (max-width: 62rem) { .apparel__row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 47.99rem) { .apparel__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ════════════ Shop: one listing per design; books and the Collector's Box last ════════════ */
.apparel__row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem clamp(1.25rem, 3vw, 2.5rem); }
.apparel-card { gap: 0.5rem; }
.apparel-card__name { font: 500 clamp(1.25rem, 2vw, 1.5rem)/1.2 var(--fa-display); letter-spacing: 0.16em; text-transform: uppercase; }
.apparel-card__styles { color: var(--fa-ivory); font-size: 0.9375rem; line-height: 1.5; text-wrap: balance; }
.apparel-card__price { font-size: 1.875rem; }
.apparel > .wrap > .review-note { margin-top: 3rem; }
@media (max-width: 47.99rem) { .apparel__row { grid-template-columns: 1fr; } }
.js main .apparel-card__styles { opacity: 0; transform: translateY(1.1rem); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--d, 0) * 0.14s); }
html.fa-shown main .apparel-card__styles { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) { .js main .apparel-card__styles { opacity: 1; transform: none; transition: none; } }

/* Apparel product page: only the chosen style's photos and specs show (all show if the script has not run). */
.js [data-style-root] [data-for-style] { display: none; }
.js [data-style-root][data-style='tee'] [data-for-style='tee'],
.js [data-style-root][data-style='womens-tee'] [data-for-style='womens-tee'],
.js [data-style-root][data-style='hoodie'] [data-for-style='hoodie'],
.js [data-style-root][data-style='crewneck'] [data-for-style='crewneck'],
.js [data-style-root][data-style='womens-crewneck'] [data-for-style='womens-crewneck'] { display: grid; }
.included [data-for-style] { gap: 1.25rem; }
.product--apparel .product__media { display: grid; gap: 1.5rem; justify-items: stretch; }
.styles .option, .styles .option:has(input:checked) { grid-template-columns: auto 1fr; min-height: 2.75rem; font-size: 1.3125rem; }
.size input:disabled + span { opacity: 0.3; text-decoration: line-through; cursor: not-allowed; }
.sizes__note { margin-top: 0.6rem; font-size: 0.875rem; }

/* Collector's Box photograph (supplied on black, so it sits straight on the page). */
.box-photo { width: min(100%, 32rem); height: auto; }
.box-photo--card { width: auto; max-width: 100%; height: min(30rem, 60vh); object-fit: contain; }
@media (max-width: 47.99rem) { .box-photo--card { height: 22rem; } }

/* ════════════ Shop hero ════════════ */
.shop-hero { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--fa-line-soft); }
.shop-hero::before { content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 42% 62% at 72% 52%, rgba(120, 112, 104, 0.42) 0%, rgba(77, 16, 24, 0.16) 45%, rgba(4, 5, 5, 0) 78%); }
.fog--shop-hero { --fog-horizon: 0.4; -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 60%), linear-gradient(to bottom, #000 70%, transparent 100%); mask-image: linear-gradient(90deg, transparent 20%, #000 60%), linear-gradient(to bottom, #000 70%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; }
.shop-hero__inner { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2rem clamp(1.5rem, 4vw, 4rem); align-items: center; padding-block: clamp(2.5rem, 5vw, 4rem); }
.shop-hero__text { display: grid; gap: 1.25rem; justify-items: start; }
.shop-hero__text h1 { font-size: clamp(3.25rem, 7vw, 6.25rem); line-height: 0.92; }
.shop-hero__text .eyebrow--lined { width: auto; }
.shop-hero__text .eyebrow--lined::after { flex: none; width: 5rem; background: var(--fa-taupe); }
.shop-hero__text .actions { margin-top: 0.5rem; }
.shop-hero__stage { position: relative; height: clamp(22rem, 40vw, 34rem); }
.shop-hero__g { position: absolute; bottom: 0; width: auto; max-width: none; filter: drop-shadow(0 1.5rem 1.75rem rgba(0, 0, 0, 0.75)); }
.shop-hero__g--mid { height: 100%; left: 50%; transform: translateX(-50%); z-index: 2; }
.shop-hero__g--left { height: 74%; left: 0; transform: rotate(-7deg); transform-origin: bottom center; filter: drop-shadow(0 1.5rem 1.75rem rgba(0, 0, 0, 0.75)) brightness(0.8); }
.shop-hero__g--right { height: 82%; right: 0; transform: rotate(6deg); transform-origin: bottom center; filter: drop-shadow(0 1.5rem 1.75rem rgba(0, 0, 0, 0.75)) brightness(0.8); }
@media (max-width: 55rem) {
  .shop-hero__inner { grid-template-columns: 1fr; }
  .shop-hero__stage { height: 21rem; order: -1; }
  .shop-hero::before { background: radial-gradient(ellipse 80% 40% at 50% 28%, rgba(120, 112, 104, 0.42) 0%, rgba(77, 16, 24, 0.16) 45%, rgba(4, 5, 5, 0) 80%); }
}

/* Apparel + Collector's Box row */
.apparel__row--four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem clamp(1rem, 2vw, 1.75rem); }
.apparel-card--box .apparel-card__views { aspect-ratio: 900 / 1125; background: #000; }
.apparel-card--box .apparel-card__views img:first-child { position: static; opacity: 1; width: 100%; height: 100%; object-fit: contain; }
.apparel-card__name { font-size: clamp(1.0625rem, 1.5vw, 1.3125rem); }
.shop-card__price--pending { font-size: 1.5rem; }
.shelf--shop .review-note { margin: 2.5rem auto 0; }
@media (max-width: 62rem) { .apparel__row--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 30rem) { .apparel__row--four { grid-template-columns: 1fr; } }

/* Books hero: the cover is a link to the book's page. */
.feature__book-link { display: block; flex: none; width: min(100%, calc(min(34rem, 70vh) * 2 / 3)); text-decoration: none; }
.feature__book-link .bk { width: 100%; }
.feature__book-link:focus-visible { outline-offset: 8px; }
.caps-title a { text-decoration: none; }
.caps-title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
@media (max-width: 47.99rem) { .feature__book-link { width: calc(22rem * 2 / 3); } }
.shop-hero__text { gap: 1.5rem; }

/* ════════════ Live-content pass: blurbs, editions, reviews, policies, footer ════════════ */
.site-footer__social { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; font: 500 1.125rem/1.2 var(--fa-display); }
.site-footer__social a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; }
.site-footer__social a:hover { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; }
.site-footer__fine { color: var(--fa-taupe); }

.newsletter__pitch { max-width: 34rem; font: 400 clamp(1.125rem, 1.6vw, 1.3125rem)/1.4 var(--fa-display); text-wrap: balance; }
.newsletter__form--full { grid-template-columns: 1fr 1fr; width: min(100%, 36rem); }
.newsletter__form--full .field--wide, .newsletter__form--full .btn { grid-column: 1 / -1; }
.newsletter__hint--demo { color: var(--fa-taupe); }
@media (max-width: 30rem) { .newsletter__form--full { grid-template-columns: 1fr; } }

.editions { display: grid; gap: 0; width: 100%; max-width: 26rem; border-top: 1px solid var(--fa-line-soft); font: 400 1.1875rem/1.3 var(--fa-display); }
.editions li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; padding-block: 0.6rem; border-bottom: 1px solid var(--fa-line-soft); }
.editions a { text-decoration: none; }
.editions a:hover { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
.editions em { color: var(--fa-taupe); font: 400 0.875rem/1.3 var(--fa-ui); }
.editions span { margin-left: auto; font-weight: 500; }
.duo__amazon { font-size: 0.9375rem; line-height: 1.6; }
.duo__amazon span { color: var(--fa-taupe); }

.blurb { width: 100%; max-width: 34rem; }
.blurb summary { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.25rem; border: 1px solid var(--fa-ivory); cursor: pointer; list-style: none; font: 500 1.125rem/1 var(--fa-display); }
.blurb summary::-webkit-details-marker { display: none; }
.blurb summary:hover { background: rgba(216, 197, 178, 0.1); }
.blurb__close, .blurb[open] .blurb__open { display: none; }
.blurb[open] .blurb__close { display: inline; }
.blurb__body { display: grid; gap: 0.9rem; margin-top: 1.25rem; padding: 1.25rem 1.5rem; border-left: 2px solid var(--fa-burgundy); background: rgba(19, 18, 17, 0.9); font-size: 1rem; line-height: 1.65; }

.feature__teaser { display: grid; gap: 0.35rem; max-width: 30rem; font: 400 clamp(1.125rem, 1.6vw, 1.3125rem)/1.4 var(--fa-display); }
.feature__text { gap: 0.9rem; }

/* Series cards now carry tagline, teaser, editions and the full blurb beside each cover. */
.duo { max-width: none; align-items: start; }
.duo__item { align-items: start; grid-template-columns: minmax(0, auto) minmax(0, 1fr); }
.duo__cover .bk { --bk-h: min(26rem, 56vh); }
.duo__caption { gap: 0.7rem; }
.duo__title { max-width: none; font-size: clamp(1.5rem, 2.2vw, 2rem); }
.duo__tagline { font: 400 italic 1.25rem/1.3 var(--fa-display); }
.duo__teaser { font-size: 1rem; line-height: 1.6; text-shadow: 0 1px 10px var(--fa-bg); }
.fog--shelf.fog { -webkit-mask-image: linear-gradient(to bottom, transparent 30%, #000 60%, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 30%, #000 60%, #000 80%, transparent 100%); }
.shelf--home .fog--shelf.fog { -webkit-mask-image: none; mask-image: none; }
@media (max-width: 62rem) { .duo { grid-template-columns: 1fr; gap: 4rem; } .duo__item { grid-template-columns: minmax(0, auto) minmax(0, 1fr); justify-items: start; } .duo__caption { justify-items: start; text-align: left; } }
@media (max-width: 40rem) { .duo__item { grid-template-columns: 1fr; justify-items: center; } }

.teaser__num { color: var(--fa-taupe); font-size: 0.7em; }
.teaser__line { max-width: 34rem; font-size: 1.0625rem; }
.teaser__text { gap: 0.75rem; }

.where { padding-block: clamp(3.5rem, 7vw, 5rem); border-top: 1px solid var(--fa-line-soft); border-bottom: 1px solid var(--fa-line-soft); background: var(--fa-surface); }
.where__inner { display: grid; gap: 1.5rem; justify-items: center; text-align: center; }
.where__list { display: grid; gap: 0.75rem; text-align: left; }
.where__list li { display: flex; align-items: flex-start; gap: 0.9rem; font: 400 1.25rem/1.35 var(--fa-display); }
.where__links { font-size: 0.9375rem; }

/* Home: Goodreads reviews */
.reviews { padding-block: 0 clamp(4rem, 8vw, 6rem); }
.reviews__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 4vw, 4rem); max-width: 62rem; margin-inline: auto; }
.review { margin: 0; display: grid; gap: 1rem; align-content: start; padding: 1.75rem 0 0; border-top: 1px solid var(--fa-line); }
.stars { color: var(--fa-ivory); font-size: 1.125rem; letter-spacing: 0.25em; }
.review blockquote { margin: 0; font: 400 italic clamp(1.25rem, 2vw, 1.5rem)/1.35 var(--fa-display); }
.review blockquote p::before { content: '“'; } .review blockquote p::after { content: '”'; }
.review figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.9rem; font-size: 0.9375rem; }
@media (max-width: 47.99rem) { .reviews__row { grid-template-columns: 1fr; } }

/* Product pages: intro line, long-form copy, personalized message, edition photos */
.product__intro { max-width: 30rem; font: 400 1.25rem/1.4 var(--fa-display); }
.details__story--long { align-self: start; }
.details__story--long > p:not(.eyebrow) { max-width: 38rem; font-size: 1.0625rem; line-height: 1.7; }
.details__sub { margin-top: 1rem; font: 600 0.75rem/1.4 var(--fa-ui); letter-spacing: 0.3em; text-transform: uppercase; }
.details__grid { align-items: start; }
.included .eyebrow:not(:first-child) { margin-top: 0.75rem; }
.field--note textarea { width: 100%; min-height: 5.5rem; padding: 0.7rem 0.9rem; border: 1px solid var(--fa-line); border-radius: 0; background: rgba(4, 5, 5, 0.85); color: inherit; font: inherit; resize: vertical; }
.field--note textarea:hover { border-color: var(--fa-taupe); }
.field--note label { font: 400 1.25rem/1.2 var(--fa-display); }
.field__hint { font-size: 0.875rem; }
.cart-item__note { margin-top: 0.3rem; font-size: 0.9375rem; font-style: italic; }
.option--stacked, .option--stacked:has(input:checked) { grid-template-columns: auto 1fr auto; min-height: 3.75rem; }
.option--stacked small { display: block; color: var(--fa-taupe); font: 400 0.875rem/1.3 var(--fa-ui); }
.edition-photo { width: 100%; height: auto; filter: drop-shadow(0 1.5rem 1.5rem rgba(0, 0, 0, 0.7)); }
.edition-photo--book { width: auto; max-width: 100%; max-height: min(44rem, 82vh); }
.edition-figure { margin: 0; display: grid; gap: 0.9rem; justify-items: center; text-align: center; width: 100%; }
.js [data-option-root] [data-for-option] { display: none; }
.js [data-option-root][data-option='standard'] [data-for-option='standard'],
.js [data-option-root][data-option='sprayed'] [data-for-option='sprayed'],
.js [data-option-root][data-option='collectors'] [data-for-option='collectors'],
.js [data-option-root][data-option='paperback'] [data-for-option='paperback'] { display: grid; justify-items: center; }
.js [data-option-root] img[data-for-option] { display: none; }
.js [data-option-root][data-option='sprayed'] img[data-for-option='sprayed'] { display: block; }
@media (max-width: 55rem) { .edition-photo--book { max-height: 28rem; } }

/* Policies */
.policies { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(4rem, 8vw, 7rem); }
.policies__wrap { max-width: 52rem; }
.policies__nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin-bottom: 2rem; padding-block: 0.75rem; border-block: 1px solid var(--fa-line); font: 500 1.125rem/1.2 var(--fa-display); }
.policies__nav a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; }
.policies__nav a:hover { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; }
.policy { display: grid; gap: 0.9rem; padding-block: 2rem; border-bottom: 1px solid var(--fa-line-soft); scroll-margin-top: 1.5rem; }
.policy > p:not(.review-note) { max-width: 40rem; }

/* Reveal the new blocks with the rest of the page text */
.js main :is(.field--note, .review, .editions, .blurb, .where__list li, .policy) { opacity: 0; transform: translateY(1.1rem); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--d, 0) * 0.14s); }
html.fa-shown main :is(.field--note, .review, .editions, .blurb, .where__list li, .policy) { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) { .js main :is(.field--note, .review, .editions, .blurb, .where__list li, .policy) { opacity: 1; transform: none; transition: none; } }
/* Series: one book per row so the copy, editions and blurb have room. */
.duo { grid-template-columns: 1fr; gap: clamp(3rem, 6vw, 5rem); max-width: 58rem; margin-inline: auto; }
.duo__item { grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); }
.duo__cover .bk { --bk-h: min(30rem, 62vh); }
.duo__teaser { font-size: 1.0625rem; max-width: 34rem; }
.editions li { flex-wrap: nowrap; }
@media (max-width: 40rem) { .duo__item { grid-template-columns: 1fr; justify-items: center; } .duo__cover .bk { --bk-h: 24rem; } }

/* Footer social icons (supplied artwork). One row on desktop; on phones 3 over 2, centred. */
.site-footer__social { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.9rem; }
.site-footer__social li { flex: none; }
.social-icon { display: block; width: 2.75rem; height: 2.75rem; border-radius: 50%; text-decoration: none; transition: opacity 0.2s, transform 0.2s; }
.social-icon img { display: block; width: 100%; height: 100%; }
.social-icon:hover { opacity: 0.75; }
.social-icon:focus-visible { outline-offset: 4px; }
@media (max-width: 55rem) {
  .site-footer__social { display: grid; grid-template-columns: repeat(6, 2.75rem); gap: 0.9rem 0.45rem; justify-content: start; }
  .site-footer__social li { grid-column: span 2; justify-self: center; }
  .site-footer__social li:nth-child(4) { grid-column: 2 / span 2; }
  .site-footer__social li:nth-child(5) { grid-column: 4 / span 2; }
}
.policies__updated { color: var(--fa-taupe); font-size: 0.9375rem; }
.policies .review-note { margin-bottom: 1.5rem; }
.policy p { line-height: 1.7; }

/* Shop cards: style buttons that swap the preview */
.apparel-card__label { margin-top: 0.4rem; font-size: 0.6875rem; color: var(--fa-taupe); }
.style-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; }
.style-chip { min-height: 2.25rem; padding: 0.3rem 0.7rem; border: 1px solid var(--fa-line); background: transparent; color: var(--fa-ivory); cursor: pointer; font: 500 0.8125rem/1.1 var(--fa-ui); letter-spacing: 0.02em; transition: background-color 0.2s, border-color 0.2s; }
.style-chip:hover { border-color: var(--fa-taupe); }
.style-chip[aria-pressed='true'] { border-color: var(--fa-ivory); background: var(--fa-burgundy); }
html:not(.js) .style-chips, html:not(.js) .apparel-card__label { display: none; }
.size span { display: grid; place-items: center; align-content: center; gap: 0.1rem; }
.size small { font: 500 0.6875rem/1 var(--fa-ui); color: var(--fa-taupe); }
.size input:checked + span small { color: var(--fa-ivory); }
.js main :is(.apparel-card__label, .style-chips) { opacity: 0; transform: translateY(1.1rem); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--d, 0) * 0.14s); }
html.fa-shown main :is(.apparel-card__label, .style-chips) { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) { .js main :is(.apparel-card__label, .style-chips) { opacity: 1; transform: none; transition: none; } }

/* ════════════ Apparel product page: big view, small "see other side" view, specs beside it ════════════ */
.product--apparel .product__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 27rem); align-items: start; }
.garment { display: block; }
.garment__style { display: grid; gap: 0.9rem; }
.garment__main, .garment__thumb { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--fa-line-soft); background: none; cursor: zoom-in; }
.garment__main { cursor: pointer; }
.garment__img { display: block; width: 100%; height: auto; }
.garment__style[data-view='back'] .garment__main .garment__img--front,
.garment__style[data-view='front'] .garment__main .garment__img--back,
.garment__style[data-view='back'] .garment__thumb .garment__img--back,
.garment__style[data-view='front'] .garment__thumb .garment__img--front { display: none; }
.garment__below { display: grid; grid-template-columns: minmax(7rem, 0.42fr) minmax(0, 1fr); gap: 1.25rem clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
.garment__thumb { cursor: pointer; }
.garment__thumb:hover, .garment__main:hover { border-color: var(--fa-taupe); }
.garment__see { display: block; padding-top: 0.6rem; font: 600 0.75rem/1.2 var(--fa-ui); letter-spacing: 0.2em; text-transform: uppercase; text-align: center; color: var(--fa-ivory); }
.garment__style[data-view='back'] .garment__see--back, .garment__style[data-view='front'] .garment__see--front { display: none; }
.garment__specs { display: grid; gap: 0.75rem; }
.garment__specs ul { display: grid; gap: 0.5rem; }
.garment__specs li { display: flex; align-items: flex-start; gap: 0.75rem; font: 400 1rem/1.35 var(--fa-display); }
.garment__specs .tick { width: 1.1rem; height: 1.1rem; margin-top: 0.1rem; flex: none; }
.garment__specs .included__blank { font-size: 1.1875rem; }
.js [data-style-root] .garment [data-for-style] { display: none; }
.js [data-style-root][data-style='tee'] .garment [data-for-style='tee'],
.js [data-style-root][data-style='womens-tee'] .garment [data-for-style='womens-tee'],
.js [data-style-root][data-style='hoodie'] .garment [data-for-style='hoodie'],
.js [data-style-root][data-style='crewneck'] .garment [data-for-style='crewneck'],
.js [data-style-root][data-style='womens-crewneck'] .garment [data-for-style='womens-crewneck'] { display: grid; }
.styles .option, .styles .option:has(input:checked) { grid-template-columns: auto 1fr auto; }
@media (max-width: 55rem) { .product--apparel .product__grid { grid-template-columns: 1fr; } }
@media (max-width: 30rem) { .garment__below { grid-template-columns: 1fr; } .garment__thumb { width: 9rem; } }

/* Prince of Noctis extras */
.extras { padding-block: clamp(3.5rem, 7vw, 5.5rem); border-top: 1px solid var(--fa-line-soft); }
.extras__row { display: grid; grid-template-columns: repeat(3, minmax(0, 15rem)); justify-content: center; gap: 2rem clamp(1rem, 3vw, 2.5rem); }
.extra-card { display: grid; gap: 0.5rem; justify-items: center; text-align: center; }
.extra-card__photo { display: grid; place-items: center; align-content: center; gap: 0.9rem; width: 100%; aspect-ratio: 1; border: 1px dashed rgba(216, 197, 178, 0.35); background: radial-gradient(circle at 50% 45%, #2a2826, #121111); }
.extra-card__photo img { width: 3.5rem; height: auto; opacity: 0.85; }
.extra-card__photo span { font: 600 0.6875rem/1.2 var(--fa-ui); letter-spacing: 0.2em; text-transform: uppercase; color: var(--fa-taupe); }
.extra-card__buy { display: grid; justify-items: center; gap: 0.5rem; }
.extras > .wrap > .review-note { margin: 2.5rem auto 0; }
@media (max-width: 40rem) { .extras__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cart-summary__total { border-top: 1px solid var(--fa-line); }
.cart-summary__total dd { font: 500 1.5rem/1 var(--fa-display); }
.policy__list { display: grid; gap: 0.4rem; padding-left: 1.25rem; list-style: disc; }
.extra-card__photo { border-style: solid; border-color: var(--fa-line-soft); padding: 1.25rem; }
.extra-card__photo img { width: 100%; height: 100%; object-fit: contain; opacity: 1; filter: drop-shadow(0 0.75rem 1rem rgba(0, 0, 0, 0.6)); }

/* ════════════ Books page, Oct 14 pass ════════════ */
.feature__beats { white-space: nowrap; }
@media (max-width: 30rem) { .feature__beats { white-space: normal; } }
.blurb-open { justify-self: start; margin-top: 0.5rem; }

/* Blurb pop-up */
.blurb-modal { width: min(42rem, calc(100% - 2rem)); max-height: min(85vh, 52rem); padding: 0; border: 1px solid var(--fa-line); background: var(--fa-surface); color: var(--fa-ivory); overflow: hidden; }
.blurb-modal::backdrop { background: rgba(4, 5, 5, 0.82); backdrop-filter: blur(3px); }
.blurb-modal[open] { animation: blurb-in 0.35s ease-out; }
@keyframes blurb-in { from { opacity: 0; transform: translateY(0.75rem); } }
.blurb-modal__panel { position: relative; display: grid; gap: 1rem; max-height: inherit; padding: clamp(1.75rem, 4vw, 2.75rem); overflow-y: auto; }
.blurb-modal__title { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 400; padding-right: 2.5rem; }
.blurb-modal__body { display: grid; gap: 0.9rem; font-size: 1.0625rem; line-height: 1.7; }
.blurb-modal__close { position: absolute; top: 0.75rem; right: 0.75rem; width: 2.75rem; height: 2.75rem; border: 1px solid var(--fa-line); background: transparent; color: var(--fa-ivory); font: 300 1.75rem/1 var(--fa-ui); cursor: pointer; }
.blurb-modal__close:hover { border-color: var(--fa-ivory); background: rgba(216, 197, 178, 0.08); }
html.modal-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .blurb-modal[open] { animation: none; } }

/* Cursed Shadow: the two books side by side, each with a narrow text column; stacked on phones */
.duo { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 76rem; gap: 3rem clamp(1.5rem, 4vw, 3.5rem); }
.duo__item { grid-template-columns: auto minmax(0, 1fr); gap: clamp(1rem, 2.5vw, 2rem); align-items: start; }
.duo__cover .bk { --bk-h: min(24rem, 52vh); }
.duo__caption { max-width: 21rem; gap: 0.65rem; }
.duo__title { font-size: clamp(1.375rem, 2vw, 1.75rem); letter-spacing: 0.12em; }
.duo__teaser { font-size: 1rem; }
@media (max-width: 62rem) {
  .duo { grid-template-columns: 1fr; max-width: 40rem; }
  .duo__item { grid-template-columns: auto minmax(0, 1fr); justify-items: start; }
  .duo__caption { justify-items: start; text-align: left; }
}
@media (max-width: 40rem) { .duo__item { grid-template-columns: 1fr; justify-items: center; } .duo__caption { max-width: none; } .duo__cover .bk { --bk-h: 22rem; } }
.duo__title { font-size: clamp(1.25rem, 1.7vw, 1.5rem); letter-spacing: 0.08em; white-space: nowrap; }
@media (max-width: 40rem) { .duo__title { white-space: normal; } }

/* Product pages: the title and buy box start level with the top of the product image (Tyler, 14 Oct 2026). */
.product__grid, .product--apparel .product__grid { align-items: start; }
.product__buy { padding-top: 0; }
.product__buy h1 { margin-top: -0.12em; } /* trims the type's built-in space so the letters, not the line box, meet the image top */
.product__media { align-content: start; }

/* Home reviews: centred (Tyler, 14 Oct 2026) */
.review { justify-items: center; text-align: center; }
.review figcaption { justify-content: center; }