/* Service page hero. Full bleed, with the page's own demo running in it rather than a still
   beside a text block. Every service page gets a different demo, so no two of them open the
   same way. The demos are built for this hero, not lifted out of the features bank.

   Ground is a token swap: .shero is night, .shero.light is paper. Every demo below is written
   against the tokens, so a new demo works on both grounds without a second set of rules. */
.shero{
  --sh-bg:var(--fo-night-brand,#0f1119);
  --sh-glow:rgba(39,66,201,.16);
  --sh-sheen:rgba(255,255,255,.05);
  --sh-ink:#fff;
  --sh-mut:rgba(255,255,255,.68);
  --sh-faint:rgba(255,255,255,.45);
  --sd-bg:#14151c;
  --sd-bar:rgba(255,255,255,.03);
  --sd-line:rgba(255,255,255,.1);
  --sd-line-soft:rgba(255,255,255,.07);
  --sd-well:#0c0d12;
  --sd-ink:#fff;
  --sd-mut:rgba(255,255,255,.62);
  --sd-faint:rgba(255,255,255,.4);
  --sd-dim:rgba(255,255,255,.28);
  --sd-chip:rgba(255,255,255,.12);
  --sd-live:#7fd0a2;
  --sd-accent:#8fa2ec;
  --sd-shadow:0 60px 90px -50px rgba(0,0,0,.9);
  position:relative;isolation:isolate;overflow:hidden;width:100vw;margin-left:calc(50% - 50vw);
  background:var(--sh-bg);color:var(--sh-ink);padding:0}
.shero.light{
  --sh-bg:var(--fo-paper,#fff);
  --sh-glow:rgba(39,66,201,.07);
  --sh-sheen:rgba(20,25,60,.03);
  --sh-ink:var(--fo-night,#101014);
  --sh-mut:var(--fo-muted,#5b5d68);
  --sh-faint:var(--fo-muted-2,#84868f);
  --sd-bg:var(--fo-surface,#f4f5f7);
  --sd-bar:rgba(20,25,60,.03);
  --sd-line:var(--fo-edge,#e8e9ec);
  --sd-line-soft:rgba(20,25,60,.08);
  --sd-well:#e9e5dc;
  --sd-ink:var(--fo-night,#101014);
  --sd-mut:var(--fo-muted,#5b5d68);
  --sd-faint:var(--fo-muted-2,#84868f);
  --sd-dim:var(--fo-faint,#b6b9c9);
  --sd-chip:rgba(20,25,60,.14);
  --sd-live:#14603c;
  --sd-accent:var(--fo-brand-deep,#1d3399);
  --sd-shadow:0 40px 70px -46px rgba(20,30,80,.45);
  border-bottom:1px solid var(--fo-edge,#e8e9ec)}
.shero::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(1100px 760px at 78% 8%,var(--sh-sheen),transparent 60%),
             radial-gradient(760px 620px at 4% 96%,var(--sh-glow),transparent 62%)}
.shero-in{position:relative;z-index:2;max-width:1520px;margin:0 auto;padding:70px 32px 76px;
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:56px;align-items:center;min-height:min(680px,78vh)}
.shero-copy{max-width:none}
.shero .crumb{font-size:12.5px;color:var(--sh-faint);margin-bottom:26px}
.shero .crumb a{color:var(--sh-mut);text-decoration:none}
.shero .crumb a:hover{color:var(--sh-ink)}
.shero .k{display:inline-block;position:relative;padding-left:15px;margin-bottom:20px;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--sh-faint)}
.shero .k::before{content:'';position:absolute;left:0;top:.12em;bottom:.12em;width:3px;background:var(--fo-brand,#2742c9)}
.shero h1{font-size:clamp(32px,3.9vw,54px);font-weight:700;letter-spacing:-.038em;line-height:1.03;margin:0;max-width:15ch;text-wrap:balance;color:var(--sh-ink)}
.shero p.lede{color:var(--sh-mut);font-size:16.5px;line-height:1.6;margin-top:18px;max-width:44ch}
.shero .btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.shero .btn{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;font-size:14.5px;font-weight:600;text-decoration:none;background:var(--fo-brand,#2742c9);color:#fff;border:1px solid transparent;transition:background .2s ease}
.shero .btn:not(.ghost)::after{content:'';width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);transition:translate .25s ease}
.shero .btn:not(.ghost):hover{background:#1b2f96}
.shero .btn:not(.ghost):hover::after{translate:5px 0}
.shero .btn.ghost{background:transparent;border-color:var(--sd-chip);color:var(--sh-ink)}
.shero .btn.ghost:hover{background:var(--sh-sheen)}
.shero-copy>*{opacity:0;transform:translateY(16px);animation:shIn .75s cubic-bezier(.2,.7,.2,1) both}
.shero-copy>:nth-child(1){animation-delay:.05s}.shero-copy>:nth-child(2){animation-delay:.16s}
.shero-copy>:nth-child(3){animation-delay:.26s}.shero-copy>:nth-child(4){animation-delay:.36s}
.shero-copy>:nth-child(5){animation-delay:.46s}
@keyframes shIn{to{opacity:1;transform:none}}

/* the stage the demo stands on */
.shero-demo{position:relative;opacity:0;animation:shIn .9s cubic-bezier(.2,.7,.2,1) .3s both}
.sd{position:relative;background:var(--sd-bg);border:1px solid var(--sd-line);box-shadow:var(--sd-shadow)}
.sd-bar{display:flex;align-items:center;gap:12px;padding:11px 15px;background:var(--sd-bar);border-bottom:1px solid var(--sd-line);
  font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--sd-faint)}
.sd-bar em{margin-left:auto;font-style:normal;color:var(--sd-live);letter-spacing:.12em}
.sd-cap{margin-top:14px;font-size:12px;line-height:1.55;color:var(--sh-faint)}
.sd-cap b{color:var(--sh-mut);font-weight:600}
.sd .lbl{display:block;font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sd-faint);margin-bottom:7px}

@media (max-width:1080px){
  .shero-in{grid-template-columns:1fr;gap:38px;padding:44px 24px 52px;min-height:0}
  .shero h1{font-size:clamp(28px,6.4vw,40px)}
}
@media (prefers-reduced-motion:reduce){
  .shero-copy>*,.shero-demo{opacity:1;transform:none;animation:none}
}

/* ---------- OCR: a page reading itself ----------
   The scan on the left, the transcription arriving line by line on the right, each line tied
   back to its box on the page. The material swaps underneath, so the same anchoring is shown
   surviving early print, a written hand and a script that runs the other way. */
.sd-ocr{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}
.sd-page{position:relative;border-right:1px solid var(--sd-line);background:var(--sd-well);overflow:hidden;min-height:430px}
/* the page keeps its own proportion inside the pane, so the boxes sit where they belong */
.sd-page .pg{position:absolute;top:0;bottom:0;aspect-ratio:var(--par,.786);left:50%;translate:-50% 0;
  opacity:1;transition:opacity .55s ease}
/* when the pane carries more than one piece of material, only the live one is up */
.sd-page.multi .pg{opacity:0}
.sd-page.multi .pg.up{opacity:1}
/* a page wider than the pane fits to the width instead, so a spread is not cut in half */
.sd-page .pg.wide{top:50%;bottom:auto;left:0;right:0;width:100%;translate:0 -50%}
.sd-page .pg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.sd-box{position:absolute;border:1.5px solid rgba(91,116,224,.9);background:rgba(39,66,201,.1);box-shadow:0 0 0 1px rgba(255,255,255,.45),inset 0 0 0 1px rgba(255,255,255,.28);
  opacity:0;transform:scale(1.04);transition:opacity .4s ease,transform .5s cubic-bezier(.2,.7,.2,1),background .3s ease,border-color .3s ease}
.sd-box.seen{opacity:1;transform:none}
.sd-box.on{background:rgba(39,66,201,.4);border-color:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.35),0 0 22px rgba(91,116,224,.55)}
.sd-lines{padding:22px 24px 24px;display:flex;flex-direction:column}
.sd-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.sd-lang{display:inline-flex;border:1px solid var(--sd-chip);margin-left:auto}
.sd-lang span{padding:5px 11px;font-size:9.5px;font-weight:700;letter-spacing:.12em;color:var(--sd-faint);transition:background .25s ease,color .25s ease}
.sd-lang span.on{background:var(--sd-ink);color:var(--sd-bg)}
.sd-set{display:none}
.sd-set.up{display:block}
.sd-line{position:relative;padding:9px 0 9px 30px;border-bottom:1px solid var(--sd-line-soft);opacity:0;transform:translateY(6px);
  transition:opacity .45s ease,transform .45s ease,color .25s ease}
.sd-line.seen{opacity:1;transform:none}
.sd-line:last-child{border-bottom:0}
.sd-line .n{position:absolute;left:0;top:11px;font-size:9.5px;font-weight:700;letter-spacing:.1em;color:var(--sd-dim)}
.sd-line.on .n{color:var(--sd-accent)}
.sd-line .tx{display:block;font-family:var(--serif,Georgia,serif);font-size:14.5px;line-height:1.5;color:var(--sd-mut);transition:color .25s ease}
.sd-line.on .tx{color:var(--sd-ink)}
.sd-line .en{display:none}
.sd-set.en .sd-line .la{display:none}
.sd-set.en .sd-line .en{display:block}
.sd-line.rtl{padding:9px 30px 9px 0;text-align:right}
.sd-line.rtl .n{left:auto;right:0}
.sd-foot{margin-top:auto;padding-top:16px;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:10.5px;letter-spacing:.06em;color:var(--sd-faint)}
.sd-foot b{color:var(--sd-mut);font-weight:600}
@media (max-width:640px){
  .sd-ocr{grid-template-columns:1fr}
  .sd-page{min-height:220px;border-right:0;border-bottom:1px solid var(--sd-line)}
  .sd-lines{padding:18px 18px 20px}
}

/* ---------- Translation: what it reads from, and what it reads into ----------
   One real line at a time, in the script it was written in, with its romanisation and a real
   rendering beneath. Two grids carry the range: the scripts read from, the languages read into. */
.sd-tr{padding:22px 26px 20px}
.sd-tr .side{padding:14px 0}
.sd-tr .side + .side{border-top:1px solid var(--sd-line)}
.sd-tr .nm{display:flex;align-items:baseline;gap:10px;margin-bottom:9px}
.sd-tr .nm b{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sd-accent)}
.sd-tr .nm i{font-style:normal;font-size:10.5px;letter-spacing:.06em;color:var(--sd-dim)}
.sd-tr .tx{font-family:var(--serif,Georgia,serif);font-size:19px;line-height:1.5;color:var(--sd-ink);margin:0;min-height:1.5em;
  opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease}
.sd-tr .tx.on{opacity:1;transform:none}
.sd-tr .rom{font-family:var(--serif,Georgia,serif);font-size:13.5px;line-height:1.5;color:var(--sd-faint);margin:9px 0 0;font-style:italic;
  opacity:0;transition:opacity .45s ease}
.sd-tr .rom.on{opacity:1}
.sd-tr .rtl{text-align:right;direction:rtl}
.sd-band{margin-top:12px;padding-top:13px;border-top:1px solid var(--sd-line)}
.sd-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;max-height:60px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 44%,rgba(0,0,0,.2) 92%,transparent);mask-image:linear-gradient(180deg,#000 44%,rgba(0,0,0,.2) 92%,transparent)}
.sd-chips span{font-size:11.5px;line-height:1;padding:5px 8px;border:1px solid var(--sd-chip);color:var(--sd-faint);white-space:nowrap;
  transition:background .3s ease,color .3s ease,border-color .3s ease}
.sd-chips span.on{background:var(--sd-ink);border-color:var(--sd-ink);color:var(--sd-bg)}
.sd-tr .count{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 26px;margin-top:14px;padding-top:13px;border-top:1px solid var(--sd-line);font-size:10.5px;letter-spacing:.06em;color:var(--sd-faint)}
.sd-tr .count b{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--sd-ink);margin-right:6px}
@media (max-width:640px){.sd-tr{padding:18px 16px}.sd-tr .tx{font-size:17px}}

/* dense pages get a hairline box; the demo shows every line it found, not a sample */
.sd-box.fine{border-width:1px;background:none;box-shadow:none;border-color:rgba(91,116,224,.75)}
.sd-box.fine.on{background:rgba(39,66,201,.35);border-color:#fff;box-shadow:none}
.sd-spec{margin:0;display:grid;grid-template-columns:auto 1fr;gap:0 20px;font-size:13px}
.sd-spec dt{padding:9px 0;border-top:1px solid var(--sd-line-soft);color:var(--sd-faint);white-space:nowrap;letter-spacing:.02em}
.sd-spec dd{margin:0;padding:9px 0;border-top:1px solid var(--sd-line-soft);color:var(--sd-mut)}
.sd-spec dt:first-of-type,.sd-spec dd:first-of-type{border-top:0}
.sd-spec b{color:var(--sd-ink);font-weight:700}
.sd-note{margin:16px 0 0;font-size:12.5px;line-height:1.6;color:var(--sd-faint);max-width:44ch}
/* the material the demo is currently reading */
.sd-strip{margin-top:auto;padding-top:16px;display:flex;flex-wrap:wrap;gap:6px}
.sd-strip button{font:inherit;cursor:pointer;padding:6px 11px;font-size:11px;font-weight:600;letter-spacing:.04em;
  background:none;border:1px solid var(--sd-chip);color:var(--sd-faint);transition:background .25s ease,color .25s ease,border-color .25s ease}
.sd-strip button.on{background:var(--sd-ink);border-color:var(--sd-ink);color:var(--sd-bg)}
.sd-strip button:hover{color:var(--sd-ink)}

/* ---------- Reading room: a session, not a screenshot ----------
   A pointer moves through the reader and does what a reader does: turns pages, brings the
   translation up, sets the type larger, marks a passage and saves it to a collection. */
.sd-rr{position:relative;display:grid;grid-template-columns:52px minmax(0,.9fr) minmax(0,1.1fr) 0fr;grid-template-rows:1fr;
  transition:grid-template-columns .6s cubic-bezier(.2,.7,.2,1);height:452px}
.sd-rr.tri{grid-template-columns:52px minmax(0,.78fr) minmax(0,1fr) minmax(0,1fr)}
.sd-rail{border-right:1px solid var(--sd-line);padding:10px 0;display:flex;flex-direction:column;gap:2px;background:var(--sd-bar)}
.sd-rail i{display:grid;place-items:center;height:38px;font-style:normal;font-size:15px;color:var(--sd-dim);transition:color .25s ease,background .25s ease}
.sd-rail i.on{color:var(--sd-ink);background:var(--sd-line-soft)}
.sd-rr .scan{position:relative;border-right:1px solid var(--sd-line);background:var(--sd-well);overflow:hidden}
.sd-rr .scan .pg{position:absolute;top:0;bottom:0;aspect-ratio:.786;left:50%;translate:-50% 0;opacity:0;transition:opacity .5s ease}
.sd-rr .scan .pg.up{opacity:1}
.sd-rr .scan .pg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.sd-rr .col{padding:16px 18px 46px;overflow:hidden;min-width:0}
.sd-rr .col + .col{border-left:1px solid var(--sd-line)}
.sd-rr .col .hd{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.sd-rr .col .hd .lbl{margin:0}
.sd-rr .col .hd .tg{margin-left:auto;display:inline-flex;border:1px solid var(--sd-chip)}
.sd-rr .col .hd .tg span{padding:4px 9px;font-size:9px;font-weight:700;letter-spacing:.1em;color:var(--sd-faint);transition:background .25s ease,color .25s ease}
.sd-rr .col .hd .tg span.on{background:var(--sd-ink);color:var(--sd-bg)}
.sd-rr .ln{font-family:var(--serif,Georgia,serif);font-size:var(--rr-size,13.5px);line-height:1.62;color:var(--sd-mut);
  padding:3px 6px;margin:0 -6px;transition:font-size .5s ease,line-height .5s ease,background .35s ease,color .35s ease}
.sd-rr .ln.mark{background:rgba(39,66,201,.3);color:var(--sd-ink);box-shadow:inset 2px 0 0 var(--sd-accent)}
.sd-rr .tr{opacity:0;transition:opacity .5s ease .15s}
.sd-rr.tri .tr{opacity:1}
.sd-rr .strip{position:absolute;left:52px;right:0;bottom:0;display:flex;gap:3px;padding:7px 10px;background:var(--sd-bar);border-top:1px solid var(--sd-line);z-index:3}
.sd-rr .strip i{width:16px;height:21px;flex:none;background:var(--sd-line);border:1px solid var(--sd-chip);transition:background .3s ease,border-color .3s ease}
.sd-rr .strip i.on{background:var(--sd-accent);border-color:var(--sd-ink)}
/* the pointer, and what it presses */
.sd-cursor{position:absolute;z-index:9;width:15px;height:15px;pointer-events:none;left:0;top:0;
  transition:translate 1s cubic-bezier(.5,0,.2,1);filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.sd-cursor svg{display:block}
.sd-cursor::after{content:'';position:absolute;left:-9px;top:-9px;width:33px;height:33px;border-radius:50%;
  border:1.5px solid var(--sd-accent);opacity:0;transform:scale(.5)}
.sd-cursor.tap::after{animation:sdTap .55s ease-out}
@keyframes sdTap{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(1.15)}}
.sd-toast{position:absolute;z-index:8;left:50%;bottom:52px;translate:-50% 0;display:flex;align-items:center;gap:10px;
  padding:11px 15px;background:var(--sd-ink);color:var(--sd-bg);font-size:12.5px;font-weight:600;letter-spacing:.01em;
  opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease;white-space:nowrap}
.sd-toast.up{opacity:1;transform:none}
.sd-toast b{font-weight:700}
.sd-toast em{font-style:normal;opacity:.6;font-weight:500}
@media (max-width:820px){
  .sd-rr{grid-template-columns:44px 1fr;height:380px}
  .sd-rr.tri{grid-template-columns:44px 1fr}
  .sd-rr .col{display:none}
  .sd-rr .col:nth-of-type(1){display:block}
  .sd-rr .strip{left:44px}
}

/* ---------- Exhibitions: a room that answers to someone being in it ----------
   The works hang in the dark at their own proportions and stay dim until a visitor is near.
   Presence brings the nearest ones up: brighter, a little closer, and their label with them.
   No kiosk, no slideshow. The room is the interface. */
.sd-exh{position:relative;height:452px;overflow:hidden;background:#07070b;isolation:isolate}
.shero.light .sd-exh{background:#0a0a0e}
.sd-exh .haze{position:absolute;inset:-20%;z-index:0;pointer-events:none;
  background:radial-gradient(52% 46% at 30% 40%,rgba(60,90,220,.16),transparent 62%),
             radial-gradient(46% 42% at 74% 66%,rgba(200,120,60,.11),transparent 60%);
  animation:exhDrift 34s ease-in-out infinite alternate}
@keyframes exhDrift{to{transform:translate3d(4%,-3%,0) scale(1.08)}}
.sd-exh .floor{position:absolute;left:0;right:0;bottom:0;height:26%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.05) 42%,rgba(255,255,255,.02))}
.sd-exh .glow{position:absolute;z-index:2;width:520px;height:520px;left:0;top:0;margin:-260px 0 0 -260px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,246,225,.3),rgba(255,246,225,.09) 46%,transparent 72%);mix-blend-mode:screen}
.sd-exh figure{position:absolute;z-index:3;margin:0;transform-origin:50% 100%;
  --near:0;
  opacity:calc(.16 + .84 * var(--near));
  scale:calc(1 + .06 * var(--near));
  filter:brightness(calc(.42 + .58 * var(--near))) saturate(calc(.55 + .45 * var(--near)));
  transition:opacity .5s ease,scale .6s cubic-bezier(.2,.7,.2,1),filter .5s ease}
.sd-exh figure img{display:block;width:100%;height:auto;border:3px solid rgba(255,252,244,.9);
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 26px 40px -22px rgba(0,0,0,.9),0 0 calc(46px * var(--near)) rgba(255,240,210,calc(.62 * var(--near)))}
.sd-exh figcaption{position:absolute;left:0;top:calc(100% + 8px);width:max-content;max-width:150px;
  font-size:10px;line-height:1.4;letter-spacing:.02em;color:rgba(255,248,236,.86);
  opacity:var(--near);transform:translateY(calc(4px * (1 - var(--near))));transition:opacity .45s ease,transform .45s ease}
.sd-exh figcaption b{display:block;font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:9px;color:rgba(255,248,236,.55);margin-bottom:2px}
.sd-exh .visitor{position:absolute;z-index:4;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;
  background:rgba(255,248,232,.9);box-shadow:0 0 16px 5px rgba(255,240,210,.45);pointer-events:none}
.sd-exh .room{position:absolute;left:16px;top:14px;z-index:6;font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,248,236,.42)}
.sd-exh .live{position:absolute;right:16px;bottom:14px;z-index:6;font-size:10.5px;letter-spacing:.04em;color:rgba(255,248,236,.5)}
.sd-exh .live b{color:rgba(255,248,236,.92);font-weight:700}
@media (prefers-reduced-motion:reduce){
  .sd-exh .haze{animation:none}
  .sd-exh figure{--near:.72}
  .sd-exh .visitor,.sd-exh .glow{display:none}
}
@media (max-width:820px){.sd-exh{height:340px}.sd-exh figcaption{display:none}}

/* ---------- Search: one phrase, the whole collection ----------
   Not three hits from one book. The count climbs as the collection is swept, results arrive
   from different volumes, and each row shows where in the book the word actually falls. */
.sd-se{display:flex;flex-direction:column;height:452px}
.sd-se .q{display:flex;align-items:center;gap:11px;padding:15px 18px;border-bottom:1px solid var(--sd-line)}
.sd-se .q svg{flex:none;opacity:.55}
.sd-se .q .typed{font-size:16px;color:var(--sd-ink);letter-spacing:-.005em;white-space:nowrap}
.sd-se .q .caret{display:inline-block;width:1.5px;height:1.05em;background:var(--sd-accent);translate:0 .16em;animation:sdCaret 1s steps(1) infinite}
@keyframes sdCaret{50%{opacity:0}}
.sd-se .q .scope{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sd-faint);white-space:nowrap}
.sd-se .tally{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 22px;padding:13px 18px;border-bottom:1px solid var(--sd-line);font-size:11px;letter-spacing:.05em;color:var(--sd-faint)}
.sd-se .tally b{font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--sd-ink);margin-right:7px;font-variant-numeric:tabular-nums}
.sd-se .hits{flex:1;overflow:hidden;padding:4px 0}
.sd-se .hit{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:0 13px;align-items:center;padding:7px 18px;
  opacity:0;transform:translateY(7px);transition:opacity .4s ease,transform .4s ease,background .25s ease}
.sd-se .hit.in{opacity:1;transform:none}
.sd-se .hit.on{background:var(--sd-line-soft)}
.sd-se .hit .cv{width:30px;aspect-ratio:128/176;background-image:url(covers-atlas.jpg);background-size:1600% 1500%;border:1px solid var(--sd-chip)}
.sd-se .hit .ti{font-size:13px;line-height:1.35;color:var(--sd-mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sd-se .hit.on .ti{color:var(--sd-ink)}
.sd-se .hit .ct{font-size:10.5px;letter-spacing:.05em;color:var(--sd-faint);white-space:nowrap;font-variant-numeric:tabular-nums}
/* where in the volume the word falls */
.sd-se .hit .spread{grid-column:2/-1;display:flex;gap:1px;height:4px;margin-top:6px}
.sd-se .hit .spread i{flex:1;background:var(--sd-line);transition:background .3s ease}
.sd-se .hit .spread i.h{background:var(--sd-accent)}
.sd-se .land{border-top:1px solid var(--sd-line);display:grid;grid-template-columns:96px minmax(0,1fr);gap:0 15px;padding:14px 18px;align-items:center;
  opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease}
.sd-se .land.up{opacity:1;transform:none}
.sd-se .land .pv{position:relative;aspect-ratio:.786;background:var(--sd-well) center/cover;overflow:hidden;border:1px solid var(--sd-chip)}
.sd-se .land .pv img{width:100%;height:100%;object-fit:cover;object-position:center top}
.sd-se .land .pv span{position:absolute;left:6%;right:6%;top:41%;height:7%;background:rgba(39,66,201,.45);box-shadow:0 0 0 1px #fff}
.sd-se .land .ln{font-family:var(--serif,Georgia,serif);font-size:14px;line-height:1.55;color:var(--sd-ink);margin:0}
.sd-se .land .ln mark{background:rgba(39,66,201,.42);color:inherit;padding:0 2px}
.sd-se .land .mt{font-size:10.5px;letter-spacing:.05em;color:var(--sd-faint);margin-top:7px}
@media (max-width:820px){.sd-se{height:390px}.sd-se .land{grid-template-columns:64px 1fr}}

/* ---------- Deep zoom: the range, and how far into it you can go ----------
   Six unrelated works. The loupe marks a detail, the view dives into it level by level, then
   pulls back and moves on. Zoom is anchored at the detail, so nothing slides off. */
.sd-dz{position:relative;height:452px;display:grid;grid-template-rows:minmax(0,1fr) auto}
.sd-dz .vp{position:relative;overflow:hidden;background:var(--sd-well);display:grid;place-items:center}
.sd-dz .vp figure{position:absolute;inset:0;display:grid;place-items:center;margin:0;opacity:0;transition:opacity .55s ease}
.sd-dz .vp figure.up{opacity:1}
.sd-dz .vp img{max-width:100%;max-height:100%;display:block;transform-origin:var(--fx,50%) var(--fy,50%);
  transform:scale(var(--z,1));transition:transform 1.5s cubic-bezier(.4,0,.25,1)}
.sd-dz .loupe{position:absolute;z-index:3;border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.5),0 0 0 9999px rgba(6,7,11,.42);
  opacity:0;transform:scale(1.1);transition:opacity .45s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
.sd-dz .loupe.up{opacity:1;transform:none}
.sd-dz .read{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 20px;
  padding:10px 15px;background:linear-gradient(180deg,transparent,rgba(6,7,11,.72));
  font-size:10.5px;letter-spacing:.05em;color:rgba(255,255,255,.6)}
.shero.light .sd-dz .read{background:linear-gradient(180deg,transparent,rgba(6,7,11,.6))}
.sd-dz .read b{font-size:13px;font-weight:700;letter-spacing:-.005em;color:#fff;margin-right:6px;font-variant-numeric:tabular-nums}
.sd-dz .read .ttl{margin-right:auto;color:rgba(255,255,255,.82);letter-spacing:.01em;font-size:11.5px}
/* the range, along the bottom */
.sd-dz .rail{display:flex;gap:6px;align-items:flex-end;padding:11px 14px;border-top:1px solid var(--sd-line);background:var(--sd-bar);overflow:hidden}
.sd-dz .rail button{position:relative;flex:none;padding:0;border:1px solid var(--sd-chip);background:none;cursor:pointer;line-height:0;
  opacity:.42;transition:opacity .3s ease,border-color .3s ease}
.sd-dz .rail button.on{opacity:1;border-color:var(--sd-ink)}
.sd-dz .rail img{display:block;height:44px;width:auto;max-width:none}
@media (max-width:820px){.sd-dz{height:360px}.sd-dz .rail img{height:34px}}