/* Self-hosted webfonts (tools/fetch-fonts.mjs) — the CSP forbids remote fonts. */
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/oswald-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/oswald-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Oswald';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/oswald-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Oswald';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/oswald-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Rubik';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/rubik-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Rubik';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/rubik-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Rubik';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/rubik-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Rubik';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/rubik-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Rubik';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/rubik-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Rubik';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/rubik-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ══════════════════════════════════════════════════════════════════════════
   gifts-for-boyfriend.com — street bold, color-block (see DESIGN.md).
   Ported from sketch/styles.css. Deltas: the newsletter (.signup) block is
   gone, the checkbox-hack menu is a real button keyed off [aria-expanded],
   the invented .price chip and the numeric rating .meter are gone (the 5-bar
   motif survives as .barmark, a decorative rule that carries no score), and
   the weights are the ones actually self-hosted: Oswald 500/600, Rubik
   400/500/700.
   Contrast: flare (#ff3b1f) is 3.13:1 on bone — large display type and fills
   only. Small type on bone is coal (15.9), bone-mute (6.75) or cobalt (4.64);
   small type on coal may be flare (5.09), on-coal (14.4) or on-coal-mute (7.1).
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --bone:#f2f0eb; --bone-mute:#55534d;
  --coal:#14161a; --coal-soft:#23262c; --on-coal:#e8e5df; --on-coal-mute:#a6a29a;
  --flare:#ff3b1f; --on-flare:#14161a; --deep-flare:#3a1207;
  --cobalt:#2b59ff;
  --font-display:'Oswald','Arial Narrow',sans-serif;
  --font-body:'Rubik','Segoe UI',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bone);color:var(--coal);font-family:var(--font-body);font-weight:400;font-size:17px;line-height:1.7;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:.94;letter-spacing:.01em;text-transform:uppercase}
h1{font-size:clamp(2.4rem,6.2vw,5.6rem)}
h2{font-size:clamp(1.8rem,3.8vw,2.9rem)}
h3{font-size:1.3rem;line-height:1.06}
h4{font-size:1.05rem}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.wrap-flush{max-width:1200px;margin:0 auto;padding:0}
.section{padding:78px 0}
.section-tight{padding:56px 0}
.kicker{display:inline-block;font-family:var(--font-body);font-weight:500;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bone-mute)}
.kicker-cobalt{color:var(--cobalt)}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:2px}
.blk-coal{background:var(--coal);color:var(--on-coal)}
.blk-coal h2,.blk-coal h3{color:var(--on-coal)}
.blk-coal p{color:var(--on-coal-mute)}
.blk-coal .kicker{color:var(--flare)}
.blk-flare{background:var(--flare);color:var(--on-flare)}
.blk-flare p{color:var(--deep-flare)}
.blk-flare .kicker{color:var(--on-flare)}

/* the 5-bar motif, kept as a structural rule — never a score */
.barmark{display:block;width:92px;height:12px;margin:0 0 18px;
  background:repeating-linear-gradient(90deg,var(--flare) 0 14px,transparent 14px 19px)}
.blk-coal .barmark{background:repeating-linear-gradient(90deg,var(--flare) 0 14px,transparent 14px 19px)}
.blk-flare .barmark{background:repeating-linear-gradient(90deg,var(--on-flare) 0 14px,transparent 14px 19px)}

/* ---------- buttons + underline links ---------- */
.btn{display:inline-block;font-family:var(--font-display);font-weight:600;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;padding:15px 30px;border:2px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn-flare{background:var(--flare);color:var(--on-flare)}
.btn-flare:hover{background:var(--coal);color:var(--bone)}
.btn-coal{background:var(--coal);color:var(--bone)}
.btn-coal:hover{background:var(--flare);color:var(--on-flare)}
.btn-bone{background:var(--bone);color:var(--coal)}
.btn-bone:hover{background:var(--flare);color:var(--on-flare)}
.btn-out{background:transparent;border-color:currentColor}
.btn-out:hover{background:var(--coal);color:var(--bone);border-color:var(--coal)}
.blk-coal .btn-out:hover,.hero-l .btn-out:hover{background:var(--bone);color:var(--coal);border-color:var(--bone)}
.ulink{position:relative;font-weight:500;color:var(--cobalt)}
.ulink::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:3px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .22s ease-out}
.ulink:hover::after,.ulink:focus-visible::after{transform:scaleX(1)}

/* ---------- thick-underline nav ---------- */
.topbar{background:var(--bone);position:sticky;top:0;z-index:70}
.topbar-in{max-width:1200px;margin:0 auto;padding:0 24px;min-height:74px;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:600;font-size:1.28rem;text-transform:uppercase;letter-spacing:.02em;margin-right:auto}
.brand svg{flex:none}
.nav-links{display:flex;list-style:none;gap:28px;align-items:center}
.nav-links a{position:relative;font-family:var(--font-display);font-weight:500;font-size:.98rem;text-transform:uppercase;letter-spacing:.04em;padding-bottom:5px}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:4px;background:var(--flare);transform:scaleX(0);transform-origin:left;transition:transform .22s ease-out}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-links a[aria-current="page"]::after{transform:scaleX(1)}

/* ---------- color-block hero ---------- */
.hero{display:grid;grid-template-columns:1.05fr .95fr;min-height:clamp(440px,58vh,620px);position:relative}
.hero-l{background:var(--coal);color:var(--on-coal);display:flex;flex-direction:column;justify-content:center;padding:70px clamp(24px,4vw,64px);padding-left:max(24px,calc((100vw - 1200px)/2 + 24px))}
.hero-l .kicker{color:var(--flare)}
.hero-r{background:var(--flare);position:relative;overflow:hidden}
.hero h1{max-width:12ch}
.hero-lede{color:var(--on-coal-mute);max-width:40ch;margin:24px 0 30px;font-size:1.05rem}
.hero-cta{display:flex;gap:0;flex-wrap:wrap}
/* Cutout: the blob straddles the vertical seam between the coal and flare
   blocks. No remote image — an inline SVG in the site palette. */
.cutout{position:absolute;top:50%;left:0;transform:translate(-20%,-50%);width:min(380px,42vw);
  animation:cut-shift .8s cubic-bezier(.2,.8,.2,1) both}
.cutout svg{width:100%;height:auto;display:block}
@keyframes cut-shift{from{transform:translate(-30%,-50%);opacity:0}to{transform:translate(-20%,-50%);opacity:1}}
.hero-tags{position:absolute;right:clamp(20px,4vw,52px);bottom:34px;display:flex;flex-direction:column;gap:6px;align-items:flex-end;font-family:var(--font-display);text-transform:uppercase;font-size:.9rem;letter-spacing:.06em;color:var(--on-flare)}

/* ---------- stacked tile grid (gutterless) ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.tiles-2{grid-template-columns:repeat(2,1fr)}
.tile{position:relative;overflow:hidden;padding:34px 30px 32px;display:flex;flex-direction:column;gap:12px;background:var(--bone);color:var(--coal);isolation:isolate;min-width:0}
.tile:nth-child(6n+2),.tile:nth-child(6n+4){background:var(--coal);color:var(--on-coal)}
.tile:nth-child(6n+2) p,.tile:nth-child(6n+4) p{color:var(--on-coal-mute)}
.tile:nth-child(6n+6){background:var(--coal-soft);color:var(--on-coal)}
.tile:nth-child(6n+6) p{color:var(--on-coal-mute)}
.tile-coal{background:var(--coal)!important;color:var(--on-coal)!important}
.tile-coal p{color:var(--on-coal-mute)!important}
.tile-soft{background:var(--coal-soft)!important;color:var(--on-coal)!important}
.tile-soft p{color:var(--on-coal-mute)!important}
.tile::before{content:"";position:absolute;inset:0;background:var(--flare);transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1);z-index:-1}
a.tile:hover::before,.tile:focus-within::before{transform:translateY(0)}
a.tile:hover,.tile:focus-within{color:var(--on-flare)}
a.tile:hover p,.tile:focus-within p{color:var(--deep-flare)}
a.tile:hover .num,.tile:focus-within .num{color:var(--on-flare);opacity:.35}
.num{font-family:var(--font-display);font-weight:600;font-size:3.2rem;line-height:.9;color:var(--flare);opacity:.9;transition:color .3s,opacity .3s}
.tile img{width:calc(100% + 60px);margin:-34px -30px 6px;height:210px;object-fit:cover}
.tile p{font-size:.95rem}
.tile .btn{margin-top:auto;align-self:flex-start}
.tile .meta{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.1em;font-size:.86rem;opacity:.82}
.flag{display:inline-block;font-family:var(--font-display);text-transform:uppercase;font-size:.78rem;letter-spacing:.1em;padding:4px 10px;background:var(--flare);color:var(--on-flare);align-self:flex-start}
.flag-cobalt{background:var(--cobalt);color:#fff}
.flag-bone{background:var(--bone);color:var(--coal)}

/* ---------- heads ---------- */
.head{max-width:640px;margin-bottom:40px}
.head p{margin-top:14px}
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;flex-wrap:wrap;margin-bottom:40px}
.head-row h2{max-width:18ch}
.slash{color:var(--flare)}

/* ---------- article ---------- */
.page-head{padding:66px 0 44px;background:var(--coal);color:var(--on-coal)}
.page-head .kicker{color:var(--flare)}
.page-head p{color:var(--on-coal-mute);max-width:56ch;margin-top:16px}
.page-head a{color:var(--flare)}
.article{max-width:720px;margin:0 auto;padding:52px 24px 86px}
.byline{display:flex;align-items:center;gap:13px;margin:0 0 30px;padding-bottom:18px;border-bottom:4px solid var(--coal);font-size:.88rem;color:var(--bone-mute)}
.byline a{color:var(--cobalt);font-weight:500}
.avatar{width:48px;height:48px;background:var(--flare);color:var(--on-flare);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:600;font-size:1.05rem;flex:none}
.article h2{margin:46px 0 14px}
.article h3{margin:30px 0 8px;font-size:1.1rem}
.article p{margin:16px 0}
.article ul,.article ol{margin:16px 0 16px 22px}
.article li{margin:9px 0;padding-left:6px}
.article img{margin:30px 0}
.article a{color:var(--cobalt);font-weight:500}
.toc{background:var(--coal);color:var(--on-coal);padding:24px 28px;margin:28px 0}
.toc strong{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.12em;font-size:.9rem;color:var(--flare)}
.toc ol{margin:12px 0 0 20px}
.toc a{color:var(--on-coal)}
.callout{background:var(--flare);color:var(--on-flare);padding:26px 28px;margin:32px 0}
.callout h4{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.12em;font-size:.9rem;margin-bottom:10px}
.callout p{margin:8px 0;font-size:.97rem;color:var(--deep-flare)}
.callout a{color:var(--coal);font-weight:500;text-decoration:underline}
.faq details{border-bottom:2px solid rgba(20,22,26,.16);padding:18px 0}
.faq summary{font-family:var(--font-display);text-transform:uppercase;font-size:1.06rem;cursor:pointer}
.faq p{color:var(--bone-mute);margin-top:10px;font-size:.96rem}

/* ---------- prose / contact panel / author ---------- */
.prose{max-width:720px;margin:0 auto}
.prose p{margin:16px 0}
.prose h2{margin:42px 0 12px}
.prose ul,.prose ol{margin:16px 0 16px 22px}
.prose li{margin:9px 0;padding-left:6px}
.prose a{color:var(--cobalt);font-weight:500}
.panel{background:var(--coal);color:var(--on-coal);padding:36px;max-width:760px;margin:0 auto 34px}
.panel h2,.panel h3{color:var(--on-coal)}
.panel p{color:var(--on-coal-mute)}
.panel .kicker{color:var(--flare)}
.author-top{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.avatar-xl{width:110px;height:110px;font-size:2.2rem}

/* ---------- footer ---------- */
footer{background:var(--coal);color:var(--on-coal);padding:64px 0 30px}
.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px}
.foot h4{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.14em;font-size:.88rem;color:var(--flare);margin-bottom:14px}
.foot ul{list-style:none}
.foot li{margin:10px 0}
.foot a{color:var(--on-coal-mute);font-size:.93rem}
.foot a:hover{color:var(--on-coal)}
.foot .brand{color:var(--on-coal);margin-bottom:14px}
.disclosure{color:var(--on-coal-mute);font-size:.86rem;max-width:40ch}
.disclosure a{color:var(--flare)}
.copyright{margin-top:44px;padding-top:20px;border-top:2px solid #2c2f36;color:var(--on-coal-mute);font-size:.8rem;letter-spacing:.06em;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-family:var(--font-display);text-transform:uppercase}

/* ---------- side-slide reveal ---------- */
.reveal{opacity:0;transform:translateX(-24px);transition:opacity .35s ease,transform .4s cubic-bezier(.2,.9,.3,1)}
.tiles>.reveal:nth-child(even){transform:translateX(24px)}
.reveal.in{opacity:1;transform:none}

/* ══════════════════════════════════════════════════════════════════════════
   port additions: engine classes the sketch never had
   ══════════════════════════════════════════════════════════════════════════ */

/* Shared-view containers map onto the site's own .wrap. */
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.container-narrow{max-width:760px}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--flare);color:var(--on-flare);
  font-family:var(--font-display);text-transform:uppercase;font-size:.85rem;letter-spacing:.06em;
  padding:14px 22px;z-index:200}
.skip-link:focus{left:0}

/* Breadcrumbs (every non-home route). */
.breadcrumb{margin:0 0 18px}
.breadcrumb-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;font-family:var(--font-display);
  font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-mute)}
.breadcrumb-list li+li::before{content:"/";margin-right:8px;color:var(--flare)}
.breadcrumb-list a{color:var(--bone-mute)}
.breadcrumb-list a:hover{color:var(--coal)}
.breadcrumb-list [aria-current="page"]{color:var(--coal)}
.page-head .breadcrumb-list,.page-head .breadcrumb-list a{color:var(--on-coal-mute)}
.page-head .breadcrumb-list a:hover,.page-head .breadcrumb-list [aria-current="page"]{color:var(--on-coal)}

/* Article chrome. */
.standfirst{font-size:1.14rem;color:var(--bone-mute);margin:18px 0 0;max-width:60ch}
.page-head .standfirst{color:var(--on-coal-mute)}
.article-cover{width:100%;height:auto;margin:0 0 8px}
.disclaimer{background:var(--coal);color:var(--on-coal);border-left:12px solid var(--flare);
  padding:20px 24px;margin:26px 0}
.disclaimer p{margin:0;color:var(--on-coal-mute);font-size:.95rem}
.toc a[aria-current]{color:var(--flare)}
.article-body h2,.article-body h3,.article-body h4{scroll-margin-top:96px}
.article-body table{width:100%;border-collapse:collapse;margin:24px 0;font-size:.95rem}
.article-body th,.article-body td{padding:11px 13px;text-align:left;border-bottom:2px solid rgba(20,22,26,.16)}
.article-body th{background:var(--coal);color:var(--on-coal);font-family:var(--font-display);
  font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;font-weight:500;border-bottom:0}
.article-body figure{margin:26px 0}
.article-body figcaption{color:var(--bone-mute);font-size:.85rem;margin-top:8px}
.article-body blockquote{background:var(--coal);color:var(--on-coal);border-left:12px solid var(--flare);padding:18px 22px;margin:26px 0}
.article-body blockquote p{margin:0;color:var(--on-coal-mute)}
.article-body code{background:rgba(20,22,26,.08);padding:2px 6px;font-size:.9em}
.table-scroll{overflow-x:auto}
.related{margin-top:56px;border-top:4px solid var(--coal);padding-top:32px}
.related>h2{margin-bottom:24px}
.author-strip{display:flex;gap:18px;align-items:center;margin-top:34px}
.author-strip p{margin:0;font-size:.95rem}
.author-strip a{color:var(--coal);text-decoration:underline}

/* Prose used by the shared legal/author views. */
.prose h1{font-size:clamp(2rem,4.4vw,3.2rem)}
.prose h3{margin:26px 0 10px}
.legal-updated{color:var(--bone-mute);font-family:var(--font-display);font-size:.85rem;
  letter-spacing:.1em;text-transform:uppercase}

/* Author profile (shared view). */
.author-profile{max-width:760px}
.author-head__avatar img{background:var(--coal)}
.author-head__eyebrow{font-family:var(--font-display);color:var(--bone-mute);opacity:1;letter-spacing:.2em}
.author-head__name{font-family:var(--font-display);text-transform:uppercase}
.author-head__role{color:var(--bone-mute)}
.author-approach li{border:0;border-left:6px solid var(--flare);border-radius:0;
  background:var(--coal);color:var(--on-coal);padding:18px 20px}
.author-approach h3{font-family:var(--font-display);text-transform:uppercase;color:var(--on-coal)}
.author-approach p{color:var(--on-coal-mute);opacity:1}
.author-posts li{border-bottom:2px solid rgba(20,22,26,.14)}
.author-posts a{color:var(--cobalt)}
.author-posts .meta{color:var(--bone-mute);opacity:1}

/* Listing / home extras. */
.card-img{width:calc(100% + 60px);margin:-34px -30px 6px;height:210px;object-fit:cover}
.card-title{font-size:1.3rem;font-family:var(--font-display);font-weight:600;line-height:1.06;text-transform:uppercase}
.empty,.results-count{color:var(--bone-mute)}
.empty a,.results-count a{color:var(--cobalt);font-weight:500}
.page-head-search{margin-top:22px;max-width:520px}
.contact-email{font-family:var(--font-display);font-size:1.5rem;color:var(--flare);margin:12px 0;text-transform:none}
.contact-email a{color:var(--flare)}

/* Products page. */
.prod-disclosure{display:flex;gap:.7rem;align-items:flex-start;background:var(--coal);color:var(--on-coal);
  padding:16px 20px;margin-bottom:28px}
.prod-disclosure p{margin:0;font-size:.92rem;color:var(--on-coal-mute)}
.prod-disclosure a{color:var(--flare)}
.prod-disclosure svg{flex:none;margin-top:3px;color:var(--flare)}
.prod-jumpnav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.prod-cat{margin-bottom:48px}
.prod-cat>h2{margin-bottom:22px}
.prod-card-title{font-size:1.3rem}
.prod-card-blurb{font-size:.95rem}
.prod-card-seen{font-size:.85rem;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em}
.prod-card-seen a{color:var(--cobalt)}
.tile-coal .prod-card-seen a,.tile-soft .prod-card-seen a{color:var(--flare)}
.prod-card-meta{display:flex;flex-wrap:wrap;gap:.4rem;font-family:var(--font-display);font-size:.9rem;
  letter-spacing:.06em;text-transform:uppercase;margin:0}
.prod-card-cta{margin-top:auto;align-self:flex-start}
.prod-card-img{width:calc(100% + 60px);margin:-34px -30px 6px;height:210px;object-fit:contain;background:var(--coal-soft)}
.prod-card-illus{display:flex;align-items:center;justify-content:center;width:calc(100% + 60px);
  margin:-34px -30px 6px;height:210px;background:var(--coal-soft)}
.prod-card-illus svg{width:72px;height:72px}

/* In-article Amazon cards: the shared CSS mixes from currentColor; the bone
   canvas only needs the media panel, the badge and the meta line corrected. */
.amz-card{border-radius:0!important}
.amz-card .amz-media{background:color-mix(in srgb,var(--amz-accent) 12%,var(--bone));border-radius:0}
.amz-card .amz-badge{background:var(--flare);color:var(--on-flare);border-color:var(--coal);border-radius:0}
.amz-card .amz-meta{color:var(--bone-mute)}

/* On-site search form. */
.sfind-in{border:2px solid var(--coal)!important;border-radius:0!important;background:var(--bone)!important;
  color:var(--coal)!important}
.sfind-go{border:2px solid var(--flare)!important;border-radius:0!important;background:var(--flare)!important;
  color:var(--on-flare)!important;font-family:var(--font-display)!important;font-size:.88rem!important;
  letter-spacing:.06em!important;text-transform:uppercase!important}
.sfind-go:hover{background:var(--coal)!important;border-color:var(--coal)!important;color:var(--bone)!important}
.page-head .sfind-in{border-color:var(--on-coal)!important;background:var(--coal-soft)!important;color:var(--on-coal)!important}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Cookie banner. */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:150;display:flex;gap:18px;align-items:center;
  flex-wrap:wrap;justify-content:center;background:var(--coal);color:var(--on-coal);padding:16px 22px}
.cookie-banner p{color:var(--on-coal-mute);font-size:.92rem;margin:0}
.cookie-banner a{color:var(--flare)}
.cookie-banner .btn{padding:11px 22px;font-size:.82rem}
.cookie-banner[hidden]{display:none}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .foot{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .hero{grid-template-columns:1fr}
  .hero-r{min-height:280px}
  .cutout{left:50%;transform:translate(-50%,-50%);width:min(280px,62vw);animation:none}
  .hero-tags{position:static;flex-direction:row;gap:14px;padding:0 24px 22px;justify-content:flex-start}
  .tiles,.tiles-2{grid-template-columns:1fr}
  .topbar-in{min-height:62px;padding:10px 24px}
  /* both nav links stay visible on mobile; Products CTA never hides */
  .nav-links{gap:12px;flex-wrap:wrap}
  .section{padding:56px 0}
  .section-tight{padding:44px 0}
  .article{padding:40px 24px 68px}
  .panel{padding:28px 22px}
  .foot{grid-template-columns:1fr}
  .reveal,.tiles>.reveal:nth-child(even){transform:translateY(16px)}
  .reveal.in{transform:none}
}
@media(max-width:400px){
  .tile{padding:28px 22px 26px}
  .tile img,.card-img,.prod-card-img,.prod-card-illus{width:calc(100% + 44px);margin:-28px -22px 6px}
  .article-body table{font-size:.88rem}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  .cutout{animation:none}
  html{scroll-behavior:auto}
}


/* ── accessibility corrections (checked with tools/check-frontend.mjs) ────────
   1. Flare (#ff3b1f) on bone measures 3.13:1 — fine for the large display type
      the design uses it for, short of AA for the 11–14px labels in the shared
      author callout. Those two get a deeper flare of the same hue.
   2. At the 1000px breakpoint the three-column tile grid becomes two columns,
      but a tile's 30px side padding is not inside its track, so the row measured
      792px inside a 768px viewport. Border-box sizing on the tile fixes the
      overflow without touching the gutterless look. */
.about-author__k,.about-author__cta{color:#b32a12}
.tile{box-sizing:border-box;max-width:100%}
@media(max-width:1000px){
  .tiles,.tiles-2{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* The reveal's pre-animation state slid odd tiles 24px left and even tiles 24px
   right. In a gutterless full-bleed grid that pushes the last column past the
   viewport, so the page scrolled horizontally until the observer added .in
   (measured 792px inside 768px). The slide now happens on the Y axis for tiles,
   which cannot overflow the width; the block-wipe hover is untouched. */
.tiles>.reveal,.tiles>.reveal:nth-child(even){transform:translateY(20px)}
.tiles>.reveal.in{transform:none}

/* -- cross-page transitions + cookie entrance (progressive enhancement) -- */
@view-transition{navigation:auto}
@media(prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
.cookie-banner:not([hidden]){animation:cookie-in .5s cubic-bezier(.22,.9,.36,1) both}
@keyframes cookie-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.cookie-banner:not([hidden]){animation:none}}