/* Shared guide layout. Colors and fonts come from each site's :root vars (see _site.yaml). */
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:1rem}
body{background:var(--bg);color:var(--ink);font:400 1.09rem/1.72 var(--body);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--cta);outline-offset:3px}
.disp{font-family:var(--display);font-weight:800;letter-spacing:-.01em}

.gtop{position:absolute;inset:0 0 auto;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem clamp(1.1rem,4vw,3.5rem);color:#fff}
.gtop .brand{font-size:1.45rem;line-height:1;text-decoration:none}
.gtop .brand b,.gtop .brand i,.gtop .brand span{font-style:normal;color:var(--hl,var(--accent))}
.gtop nav{display:flex;gap:1.4rem;font:600 .9rem/1 var(--body)}
.gtop nav a{text-decoration:none;opacity:.88}.gtop nav a:hover{opacity:1}

/* hero: full-bleed image with the headline over a gradient */
.ghero{position:relative;min-height:min(78svh,720px);display:grid;align-items:end;overflow:hidden;isolation:isolate;color:#fff;background:var(--head,var(--bg))}
.ghero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.ghero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.45) 45%,rgba(0,0,0,.15) 75%,rgba(0,0,0,.35) 100%)}
.ghero.noimg{min-height:22rem}
.ghero-in{width:100%;max-width:62rem;padding:7rem clamp(1.1rem,4vw,3.5rem) 2.6rem}
.crumbs{font:600 .82rem/1 var(--body);opacity:.85;margin-bottom:1rem}
.crumbs a{text-decoration:none}.crumbs a:hover{text-decoration:underline}
.ghero h1{font-size:clamp(2.3rem,5.4vw,4.4rem);line-height:.98;margin-bottom:1rem;text-wrap:balance}
.dek{font-size:clamp(1.05rem,1.6vw,1.3rem);max-width:46rem;opacity:.95;text-wrap:pretty}
.meta{margin-top:1.1rem;font-size:.86rem;opacity:.85}
.method{display:inline-block;font:700 .7rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;background:var(--hl,var(--accent));color:#111;padding:.4rem .55rem;border-radius:4px;margin-right:.6rem;vertical-align:1px}

.gwrap{max-width:76rem;min-width:0;margin:0 auto;padding:clamp(2rem,5vw,4rem) clamp(1.1rem,4vw,3.5rem) 4rem;display:grid;grid-template-columns:minmax(0,46rem) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.gbody > *+*{margin-top:1.2rem}
.gbody h2{font:800 clamp(1.7rem,3vw,2.4rem)/1.08 var(--display);margin-top:3rem;scroll-margin-top:1rem;text-wrap:balance}
.gbody h3{font:700 1.3rem/1.25 var(--body);margin-top:2rem}
.gbody p,.gbody li{text-wrap:pretty}
.gbody ul,.gbody ol{padding-left:1.25rem}
.gbody li+li{margin-top:.35rem}
.gbody a{color:var(--accent);text-underline-offset:3px}
.gbody strong{font-weight:700}
.gbody figure{margin:2rem 0}
.gbody figure img{border-radius:14px;width:100%}
.gbody figcaption{font-size:.88rem;color:var(--muted);margin-top:.6rem}
.gbody figure.wide{margin-left:-2rem;margin-right:-2rem}
.callout{background:var(--panel);border-left:4px solid var(--accent);padding:1.1rem 1.3rem;border-radius:0 10px 10px 0}
.callout p+p{margin-top:.6rem}

/* quick picks + toc */
.quick,.toc{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1.2rem 1.3rem}
.ql{font:700 .74rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:.8rem}
.quick table{width:100%;border-collapse:collapse}
.quick th,.quick td{padding:.65rem .4rem;border-top:1px solid var(--line);text-align:left;vertical-align:middle;font-size:.98rem}
.quick tr:first-child th,.quick tr:first-child td{border-top:0}
.quick th{font-weight:600;color:var(--muted);width:42%}
.quick td a{color:var(--ink);font-weight:700}
.quick td:last-child{text-align:right;width:1%}
a.mini{display:inline-block;background:var(--cta);color:var(--ctaink)!important;text-decoration:none;font:700 .8rem/1 var(--body);padding:.55rem .75rem;border-radius:999px;white-space:nowrap}
.toc ol{padding-left:1.2rem;columns:2;column-gap:2rem;font-size:.95rem}
.toc a{color:var(--ink);text-decoration:none}.toc a:hover{color:var(--accent)}

/* product cards */
.pcard{background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-top:2rem!important;scroll-margin-top:1rem}
.pcard header{padding:1.3rem 1.4rem 0}
.award{display:inline-block;font:700 .72rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;background:var(--accent);color:#fff;padding:.42rem .6rem;border-radius:4px;margin-bottom:.7rem}
.pcard h3{font:800 1.55rem/1.1 var(--display);margin:0}
.social{margin-top:.45rem;font-size:.88rem;color:var(--muted);display:flex;gap:.8rem}
.stars{color:var(--hl,var(--cta));font-weight:700}
.pbody{padding:1rem 1.4rem 1.4rem}
.pbody > p+p{margin-top:.8rem}
.specs{list-style:none;padding:0!important;display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:.5rem;margin:1.1rem 0}
.specs li{margin:0!important;display:flex;justify-content:space-between;gap:.6rem;border-bottom:1px dashed var(--line);padding:.35rem 0;font-size:.9rem}
.specs span{color:var(--muted)}.specs b{text-align:right}
.pc{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin:1rem 0 1.2rem}
.pc h4{font:700 .78rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.5rem}
.pros h4{color:var(--accent)}.cons h4{color:var(--accent2)}
.pc ul{padding-left:1.1rem;font-size:.95rem}
a.buy{display:inline-flex;align-items:center;gap:.5rem;background:var(--cta);color:var(--ctaink)!important;text-decoration:none!important;font:800 1rem/1 var(--body);padding:1rem 1.4rem;border-radius:999px;transition:transform .15s,filter .15s}
a.buy::after{content:"→"}
a.buy:hover{transform:translateY(-2px);filter:brightness(1.06)}
p.detail{font-size:.95rem}
p.detail a{font-weight:600}
p.detail a::before{content:"🔍 "}

/* comparison tables */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.tablewrap table{width:100%;min-width:640px;border-collapse:collapse;font-size:.93rem}
.tablewrap th,.tablewrap td{padding:.75rem .9rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.tablewrap thead th{font:700 .74rem/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--bg)}
.tablewrap tbody tr:last-child td,.tablewrap tbody tr:last-child th{border-bottom:0}
.tablewrap tbody th{font-weight:700}

/* faq */
.faq{margin-top:3rem}
.faq details{border-bottom:1px solid var(--line);padding:1rem 0}
.faq summary{cursor:pointer;font-weight:700;font-size:1.08rem;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::after{content:"+";color:var(--accent);font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details div{margin-top:.6rem;color:var(--muted)}

/* sidebar */
.related{position:sticky;top:1.5rem;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1.3rem}
.related h2{font:800 1.3rem/1 var(--display);margin-bottom:.8rem}
.related ul{list-style:none;padding:0}
.related li{border-top:1px solid var(--line)}
.related a{display:block;padding:.7rem 0;text-decoration:none;font-weight:600;font-size:.95rem}
.related a:hover{color:var(--accent)}

.gfoot{border-top:1px solid var(--line);padding:2.4rem clamp(1.1rem,4vw,3.5rem);display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;color:var(--muted);font-size:.9rem}
.gfoot nav{display:flex;gap:1.3rem}

@media (max-width:1000px){
  .gwrap{grid-template-columns:minmax(0,1fr)}
  .related{position:static}
  /* phone nav: see "Round 1" block (pill row) */
  .gbody figure.wide{margin-left:0;margin-right:0}
}
@media (max-width:640px){
  .ghero{min-height:70svh}
  .pc{grid-template-columns:1fr}
  .toc ol{columns:1}
  .quick th{width:auto}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* bylines and author box */
.byline a{color:inherit;font-weight:700;text-underline-offset:3px}
.authorbox{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:start;margin-top:3rem!important;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1.4rem}
.avatar{display:grid;place-items:center;width:4rem;height:4rem;border-radius:50%;background:var(--accent);color:#fff;font:800 1.3rem/1 var(--display);letter-spacing:.02em}
.authorbox p{margin:0}.authorbox p+p{margin-top:.5rem}
.aname{font:800 1.25rem/1.2 var(--display)}.aname a{color:var(--ink);text-decoration:none}
.arole{color:var(--muted);font-size:.92rem}
.areas{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0!important}
.areas li{margin:0!important;border:1px solid var(--line);border-radius:999px;padding:.35rem .8rem;font-size:.88rem;background:var(--panel)}
@media (max-width:640px){.authorbox{grid-template-columns:1fr}}

/* calculators */
.calc{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1.4rem;display:grid;gap:1rem}
.calc label{display:grid;gap:.35rem;font-weight:700;font-size:.95rem}
.calc input,.calc select{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.7rem .9rem}
.calc .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:1rem}
.calc output,.calc .result{display:block;font:800 clamp(1.6rem,3vw,2.2rem)/1.1 var(--display);color:var(--accent)}
.calc .note{font-size:.88rem;color:var(--muted)}
button[data-print]{border:0;cursor:pointer;background:var(--cta);color:var(--ctaink);font:800 1rem/1 var(--body);padding:.9rem 1.3rem;border-radius:999px}

/* printables: everything except .print-sheet disappears when printing */
.print-sheet{background:#fff;color:#111;border:1px solid var(--line);border-radius:12px;padding:1.4rem}
@media print{
  @page{size:letter;margin:.45in}
  body{background:#fff!important;color:#111!important}
  body.printable .gtop,body.printable .ghero,body.printable .related,body.printable .gfoot,body.printable .authorbox,body.printable .faq,body.printable .noprint{display:none!important}
  body.printable .gbody > *:not(.print-sheet){display:none!important}
  body.printable .gwrap{display:block;padding:0;max-width:none}
  .print-sheet{border:0;padding:0;font-size:11pt}
  .print-sheet table{width:100%;border-collapse:collapse}.print-sheet th,.print-sheet td{border:1px solid #999;padding:4px 6px}
  a{color:#111;text-decoration:none}
}

/* never let wide tables or SVGs push the page wider than the phone */
.gbody{min-width:0}.gbody svg{max-width:100%;height:auto}

/* Christmas gift guide components (2026-10-04): price-tier jump bar, tier banners, "most bought now" board */
.gg-tiers{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.4rem!important}
.gg-tiers a{flex:1 1 9.5rem;display:block;text-decoration:none;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:.85rem 1rem;color:var(--ink)!important;transition:transform .15s,border-color .15s}
.gg-tiers a:hover{transform:translateY(-2px);border-color:var(--accent)}
.gg-tiers b{display:block;font:800 1.25rem/1.1 var(--display)}
.gg-tiers span{display:block;font-size:.82rem;color:var(--muted);margin-top:.25rem}
.gg-tier{position:relative;margin-top:3.2rem!important;border-radius:18px;overflow:hidden;isolation:isolate;color:#fff;min-height:15rem;display:grid;align-items:end;background:#1a1a1a}
.gg-tier img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%;z-index:-2}
@media (min-width:481px){.gg-tier{aspect-ratio:2/1}}
.gg-tier::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(0,0,0,.85),rgba(0,0,0,.35) 60%,rgba(0,0,0,.1))}
.gg-tier > div{padding:1.4rem 1.5rem}
.gg-tier .gg-band{display:inline-block;font:700 .72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;background:var(--hl,var(--cta));color:var(--ctaink,#111);padding:.42rem .6rem;border-radius:4px;margin-bottom:.6rem}
.gbody .gg-tier h2{margin:0;color:#fff;scroll-margin-top:1rem}
.gg-tier p{margin-top:.5rem;opacity:.92;max-width:38rem;font-size:1rem}
.gg-hot{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1.2rem 1.3rem}
.gg-hot ol{list-style:none;padding:0;margin:0;counter-reset:hot}
.gg-hot li{counter-increment:hot;display:grid;grid-template-columns:2.2rem minmax(0,1fr) auto;gap:.8rem;align-items:center;padding:.7rem 0;border-top:1px solid var(--line);margin:0!important}
.gg-hot li:first-child{border-top:0}
.gg-hot li::before{content:counter(hot);font:800 1.5rem/1 var(--display);color:var(--accent);text-align:center}
.gg-hot .gg-n{font-weight:700;line-height:1.3}
.gg-hot a.amz{display:inline-block;background:var(--cta);color:var(--ctaink)!important;text-decoration:none;font:700 .8rem/1 var(--body);padding:.55rem .75rem;border-radius:999px;white-space:nowrap}
.gg-hot .gg-n small{display:block;font-weight:400;color:var(--muted);font-size:.84rem;margin-top:.15rem}
.gg-why{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.8rem}
.gg-why > div{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--accent);border-radius:12px;padding:1rem 1.1rem;font-size:.97rem}
.gg-why b{display:block;font:800 1.1rem/1.2 var(--display);margin-bottom:.35rem}
@media (max-width:480px){.gg-hot li{grid-template-columns:1.8rem minmax(0,1fr)}.gg-hot li a.amz,.gg-hot li a.mini{grid-column:2;justify-self:start}.gg-tier{min-height:12rem}}
@media (prefers-reduced-motion:reduce){.gg-tiers a{transition:none}.gg-tiers a:hover{transform:none}}

/* ==========================================================================
   Round 1 design (2026-11-02): light editorial heads, pill nav on phones,
   styled data tables, premium numerals, feature hub cards, sticky rail,
   accordion FAQ, richer footer. Variables live on body.light so they win
   over each page's inline :root block.
   ========================================================================== */
body.light{--cream:#F6F1E6;--cream2:#EAE0CB;--gold:#B8892B;--pine:#1F6F5C;--pinedk:#134A3D;--tint:#E9F2EE;--zebra:#FAF8F3;--shadow:0 1px 2px rgba(28,43,51,.06),0 8px 24px rgba(28,43,51,.08)}
.gbody{font-size:1.125rem}
.gbody p,.gbody li{line-height:1.75}
.gbody > p:first-child{font-size:1.22rem;line-height:1.65;color:var(--ink)}

/* ---- header ---- */
.gtop .brand{font-size:1.55rem;letter-spacing:-.015em}
.gtop .brand i{color:var(--hl)}
.gtop nav a{position:relative;padding:.5rem 0;opacity:1}
.gtop nav a::after{content:"";position:absolute;left:0;right:0;bottom:.2rem;height:2px;background:var(--hl);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.gtop nav a:hover::after,.gtop nav a:focus-visible::after{transform:scaleX(1)}
/* light pages (no photo): ink header over the cream band; hubs carry an inline dark style, overridden here */
body:has(.ghero.noimg) .gtop{position:absolute!important;color:var(--ink)!important;background:transparent!important}
body:has(.ghero.noimg) .gtop .brand i{color:var(--pine)}
body:has(.ghero.noimg) .gtop nav a::after{background:var(--gold)}

/* ---- light editorial band (guides without a photo, hubs, trust pages) ---- */
.ghero.noimg{min-height:0!important;color:var(--ink);background-color:var(--cream);
  background-image:radial-gradient(rgba(31,111,92,.15) 1px,transparent 1.5px),radial-gradient(110% 120% at 100% 0,rgba(242,193,78,.24),transparent 55%),linear-gradient(180deg,#FCFAF4,var(--cream));
  background-size:22px 22px,auto,auto;border-bottom:1px solid var(--cream2)}
.ghero.noimg::before{display:none}
.ghero.noimg::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:linear-gradient(90deg,var(--gold) 0 7rem,transparent 7rem)}
.ghero.noimg .ghero-in{max-width:76rem;margin:0 auto;padding:6.6rem clamp(1.1rem,4vw,3.5rem) 2.8rem!important}
.ghero.noimg .ghero-in > *{max-width:52rem}
.ghero.noimg .crumbs{color:var(--pinedk);opacity:1;font:700 .8rem/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase}
.ghero.noimg h1{color:var(--ink);font-size:clamp(2.2rem,4.8vw,3.9rem);line-height:1.03;letter-spacing:-.022em}
.ghero.noimg h1::after{content:"";display:block;width:4.5rem;height:3px;margin-top:1.15rem;background:var(--gold);border-radius:2px}
.ghero.noimg .dek{color:#33454F;opacity:1;font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.55}
.ghero.noimg .meta{color:#3F515B;opacity:1}
.ghero.noimg .method{background:var(--pinedk);color:#fff}
/* photo hero: stronger scrim behind the header and the headline column */
.ghero:not(.noimg)::before{background:linear-gradient(0deg,rgba(9,22,19,.9) 0%,rgba(9,22,19,.6) 40%,rgba(9,22,19,.14) 70%,rgba(9,22,19,.55) 100%)}
.ghero:not(.noimg) h1{text-shadow:0 2px 18px rgba(0,0,0,.35)}
.ghero:not(.noimg) .ghero-in{max-width:76rem;margin:0 auto}
.ghero:not(.noimg) .ghero-in > *{max-width:56rem}

/* ---- phone and tablet nav: horizontally scrolling pill row (CSS only) ---- */
@media (max-width:1000px){
  .gtop{flex-wrap:wrap;row-gap:.6rem;padding-top:.9rem;padding-bottom:.5rem}
  .gtop nav{display:flex;flex:1 0 100%;gap:.5rem;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 2.4rem),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 2.4rem),transparent);padding:2px 2.4rem 4px 2px;margin:0 -2px}
  .gtop nav::-webkit-scrollbar{display:none}
  .gtop nav a{flex:0 0 auto;scroll-snap-align:start;display:inline-flex;align-items:center;min-height:44px;padding:0 1rem;border-radius:999px;font-size:.95rem;white-space:nowrap;
    background:rgba(9,22,19,.35);border:1px solid rgba(255,255,255,.45)}
  .gtop nav a::after{display:none}
  body:has(.ghero.noimg) .gtop nav a{background:#fff;border-color:var(--line);color:var(--ink);box-shadow:0 1px 2px rgba(28,43,51,.06)}
  .gtop nav a:hover{border-color:var(--hl)}
  body:has(.ghero.noimg) .gtop nav a:hover{border-color:var(--pine)}
  .ghero:not(.noimg) .ghero-in{padding-top:9.5rem}
  .ghero.noimg .ghero-in{padding-top:8.8rem!important}
}
@media (max-width:640px){
  .ghero.noimg .ghero-in{padding-bottom:2.2rem!important}
  .ghero.noimg h1{font-size:clamp(2rem,8.6vw,2.6rem)}
}

/* ---- premium numerals: Fraunces for figures (Atkinson's slashed zero reads like code) ---- */
.fig,.gbody td.num,.calc output,.calc .result{font-family:var(--display);font-variant-numeric:lining-nums tabular-nums}

/* ---- data tables (bare <table> in articles; site.js wraps them in .tscroll) ---- */
.gbody > table,.tscroll table{width:100%;border-collapse:separate;border-spacing:0;font-size:1rem;line-height:1.45;background:var(--panel)}
.gbody > table{border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.gbody > table th,.gbody > table td,.tscroll th,.tscroll td{padding:.8rem 1rem;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.gbody > table thead th,.tscroll thead th{background:var(--tint);color:var(--pinedk);font:700 .8rem/1.3 var(--body);letter-spacing:.06em;text-transform:uppercase;border-top:0;border-bottom:2px solid rgba(31,111,92,.28);vertical-align:bottom}
.gbody > table tbody tr:nth-child(even) > *,.tscroll tbody tr:nth-child(even) > *{background:var(--zebra)}
.gbody > table tbody tr:first-child > *,.tscroll tbody tr:first-child > *{border-top:0}
.gbody > table tbody tr:hover > *,.tscroll tbody tr:hover > *{background:#F1F7F4}
.gbody td.num,.gbody th.num{text-align:right;white-space:nowrap}
.gbody td.num{font-weight:600;font-size:1.06rem;color:var(--ink)}
.gbody tbody td.num:last-child{color:var(--pinedk);font-weight:700}
.tscroll{position:relative;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);background:var(--panel);overflow:hidden}
.tscroll-in{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.tscroll-in:focus-visible{outline:3px solid var(--cta);outline-offset:-3px}
.tscroll.wide table{min-width:36rem}
.tscroll::after{content:"";position:absolute;top:0;right:0;bottom:0;width:2.8rem;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.96));opacity:0;transition:opacity .2s}
.tscroll.can-scroll:not(.at-end)::after{opacity:1}
.tablewrap{box-shadow:var(--shadow)}
.tablewrap thead th{background:var(--tint);color:var(--pinedk);font-family:var(--body)}
.tablewrap tbody tr:nth-child(even) > *{background:var(--zebra)}
@media (max-width:640px){
  .gbody > table th,.gbody > table td,.tscroll th,.tscroll td{padding:.7rem .75rem}
  .gbody > table,.tscroll table{font-size:.97rem}
}

/* ---- callouts, notes, quotes ---- */
.gbody blockquote{margin:2.2rem 0;padding:.4rem 0 .4rem 1.6rem;border-left:3px solid var(--gold);font:600 clamp(1.3rem,2.2vw,1.6rem)/1.4 var(--display);color:var(--pinedk);text-wrap:balance}
.gbody blockquote p{line-height:1.4}
.gbody blockquote cite,.gbody blockquote footer{display:block;margin-top:.6rem;font:400 .9rem/1.4 var(--body);color:var(--muted);font-style:normal}
.callout{background:linear-gradient(180deg,#FFFDF7,#FBF5E6);border:1px solid #EADFC4;border-left:4px solid var(--gold);border-radius:4px 14px 14px 4px;padding:1.2rem 1.4rem}
.gbody p.note{background:var(--tint);border-radius:12px;padding:1rem 1.2rem 1rem 3.1rem;font-size:1rem;color:#24363F;position:relative}
.gbody p.note::before{content:"i";position:absolute;left:1.05rem;top:1.2rem;width:1.35rem;height:1.35rem;border-radius:50%;background:var(--pine);color:#fff;font:700 .85rem/1.35rem var(--display);text-align:center}

/* ---- source links: small external mark (never on Amazon or button links) ---- */
.gbody a[target="_blank"]:not([href*="amazon."]):not([href*="amzn."]):not(.buy):not(.mini):not(.amz)::after{content:"";display:inline-block;width:.6em;height:.6em;margin-left:.22em;vertical-align:.06em;background:currentColor;opacity:.8;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.5 1.5h6v6M10.5 1.5 3 9M1.5 4v6.5H8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.5 1.5h6v6M10.5 1.5 3 9M1.5 4v6.5H8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.gbody a{text-decoration-thickness:1px;text-underline-offset:.2em}
.gbody a:hover{text-decoration-thickness:2px}

/* ---- heading rhythm ---- */
.gbody h2{position:relative;padding-top:1.5rem;margin-top:3.2rem;letter-spacing:-.018em}
.gbody h2::before{content:"";position:absolute;top:0;left:0;width:2.4rem;height:3px;border-radius:2px;background:var(--gold)}
.gbody h3{font-family:var(--display);font-weight:700;font-size:1.35rem;letter-spacing:-.01em}
.gbody ol > li::marker{font-family:var(--display);font-weight:700;color:var(--pine)}
.gbody ul > li::marker{color:var(--gold)}

/* ---- On this page box ---- */
.toc{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1.3rem 1.4rem;box-shadow:var(--shadow)}
.toc .ql,.related h2{font:700 .8rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--pinedk);margin-bottom:.8rem}
.toc ol{counter-reset:toc;list-style:none;padding-left:0}
.toc li{counter-increment:toc;display:flex;gap:.7rem;align-items:baseline;break-inside:avoid;margin:0!important;padding:.3rem 0}
.toc li::before{content:counter(toc,decimal-leading-zero);font:700 .9rem/1 var(--display);color:var(--gold);min-width:1.5rem;font-variant-numeric:lining-nums tabular-nums}
.toc a{font-weight:600;line-height:1.35;color:var(--ink)}
.toc a[aria-current="true"]{color:var(--pine)}

/* ---- Keep reading ---- */
.related{border-radius:16px;padding:1.4rem;box-shadow:var(--shadow)}
.related a{position:relative;padding:.75rem 1.4rem .75rem 0;line-height:1.35;color:var(--ink)}
.related a::after{content:"";position:absolute;right:.2rem;top:50%;width:.45rem;height:.45rem;border-top:2px solid var(--pine);border-right:2px solid var(--pine);transform:translateY(-50%) rotate(45deg);opacity:.6;transition:transform .15s,opacity .15s}
.related a:hover{color:var(--pine)}
.related a:hover::after{opacity:1;transform:translate(3px,-50%) rotate(45deg)}

/* ---- sticky rail at 1200px+ (site.js moves On this page next to Keep reading) ---- */
@media (min-width:1200px){
  .gwrap{grid-template-columns:minmax(0,46rem) minmax(17rem,22rem);justify-content:space-between}
  .rail{position:sticky;top:1.25rem;max-height:calc(100vh - 2.5rem);overflow:auto;display:grid;gap:1rem;scrollbar-width:thin;padding:2px 4px 2px 2px}
  .rail .related{position:static}
  .rail .toc ol{columns:1;font-size:.95rem}
  .rail .toc li{padding:.28rem 0}
  .rail .toc a[aria-current="true"]{font-weight:700}
  .rail .toc li:has(a[aria-current="true"])::before{color:var(--pine)}
  .rail .toc,.rail .related{box-shadow:none}
}

/* ---- FAQ: bordered accordion rows with a drawn +/- ---- */
.faq h2{margin-bottom:1rem}
.faq details{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:0;margin-top:.7rem;transition:border-color .15s,box-shadow .15s}
.faq details:hover{border-color:#BFD3CA}
.faq details[open]{border-color:var(--pine);box-shadow:var(--shadow)}
.faq summary{align-items:center;min-height:44px;padding:1.05rem 1.2rem;font:700 1.14rem/1.35 var(--display);letter-spacing:-.005em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 1.9rem;height:1.9rem;border-radius:50%;border:1.5px solid var(--pine);
  background:linear-gradient(var(--pine),var(--pine)) center/.8rem 2px no-repeat,linear-gradient(var(--pine),var(--pine)) center/2px .8rem no-repeat;transition:transform .2s}
.faq details[open] summary::after{content:"";background:linear-gradient(#fff,#fff) center/.8rem 2px no-repeat,var(--pine);transform:rotate(180deg)}
.faq summary:focus-visible{outline-offset:-3px;border-radius:14px}
.faq details div{margin:0;padding:0 1.2rem 1.2rem;color:#2C3E48;font-size:1.05rem;line-height:1.7}

/* ---- author box polish ---- */
.authorbox{box-shadow:var(--shadow)}
.avatar{background:linear-gradient(135deg,var(--pine),var(--pinedk));box-shadow:0 0 0 3px #fff,0 0 0 4px var(--gold)}

/* ---- hub pages: feature card + consistent 3:2 cards (hub inline styles load later, so selectors are stronger) ---- */
.hgrid{gap:1.5rem}
.hgrid > .hcard{position:relative;color:var(--ink);border-radius:18px;box-shadow:var(--shadow);transition:transform .25s ease,box-shadow .25s ease,border-color .25s}
.hgrid > .hcard img{aspect-ratio:3/2;width:100%;height:auto;object-fit:cover;background:var(--cream2);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.hgrid > .hcard span{position:relative;z-index:1;flex:1;background:var(--panel);padding:1.15rem 1.25rem 1.3rem;gap:.5rem}
.hgrid > .hcard b{font:700 1.24rem/1.22 var(--display);letter-spacing:-.01em;text-wrap:balance}
.hgrid > .hcard em{color:var(--muted);font-size:.98rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hgrid > .hcard span::after{content:"Read the guide";margin-top:auto;padding:.6rem 1.3rem 0 0;align-self:flex-start;font:700 .95rem/1 var(--body);color:var(--pine);
  background:linear-gradient(var(--pine),var(--pine)) right .1rem bottom .3rem/.8rem 2px no-repeat;transition:background-position .2s}
.hgrid > .hcard:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(28,43,51,.06),0 18px 40px rgba(28,43,51,.14);border-color:#C9D8D1}
.hgrid > .hcard:hover img{transform:scale(1.05)}
.hgrid > .hcard:hover span::after{background-position:right 0 bottom .3rem}
.hgrid > .hcard:focus-visible{outline:3px solid var(--cta);outline-offset:3px}
@media (min-width:760px){
  .hgrid > .hcard:first-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:stretch}
  .hgrid > .hcard:first-child img{height:100%;min-height:21rem}
  .hgrid > .hcard:first-child span{justify-content:center;padding:2rem clamp(1.5rem,3vw,2.8rem)}
  .hgrid > .hcard:first-child span::before{content:"Featured guide";font:700 .8rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--pinedk);margin-bottom:.35rem}
  .hgrid > .hcard:first-child b{font-size:clamp(1.65rem,2.6vw,2.3rem);line-height:1.1}
  .hgrid > .hcard:first-child em{font-size:1.1rem;-webkit-line-clamp:4;line-clamp:4}
  .hgrid > .hcard:first-child span::after{flex:0 0 auto;margin-top:.6rem}
}

/* ---- footer ---- */
.gfoot{background:linear-gradient(180deg,var(--cream),#F2EBDC);border-top:1px solid var(--cream2);color:#33454F;align-items:center;row-gap:.6rem;position:relative}
.gfoot::before{content:"";position:absolute;top:-1px;left:clamp(1.1rem,4vw,3.5rem);width:6rem;height:3px;background:var(--gold)}
.gfoot a{color:var(--ink);text-underline-offset:3px}
.gfoot > nav{flex-wrap:wrap;gap:0 1.3rem}
.gfoot > nav a{display:inline-flex;align-items:center;min-height:44px}
.gfoot-top{flex:1 0 100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:1.2rem 3rem;align-items:start;padding-bottom:1.6rem;margin-bottom:.4rem;border-bottom:1px solid var(--cream2)}
.gfoot-top .brand{font:800 1.75rem/1 var(--display);text-decoration:none;color:var(--ink);letter-spacing:-.015em}
.gfoot-top .brand i{font-style:normal;color:var(--pine)}
.gfoot-top p{margin-top:.75rem;max-width:27rem;font-size:1.02rem;line-height:1.55;color:#2C3E48}
.gfoot-top nav{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:0 1.2rem}
.gfoot-top nav p{grid-column:1/-1;margin:0 0 .2rem;font:700 .8rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--pinedk)}
.gfoot-top nav a{display:flex;align-items:center;min-height:44px;font-weight:700;text-decoration:none}
.gfoot-top nav a:hover{color:var(--pine);text-decoration:underline}
@media (max-width:760px){.gfoot-top{grid-template-columns:1fr}}

/* ---- reduced motion: no lifts, zooms or slides ---- */
@media (prefers-reduced-motion:reduce){
  .hgrid > .hcard,.hgrid > .hcard img,.related a::after,.faq summary::after,.gtop nav a::after,.tscroll::after,.hgrid > .hcard span::after{transition:none!important}
  .hgrid > .hcard:hover,.hgrid > .hcard:hover img{transform:none!important}
  .related a:hover::after{transform:translateY(-50%) rotate(45deg)!important}
  .faq details[open] summary::after{transform:none}
}