/* Episteme: an always-open, curved 3D book on a quiet cream desk. */

@font-face {
  font-family: "Episteme Serif";
  src: url(../fonts/noto-serif-georgian-georgian-wdth-normal.woff2) format("woff2-variations");
  font-weight: 100 900; font-stretch: 62.5% 100%; font-display: swap;
  unicode-range: U+0589, U+10A0-10FF, U+1C90-1CBA, U+1CBD-1CBF, U+205A, U+2D00-2D2F, U+2E31;
}
@font-face {
  font-family: "Episteme Serif";
  src: url(../fonts/noto-serif-georgian-latin-wdth-normal.woff2) format("woff2-variations");
  font-weight: 100 900; font-stretch: 62.5% 100%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Episteme Serif";
  src: url(../fonts/noto-serif-georgian-latin-ext-wdth-normal.woff2) format("woff2-variations");
  font-weight: 100 900; font-stretch: 62.5% 100%; font-display: swap;
  unicode-range: U+0100-02BA, U+20A0-20AB, U+20AD-20C0;
}
@font-face {
  font-family: "Episteme Sans";
  src: url(../fonts/noto-sans-georgian-georgian-wdth-normal.woff2) format("woff2-variations");
  font-weight: 100 900; font-stretch: 62.5% 100%; font-display: swap;
  unicode-range: U+0589, U+10A0-10FF, U+1C90-1CBA, U+1CBD-1CBF, U+205A, U+2D00-2D2F, U+2E31;
}
@font-face {
  font-family: "Episteme Sans";
  src: url(../fonts/noto-sans-georgian-latin-wdth-normal.woff2) format("woff2-variations");
  font-weight: 100 900; font-stretch: 62.5% 100%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BE, U+2122, U+2212;
}

:root {
  --ink: #282111;
  --ink-soft: #5B5645;
  --paper: #F5EFDE;
  --paper-edge: #DCD3BC;
  --cream: #ECE6D6;
  --wine: #752F2E;
  --wine-deep: #5E2524;
  --olive: #505750;
  --gold: #B0895A;
  --sans: "Episteme Sans", "Noto Sans Georgian", system-ui, sans-serif;
  --serif: "Episteme Serif", "Noto Serif Georgian", Georgia, serif;
  --ease-turn: cubic-bezier(.65, .02, .29, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  /* page size; the spread is two of these */
  --pw: min(32vw, 430px, calc((100svh - 240px) * .76));
  --ph: calc(var(--pw) / .76);
  --cloth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: light;
}
@media (max-aspect-ratio: 9/10), (max-width: 699px) {
  :root { --pw: min(80vw, 420px, calc((100svh - 250px) * .7)); --ph: calc(var(--pw) / .7); }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--cream);
  color: var(--ink);
  font: 400 1rem/1.5 var(--sans);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
::selection { background: var(--wine); color: var(--paper); }
:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; border-radius: 4px; }
img, svg { display: block; }
button { font: inherit; color: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 16px; top: -100px; z-index: 50;
  background: var(--ink); color: var(--paper); padding: .6rem 1rem; border-radius: 999px; text-decoration: none;
}
.skip:focus { top: 16px; }

/* ------------------------------------------------------------ stage */
.stage {
  position: fixed; inset: 0;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr);
}

/* ------------------------------------------------------------ top bar */
.top {
  position: relative; z-index: 5;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: clamp(14px, 2.4vw, 30px) clamp(16px, 4.4vw, 72px) 0;
}
.brand {
  justify-self: start;
  display: inline-flex; align-items: center; gap: .55rem;
  color: var(--ink); text-decoration: none;
  font: 650 1.3rem/1 var(--sans);
}
.brand__mark { width: 2rem; height: 2rem; color: var(--ink); }
.nav { display: flex; align-items: center; gap: clamp(.75rem, 1.6vw, 1.6rem); }
.nav a, .nav button {
  background: none; border: 0; padding: .35rem 0; cursor: pointer;
  color: var(--ink); text-decoration: none; font: 500 clamp(.78rem, .9vw, .98rem)/1 var(--sans); white-space: nowrap;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .45s var(--ease-out);
}
.nav a:hover, .nav button:hover { background-size: 100% 1.5px; }
.top__end { justify-self: end; display: flex; align-items: center; gap: .6rem; }
.icon-btn.landing-nav-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 4px; }
.landing-nav-toggle span { display: block; width: 19px; height: 1.5px; background: currentColor; transition: transform .2s, opacity .2s; }
.landing-nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(5.5px) rotate(45deg); }
.landing-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.landing-nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-5.5px) rotate(-45deg); }
.icon-btn {
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink);
  border: 0; background: transparent; cursor: pointer; text-decoration: none;
  transition: background-color .3s;
}
.icon-btn:hover { background: rgb(255 255 255 / .45); }
.icon-btn svg { width: 1.4rem; height: 1.4rem; fill: currentColor; }
.icon-btn--learn { display: none; }
.theme-toggle__moon { display: block; }
.theme-toggle__sun { display: none; }
[data-theme="dark"] .theme-toggle__moon { display: none; }
[data-theme="dark"] .theme-toggle__sun { display: block; }
.pill {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .3rem 1.05rem .3rem .3rem; border-radius: 999px;
  background: rgb(255 253 247 / .62);
  color: var(--ink); text-decoration: none; font: 500 .95rem/1 var(--sans);
  box-shadow: 0 1px 2px rgb(40 33 17 / .06), 0 6px 18px -8px rgb(40 33 17 / .18);
  transition: background-color .3s, transform .3s var(--ease-out);
}
.pill:hover { background: rgb(255 253 247 / .9); }
.pill__av {
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--wine); color: var(--cream);
}
.pill__av svg { width: 1.55rem; height: 1.55rem; }

/* Dark mode keeps the book as physical paper and changes the surrounding desk. */
[data-theme="dark"] { color-scheme: dark; }
[data-theme="dark"] body {
  background:
    radial-gradient(circle at 50% 46%, rgb(176 137 90 / .13), transparent 42%),
    #1C170C;
  color: var(--cream);
}
[data-theme="dark"] .brand,
[data-theme="dark"] .brand__mark,
[data-theme="dark"] .nav a,
[data-theme="dark"] .nav button,
[data-theme="dark"] .icon-btn,
[data-theme="dark"] .slide,
[data-theme="dark"] .round { color: var(--cream); }
[data-theme="dark"] .icon-btn:hover,
[data-theme="dark"] .round:hover { background: rgb(236 230 214 / .1); }
[data-theme="dark"] .pill {
  background: rgb(42 35 20 / .82);
  color: var(--cream);
  box-shadow: 0 1px 2px rgb(0 0 0 / .28), 0 10px 24px -10px rgb(0 0 0 / .7);
}
[data-theme="dark"] .pill:hover { background: rgb(58 49 32 / .96); }
[data-theme="dark"] .pill__av { background: var(--wine); color: var(--cream); }
[data-theme="dark"] .slide { border-color: var(--cream); }
[data-theme="dark"] .slide:hover { background: var(--cream); color: #1C170C; }
[data-theme="dark"] .round { border-color: rgb(236 230 214 / .45); }
[data-theme="dark"] .round:hover { border-color: var(--cream); }
[data-theme="dark"] .stationery-item i { filter: drop-shadow(5px 12px 9px rgb(0 0 0 / .48)); }
[data-theme="dark"] .book-hotspot:hover,
[data-theme="dark"] .book-hotspot:focus-visible { outline-color: var(--gold); }

/* ------------------------------------------------------------ 3D book */
.desk { position:relative; min-height:0; z-index:2; }
.book-float { position:absolute; inset:0; z-index:1; animation:book-breathe 7s ease-in-out infinite; }
.stationery { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
 .stationery-item { position:absolute; display:block; left:var(--x); top:var(--y); width:min(var(--size),20vw); aspect-ratio:1; transform:translate(-50%,-50%) rotate(var(--angle)); }
.stationery-item i { display:block; width:100%; height:100%; background-image:url(../img/objects/stationery-idle.png); background-size:200% 200%; background-repeat:no-repeat; filter:drop-shadow(5px 12px 7px #28211126); animation:stationery-breathe var(--duration,6s) ease-in-out infinite; animation-delay:var(--delay,0s); }
.stationery-pencil i { background-position:0 0; }
.stationery-pen i { background-position:100% 0; }
.stationery-ruler i { background-position:0 100%; }
.stationery-clips i { background-position:100% 100%; }
.stationery-eraser { aspect-ratio:2.2; }
.stationery-eraser i { position:relative; background:linear-gradient(170deg,#D9A49A,#BB817B); border-radius:5px 7px 5px 4px; box-shadow:inset 0 2px 2px #F5EFDE66,inset 0 -3px 2px #752F2E33; }
.stationery-eraser i::after { content:""; position:absolute; inset:-1px 22%; background:linear-gradient(170deg,#F5EFDE,#D9D0B9); border-radius:1px; box-shadow:1px 0 2px #28211133; }
.slide { animation:navigation-nudge 3.6s ease-in-out infinite; }
@keyframes book-breathe { 0%,100% { transform:translateY(3px); } 50% { transform:translateY(-3px); } }
@keyframes stationery-breathe { 0%,100% { transform:translateY(5px) rotate(-1deg); } 50% { transform:translateY(-7px) rotate(1deg); } }
@keyframes navigation-nudge { 0%,35%,75%,100% { translate:0; } 50%,62% { translate:5px 0; } }
.motion-paused .book-float,.motion-paused .stationery-item i,.motion-paused .slide { animation-play-state:paused; }
@media (max-width:699px), (max-aspect-ratio:9/10) {
  .stationery-item { width:calc(var(--size) * .5); }
  .stationery-0 { left:7%; top:9%; }
  .stationery-1 { left:85%; top:89%; }
  .stationery-2,.stationery-5,.stationery-8,.stationery-11,.stationery-12,.stationery-15 { display:none; }
  .stationery-3 { left:87%; top:7%; }
  .stationery-4 { left:9%; top:88%; }
  .stationery-6 { left:42%; top:94%; }
  .stationery-7 { left:42%; top:8%; }
  .stationery-9 { left:22%; top:15%; }
  .stationery-10 { left:91%; top:95%; }
  .stationery-13 { left:70%; top:12%; }
  .stationery-14 { left:22%; top:94%; }
}
/* The user explicitly requested visible idle motion even when Windows has
   general UI animation disabled. Hidden tabs still pause all idle loops. */
.book-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:pan-y; cursor:pointer; }
.book-links { position:absolute; inset:0; pointer-events:none; }
.book-hotspot { position:absolute; pointer-events:auto; border-radius:2px; }
.book-hotspot:hover { outline:1px solid var(--wine); outline-offset:4px; }
.book-hotspot:focus-visible { outline:3px solid var(--wine); outline-offset:4px; background:rgb(176 137 90 / .12); }
.face { position:relative; container-type:size; background:var(--paper); overflow:hidden; }
.book-source { position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip-path:inset(50%); }
.book-source .leaf { display:contents; }
.book-source .face { transform:none; }
.book-fallback { width:min(86vw,920px); height:100%; margin:auto; display:grid; grid-template-columns:1fr 1fr; align-content:center; }
.book-fallback .leaf { display:contents; }
.book-fallback .face { display:none; width:100%; aspect-ratio:3/4; }
.book-fallback .face.is-visible { display:block; box-shadow:inset 0 0 24px rgb(40 33 17 / .12); }
.book-fallback .book__shadow,.book-fallback .book__board,.book-fallback .book__stack,.book-fallback .book__gutter { display:none; }
.book-fallback .endpaper { inset:0; background:var(--paper); }
.book-fallback .endpaper .pg h2,.book-fallback .endpaper .pg p { color:var(--ink); }
@media (max-width:699px), (max-aspect-ratio:9/10) {
  .book-fallback { grid-template-columns:1fr; width:min(84vw,420px); }
}

/* ------------------------------------------------------------ cover */
.face--cover {
  background: var(--cloth), var(--wine);
  border-radius: 2px 6px 6px 2px;
  box-shadow: inset 5px 0 8px -4px rgb(0 0 0 / .35);
}
.cover {
  position: absolute; inset: 6cqw;
  border: 1px solid rgb(236 230 214 / .32);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: var(--cream);
}
.cover__logo { width: 58cqw; height: auto; aspect-ratio: 359 / 357; color: var(--cream); }
.cover__title { margin: 5cqw 0 0; font: 650 clamp(16px, 7.4cqw, 34px)/1.15 var(--serif); font-stretch: 78%; }
.cover__sub { margin: 2cqw 0 0; font: 400 clamp(11px, 3.8cqw, 16px)/1.3 var(--sans); opacity: .82; }

/* endpapers: inside of the boards */
.face--end { background: var(--cloth), var(--wine-deep); }
.endpaper {
  position: absolute; top: 2.3%; bottom: 2.3%; left: 3%; right: 0;
  background: var(--cloth), var(--olive);
  color: var(--cream);
  container-type: size;
}
.endpaper .pg h2, .endpaper .pg p { color: var(--cream); }
.endpaper .pg__note { color: rgb(236 230 214 / .78); }

/* ------------------------------------------------------------ pages */
.pg {
  position: absolute; inset: 0;
  padding: 13cqw 11cqw 14cqw;
  display: flex; flex-direction: column;
  color: var(--ink);
}
.face--back .pg { padding-right: 13cqw; }
.face--front .pg { padding-left: 13cqw; }
.pg--center { align-items: center; justify-content: center; text-align: center; }
.pg h2 {
  margin: 0 0 .55em;
  font: 700 clamp(22px, 10.5cqw, 44px)/1.1 var(--serif);
  font-stretch: 72%;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.pg p { margin: 0 0 .75em; font: 400 clamp(13px, 4.5cqw, 18px)/1.62 var(--sans); text-wrap: pretty; }
.pg__note { margin-top: auto !important; font-size: clamp(11px, 3.7cqw, 14px) !important; color: var(--ink-soft); }
.folio {
  position: absolute; bottom: 6cqw; margin: 0 !important;
  font: 500 clamp(10px, 3.3cqw, 13px)/1 var(--sans) !important; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.face--front .folio { right: 8cqw; }
.face--back .folio { left: 8cqw; }

.pg__link {
  display: inline-flex; align-items: center; gap: .45em; align-self: flex-start;
  margin-top: .4em;
  color: var(--wine); font: 600 clamp(13px, 4.4cqw, 17px)/1.3 var(--sans);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .28em;
}
.pg__link svg { width: 1.1em; height: 1.1em; fill: currentColor; transition: translate .35s var(--ease-out); }
.pg__link:hover svg { translate: .25em 0; }
.pg__actions { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: .9em; }
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .8em 1.25em; border-radius: 999px;
  background: var(--wine); color: var(--cream); text-decoration: none;
  font: 600 clamp(13px, 4.4cqw, 17px)/1 var(--sans);
  box-shadow: 0 8px 18px -10px rgb(94 37 36 / .7);
  transition: background-color .3s;
}
.btn:hover { background: var(--wine-deep); }
.btn svg { width: 1.1em; height: 1.1em; fill: currentColor; }

.exlibris {
  padding: 11cqw 8cqw;
  border: 1.5px solid var(--ink);
  outline: 1px solid var(--ink); outline-offset: -2.4cqw;
}
.exlibris__mark { width: 30cqw; height: 30cqw; margin: 0 auto 5cqw; color: var(--ink); }
.pg .exlibris__title { margin: 0 0 .3em; font: 700 clamp(18px, 8.5cqw, 34px)/1.15 var(--serif); font-stretch: 74%; }
.pg .exlibris__line { margin: 0; color: var(--ink-soft); }

.price__num {
  margin: 0 !important;
  font: 700 clamp(60px, 42cqw, 180px)/1 var(--serif) !important;
  font-stretch: 70%; color: var(--wine); letter-spacing: -.03em;
}
.price__cap { margin: 2cqw 0 0 !important; color: var(--ink-soft); }

.adslot {
  width: 100%; height: 72cqh; max-height: 118cqw;
  display: grid; place-items: center; padding: 10cqw;
  border: 1.5px dashed rgb(40 33 17 / .45); border-radius: 2px;
  background: repeating-linear-gradient(-45deg, transparent 0 9px, rgb(40 33 17 / .035) 9px 10px);
}
.adslot p { margin: 0 !important; color: var(--ink-soft); }

.toc { width: 100%; margin: 0; padding: 0; list-style: none; text-align: left; }
.toc li {
  display: flex; align-items: baseline; gap: .5em;
  padding: 1.1em 0; border-bottom: 1px solid rgb(40 33 17 / .16);
  font: 500 clamp(13px, 4.6cqw, 18px)/1.3 var(--sans);
}
.toc li:first-child { border-top: 1px solid rgb(40 33 17 / .16); }
.toc i { flex: 1; border-bottom: 1.5px dotted rgb(40 33 17 / .4); translate: 0 -.25em; }
.toc b { font: 700 1.35em/1 var(--serif); color: var(--wine); font-variant-numeric: tabular-nums; }

.keep {
  position: relative; width: 100%;
  padding: 21cqw 9cqw 10cqw;
  background: #FFFBF1;
  border-radius: 2px;
  box-shadow: 0 1px 0 rgb(40 33 17 / .08), 0 14px 26px -18px rgb(40 33 17 / .45);
  rotate: -2deg;
}
.keep__ribbon {
  position: absolute; top: -3cqw; right: 12cqw;
  width: 7cqw; height: 18cqw;
  background: var(--wine);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%);
}
.pg .keep__title { margin: 0 0 .35em; font: 700 clamp(16px, 7cqw, 28px)/1.2 var(--serif); font-stretch: 76%; }
.pg .keep__line { margin: 0; color: var(--ink-soft); }

.screen { margin: 0; width: 100%; }
.screen__frame {
  aspect-ratio: 16 / 10; border-radius: 3px;
  display: grid; place-items: center;
  background: var(--ink);
  box-shadow: 0 16px 26px -18px rgb(40 33 17 / .6);
}
.screen__play {
  width: 20cqw; height: 20cqw; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--cream); color: var(--wine);
}
.screen__play svg { width: 9cqw; height: 9cqw; fill: currentColor; translate: 6% 0; }
.screen figcaption { margin-top: 5cqw; font: 400 clamp(13px, 4.5cqw, 18px)/1.5 var(--sans); color: var(--ink-soft); }

.colophon__logo { width: 62cqw; height: auto; aspect-ratio: 359 / 357; margin: 0 auto 4cqw; color: var(--ink); }
.colophon p { margin: 0 !important; font-family: var(--serif) !important; font-weight: 600 !important; font-stretch: 80%; }

/* ------------------------------------------------------------ controls */
.controls {
  position: relative; z-index: 5;
  display: grid; justify-items: center;
  padding: clamp(14px, 2.6svh, 28px) 16px calc(clamp(18px, 4.6svh, 46px) + env(safe-area-inset-bottom, 0px));
}
.controls__in { position: relative; }
.slide {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .72em 1.5em;
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 999px;
  font: 500 1.02rem/1 var(--sans);
  cursor: pointer;
  transition: background-color .35s var(--ease-out), color .35s var(--ease-out), scale .2s var(--ease-out);
}
.slide:hover { background: var(--ink); color: var(--paper); }
.slide:active { scale: .96; }
.round {
  position: absolute; right: calc(100% + .6rem); top: 50%; translate: 0 -50%;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  display: grid; place-items: center;
  background: transparent; color: var(--ink);
  border: 1.5px solid rgb(40 33 17 / .4);
  cursor: pointer;
  transition: opacity .4s var(--ease-out), border-color .3s, background-color .3s;
}
.round:hover { border-color: var(--ink); background: rgb(255 255 255 / .35); }
.round svg { width: 1.2rem; height: 1.2rem; fill: currentColor; }
.round:disabled { opacity: 0; pointer-events: none; }

/* ------------------------------------------------------------ narrow / portrait */
@media (min-width:700px) and (max-width:1160px) and (min-aspect-ratio:9/10) {
  .nav { display:none;position:absolute;top:calc(100% + 8px);left:16px;right:16px;padding:10px;border:1px solid var(--paper-edge);border-radius:14px;background:var(--paper);box-shadow:0 16px 36px rgb(40 33 17 / .18);flex-direction:column;align-items:stretch;gap:0; }
  .nav.is-open { display:flex; }
  .nav a { display:block;padding:12px;font-size:.95rem; }
  .icon-btn.landing-nav-toggle { display:flex; }
  .top { grid-template-columns:1fr auto; }
}
@media (max-aspect-ratio: 9/10), (max-width: 699px) {
  .nav { display: none; position: absolute; top: calc(100% + 8px); left: 16px; right: 16px; padding: 10px; border: 1px solid var(--paper-edge); border-radius: 14px; background: var(--paper); box-shadow: 0 16px 36px rgb(40 33 17 / .18); flex-direction: column; align-items: stretch; gap: 0; }
  .nav.is-open { display: flex; }
  .nav a { display: block; padding: 12px; font-size: .95rem; }
  .icon-btn.landing-nav-toggle { display: flex; }
  .top { grid-template-columns: 1fr auto; }
  .icon-btn--learn { display: grid; }
  .brand { font-size: 1.15rem; }
  .brand__mark { width: 1.75rem; height: 1.75rem; }
  .pill { padding-right: .85rem; font-size: .9rem; }
  .pill__av { width: 1.9rem; height: 1.9rem; }
  [data-theme="dark"] .nav { background: #2A2314; border-color: rgb(236 230 214 / .18); }
}
@media (max-width: 440px) {
  .pill span:last-child { display: none; }
  .pill { padding: .3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .book { transition: none; }
}


/* ------------------------------------------------------------ without JS: read the pages flat */
html:not(.js) body { overflow: auto; }
html:not(.js) .stage { position: relative; min-height: 100svh; }
html:not(.js) .controls { display: none; }
html:not(.js) .face--cover,html:not(.js) .leaf:last-child > .face--back { display:none; }
html:not(.js) .book { position: relative; left: auto; top: auto; margin: 0 auto; width: min(92vw, 420px); height: auto; display: grid; gap: 16px; padding-block: 24px; transform: none; }
html:not(.js) .book__shadow, html:not(.js) .book__board, html:not(.js) .book__stack { display: none; }
html:not(.js) .book__gutter { display: none; }
html:not(.js) .leaf { position: static; width: auto; height: auto; transform: none; display: grid; gap: 16px; cursor: auto; }
html:not(.js) .face { position: relative; aspect-ratio: .7; transform: none; }