/* Editorial shell for this page only;
all content works without the 3D layer. */ .immersive-body {
  --paper:#f7f9ff;
  --ink:#244177;
  --text:#17213a;
  --muted:#59657b;
  --hairline:#d2d9e8;
  --gold:#b18a37;
  --sans:'Geologica',sans-serif;
  --serif:'Spectral',Georgia,serif;
  background:var(--paper);
  color:var(--text);
  font:400 17px/1.6 var(--serif);
  margin:0;
  overflow-x:clip
}
.immersive-body::before,.immersive-body::after {
  display:none
}
.immersive-body * {
  box-sizing:border-box
}
.immersive-body [hidden] {
  display:none!important
}
.immersive-body a {
  color:inherit;
  text-decoration:none
}
.immersive-body a:hover {
  color:var(--ink)
}
.immersive-body :where(button,input) {
  font:inherit
}
.immersive-body button {
  cursor:pointer
}
.immersive-body :focus-visible {
  outline:2px solid #b87b39;
  outline-offset:5px
}
.immersive-body p {
  margin:0
}
.immersive-body h1,.immersive-body h2,.immersive-body h3 {
  font-family:var(--serif);
  font-weight:400;
  text-transform:none;
  letter-spacing:-.055em;
  padding:0;
  margin:0;
  line-height:1.08;
  animation:none
}
.immersive-body h2::before {
  display:none
}
.immersive-body em {
  font-family:var(--serif);
  font-weight:400
}
.immersive-body figure {
  margin:0
}
.immersive-body .eyeline {
  font:400 10px/1.5 var(--sans);
  text-transform:uppercase;
  letter-spacing:.16em
}
.skip-link {
  position:fixed;
  top:10px;
  left:10px;
  z-index:100;
  background:var(--paper);
  padding:10px 20px;
  transform:translateY(-160%)
}
.skip-link:focus {
  transform:none
}
.site-nav {
  height:96px;
  padding:0 4.7%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--hairline);
  position:relative;
  z-index:20;
  background:var(--paper)
}
.wordmark {
  display:flex;
  align-items:center;
  gap:14px;
  font:400 12px/1.35 var(--sans);
  letter-spacing:-.025em
}
.site-nav nav {
  display:flex;
  align-items:center;
  gap:36px;
  font:400 11px var(--sans)
}
.site-nav .nav-start {
  border:1px solid var(--hairline);
  border-radius:30px;
  padding:12px 19px;
  display:flex;
  gap:35px
}
.site-nav .nav-start:hover {
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink)
}
.immersive {
  overflow:clip
}
.hero {
  height:160vh;
  min-height:1000px;
  position:relative;
  background:radial-gradient(ellipse at 81% 46%,#d9e2f4 0,transparent 44%)
}
.hero-sticky {
  position:sticky;
  top:0;
  min-height:660px;
  height:100svh;
  max-height:1100px;
  padding:5.5% 7.1% 92px;
  isolation:isolate
}
.hero-copy {
  position:relative;
  z-index:3;
  max-width:650px;
  pointer-events:none;
  transform:translateY(calc(var(--hero-progress,0) * -28px));
  opacity:calc(1 - var(--hero-progress,0) * .3)
}
.hero-copy a {
  pointer-events:auto
}
.hero-copy .eyeline {
  display:flex;
  gap:10px;
  align-items:center;
  margin:0 0 30px
}
.hero-copy .eyeline>span {
  width:5px;
  height:5px;
  border-radius:100%;
  background:var(--ink)
}
.hero h1 {
  font-size:clamp(64px,7.7vw,126px);
  line-height:.99;
  letter-spacing:-.07em;
  color:var(--ink)
}
.hero h1 em {
  letter-spacing:-.06em
}
.hero-intro {
  font-size:17px;
  line-height:1.6;
  margin:27px 0 27px!important;
  color:var(--muted)
}
.pill {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:38px;
  border-radius:99px;
  padding:16px 24px;
  font:400 11px/1.35 var(--sans);
  border:1px solid transparent;
  transition:background .2s,transform .2s;
  letter-spacing:.015em
}
.pill:hover {
  transform:translateY(-2px)
}
.pill-dark {
  background:var(--ink);
  color:#fff9ec!important
}
.pill-dark:hover {
  background:#152747
}
.pill>span {
  font:inherit
}
.hero .tiny-note {
  font:300 10px var(--sans);
  color:var(--muted);
  margin:13px 0 0 6px
}
.hero-object {
  position:absolute;
  inset:0 -4% 25px 42%;
  z-index:2;
  pointer-events:none
}
.book-canvas {
  position:absolute;
  inset:0
}
.book-canvas canvas {
  width:100%;
  height:100%;
  display:block
}
.fallback-book {
  position:absolute;
  width:265px;
  height:365px;
  left:50%;
  top:46%;
  transform:translate(-50%,-50%) perspective(1100px) rotateX(14deg) rotateY(-24deg) rotateZ(12deg);
  transform-style:preserve-3d;
  filter:drop-shadow(25px 45px 22px #35201542);
  transition:opacity .5s
}
.book-canvas[data-ready=true]+.fallback-book {
  opacity:0;
  visibility:hidden
}
.fallback-cover {
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(85deg,#ffffff06 0 1px,transparent 1px 3px),var(--ink);
  color:#d0b682;
  border:1px solid #152747;
  box-shadow:inset 6px 0 9px #0005,inset -2px 0 3px #fff2;
  transform:translateZ(19px);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:26px 23px;
  text-align:center
}
.fallback-cover::before {
  content:'';
  position:absolute;
  inset:14px;
  border:1px solid #c0a36d70
}
.cover-small {
  font:7px var(--sans);
  letter-spacing:.18em;
  margin:13px 0 43px
}
.cover-title {
  font:32px/1.08 var(--serif);
  letter-spacing:-.045em
}
.cover-title em {
  font-size:26px
}
.cover-ornament {
  font-size:47px;
  margin-top:16px
}
.cover-bottom {
  font:6px/1.8 var(--sans);
  letter-spacing:.15em;
  margin-top:auto
}
.fallback-pages {
  position:absolute;
  inset:5px 1px 5px auto;
  width:35px;
  background:repeating-linear-gradient(90deg,#e5dcc4 0 1px,#fbf5e6 1px 3px);
  transform:rotateY(90deg) translateZ(17px);
  transform-origin:right
}
.fallback-spine {
  position:absolute;
  left:-17px;
  top:0;
  bottom:0;
  width:37px;
  background:#152747;
  transform:rotateY(-90deg);
  border:1px solid #101d35
}
.book-caption {
  position:absolute;
  bottom:20%;
  right:15%;
  font:italic 15px var(--serif);
  color:var(--ink);
  display:flex;
  align-items:center;
  gap:15px;
  transform:rotate(-6deg)
}
.hero-foot {
  position:absolute;
  bottom:34px;
  left:7.1%;
  right:5%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  font:300 9px var(--sans);
  letter-spacing:.025em;
  color:var(--muted);
  z-index:4
}
.scroll-cue {
  display:flex;
  align-items:center;
  gap:11px
}
.scroll-mark {
  display:grid;
  place-items:center;
  width:29px;
  height:40px;
  border:1px solid #bcb0a0;
  border-radius:20px;
  font-size:16px
}
.hero-foot button {
  border:0;
  border-bottom:1px solid #bcb0a0;
  background:none;
  padding:5px 0;
  font:300 9px var(--sans);
  color:var(--muted)
}
.language-ribbon {
  position:relative;
  z-index:5;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:38px 7.1%;
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  background:var(--paper);
  gap:25px
}
.language-ribbon>span {
  font:300 11px/1.6 var(--sans);
  color:var(--muted)
}
.language-ribbon>a {
  font:26px var(--serif);
  letter-spacing:-.035em
}
.language-ribbon small {
  display:block;
  font:300 9px var(--sans);
  letter-spacing:.09em;
  margin-top:4px;
  color:var(--muted);
  text-transform:uppercase
}
.section-pad {
  padding:110px 7.1%
}
.section-heading {
  text-align:center
}
.immersive h2 {
  font-size:clamp(42px,5.1vw,78px);
  letter-spacing:-.05em
}
.section-heading .eyeline,.rooms-heading .eyeline {
  margin-bottom:22px
}
.section-heading>p:last-child {
  margin-top:24px;
  font-size:17px;
  color:var(--muted)
}
.reading-section {
  background:#fffdf5;
  position:relative
}
.specimen-languages {
  display:flex;
  justify-content:center;
  gap:24px;
  margin:36px auto 0;
  font:10px var(--sans);
  color:var(--muted)
}
.specimen-languages a {
  padding:5px 0;
  border-bottom:1px solid transparent
}
.specimen-languages a[aria-current] {
  color:var(--ink);
  border-bottom-color:var(--ink)
}
.reading-stage {
  max-width:960px;
  margin:55px auto 38px;
  position:relative;
  padding:10px 0 40px;
  perspective:1700px
}
.paper-spread {
  display:grid;
  grid-template-columns:1fr 1fr;
  transform:rotateX(10deg) rotateZ(-4deg);
  transform-style:preserve-3d;
  box-shadow:0 22px 30px -16px #5a41374d,0 2px 0 1px #ded7c7,0 5px 0 #fdf9ee,0 8px 0 #d4ccbd,0 11px 0 #fcf8ee,0 14px 0 #244177;
  border-radius:3px;
  transition:transform .7s
}
.paper-page {
  background:#fffcf2;
  min-height:430px;
  padding:32px 37px;
  position:relative
}
.paper-verso {
  background:linear-gradient(90deg,#faf4e7 0,#fffaf0 84%,#e5dccb 100%);
  border-radius:3px 0 0 3px
}
.paper-recto {
  background:linear-gradient(90deg,#ddd3c0 0,#fffaf0 9%,#fffcf2 100%);
  border-radius:0 3px 3px 0;
  transform-origin:left;
  transform:rotateY(-3deg)
}
.paper-running {
  font:300 8px var(--sans);
  text-transform:uppercase;
  letter-spacing:.08em;
  border-bottom:1px solid #d8ccba;
  padding-bottom:16px;
  display:flex;
  justify-content:space-between;
  gap:12px
}
.paper-title {
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-top:67px;
  text-align:center;
  font:45px/1.08 var(--serif);
  color:var(--ink);
  letter-spacing:-.055em;
  overflow-wrap:anywhere
}
.paper-title em {
  font-size:18px;
  letter-spacing:-.015em;
  margin-top:13px;
  color:var(--muted)
}
.mini-rule {
  width:25px;
  height:1px;
  background:var(--gold);
  margin-bottom:20px
}
.paper-edition {
  text-align:center;
  margin-top:30px!important;
  font-size:11px;
  color:var(--muted)
}
.page-number {
  position:absolute;
  bottom:18px;
  left:50%;
  font:9px var(--serif);
  color:var(--muted)
}
.sample-line {
  margin-top:40px;
  font:26px/1.7 var(--serif);
  letter-spacing:-.015em
}
.sample-line button {
  padding:0 1px;
  color:inherit;
  border:0;
  border-bottom:1px solid #c1a691;
  background:transparent;
  border-radius:1px;
  line-height:1.25
}
.sample-line button:hover,.sample-line button.selected {
  background:#e6d8b7;
  border-color:#ac8e5c
}
.sentence-translation {
  font-size:13px;
  font-style:italic;
  line-height:1.6;
  color:#877463;
  margin-top:18px!important
}
.page-audio {
  display:flex;
  flex-wrap:wrap;
  gap:8px 15px;
  align-items:center;
  margin-top:25px
}
.page-audio button {
  font:10px var(--sans);
  border:0;
  background:none;
  padding:5px 0;
  color:var(--ink)
}
.page-audio button>span {
  font-size:18px;
  vertical-align:-1px;
  padding-right:7px
}
.page-audio>span {
  font:8px var(--sans);
  color:#8b8070
}
.meaning-card {
  position:absolute;
  left:14%;
  bottom:-47px;
  width:300px;
  padding:22px 25px 0;
  background:#fffdf7;
  border:1px solid #e3d7c9;
  box-shadow:0 18px 45px #5b3d2521;
  transform:rotate(-2deg);
  border-radius:3px;
  z-index:2
}
.meaning-top {
  display:flex;
  justify-content:space-between;
  align-items:center
}
.meaning-top .eyeline {
  font-size:7px;
  color:#887861
}
.meaning-top button {
  border:1px solid #d6c8b6;
  color:var(--ink);
  border-radius:50%;
  width:27px;
  height:27px;
  background:transparent;
  font-size:14px
}
.meaning-card .meaning-word {
  font:32px/1.3 var(--serif);
  color:var(--ink);
  margin:12px 0 0
}
.meaning-gloss {
  font-size:15px
}
.meaning-root {
  font-size:10px;
  color:var(--muted);
  margin-top:10px!important
}
.keep-link {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid #e6ddce;
  padding:14px 0;
  margin-top:20px;
  font:9px var(--sans);
  color:var(--ink)!important
}
.keep-link>span {
  font-size:16px
}
.interaction-hint {
  position:absolute;
  left:58%;
  bottom:-12px;
  font:italic 14px var(--serif);
  color:var(--muted);
  max-width:210px;
  transform:rotate(-4deg)
}
.interaction-hint>span {
  font:28px var(--serif);
  margin-right:10px
}
.audio-status {
  min-height:20px;
  text-align:center;
  font:11px var(--sans);
  color:var(--ink)
}
.reading-benefits {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7%;
  padding-top:45px;
  border-top:1px solid var(--hairline)
}
.reading-benefits p {
  font-size:14px;
  line-height:1.6;
  color:var(--muted)
}
.reading-benefits span {
  display:block;
  font:9px var(--sans);
  letter-spacing:.1em;
  color:var(--ink);
  margin-bottom:15px
}
.reading-benefits strong {
  display:block;
  font:22px var(--serif);
  color:var(--text);
  letter-spacing:-.035em;
  margin-bottom:10px
}
.specimen-fallback {
  text-align:center;
  padding:75px 10px
}
.specimen-fallback .pill {
  margin-top:20px
}
.routine-section {
  background:#152747;
  color:#fffdf5;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8%;
  overflow:hidden;
  position:relative
}
.routine-copy {
  position:relative;
  z-index:3
}
.routine-copy .eyeline {
  color:#abbcd9;
  margin-bottom:27px
}
.routine-copy h2 {
  font-size:clamp(44px,4.8vw,72px)
}
.routine-copy>p:not(.eyeline) {
  max-width:430px;
  margin-top:25px;
  font-size:16px;
  color:#c2cde0
}
.learning-steps {
  list-style:none;
  margin:38px 0 30px;
  padding:0
}
.learning-steps li {
  display:flex;
  gap:19px;
  padding:22px 0;
  border-top:1px solid #f2e8d923
}
.learning-steps li>span {
  font:9px var(--sans);
  padding-top:8px;
  color:#e0c688
}
.learning-steps h3 {
  font:18px/1.4 var(--serif);
  letter-spacing:-.02em
}
.learning-steps p {
  font-size:12px;
  line-height:1.6;
  color:#b9c8e0;
  margin-top:7px
}
.learning-steps strong {
  font-weight:400;
  color:#e0e6f1
}
.text-link {
  display:inline-block;
  font:10px/1.6 var(--sans);
  border-bottom:1px solid #948276;
  padding-bottom:7px
}
.routine-section a:hover {
  color:#fff
}
.text-link>span {
  margin-left:10px
}
.memory-stage {
  position:relative;
  min-height:570px;
  align-self:center;
  perspective:1400px
}
.memory-card {
  position:absolute;
  width:300px;
  height:386px;
  left:50%;
  top:44%;
  transform:translate(-50%,-50%);
  border-radius:3px;
  padding:32px 30px;
  box-shadow:0 20px 40px #0003
}
.memory-back {
  background:#345480;
  transform:translate(-28%,-56%) rotate(15deg);
  color:#c5d1e8;
  font:7px var(--sans);
  letter-spacing:.16em;
  border:1px solid #627fa9
}
.memory-middle {
  background:#e5d8bb;
  color:#715c44;
  transform:translate(-42%,-50%) rotate(5deg);
  font:7px var(--sans);
  letter-spacing:.16em
}
.memory-front {
  background:#f9f2e3;
  color:#152747;
  transform:translate(-57%,-46%) rotate(-7deg);
  border:1px solid #e5d8c0;
  text-align:center;
  transition:transform .2s
}
.memory-front .eyeline {
  font-size:8px;
  color:#85745c
}
.recall-label {
  font:10px var(--sans);
  color:#8a7966;
  margin:40px 0 14px!important
}
.recall-gloss {
  font:28px/1.15 var(--serif);
  letter-spacing:-.04em;
  color:var(--ink)
}
.recall-answer {
  font:23px var(--serif);
  margin-top:23px;
  min-height:66px
}
.recall-answer small {
  display:block;
  font:10px var(--sans);
  margin-top:6px;
  color:#86725d
}
.recall-answer[data-hidden=true] {
  visibility:hidden
}
.pill-light {
  color:var(--ink);
  background:transparent;
  border:1px solid #cfbda4;
  font-size:9px;
  padding:12px 19px;
  margin-top:10px
}
.memory-card-foot {
  position:absolute;
  bottom:25px;
  left:0;
  right:0;
  font:6px var(--sans);
  letter-spacing:.1em;
  color:#9c8970
}
.rooms-section {
  background:var(--paper)
}
.rooms-heading {
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:end
}
.rooms-heading>p {
  font-size:15px;
  color:var(--muted);
  padding-bottom:6px
}
.room-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:30px;
  margin-top:65px
}
.room-cover-link {
  display:block;
  position:relative;
  padding:30px 19px 18px;
  background:#e8edf7;
  perspective:1000px;
  transition:background .3s
}
.room-cover-link:hover {
  background:#dce5f5
}
.room-book {
  height:290px;
  position:relative;
  transform:rotateY(-17deg) rotateZ(-3deg);
  transform-style:preserve-3d;
  filter:drop-shadow(13px 18px 11px #3e2c292b);
  transition:transform .6s cubic-bezier(.2,.8,.2,1)
}
.room-cover-link:hover .room-book {
  transform:rotateY(-26deg) rotateZ(0) translateY(-9px)
}
.room-book-front {
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(95deg,#ffffff07 0 1px,transparent 1px 3px),var(--room-cloth);
  color:#e7d4a9;
  padding:22px 14px;
  display:flex;
  align-items:center;
  flex-direction:column;
  text-align:center;
  box-shadow:inset 6px 0 9px #0005,inset -2px 0 3px #fff3;
  transform:translateZ(9px)
}
.room-book-front::before {
  position:absolute;
  content:'';
  inset:10px;
  border:1px solid #d8c09144
}
.room-book-edge {
  position:absolute;
  right:-8px;
  top:3px;
  bottom:3px;
  width:17px;
  background:repeating-linear-gradient(90deg,#e6dbc2 0 1px,#f5eedc 1px 3px);
  transform:rotateY(90deg)
}
.room-book-no {
  font:5px var(--sans);
  letter-spacing:.12em
}
.room-native {
  font:29px var(--serif);
  letter-spacing:-.035em;
  margin-top:31px
}
.room-book-ornament {
  font:68px/1 var(--serif);
  margin-top:18px
}
.room-book-author {
  font:7px/1.5 var(--sans);
  margin-top:auto;
  max-width:95%;
  letter-spacing:.02em
}
.room-book-bottom {
  font:4px var(--sans);
  letter-spacing:.12em;
  margin-top:18px
}
.room-open {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font:9px var(--sans);
  margin-top:25px;
  color:#46536f
}
.room-open>span {
  font-size:20px
}
.room-caption {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:22px 0 15px;
  border-bottom:1px solid var(--hairline);
  gap:8px
}
.room-caption h3 {
  font-size:21px
}
.room-caption>a {
  font:9px var(--sans);
  color:var(--muted);
  white-space:nowrap
}
.start-section {
  background:#e8eefc;
  text-align:center;
  position:relative
}
.start-stamp {
  font:70px/1 var(--serif);
  color:var(--ink);
  margin:0 0 28px
}
.start-section .eyeline {
  margin-bottom:25px
}
.start-section h2 {
  color:var(--ink)
}
.start-section>p:not(.eyeline) {
  margin-top:28px;
  font-size:16px;
  color:#52617b
}
.start-section>.pill {
  margin-top:28px
}
.start-options {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8%;
  margin-top:70px;
  text-align:left;
  border-top:1px solid #cbbba74d;
  padding-top:32px
}
.start-options p {
  font-size:13px;
  color:#52617b;
  line-height:1.65
}
.start-options strong {
  font:20px var(--serif);
  letter-spacing:-.025em;
  display:block;
  margin-bottom:9px;
  color:var(--text)
}
.access-detail {
  text-align:left;
  margin-top:45px;
  border-top:1px solid #cbbba7;
  border-bottom:1px solid #cbbba7;
  padding:18px 0
}
.access-detail summary {
  font:11px/1.5 var(--sans);
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  gap:12px;
  list-style:none
}
.access-detail summary>span {
  font-size:20px;
  font-weight:200;
  line-height:.8
}
.access-detail[open] summary {
  margin-bottom:28px
}
.access-detail .wrap {
  overflow-x:auto;
  animation:none;
  border:0;
  box-shadow:none;
  margin:0
}
.access-detail table {
  width:100%;
  font:11px/1.65 var(--sans);
  animation:none;
  border-collapse:collapse;
  background:transparent
}
.access-detail th,.access-detail td {
  padding:16px 15px;
  vertical-align:top;
  border-bottom:1px solid #cbbba780;
  background:none!important;
  color:var(--text)!important
}
.access-detail th {
  font-weight:500
}
.access-detail thead th {
  font:20px var(--serif);
  text-transform:none
}
.access-detail td {
  font-weight:300
}
.access-detail>p {
  font-size:12px;
  line-height:1.7;
  margin-top:20px;
  color:#796657
}
.access-detail a {
  text-decoration:underline
}
.details-section {
  padding:90px 17%;
  background:#fffdf5
}
.details-section>.eyeline {
  margin-bottom:20px
}
.details-section h2 {
  font-size:44px;
  margin-bottom:35px
}
.feature-detail {
  border-top:1px solid var(--hairline);
  padding:21px 0;
  scroll-margin-top:25px
}
.feature-detail:last-child {
  border-bottom:1px solid var(--hairline)
}
.feature-detail summary {
  font:300 15px/1.5 var(--sans);
  cursor:pointer;
  list-style:none;
  position:relative;
  padding-right:30px
}
.feature-detail summary::after {
  content:none;
  position:absolute;
  right:0;
  top:-4px;
  font:25px var(--serif);
  color:var(--ink)
}
.feature-detail[open] summary::after {
  content:none
}
.feature-detail-body {
  padding-top:20px;
  font-size:14px;
  color:var(--muted);
  max-width:760px
}
.feature-detail-body p+p {
  margin-top:15px
}
.feature-detail-body a {
  text-decoration:underline
}
.feature-detail-body kbd {
  font:10px var(--sans);
  padding:2px 4px;
  background:#eae2d5;
  border:1px solid #d8cdbb
}
.immersive-footer {
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:30px;
  background:var(--ink);
  color:#fffdf5;
  padding:65px 7.1% 25px;
  border:0;
  box-shadow:none;
  margin:0
}
.footer-brand {
  font:32px/1.1 var(--serif);
  letter-spacing:-.035em;
  display:block
}
.immersive-footer>div>p {
  font:300 10px var(--sans);
  color:#c0cee4;
  margin-top:20px
}
.immersive-footer nav {
  display:flex;
  flex-direction:column;
  align-items:start;
  gap:14px;
  font:300 10px var(--sans);
  border:0;
  padding:0
}
.immersive-footer a:hover {
  color:#fff
}
.footer-bottom {
  grid-column:1/-1;
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid #d2d9e844;
  padding-top:25px;
  margin-top:35px;
  font:300 8px var(--sans);
  color:#b9c8e0
}
#reading,#routine,#rooms,#free {
  scroll-margin-top:25px
}
@media(min-width:1600px) {
  .hero-sticky {
    padding-top:6.5%
  }
  .hero-object {
    right:0;
    left:45%
  }
  .room-book {
    height:360px
  }
  .room-native {
    font-size:38px
  }
  .room-book-ornament {
    font-size:84px
  }
}
@media(max-width:1050px) {
  .hero h1 {
    font-size:8.7vw
  }
  .hero-object {
    left:40%;
    right:-13%
  }
  .hero-copy {
    max-width:55%
  }
  .hero-intro {
    font-size:15px
  }
  .hero-foot>span {
    display:none
  }
  .section-pad {
    padding:90px 6%
  }
  .paper-page {
    padding:27px;
    min-height:440px
  }
  .sample-line {
    font-size:23px
  }
  .room-grid {
    gap:18px
  }
  .room-cover-link {
    padding:22px 13px 14px
  }
  .room-book {
    height:235px
  }
  .room-native {
    font-size:24px;
    margin-top:24px
  }
  .room-book-ornament {
    font-size:50px
  }
  .room-book-author {
    font-size:6px
  }
  .room-book-front {
    padding:20px 10px
  }
  .room-book-bottom {
    font-size:3px
  }
  .room-book-no {
    font-size:4px
  }
  .room-caption h3 {
    font-size:18px
  }
  .room-caption>a {
    font-size:8px
  }
  .routine-section {
    gap:4%
  }
  .memory-card {
    width:265px;
    height:355px;
    padding:27px 24px
  }
  .recall-label {
    margin-top:32px!important
  }
  .memory-stage {
    min-height:540px
  }
  .memory-annotation {
    right:5%
  }
  .rooms-heading>p {
    font-size:13px
  }
}
@media(max-width:700px) {
  .immersive-body {
    font-size:16px
  }
  .site-nav {
    height:78px;
    padding:0 6%
  }
  .wordmark {
    font-size:10px;
    gap:10px
  }
  .brand-symbol {
    font-size:46px;
    width:31px
  }
  .site-nav nav {
    gap:0
  }
  .site-nav nav>a:not(.nav-start) {
    display:none
  }
  .site-nav .nav-start {
    font-size:9px;
    padding:11px 13px;
    gap:20px
  }
  .hero {
    height:150svh;
    min-height:1060px;
    background:radial-gradient(ellipse at 64% 58%,#d9e2f4,transparent 60%)
  }
  .hero-sticky {
    height:100svh;
    min-height:730px;
    max-height:none;
    padding:39px 7% 75px
  }
  .hero-copy {
    max-width:100%
  }
  .hero-copy .eyeline {
    font-size:8px;
    letter-spacing:.1em;
    margin-bottom:20px
  }
  .hero h1 {
    font-size:clamp(53px,13vw,86px);
    line-height:.98;
    max-width:90%
  }
  .hero-intro {
    font-size:13px;
    line-height:1.55;
    margin:18px 0 20px!important;
    max-width:80%
  }
  .hero .pill {
    font-size:9px;
    padding:13px 18px;
    gap:30px
  }
  .hero .tiny-note {
    font-size:8px;
    margin-top:10px
  }
  .hero-object {
    inset:38% -30% 13px 12%;
    z-index:2;
    pointer-events:none
  }
  .book-caption {
    font-size:11px;
    bottom:16%;
    right:21%
  }
  .caption-line {
    width:25px;
    height:20px
  }
  .fallback-book {
    width:180px;
    height:250px;
    top:46%;
    transform:translate(-50%,-50%) perspective(1100px) rotateX(14deg) rotateY(-24deg) rotateZ(12deg)
  }
  .fallback-cover {
    padding:17px
  }
  .cover-small {
    font-size:4px;
    margin:8px 0 26px
  }
  .cover-title {
    font-size:23px
  }
  .cover-title em {
    font-size:20px
  }
  .cover-ornament {
    font-size:35px;
    margin-top:9px
  }
  .cover-bottom {
    font-size:4px
  }
  .hero-orbit {
    width:130vw;
    height:130vw;
    right:-53%;
    top:35%
  }
  .hero-orbit>span {
    display:none
  }
  .hero-foot {
    bottom:24px;
    left:7%;
    right:7%;
    font-size:8px
  }
  .hero-foot button {
    font-size:8px
  }
  .scroll-mark {
    width:24px;
    height:34px;
    font-size:13px
  }
  .language-ribbon {
    padding:24px 7%;
    gap:14px;
    flex-wrap:wrap
  }
  .language-ribbon>span {
    width:100%;
    font-size:9px;
    margin-bottom:5px
  }
  .language-ribbon>span br {
    display:none
  }
  .language-ribbon>a {
    font-size:19px
  }
  .language-ribbon small {
    font-size:7px;
    letter-spacing:.06em;
    margin-top:3px
  }
  .section-pad {
    padding:70px 7%
  }
  .immersive h2 {
    font-size:40px
  }
  .section-heading>p:last-child {
    font-size:14px;
    line-height:1.7;
    margin-top:20px
  }
  .eyeline {
    font-size:8px!important;
    letter-spacing:.1em!important
  }
  .section-heading .eyeline {
    margin-bottom:17px
  }
  .specimen-languages {
    gap:20px;
    font-size:9px;
    margin-top:28px
  }
  .reading-stage {
    margin:40px 0 25px;
    padding-bottom:0;
    perspective:900px
  }
  .paper-spread {
    grid-template-columns:1fr;
    transform:rotateZ(-2deg);
    width:100%;
    box-shadow:0 18px 25px -14px #5a41374d,0 2px 0 #ded7c7,0 5px 0 #fdf9ee,0 8px 0 #244177
  }
  .paper-verso {
    display:none
  }
  .paper-recto {
    transform:none;
    min-height:400px;
    padding:25px 26px 148px;
    background:linear-gradient(90deg,#e6dcc7,#fffaf0 5%,#fffcf2);
    border-radius:3px
  }
  .paper-running {
    font-size:7px
  }
  .sample-line {
    font-size:24px;
    margin-top:28px
  }
  .sentence-translation {
    font-size:12px;
    margin-top:15px!important
  }
  .page-audio {
    margin-top:15px;
    gap:8px 12px
  }
  .page-audio button {
    font-size:9px
  }
  .page-audio>span {
    font-size:7px
  }
  .meaning-card {
    left:9%;
    bottom:-58px;
    width:85%;
    padding:17px 20px 0;
    transform:rotate(3deg)
  }
  .meaning-top .eyeline {
    font-size:7px!important
  }
  .meaning-card .meaning-word {
    font-size:28px;
    margin-top:4px
  }
  .meaning-gloss {
    font-size:13px
  }
  .meaning-root {
    font-size:9px;
    margin-top:5px!important
  }
  .keep-link {
    margin-top:13px;
    padding:12px 0;
    font-size:8px
  }
  .interaction-hint {
    left:8%;
    bottom:-95px;
    font-size:12px;
    max-width:90%;
    transform:none
  }
  .interaction-hint>span {
    font-size:20px
  }
  .audio-status {
    margin-top:35px!important;
    font-size:10px
  }
  .reading-benefits {
    grid-template-columns:1fr;
    gap:25px;
    padding-top:32px
  }
  .reading-benefits p {
    font-size:13px;
    padding-left:36px;
    position:relative
  }
  .reading-benefits span {
    position:absolute;
    left:0;
    top:6px;
    font-size:8px
  }
  .reading-benefits strong {
    font-size:21px;
    margin-bottom:6px
  }
  .routine-section {
    grid-template-columns:1fr;
    gap:35px
  }
  .routine-copy h2 {
    font-size:43px
  }
  .routine-copy>p:not(.eyeline) {
    font-size:14px;
    max-width:100%;
    margin-top:20px
  }
  .learning-steps {
    margin:28px 0 22px
  }
  .learning-steps li {
    padding:17px 0;
    gap:16px
  }
  .learning-steps h3 {
    font-size:18px
  }
  .learning-steps p {
    font-size:12px
  }
  .text-link {
    font-size:9px
  }
  .memory-stage {
    min-height:440px;
    margin:0 -4%
  }
  .memory-card {
    width:260px;
    height:340px;
    top:43%
  }
  .memory-front {
    transform:translate(-55%,-46%) rotate(-7deg)
  }
  .recall-label {
    font-size:9px;
    margin:28px 0 10px!important
  }
  .recall-gloss {
    font-size:26px
  }
  .recall-answer {
    font-size:22px;
    min-height:61px;
    margin-top:18px
  }
  .memory-card-foot {
    font-size:5px;
    bottom:21px
  }
  .memory-orbit {
    width:380px;
    height:380px;
    top:46%
  }
  .memory-annotation {
    right:11%;
    bottom:-8px;
    gap:12px
  }
  .memory-annotation p {
    font-size:13px
  }
  .memory-annotation>span {
    font-size:35px
  }
  .rooms-heading {
    display:block
  }
  .rooms-heading>p {
    margin-top:24px;
    font-size:14px
  }
  .room-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:30px 18px;
    margin-top:35px
  }
  .room-cover-link {
    padding:19px 12px 12px
  }
  .room-book {
    height:215px
  }
  .room-native {
    font-size:22px;
    margin-top:23px
  }
  .room-book-ornament {
    font-size:49px;
    margin-top:17px
  }
  .room-book-author {
    font-size:5px
  }
  .room-book-no {
    font-size:3.5px
  }
  .room-book-front {
    padding:19px 7px
  }
  .room-book-front::before {
    inset:7px
  }
  .room-book-bottom {
    font-size:2.8px;
    margin-top:14px
  }
  .room-open {
    font-size:7px;
    margin-top:20px
  }
  .room-open>span {
    font-size:17px
  }
  .room-caption {
    padding:15px 0 12px;
    gap:4px
  }
  .room-caption h3 {
    font-size:18px
  }
  .room-caption>a {
    font-size:7px
  }
  .start-stamp {
    font-size:55px;
    margin-bottom:22px
  }
  .start-section h2 {
    font-size:39px
  }
  .start-section>p:not(.eyeline) {
    font-size:14px
  }
  .start-section>p br {
    display:none
  }
  .start-section>.pill {
    font-size:10px;
    padding:15px 23px
  }
  .start-options {
    grid-template-columns:1fr;
    margin-top:44px;
    gap:24px;
    padding-top:27px
  }
  .start-options strong {
    font-size:20px;
    margin-bottom:6px
  }
  .start-options p {
    font-size:12px
  }
  .access-detail {
    margin-top:30px
  }
  .access-detail summary {
    font-size:10px
  }
  .access-detail table {
    min-width:650px;
    font-size:10px
  }
  .access-detail thead th {
    font-size:17px
  }
  .access-detail td,.access-detail th {
    padding:12px 10px
  }
  .details-section {
    padding:65px 7%
  }
  .details-section h2 {
    font-size:35px;
    margin-bottom:25px
  }
  .feature-detail {
    padding:19px 0
  }
  .feature-detail summary {
    font-size:12px
  }
  .feature-detail-body {
    font-size:13px
  }
  .immersive-footer {
    grid-template-columns:1fr 1fr;
    padding:45px 7% 25px;
    gap:35px 20px
  }
  .immersive-footer>div:first-child {
    grid-column:1/-1
  }
  .footer-brand {
    font-size:30px
  }
  .immersive-footer nav {
    font-size:9px;
    gap:14px
  }
  .footer-bottom {
    font-size:7px;
    margin-top:0;
    padding-top:20px
  }
  .footer-bottom>span {
    max-width:150px
  }
  .footer-bottom>a {
    white-space:nowrap
  }
}
@media(max-width:370px) {
  .hero-sticky {
    min-height:710px
  }
  .hero h1 {
    font-size:49px
  }
  .hero-object {
    inset:40% -35% 0 7%
  }
  .room-grid {
    gap:24px 12px
  }
  .room-book {
    height:188px
  }
  .room-native {
    font-size:19px;
    margin-top:18px
  }
  .room-book-ornament {
    font-size:42px
  }
  .room-caption {
    display:block
  }
  .room-caption>a {
    display:block;
    margin-top:6px
  }
  .room-book-no {
    font-size:3px
  }
  .language-ribbon>a {
    font-size:17px
  }
  .memory-card {
    width:240px
  }
}
@media(prefers-reduced-motion:reduce) {
  .hero {
    height:auto;
    min-height:0
  }
  .hero-sticky {
    position:relative
  }
  .hero-copy {
    transform:none;
    opacity:1
  }
  .paper-spread,.room-book,.pill,.fallback-book {
    transition:none!important
  }
  .immersive-body *, .immersive-body *::before,.immersive-body *::after {
    animation:none!important;
    scroll-behavior:auto!important
  }
}
.immersive-body[data-motion=still] .hero {
  height:auto;
  min-height:0
}
.immersive-body[data-motion=still] .hero-sticky {
  position:relative
}
.immersive-body[data-motion=still] .hero-copy {
  transform:none;
  opacity:1
}
.immersive-footer a {
  text-transform:none;
  letter-spacing:inherit
}
.details-section>.eyeline {
  margin-bottom:20px
}
.paper-edition {
  display:none
}
@supports(animation-timeline:view()) {
  @media(prefers-reduced-motion:no-preference) {
    .immersive-body[data-motion=full] .paper-spread {
      animation:spread-arrives linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 50%
    }
    .immersive-body[data-motion=full] .memory-back {
      animation:card-fans linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 50%
    }
    @keyframes spread-arrives {
      from {
        transform:rotateX(24deg) rotateY(8deg) rotateZ(-7deg) translateY(20px)
      }
      to {
        transform:rotateX(0deg) rotateY(0deg) rotateZ(-2deg) translateY(0)
      }
    }
    @keyframes card-fans {
      from {
        transform:translate(-50%,-48%) rotate(-5deg)
      }
      to {
        transform:translate(-28%,-56%) rotate(15deg)
      }
    }
  }
}
/* Keep the complete opening composition inside the first phone viewport. */ @media(min-width:701px) {
  .hero-sticky {
    height:calc(100svh - 96px);
    min-height:620px
  }
  .hero-object {
    bottom:0
  }
  .book-caption {
    bottom:9%;
    right:16%
  }
}
@media(max-width:700px) {
  .hero-sticky {
    height:calc(100svh - 78px)
  }
  .hero h1 {
    font-size:clamp(46px,12.7vw,80px);
    max-width:100%
  }
  .hero-intro {
    max-width:100%
  }
  .hero-object {
    inset:48% 0 50px 7%
  }
  .book-caption {
    display:none
  }
  .hero-foot {
    bottom:15px
  }
}
@media(max-width:700px) {
  .hero .pill {
    font-size:10px;
    min-height:44px
  }
  .page-audio button {
    font-size:10px;
    min-height:38px
  }
  .meaning-top button {
    width:34px;
    height:34px
  }
  .pill-light {
    min-height:40px;
    font-size:10px
  }
  .feature-detail summary {
    min-height:24px
  }
}
@media (min-width: 701px) and (max-height: 800px) {
  .hero-sticky { padding-top: 3.6%; }
  .hero h1 { font-size: clamp(64px, 7vw, 110px); }
  .hero-copy .eyeline { margin-bottom: 24px; }
  .hero-intro { margin: 20px 0!important; }
}
/* Long dictionary glosses must grow the card rather than cover its controls. */
.memory-front {
  height: auto;
  min-height: 386px;
}
.memory-card-foot {
  position: static;
  display: block;
  margin-top: 26px;
}
@media (max-width: 1050px) {
  .memory-front { min-height: 355px; }
}
@media (max-width: 700px) {
  .memory-stage { min-height: 510px; }
  .memory-front { min-height: 355px; }
  .memory-card-foot { margin-top: 23px; }
}

/* The house's ink, its printer's mark, and the residents of the books. */
.immersive-body { --signal:#f6c445; }
.immersive-body .ic { width:20px; height:20px; display:inline-block; flex:none; vertical-align:middle; }
.immersive-body .ltl-mark { width:100%; height:100%; display:block; }
.brand-symbol { width:45px; height:45px; color:var(--ink); flex:none; }
.wordmark em { font:italic 13px/1.3 var(--serif); }
.site-nav { background:#f7f9fff2; }
.site-nav .nav-start { align-items:center; }
.site-nav .nav-start .ic { width:16px; height:16px; }
.hero { background:radial-gradient(ellipse at 82% 49%,#dae4f4 0,transparent 47%); }
.hero-binding { position:absolute; z-index:0; inset:9% 5% 17% 50%; color:#7184a6; pointer-events:none; }
.hero-binding i { position:absolute; inset:28px 0 0; border:1px solid #8798b829; border-radius:48% 48% 0 0; transform:rotate(7deg); }
.hero-binding i:nth-of-type(2) { inset:42px 14px 14px; }
.hero-binding i:nth-of-type(3) { inset:56px 28px 28px; }
.hero-binding>span { display:block; text-align:center; font:9px var(--sans); letter-spacing:.3em; }
.hero-binding small { position:absolute; left:50%; bottom:-24px; width:100%; transform:translateX(-50%); text-align:center; font:italic 13px var(--serif); }
.hero-company { position:absolute; right:3%; bottom:13%; display:flex; align-items:center; gap:8px; transform:rotate(-4deg); }
.hero-company .resident-figure { width:104px; }
.hero-company p { font:12px/1.5 var(--sans); color:var(--ink); }
.hero-company em { font:italic 14px/1.4 var(--serif); }
.book-caption { bottom:5%; right:25%; font-size:13px; transform:none; }
.cover-ornament { width:52px; height:52px; margin-top:20px; }
.fallback-cover .ltl-mark { --signal:#d0b682; }
.hero-foot, .hero-foot button { font-size:11px; }
.hero-foot button { min-height:36px; }
.hero-foot>span { font-size:10px; }
.hero .tiny-note { font-size:11px; }
.language-ribbon small { font-size:11px; }
.immersive-body .eyeline { font-size:11px; }
.specimen-languages { font-size:12px; gap:28px; }
.specimen-languages a { padding:10px 0; }
.reading-art { position:relative; }
.reading-stage { padding-bottom:0; }
.paper-running { font-size:10px; }
.page-audio button { display:inline-flex; gap:7px; align-items:center; min-height:36px; font-size:11px; }
.page-audio>span { font-size:10px; }
.meaning-top .eyeline { font-size:9px; }
.meaning-top button { width:38px; height:38px; display:grid; place-items:center; }
.meaning-card { border-color:#d2d9e8; box-shadow:0 18px 45px #15274718; }
.meaning-card::before { content:''; width:25px; height:42px; position:absolute; top:-1px; left:-1px; transform:translate(-50%,-40%) rotate(-9deg); background:#e9bf55; clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%); box-shadow:1px 2px 4px #0002; }
.meaning-root { font-size:12px; }
.keep-link { font-size:11px; gap:14px; }
.discovery-thread { position:absolute; width:40%; height:140px; left:38%; bottom:-100px; pointer-events:none; opacity:.55; color:#b4944c; z-index:1; }
.discovery-thread path { stroke:currentColor; stroke-width:1.2; stroke-dasharray:.015 .02; }
.reader-guide { display:flex; align-items:center; gap:15px; width:46%; margin:70px 0 0 auto; position:relative; z-index:2; }
.resident-figure { width:100px; flex:none; line-height:0; }
.resident-figure svg { width:100%; height:auto; display:block; overflow:visible; }
.resident-figure .cast-pose, .resident-figure .cast-pupils { transform-box:view-box; }
.resident-figure .cast-lid { transform-box:view-box; }
.guide-name { font:11px/1.5 var(--sans); color:var(--ink); }
.guide-name span { font-size:10px; color:var(--muted); }
.reader-guide .interaction-hint { position:static; transform:none; max-width:none; font:italic 15px/1.5 var(--serif); margin-top:5px; }
.reading-benefits { padding-top:35px; }
.reading-benefits p { font-size:15px; }
.memory-ledger { position:absolute; inset:5% -10% 14%; border:1px solid #c5d1e818; transform:rotate(8deg); }
.memory-ledger>span { position:absolute; left:24px; top:20px; font:8px var(--sans); letter-spacing:.2em; color:#a6b8d0; }
.memory-ledger i { position:absolute; inset:70px 24px auto; border-top:1px solid #c5d1e810; }
.memory-ledger i:nth-of-type(2) { top:160px; }
.memory-ledger i:nth-of-type(3) { top:250px; }
.memory-stage { min-height:650px; }
.memory-card { top:40%; }
.memory-front .eyeline { font-size:10px; }
.recall-label { font-size:11px; }
.recall-answer small { font-size:12px; }
.memory-card-foot { font-size:8px; }
.pill-light { font-size:11px; }
.practice-company { position:absolute; bottom:0; left:12%; display:flex; align-items:center; gap:15px; color:#e4eaf5; }
.practice-company .resident-figure { width:125px; filter:drop-shadow(0 10px 12px #08152c40); }
.practice-company .guide-name { color:#afc1df; font-size:10px; }
.practice-company p { font:19px/1.35 var(--serif); margin-top:7px; }
.learning-steps p { font-size:14px; }
.learning-steps li>span { font-size:11px; }
.text-link { font-size:11px; }
.room-book-ornament { width:90px; height:90px; position:relative; display:grid; place-items:center; margin:12px 0; }
.room-book-ornament>img { width:100%; height:100%; object-fit:contain; filter:invert(87%) sepia(20%) saturate(600%) hue-rotate(349deg); transition:opacity .3s; }
.room-resident { position:absolute; inset:0; width:100%; opacity:0; transform:translateY(5px); transition:opacity .3s,transform .5s; }
.room-cover-link:is(:hover,:focus-visible) .room-resident { opacity:1; transform:translateY(0); }
.room-cover-link:is(:hover,:focus-visible) .room-book-ornament>img { opacity:0; }
.room-cover-link:focus-visible .room-book { transform:rotateY(-26deg) rotateZ(0) translateY(-9px); }
.room-open { font-size:11px; }
.room-caption>a { font-size:11px; }
.room-caption .ic { width:14px; height:14px; }
.start-stamp { width:70px; height:70px; margin:0 auto 30px; }
.start-section { background:#e8eefc; }
.start-section::before,.start-section::after { content:''; position:absolute; width:12%; height:200px; top:100px; border-top:1px solid #a7b7d650; border-bottom:1px solid #a7b7d650; pointer-events:none; }
.start-section::before { left:0; border-right:1px solid #a7b7d650; }
.start-section::after { right:0; border-left:1px solid #a7b7d650; }
.start-options p { font-size:15px; }
.access-detail { border-color:#b7c3db; }
.access-detail summary { align-items:center; font-size:12px; }
.feature-detail summary { display:flex; justify-content:space-between; align-items:center; gap:20px; padding-right:0; }
.feature-detail summary::after { display:none; }
:is(.feature-detail,.access-detail)[open] .ic-plus-vertical { opacity:0; }
:is(.feature-detail,.access-detail) summary::-webkit-details-marker { display:none; }
.feature-detail-body { font-size:16px; }
.immersive-footer nav { font-size:12px; }
.immersive-footer>div>p, .footer-bottom { font-size:11px; }
.footer-bottom>a { display:flex; align-items:center; gap:8px; }
@media (min-width:1600px) {
  .hero-company { right:8%; bottom:18%; }
  .hero-company .resident-figure { width:135px; }
  .room-book-ornament { width:120px; height:120px; }
}
@media (max-width:1050px) {
  .hero-company { right:12%; bottom:12%; }
  .hero-company .resident-figure { width:86px; }
  .hero-company p { font-size:10px; }
  .hero-company em { font-size:12px; }
  .room-book-ornament { width:66px; height:66px; margin:8px 0; }
  .reader-guide { width:50%; gap:10px; }
  .reader-guide .resident-figure { width:84px; }
  .practice-company { left:3%; }
  .memory-stage { min-height:610px; }
  .room-caption { align-items:flex-start; flex-direction:column; }
}
@media (max-width:700px) {
  .brand-symbol { width:35px; height:35px; }
  .wordmark em { font-size:11px; }
  .site-nav .nav-start { font-size:11px; gap:10px; min-height:40px; }
  .hero h1 { font-size:clamp(46px,12.7vw,80px); }
  .hero .pill { font-size:11px; padding:13px 20px; }
  .hero .tiny-note { font-size:10px; }
  .hero-copy .eyeline { font-size:9px!important; }
  .hero-binding { inset:49% 6% 14% 12%; }
  .hero-binding>span { font-size:7px; }
  .hero-binding small { display:none; }
  .hero-company { right:5%; bottom:3%; gap:0; transform:rotate(-3deg); }
  .hero-company .resident-figure { width:78px; }
  .hero-company p { font-size:9px; width:112px; max-width:112px; }
  .hero-company em { font-size:11px; }
  .hero-object { inset:48% 0 50px 7%; }
  .hero-foot { font-size:10px; gap:12px; bottom:17px; }
  .hero-foot button { font-size:10px; }
  .hero-foot>span { display:none; }
  .language-ribbon small { font-size:9px; }
  .language-ribbon>span { font-size:11px; }
  .immersive-body .eyeline { font-size:10px!important; }
  .specimen-languages { gap:22px; font-size:11px; }
  .paper-running { font-size:9px; }
  .page-audio button { font-size:11px; }
  .page-audio>span { font-size:9px; }
  .meaning-top .eyeline { font-size:9px!important; }
  .meaning-root { font-size:11px; }
  .keep-link { font-size:10px; }
  .meaning-card { width:89%; left:6%; }
  .reader-guide { width:100%; margin-top:90px; gap:10px; }
  .reader-guide .resident-figure { width:90px; }
  .guide-name { font-size:10px; }
  .guide-name span { display:block; }
  .reader-guide .interaction-hint { font-size:13px; }
  .discovery-thread { display:none; }
  .audio-status { margin-top:0!important; }
  .reading-benefits p { font-size:14px; }
  .learning-steps p { font-size:14px; }
  .text-link { font-size:11px; }
  .memory-stage { min-height:620px; }
  .memory-card { top:36%; }
  .memory-front { padding:27px 23px; }
  .memory-front .eyeline { font-size:9px!important; }
  .recall-label { font-size:11px; }
  .memory-card-foot { font-size:8px; letter-spacing:0; }
  .practice-company { bottom:8px; left:8%; gap:12px; }
  .practice-company .resident-figure { width:115px; }
  .practice-company p { font-size:18px; }
  .room-book-ornament { width:60px; height:60px; margin:9px 0; }
  .room-open { font-size:10px; }
  .room-caption>a { font-size:10px; }
  .start-stamp { width:60px; height:60px; }
  .start-section::before,.start-section::after { display:none; }
  .start-options p { font-size:14px; }
  .access-detail summary { font-size:12px; }
  .feature-detail-body { font-size:15px; }
  .feature-detail summary { font-size:13px; }
  .immersive-footer nav { font-size:11px; }
  .footer-bottom { font-size:9px; gap:12px; }
}
@media (hover:none) {
  .room-resident { opacity:1; transform:none; }
  .room-book-ornament>img { opacity:0; }
}
.immersive-body[data-motion=still] *, .immersive-body[data-motion=still] *::before, .immersive-body[data-motion=still] *::after { animation:none!important; transition:none!important; }
@media (prefers-reduced-motion:reduce) {
  .immersive-body *, .immersive-body *::before,.immersive-body *::after { transition:none!important; }
}
/* The welcome sits in the fore-edge margin, never beyond the page. */
@media(min-width:701px) {
  .hero-company { right:12%; bottom:11%; width:142px; flex-direction:column; gap:4px; transform:rotate(-3deg); }
  .hero-company .resident-figure { width:86px; }
  .hero-company p { font-size:10px; text-align:center; }
  .hero-company em { font-size:12px; }
}
.hero-binding small,.book-caption { display:none; }
@media(max-width:700px) {
  .paper-recto { padding-bottom:110px; }
  .meaning-card { position:relative; left:auto; bottom:auto; margin:-72px auto 0; }
  .reader-guide { margin-top:35px; }
}
@media(min-width:701px) and (max-width:1050px) {
  .hero-object { inset:5% 1% 8% 46%; }
  .hero-company { right:5%; bottom:3%; }
}

/* ============================================================================
   THE OPENING, AS A SEQUENCE (4 Oct 2026). The book used to open inside sixty
   viewport-hundredths of scrolling and nothing else moved. The track is long
   now and the stage stays put while four things happen in order, all read off
   one eased number (--hero-progress, immersive.js): the title steps aside and
   the book comes to the middle; it opens; the page's own words rise out of
   it; the room's residents arrive; and a last line hands over to the page.
   ========================================================================== */
.hero { height:430vh; }
.hero-sticky {
  --stage:clamp(0, calc((var(--hero-progress,0) - .05) / .2), 1);
  --stage-e:calc(var(--stage) * var(--stage) * (3 - 2 * var(--stage)));
  overflow:clip;
}
.hero-copy {
  transform:translateY(calc(var(--stage-e) * -70px));
  opacity:calc(1 - var(--stage-e));
}
.hero-object { transform:translateX(calc(var(--stage-e) * -23vw)); }
.hero-binding, .hero-company, .book-caption { opacity:calc(1 - var(--stage-e)); }
.hero-burst { position:absolute; inset:0; z-index:4; pointer-events:none; --ux:min(1vw, 1.08vh); --uy:min(1vw, 1.08vh); }
.hero-burst > * {
  position:absolute; left:50%; top:47%;
  --l:clamp(0, calc((var(--hero-progress,0) - var(--s)) / .15), 1);
  --e:calc(var(--l) * var(--l) * (3 - 2 * var(--l)));
  opacity:var(--e);
  transform:translate(-50%,-50%)
    translate(calc(var(--x) * var(--e) * var(--ux)), calc(var(--y) * var(--e) * var(--uy)))
    rotate(calc(var(--r,0) * var(--e) * 1deg)) scale(calc(.3 + .7 * var(--e)));
  will-change:transform, opacity;
}
.burst-word {
  display:grid; justify-items:center; gap:2px; padding:10px 18px 9px;
  background:#fffdf7; border:1px solid #e3dccb; border-radius:3px 12px 12px 3px;
  box-shadow:0 14px 30px -14px #2b1d1055, 0 2px 0 #fff inset;
  font:500 clamp(19px, 2.1vw, 30px)/1.1 var(--serif); color:var(--ink); white-space:nowrap;
}
.burst-word small { font:500 clamp(10px, .85vw, 12.5px)/1.3 var(--sans); letter-spacing:.04em; color:#6b6f85; }
.burst-resident { width:clamp(46px, 5.4vw, 78px); height:auto; filter:drop-shadow(0 10px 12px #2b1d1033); }
.hero-finale {
  position:absolute; left:50%; top:6.5%; z-index:5; margin:0; text-align:center; pointer-events:none;
  --l:clamp(0, calc((var(--hero-progress,0) - .82) / .12), 1);
  opacity:var(--l); transform:translate(-50%, calc((1 - var(--l)) * -18px));
  display:grid; gap:6px;
}
.hero-finale span { font:500 clamp(24px, 3.2vw, 44px)/1.1 var(--serif); letter-spacing:-.02em; color:var(--ink); }
.hero-finale em { font:italic 400 clamp(15px, 1.4vw, 19px)/1.3 var(--serif); color:#6b6f85; }
.hero-foot > :not(button) { opacity:calc(1 - var(--stage-e)); }
@media (max-width:1050px) { .hero-object { transform:translateX(calc(var(--stage-e) * -14vw)); } }
@media (max-width:700px) {
  .hero { height:380svh; }
  .hero-object { transform:none; }
  .hero-burst { --ux:.7vw; --uy:.98svh; }
  .hero-burst > * { top:52%; }
  .burst-resident { width:42px; }
  .burst-word { padding:7px 12px 6px; }
  .hero-finale { top:5%; width:86%; }
}
/* sections that arrive */
.immersive-body[data-reveal]:not([data-motion=still]) .immersive > section:not(.hero) {
  opacity:0; transform:translateY(44px);
  transition:opacity .9s cubic-bezier(.22,.75,.2,1), transform 1.05s cubic-bezier(.22,.75,.2,1);
}
.immersive-body[data-reveal]:not([data-motion=still]) .immersive > section:not(.hero).is-in { opacity:1; transform:none; }
/* still, or asked for less motion: one screen, nothing flying */
.immersive-body[data-motion=still] .hero-burst, .immersive-body[data-motion=still] .hero-finale { display:none; }
.immersive-body[data-motion=still] .hero-object { transform:none; }
.immersive-body[data-motion=still] :is(.hero-binding, .hero-company, .book-caption, .hero-foot > *) { opacity:1; }
@media (prefers-reduced-motion:reduce) {
  .hero { height:auto; min-height:0; }
  .hero-burst, .hero-finale { display:none; }
  .hero-object { transform:none; }
  .hero-copy, .hero-binding, .hero-company, .book-caption, .hero-foot > * { opacity:1; transform:none; }
}