/* D6 variant B "Reading Library": warm paper surfaces on the approved sans type.
   Loaded after the shared sheets. One frame for every page: --b-wrap and --b-gutter. */
:root{--ink:#1f1c18;--muted:#5f594f;--cream:#f5efe4;--paper:#fffbf3;--sand:#efe6d6;--green:#b5412b;--accent:#b5412b;--pine:#1e4d43;--gold:#c8a24a;--line:#d7cdba;--focus:#b5412b;--wood:#a98055;--error:#a12626;background:#f5efe4;
 --b-ease:cubic-bezier(.2,.8,.2,1);--b-wrap:1296px;--b-gutter:clamp(1.25rem,4vw,3rem);--b-gap:clamp(3rem,7vw,5.5rem)}
body{background:#f5efe4;color:var(--ink)}
button,.button{border-radius:999px;background:var(--green);border-color:var(--green);color:#fff}
button:hover,.button:hover{background:#983320;color:#fff;border-color:#983320}
button:disabled{background:#e9e1d2;color:#6a6358;border-color:#c9bfad;opacity:1}
::selection{background:#ecd9b6;color:#1f1c18}
.preview-banner{background:var(--sand);color:var(--muted);border:0}
.languages a[aria-current]{background:var(--ink);color:#fff}
.brand-mark{color:var(--green);border-color:#c9a48e}
.skip{background:var(--ink)}
.library-header{max-width:var(--b-wrap);padding-inline:var(--b-gutter);border:0}
.library-header .primary-nav a[aria-current],.library-header .primary-nav a[data-section-active],.library-header .primary-nav a:hover{text-decoration-color:var(--green)}
.library-header .primary-nav a[data-nav=samples]{padding:.5rem 1.1rem;border:1px solid var(--ink);border-radius:999px;color:var(--ink);text-decoration:none;font-weight:600}
.library-header .primary-nav a[data-nav=samples]:hover,.library-header .primary-nav a[data-nav=samples][aria-current]{background:var(--ink);color:#fff}
.library-footer{max-width:var(--b-wrap);padding-inline:var(--b-gutter);border:0}
.document,.book-showcase,.b-about{max-width:var(--b-wrap);padding-inline:var(--b-gutter)}
.document>*{max-width:62rem}
.document>.form-grid{max-width:none}
.book-description,.buy-section,.page-gallery,.empty-preview,.color-studio{border:0;padding-block:clamp(2.5rem,5vw,4rem)}
.sample-invitation{background:var(--paper);border:0;border-radius:16px;max-width:none}
.form-card{background:var(--paper);border:0;border-radius:16px}
.review-notice,.interaction-status,.puzzle-scroll{background:var(--paper)}
.edition-links>div{background:var(--paper);border:0;border-radius:12px}
.cover-plinth{background:transparent;border:0}
.b-note,.b-byline{color:var(--muted);margin:-.25rem 0 1rem}
.b-byline{font-size:1.05rem;margin:0 0 .35rem}

/* Home hero: copy left, turntable right. */
.b-home{max-width:none;padding:0}
.b-hero{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);grid-template-areas:"copy stage";align-items:center;gap:clamp(1rem,3vw,3rem);max-width:var(--b-wrap);margin:0 auto;padding:clamp(1rem,3vw,2.5rem) var(--b-gutter) clamp(2rem,4vw,3.5rem);min-height:min(820px,calc(100svh - 130px))}
.b-hero:focus{outline:0}
.b-copy{grid-area:copy}
.b-copy h1{margin:.35rem 0 1rem;font-size:clamp(2.35rem,4.3vw,3.75rem);line-height:1.1;font-weight:650;letter-spacing:-.022em;color:var(--ink);text-wrap:balance;max-width:none}
.b-copy .lead{font-size:clamp(1.06rem,1.4vw,1.2rem);line-height:1.6;color:var(--ink);margin:0 0 1.6rem}
.b-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.75rem}
.b-actions a,.b-try-actions a,.b-line,.b-buy{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.6rem 1.4rem;border-radius:999px;font-weight:600;text-decoration:none;transition:transform 180ms var(--b-ease),background-color 180ms ease,color 180ms ease}
.b-line,.b-actions a.b-line{border:1px solid var(--ink);color:var(--ink);background:transparent}
.b-line:hover{background:var(--ink);color:#fff}
.b-actions a:active,.b-buy:active,.b-try-actions a:active,.b-line:active{transform:scale(.97)}
.b-hook h2{margin:0 0 .25rem;font-size:1.15rem;font-weight:600}
.b-hook p{margin:0;color:var(--muted);font-size:.98rem;line-height:1.55;max-width:34rem}
.b-stage{grid-area:stage;min-width:0}
.b-shelf{position:relative}
.d6-shelf-canvas{display:none}
.b-shelf-on .d6-shelf-canvas{display:block;width:100%;height:clamp(420px,62svh,640px);cursor:grab;touch-action:pan-y pinch-zoom}
.b-shelf-on .d6-shelf-canvas:active{cursor:grabbing}
.b-controls{display:none;align-items:center;justify-content:center;gap:.75rem;margin-top:.25rem}
.b-shelf-on .b-controls{display:flex}
.b-controls button,.b-pager button{display:grid;place-items:center;flex:none;width:48px;height:48px;padding:0;background:transparent;color:var(--ink);border:1px solid var(--ink)}
.b-controls button:hover,.b-pager button:hover{background:var(--ink);color:#fff}
.b-pager button:disabled{background:transparent;color:#6a6358;border-color:#c9bfad}
.b-controls p{margin:0;min-width:0;flex:0 1 26rem;text-align:center;line-height:1.3}
.b-controls [data-shelf-count]{display:block;font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums}
.b-controls [data-shelf-title]{display:block;font-weight:600}
/* Fallback (no JS, no WebGL, reduced motion): every cover visible as a plain linked grid. */
.b-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.b-link{display:block;color:var(--ink);text-decoration:none;font-weight:600;text-align:center}
.b-link img{display:block;width:100%;max-width:220px;height:auto;margin:0 auto .6rem}
.b-link .b-view{display:none}
.b-shelf-on .b-links{display:flex;justify-content:center;margin-top:.7rem}
.b-shelf-on .b-link{display:none}
.b-shelf-on .b-link[aria-current=true]{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.6rem 1.6rem;border-radius:999px;background:var(--pine);color:#fff}
.b-shelf-on .b-link[aria-current=true]:hover{background:#153931}
.b-shelf-on .b-link img,.b-shelf-on .b-link .b-title{display:none}
.b-shelf-on .b-link .b-view{display:inline}
.shelf-keyboard{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Sections under the hero. */
.b-section{max-width:var(--b-wrap);margin:0 auto;padding:0 var(--b-gutter) var(--b-gap)}
.b-section h2,.b-section-head h2{margin:0 0 .5rem;font-size:clamp(1.65rem,3vw,2.35rem);font-weight:650;letter-spacing:-.015em;line-height:1.2}
.b-section-head{max-width:42rem;margin-bottom:2rem}
.b-section-head p{color:var(--muted);margin:0}
.b-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.5rem;padding:0;margin:0;list-style:none}
.b-card{display:flex;flex-direction:column;background:var(--paper);border-radius:16px;padding:1.5rem 1.25rem 1.25rem}
.b-card-cover{display:block;perspective:900px;margin-bottom:1.25rem;text-align:center;border-radius:6px}
.b-card-cover img{display:inline-block;height:230px;width:auto;max-width:100%;border-radius:2px 3px 3px 2px;box-shadow:1px 0 0 #fff,3px 1px 0 #e5ddcb,5px 2px 0 #cfc5b0,10px 16px 22px #2a1d1033;transform:rotateY(-13deg) rotateX(2deg);transition:transform 320ms var(--b-ease)}/* taste-skill-ignore: depicts a physical book */
.b-card:hover .b-card-cover img,.b-card-cover:focus-visible img{transform:rotateY(-3deg) translateY(-6px)}
.b-kicker{margin:0 0 .3rem;color:var(--muted);font-size:.9rem}
.b-card h3{margin:0 0 .5rem;font-size:1.13rem;line-height:1.3;font-weight:600}
.b-card h3 a{display:block;min-height:44px;color:inherit;text-decoration:none}
.b-card h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.b-formats{display:flex;flex-wrap:wrap;gap:.35rem;margin:0 0 1rem;padding:0;list-style:none}
.b-formats li{padding:.12rem .55rem;border-radius:5px;background:var(--sand);color:var(--muted);font-size:.8rem}
.b-card-lang{margin:0 0 .75rem;color:var(--muted);font-size:.88rem}
.b-card-actions{margin-top:auto;display:grid;gap:.4rem}
.b-buy{background:transparent;color:var(--pine);border:2px solid var(--pine)}
.b-buy:hover{background:var(--pine);color:#fff}
.b-buy-hint{margin:0;color:var(--muted);font-size:.86rem;line-height:1.4}
.b-card-actions .b-buy-hint{text-align:center}
.b-card-actions a.b-text{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.3rem .5rem;color:var(--ink);text-decoration:underline;text-underline-offset:3px;font-weight:500}
.b-try-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.5rem,5vw,4rem);align-items:center;background:var(--paper);border-radius:16px;padding:clamp(1.5rem,4vw,3rem)}
.b-mini{display:grid;justify-items:center;gap:.6rem}
.b-mini-grid{display:grid;grid-template-columns:repeat(8,clamp(30px,5.4vw,38px));gap:3px;padding:.75rem;background:#fff;border-radius:10px}
.b-mini-grid span{display:grid;place-items:center;aspect-ratio:1;border-radius:5px;color:var(--ink);font-weight:600;font-size:clamp(.85rem,1.6vw,1rem);line-height:1;transition:background-color 300ms ease,color 300ms ease}
.b-mini-grid span.is-on{background:var(--green);color:#fff}
.b-mini button{min-height:44px;padding:.3rem 1rem;background:transparent;color:var(--ink);border:1px solid var(--line);font-size:.88rem}
.b-mini button:hover{background:var(--sand);color:var(--ink)}
.b-try-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.25rem}
.b-try-actions a:first-child{background:var(--green);color:#fff}
.b-try-actions a:first-child:hover{background:#983320}
.b-author{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.25rem,4vw,3rem);align-items:start}
.b-monogram{display:grid;place-items:center;width:clamp(84px,12vw,132px);aspect-ratio:1;border-radius:50%;background:var(--pine);color:#fff;font-size:clamp(2rem,4.5vw,3rem);font-weight:650}
.b-author p{max-width:44rem;font-size:1.08rem;line-height:1.65;margin:0 0 1.1rem}
.b-idea{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;background:var(--sand);border-radius:16px;padding:1.25rem 1.5rem}
.b-idea p{margin:0;font-size:1.05rem}
.b-idea button{min-height:48px;background:transparent;color:var(--ink);border:1px solid var(--ink);padding:.5rem 1.4rem}
.b-idea button:hover{background:var(--ink);color:#fff}
.b-idea button:disabled{background:transparent;color:var(--muted);border-color:var(--line)}
.idea-dialog{background:var(--paper);border-radius:16px;border:1px solid var(--line)}
#sample .sample-invitation{margin:0}
.b-opening-sheet{position:fixed;inset:0;background:#f5efe4;z-index:1000;pointer-events:none;display:grid;place-items:center;transform-origin:0 0}
.b-opening-sheet img{max-height:65vh;max-width:70vw;width:auto;height:auto;object-fit:contain}
a:focus-visible,button:focus-visible,summary:focus-visible,.b3d-scene:focus-visible,canvas:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* Book page actions: samples first, Amazon second, reading third. */
.opening-links .b-line{border:2px solid var(--pine);color:var(--pine)}
.opening-links .b-line:hover{background:var(--pine);color:#fff}
.opening-links .b-read{color:var(--ink)}
.book-opening .b-buy-hint{margin-top:.6rem;font-size:.92rem}
.b-buy-sub{color:var(--muted);margin:-.25rem 0 1.25rem}
.book-opening h1{margin-bottom:.35rem}

/* Tips: native disclosure, positioned like a popover. */
.b-tip{position:static;display:inline-block;border:0;padding:0;margin:0;vertical-align:middle;flex:none}
.b-mode-row,.studio-settings,.b-field-label{position:relative}
.b-tip summary{display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;margin:0;cursor:help;list-style:none;font-size:1rem}
.b-tip summary::-webkit-details-marker{display:none}
.b-tip summary>span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--sand);color:var(--ink);font-weight:600;font-size:.9rem;line-height:1;transition:background-color 150ms ease,color 150ms ease}
.b-tip summary:hover>span,.b-tip[open] summary>span{background:var(--ink);color:#fff}
.b-tip-body{position:absolute;z-index:30;top:100%;left:0;width:min(20rem,100%);min-width:min(16rem,100%);padding:.75rem .9rem;border-radius:10px;background:var(--ink);color:#fff;font-size:.92rem;font-weight:400;line-height:1.5;box-shadow:0 8px 24px #2a1d1040}
.b-tip-body b{font-weight:650}
.b-field-label{display:flex;align-items:center;gap:.1rem;margin:.9rem 0 0}
.b-field-label label{margin:0}
.form-card label{margin-top:.9rem}

.b-tooltip{position:fixed;z-index:40;left:0;top:0;width:max-content;max-width:min(18rem,calc(100vw - 16px));padding:.5rem .7rem;border-radius:8px;background:var(--ink);color:#fff;font-size:.88rem;line-height:1.4;box-shadow:0 8px 24px #2a1d1040}
.b-tooltip[hidden]{display:none}

/* Coloring studio: tools left, the page right and always whole at 100%. */
.b-tools-main>p{max-width:60ch}
.color-studio h2{font-size:clamp(1.65rem,3vw,2.35rem);font-weight:650;letter-spacing:-.015em}
.studio-toolbar,.paint-palette,.studio-settings{margin:.85rem 0;gap:.6rem}
.studio-settings{justify-content:flex-start;align-items:center}
.studio-settings label{gap:.5rem}
.studio-settings input:disabled{opacity:.45}
.b-mode-row{display:flex;align-items:flex-start;gap:.25rem;width:100%}
.b-mode-row .paint-modes{flex:1 1 auto;min-width:0}
.b-ready .studio-toolbar>label:first-child{display:none}
.studio-settings label{white-space:nowrap}
.b-mode-hint{width:100%;margin:0;color:var(--muted);font-size:.95rem;line-height:1.45}
.studio-toolbar button{min-height:44px;background:transparent;color:var(--ink);border:1px solid var(--line);font-size:.9rem;padding:.45rem 1rem}
.studio-toolbar button:hover{background:var(--sand);color:var(--ink)}
.studio-toolbar button[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.studio-toolbar button:disabled{background:transparent;color:#6a6358;border-color:#c9bfad}
.paint-palette .swatch{border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #807366}
.paint-palette button[aria-pressed=true]{outline:3px solid var(--ink);outline-offset:2px}
.b-pager{display:flex;align-items:center;justify-content:space-between;gap:.75rem;height:48px;margin-bottom:.5rem}
.b-pager p{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.canvas-viewport{background:var(--sand);border:0;border-radius:10px;padding:8px;max-height:none}
.canvas-paper{width:min(100%,calc((100svh - 88px)*.7727))}
.canvas-paper.filling canvas{cursor:cell;touch-action:manipulation}
.b-fill-target{position:absolute;z-index:2;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:2px solid #fff;outline:2px solid var(--ink);pointer-events:none;display:none}
canvas:focus-visible~.b-fill-target{display:block}
#paint-status{color:var(--muted);font-size:.95rem;margin:.75rem 0 0}
/* The page is as tall as the window allows; arrows sit beside it so they cost no height. --pw is the paper width. */
@media(min-width:1000px){
 .color-studio{--pw:min(calc((100svh - 32px)*.7727),calc(min(100vw - 17px,var(--b-wrap)) - 2*var(--b-gutter) - 280px - 2rem - 112px - 16px));display:grid;grid-template-columns:minmax(280px,1fr) auto;grid-template-rows:auto auto 1fr;column-gap:2rem;align-items:start;padding-top:8px;margin-top:clamp(1.5rem,3vw,2.5rem)}
 .b-tools-main,.b-tools-side,#paint-status{grid-column:1}
 .color-studio>.b-canvas-col{grid-column:2;grid-row:1/span 3;position:sticky;top:8px;display:grid;grid-template-columns:48px auto 48px;column-gap:8px;align-items:center}
 .b-pager{display:contents}
 #b-page-prev{grid-column:1;grid-row:1}
 #b-page-next{grid-column:3;grid-row:1}
 .b-pager p{grid-column:2;grid-row:1;align-self:start;justify-self:end;position:relative;z-index:3;margin:16px 16px 0 0;padding:.15rem .65rem;border-radius:999px;background:var(--sand);font-size:.85rem;pointer-events:none}
 .canvas-viewport{grid-column:2;grid-row:1;box-sizing:border-box;width:calc(var(--pw) + 16px)}
 .canvas-paper{width:var(--pw)}
}
/* Wide landscape windows: tools on both sides of the page, so the width is used. */
@media(min-width:1500px) and (min-aspect-ratio:16/10){
 .color-studio{--pw:min(calc((100svh - 32px)*.7727),calc(100vw - 17px - 2*var(--b-gutter) - 600px - 4rem - 112px - 16px));width:calc(100vw - 17px - 2*var(--b-gutter));max-width:none;margin-left:calc(50% - 50vw + var(--b-gutter) + 8.5px);grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:auto 1fr}
 .b-tools-main{grid-row:1/span 2;justify-self:end;width:min(100%,420px)}
 .color-studio>.b-canvas-col{grid-row:1/span 2}
 .b-tools-side,#paint-status{grid-column:3;justify-self:start;width:min(100%,420px)}
 .b-tools-side{grid-row:1}
 #paint-status{grid-row:2}
}

/* Book pages: sections use the frame instead of its left half. */
.preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(45%,170px),1fr));gap:clamp(.75rem,1.5vw,1.25rem)}
@media(min-width:1000px){
 /* Column counts that leave no short last row for each sample set. */
 .preview-grid:has(>:nth-child(8):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
 .preview-grid:has(>:nth-child(10):last-child){grid-template-columns:repeat(5,minmax(0,1fr))}
 .preview-grid:has(>:nth-child(13):last-child){grid-template-columns:repeat(7,minmax(0,1fr))}
 #word-search{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(2rem,4vw,4rem)}
 #word-search>*{grid-column:1/-1}
 #word-search>h2{grid-column:1;grid-row:1}
 #word-search>p:not(.small):not(.interaction-status){grid-column:1;grid-row:2/span 3}
 #word-search>p.small{grid-column:2}
 #word-search .puzzle-scroll{border:0;background:transparent;padding:0}
 #word-search .puzzle-grid{width:min(100%,calc(100svh - 32px));max-width:none;font-size:1.05rem}
 #word-search .puzzle-grid button{font-size:clamp(.85rem,1.3vw,1.15rem)}
 .b-book-details .edition-links{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
 /* Text pages: headings beside their text, so long reading keeps its measure and the frame stays used. */
 .document>article{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);column-gap:clamp(2rem,4vw,4rem);max-width:none;align-items:start}
 .document>article>*{grid-column:2}
 .document>article>h2{grid-column:1;margin:0;font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.2}
 .document>article>h2+*{margin-top:0}
 .document>article>h2:not(:first-child),.document>article>h2:not(:first-child)+*{margin-top:clamp(1.75rem,3vw,2.75rem)}
 .document>.review-notice{max-width:none}
 .document>nav.languages{margin-bottom:clamp(1.5rem,3vw,2.5rem)}
 .document>section,#correction-notices>section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);column-gap:clamp(2rem,4vw,4rem);max-width:none;align-items:start;border:0;padding-block:clamp(1.25rem,2.5vw,2rem)}
 .document>section>*,#correction-notices>section>*{grid-column:2}
 .document>section>h2,#correction-notices>section>h2{grid-column:1;margin:0;font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.2}
 .document>section>h2+*,#correction-notices>section>h2+*{margin-top:0}
 .document>#correction-notices{max-width:none}
 #correction-book{max-width:28rem}
 .preview-grid:has(>:nth-child(6):last-child){grid-template-columns:repeat(6,minmax(0,1fr))}
}
/* Four books across, or two by two: never three and a leftover. */
@media(min-width:900px){.b-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:561px) and (max-width:899px){.b-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.interaction-status{border:0;border-radius:10px;background:var(--sand);min-height:0;margin-top:.75rem}
.preview-grid a{display:block}
.preview-grid img{display:block;width:100%;height:auto;border-radius:6px;box-shadow:0 1px 6px #2a1d1026}
.b-sample-note{color:var(--muted);margin:-.25rem 0 1rem}
@media(min-width:1000px){
 .b-book-details{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:clamp(2rem,4vw,4rem);align-items:start}
 .b-book-details .buy-section{position:sticky;top:1rem}
 .color-studio{scroll-margin-top:-1.5rem}
}
@media(min-width:800px){
 .b-author>div{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:2rem;align-items:center}
 .b-author>div>h2,.b-author>div>p{grid-column:1}
 .b-author>div>a{grid-column:2;grid-row:1/span 2}
}

/* Try & Play: four activities across the frame. */
.b-play{max-width:var(--b-wrap);margin:0 auto;padding:clamp(1.5rem,4vw,3rem) var(--b-gutter) var(--b-gap)}
.b-play h1{margin:0 0 .5rem;font-size:clamp(2.2rem,4.4vw,3.4rem);font-weight:650;letter-spacing:-.02em;line-height:1.1}
.b-play-lead{margin:0 0 clamp(1.5rem,3vw,2.25rem);font-size:1.15rem;max-width:44rem}
.b-play-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1rem,2vw,1.5rem);margin:0;padding:0;list-style:none}
.b-play-card{display:flex;flex-direction:column;background:var(--paper);border-radius:16px;overflow:hidden}
.b-play-card img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:top}
.b-play-card>div{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;flex:1;padding:1.1rem 1.25rem 1.35rem}
.b-play-card h2{margin:0;font-size:1.3rem;font-weight:650;line-height:1.25}
.b-play-card p{margin:0;flex:1}
.b-play-note{margin:1.5rem 0 0;color:var(--muted);font-size:.95rem}
.b-amazon-sample{display:grid;gap:1.25rem;align-items:center;background:var(--paper);border-radius:16px;padding:clamp(1.5rem,4vw,2.5rem);margin-block:clamp(2rem,4vw,3rem)}
.b-amazon-sample h2{margin:0 0 .5rem;font-size:clamp(1.5rem,2.6vw,2.1rem)}
.b-amazon-sample p{margin:0;max-width:44rem}
.b-amazon-links{display:flex;flex-wrap:wrap;gap:.6rem}
.b-amazon-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 1.1rem;border:2px solid var(--pine);border-radius:999px;color:var(--pine);font-weight:600;text-decoration:none;transition:background-color 150ms ease,color 150ms ease}
.b-amazon-links a:hover{background:var(--pine);color:#fff}
@media(min-width:800px){.b-amazon-sample{grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(2rem,4vw,4rem)}}

/* Four items across, or two by two: never three and a leftover. */
@media(min-width:560px) and (max-width:899px){.b-play-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:900px){.b-play-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* About page: profile card left, biography right (owner reference, 05/11). */
.b-about{margin:0 auto;padding-block:clamp(1.5rem,4vw,3rem)}
.b-about>h1{margin:0 0 clamp(1.5rem,3vw,2.25rem);font-size:clamp(2.2rem,4.4vw,3.4rem);font-weight:650;letter-spacing:-.02em;line-height:1.1;max-width:none}
.b-about>.b-about-grid,.b-about>.sample-invitation{max-width:none}
.b-about-grid{display:grid;grid-template-columns:minmax(250px,320px) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start;margin-bottom:var(--b-gap)}
.b-about-card{position:sticky;top:1.5rem;display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--paper);border-radius:16px;padding:2.25rem 1.5rem 1.75rem}
.b-monogram-lg{width:clamp(112px,14vw,148px);font-size:clamp(2.6rem,5vw,3.6rem);margin-bottom:1.25rem}
.b-about-name{margin:0;font-size:1.35rem;font-weight:650;letter-spacing:.01em}
.b-about-role{margin:.25rem 0 1.4rem;color:var(--muted);font-size:.95rem;line-height:1.45}
.b-about-links{display:grid;gap:.6rem;width:100%}
.b-about-links .b-line{width:100%;box-sizing:border-box;font-size:.95rem}
.b-about-text h2{margin:0 0 1rem;font-size:clamp(1.6rem,2.8vw,2.1rem);font-weight:650;letter-spacing:-.015em}
.b-about-text h2+.biography,.b-about-text .biography{margin:0 0 2.75rem}
.b-about-text .biography p{max-width:44rem;font-size:1.05rem;line-height:1.7;margin:0 0 1.1rem;color:var(--ink)}
.b-create{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.b-create li{display:flex;gap:.8rem;align-items:flex-start;font-size:1.05rem;line-height:1.5}
.b-create svg{flex:none;margin-top:.15rem;color:var(--green)}
.b-create-kind{display:block;font-size:.9rem;color:var(--muted)}
.b-create a{display:inline-block;min-height:44px;color:var(--ink);text-underline-offset:3px}
.b-about .sample-invitation{margin:0}
@media(max-width:800px){.b-about-grid{grid-template-columns:minmax(0,1fr)}.b-about-card{position:static;padding:1.5rem 1.25rem 1.25rem}.b-monogram-lg{width:92px;font-size:2.3rem;margin-bottom:.8rem}}

/* Detail page: 3D book built from real wrap crops; sizes come from each book's trim and spine. */
.book-opening .cover-plinth{padding:1rem 0;display:block;overflow:visible;max-width:none;border:0;background:none}
.b3d-ready>img{display:none!important}
[data-book3d=mystery]{--ratio:.7727;--thick:.0614}
[data-book3d=snowbound]{--ratio:.7727;--thick:.0472}
[data-book3d=science]{--ratio:.7;--thick:.0297}
[data-book3d=color]{--ratio:.7727;--thick:.0232}
.b3d-ready{--h:clamp(280px,44vw,430px);--w:calc(var(--h)*var(--ratio));--t:max(calc(var(--h)*var(--thick)),8px);display:grid!important;justify-items:center;gap:.5rem}
.b3d-scene{position:relative;width:calc(var(--w) + 2*var(--t));height:calc(var(--h) + 24px);display:grid;place-items:center;perspective:1300px;cursor:grab;touch-action:pan-y pinch-zoom;border-radius:8px}
.b3d-scene,.d6-shelf-canvas{user-select:none;-webkit-user-select:none}
.b3d-scene:active{cursor:grabbing}
.b3d-book{position:relative;width:var(--w);height:var(--h);transform-style:preserve-3d;will-change:transform}
.b3d-face{position:absolute;backface-visibility:hidden;overflow:hidden}
.b3d-face img{display:block;width:100%;height:100%;object-fit:fill;user-select:none;-webkit-user-drag:none;pointer-events:none;box-shadow:none;filter:none}
.b3d-front,.b3d-back{inset:0}
.b3d-front{transform:translateZ(calc(var(--t)/2));border-radius:1px 3px 3px 1px}
.b3d-front::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0000002e 0,#00000008 2.2%,#0000001f 3.6%,#ffffff12 5%,#0000 12%,#0000 86%,#ffffff14 100%);pointer-events:none}/* taste-skill-ignore: spine crease shading on a physical book */
.b3d-back{transform:rotateY(180deg) translateZ(calc(var(--t)/2));border-radius:3px 1px 1px 3px}
.b3d-spine,.b3d-edge{top:0;width:var(--t);height:100%;left:calc(50% - var(--t)/2)}
.b3d-spine{transform:rotateY(-90deg) translateZ(calc(var(--w)/2))}
.b3d-edge{transform:rotateY(90deg) translateZ(calc(var(--w)/2 - 1px));background:repeating-linear-gradient(90deg,#f7f1e2 0 1.4px,#d9cfb9 1.4px 2px)}/* taste-skill-ignore: page edges */
.b3d-top,.b3d-bottom{left:0;width:100%;height:var(--t);top:calc(50% - var(--t)/2);background:repeating-linear-gradient(0deg,#f7f1e2 0 1.4px,#d9cfb9 1.4px 2px)}/* taste-skill-ignore: page edges */
.b3d-top{transform:rotateX(90deg) translateZ(calc(var(--h)/2 - 1px))}
.b3d-bottom{transform:rotateX(-90deg) translateZ(calc(var(--h)/2 - 1px))}
.b3d-shadow{width:calc(var(--w)*1.05);height:22px;margin-top:-14px;border-radius:50%;background:radial-gradient(closest-side,#2a1d104d,#2a1d1000)}/* taste-skill-ignore: contact shadow */
.b3d-flip{min-height:48px;padding:.5rem 1.5rem;background:transparent;color:var(--ink);border:1px solid var(--ink)}
.b3d-flip:hover{background:var(--ink);color:#fff}
.b3d-hint{margin:0;color:var(--muted);font-size:.9rem;text-align:center;max-width:24rem}
.b3d-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

@media(max-width:900px){
 /* Phone order: title, then the shelf, then the longer copy and actions. */
 .b-hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "stage" "lead" "actions" "hook";min-height:0;gap:0;padding-top:1rem}
 .b-copy{display:contents}
 .b-copy>h1{grid-area:title}.b-copy>.lead{grid-area:lead;margin-top:1rem}.b-actions{grid-area:actions}.b-hook{grid-area:hook}
 .b-copy h1{font-size:clamp(2.1rem,9.2vw,3rem);margin-bottom:.6rem}
 .b-copy .lead{margin-bottom:1rem}
 .b-actions{margin-bottom:.75rem}
 .b-shelf-on .d6-shelf-canvas{height:clamp(320px,min(96vw,50svh),520px)}
 .b-try-card{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:600px){
 .library-header{padding-inline:var(--b-gutter)}
 .b-actions a{flex:1 1 100%}
 .b-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem}
 .b-card{padding:1rem .8rem .8rem}
 .b-card-cover img{height:clamp(150px,44vw,200px)}
 .b-buy{padding-inline:.6rem;font-size:.92rem}
 .b-author{grid-template-columns:minmax(0,1fr)}
 .library-header .primary-nav a[data-nav=samples]{grid-column:1/-1;justify-content:center}
 .canvas-viewport{padding:4px}
}
@media(max-width:360px){.b-grid{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){
 .b-actions a,.b-buy,.b-try-actions a,.b-line,.b-card-cover img,.b-mini-grid span,.b-tip summary>span{transition:none}
 .b-card-cover img,.b-card:hover .b-card-cover img,.b-card-cover:focus-visible img{transform:none}
}
@media print{body{background:#fff}}

/* Final review: one heading voice across page types; callouts use a surface, not a colored edge. */
.book-opening h1,.document h1{font-weight:650;letter-spacing:-.02em}
.book-showcase h2,.document h2{font-weight:650;letter-spacing:-.015em}
.review-notice{border:0;border-radius:10px;background:var(--sand)}
.form-status{border:0;padding-left:0;font-weight:600}
/* OTP sign-up (owner 2026-11-07). Attention is ink, green only on success; motion follows the owner's reference clip. */
.b-otp form[hidden],.b-otp-done[hidden]{display:none}
.b-otp .cf-turnstile{margin:14px 0 4px;min-height:65px}
.b-otp button[type=submit].busy{position:relative;color:transparent}
.b-otp button[type=submit].busy::after{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.45);border-top-color:#fff;animation:b-otp-spin .7s linear infinite}
@keyframes b-otp-spin{to{transform:rotate(360deg)}}
.b-otp-head{display:flex;gap:12px;align-items:flex-start}
.b-otp-head h3{margin:0 0 6px;font-size:1.5rem}
.b-otp-head h3:focus,.b-otp-done h3:focus{outline:none}
.b-otp-icon{flex:none;width:44px;height:44px;border-radius:50%;background:#e4eee9;display:grid;place-items:center}
.b-otp-wrap{position:relative;width:max-content;max-width:100%;margin:10px 0 6px;transition:height .26s cubic-bezier(.2,.8,.2,1)}
.b-otp-cells{display:grid;grid-template-columns:repeat(6,52px);gap:10px;border-radius:12px;position:relative;z-index:1}
.b-otp-cells.focus{outline:3px solid #e8b04a;outline-offset:2px}
.b-otp-cells span{height:62px;border:2px solid #d8cfbf;border-radius:12px;background:#fff;display:grid;place-items:center;font-size:28px;font-weight:700;font-variant-numeric:tabular-nums;color:#1f1c18;transition:border-color .15s ease,box-shadow .2s ease,background-color .15s ease}
.b-otp-cells span.filled{background:#fbf8f1}
.b-otp-cells span.current{border-color:#1f1c18;box-shadow:0 0 0 4px rgba(31,28,24,.08),0 6px 16px rgba(31,28,24,.1)}
.b-otp-cells span.current:empty::after{content:"";width:2px;height:28px;background:#1f1c18;animation:b-otp-blink 1s steps(1) infinite}
.b-otp-cells span.pop{animation:b-otp-pop .16s ease-out}
.b-otp-cells.bad span{border-color:#a3261a}
.b-otp-cells.shake{animation:b-otp-shake .36s cubic-bezier(.36,.07,.19,.97)}
.b-otp-input{position:absolute;left:0;top:0;width:100%;height:62px;opacity:0;font-size:16px;border:0;cursor:text;z-index:2}
.b-otp-orbit{position:absolute;left:0;top:0;pointer-events:none;opacity:0;overflow:visible}
.b-otp-orbit .track{fill:none;stroke:#5f594f;stroke-width:1.5;stroke-dasharray:2 8;stroke-linecap:round}
.b-otp-orbit .hub{fill:#1f1c18}
.b-otp-verified,.b-otp-tick{width:64px;height:64px;border-radius:16px;background:#1e4d43;display:grid;place-items:center;box-shadow:0 0 0 8px rgba(30,77,67,.12),0 10px 26px rgba(30,77,67,.35)}
.b-otp-verified{position:absolute;opacity:0;pointer-events:none}
.b-otp-verified path{stroke-dasharray:24;stroke-dashoffset:24}
.b-otp-spark{position:absolute;width:6px;height:6px;border-radius:50%;pointer-events:none}
.b-otp-actions{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;margin-top:8px}
.b-otp-link{font:inherit;background:none;border:0;padding:0;color:#1e4d43;text-decoration:underline;cursor:pointer;min-height:44px}
.b-otp-link[disabled]{color:#5f594f;text-decoration:none;cursor:default}
.b-otp-done .b-otp-tick{margin-bottom:14px}
.b-otp-done h3{color:#1e4d43;font-size:1.6rem;margin:0 0 8px}
.b-otp-enter{animation:b-otp-rise .32s cubic-bezier(.2,.8,.2,1) both}
.b-otp-enter .b-otp-cells span{animation:b-otp-cell .34s cubic-bezier(.2,.8,.2,1) both}
.b-otp-enter .b-otp-cells span:nth-child(2){animation-delay:.04s}.b-otp-enter .b-otp-cells span:nth-child(3){animation-delay:.08s}.b-otp-enter .b-otp-cells span:nth-child(4){animation-delay:.12s}.b-otp-enter .b-otp-cells span:nth-child(5){animation-delay:.16s}.b-otp-enter .b-otp-cells span:nth-child(6){animation-delay:.2s}
@keyframes b-otp-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes b-otp-cell{from{opacity:0;transform:translateY(8px) scale(.9)}to{opacity:1;transform:none}}
@keyframes b-otp-pop{50%{transform:scale(1.1)}}
@keyframes b-otp-blink{50%{opacity:0}}
@keyframes b-otp-shake{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
@media (max-width:480px){.b-otp-cells{grid-template-columns:repeat(6,1fr);gap:7px;width:100%}.b-otp-wrap{width:100%}.b-otp-cells span{height:54px;font-size:24px}.b-otp-input{height:54px}}
@media (prefers-reduced-motion:reduce){.b-otp *,.b-otp *::before,.b-otp *::after,.b-otp-enter{animation:none!important;transition:none!important}}

/* Privacy and Terms: plain reading tables that stack on phones, so nothing scrolls sideways. */
.b-legal>nav.languages+p{font-size:.95rem;color:var(--muted)}
.b-legal>article{margin-top:clamp(1.75rem,3vw,2.75rem)}
.b-legal table{width:100%;border-collapse:collapse;font-size:.95rem;margin-block:.75rem 1.25rem}
.b-legal th,.b-legal td{padding:.65rem .9rem .65rem 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.b-legal th{font-weight:650;border-bottom-color:var(--ink)}
.b-legal a{overflow-wrap:anywhere}
@media (max-width:40rem){
 .b-legal table,.b-legal tbody,.b-legal tr,.b-legal td{display:block}
 .b-legal thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .b-legal tr{padding-block:.75rem;border-bottom:1px solid var(--line)}
 .b-legal td{padding:.2rem 0;border:0}
 .b-legal td::before{content:attr(data-label);display:block;font-size:.85rem;font-weight:650;color:var(--muted)}
}
