/* Approved professional homepage pass.
   Active component rules live here so the retained base stylesheet remains a safe design backup. */

:root {
  --surface-glass: rgba(255, 253, 247, .84);
  --surface-paper: #fffaf1;
  --focus-ring: #087f7b;
}

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--focus-ring) 62%, transparent);
  outline-offset: 3px;
}

.site-header {
  position: fixed;
  z-index: 100;
  border-bottom-color: transparent;
  transition: padding 220ms ease, border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.site-header.is-scrolled {
  padding-block: .72rem;
  border-bottom-color: rgba(23, 50, 67, .12);
  background: rgba(255, 253, 247, .88);
  box-shadow: 0 10px 32px rgba(16, 39, 51, .08);
  backdrop-filter: blur(18px) saturate(1.12);
}

.site-nav a {
  font-size: .82rem;
}

.header-start {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: .55rem;
}

.hub-back {
  display: grid;
  flex: 0 0 auto;
  width: 2.15rem;
  height: 2.15rem;
  place-items: center;
  border: 1px solid rgba(23, 50, 67, .16);
  border-radius: 999px;
  color: rgba(23, 50, 67, .58);
  text-decoration: none;
  font-size: 1rem;
  line-height: 1;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.hub-back:hover,
.hub-back:focus-visible {
  color: var(--ink);
  border-color: rgba(23, 50, 67, .34);
  background: rgba(23, 50, 67, .05);
  transform: translateX(-2px);
  outline: none;
}

.header-menu {
  display: none;
}

.brand small,
.spark-l10n-control summary span {
  font-size: .62rem;
}

.hero-channels {
  width: min(72rem, calc(100% - 3rem));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .72rem;
}

.hero-channel-group {
  min-width: 0;
  display: grid;
  gap: 0;
}

.hero-channel-group__label {
  display: none;
}

.hero-channel-group__cards {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .62rem;
}

.hero-channel-group--journey .hero-channel-group__cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hero-channel--lab { --channel-accent: #6f5a9e; }

.hero-channel {
  min-height: 4.8rem;
  padding-top: .9rem;
  padding-right: .65rem;
}

.hero {
  min-height: max(46rem, calc(100svh - 4rem));
}

.route-story {
  min-height: 2.8rem;
  align-content: center;
  padding: .45rem .72rem;
}

.route-story__copy {
  color: rgba(23, 50, 67, .78);
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.38;
}

.hero-channel__status {
  position: absolute;
  z-index: 3;
  top: .34rem;
  right: .42rem;
  padding: .22rem .38rem;
  border: 1px solid color-mix(in srgb, var(--channel-accent) 38%, transparent);
  border-radius: 999px;
  color: color-mix(in srgb, var(--channel-accent) 80%, var(--ink));
  background: rgba(255, 253, 247, .84);
  font: 700 .48rem/1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.channel-stage {
  padding-top: clamp(5.8rem, 8vw, 8.4rem);
  padding-bottom: clamp(3.4rem, 5vw, 5.2rem);
}

.channel-stage__shell {
  width: min(76rem, calc(100% - 3rem));
}

.channel-stage__topline {
  margin-bottom: 1.75rem;
}

.channel-stage__topline h2 {
  letter-spacing: -.045em;
  text-wrap: balance;
}

.channel-workbench {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr;
  gap: .8rem;
}

.channel-workbench::before {
  display: none;
}

.channel-picker,
.channel-views {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 1rem;
  background: var(--surface-glass);
  box-shadow: 0 24px 74px rgba(37, 33, 31, .12);
  backdrop-filter: blur(22px) saturate(1.12);
}

.channel-picker {
  min-height: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: .72rem;
  overflow: visible;
}

.channel-picker::before,
.channel-views::before {
  border-radius: inherit;
}

.channel-picker__heading {
  min-width: 7.8rem;
  display: grid;
  align-content: center;
  gap: .38rem;
  padding: .25rem .45rem;
  border: 0;
}

.channel-picker__heading span {
  font-size: .84rem;
}

.channel-picker__heading small {
  font-size: .6rem;
  line-height: 1.25;
}

.channel-switcher {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .55rem;
  margin: 0;
}

.channel-switcher button {
  --picker-accent: #008f8a;
  min-width: 0;
  min-height: 4.5rem;
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  align-items: center;
  gap: .62rem;
  padding: .62rem .7rem;
  border: 1px solid rgba(37, 33, 31, .13);
  border-radius: .72rem;
  color: #25211f;
  background: rgba(255, 255, 255, .64);
  box-shadow: 0 7px 20px rgba(37, 33, 31, .06);
  text-align: left;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.channel-switcher button:nth-child(2) { --picker-accent: #bb6652; }
.channel-switcher button:nth-child(3) { --picker-accent: #5369a2; }
.channel-switcher button:nth-child(4) { --picker-accent: #9b722e; }
.channel-switcher button:nth-child(5) { --picker-accent: #6f5a9e; }

.channel-switcher button:hover,
.channel-switcher button:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--picker-accent) 56%, transparent);
  box-shadow: 0 12px 26px rgba(37, 33, 31, .1);
}

.channel-switcher button[aria-selected="true"] {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #303971, var(--picker-accent));
  box-shadow: 0 14px 28px color-mix(in srgb, var(--picker-accent) 24%, transparent);
}

.channel-switcher__mark {
  width: 2.25rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--picker-accent) 30%, transparent);
  border-radius: .58rem;
  color: var(--picker-accent);
  background: rgba(255, 255, 255, .78);
  font: 700 1rem/1 var(--display);
}

.channel-switcher button[aria-selected="true"] .channel-switcher__mark {
  color: var(--picker-accent);
  border-color: rgba(255, 255, 255, .76);
  background: rgba(255, 255, 255, .94);
}

.channel-switcher__copy {
  min-width: 0;
  display: grid;
  gap: .3rem;
}

.channel-switcher__copy strong {
  overflow: hidden;
  font-size: .78rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-switcher__copy small {
  display: block;
  overflow: hidden;
  color: rgba(37, 33, 31, .62);
  font: 600 .54rem/1.35 var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-switcher button[aria-selected="true"] .channel-switcher__copy small {
  color: rgba(255, 255, 255, .76);
}

.channel-views {
  width: 100%;
  /* Was height: clamp(39rem, 53vw, 43rem) + min-height: 39rem, which pinned
     every panel to ~676px and stretched both columns -- the copy side carried
     over 400px of dead space below its last line. Sized to content now, so the
     preview and the text beside it end up about the same height. */
  height: auto;
  margin: 0;
  overflow: hidden;
  scroll-margin-top: 5.5rem;
}

.channel-views::after {
  right: -1.8rem;
  bottom: -2rem;
  z-index: 1;
  width: clamp(14rem, 22vw, 21rem);
  opacity: .72;
}

.channel-window-maple {
  position: absolute;
  z-index: 1;
  top: -2.6rem;
  left: -3.5rem;
  width: clamp(22rem, 40vw, 35rem);
  aspect-ratio: 1665 / 944;
  background: url("../site-ui/decor-maple-canopy-v2.webp") left top / contain no-repeat;
  opacity: .46;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.channel-view,
.channel-view--default {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(22rem, 1.06fr);
  padding: 0;
  border: 0;
  border-radius: inherit;
  background:
    repeating-linear-gradient(0deg, rgba(0, 143, 138, .052) 0 1px, transparent 1px 31px),
    linear-gradient(90deg, transparent 0 2.2rem, rgba(220, 111, 95, .13) 2.2rem calc(2.2rem + 1px), transparent calc(2.2rem + 1px)),
    rgba(255, 250, 241, .74);
  box-shadow: none;
}

.channel-view[hidden] {
  display: none;
}

.channel-view__art {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  margin: 1rem 0 1rem 1rem;
  padding: clamp(.7rem, 1.3vw, 1.1rem);
  overflow: hidden;
  border: 1px solid rgba(0, 143, 138, .18);
  border-radius: .72rem;
  background: linear-gradient(145deg, rgba(247, 251, 250, .96), rgba(226, 241, 239, .92));
  box-shadow: inset 0 0 28px rgba(0, 143, 138, .08), 0 18px 36px rgba(37, 33, 31, .09);
  cursor: pointer;
}

.channel-view__art::before {
  opacity: .1;
}

.channel-art-link {
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
}

.channel-art-link:focus-visible {
  outline: 3px solid var(--view-accent);
  outline-offset: -5px;
}

.channel-view__copy {
  position: relative;
  z-index: 3;
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Was clamp(2.3rem,4vw,4.2rem) sides/top with a 5.2rem floor, ~150px of
     padding doing nothing but adding height. */
  padding: clamp(1.5rem, 2.6vw, 2.4rem) clamp(1.6rem, 2.8vw, 2.6rem) clamp(1.6rem, 2.6vw, 2.2rem);
  background: linear-gradient(90deg, rgba(255, 250, 241, .98), rgba(255, 250, 241, .86) 72%, rgba(255, 250, 241, .58));
}

.channel-view h3 {
  max-width: 10ch;
  font-size: clamp(2.9rem, 4.8vw, 4.9rem);
  letter-spacing: -.055em;
  text-wrap: balance;
}

.channel-view__copy > p:not(.eyebrow) {
  max-width: 31rem;
  font-size: clamp(.92rem, 1.15vw, 1.04rem);
}

.channel-facts {
  position: absolute;
  right: 1.25rem;
  bottom: 1rem;
  justify-content: flex-end;
  gap: .3rem;
  margin: 0;
  opacity: .68;
}

.channel-facts li {
  padding: .3rem .45rem;
  font-size: .49rem;
}

.channel-status {
  width: 100%;
  min-height: 4.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: .8rem;
  margin-top: 1.35rem;
  padding: 1rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--view-accent) 72%, #172f3a);
  border-radius: .86rem;
  color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--view-accent) 80%, #172f3a), var(--view-accent));
  box-shadow: 0 13px 28px color-mix(in srgb, var(--view-accent) 24%, transparent);
  font: 800 .82rem/1.3 var(--sans);
  letter-spacing: .02em;
  text-decoration: none;
}

.channel-status > span {
  display: grid;
  gap: .2rem;
}

.channel-status small {
  color: rgba(255, 255, 255, .72);
  font: 700 .56rem/1.2 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.channel-status strong {
  font-size: .92rem;
  letter-spacing: .01em;
}

.channel-status b { margin-left: auto; font-size: 1.25rem; }

a.channel-status {
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

a.channel-status:hover,
a.channel-status:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--view-accent) 90%, #172f3a);
  background: linear-gradient(135deg, color-mix(in srgb, var(--view-accent) 70%, #102632), color-mix(in srgb, var(--view-accent) 88%, white));
  box-shadow: 0 17px 34px color-mix(in srgb, var(--view-accent) 32%, transparent);
  outline: 3px solid rgba(255,255,255,.9);
  outline-offset: 3px;
}

.channel-view--lab {
  --view-accent: #6f5a9e;
  --view-soft: #e9e3f3;
}

.channel-status i {
  width: .62rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff0b7;
  box-shadow: 0 0 0 5px rgba(255, 240, 183, .18);
}

.channel-demo {
  position: relative;
  z-index: 3;
  width: min(100%, 29rem);
  display: grid;
  align-content: center;
  gap: 1rem;
  pointer-events: none;
}

.channel-demo button {
  pointer-events: auto;
}

.demo-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .65rem;
  border-bottom: 1px solid rgba(23, 50, 67, .14);
}

.demo-toolbar strong {
  font-size: .76rem;
}

.demo-toolbar span,
.channel-demo > p {
  color: rgba(23, 50, 67, .62);
  font: 700 .58rem/1.3 var(--mono);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.demo-paper,
.demo-sound-card,
.demo-bite-card,
.demo-note-card,
.demo-lab-map,
.demo-lab-experiment {
  position: relative;
  border: 1px solid rgba(23, 50, 67, .14);
  border-radius: .85rem;
  background: rgba(255, 253, 247, .94);
  box-shadow: 0 22px 50px rgba(23, 50, 67, .12);
}

.demo-paper--chart {
  align-content: stretch;
  justify-items: stretch;
  gap: 1rem;
}

.demo-chart-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid rgba(187, 96, 79, .2);
}

.demo-chart-title strong {
  font-size: .8rem;
}

.demo-chart-title span {
  color: rgba(23, 50, 67, .55);
  font: 700 .55rem/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.demo-kana-chart {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid rgba(23, 50, 67, .11);
  border-left: 1px solid rgba(23, 50, 67, .11);
}

.demo-kana-chart span {
  min-height: 6.4rem;
  display: grid;
  place-items: center;
  align-content: center;
  gap: .18rem;
  border-right: 1px solid rgba(23, 50, 67, .11);
  border-bottom: 1px solid rgba(23, 50, 67, .11);
  background: rgba(255, 255, 255, .54);
}

.demo-kana-chart b {
  color: #a24e40;
  font: 600 clamp(1.55rem, 3vw, 2.3rem)/1 var(--display);
}

.demo-kana-chart small {
  color: #51649b;
  font: 600 1rem/1 var(--display);
}

.demo-kana-chart i {
  color: rgba(23, 50, 67, .5);
  font: 700 .48rem/1 var(--mono);
  font-style: normal;
}

.demo-lab-experiment {
  min-height: 25rem;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: .75rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background:
    radial-gradient(circle at 50% 28%, rgba(119, 204, 195, .18), transparent 9rem),
    linear-gradient(145deg, rgba(255, 253, 247, .96), rgba(236, 231, 247, .96));
  text-align: center;
}

.demo-lab-experiment > small {
  color: #6f5a9e;
  font: 700 .56rem/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.demo-lab-experiment > strong {
  color: #6f5a9e;
  font: 600 clamp(5rem, 9vw, 7.5rem)/1 var(--display);
}

.demo-lab-experiment > p {
  margin: 0;
  color: rgba(23, 50, 67, .82);
  font-size: .86rem;
}

.demo-lab-experiment > p span {
  font-family: var(--display);
  font-size: 1.25rem;
}

.demo-lab-experiment > em {
  max-width: 18rem;
  padding-top: .75rem;
  border-top: 1px solid rgba(111, 90, 158, .2);
  color: rgba(79, 66, 111, .78);
  font-size: .72rem;
  line-height: 1.5;
}

.demo-lab-map {
  min-height: 25rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
  align-content: center;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background:
    radial-gradient(circle at 50% 22%, rgba(119, 204, 195, .2), transparent 10rem),
    linear-gradient(145deg, rgba(255, 253, 247, .96), rgba(236, 231, 247, .96));
}

.demo-lab-map span {
  min-height: 7rem;
  display: grid;
  place-items: center;
  align-content: center;
  gap: .55rem;
  padding: 1rem;
  border: 1px solid rgba(111, 90, 158, .18);
  border-radius: .75rem;
  color: #4f426f;
  background: rgba(255, 255, 255, .72);
  font: 700 .66rem/1.35 var(--mono);
  text-align: center;
}

.demo-lab-map b {
  width: 2.15rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #6f5a9e;
  font-size: .72rem;
}

.demo-paper {
  /* 25rem forced a 400px notebook, most of it empty ruled lines above and
     below the sample, which then set the whole panel's height. */
  min-height: 15rem;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: .4rem;
  padding: 1.15rem;
  background:
    repeating-linear-gradient(0deg, rgba(187, 96, 79, .075) 0 1px, transparent 1px 29px),
    rgba(255, 253, 247, .96);
}

.demo-paper__seal {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.4rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  color: #fff;
  background: #bb6652;
  font-family: var(--display);
}

.demo-kana {
  color: #bb6652;
  font: 600 clamp(5.5rem, 10vw, 8rem)/1 var(--display);
}

.demo-paper > p:not(.eyebrow) {
  margin: .2rem 0 0;
  font: 600 clamp(1.2rem, 2vw, 1.65rem)/1.15 var(--display);
  text-align: center;
}

.demo-paper em {
  color: #bb6652;
}

.demo-actions {
  display: flex;
  gap: .4rem;
  margin-top: 1rem;
}

.demo-actions span {
  min-width: 2.5rem;
  padding: .42rem .55rem;
  border: 1px solid rgba(187, 96, 79, .28);
  border-radius: 999px;
  color: #8c4d42;
  background: rgba(187, 96, 79, .07);
  font: 700 .55rem/1 var(--mono);
  text-align: center;
}

.demo-sound-card {
  min-height: 15rem;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: .48rem;
  padding: 1.15rem;
  background: radial-gradient(circle at 50% 38%, rgba(119, 204, 195, .19), transparent 9rem), rgba(255, 253, 247, .96);
}

.demo-sound-card > strong {
  color: #168a84;
  font: 600 clamp(6rem, 11vw, 9rem)/1 var(--display);
}

.demo-sound-card > span {
  color: rgba(23, 50, 67, .64);
  font: 700 .8rem/1 var(--mono);
}

.demo-play {
  width: 3.25rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: #168a84;
  box-shadow: 0 10px 24px rgba(22, 138, 132, .24);
}

.demo-wave {
  height: 2.5rem;
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-top: .75rem;
}

.demo-wave i {
  width: .22rem;
  height: 35%;
  border-radius: 999px;
  background: #77ccc3;
}

.demo-wave i:nth-child(2), .demo-wave i:nth-child(6) { height: 58%; }
.demo-wave i:nth-child(3), .demo-wave i:nth-child(5) { height: 82%; }
.demo-wave i:nth-child(4) { height: 100%; }

.demo-bite-card {
  min-height: 15rem;
  display: grid;
  align-content: center;
  gap: 1rem;
  padding: 1.15rem;
  color: #fff;
  background:
    radial-gradient(circle at 80% 14%, rgba(119, 204, 195, .3), transparent 10rem),
    linear-gradient(145deg, #27335f, #5369a2);
}

.demo-bite-card .eyebrow {
  color: #b9eee8;
}

.demo-bite-card > strong {
  font: 600 clamp(4rem, 8vw, 6.5rem)/1 var(--display);
}

.demo-bite-card > span {
  max-width: 24rem;
  color: rgba(255, 255, 255, .76);
  font-size: .82rem;
  line-height: 1.55;
}

.demo-progress {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .35rem;
  margin-top: .4rem;
}

.demo-progress i {
  height: .25rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
}

.demo-progress i:first-child,
.demo-progress i:nth-child(2) {
  background: #77ccc3;
}

.demo-note-card {
  min-height: 15rem;
  display: grid;
  grid-template-columns: minmax(7rem, .72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: 1.35rem;
  padding: 1.15rem;
  background:
    linear-gradient(90deg, transparent 0 2rem, rgba(155, 114, 46, .14) 2rem calc(2rem + 1px), transparent calc(2rem + 1px)),
    repeating-linear-gradient(0deg, rgba(155, 114, 46, .07) 0 1px, transparent 1px 28px),
    rgba(255, 253, 247, .96);
}

.demo-note-card > strong {
  color: #9b722e;
  font: 600 clamp(5.5rem, 10vw, 8rem)/1 var(--display);
  text-align: center;
}

.demo-note-card div span {
  display: block;
  margin-top: .7rem;
  color: rgba(23, 50, 67, .66);
  font-size: .8rem;
  line-height: 1.55;
}

.channel-product-sample {
  width: 100%;
  margin: .55rem 0 1rem;
  padding: 1.1rem;
  border: 1px solid color-mix(in srgb, var(--view-accent) 22%, transparent);
  border-radius: .82rem;
  background: rgba(255, 255, 255, .68);
  box-shadow: 0 12px 30px rgba(23, 50, 67, .07);
}

.channel-product-sample > strong {
  color: color-mix(in srgb, var(--view-accent) 82%, var(--ink));
  font-size: .76rem;
}

.sample-study {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
}

.sample-study > strong {
  grid-column: 1 / -1;
}

.sample-study div {
  display: grid;
  gap: .32rem;
  padding: .72rem;
  border: 1px solid rgba(23, 50, 67, .1);
  border-radius: .55rem;
  background: rgba(255, 253, 247, .86);
}

.sample-study div span {
  color: var(--view-accent);
  font: 600 clamp(1.55rem, 2.5vw, 2.1rem)/1 var(--display);
  letter-spacing: .08em;
}

.sample-study div small {
  color: rgba(23, 50, 67, .55);
  font: 700 .5rem/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sample-audio {
  display: grid;
  gap: .7rem;
}

.sample-audio__keys {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .42rem;
}

.sample-audio__keys button {
  min-width: 0;
  min-height: 4.35rem;
  display: grid;
  place-items: center;
  align-content: center;
  gap: .25rem;
  padding: .45rem .2rem;
  border: 1px solid rgba(22, 138, 132, .22);
  border-radius: .58rem;
  color: #168a84;
  background: rgba(255, 253, 247, .9);
  cursor: pointer;
  transition: transform 160ms ease, color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.sample-audio__keys button:hover,
.sample-audio__keys button:focus-visible,
.sample-audio__keys button.is-playing {
  transform: translateY(-2px);
  color: #fff;
  background: #168a84;
  box-shadow: 0 10px 20px rgba(22, 138, 132, .2);
}

.sample-audio__keys b {
  font: 600 1.65rem/1 var(--display);
}

.sample-audio__keys small {
  font: 700 .52rem/1 var(--mono);
}

.sample-audio__status {
  min-height: 1em;
  margin: 0;
  color: rgba(23, 50, 67, .58);
  font: 700 .53rem/1.3 var(--mono);
}

.demo-play {
  cursor: pointer;
}

.demo-play.is-playing {
  background: #bb6652;
  box-shadow: 0 10px 24px rgba(187, 102, 82, .28);
}

.demo-play.is-playing + strong {
  color: #bb6652;
}

.demo-play.is-playing ~ .demo-wave i {
  animation: preview-wave 680ms ease-in-out infinite alternate;
}

.demo-play.is-playing ~ .demo-wave i:nth-child(2n) { animation-delay: -240ms; }
.demo-play.is-playing ~ .demo-wave i:nth-child(3n) { animation-delay: -420ms; }

@keyframes preview-wave {
  from { transform: scaleY(.35); }
  to { transform: scaleY(1); }
}

.sample-bite {
  display: grid;
  gap: .45rem;
}

.sample-bite > span {
  color: var(--view-accent);
  font: 600 clamp(2.2rem, 4vw, 3.4rem)/1 var(--display);
}

.sample-bite > small {
  color: rgba(23, 50, 67, .54);
  font: 700 .58rem/1 var(--mono);
}

.sample-bite details {
  margin-top: .3rem;
  padding-top: .65rem;
  border-top: 1px solid rgba(83, 105, 162, .18);
}

.sample-bite summary {
  width: fit-content;
  color: #5369a2;
  font-size: .68rem;
  font-weight: 800;
  cursor: pointer;
}

.sample-bite details p {
  margin: .55rem 0 0;
  color: rgba(23, 50, 67, .76);
  font-size: .78rem;
}

.sample-kanji {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
}

.sample-kanji > strong {
  color: #9b722e;
  font: 600 clamp(3.5rem, 6vw, 5rem)/1 var(--display);
}

.sample-kanji div {
  min-width: 0;
  display: grid;
  gap: .3rem;
}

.sample-kanji div > span {
  color: #79571f;
  font-size: .8rem;
  font-weight: 800;
}

.sample-kanji div > small {
  color: rgba(23, 50, 67, .58);
  font: 700 .58rem/1 var(--mono);
}

.sample-kanji div > p {
  margin: .25rem 0 0;
  color: rgba(23, 50, 67, .68);
  font-size: .68rem;
  line-height: 1.4;
}

.sample-experiment {
  display: grid;
  gap: .58rem;
  border-color: rgba(111, 90, 158, .22);
  background: linear-gradient(145deg, rgba(255, 255, 255, .76), rgba(236, 231, 247, .72));
}

.sample-experiment > p {
  margin: 0;
  color: rgba(23, 50, 67, .76);
  font-size: .78rem;
  line-height: 1.5;
}

.sample-experiment > small {
  padding-top: .58rem;
  border-top: 1px solid rgba(111, 90, 158, .17);
  color: #5f4d87;
  font: 700 .56rem/1.45 var(--mono);
}

.credibility-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 1.15rem;
  padding: .7rem 0;
  border-block: 1px solid rgba(23, 50, 67, .08);
}

.credibility-strip > span {
  min-height: 2.7rem;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .25rem 1rem;
  border-left: 1px solid rgba(23, 50, 67, .08);
  color: rgba(23, 50, 67, .62);
  font: 600 .66rem/1.35 var(--mono);
  letter-spacing: .015em;
}

.credibility-strip > span:first-child {
  border-left: 0;
}

.credibility-strip i {
  width: 1.75rem;
  aspect-ratio: 1;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: rgba(23, 50, 67, .72);
  background: rgba(23, 50, 67, .06);
  font: 600 .68rem/1 var(--display);
}

.button-status {
  cursor: default;
}

.book {
  grid-template-columns: minmax(25rem, .88fr) minmax(34rem, 1.12fr);
  gap: clamp(2.5rem, 5vw, 6rem);
  min-height: 0;
  padding-block: clamp(3.8rem, 5.5vw, 5.8rem) clamp(5.5rem, 8vw, 8rem);
}

.book-copy {
  min-width: 0;
}

.book-stage {
  width: 100%;
  max-width: 46rem;
  min-width: 0;
  min-height: 36rem;
  justify-self: center;
  overflow: hidden;
  border: 1px solid rgba(36, 72, 58, .09);
  border-radius: 1.2rem;
  background:
    radial-gradient(circle at 50% 42%, rgba(119, 204, 195, .13), transparent 18rem),
    rgba(255, 255, 255, .28);
  box-shadow: inset 0 1px rgba(255, 255, 255, .72);
}

.page-sheet {
  width: min(43%, 20rem);
  max-height: calc(100% - 3.5rem);
  border-radius: .35rem;
}

.page-sheet img {
  width: 100%;
  height: auto;
}

.page-sheet-link {
  display: block;
  color: inherit;
}

.page-sheet-link:focus-visible {
  outline: 3px solid rgba(22, 138, 132, .8);
  outline-offset: 5px;
}

.page-sheet-back {
  left: 73%;
  transform: translate(-50%, -50%) rotate(6deg);
}

.page-sheet-mid {
  left: 29%;
  transform: translate(-50%, -50%) rotate(-5deg);
}

.page-sheet-front {
  left: 51%;
  transform: translate(-50%, -50%) rotate(.7deg);
}

.page-sheet-mid { z-index: 1; }

.page-sheet-back { z-index: 2; }

.page-sheet-front { z-index: 3; }

.book-actions {
  align-items: center;
}

.site-footer {
  grid-template-columns: minmax(14rem, 1fr) minmax(20rem, auto) minmax(14rem, 1fr);
  align-items: start;
  gap: 2.5rem;
  padding-block: 2.7rem;
}

.footer-identity {
  display: grid;
  gap: .9rem;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .65rem 1.35rem;
}

.footer-nav a {
  position: relative;
  font-size: .74rem;
  font-weight: 700;
  text-decoration: none;
}

.footer-nav a::after {
  position: absolute;
  right: 0;
  bottom: -.28rem;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transition: transform 180ms ease;
}

.footer-nav a:hover::after,
.footer-nav a:focus-visible::after {
  transform: scaleX(1);
}

.footer-credit {
  justify-self: end;
  max-width: 17rem;
  font-family: var(--mono);
  line-height: 1.55;
  text-align: right;
}

/* Progressive enhancement: content is readable until the reveal controller is ready. */
[data-reveal] {
  opacity: 1;
  transform: none;
}

.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
}

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

@media (max-width: 1040px) {
  .guide-stage .route-story--practice { left: 47%; }
  .route-story--journey { display: none; }

  .channel-views {
    height: auto;
  }

  .channel-view {
    grid-template-columns: minmax(0, .9fr) minmax(20rem, 1.1fr);
  }

  .channel-view__copy {
    padding: 1.7rem 1.8rem;
  }

  .channel-view h3 {
    font-size: clamp(2.7rem, 5.4vw, 4.1rem);
  }

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

  .credibility-strip > span:nth-child(odd) {
    border-left: 0;
  }

  .site-footer {
    grid-template-columns: 1fr 1.5fr;
  }

  .footer-credit {
    grid-column: 1 / -1;
    justify-self: start;
    text-align: left;
  }
}

@media (max-width: 1280px) {
  .book {
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }

  .book-copy {
    width: min(100%, 48rem);
    max-width: none;
    margin-inline: auto;
  }

  .book-stage {
    width: min(100%, 52rem);
    min-height: 34rem;
    margin-inline: auto;
  }

  .page-sheet {
    width: min(35%, 18rem);
  }
}

@media (max-width: 760px) {
  html,
  body {
    overflow-x: clip;
  }

  .site-header,
  .site-header.is-scrolled {
    padding: .8rem 1rem;
  }

  .site-header {
    gap: .75rem;
  }

  .spark-l10n-control {
    width: min(8.8rem, 42vw);
  }

  .header-start {
    gap: .4rem;
  }

  .hub-back {
    width: 1.9rem;
    height: 1.9rem;
    font-size: .9rem;
  }

  .header-menu {
    display: block;
    position: relative;
    flex: 0 0 auto;
  }

  .header-menu-toggle {
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border: 1px solid rgba(23, 50, 67, .16);
    border-radius: .6rem;
    background: rgba(255, 253, 247, .9);
    color: rgba(23, 50, 67, .7);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
  }

  .header-menu-panel {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + .6rem);
    z-index: 20;
    flex-direction: column;
    gap: .3rem;
    width: max-content;
    max-width: min(80vw, 16rem);
    padding: .6rem;
    border: 1px solid rgba(23, 50, 67, .14);
    border-radius: .75rem;
    background: var(--surface-paper);
    box-shadow: 0 14px 34px rgba(16, 39, 51, .16);
  }

  .header-menu.is-open .header-menu-panel {
    display: flex;
  }

  .header-menu-panel a {
    padding: .55rem .65rem;
    border-radius: .5rem;
    color: var(--ink);
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
  }

  .header-menu-panel a:hover,
  .header-menu-panel a:focus-visible {
    background: rgba(23, 50, 67, .06);
    outline: none;
  }

  .header-menu-support {
    border-top: 1px solid rgba(23, 50, 67, .1);
    margin-top: .3rem;
    padding-top: .75rem !important;
  }

  .hero {
    min-height: 54rem;
  }

  .hero-copy {
    width: calc(100% - 1rem);
    max-width: 24rem;
  }

  .hero h1 {
    max-width: 100%;
    font-size: clamp(3rem, 13.5vw, 4.15rem);
    overflow-wrap: anywhere;
  }

  .hero-channels {
    width: calc(100% - 2rem);
    grid-template-columns: 1fr;
    gap: .4rem;
  }

  .hero-channel-group {
    gap: 0;
  }

  .hero-channel-group__label {
    font-size: .5rem;
  }

  .hero-channel-group__cards {
    gap: .45rem;
  }

  .hero-channel-group--journey .hero-channel-group__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-channel {
    min-height: 4rem;
    padding: .78rem .4rem .45rem 46%;
  }

  /* Kept visible: it is the only thing telling a phone user the card is the
     way into the app. In the flow rather than absolute, so it can't land on
     top of a purpose line that wrapped to two rows. */
  .hero-channel__status {
    position: static;
    display: inline-block;
    margin-top: .2rem;
    top: auto;
    right: auto;
  }

  .hero-channel__name {
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    line-height: 1.15;
  }

  .route-story--journey {
    display: none;
  }

  .guide-stage .route-story--practice {
    left: 47%;
    right: auto;
    width: clamp(11.5rem, 42vw, 15rem);
    transform: translateX(-50%);
  }

  .route-story {
    min-width: 0;
    min-height: 3rem;
    align-content: center;
    overflow: hidden;
  }

  .channel-stage__shell {
    width: calc(100% - 1.25rem);
  }

  .channel-picker {
    grid-template-columns: 1fr;
    gap: .55rem;
    padding: .62rem;
  }

  .channel-picker__heading {
    min-width: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: .25rem .35rem .15rem;
  }

  .channel-switcher {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(3.4rem, 1fr);
    gap: .35rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .channel-switcher::-webkit-scrollbar {
    display: none;
  }

  .channel-switcher button {
    min-height: 3.1rem;
    grid-template-columns: none;
    grid-template-rows: auto auto;
    justify-items: center;
    align-content: center;
    text-align: center;
    gap: .18rem;
    padding: .38rem .25rem;
  }

  .channel-switcher__mark {
    width: 1.4rem;
    font-size: .74rem;
  }

  .channel-switcher__copy {
    gap: 0;
  }

  .channel-switcher__copy strong {
    font-size: .54rem;
  }

  .channel-switcher__copy small {
    display: none;
  }

  .channel-views {
    height: auto;
    min-height: 0;
    scroll-margin-top: 6rem;
  }

  .channel-view {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .channel-view__art {
    grid-column: 1;
    grid-row: auto;
    min-height: 26rem;
    margin: .65rem .65rem 0;
    padding: 1rem;
  }

  .channel-view__copy {
    grid-column: 1;
    grid-row: auto;
    /* 4.4rem of bottom padding on a phone was pure dead height. */
    padding: 1.5rem 1.35rem 1.6rem;
    background: rgba(255, 250, 241, .9);
  }

  .channel-view h3 {
    font-size: clamp(2.75rem, 13vw, 4rem);
  }

  .demo-paper,
  .demo-sound-card,
  .demo-bite-card,
  .demo-note-card {
    min-height: 14rem;
  }

  .demo-note-card,
  .demo-lab-experiment {
    grid-template-columns: minmax(6rem, .7fr) minmax(0, 1.3fr);
  }

  .demo-lab-experiment {
    display: grid;
    grid-template-columns: 1fr;
  }

  .channel-views::after {
    right: -3rem;
    bottom: 0;
    width: 15rem;
    opacity: .46;
  }

  .channel-window-maple {
    top: -1.5rem;
    left: -4rem;
    width: 24rem;
    opacity: .36;
  }

  .channel-status { width: 100%; min-height: 4.35rem; }

  .credibility-strip {
    grid-template-columns: 1fr;
  }

  .credibility-strip > span {
    min-height: 2.7rem;
    border-left: 0;
    border-top: 1px solid rgba(23, 50, 67, .07);
  }

  .credibility-strip > span:first-child {
    border-top: 0;
  }

  .book {
    min-height: 0;
    gap: 1.5rem;
  }

  .book-stage {
    min-height: 28rem;
    margin-inline: 0;
    border-radius: .8rem;
  }

  .page-sheet {
    width: min(46%, 13rem);
  }

  .page-sheet-mid { left: 25%; }
  .page-sheet-back { left: 77%; }

  .site-footer {
    grid-template-columns: 1fr;
    gap: 1.7rem;
    padding: 2rem 1rem;
  }

  .footer-nav {
    justify-content: flex-start;
  }

  .footer-credit {
    grid-column: auto;
  }
}

@media (max-width: 430px) {
  .route-story {
    min-height: 3.2rem;
  }

  .route-story__copy {
    display: block;
    font-size: .52rem;
  }

  .channel-switcher__copy small {
    display: none;
  }

  .channel-switcher button {
    min-height: 3.45rem;
  }

  .channel-view__art {
    min-height: 23rem;
  }

  .demo-paper,
  .demo-sound-card,
  .demo-bite-card,
  .demo-note-card,
  .demo-lab-experiment {
    min-height: 13rem;
  }

  .demo-kana-chart span {
    min-height: 4.2rem;
  }

  .channel-facts li {
    font-size: .44rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .channel-switcher button,
  .sample-audio__keys button,
  .footer-nav a::after {
    transition: none;
  }

  .channel-switcher button:hover,
  .channel-switcher button:focus-visible {
    transform: none;
  }

  .demo-play.is-playing ~ .demo-wave i {
    animation: none;
  }

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

/* ==========================================================================
   Authoritative hero mascot layout (appended last so it wins over
   the several duplicated .guide-stage / .route-story rules in styles.css).
   Tsuki alone, a little left of the torii center. No caption platforms.
   ========================================================================== */

.guide-stage {
  bottom: calc(12.8% + 2.55rem);
  height: 36%;
}

/* Tsuki and her floor share one anchor inside .guide-stage.
   Meet halfway between the old left-of-center pair (~42%) and a more
   rightward reading, then keep Tsuki centered on the white line. */
.actor-track--tsuki {
  left: 47%;
  width: clamp(8.4rem, 15vw, 12.2rem);
  transform: translateX(-50%);
  cursor: pointer;
}

.actor-track--moko {
  display: none;
}

.route-stories {
  display: none;
}

.guide-stage .route-story--practice {
  left: 47%;
  bottom: -2.55rem;
  transform: translateX(-50%);
  pointer-events: none;
}

.route-story--journey {
  display: none;
}

.channel-workbench { scroll-margin-top: 5rem; }

@media (max-width: 760px) {
  /* Hero becomes a normal vertical stack: title, offer, Tsuki. */
  .hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    min-height: 0;
    height: auto;
    padding: 5.4rem 1rem 1.5rem;
    overflow: visible;
  }

  .hero-tategaki { display: none; }

  .hero-copy {
    position: static;
    order: 0;
    inset: auto;
    width: 100%;
    max-width: none;
    margin: 0 0 .5rem;
    transform: none;
  }

  .hero-offer {
    position: static;
    order: 1;
    width: 100%;
    max-width: 23rem;
    margin: .35rem 0 .8rem;
  }

  .guide-stage {
    position: relative;
    order: 2;
    inset: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    height: 9.2rem;
    margin: 0;
  }

  .actor-track { bottom: 0; }
  .actor-track--tsuki {
    left: 50%;
    width: clamp(7.4rem, 34vw, 9.8rem);
    transform: translateX(-50%);
  }

  .guide-stage .route-story--practice {
    left: 50%;
    bottom: -.15rem;
    width: min(16rem, calc(100% - 2rem));
    transform: translateX(-50%);
  }
}

/* The Torii carries the atmosphere; this stack states the offer and opens the book. */
.hero-offer-stack {
  position: absolute;
  z-index: 10;
  top: 28%;
  right: 6%;
  width: min(32rem, 35vw);
  display: grid;
  justify-items: center;
  gap: .8rem;
}

.hero-offer {
  width: 100%;
  padding: 1.15rem 1.3rem 1.2rem;
  border: 1px solid rgba(17, 17, 17, .14);
  border-radius: 2px;
  color: #111;
  background: rgba(255, 255, 255, .62);
  backdrop-filter: blur(8px);
}

.hero-book-link {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: .25rem;
  border: 1px solid rgba(17, 17, 17, .18);
  background: rgba(255, 255, 255, .62);
  box-shadow: 0 12px 24px rgba(17, 17, 17, .14);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.hero-book-link:hover {
  transform: translateY(-3px) rotate(1deg);
  box-shadow: 0 16px 28px rgba(17, 17, 17, .2);
}

.hero-book-link:focus-visible {
  outline: 3px solid rgba(22, 138, 132, .8);
  outline-offset: 4px;
}

.hero-book-link img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-book-pair {
  display: grid;
  grid-template-columns: minmax(0, 9.625rem) minmax(0, 1fr);
  align-items: center;
  gap: .65rem;
  width: min(100%, 23rem);
  min-width: 0;
}

.hero-book-note {
  min-width: 0;
  padding: .85rem .9rem;
  border: 1px solid rgba(17, 17, 17, .14);
  border-radius: 2px;
  color: #111;
  background: rgba(255, 255, 255, .62);
  backdrop-filter: blur(8px);
  font-family: var(--sans);
  font-size: .8rem;
  line-height: 1.55;
}

.hero-book-note span {
  display: block;
}

.hero-book-note span + span {
  margin-top: .2rem;
}

.hero-offer h2 {
  margin: 0;
  color: #111;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
}

.hero-offer p {
  margin: .55rem 0 0;
  color: #111;
  font-family: var(--sans);
  font-size: .8rem;
  line-height: 1.55;
}

.hero-offer .hero-offer__note {
  padding-top: .55rem;
  border-top: 1px solid rgba(17, 17, 17, .14);
  font-size: .68rem;
  font-weight: 700;
}

@media (max-width: 1040px) and (min-width: 761px) {
  .hero-offer-stack {
    top: 29%;
    right: 3%;
    width: min(27rem, 42vw);
  }

  .hero-book-pair {
    width: min(100%, 21rem);
    grid-template-columns: minmax(0, 8.8rem) minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .hero-offer-stack {
    position: static;
    order: 1;
    width: 100%;
    max-width: 23rem;
    margin: .35rem 0 .8rem;
    gap: .65rem;
  }

  .hero-offer {
    width: 100%;
    padding: .9rem 1rem .95rem;
    background: rgba(255, 255, 255, .68);
  }

  .hero-book-pair {
    width: 100%;
    grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
    gap: .5rem;
  }

  .hero-book-note {
    padding: .65rem .7rem;
    font-size: .74rem;
    line-height: 1.45;
  }

  .hero-offer h2 { font-size: .92rem; }
  .hero-offer p { font-size: .74rem; line-height: 1.45; }
  .hero-offer .hero-offer__note { font-size: .64rem; }
}

/* ---------------------------------------------------------------------------
   Open CTA emphasis
   These buttons are the way into each app, so they should not read as just
   another panel element. Motion vocabulary borrowed from the
   hyperframes-animation skill (ambient-glow-bloom's traveling sheen,
   sine-wave-loop's idle breathe, press-release-spring on press) and written as
   CSS, which is what that skill's runtime table recommends for shimmer with no
   JS animation cost. Its own contract targets seekable render compositions
   (finite, no infinite repeats, no hover state), so only the patterns carry
   over, not the harness.
   --------------------------------------------------------------------------- */
a.channel-status {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Slow idle breathe so the button reads as live without nagging. */
  animation: cta-breathe 3.6s ease-in-out infinite;
}

/* Traveling sheen. Peak opacity stays low, per ambient-glow-bloom. */
a.channel-status::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  z-index: -1;
  width: 45%;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, .38) 48%,
    rgba(255, 255, 255, .05) 72%,
    transparent
  );
  transform: skewX(-18deg);
  animation: cta-sheen 3.6s ease-in-out infinite;
  pointer-events: none;
}

/* The arrow leans toward the destination on each breath. */
a.channel-status b {
  animation: cta-arrow-nudge 3.6s ease-in-out infinite;
}

@keyframes cta-breathe {
  0%, 72%, 100% { transform: translateY(0) scale(1); }
  84% { transform: translateY(-2px) scale(1.014); }
}

@keyframes cta-sheen {
  0% { left: -60%; }
  /* One pass early in the cycle, then park off-frame for the rest. */
  38%, 100% { left: 125%; }
}

@keyframes cta-arrow-nudge {
  0%, 72%, 100% { transform: translateX(0); }
  84% { transform: translateX(5px); }
}

/* press-release-spring: compress on the way down, settle on release. */
a.channel-status:active {
  transform: translateY(0) scale(.972);
  animation-play-state: paused;
  transition-duration: 70ms;
}

a.channel-status:hover,
a.channel-status:focus-visible {
  /* Hovering is intent; stop competing with the pointer. */
  animation-play-state: paused;
}

a.channel-status:hover::after,
a.channel-status:focus-visible::after {
  animation-play-state: paused;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  a.channel-status,
  a.channel-status::after,
  a.channel-status b {
    animation: none;
  }
  a.channel-status::after { opacity: 0; }
}

/* ---------------------------------------------------------------------------
   Learning Lab CTA — compact variant
   These live here rather than in styles.css because .channel-status is defined
   in this file, which loads second; an equal-specificity override in
   styles.css loses on order and the button keeps its full 4.65rem height.
   --------------------------------------------------------------------------- */
a.channel-status.lab-aside__cta {
  min-height: 0;
  padding: .5rem .75rem;
  border-radius: .6rem;
  gap: .55rem;
}

a.channel-status.lab-aside__cta > span { gap: .08rem; }
a.channel-status.lab-aside__cta strong { font-size: .74rem; line-height: 1.15; }
a.channel-status.lab-aside__cta small { font-size: .44rem; }
a.channel-status.lab-aside__cta b { font-size: .85rem; }

/* ---------------------------------------------------------------------------
   Visibility + hierarchy pass (Eidra-clear, still kawaii)
   Keep the artsy world; make the book and app doors readable at a glance.
   --------------------------------------------------------------------------- */
main { display: block; }


/* ---------------------------------------------------------------------------
   Feature doorway template (Plan A)
   One scroll section, one promise, one click. Study Shelf is the first.
   --------------------------------------------------------------------------- */
.feature-doorway {
  --door-accent: #bb6652;
  position: relative;
  scroll-margin-top: 5rem;
  padding: clamp(3.2rem, 6vw, 5.5rem) clamp(1.2rem, 5vw, 4rem);
  background:
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--door-accent) 16%, transparent), transparent 28rem),
    linear-gradient(180deg, #fffdf8 0%, #f7f3ea 100%);
}

.feature-doorway--shelf {
  --door-accent: #bb6652;
}

.feature-doorway--study-bites {
  --door-accent: #5369a2;
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--door-accent) 16%, transparent), transparent 28rem),
    linear-gradient(180deg, #f7f8fc 0%, #fffdf8 100%);
}

.feature-doorway--mofuna {
  --door-accent: #168a84;
  background:
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--door-accent) 16%, transparent), transparent 28rem),
    linear-gradient(180deg, #f3faf8 0%, #fffdf8 100%);
}

.feature-doorway--nara {
  --door-accent: #9b722e;
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--door-accent) 16%, transparent), transparent 28rem),
    linear-gradient(180deg, #fbf7ef 0%, #fffdf8 100%);
}

.feature-doorway--flip .feature-doorway__inner {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}

.feature-doorway--flip .feature-doorway__portal {
  order: -1;
  transform: rotate(-.4deg);
}

.feature-doorway--flip .feature-doorway__portal:hover,
.feature-doorway--flip .feature-doorway__portal:focus-visible {
  transform: rotate(0deg) translateY(-4px);
}

.feature-doorway--flip .feature-doorway__copy {
  justify-self: end;
}

.feature-doorway__inner {
  width: min(76rem, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(1.4rem, 3vw, 2.6rem);
  align-items: center;
}

.feature-doorway__copy {
  max-width: 34rem;
}

.feature-doorway__eyebrow {
  margin: 0 0 .7rem;
  color: color-mix(in srgb, var(--door-accent) 78%, #183d43);
  font: 700 .58rem/1.3 var(--mono, ui-monospace, monospace);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.feature-doorway h2 {
  margin: 0 0 .9rem;
  color: #183d43;
  font: 600 clamp(2rem, 4.2vw, 3.3rem)/1.05 var(--display, "Noto Serif JP", Georgia, serif);
  letter-spacing: -.035em;
}

.feature-doorway__copy > p {
  margin: 0 0 1.1rem;
  max-width: 36ch;
  color: rgba(24, 61, 67, .72);
  font-size: 1.02rem;
  line-height: 1.65;
}

.feature-doorway__facts {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 0 0 1.35rem;
  padding: 0;
  list-style: none;
}

.feature-doorway__facts li {
  display: inline-flex;
  align-items: center;
  min-height: 1.85rem;
  padding: 0 .7rem;
  border: 1px solid color-mix(in srgb, var(--door-accent) 28%, transparent);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  color: color-mix(in srgb, var(--door-accent) 72%, #183d43);
  font: 700 .68rem/1 var(--mono, ui-monospace, monospace);
  letter-spacing: .04em;
}

.feature-doorway__cta {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 3.35rem;
  padding: 0 1.35rem;
  border: 0;
  border-radius: 999px;
  background: var(--door-accent);
  color: #fffdf8;
  font: 700 1rem/1 var(--sans, Inter, system-ui, sans-serif);
  text-decoration: none;
  box-shadow: 0 16px 34px color-mix(in srgb, var(--door-accent) 28%, transparent);
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.feature-doorway__cta:hover,
.feature-doorway__cta:focus-visible {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--door-accent) 86%, #183d43);
  box-shadow: 0 20px 40px color-mix(in srgb, var(--door-accent) 34%, transparent);
  outline: none;
}

.feature-doorway__portal {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: clamp(18rem, 36vw, 26rem);
  border: 1.5px solid rgba(23, 50, 67, .14);
  border-radius: 1.35rem;
  background: #fff;
  box-shadow: 0 22px 54px rgba(38, 75, 79, .12);
  text-decoration: none;
  transform: rotate(.4deg);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.feature-doorway__portal:hover,
.feature-doorway__portal:focus-visible {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 0 28px 64px rgba(38, 75, 79, .16);
  outline: none;
}

.feature-doorway__portal img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.feature-doorway__portal-chip {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  display: inline-flex;
  align-items: center;
  min-height: 2.1rem;
  padding: 0 .85rem;
  border: 1px solid rgba(255, 253, 247, .55);
  border-radius: 999px;
  background: rgba(24, 61, 67, .72);
  color: #fffdf8;
  font: 700 .68rem/1 var(--mono, ui-monospace, monospace);
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

@media (max-width: 900px) {
  .feature-doorway__inner,
  .feature-doorway--flip .feature-doorway__inner {
    grid-template-columns: 1fr;
  }

  .feature-doorway__portal,
  .feature-doorway--flip .feature-doorway__portal {
    order: -1;
    min-height: 16rem;
    transform: none;
  }

  .feature-doorway__portal:hover,
  .feature-doorway__portal:focus-visible,
  .feature-doorway--flip .feature-doorway__portal:hover,
  .feature-doorway--flip .feature-doorway__portal:focus-visible {
    transform: translateY(-3px);
  }

  .feature-doorway__copy,
  .feature-doorway--flip .feature-doorway__copy {
    justify-self: start;
  }

  .feature-doorway__copy > p {
    max-width: none;
  }
}

.hero-offer,
.hero-book-note {
  color: #111;
  background: rgba(255, 253, 247, .94);
  border-color: rgba(17, 17, 17, .22);
  box-shadow: 0 14px 34px rgba(16, 39, 51, .14);
}

.hero-book-pair {
  width: min(100%, 26rem);
  grid-template-columns: minmax(0, 11.5rem) minmax(0, 1fr);
  gap: .75rem;
}

.hero-book-link {
  background: rgba(255, 253, 247, .96);
  border: 1.5px solid rgba(17, 17, 17, .22);
  box-shadow: 0 16px 36px rgba(17, 17, 17, .22);
}

.hero-book-note {
  font-size: .86rem;
  font-weight: 600;
}

.hero-book-note a {
  color: #111;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero-book-note a:hover,
.hero-book-note a:focus-visible {
  color: var(--red, #bb1e2c);
}

.hero-channels {
  gap: .45rem;
  padding: .55rem;
  width: min(70rem, calc(100% - 2.4rem));
  border: 1.5px solid rgba(23, 50, 67, .18);
  border-radius: 1.15rem;
  background: rgba(255, 253, 247, .94);
  box-shadow: 0 18px 48px rgba(16, 39, 51, .2);
  backdrop-filter: blur(18px) saturate(1.12);
}

.hero-channel-group__cards {
  gap: .45rem;
}

.hero-channel {
  min-height: 5.25rem;
  padding-top: .95rem;
  padding-right: .72rem;
  border: 1.5px solid rgba(23, 50, 67, .2);
  color: #172833;
  background: #fffdf8;
  box-shadow: 0 10px 24px rgba(16, 39, 51, .14), inset 0 1px rgba(255, 255, 255, .95);
}

.hero-channel:hover,
.hero-channel:focus-visible {
  background: #ffffff;
  border-color: color-mix(in srgb, var(--channel-accent) 62%, #172833);
  box-shadow: 0 18px 34px rgba(16, 39, 51, .22), inset 0 1px rgba(255, 255, 255, .98);
}

.hero-channel__name {
  color: #14222b;
  font-size: .9rem;
  font-weight: 800;
}

.hero-channel__purpose {
  color: #31434d;
  font-size: .58rem;
  font-weight: 700;
}

.hero-channel__status {
  top: .4rem;
  right: .46rem;
  padding: .26rem .46rem;
  border: 1.5px solid color-mix(in srgb, var(--channel-accent) 48%, #172833);
  color: color-mix(in srgb, var(--channel-accent) 72%, #14222b);
  background: #ffffff;
  font-size: .52rem;
  letter-spacing: .07em;
  box-shadow: 0 3px 10px rgba(16, 39, 51, .12);
}

.book {
  position: relative;
  scroll-margin-top: 5rem;
  border-block: 1px solid rgba(187, 30, 44, .12);
  background:
    radial-gradient(circle at 88% 12%, rgba(200, 157, 69, .16), transparent 28rem),
    linear-gradient(180deg, #fff8ef 0%, #fffdf8 58%, #f7f3ea 100%);
}

.book .button-red {
  min-height: 3.25rem;
  padding-inline: 1.35rem;
  font-size: 1.02rem;
  box-shadow: 0 16px 36px rgba(187, 30, 44, .28);
}

.book .button-paper {
  min-height: 3.25rem;
  padding-inline: 1.2rem;
}

@media (max-width: 760px) {
  .hero-book-pair {
    width: 100%;
    grid-template-columns: minmax(0, 8.6rem) minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------------------
   Support band: compact + portal "New signal" sticker
   --------------------------------------------------------------------------- */
.support-band--compact {
  gap: 1.4rem 2rem;
  padding: 1.6rem clamp(1.2rem, 5vw, 4rem);
  align-items: center;
}

.support-band--compact h2 {
  max-width: 18ch;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  line-height: 1.05;
}

.support-band--compact .support-band-actions p {
  max-width: 28rem;
  margin: 0 0 .85rem;
  font-size: .92rem;
  line-height: 1.5;
}

.social-sticker.portal-social-links {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  width: min(100%, 18rem);
  min-height: 0;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(199, 30, 48, .28);
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(255, 235, 238, .74)),
    repeating-linear-gradient(-45deg, rgba(199, 30, 48, .08) 0 6px, transparent 6px 12px);
  box-shadow: 6px 8px 0 rgba(199, 30, 48, .12);
  color: #bb1e2c;
  transform: rotate(-1deg);
}

.portal-social-heading {
  color: #bb1e2c;
  font: 800 10px/1.4 var(--mono, ui-monospace, monospace);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: left;
}

.portal-social-destinations {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}

.portal-social-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  color: #981829;
  font: 700 15px/1.35 var(--sans, Inter, system-ui, sans-serif);
  letter-spacing: 0;
  text-transform: none;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.portal-social-links a:hover,
.portal-social-links a:focus-visible {
  color: #183d43;
}

/* ---------------------------------------------------------------------------
   Footer Plan B: quick access + framed link groups
   --------------------------------------------------------------------------- */
.site-footer {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
  padding: 2rem clamp(1.2rem, 5vw, 4rem) 2.4rem;
}

.footer-quick-access {
  width: min(70rem, 100%);
  margin: 0 auto;
  padding: 1rem;
  border: 1.5px solid rgba(23, 50, 67, .14);
  border-radius: 1.15rem;
  background: rgba(255, 253, 247, .96);
  box-shadow: 0 14px 36px rgba(16, 39, 51, .08);
}

.footer-quick-access__label {
  margin: .85rem 0 0;
  color: rgba(23, 50, 67, .58);
  font: 700 .58rem/1 var(--mono, ui-monospace, monospace);
  letter-spacing: .12em;
  text-align: center;
  text-transform: uppercase;
}

.footer-quick-access .hero-channels {
  position: static;
  left: auto;
  bottom: auto;
  width: 100%;
  transform: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.footer-quick-access .hero-channel-group__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
}

.footer-quick-access .hero-channel {
  min-height: 5rem;
}

.footer-lab {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: .7rem;
  align-items: stretch;
  margin-top: .7rem;
  padding: .75rem;
  border: 1px solid rgba(111, 90, 158, .22);
  border-radius: .9rem;
  background: linear-gradient(145deg, rgba(255, 255, 255, .76), rgba(236, 231, 247, .72));
}

.footer-lab .lab-aside__cta {
  --view-accent: #6f5a9e;
  width: 100%;
  min-height: 0;
  padding: .55rem .75rem;
  border-radius: .6rem;
  gap: .55rem;
}

.footer-lab .lab-aside__cta > span { gap: .08rem; }
.footer-lab .lab-aside__cta strong { font-size: .74rem; line-height: 1.15; }
.footer-lab .lab-aside__cta small { font-size: .44rem; }
.footer-lab .lab-aside__cta b { font-size: .85rem; }

.footer-lab .sample-experiment {
  margin: 0;
  gap: .35rem;
  border: 0;
  background: transparent;
}

.footer-lab .sample-experiment strong {
  font-size: .76rem;
}

.footer-lab .sample-experiment small {
  padding-top: .4rem;
  border-top: 1px solid rgba(111, 90, 158, .17);
  color: #5f4d87;
  font: 700 .56rem/1.45 var(--mono, ui-monospace, monospace);
}

.footer-frames {
  width: min(70rem, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}

.footer-frame {
  display: grid;
  gap: .35rem;
  padding: .85rem .95rem;
  border: 1px solid rgba(23, 50, 67, .12);
  border-radius: .85rem;
  background: rgba(255, 255, 255, .72);
}

.footer-frame__label {
  margin: 0 0 .2rem;
  color: rgba(23, 50, 67, .55);
  font: 700 .52rem/1 var(--mono, ui-monospace, monospace);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.footer-frame a {
  color: #183d43;
  font: 700 .82rem/1.35 var(--sans, Inter, system-ui, sans-serif);
  text-decoration: none;
}

.footer-frame a:hover,
.footer-frame a:focus-visible {
  color: #bb1e2c;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-credit {
  text-align: center;
}

@media (max-width: 760px) {
  .support-band--compact {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.35rem 1rem;
  }

  .footer-quick-access {
    padding: .75rem;
  }

  .footer-quick-access .hero-channels,
  .footer-quick-access .hero-channel-group__cards {
    grid-template-columns: 1fr;
  }

  .footer-quick-access .hero-channel-group--journey .hero-channel-group__cards {
    grid-template-columns: 1fr;
  }

  .footer-lab {
    grid-template-columns: 1fr;
  }

  .footer-frames {
    grid-template-columns: 1fr;
  }

}

/* Quiet paper crossings: one rounded edge shared by the study doorways. */
.feature-doorway { --paper-edge: #fffdf8; isolation: isolate; border-top: 0; }
.feature-doorway--study-bites { --paper-edge: #f7f8fc; }
.feature-doorway--mofuna { --paper-edge: #f3faf8; }
.feature-doorway--nara { --paper-edge: #fbf7ef; }
.feature-doorway::before {
  content: "";
  position: absolute;
  inset: -10px 0 auto;
  height: 11px;
  background: radial-gradient(ellipse 32px 10px at 32px 10px, var(--paper-edge) 98%, transparent 100%) 0 0 / 64px 11px repeat-x;
  pointer-events: none;
}
.book { border-block: 0; isolation: isolate; }
.book::before {
  content: "";
  position: absolute;
  inset: -48px 0 auto;
  height: 49px;
  background: linear-gradient(transparent, #fff8ef);
  pointer-events: none;
}
.book::after {
  content: "";
  position: absolute;
  top: 0;
  right: clamp(1.2rem, 5vw, 4rem);
  width: 26px;
  height: 26px;
  background: linear-gradient(45deg, #eee0ca 49%, #fffdf8 50%);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  filter: drop-shadow(-2px 2px 2px rgb(80 57 32 / 8%));
  pointer-events: none;
}
.making-strip {
  scroll-margin-top: 110px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 22px 48px;
  padding: 38px clamp(1.2rem, 5vw, 4rem) 48px;
  background: #f7f3ea;
  color: var(--ink);
}
.making-strip__copy { flex: 1 1 380px; max-width: 620px; }
.making-strip h2 { margin: 0 0 10px; font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.2; text-wrap: balance; }
.making-strip p { margin: 0; max-width: 60ch; font-size: 1rem; line-height: 1.65; color: #49463f; text-wrap: pretty; }
.making-strip__link { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; color: #8d2832; font-weight: 600; font-size: 1rem; line-height: 1.5; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.making-strip__link:hover { color: #183d43; }
.making-strip__link:focus-visible { outline: 2px solid #8d2832; outline-offset: 6px; border-radius: 2px; }
.support-band--compact { position: relative; isolation: isolate; border-top: 0; }
.support-band--compact::before {
  content: "";
  position: absolute;
  inset: -30px 0 auto;
  height: 31px;
  background: linear-gradient(transparent, var(--ink-deep));
  pointer-events: none;
}
@media (max-width: 760px) {
  .feature-doorway::before { background-size: 48px 11px; background-image: radial-gradient(ellipse 24px 10px at 24px 10px, var(--paper-edge) 98%, transparent 100%); }
  .making-strip { gap: 16px; padding-top: 28px; padding-bottom: 42px; }
  .making-strip__copy { flex-basis: 100%; }
}

/* Let the support colour settle back into the footer paper. */
.site-footer { position: relative; }
.site-footer::before { content: ""; position: absolute; inset: -24px 0 auto; height: 25px; background: linear-gradient(transparent, #fffdf8); pointer-events: none; }

/* Homepage topbar: one row on desktop, two ordered rows on small screens. */
.site-header--quiet,
.site-header--quiet.is-scrolled {
  position: fixed;
  inset: 0 0 auto;
  display: block;
  min-height: 76px;
  padding: 12px 24px;
  border-bottom: 1px solid #dce5e8;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(16px);
  transform: none;
  opacity: 1;
  transition: none;
}
.site-header--quiet .topbar-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 28px;
  max-width: 1200px;
  min-height: 50px;
  margin: 0 auto;
}
.site-header--quiet .topbar-brand { gap: 9px; }
.site-header--quiet .brand-mark { width: 32px; height: 32px; font-size: 18px; }
.site-header--quiet .brand b { font-size: 14px; }
.site-header--quiet .brand small { font-size: 9px; letter-spacing: .12em; }
.site-header--quiet .portal-link,
.site-header--quiet .topbar-social a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: #244951;
  font: 600 13px/1.2 var(--sans);
  text-decoration: none;
  white-space: nowrap;
}
.site-header--quiet .portal-link { justify-self: end; }
.site-header--quiet .portal-link:hover,
.site-header--quiet .topbar-social a:hover { color: #087f7b; text-decoration: underline; text-underline-offset: 4px; }
.site-header--quiet .topbar-actions,
.site-header--quiet .topbar-social { display: flex; align-items: center; gap: 22px; }
.site-header--quiet .topbar-social { gap: 12px; }
.site-header--quiet .site-language-slot { min-width: 0; flex: 0 0 100px; }
.site-header--quiet .spark-l10n-control { width: 100px; }
.site-header--quiet .spark-l10n-control summary {
  position: relative;
  min-height: 44px;
  padding: 0 28px 0 12px;
  border: 1px solid #dce5e8;
  border-radius: 9px;
  background: #f8fbfc;
  filter: none;
}
.site-header--quiet .spark-l10n-control summary > span { display: none; }
.site-header--quiet .spark-l10n-control summary strong { font: 600 13px/1.2 var(--sans) !important; }
.site-header--quiet .spark-l10n-control summary::after { content: "⌄"; right: 11px; color: #244951; text-shadow: none; font: 600 16px/1 var(--sans); }
.site-header--quiet .spark-l10n-control[open] summary { border-color: #7babb7; }
.site-header--quiet .spark-l10n-panel { left: auto; right: 0; width: min(320px, calc(100vw - 48px)); }
@media (max-width: 800px) {
  .site-header--quiet,
  .site-header--quiet.is-scrolled { padding: 8px 16px; min-height: 112px; }
  .site-header--quiet .topbar-inner { grid-template-columns: 1fr auto; column-gap: 16px; row-gap: 6px; }
  .site-header--quiet .topbar-actions { grid-column: 1 / -1; justify-content: space-between; gap: 12px; }
  .site-header--quiet .spark-l10n-panel { left: 0; right: auto; }
}
/* One reading area; the book and its guide share the second column. */
.hero--grouped {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  gap: 24px clamp(24px, 4vw, 64px);
  height: auto;
  min-height: 800px;
  padding: 120px clamp(24px, 5vw, 72px) 60px;
  overflow: hidden;
}
.hero--grouped .hero-copy { position: relative; inset: auto; transform: none; grid-column: 1; grid-row: 1 / 3; width: 100%; max-width: 620px; text-align: left; margin: 0; align-self: center; }
.hero--grouped h1 { font-size: clamp(3.6rem, 6.5vw, 6rem); line-height: 1.02; margin-bottom: 24px; }
.hero--grouped .hero-offer { position: static; width: 100%; max-width: 540px; margin: 0; padding: 18px 20px; background: rgba(255,253,247,.90); border-color: rgba(23,50,67,.12); box-shadow: 0 8px 24px rgba(16,39,51,.08); }
.hero--grouped .hero-offer-stack { position: relative; inset: auto; grid-column: 2; grid-row: 1; width: 100%; max-width: 440px; margin: 0; justify-self: center; }
.hero--grouped .guide-stage { position: relative; inset: auto; transform: none; grid-column: 2; grid-row: 2; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; height: auto; margin: 0; }
.hero--grouped .actor-track--tsuki { position: relative; inset: auto; transform: none; width: clamp(128px, 12vw, 172px); flex: 0 0 auto; }
.hero--grouped .guide-stage .route-story--practice { position: relative; inset: auto; transform: none; width: min(256px, 100%); margin-top: -6px; padding-top: 10px; flex: 0 0 auto; }
@media (max-width: 900px) {
  .hero--grouped { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); min-height: 780px; gap: 20px; padding-inline: 24px; }
  .hero--grouped h1 { font-size: clamp(3rem, 6.5vw, 4.2rem); }
  .hero--grouped .hero-book-pair { grid-template-columns: minmax(0, 118px) minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .hero--grouped { display: flex; flex-direction: column; min-height: 0; padding: 112px 20px 40px; gap: 28px; }
  .hero--grouped .hero-copy { order: 0; max-width: 560px; text-align: left; }
  .hero--grouped h1 { font-size: clamp(3rem, 10vw, 5rem); }
  .hero--grouped .hero-offer { max-width: none; }
  .hero--grouped .hero-offer-stack { order: 1; max-width: 440px; }
  .hero--grouped .hero-book-pair { grid-template-columns: minmax(0, 128px) minmax(0, 1fr); }
  .hero--grouped .guide-stage { order: 2; margin-top: 4px; }
  .hero--grouped .actor-track--tsuki { width: clamp(112px, 30vw, 144px); }
}

/* The resources become a friendly letter at the centre of the landing. */
.hero--kawaii { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; gap: 30px 56px; min-height: 860px; padding-top: 116px; padding-bottom: 48px; }
.hero--kawaii .hero-copy { grid-column: 1 / -1; grid-row: 1; justify-self: center; align-self: center; width: min(100%, 820px); max-width: 820px; text-align: center; }
.hero--kawaii .hero-offer { position: relative; max-width: none; padding: 36px 52px 28px; border: 1px solid #c9dce5; border-radius: 28px 28px 24px 24px; background: linear-gradient(145deg, rgba(255,255,255,.97) 35%, rgba(240,248,252,.97)); box-shadow: 7px 9px 0 rgba(173,203,217,.22), 0 18px 46px rgba(64,81,83,.10); }
.hero--kawaii .hero-offer::before { content: ""; position: absolute; top: -9px; left: 46%; width: 76px; height: 20px; border: 1px solid rgba(151,183,206,.35); background: repeating-linear-gradient(110deg, rgba(210,232,243,.75) 0 8px, rgba(239,247,251,.8) 8px 16px); transform: rotate(-4deg); }
.hero--kawaii .hero-inline-kaomoji { display: inline-block; white-space: nowrap; color: #668995; font-size: .95em; }
.hero--kawaii .hero-mail-stamp { position: absolute; top: 10px; right: 14px; width: 34px; height: 36px; display: grid; align-content: center; border: 2px dotted #a7c2d1; border-radius: 7px; transform: rotate(7deg); color: #6b91a6; font: 700 8px/1.3 "Nunito", sans-serif; background: #f7fcff; }
.hero--kawaii .hero-offer h1 { margin: 0 auto 16px; padding-inline: 8px; max-width: 22ch; font: 800 clamp(2.1rem, 4.3vw, 3.6rem)/1.08 "Nunito", "Noto Sans JP", sans-serif; color: #244951; letter-spacing: -.025em; text-wrap: balance; }
.hero--kawaii .hero-offer > p { margin: 0 auto; max-width: 58ch; color: #35494c; font: 600 clamp(1rem, 1.55vw, 1.2rem)/1.65 "Nunito", "Noto Sans JP", sans-serif; }
.hero--kawaii .hero-offer .hero-offer__note { margin-top: 18px; padding-top: 16px; border-top: 1px dashed #b6d0db; color: #455d57; font: 700 clamp(.9rem, 1.3vw, 1.05rem)/1.55 "Nunito", "Noto Sans JP", sans-serif; }
.hero--kawaii .hero-offer-stack { grid-column: 1; grid-row: 2; justify-self: end; width: min(100%, 420px); }
.hero--kawaii .hero-book-pair { grid-template-columns: minmax(0, 128px) minmax(0, 1fr); }
.hero--kawaii .hero-book-note { border-radius: 16px; color: #324d52; font-family: "Nunito", sans-serif; }
.hero--kawaii .guide-stage { grid-column: 2; grid-row: 2; align-self: center; width: min(100%, 280px); justify-self: start; }
.hero--kawaii .actor-track--tsuki { width: clamp(120px, 12vw, 158px); }
.hero-video-background { background-image: url('./assets/images/torii-paper-garden-poster-v1.webp'); }
.hero-loop-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.hero-loop-video.is-playing { opacity: 1; }
.hero--kawaii .hero-wash { background: linear-gradient(180deg, rgba(255,253,247,.2), rgba(255,253,247,.08) 55%, rgb(247,243,234)), linear-gradient(90deg,rgba(238,248,245,.35),transparent 35%,transparent 65%,rgba(250,237,245,.3)); }
/* One paper edge owns the hero-to-book crossing. */
.hero--kawaii::after,
.feature-doorway--shelf::after { content: none; }
.hero-paper-edge {
  position: absolute;
  z-index: 3;
  inset: auto 0 -1px;
  display: block;
  width: 100%;
  height: 32px;
  pointer-events: none;
}
.feature-doorway--shelf {
  background:
    radial-gradient(ellipse 28rem 16rem at 88% 58%, color-mix(in srgb, var(--door-accent) 16%, transparent), transparent),
    linear-gradient(180deg, #fffdf8, #f7f3ea);
}
/* A gentle scalloped edge replaces the retired support band. */
.making-strip { padding-bottom: 56px; }
.site-footer { background: #fffdf8; isolation: isolate; }
.site-footer::before { inset: -12px 0 auto; height: 13px; background: radial-gradient(ellipse 32px 12px at 32px 12px,#fffdf8 98%,transparent 100%) 0 0 / 64px 13px repeat-x; }
@media (max-width: 760px) {
  .hero--kawaii { display: grid; grid-template-columns: 1fr; gap: 26px; min-height: 0; padding: 120px 20px 42px; }
  .hero--kawaii .hero-copy { grid-column: 1; grid-row: 1; }
  .hero--kawaii .hero-offer { padding: 32px 22px 24px; border-radius: 22px; }
  .hero--kawaii .hero-mail-stamp { width: 30px; height: 32px; right: 10px; top: 8px; font-size: 7px; }
  .hero--kawaii .hero-offer h1 { font-size: clamp(2rem, 6.8vw, 2.8rem); padding-inline: 12px; }
  .hero--kawaii .hero-offer-stack { grid-column: 1; grid-row: 2; justify-self: center; width: min(100%, 400px); }
  .hero--kawaii .hero-book-pair { grid-template-columns: minmax(0, 112px) minmax(0, 1fr); }
  .hero--kawaii .guide-stage { grid-column: 1; grid-row: 3; justify-self: center; margin-top: 0; }
  .hero--kawaii .actor-track--tsuki { width: clamp(112px, 27vw, 144px); }
}
@media (max-width: 800px) { .hero--kawaii { padding-top: 144px; } }
@media (prefers-reduced-motion: reduce) { .hero-loop-video { display: none; } }

/* Book doorway: one reading action, with the real book beside it. */
.book--doorway {
  display: block;
  scroll-margin-top: 78px;
  padding-block: clamp(3rem, 6vw, 6rem);
  background: linear-gradient(145deg, #fffdf8 35%, #eef7f5);
  color: #173243;
}
.book--doorway::before { content: none; }
.book--doorway::after { content: none; }
.book-doorway__inner {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  grid-template-areas: "preview intro" "preview details";
  align-items: start;
  gap: 1.4rem clamp(2rem, 5vw, 5rem);
  width: min(100%, 70rem);
  margin-inline: auto;
}
.book-doorway__intro { grid-area: intro; min-width: 0; }
.book-doorway__name {
  margin: 0 0 1rem;
  color: #355e59;
  font: 700 1rem/1.5 "Nunito", "Noto Sans JP", sans-serif;
  text-wrap: pretty;
}
.book--doorway h2 {
  margin: 0;
  max-width: 16ch;
  font: 800 clamp(2.4rem, 4.1vw, 3.6rem)/1.12 "Nunito", "Noto Sans JP", sans-serif;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.book--doorway h2 span { color: #356962; }
.book-doorway__details { grid-area: details; min-width: 0; }
.book--doorway .book-lede {
  margin: 0 0 1.8rem;
  max-width: 44ch;
  color: #354f58;
  font: 500 1.125rem/1.65 var(--sans);
  text-wrap: pretty;
}
.book--doorway .book-doorway__read {
  position: relative;
  display: inline-flex;
  justify-content: space-between;
  gap: 1.4rem;
  min-height: 64px;
  max-width: 100%;
  padding: 1rem 1.5rem;
  border-radius: 14px;
  background: #bd2638;
  color: #fff;
  font: 800 1.125rem/1.35 "Nunito", "Noto Sans JP", sans-serif;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: 0 10px 24px rgb(156 30 48 / 18%);
  overflow: hidden;
}
.book-doorway__read::after {
  content: "";
  position: absolute;
  inset: -40% auto -40% -70%;
  width: 45%;
  background: linear-gradient(110deg, transparent, rgb(255 255 255 / 24%), transparent);
  transform: skewX(-15deg);
  pointer-events: none;
}
.book--doorway .book-doorway__read:hover { background: #a82031; }
.book-doorway__read:is(:hover, :focus-visible)::after { animation: book-doorway-sheen .7s ease-out; }
.book-doorway__read span { flex-shrink: 0; transition: transform .2s ease-out; }
.book-doorway__read:hover span { transform: translateX(4px); }
.book--doorway a:focus-visible { outline: 3px solid #168a84; outline-offset: 5px; }
.book-doorway__free-note {
  margin: .8rem 0 0;
  color: #4b666b;
  font-size: .9rem;
  line-height: 1.5;
}
.book-doorway__more {
  margin: 1.3rem 0 0;
  color: #354f58;
  font-size: .95rem;
  line-height: 1.6;
}
.book-doorway__more a {
  display: inline;
  color: #274f58;
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
.book-doorway__more a:hover { color: #a82031; }
.book--doorway .book-author-note {
  margin: 1.6rem 0 0;
  padding: 1.1rem 0 0;
  max-width: 54ch;
  border-top: 1px solid #cadbd7;
  color: #4b666b;
  font-size: .9rem;
  line-height: 1.6;
}
.book-doorway__preview {
  grid-area: preview;
  align-self: center;
  min-width: 0;
  margin: 0;
  padding: 1.5rem 1rem;
  text-align: center;
}
@keyframes book-doorway-sheen { to { left: 130%; } }
@media (max-width: 760px) {
  .book--doorway { padding: 2.7rem 1.25rem 3rem; scroll-margin-top: 112px; }
  .book-doorway__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "intro" "preview" "details";
    gap: 1.4rem;
    width: min(100%, 34rem);
  }
  .book--doorway h2 { font-size: clamp(2.2rem, 7.5vw, 3rem); max-width: none; }
  .book-doorway__name { margin-bottom: .6rem; }
  .book-doorway__preview { padding: .5rem 1rem 0; }
  .book--doorway .book-lede { font-size: 1rem; margin-bottom: 1.3rem; }
  .book--doorway .book-doorway__read { width: 100%; min-height: 60px; }
}
@media (max-width: 380px) {
  .book--doorway .book-doorway__read { gap: 1rem; padding-inline: 1.15rem; font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .book-doorway__read::after { display: none; }
  .book-doorway__read span { transition: none; }
  .book-doorway__read:hover span { transform: none; }
}


/* Book-first journey: shared paper, then a blue invitation into the study tools. */
.book--doorway { background: #fffdf8; }
.making-strip {
  border-top: 1px solid #d8e4df;
  background: #fffdf8;
  padding-block: clamp(2rem, 4vw, 3rem) clamp(3rem, 5vw, 4rem);
}
.study-invitation {
  position: relative;
  isolation: isolate;
  background: #eef6fa;
  color: #173243;
  padding: clamp(3rem, 6vw, 5rem) clamp(1.2rem, 5vw, 4rem) clamp(3.5rem, 6vw, 5.5rem);
  scroll-margin-top: 112px;
}
.study-invitation::before {
  content: "";
  position: absolute;
  inset: -12px 0 auto;
  height: 13px;
  background: radial-gradient(ellipse 32px 12px at 32px 12px, #eef6fa 98%, transparent 100%) 0 0 / 64px 13px repeat-x;
  pointer-events: none;
}
.study-invitation__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  max-width: 70rem;
  margin-inline: auto;
}
.study-invitation h2,
.study-invitation h3 {
  margin: 0;
  font-family: "Nunito", "Noto Sans JP", sans-serif;
  font-weight: 800;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.study-invitation h2 { font-size: clamp(2rem, 3.7vw, 3.1rem); line-height: 1.12; }
.study-invitation h3 { font-size: clamp(1.4rem, 2vw, 1.7rem); line-height: 1.25; }
.study-invitation p { margin: 1.1rem 0 1.5rem; max-width: 49ch; font-size: 1.05rem; line-height: 1.65; color: #354f58; text-wrap: pretty; }
.study-invitation__news { padding-inline-start: clamp(1.5rem, 3vw, 2.5rem); border-inline-start: 1px solid #cfdee7; }
.study-invitation__news p { font-size: 1rem; }
.study-invitation__cta,
.study-invitation__email {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  min-height: 60px;
  max-width: 100%;
  padding: 1rem 1.4rem;
  border: 1px solid #246878;
  border-radius: 14px;
  font: 800 1.05rem/1.35 "Nunito", "Noto Sans JP", sans-serif;
  text-decoration: none;
  transition: background .2s ease-out, color .2s ease-out;
}
.study-invitation__cta { background: #fff; color: #244f5a; box-shadow: none; font-size: 1rem; }
.study-invitation__cta:hover { background: #e0eef4; }
.study-invitation__email { background: #fff; color: #244f5a; font-size: 1rem; }
.study-invitation__email:hover { background: #e0eef4; }
.study-invitation a:focus-visible { outline: 3px solid #168a84; outline-offset: 5px; }
.study-invitation__cta span,
.study-invitation__email span { flex-shrink: 0; }
.study-invitation .study-invitation__note { margin: .75rem 0 0; font-size: .875rem; color: #4b666b; }
.feature-doorway--shelf::before { content: ""; }
.feature-doorway { --doorway-action: #245c67; }
.feature-doorway--study-bites { --doorway-action: #68527f; }
.feature-doorway--mofuna { --doorway-action: #99543e; }
.feature-doorway--nara { --doorway-action: #3d6751; }
.feature-doorway .feature-doorway__eyebrow { margin: 0 0 2rem; }
.feature-doorway__name { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.6rem; min-height: 60px; max-width: 100%; padding: 1rem 1.4rem; border: 1px solid transparent; border-radius: 14px; background: var(--doorway-action); color: #fff; font: 800 clamp(1.1rem, 1.6vw, 1.25rem)/1.35 "Nunito", "Noto Sans JP", sans-serif; letter-spacing: normal; text-transform: none; text-decoration: none; box-shadow: 0 8px 20px rgb(23 50 67 / 12%); }
.feature-doorway__name > span { flex-shrink: 0; font-size: 1.35rem; }
.feature-doorway__name:hover { filter: brightness(.9); }
.feature-doorway__name:focus-visible,
.feature-doorway .feature-doorway__portal:focus-visible { outline: 3px solid #097784; outline-offset: 5px; }
.feature-doorway .feature-doorway__portal { display: flex; flex-direction: column; min-height: 0; transform: none; }
.feature-doorway .feature-doorway__portal img { aspect-ratio: 4 / 3; height: auto; }
.feature-doorway .feature-doorway__portal-chip { position: static; display: flex; justify-content: space-between; gap: 1rem; min-height: 64px; padding: 1rem 1.5rem; border: 0; border-radius: 0; background: var(--doorway-action); color: #fff; font: 800 1.2rem/1.4 "Nunito", "Noto Sans JP", sans-serif; letter-spacing: normal; text-transform: none; backdrop-filter: none; }
.feature-doorway .feature-doorway__portal:hover .feature-doorway__portal-chip { filter: brightness(.9); }
.feature-doorway { scroll-margin-top: 112px; }
@media (max-width: 760px) {
  .study-invitation__inner { grid-template-columns: minmax(0, 1fr); gap: 2rem; max-width: 34rem; }
  .study-invitation__news { padding: 2rem 0 0; border-inline-start: 0; border-top: 1px solid #cfdee7; }
  .study-invitation__email { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .study-invitation__cta, .study-invitation__email { transition: none; }
}