/* Shameem Hossen Library — design tokens (Home design system) and shared styles */
:root{
  /* colors — extracted palette only */
  --color-bg:#FFFFFF; --color-text:#2F2F2F; --color-text-2:#444444; --color-accent:#69BEA1;
  /* derived tints are the palette colors at reduced opacity, never new hues */
  --line:rgba(47,47,47,.18); --line-2:rgba(47,47,47,.10); --surface:rgba(47,47,47,.04); --accent-tint:rgba(105,190,161,.18); --accent-tint-2:rgba(105,190,161,.32); --scrim:rgba(47,47,47,.6);
  /* typography */
  --font:"Cabin","Helvetica Neue","Font Awesome 5 Brands",Arial,"Noto Serif Bengali",sans-serif;
  --mono:"Cabin","Helvetica Neue",Arial,sans-serif;
  --text-sm:14px; --text-base:16px; --text-lg:20px; --text-xl:28px; --text-2xl:34px; --text-3xl:40px;
  --lh-sm:19.6px; --lh-base:22.4px; --lh-lg:28.5714px; --lh-xl:37.312px; --lh-2xl:44px; --lh-3xl:44px; --lh-tight:20px; --lh-nav:40px; --lh-caption:30.8px;
  --w-regular:400; --w-semibold:600;
  /* spacing */
  --s1:5px; --s2:8px; --s3:10px; --s4:13px; --s5:15px; --s6:16px; --s7:17px; --s8:18px; --s9:20px; --s10:28px; --s11:30px; --s12:32px; --s13:44px; --s14:64px; --s15:219px; --s16:1048px;
  /* shape, elevation, motion */
  --radius:0; --shadow-sm:rgba(0,0,0,0) 0px 0px 1px 0px;
  --t:border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out; --t-fade:opacity .2s ease-in; --t-slide:margin-top .25s linear;
  /* aliases used by scripts and older rules */
  --color-accent-dark:var(--color-text); --color-accent-tint:var(--accent-tint); --color-line:var(--line); --color-line-2:var(--line-2); --color-surface:var(--surface);
  --color-err:var(--color-text); --color-warn:var(--color-text-2); --color-ok:var(--color-text);
  --paper:var(--color-bg); --card:var(--color-bg); --ink:var(--color-text); --muted:var(--color-text-2); --rule:var(--line); --accent:var(--color-text); --accent-soft:var(--accent-tint); --stamp:var(--color-text); --stamp-soft:var(--accent-tint); --ok:var(--color-text); --warn:var(--color-text-2); --navy:var(--color-text); --gold:var(--color-accent); --r:0;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--color-bg);color:var(--color-text)}
body{font-family:var(--font);font-size:var(--text-base);line-height:var(--lh-base);font-weight:var(--w-regular);padding:0 0 var(--s14)}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--color-text);text-decoration:underline;text-decoration-color:var(--color-accent);text-underline-offset:3px;transition:var(--t)}
a:hover{text-decoration-color:var(--color-text)}
:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}
.wrap,.inner{max-width:var(--s16);margin:0 auto;padding:0 var(--s6)}
.bn{font-family:"Noto Serif Bengali",var(--font)}
.mono{font-family:var(--mono)}

/* ---------- masthead (white utility bar, charcoal band with lockup + nav) ---------- */
.mast{background:var(--color-bg)}
.util-bar{border-bottom:1px solid var(--color-line-2)}
.util{display:flex;justify-content:flex-end;gap:var(--s10);font-size:var(--text-lg);line-height:var(--lh-lg);padding:var(--s4) var(--s6)}
.util a{text-decoration:none;color:var(--color-text)}
.util a:hover{text-decoration:underline;text-decoration-color:var(--color-accent)}
.band{background:var(--color-text);color:var(--color-bg)}
.bandin{display:flex;align-items:center;gap:var(--s12);flex-wrap:wrap;padding-top:var(--s9);padding-bottom:var(--s9)}
.lockup{display:flex;align-items:center;gap:var(--s5);text-decoration:none;color:var(--color-bg);flex:none}
.lockup .emblem{width:92px;height:78px;flex:none}
.wordmark{display:grid;font-family:var(--font)}
.wm1{font-size:var(--text-xl);line-height:var(--lh-xl);font-weight:var(--w-semibold);letter-spacing:.12em;text-transform:uppercase}
.wm2{font-size:var(--text-lg);line-height:var(--lh-tight);font-weight:var(--w-regular);letter-spacing:.32em;text-transform:uppercase}
.wm3{font-size:var(--text-sm);line-height:var(--lh-tight);letter-spacing:.14em;text-transform:uppercase;margin-top:var(--s1);color:var(--color-bg)}
nav.main{display:flex;gap:var(--s1);flex-wrap:wrap;align-items:center;flex:1}
nav.main a,nav.main button{color:var(--color-bg);background:none;border:0;padding:0 var(--s4);font-size:var(--text-lg);line-height:var(--lh-nav);font-weight:var(--w-regular);text-decoration:none;cursor:pointer;border-bottom:3px solid transparent;transition:var(--t)}
nav.main a:hover,nav.main button:hover{border-bottom-color:var(--color-accent)}
nav.main [aria-current="page"]{border-bottom-color:var(--color-bg)}
nav.main .spacer{flex:1}
nav.main .iconbtn{padding:var(--s2);border-bottom:0}
nav.main .iconbtn svg{width:24px;height:24px;display:block}
nav.main .iconbtn:hover{color:var(--color-accent)}
@media (max-width:820px){.bandin{gap:var(--s4)}.lockup .emblem{width:64px;height:54px}.wm1{font-size:var(--text-lg)}.wm2{font-size:var(--text-sm)}.util{font-size:var(--text-sm);gap:var(--s6)}nav.main a,nav.main button{font-size:var(--text-base);padding:var(--s2) var(--s3)}}

/* ---------- intro, banner, search band ---------- */
.intro{padding:var(--s12) 0 var(--s9)}
.intro .lead{font-size:var(--text-lg);line-height:var(--lh-lg);margin:0 0 var(--s6)}
.banner .inner{position:relative;padding-bottom:var(--s13)}
.bannerimg{height:420px;overflow:hidden;background:var(--color-text);transition:var(--t-fade)}
.bannerimg svg{width:100%;height:100%;display:block}
.caption{background:var(--color-bg);max-width:720px;margin:-96px auto 0;position:relative;padding:var(--s10) var(--s12);box-shadow:var(--shadow-sm)}
.caption h2{font-size:var(--text-2xl);line-height:var(--lh-2xl);font-weight:var(--w-regular);margin:0 0 var(--s3)}
.caption p{font-size:var(--text-lg);line-height:var(--lh-caption);margin:0 0 var(--s6);color:var(--color-text-2)}
@media (max-width:820px){.bannerimg{height:240px}.caption{margin-top:-48px;padding:var(--s6)}.caption h2{font-size:var(--text-xl)}}
.searchband{background:var(--color-surface);padding:var(--s10) 0}
.searchband .sh{font-size:var(--text-xl);line-height:var(--lh-xl);font-weight:var(--w-regular);margin:0 0 var(--s4)}
.searchrow{display:flex;gap:var(--s2);flex-wrap:wrap}
.search{flex:1 1 320px;min-width:0;position:relative}
.search input{width:100%;padding:var(--s4) var(--s6) var(--s4) var(--s13);border:2px solid var(--color-text);background:var(--color-bg);color:var(--color-text);font-size:var(--text-base);transition:var(--t)}
.search input:hover{border-color:var(--color-text-2)}
.search svg{position:absolute;left:var(--s5);top:50%;transform:translateY(-50%);width:18px;height:18px;stroke:var(--color-text-2)}
select.ctl{padding:var(--s3) var(--s4);border:2px solid var(--color-text);background:var(--color-bg);color:var(--color-text);cursor:pointer;transition:var(--t)}
select.ctl:hover{border-color:var(--color-text-2)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s6);border:2px solid var(--color-text);background:var(--color-bg);color:var(--color-text);cursor:pointer;white-space:nowrap;text-decoration:none;font-weight:var(--w-semibold);line-height:var(--lh-tight);transition:var(--t)}
.btn:hover{background:var(--color-accent-tint)}
.btn.primary,.btn.teal{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-text);padding:var(--s4) var(--s10);font-size:var(--text-lg);line-height:var(--lh-lg);font-weight:var(--w-regular)}
.btn.primary:hover,.btn.teal:hover{border-color:var(--color-text);box-shadow:inset 0 0 0 1px var(--color-text)}
.btn:active{opacity:.85;transition:var(--t-fade)}
.btn.primary.small{padding:var(--s1) var(--s3);font-size:var(--text-sm)}
.btn.danger{color:var(--color-text);border-color:var(--color-text-2);border-style:dashed}
.btn.danger:hover{background:var(--accent-tint)}
.btn.small{padding:var(--s1) var(--s3);font-size:var(--text-sm);line-height:var(--lh-sm)}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- catalogue layout ---------- */
.layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:var(--s12);margin-top:var(--s11)}
@media (max-width:820px){.layout{grid-template-columns:minmax(0,1fr)}}
aside.index{display:grid;gap:var(--s10);align-content:start}
.panel h2{font-size:var(--text-sm);letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-2);margin:0 0 var(--s2);font-weight:var(--w-semibold);border-bottom:2px solid var(--color-accent);padding-bottom:var(--s1)}
.sections{display:grid;gap:2px}
.sections button{display:grid;grid-template-columns:1fr auto;gap:var(--s2);align-items:baseline;text-align:left;padding:var(--s2) var(--s3);border:0;border-left:4px solid transparent;background:transparent;cursor:pointer;font-size:var(--text-sm);transition:var(--t)}
.sections button:hover{background:var(--color-accent-tint);border-left-color:var(--color-accent)}
.sections button[aria-pressed="true"]{background:var(--color-accent-tint);border-left-color:var(--color-accent-dark);font-weight:var(--w-semibold)}
.sections .c{font-family:var(--mono);font-size:var(--text-sm);color:var(--color-text-2)}
@media (max-width:820px){.sections{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;padding-bottom:var(--s2)}.sections button{border:1px solid var(--color-line)}}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.stat{background:var(--color-surface);padding:var(--s3)}
.stat b{display:block;font-size:var(--text-xl);font-weight:var(--w-semibold);line-height:var(--lh-xl)}
.stat span{font-size:var(--text-sm);color:var(--color-text-2)}
.tools{display:flex;flex-wrap:wrap;gap:var(--s2)}
.resultsbar{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s3);color:var(--color-text-2);font-size:var(--text-sm)}
.notice{background:var(--surface);color:var(--color-text);border-left:4px solid var(--color-text);padding:var(--s3) var(--s4);font-size:var(--text-sm);line-height:var(--lh-sm);margin-bottom:var(--s4)}
.notice.info{background:var(--accent-tint);border-left-color:var(--color-accent)}
.list{display:grid;gap:var(--s2)}
.row{display:grid;grid-template-columns:100px minmax(0,1fr) auto;gap:var(--s5);align-items:center;background:var(--color-bg);border:1px solid var(--color-line);border-left:4px solid var(--color-line);padding:var(--s3) var(--s4);cursor:pointer;text-align:left;width:100%;transition:var(--t)}
.row:hover{border-left-color:var(--color-accent);background:var(--color-accent-tint)}
.mark{font-family:var(--mono);font-size:var(--text-sm);line-height:var(--lh-sm);text-align:left;background:var(--color-surface);padding:var(--s2) var(--s1);white-space:pre-line;overflow-wrap:anywhere;color:var(--color-text-2)}
.row .t{font-size:var(--text-lg);line-height:var(--lh-lg);font-weight:var(--w-semibold);overflow-wrap:anywhere}
.row .a{color:var(--color-text-2);font-size:var(--text-sm);overflow-wrap:anywhere}
.row .meta{font-size:var(--text-sm);color:var(--color-text-2);display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:2px}
.pill{font-size:var(--text-sm);line-height:var(--lh-tight);letter-spacing:.04em;text-transform:uppercase;padding:0 var(--s2);border:1px solid var(--color-text);white-space:nowrap;font-weight:var(--w-semibold);color:var(--color-text)}
.pill.available{border-color:var(--color-accent);background:var(--accent-tint)} .pill.loan{background:var(--color-accent)} .pill.missing,.pill.withdrawn{border-style:dashed;color:var(--color-text-2)} .pill.ex{color:var(--color-text-2);border-color:var(--color-text-2)}
@media (max-width:520px){.row{grid-template-columns:80px minmax(0,1fr)}.row .pill{grid-column:2;justify-self:start}}
.empty{padding:var(--s13) var(--s9);text-align:left;border:1px dashed var(--color-line);color:var(--color-text-2)}
.empty h3{font-size:var(--text-lg);line-height:var(--lh-lg);font-weight:var(--w-semibold);color:var(--color-text);margin:0 0 var(--s1)}

/* ---------- overlay / sheet ---------- */
.overlay{position:fixed;inset:0;z-index:20;background:var(--scrim);display:flex;justify-content:center;align-items:flex-start;overflow-y:auto;padding:var(--s10) var(--s6) var(--s13)}
.sheet{background:var(--color-bg);width:min(840px,100%);padding:var(--s9);display:grid;gap:var(--s6);border-top:6px solid var(--color-accent)}
@media (max-width:560px){.overlay{padding:0}.sheet{min-height:100%;padding:var(--s6)}}
.sheethead{display:flex;justify-content:space-between;align-items:center;gap:var(--s3)}
.sheethead h2{font-size:var(--text-xl);line-height:var(--lh-xl);font-weight:var(--w-semibold);margin:0}

/* ---------- catalogue record ---------- */
.record{border:1px solid var(--color-line);padding:var(--s1) var(--s6)}
.record .rh{display:flex;justify-content:space-between;gap:var(--s3);align-items:baseline;border-bottom:2px solid var(--color-accent);padding:var(--s3) 0;margin-bottom:var(--s1);font-size:var(--text-sm);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-2);font-weight:var(--w-semibold)}
.kv{display:grid;grid-template-columns:170px minmax(0,1fr);gap:var(--s2);padding:var(--s2) 0;border-bottom:1px solid var(--color-line-2);font-size:var(--text-sm)}
.kv:last-child{border-bottom:0}
.kv dt{color:var(--color-text-2);font-size:var(--text-sm);letter-spacing:.05em;text-transform:uppercase;padding-top:2px;font-weight:var(--w-semibold)}
.kv dd{margin:0;overflow-wrap:anywhere}
@media (max-width:560px){.kv{grid-template-columns:minmax(0,1fr);gap:2px}}
.cites{display:grid;gap:var(--s2)}
.cite{display:grid;grid-template-columns:70px minmax(0,1fr) auto;gap:var(--s3);align-items:start;font-size:var(--text-sm);border:1px solid var(--color-line);padding:var(--s2) var(--s3)}
.cite b{font-size:var(--text-sm);letter-spacing:.08em;color:var(--color-text-2);padding-top:3px}
.cite span{overflow-wrap:anywhere}
.actions{display:flex;gap:var(--s2);flex-wrap:wrap;justify-content:flex-end}

/* ---------- form ---------- */
form{display:grid;gap:var(--s8)}
fieldset{border:1px solid var(--color-line);padding:var(--s4) var(--s5) var(--s5);margin:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s3) var(--s4)}
legend{font-size:var(--text-sm);line-height:var(--lh-sm);letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-2);font-weight:var(--w-semibold);padding:0 var(--s1)}
.f{display:grid;gap:var(--s1);grid-column:span 3;min-width:0}
.f.s6{grid-column:span 6}.f.s2{grid-column:span 2}.f.s4{grid-column:span 4}
@media (max-width:560px){.f,.f.s2,.f.s4{grid-column:span 6}}
.f label{font-size:var(--text-sm);color:var(--color-text-2)}
.f input,.f select,.f textarea{width:100%;padding:var(--s2) var(--s3);border:2px solid var(--color-line);background:var(--color-bg);transition:var(--t)}
.f input:hover,.f select:hover,.f textarea:hover{border-color:var(--color-text-2)}
.f input:focus-visible,.f select:focus-visible,.f textarea:focus-visible{border-color:var(--color-text);outline-offset:0}
.f textarea{min-height:64px;resize:vertical}
.f .hint{font-size:var(--text-sm);color:var(--color-text-2)}
.f .hint.err{color:var(--color-text);font-weight:var(--w-semibold)} .f .hint.good{color:var(--color-text)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:var(--s9);background:var(--color-text);color:var(--color-bg);padding:var(--s3) var(--s6);font-size:var(--text-sm);line-height:var(--lh-sm);z-index:40;max-width:calc(100% - var(--s12));transition:var(--t-fade)}

/* ---------- admin back end ---------- */
.admin{display:grid;grid-template-columns:230px minmax(0,1fr);gap:var(--s12);margin-top:var(--s11);align-items:start}
@media (max-width:820px){.admin{grid-template-columns:minmax(0,1fr)}}
.adminnav{display:grid;gap:2px;position:sticky;top:var(--s4)}
.adminnav a{display:flex;justify-content:space-between;gap:var(--s2);padding:var(--s3) var(--s4);text-decoration:none;color:var(--color-text);font-size:var(--text-sm);font-weight:var(--w-semibold);border-left:4px solid transparent;transition:var(--t)}
.adminnav a:hover{background:var(--color-accent-tint);border-left-color:var(--color-accent)}
.adminnav a[aria-current="page"]{background:var(--color-accent-tint);border-left-color:var(--color-accent-dark)}
.adminnav .c{font-family:var(--mono);font-size:var(--text-sm);color:var(--color-text-2);font-weight:var(--w-regular)}
@media (max-width:820px){.adminnav{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;position:static;padding-bottom:var(--s2)}.adminnav a{border:1px solid var(--color-line)}}
.view{display:grid;gap:var(--s6)}
.view h2.vt{font-size:var(--text-xl);line-height:var(--lh-xl);font-weight:var(--w-semibold);margin:0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s3)}
.toolbar{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.toolbar .search{flex:1 1 240px}
.toolbar .search input{padding:var(--s3) var(--s4) var(--s3) var(--s13);border-color:var(--color-line)}
.toolbar .search input:hover{border-color:var(--color-text-2)}
table.tbl{width:100%;border-collapse:collapse;border:1px solid var(--color-line);font-size:var(--text-sm)}
.tbl th,.tbl td{text-align:left;padding:var(--s2) var(--s3);border-bottom:1px solid var(--color-line-2);vertical-align:top}
.tbl th{font-size:var(--text-sm);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-2);font-weight:var(--w-semibold);background:var(--color-surface);border-bottom:2px solid var(--color-accent)}
.tbl tr:last-child td{border-bottom:0}
.tbl tr.rowlink{cursor:pointer}.tbl tr.rowlink:hover td{background:var(--color-accent-tint)}
.tbl .t{font-weight:var(--w-semibold)}
.tbl .mono{font-size:var(--text-sm)}
.tblwrap{overflow-x:auto}
.card{background:var(--color-bg);border:1px solid var(--color-line);border-top:4px solid var(--color-accent);padding:var(--s5) var(--s6)}
.card h3{margin:0 0 var(--s2);font-size:var(--text-sm);letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-2);font-weight:var(--w-semibold)}
.card p{margin:0 0 var(--s2)}
.card .muted,.muted{color:var(--color-text-2)}
.list-plain{margin:0;padding:0;list-style:none;display:grid;gap:var(--s1)}
.list-plain li{display:flex;justify-content:space-between;gap:var(--s3);align-items:baseline;border-bottom:1px solid var(--color-line-2);padding:var(--s1) 0}
.list-plain li:last-child{border-bottom:0}
.list-plain .muted{color:var(--color-text-2);font-size:var(--text-sm);white-space:nowrap}
.pager{display:flex;gap:var(--s2);align-items:center;justify-content:flex-end;font-size:var(--text-sm);color:var(--color-text-2)}
.kpi b{display:block;font-size:var(--text-2xl);font-weight:var(--w-semibold);line-height:var(--lh-2xl)}

/* ---------- footer ---------- */
footer.site{margin-top:var(--s14);background:var(--color-text);color:var(--color-bg);padding:var(--s12) 0;font-size:var(--text-sm);line-height:var(--lh-sm)}
footer.site a{color:var(--color-bg);text-decoration-color:var(--color-accent)}
footer.site .inner{display:flex;justify-content:space-between;gap:var(--s6);flex-wrap:wrap}

/* ---------- covers, scanner, banner preview ---------- */
.thumb{width:100%;height:96px;object-fit:cover;background:var(--surface);display:block}
.record.hascover{display:grid;grid-template-columns:minmax(0,1fr) 140px;gap:0 var(--s6)}
.record.hascover .rh{grid-column:1/-1}
.record .coverimg{grid-column:2;grid-row:2/span 20;width:140px;height:auto;align-self:start;margin-top:var(--s2)}
@media (max-width:560px){.record.hascover{grid-template-columns:minmax(0,1fr)}.record .coverimg{grid-column:1;grid-row:auto;width:120px}}
.scanbox{position:relative;background:var(--color-text);aspect-ratio:4/3;max-height:60vh;overflow:hidden}
.scanbox video{width:100%;height:100%;object-fit:cover;display:block}
.scanline{position:absolute;left:10%;right:10%;top:50%;height:2px;background:var(--color-accent)}
.bannerprev img{width:100%;max-height:260px;object-fit:cover;display:block;border:1px solid var(--line)}
.bannerprev{background:var(--surface)}

/* ---------- responsive: phone (≤560px) and tablet (561–1024px) ---------- */
@media (max-width:1024px){
  .wrap,.inner{padding:0 var(--s5)}
  .bandin{gap:var(--s6);padding-top:var(--s6);padding-bottom:var(--s6)}
  nav.main a,nav.main button{font-size:var(--text-base);padding:0 var(--s3)}
  .bannerimg{height:320px}
  .caption{max-width:560px;margin-top:-72px;padding:var(--s9) var(--s9)}
  .caption h2{font-size:var(--text-xl);line-height:var(--lh-xl)}
  .caption p{font-size:var(--text-base);line-height:var(--lh-base)}
  .layout{grid-template-columns:220px minmax(0,1fr);gap:var(--s9)}
  .admin{grid-template-columns:190px minmax(0,1fr);gap:var(--s9)}
  .cards{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
}
@media (max-width:820px){
  .layout,.admin{grid-template-columns:minmax(0,1fr)}
  .bandin{flex-direction:column;align-items:flex-start;gap:var(--s3)}
  nav.main{width:100%;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  nav.main a,nav.main button{white-space:nowrap}
  .util{gap:var(--s5);font-size:var(--text-sm);justify-content:flex-start;overflow-x:auto;white-space:nowrap}
  .adminnav{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;position:static;padding-bottom:var(--s2)}
  .adminnav a{border:1px solid var(--line);border-left-width:1px}
  .adminnav a[aria-current="page"]{border-color:var(--color-accent)}
  .tbl th:nth-child(3),.tbl td:nth-child(3){display:none}
}
@media (max-width:560px){
  .lockup .emblem{width:56px;height:48px}
  .wm1{font-size:var(--text-lg);line-height:var(--lh-tight)}
  .wm2{font-size:var(--text-sm);letter-spacing:.24em}
  .wm3{display:none}
  .intro{padding:var(--s9) 0 var(--s6)}
  .btn.primary,.btn.teal{padding:var(--s3) var(--s6);font-size:var(--text-base);line-height:var(--lh-base);width:100%;justify-content:center}
  .btn.primary.small,.btn.small{width:auto}
  .bannerimg{height:200px}
  .caption{margin:0;padding:var(--s6) var(--s5)}
  .banner .inner{padding-bottom:var(--s9)}
  .searchband{padding:var(--s9) 0}
  .searchband .sh{font-size:var(--text-lg);line-height:var(--lh-lg)}
  .searchrow{flex-direction:column}
  .search,select.ctl{width:100%;flex:1 1 auto}
  .cards{grid-template-columns:1fr 1fr}
  .cards .card[style*="grid-column"],.cards > .card:only-child{grid-column:1/-1}
  .tiles .card{grid-column:1/-1}
  .row{grid-template-columns:72px minmax(0,1fr);gap:var(--s3)}
  .row .pill{grid-column:2;justify-self:start}
  .thumb{height:72px}
  .tbl th:nth-child(1),.tbl td:nth-child(1),.tbl th:nth-child(4),.tbl td:nth-child(4){display:none}
  .toolbar .btn{flex:1 1 auto;justify-content:center}
  .sheet{padding:var(--s5)}
  fieldset{padding:var(--s3) var(--s3) var(--s4)}
  .kv{grid-template-columns:minmax(0,1fr);gap:2px}
  .cite{grid-template-columns:minmax(0,1fr);gap:var(--s1)}
  .cite .btn{justify-self:start}
  .pager{justify-content:space-between}
  footer.site .inner{flex-direction:column;gap:var(--s3)}
}
@media (max-width:820px){
  .layout,.admin{grid-template-columns:minmax(0,1fr)}
  aside.index,.index .panel,.sections,.adminnav,nav.main,.util,.tblwrap{min-width:0;max-width:100%}
  .sections{display:flex;gap:var(--s2);overflow-x:auto}
  .sections button{flex:none;display:inline-flex;gap:var(--s2)}
}

/* ---------- covers (v4) & footer ---------- */
.thumbwrap{display:grid}
.thumb{width:100%;height:96px;object-fit:cover;background:var(--surface);display:block}
.tcell{display:flex;gap:var(--s3);align-items:flex-start}
.tthumb{width:36px;height:52px;object-fit:cover;flex:none;background:var(--surface)}
.coverpick{display:flex;gap:var(--s3);align-items:flex-start;flex-wrap:wrap}
.coverpick img{width:90px;height:auto;max-height:130px;object-fit:cover;border:1px solid var(--line)}
nav.main .signin{font-size:var(--text-base);border:1px solid rgba(255,255,255,.4);line-height:var(--lh-tight);padding:var(--s2) var(--s4);margin-left:var(--s2)}
nav.main .signin:hover{border-color:var(--color-accent);border-bottom-color:var(--color-accent)}
footer.site .fgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s9)}
footer.site h3{font-size:var(--text-sm);line-height:var(--lh-sm);letter-spacing:.1em;text-transform:uppercase;font-weight:var(--w-semibold);margin:0 0 var(--s3);color:var(--color-accent)}
footer.site p{margin:0;color:var(--color-bg)}
footer.site .fgrid a{display:block;text-decoration:none;padding:var(--s1) 0;color:var(--color-bg)}
footer.site .fgrid a:hover{text-decoration:underline;text-decoration-color:var(--color-accent)}
footer.site .fcopy{margin-top:var(--s9);padding-top:var(--s5);border-top:1px solid rgba(255,255,255,.2);color:var(--color-bg)}
@media (max-width:820px){footer.site .fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){footer.site .fgrid{grid-template-columns:1fr}.thumb{height:72px}}
/* keep the nav on one line beside the lockup */
.bandin{flex-wrap:nowrap}
nav.main{flex-wrap:nowrap;min-width:0;overflow-x:auto;white-space:nowrap}
@media (max-width:1100px) and (min-width:821px){nav.main a,nav.main button{font-size:var(--text-base);padding:0 var(--s3)}.lockup .emblem{width:72px;height:62px}.wm1{font-size:var(--text-lg)}.wm2{font-size:var(--text-sm)}}
@media (max-width:820px){.bandin{flex-wrap:wrap}}