/*
  TraxLoop catalog: the page design, shared by the flipbook on /catalog and the PDF that
  site/build.mjs prints from the same pages, plus the flipbook reader.
  Every size on a page is in container units (cqw: 1% of the page width), so a page looks
  the same at any size: on a phone, in a two-page spread and on A4 paper.
*/
@font-face{font-family:'Newsreader';src:url(../fonts/newsreader.woff2) format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url(../fonts/newsreader-italic.woff2) format('woff2');font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url(../fonts/instrument-sans.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url(../fonts/jetbrains-mono.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}

/* ---------- The page ---------- */
.pg{
  --c-ink:#061a52; --c-mut:#4f5d78; --c-line:#dbe2ec; --c-ocean:#0a6a9d; --c-cyan:#05b8dc; --c-mint:#66ebac; --c-ice:#eef4fa;
  --f-serif:var(--serif,'Newsreader','TL sym',Georgia,'Times New Roman',serif);
  --f-sans:var(--sans,'Instrument Sans','TL sym',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif);
  --f-mono:var(--mono,'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);
  position:relative;width:var(--pw,210mm);height:var(--ph,297mm);container-type:size;contain:strict;
  background:#fff;color:var(--c-ink);overflow:hidden;text-align:start;
  -webkit-font-smoothing:antialiased;-webkit-print-color-adjust:exact;print-color-adjust:exact;
}
.pg-in{position:absolute;inset:0;display:flex;flex-direction:column;padding:6cqw 7.5cqw 5cqw;font:400 2.32cqw/1.42 var(--f-sans)}
.pg-h{display:flex;align-items:center;justify-content:space-between;gap:3cqw;padding-bottom:2.4cqw;margin-bottom:4cqw;border-bottom:.2cqw solid var(--c-line)}
.pg-h img{height:3.4cqw;width:auto;display:block}
.pg-h span{font:600 1.65cqw/1.2 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--c-ocean);text-align:end}
.pg-body{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.pg-f{display:flex;justify-content:space-between;align-items:center;margin-top:2.4cqw;padding-top:2cqw;border-top:.2cqw solid var(--c-line);font:400 1.6cqw/1 var(--f-sans);color:var(--c-mut);letter-spacing:.04em}
.pg-f b{font:600 1.9cqw/1 var(--f-mono);color:var(--c-ink)}

.pg h1,.pg h2,.pg h3,.pg h4{margin:0;font-weight:400;text-wrap:balance}
.pg h6{display:none}
.pg h1{font:400 8.6cqw/1 var(--f-serif);letter-spacing:-.025em;margin:0 0 3.4cqw}
.pg h2{font:400 5.5cqw/1.04 var(--f-serif);letter-spacing:-.02em;margin:0 0 2.2cqw}
.pg h3{font:500 3.1cqw/1.15 var(--f-serif);margin:2.8cqw 0 1.6cqw}
.pg p{margin:0 0 1.8cqw;color:var(--c-mut)}
.pg strong{font-weight:600;color:var(--c-ink)}
.pg a{color:var(--c-ocean);text-decoration:underline;text-decoration-thickness:.12cqw;text-underline-offset:.4cqw}
.pg ul,.pg ol{margin:0 0 2.2cqw;padding:0;list-style:none}

/* Images: a band across the page; screenshots shown whole. */
.pg .fig{display:block;flex:none;position:relative;width:100%;aspect-ratio:16/6.2;border-radius:1.4cqw;overflow:hidden;background:var(--c-ice);margin:.6cqw 0 3cqw}
.pg .fig img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block}
.pg .fig.contain{aspect-ratio:16/7;background:linear-gradient(135deg,#e9f1f9,#e8f8f0)}
.pg .fig.contain img{object-fit:contain;padding:1.6cqw}
.pg .fig.tall{aspect-ratio:16/9}

/* Cards: lists whose items open with bold text. */
.pg ul.cards{display:grid;grid-template-columns:1fr 1fr;gap:2.2cqw 4cqw}
.pg ul.cards li{border-top:.25cqw solid var(--c-ink);padding-top:1.3cqw;font-size:.9em;line-height:1.4;color:var(--c-mut)}
.pg ul.cards li p{margin:0}
.pg ul.cards strong{display:block;margin-bottom:.35em;font-size:1.06em;line-height:1.25}
/* Stats: lists whose bold text is a figure. */
.pg ul.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2cqw 4cqw;margin-bottom:3.2cqw}
.pg ul.stats li{font-size:.86em;line-height:1.3;color:var(--c-mut);border-top:.25cqw solid var(--c-line);padding-top:1cqw}
.pg ul.stats li p{margin:0}
.pg ul.stats strong{display:block;font:400 6.2cqw/1 var(--f-serif);color:var(--c-ocean);margin-bottom:.6cqw;letter-spacing:-.02em}
/* Numbered steps */
.pg ol{counter-reset:st;display:grid;grid-template-columns:1fr 1fr;gap:1.8cqw 4cqw}
.pg ol li{counter-increment:st;position:relative;padding-inline-start:5.6cqw;font-size:.9em;line-height:1.35;color:var(--c-mut);min-height:4cqw}
.pg ol li p{margin:0}
.pg ol li::before{content:counter(st);position:absolute;inset-inline-start:0;top:-.2cqw;width:4cqw;height:4cqw;border-radius:50%;background:var(--c-ink);color:#fff;display:grid;place-items:center;font:600 1.8cqw/1 var(--f-mono)}
.pg ol strong{display:block;font-size:1.06em}
/* Callouts */
.pg blockquote{margin:0 0 2cqw;padding:2.2cqw 3cqw;border-radius:1.4cqw;background:var(--c-ice);border-inline-start:.7cqw solid var(--c-cyan);color:var(--c-ink);font-size:.95em}
.pg blockquote p{margin:0;color:inherit}
.pg .pg-body>blockquote:last-child{margin-top:auto;margin-bottom:0}
/* Tables */
.pg table{width:100%;border-collapse:collapse;font-size:.84em;line-height:1.3;margin:1cqw 0 3cqw}
.pg th{text-align:start;font:600 1.5cqw/1.2 var(--f-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--c-mut);padding:0 1.6cqw 1.4cqw 0;border-bottom:.25cqw solid var(--c-ink)}
.pg td{padding:1.25cqw 1.6cqw 1.25cqw 0;border-bottom:.2cqw solid var(--c-line);color:var(--c-mut);vertical-align:top}
.pg td:first-child{color:var(--c-ink);font-weight:600}
/* Contents: links to pages */
.pg a[data-page]{display:flex;align-items:baseline;gap:2cqw;padding:.72cqw 0;border-bottom:.2cqw dotted var(--c-line);text-decoration:none;color:var(--c-ink)}
.pg a[data-page] span{flex:1}
.pg a[data-page] i{font:400 1.8cqw/1 var(--f-mono);font-style:normal;color:var(--c-ocean)}
.pg a[data-page]:hover span{color:var(--c-ocean)}
#contents ul{margin-bottom:3cqw;display:grid;grid-template-columns:1fr 1fr;column-gap:4cqw}
#contents li{font-size:.92em}
#contents a[data-page]{padding:.95cqw 0}

/* Dark pages: cover, back cover and highlights */
.pg-cover,.pg-back,.pg-dark{background:#061a52;color:#e6eefc}
.pg-cover,.pg-back{background:linear-gradient(180deg,rgba(6,26,82,.55) 0%,rgba(6,26,82,.35) 35%,rgba(6,26,82,.92) 72%,#061a52 100%),var(--bg) center/cover no-repeat,#061a52}
.pg-cover .pg-h,.pg-back .pg-h,.pg-dark .pg-h{border-color:rgba(230,238,252,.22)}
.pg-cover .pg-h span,.pg-back .pg-h span,.pg-dark .pg-h span{color:var(--c-mint)}
.pg-cover .pg-h img,.pg-back .pg-h img{height:4.6cqw}
.pg-cover .pg-body,.pg-back .pg-body{justify-content:flex-end}
.pg-cover h1,.pg-cover h2,.pg-back h2,.pg-dark h2,.pg-dark h3{color:#fff}
.pg-back h2{font-size:7cqw;line-height:1.02;margin-bottom:3cqw}
.pg-cover p,.pg-back p,.pg-dark p{color:#c3d1ea}
.pg-cover strong,.pg-back strong,.pg-dark strong{color:#fff}
.pg-cover a,.pg-back a,.pg-dark a{color:var(--c-mint)}
.pg-cover ul.cards,.pg-back ul.cards{grid-template-columns:repeat(3,1fr);margin:3cqw 0}
.pg-back ul.cards{grid-template-columns:1fr 1fr}
.pg-cover ul.cards li,.pg-back ul.cards li,.pg-dark ul.cards li{border-color:var(--c-mint);color:#c3d1ea}
.pg-dark ol li{color:#c3d1ea}
.pg-dark ol li::before{background:var(--c-mint);color:#061a52}
.pg-back .pg-body>p:last-child{font-size:.72em;margin:2.4cqw 0 0;color:#8ea3c8}
.pg-dark .pg-f{border-color:rgba(230,238,252,.22);color:#a9bbd9}
.pg-dark .pg-f b{color:#fff}
.pg-blank{background:linear-gradient(90deg,#eef2f7,#f8fafc)}

/* ---------- Print (PDF) ---------- */
@page{size:A4;margin:0}
body.print{margin:0;background:#fff}
.print-book .pg{break-after:page;break-inside:avoid}
.print-book .pg:last-child{break-after:auto}

/* ---------- Reader ---------- */
.cat-head{padding-block:clamp(28px,4.5vw,64px) 8px;background:radial-gradient(50% 80% at 85% 0%,rgba(5,184,220,.10),transparent 70%)}
.cat-head h1{font-family:var(--serif,Georgia,serif);font-size:clamp(40px,5.6vw,72px);line-height:1;letter-spacing:-.028em;margin:18px 0 16px}
.cat-head h1 em{font-style:italic;color:var(--ocean)}
.cat-head .lede{font-size:clamp(16px,1.4vw,18.5px);color:var(--mut);max-width:44em}
.cat-reader{padding-block:8px clamp(56px,8vw,96px)}

.cat-stage{position:relative;display:flex;justify-content:center;align-items:center;padding:clamp(16px,3vw,40px) 16px;overflow:hidden;overflow:clip}
/* Without JavaScript the pages simply stack. */
.book{position:relative;margin:0 auto}
.book:not(.ready):not(.print-book){display:grid;gap:24px;justify-items:center}
.book:not(.ready):not(.print-book) .pg{--pw:min(100%,560px);width:min(100%,560px);height:auto;aspect-ratio:1/1.4142;box-shadow:0 20px 40px -24px rgba(6,26,82,.45);border:1px solid var(--line,#dbe2ec)}

.book.ready{width:calc(var(--pw) * var(--cols,2));height:var(--ph);perspective:calc(var(--pw) * 5);transform:translate3d(var(--shift,0px),0,0);transition:transform .55s cubic-bezier(.25,.8,.25,1);touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;outline:none;cursor:grab}
.book.ready:focus-visible{outline:2px solid var(--cyan,#05b8dc);outline-offset:10px;border-radius:4px}
.book.ready.dragging{cursor:grabbing}
.book.ready.single{--cols:1}
.book.ready.rtl{transform:translate3d(var(--shift,0px),0,0) scaleX(-1)}
.book.rtl .face>.pg{transform:scaleX(-1)}
[dir="rtl"] .cat-btn svg{transform:scaleX(-1)}
.book.ready .pg{--pw:inherit;--ph:inherit;width:var(--pw);height:var(--ph)}
.book.ready img{-webkit-user-drag:none;user-select:none}

/* Soft shadow under each half and the stacked edges of the pages still to read */
.bk-half{position:absolute;top:0;width:var(--pw);height:100%;border-radius:2px;box-shadow:0 30px 60px -28px rgba(6,26,82,.55),0 10px 22px -14px rgba(6,26,82,.35);opacity:0;transition:opacity .3s}
.bk-half.l{left:0}.bk-half.r{right:0}
.bk-half.on{opacity:1}
.bk-half::after{content:"";position:absolute;top:2px;bottom:2px;width:var(--edge,0px);background:repeating-linear-gradient(90deg,#fff 0 1px,#d9e0ea 1px 2px);border-radius:1px}
.bk-half.r::after{left:100%}
.bk-half.l::after{right:100%}
.single .bk-half.l{display:none}
.single .bk-half.r{left:0}

.leaf{position:absolute;top:0;left:50%;width:var(--pw);height:var(--ph);transform-origin:0 50%;transform-style:preserve-3d;transform:rotateY(0deg)}
.single .leaf{left:0}
.leaf.hide{visibility:hidden}
.leaf.moving{will-change:transform}
.leaf.moving .shade{will-change:opacity}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;background:#fff}
.face.back{transform:rotateY(180deg)}
.face .shade{position:absolute;inset:0;pointer-events:none;opacity:0}
.face.front .shade{background:linear-gradient(90deg,rgba(6,26,82,.05),rgba(6,26,82,.32))}
.face.back .shade{background:linear-gradient(270deg,rgba(6,26,82,.04),rgba(6,26,82,.26))}
/* The gutter: pages darken softly toward the spine. */
.face::before{content:"";position:absolute;top:0;bottom:0;width:9%;z-index:2;pointer-events:none}
.face.front::before{left:0;background:linear-gradient(90deg,rgba(6,26,82,.16),rgba(6,26,82,0))}
.face.back::before{right:0;background:linear-gradient(270deg,rgba(6,26,82,.16),rgba(6,26,82,0))}
.single .face.front::before{width:3%;background:linear-gradient(90deg,rgba(6,26,82,.12),rgba(6,26,82,0))}

.cat-bar{display:flex;align-items:center;justify-content:center;gap:8px;margin:6px auto 0;max-width:560px}
.cat-bar[hidden],.cat-hint[hidden]{display:none}
.cat-btn{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line,#dbe2ec);background:var(--white,#fff);color:var(--ink,#061a52);display:grid;place-items:center;cursor:pointer;transition:background .2s,border-color .2s,transform .15s}
.cat-btn:hover{border-color:var(--ink,#061a52)}
.cat-btn:active{transform:scale(.94)}
.cat-btn:disabled{opacity:.35;cursor:default;transform:none;border-color:var(--line,#dbe2ec)}
.cat-btn svg,.cat-dl svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cat-range{flex:1;display:grid;gap:6px;justify-items:center;min-width:0;padding-inline:6px}
.cat-count{direction:ltr;unicode-bidi:isolate;font:500 13.5px/1 var(--mono,monospace);color:var(--mut,#4f5d78);font-variant-numeric:tabular-nums}
.cat-range input{width:100%;accent-color:var(--ocean,#0a6a9d);margin:0;height:22px}
.cat-hint{text-align:center;font-size:14px;color:var(--mut,#4f5d78);margin-top:12px}
.cat-dl{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:clamp(28px,4vw,44px);text-align:center}
.cat-dl .btn{min-height:52px;padding-inline:26px;font-size:16px}
.cat-dl p{font-size:13.5px;color:var(--mut,#4f5d78)}
@media (max-width:560px){.cat-btn[data-go="first"],.cat-btn[data-go="last"]{display:none}}
@media (prefers-reduced-motion:reduce){.book.ready{transition:none}}

/* Scripts in the catalog pages (also used by the PDF) */
html:is([lang="ar"],[lang="fa"],[lang="ur"]) .pg *{letter-spacing:0!important}
html:is([lang="ar"],[lang="fa"],[lang="ur"],[lang="he"],[lang="hy"],[lang="zh"],[lang="ja"],[lang="ko"]) .pg em{font-style:normal}
html:is([lang="ar"],[lang="fa"]) .pg-in{line-height:1.7}
html:is([lang="ar"],[lang="fa"]) .pg :is(h1,h2){line-height:1.3}
html[lang="ur"] .pg-in{font-size:2.12cqw;line-height:2.05}
html[lang="ur"] .pg :is(h1,h2,h3){line-height:1.7}
html[lang="ur"] .pg h1{font-size:7cqw}
html[lang="ur"] .pg h2{font-size:4.5cqw}
html[lang="ur"] .pg ul.cards li,html[lang="ur"] .pg ol li{line-height:1.85}
html:is([lang="zh"],[lang="ja"],[lang="ko"]) .pg-in{line-height:1.6}
html:is([lang="zh"],[lang="ja"],[lang="ko"]) .pg :is(h1,h2){line-height:1.2;letter-spacing:0}
html[lang="ko"] .pg{word-break:keep-all}
html:is([lang="zh"],[lang="ja"]) .pg{line-break:strict}
html[lang="ru"] .pg-in{font-size:2.2cqw}
html[lang="ru"] .pg h2{font-size:5.1cqw}
html[lang="hy"] .pg-in{font-size:2.1cqw}
html[lang="hy"] .pg h2{font-size:4.7cqw}
html:is([lang="ar"],[lang="fa"],[lang="ur"]) .pg-back h2{font-size:6cqw}