/* Bundled fonts (SIL OFL 1.1) — see fonts/README.md. Latin only; CJK falls back to system fonts. */
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/playfair-display-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:900;font-display:swap;src:url(../fonts/playfair-display-latin-900-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/playfair-display-latin-400-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/source-serif-4-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/source-serif-4-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/source-serif-4-latin-400-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* OTTpaper — a broadsheet. Themes: ivory (default) / white / black; data-theme absent = follow system (ivory or black).
   Sizes are in rem so every label follows the reader's text-size setting. Colours come only from the tokens below. */
:root{
  --paper:#f4efe3;--paper2:#ebe4d3;--ink:#1a1814;--mut:#6a6254;--rule:#1a1814;--hair:#c9bfa8;
  --acc:#9b2d1f;--accfg:#fffaf0;--ok:#1f6b45;--okbg:#e2eedc;--warn:#8a5a00;--danger:#a3201a;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua","Noto Serif KR","Noto Serif CJK KR","Noto Serif JP","Noto Serif CJK JP","Nanum Myeongjo","Hiragino Mincho ProN","Yu Mincho",Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Apple SD Gothic Neo","Noto Sans KR","Hiragino Sans","Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Noto Sans Mono CJK KR","Noto Sans Mono CJK JP",monospace;
  --hf:"Playfair Display",var(--serif);--bf:"Source Serif 4",var(--serif);--fs:17px;
  --page:1140px;--gut:clamp(16px,3.2vw,28px);--track:.14em;--lh:1.6}
:root[data-theme=white]{--paper:#fff;--paper2:#f4f4f2;--ink:#111;--mut:#5f5f5f;--rule:#111;--hair:#d6d6d6;--acc:#b3261e;--accfg:#fff;--ok:#1b6e45;--okbg:#e6f3ec;--warn:#855400;--danger:#b3261e}
:root[data-theme=black]{--paper:#0b0b0b;--paper2:#181818;--ink:#f1efe9;--mut:#a29f96;--rule:#f1efe9;--hair:#3a3a3a;--acc:#ff8a75;--accfg:#0b0b0b;--ok:#7bd1a0;--okbg:#14301f;--warn:#e5b25a;--danger:#ff8a7a}
@media (prefers-color-scheme:dark){:root:not([data-theme]){--paper:#0b0b0b;--paper2:#181818;--ink:#f1efe9;--mut:#a29f96;--rule:#f1efe9;--hair:#3a3a3a;--acc:#ff8a75;--accfg:#0b0b0b;--ok:#7bd1a0;--okbg:#14301f;--warn:#e5b25a;--danger:#ff8a7a}}
/* Font choices (Settings → Font). Default "paper" = bundled Playfair Display + Source Serif 4. */
:root[data-font=serif]{--hf:var(--serif);--bf:var(--serif)}
:root[data-font=sans]{--hf:var(--sans);--bf:var(--sans)}
:root[data-font=mono]{--hf:var(--mono);--bf:var(--mono)}
:root[data-size=s]{--fs:15px}:root[data-size=l]{--fs:19px}:root[data-size=xl]{--fs:21px}
/* Korean / Japanese: no wide tracking, more leading, no synthetic italics (CJK has no italic). */
:root:lang(ko),:root:lang(ja){--track:.04em;--lh:1.75}
:root:lang(ko){--serif:"Iowan Old Style","Palatino Linotype",Palatino,"Noto Serif KR","Noto Serif CJK KR","AppleMyungjo","Nanum Myeongjo","Batang",Georgia,"Times New Roman",serif;--sans:system-ui,-apple-system,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic","Segoe UI",sans-serif}
:root:lang(ja){--serif:"Iowan Old Style","Palatino Linotype",Palatino,"Noto Serif JP","Noto Serif CJK JP","Hiragino Mincho ProN","Yu Mincho","YuMincho",Georgia,"Times New Roman",serif;--sans:system-ui,-apple-system,"Hiragino Sans","Noto Sans JP","Yu Gothic","Meiryo","Segoe UI",sans-serif}
:root:lang(ko) body{word-break:keep-all;overflow-wrap:break-word}
:root:lang(ja) body{line-break:strict;word-break:auto-phrase} /* phrase-aware breaks in Japanese where supported */
:root:lang(ko) :is(.deck,.ear,figcaption,.jump,.preview,.empty p,.motto),:root:lang(ja) :is(.deck,.ear,figcaption,.jump,.preview,.empty p,.motto){font-style:normal}

/* ---- Base ---- */
*{box-sizing:border-box}
html{font-size:var(--fs);-webkit-text-size-adjust:100%;scroll-padding-top:7rem}
body{margin:0;background:var(--paper);color:var(--ink);font:1rem/var(--lh) var(--bf);display:flex;flex-direction:column;min-height:100vh;font-variant-numeric:oldstyle-nums proportional-nums;font-kerning:normal}
a{color:var(--acc);text-underline-offset:.16em;text-decoration-thickness:1px}
h1,h2,h3{font-family:var(--hf);line-height:1.15;font-weight:700;margin:0}
p{margin:0 0 .8em}
img{max-width:100%}
.ic{flex:none;width:1.15em;height:1.15em;vertical-align:-.2em}
.ic.filled{fill:currentColor}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
main{flex:1;width:100%;max-width:var(--page);margin:0 auto;padding:1.5rem var(--gut) 1rem;outline:none}
main>*{animation:turn .35s ease-out}
@keyframes turn{from{opacity:0}}
.skip{position:absolute;left:8px;top:-60px;background:var(--ink);color:var(--paper);padding:8px 14px;font:700 .8rem var(--sans);z-index:40;text-decoration:none}.skip:focus{top:8px}

/* Shared type: kicker (section label above a headline), deck (subhead), byline, small notes */
.kicker{display:block;margin:0;font:700 .66rem/1.4 var(--sans);text-transform:uppercase;letter-spacing:var(--track);color:var(--acc)}
.deck{font:italic 400 1.15rem/1.45 var(--hf);color:var(--mut);margin:0 0 .6rem}
.byline{font:600 .68rem/1.6 var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--mut);margin:0}
.byline b{color:var(--ink);font-weight:700}
.note{font:.8rem/1.55 var(--sans);color:var(--mut);margin:.5rem 0}.note .ic{width:1em;height:1em}.note.warn{color:var(--warn)}.note.center{text-align:center}
.lbl{font:700 .64rem/1.4 var(--sans);text-transform:uppercase;letter-spacing:var(--track);color:var(--mut)}
.stars{font:.78rem/1.3 var(--sans);letter-spacing:.05em;color:var(--ink);white-space:nowrap}
.stars .sv{margin-left:.35em;letter-spacing:0;color:var(--mut);font-variant-numeric:lining-nums tabular-nums}

/* ---- Masthead: ears + nameplate, then the folio line between rules ---- */
.mast{max-width:var(--page);width:100%;margin:0 auto;padding:1rem var(--gut) 0;text-align:center}
.plate{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.5rem}
.brand{font:900 clamp(2.7rem,8.6vw,5.7rem)/1 var(--hf);letter-spacing:-.025em;color:var(--ink);text-decoration:none;font-variant:small-caps;white-space:nowrap;padding:.05em 0}
.ear{margin:0;max-width:12.5rem;border:1px solid var(--rule);padding:.5rem .75rem;font:italic .82rem/1.35 var(--hf);color:var(--ink);justify-self:start}
.ear-r{justify-self:end;font:600 .6rem/1.5 var(--sans);font-style:normal;text-transform:uppercase;letter-spacing:var(--track);color:var(--mut)}
.ear-r b{display:block;font:900 1.05rem/1.15 var(--hf);text-transform:none;letter-spacing:0;color:var(--ink)}
/* Inside pages: a compact running head instead of the full front-page nameplate */
[data-page=inside] .mast{padding-top:.55rem}
[data-page=inside] .plate{grid-template-columns:1fr}
[data-page=inside] .ear{display:none}
[data-page=inside] .brand{font-size:clamp(1.9rem,4.4vw,2.8rem)}
[data-page=inside] .folio{margin-top:.4rem}
.folio{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;margin-top:.65rem;padding:.35rem 0 .3rem;border-top:3px double var(--rule);border-bottom:1px solid var(--rule);font:600 .64rem/1.4 var(--sans);text-transform:uppercase;letter-spacing:var(--track);color:var(--ink)}
.folio #volno{text-align:left}.folio #edition{text-align:right}
/* Sticky bar: section index + search; a mini nameplate appears once the masthead scrolls away */
.bar{position:sticky;top:0;z-index:10;background:var(--paper);border-bottom:1px solid var(--rule)}
.bar-in{max-width:var(--page);margin:0 auto;padding:0 var(--gut);display:flex;align-items:center;gap:1rem;min-height:2.7rem}
.mini{display:none;font:900 1.2rem/1 var(--hf);font-variant:small-caps;letter-spacing:-.01em;color:var(--ink);text-decoration:none;padding-right:1rem;border-right:1px solid var(--hair);white-space:nowrap}
.stuck .mini{display:block}
.stuck .bar{box-shadow:0 3px 0 -2px var(--rule)}
.nav{display:flex;margin-right:auto;min-width:0}
.nav a{position:relative;display:flex;align-items:center;padding:.8rem .85rem;color:var(--ink);text-decoration:none;font:700 .68rem/1 var(--sans);text-transform:uppercase;letter-spacing:var(--track);white-space:nowrap}
.nav a+a::before{content:"";position:absolute;left:0;top:36%;bottom:36%;border-left:1px solid var(--hair)}
.nav a:hover,.nav a.on{color:var(--acc)}
.nav a.on::after{content:"";position:absolute;left:.85rem;right:.85rem;bottom:-1px;border-bottom:3px solid var(--acc)}
#searchForm{position:relative;flex:0 1 17rem;min-width:0;display:flex;align-items:center}
#searchForm .si{position:absolute;left:0;display:flex;color:var(--mut);pointer-events:none}
#q{width:100%;border:0;border-bottom:1px solid var(--rule);border-radius:0;background:transparent;color:var(--ink);font:italic max(16px,.95rem)/1.4 var(--bf);padding:.3rem .2rem .3rem 1.6rem}
#q::placeholder{color:var(--mut);opacity:1}
#q:focus{border-bottom-color:var(--acc)}

/* ---- Section heads ---- */
.sec{display:flex;align-items:baseline;gap:.75rem;margin:2.4rem 0 1rem;padding:.5rem 0 .4rem;border-top:3px double var(--rule);border-bottom:1px solid var(--hair);font:700 1.02rem/1.2 var(--hf);text-transform:uppercase;letter-spacing:.08em}
:root:lang(ko) .sec,:root:lang(ja) .sec{letter-spacing:.02em}
.sec .n{margin-left:auto;font:600 .64rem/1 var(--sans);letter-spacing:var(--track);color:var(--mut);font-variant-numeric:lining-nums}
.sect-head{position:relative;text-align:center;padding:.4rem 0 1.1rem;margin:0 0 1.75rem;border-bottom:1px solid var(--rule)}
.sect-head::after{content:"";position:absolute;left:0;right:0;bottom:-5px;border-bottom:1px solid var(--rule)}
.sect-head h1{font:900 clamp(2.2rem,6.4vw,3.8rem)/1.04 var(--hf);letter-spacing:-.015em;margin:.3rem 0 .45rem;text-wrap:balance}
.sect-head h1.long{font-size:clamp(1.8rem,4.6vw,2.8rem)}
.sect-head .deck{max-width:34em;margin:0 auto;text-wrap:balance}
.sect-head .byline{margin-top:.6rem}

/* ---- Buttons, index-style choices ---- */
.actions{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0}
.btn{display:inline-flex;align-items:center;gap:.45em;border:1px solid var(--rule);border-radius:0;background:transparent;color:var(--ink);padding:.55rem 1rem;font:700 .7rem/1.2 var(--sans);text-transform:uppercase;letter-spacing:var(--track);cursor:pointer;text-decoration:none}
.btn:hover,.btn[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.btn.primary{background:var(--ink);color:var(--paper);padding:.7rem 1.4rem}
.btn.primary:hover{background:var(--acc);border-color:var(--acc);color:var(--accfg)}
.btn.danger{color:var(--danger);border-color:var(--danger)}.btn.danger:hover{background:var(--danger);color:var(--paper)}
/* Tabs, filters and pickers read like a newspaper's index line: words between hairlines, the chosen one underlined. */
.tabs,.chips{display:flex;flex-wrap:wrap;align-items:center;margin:.25rem 0 1rem}
.chips{gap:0 1.15rem}
.tabs button,.chips button{position:relative;appearance:none;border:0;border-radius:0;background:none;color:var(--ink);padding:.55rem .8rem;font:700 .68rem/1.2 var(--sans);text-transform:uppercase;letter-spacing:var(--track);cursor:pointer}
.chips button{padding:.55rem 0}
.tabs button+button::before{content:"";position:absolute;left:0;top:32%;bottom:32%;border-left:1px solid var(--hair)}
.tabs button:hover,.chips button:hover{color:var(--acc)}
.tabs button[aria-selected=true],.chips button[aria-pressed=true]{color:var(--acc);font-weight:800;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.45em}
.tabs button:first-child{padding-left:0}
.chiplabel{font:700 .62rem/1.2 var(--sans);text-transform:uppercase;letter-spacing:var(--track);color:var(--mut);padding:.55rem 0;margin-right:-.4rem;white-space:nowrap}
.chiplabel::after{content:":"}
.toggle{display:inline-flex;align-items:center;gap:.5em;appearance:none;border:0;background:none;color:var(--ink);padding:.55rem 0;font:700 .68rem/1.2 var(--sans);text-transform:uppercase;letter-spacing:var(--track);cursor:pointer}
.toggle::before{content:"";width:.95rem;height:.95rem;border:1.5px solid var(--ink);flex:none;display:grid;place-items:center;font:900 .7rem/1 var(--sans);color:var(--paper)}
.toggle[aria-pressed=true]::before{content:"✓";background:var(--ink)}
.toggle[aria-pressed=true]{color:var(--acc)}

/* ---- Photos & poster cards ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:1.75rem 1.25rem}
.card{display:flex;flex-direction:column;gap:.2rem;min-width:0;color:inherit;text-decoration:none}
.card .p{position:relative;aspect-ratio:2/3;overflow:hidden;background:var(--paper2);border:1px solid var(--hair);margin-bottom:.4rem}
.card img{display:block;width:100%;height:100%;object-fit:cover;transition:filter .3s}
.card .k{font:600 .6rem/1.3 var(--sans);text-transform:uppercase;letter-spacing:var(--track);color:var(--mut)}
.card .t{font:700 1rem/1.22 var(--hf);overflow-wrap:anywhere}
.card:hover .t,.card:focus-visible .t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
.card .why{font:italic .76rem/1.35 var(--bf);color:var(--mut)}
/* Photos are printed in grey; colour comes up on hover (touch screens get a lighter grey). */
@media (hover:hover){.card img{filter:grayscale(1) contrast(1.05)}.card:hover img,.card:focus-visible img{filter:none}}
@media (hover:none){.card img{filter:grayscale(.35)}}
/* No photo: the paste-up placeholder (a box with a cross). */
.noimg{width:100%;height:100%;background:linear-gradient(to top right,transparent calc(50% - .5px),var(--hair) 50%,transparent calc(50% + .5px)),linear-gradient(to bottom right,transparent calc(50% - .5px),var(--hair) 50%,transparent calc(50% + .5px)),var(--paper2)}
.card .avail{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:.3em;padding:.3rem .45rem;background:var(--ok);color:var(--paper);font:700 .58rem/1.2 var(--sans);text-transform:uppercase;letter-spacing:.1em}
.card .avail .ic{width:1.1em;height:1.1em}
.only-mine .card:not(.on-mine){display:none}
.strip{grid-template-columns:repeat(6,minmax(0,1fr))}
/* Loading: quiet grey type blocks while the page is set */
.sk-p{aspect-ratio:2/3;background:var(--paper2)}
.sk-l{height:.65rem;width:85%;margin-top:.55rem;background:var(--paper2)}.sk-l.s{width:55%}.sk-l.h{height:2.6rem;width:75%;margin-top:1rem}.sk-l.k{width:30%}
.sk{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.5}}

/* ---- Boxes, notes, errors ---- */
.box{margin:0 0 1.6rem}
.box-h{margin:0 0 .5rem;padding:.4rem 0 .35rem;border-top:2px solid var(--rule);border-bottom:1px solid var(--hair);font:700 .66rem/1.3 var(--sans);text-transform:uppercase;letter-spacing:var(--track)}
.toc{list-style:none;margin:0;padding:0;counter-reset:toc}
.toc li{counter-increment:toc;display:grid;grid-template-columns:1.5rem 1fr;gap:0 .25rem;padding:.45rem 0;border-bottom:1px dotted var(--hair)}
.toc li::before{content:counter(toc);grid-row:span 2;font:900 1.05rem/1.25 var(--hf);color:var(--acc);font-variant-numeric:lining-nums}
.toc a{font:700 .95rem/1.25 var(--hf);color:var(--ink);text-decoration:none}.toc a:hover{text-decoration:underline}
.toc .k,.inside span{font:600 .6rem/1.5 var(--sans);text-transform:uppercase;letter-spacing:var(--track);color:var(--mut)}
.inside ul{list-style:none;margin:0;padding:0}
.inside li{display:flex;flex-direction:column;padding:.4rem 0;border-bottom:1px dotted var(--hair)}
.inside a{font:700 .95rem/1.3 var(--hf);color:var(--ink);text-decoration:none}.inside a:hover{color:var(--acc)}
.inside a::after{content:" ›";color:var(--acc)}
.heads{list-style:none;margin:0;padding:0}
.heads li{padding:.45rem 0;border-bottom:1px dotted var(--hair)}
.heads a{display:block;font:700 .92rem/1.28 var(--hf);color:var(--ink);text-decoration:none}.heads a:hover{text-decoration:underline}
.notice{margin:0 0 1.6rem;padding:.4rem 0 .5rem;border-top:2px solid var(--rule);border-bottom:1px solid var(--hair);font-size:.84rem;line-height:1.55}
.notice summary{display:block;cursor:pointer;list-style:none;padding-right:1.5rem;position:relative}
.notice summary::-webkit-details-marker{display:none}
.notice summary::after{content:"+";position:absolute;right:0;top:.1rem;font:400 1.2rem/1 var(--sans);color:var(--mut)}
.notice[open] summary::after{content:"–"}
.notice summary strong{display:block;font:700 1rem/1.3 var(--hf);margin-top:.15rem}
.notice p{margin:.55rem 0 0}
.empty{max-width:34rem;margin:1.5rem auto;padding:1rem 0 1.1rem;text-align:center;border-top:3px double var(--rule);border-bottom:1px solid var(--rule)}
.empty .kicker{margin-bottom:.4rem}
.empty p:last-child{margin:0;font:italic 1.08rem/1.5 var(--hf)}
.err{display:flex;gap:.6rem;align-items:flex-start;margin:1rem 0;padding:.75rem 1rem;border:1px solid var(--danger);border-left-width:4px;background:var(--paper2);color:var(--ink);font:.88rem/1.5 var(--sans)}
.err .ic{color:var(--danger);margin-top:.1em}
#toast{position:fixed;left:50%;bottom:1.5rem;z-index:30;max-width:calc(100% - 2rem);transform:translate(-50%,1rem);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;background:var(--ink);color:var(--paper);border-left:4px solid var(--acc);padding:.6rem 1.1rem;font:700 .74rem/1.4 var(--sans);letter-spacing:.04em}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* ---- Front page: lead story + right rail ---- */
.front{display:grid;grid-template-columns:minmax(0,1fr) 18rem;gap:0 2.5rem;padding-bottom:.5rem}
.rail{border-left:1px solid var(--hair);margin-left:-1.25rem;padding-left:1.25rem;min-width:0}
.lead-story{min-width:0}
.lead-h{font:900 clamp(2rem,4.9vw,3.6rem)/1.04 var(--hf);letter-spacing:-.015em;margin:.35rem 0 .5rem;text-wrap:balance;overflow-wrap:anywhere}
.lead-h a{color:inherit;text-decoration:none}.lead-h a:hover{text-decoration:underline;text-decoration-thickness:2px}
.lead-story .byline{padding:.35rem 0;margin:.4rem 0 1.1rem;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.lead-body{display:flow-root}
.lp{float:left;width:40%;max-width:16rem;margin:.3rem 1.5rem .6rem 0}
.lp a{display:block}
.lp img,.lp .noimg{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border:1px solid var(--hair);filter:grayscale(.25)}
.lp:hover img{filter:none}
figcaption{margin-top:.3rem;font:italic .74rem/1.4 var(--bf);color:var(--mut)}
.credit{display:block;font:600 .56rem/1.4 var(--sans);font-style:normal;text-transform:uppercase;letter-spacing:var(--track);text-align:right;color:var(--mut)}
.lede{font-size:1.08rem;line-height:1.72;margin:0 0 .8rem}
:root:lang(ko) .lede,:root:lang(ja) .lede{line-height:1.9}
.lede.dc::first-letter{float:left;font:900 3.5em/.8 var(--hf);padding:.08em .1em 0 0;color:var(--acc)}
.lede.end::after{content:"\25A0";margin-left:.4em;font-size:.6em;vertical-align:.1em;color:var(--acc)}
.jump{font:italic .95rem/1.4 var(--hf);margin:.25rem 0 0}
/* Secondary stories under the lead, separated by column rules */
.seconds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:1.4rem;padding-top:.9rem;border-top:1px solid var(--rule)}
.second{min-width:0;padding:0 1.25rem}
.second:first-child{padding-left:0}.second:last-child{padding-right:0}
.second+.second{border-left:1px solid var(--hair)}
.second h3{font:700 1.12rem/1.22 var(--hf);margin:.3rem 0 .3rem;overflow-wrap:anywhere}
.second h3 a{color:inherit;text-decoration:none}.second h3 a:hover{text-decoration:underline}
.second p:not(.kicker){font-size:.88rem;line-height:1.5;margin:.35rem 0 0}
.mine-tag{display:inline-flex;align-items:center;gap:.2em;font:700 .6rem/1.3 var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--ok);white-space:nowrap}
.mine-tag .ic{width:1.1em;height:1.1em}
.jump a{font-weight:700}
.listings .sec{margin-top:1.75rem}

/* ---- Title page: an article ---- */
.article{max-width:100%}
.art-head{padding-bottom:1rem;margin-bottom:1.5rem;border-bottom:1px solid var(--rule)}
.art-title{font:900 clamp(2.2rem,5.6vw,4.2rem)/1.03 var(--hf);letter-spacing:-.018em;margin:.35rem 0 .55rem;text-wrap:balance;overflow-wrap:anywhere}
.art-title.long{font-size:clamp(1.9rem,4.4vw,3.2rem)}
.art-title.xlong{font-size:clamp(1.6rem,3.5vw,2.5rem)}
.ko{letter-spacing:-.01em;word-break:keep-all;line-height:1.16}
.ja{letter-spacing:0;line-break:strict;line-height:1.2}
.art-head .deck{font-size:clamp(1.1rem,2.2vw,1.4rem);max-width:40em}
.byrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1.5rem;padding-top:.55rem;border-top:1px solid var(--hair)}
.byrow .actions{margin:0}
.byrow .btn{padding:.45rem .8rem}
.glance{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .5rem;margin:.8rem 0 0;padding:.55rem .75rem;border-left:4px solid var(--acc);background:var(--paper2);font:.86rem/1.4 var(--sans)}
.glance .lbl{color:var(--ink);margin-right:.25rem}
.glance .none{color:var(--mut)}
/* Body: photo + fact sheet | story | where-to-watch box (one column on narrow screens, photo set into the text) */
.art-body{display:grid;grid-template-columns:15rem minmax(0,1fr) 20rem;grid-template-rows:auto 1fr auto;gap:0 2rem;align-items:start}
.art-body>.photo{grid-column:1;grid-row:1/span 2}
.art-body>.facts{grid-column:1;grid-row:3}
.art-body>.art-text{grid-column:2;grid-row:1}
.art-body>.where{grid-column:3;grid-row:1/span 3}
.art-body>.ww{grid-column:2;grid-row:2}
.photo{margin:0}
.photo img,.photo .noimg{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border:1px solid var(--hair);filter:grayscale(.2)}
.photo:hover img{filter:none}
.facts{border-top:3px double var(--rule);margin-top:1.1rem;padding-top:.35rem}
.facts h3{font:700 .64rem/1.4 var(--sans);text-transform:uppercase;letter-spacing:var(--track);margin:0 0 .2rem}
.facts dl{margin:0}
.facts dl>div{display:flex;justify-content:space-between;gap:.75rem;padding:.32rem 0;border-bottom:1px dotted var(--hair);font:.8rem/1.35 var(--sans)}
.facts dt{color:var(--mut)}
.facts dd{margin:0;text-align:right;font-weight:700;font-variant-numeric:lining-nums tabular-nums}
.facts small{font-weight:400;color:var(--mut)}
.art-text .lede{font-size:1.1rem}
.where{border:1px solid var(--rule);background:var(--paper2);padding:0 1rem .9rem}
.where-h{display:flex;align-items:center;gap:.5rem;margin:0 -1rem .35rem;padding:.55rem 1rem;background:var(--ink);color:var(--paper);font:700 .7rem/1.35 var(--sans);text-transform:uppercase;letter-spacing:var(--track)}
.where .chips{margin:0 0 .25rem}
.where .chips{gap:0 .9rem}.where .chips button{padding:.5rem 0}
.listing{margin:0 0 .5rem}
.listing>div{display:grid;grid-template-columns:5.6rem minmax(0,1fr);gap:.5rem;padding:.55rem 0;border-bottom:1px dotted var(--mut)}
.listing dt{font:700 .6rem/2 var(--sans);text-transform:uppercase;letter-spacing:var(--track);color:var(--mut)}
.listing dd{margin:0}
.pills{display:flex;flex-wrap:wrap;gap:.3rem;list-style:none;margin:0;padding:0}
.pill{display:inline-flex;align-items:center;gap:.25em;padding:.2rem .5rem;border:1px solid var(--hair);background:var(--paper);color:var(--ink);text-decoration:none;font:600 .8rem/1.35 var(--sans)}
a.pill:hover{border-color:var(--rule)}
.pill.mine{background:var(--okbg);border-color:var(--ok);color:var(--ok);font-weight:800}
.pill .ic{width:1em;height:1em}
.ww{margin:1.75rem 0 0}
.ww summary{display:flex;align-items:center;gap:.5rem;cursor:pointer;list-style:none;padding:.5rem 0 .4rem;border-top:3px double var(--rule);border-bottom:1px solid var(--hair);font:700 .68rem/1.3 var(--sans);text-transform:uppercase;letter-spacing:var(--track)}
.ww summary::-webkit-details-marker{display:none}
.ww summary::after{content:"+";margin-left:auto;font:400 1.15rem/1 var(--sans);color:var(--mut)}
.ww[open] summary::after{content:"–"}
.ww table{width:100%;border-collapse:collapse;margin-top:.25rem;font:.8rem/1.4 var(--sans);font-variant-numeric:lining-nums}
.ww tr{border-bottom:1px solid var(--hair)}
.ww th{width:32%;padding:.45rem .75rem .45rem 0;text-align:left;vertical-align:top;font-weight:700}
.ww td{padding:.35rem 0}
.ww tr.cur th{color:var(--acc)}.ww tr.cur th::before{content:"\25B8  "}
.ww .pill{padding:.05rem .4rem;font-size:.74rem;margin:0 .2rem .2rem 0}
.recs .sec{margin-top:2.75rem}

/* ---- Search ---- */
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:0 1.75rem;margin:0 0 .5rem;border-top:1px solid var(--rule);border-bottom:1px solid var(--hair)}
.filters .chips{margin:0}
.filters .note{margin:0;font-style:italic}

/* ---- The Wire ---- */
.edition-tag{display:inline-block;margin-top:.25rem;padding:.15rem .55rem;border:1px solid var(--acc);color:var(--acc);font:700 .62rem/1.4 var(--sans);text-transform:uppercase;letter-spacing:var(--track)}
.ed-note{max-width:40rem;margin:0 auto 1.25rem;padding:.6rem 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);font:italic .9rem/1.5 var(--bf);color:var(--mut);text-align:center}
.ed-note .kicker{font-style:normal;margin-bottom:.15rem}
:root:lang(ko) .ed-note,:root:lang(ja) .ed-note{font-style:normal}
.news-index{display:flex;justify-content:center}
.wire{column-count:3;column-gap:2.25rem;column-rule:1px solid var(--hair)}
.story{break-inside:avoid;padding:0 0 1rem;margin:0 0 1rem;border-bottom:1px solid var(--hair)}
.story h3{font:700 1.12rem/1.24 var(--hf);margin:.25rem 0 .4rem}
.story h3 a{color:inherit;text-decoration:none}.story h3 a:hover{text-decoration:underline}
.story p:not(.kicker){margin:0 0 .4rem;font-size:.92rem;line-height:1.55}
.story .more{font:700 .6rem/1.4 var(--sans);text-transform:uppercase;letter-spacing:var(--track)}
.story.lead{column-span:all;padding-bottom:1.25rem;margin-bottom:1.25rem;border-bottom:3px double var(--rule);text-align:center}
.story.lead h3{font:900 clamp(1.7rem,4vw,2.7rem)/1.08 var(--hf);max-width:22em;margin:.35rem auto .5rem;text-wrap:balance}
.story.lead p:not(.kicker){font-size:1.05rem;max-width:38em;margin:0 auto .5rem}
.wire-sec .sec{justify-content:center}
.wire-sec .sec .n{margin-left:0}

/* ---- Tonight ---- */
.taste{margin:0 0 1.75rem;padding:1rem 0 1.25rem;border-top:3px double var(--rule);border-bottom:1px solid var(--hair)}
.taste-h{font:900 clamp(1.5rem,3.4vw,2.2rem)/1.1 var(--hf);margin:.15rem 0 .4rem}
.taste .deck{max-width:42rem;margin:0 0 1rem}
.tsearch{display:flex;gap:.5rem;max-width:30rem;margin:0 0 1.1rem}
.tsearch input{flex:1;min-width:0}
.tgrid{grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));gap:1.25rem 1rem}
.tile{background:none;border:0;padding:0;font:inherit;text-align:left;cursor:pointer;color:inherit}
.tile:not([aria-pressed=true]) .avail{display:none}
.tile[aria-pressed=true] .p{outline:3px solid var(--ok);outline-offset:-3px}
.tile[aria-pressed=true] img{filter:none}
.taste-act{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin:1.25rem 0 0}
.taste-act #tCount{flex:1 1 8rem;font:700 .72rem/1.3 var(--sans);text-transform:uppercase;letter-spacing:var(--track);color:var(--mut)}
.picks{margin:0 0 2rem}
.second .why{font:italic .8rem/1.35 var(--bf);color:var(--mut);margin:.3rem 0 0}
.picker{max-width:46rem;margin:0 auto 1.5rem;border-top:2px solid var(--rule);border-bottom:2px solid var(--rule)}
.picker .row{display:grid;grid-template-columns:7rem minmax(0,1fr);align-items:baseline;border-bottom:1px dotted var(--hair)}
.picker .row>.lbl{padding:.65rem 0}
.picker .chips{margin:0}
.picker .fine>summary{display:flex;align-items:center;gap:.5rem;cursor:pointer;list-style:none;padding:.6rem 0;border-bottom:1px dotted var(--hair);font:700 .68rem/1.3 var(--sans);text-transform:uppercase;letter-spacing:var(--track)}
.picker .fine>summary::-webkit-details-marker{display:none}
.picker .fine>summary::after{content:"+";margin-left:auto;font:400 1.15rem/1 var(--sans);color:var(--mut)}
.picker .fine[open]>summary::after{content:"\2212"}
.picker .fine .n{color:var(--acc);font-variant-numeric:tabular-nums}
.picker .fine .n:empty{display:none}
.picker .go{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem 0}
.picker .go .actions{margin:0}
#tnOut .lead-story{border-bottom:3px double var(--rule);padding-bottom:1rem}

/* ---- Clippings ---- */
.clips .card{position:relative;padding:.55rem;border:1px dashed var(--mut)}
.clips .card::before{content:"\2702";position:absolute;top:-.72em;left:.6em;padding:0 .2em;background:var(--paper);color:var(--mut);font:1rem/1 var(--sans)}
.advisor{margin:0 0 2rem;padding:.4rem 0 1rem;border-top:3px double var(--rule);border-bottom:1px solid var(--rule)}
.advisor h2{font:900 1.6rem/1.15 var(--hf);margin:.3rem 0 .6rem}
.advisor .big{font:700 1.08rem/1.45 var(--hf)}
.advisor h3{font:700 .64rem/1.4 var(--sans);text-transform:uppercase;letter-spacing:var(--track);margin:1.25rem 0 .2rem;padding-bottom:.3rem;border-bottom:1px solid var(--rule)}
.rank{list-style:none;margin:0;padding:0;counter-reset:rk}
.rank li{counter-increment:rk;display:grid;grid-template-columns:1.4rem minmax(6.5rem,11rem) minmax(0,1fr) 3.6rem;gap:.15rem .75rem;align-items:center;padding:.4rem 0;border-bottom:1px dotted var(--hair)}
.rank li::before{content:counter(rk);font:900 1rem/1 var(--hf);color:var(--mut);font-variant-numeric:lining-nums}
.rank .rname{font:600 .86rem/1.3 var(--sans)}
.rank li.mine .rname{font-weight:800;color:var(--ok)}
.rank progress{-webkit-appearance:none;appearance:none;width:100%;height:.7rem;border:0;border-left:1px solid var(--rule);background:transparent}
.rank progress::-webkit-progress-bar{background:transparent}
.rank progress::-webkit-progress-value{background:var(--ink)}
.rank progress::-moz-progress-bar{background:var(--ink)}
.rank li.mine progress::-webkit-progress-value{background:var(--ok)}
.rank li.mine progress::-moz-progress-bar{background:var(--ok)}
.rank .rcount{text-align:right;font:700 .78rem/1 var(--sans);font-variant-numeric:lining-nums tabular-nums}
.rank details{grid-column:2/-1;font:.78rem/1.45 var(--sans)}
.rank summary{cursor:pointer;color:var(--mut)}
.rtitles{padding:.3rem 0 0}
.print-only{display:none;font:700 .9rem var(--sans);text-transform:uppercase;letter-spacing:.1em;margin:.4rem 0}

/* ---- Settings / welcome: a printed subscription form ---- */
.set,.welcome{max-width:52rem;margin:0 auto}
.form{display:grid;grid-template-columns:1fr 1fr;gap:0 2.5rem}
.fs{margin:0;padding:.55rem 0 1.4rem;border-top:2px solid var(--rule);min-width:0}
.fs.wide{grid-column:1/-1}
.fs h2{display:flex;align-items:center;gap:.5rem;margin:0 0 .5rem;font:700 1.15rem/1.25 var(--hf)}
.fs h2 .ic{color:var(--mut)}
.fs.key{border:1px solid var(--rule);border-top:4px double var(--rule);background:var(--paper2);padding:.75rem 1.1rem 1rem;margin-bottom:1.6rem}
.fld{display:block;margin:.35rem 0 .7rem}
.fld>.lbl{display:block;margin-bottom:.1rem}
input[type=password],input[type=text],select{width:100%;padding:.45rem .1rem;border:0;border-bottom:1px solid var(--rule);border-radius:0;background:transparent;color:var(--ink);font:max(16px,1rem)/1.4 var(--bf)}
input[type=password]:not(:placeholder-shown){letter-spacing:.12em}
select{cursor:pointer}
select option{background:var(--paper);color:var(--ink)}
input:focus-visible,select:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.keyrow{display:flex;gap:.6rem;align-items:flex-end}.keyrow input{flex:1;min-width:0}
.chk{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:0 1.25rem}
.chip,.seg label{position:relative;display:inline-flex;align-items:center;cursor:pointer}
.chip input,.seg input{position:absolute;opacity:0;pointer-events:none}
.chip span,.seg span{display:inline-flex;align-items:center;gap:.55em;padding:.35rem 0;font:600 .88rem/1.35 var(--sans)}
.chip span::before{content:"";flex:none;display:grid;place-items:center;width:1rem;height:1rem;border:1.5px solid var(--ink);font:900 .72rem/1 var(--sans);color:var(--paper)}
.chip input:checked+span::before{content:"✓";background:var(--ink)}
.seg{display:flex;flex-wrap:wrap;gap:0 1.4rem;margin:.2rem 0 .4rem}
.seg span::before{content:"";flex:none;width:.95rem;height:.95rem;border:1.5px solid var(--ink);border-radius:50%}
.seg input:checked+span::before{background:var(--ink);box-shadow:inset 0 0 0 2.5px var(--paper)}
.chip input:checked+span,.seg input:checked+span{font-weight:800}
.chip input:focus-visible+span,.seg input:focus-visible+span{outline:2px solid var(--acc);outline-offset:3px}
.preview{font:italic 1.2rem/1.4 var(--hf);margin:.6rem 0 0;padding-top:.5rem;border-top:1px dotted var(--hair)}
.saverow{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;padding:1rem 0 1.5rem;border-top:1px solid var(--rule)}
.saverow .note{margin:0}
.credits{margin:0;padding:0;list-style:none;font:.8rem/1.55 var(--sans);color:var(--mut)}
.credits li{padding:.4rem 0;border-bottom:1px dotted var(--hair)}
.steps{list-style:none;margin:0 0 2rem;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.steps li{display:flex;gap:.75rem;align-items:baseline;padding:1rem 1.2rem}
.steps li:first-child{padding-left:0}
.steps li+li{border-left:1px solid var(--hair)}
.steps b{font:900 2.5rem/1 var(--hf);color:var(--acc);font-variant-numeric:lining-nums}
.welcome .start{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:1.25rem 0;border-top:1px solid var(--rule)}

/* ---- Colophon (footer) ---- */
.attrib{width:100%;max-width:var(--page);margin:2.5rem auto 0;padding:0 var(--gut) 1.75rem;font:.72rem/1.6 var(--sans);color:var(--mut)}
.colo-plate{margin:0;padding:.55rem 0 .4rem;border-top:3px double var(--rule);text-align:center;font:900 1.3rem/1 var(--hf);font-variant:small-caps;color:var(--ink)}
.colo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule);padding-top:.6rem}
.colo p{margin:0;padding:0 1.25rem}
.colo p:first-child{padding-left:0}.colo p:last-child{padding-right:0}
.colo p+p{border-left:1px solid var(--hair)}

/* ---- Responsive ---- */
@media (max-width:1000px){
  .front{grid-template-columns:1fr}
  .rail{border-left:0;margin:1.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:0 2rem}
  /* Article on narrow screens: the photo is set into the story, the where-to-watch box follows. */
  .art-body{display:block}
  .art-body>.photo{float:right;width:36%;max-width:15rem;margin:.3rem 0 .75rem 1.25rem}
  .art-body>.where{clear:both;margin-top:1rem}
  .art-body>.facts{clear:both;margin-top:1.5rem}
  .facts dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:0 1.5rem}
  .strip{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(8.5rem,30%);overflow-x:auto;padding-bottom:.5rem;scroll-snap-type:x proximity}
  .strip .card{scroll-snap-align:start}
  .wire{column-count:2}
}
@media (max-width:900px){
  .bar-in{position:relative;flex-wrap:wrap;gap:0;padding:0}
  .stuck .mini{display:none}
  #searchForm{order:-1;flex:1 1 100%;padding:.4rem var(--gut) .15rem}
  #searchForm .si{left:var(--gut)}
  .nav{flex:1 1 100%;margin:0;padding:0 calc(var(--gut) - .85rem);overflow-x:auto;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a{padding:.75rem .85rem}
  .bar-in::after{content:"";position:absolute;right:0;bottom:0;width:2.25rem;height:2.4rem;background:linear-gradient(to right,transparent,var(--paper));pointer-events:none}
}
@media (max-width:720px){
  .plate{grid-template-columns:1fr;gap:.2rem}
  .ear{grid-row:2;justify-self:center;border:0;padding:0;max-width:none;color:var(--mut)}
  .ear-r,#volno{display:none}
  .folio{grid-template-columns:1fr auto;margin-top:.5rem;letter-spacing:.05em;font-size:.6rem}
  .folio #dateline{text-align:left}
  .grid{grid-template-columns:repeat(auto-fill,minmax(5.9rem,1fr));gap:1.3rem .75rem}
  .card .t{font-size:.9rem}
  .stars{font-size:.7rem}
  .seconds,.inside{display:none}
  .lp{width:42%;margin-right:1rem}
  .byrow{flex-direction:column;align-items:flex-start}
  .art-body>.photo{width:40%}
  .wire{column-count:1}
  .form{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .steps li{padding:.75rem 0}
  .steps li+li{border-left:0;border-top:1px solid var(--hair)}
  .picker .row{grid-template-columns:1fr}
  .picker .row>.lbl{padding:.6rem 0 0}
  .rank li{grid-template-columns:1.3rem minmax(0,1fr) 3.2rem}
  .rank progress{grid-column:2/-1;grid-row:2}
  .rank details{grid-column:2/-1}
  .colo{grid-template-columns:1fr}
  .colo p{padding:.4rem 0}
  .colo p+p{border-left:0;border-top:1px solid var(--hair)}
}
@media (min-width:1000px){:root:lang(en) .art-text .lede{text-align:justify;hyphens:auto}}

/* ---- Print: the paper on paper ---- */
@media print{
  /* Print in black ink on white paper whatever the screen theme */
  :root,:root[data-theme],:root:not([data-theme]){--paper:#fff;--paper2:#fff;--ink:#000;--mut:#444;--rule:#000;--hair:#bbb;--acc:#9b2d1f;--ok:#1f6b45;--okbg:#fff}
  .bar,#toast,.tabs,.actions,.notice,.skip,.filters,.chips,.rail,.jump,.saverow,.colo p:nth-child(3){display:none!important}
  main>*{animation:none}
  .card img,.photo img,.lp img{filter:grayscale(1)!important}
  .card,.story,.rank li{break-inside:avoid}
  .print-only{display:block!important}
  .where{background:none}
  a{color:inherit;text-decoration:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.news-index{justify-content:center}

/* Small phones: narrower photo, calmer drop cap so the story column keeps a readable measure */
@media (max-width:480px){
  .lp{width:36%;margin-right:.85rem}
  .lede{font-size:1rem;line-height:1.62}
  :root:lang(ko) .lede,:root:lang(ja) .lede{line-height:1.8}
  .lede.dc::first-letter{font-size:2.7em}
  .art-body>.photo{width:36%}
}

/* Section index must never hide items behind a scroll on narrow phones: let it wrap instead of clipping */
@media (max-width:480px){
  .nav{flex-wrap:wrap;overflow:visible;padding:0 calc(var(--gut) - .42rem)}
  .nav a{padding:.65rem .42rem;font-size:.63rem;letter-spacing:.05em}
  .nav a.on::after{left:.42rem;right:.42rem}
  .nav a+a::before{display:none}   /* separators look stray when the index wraps to a second line */
}

/* Very small phones: a floated photo would squeeze the story into a few characters per line — set it above the text instead */
@media (max-width:380px){
  .art-body>.photo{float:none;width:58%;max-width:11rem;margin:.2rem auto 1rem}
  .art-body>.photo figcaption{text-align:center}
  .lp{float:none;width:58%;max-width:11rem;margin:0 auto .9rem}
}

/* ---- Recent-search index under the search box ---- */
.sug{position:absolute;z-index:40;top:100%;left:0;right:0;min-width:15rem;margin-top:.15rem;background:var(--paper);border:1px solid var(--rule);border-top:3px double var(--rule);box-shadow:0 .5rem 1rem rgba(0,0,0,.12)}
.sug[hidden]{display:none}
.sug-head{display:flex;justify-content:space-between;align-items:baseline;padding:.45rem .7rem .3rem;font:700 .6rem/1 var(--sans);letter-spacing:var(--track);text-transform:uppercase;color:var(--acc);border-bottom:1px solid var(--hair)}
.sug-clear{border:0;background:none;padding:.1rem 0;font:600 .62rem/1 var(--sans);letter-spacing:.04em;color:var(--mut);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.sug-clear:hover{color:var(--acc)}
.sug ul{list-style:none;margin:0;padding:0;max-height:min(60vh,20rem);overflow:auto}
.sug li{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;border-bottom:1px dotted var(--hair);cursor:pointer}
.sug li:last-child{border-bottom:0}
.sug li:hover,.sug li[aria-selected=true]{background:var(--paper2)}
.sug li[aria-selected=true]{box-shadow:inset 3px 0 0 var(--acc)}
.sug-n{flex:none;width:1.1rem;font:900 .95rem/1 var(--hf);color:var(--mut);text-align:right}
.sug-t{flex:1;min-width:0;font:italic 1rem/1.3 var(--bf);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root:lang(ko) .sug-t,:root:lang(ja) .sug-t{font-style:normal}
.sug mark{background:none;color:var(--acc);font-weight:700;font-style:normal}
.sug-x{flex:none;display:grid;place-items:center;width:1.5rem;height:1.5rem;border:0;background:none;color:var(--mut);cursor:pointer;padding:0}
.sug-x:hover{color:var(--acc)}
.sug-x .ic{width:.9rem;height:.9rem}
@media (max-width:720px){.sug{left:var(--gut);right:var(--gut)}}
@media print{.sug{display:none}}