/* ============================================================
   FISH NEWS — WEB EDITION
   Palette and type lifted from the A4 print templates.
   ============================================================ */

:root{
  --ink:      #121862;   /* deep navy — masthead field, wordmark */
  --royal:    #1B2A8C;   /* nav strip */
  --blue:     #5696E6;   /* links, timestamps, wave crest */
  --peri:     #9CA8D8;   /* wave trough, muted rules */
  --violet:   #6B7BE0;   /* wave body */
  --magenta:  #E0247E;   /* the tie — accent, used sparingly */
  --paper:    #F2F6FC;
  --white:    #FFFFFF;
  --rule:     rgba(18,24,98,.16);
  --rule-soft:rgba(18,24,98,.08);
  --muted:    rgba(18,24,98,.62);
  --muted-2:  rgba(18,24,98,.48);

  /* brand gradients — same palette as the flat colours above, used sparingly
     for chrome and accents so the site reads as print-derived but current */
  --grad-dark:   linear-gradient(160deg, #121862 0%, #1B2A8C 100%);
  --grad-nav:    linear-gradient(180deg, #1B2A8C 0%, #161f7a 100%);
  --grad-brand:  linear-gradient(135deg, #6A82D9 0%, #4F99E9 55%, #DA2482 100%);
  --grad-accent: linear-gradient(135deg, #4F99E9 0%, #DA2482 100%);
  --grad-tie:    linear-gradient(90deg, #4F99E9 0%, #E0247E 55%, #DA2482 100%);

  --shadow-sm: 0 1px 2px rgba(18,24,98,.06), 0 1px 1px rgba(18,24,98,.05);
  --shadow-md: 0 6px 16px rgba(18,24,98,.10), 0 1px 3px rgba(18,24,98,.06);
  --shadow-lg: 0 16px 32px rgba(18,24,98,.16), 0 4px 10px rgba(18,24,98,.08);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  /* One sans-serif family site-wide — --body and --display used to point
     at different fonts (a serif body face alongside the sans display
     face); both now resolve to the same Archivo stack so every element,
     prose included, renders consistently. Kept as two variables since
     call sites still reach for them semantically (body copy vs. UI/
     headings) even though the value is shared. */
  --display: 'Archivo','Helvetica Neue',Arial,sans-serif;
  --body:    'Archivo','Helvetica Neue',Arial,sans-serif;

  --gut: 28px;
  --pad: 32px;
  --max: 1440px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;padding:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.5;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
img{max-width:100%;display:block;}
a{color:inherit;}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad);}

a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--magenta);
  outline-offset:2px;
  border-radius:2px;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--magenta);color:#fff;padding:10px 16px;
  font-family:var(--display);font-weight:700;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
}
.skip:focus{left:8px;top:8px;}

/* ---------- shared type ---------- */
.kicker{
  font-family:var(--display);font-weight:800;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--magenta);
  margin:0 0 8px;display:block;
}
.kicker.on-dark{color:#FF6BB0;}
.h-xl{font-family:var(--display);font-weight:800;font-size:clamp(30px,4.4vw,52px);line-height:1.02;letter-spacing:-.025em;margin:0;}
.h-lg{font-family:var(--display);font-weight:800;font-size:clamp(21px,2.2vw,28px);line-height:1.1;letter-spacing:-.015em;margin:0;}
.h-md{font-family:var(--display);font-weight:700;font-size:18px;line-height:1.18;letter-spacing:-.008em;margin:0;}
.h-sm{font-family:var(--display);font-weight:700;font-size:15px;line-height:1.25;margin:0;}
.standfirst{font-size:clamp(17px,1.5vw,20px);line-height:1.45;font-weight:300;color:rgba(18,24,98,.82);margin:14px 0 0;}
.byline{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.byline b{color:var(--ink);font-weight:700;}

/* ---------- masthead ---------- */
.masthead{background:var(--grad-dark);color:#fff;padding:20px 0 18px;}
.masthead-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.wordmark{
  font-family:var(--display);font-weight:900;
  font-size:clamp(30px,5vw,52px);line-height:.9;letter-spacing:-.035em;
  color:#fff;text-decoration:none;display:inline-flex;align-items:baseline;gap:.1em;
}
.wordmark .fin{color:var(--blue);}
.logo-img{height:clamp(40px,6vw,64px);width:auto;display:block;}
.masthead-meta{
  text-align:right;font-family:var(--display);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;line-height:1.9;color:rgba(255,255,255,.72);
}
.masthead-meta b{color:#fff;font-weight:800;}
.tie-rule{height:5px;background:var(--grad-tie);border:0;margin:0;}

/* ---------- account widget (masthead) ---------- */
.account-area{display:flex;align-items:center;}
.account-signin{padding:11px 18px;}
.account-widget{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
.account-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:none;}
.account-info{display:flex;flex-direction:column;line-height:1.3;text-align:right;}
.account-name{font-family:var(--display);font-weight:700;font-size:13px;color:#fff;}
.account-role{
  font-family:var(--display);font-weight:600;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blue);
}
.account-menu{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.account-menu a{
  font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.8);text-decoration:none;
}
.account-menu a:hover{color:#fff;}
.account-signout{
  font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--peri);background:transparent;border:1px solid rgba(255,255,255,.3);
  border-radius:var(--radius-sm);padding:6px 10px;cursor:pointer;
}
.account-signout:hover{color:#fff;border-color:#fff;}

/* ---------- navigation ---------- */
.nav{background:var(--grad-nav);position:sticky;top:0;z-index:40;border-bottom:3px solid var(--ink);box-shadow:var(--shadow-sm);}
.nav-inner{display:flex;align-items:center;gap:18px;}
.nav-links{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;}
.nav-links::-webkit-scrollbar{display:none;}
.nav a{
  font-family:var(--display);font-weight:700;font-size:12px;
  letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.86);
  text-decoration:none;padding:14px 13px;white-space:nowrap;
  border-bottom:4px solid transparent;transition:color .15s,border-color .15s;
}
.nav a:hover{color:#fff;border-bottom-color:var(--blue);}
.nav a[aria-current="page"]{color:#fff;border-bottom-color:var(--magenta);}

/* ---------- top-bar search ---------- */
.nav-search{
  display:flex;align-items:center;flex:none;width:230px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);
  border-radius:999px;transition:background .15s,border-color .15s,width .2s;
}
.nav-search:focus-within{background:rgba(255,255,255,.94);border-color:rgba(255,255,255,.94);width:270px;}
.nav-search input[type="search"]{
  flex:1;min-width:0;background:transparent;border:0;color:#fff;
  font-family:var(--body);font-size:14px;padding:9px 4px 9px 16px;
}
.nav-search input[type="search"]::placeholder{color:rgba(255,255,255,.7);}
.nav-search:focus-within input[type="search"]{color:var(--ink);}
.nav-search:focus-within input[type="search"]::placeholder{color:var(--muted-2);}
.nav-search input[type="search"]:focus{outline:none;}
.nav-search button{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;margin:2px;border:0;border-radius:50%;
  background:transparent;color:#fff;cursor:pointer;transition:background .15s,color .15s;
}
.nav-search:focus-within button{color:var(--royal);}
.nav-search button:hover{background:rgba(255,255,255,.18);}
.nav-search:focus-within button:hover{background:var(--paper);}
.nav-search button svg{width:16px;height:16px;}

/* ---------- archive search ---------- */
.archive-search{display:flex;gap:10px;flex-wrap:wrap;align-items:center;width:100%;}
.archive-search input[type="search"]{
  flex:1;min-width:220px;font-family:var(--body);font-size:17px;
  padding:13px 15px;border:1px solid var(--rule);background:var(--white);
  color:var(--ink);border-radius:var(--radius-sm);
}
.archive-search input[type="search"]:focus{border-color:var(--royal);}

.archive-search select,.archive-bar select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.02em;
  padding:11px 34px 11px 14px;border:1px solid var(--rule);border-radius:var(--radius-sm);
  background:var(--white) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6"><path d="M1 1l4 4 4-4" fill="none" stroke="%23121862" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat right 13px center;
  color:var(--ink);cursor:pointer;transition:border-color .15s;
}
.archive-search select{font-size:15px;padding:13px 36px 13px 15px;}
.archive-search select:hover,.archive-bar select:hover{border-color:var(--peri);}
.archive-search select:focus,.archive-bar select:focus{border-color:var(--royal);}

/* ---------- market ticker ---------- */
.market-ticker{
  background:var(--ink);color:#fff;overflow:hidden;
  display:flex;align-items:center;gap:16px;padding:8px var(--pad);
  font-family:var(--display);font-size:12px;white-space:nowrap;
}
.market-ticker[hidden]{display:none;}
.mi-label{
  flex:none;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  font-size:10px;color:var(--blue);padding-right:14px;border-right:1px solid rgba(255,255,255,.2);
}
.mi-viewport{flex:1;min-width:0;overflow:hidden;}
.mi-track{
  display:inline-flex;align-items:center;gap:22px;width:max-content;
  animation-name:mi-scroll;animation-timing-function:linear;animation-iteration-count:infinite;
}
/* Paused on hover/focus so a reader can actually read a note before it
   scrolls past, and whenever the tab isn't visible to save a background tick. */
.market-ticker:hover .mi-track,.market-ticker:focus-within .mi-track{animation-play-state:paused;}
.mi-item{display:inline-flex;align-items:center;gap:7px;flex:none;}
.mi-name{font-weight:800;letter-spacing:.06em;}
.mi-price{color:rgba(255,255,255,.85);}
.mi-arrow{font-size:9px;}
.mi-arrow.up{color:#3ED598;}
.mi-arrow.down{color:#FF6B6B;}
.mi-change{font-weight:700;}
.mi-note{color:rgba(255,255,255,.55);font-weight:400;font-style:italic;}

/* ---------- gov comment status badge ---------- */
.gov-comment-status{
  margin-top:26px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16);
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
}
.gov-comment-status[hidden]{display:none;}
.gcs-days{
  font-family:var(--display);font-weight:900;font-size:20px;color:var(--magenta);
}
.gcs-label{
  font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.6);
}

/* ---------- page frame ---------- */
/* flex:1 0 auto on a flex body pushes the footer to the bottom of the
   viewport on a short page, leaving spare space above it rather than a gap
   below — and just scrolls normally once content is taller than the screen. */
main{display:block;flex:1 0 auto;padding-bottom:8px;min-height:50vh;}
.section-head{
  position:relative;display:flex;align-items:baseline;gap:14px;
  padding-top:13px;margin:44px 0 20px;
}
.section-head::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-tie);
}
.section-head h2{
  font-family:var(--display);font-weight:900;font-size:15px;
  letter-spacing:.2em;text-transform:uppercase;margin:0;color:var(--ink);
}
.section-head .count{
  font-family:var(--display);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2);
}
.section-head .more-link{
  margin-left:auto;font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--royal);text-decoration:none;
}
.section-head .more-link:hover{color:var(--magenta);}
.section-head.accent::before{background:linear-gradient(90deg, var(--magenta) 0%, #6A82D9 100%);}
.section-head.accent h2{color:var(--magenta);}

/* ---------- lead + latest ---------- */
.top-grid{display:grid;grid-template-columns:1fr 320px;gap:var(--gut);padding-top:30px;}

.lead{display:block;text-decoration:none;color:inherit;}
.lead .media{
  position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--peri);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-md);transition:box-shadow .2s ease,transform .2s ease;
}
.lead .media img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.lead:hover .media{box-shadow:var(--shadow-lg);transform:translateY(-2px);}
.lead:hover .media img{transform:scale(1.02);}
.lead .lead-body{padding:18px 0 0;}
.lead .h-xl{transition:color .15s;}
.lead:hover .h-xl{color:var(--royal);}

.sub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut);margin-top:34px;border-top:1px solid var(--rule);padding-top:22px;}

.card{display:block;text-decoration:none;color:inherit;}
.card .media{
  position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--peri);margin-bottom:12px;
  border-radius:var(--radius-md);box-shadow:var(--shadow-sm);transition:box-shadow .2s ease,transform .2s ease;
}
.card .media img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.card:hover .media{box-shadow:var(--shadow-md);transform:translateY(-3px);}
.card:hover .media img{transform:scale(1.03);}
.card:hover .h-md,.card:hover .h-lg,.card:hover .h-sm{color:var(--royal);}
.card p.dek{font-size:15px;line-height:1.45;color:var(--muted);margin:8px 0 0;}
.card .meta{margin-top:10px;}
.card.video .media{background:var(--ink);}

/* latest rail */
.latest{
  position:relative;background:var(--white);padding:3px 18px 6px;align-self:start;
  border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden;
}
.latest::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-tie);
}
.latest h2{
  font-family:var(--display);font-weight:900;font-size:14px;letter-spacing:.2em;
  text-transform:uppercase;margin:14px 0 4px;
}
.latest ol{list-style:none;margin:0;padding:0;}
.latest li{border-top:1px solid var(--rule-soft);}
.latest li:first-child{border-top:0;}
.latest a{display:flex;gap:12px;padding:13px 0;text-decoration:none;color:inherit;align-items:baseline;}
.latest a:hover .lt{color:var(--royal);}
.latest .time{
  font-family:var(--display);font-weight:800;letter-spacing:.06em;
  color:var(--blue);flex:none;width:52px;padding-top:2px;
  display:flex;flex-direction:column;gap:2px;
}
.latest .time .d{font-size:10px;text-transform:uppercase;letter-spacing:.08em;}
.latest .time .t{font-size:11px;}
.latest .lt{font-family:var(--display);font-weight:600;font-size:14.5px;line-height:1.28;}
.latest .sec{
  display:block;font-family:var(--display);font-weight:700;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--magenta);margin-top:5px;
}

/* ---------- side column widgets ---------- */
.side-col{display:flex;flex-direction:column;gap:var(--gut);align-self:start;}
.side-widget{
  position:relative;background:var(--white);padding:3px 18px 16px;
  border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden;
}
.side-widget::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-tie);
}
.side-widget h2{
  font-family:var(--display);font-weight:900;font-size:14px;letter-spacing:.2em;
  text-transform:uppercase;margin:14px 0 10px;
}
.otd-entry{font-size:14.5px;line-height:1.5;color:var(--muted);margin:0;}
.otd-entry b{color:var(--ink);}

/* ---------- video + grids ---------- */
.video-rail{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut);}
.more-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gut);}
.listing{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut);padding-top:6px;}

.play-badge{
  position:absolute;left:12px;bottom:12px;
  width:38px;height:38px;border-radius:50%;background:var(--magenta);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(18,24,98,.35);
}
.play-badge svg{width:13px;height:13px;fill:#fff;margin-left:2px;}
.duration{
  position:absolute;right:10px;bottom:12px;
  background:rgba(18,24,98,.88);color:#fff;
  font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.08em;
  padding:3px 7px;border-radius:2px;
}

/* ---------- sponsored deals ---------- */
.deal-section{margin-top:44px;}
.deal-section:first-child{margin-top:0;}
.deal-section-head{display:flex;justify-content:center;align-items:center;margin-bottom:22px;}
.deal-section-head img{max-height:56px;max-width:220px;width:auto;height:auto;object-fit:contain;}
.deal-section-head a{display:inline-flex;}
.deal-section-name{
  font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--royal);
}
/* auto-fill instead of the fixed 3-column .listing so a section with only
   one or two deals doesn't leave a wall of empty grid columns beside them */
.deal-grid{grid-template-columns:repeat(auto-fill,minmax(230px,max-content));justify-content:center;}
.deal-card{width:230px;}
.deal-card .media{
  aspect-ratio:1/1;background:var(--white);display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-md);box-shadow:var(--shadow-sm);transition:box-shadow .2s ease,transform .2s ease;
}
.deal-card:hover .media{box-shadow:var(--shadow-md);transform:translateY(-3px);}
.deal-card .media img{width:100%;height:100%;object-fit:contain;padding:16px;box-sizing:border-box;}

/* ---------- front-page ad slot ---------- */
.ad-slot{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--gut);}
.ad-card{
  display:flex;flex-direction:column;width:100%;max-width:340px;
  border:1px solid var(--rule);border-radius:var(--radius-md);
  padding:16px;background:var(--white);
}
.ad-card[hidden]{display:none;}
.ad-card .media{margin-bottom:12px;}
.ad-card .kicker.ad-kicker{
  color:var(--muted-2);font-size:10px;letter-spacing:.18em;
  border:1px solid var(--rule);border-radius:999px;
  padding:3px 9px;display:inline-block;width:fit-content;margin-bottom:10px;
}
.ad-sponsor-foot{
  display:flex;align-items:center;gap:8px;margin-top:14px;
  padding-top:12px;border-top:1px solid var(--rule);
}
.ad-sponsor-foot::before{
  content:'Sponsored by';font-family:var(--display);font-weight:700;font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);
}
.ad-sponsor-foot img{height:22px;width:auto;object-fit:contain;}

/* ---------- testimonials ---------- */
.testimonial-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--gut);}
.testimonial-card{
  margin:0;display:flex;flex-direction:column;
  border:1px solid var(--rule);border-radius:var(--radius-md);
  padding:20px;background:var(--white);
}
.testimonial-card blockquote{
  margin:0 0 14px;font-family:var(--display);font-size:17px;line-height:1.45;
  color:var(--ink);
}
.testimonial-card figcaption{
  font-size:13px;font-weight:700;color:var(--royal);
}
.testimonial-role{
  display:block;font-weight:400;font-size:12px;color:var(--muted);margin-top:2px;
}

/* ---------- corrections & clarifications ---------- */
.corrections-list{display:flex;flex-direction:column;gap:18px;}
.correction-card{
  border:1px solid var(--rule);border-radius:var(--radius-md);
  padding:20px 22px;background:var(--white);
}
.correction-complaint{margin:0 0 10px;font-size:16px;line-height:1.5;color:var(--muted);}
.correction-reply{margin:0;font-size:16px;line-height:1.5;color:var(--ink);}
.correction-complaint b,.correction-reply b{
  font-family:var(--display);font-weight:800;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--magenta);display:block;margin-bottom:4px;
}

/* ---------- careers ---------- */
.career-list{display:flex;flex-direction:column;gap:22px;}
.career-card{
  border:1px solid var(--rule);border-radius:var(--radius-md);
  padding:24px 26px;background:var(--white);
}
.career-card .dek{font-size:16px;line-height:1.5;color:var(--muted);margin:8px 0 0;}
.career-quals{margin:16px 0 0;padding-left:20px;}
.career-quals li{margin-bottom:6px;font-size:15px;line-height:1.5;color:var(--ink);}

/* ---------- page heads ---------- */
.page-head{padding:36px 0 4px;border-bottom:1px solid var(--rule);margin-bottom:26px;}
.page-head h1{font-family:var(--display);font-weight:900;font-size:clamp(28px,3.4vw,42px);letter-spacing:-.02em;margin:0 0 6px;}
.page-head p{margin:0 0 22px;color:var(--muted);font-size:17px;max-width:60ch;}

/* ---------- archive ---------- */
.archive-bar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:0 0 22px;margin-bottom:8px;
}
.archive-bar label{
  font-family:var(--display);font-weight:700;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.archive-bar .tally{
  margin-left:auto;font-family:var(--display);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);
}
.month-head{
  position:relative;font-family:var(--display);font-weight:900;font-size:13px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink);
  padding-top:12px;margin:38px 0 0;
}
.month-head::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-tie);
}
.month-head:first-of-type{margin-top:0;}
.archive-list{list-style:none;margin:0;padding:0;}
.archive-list li{border-top:1px solid var(--rule-soft);}
.archive-list li:first-child{border-top:0;}
.archive-list a{
  display:grid;grid-template-columns:96px 1fr auto;gap:18px;align-items:baseline;
  padding:16px 0;text-decoration:none;color:inherit;
}
.archive-list a:hover .at{color:var(--royal);}
.archive-list .adate{
  font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blue);
}
.archive-list .at{font-family:var(--display);font-weight:700;font-size:17px;line-height:1.25;}
.archive-list .adek{font-size:15px;line-height:1.45;color:var(--muted);margin:6px 0 0;max-width:70ch;}
.archive-list .asec{
  font-family:var(--display);font-weight:700;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--magenta);white-space:nowrap;
}

/* ---------- article ---------- */
.article{max-width:760px;margin:0 auto;padding-top:34px;}
.back{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:22px;
}
.back:hover{color:var(--magenta);}
.article-meta{
  display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;
  margin:20px 0 0;padding:14px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.figure{margin:26px 0 0;}
.figure img{width:100%;}
.figure figcaption{
  display:flex;gap:12px;margin-top:9px;font-size:14px;line-height:1.4;color:var(--muted);
}
.figure figcaption .credit{
  color:var(--magenta);font-family:var(--display);font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;font-size:10px;white-space:nowrap;padding-top:3px;
}
.body-copy{margin-top:26px;font-size:18.5px;line-height:1.62;}
.body-copy p{margin:0 0 20px;}
.body-copy > p:first-of-type::first-letter{
  float:left;font-family:var(--display);font-weight:900;font-size:62px;line-height:.78;
  color:var(--magenta);padding:5px 10px 0 0;
}
.body-copy h3{
  font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);margin:34px 0 12px;
}
.body-copy ul{margin:0 0 20px;padding-left:22px;}
.body-copy li{margin-bottom:8px;}
.body-copy a{color:var(--royal);}
.pullquote{
  margin:30px 0;padding:6px 0 6px 22px;border-left:5px solid var(--magenta);
  font-size:24px;line-height:1.3;font-style:italic;color:var(--ink);
}
.pullquote cite{
  display:block;margin-top:12px;font-family:var(--display);font-style:normal;
  font-weight:700;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.player{position:relative;aspect-ratio:16/9;background:var(--ink);margin-top:26px;}
.player iframe,.player video{width:100%;height:100%;border:0;display:block;}
.player-fallback{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;text-align:center;padding:24px;
}
.player-fallback img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45;}
.player-fallback .inner{position:relative;z-index:1;}
.btn{
  display:inline-block;background:var(--grad-accent);color:#fff;text-decoration:none;
  font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;padding:13px 22px;border:0;cursor:pointer;border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm);transition:box-shadow .2s ease,transform .2s ease;
}
.btn:hover{box-shadow:var(--shadow-md);transform:translateY(-1px);}
.btn.ghost{background:transparent;border:1px solid var(--rule);color:var(--ink);box-shadow:none;}
.btn.ghost:hover{background:var(--white);border-color:var(--ink);transform:none;box-shadow:none;}
.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin:30px 0 0;}
.tag{
  font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--rule);
  padding:5px 10px;border-radius:var(--radius-sm);text-decoration:none;
}
.tag:hover{border-color:var(--magenta);color:var(--magenta);}
.tag-cloud{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:6px 0 0;}
.tag-cloud .tag{font-size:13px;padding:8px 12px;display:inline-flex;align-items:center;gap:8px;}
.tag-cloud .tag-count{
  font-family:var(--display);font-weight:700;font-size:11px;color:var(--white);
  background:var(--muted);border-radius:10px;padding:1px 7px;line-height:1.5;
}
.tag-cloud .tag:hover .tag-count{background:var(--magenta);}

/* ---------- states ---------- */
.empty{text-align:center;padding:70px 20px;border:1px dashed var(--rule);background:var(--white);}
.empty h2{font-family:var(--display);font-weight:800;font-size:22px;margin:0 0 10px;}
.empty p{color:var(--muted);margin:0 auto 6px;max-width:56ch;}
.empty code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;
  background:var(--paper);border:1px solid var(--rule);padding:2px 6px;border-radius:2px;
}
.loading{
  padding:80px 20px;text-align:center;
  font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2);
}

/* ---------- footer ---------- */
footer{background:var(--grad-dark);color:#fff;margin-top:60px;}
.foot-inner{padding-top:34px;padding-bottom:40px;}
.foot-top{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start;}
.foot-strap{
  font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--blue);
}
.foot-links{display:flex;gap:20px;flex-wrap:wrap;margin-top:16px;}
.foot-links a{
  font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.75);text-decoration:none;
}
.foot-links a:hover{color:#fff;}
.foot-legal{
  margin-top:26px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16);
  font-size:13px;line-height:1.6;color:rgba(255,255,255,.6);
}

/* ---------- sponsors ---------- */
.sponsors{
  margin-top:30px;padding-top:26px;border-top:1px solid rgba(255,255,255,.16);
}
.sponsors-lbl{
  display:block;font-family:var(--display);font-weight:800;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55);
  margin-bottom:16px;
}
.sponsors-row{display:flex;flex-wrap:wrap;align-items:center;gap:28px;}
.sponsors-row a{display:inline-flex;align-items:center;}
.sponsors-row img{
  max-height:40px;width:auto;max-width:140px;
  filter:grayscale(1) brightness(0) invert(1);opacity:.6;
  transition:opacity .15s;
}
.sponsors-row a:hover img{opacity:1;}

/* ---------- shared: page head, forms ---------- */
.page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:32px 0 20px;}
.page-head h1{margin:0;}
.empty-note{color:var(--muted);padding:20px 0;}

.stack-form{display:flex;flex-direction:column;gap:16px;max-width:640px;margin:0 0 60px;}
.field{display:flex;flex-direction:column;gap:6px;font-family:var(--display);font-weight:700;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);flex:1;min-width:180px;}
.field input,.field textarea,.field-group input{
  font-family:var(--body);font-weight:400;font-size:16px;text-transform:none;letter-spacing:normal;
  color:var(--ink);padding:12px 14px;border:1px solid var(--rule);border-radius:var(--radius-sm);
  background:var(--white);
}
.field select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:none;
  padding:11px 34px 11px 14px;border:1px solid var(--rule);border-radius:var(--radius-sm);
  background:var(--white) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6"><path d="M1 1l4 4 4-4" fill="none" stroke="%23121862" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat right 13px center;
  color:var(--ink);cursor:pointer;
}
.field input:focus,.field textarea:focus,.field select:focus,.field-group input:focus{outline:none;border-color:var(--royal);}
.field-row{display:flex;gap:16px;flex-wrap:wrap;}
.field-note{color:var(--muted-2);font-size:13px;margin:-8px 0 0;}
.field-group{border:1px solid var(--rule);border-radius:var(--radius-sm);padding:16px;display:flex;flex-direction:column;gap:10px;}
.field-group legend{
  font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);padding:0 6px;
}
.form-error{color:#C6266E;font-family:var(--display);font-weight:600;font-size:13px;}
.form-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}

/* ---------- status pills (my stories) ---------- */
.status-pill{
  font-family:var(--display);font-weight:700;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 9px;border-radius:999px;
}
.status-pill.status-draft{background:var(--paper);color:var(--muted);border:1px solid var(--rule);}
.status-pill.status-published{background:var(--grad-accent);color:#fff;}

.my-stories-table{width:100%;border-collapse:collapse;margin:0 0 60px;}
.my-stories-table th{
  text-align:left;font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);padding:0 10px 10px 0;border-bottom:2px solid var(--ink);
}
.my-stories-table td{padding:12px 10px 12px 0;border-bottom:1px solid var(--rule-soft);vertical-align:middle;}
.my-stories-table a{color:var(--ink);font-weight:600;text-decoration:none;}
.my-stories-table a:hover{color:var(--royal);text-decoration:underline;}
.admin-users-table select{
  font-family:var(--body);font-size:14px;padding:6px 28px 6px 10px;border:1px solid var(--rule);
  border-radius:var(--radius-sm);background:var(--white);color:var(--ink);cursor:pointer;
}
.admin-users-table select:disabled{opacity:.5;cursor:not-allowed;}
.admin-role-status{font-family:var(--display);font-weight:600;font-size:12px;color:var(--muted);}

/* ---------- body block editor ---------- */
.body-block{border:1px solid var(--rule);border-radius:var(--radius-sm);padding:12px;display:flex;flex-direction:column;gap:8px;}
.body-block + .body-block{margin-top:10px;}
.body-block-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.body-block-actions{display:flex;gap:4px;}
.body-block-actions button{
  width:28px;height:28px;border:1px solid var(--rule);background:var(--white);border-radius:var(--radius-sm);
  cursor:pointer;color:var(--muted);
}
.body-block-actions button:hover{border-color:var(--royal);color:var(--royal);}
.body-block textarea,.body-block input{
  font-family:var(--body);font-size:15px;padding:10px 12px;border:1px solid var(--rule-soft);
  border-radius:var(--radius-sm);width:100%;
}
.body-block-add{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}

/* ---------- gallery ---------- */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:0 0 60px;}
.gallery-post{margin:0;background:var(--white);border:1px solid var(--rule);border-radius:var(--radius-sm);overflow:hidden;}
.gallery-post img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
.gallery-post figcaption{padding:14px;}
.gallery-post p{margin:0 0 8px;font-size:15px;}
.gallery-meta{
  display:flex;gap:10px;flex-wrap:wrap;font-family:var(--display);font-weight:600;font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;
}
.gallery-delete{padding:6px 12px;font-size:11px;}

/* ---------- fish card rarities ---------- */
/* Every rarity resolves to the same four custom properties, so the dex tile,
   the pack card and anything added later all tint from one place:
     --rarity      the flat colour (labels, strips, borders)
     --rarity-ink  a darker cut of it, for text on white
     --rarity-wash a barely-there fill for tinted backgrounds
     --rarity-glow the drop shadow a collected card sits in            */
.rarity-common   {--rarity:#7681AE;--rarity-ink:#474F7D;--rarity-wash:rgba(118,129,174,.13);--rarity-glow:rgba(118,129,174,.22);}
.rarity-uncommon {--rarity:#2E9E5B;--rarity-ink:#1F7342;--rarity-wash:rgba(46,158,91,.13); --rarity-glow:rgba(46,158,91,.26);}
.rarity-rare     {--rarity:#5696E6;--rarity-ink:#2A6BBC;--rarity-wash:rgba(86,150,230,.15);--rarity-glow:rgba(86,150,230,.30);}
.rarity-epic     {--rarity:#6B7BE0;--rarity-ink:#4A56B4;--rarity-wash:rgba(107,123,224,.16);--rarity-glow:rgba(107,123,224,.34);}
.rarity-legendary{--rarity:#E0247E;--rarity-ink:#B01260;--rarity-wash:rgba(224,36,126,.14);--rarity-glow:rgba(224,36,126,.34);}

.dex-card-rarity,.pack-card-rarity{color:var(--rarity-ink,var(--muted));}

/* ---------- fish card dex ---------- */
.card-dex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;margin:24px 0 60px;}
.dex-card{
  position:relative;overflow:hidden;
  background:var(--white);border:1px solid var(--rule);border-radius:var(--radius-md);padding:14px;
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;
  transition:transform .18s ease,box-shadow .18s ease;
}

/* The art sits in its own rounded, clipped frame on a white tile — plenty of
   the fish are cut-outs on white, so without the frame (and its hairline
   ring) the rounded corners would simply vanish into the card. */
.dex-card-art{
  width:100%;aspect-ratio:1;border-radius:var(--radius-lg);overflow:hidden;background:var(--white);
  box-shadow:inset 0 0 0 1px var(--rule-soft);
}
.dex-card-art img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;}
.dex-card-blank{
  width:100%;height:100%;background:var(--paper);
  display:flex;align-items:center;justify-content:center;font-size:32px;color:var(--muted-2);
}
.dex-card-name{font-family:var(--display);font-weight:700;font-size:13px;}
.dex-card-rarity{
  font-family:var(--display);font-weight:700;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
}
.dex-card-qty{font-family:var(--display);font-weight:700;font-size:12px;color:var(--muted);}

/* Not yet found: no colour at all, so a collected shelf stands out. */
.dex-card.undiscovered{opacity:.55;}
.dex-card.undiscovered .dex-card-rarity{color:var(--muted-2);}

/* Collected: the whole tile takes the rarity colour — tinted wash, matching
   border and glow, and a strip along the top edge. */
.dex-card.collected{
  border-color:var(--rarity);
  background:linear-gradient(168deg,var(--rarity-wash) 0%,var(--white) 62%);
  box-shadow:0 4px 14px var(--rarity-glow);
}
.dex-card.collected::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--rarity);
}
.dex-card.collected .dex-card-name{color:var(--rarity-ink);}
.dex-card.collected .dex-card-qty{color:var(--rarity-ink);opacity:.8;}
.dex-card.collected .dex-card-art{box-shadow:inset 0 0 0 1px var(--rarity-glow);}
.dex-card.collected:hover{transform:translateY(-3px);box-shadow:0 10px 22px var(--rarity-glow);}

/* The top two rarities get a slow sheen so a full shelf still has a focal
   point. Paused wholesale under prefers-reduced-motion, further down. */
.dex-card.collected.rarity-epic::after,
.dex-card.collected.rarity-legendary::after{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  background-size:280% 100%;animation:dex-sheen 4.5s ease-in-out infinite;
}
@keyframes dex-sheen{
  0%,70%{background-position:140% 0;}
  100%{background-position:-40% 0;}
}

/* ---------- fish card pack modal ---------- */
.pack-modal-overlay{
  position:fixed;inset:0;background:rgba(18,24,98,.72);display:flex;align-items:center;justify-content:center;
  padding:20px;z-index:100;animation:pack-fade .22s ease both;
}
.pack-modal{
  position:relative;
  background:var(--white);border-radius:var(--radius-lg);padding:32px;max-width:560px;width:100%;
  text-align:center;box-shadow:var(--shadow-lg);
}
.pack-modal h2{margin:0 0 8px;font-family:var(--display);font-weight:900;}
.pack-modal p{color:var(--muted);margin:0 0 20px;}
.pack-modal .form-actions{justify-content:center;}
/* .form-actions carries display:flex, which outranks the UA sheet's
   [hidden]{display:none} — without this the buttons would show through
   the whole reveal instead of waiting for the last card. */
.pack-modal [hidden]{display:none !important;}

@keyframes pack-fade{from{opacity:0;}to{opacity:1;}}

/* ---------- the sound toggle ---------- */
.pack-sfx-toggle{
  position:absolute;top:14px;right:14px;width:34px;height:34px;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--paper);border:1px solid var(--rule);border-radius:50%;
  color:var(--muted);cursor:pointer;transition:color .15s ease,border-color .15s ease;
}
.pack-sfx-toggle:hover{color:var(--ink);border-color:var(--peri);}
.pack-sfx-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;}
.pack-sfx-toggle[aria-pressed="false"]{color:var(--muted-2);}

/* ---------- the sealed packet ---------- */
.pack-wrapper{
  position:relative;overflow:hidden;display:block;margin:0 auto;padding:22px 18px;
  width:180px;aspect-ratio:3/4;border:0;border-radius:var(--radius-lg);cursor:pointer;
  background:var(--grad-brand);color:var(--white);box-shadow:var(--shadow-lg);
  animation:pack-bob 2.6s ease-in-out infinite;
}
.pack-wrapper:hover{animation-play-state:paused;transform:translateY(-4px) scale(1.03);}
.pack-wrapper:focus-visible{outline:3px solid var(--ink);outline-offset:3px;}
.pack-wrapper-fish{display:block;margin-bottom:10px;}
.pack-wrapper-fish img{width:84px;height:auto;filter:drop-shadow(0 4px 8px rgba(18,24,98,.35));}
.pack-wrapper-title{
  display:block;font-family:var(--display);font-weight:900;font-size:19px;
  letter-spacing:.06em;text-transform:uppercase;
}
.pack-wrapper-count{
  display:block;margin-top:4px;font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;opacity:.85;
}
/* Foil shine sweeping across the packet. */
.pack-wrapper-shine{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);
  background-size:260% 100%;animation:pack-shine 2.8s ease-in-out infinite;
}
.pack-hint{
  margin:16px 0 0 !important;font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);
}
@keyframes pack-bob{0%,100%{transform:translateY(0) rotate(-1deg);}50%{transform:translateY(-8px) rotate(1deg);}}
@keyframes pack-shine{0%,60%{background-position:150% 0;}100%{background-position:-50% 0;}}

/* Tearing it open: the packet lunges at the reader and blows out. */
.pack-sealed.tearing .pack-wrapper{animation:pack-tear .46s cubic-bezier(.35,0,.65,1) forwards;}
.pack-sealed.tearing .pack-hint{opacity:0;transition:opacity .2s ease;}
@keyframes pack-tear{
  0%{transform:scale(1) rotate(0);opacity:1;}
  45%{transform:scale(1.14) rotate(-3deg);opacity:1;}
  100%{transform:scale(1.9) rotate(4deg);opacity:0;filter:brightness(1.8);}
}

/* ---------- the reveal ---------- */
.pack-skip-hint{
  font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-2);margin:0 0 18px !important;
}
.pack-cards{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:22px;}

.pack-card{width:132px;perspective:900px;opacity:0;}
.pack-card.dealt{animation:pack-deal .44s cubic-bezier(.2,.85,.3,1) both;animation-delay:calc(var(--i) * .1s);}
@keyframes pack-deal{
  from{opacity:0;transform:translateY(26px) scale(.9);}
  to{opacity:1;transform:none;}
}

/* Both faces stack in one grid cell so the card keeps a single footprint
   however long the species name runs. */
.pack-card-inner{
  position:relative;display:grid;height:192px;
  transform-style:preserve-3d;transition:transform .55s cubic-bezier(.3,.9,.3,1);
}
.pack-card.revealed .pack-card-inner{transform:rotateY(180deg);}
.pack-card-face{
  grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:var(--radius-md);padding:10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
}
.pack-card-back{
  background:var(--grad-dark);box-shadow:var(--shadow-md);
}
.pack-card-back img{width:64px;height:auto;opacity:.92;}
.pack-card-front{
  position:relative;transform:rotateY(180deg);justify-content:flex-start;overflow:hidden;
  border:1px solid var(--rarity);
  background:linear-gradient(168deg,var(--rarity-wash) 0%,var(--white) 62%);
  box-shadow:0 6px 18px var(--rarity-glow);
}
.pack-card.revealed .pack-card-front{animation:pack-pop .4s ease .28s both;}
@keyframes pack-pop{
  0%{box-shadow:0 0 0 0 var(--rarity-glow);}
  40%{box-shadow:0 0 0 12px rgba(255,255,255,0),0 6px 26px var(--rarity-glow);}
  100%{box-shadow:0 6px 18px var(--rarity-glow);}
}

/* Same rounded, clipped, white-backed frame as the dex tiles. */
.pack-card-art{
  width:100%;aspect-ratio:1;border-radius:var(--radius-md);overflow:hidden;background:var(--white);
  box-shadow:inset 0 0 0 1px var(--rarity-glow);
}
.pack-card-art img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;}
.pack-card-name{font-family:var(--display);font-weight:700;font-size:12px;line-height:1.25;color:var(--rarity-ink);}
.pack-card-rarity{font-family:var(--display);font-weight:700;font-size:10px;letter-spacing:.1em;text-transform:uppercase;}

/* A burst behind the good ones only — a common fish getting fireworks would
   make the fireworks mean nothing. */
.pack-card-burst{position:absolute;inset:0;pointer-events:none;opacity:0;}
.pack-card.rarity-epic.revealed .pack-card-burst,
.pack-card.rarity-legendary.revealed .pack-card-burst{
  background:repeating-conic-gradient(from 0deg,var(--rarity-glow) 0deg 8deg,transparent 8deg 24deg);
  animation:pack-burst .85s ease-out .3s both;
}
@keyframes pack-burst{
  0%{opacity:.85;transform:scale(.3) rotate(0);}
  100%{opacity:0;transform:scale(1.9) rotate(38deg);}
}

/* ---------- utilities ---------- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  :root{--pad:24px;}
  .nav-search{width:190px;}
  .nav-search:focus-within{width:220px;}
}
@media (max-width:1000px){
  .top-grid{grid-template-columns:1fr;}
  .more-grid{grid-template-columns:repeat(2,1fr);}
  .sub-grid,.listing,.video-rail{grid-template-columns:repeat(2,1fr);}
  .archive-list a{grid-template-columns:1fr auto;}
  .archive-list .adate{grid-column:1/-1;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:760px){
  .nav-inner{flex-wrap:wrap;gap:8px 18px;padding:8px 0;}
  .nav-links{order:2;flex-basis:100%;}
  .nav-search{order:1;flex:1;width:auto;}
  .nav-search:focus-within{width:auto;}
}
@media (max-width:640px){
  :root{--gut:22px;--pad:16px;}
  .sub-grid,.listing,.video-rail,.more-grid{grid-template-columns:1fr;}
  .masthead-meta{text-align:left;}
  .archive-search input[type="search"]{min-width:100%;}
  .body-copy{font-size:17.5px;}
  .body-copy > p:first-of-type::first-letter{font-size:52px;}
  .archive-list a{grid-template-columns:1fr;gap:6px;}
  .archive-list .asec{justify-self:start;}
  .account-widget{justify-content:flex-start;}
  .account-info{text-align:left;}
  .gallery-grid{grid-template-columns:1fr;}
  .field-row{flex-direction:column;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}
  .lead:hover .media,.card:hover .media,.deal-card:hover .media,
  .lead:hover .media img,.card:hover .media img,.btn:hover{transform:none;}
  .mi-track{animation-play-state:paused;}
  .mi-viewport{overflow-x:auto;}
  .pack-wrapper,.pack-wrapper-shine,.dex-card.collected::after{animation:none !important;}
  .pack-wrapper:hover,.dex-card.collected:hover{transform:none;}
  .pack-card-inner{transform:none !important;}
  .pack-card.revealed .pack-card-front{transform:none;}
  .pack-card.revealed .pack-card-back{visibility:hidden;}
  .pack-card-burst{display:none;}
}

@keyframes mi-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}