/* ABP 2026 — inner pages (article + category/listing).
   Built on the tokens declared in site.css (--gold, --ink, --s*, --t*, --r*).
   Hand-written CSS, same system as the homepage — no second styling framework. */

/* ---------- page banner ---------- */
:root{
  --primary:  var(--gold);
}

.pghead{position:relative;background:var(--cream-2);overflow:hidden;
  padding-block:var(--s6) var(--s5);border-bottom:1px solid var(--line)}
.pghead::after{content:"";position:absolute;inset-inline-end:-80px;top:-60px;width:420px;height:260px;
  background-image:radial-gradient(var(--gold) 1.4px,transparent 1.4px);background-size:20px 20px;
  opacity:.22;pointer-events:none}
.pghead__curves{position:absolute;inset-inline:0;bottom:-10px;width:100%;height:150px;
  fill:none;stroke:var(--gold);stroke-width:1.4;opacity:.3;pointer-events:none}
.pghead .wrap{position:relative;z-index:1}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;
  font-size:var(--t1);color:var(--gray);margin-bottom:.6rem}
.crumb a{color:var(--ink-2)}
.crumb a:hover{color:var(--gold-text)}
.crumb .sep{opacity:.55}
.pghead h1{font-size:var(--t7);color:var(--ink);line-height:1.2}
.pghead .rule{width:74px;height:4px;border-radius:3px;margin-top:var(--s2);
  background:linear-gradient(90deg,var(--gold),transparent)}
.pghead__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);
  margin-top:var(--s2);font-size:var(--t1);color:var(--gray)}
.pghead__meta .mi{display:inline-flex;align-items:center;gap:.4rem}
.pghead__meta svg{width:15px;height:15px;opacity:.7}

/* ---------- article shell ---------- */
.pgbody{padding-block:var(--s5) var(--s6)}
.pgbody__grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s5);align-items:start}
.pgbody__grid.is-wide{grid-template-columns:minmax(0,1fr)}
.sheet{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s4);box-shadow:var(--shadow-sm)}
.lede{font-size:var(--t3);color:var(--ink-2);font-weight:var(--w-bold);
  padding-inline-start:var(--s2);border-inline-start:3px solid var(--gold);margin-bottom:var(--s3)}

.figure{margin-bottom:var(--s3)}
.figure img{width:100%;border-radius:var(--r);display:block}
.figure figcaption{margin-top:.5rem;font-size:var(--t1);color:var(--gray);text-align:center}

/* Article thumbnail — never upscale.
   `width:100%` above stretched every thumb to the full sheet width. Most CMS
   thumbs are around 600px wide, so on a no-sidebar article they were blown up
   ~2x: huge and visibly soft. Cap at the source's own size, cap the height so a
   portrait shot can't fill the viewport, and centre what's left.
   Scoped to `figure.figure` (the thumbnail) so galleries — which are
   `<div class="figure">` wrapping a bootstrap row — keep the rule above. */
figure.figure > img{
  width:auto;
  max-width:100%;
  height:auto;
  max-height:min(70vh,560px);
  margin-inline:auto;
}

/* ---------- prose (CMS body HTML — we don't control this markup) ---------- */
.prose{font-size:var(--t2);line-height:1.95;color:var(--ink)}
.prose > * + *{margin-top:1.05em}
.prose h2,.prose h3,.prose h4,.prose h5{font-family:var(--disp);color:var(--gold-text);line-height:1.35;margin-top:1.6em}
.prose h2{font-size:var(--t6)}
.prose h3{font-size:var(--t5)}
.prose h4,.prose h5{font-size:var(--t4)}
.prose p{margin-bottom:0}
.prose a{color:var(--gold-text);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--gold-deep)}
/* Body images. `!important` is deliberate: this is migrated CMS HTML that carries
   its own width="1200" attributes and inline `style="width:…"`, which otherwise
   overflow the column. width:auto also stops small images being stretched.
   (margin-inline:auto never centred anything before — an <img> is inline by
   default, so display:block was missing.) */
.prose img{
  width:auto;
  max-width:100%!important;
  height:auto!important;
  max-height:min(70vh,560px);
  border-radius:var(--r);
  display:block;
  margin-inline:auto;
}
.prose ul,.prose ol{padding-inline-start:1.4em}
.prose li + li{margin-top:.4em}
.prose li::marker{color:var(--gold)}
.prose blockquote{padding:var(--s2) var(--s3);background:var(--cream);border-radius:var(--r);
  border-inline-start:3px solid var(--gold);color:var(--ink-2)}
/* .prose table{width:100%;border-collapse:collapse;font-size:var(--t1);display:block;overflow-x:auto} */
.prose table{width:100%;border-collapse:collapse;font-size:var(--t1);overflow-x:auto}
.prose table td,.prose table th{border:1px solid var(--line);padding:.6rem .7rem;text-align:start}
.prose table th{background:var(--cream-2);font-weight:var(--w-bold)}
.prose iframe,.prose video{max-width:100%;border-radius:var(--r)}
.prose hr{border:0;border-top:1px solid var(--line)}

/* ---------- Bootstrap-classed markup inside CMS bodies ----------
   A small number of pages (~1%) were authored in the old admin with Bootstrap 4
   component markup (nav-tabs, tab-pane, row/col, card, btn, alert). Rather than
   loading all of Bootstrap into the front-end — which would override the design's
   typography and layout — those components are restyled here with the ABP tokens,
   so the content keeps working and still looks like the rest of the site.
   Tab/accordion switching is handled by the vanilla activator in site.js.        */
.prose .nav-tabs{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;padding:0;
  margin:0 0 var(--s3);border-bottom:1px solid var(--line)}
.prose .nav-tabs .nav-item{margin:0}
.prose .nav-tabs .nav-link{display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--disp);font-weight:var(--w-bold);font-size:var(--t2);
  padding:.55rem 1.1rem;border:0;border-bottom:3px solid transparent;border-radius:10px 10px 0 0;
  background:transparent;color:var(--ink-2);cursor:pointer;transition:.2s}
.prose .nav-tabs .nav-link:hover{background:var(--cream-2);color:var(--gold-text)}
.prose .nav-tabs .nav-link.active{color:var(--gold-text);border-bottom-color:var(--gold);background:var(--cream)}
.prose .nav-tabs .nav-link i{display:none}          /* FontAwesome isn't loaded on the front */
.prose .tab-content > .tab-pane{display:none}
.prose .tab-content > .tab-pane.active,
.prose .tab-content > .tab-pane.show{display:block}
.prose .tab-content > .tab-pane > *:first-child{margin-top:0}

.prose .row{display:flex;flex-wrap:wrap;gap:var(--s3);margin:0}
.prose [class*="col-"]{flex:1 1 260px;min-width:0;padding:0}
.prose .card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s3);box-shadow:var(--shadow-sm)}
.prose .card-body{padding:0}
.prose .btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--disp);
  font-weight:var(--w-bold);font-size:var(--t2);padding:.6rem 1.4rem;min-height:44px;
  border-radius:var(--pill);border:1.5px solid var(--gold);background:transparent;
  color:var(--ink);text-decoration:none;cursor:pointer;transition:.25s}
.prose .btn:hover{background:var(--gold);color:var(--on-gold)}
.prose .btn-primary,.prose .btn-success{background:linear-gradient(135deg,var(--gold-2),var(--gold-deep));
  color:var(--on-gold);border-color:transparent}
.prose .alert{padding:var(--s2) var(--s3);border-radius:var(--r);background:var(--cream);
  border:1px solid var(--line);border-inline-start:3px solid var(--gold)}
.prose .table{width:100%}
.prose .badge{display:inline-block;padding:.25rem .7rem;border-radius:var(--pill);
  background:var(--gold-soft);color:var(--gold-deep);font-size:var(--t1)}
.prose .progress{height:10px;border-radius:var(--pill);background:var(--cream-2);overflow:hidden}
.prose .progress-bar{height:100%;background:var(--gold)}
.prose .list-group{list-style:none;padding:0;display:grid;gap:.4rem}
.prose .list-group-item{padding:var(--s2);background:var(--paper);border:1px solid var(--line);border-radius:var(--r)}

/* ---------- attachments ---------- */
.files{display:grid;gap:var(--s1);margin-bottom:var(--s3)}
.file-row{display:flex;align-items:center;gap:var(--s2);padding:var(--s2);
  background:var(--cream);border:1px solid var(--line);border-radius:var(--r);transition:.22s}
.file-row:hover{border-color:var(--gold);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.file-row__ic{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:var(--gold-soft);color:var(--gold-deep)}
.file-row__ic svg{width:19px;height:19px}
.file-row b{font-family:var(--disp);font-size:var(--t2);color:var(--ink)}
.file-row span{display:block;font-size:var(--t1);color:var(--gray)}

/* ---------- authors ---------- */
.authors{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s3)}
.author-chip{display:flex;align-items:center;gap:.7rem;padding:.5rem var(--s2) .5rem .5rem;
  background:var(--cream);border:1px solid var(--line);border-radius:var(--pill)}
.author-chip img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none}
.author-chip .lbl{display:block;font-size:var(--t1);color:var(--gray)}
.author-chip b{font-family:var(--disp);font-size:var(--t2);color:var(--ink)}

/* ---------- tags ---------- */
.tags{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:var(--s4);
  padding-top:var(--s3);border-top:1px solid var(--line)}
.tags__lbl{font-family:var(--disp);font-weight:var(--w-bold);font-size:var(--t1);color:var(--ink-2)}
.tag{display:inline-flex;font-size:var(--t1);padding:.3rem .8rem;border-radius:var(--pill);
  background:var(--cream-2);color:var(--ink-2);transition:.2s}
.tag:hover{background:var(--gold);color:var(--on-gold)}

/* ---------- share ---------- */
.share{display:flex;align-items:center;gap:.4rem;margin-top:var(--s3)}
.share__lbl{font-size:var(--t1);color:var(--gray);margin-inline-end:.3rem}
.share a{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--cream-2);color:var(--ink-2);transition:.2s}
.share a:hover{background:var(--gold);color:var(--on-gold);transform:translateY(-2px)}
.share svg{width:15px;height:15px}

/* ---------- sidebar ---------- */
.side{display:grid;gap:var(--s3);position:sticky;top:var(--s7)}
.side__card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s3)}
.side__title{font-family:var(--disp);font-size:var(--t4);color:var(--ink);
  padding-bottom:.6rem;margin-bottom:var(--s2);border-bottom:2px solid var(--gold);display:inline-block}
.side-item{display:flex;gap:var(--s2);padding-block:var(--s2);border-bottom:1px solid var(--line)}
.side-item:last-child{border-bottom:0;padding-bottom:0}
.side-item__img{flex:none;width:66px;height:52px;border-radius:10px;overflow:hidden;background:var(--cream-2)}
.side-item__img img{width:100%;height:100%;object-fit:cover}
.side-item time{display:block;font-size:var(--t1);color:var(--gray);margin-bottom:.15rem}
.side-item h5{font-family:var(--disp);font-weight:var(--w-bold);font-size:var(--t2);line-height:1.5;color:var(--ink)}
.side-item:hover h5{color:var(--gold-text)}

/* ---------- related ---------- */
.related{margin-top:var(--s6)}
.related__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--s3);margin-top:var(--s3)}
.rcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;transition:.25s;display:flex;flex-direction:column}
.rcard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--gold-lite)}
.rcard__img{aspect-ratio:16/10;background:var(--cream-2);overflow:hidden;display:flex}
.rcard__img img{max-width:100%;/*max-height:100%;*/object-fit:cover;transition:.4s;text-align: center;
    margin: auto;}
.rcard:hover .rcard__img img{transform:scale(1.05)}
.rcard__body{padding:var(--s2);display:flex;flex-direction:column;gap:.4rem;flex:1}
.rcard time{font-size:var(--t1);color:var(--gray)}
.rcard h4{font-family:var(--disp);font-size:var(--t2);line-height:1.55;color:var(--ink)}
.rcard:hover h4{color:var(--gold-text)}

.form-select2 {
    display: block;
    /* width: 100%; */
    min-width: 300px;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;

    /* Dropdown Arrow */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;

    border: 1px solid #ced4da;
    border-radius: 0.375rem;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    font-family: inherit;
}

.form-select2:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
}

.form-select2:disabled {
    background-color: #e9ecef;
    cursor: not-allowed;
    opacity: 1;
}

.form-select2[multiple],
.form-select2[size]:not([size="1"]) {
    padding-right: 0.75rem;
    background-image: none;
}

.form-select2-sm {
    padding: 0.25rem 2rem 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.25rem;
}

.form-select2-lg {
    padding: 0.5rem 2.5rem 0.5rem 1rem;
    font-size: 1.25rem;
    border-radius: 0.5rem;
}

/* ---------- category / listing ---------- */
.listing{padding-block:var(--s4) var(--s5)}
.listing__intro{color:var(--ink-2);font-size:var(--t3);max-width:70ch;margin-bottom:var(--s4)}
.listing__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s3)}
.listing__rows{display:grid;gap:var(--s2)}

/* featured issue (newest) shown to the left of the intro text, like the old print archive.
   row-reverse so the cover lands on the inline-end (left in RTL) with the text beside it. */
.listing__feature{display:flex;flex-direction:row-reverse;gap:var(--s4);align-items:flex-start;
  margin-bottom:var(--s4);padding-bottom:var(--s4);border-bottom:1px solid var(--line);justify-content: space-between;}
/* let the intro fill to the container edge so its text starts level with the page title (max-width:none overrides the 70ch cap) */
.listing__feature .listing__intro{flex:1 1 auto;margin-bottom:0;max-width:none}
.listing__feature-cover{flex:0 0 250px;max-width:250px;display:block}
.listing__feature-cover img{width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--cream-2);
  border-radius:var(--r-lg);box-shadow:var(--shadow);transition:.25s}
.listing__feature-cover:hover img{transform:translateY(-3px)}
.listing__feature-cap{display:block;margin-top:var(--s2);text-align:center;font-family:var(--disp);
  font-weight:var(--w-bold);font-size:var(--t2);line-height:1.5;color:var(--ink)}
.listing__feature-cover:hover .listing__feature-cap{color:var(--gold-text)}
.listing__feature-cover.is-unavailable{cursor:default;opacity:.72;pointer-events:none}
.lrow{display:flex;gap:var(--s3);align-items:center;padding:var(--s2);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);transition:.22s}
.lrow:hover{border-color:var(--gold-lite);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.lrow__img{flex:none;width:120px;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--cream-2)}
.lrow__img img{width:100%;height:100%;object-fit:cover}
.lrow__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.3rem}
.lrow time{font-size:var(--t1);color:var(--gray)}
.lrow h3{font-family:var(--disp);font-size:var(--t4);line-height:1.5;color:var(--ink)}
.lrow:hover h3{color:var(--gold-text)}
.lrow p{font-size:var(--t1);color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lrow__arrow{flex:none;color:var(--gold);opacity:.6;transition:.22s}
.lrow:hover .lrow__arrow{opacity:1}
.lrow__arrow svg{width:20px;height:20px}

/* subcategory chips */
.subcats{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:var(--s4)}
.subcat{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem 1rem;border-radius:var(--pill);
  border:1.5px solid var(--line-2);font-family:var(--disp);font-weight:var(--w-bold);
  font-size:var(--t1);color:var(--ink-2);transition:.2s}
.subcat:hover,.subcat.is-on{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}

/* file/PDF listing card (magazine, reports, statements) */
.fcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;transition:.25s}
.fcard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--gold-lite)}
/* .fcard__cover{aspect-ratio:3/4;background:var(--cream-2);overflow:hidden} */
.fcard__cover{aspect-ratio:1;background:var(--cream-2);overflow:hidden}
/* .fcard__cover img{width:100%;height:100%;object-fit:cover;transition:.4s} */
.fcard__cover img{max-width:100%;object-fit:cover;transition:.4s;margin:auto;}
/* File row/card with no document attached: rendered without an href, so it is not
   clickable. Drop the affordances so it doesn't read as a broken link. */
.fcard.is-unavailable,.lrow.is-unavailable{cursor:default;opacity:.72}
.fcard.is-unavailable:hover .fcard__cover img,.lrow.is-unavailable:hover img{transform:none}
.fcard.is-unavailable .fcard__dl{display:none}
.fcard:hover .fcard__cover img{transform:scale(1.04)}
.fcard__body{padding:var(--s2);display:flex;flex-direction:column;gap:.35rem;flex:1}
.fcard h3{font-family:var(--disp);font-size:var(--t2);line-height:1.5;color:var(--ink)}
.fcard time{font-size:var(--t1);color:var(--gray)}
.fcard__dl{margin-top:auto;display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--disp);font-weight:var(--w-bold);font-size:var(--t1);color:var(--gold-text)}
.fcard__dl svg{width:14px;height:14px}

/* ---------- media galleries (video / photo) ---------- */
.media__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s3)}
.mcard{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;transition:.25s;text-align:start;padding:0;
  font:inherit;color:inherit;cursor:pointer;width:100%}
.mcard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--gold-lite)}
.mcard__img{position:relative;display:block;aspect-ratio:16/9;background:var(--cream-2);overflow:hidden}
.mcard__img img{width:100%;height:100%;object-fit:cover;transition:.4s}
.mcard:hover .mcard__img img{transform:scale(1.05)}
.mcard__play{position:absolute;inset:0;margin:auto;width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;background:rgba(43,44,46,.55);color:#fff;
  backdrop-filter:blur(2px);transition:.25s}
.mcard:hover .mcard__play{background:var(--gold);color:var(--on-gold);transform:scale(1.08)}
.mcard__play svg{width:24px;height:24px;margin-inline-start:3px}
.mcard__body{display:flex;flex-direction:column;gap:.35rem;padding:var(--s2)}
.mcard__body time{font-size:var(--t1);color:var(--gray)}
.mcard__body h3{font-family:var(--disp);font-size:var(--t2);line-height:1.55;color:var(--ink)}
.mcard:hover .mcard__body h3{color:var(--gold-text)}

/* lightbox */
.lbox{position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  background:rgba(28,29,31,.92);padding:var(--s3)}
.lbox[hidden]{display:none}
.lbox__inner{width:min(960px,100%);display:grid;gap:var(--s2)}
.lbox__slot{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--r);overflow:hidden}
.lbox__slot iframe,.lbox__slot img,.lbox__slot video{width:100%;height:100%;border:0;display:block;object-fit:contain}
.lbox__cap{color:#e9e9ea;font-family:var(--disp);font-size:var(--t3);text-align:center}
.lbox__close{position:absolute;top:var(--s3);inset-inline-end:var(--s3);width:44px;height:44px;
  border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.08);color:#fff;cursor:pointer;transition:.2s}
.lbox__close:hover{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.lbox__close svg{width:20px;height:20px}
@media (max-width:640px){ .lbox__slot{aspect-ratio:4/3} }

.tel-span{display:inline-block;direction:ltr;unicode-bidi:bidi-override}

/* ---------- players (video / audio detail) ---------- */
.vplayer{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--r);overflow:hidden}
.vplayer iframe,.vplayer video,.vplayer img{width:100%;height:100%;border:0;display:block;object-fit:contain}
.vplayer .empty{background:transparent;border:0;color:#cfd0d1;display:grid;place-items:center;height:100%}
.aplayer{width:100%;margin-block:var(--s2)}
@media (max-width:640px){ .vplayer{aspect-ratio:4/3} }

/* ---------- author bio ---------- */
.authorbio{display:flex;gap:var(--s3);align-items:flex-start;margin-bottom:var(--s4);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s3)}
.authorbio__img{flex:none;width:104px;height:104px;border-radius:50%;object-fit:cover}
.authorbio__body h2{font-size:var(--t5);color:var(--ink);margin-bottom:.4rem}
@media (max-width:640px){ .authorbio{flex-direction:column;align-items:center;text-align:center} }

/* ---------- search field (banner + 404) ---------- */
.pghead__search,.nf__search{display:flex;gap:.5rem;margin-top:var(--s3);max-width:560px}
.pghead__search input,.nf__search input{flex:1;min-width:0;height:48px;padding-inline:var(--s2);
  font-family:var(--body);font-size:var(--t2);color:var(--ink);background:var(--paper);
  border:1.5px solid var(--line-2);border-radius:var(--pill);outline-offset:2px}
.pghead__search input:focus-visible,.nf__search input:focus-visible{border-color:var(--gold)}
.pghead__search button,.nf__search button{display:inline-flex;align-items:center;gap:.5rem;height:48px;
  padding-inline:var(--s3);border:0;border-radius:var(--pill);cursor:pointer;
  font-family:var(--disp);font-weight:var(--w-bold);font-size:var(--t2);
  background:linear-gradient(135deg,var(--gold-2),var(--gold-deep));color:var(--on-gold);transition:.25s}
.pghead__search button:hover,.nf__search button:hover{filter:brightness(1.05)}
.pghead__search svg,.nf__search svg{width:17px;height:17px}
.nf__search button{padding-inline:var(--s2)}

/* ---------- 404 ---------- */
.nf{position:relative;padding-block:var(--s6);overflow:hidden}
.nf::after{content:"";position:absolute;inset-inline-end:-60px;top:20px;width:380px;height:240px;
  background-image:radial-gradient(var(--gold) 1.4px,transparent 1.4px);background-size:20px 20px;
  opacity:.2;pointer-events:none}
.nf__inner{position:relative;z-index:1;max-width:620px;margin-inline:auto;text-align:center}
.nf__code{display:block;font-family:var(--disp);font-weight:var(--w-head);font-size:96px;line-height:1;
  color:transparent;-webkit-text-stroke:2px var(--gold);letter-spacing:.06em;margin-bottom:var(--s2)}
.nf__inner h1{font-size:var(--t6);color:var(--ink);margin-bottom:.6rem}
.nf__inner > p{color:var(--ink-2);font-size:var(--t3)}
.nf__cta{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:center;margin-top:var(--s3)}
.nf__search{margin-inline:auto}
@media (max-width:640px){ .nf__code{font-size:68px} }

.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* empty state */
.empty{padding:var(--s6) var(--s3);text-align:center;color:var(--gray);
  background:var(--paper);border:1px dashed var(--line-2);border-radius:var(--r-lg)}

/* ---------- pagination ----------
   Laravel's `pagination::bootstrap-5` view ships Bootstrap utility classes
   (d-flex / d-sm-none / d-none / d-sm-flex / flex-fill …). The front-end doesn't
   load Bootstrap, so those utilities are re-declared here — scoped to .pager —
   otherwise the mobile prev/next block stays visible on desktop.               */
.pager{margin-top:var(--s4);display:flex;justify-content:center}
.pager nav{width:100%;display:flex;justify-content:center}
.pager .d-flex{display:flex}
.pager .flex-fill{flex:1 1 auto}
.pager .align-items-sm-center{align-items:center}
.pager .justify-content-between,
.pager .justify-content-sm-between{justify-content:center}
.pager .d-none{display:none}
.pager .d-sm-none{display:flex}          /* mobile-only prev/next */
.pager .small,.pager .text-muted{display:none}  /* untranslated "Showing x to y" */
@media (min-width:576px){
  .pager .d-sm-none{display:none}
  .pager .d-sm-flex{display:flex}
  .pager .flex-sm-fill{flex:1 1 auto}
}
.pager .pagination{display:flex;flex-wrap:wrap;gap:.35rem;list-style:none;padding:0;margin:0;
  justify-content:center;width:100%}
.pager .page-link{display:grid;place-items:center;min-width:40px;height:40px;padding-inline:.7rem;
  border-radius:10px;border:1px solid var(--line);background:var(--paper);
  color:var(--ink-2);font-size:var(--t2);transition:.2s}
.pager .page-link:hover{border-color:var(--gold);color:var(--gold-text)}
.pager .active .page-link{background:var(--gold);border-color:var(--gold);color:var(--on-gold);font-weight:var(--w-bold)}
.pager .disabled .page-link{opacity:.45}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .pgbody__grid{grid-template-columns:minmax(0,1fr)}
  .side{position:static}
  .pghead h1{font-size:var(--t6)}
}
@media (max-width:640px){
  .sheet{padding:var(--s3) var(--s2)}
  .pghead{padding-block:var(--s5) var(--s4)}
  .lrow{flex-direction:column;align-items:stretch}
  .lrow__img{width:100%;aspect-ratio:16/9}
  .lrow__arrow{display:none}
  .listing__feature{flex-direction:column}
  .listing__feature-cover{flex-basis:auto;max-width:300px;margin-inline:auto}
}

@media print{
  .nav,.footer,.side,.related,.share,.tags,.pghead__curves{display:none!important}
  .sheet{border:0;box-shadow:none;padding:0}
}