/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 */
/* Hallmark · macrostructure: Feature Stack · theme: studied-DNA (source: https://jalalsamfit.com/ + https://panaceapalm.com/)
 * genre: editorial · nav: N6 newspaper masthead · footer: Ft1 mast-headed
 * paper: oklch(96% 0.015 75) · accent: oklch(53% 0.19 35)
 * display: Instrument Serif 400 · body: General Sans · axes: warm-paper / roman-serif / tomato-signal
 * enrichment: H6 photographic fold
 * motion: hero entrance · scroll-synced story · review ribbon · after-fold purchase bar
 * contrast: pass (40–41) · nav: N6 · footer: Ft1 · slop: pass (42–45)
 * honest: pass (46) · chrome: pass (47) · tokens: pass (48) · icons: pass (30)
 * mobile: pass (34, 49–57) · input states: pass (39) · slop test: 58 / 58
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

.visually-hidden:where(:not(:focus-within, :active)) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

html {
  overflow-x: clip;
  color-scheme: light;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  overflow-x: clip;
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
}

main,
section,
header,
footer,
div,
article,
figure,
h1,
h2,
h3 {
  min-width: 0;
}

main section[id] {
  scroll-margin-top: var(--space-md);
}

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

h1,
h2,
h3,
.masthead__wordmark,
.footer__wordmark {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 0.92;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

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

[hidden] {
  display: none !important;
}

a {
  color: inherit;
}

::selection {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

:where(a, button, input, textarea, summary):focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 4px;
}

:where(a:not(.button), button:not(.button), summary):active {
  outline: var(--rule-thin) solid currentColor;
  outline-offset: var(--space-3xs);
}

:where(button, input, textarea):disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

:where(a, summary)[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  pointer-events: none;
}

.skip-link {
  position: fixed;
  inset-block-start: var(--space-sm);
  inset-inline-start: var(--space-sm);
  z-index: 100;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-ink);
  color: var(--color-on-dark);
  text-decoration: none;
  transform: translateY(-200%);
}

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

.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-lg);
  border: var(--rule-thin) solid var(--color-ink);
  border-radius: var(--radius-sm);
  background: var(--color-ink);
  color: var(--color-on-dark);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.button--compact {
  min-height: 44px;
  padding-inline: var(--space-md);
}

.button--light {
  border-color: var(--color-on-dark);
  background: var(--color-on-dark);
  color: var(--color-ink);
}

@media (hover: hover) {
  .button:hover {
    background: var(--color-ink-2);
  }

  .button--light:hover {
    background: var(--color-paper-2);
  }
}

.button:active {
  transform: translateY(1px);
}

.button[aria-disabled="true"],
.button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}

.button[aria-busy="true"] {
  cursor: wait;
  opacity: 0.7;
}

.button[data-state="error"] {
  border-color: var(--color-accent);
}

.button[data-state="error"]::after {
  content: "— try again";
}

.button[data-state="success"]::after {
  content: "✓";
}

.text-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  margin-top: var(--space-lg);
  font-size: var(--text-sm);
  font-weight: 600;
  text-underline-offset: 0.35em;
  text-decoration-thickness: var(--rule-thin);
  white-space: nowrap;
}

/* N6 · Newspaper masthead */

.masthead {
  position: relative;
  z-index: 20;
  background: var(--color-paper);
  border-block-end: var(--rule-double) double var(--color-ink);
}

.masthead__utility,
.masthead__main {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.masthead__utility {
  display: flex;
  min-height: 36px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  border-block-end: var(--rule-thin) solid var(--color-rule);
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.masthead__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-md);
  min-height: 92px;
}

.masthead__nav,
.masthead__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.masthead__actions {
  justify-content: flex-end;
}

.masthead__nav a,
.masthead__review-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: 500;
  text-decoration-color: transparent;
  text-underline-offset: 0.35em;
  white-space: nowrap;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
  .masthead__nav a:hover,
  .masthead__review-link:hover {
    text-decoration-color: var(--color-accent);
  }
}

.masthead__wordmark {
  font-size: clamp(2rem, 1.55rem + 1.8vw, 3.25rem);
  text-decoration: none;
  white-space: nowrap;
}

/* H6 · Photographic fold */

.hero {
  position: relative;
  display: grid;
  gap: var(--space-xl);
  padding: var(--space-2xl) var(--page-gutter);
  background: var(--color-paper-2);
  border-block-end: var(--rule-thin) solid var(--color-rule);
  isolation: isolate;
}

.hero__book {
  justify-self: center;
  width: min(78vw, 22rem);
  padding: var(--space-xs);
  background: var(--color-paper);
  border: var(--rule-thin) solid var(--color-ink);
}

.hero__book picture,
.hero__book img {
  display: block;
  width: 100%;
  height: auto;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero__edition,
.section-note {
  margin-bottom: var(--space-sm);
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.035em;
}

.hero h1 {
  max-width: 9ch;
  font-size: var(--text-display);
}

.hero__lede {
  max-width: 45ch;
  margin-top: var(--space-lg);
  color: var(--color-ink-2);
  font-size: var(--text-md);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  margin-top: var(--space-xl);
}

.hero__actions span {
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.hero__rating {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: var(--space-md);
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.hero__rating strong {
  color: var(--color-ink-2);
}

.js .hero__book {
  animation: hero-image-enter var(--dur-slow) var(--ease-out) both;
}

.js .hero__copy {
  animation: hero-object-enter var(--dur-slow) var(--ease-out) both;
  animation-delay: var(--dur-fast);
}

@keyframes hero-image-enter {
  from {
    opacity: 0.72;
  }
  to {
    opacity: 1;
  }
}

@keyframes hero-object-enter {
  from {
    transform: translateY(12px);
  }
  to {
    transform: translateY(0);
  }
}

/* Shared editorial heading rhythm */

.section-head {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.section-head h2 {
  max-width: 11ch;
  font-size: var(--text-display-s);
}

.section-head > p:last-child {
  max-width: 48ch;
  margin-top: var(--space-lg);
  color: var(--color-ink-2);
  text-wrap: pretty;
}

/* F2 · Sticky Feature Stack */

.story {
  padding-block: var(--space-3xl) 0;
  background: var(--color-paper);
}

.story__head {
  padding-block-end: var(--space-3xl);
}

.story__layout {
  max-width: var(--content-max-width);
  margin-inline: auto;
  border-block-start: var(--rule-thin) solid var(--color-rule);
}

.story-step {
  border-block-end: var(--rule-thin) solid var(--color-rule);
}

.story-step__copy {
  padding: var(--space-2xl) var(--page-gutter) var(--space-xl);
}

.story-step__number {
  display: block;
  margin-bottom: var(--space-2xl);
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.story-step h3 {
  max-width: 12ch;
  font-size: var(--text-2xl);
}

.story-step__copy > p {
  max-width: 45ch;
  margin-top: var(--space-lg);
  color: var(--color-ink-2);
  text-wrap: pretty;
}

.story-step__mobile-media {
  display: block;
  margin: 0 var(--page-gutter) var(--space-2xl);
  overflow: clip;
  aspect-ratio: 4 / 5;
  background: var(--color-paper-2);
}

.story-step__mobile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story__stage {
  display: none;
}

/* Gallery: local horizontal scroll on mobile, editorial mosaic on desktop. */

.gallery {
  padding-block: var(--space-4xl);
  background: var(--color-paper-2);
}

.gallery__head {
  padding-block-end: var(--space-2xl);
}

.gallery__grid {
  display: grid;
  grid-auto-columns: min(82vw, 22rem);
  grid-auto-flow: column;
  gap: var(--space-sm);
  margin: 0;
  padding: 0 var(--page-gutter) var(--space-sm);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: var(--page-gutter);
  scroll-snap-type: inline mandatory;
  list-style: none;
}

.gallery__item {
  min-width: 0;
  overflow: clip;
  aspect-ratio: 3 / 4;
  background: var(--color-paper-3);
  scroll-snap-align: start;
}

.gallery__item picture,
.gallery__item img {
  width: 100%;
  height: 100%;
}

.gallery__item img {
  object-fit: cover;
}

.gallery__hint {
  margin-top: var(--space-md);
  padding-inline: var(--page-gutter);
  color: var(--color-muted);
  font-size: var(--text-xs);
}

/* The shift: typography only, no scrub or reveal. */

.shift {
  background: var(--color-ink);
  color: var(--color-on-dark);
}

.shift__inner {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding: var(--space-3xl) var(--page-gutter);
}

.shift p {
  max-width: 16ch;
  font-family: var(--font-display);
  font-size: var(--text-display-s);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 0.98;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.shift p + p {
  margin-top: var(--space-xl);
  margin-inline-start: auto;
  text-align: end;
}

.shift span {
  text-decoration-color: var(--color-accent);
  text-decoration-line: underline;
  text-decoration-thickness: var(--rule-thin);
  text-underline-offset: 2px;
}

/* Live reviews · public proof stays separate from early-reader notes. */

.reviews-section {
  padding-block: var(--space-4xl);
  background: var(--color-paper);
}

/* Customer review ribbon · supplied 40-review library, two continuous rows. */

.customer-review-banner {
  overflow: clip;
  padding-block: var(--space-4xl);
  border-block: var(--rule-thin) solid var(--color-ink);
  background: var(--color-paper);
}

.customer-review-banner__head {
  display: grid;
  justify-items: center;
  padding-inline: var(--page-gutter);
  text-align: center;
}

.customer-review-banner__eyebrow {
  display: grid;
  grid-template-columns: minmax(2rem, 5rem) auto minmax(2rem, 5rem);
  align-items: center;
  gap: var(--space-sm);
}

.customer-review-banner__eyebrow > span {
  height: var(--rule-thin);
  background: var(--color-rule);
}

.customer-review-banner__eyebrow strong {
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.customer-review-banner__head h2 {
  max-width: 18ch;
  margin-top: var(--space-lg);
  font-family: var(--font-display);
  font-size: var(--text-display-s);
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.9;
  text-wrap: balance;
}

.customer-review-banner__head h2 span {
  color: var(--color-accent);
  font-style: normal;
  font-weight: inherit;
}

.customer-review-banner__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.customer-review-banner__summary strong {
  font-size: var(--text-lg);
}

.customer-review-banner__summary .review-stars {
  font-size: var(--text-sm);
}

.customer-review-banner__head > p {
  max-width: 54ch;
  margin-top: var(--space-sm);
  color: var(--color-muted);
  font-size: var(--text-sm);
  text-wrap: pretty;
}

.customer-review-banner__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: 44px;
  margin-top: var(--space-md);
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.review-marquee__toggle {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0 var(--space-sm);
  border: var(--rule-thin) solid var(--color-ink);
  border-radius: 999px;
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.review-marquee__toggle[hidden] {
  display: none;
}

.review-marquee__toggle-icon {
  width: 0.7rem;
  height: 0.85rem;
  border-inline: 0.16rem solid currentcolor;
}

[data-paused="true"] .review-marquee__toggle-icon {
  width: 0;
  height: 0;
  border-block: 0.42rem solid transparent;
  border-inline-start: 0.68rem solid currentcolor;
  border-inline-end: 0;
}

.review-marquee__toggle:active {
  transform: translateY(1px);
}

.review-marquee {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-2xl);
}

.review-marquee__viewport {
  max-width: 100%;
  overflow: hidden;
  padding-block: var(--space-3xs);
}

.review-marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
}

[data-ready="true"][data-motion="automatic"] .review-marquee__track {
  animation: review-ribbon-forward 108s linear infinite;
}

[data-ready="true"][data-motion="automatic"] .review-marquee__track--reverse {
  animation-direction: reverse;
  animation-duration: 116s;
}

[data-paused="true"] .review-marquee__track,
[data-page-hidden="true"] .review-marquee__track,
.review-marquee:hover .review-marquee__track,
.review-marquee:focus-within .review-marquee__track {
  animation-play-state: paused;
}

[data-paused="true"] .review-marquee__viewport,
.review-marquee__viewport:focus {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: var(--color-rule) transparent;
  scrollbar-width: thin;
}

.review-marquee__list {
  display: flex;
  flex: none;
  gap: var(--space-sm);
  margin: 0;
  padding: 0 var(--space-sm) 0 0;
  list-style: none;
}

.review-marquee__item {
  flex: 0 0 clamp(19rem, 34vw, 29rem);
}

.review-ribbon-card {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--space-sm);
  min-height: 10.5rem;
  padding: var(--space-md);
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: 1.35rem;
  background: var(--color-paper-2);
  box-shadow: 0 0.35rem 1.1rem color-mix(in oklch, var(--color-ink) 7%, transparent);
}

.review-ribbon-card__avatar {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: 50%;
  background: var(--color-paper);
  color: var(--color-ink-2);
  font-size: var(--text-xs);
  font-weight: 600;
}

.review-ribbon-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs);
}

.review-ribbon-card__meta strong {
  font-size: var(--text-xs);
}

.review-ribbon-card__stars {
  color: var(--color-accent);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  line-height: 1;
}

.review-ribbon-card h3 {
  margin-top: var(--space-2xs);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.25;
}

.review-ribbon-card p {
  display: -webkit-box;
  max-width: 54ch;
  margin-top: var(--space-2xs);
  overflow: hidden;
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-style: italic;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.google-review-cta {
  display: grid;
  gap: var(--space-xl);
  max-width: var(--content-max-width);
  margin: var(--space-2xl) auto 0;
  padding: var(--space-xl) var(--page-gutter);
  border-block: var(--rule-thin) solid var(--color-ink);
  background: var(--color-paper-2);
}

.google-review-cta__copy {
  display: grid;
  gap: var(--space-sm);
}

.google-review-cta__copy h3 {
  max-width: 16ch;
  font-size: var(--text-2xl);
  font-style: normal;
  line-height: 0.98;
}

.google-review-cta__copy p {
  max-width: 52ch;
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  text-wrap: pretty;
}

.google-review-cta__action {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--space-xs);
}

.google-review-cta__action .button {
  white-space: nowrap;
}

.google-review-cta__action .button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
}

.google-review-cta__action p {
  max-width: 46ch;
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.customer-review-banner__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  max-width: var(--content-max-width);
  margin: var(--space-xl) auto 0;
  padding-inline: var(--page-gutter);
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.customer-review-banner__foot a,
.review-marquee__noscript a {
  color: var(--color-ink);
}

.review-marquee__noscript {
  max-width: var(--content-max-width);
  margin: var(--space-xl) auto 0;
  padding-inline: var(--page-gutter);
  color: var(--color-ink-2);
}

@keyframes review-ribbon-forward {
  to {
    transform: translateX(-50%);
  }
}

@media (hover: hover) {
  .review-marquee__toggle:hover {
    background: var(--color-ink);
    color: var(--color-on-dark);
  }
}

@media (min-width: 48rem) {
  .google-review-cta {
    grid-template-columns: minmax(0, 7fr) minmax(16rem, 5fr);
    align-items: center;
  }

  .google-review-cta__action {
    justify-self: end;
  }
}

@media (max-width: 47.999rem) {
  .customer-review-banner {
    padding-block: var(--space-3xl);
  }

  .customer-review-banner__head h2 {
    font-size: clamp(3rem, 15vw, 5rem);
  }

  .review-marquee {
    margin-top: var(--space-xl);
  }

  .review-marquee__item {
    flex-basis: min(84vw, 23rem);
  }

  .review-ribbon-card {
    min-height: 11.5rem;
    padding: var(--space-sm);
  }
}

.reviews-section__head {
  padding-block-end: var(--space-2xl);
}

.reviews-section__head > p {
  max-width: 58ch;
}

.customer-reviews {
  display: grid;
  gap: var(--space-2xl);
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.review-overview {
  align-self: start;
  padding-block: var(--space-xl);
  border-block: var(--rule-thin) solid var(--color-ink);
}

.review-overview h3,
.early-notes__head h3,
.review-feed__empty h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.review-overview__score {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-block: var(--space-lg);
}

.review-overview__score > strong {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.review-overview__score > div {
  display: grid;
  gap: var(--space-3xs);
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.review-stars {
  color: var(--color-accent);
  font-size: var(--text-md);
  letter-spacing: 0.08em;
  line-height: 1;
}

.review-distribution {
  display: grid;
  gap: var(--space-xs);
  margin: 0 0 var(--space-xl);
  padding: 0;
  list-style: none;
}

.review-distribution li {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr) 2rem;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.review-distribution li > :last-child {
  text-align: end;
}

.review-distribution__track {
  height: var(--rule-double);
  overflow: clip;
  background: var(--color-paper-3);
}

.review-distribution__track > span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-accent);
  transform: scaleX(var(--review-share, 0));
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}

.button--outline {
  background: transparent;
  color: var(--color-ink);
}

.review-feed {
  min-width: 0;
  border-block-start: var(--rule-thin) solid var(--color-ink);
}

.review-feed__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  padding-block: var(--space-sm);
  border-block-end: var(--rule-thin) solid var(--color-rule);
}

.review-feed__toolbar button {
  min-height: 44px;
  padding: 0 var(--space-sm);
  border: var(--rule-thin) solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.review-feed__toolbar button[aria-pressed="true"] {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-on-dark);
}

.review-feed__toolbar button:active {
  transform: translateY(1px);
}

.review-feed__status,
.review-feed__noscript {
  min-height: 1.55em;
  padding-block: var(--space-sm);
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.review-feed__status[data-state="error"] {
  color: var(--color-accent);
}

.review-feed__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.customer-review {
  padding-block: var(--space-xl);
  border-block-end: var(--rule-thin) solid var(--color-rule);
}

.customer-review.is-entering {
  animation: review-enter var(--dur-base) var(--ease-out) both;
}

@keyframes review-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.customer-review__meta,
.customer-review__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.customer-review__meta .review-stars {
  font-size: var(--text-sm);
}

.customer-review h3 {
  max-width: 32ch;
  margin-top: var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.025em;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.customer-review__body {
  max-width: 65ch;
  margin-top: var(--space-md);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  white-space: pre-line;
  text-wrap: pretty;
}

.customer-review__byline {
  margin-top: var(--space-lg);
}

.customer-review__byline strong {
  color: var(--color-ink);
}

.customer-review__photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2xs);
  margin-block-start: var(--space-lg);
}

.customer-review__photo {
  position: relative;
  overflow: clip;
  aspect-ratio: 4 / 5;
  background: var(--color-paper-3);
}

.customer-review__photo img {
  width: 100%;
  height: 100%;
  color: transparent;
  font-size: 0;
  object-fit: cover;
}

.customer-review__photo span {
  position: absolute;
  inset-block-start: var(--space-xs);
  inset-inline-start: var(--space-xs);
  padding: var(--space-3xs) var(--space-2xs);
  background: var(--color-paper);
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: 600;
}

.review-feed__empty {
  padding-block: var(--space-2xl);
  border-block-end: var(--rule-thin) solid var(--color-ink);
}

.review-feed__empty p {
  max-width: 55ch;
  margin-block: var(--space-sm) var(--space-md);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
}

.review-feed__more {
  margin-block-start: var(--space-xl);
}

.google-reviews {
  display: grid;
  gap: var(--space-2xl);
  max-width: var(--content-max-width);
  margin: var(--space-4xl) auto 0;
  padding: var(--space-2xl) var(--page-gutter);
  border-block: var(--rule-thin) solid var(--color-ink);
  background: var(--color-paper-2);
}

.google-reviews__head,
.google-reviews__content {
  min-width: 0;
}

.google-maps-attribution {
  display: block;
  width: 98px;
  height: 18px;
}

.google-reviews__head h3 {
  max-width: 11ch;
  margin-top: var(--space-md);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
  overflow-wrap: anywhere;
}

.google-reviews__head > p {
  max-width: 54ch;
  margin-top: var(--space-md);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  text-wrap: pretty;
}

.google-reviews__summary {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  padding-block-start: var(--space-lg);
  border-block-start: var(--rule-thin) solid var(--color-rule);
}

.google-reviews__summary > strong {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.google-reviews__summary > div {
  display: grid;
  gap: var(--space-3xs);
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.google-reviews__status {
  min-height: 1.5em;
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.google-reviews__status[data-state="error"] {
  color: var(--color-accent);
}

.no-js .google-reviews__status {
  display: none;
}

.google-reviews__empty {
  margin-top: var(--space-lg);
  padding-block: var(--space-xl);
  border-block: var(--rule-thin) solid var(--color-rule);
}

.google-reviews__empty h4 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-style: normal;
  font-weight: 400;
}

.google-reviews__empty p {
  max-width: 58ch;
  margin-top: var(--space-sm);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
}

.google-reviews__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: var(--space-lg) 0 0;
  padding: 0;
  border-block-start: var(--rule-thin) solid var(--color-rule);
  list-style: none;
}

.google-review {
  min-width: 0;
  padding-block: var(--space-xl);
  border-block-end: var(--rule-thin) solid var(--color-rule);
}

.google-review__author {
  display: flex;
  align-items: center;
}

.google-review__author img,
.google-review__avatar-fallback {
  display: block;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
}

.google-review__author img {
  object-fit: cover;
}

.google-review__avatar-fallback {
  display: grid;
  place-items: center;
  background: var(--color-paper-3);
  color: var(--color-ink);
  font-weight: 600;
}

.google-review__author > a {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-ink);
  text-decoration: none;
}

.google-review__author > a > div {
  display: grid;
  gap: var(--space-3xs);
  min-width: 0;
}

.google-review__author > a > div > span:first-child {
  width: fit-content;
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.google-review__author .review-stars {
  font-size: var(--text-xs);
}

.google-review__meta,
.google-review__translated {
  margin-top: var(--space-sm);
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.google-review blockquote {
  max-width: 64ch;
  margin-top: var(--space-lg);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  text-wrap: pretty;
}

.google-review__actions,
.google-reviews__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

.google-review__actions {
  margin-top: var(--space-lg);
}

.google-review__actions a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: 600;
  text-underline-offset: 0.18em;
  white-space: nowrap;
}

.google-reviews__foot > a:not(.button) {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  white-space: nowrap;
}

@media (hover: hover) {
  .google-review__author > a:hover,
  .google-review__actions a:hover,
  .google-reviews__foot > a:hover {
    color: var(--color-accent);
  }
}

.google-review__author > a:active,
.google-review__actions a:active,
.google-reviews__foot > a:active {
  color: var(--color-ink-2);
}

.google-reviews__foot {
  margin-top: var(--space-xl);
}

.google-reviews__foot p {
  flex: 1 1 30rem;
  max-width: 64ch;
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.review-demo {
  max-width: var(--content-max-width);
  margin: var(--space-3xl) auto 0;
  padding: var(--space-xl) var(--page-gutter);
  border-block: var(--rule-thin) solid var(--color-accent);
}

.review-demo__head {
  display: grid;
  gap: var(--space-sm);
}

.review-demo__flag {
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: 600;
}

.review-demo__head h3 {
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  overflow-wrap: anywhere;
}

.review-demo__head > p:last-child {
  max-width: 68ch;
  color: var(--color-ink-2);
  font-size: var(--text-sm);
}

.review-demo__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  margin: var(--space-xl) 0 0;
  padding: 0;
  list-style: none;
}

.review-demo__card {
  min-width: 0;
  padding-block-end: var(--space-lg);
  border-block-end: var(--rule-thin) solid var(--color-rule);
}

.review-demo__card .customer-review__photos {
  margin-block-start: 0;
}

.review-demo__card figcaption {
  display: grid;
  gap: var(--space-3xs);
  margin-block-start: var(--space-sm);
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.review-demo__card figcaption strong {
  color: var(--color-ink);
}

.review-demo__sources {
  display: block;
  margin-block-start: var(--space-2xs);
  font-size: var(--text-xs);
  line-height: 1.5;
}

.review-demo__sources a {
  color: var(--color-ink);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.review-demo__sources a:hover {
  color: var(--color-accent);
}

.early-notes {
  max-width: var(--content-max-width);
  margin: var(--space-4xl) auto 0;
}

.early-notes__head {
  display: grid;
  gap: var(--space-sm);
  padding: 0 var(--page-gutter) var(--space-xl);
}

.early-notes__head p {
  max-width: 58ch;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.reviews {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-inline: var(--page-gutter);
  border-block-start: var(--rule-thin) solid var(--color-ink);
}

.review {
  padding-block: var(--space-xl);
  border-block-end: var(--rule-thin) solid var(--color-rule);
}

.review blockquote > p:first-child {
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.review blockquote > p + p {
  max-width: 55ch;
  margin-top: var(--space-md);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  text-wrap: pretty;
}

.review figcaption {
  margin-top: var(--space-lg);
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 600;
}

.review figcaption::before {
  color: var(--color-accent);
  content: "— ";
}

.review-contribute {
  display: grid;
  gap: var(--space-2xl);
  max-width: var(--content-max-width);
  margin: var(--space-4xl) auto 0;
  padding: var(--space-2xl) var(--page-gutter) 0;
  border-block-start: var(--rule-thin) solid var(--color-ink);
}

.review-contribute__intro h3 {
  max-width: 10ch;
  font-size: var(--text-2xl);
}

.review-contribute__intro > p:not(.section-note) {
  max-width: 58ch;
  margin-top: var(--space-lg);
  color: var(--color-ink-2);
  text-wrap: pretty;
}

.review-contribute__notice {
  padding-block-start: var(--space-md);
  border-block-start: var(--rule-thin) solid var(--color-rule);
  font-size: var(--text-xs);
}

.review-contribute__notice strong {
  color: var(--color-ink);
}

.review-form,
.review-form__pair {
  display: grid;
  gap: var(--space-lg);
  align-self: start;
}

.review-form__summary {
  padding: var(--space-sm) 0;
  border-block: var(--rule-thin) solid var(--color-accent);
  color: var(--color-accent);
  font-size: var(--text-sm);
}

.review-form__summary ul {
  display: grid;
  gap: var(--space-3xs);
  margin: var(--space-2xs) 0 0;
  padding-inline-start: var(--space-md);
}

.review-field,
.review-photos,
.review-rating {
  min-width: 0;
}

.review-field__label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
}

.review-field__label-row label,
.review-photos legend,
.review-rating legend,
.review-upload > span {
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 600;
}

.review-field__required,
.review-field__count,
.review-photos legend span,
.review-rating legend span {
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 400;
}

.review-control {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  margin-top: var(--space-2xs);
  padding: var(--space-xs) var(--space-sm);
  border: var(--rule-thin) solid var(--color-ink-2);
  border-radius: var(--radius-sm);
  outline: 2px solid transparent;
  outline-offset: 1px;
  background: var(--color-paper);
  color: var(--color-ink);
  font: inherit;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.review-control:focus-visible {
  outline-color: var(--color-focus);
}

.review-control:active {
  border-color: var(--color-ink);
}

.review-control--textarea {
  min-height: 10rem;
  line-height: 1.55;
  resize: vertical;
}

.review-control--file {
  padding: var(--space-2xs);
  font-size: var(--text-xs);
}

.review-control--file::file-selector-button {
  min-height: 44px;
  margin-inline-end: var(--space-sm);
  padding: var(--space-2xs) var(--space-sm);
  border: var(--rule-thin) solid var(--color-ink);
  border-radius: var(--radius-sm);
  background: var(--color-paper-2);
  color: var(--color-ink);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}

.review-control:disabled {
  background: var(--color-paper-2);
  cursor: not-allowed;
  opacity: 0.55;
}

.review-field[data-state="error"] .review-control,
.review-photos[data-state="error"] .review-control,
.review-rating[data-state="error"] .review-rating__options {
  border-color: var(--color-accent);
}

.review-field[data-state="error"] .review-field__message,
.review-photos[data-state="error"] .review-field__message,
.review-rating[data-state="error"] .review-field__message {
  color: var(--color-accent);
}

.review-field[data-state="success"] .review-control {
  border-color: var(--color-ink);
}

.review-field__message {
  min-height: 1.55em;
  margin-top: var(--space-2xs);
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.review-photos,
.review-rating {
  margin: 0;
  padding: 0;
  border: 0;
}

.review-photos__grid {
  display: grid;
  gap: var(--space-sm);
}

.review-upload {
  display: grid;
  min-width: 0;
}

.review-rating__options {
  display: grid;
  grid-template-columns: repeat(5, minmax(44px, 1fr));
  gap: var(--space-3xs);
  margin-top: var(--space-2xs);
  border: var(--rule-thin) solid transparent;
}

.review-rating__options input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
}

.review-rating__options label {
  display: grid;
  min-width: 44px;
  min-height: 48px;
  place-items: center;
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  cursor: pointer;
  font-size: var(--text-lg);
}

.review-rating__options input:focus-visible + label {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.review-rating__options input:checked + label {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-on-dark);
}

.review-consent {
  display: flex;
  min-height: 44px;
  align-items: flex-start;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
  color: var(--color-ink-2);
  cursor: pointer;
  font-size: var(--text-sm);
}

.review-consent input {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin: var(--space-3xs) 0 0;
  outline: 2px solid transparent;
  outline-offset: 1px;
  accent-color: var(--color-accent);
}

.review-consent input:focus-visible {
  outline-color: var(--color-focus);
}

.review-consent input:active {
  outline-color: var(--color-ink-2);
}

.review-field--consent .review-consent {
  margin-top: 0;
}

.review-turnstile {
  display: grid;
  gap: var(--space-2xs);
  min-width: 0;
}

.review-turnstile p {
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.review-form__actions {
  display: grid;
  gap: var(--space-sm);
  align-items: center;
}

.review-form__submit {
  justify-self: start;
}

.review-form__status {
  min-height: 3.1em;
  max-width: 58ch;
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.review-form__status[data-state="error"] {
  color: var(--color-accent);
}

.review-form__status[data-state="success"] {
  color: var(--color-ink-2);
}

.review-form__noscript {
  padding-block: var(--space-sm);
  border-block: var(--rule-thin) solid var(--color-accent);
  color: var(--color-accent);
  font-size: var(--text-sm);
}

.review-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: clip;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (hover: hover) {
  .button--outline:hover,
  .review-feed__toolbar button:hover:not([aria-pressed="true"]),
  .review-rating__options label:hover,
  .review-control:hover:not(:disabled) {
    background: var(--color-paper-2);
    color: var(--color-ink);
  }

  .review-control--file::file-selector-button:hover {
    background: var(--color-paper-3);
  }
}

/* FAQ */

.faq {
  display: grid;
  gap: var(--space-2xl);
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding: var(--space-4xl) var(--page-gutter);
  background: var(--color-paper-2);
}

.faq__head {
  padding-inline: 0;
}

.faq__list {
  border-block-start: var(--rule-thin) solid var(--color-ink);
}

.faq__item {
  border-block-end: var(--rule-thin) solid var(--color-rule);
}

.faq__item summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-md);
  min-height: 68px;
  padding-block: var(--space-sm);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  list-style: none;
}

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

.faq__icon {
  position: relative;
  width: 24px;
  height: 24px;
}

.faq__icon::before,
.faq__icon::after {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 14px;
  height: var(--rule-thin);
  background: var(--color-ink);
  content: "";
  transform: translate(-50%, -50%);
  transition: transform var(--dur-base) var(--ease-out);
}

.faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq__item[open] .faq__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq__item > p {
  max-width: 58ch;
  padding: 0 var(--space-2xl) var(--space-lg) 0;
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  text-wrap: pretty;
}

@media (hover: hover) {
  .faq__item summary:hover {
    color: var(--color-ink-2);
  }
}

/* Purchase close */

.buy {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--color-ink);
  color: var(--color-on-dark);
}

.buy :focus-visible,
.footer :focus-visible,
.buy-bar :focus-visible {
  outline-color: var(--color-focus-on-dark);
}

.buy__media {
  padding: var(--space-2xl) var(--page-gutter) 0;
}

.buy__media picture {
  display: block;
  width: min(72vw, 22rem);
  margin-inline: auto;
  border: var(--rule-thin) solid var(--color-on-dark);
}

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

.buy__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-2xl) var(--page-gutter) var(--space-3xl);
}

.buy .section-note {
  color: var(--color-paper-3);
}

.buy h2 {
  max-width: 9ch;
  font-size: var(--text-display-s);
}

.buy__promise {
  max-width: 45ch;
  margin-top: var(--space-lg);
  color: var(--color-paper-3);
  text-wrap: pretty;
}

.buy__price {
  margin-block: var(--space-xl) var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.buy__reassurance {
  margin-top: var(--space-md);
  color: var(--color-paper-3);
  font-size: var(--text-xs);
}

/* Ft1 · Mast-headed footer */

.footer {
  display: grid;
  gap: var(--space-lg);
  padding: var(--space-2xl) var(--page-gutter) var(--space-3xl);
  background: var(--color-paper);
  border-block-start: var(--rule-double) double var(--color-ink);
}

.footer__wordmark {
  width: fit-content;
  font-size: var(--text-display-s);
  text-decoration: none;
}

.footer > p {
  color: var(--color-ink-2);
}

.footer__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-block-start: var(--rule-thin) solid var(--color-rule);
  color: var(--color-muted);
  font-size: var(--text-xs);
}

/* After-fold purchase bar */

.buy-bar {
  position: fixed;
  inset-inline: var(--space-sm);
  inset-block-end: var(--space-sm);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  max-width: 36rem;
  margin-inline: auto;
  padding: var(--space-xs);
  background: var(--color-ink);
  color: var(--color-on-dark);
  border: var(--rule-thin) solid var(--color-on-dark);
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(100% + var(--space-lg)));
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.buy-bar.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
}

.buy-bar p {
  display: grid;
  line-height: 1.2;
}

.buy-bar strong {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
}

.buy-bar p span {
  color: var(--color-paper-3);
  font-size: var(--text-xs);
}

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

  .faq__head {
    position: sticky;
    inset-block-start: var(--space-xl);
  }

  .reviews {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--space-2xl);
  }

  .review--lead {
    grid-row: span 2;
    padding-inline-end: var(--space-xl);
    border-inline-end: var(--rule-thin) solid var(--color-rule);
  }

  .review--lead blockquote > p:first-child {
    font-size: var(--text-2xl);
  }

  .review--closing {
    border-block-end-color: var(--color-ink);
  }

  .review-photos__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .review-form__pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .review-form__actions {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-md);
  }

}

@media (min-width: 60rem) {
  .hero {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: minmax(34rem, calc(100svh - var(--masthead-height)));
    align-items: center;
  }

  .hero__book {
    justify-self: center;
    width: min(90%, 26rem);
    padding: var(--space-sm);
  }

  .story__layout {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    padding-inline-start: var(--page-gutter);
  }

  .story__steps {
    padding-inline-end: var(--space-2xl);
  }

  .story-step {
    display: flex;
    min-height: 82svh;
    align-items: center;
  }

  .story-step__copy {
    padding: var(--space-3xl) 0;
  }

  .story-step__mobile-media {
    display: none;
  }

  .story__stage {
    position: sticky;
    inset-block-start: 0;
    display: block;
    height: 100svh;
    overflow: clip;
    background: var(--color-ink);
  }

  .story__media {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--dur-base) var(--ease-in-out), transform var(--dur-base) var(--ease-out);
  }

  .story__media.is-active {
    opacity: 1;
    transform: translateY(0);
  }

  .story__media picture,
  .story__media img {
    width: 100%;
    height: 100%;
  }

  .story__media img {
    object-fit: cover;
  }

  .story__caption {
    position: absolute;
    inset-inline-end: var(--space-sm);
    inset-block-end: var(--space-sm);
    z-index: 4;
    padding: var(--space-2xs) var(--space-xs);
    background: var(--color-paper);
    color: var(--color-muted);
    font-size: var(--text-xs);
  }

  .no-js .story__layout {
    align-items: start;
  }

  .no-js .story__steps {
    padding-block: var(--space-xl);
  }

  .no-js .story-step {
    min-height: auto;
  }

  .no-js .story__stage {
    position: static;
    display: grid;
    height: auto;
  }

  .no-js .story__media {
    position: relative;
    inset: auto;
    opacity: 1;
    transform: none;
  }

  .no-js .story__caption {
    display: none;
  }

  .gallery__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-columns: auto;
    grid-auto-flow: dense;
    grid-auto-rows: 14rem;
    gap: var(--space-sm);
    max-width: var(--content-max-width);
    margin-inline: auto;
    padding: 0 var(--page-gutter);
    overflow: visible;
    scroll-snap-type: none;
  }

  .gallery__item {
    grid-column: span 2;
    aspect-ratio: auto;
  }

  .gallery__item--wide {
    grid-column: span 3;
  }

  .gallery__item--tall {
    grid-row: span 2;
  }

  .gallery__hint {
    display: none;
  }

  .customer-reviews {
    grid-template-columns: minmax(15rem, 4fr) minmax(0, 8fr);
    align-items: start;
  }

  .google-reviews {
    grid-template-columns: minmax(15rem, 4fr) minmax(0, 8fr);
    align-items: start;
  }

  .google-reviews__head {
    position: sticky;
    inset-block-start: var(--space-xl);
    padding-inline-end: var(--space-xl);
  }

  .google-reviews__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .google-reviews__list > li:nth-child(odd) .google-review {
    padding-inline-end: var(--space-xl);
    border-inline-end: var(--rule-thin) solid var(--color-rule);
  }

  .google-reviews__list > li:nth-child(even) .google-review {
    padding-inline-start: var(--space-xl);
  }

  .review-overview {
    position: sticky;
    inset-block-start: var(--space-xl);
    padding-inline-end: var(--space-xl);
  }

  .review-demo__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .review-contribute {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }

  .review-contribute__intro {
    grid-column: 1;
    grid-row: 1 / span 2;
    padding-inline-end: var(--space-xl);
  }

  .review-form {
    grid-column: 2;
  }

  .buy {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    min-height: 48rem;
  }

  .buy__media {
    display: grid;
    place-items: center;
    padding: var(--space-3xl) var(--page-gutter);
    background: var(--color-paper-2);
  }

  .buy__media picture {
    width: min(72%, 28rem);
    border-color: var(--color-ink);
  }

  .buy__copy {
    padding: var(--space-3xl) clamp(var(--space-2xl), 7vw, var(--space-4xl));
  }

  .footer {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: end;
  }

  .footer__meta {
    grid-column: 1 / -1;
  }

  .buy-bar {
    inset-inline: auto var(--space-lg);
    margin-inline: 0;
    min-width: 27rem;
  }
}

@supports ((animation-timeline: view()) and (animation-range: 0% 100%)) {
  @media (min-width: 60rem) and (prefers-reduced-motion: no-preference) {
    .has-native-story .story__layout {
      timeline-scope: --story-one, --story-two, --story-three;
    }

    .has-native-story [data-story-step="0"] {
      view-timeline: --story-one block;
    }

    .has-native-story [data-story-step="1"] {
      view-timeline: --story-two block;
    }

    .has-native-story [data-story-step="2"] {
      view-timeline: --story-three block;
    }

    .has-native-story [data-story-media] {
      animation: story-media linear both;
      animation-range: entry 0% exit 100%;
    }

    .has-native-story [data-story-media="0"] {
      animation-timeline: --story-one;
    }

    .has-native-story [data-story-media="1"] {
      animation-timeline: --story-two;
    }

    .has-native-story [data-story-media="2"] {
      animation-timeline: --story-three;
    }

    @keyframes story-media {
      0%, 100% {
        opacity: 0;
        transform: translateY(12px);
      }
      22%, 78% {
        opacity: 1;
        transform: translateY(0);
      }
    }
  }
}

@media (max-width: 47.999rem) {
  .masthead__utility span:first-child,
  .masthead__nav,
  .masthead__review-link {
    display: none;
  }

  .masthead__utility {
    justify-content: center;
  }

  .masthead__main {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 76px;
  }

  .masthead__wordmark {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .masthead__actions {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (max-width: 23.5rem) {
  .masthead__wordmark {
    font-size: 1.8rem;
  }

  .masthead__main {
    gap: var(--space-xs);
  }

  .masthead .button--compact {
    padding-inline: var(--space-sm);
  }

  .hero__actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .buy-bar p span {
    display: none;
  }
}

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

  .js .hero__image,
  .js .hero__copy,
  .js .hero__book {
    animation: none;
  }

  .button,
  .review-feed__toolbar button,
  .review-distribution__track > span,
  .faq__icon::before,
  .faq__icon::after,
  .buy-bar,
  .story__media {
    transition-duration: 0s;
  }

  .button:active {
    transform: none;
  }

  .customer-review.is-entering {
    animation: none;
  }

  .review-marquee__viewport {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-color: var(--color-rule) transparent;
    scrollbar-width: thin;
  }

  .review-marquee__track {
    animation: none !important;
    transform: none !important;
  }

  .review-marquee__list--clone {
    display: none;
  }

  .review-marquee__item {
    scroll-snap-align: center;
  }

  .review-marquee__toggle {
    transition: none;
  }

  .story__media {
    animation: none !important;
    transform: none !important;
  }
}