@font-face {
  font-family: 'Space Grotesk';
  src: url('assets/space-grotesk.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/inter.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
* {
  box-sizing: border-box;
}
html {
  background: var(--bg);
  color: var(--text);
  scroll-padding-top: var(--space-xxl);
}
body {
  margin: 0;
  font-family: var(--type-body-family), system-ui, sans-serif;
  font-size: var(--type-body-size);
  line-height: 1.65;
}
.wrap {
  width: min(calc(100% - 2 * var(--space-xxxl)), var(--content-max-width));
  margin-inline: auto;
}
p,
h1,
h2,
h3,
figure {
  margin: 0;
}
h1,
h2,
h3,
.brand,
.timer {
  font-family: var(--type-display-family), system-ui, sans-serif;
  font-weight: var(--type-display-weight);
}
h1 {
  font-size: clamp(calc(var(--hero-type) * 0.68), 5.3vw, var(--hero-type));
  line-height: 1.06;
  letter-spacing: -0.055em;
}
h2 {
  font-size: clamp(var(--type-display-size), 3.4vw, calc(var(--section-type) * 0.72));
  line-height: 1.12;
  letter-spacing: -0.045em;
}
h3 {
  font-size: var(--type-screen-title-size);
  line-height: 1.2;
  letter-spacing: -0.035em;
}
a {
  color: inherit;
  text-underline-offset: var(--space-xs);
}
a:focus-visible {
  outline: var(--active-rule) solid var(--text);
  outline-offset: var(--space-xs);
}
svg {
  display: block;
  width: 100%;
  height: auto;
}
.muted,
.lede,
.feature-copy > p:last-child,
.share-copy > p,
.own-pace > p {
  color: var(--text-dim);
}
.small,
.intro-note,
.room-meta,
.room-preview figcaption {
  font-size: var(--type-field-label-size);
}
.eyebrow {
  font-size: var(--type-field-label-size);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1.5;
  color: var(--text-dim);
}
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-xl);
  gap: var(--space-lg);
  border-bottom: var(--hairline) solid var(--line);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  font-size: var(--type-list-title-size);
  min-height: var(--control-min-height);
  white-space: nowrap;
}
.brand img {
  width: var(--mark-size);
  height: var(--mark-size);
}
.masthead nav {
  display: flex;
  align-items: center;
  gap: var(--space-xxl);
}
.masthead nav a {
  text-decoration: none;
}
.nav-about {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-min-height);
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  background: var(--accent-fill);
  color: var(--accent-ink);
  border: var(--hairline) solid var(--accent-edge);
  border-radius: var(--radius-control);
  min-height: var(--input-height);
  padding: var(--space-md) var(--space-xl);
  text-decoration: none;
  font-size: var(--type-button-size);
}
.button-small {
  min-height: var(--control-min-height);
  padding: var(--space-sm) var(--space-lg);
  gap: var(--space-lg);
}
.button:hover {
  background: var(--panel);
  color: var(--text);
}
.intro {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: center;
  gap: var(--space-xxxl);
  padding-block: calc(var(--space-xxxl) * 1.8);
}
.intro-copy {
  display: grid;
  gap: var(--space-xl);
}
.intro-copy > .eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.status-dot {
  width: var(--space-sm);
  height: var(--space-sm);
  border-radius: 50%;
  background: var(--accent-fill);
  border: var(--hairline) solid var(--accent-edge);
  flex-shrink: 0;
}
.headline-accent {
  position: relative;
  text-decoration: underline;
  text-decoration-color: var(--accent-fill);
  text-decoration-thickness: var(--space-sm);
  text-underline-offset: var(--space-sm);
}
.lede {
  max-width: var(--copy-max-width);
  font-size: var(--type-list-title-size);
  line-height: 1.7;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg);
  padding-top: var(--space-sm);
}
.intro-note {
  color: var(--text-dim);
}
.room-preview {
  padding: var(--space-xxl) var(--space-lg) var(--space-xl);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-sheet);
  background: var(--panel);
  min-width: 0;
  transform: rotate(-1deg);
}
.room-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-inline: var(--space-lg);
}
.room-heading h2 {
  font-size: var(--type-screen-title-size);
  margin-top: var(--space-sm);
  letter-spacing: -0.03em;
}
.room-symbol {
  font-size: var(--type-display-size);
  color: var(--text);
}
.room-meta {
  margin: var(--space-lg) var(--space-lg) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  color: var(--text-dim);
}
.pill {
  border-radius: var(--radius-control);
  padding: var(--space-xs) var(--space-md);
  background: var(--soft);
  color: var(--text);
  white-space: nowrap;
}
.shelf-art {
  margin-top: var(--space-md);
}
.room-preview figcaption {
  text-align: center;
  color: var(--text-dim);
  margin-top: var(--space-xl);
}
.principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-block: var(--hairline) solid var(--line);
  padding-block: var(--space-xl);
  gap: var(--space-lg);
}
.principles p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
}
.principles p + p {
  border-left: var(--hairline) solid var(--line);
}
.principles span {
  font-size: var(--type-sheet-title-size);
}
.details {
  padding-block: calc(var(--space-xxxl) * 2);
}
.section-heading {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl) var(--space-xxxl);
  align-items: end;
  margin-bottom: var(--space-xxxl);
}
.section-heading > .eyebrow {
  grid-column: 1 / -1;
}
.section-heading > p:last-child {
  color: var(--text-dim);
  max-width: var(--copy-max-width);
}
.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
}
.feature-card {
  border-radius: var(--radius-sheet);
  background: var(--soft);
  padding: var(--space-xxl);
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.feature-copy {
  display: grid;
  gap: var(--space-md);
}
.feature-copy > .eyebrow {
  margin-bottom: var(--space-sm);
}
.memory-composition {
  display: flex;
  align-items: center;
  margin-block: var(--space-xxxl) var(--space-xl);
  min-height: calc(var(--cover-width) * 1.8);
}
.memory-book {
  width: var(--cover-width);
  flex-shrink: 0;
  transform: rotate(-6deg);
}
.memory-note {
  position: relative;
  background: var(--panel);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--space-xl);
  margin-left: calc(-1 * var(--space-md));
  transform: rotate(3deg);
  display: grid;
  gap: var(--space-md);
}
.memory-note > p:nth-child(2) {
  font-size: var(--type-body-size);
  line-height: 1.6;
}
.note-rule {
  border-top: var(--hairline) solid var(--line);
}
.session-preview {
  background: var(--panel);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-card);
  text-align: center;
  padding: var(--space-xl);
  margin-top: var(--space-xxl);
  display: grid;
  justify-items: center;
  gap: var(--space-sm);
  flex: 1;
  align-content: center;
}
.session-label {
  color: var(--text-dim);
  font-size: var(--type-field-label-size);
}
.timer {
  font-size: var(--section-type);
  line-height: 1.3;
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
}
.timer > span {
  color: var(--text-dim);
}
.sound-label {
  border-top: var(--hairline) solid var(--line);
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-size: var(--type-field-label-size);
  width: 100%;
}
.sound-label svg {
  width: var(--space-xl);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}
.share-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: calc(var(--space-xxxl) * 2);
  background: var(--soft);
  padding: var(--space-xxxl);
  border-radius: var(--radius-sheet);
}
.share-copy {
  display: grid;
  gap: var(--space-xl);
}
.quiet-list {
  padding: 0;
  list-style: none;
  margin: 0;
}
.quiet-list li {
  border-top: var(--hairline) solid var(--line);
  padding-block: var(--space-md);
  font-size: var(--type-button-size);
}
.share-preview {
  max-width: var(--copy-max-width);
  width: 100%;
  padding: var(--space-xxl);
  background: var(--bg);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-card);
  transform: rotate(3deg);
}
.share-cover {
  width: min(75%, calc(var(--cover-width) * 1.4));
  margin-inline: auto;
}
.share-preview figcaption {
  display: grid;
  gap: var(--space-xs);
  text-align: center;
  margin-top: var(--space-xl);
}
.share-finished {
  font-family: var(--type-display-family), sans-serif;
  font-weight: 700;
  font-size: var(--type-list-title-size);
}
.share-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: var(--hairline) solid var(--line);
  font-size: var(--type-button-size);
}
.own-pace {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xxxl);
  padding-block: calc(var(--space-xxxl) * 2);
  align-items: center;
}
.own-pace h2 {
  margin-top: var(--space-lg);
  font-size: var(--type-display-size);
}
.availability {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xxxl);
  padding: var(--space-xxxl);
  background: var(--accent-fill);
  color: var(--accent-ink);
  border-radius: var(--radius-sheet);
}
.availability .eyebrow {
  color: inherit;
}
.availability h2 {
  margin-block: var(--space-lg) var(--space-xl);
}
.store-badges {
  padding: 0;
  margin: 0;
  list-style: none;
  display: grid;
  gap: var(--space-md);
}
.store-badges li {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  border: var(--hairline) solid currentColor;
  border-radius: var(--radius-control);
  padding: var(--space-md) var(--space-xl);
}
.store-badges svg {
  width: var(--space-xl);
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  flex-shrink: 0;
}
.store-badges li > div {
  display: grid;
}
.store-name {
  font-size: var(--type-list-title-size);
  font-family: var(--type-display-family), sans-serif;
  font-weight: 700;
}
footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-xl);
  padding-block: var(--space-xxxl);
}
footer > div > p {
  margin-top: var(--space-sm);
}
footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl);
}
footer nav a {
  min-height: var(--control-min-height);
  display: inline-flex;
  align-items: center;
  font-size: var(--type-button-size);
}
.skip {
  position: absolute;
  top: 0;
  left: var(--space-lg);
  transform: translateY(-110%);
  padding: var(--space-md);
  background: var(--panel);
  z-index: 2;
}
.skip:focus {
  transform: none;
}
@media (max-width: 960px) {
  .wrap {
    width: calc(100% - 2 * var(--space-xxl));
  }
  .intro {
    gap: var(--space-xxl);
    padding-block: var(--space-xxxl);
  }
  .room-preview {
    padding: var(--space-xl) var(--space-sm);
    transform: none;
  }
  .room-meta {
    flex-wrap: wrap;
  }
  .feature-card {
    padding: var(--space-xl);
  }
  .memory-book {
    width: calc(var(--cover-width) * 0.75);
  }
  .memory-note {
    padding: var(--space-lg);
  }
  .share-section {
    padding: var(--space-xxl);
    gap: var(--space-xxxl);
  }
  .share-preview {
    padding: var(--space-xl);
  }
}
@media (max-width: 700px) {
  .wrap {
    width: calc(100% - 2 * var(--space-xl));
  }
  .masthead {
    padding-block: var(--space-lg);
  }
  .masthead nav {
    gap: var(--space-sm);
  }
  .nav-about {
    display: none;
  }
  .intro {
    grid-template-columns: 1fr;
    gap: var(--space-xxxl);
  }
  .intro-copy {
    gap: var(--space-xl);
  }
  .room-preview {
    padding-block: var(--space-xl);
  }
  .principles {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    padding-block: var(--space-xl);
  }
  .principles p {
    justify-content: flex-start;
  }
  .principles p + p {
    border: 0;
  }
  .details {
    padding-block: var(--space-xxxl);
  }
  .section-heading,
  .feature-grid,
  .share-section,
  .own-pace {
    grid-template-columns: 1fr;
  }
  .section-heading {
    gap: var(--space-lg);
    margin-bottom: var(--space-xxl);
  }
  .feature-card {
    padding: var(--space-xl);
  }
  .memory-composition {
    margin-block: var(--space-xxl) var(--space-md);
  }
  .memory-note {
    padding: var(--space-lg);
  }
  .memory-note > .eyebrow {
    font-size: var(--type-field-label-size);
    letter-spacing: 0.04em;
  }
  .memory-book {
    width: calc(var(--cover-width) * 0.8);
  }
  .share-section {
    padding: var(--space-xl);
    gap: var(--space-xxl);
  }
  .share-preview {
    transform: none;
    max-width: var(--copy-max-width);
  }
  .own-pace {
    padding-block: var(--space-xxxl);
    gap: var(--space-xl);
  }
  .availability {
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-xl);
    gap: var(--space-xxl);
  }
  .store-badges {
    grid-template-columns: 1fr;
  }
  footer {
    flex-direction: column;
    align-items: flex-start;
    padding-block: var(--space-xxl);
  }
  footer nav {
    gap: var(--space-sm) var(--space-xl);
  }
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
@media (forced-colors: active) {
  .button,
  .room-preview,
  .feature-card,
  .share-section,
  .availability {
    border: var(--hairline) solid CanvasText;
  }
}
/* Intrinsic sizing keeps browser text enlargement from creating a sideways page. */
.masthead {
  flex-wrap: wrap;
}
.feature-grid,
.share-section,
.section-heading,
.own-pace {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.feature-card,
.session-preview,
.session-preview > *,
.store-badges,
.store-badges li > div,
footer nav {
  min-width: 0;
}
.memory-composition {
  flex-wrap: wrap;
  justify-content: center;
  row-gap: var(--space-lg);
}
.memory-book {
  max-width: 45%;
}
.memory-note {
  flex: 1 1 9rem;
  min-width: 0;
}
.timer {
  font-size: clamp(var(--type-display-size), 14vw, var(--section-type));
}
footer nav a {
  overflow-wrap: anywhere;
}
@media (max-width: 700px) {
  .wrap {
    width: calc(100% - 2 * min(var(--space-xl), 6vw));
  }
  .feature-grid,
  .share-section,
  .section-heading,
  .own-pace {
    grid-template-columns: minmax(0, 1fr);
  }
  .feature-card,
  .session-preview,
  .share-section,
  .share-preview,
  .availability {
    padding: min(var(--space-xl), 6vw);
  }
  .memory-note {
    transform: none;
    margin-left: 0;
  }
  .store-badges li {
    padding: min(var(--space-md), 3vw) min(var(--space-xl), 6vw);
  }
}