/* findthenerd.com home page: "Update leaflet" (concept 18, chosen 2026-10-17).
   Only index.html uses this file. The platform pages (android/, apple/, web/,
   pc/, mac/) still use brief.css.

   Every colour is a custom property on :root (Alf tunes them with the preprod
   palette tool). Named by source:
     --desk             #212F49  Alf's pick (2026-10-17): a night navy, close to the space behind the worlds, as the desk
     --desk-text        #FFFFFF  White, for the footer words and links on the desk (13:1 on the desk)
     --desk-shadow      #03060D  Near black, so the book still lifts off the dark desk
     --paper            #FBFAF6  Booklet page
     --leaflet-stock    #FFF3D9  Update leaflet stock, "THE" lettering thinned to a tint
     --ink              #0A0F1E  Title screen night
     --cover-spine      #1A2238  Title screen night, lifted, for the cover spine
     --cover-text       #E7E3D8  Cover small print and the fourth cover stripe
     --on-dark          #FFFFFF  Text on the cover and on dark tabs
     --muted-ink        #4A4F5C  Small print on paper
     --the-lettering    #F5A31E  Title art lettering, "THE": buttons, markers, tabs
     --nerd-lettering   #1F5FC8  Title art lettering, "NERD", deepened for white text: links, tabs
     --deep-field       #1F6E7C  Deep Field ground, deepened for white text: tabs, cover stripe
     --marker           #F5A31E  The highlighter behind "Out now"
     --focus-ring       #1F5FC8  Keyboard focus outline
     --turn-shade       #0A0F1E  Shading on a page while it turns

   The booklet (2026-10-17): the cover and every page are one fixed size,
   340 by 476 (5:7), laid out in those units and scaled as a whole by --k.
   Nothing on a page grows: content that needs more room goes on more pages.
   --k comes from the media queries below, or from the script while the book
   is turning pages (it fits the book to the screen).

   Fonts are self hosted latin subsets (SIL OFL 1.1, licences beside them in
   assets/fonts/). No third party requests. */

@font-face{font-family:"M PLUS Rounded 1c";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/m-plus-rounded-1c-400-latin.woff2) format("woff2")}
@font-face{font-family:"M PLUS Rounded 1c";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/m-plus-rounded-1c-700-latin.woff2) format("woff2")}
@font-face{font-family:"M PLUS Rounded 1c";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/m-plus-rounded-1c-800-latin.woff2) format("woff2")}
@font-face{font-family:"DotGothic16";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/dotgothic16-400-latin.woff2) format("woff2")}
@font-face{font-family:"Courier Prime";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/courier-prime-400-latin.woff2) format("woff2")}
@font-face{font-family:"Courier Prime";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/courier-prime-700-latin.woff2) format("woff2")}

:root{
  --desk:#212F49;
  --desk-text:#FFFFFF;
  --desk-shadow:#03060D;
  --paper:#FBFAF6;
  --leaflet-stock:#FFF3D9;
  --ink:#0A0F1E;
  --cover-spine:#1A2238;
  --cover-text:#E7E3D8;
  --on-dark:#FFFFFF;
  --muted-ink:#4A4F5C;
  --the-lettering:#F5A31E;
  --nerd-lettering:#1F5FC8;
  --deep-field:#1F6E7C;
  --marker:#F5A31E;
  --focus-ring:#1F5FC8;
  --turn-shade:#0A0F1E;
  --round:"M PLUS Rounded 1c",system-ui,sans-serif;--dot:"DotGothic16",ui-monospace,monospace;--type:"Courier Prime",ui-monospace,monospace;
  color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--desk);color:var(--ink);font:400 16px/1.7 var(--round);overflow-x:hidden}
a{color:var(--nerd-lettering);font-weight:700}
img{display:block;max-width:100%;height:auto}
picture{display:block}
p{margin:0 0 12px}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-60px;z-index:20;background:var(--ink);color:var(--on-dark);padding:8px 12px;border-radius:8px;font:700 14px/1.2 var(--round)}
.skip:focus{top:10px}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
.desk{--k:1;max-width:1160px;margin:0 auto;padding:60px 32px 40px}

/* Book scale without the script: page width 340 times --k */
@media (min-width:1000px){.desk{--k:1.3}}
@media (min-width:1200px){.desk{--k:1.45}}
@media (min-width:520px) and (max-width:759px){.desk{--k:1.35}}
@media (max-width:519px){.desk{--k:1.05}}
@media (max-width:389px){.desk{--k:1}}
@media (max-width:371px){.desk{--k:.95}}
@media (max-width:354px){.desk{--k:.88}}

/* Hero: the closed booklet (the cover, at the page size) with the leaflet
   tucked in it */
.hero{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;margin-bottom:70px}
.cover{grid-column:1;grid-row:1;zoom:var(--k);width:340px;height:476px;overflow:hidden;display:flex;flex-direction:column;
  background:var(--ink);color:var(--on-dark);border-radius:5px 10px 10px 5px;padding:20px 20px 18px 26px;
  box-shadow:inset 8px 0 0 var(--cover-spine),0 18px 24px color-mix(in srgb,var(--desk-shadow) 45%,transparent);transform:rotate(-1.5deg);margin-top:24px}
.cover .band{display:flex;justify-content:space-between;gap:8px;font:400 11px/1.2 var(--dot);color:var(--cover-text)}
.cover .art{width:236px;margin:10px auto 6px}
.cover .shot{border:2px solid var(--the-lettering);border-radius:8px;overflow:hidden}
.cover .shot img{width:100%;aspect-ratio:2/1;object-fit:cover}
.cover h1{margin:12px 0 0;font:800 20px/1.1 var(--round)}
.cover h1 .sub{display:block;font:400 11.5px/1.4 var(--dot);color:var(--the-lettering);margin-top:5px}
@media (min-width:901px){.cover .band,.cover h1{padding-right:50px}}  /* keep cover text clear of the tucked leaflet */
.stripes{display:flex;height:9px;margin-top:auto}.stripes i{flex:1}
.stripes .s1{background:var(--the-lettering)}.stripes .s2{background:var(--nerd-lettering)}.stripes .s3{background:var(--deep-field)}.stripes .s4{background:var(--cover-text)}

.leaflet{grid-column:2;grid-row:1;position:relative;z-index:2;margin-left:-70px;background:var(--leaflet-stock);color:var(--ink);
  padding:40px 38px 34px;border-radius:2px;transform:rotate(2deg);
  box-shadow:0 30px 40px color-mix(in srgb,var(--desk-shadow) 45%,transparent),0 2px 0 color-mix(in srgb,var(--ink) 8%,transparent);
  transition:transform 1.1s cubic-bezier(.2,.8,.25,1),opacity .6s}
.js .leaflet:not(.out){transform:translateX(-30%) rotate(-1deg);opacity:0}
.leaflet::before{content:"";position:absolute;left:0;right:0;top:14px;height:6px;
  background:radial-gradient(circle,color-mix(in srgb,var(--ink) 28%,transparent) 2px,transparent 2.5px) 0 0/14px 6px repeat-x}
.slug{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font:400 13px/1.3 var(--dot);color:var(--muted-ink);border-bottom:3px solid var(--ink);padding-bottom:8px}
.leaflet h2{margin:18px 0 6px;font:800 44px/1.02 var(--round);letter-spacing:-.02em}
/* Marker pen behind the words: the band is drawn inside the glyphs' own box,
   from the middle of the lower case letters to just under the baseline, and
   clone repeats it on every line if the phrase ever wraps. */
.leaflet h2 .mark{font-style:normal;padding:0 .12em;margin:0 -.06em;
  background:linear-gradient(to bottom,transparent 50%,var(--marker) 50%,var(--marker) 83%,transparent 83%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.lede{font:400 16px/1.6 var(--type);margin:0 0 14px}
.btn{display:inline-block;margin:4px 8px 0 0;padding:11px 16px;border:3px solid var(--ink);border-radius:12px;background:var(--the-lettering);color:var(--ink);text-decoration:none;font:800 15px/1.2 var(--round);box-shadow:0 4px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--ink)}
.btn.alt{background:var(--paper)}
.dated{list-style:none;margin:22px 0 0;padding:0;border-top:2px dashed color-mix(in srgb,var(--ink) 35%,transparent)}
.dated li{display:grid;grid-template-columns:92px 1fr;gap:14px;padding:10px 0;border-bottom:2px dashed color-mix(in srgb,var(--ink) 35%,transparent);font:400 15px/1.5 var(--type)}
.dated time,.dated .when{font:400 13px/1.5 var(--dot);color:var(--muted-ink)}
.dated b{font-family:var(--round)}
.build{margin-top:22px;border:3px solid var(--ink);border-radius:12px;background:var(--paper);padding:16px 18px 10px}
.build h3{margin:0 0 2px;font:800 19px/1.25 var(--round)}
.build h3 span{font:400 14px/1 var(--dot);color:var(--muted-ink);margin-left:6px}
.build ul{margin:8px 0 6px;padding-left:20px;font-size:15px;line-height:1.55}
.build li{margin:0 0 6px}
/* The notes box is a fixed size: the script keeps the notes that fit and
   moves the rest into the fold-out below it. */
.js #nb-notes{height:184px;overflow:hidden}
.build details{border-top:2px dashed color-mix(in srgb,var(--ink) 25%,transparent);padding:8px 0 4px}
.build summary{cursor:pointer;font:700 14px/1.4 var(--round)}
.build details h4{margin:10px 0 0;font:800 15px/1.3 var(--round)}
.build details h4 span{font:400 13px/1 var(--dot);color:var(--muted-ink)}
.build details ul{font-size:14px}
.build .log{font:400 13px/1.4 var(--dot);margin:4px 0 6px}
.tear{font:400 12px/1 var(--dot);color:var(--muted-ink);text-align:right;margin:16px 0 0}

/* Booklet pages. Units here are page units: the page is 340 by 476 and the
   whole book is scaled by --k. This is also the plain stacked layout used
   without JavaScript, with reduced motion, and on screens too small to flip. */
.leaves{zoom:var(--k)}
.spread{display:grid;grid-template-columns:340px 340px;justify-content:center;margin:0 0 36px;scroll-margin-top:50px;
  filter:drop-shadow(0 16px 20px color-mix(in srgb,var(--desk-shadow) 40%,transparent))}
.page{position:relative;width:340px;height:476px;overflow:hidden;overflow:clip;background:var(--paper);padding:22px 22px 32px;
  font-size:13.5px;line-height:1.5;transition:transform 1s cubic-bezier(.2,.75,.25,1),opacity .6s;scroll-margin-top:50px}
.page.l{border-radius:6px 0 0 6px;transform-origin:right center;background:linear-gradient(270deg,color-mix(in srgb,var(--ink) 10%,transparent),transparent 7%),var(--paper)}
.page.r{border-radius:0 6px 6px 0;transform-origin:left center;background:linear-gradient(90deg,color-mix(in srgb,var(--ink) 10%,transparent),transparent 7%),var(--paper)}
.js .page.l:not(.in){transform:rotateY(28deg);opacity:0}
.js .page.r:not(.in){transform:rotateY(-28deg);opacity:0}
.page:focus{outline:none}
.page p{margin:0 0 8px}
.pno{position:absolute;bottom:11px;left:0;right:0;text-align:center;font:400 11px/1 var(--dot);color:var(--muted-ink)}
.t-o{background:var(--the-lettering);color:var(--ink)!important}.t-b{background:var(--nerd-lettering)}.t-t{background:var(--deep-field)}.t-i{background:var(--ink)}
.page h2{margin:0 0 2px;font:800 20px/1.15 var(--round);letter-spacing:-.01em}
.h-sub{display:block;font:400 11px/1.35 var(--dot);color:var(--muted-ink);margin-bottom:10px}
.page h3{margin:8px 0 2px;font:800 14px/1.3 var(--round)}
.cap{font:400 11px/1.45 var(--dot);color:var(--muted-ink);margin:5px 0 8px}
.page .cap{margin:5px 0 8px}
.boxed{border:2px solid var(--ink);border-radius:10px;padding:8px 10px;margin:10px 0 0;font-size:12px;line-height:1.5}
.boxed > b:first-child{display:inline-block;background:var(--the-lettering);color:var(--ink);padding:0 6px;border-radius:5px;margin-right:5px}
.small{font-size:12.5px;color:var(--muted-ink)}
.page .btn{margin:6px 6px 0 0;padding:8px 12px;border-width:2px;border-radius:10px;font-size:13px;box-shadow:0 3px 0 var(--ink)}
.page .btn:hover{box-shadow:0 1px 0 var(--ink)}

/* Index tabs. Stacked layout: a strip that stays on screen while the booklet
   does. The flip layout below turns them into staggered edge tabs. */
.tabs{position:sticky;top:0;z-index:8;display:flex;gap:6px;overflow-x:auto;margin:0 0 22px;padding:0 0 8px;background:var(--desk);scrollbar-width:thin}
.tabs a{flex:none;display:block;padding:9px 12px 8px;border-radius:0 0 8px 8px;font:800 12px/1 var(--round);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--on-dark)}
.tabs a:hover{text-decoration:underline}
.tabs a:focus-visible{outline-offset:2px}

.toc{list-style:none;margin:0;padding:0}
.toc li{display:flex;align-items:baseline;gap:6px;padding:0;font-weight:700;font-size:13.5px}
.toc li::after{content:"";order:2;flex:1;border-bottom:2px dotted color-mix(in srgb,var(--ink) 35%,transparent)}
.toc li span{order:3;font:400 12px/1 var(--dot)}
.toc a{color:var(--ink);text-decoration:none}
.toc a:hover{text-decoration:underline}

.diagram{position:relative;border:2px solid var(--ink);border-radius:8px;overflow:hidden}
.diagram img{width:100%}
.mk{position:absolute;left:var(--x);top:var(--y);width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:var(--the-lettering);color:var(--ink);border:2px solid var(--ink);font:800 11px/16px var(--round);text-align:center}
.legend{list-style:none;padding:0;margin:9px 0 0;display:grid;gap:4px;font-size:12.5px;line-height:1.4}
.legend li{display:grid;grid-template-columns:20px 1fr;gap:6px;align-items:start}
.legend b{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--the-lettering);border:2px solid var(--ink);font-size:9.5px;line-height:1;margin-top:1px}

/* Captures from the game session live in assets/game/ */
.droids{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.droids figure{margin:0}
.droids img{width:100%;aspect-ratio:4/5;object-fit:cover;border:2px solid var(--ink);border-radius:8px;background:var(--ink)}
.droids h3{margin:6px 0 0;font-size:13.5px}
.droids h3 em{font:400 11px/1 var(--dot);font-style:normal;color:var(--muted-ink);margin-right:5px}
.droids p{margin:2px 0 0;font-size:12px;line-height:1.45}

.worlds{list-style:none;padding:0;margin:4px 0 0;display:grid;grid-template-columns:1fr;gap:14px}
.worlds li{display:grid;grid-template-columns:140px 1fr;gap:12px;align-items:center}
.globe{position:relative;aspect-ratio:1;border:2px solid var(--ink);border-radius:10px;overflow:hidden;background:var(--ink)}
.globe picture,.globe img,.globe video{width:100%;height:100%;object-fit:cover;display:block}
.worlds b{display:block;font-size:15.5px;line-height:1.2}
.worlds .n{display:block;font:400 11px/1.4 var(--dot);color:var(--muted-ink)}
.worlds .d{font-size:13px;color:var(--muted-ink)}
.worlds .lv{display:block;font:400 11px/1.4 var(--dot);color:var(--muted-ink);margin-top:2px}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.mode{border:2px solid var(--ink);border-radius:9px;padding:5px 8px;font-size:12px;line-height:1.45}
.mode b{display:block;font-size:13px}
.tips{margin:8px 0 0;padding-left:16px;font-size:12px;line-height:1.45}
.tips li{margin:0 0 5px}

.where{list-style:none;padding:0;margin:0 0 8px}
.where a{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:6px 0;border-bottom:2px dashed color-mix(in srgb,var(--ink) 20%,transparent);font-size:13px;line-height:1.35;color:var(--ink);text-decoration:none;font-weight:400}
.where a b{white-space:nowrap;color:var(--nerd-lettering)}
.where a span{text-align:right;color:var(--muted-ink);font-size:12px}
.where a:hover b{text-decoration:underline}

.test p b:first-child{font-weight:800}
.links{list-style:none;margin:0;padding:0;columns:2;column-gap:14px;font-size:12.5px}
.links li{break-inside:avoid;padding:2px 0}

/* Daily Mission field reports board: a fixed slot for the top five. */
.board{margin:4px 0 0;border:2px solid var(--ink);border-radius:10px;background:var(--leaflet-stock);padding:12px 12px 10px}
.board h3{margin:0 0 4px;font-size:15px}
.board #board-head{height:38px;overflow:hidden;margin:0 0 6px;font-size:12.5px;line-height:1.5}
.board ol{height:160px;margin:0;padding:0;list-style:none}
.board li{display:flex;gap:10px;align-items:center;height:32px;border-bottom:2px dotted color-mix(in srgb,var(--ink) 25%,transparent);font-size:13.5px;white-space:nowrap}
.board li:last-child{border-bottom:0}
.board .n{font:400 12px/1 var(--dot);color:var(--muted-ink);min-width:2em}
.board .who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.board .s{font-weight:800}
.board .foot{max-width:none;padding:0;text-align:left;font:400 11px/1.45 var(--dot);color:var(--muted-ink);margin:8px 0 0}

/* Site footer on the desk: white words, links always underlined, tap
   targets at least 44px tall. */
.foot{max-width:1160px;margin:0 auto;padding:0 32px 48px;font:400 15px/1.6 var(--round);color:var(--desk-text);text-align:center}
.foot p{margin:0}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px;margin:0 0 16px;font:700 17.5px/1.3 var(--round)}
.foot-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border-radius:8px;color:var(--desk-text);
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
.foot-links a:hover,.foot-links a:focus-visible{background:color-mix(in srgb,var(--desk-text) 16%,transparent);text-decoration-thickness:3px}
.foot-links a:focus-visible{outline:3px solid var(--desk-text);outline-offset:2px}

@media (max-width:900px){
  .desk{padding:32px 16px 40px}
  .hero{grid-template-columns:1fr;margin-bottom:34px}
  /* The cover (the title screen) comes first, as on desktop; the leaflet
     tucks in under it. */
  .leaflet{grid-column:1;grid-row:2;margin:-10px 0 0;transform:none;padding:36px 20px 26px}
  .js .leaflet:not(.out){transform:translateY(30px);opacity:0}
  .cover{grid-row:1;justify-self:center;margin-top:0;transform:rotate(-1deg)}
  .leaflet h2{font-size:34px}
  .foot{padding:0 16px 40px}
}
/* Stacked spreads go to one page wide when two will not fit. */
@media (max-width:759px){
  .spread{grid-template-columns:340px;gap:18px;filter:none}
  .page,.page.l,.page.r{border-radius:6px;box-shadow:0 10px 18px color-mix(in srgb,var(--desk-shadow) 30%,transparent);transform-origin:center top}
  .js .page.l:not(.in),.js .page.r:not(.in){transform:translateY(24px)}
}
@media (max-width:520px){
  .dated li{grid-template-columns:1fr;gap:0}
  .cover .band{flex-direction:column;gap:3px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .leaflet,.page,.btn{transition:none}
  .js .leaflet:not(.out),.js .page:not(.in){transform:none!important;opacity:1!important}
}

/* Flip layout (2026-10-17). The script adds .flip to <html> only with
   JavaScript, without reduced motion, and on a screen big enough. The book
   pins to the screen (a sticky frame inside a tall stage) and scrolling turns
   the pages. The script sets --k (scale), --bx and --bt (where the book sits),
   --bw (its width on screen), each page's transform and shading, and the tabs.
   .flip-wide shows two page spreads; .flip-narrow shows one page at a time. */
html.flip{scroll-behavior:auto}
.flip .book{position:relative;width:100vw;margin:0 0 40px calc(50% - 50vw)}
.flip .frame{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;overflow:clip;touch-action:pan-y pinch-zoom}
.flip .frame.grabbing{cursor:grabbing;-webkit-user-select:none;user-select:none}
.flip .leaves{position:absolute;left:var(--bx);top:var(--bt);width:680px;height:476px;zoom:1;transform:scale(var(--k));transform-origin:0 0}
.flip-narrow .leaves{width:340px}
.flip .spread{display:block;position:absolute;inset:0;margin:0;filter:none}
.flip .page{position:absolute;top:0;left:0;transition:none;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:0 16px 18px -10px color-mix(in srgb,var(--desk-shadow) 45%,transparent)}
.flip .page.r{left:340px}
.flip-narrow .page,.flip-narrow .page.l,.flip-narrow .page.r{left:0;border-radius:6px}
.flip .page.off{opacity:0;pointer-events:none}
.flip .page.live{will-change:transform}
.flip .page.turning{box-shadow:0 8px 28px color-mix(in srgb,var(--desk-shadow) 35%,transparent)}
/* Turn shading: ::after darkens a turning page, ::before is the shadow a
   turning page casts beside the spine. The script sets --shade and --cast. */
.flip .page::before,.flip .page::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit}
.flip .page::before{opacity:var(--cast,0);background:linear-gradient(90deg,color-mix(in srgb,var(--turn-shade) 45%,transparent),transparent 45%)}
.flip .page::after{opacity:var(--shade,0);background:linear-gradient(90deg,color-mix(in srgb,var(--turn-shade) 60%,transparent),color-mix(in srgb,var(--turn-shade) 20%,transparent))}
.flip-wide .page.l::before{background:linear-gradient(270deg,color-mix(in srgb,var(--turn-shade) 45%,transparent),transparent 45%)}
.flip-wide .page.l::after{background:linear-gradient(270deg,color-mix(in srgb,var(--turn-shade) 60%,transparent),color-mix(in srgb,var(--turn-shade) 20%,transparent))}

/* Edge tabs, each at its own place on the book's edge. Wide screens: down the
   fore-edge, and a tab moves to the left edge once its page has been turned,
   like a real booklet. Phones: hanging from the bottom edge, side by side. */
.flip .tabs{position:absolute;top:0;left:0;width:0;height:0;margin:0;padding:0;overflow:visible;background:none;display:block;z-index:6}
.flip .tabs a{position:absolute;height:var(--tabh);display:flex;align-items:center;
  box-shadow:3px 4px 10px color-mix(in srgb,var(--desk-shadow) 30%,transparent);transition:transform .2s}
.flip-wide .tabs a{left:calc(var(--bx) + var(--bw) - 2px);width:var(--tabw);padding:0 10px 0 14px;border-radius:0 9px 9px 0}
.flip-wide .tabs a.side-l{left:calc(var(--bx) - var(--tabw) + 2px);justify-content:flex-end;padding:0 14px 0 10px;border-radius:9px 0 0 9px;box-shadow:-3px 4px 10px color-mix(in srgb,var(--desk-shadow) 30%,transparent)}
.flip-wide .tabs a[aria-current]{transform:translateX(8px)}
.flip-wide .tabs a.side-l[aria-current]{transform:translateX(-8px)}
.flip-narrow .tabs a{width:var(--tabw);justify-content:center;align-items:flex-start;padding:10px 0 0;writing-mode:vertical-rl;font-size:11px;letter-spacing:.06em;border-radius:0 0 7px 7px}
.flip-narrow .tabs a[aria-current]{transform:translateY(6px)}
.flip .tabs a[aria-current]{text-decoration:underline;text-underline-offset:3px}
.flip-wide .tabs a{font-size:var(--tabfs,12px)}
/* The dark tabs and the cover are close to the dark desk: a fine light edge
   keeps their shapes clear. */
.tabs a.t-i{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--desk-text) 40%,transparent)}
.flip .tabs a.t-i{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--desk-text) 40%,transparent),3px 4px 10px color-mix(in srgb,var(--desk-shadow) 30%,transparent)}
.cover{outline:1.5px solid color-mix(in srgb,var(--desk-text) 22%,transparent);outline-offset:-1.5px}

/* Phones in portrait: the cover is page one of the book. The script moves it
   into the book (and back out on other layouts) and gives it .page. */
.page.cover{grid-column:auto;grid-row:auto;zoom:1;margin:0;transform:none;background:var(--ink);color:var(--on-dark);
  padding:20px 20px 18px 26px;border-radius:6px;font-size:inherit;line-height:1.7;
  box-shadow:inset 8px 0 0 var(--cover-spine),0 16px 18px -10px color-mix(in srgb,var(--desk-shadow) 45%,transparent)}
.flip-narrow .leaflet{margin-top:0}
/* Phones: while a page turns, the book is drawn above the tabs, so the
   turning page and its shading sweep over them like a real booklet. At rest
   the tabs are on top again and stay tappable. */
.flip-narrow .frame.turning .leaves{z-index:7}