*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;line-height:1.7;color:#111;background:#fff}
.Banner_title__47yu5{max-width:900px;margin:0 auto;padding:0 28px}
.Module_section__eymPy{background:#111;color:#fff;padding:64px 0;margin-bottom:48px}
.Module_section__eymPy h1{font-size:42px;font-weight:800;letter-spacing:-1px;margin-bottom:8px}
.Module_section__eymPy p{font-size:18px;opacity:.7}
.Module_section__eymPy a{color:#fff;text-decoration:none;font-size:22px;font-weight:800}
.Nav_body__LJDmp{padding:0}
.Module_box__Xtq8e{padding:32px 0;border-left:4px solid #111;padding-left:24px;margin-bottom:28px}
.Module_box__Xtq8e h2{font-size:24px;font-weight:700;margin-bottom:6px}
.Module_box__Xtq8e h2 a{color:#111;text-decoration:none}
.Module_box__Xtq8e h2 a:hover{text-decoration:underline}
.Module_box__Xtq8e .Layout_head__o0BEN{font-size:12px;font-weight:600;text-transform:uppercase;color:#888;letter-spacing:1px;margin-bottom:8px}
.Module_box__Xtq8e p{font-size:15px;color:#444;margin-bottom:10px}
.Page_content__NtfQt{display:inline-block;background:#111;color:#fff;padding:8px 20px;font-size:13px;font-weight:700;text-decoration:none;text-transform:uppercase;letter-spacing:1px}
.Page_content__NtfQt:hover{background:#333}
.Header_wrap__3DhFG{padding-bottom:60px}
.Header_wrap__3DhFG h1{font-size:38px;font-weight:800;letter-spacing:-1px;margin-bottom:10px}
.Header_wrap__3DhFG time{font-size:12px;font-weight:600;text-transform:uppercase;color:#888;letter-spacing:1px;display:block;margin-bottom:28px}
.Header_wrap__3DhFG h2{font-size:26px;font-weight:700;margin:40px 0 14px}
.Header_wrap__3DhFG h3{font-size:20px;font-weight:700;margin:32px 0 10px}
.Header_wrap__3DhFG p{margin-bottom:18px;font-size:17px}
.Header_wrap__3DhFG ul,.Header_wrap__3DhFG ol{margin:0 0 18px 24px}
.Header_wrap__3DhFG a{color:#111;font-weight:600;text-decoration:underline}
.Header_wrap__3DhFG img{max-width:100%;height:auto;margin:20px 0}
.Container_body__N9YsT{background:#111;color:#888;padding:28px 0;margin-top:48px;text-align:center;font-size:12px}
.Container_body__N9YsT a{color:#888;text-decoration:none}
.Container_row__qGyGi{background:#222;color:#aaa;padding:14px 20px;margin-bottom:24px;font-size:13px;font-style:italic}
.Hero_wrapper__gnrdt{background:#1a1a1a;color:#888;padding:14px 20px;margin-top:32px;font-size:12px;border-top:3px solid #444}
.Grid_main__6BVV7{font-size:12px;font-weight:600;text-transform:uppercase;color:#666;letter-spacing:1px;margin:-20px 0 28px;padding-left:12px;border-left:2px solid #ccc}
.Card_head__jHKXR{margin:0 0 24px}
.Card_foot__MDS52{width:100%;height:auto;border-radius:0}
.Article_root__qZXbW{border-left:4px solid #111;padding-left:24px;margin-top:48px}
.Article_root__qZXbW h3{font-size:18px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}
.Article_root__qZXbW ul{list-style:none;padding:0}
.Article_root__qZXbW li{padding:6px 0}
.Article_root__qZXbW a{color:#111;text-decoration:underline;font-weight:600}
.Footer_foot__kaDyH{border-left:4px solid #ddd;padding-left:24px;margin-top:36px}
.Footer_foot__kaDyH ul{list-style:none;padding:0}
.Footer_foot__kaDyH li{padding:6px 0;font-size:16px}
.Footer_foot__kaDyH a{color:#111;text-decoration:none;font-weight:600}
.Footer_foot__kaDyH a:hover{text-decoration:underline}
.Footer_foot__kaDyH .Layout_head__o0BEN{margin:0 0 0 8px}
/* === Theme === */
:root{--primary:#5C4A38;--accent:#8AA8C9;--bg:#EDE5D2;--fg:#1F140C;--border:#C4B5A0;--r:4px;--fb:'Newsreader';--fh:'Instrument Serif'}
/* === Custom === */
/* === QA round-1 fixes (2026-07-22T21:26:56+0800) === */
/* Smart Paw Picks (pt-tech-en) — editorial rebuild.
   Notes for the next round:
   - Live template class names are obfuscated per deploy, so every selector below is
     element/structural only. Page scopes: home = main:has(> div > h2), post = main:has(> article).
   - The masthead is body > div:first-child (there is no <header> element on this build);
     the previous sheet's :root > body > header rules never matched anything.
   - Article headings live in main > hgroup > h1 + time, not main > h1 / main > time.
   - /theme-assets/hero-masthead.jpg and /article-hero.jpg both 404 on this domain,
     so the masthead identity is built from CSS (ink wash + blueprint hairlines + monogram).
   - @font-face, never @import: the deploy concatenates theme + custom after the template
     sheet, so a trailing @import is dropped and the site silently falls back to system fonts.
   - Affiliate prefix on this build is /out/ (verified live). */

/* ---------- 1. Type: one display voice, one text voice, one meta voice ---------- */
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/instrumentserif/v5/jizHRFtNs2ka5fXjeivQ4LroWlx-6zAjjH7Motmp5g.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/instrumentserif/v5/jizBRFtNs2ka5fXjeivQ4LroWlx-6zUTjnTLgNs.woff2) format('woff2')}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 700;font-display:swap;src:url(https://fonts.gstatic.com/s/newsreader/v26/cY9AfjOCX1hbuyalUrK4397yjIJFJpc.woff2) format('woff2')}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:300 700;font-display:swap;src:url(https://fonts.gstatic.com/s/newsreader/v26/cY9CfjOCX1hbuyalUrK439vCjohCBJWxZA.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-display:swap;src:url(https://fonts.gstatic.com/s/archivo/v25/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLydOxKsv4Rn.woff2) format('woff2')}

:root{
  --fd:'Instrument Serif',Georgia,'Times New Roman',serif;   /* display  */
  --ft:'Newsreader',Georgia,'Times New Roman',serif;         /* text     */
  --fm:'Archivo','Helvetica Neue',Arial,sans-serif;          /* meta     */
  --ink:#221A12;          /* masthead / footer / display type               */
  --paper:#FAF5E7;        /* lifted panel over the oatmeal page             */
  --blue:#54789C;         /* readable tint of the fountain-blue accent      */
  --muted:#8A7A66;
  --rust:#B34F2A;         /* moment colour — drop caps + affiliate CTA only */
  --r:4px;
  --mono:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2048'%20fill='none'%20stroke='%23EDE5D2'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='24'%20cy='24'%20r='22.2'%20stroke-width='1.1'%20opacity='.5'/%3E%3Cpath%20d='M11.5%2027.4h25l-2.4%207.4a6.2%206.2%200%200%201-5.9%204.3h-8.4a6.2%206.2%200%200%201-5.9-4.3z'/%3E%3Cpath%20d='M19%2022.4q5-5.4%2010%200'/%3E%3Cpath%20d='M14.8%2017.2q9.2-9.4%2018.4%200'/%3E%3Ccircle%20cx='24'%20cy='12.2'%20r='1.7'%20fill='%23EDE5D2'%20stroke='none'/%3E%3C/svg%3E");
}

:root body{font-family:var(--ft);font-size:17px;line-height:1.72;color:var(--fg);background:var(--bg);font-optical-sizing:auto;-webkit-font-smoothing:antialiased}
::selection{background:var(--accent);color:var(--ink)}
:root hr{border:0;border-top:1px solid var(--border);margin:34px 0}

/* ---------- 2. Masthead — shared shell, per-template deltas ---------- */
:root body > div:first-child{
  background:
    repeating-linear-gradient(90deg,rgba(138,168,201,.055) 0 1px,transparent 1px 46px),
    linear-gradient(163deg,#30251A 0%,#1B140E 58%,#251C13 100%);
  color:var(--paper);border-bottom:3px solid var(--accent);margin:0;padding:0}
:root body > div:first-child:has(> div > h1){padding:74px 0 58px}
:root body > div:first-child:has(> div > a){padding:22px 0 20px}
:root body > div:first-child > div{max-width:1080px;margin:0 auto;padding:0 30px;text-align:center;position:relative}

/* signature: the feeder-bowl-and-signal monogram */
:root body > div:first-child:has(> div > h1) > div::before{
  content:"";display:block;width:56px;height:56px;margin:0 auto 22px;
  background:var(--mono) center/contain no-repeat;opacity:.9}

:root body > div:first-child > div > h1{
  font-family:var(--fd);font-style:italic;font-weight:400;font-size:clamp(42px,6.4vw,68px);
  line-height:1;letter-spacing:-.005em;color:var(--paper);margin:0 0 16px}
:root body > div:first-child > div > p{
  font-family:var(--ft);font-style:italic;font-weight:300;font-size:17.5px;line-height:1.6;
  color:rgba(250,245,231,.72);opacity:1;max-width:610px;margin:0 auto}

/* manifesto strip */
:root body > div:first-child:has(> div > h1) > div::after{
  content:"FIELD TESTS BY BRETT CALLOWAY\0000A0\0000B7\0000A0DENVER, COLORADO\0000A0\0000B7\0000A0SINCE 2023";
  display:block;max-width:520px;margin:28px auto 0;padding-top:15px;
  border-top:1px solid rgba(138,168,201,.42);
  font-family:var(--fm);font-size:10px;font-weight:600;letter-spacing:.2em;color:rgba(138,168,201,.92)}

/* article-page wordmark carries the monogram inline */
:root body > div:first-child > div > a{
  font-family:var(--fd);font-style:italic;font-weight:400;font-size:30px;color:var(--paper);
  text-decoration:none;display:inline-flex;align-items:center;gap:12px}
:root body > div:first-child > div > a::before{
  content:"";width:28px;height:28px;flex:none;background:var(--mono) center/contain no-repeat;opacity:.9}
:root body > div:first-child > div > a:hover{color:var(--accent)}

/* ---------- 3. Home: hero -> Editor's Picks band -> the full log -> archive ---------- */
:root body > main:has(> div > h2){
  display:grid;grid-template-columns:repeat(6,1fr);column-gap:36px;align-items:start;
  max-width:1120px;margin:0 auto;padding:56px 34px 92px}

/* 3a. HERO — the one loud voice */
:root body > main:has(> div > h2) > div:nth-of-type(1){
  grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) 246px;column-gap:48px;
  background:var(--paper);border:0;border-top:2px solid var(--ink);border-bottom:1px solid var(--border);
  padding:42px 42px 46px;margin:0 0 20px}
:root body > main:has(> div > h2) > div:nth-of-type(1) > h2{
  grid-column:1;grid-row:1;font-family:var(--fd);font-style:italic;font-weight:400;
  font-size:clamp(34px,4.6vw,56px);line-height:1.04;letter-spacing:-.012em;margin:0 0 20px;padding:0;border:0}
:root body > main:has(> div > h2) > div:nth-of-type(1) > h2 > a{color:var(--ink);text-decoration:none}
:root body > main:has(> div > h2) > div:nth-of-type(1) > h2 > a:hover{color:var(--primary)}
:root body > main:has(> div > h2) > div:nth-of-type(1) > p:nth-of-type(2){
  grid-column:1;grid-row:2;font-size:19px;line-height:1.62;color:rgba(31,20,12,.85);margin:0 0 28px}
:root body > main:has(> div > h2) > div:nth-of-type(1) > p:nth-of-type(2)::first-letter{
  float:left;font-family:var(--fd);font-style:italic;font-size:66px;line-height:.78;
  color:var(--rust);padding:7px 12px 0 0}
:root body > main:has(> div > h2) > div:nth-of-type(1) > a:last-child{
  grid-column:1;grid-row:3;justify-self:start;align-self:start;display:inline-block;
  font-family:var(--fm);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);background:transparent;border:1px solid var(--ink);border-radius:999px;
  padding:12px 30px;text-decoration:none;transition:background .16s ease,color .16s ease}
:root body > main:has(> div > h2) > div:nth-of-type(1) > a:last-child:hover{background:var(--ink);color:var(--paper)}

/* the hero's right-hand column is a metadata rail, not empty space */
:root body > main:has(> div > h2) > div:nth-of-type(1) > p:nth-of-type(1){
  grid-column:2;grid-row:1/span 3;align-self:start;margin:0;padding:6px 0 0 24px;
  border-left:1px solid var(--border);
  font-family:var(--fm);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
:root body > main:has(> div > h2) > div:nth-of-type(1) > p:nth-of-type(1)::before{
  content:"LATEST FIELD TEST";display:block;color:var(--ink);font-size:10px;letter-spacing:.2em;
  padding-bottom:11px;margin-bottom:12px;border-bottom:1px solid var(--border)}
:root body > main:has(> div > h2) > div:nth-of-type(1) > p:nth-of-type(1)::after{
  content:"BY BRETT CALLOWAY\0000A0\0000B7\0000A06 WEEKS LIVED WITH";display:block;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--border);
  font-size:10px;letter-spacing:.14em;line-height:1.8;color:var(--primary)}

/* 3b. shared interior for every card after the hero (quiet supporting voice) */
:root body > main:has(> div > h2) > div:nth-of-type(n+2) > p:nth-of-type(1){
  font-family:var(--fm);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin:0 0 10px}
:root body > main:has(> div > h2) > div:nth-of-type(n+2) > h2{
  font-family:var(--ft);font-weight:600;font-size:20px;line-height:1.24;letter-spacing:-.004em;
  margin:0 0 10px;padding:0;border:0}
:root body > main:has(> div > h2) > div:nth-of-type(n+2) > h2 > a{color:var(--ink);text-decoration:none}
:root body > main:has(> div > h2) > div:nth-of-type(n+2) > h2 > a:hover{color:var(--primary)}
:root body > main:has(> div > h2) > div:nth-of-type(n+2) > p:nth-of-type(2){
  font-size:15.5px;line-height:1.58;color:rgba(31,20,12,.72);margin:0 0 15px}
:root body > main:has(> div > h2) > div:nth-of-type(n+2) > a:last-child{
  display:inline-block;font-family:var(--fm);font-size:10px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--primary);background:none;border:0;border-bottom:1px solid var(--border);
  border-radius:0;padding:0 0 4px;text-decoration:none}
:root body > main:has(> div > h2) > div:nth-of-type(n+2) > a:last-child:hover{
  color:var(--ink);border-bottom-color:var(--ink)}

/* 3c. EDITOR'S PICKS band — the second gear change */
:root body > main:has(> div > h2) > div:nth-of-type(n+2):nth-of-type(-n+4){
  grid-column:span 2;position:relative;border:0;border-top:1px solid var(--ink);
  padding:20px 0 0;margin:98px 0 0}
:root body > main:has(> div > h2) > div:nth-of-type(2)::before{
  content:"EDITOR\002019S PICKS\0000A0\0000B7\0000A0START HERE IF THE FEEDER JAMMED LAST NIGHT";
  position:absolute;bottom:calc(100% + 16px);left:0;white-space:nowrap;
  font-family:var(--fm);font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--ink)}
:root body > main:has(> div > h2) > div:nth-of-type(n+2):nth-of-type(-n+4) > h2{font-size:22px}
:root body > main:has(> div > h2) > div:nth-of-type(n+2):nth-of-type(-n+4) > p:nth-of-type(1)::before{
  font-family:var(--fd);font-style:italic;font-size:16px;letter-spacing:0;
  text-transform:none;color:var(--blue);margin-right:2px}
:root body > main:has(> div > h2) > div:nth-of-type(2) > p:nth-of-type(1)::before{content:"N\0000B0\0000A001\0000A0\0000B7\0000A0"}
:root body > main:has(> div > h2) > div:nth-of-type(3) > p:nth-of-type(1)::before{content:"N\0000B0\0000A002\0000A0\0000B7\0000A0"}
:root body > main:has(> div > h2) > div:nth-of-type(4) > p:nth-of-type(1)::before{content:"N\0000B0\0000A003\0000A0\0000B7\0000A0"}

/* 3d. THE FULL LOG — consistent 2-up grid, hairline rules between rows */
:root body > main:has(> div > h2) > div:nth-of-type(n+5):has(> h2){
  grid-column:span 3;border:0;border-top:1px solid var(--border);padding:22px 0 0;margin:0 0 40px}
:root body > main:has(> div > h2) > div:nth-of-type(n+5):nth-of-type(-n+6){
  position:relative;margin-top:106px;border-top:2px solid var(--ink)}
:root body > main:has(> div > h2) > div:nth-of-type(5)::before{
  content:"THE FULL LOG\0000A0\0000B7\0000A0EVERY TEST, NEWEST FIRST";
  position:absolute;bottom:calc(100% + 16px);left:0;white-space:nowrap;
  font-family:var(--fm);font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--ink)}

/* 3e. ARCHIVE — was unstyled plain text; now a numbered ledger */
:root body > main:has(> div > h2) > div:has(> ul){
  grid-column:1/-1;position:relative;border:0;border-top:2px solid var(--ink);
  margin:80px 0 0;padding:24px 0 0;counter-reset:arc}
:root body > main:has(> div > h2) > div:has(> ul)::before{
  content:"FROM THE ARCHIVE\0000A0\0000B7\0000A0EARLIER FIELD NOTES";
  position:absolute;bottom:calc(100% + 16px);left:0;
  font-family:var(--fm);font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--ink)}
:root body > main:has(> div > h2) > div:has(> ul) > ul{list-style:none;margin:0;padding:0}
:root body > main:has(> div > h2) > div:has(> ul) > ul > li{
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:11px 0;border-bottom:1px solid rgba(196,181,160,.55);counter-increment:arc}
:root body > main:has(> div > h2) > div:has(> ul) > ul > li > a{
  font-family:var(--ft);font-size:17px;font-weight:400;color:var(--ink);
  text-decoration:none;border-bottom:1px solid transparent}
:root body > main:has(> div > h2) > div:has(> ul) > ul > li > a:hover{color:var(--primary);border-bottom-color:var(--primary)}
:root body > main:has(> div > h2) > div:has(> ul) > ul > li > a::before{
  content:counter(arc,decimal-leading-zero);font-family:var(--fd);font-style:italic;
  font-size:15px;color:var(--blue);margin-right:12px}
:root body > main:has(> div > h2) > div:has(> ul) > ul > li > span:last-child{
  flex:none;margin:0;white-space:nowrap;font-family:var(--fm);font-size:10px;font-weight:600;
  letter-spacing:.16em;color:var(--muted)}

/* ---------- 4. Article page ---------- */
:root body > main:has(> article){max-width:770px;margin:0 auto;padding:76px 30px 90px}

:root body > main:has(> article) > hgroup{
  position:relative;border-top:2px solid var(--ink);padding:26px 0 0;margin:0 0 36px}
:root body > main:has(> article) > hgroup::before{
  content:"FIELD NOTES\0000A0\0000B7\0000A0SMART PAW PICKS";position:absolute;bottom:calc(100% + 14px);left:0;
  font-family:var(--fm);font-size:10.5px;font-weight:600;letter-spacing:.2em;color:var(--blue)}
:root body > main:has(> article) > hgroup > h1{
  font-family:var(--fd);font-style:italic;font-weight:400;font-size:clamp(34px,5.2vw,54px);
  line-height:1.05;letter-spacing:-.012em;color:var(--ink);margin:0 0 20px}
:root body > main:has(> article) > hgroup > time{
  display:block;padding-top:14px;border-top:1px solid var(--border);
  font-family:var(--fm);font-size:10.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin:0}
:root body > main:has(> article) > hgroup > time::before{content:"BY BRETT CALLOWAY\0000A0\0000B7\0000A0FILED\0000A0"}

:root body > main:has(> article) > article > p{font-size:18px;line-height:1.78;margin:0 0 20px;max-width:none}
:root body > main:has(> article) > article > p:nth-of-type(1){font-size:20px;line-height:1.66}
:root body > main:has(> article) > article > p:nth-of-type(1)::first-letter{
  float:left;font-family:var(--fd);font-style:italic;font-size:72px;line-height:.76;
  color:var(--rust);padding:8px 13px 0 0}
:root body > main:has(> article) > article > h2{
  font-family:var(--ft);font-weight:600;font-size:27px;line-height:1.26;letter-spacing:-.006em;
  color:var(--ink);border:0;padding:0;margin:54px 0 16px;max-width:none}
:root body > main:has(> article) > article > h2::before{
  content:"* * *";display:block;text-align:center;font-family:var(--fd);font-style:italic;
  font-weight:400;font-size:28px;letter-spacing:.42em;line-height:1;color:var(--blue);
  opacity:.85;margin:0 0 30px}
:root body > main:has(> article) > article > h3{
  font-family:var(--fm);font-weight:700;font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--primary);margin:36px 0 12px;max-width:none}
:root body > main:has(> article) > article ul,
:root body > main:has(> article) > article ol{margin:0 0 22px 24px;padding:0;max-width:none}
:root body > main:has(> article) > article li{margin:0 0 8px;font-size:17.5px;line-height:1.7}
:root body > main:has(> article) > article strong{font-weight:700;color:var(--ink)}
:root body > main:has(> article) > article blockquote{
  position:relative;border:0;border-left:2px solid var(--blue);border-radius:0;background:none;
  margin:36px 0;padding:6px 0 6px 48px;max-width:none;
  font-family:var(--ft);font-style:italic;font-weight:400;font-size:20px;line-height:1.55;color:var(--primary)}
:root body > main:has(> article) > article blockquote::before{
  content:"\00201C";position:absolute;left:12px;top:-4px;font-family:var(--fd);font-style:italic;
  font-size:56px;line-height:1;color:var(--blue);opacity:.5}

:root body > main:has(> article) > article > section{margin:0 0 34px}
:root body > main:has(> article) > article > section > img,
:root body > main:has(> article) > article > img{
  width:100%;height:auto;display:block;border-radius:var(--r);border:1px solid rgba(196,181,160,.75)}

:root body > main:has(> article) > article table{
  width:100%;max-width:none;border-collapse:collapse;margin:34px 0;background:var(--paper);
  border:1px solid var(--border);border-radius:0;font-family:var(--fm);font-size:14px}
:root body > main:has(> article) > article table th{
  background:#E5DBC6;color:var(--ink);padding:11px 14px;text-align:left;border:1px solid var(--border);
  font-family:var(--fm);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
:root body > main:has(> article) > article table td{
  padding:10px 14px;border:1px solid rgba(196,181,160,.7);vertical-align:top;font-variant-numeric:tabular-nums}
:root body > main:has(> article) > article table tr:nth-child(even) td{background:rgba(255,255,255,.45)}

/* editorial links vs. reference links vs. the affiliate CTA */
:root body > main:has(> article) > article p a,
:root body > main:has(> article) > article li a{
  color:var(--primary);font-weight:600;text-decoration:underline;
  text-decoration-color:rgba(92,74,56,.35);text-decoration-thickness:1px;text-underline-offset:3px}
:root body > main:has(> article) > article p a:hover,
:root body > main:has(> article) > article li a:hover{color:var(--ink);text-decoration-color:var(--ink)}
:root body > main:has(> article) > article p a[href^="http"]::after,
:root body > main:has(> article) > article li a[href^="http"]::after{
  content:"\002197";font-size:.7em;vertical-align:super;color:var(--blue);margin-left:2px}
:root body > main:has(> article) > article p a[href^="/out/"],
:root body > main:has(> article) > article li a[href^="/out/"]{
  display:inline-block;background:var(--rust);color:#FCF7EC;border-radius:999px;
  padding:4px 15px 5px;margin:0 1px;line-height:1.5;text-decoration:none;
  font-family:var(--fm);font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
:root body > main:has(> article) > article p a[href^="/out/"]::after,
:root body > main:has(> article) > article li a[href^="/out/"]::after{
  content:"\0000A0\002192";font-size:1em;vertical-align:baseline;color:inherit;margin:0}
:root body > main:has(> article) > article p a[href^="/out/"]:hover,
:root body > main:has(> article) > article li a[href^="/out/"]:hover{background:var(--ink);color:var(--paper)}

/* related reading — a numbered index, not a stack of buttons */
:root body > main:has(> article) > div:has(> h3){
  border:0;border-top:2px solid var(--ink);margin:66px 0 0;padding:24px 0 0;counter-reset:rel}
:root body > main:has(> article) > div:has(> h3) > h3{
  font-family:var(--fm);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);margin:0 0 14px}
:root body > main:has(> article) > div:has(> h3) > ul{list-style:none;margin:0;padding:0}
:root body > main:has(> article) > div:has(> h3) > ul > li{
  padding:10px 0;border-bottom:1px solid rgba(196,181,160,.55);counter-increment:rel}
:root body > main:has(> article) > div:has(> h3) > ul > li > a{
  font-family:var(--ft);font-size:17px;font-weight:400;color:var(--ink);text-decoration:none}
:root body > main:has(> article) > div:has(> h3) > ul > li > a:hover{color:var(--primary)}
:root body > main:has(> article) > div:has(> h3) > ul > li > a::before{
  content:counter(rel,decimal-leading-zero);font-family:var(--fd);font-style:italic;
  font-size:15px;color:var(--blue);margin-right:12px}

/* ---------- 5. Footer bookend ---------- */
:root body > footer{
  background:var(--ink);color:rgba(250,245,231,.6);border-top:3px solid var(--accent);
  margin:0;padding:40px 0 44px;text-align:center;
  font-family:var(--fm);font-size:10.5px;font-weight:500;letter-spacing:.15em;text-transform:uppercase}
:root body > footer > div{max-width:1080px;margin:0 auto;padding:0 30px}
:root body > footer > div::before{
  content:"";display:block;width:30px;height:30px;margin:0 auto 18px;
  background:var(--mono) center/contain no-repeat;opacity:.55}
:root body > footer > div > p{line-height:2.2;margin:0}
:root body > footer a{color:rgba(250,245,231,.86);text-decoration:none;border-bottom:1px solid rgba(138,168,201,.4)}
:root body > footer a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------- 6. Responsive (spans must be reset explicitly — they create implicit tracks) ---------- */
@media (max-width:1020px){
  /* picks stay 3-up (span 2) so the band never orphans a card onto its own row */
  :root body > main:has(> div > h2){column-gap:26px;padding:48px 26px 76px}
  :root body > main:has(> div > h2) > div:nth-of-type(1){grid-template-columns:minmax(0,1fr) 190px;column-gap:32px;padding:34px 30px 38px}
  :root body > main:has(> div > h2) > div:nth-of-type(n+2):nth-of-type(-n+4) > h2{font-size:19px}
  :root body > main:has(> div > h2) > div:nth-of-type(2)::before{
    content:"EDITOR\002019S PICKS\0000A0\0000B7\0000A0START HERE"}
}
@media (max-width:760px){
  :root body{font-size:16.5px}
  :root body > div:first-child:has(> div > h1){padding:52px 0 44px}
  :root body > main:has(> div > h2){grid-template-columns:1fr;column-gap:0;padding:40px 22px 68px}
  :root body > main:has(> div > h2) > div:nth-of-type(1){
    grid-column:1/-1;grid-template-columns:1fr;padding:28px 24px 32px}
  :root body > main:has(> div > h2) > div:nth-of-type(1) > h2,
  :root body > main:has(> div > h2) > div:nth-of-type(1) > p:nth-of-type(2),
  :root body > main:has(> div > h2) > div:nth-of-type(1) > a:last-child{grid-column:1;grid-row:auto}
  :root body > main:has(> div > h2) > div:nth-of-type(1) > p:nth-of-type(1){
    grid-column:1;grid-row:auto;border-left:0;border-bottom:1px solid var(--border);
    padding:0 0 14px;margin:0 0 20px}
  :root body > main:has(> div > h2) > div:nth-of-type(1) > p:nth-of-type(1)::after{display:none}
  :root body > main:has(> div > h2) > div:nth-of-type(1) > p:nth-of-type(2)::first-letter{font-size:54px;padding:5px 10px 0 0}
  :root body > main:has(> div > h2) > div:nth-of-type(n+2):nth-of-type(-n+4){grid-column:1/-1;margin-top:64px}
  :root body > main:has(> div > h2) > div:nth-of-type(n+3):nth-of-type(-n+4){margin-top:30px;border-top-color:var(--border)}
  :root body > main:has(> div > h2) > div:nth-of-type(n+5):has(> h2){grid-column:1/-1}
  :root body > main:has(> div > h2) > div:nth-of-type(n+5):nth-of-type(-n+6){margin-top:64px}
  /* card 6 is no longer a row-mate of card 5 once the grid is single-column — same
     specificity as the rule above, later in source, so it wins the tie */
  :root body > main:has(> div > h2) > div:nth-of-type(n+6):nth-of-type(-n+6){margin-top:0;border-top:1px solid var(--border)}
  :root body > main:has(> div > h2) > div:has(> ul){grid-column:1/-1}
  :root body > main:has(> div > h2) > div:nth-of-type(2)::before{content:"EDITOR\002019S PICKS";white-space:normal}
  :root body > main:has(> div > h2) > div:nth-of-type(5)::before{content:"THE FULL LOG";white-space:normal}
  :root body > main:has(> div > h2) > div:has(> ul) > ul > li{flex-wrap:wrap;gap:4px 14px}
  :root body > main:has(> article){padding:56px 22px 70px}
  :root body > main:has(> article) > article > p:nth-of-type(1)::first-letter{font-size:58px;padding:6px 11px 0 0}
  :root body > main:has(> article) > article > h2{margin-top:44px}
}