/* ===== Archive page ===== */
.rhero-inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) var(--col-r);column-gap:var(--gap);padding-top:40px;padding-bottom:48px}
.r-main{grid-column:1;min-width:0;max-width:900px}
.r-title{font-family:var(--serif);font-weight:700;font-size:clamp(2rem,3.2vw,2.7rem);line-height:1.1;margin:14px 0 0;color:var(--h-ink)}
.r-desc{color:var(--h-muted);max-width:64ch;margin:12px 0 0;font-size:1rem;line-height:1.6}
.r-main .hx-metrics{max-width:760px}
.rlayout{display:grid;grid-template-columns:minmax(0,1fr) var(--col-r);grid-template-areas:"main right";gap:var(--gap);padding-top:36px;padding-bottom:64px;align-items:start}
.rlayout>*{min-width:0}
html[data-arcside="off"] .rlayout{grid-template-columns:minmax(0,1fr);grid-template-areas:"main"}
html[data-arcside="off"] .rlayout .col-right{display:none}
html[data-arcside="off"] .rhero-inner{grid-template-columns:minmax(0,1fr)}
.r-body{grid-area:main;min-width:0}
/* toolbar */
.r-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:8px;scroll-margin-top:6px}
.viewsw{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:4px;gap:2px}
.viewsw button{display:inline-flex;align-items:center;gap:7px;border:0;background:none;padding:8px 14px;border-radius:7px;font:700 .86rem var(--sans);color:var(--muted);cursor:pointer;transition:background-color .15s,color .15s}
.viewsw button:hover{color:var(--ink)}
.viewsw button[aria-pressed="true"]{background:var(--brand);color:#fff}
.viewsw .icon{width:16px;height:16px}
.r-count{color:var(--muted);font-size:.9rem}
.r-early{display:flex;align-items:center;gap:8px;margin:0 0 18px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);font-size:.92rem}
.r-early .icon{width:18px;height:18px;color:var(--brand-text)}
.r-early a{font-weight:700}
.r-early span{color:var(--muted)}
.r-filter{margin-inline-start:auto;display:inline-flex;align-items:center;gap:8px;font-size:.88rem;font-weight:600;color:var(--ink);text-decoration:none;cursor:pointer;user-select:none}
.r-filter:hover{color:var(--brand-text)}
.r-check{flex:none;width:16px;height:16px;border:1.5px solid var(--muted);border-radius:3px;background:var(--surface);position:relative}
.r-filter:hover .r-check{border-color:var(--brand-text)}
.r-filter[aria-current] .r-check{background:var(--brand);border-color:var(--brand)}
.r-filter[aria-current] .r-check::after{content:"";position:absolute;inset-inline-start:4px;top:1px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.sortbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 12px;font:700 .82rem var(--sans);color:var(--ink);cursor:pointer;text-decoration:none}
.sortbtn:hover{border-color:var(--brand-text);color:var(--brand-text)}
.sortbtn .icon{width:15px;height:15px;transition:transform .2s}
.sortbtn[data-dir="desc"] .icon{transform:rotate(180deg)}
/* the three views: only the chosen one shows */
.r-body[data-view="covers"] .r-view:not([data-pane="covers"]),
.r-body[data-view="list"] .r-view:not([data-pane="list"]),
.r-body[data-view="years"] .r-view:not([data-pane="years"]),
.r-body[data-view="years"] .pager{display:none}
.yr-head{display:flex;align-items:center;gap:14px;margin:30px 0 16px;font-size:1rem;font-weight:400;line-height:1.3;scroll-margin-top:6px}
.yr-head b{font-family:var(--serif);font-size:1.5rem}
.yr-head span{font-size:.86rem;color:var(--muted)}
.yr-head::after{content:"";flex:1;height:1px;background:transparent;background:color-mix(in srgb,var(--brand-text) 25%,transparent)}
.yr-head:focus{outline:none}
.yr-head:focus-visible b{outline:3px solid var(--focus-in,var(--ink));outline-offset:3px;border-radius:3px}
/* cover colours */
.cv1{background:var(--brand)}
.cv2{background:var(--brand-2)}
.cv3{background:var(--brand);background:color-mix(in srgb,var(--brand) 70%,#000)}
/* The accent-tinted cover is mixed back towards the brand colour: white text keeps 4.5:1 in every style. */
.cv4{background:var(--brand-2);background:color-mix(in srgb,color-mix(in srgb,var(--brand-2) 80%,var(--accent)) 60%,var(--brand))}
.cvs{background:var(--accent);color:var(--accent-ink)}
.cvs .cover-band{background:var(--brand)}
.cvs .cover-foot{border-top-color:rgba(0,0,0,.2)}
/* covers view */
.cgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:30px 22px;margin-top:24px}
.ac{display:block;text-decoration:none;color:var(--ink);position:relative;min-width:0;scroll-margin-top:6px}
.ac .cover{max-width:none;padding:14px 12px;transition:transform .2s ease,box-shadow .2s ease}
.ac img.cover{width:100%;padding:0}
.ac .cover-band{height:4px;margin-block:0 12px;margin-inline:0 -12px}
.ac .cover-title{font-size:.8rem;overflow-wrap:anywhere}
.ac .cover-art{margin:10px 0;min-height:0;position:relative}
/* The art fills what the A4 box leaves free, so drawn covers and uploaded images end up the same height. */
.ac .cover-art svg{position:absolute;inset:0;margin:auto;width:62%;height:100%}
.ac .cover-foot{font-size:.66rem}
.ac .cover-foot strong{font-size:.86rem}
.ac:hover .cover,.ac:focus-visible .cover{transform:translateY(-4px);box-shadow:0 28px 40px -18px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.12) inset}
.ac.hl .cover{outline:3px solid var(--accent);outline-offset:4px}
.ac .lbl{display:block;margin-top:12px;font-weight:700;font-size:.98rem;line-height:1.3;overflow-wrap:anywhere}
.ac .lbl2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.84rem;color:var(--muted);margin-top:2px}
.ac .lbl3{display:block;font-size:.78rem;color:var(--brand-text);font-weight:600;margin-top:4px}
.tag{position:absolute;top:10px;inset-inline-start:-6px;z-index:2;font-size:.68rem;font-weight:800;padding:3px 9px;border-start-start-radius:0;border-start-end-radius:4px;border-end-end-radius:4px;border-end-start-radius:0;background:var(--accent);color:var(--accent-ink);box-shadow:0 4px 10px -4px rgba(0,0,0,.4)}
.tag.cur{background:#fff;color:var(--brand)}
.tag.sp{background:var(--brand);color:#fff}
/* list view */
.lrow{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:18px;align-items:center;padding:16px 14px;border-bottom:1px solid var(--line);border-bottom:1px solid color-mix(in srgb,var(--brand-text) 22%,transparent);box-shadow:inset 3px 0 0 transparent;transition:background-color .15s,box-shadow .15s}
.lrow:hover{background:var(--tint);box-shadow:inset 3px 0 0 var(--accent)}
html[dir="rtl"] .lrow:hover{box-shadow:inset -3px 0 0 var(--accent)}
.lrow .cover{max-width:64px;padding:6px 5px;box-shadow:0 8px 14px -8px rgba(0,0,0,.5)}
.lrow img.cover{width:64px;padding:0}
.lrow .cover-band{height:3px;margin-block:0 5px;margin-inline:0 -5px}
.lrow .cover-title{font-size:.4rem;overflow:hidden}
.lrow .cover-foot{font-size:.36rem;padding-top:3px}
.lrow .cover-foot strong{font-size:.48rem}
.lrow h3{margin:0;font-size:1.06rem;line-height:1.35}
.lrow h3 a{color:var(--ink);text-decoration:none}
.lrow h3 a:hover{color:var(--brand-text);text-decoration:underline}
.lrow .sub{font-size:.9rem;color:var(--muted);margin-top:2px}
.lrow .meta{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:.82rem;color:var(--muted);margin-top:6px}
.lrow .meta span{display:inline-flex;align-items:center;gap:5px}
.lrow .acts{display:flex;flex-wrap:wrap;gap:6px}
.lrow .acts a{font-size:.8rem;font-weight:700;padding:6px 11px;border-radius:5px;border:1.5px solid var(--line);text-decoration:none;color:var(--ink);background:var(--surface);white-space:nowrap}
.lrow .acts a.pdf{border-color:var(--brand-text);color:var(--brand-text)}
.lrow .acts a:hover{background:var(--tint)}
.chip-s{font-size:.7rem;font-weight:800;padding:2px 8px;border-radius:999px;background:var(--accent);color:var(--accent-ink);margin-inline-start:8px;vertical-align:2px;white-space:nowrap}
.chip-c{font-size:.7rem;font-weight:800;padding:2px 8px;border-radius:999px;background:var(--brand);color:#fff;margin-inline-start:8px;vertical-align:2px;white-space:nowrap}
/* years view: every year is open until the page script takes over */
.yv{border:1px solid var(--line);border-radius:10px;background:var(--surface);margin-top:12px;overflow:hidden;transition:box-shadow .2s;scroll-margin-top:6px}
.yv.open{box-shadow:0 14px 34px -22px rgba(0,0,0,.35)}
.yv-h{margin:0;font-size:1rem;font-weight:400;line-height:1.3}
.yv-btn{width:100%;display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto;gap:18px;align-items:center;padding:16px 20px;background:none;border:0;cursor:pointer;color:var(--ink);font-family:var(--sans);font-size:1rem;text-align:start}
.yv-btn:hover{background:var(--tint)}
.yv-btn:focus-visible{outline-offset:-3px}
.yv-y{grid-column:1;font-family:var(--serif);font-size:1.6rem;font-weight:700;color:var(--brand-text)}
.yv-v{grid-column:2;font-size:.82rem;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--tint);color:var(--brand-text)}
.yv-n{grid-column:3;font-size:.88rem;color:var(--muted)}
.yv-strip{grid-column:4;display:flex;gap:4px}
.yv-strip i{display:block;width:22px;aspect-ratio:210/297;border-radius:2px;box-shadow:0 3px 6px -3px rgba(0,0,0,.5)}
.yv-btn::after{content:"";grid-column:5;width:9px;height:9px;border:solid var(--muted);border-width:0 2px 2px 0;transform:translateY(-3px) rotate(45deg);transition:transform .2s}
.yv.open .yv-btn::after{transform:translateY(2px) rotate(-135deg)}
/* a long archive: a year printed without its issues is a link that opens it */
a.yv-btn{text-decoration:none;line-height:normal}
.r-body:not([data-js]) button.yv-btn{cursor:default}
.r-body:not([data-js]) button.yv-btn::after{display:none}
.yv-body{display:grid;grid-template-rows:1fr;transition:grid-template-rows .3s ease}
.yv-body>div{overflow:hidden;min-height:0}
.r-body[data-js] .yv:not(.open) .yv-body{grid-template-rows:0fr}
.r-body[data-js] .yv:not(.open) .yv-body>div{visibility:hidden;transition:visibility 0s .3s}
.yv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:22px 18px;padding:20px 20px 22px;border-top:1px solid var(--line)}
.yv-grid .ac .cover{padding:10px 9px}
.yv-grid .ac img.cover{padding:0}
.yv-grid .ac .cover-band{margin-block-end:8px;margin-inline-end:-9px}
.yv-grid .ac .cover-title{font-size:.62rem}
.yv-grid .ac .cover-art{display:none}
.yv-grid .ac .lbl{font-size:.9rem;margin-top:10px}
/* pagination */
.pager{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:36px}
.pager a,.pager span.off{display:inline-grid;place-items:center;min-width:40px;height:40px;padding:0 12px;border-radius:8px;border:1.5px solid var(--line);background:var(--surface);font:700 .9rem var(--sans);color:var(--ink);text-decoration:none}
.pager a[aria-current="page"]{background:var(--brand);border-color:var(--brand);color:#fff}
.pager span.off{color:var(--muted);background:transparent;border-style:dashed}
.pager a:not([aria-current]):hover{border-color:var(--brand-text);color:var(--brand-text)}
/* sidebar */
.g-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px;box-shadow:0 18px 40px -20px rgba(0,0,0,.4)}
.yjump{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.yjump-rest{display:contents}
.yjump a{display:block;text-align:center;padding:8px 0;border-radius:6px;background:var(--tint);color:var(--brand-text);text-decoration:none;font-weight:700;font-size:.9rem;transition:background-color .15s,color .15s}
.yjump a:hover{background:var(--brand);color:#fff}
.yjump .more{border:0;cursor:pointer;padding:8px 0;font:800 .9rem var(--sans);background:var(--brand);color:#fff;border-radius:6px}
.yjump .more:hover{background:var(--accent);color:var(--accent-ink)}
.sp-list nav a{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.sp-list nav a:last-child{border-bottom:0}
.sp-list i{display:block;width:40px;aspect-ratio:210/297;border-radius:2px;box-shadow:0 4px 8px -4px rgba(0,0,0,.5)}
.sp-list b{display:block;font-size:.88rem;line-height:1.3;overflow-wrap:anywhere}
.sp-list small{color:var(--muted);font-size:.76rem}
.sp-list nav a:hover b{color:var(--brand-text)}
.sp-all{display:inline-block;margin-top:10px;font-size:.88rem;font-weight:600}
.empty{padding:40px 0;text-align:center;color:var(--muted)}
@media (max-width:1180px){.cgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:860px){
  .rhero-inner{grid-template-columns:minmax(0,1fr)}
  .rlayout{grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "right";padding-top:28px}
  .cgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 14px}
  .lrow{grid-template-columns:54px minmax(0,1fr)}
  .lrow .acts{grid-column:2}
  .lrow img.cover{width:54px}
  .yv-btn{grid-template-columns:auto minmax(0,1fr) auto;gap:10px}
  .yv-v,.yv-strip{display:none}
  .yv-n{grid-column:2}
  .yv-btn::after{grid-column:3}
  .r-filter{margin-inline-start:0}
}
@media (max-width:560px){
  .cgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .viewsw button{padding:8px 10px}
}
@media print{
  .r-toolbar,.pager{display:none!important}
  .rlayout{display:block;padding:0}
}
@media (forced-colors:active){
  .viewsw button[aria-pressed="true"],.pager a[aria-current="page"]{outline:2px solid Highlight;outline-offset:-2px}
  .tag,.chip-s,.chip-c,.r-check,.yjump a,.yjump .more{border:1px solid CanvasText}
  .r-filter[aria-current] .r-check{background:Highlight}
}