/* ==========================================================================
   barrelfare.com shared shell
   Brand tokens, site nav, footer, article prose. Linked FIRST in every page's
   <head>, so a page's own inline <style> still wins on any name it repeats.
   Tokens live here and nowhere else (docs/WEBSITE_PLAN.md).
   ========================================================================== */

:root{
  /* Ink and surface: a deep night-ocean, not a flat black void */
  --abyss:#050E0F; --deep:#071617; --tide:#0A2526; --glow:#0E3B3C;
  /* Text on dark */
  --canvas:#FAFAF8;
  --canvas-72:rgba(250,250,248,.72);
  --canvas-45:rgba(250,250,248,.60);
  --muted:#93A7A8;
  /* Brand */
  --accent:#16B6B4;
  --accent-deep:#0E8C8B;
  --accent-ring:rgba(22,182,180,.30);
  --coral:#FF6B4A;
  --hairline:rgba(250,250,248,.12);
  /* The light tile product photos and logos sit on. Product cutouts are shot
     on pure white, so a white tile is seamless with no blend mode. A
     mix-blend-mode here also broke long-page rendering in Chrome. */
  --brand-canvas:#FFFFFF;
  /* Motion */
  --ease-out:cubic-bezier(.2,.7,.2,1);
  /* Layout */
  --nav-h:62px;
}

/* ---------- Site nav ---------------------------------------------------- */
/* Sticky, translucent, hairline appears only once the page has scrolled (a
   scroll-driven animation where supported, harmless nothing where not). */
.sitenav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:clamp(10px,3vw,32px);
  min-height:var(--nav-h);padding:10px clamp(16px,4vw,40px);
  background:rgba(5,14,15,.72);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;
  flex-wrap:wrap;
}
@supports (animation-timeline:scroll()){
  .sitenav{
    animation:nav-edge linear both;
    animation-timeline:scroll(root block);
    animation-range:0 90px;
  }
  @keyframes nav-edge{
    from{border-bottom-color:transparent;background:rgba(5,14,15,.44)}
    to{border-bottom-color:var(--hairline);background:rgba(5,14,15,.86)}
  }
}
@supports not (animation-timeline:scroll()){
  .sitenav{border-bottom-color:var(--hairline)}
}
/* Light-bodied pages (the legal set) get a solid bar: a 44%-opaque dark bar
   over white reads as washed grey, and there is no hero to float over. */
.sitenav[data-solid]{background:var(--abyss);border-bottom-color:rgba(250,250,248,.12);animation:none}

.sitenav .mark{
  display:inline-flex;align-items:center;gap:9px;margin-right:auto;
  text-decoration:none;color:var(--canvas);flex:0 0 auto;
  padding:6px 4px;border-radius:10px;
}
.sitenav .mark svg{display:block;flex:0 0 auto}
.sitenav .mark .wordmark{
  font-size:20px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--canvas);
}
.sitenav .mark .wordmark .fare{font-weight:300;color:var(--accent)}
.sitenav .mark:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring)}

.sitenav .links{display:flex;align-items:center;gap:clamp(2px,1.6vw,10px);flex-wrap:wrap}
.sitenav .links a{
  display:inline-block;padding:9px 12px;border-radius:10px;
  font-size:15px;font-weight:600;letter-spacing:-.005em;
  color:var(--canvas-72);text-decoration:none;
  transition:color .18s,background .18s;
}
.sitenav .links a:hover{color:var(--canvas);background:rgba(255,255,255,.06)}
.sitenav .links a:focus-visible{outline:none;color:var(--canvas);box-shadow:0 0 0 3px var(--accent-ring)}
.sitenav .links a[aria-current="page"]{color:var(--canvas)}
.sitenav .links a[aria-current="page"]::after{
  content:"";display:block;height:2px;margin-top:5px;border-radius:2px;background:var(--accent);
}

.sitenav .nav-cta{
  flex:0 0 auto;padding:10px 18px;border-radius:12px;
  font-size:15px;font-weight:800;letter-spacing:.01em;
  color:#04211F;background:var(--accent);text-decoration:none;
  box-shadow:0 8px 24px -10px rgba(22,182,180,.7);
  transition:filter .2s,transform .12s ease,box-shadow .2s;
}
.sitenav .nav-cta:hover{filter:brightness(1.08);box-shadow:0 12px 28px -10px rgba(22,182,180,.85)}
.sitenav .nav-cta:active{transform:translateY(1px)}
.sitenav .nav-cta:focus-visible{outline:none;box-shadow:0 0 0 4px var(--accent-ring)}

/* Narrow: the wordmark and CTA hold the top row, the links wrap under them.
   Four links do not need a hamburger. */
@media (max-width:640px){
  .sitenav{padding:8px 14px 6px}
  .sitenav .mark .wordmark{font-size:18px}
  .sitenav .links{order:3;width:100%;justify-content:flex-start;gap:0;margin-top:2px}
  .sitenav .links a{padding:8px 10px;font-size:14px}
  .sitenav .nav-cta{padding:9px 14px;font-size:14px}
}

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

/* Skip link, so keyboard users are not stuck in the nav on every page */
.skip{
  position:absolute;left:-9999px;top:0;z-index:60;
  padding:12px 18px;border-radius:0 0 12px 0;
  background:var(--accent);color:#04211F;font-weight:800;text-decoration:none;
}
.skip:focus{left:0}

/* ---------- Site footer ------------------------------------------------- */
.sitefoot{padding:36px 20px 40px;text-align:center;font-size:13px;color:var(--muted);
  border-top:1px solid var(--hairline)}
.sitefoot nav{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:center}
.sitefoot a{color:var(--canvas-72);text-decoration:none;padding:8px 6px;border-radius:8px;
  transition:color .18s}
.sitefoot a:hover{color:var(--canvas);text-decoration:underline}
.sitefoot a:focus-visible{outline:none;color:var(--canvas);box-shadow:0 0 0 3px var(--accent-ring)}
.sitefoot .sep{color:var(--muted);opacity:.55}
/* wrapped, a middot lands at the start or end of a line; the gap reads better */
@media (max-width:560px){
  .sitefoot nav{gap:2px 14px}
  .sitefoot .sep{display:none}
}

/* ---------- Article prose ---------------------------------------------- */
/* One measure, one rhythm. Anything wider than the measure (tables, photo
   grids, callouts) opts out with .bleed. */
.article{padding:clamp(40px,7vw,72px) clamp(18px,5vw,40px) clamp(56px,9vw,96px)}
.article .measure{max-width:680px;margin-inline:auto}
.article .bleed{max-width:1080px;margin-inline:auto}

.art-head{max-width:680px;margin:0 auto clamp(34px,6vw,54px);text-align:left}
.art-kicker{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--accent)}
.art-head h1{margin-top:14px;font-size:clamp(34px,6.4vw,60px);font-weight:800;
  letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
.art-standfirst{margin-top:18px;max-width:46ch;font-size:clamp(17px,2.6vw,21px);
  line-height:1.5;color:var(--canvas-72);font-weight:500;text-wrap:pretty}
.art-meta{margin-top:22px;padding-top:18px;border-top:1px solid var(--hairline);
  font-size:13px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}
/* The separator belongs to the item that FOLLOWS it, so wrapping never strands
   a middot at the end of a line. Narrow screens wrap this line for real, and a
   middot at the START of a line reads just as wrong, so there the gap alone
   separates the items. */
.art-meta .sep{display:none}
.art-meta > span + span::before{content:"\00b7";opacity:.55;margin-right:8px}
@media (max-width:560px){
  .art-meta{gap:2px 16px}
  .art-meta > span + span::before{content:none}
}

.article h2{margin-top:clamp(46px,7vw,72px);font-size:clamp(25px,4.2vw,36px);font-weight:800;
  letter-spacing:-.03em;line-height:1.1;text-wrap:balance}
.article h2 .tint{color:var(--accent)}
.article h3{margin-top:clamp(30px,4vw,42px);font-size:clamp(18px,2.6vw,22px);font-weight:700;
  letter-spacing:-.015em}
.article p{margin-top:18px;font-size:17px;line-height:1.68;color:var(--canvas-72)}
.article p.lead{font-size:19px;color:var(--canvas)}
.article strong{color:var(--canvas);font-weight:700}
.article a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(22,182,180,.45)}
.article a:hover{text-decoration-color:var(--accent)}
.article ul,.article ol{margin-top:18px;padding-left:22px}
.article li{margin-top:9px;font-size:17px;line-height:1.62;color:var(--canvas-72)}
.article li::marker{color:var(--accent)}
.article hr{margin:clamp(44px,6vw,64px) 0;border:none;border-top:1px solid var(--hairline)}

/* Pull-out fact. Used sparingly, the coral spark of the page. */
.article .callout{
  margin-top:30px;padding:22px 24px;border-radius:18px;
  border:1px solid var(--hairline);border-left:3px solid var(--accent);
  background:linear-gradient(180deg,rgba(22,182,180,.08),rgba(255,255,255,.02));
}
.article .callout p{margin-top:0;color:var(--canvas);font-size:17px}
.article .callout p + p{margin-top:12px;color:var(--canvas-72)}

/* Figures and photo tiles: product shots are cut out on white, so they get a
   light tile rather than floating on the dark page. */
.article figure{margin-top:32px}
.article figcaption{margin-top:12px;font-size:13px;color:var(--muted);line-height:1.5}
.phototile{background:var(--brand-canvas);border-radius:16px;overflow:hidden;
  border:1px solid rgba(0,0,0,.06)}
.phototile img{display:block;width:100%;height:auto}

/* Data tables scroll inside their own box; the page never scrolls sideways. */
.tablewrap{margin-top:28px;overflow-x:auto;border:1px solid var(--hairline);border-radius:16px;
  -webkit-overflow-scrolling:touch}
/* A long table becomes a panel rather than 6000px of page. The sticky header
   only earns its keep once the rows scroll inside a box. */
.tablewrap.tall{max-height:min(70vh,620px);overflow:auto;overscroll-behavior:contain}
.tablewrap::-webkit-scrollbar{width:10px;height:10px}
.tablewrap::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:5px}
.tablewrap::-webkit-scrollbar-track{background:transparent}
.article table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.article thead th{position:sticky;top:0;z-index:1;
  background:#0B1E1F;color:var(--canvas);text-align:left;font-weight:700;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;padding:13px 14px;
  border-bottom:1px solid var(--hairline);white-space:nowrap}
.article tbody td{padding:12px 14px;color:var(--canvas-72);
  border-top:1px solid rgba(250,250,248,.07);vertical-align:middle}
.article tbody tr:hover td{background:rgba(255,255,255,.03)}
.article td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.article td.name{color:var(--canvas);font-weight:600}

/* Verdict pills, same three-state language as the app: fits / tight / over. */
.pill{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;
  letter-spacing:.01em;white-space:nowrap;border:1px solid transparent}
.pill.ok{color:#7BE8C4;background:rgba(46,204,150,.12);border-color:rgba(46,204,150,.32)}
.pill.tight{color:#FFC98A;background:rgba(255,177,79,.12);border-color:rgba(255,177,79,.32)}
.pill.no{color:#FF9C82;background:rgba(255,107,74,.12);border-color:rgba(255,107,74,.34)}
.pill.unk{color:var(--muted);background:rgba(255,255,255,.05);border-color:var(--hairline)}

/* Closing block, identical on every article. */
.art-end{margin-top:clamp(52px,8vw,84px);padding:clamp(26px,4vw,38px);border-radius:22px;
  border:1px solid var(--hairline);
  background:linear-gradient(180deg,rgba(22,182,180,.10),rgba(255,255,255,.02));text-align:center}
.art-end h2{margin-top:0;font-size:clamp(22px,3.4vw,30px)}
.art-end p{margin-top:14px;margin-inline:auto;max-width:44ch;color:var(--canvas-72)}
.art-end .row{margin-top:26px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.art-end .btn{display:inline-flex;align-items:center;padding:15px 26px;border-radius:14px;
  font-size:16px;font-weight:800;text-decoration:none;transition:filter .2s,transform .12s ease}
.art-end .btn.primary{color:#04211F;background:var(--accent);
  box-shadow:0 10px 30px -10px rgba(22,182,180,.65)}
.art-end .btn.ghost{color:var(--canvas);border:1px solid var(--hairline);
  background:rgba(255,255,255,.04)}
.art-end .btn:hover{filter:brightness(1.08)}
.art-end .btn:active{transform:translateY(1px)}
.art-end .btn:focus-visible{outline:none;box-shadow:0 0 0 4px var(--accent-ring)}

/* ---------- Articles index --------------------------------------------- */
.idx-head{max-width:1080px;margin:0 auto;padding:clamp(48px,8vw,86px) clamp(18px,5vw,40px) 0}
.idx-head h1{font-size:clamp(38px,7vw,64px);font-weight:800;letter-spacing:-.04em;line-height:.98}
.idx-head h1 .tint{color:var(--accent)}
.idx-head p{margin-top:18px;max-width:48ch;font-size:clamp(16px,2.4vw,19px);line-height:1.55;
  color:var(--canvas-72)}

.cards{max-width:1080px;margin:clamp(34px,6vw,54px) auto 0;
  padding:0 clamp(18px,5vw,40px) clamp(56px,9vw,96px);
  display:grid;gap:clamp(16px,2.5vw,22px);grid-template-columns:repeat(2,1fr)}
@media (max-width:820px){.cards{grid-template-columns:1fr}}

.card{position:relative;display:flex;flex-direction:column;
  border:1px solid var(--hairline);border-radius:20px;overflow:hidden;
  background:rgba(255,255,255,.025);
  transition:border-color .2s,transform .2s var(--ease-out),background .2s}
.card:hover{border-color:rgba(22,182,180,.42);transform:translateY(-3px);
  background:rgba(255,255,255,.045)}
.card:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.card .thumb{aspect-ratio:16/9;background:var(--brand-canvas);overflow:hidden;
  border-bottom:1px solid var(--hairline);position:relative}
/* Product shots are cut out on white and mostly portrait, so they are contained
   on their tile rather than cropped. A cover-crop of a board bag is a stripe.
   The image is absolutely placed and centred with margin:auto rather than sized
   with height:100%. A percentage height against an auto grid row falls back to
   the intrinsic height, which let a 353x900 bag overflow a 209px tile and get
   clipped, so contain never applied. Against a positioned box the percentage
   always resolves. */
.card .thumb img{display:block;position:absolute;inset:14px;width:auto;height:auto;
  max-width:calc(100% - 28px);max-height:calc(100% - 28px);margin:auto}
.card .body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.card .tag{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--accent)}
.card h2{margin-top:11px;font-size:clamp(20px,2.8vw,25px);font-weight:800;letter-spacing:-.025em;
  line-height:1.14;text-wrap:balance}
.card h2 a{color:var(--canvas);text-decoration:none}
/* the whole card is the hit area, the <a> keeps the semantics */
.card h2 a::after{content:"";position:absolute;inset:0}
.card h2 a:focus-visible{outline:none}
.card .dek{margin-top:12px;font-size:15px;line-height:1.55;color:var(--canvas-72);flex:1}
.card .meta{margin-top:20px;font-size:12.5px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}
.card .meta .sep{opacity:.55}

/* The lead story spans the grid: image beside the copy, so a short list still
   reads as an edited page instead of one card and a dead column. */
.card.feature{grid-column:1 / -1;flex-direction:row;align-items:stretch}
/* No aspect-ratio here: the tile stretches to the copy beside it. The image is
   already out of flow, so a portrait shot cannot push the card past 1000px. */
.card.feature .thumb{flex:0 0 40%;aspect-ratio:auto;min-height:280px;
  border-bottom:none;border-right:1px solid var(--hairline)}
.card.feature .thumb img{inset:18px;max-width:calc(100% - 36px);max-height:calc(100% - 36px)}
.card.feature .body{padding:clamp(26px,3.6vw,40px);justify-content:center}
.card.feature h2{font-size:clamp(24px,3.6vw,36px);letter-spacing:-.03em}
.card.feature .dek{margin-top:15px;font-size:16.5px;max-width:46ch;flex:0 1 auto}
.card.feature .meta{margin-top:22px}
@media (max-width:820px){
  .card.feature{flex-direction:column}
  .card.feature .thumb{flex:none;aspect-ratio:16/10;min-height:0;
    border-right:none;border-bottom:1px solid var(--hairline)}
}

@media (prefers-reduced-motion:reduce){
  .card,.card:hover{transition:none;transform:none}
  .sitenav{animation:none;border-bottom-color:var(--hairline)}
}
