/* ============================================================
   Web-book design system — editorial / literary
   ============================================================ */

:root{
  --paper:#f4efe6;          --paper-2:#ebe4d6;
  --ink:#23201b;            --ink-soft:#56504594;
  --ink-mute:#6b6456;
  --accent:#9c3b2e;         --accent-2:#c2683a;
  --line:#d9cfbd;
  --card:#fbf8f1;
  --shadow:0 1px 2px rgba(40,32,20,.06),0 18px 40px -22px rgba(40,32,20,.45);
  --display:'Fraunces',Georgia,'Iowan Old Style','Times New Roman',serif;
  --body:'Newsreader',Georgia,'Iowan Old Style',Cambria,serif;
  --measure:38rem;
  --ease:cubic-bezier(.2,.7,.2,1);
}
[data-theme="sepia"]{
  --paper:#efe2c8; --paper-2:#e6d6b6; --ink:#3a2f1d; --ink-mute:#7a6a4d;
  --line:#d8c39b; --card:#f6ecd6; --accent:#8a4f1d; --accent-2:#b06a26;
}
[data-theme="night"]{
  --paper:#16140f; --paper-2:#1d1a13; --ink:#ece4d4;
  --ink-mute:#9b9384; --line:#332f25; --card:#1f1c15;
  --accent:#e0875f; --accent-2:#d8a06a;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 24px 50px -24px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-optical-sizing:auto;
  font-size:1.18rem; line-height:1.72; letter-spacing:.002em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background-image:
    radial-gradient(120% 80% at 100% 0%, var(--paper-2) 0%, transparent 55%),
    radial-gradient(120% 80% at 0% 100%, var(--paper-2) 0%, transparent 55%);
  background-attachment:fixed;
  transition:background-color .4s var(--ease), color .4s var(--ease);
}

/* fine paper grain */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
[data-theme="night"] body::before{mix-blend-mode:screen; opacity:.4}

a{color:var(--accent); text-underline-offset:3px; text-decoration-thickness:.06em}

/* selection + keyboard focus (accessibility for the keyboard-driven reader) */
::selection{background:color-mix(in srgb,var(--accent) 22%,transparent); color:var(--ink)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:.25rem}
.wb-btn:focus-visible,.cta:focus-visible,.wb-toc a:focus-visible{outline-offset:2px}

/* ---------- top bar + progress ---------- */
.wb-progress{position:fixed; top:0; left:0; height:3px; width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-2)); z-index:60;
  transition:width .12s linear}
.wb-bar{position:fixed; top:0; left:0; right:0; z-index:50; display:flex;
  align-items:center; justify-content:flex-end; gap:1rem;
  padding:.7rem clamp(1rem,4vw,2rem);
  background:color-mix(in srgb,var(--paper) 80%,transparent);
  backdrop-filter:blur(10px) saturate(1.2);
  border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  transform:translateY(0); transition:transform .35s var(--ease)}
.wb-bar.hidden{transform:translateY(-105%)}
.wb-home{display:none}
.wb-tools{display:flex; gap:.4rem}
.wb-btn{appearance:none; border:1px solid var(--line); background:var(--card);
  color:var(--ink); width:2.35rem; height:2.35rem; border-radius:.7rem;
  display:grid; place-items:center; cursor:pointer; font-size:1.05rem;
  transition:transform .18s var(--ease),border-color .18s,background .18s}
.wb-btn:hover{transform:translateY(-1px); border-color:var(--accent)}
.wb-btn svg{width:1.2rem; height:1.2rem; stroke:currentColor; fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}

/* ---------- TOC drawer ---------- */
.wb-scrim{position:fixed; inset:0; background:rgba(20,16,10,.42); z-index:70;
  opacity:0; visibility:hidden; transition:opacity .35s var(--ease),visibility .35s}
.wb-scrim.open{opacity:1; visibility:visible}
.wb-drawer{position:fixed; top:0; left:0; bottom:0; width:min(88vw,24rem); z-index:80;
  background:var(--card); border-right:1px solid var(--line);
  box-shadow:24px 0 60px -30px rgba(30,22,12,.6);
  transform:translateX(-102%); transition:transform .42s var(--ease);
  display:flex; flex-direction:column; padding:1.4rem 0}
.wb-drawer.open{transform:translateX(0)}
.wb-drawer h2{font-family:var(--display); font-weight:500; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.28em; color:var(--ink-mute);
  margin:.2rem clamp(1.2rem,4vw,1.8rem) 1rem}
.wb-toc{list-style:none; margin:0; padding:0 .6rem; overflow:auto; flex:1}
.wb-toc>li{margin:.1rem 0}
.wb-toc a{display:flex; gap:.7rem; align-items:baseline; text-decoration:none;
  color:var(--ink); padding:.55rem .9rem; border-radius:.6rem; line-height:1.3;
  transition:background .18s,color .18s}
.wb-toc a:hover{background:var(--paper-2)}
.wb-toc .num{font-family:var(--display); font-variant-numeric:tabular-nums;
  font-size:.82rem; color:var(--accent); min-width:1.6rem}
.wb-toc .ttl{font-family:var(--display); font-size:1.02rem; font-weight:500}
.wb-toc li.current>a{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.wb-toc li.current .ttl{color:var(--accent)}
.wb-toc .sub{list-style:none; margin:.1rem 0 .3rem; padding:0 0 0 2.3rem}
.wb-toc .sub a{font-family:var(--body); font-size:.95rem; padding:.3rem .6rem;
  color:var(--ink-mute)}

/* ---------- generic page frame ---------- */
.wb-page{position:relative; z-index:1; max-width:var(--measure);
  margin:0 auto; padding:7rem clamp(1.2rem,5vw,1.5rem) 5rem}

/* ---------- cover ---------- */
.cover{min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  max-width:46rem; margin:0 auto; padding:6rem clamp(1.4rem,6vw,2rem) 4rem;
  position:relative; z-index:1}
.cover .eyebrow{font-family:var(--display); text-transform:uppercase;
  letter-spacing:.34em; font-size:.74rem; color:var(--accent); margin-bottom:1.4rem}
.cover h1{font-family:var(--display); font-weight:600; font-optical-sizing:auto;
  font-size:clamp(2.8rem,9vw,5.6rem); line-height:1.02; letter-spacing:-.015em;
  margin:0 0 .6rem; text-wrap:balance}
.cover .sub{font-family:var(--display); font-style:italic; font-weight:300;
  font-size:clamp(1.2rem,3.4vw,1.9rem); color:var(--ink-mute); margin:0 0 2rem;
  text-wrap:balance}
.cover .rule{height:1px; width:5rem; background:var(--accent); margin:0 0 1.6rem}
.cover .byline{font-size:1.05rem; letter-spacing:.04em; color:var(--ink);
  margin-bottom:2.6rem}
.cover .byline span{color:var(--ink-mute)}
.cover .meta{display:flex; gap:1.4rem; flex-wrap:wrap; font-size:.86rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute);
  margin-bottom:2.6rem}
.cover .meta b{font-family:var(--display); color:var(--ink); font-weight:600;
  font-variant-numeric:tabular-nums}
.cta-row{display:flex; gap:.8rem; flex-wrap:wrap}
.cta{display:inline-flex; align-items:center; gap:.6rem; text-decoration:none;
  font-family:var(--display); font-weight:500; font-size:1rem; letter-spacing:.01em;
  padding:.85rem 1.5rem; border-radius:999px; transition:transform .2s var(--ease),box-shadow .2s}
.cta.primary{background:var(--ink); color:var(--paper)}
.cta.primary:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.cta.ghost{border:1px solid var(--line); color:var(--ink)}
.cta.ghost:hover{border-color:var(--accent); transform:translateY(-2px)}
.cta .arrow{transition:transform .2s var(--ease)}
.cta:hover .arrow{transform:translateX(4px)}

/* cover contents list */
.contents{margin-top:3.5rem; border-top:1px solid var(--line); padding-top:1.6rem}
.contents h3{font-family:var(--display); text-transform:uppercase;
  letter-spacing:.28em; font-size:.74rem; color:var(--ink-mute); margin:0 0 1rem}
.contents ol{list-style:none; margin:0; padding:0}
.contents a{display:flex; align-items:baseline; gap:1rem; text-decoration:none;
  color:var(--ink); padding:.7rem 0; border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent);
  transition:padding .2s var(--ease),color .2s}
.contents a:hover{padding-left:.6rem; color:var(--accent)}
.contents .c-num{font-family:var(--display); color:var(--accent);
  font-variant-numeric:tabular-nums; font-size:.95rem; min-width:2rem}
.contents .c-title{font-family:var(--display); font-size:1.18rem; font-weight:500}
.contents .dots{flex:1; border-bottom:1.5px dotted var(--line);
  transform:translateY(-.25rem); margin:0 .3rem}
.contents .c-min{font-size:.82rem; color:var(--ink-mute);
  font-variant-numeric:tabular-nums; white-space:nowrap}

/* ---------- interactive flip cover (front <-> back) ---------- */
.book-flip{position:relative; margin:0 auto 2.6rem; max-width:23rem; width:100%;
  perspective:1800px; cursor:pointer; border-radius:.5rem;
  -webkit-tap-highlight-color:transparent}
.book-flip-inner{position:relative; width:100%; transform-style:preserve-3d;
  transition:transform .9s var(--ease)}
.book-flip.flipped .book-flip-inner{transform:rotateY(180deg)}
.book-flip-face{margin:0; width:100%;
  -webkit-backface-visibility:hidden; backface-visibility:hidden}
.book-flip-face img{display:block; width:100%; height:auto; border-radius:.5rem;
  box-shadow:0 2px 4px rgba(40,32,20,.14),0 34px 60px -24px rgba(40,32,20,.6)}
[data-theme="night"] .book-flip-face img{box-shadow:0 2px 4px rgba(0,0,0,.5),0 34px 60px -24px rgba(0,0,0,.85)}
.book-flip-front{position:relative}
.book-flip-back{position:absolute; top:0; left:0; transform:rotateY(180deg)}
.book-flip:focus-visible{outline:none}
.book-flip:focus-visible .book-flip-inner{outline:2px solid var(--accent); outline-offset:6px}

/* flip cue badge — signals the cover is interactive */
.flip-hint{position:absolute; right:.7rem; bottom:.7rem; z-index:3;
  display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .72rem;
  border-radius:999px; pointer-events:none;
  font-family:var(--display); font-weight:500; font-size:.78rem; letter-spacing:.02em;
  color:var(--paper); background:color-mix(in srgb,var(--ink) 80%,transparent);
  backdrop-filter:blur(6px) saturate(1.2);
  box-shadow:0 8px 20px -10px rgba(20,16,10,.75);
  transition:background .28s var(--ease)}
.flip-hint svg{width:1rem; height:1rem; transition:transform .7s var(--ease)}
.book-flip:hover .flip-hint,.book-flip:focus-visible .flip-hint{background:var(--accent)}
.book-flip:hover .flip-hint svg,.book-flip:focus-visible .flip-hint svg{transform:rotate(180deg)}

/* when the cover leads with a jacket image, centre the title block under it */
.cover.has-jacket{text-align:center}
.cover.has-jacket .rule{margin-left:auto; margin-right:auto}
.cover.has-jacket .meta,.cover.has-jacket .cta-row{justify-content:center}
.cover.has-jacket .contents{text-align:left}

@media (prefers-reduced-motion:no-preference){
  .flip-hint{animation:flip-cue 4.4s var(--ease) 1.4s infinite}
  @keyframes flip-cue{0%,84%,100%{transform:translateY(0)}
    90%{transform:translateY(-4px)} 95%{transform:translateY(0)}}
}

/* ---------- chapter opener ---------- */
.opener{margin-bottom:3rem}
.opener .ch-eyebrow{font-family:var(--display); text-transform:uppercase;
  letter-spacing:.34em; font-size:.74rem; color:var(--accent); margin-bottom:1rem}
.opener h1{font-family:var(--display); font-weight:600; font-optical-sizing:auto;
  font-size:clamp(2.1rem,6.5vw,3.6rem); line-height:1.06; letter-spacing:-.012em;
  margin:0; text-wrap:balance}
.opener .ch-rule{height:1px; width:4rem; background:var(--accent); margin:1.6rem 0 1rem}
.opener .ch-min{font-size:.84rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-mute)}

/* ---------- body content ---------- */
.prose>*{position:relative}
.prose p{margin:0 0 1.3rem; hyphens:auto; text-wrap:pretty}
.prose p a{text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.prose h2{font-family:var(--display); font-weight:600; font-size:1.7rem;
  line-height:1.15; margin:2.8rem 0 .9rem; letter-spacing:-.01em; scroll-margin-top:6rem}
.prose h3{font-family:var(--display); font-weight:600; font-size:1.3rem;
  margin:2.2rem 0 .7rem; scroll-margin-top:6rem}
.prose h4{font-family:var(--display); font-weight:600; font-size:1.08rem;
  margin:1.8rem 0 .5rem; color:var(--ink-mute); scroll-margin-top:6rem}

/* drop cap on first paragraph */
.prose>p.lead::first-letter{font-family:var(--display); font-weight:600;
  float:left; font-size:4.2rem; line-height:.78; padding:.32rem .6rem .1rem 0;
  color:var(--accent)}
.prose>p.lead{text-indent:0}

.prose ul,.prose ol{margin:0 0 1.4rem; padding-left:1.4rem}
.prose li{margin:.35rem 0; padding-left:.3rem}
.prose ul li::marker{color:var(--accent)}
.prose ol li::marker{font-family:var(--display); color:var(--accent)}

blockquote{margin:2.2rem 0; padding:.2rem 0 .2rem 1.6rem;
  border-left:3px solid var(--accent); font-family:var(--display);
  font-style:italic; font-weight:300; font-size:1.4rem; line-height:1.45;
  color:var(--ink); position:relative}
blockquote::before{content:"\201C"; position:absolute; left:-.1rem; top:-1.4rem;
  font-size:3.4rem; color:var(--accent); opacity:.3; font-family:var(--display)}

figure{margin:2.6rem 0; text-align:center}
figure img{max-width:100%; height:auto; border-radius:.6rem; box-shadow:var(--shadow);
  display:block; margin:0 auto; background-color:var(--paper-2)}
/* The width/height attributes on each <img> reserve the exact aspect-ratio box
   up front, so text never reflows as photos lazy-load. Each photo then fades
   gently into that already-reserved space once its pixels arrive. */
html.js figure img{opacity:0; transform:scale(.992);
  transition:opacity .9s var(--ease), transform 1.1s var(--ease)}
html.js figure img.is-loaded{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  html.js figure img{opacity:1; transform:none; transition:none}
}
figure.bleed{width:min(100%,52rem); margin-left:50%; transform:translateX(-50%)}
figcaption{font-family:var(--body); font-style:italic; font-size:.92rem;
  color:var(--ink-mute); margin-top:.8rem; line-height:1.4}

.wb-table{width:100%; border-collapse:collapse; margin:2rem 0; font-size:1rem}
.wb-table th,.wb-table td{border:1px solid var(--line); padding:.55rem .8rem;
  text-align:left}
.wb-table th{font-family:var(--display); background:var(--paper-2); font-weight:600}

/* ---------- prev / next ---------- */
.wb-nav{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:4rem;
  padding-top:2rem; border-top:1px solid var(--line)}
.wb-nav a{text-decoration:none; color:var(--ink); border:1px solid var(--line);
  border-radius:.9rem; padding:1rem 1.2rem; background:var(--card);
  transition:transform .2s var(--ease),border-color .2s,box-shadow .2s}
.wb-nav a:hover{transform:translateY(-2px); border-color:var(--accent); box-shadow:var(--shadow)}
.wb-nav .dir{font-family:var(--display); text-transform:uppercase; letter-spacing:.2em;
  font-size:.68rem; color:var(--ink-mute); display:block; margin-bottom:.3rem}
.wb-nav .ttl{font-family:var(--display); font-weight:500; font-size:1.02rem}
.wb-nav a.next{text-align:right; grid-column:2}
.wb-nav a.prev{grid-column:1}
.wb-nav a.solo-next{grid-column:2}

/* ---------- reveal animations ---------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0; transform:translateY(14px); animation:rise .8s var(--ease) forwards}
  .reveal.d1{animation-delay:.05s} .reveal.d2{animation-delay:.16s}
  .reveal.d3{animation-delay:.27s} .reveal.d4{animation-delay:.38s}
  @keyframes rise{to{opacity:1; transform:none}}
  .prose>*{opacity:0; transform:translateY(10px); transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .prose>.in{opacity:1; transform:none}
}
/* Without JS, never hide prose. The .js class is set in <head> before paint. */
html:not(.js) .prose>*{opacity:1 !important; transform:none !important}
@media (prefers-reduced-motion:reduce){.prose>*{opacity:1 !important; transform:none !important}}

/* cross-document view transitions (progressive enhancement) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .3s var(--ease) both}
::view-transition-new(root){animation:vt-in .42s var(--ease) both}
@keyframes vt-out{to{opacity:0; transform:translateY(-8px)}}
@keyframes vt-in{from{opacity:0; transform:translateY(12px)}}

/* ---------- responsive ---------- */
@media (max-width:560px){
  body{font-size:1.08rem}
  .wb-nav{grid-template-columns:1fr}
  .wb-nav a.next,.wb-nav a.prev,.wb-nav a.solo-next{grid-column:1; text-align:left}
  .prose>p.lead::first-letter{font-size:3.4rem}
}

/* ---------- print ---------- */
@media print{
  .wb-bar,.wb-progress,.wb-scrim,.wb-drawer,.wb-nav,.cta-row,.wb-btn{display:none !important}
  body{background:#fff; color:#000} body::before{display:none}
  .wb-page{padding-top:1rem} figure{break-inside:avoid}
  .wb-search,.wb-hitbar{display:none !important}
  mark.wb-hit{background:none; color:inherit}
}

/* ============================================================
   Full-text search
   ============================================================ */
body.wb-search-open{overflow:hidden}

.wb-search{position:fixed; inset:0; z-index:95; display:flex;
  align-items:flex-start; justify-content:center; padding:max(8vh,3.5rem) 1rem 2rem;
  opacity:0; transition:opacity .2s var(--ease)}
.wb-search[hidden]{display:none}
.wb-search.show{opacity:1}
.wb-search-scrim{position:fixed; inset:0; background:rgba(20,16,10,.5);
  backdrop-filter:blur(3px)}
[data-theme="night"] .wb-search-scrim{background:rgba(0,0,0,.62)}

.wb-search-panel{position:relative; width:min(40rem,100%); max-height:84vh;
  display:flex; flex-direction:column; background:var(--card);
  border:1px solid var(--line); border-radius:1rem; overflow:hidden;
  box-shadow:var(--shadow); transform:translateY(-10px) scale(.99);
  transition:transform .24s var(--ease)}
.wb-search.show .wb-search-panel{transform:none}

.wb-search-head{display:flex; align-items:center; gap:.7rem;
  padding:.9rem 1.1rem; border-bottom:1px solid var(--line)}
.wb-search-icon{width:1.3rem; height:1.3rem; flex:none; stroke:var(--ink-mute);
  fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.wb-search-input{flex:1; min-width:0; appearance:none; border:0; background:none;
  color:var(--ink); font-family:var(--display); font-weight:500;
  font-size:1.3rem; line-height:1.3; padding:.2rem 0}
.wb-search-input::placeholder{color:var(--ink-mute); opacity:.8}
.wb-search-input:focus{outline:none}
.wb-search-input::-webkit-search-cancel-button{display:none}
.wb-search-clear{appearance:none; flex:none; width:1.9rem; height:1.9rem;
  border:1px solid var(--line); background:var(--paper); color:var(--ink-mute);
  border-radius:50%; cursor:pointer; font-size:1.1rem; line-height:1;
  display:grid; place-items:center; transition:border-color .18s,color .18s}
.wb-search-clear:hover{border-color:var(--accent); color:var(--accent)}

.wb-search-results{overflow:auto; flex:1; padding:.4rem}
.wb-result{display:block; text-decoration:none; color:var(--ink);
  padding:.7rem .8rem; border-radius:.7rem; border:1px solid transparent}
.wb-result+.wb-result{margin-top:.1rem}
.wb-result:hover{background:var(--paper-2)}
.wb-result.active{background:color-mix(in srgb,var(--accent) 11%,transparent);
  border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.wb-result-top{display:flex; align-items:baseline; gap:.6rem; margin-bottom:.15rem}
.wb-result-ch{flex:none; font-family:var(--display); font-variant-numeric:tabular-nums;
  font-size:.72rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--accent); padding:.08rem .45rem; border-radius:.4rem;
  background:color-mix(in srgb,var(--accent) 12%,transparent)}
.wb-result-ttl{font-family:var(--display); font-weight:600; font-size:1rem;
  line-height:1.25}
.wb-result-sec{font-family:var(--display); font-size:.86rem; color:var(--ink-mute);
  margin-bottom:.15rem}
.wb-result-snip{font-family:var(--body); font-size:.92rem; line-height:1.5;
  color:var(--ink-mute); display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden}
.wb-search mark{background:color-mix(in srgb,var(--accent) 26%,transparent);
  color:inherit; border-radius:.18em; padding:0 .06em; font-weight:600}
.wb-result-snip mark{color:var(--ink)}

.wb-search-empty{font-family:var(--display); color:var(--ink-mute);
  text-align:center; padding:2.4rem 1rem; margin:0}

.wb-search-foot{display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.6rem 1rem; border-top:1px solid var(--line);
  font-size:.78rem; color:var(--ink-mute); flex-wrap:wrap}
.wb-search-count{font-variant-numeric:tabular-nums}
.wb-search-keys{display:flex; align-items:center; gap:.35rem; flex-wrap:wrap}
.wb-search-keys kbd{font-family:var(--display); font-size:.72rem;
  border:1px solid var(--line); border-bottom-width:2px; border-radius:.35rem;
  padding:.02rem .32rem; background:var(--paper); color:var(--ink)}

/* in-page highlight of the searched term */
mark.wb-hit{background:color-mix(in srgb,var(--accent-2) 30%,transparent);
  color:inherit; border-radius:.18em; padding:0 .04em;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent-2) 30%,transparent)}
mark.wb-hit.current{background:var(--accent); color:var(--paper);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 45%,transparent)}

/* floating match navigator */
.wb-hitbar{position:fixed; left:50%; bottom:1.1rem; transform:translateX(-50%);
  z-index:55; display:flex; align-items:center; gap:.5rem;
  padding:.45rem .55rem .45rem .9rem; border-radius:999px;
  background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow);
  font-family:var(--body); font-size:.86rem; color:var(--ink); max-width:92vw}
.wb-hitbar b{font-family:var(--display); color:var(--accent)}
.wb-hitbar-txt{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.wb-hitbar-btn{appearance:none; flex:none; height:1.8rem; min-width:1.8rem;
  padding:0 .5rem; border:1px solid var(--line); background:var(--paper);
  color:var(--ink); border-radius:999px; cursor:pointer; font-size:.9rem;
  display:grid; place-items:center; transition:border-color .18s,color .18s,background .18s}
.wb-hitbar-btn:hover{border-color:var(--accent); color:var(--accent)}
.wb-hitbar-clear{font-family:var(--display); font-size:.78rem; letter-spacing:.02em}

@media (prefers-reduced-motion:reduce){
  .wb-search,.wb-search-panel{transition:none}
}
@media (max-width:560px){
  .wb-search{padding-top:0; padding-left:0; padding-right:0; align-items:stretch}
  .wb-search-panel{width:100%; max-height:100%; border-radius:0; border:0}
  .wb-search-input{font-size:1.15rem}
  .wb-hitbar{font-size:.8rem; bottom:.7rem}
}