/* Silent Book website: the home pages' own layout (/, /ru/), one whole page.
   The reader's first screen (the season's reading room, the featured book
   standing in CSS 3D, Read now, the tagline and the tool card for a
   visitor's own book), then the shelf of classics, the reading features,
   and the rooms: the Android app with Premium and its download box,
   iPhone and the questions. The page's <style> holds the site's
   tokens (--black, --ink, --ivory, --amber, --gray, --muted, --card,
   --line, --edge); reader.css the tool card and the reader; home.js fills
   the featured book and the room. Every picture is the site's own (/img/),
   and everything below the first screen loads lazily. Phone first. */

html{scroll-padding-top:var(--bar,64px)}
/* A soft dark glow around words set over the room: the picture under each letter stays dark. */
:root{--halo:0 0 2px rgba(5,5,5,.9),0 0 8px rgba(5,5,5,.8),0 0 18px rgba(5,5,5,.7)}
a{color:var(--amber);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
/* A link within a line of text is underlined: its colour alone would not tell it apart. */
:is(p,li,td,dd):not(.talk):not(.ios-ask) a:not([class]){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:focus-visible,summary:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:6px}
h1:focus,h2:focus,h3:focus{outline:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}

/* ── the season's reading room, behind the first screen ─────────────── */
.sky{position:absolute;top:0;left:0;right:0;height:max(100vh,560px);height:max(100svh,560px);overflow:hidden;
  z-index:0;pointer-events:none;background:radial-gradient(120% 70% at 50% 38%,#16120c 0%,var(--black) 70%)}
.sky picture,.sky img{position:absolute;inset:0;display:block;width:100%;height:100%}
.sky img{object-fit:cover;object-position:50% 38%;opacity:0;transition:opacity 1.4s ease}
.sky.lit img,.sky img.still{opacity:1}
/* The room darkens under the top bar (its height on a phone, 96px) and down where the book's name,
   the tagline and the tool stand, so that their words read at 4.5:1 or more over every season's
   picture, the bright spring window too (check_site.py --render-local measures them). */
.sky::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,5,5,.8) 0,rgba(5,5,5,.68) 96px,rgba(5,5,5,.14) max(170px,16%),
    rgba(5,5,5,.3) 30%,rgba(5,5,5,.58) 56%,var(--black) 96%)}
.sky canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;mix-blend-mode:screen;pointer-events:none}
/* Leaves, the night's insects and the sea are things, not light: they lie over the room as they are. */
.sky canvas[data-scene="kuz_shamol"],.sky canvas[data-scene="yoz_chigirtka"],
.sky canvas[data-scene="dengiz"]{mix-blend-mode:normal}
@media (max-aspect-ratio:4/5){.sky img{object-position:50% 0}}

/* ── the top bar: the wordmark, the other language, the page's sections ── */
/* In that order on the page and on screen alike: on a phone the wordmark and the other language stand in the first
   row, the sections in the second; wider, all in one row. */
.sitebar{position:sticky;top:0;z-index:30;display:flex;flex-wrap:wrap;align-items:center;column-gap:22px;
  padding:6px clamp(16px,4vw,40px);background:rgba(5,5,5,.86);border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background-color .35s ease,border-color .35s ease,transform .35s ease,opacity 1.2s ease}
.sitebar.over{background:rgba(5,5,5,0);border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.brand{display:inline-flex;align-items:center;min-height:44px;margin-right:auto;color:var(--ivory)}
.brand:hover{text-decoration:none}
.wordmark{display:block;height:23px;width:auto;fill:var(--ivory)}
.sections{display:flex;align-items:center;gap:0 20px}
.sections a,.sitebar .lang{display:inline-flex;align-items:center;min-height:44px;font-size:15px;color:#D9CFBC;
  text-shadow:var(--halo)}
.sections a:hover,.sitebar .lang:hover{color:var(--amber);text-decoration:none}
.sitebar .lang{color:var(--gray);font-size:14px}
@media (max-width:759px){
  :root{--bar:90px}
  .sitebar{column-gap:12px}
  .wordmark{height:21px}
  .sections{flex-basis:100%;justify-content:space-between;gap:0 12px}
  .sections a{font-size:14.5px}
  /* Down the page the bar keeps the sections and lets the wordmark row go (home.js marks it down, and not while
     the focus is in the bar); a page without scripts keeps the whole bar. */
  .sitebar.down{transform:translateY(-40px)}
}
@media (min-width:760px){:root{--bar:60px}.sitebar .lang{margin-right:6px}}

/* ── the first screen: the featured book, Read now, the tagline, the tool ── */
main{position:relative;z-index:1}
.hero{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  max-width:760px;margin:0 auto;padding:8px clamp(16px,4vw,40px) 8px}
/* The featured book's glow is wider than a phone: the page never scrolls sideways for it. */
.feature{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;overflow-x:clip}
.stand{--book-w:124px;--thick:15px;position:relative;width:var(--book-w);aspect-ratio:2/3;margin-top:14px;
  perspective:1300px}
.halo{position:absolute;left:50%;top:48%;width:330%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(214,165,92,.34),rgba(214,165,92,.13) 42%,rgba(214,165,92,0) 74%);
  animation:sb-glow 7.5s cubic-bezier(.37,0,.63,1) infinite alternate;transition:filter 1.4s ease}
@keyframes sb-glow{from{opacity:.62}to{opacity:1}}
/* With a mouse the book leans toward its pointer (lean.js sets the --lean-* properties): its wrapper turns, comes
   forward and grows a touch, never .book, whose own transition and the five-second focus stay as they are. At rest
   the transform is the identity. */
.lean{position:absolute;inset:0;display:block;transform-style:preserve-3d;
  transform:translate3d(var(--lean-tx,0px),var(--lean-ty,0px),var(--lean-tz,0px)) rotateX(var(--lean-rx,0deg))
    rotateY(var(--lean-ry,0deg)) scale(var(--lean-s,1))}
/* The featured book's entrance (home.js enter), on a wrapper of its own: while the page fills it and until its cover
   shows it waits at a deeper angle and a lower place, its halo low, then turns into its pose; under reduced motion
   it stands in its pose from the first. */
.arrive{position:absolute;inset:0;display:block;transform-style:preserve-3d}
/* The two wrappers take no pointer, the book does: in 3D a wrapper's own flat box at the page's depth stands in front
   of a book set back (the entrance's start) and would take its clicks. */
.lean,.arrive{pointer-events:none}
.arrive>.book{pointer-events:auto}
@media (prefers-reduced-motion:no-preference){
  .feature.pending .arrive,.feature.entering .arrive{transform:translate3d(0px,9%,-50px) rotateY(-30deg) rotateX(8deg)}
  .feature.pending .halo,.feature.entering .halo{animation:none;opacity:.15}
}
.book{position:absolute;inset:0;display:block;transform-style:preserve-3d;
  transform:rotateY(-26deg) rotateX(3deg);transition:transform 1.6s cubic-bezier(.22,.61,.36,1)}
.book:hover{text-decoration:none}
.book .cover,.book .pages,.book .back{position:absolute;display:block}
.book .cover{inset:0;overflow:hidden;border-radius:2px 5px 5px 2px;transform:translateZ(calc(var(--thick) / 2));
  background:radial-gradient(120% 80% at 50% 32%,color-mix(in srgb,var(--cover-tint,#D6A55C) 24%,transparent),
    transparent 72%),#0E0C09;
  box-shadow:0 0 0 1px rgba(242,233,215,.07)}
.book .cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease}
.book .cover.lit img{opacity:1}
.book .cover::after,.ccover::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.55) 0,rgba(255,240,215,.10) 2.6%,rgba(0,0,0,.22) 5.5%,rgba(0,0,0,0) 13%),
    linear-gradient(180deg,rgba(5,5,5,0) 52%,rgba(5,5,5,.78) 100%)}
.book .pages{top:1.6%;height:96.8%;left:calc(50% - var(--thick) / 2);width:var(--thick);
  transform:rotateY(90deg) translateZ(calc(var(--book-w) / 2 - 2px));
  background:repeating-linear-gradient(90deg,#EFE6D2 0 1px,#D3C6AB 1px 2px,#E6DCC5 2px 3px);
  box-shadow:inset 0 0 7px rgba(40,26,8,.55)}
.book .back{inset:0;border-radius:5px 2px 2px 5px;background:#120F0A;transform:translateZ(calc(var(--thick) / -2))}
.ctitle,.cauthor{position:absolute;left:9%;right:9%;z-index:1;text-align:center;
  font-family:Georgia,'Iowan Old Style','Noto Serif','Times New Roman',serif;color:#F7EEDC;
  text-shadow:0 1px 3px rgba(0,0,0,.7)}
.ctitle{bottom:16%;font-size:calc(var(--book-w) * .105);line-height:1.15;text-wrap:balance}
.cauthor{bottom:7%;font-size:calc(var(--book-w) * .066);letter-spacing:.06em;color:#E3CFA6}
.stand::after{content:'';position:absolute;left:4%;right:-10%;bottom:-6%;height:9%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.72),rgba(0,0,0,0));filter:blur(3px)}
.badge{position:absolute;top:7px;left:7px;z-index:2;padding:2px 9px;border-radius:999px;font-size:11.5px;
  line-height:1.5;color:var(--amber);background:rgba(5,5,5,.8);border:1px solid var(--edge);
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Noto Sans',sans-serif;letter-spacing:.01em}
/* The name, and in the same place the first lines the five-second focus brings up (hero.js). The
   place keeps one height before home.js fills it and after, whatever the book: four lines of the
   first lines on a phone and three wider up (an excerpt is at most 150 characters), in their size. */
.caption{display:grid;width:min(100%,520px);margin-top:20px;font-size:14px;line-height:1.5;height:6em;overflow:hidden}
.caption>*{grid-area:1/1}
@media (min-width:600px){.caption{height:4.5em}}
.names{transition:opacity .9s ease}
.ftitle{font-family:Georgia,'Iowan Old Style','Noto Serif','Times New Roman',serif;font-size:19px;line-height:1.2;
  color:var(--ivory);text-wrap:balance}
.fauthor{margin-top:4px;font-size:14.5px;line-height:1.4;color:#DDCFB2}
.excerpt{align-self:start;font-style:italic;font-size:1em;line-height:1.5;color:#E8DCC2;opacity:0;
  transition:opacity 1.2s ease .25s;text-wrap:pretty}
.ftitle,.fauthor,.excerpt,.hero h1,.hero .lead{text-shadow:var(--halo)}
.read{display:inline-flex;align-items:center;justify-content:center;min-height:48px;margin-top:14px;padding:11px 38px;
  border-radius:999px;background:var(--amber);color:var(--black);font-size:17px;letter-spacing:.01em;
  box-shadow:0 8px 28px rgba(214,165,92,.22);transition:background-color .2s ease,box-shadow .2s ease}
.read:hover{text-decoration:none;background:#E2B571;box-shadow:0 8px 32px rgba(214,165,92,.34)}
/* The waiting slot before home.js fills it: the book's shape, its colour, no words. */
.feature.pending .read,.feature.pending .names,.feature.pending .excerpt{visibility:hidden}
.hero h1{font-weight:normal;font-size:clamp(19px,3vw,29px);line-height:1.25;margin:20px 0 10px;max-width:26em;
  text-wrap:balance;transition:opacity 1.2s ease}
.hero .tool{width:min(100%,620px);margin:6px 0 0;padding:clamp(10px,2.4vw,18px);background:rgba(14,12,9,.92);
  transition:opacity 1.2s ease}
.hero .drop{justify-content:center;text-align:center;padding:clamp(12px,3vw,22px);gap:12px 14px}
.hero .drop button.cta{background:transparent;color:var(--amber);border:1px solid var(--amber)}
.hero .drop button.cta:hover{background:rgba(214,165,92,.12)}
.hero .tool .row{justify-content:center}
.hero .tool .why{text-align:center}
.hero .lead{max-width:62ch;margin:22px auto 4px;font-size:16px;line-height:1.65;color:#CFC6B4;text-align:start;
  transition:opacity 1.2s ease}
@media (min-width:760px){.hero .lead{text-align:center}}
/* The showcase (showcase.js): one book's first lines under four ambiences, then in the four free moods (each
   page in its colours of moods.js), every page a link into the reader. A phone keeps one ambience tile, which
   goes through the six. The weather's canvas lies over the words and fades between two scenes. */
.showcase{width:100%;margin:6px 0 4px}
/* A wide screen gives the eight pages more room than the column under them: centred, as wide as the window. */
@media (min-width:900px){.showcase{width:min(1080px,calc(100vw - 64px))}.showcase .page{height:170px;font-size:14px}
  .showcase .moods .page{height:100px}}
.showcase .say{margin:0 0 10px;font-size:15px;line-height:1.4;color:#CFC6B4;text-shadow:var(--halo)}
.showcase .scenes,.showcase .moods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.showcase .moods{margin-top:12px}
.showcase .tile{display:flex;flex-direction:column;gap:5px;min-width:0;color:var(--ivory);border-radius:10px}
.showcase .page{--page:#050505;position:relative;display:block;height:140px;overflow:hidden;padding:11px 12px;
  border-radius:10px;border:1px solid rgba(242,233,215,.16);background:var(--page);color:#DAD2C2;text-align:start;
  font-size:12.5px;line-height:1.55;transition:border-color .2s ease}
.showcase .page::after{content:'';position:absolute;left:0;right:0;bottom:0;height:30px;pointer-events:none;
  background:linear-gradient(rgba(0,0,0,0),var(--page))}
.showcase .moods .page{height:84px}
.showcase .page canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transition:opacity .45s ease}
.showcase .page canvas.out{opacity:0}
.showcase .name{font-size:14px;line-height:1.3;text-shadow:var(--halo)}
.showcase .tile:hover .page,.showcase .tile:focus-visible .page{border-color:var(--amber)}
.showcase .tile:hover{text-decoration:none}
.showcase [data-mood="paper"] .page{--page:#F2E9D8;color:#292928}
.showcase [data-mood="noir"] .page{--page:#050505}
.showcase [data-mood="aura"] .page{--page:#090909;
  background:radial-gradient(130% 70% at 50% 0,rgba(214,165,92,.22),rgba(214,165,92,0) 70%) #090909}
.showcase [data-mood="amoled"] .page{--page:#000000}
@media (max-width:599px){
  .showcase .scenes{grid-template-columns:minmax(0,1fr)}
  .showcase .scenes .tile:not(:first-child){display:none}
  .showcase .scenes .page{height:132px;font-size:13px}
  .showcase .moods{gap:8px;margin-top:10px}
  .showcase .moods .page{height:54px;padding:6px 7px;font-size:7.5px;line-height:1.45}
  .showcase .moods .page::after{height:14px}
  .showcase .name{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){.showcase .page,.showcase .page canvas{transition:none}}
@media (min-width:600px) and (min-height:720px){
  .stand{--book-w:164px;--thick:19px;margin-top:22px}
  .caption{margin-top:26px;font-size:15.5px}
  .ftitle{font-size:23px}
}
@media (min-width:900px) and (min-height:760px){
  .hero{padding-top:18px}
  .stand{--book-w:198px;--thick:23px;margin-top:26px}
  .caption{font-size:16.5px}
  .ftitle{font-size:26px}
  .fauthor{font-size:15.5px}
}
@media (min-width:1400px) and (min-height:960px){.stand{--book-w:232px;--thick:27px;margin-top:40px}}

/* The five-second focus (hero.js): the book grows a little, its glow deepens,
   the page around it dims and its first lines come up where its name was.
   The words around it dim no further than 4.5:1 allows. */
.hero.attend .halo{filter:brightness(1.35) saturate(1.1)}
.hero[data-attend="full"] .book{transform:rotateY(-26deg) rotateX(3deg) scale(1.05)}
.hero.attend .names{opacity:0}
.hero.attend .excerpt{opacity:1}
.hero.attend h1,.hero.attend .tool,.hero.attend .lead{opacity:.78}
html.attending .sky{filter:brightness(.7)}
html.attending .sitebar{opacity:.85}
.sky{transition:filter 1.4s ease}

/* ── the bar at the foot of the screen while a classic opens ───────────── */
.opening{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));z-index:40;transform:translateX(-50%);
  display:flex;align-items:center;gap:6px 16px;width:max-content;max-width:calc(100vw - 32px);padding:8px 10px 8px 20px;
  border-radius:999px;background:rgba(17,15,10,.96);border:1px solid var(--edge);box-shadow:0 10px 36px rgba(0,0,0,.6)}
/* With nothing to say the bar keeps its status line in the page, unseen, so a screen reader hears it from its first
   words (app.js setBar). */
.opening:not(.on){width:1px;height:1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  box-shadow:none}
.opening p{font-size:15px;color:var(--ivory)}
.opening button.link{min-height:44px;padding:6px 10px;text-decoration:none}

/* While a book is open the reader covers the whole screen: the page under it
   is neither painted nor animated, so the reader has the device to itself,
   and it comes back as it was (same layout, same place) when the book closes.
   The cover a classic flew in on stands under the reader while it fades in. */
html.reading body>:not(.reader):not(.flight){visibility:hidden}
html.reading .halo{animation-play-state:paused}

/* ── a classic opened from its cover (app.js coverFlight) ─────────────── */
/* Over the page and under the foot bar (its Cancel): the page dims toward the reader's own page, the cover flies to
   the middle with its shadow under it and opens on its left edge, its cloth inside at the left, the pages' edge at
   its right; three leaves turn over to the first page, then that page grows into the reader. The pages are in the
   reader's mood: app.js sets --page, --ink, --crease and --dim from it, the book's place and size (left, top, width,
   height, --book-w), and animates transform and opacity alone. */
.flight{position:fixed;inset:0;z-index:35;pointer-events:none;overflow:hidden;
  --page:#F2E9D8;--ink:#292928;--crease:rgba(60,40,14,.22);--dim:#463F37}
.flight .dim{position:absolute;inset:0;
  background:radial-gradient(75% 65% at 50% 48%,var(--dim),color-mix(in srgb,var(--dim) 45%,#050505) 88%)}
.flight .shadow{position:absolute;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.5),rgba(0,0,0,.18) 60%,rgba(0,0,0,0))}
.flight .fbook,.flight .spread,.flight .front,.flight .leaf{display:block;transform-style:preserve-3d}
.flight .fbook{position:absolute}
.flight .spread,.flight .front,.flight .page,.flight .face,.flight .inside,.flight .leaf,.flight .lf,.flight .lb,
.flight .ls,.flight .cast{position:absolute;inset:0}
.flight .front,.flight .leaf{transform-origin:0 50%}
.flight .face,.flight .inside,.flight .lf,.flight .lb{display:block;overflow:hidden;
  -webkit-backface-visibility:hidden;backface-visibility:hidden}
/* A face toward the reader before it turns has its spine at its left; the face it shows once turned, at its right. */
.flight .face,.flight .lf,.flight .page{border-radius:2px 5px 5px 2px}
.flight .inside,.flight .lb{transform:rotateY(180deg);border-radius:5px 2px 2px 5px}
.flight .face{background:radial-gradient(120% 80% at 50% 32%,color-mix(in srgb,var(--tint,#D6A55C) 24%,transparent),
    transparent 72%),#0E0C09;box-shadow:0 0 0 1px rgba(242,233,215,.07)}
.flight .face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.flight .face::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.55) 0,rgba(255,240,215,.10) 2.6%,rgba(0,0,0,.22) 5.5%,rgba(0,0,0,0) 13%),
    linear-gradient(180deg,rgba(5,5,5,0) 52%,rgba(5,5,5,.78) 100%)}
/* The cover's inside, seen once it has swung past its edge: a cloth in the cover's colour. */
.flight .inside{background:linear-gradient(270deg,rgba(0,0,0,.4),rgba(0,0,0,0) 14%),
  repeating-linear-gradient(45deg,rgba(255,240,215,.025) 0 2px,rgba(0,0,0,.03) 2px 4px),
  color-mix(in srgb,var(--tint,#D6A55C) 32%,#17120B)}
/* A page and a leaf: the reader's page colour, the spine's crease at the spine, a hair of its ink round it. */
.flight .page{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.6em;
  padding:22% 12% 0;text-align:center;color:var(--ink);
  font-family:Georgia,'Iowan Old Style','Noto Serif','Times New Roman',serif;
  background:linear-gradient(90deg,var(--crease),rgba(0,0,0,0) 9%),var(--page);
  box-shadow:0 22px 60px rgba(0,0,0,.5),inset 0 0 0 1px color-mix(in srgb,var(--ink) 9%,transparent)}
.flight .lf{background:linear-gradient(90deg,var(--crease),rgba(0,0,0,0) 9%),var(--page);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 9%,transparent)}
.flight .lb{background:linear-gradient(270deg,var(--crease),rgba(0,0,0,0) 9%),var(--page);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 9%,transparent)}
/* A leaf's shadow as it stands up, and the shadow the turning leaves cast on the page they leave. */
.flight .ls{opacity:0;background:linear-gradient(90deg,rgba(0,0,0,.08),rgba(0,0,0,.34))}
.flight .lb .ls{background:linear-gradient(270deg,rgba(0,0,0,.08),rgba(0,0,0,.34))}
.flight .cast{opacity:0;border-radius:inherit;background:linear-gradient(90deg,rgba(0,0,0,.3),rgba(0,0,0,0) 70%)}
.flight .ptitle{font-size:calc(var(--book-w) * .085);line-height:1.2;text-wrap:balance}
.flight .pauthor{font-size:calc(var(--book-w) * .052);letter-spacing:.06em;
  color:color-mix(in srgb,var(--ink) 72%,var(--page))}
.flight .edge{position:absolute;top:1.2%;bottom:1.2%;right:-6px;width:7px;border-radius:0 3px 3px 0;
  background:repeating-linear-gradient(90deg,var(--page) 0 1px,color-mix(in srgb,var(--page) 78%,var(--ink)) 1px 2px,
    color-mix(in srgb,var(--page) 90%,var(--ink)) 2px 3px)}
/* The first page grown to the reader's text, in the reader's own page colour (app.js sets its box and colour). */
.flight .fill{position:absolute;transform-origin:0 0}
/* The cover that flew stands empty in its place until the flight is gone. */
[data-flying] .lean,a[data-flying] .ccover,a[data-flying] .cover{visibility:hidden}

/* ── sections below the first screen ───────────────────────────────── */
.band,.classics,.rooms{position:relative;z-index:1}
main section h2,.room h2{font-weight:normal;font-size:clamp(23px,2.6vw,30px);line-height:1.25;color:var(--ivory);text-wrap:balance}
.eyebrow{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-bottom:10px}
.shelf h2{font-size:23px;color:var(--amber);margin:8px 0 4px}

/* The day (home.js, daily.js): the passage of the day and the month's reading together, two quiet
   cards side by side where they fit, one under the other on a phone; the one left alone (a month
   with no plan) takes the row. The passage keeps its book's line breaks (verse, paragraphs). */
.today{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:18px;align-items:start;
  margin-top:clamp(32px,6vw,56px)}
/* Neither part shown (no script, or its data could not load): no empty gap where they would stand. */
.today:not(:has(> .daily:not([hidden]))){display:none}
.daily{min-width:0;background:var(--card);border:1px solid var(--edge);border-radius:18px;padding:clamp(18px,3.4vw,28px)}
.daily h2{font-size:clamp(19px,2vw,22px);line-height:1.3;color:var(--amber);margin-bottom:12px}
.daily .words{font-family:Georgia,'Iowan Old Style','Noto Serif','Times New Roman',serif;font-size:clamp(17px,1.9vw,19px);
  line-height:1.7;color:#E8DCC2;white-space:pre-line;overflow-wrap:break-word}
.daily .source{margin-top:12px;font-size:14.5px;line-height:1.5;color:var(--gray);font-style:italic}
.daily .source::before{content:'\2014\00a0'}
.daily .chapter{font-size:17px;line-height:1.5;color:var(--ivory)}
.daily .mine{margin-top:6px;font-size:14.5px;color:var(--gray)}
.daily .go{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;font-size:16px}
.daily .talk{margin-top:6px;font-size:14.5px;line-height:1.5}
.daily .talk a{display:inline-flex;align-items:center;min-height:44px;color:#C9A46A}
/* The card about the Android app (bridge.js): a banner of the page's own, in the page's flow. */
.bridge .said{flex:1 1 260px;min-width:0}
.bridge h2{font-weight:normal;font-size:18px;line-height:1.3;color:var(--amber);margin-bottom:4px}

/* The classics: a row to swipe on a phone, a grid on a computer. */
.classics{margin-top:clamp(40px,7vw,72px)}
.classics h2{margin-bottom:4px}
.classics .sub{color:var(--gray);font-size:15px}
/* The other language's classics: a row of their own under the page's. */
.classics h3{font-weight:normal;font-size:clamp(19px,2vw,23px);line-height:1.3;color:var(--amber);margin:22px 0 0}
.classics-row{list-style:none;display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  margin:16px calc(-1 * clamp(16px,4vw,40px)) 0;padding:6px clamp(16px,4vw,40px) 18px;
  scroll-padding:0 clamp(16px,4vw,40px);scrollbar-width:thin;scrollbar-color:rgba(214,165,92,.35) transparent}
.classics-row>li{flex:0 0 128px;scroll-snap-align:start}
.classic{position:relative;display:flex;flex-direction:column;gap:3px;color:var(--ivory)}
.classic:hover{text-decoration:none}
/* The page under a shelf's cover, seen when the cover opens a little: paper, lines of text, the spine's shade. */
.classic::before{content:'';position:absolute;left:0;top:0;width:100%;aspect-ratio:2/3;border-radius:2px 5px 5px 2px;
  background:linear-gradient(90deg,rgba(60,40,14,.3),rgba(60,40,14,0) 14%),
    repeating-linear-gradient(180deg,rgba(41,41,40,0) 0 6px,rgba(41,41,40,.2) 6px 7px) 62% 46%/64% 58% no-repeat,
    #F2E9D8}
.ccover{position:relative;display:block;aspect-ratio:2/3;margin-bottom:8px;overflow:hidden;border-radius:2px 5px 5px 2px;
  background:radial-gradient(120% 80% at 50% 32%,color-mix(in srgb,var(--tint,#D6A55C) 22%,transparent),transparent 72%),
    #0E0C09;
  box-shadow:0 10px 26px rgba(0,0,0,.55),0 0 0 1px rgba(242,233,215,.07);
  transition:translate .35s ease,box-shadow .35s ease,scale .15s ease,--peek .45s cubic-bezier(.3,.7,.2,1)}
.ccover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ccover .ctitle{bottom:15%;font-size:13px}
.ccover .cauthor{bottom:6.5%;font-size:9.5px}
/* A cover under the pointer or the focus rises (translate, so a lean's transform stays its own). */
.classic:hover .ccover,.classic:focus-visible .ccover{translate:0 -4px;
  box-shadow:0 16px 34px rgba(0,0,0,.6),0 0 0 1px rgba(214,165,92,.4)}
@supports not (translate:0){.classic:hover .ccover,.classic:focus-visible .ccover{transform:translateY(-4px)}}
/* With a mouse a cover on a shelf or in Continue reading leans a little toward its pointer (lean.js sets the
   --lean-* properties on its link), and a shelf's cover under the pointer opens a little on its spine (--peek, a
   turn about its left edge), its page showing; at rest the transform is the identity. With a finger a shelf's
   cover gives a little under the press. Neither under reduced motion. */
@property --peek{syntax:'<angle>';inherits:false;initial-value:0deg}
@media (hover:hover) and (pointer:fine){
  .classic,.tile .open-tile{perspective:900px;perspective-origin:50% 30%}
  .ccover,.tile .cover{transform:translate3d(var(--lean-tx,0px),var(--lean-ty,0px),0) rotateX(var(--lean-rx,0deg))
    rotateY(var(--lean-ry,0deg)) translateX(-50%) rotateY(var(--peek,0deg)) translateX(50%)}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  /* Seen a little from the right as it opens, its shadow held under it, so its page shows. */
  .classic{transition:perspective-origin .45s ease}
  .classic:hover{perspective-origin:100% 30%}
  .classic:hover .ccover{--peek:-25deg;box-shadow:0 18px 28px -12px rgba(0,0,0,.65),0 0 0 1px rgba(214,165,92,.4)}
}
@media (hover:none) and (prefers-reduced-motion:no-preference),(pointer:coarse) and (prefers-reduced-motion:no-preference){
  .classic:active .ccover{scale:.97}
}
.classic .t{font-size:15px;line-height:1.3;font-family:Georgia,'Iowan Old Style','Noto Serif','Times New Roman',serif}
.classic .a{font-size:13.5px;line-height:1.35;color:var(--gray)}
.sources{margin-top:6px;font-size:13.5px;line-height:1.6;color:var(--muted);max-width:80ch}
.sources a{color:#C9A46A}
@media (min-width:900px){
  .classics-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:28px 22px;overflow:visible;margin:22px 0 0;
    padding:0 0 10px}
  .classics-row>li{min-width:0}
  .ccover .ctitle{font-size:14px}
}

/* The reading features: pictures and the page's own words about reading here. */
.band{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-top:clamp(48px,8vw,88px)}
@media (min-width:760px){.band{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}}
.band .card,.grid .card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--edge);border-radius:18px;
  padding:16px 16px 22px;overflow:hidden}
.card .pic,.card .cardimg{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:11px;
  margin-bottom:16px;background:#0E0C09}
/* A screen of the Android app is tall: a square of its telling part stands at the foot of the card's 3:2 stage, as a
   phone's top half would, so the three app cards line up with the picture cards beside them. */
.card .shot{display:flex;justify-content:center;align-items:flex-end;aspect-ratio:3/2;margin-bottom:16px;border-radius:11px;
  overflow:hidden;background:radial-gradient(80% 90% at 50% 100%,rgba(214,165,92,.14),rgba(214,165,92,0) 70%),#0B0A07}
.card .shot img{display:block;width:60%;height:auto;aspect-ratio:1;border-radius:14px 14px 0 0;
  box-shadow:0 0 0 1px rgba(242,233,215,.12),0 -6px 26px rgba(0,0,0,.45)}
.card h2{font-size:21px;line-height:1.3;color:var(--amber);margin-bottom:8px}
.card h3{font-weight:normal;font-size:19px;line-height:1.3;color:var(--amber);margin-bottom:6px}
.card p{font-size:15.5px;line-height:1.65;color:#C9C0AE}
.swatches{display:flex;flex-direction:column;justify-content:center;gap:7%;aspect-ratio:3/2;margin-bottom:16px;
  padding:6% 8%;border-radius:11px;
  background:radial-gradient(90% 70% at 50% 40%,rgba(214,165,92,.12),rgba(214,165,92,0) 70%),#0B0A07}
.swatches>span{display:flex;justify-content:center;gap:4%}
.swatches i{display:flex;flex-direction:column;justify-content:center;gap:7px;width:15%;aspect-ratio:2/3;padding:0 6px;
  border-radius:4px;background:var(--bg);box-shadow:0 8px 18px rgba(0,0,0,.5),0 0 0 1px rgba(242,233,215,.08)}
.swatches i::before,.swatches i::after{content:'';display:block;height:3px;border-radius:2px;background:var(--fg);opacity:.75}
.swatches i::after{width:68%}
.swatches i.lit{background:radial-gradient(130% 55% at 50% 0,var(--glow),rgba(0,0,0,0) 70%),var(--bg)}

/* The rooms: the Android app, Premium and its download box, iPhone, the questions. */
.room{margin-top:clamp(56px,9vw,104px);padding-top:clamp(28px,4vw,44px);border-top:1px solid var(--line)}
.room>header{max-width:68ch}
.room p{font-size:16.5px;line-height:1.7;color:#CFC6B4}
.room p+p{margin-top:12px}
.app .actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:20px}
a.cta{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 26px;border-radius:999px;
  background:var(--amber);color:var(--black);font-size:16px}
a.cta:hover{text-decoration:none;background:#E2B571}
.formats{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:28px 0 24px}
.formats .label{color:var(--muted);font-size:14px;letter-spacing:.05em}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{font-size:13.5px;letter-spacing:.08em;color:var(--ivory);border:1px solid var(--edge);border-radius:999px;
  padding:4px 13px}
.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
@media (min-width:620px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:980px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}}
.premium,.download{margin-top:clamp(36px,5vw,56px)}
.premium h3,.download h3{font-weight:normal;font-size:clamp(21px,2.2vw,26px);color:var(--ivory);margin-bottom:10px}
.premium p{max-width:70ch}
.download .box{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px 36px;
  background:var(--card);border:1px solid var(--edge);border-radius:20px;padding:clamp(22px,4vw,40px)}
.download .box>div{flex:1 1 320px}
.download .ios-ask{font-size:15.5px}
.iphone p{max-width:64ch}
.iphone .go{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;font-size:16.5px}
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq h2{margin-bottom:18px}
.faq summary{cursor:pointer;color:var(--ivory);font-size:18px;list-style:none;display:flex;justify-content:space-between;
  align-items:center;gap:20px;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
/* The sign is a picture of open and shut: empty alt text keeps a screen reader from reading "plus" in the question
   (the summary says expanded or collapsed itself); a browser without alt text keeps the first declaration. */
.faq summary::after{content:'+';content:'+' / '';color:var(--amber);font-size:22px;line-height:1;flex:none}
.faq details[open] summary::after{content:'\2212';content:'\2212' / ''}
.faq details p{color:var(--gray);margin-top:10px;font-size:16px;max-width:68ch}
.faq .intro{color:var(--gray);font-size:15.5px;margin-top:14px}
body>footer{margin-top:56px;border-top:1px solid var(--line);padding:26px 0 40px;color:var(--gray);font-size:14px}
body>footer .links{display:flex;flex-wrap:wrap;gap:8px 18px}
body>footer .made{margin-top:14px;color:var(--muted);font-size:13.5px}
.app-banner{margin:24px auto 0}

/* ── the sheet on an Android phone (home.js wireSheet, bridge.js) ───── */
/* At the foot of the screen, in the page's own layer: under the foot bar of a book opening, a cover's flight, a
   dropped file's overlay and the reader. It slides up once (it just appears under reduced motion), keeps clear of
   the phone's rounded corners and its gesture bar, and the footer makes room for it. */
.app-sheet{position:fixed;left:0;right:0;bottom:0;z-index:20;
  padding:16px max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom))
    max(16px,env(safe-area-inset-left));
  background:#110F0A;border-top:1px solid var(--edge);border-radius:18px 18px 0 0;
  box-shadow:0 -12px 40px rgba(0,0,0,.55);transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.app-sheet[data-arriving]{transform:translateY(calc(100% + 24px))}
html[data-reader-state="opening"] .app-sheet{visibility:hidden}
.app-sheet .sheet-say{max-width:560px;margin:0 auto}
.app-sheet p{margin:0;color:#CFC6B4;font-size:15.5px;line-height:1.5}
.app-sheet .sheet-ask{color:var(--ivory);font-size:17px}
.app-sheet .sheet-ask+p{margin-top:4px}
.app-sheet .sheet-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:12px}
.app-sheet a.cta{min-height:44px;padding:10px 22px;font-size:15.5px}
.app-sheet button.ghost{min-height:44px;padding:8px 16px;font-size:15px}
html[data-app-sheet="shown"] body>footer{padding-bottom:calc(40px + var(--sheet-h,0px))}

/* Below the first screen the page's parts rise into view as they are scrolled to: scroll-driven (no script), on a
   screen where the browser has view timelines and motion is welcome; anywhere else (a printed page too) everything
   stands at once, as it is. A shelf's covers rise one by one where they stand in a grid; in a row that scrolls
   sideways the row rises whole. */
@keyframes sb-rise{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
@supports (animation-timeline:view()){
  @media screen and (prefers-reduced-motion:no-preference){
    .today>.daily,.classics>h2,.classics>.sub,.classics>h3,.classics-row,.sources,.band>.card,.room>header,
    .room .formats,.grid>.card,.premium,.download .box,.iphone>*,.faq>h2,.faq details{
      animation:sb-rise linear both;animation-timeline:view();animation-range:entry 0% entry 180px}
  }
  @media screen and (prefers-reduced-motion:no-preference) and (min-width:900px){
    .classics-row{animation:none}
    .classics-row>li{animation:sb-rise linear both;animation-timeline:view();animation-range:entry 0% entry 180px}
  }
}

@media (prefers-reduced-motion:reduce){
  .halo{animation:none;opacity:.85}
  .app-sheet{transition:none}
  .book,.halo,.names,.excerpt,.sky,.sky img,.book .cover img,.hero h1,.hero .tool,.hero .lead,.sitebar,.ccover{transition:none}
  .hero[data-attend] .book{transform:rotateY(-26deg) rotateX(3deg)}
  .sitebar.down{transform:none}
}