*{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 === */
/* v.e1f4a7 — layout revision */
/* Repo file re-synced to the deployed editorial build (was stale). Two deltas on top:
   (a) moment colour switched to the per-site assigned #4A5C6B (drop caps + /out/ CTA);
   (b) the compact-tail rules scoped to homepage (main:has(> div > h2)) so the
       "MORE FROM THE ARCHIVE" label + 2-col restyle no longer leak onto article
       related-reading blocks. */

/* === 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:#4A5C6B;         /* moment colour (assigned per-site) — 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:1px solid var(--border);border-top:2px solid var(--ink);
  border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.05);
  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;
  background:var(--paper);border:1px solid var(--border);border-radius:8px;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
  padding:26px 32px 28px;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:280px;border-top:2px solid var(--ink)}
/* hero-photo strip #1 — atmospheric section break above the journal grid.
   The /theme-assets hero jpg 404s on this domain and its flat-gradient fallback
   read as a plain dark band, so the imagery is now an inline SVG dusk-field scene
   (warm horizon glow + ridge silhouettes) that always renders; a soft central
   scrim keeps the centred white label readable while the edges show the scene. */
:root body > main:has(> div > h2) > div:nth-of-type(5)::before{
  content:"THE FULL LOG\0000A0\0000B7\0000A0EVERY TEST, NEWEST FIRST";
  position:absolute;left:0;bottom:calc(100% + 34px);
  width:calc(200% + 36px);height:190px;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:0 24px;
  border-radius:6px;border:1px solid rgba(0,0,0,.10);box-shadow:0 1px 4px rgba(0,0,0,.05);
  background:
    radial-gradient(72% 92% at 50% 50%,rgba(12,8,4,.44),rgba(12,8,4,.04) 78%),
    repeating-linear-gradient(90deg,rgba(138,168,201,.05) 0 1px,transparent 1px 46px),
    url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%201200%20300%27%20preserveAspectRatio=%27xMidYMid%20slice%27%3E%3Cdefs%3E%3ClinearGradient%20id=%27s%27%20x1=%270%27%20y1=%270%27%20x2=%270%27%20y2=%271%27%3E%3Cstop%20offset=%270%27%20stop-color=%27%23241a12%27/%3E%3Cstop%20offset=%27.52%27%20stop-color=%27%233a2c1e%27/%3E%3Cstop%20offset=%27.76%27%20stop-color=%27%237a5c42%27/%3E%3Cstop%20offset=%271%27%20stop-color=%27%232a2013%27/%3E%3C/linearGradient%3E%3CradialGradient%20id=%27g%27%20cx=%27.72%27%20cy=%27.86%27%20r=%27.55%27%3E%3Cstop%20offset=%270%27%20stop-color=%27%23d3a468%27%20stop-opacity=%27.9%27/%3E%3Cstop%20offset=%271%27%20stop-color=%27%23d3a468%27%20stop-opacity=%270%27/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect%20width=%271200%27%20height=%27300%27%20fill=%27url%28%23s%29%27/%3E%3Cellipse%20cx=%27860%27%20cy=%27262%27%20rx=%27470%27%20ry=%27175%27%20fill=%27url%28%23g%29%27/%3E%3Cpath%20d=%27M0%20202%20Q300%20162%20600%20194%20T1200%20188%20V300%20H0%20Z%27%20fill=%27%232c2116%27%20opacity=%27.85%27/%3E%3Cpath%20d=%27M0%20246%20Q420%20210%20720%20240%20T1200%20236%20V300%20H0%20Z%27%20fill=%27%231c140d%27%20opacity=%27.92%27/%3E%3C/svg%3E") center/cover no-repeat;
  font-family:var(--fm);font-size:12px;font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;color:rgba(250,245,231,.94)}

/* 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)}

/* external product / source URLs — lifted out of the prose as accent chips so the
   monetised references (comparison-table + source-list links) read as CTAs, not
   as tiny inline text links. Higher specificity via [href] beats the prose-link rule. */
:root body > main:has(> article) > article p a[href^="http"],
:root body > main:has(> article) > article li a[href^="http"],
:root body > main:has(> article) > article td a[href^="http"]{
  display:inline-block;background:rgba(84,120,156,.16);color:var(--ink);
  border:1px solid rgba(84,120,156,.55);border-radius:999px;
  padding:1px 12px 2px;line-height:1.5;text-decoration:none;
  font-family:var(--fm);font-size:12.5px;font-weight:600;letter-spacing:.03em}
:root body > main:has(> article) > article p a[href^="http"]:hover,
:root body > main:has(> article) > article li a[href^="http"]:hover,
:root body > main:has(> article) > article td a[href^="http"]:hover{
  background:var(--blue);color:#FCF7EC;border-color:var(--blue)}
:root body > main:has(> article) > article td a[href^="http"]::after{
  content:"\0000A0\002192";font-size:.85em;vertical-align:baseline;color:inherit;margin:0}

/* 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(5)::before{width:calc(200% + 26px)}
  :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}
}


/* === QA tail polish (2026-07-24T16:16:45.326798+00:00) — style Lambda [SB-20] compact tail across templates === */
/* The tail wrapper is always the LAST block child of <main> on the homepage,
   containing title-only rows of older articles. Various templates use different
   inner structures (ul>li / p / direct <a>) — this handles all three. */

:root main:has(> div > h2) > *:last-child:not(:has(h2)):not(:has(h1)):not(:has(article)) {
  grid-column: 1 / -1;
  max-width: none;
  margin: 280px 0 0;
  position: relative;
  padding: 40px 0 32px;
  border-top: 1px solid var(--border);
  background: transparent;
  box-shadow: none;
}

/* hero-photo strip #2 — atmospheric section break above the archive tail.
   Same inline SVG dusk-field treatment as strip #1, mirrored (glow to the left,
   different ridge line) so the two bands read as distinct scenes, not a repeat. */
:root main:has(> div > h2) > *:last-child:not(:has(h2)):not(:has(h1)):not(:has(article))::before {
  content: "MORE FROM THE ARCHIVE\0000A0\0000B7\0000A0EARLIER FIELD NOTES";
  position: absolute; left: 0; bottom: calc(100% + 34px);
  width: 100%; height: 190px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 24px;
  border-radius: 6px; border: 1px solid rgba(0, 0, 0, .10); box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
  background:
    radial-gradient(72% 92% at 50% 50%, rgba(12, 8, 4, .44), rgba(12, 8, 4, .04) 78%),
    repeating-linear-gradient(90deg, rgba(138, 168, 201, .05) 0 1px, transparent 1px 46px),
    url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%201200%20300%27%20preserveAspectRatio=%27xMidYMid%20slice%27%3E%3Cdefs%3E%3ClinearGradient%20id=%27s%27%20x1=%270%27%20y1=%270%27%20x2=%270%27%20y2=%271%27%3E%3Cstop%20offset=%270%27%20stop-color=%27%2320180f%27/%3E%3Cstop%20offset=%27.5%27%20stop-color=%27%23352a1d%27/%3E%3Cstop%20offset=%27.75%27%20stop-color=%27%236f5540%27/%3E%3Cstop%20offset=%271%27%20stop-color=%27%23241a11%27/%3E%3C/linearGradient%3E%3CradialGradient%20id=%27g%27%20cx=%27.3%27%20cy=%27.88%27%20r=%27.6%27%3E%3Cstop%20offset=%270%27%20stop-color=%27%23c69c6a%27%20stop-opacity=%27.85%27/%3E%3Cstop%20offset=%271%27%20stop-color=%27%23c69c6a%27%20stop-opacity=%270%27/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect%20width=%271200%27%20height=%27300%27%20fill=%27url%28%23s%29%27/%3E%3Cellipse%20cx=%27340%27%20cy=%27268%27%20rx=%27500%27%20ry=%27185%27%20fill=%27url%28%23g%29%27/%3E%3Cpath%20d=%27M0%20196%20Q360%20232%20640%20198%20T1200%20206%20V300%20H0%20Z%27%20fill=%27%232a1f14%27%20opacity=%27.85%27/%3E%3Cpath%20d=%27M0%20244%20Q380%20214%20700%20244%20T1200%20232%20V300%20H0%20Z%27%20fill=%27%231a130c%27%20opacity=%27.92%27/%3E%3C/svg%3E") center/cover no-repeat;
  font-family: var(--fm); font-size: 12px; font-weight: 600; letter-spacing: .28em;
  text-transform: uppercase; color: rgba(250, 245, 231, .94);
}

/* === M7 refix (iter 1 · 2026-09-02) — archive tail = boxed cream cards ===
   Live tail DOM: main > div.Footer_foot (last child) > ul > li > a + span.date.
   Was rendering as columns:3 + dotted border-bottom rows (a plain list). Now a
   3-col magazine index of boxed cream cells with the SAME design tokens as the
   top-of-page journal cards — --paper bg, --border hairline, 8px radius,
   0 1px 4px shadow, hover lift — so top and bottom read as one design system. */
:root main:has(> div > h2) > *:last-child ul {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: auto;                         /* undo the old multi-column flow */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 16px;
  align-items: stretch;                  /* equal-height cells per row */
}
@media (max-width: 899px) {
  :root main:has(> div > h2) > *:last-child ul { grid-template-columns: repeat(2, 1fr); }
}

/* each row = a boxed cream card cell (li primary; > p / > a fallbacks for
   templates that don't wrap rows in a list) */
:root main:has(> div > h2) > *:last-child li,
:root main:has(> div > h2) > *:last-child > p,
:root main:has(> div > h2) > *:last-child > a {
  display: flex;
  flex-direction: column;
  gap: 9px;
  height: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 20px 22px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
  break-inside: avoid;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
:root main:has(> div > h2) > *:last-child li:hover,
:root main:has(> div > h2) > *:last-child > p:hover,
:root main:has(> div > h2) > *:last-child > a:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
  border-color: var(--blue);
}

/* title link — humanist body face, weight ≤600 so counters stay open (M9) */
:root main:has(> div > h2) > *:last-child li > a,
:root main:has(> div > h2) > *:last-child li a,
:root main:has(> div > h2) > *:last-child p a,
:root main:has(> div > h2) > *:last-child > a {
  font-family: var(--ft);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.003em;
  color: var(--ink);
  text-decoration: none;
}
:root main:has(> div > h2) > *:last-child li:hover > a,
:root main:has(> div > h2) > *:last-child > a:hover { color: var(--primary); }

/* date — subtle mono meta, pinned to the card's bottom for even baselines */
:root main:has(> div > h2) > *:last-child li > span,
:root main:has(> div > h2) > *:last-child p > :first-child,
:root main:has(> div > h2) > *:last-child li > :first-child:not(a) {
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 1;
  margin: auto 0 0;
}

/* mobile: shrink the two hero-photo strips + the vertical space they reserve.
   Placed last so these win over the desktop band rules at equal specificity. */
@media (max-width: 760px) {
  :root body > main:has(> div > h2) > div:nth-of-type(5):nth-of-type(-n+6){margin-top:200px}
  :root body > main:has(> div > h2) > div:nth-of-type(5)::before{
    width:100%;height:150px;bottom:calc(100% + 24px);letter-spacing:.2em;font-size:11px}
  :root main:has(> div > h2) > *:last-child:not(:has(h2)):not(:has(h1)):not(:has(article)){margin-top:200px}
  :root main:has(> div > h2) > *:last-child:not(:has(h2)):not(:has(h1)):not(:has(article))::before{
    height:150px;bottom:calc(100% + 24px);letter-spacing:.2em;font-size:11px}
}


/* related-articles-nav-fix v1 */
:root main > nav p,
:root main > section p {
  line-height: 1.85;
  margin: 0;
}
:root main > nav a,
:root main > section a {
  display: inline-block;
  margin: 0 4px;
  padding: 0 2px;
}


/* mobile-overflow-fix v1 */
:root html, :root body { overflow-x: hidden; max-width: 100%; }
@media (max-width: 920px) {
  :root main > * { max-width: 100%; }
  :root main { overflow-x: hidden; }
}


/* mobile-overflow-fix v2 */
@media (max-width: 640px) {
  :root main,
  :root main > article,
  :root main > div,
  :root main > section,
  :root main > nav {
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
  }
  :root main > article > *,
  :root main > div > *,
  :root main > section > *,
  :root main > nav > * {
    max-width: 100%;
  }
  :root main h1,
  :root main h2,
  :root main h3,
  :root main h4 {
    overflow-wrap: break-word;
    word-break: normal;
  }
  /* Any 3+ col grid inside main → 1 col on mobile */
  :root main :is(ul, ol, section, div, nav)[style*="grid-template-columns"],
  :root main > section > ul,
  :root main > nav > ul,
  :root main > div > ul {
    grid-template-columns: 1fr !important;
  }
  /* Any CSS multi-column layout → 1 col on mobile */
  :root main :is(ul, ol, section, div, p) {
    columns: 1;
  }
  /* Article body images stay inside viewport */
  :root main img,
  :root main figure {
    max-width: 100%;
    height: auto;
  }
}


/* mobile-padding-fix v1 */
@media (max-width: 640px) {
  :root main {
    padding-left: 20px;
    padding-right: 20px;
  }
}


/* premium-upgrade v1 */
/* premium editorial upgrade — style=Racquet-moody overlay=55% grid=asymmetric scale=balanced family=flat-divs */


/* ── CARD 1: featured full-row with 300px photo header (via card-own background, NOT ::before —
    leaves ::before free for existing site's M2 label / meta content). ── */
:root main:not(:has(> h1)) > div:nth-of-type(1) {
  grid-column: 1 / -1;
  position: relative;      /* anchor for existing site's ::before label if it uses absolute */
  overflow: visible;       /* let above-card labels render without clipping */
  padding: 320px 44px 40px !important;
  border-radius: 8px;
  background:
    url("/theme-assets/premium-hero-card-1.webp") no-repeat center top / 100% 300px,
    var(--bg) !important;
  margin-top: 60px !important;  /* room for above-card M2 label (existing site convention) */
}

/* ── CARDS 2-4: medium with 180px photo header (background technique, ::before untouched) ── */
:root main:not(:has(> h1)) > div:nth-of-type(2) {
  padding: 200px 32px 32px !important;
  border-radius: 8px;
  background:
    url("/theme-assets/premium-hero-card-2.webp") no-repeat center top / 100% 180px,
    var(--bg) !important;
}
:root main:not(:has(> h1)) > div:nth-of-type(3) {
  padding: 200px 32px 32px !important;
  border-radius: 8px;
  background:
    url("/theme-assets/premium-hero-card-3.webp") no-repeat center top / 100% 180px,
    var(--bg) !important;
}
:root main:not(:has(> h1)) > div:nth-of-type(4) {
  padding: 200px 32px 32px !important;
  border-radius: 8px;
  background:
    url("/theme-assets/premium-hero-card-4.webp") no-repeat center top / 100% 180px,
    var(--bg) !important;
}

/* ── flat-divs family: cards 5 & 6 also get photo headers ── */
:root main:not(:has(> h1)) > div:nth-of-type(5) {
  padding: 200px 32px 32px !important;
  border-radius: 8px;
  background:
    url("/theme-assets/premium-hero-strip-1.webp") no-repeat center top / 100% 180px,
    var(--bg) !important;
}
:root main:not(:has(> h1)) > div:nth-of-type(6) {
  padding: 200px 32px 32px !important;
  border-radius: 8px;
  background:
    url("/theme-assets/premium-hero-strip-2.webp") no-repeat center top / 100% 180px,
    var(--bg) !important;
}

/* ── Article page: drop cap + dinkus dividers ── */
:root main:has(> h1) > article > p:first-of-type::first-letter {
  font-family: var(--fh), Georgia, serif;
  font-size: 76px; line-height: 0.9; color: var(--primary);
  float: left; margin: 6px 12px 0 0; padding: 0; font-weight: 400;
}
:root main:has(> h1) > article > h2 + p ~ h2::before {
  content: "✦ ✦ ✦";
  display: block; text-align: center; color: var(--accent);
  font-size: 12px; letter-spacing: 0.3em; margin-bottom: 24px;
  font-weight: 400;
}

/* ── Mobile responsive: adjust photo heights via background-size on the card itself ── */
@media (max-width: 720px) {
  :root main:not(:has(> h1)) > div:nth-of-type(1) {
    padding: 240px 22px 28px !important;
    background:
      url("/theme-assets/premium-hero-card-1.webp") no-repeat center top / 100% 220px,
      var(--bg) !important;
  }
  :root main:not(:has(> h1)) > div:nth-of-type(2) {
    padding: 180px 22px 26px !important;
    background:
      url("/theme-assets/premium-hero-card-2.webp") no-repeat center top / 100% 160px,
      var(--bg) !important;
  }
  :root main:not(:has(> h1)) > div:nth-of-type(3) {
    padding: 180px 22px 26px !important;
    background:
      url("/theme-assets/premium-hero-card-3.webp") no-repeat center top / 100% 160px,
      var(--bg) !important;
  }
  :root main:not(:has(> h1)) > div:nth-of-type(4) {
    padding: 180px 22px 26px !important;
    background:
      url("/theme-assets/premium-hero-card-4.webp") no-repeat center top / 100% 160px,
      var(--bg) !important;
  }
  :root main:not(:has(> h1))::before,
  :root main:not(:has(> h1))::after { min-height: 240px; }
  :root main:has(> h1) > article > p:first-of-type::first-letter { font-size: 60px; }
}


/* premium-upgrade v4 */
/* premium-upgrade v4 — surgical bundle. Applied 2026-08-30.
   Fixes: M10 CTA / M11 dinkus leak / M4 heights / M9 typography / M5 frames.
   Kills v2 "LATEST" label (proven counterproductive from v2 diagnosis). */

/* ── Kill v2 counterproductive homepage label ── */
:root main:not(:has(> h1))::before { content: none !important; }

/* ── M10: affiliate CTA visibility on article body ── */
:root main:has(> h1) a[href^="/try/"],
:root main:has(> h1) a[href^="/ref/"],
:root main:has(> h1) a[href^="/go/"],
:root main:has(> h1) a[href^="/out/"],
:root main:has(> h1) a[href^="/check/"],
:root main:has(> h1) a[href^="/view/"],
:root main:has(> h1) a[href*="hotmart.com"],
:root main:has(> h1) a[href*="digistore24"],
:root main:has(> h1) a[href*="clickbank"] {
  display: inline-block !important;
  background: var(--primary) !important;
  color: var(--bg) !important;
  padding: 6px 14px !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  letter-spacing: 0.02em !important;
}

/* ── M11: prevent dinkus leaking onto article page's first h2 ── */
:root main:has(> h1) > article > h2:first-of-type::before {
  content: none !important;
}

/* ── M4: force equal-height cards via grid stretch + card fill ── */
:root main:not(:has(> h1)) > div:has(> div) {
  align-items: stretch !important;
}
:root main:not(:has(> h1)) > div:has(> div) > div {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
:root main:not(:has(> h1)) > div > article {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
/* also for flat-divs family */
:root main:not(:has(> h1)) > div {
  height: 100% !important;
}

/* ── M9: cap small-title weight so Bebas/Anton counters don't fill in ── */
:root main:not(:has(> h1)) > div > div > h2,
:root main:not(:has(> h1)) > div > div > h2 a,
:root main:not(:has(> h1)) > section > ul > li > a,
:root main:not(:has(> h1)) > div > p > a {
  font-weight: 500 !important;
}

/* ── M5: universal soft frame fallback for card-like elements ── */
:root main:not(:has(> h1)) > div > div,
:root main:not(:has(> h1)) > div > article,
:root main:not(:has(> h1)) > article {
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.05) !important;
}


/* premium-upgrade v5 */
/* premium-upgrade v5 — big M2 band + wider M10 CTA net + M8 breathing. 2026-08-31. */

/* ── M2: PROMINENT full-row label, not the small word v2 tried ── */
:root main:not(:has(> h1))::before {
  content: "◆ LATEST FEATURES ◆" !important;
  display: block !important;
  font-family: var(--fh, "PT Sans"), Georgia, serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  padding: 16px 24px 20px !important;
  margin: 0 0 40px !important;
  border-top: 3px solid var(--primary, #333) !important;
  border-bottom: 1px solid var(--border, #ccc) !important;
  color: var(--primary, #333) !important;
  background: transparent !important;
}

/* ── M10: broaden CTA net (Amazon, aff/ path, [target=_blank] product-shaped) ── */
:root main:has(> h1) a[href^="/try/"],
:root main:has(> h1) a[href^="/ref/"],
:root main:has(> h1) a[href^="/go/"],
:root main:has(> h1) a[href^="/out/"],
:root main:has(> h1) a[href^="/check/"],
:root main:has(> h1) a[href^="/view/"],
:root main:has(> h1) a[href^="/aff/"],
:root main:has(> h1) a[href^="/product/"],
:root main:has(> h1) a[href*="hotmart.com"],
:root main:has(> h1) a[href*="digistore24"],
:root main:has(> h1) a[href*="clickbank"],
:root main:has(> h1) a[href*="amazon."],
:root main:has(> h1) a[href*="/track/"],
:root main:has(> h1) a[href*="/link/"],
:root main:has(> h1) a[href*="lstrk.net"],
:root main:has(> h1) a[href*="thrivecart"] {
  display: inline-block !important;
  background: var(--primary) !important;
  color: var(--bg) !important;
  padding: 8px 18px !important;
  border-radius: 5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  letter-spacing: 0.02em !important;
  margin: 4px 2px !important;
}

/* ── M8: article body breathing ── */
:root main:has(> h1) > article > p {
  line-height: 1.8 !important;
  margin-bottom: 20px !important;
}
:root main:has(> h1) > article > h2 {
  margin-top: 48px !important;
  margin-bottom: 18px !important;
}
:root main:not(:has(> h1)) > div:has(> div) {
  gap: 40px 32px !important;
}