*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Palatino Linotype',Palatino,'Book Antiqua',serif;line-height:1.9;color:#2a2a2a;background:#fefefe}
.Footer_row__QBGq6{max-width:640px;margin:0 auto;padding:0 20px}
.Banner_block__xFO40{padding:60px 0 40px;border-bottom:1px solid #ccc;margin-bottom:48px}
.Banner_block__xFO40 h1{font-size:24px;font-weight:400;letter-spacing:-.5px}
.Banner_block__xFO40 p{font-size:14px;color:#777;margin-top:6px;font-style:italic}
.Banner_block__xFO40 a{color:#2a2a2a;text-decoration:none;font-size:24px;font-weight:400;letter-spacing:-.5px}
.Grid_text__xQawh{padding:20px 0}
.Grid_text__xQawh h2{font-size:18px;font-weight:400;margin-bottom:4px}
.Grid_text__xQawh h2 a{color:#2a2a2a;text-decoration:none;border-bottom:1px solid transparent}
.Grid_text__xQawh h2 a:hover{border-bottom-color:#2a2a2a}
.Grid_text__xQawh .Article_item__I7p9w{font-size:12px;color:#aaa;margin-bottom:6px}
.Grid_text__xQawh p{font-size:14px;color:#666}
.Post_link__1SpJv{color:#888;font-size:13px;text-decoration:none}
.Post_link__1SpJv:hover{color:#2a2a2a}
.Grid_wrapper__BylgM{padding-bottom:60px}
.Grid_wrapper__BylgM h1{font-size:28px;font-weight:400;margin-bottom:8px}
.Grid_wrapper__BylgM .Article_item__I7p9w{font-size:12px;color:#aaa;display:block;margin-bottom:32px}
.Grid_wrapper__BylgM h2{font-size:21px;font-weight:400;margin:40px 0 12px;border-bottom:1px solid #eee;padding-bottom:6px}
.Grid_wrapper__BylgM h3{font-size:17px;margin:28px 0 8px}
.Grid_wrapper__BylgM p{margin-bottom:18px;font-size:16px}
.Grid_wrapper__BylgM ul,.Grid_wrapper__BylgM ol{margin:0 0 18px 20px}
.Grid_wrapper__BylgM a{color:#555;border-bottom:1px solid #ccc}
.Grid_wrapper__BylgM a:hover{color:#000;border-bottom-color:#000}
.Grid_wrapper__BylgM img{max-width:100%;height:auto;margin:24px 0}
.Layout_title__qwz2Z{border-top:1px solid #ddd;padding:20px 0;margin-top:48px;text-align:center;font-size:12px;color:#aaa}
.Layout_title__qwz2Z a{color:#aaa;text-decoration:none}
.Module_body__LvqjQ{padding:0 0 16px;margin-bottom:24px;font-size:12px;color:#aaa;font-style:italic;border-bottom:1px solid #eee}
.Footer_area__SlxxK{padding:16px 0 0;margin-top:32px;font-size:11px;color:#999;border-top:1px solid #eee}
.Header_item__9Lv7v{font-size:12px;color:#aaa;margin:-26px 0 32px;font-weight:300}
.Page_link__6ZGMt{margin:0 auto 32px;max-width:720px}
.Layout_head__F8TAf{width:100%;height:auto}
.Post_foot__BL3Nw{margin-top:40px;padding-top:20px;border-top:1px solid #eee;font-size:14px;color:#888}
.Post_foot__BL3Nw em{color:#aaa}
.Post_foot__BL3Nw a{color:#555;border-bottom:1px solid #ddd;text-decoration:none}
.Nav_title__BfGzZ{padding:24px 0 0;border-top:1px solid #eee;margin-top:24px}
.Nav_title__BfGzZ p{padding:3px 0;margin:0;font-size:15px}
.Nav_title__BfGzZ a{color:#2a2a2a;text-decoration:none;border-bottom:1px solid transparent}
.Nav_title__BfGzZ a:hover{border-bottom-color:#2a2a2a}
/* === Theme === */
:root{--primary:#4B3E73;--accent:#B89A65;--bg:#E6E0D2;--fg:#1A1424;--border:#C4BCAC;--r:23px;--fb:'Quattrocento';--fh:'Jost'}
/* === Custom === */
/* v.0e1e5b — layout revision */
/* Focus Work Remote — editorial signature pass.
   Build = Next-module (stable class names). Selectors are element/structural;
   [class] on <main> buys the specificity needed to beat template `.Foo h2` (0,2,0) rules.
   Theme photos (masthead-bg/hero-photo) 404 on this site → gradient bands stand in. */

/* ============================================================
   FONTS — @import is stripped by the deploy concat, so declare
   @font-face directly (latin subset only, English site).
   Display: Fraunces (italic + roman 600).  Body: Quattrocento.
   Meta: IBM Plex Mono — the developer's-notebook voice.
   ============================================================ */
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/fraunces/v38/6NU58FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChjeveQ7ZXk8g.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/fraunces/v38/6NU58FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChjeveQ7ZXk8g.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/fraunces/v38/6NUu8FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0K7iN7iQcIfJD58njt0oc7qv8oRcTn.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F6qfjptAgt5VM-kVkqdyU8n3twJwlBFgsAXHNk.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F6qfjptAgt5VM-kVkqdyU8n3vAOwlBFgsAXHNk.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Quattrocento';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/quattrocento/v24/OZpEg_xvsDZQL_LKIF7q4jP3w2j6XYvVuQ.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Quattrocento';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/quattrocento/v24/OZpbg_xvsDZQL_LKIF7q4jP_eE3vcKnYk3Qc9g.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --primary:#4B3E73; --accent:#B89A65; --bg:#E6E0D2; --fg:#1A1424;
  --moment:#7A5A3C;                 /* used in exactly 2 places: manifesto rule + hero drop cap */
  --paper:#EFE8D8;                  /* card surface — warm, never white */
  --paper2:#F4EFE3;                 /* lifted surface: hero, callouts */
  --line:rgba(75,62,115,.16);       /* plum-tinted hairline */
  --r:9px;
  --fdisplay:'Fraunces',Georgia,'Times New Roman',serif;
  --fb:'Quattrocento',Cambria,'Times New Roman',serif;
  --fmeta:'IBM Plex Mono','SFMono-Regular',Menlo,monospace;
  --fh:'Fraunces',Georgia,serif;
}

:root body{font-family:var(--fb);color:var(--fg);background:var(--bg);line-height:1.76;font-size:16px;}
::selection{background:var(--primary);color:var(--paper2);}
:root hr{border:0;border-top:1px solid var(--line);margin:30px 0;}

/* ============================================================
   MASTHEAD — full-bleed band, serif-italic wordmark, monogram,
   and a manifesto line that gives the site a voice on every page.
   (header carries the same width class as main, so reset it.)
   ============================================================ */
:root body>header[class]{
  max-width:none; margin:0 0 8px; border:0;
  padding:52px max(24px,calc((100% - 1120px)/2)) 40px;
  background:
    radial-gradient(120% 160% at 12% 0%, rgba(184,154,101,.22), transparent 55%),
    linear-gradient(134deg,#362B54 0%,#4B3E73 52%,#5A4A2E 122%);
  border-bottom:3px solid var(--accent);
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
}
/* monogram: aperture-in-a-window = focus + screen */
:root body>header[class]::before{
  content:""; width:46px; height:46px; margin-bottom:2px;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2048'%3E%3Crect%20x='4'%20y='4'%20width='40'%20height='40'%20rx='10'%20fill='none'%20stroke='%23B89A65'%20stroke-width='2'/%3E%3Ccircle%20cx='24'%20cy='24'%20r='11'%20fill='none'%20stroke='%23EFE8D8'%20stroke-width='2'/%3E%3Ccircle%20cx='24'%20cy='24'%20r='3.4'%20fill='%23B89A65'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:contain;
}
:root body>header[class] h1,
:root body>header[class] a{
  font-family:var(--fdisplay); font-style:italic; font-weight:600;
  font-size:clamp(30px,4.6vw,42px); line-height:1.02; letter-spacing:-.01em;
  color:#F5EFE2; text-transform:none; text-decoration:none;
}
:root body>header[class] a:hover{color:#fff;}
/* home tagline */
:root body>header[class] h1+p{
  font-family:var(--fmeta); font-style:normal; font-weight:500;
  font-size:12.5px; line-height:1.5; letter-spacing:.03em;
  color:rgba(245,239,226,.72); margin:0; max-width:60ch; opacity:1;
}
/* manifesto — present on home AND article (moment color, use 1 of 2) */
:root body>header[class]::after{
  content:"Field notes on losing my focus to remote work — and clawing it back, one deep-work block at a time.";
  font-family:var(--fdisplay); font-style:italic; font-weight:400;
  font-size:15px; line-height:1.5; color:#EDE3CC;
  padding-left:14px; border-left:2px solid var(--moment); max-width:54ch;
}

/* ============================================================
   HOME LAYOUT — 6-col editorial grid.
   HOME scope = main[class]:has(> div > h2)  (won't match article main).
   ============================================================ */
:root main[class]:has(>div>h2){
  display:grid; grid-template-columns:repeat(6,1fr);
  column-gap:30px; row-gap:38px; align-items:stretch;
  max-width:none; margin:0;
  padding:34px max(24px,calc((100% - 1120px)/2)) 96px;
}

/* every home card: warm paper, soft frame */
:root main[class]:has(>div>h2)>div{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:0 1px 4px rgba(40,30,60,.05);
  padding:26px 32px; margin:0;
  display:flex; flex-direction:column;
}
/* meta / date row */
:root main[class]:has(>div>h2)>div>p:first-child{
  font-family:var(--fmeta); font-weight:600; font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
  margin:0 0 12px; line-height:1.4;
}
/* card title */
:root main[class]:has(>div>h2)>div>h2{
  font-family:var(--fdisplay); font-style:normal; font-weight:600;
  font-size:19px; line-height:1.24; letter-spacing:-.005em;
  color:var(--primary); text-transform:none; margin:0 0 10px; border:0;
}
:root main[class]:has(>div>h2)>div>h2 a{color:var(--primary);text-decoration:none;}
:root main[class]:has(>div>h2)>div>h2 a:hover{color:var(--accent);}
/* excerpt */
:root main[class]:has(>div>h2)>div>p:not(:first-child){
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  font-size:15px; line-height:1.6; color:var(--fg); opacity:.9;
  margin:0 0 16px; max-width:64ch;
}
/* read-more */
:root main[class]:has(>div>h2)>div>a:last-child{
  font-family:var(--fmeta); font-weight:600; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--primary);
  text-decoration:none; margin-top:auto;
}
:root main[class]:has(>div>h2)>div>a:last-child:hover{color:var(--accent);}

/* ---- HERO (newest post) — the loud voice --------------------- */
:root main[class]:has(>div>h2)>div:nth-of-type(1){
  grid-column:1 / -1; position:relative;
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(184,154,101,.10), transparent 60%),
    var(--paper2);
  border:1px solid var(--line); border-radius:12px;
  padding:44px 48px 40px; box-shadow:0 6px 24px rgba(40,30,60,.08);
}
:root main[class]:has(>div>h2)>div:nth-of-type(1)::before{
  content:"❯  LATEST FIELD NOTE"; font-family:var(--fmeta); font-weight:600;
  font-size:11px; letter-spacing:.24em; color:var(--accent);
  align-self:flex-start; margin-bottom:18px;
}
:root main[class]:has(>div>h2)>div:nth-of-type(1)>p:first-child{
  color:var(--primary); opacity:.75; margin-bottom:14px;
}
/* byline furniture appended to the date line */
:root main[class]:has(>div>h2)>div:nth-of-type(1)>p:first-child::after{
  content:"   •   By Jamie Okafor"; color:var(--accent);
}
:root main[class]:has(>div>h2)>div:nth-of-type(1)>h2{
  font-family:var(--fdisplay); font-style:italic; font-weight:600;
  font-size:clamp(30px,4.4vw,50px); line-height:1.04; letter-spacing:-.015em;
  margin-bottom:18px; max-width:18ch;
}
:root main[class]:has(>div>h2)>div:nth-of-type(1)>p:not(:first-child){
  display:block; font-size:20px; line-height:1.5; opacity:.92;
  max-width:60ch; margin-bottom:22px;
}
/* drop cap — moment color, use 2 of 2 */
:root main[class]:has(>div>h2)>div:nth-of-type(1)>p:not(:first-child)::first-letter{
  font-family:var(--fdisplay); font-style:italic; font-weight:600;
  font-size:3.5em; line-height:.8; float:left; color:var(--moment);
  padding:6px 10px 0 0;
}
/* outlined pill CTA */
:root main[class]:has(>div>h2)>div:nth-of-type(1)>a:last-child{
  align-self:flex-start; border:1.5px solid var(--primary); border-radius:22px;
  padding:9px 20px; font-size:11px; letter-spacing:.16em; transition:.15s;
}
:root main[class]:has(>div>h2)>div:nth-of-type(1)>a:last-child:hover{
  background:var(--primary); color:var(--paper2);
}
/* EDITOR'S PICKS section label — full-width band beneath hero, above the trio */
:root main[class]:has(>div>h2)>div:nth-of-type(1)::after{
  content:"EDITOR’S PICKS — READ THESE FIRST";
  order:99; align-self:stretch; margin:34px -48px -40px; padding:16px 48px 0;
  font-family:var(--fmeta); font-weight:600; font-size:12.5px;
  letter-spacing:.26em; text-transform:uppercase; color:var(--primary);
  border-top:1px solid var(--line);
}

/* ---- EDITOR'S PICKS (posts 2-4) — small band, equal height ---- */
:root main[class]:has(>div>h2)>div:nth-of-type(n+2):nth-of-type(-n+4){
  grid-column:span 2; min-height:212px; padding:30px 32px;
}
:root main[class]:has(>div>h2)>div:nth-of-type(n+2):nth-of-type(-n+4)>h2{font-size:20px;}
/* undo the base pass hiding the 4th card's excerpt */
:root main[class]:has(>div>h2)>div:nth-of-type(n+2):nth-of-type(-n+4)>p:not(:first-child){
  display:-webkit-box;
}

/* ---- STRIP 1 + JOURNAL LEAD (post 5) ------------------------- */
:root main[class]:has(>div>h2)>div:nth-of-type(5){
  grid-column:1 / -1; background:var(--paper2); padding:0 0 34px; overflow:hidden;
}
:root main[class]:has(>div>h2)>div:nth-of-type(5)::before{
  content:"IN ORDER OF WRITING"; display:grid; place-items:center;
  min-height:196px; margin-bottom:30px;
  background:
    linear-gradient(rgba(20,24,28,.5),rgba(20,24,28,.28)),
    radial-gradient(130% 120% at 20% 30%, rgba(184,154,101,.5), transparent 60%),
    linear-gradient(120deg,#2E2646 0%,#4B3E73 60%,#5A4A2E 120%);
  color:#F5EFE2; font-family:var(--fmeta); font-weight:600; font-size:13px;
  letter-spacing:.32em; text-transform:uppercase; text-shadow:0 1px 6px rgba(0,0,0,.4);
}
:root main[class]:has(>div>h2)>div:nth-of-type(5)>p:first-child,
:root main[class]:has(>div>h2)>div:nth-of-type(5)>h2,
:root main[class]:has(>div>h2)>div:nth-of-type(5)>p:not(:first-child),
:root main[class]:has(>div>h2)>div:nth-of-type(5)>a:last-child{margin-left:44px;margin-right:44px;}
:root main[class]:has(>div>h2)>div:nth-of-type(5)>h2{
  font-style:italic; font-size:clamp(24px,3vw,32px); line-height:1.1; max-width:22ch;
}
:root main[class]:has(>div>h2)>div:nth-of-type(5)>p:not(:first-child){
  font-size:17.5px; line-height:1.6; max-width:66ch; -webkit-line-clamp:3;
}

/* ---- JOURNAL grid (posts 6+) — quiet, consistent, 2-up ------- */
:root main[class]:has(>div>h2)>div:nth-of-type(n+6):has(>h2){grid-column:span 3;}
:root main[class]:has(>div>h2)>div:nth-of-type(n+6):has(>h2)>h2{font-size:18.5px;}
:root main[class]:has(>div>h2)>div:nth-of-type(n+6):has(>h2)>p:not(:first-child){-webkit-line-clamp:2;font-size:14.5px;}
/* closing entry spans full width so the last row never leaves a gap */
:root main[class]:has(>div>h2)>div:has(>h2):nth-last-of-type(2){grid-column:1 / -1;}
:root main[class]:has(>div>h2)>div:has(>h2):nth-last-of-type(2)>p:not(:first-child){max-width:64ch;}

/* ============================================================
   STRIP 2 + COMPACT ARCHIVE TAIL (last div = Nav_title dump)
   Full-width, multi-column magazine index, warm surface.
   ============================================================ */
:root main[class]:has(>div>h2)>div:last-of-type{
  grid-column:1 / -1; display:block; background:var(--paper); border:1px solid var(--line);
  border-radius:12px; padding:0 34px 30px; margin-top:14px;
  columns:3; column-gap:44px; overflow:hidden;
}
:root main[class]:has(>div>h2)>div:last-of-type::before{
  content:"PREVIOUS WRITING"; column-span:all; display:grid; place-items:center;
  min-height:210px; margin:0 -34px 26px;
  background:
    linear-gradient(rgba(20,24,28,.52),rgba(20,24,28,.3)),
    radial-gradient(130% 130% at 80% 70%, rgba(184,154,101,.55), transparent 60%),
    linear-gradient(300deg,#2A2340 0%,#4B3E73 55%,#6A5330 125%);
  color:#F5EFE2; font-family:var(--fmeta); font-weight:600; font-size:13px;
  letter-spacing:.32em; text-transform:uppercase; text-shadow:0 1px 6px rgba(0,0,0,.4);
}
:root main[class]:has(>div>h2)>div:last-of-type p{
  break-inside:avoid; margin:0; padding:8px 0;
  border-bottom:1px dotted var(--line); font-size:14.5px; line-height:1.4;
}
:root main[class]:has(>div>h2)>div:last-of-type a{
  font-family:var(--fb); color:var(--primary); text-decoration:none;
  border-bottom:1px solid transparent; padding-bottom:1px;
}
:root main[class]:has(>div>h2)>div:last-of-type a:hover{
  color:var(--primary); border-bottom-color:var(--accent);
}

/* ============================================================
   ARTICLE PAGE — preserve the readable measure, lift typography.
   ART scope = main[class]:has(> article).
   ============================================================ */
:root main[class]:has(>article){padding-bottom:80px;}
:root main[class]:has(>article)>h1{
  font-family:var(--fdisplay); font-style:italic; font-weight:600;
  font-size:clamp(30px,5vw,46px); line-height:1.08; letter-spacing:-.015em;
  color:var(--primary); text-transform:none; margin:10px 0 8px;
}
:root main[class]:has(>article)>span{
  display:block; font-family:var(--fmeta); font-weight:600; font-size:11px;
  color:var(--accent); letter-spacing:.2em; text-transform:uppercase; margin-bottom:34px;
}
:root main[class]:has(>article)>article>p{
  margin-bottom:20px; font-size:18.5px; line-height:1.8; color:var(--fg);
}
:root main[class]:has(>article)>article>h2{
  font-family:var(--fdisplay); font-style:normal; font-weight:600;
  font-size:26px; line-height:1.2; color:var(--primary); text-transform:none;
  letter-spacing:-.005em; margin:44px 0 12px; padding-bottom:7px;
  border-bottom:2px solid var(--accent);
}
:root main[class]:has(>article)>article>h2::before{
  content:"❯  "; color:var(--accent); font-weight:600;
}
:root main[class]:has(>article)>article>h3{
  font-family:var(--fdisplay); font-weight:600; font-size:19px; color:var(--primary);
  text-transform:none; margin:28px 0 10px;
}
:root main[class]:has(>article)>article ul,
:root main[class]:has(>article)>article ol{margin:0 0 20px 22px;}
:root main[class]:has(>article)>article li{margin-bottom:8px;line-height:1.7;}
:root main[class]:has(>article)>article blockquote{
  position:relative; border-left:3px solid var(--primary);
  padding:6px 0 6px 44px; margin:26px 0; font-family:var(--fdisplay);
  font-style:italic; font-size:20px; line-height:1.5; color:var(--primary);
}
:root main[class]:has(>article)>article blockquote::before{
  content:"“"; position:absolute; left:8px; top:-6px;
  font-family:var(--fdisplay); font-size:52px; line-height:1; color:var(--accent); opacity:.6;
}
:root main[class]:has(>article)>article img{
  width:100%; height:auto; display:block; margin:8px 0 28px;
  border:1px solid var(--line); border-radius:8px;
}
/* prose links */
:root main[class]:has(>article)>article p a,
:root main[class]:has(>article)>article li a{
  color:var(--primary); text-decoration:none;
  border-bottom:1.5px solid var(--accent); padding-bottom:1px; font-weight:700;
}
:root main[class]:has(>article)>article p a:hover,
:root main[class]:has(>article)>article li a:hover{color:var(--primary);border-bottom-color:var(--primary);}
/* affiliate CTA links — actual prefix on this site is /suggest/ (also /go/) */
:root main[class]:has(>article)>article p a[href^="/suggest/"],
:root main[class]:has(>article)>article p a[href^="/go/"],
:root main[class]:has(>article)>article li a[href^="/suggest/"],
:root main[class]:has(>article)>article li a[href^="/go/"]{
  font-family:var(--fmeta); font-weight:600; font-size:13px; color:var(--primary);
  background:transparent; border:1.5px solid var(--primary);
  padding:2px 10px; border-radius:6px; letter-spacing:.04em; text-transform:uppercase;
}
:root main[class]:has(>article)>article p a[href^="/suggest/"]:hover,
:root main[class]:has(>article)>article p a[href^="/go/"]:hover,
:root main[class]:has(>article)>article li a[href^="/suggest/"]:hover,
:root main[class]:has(>article)>article li a[href^="/go/"]:hover{background:var(--primary);color:var(--paper2);}

/* disclosure / notice box — warm callout, never white */
:root main[class]:has(>article) div[class*="Footer_area"],
:root main[class]:has(>article) section[class*="Footer_area"]{
  background:var(--paper2); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--r); padding:18px 22px; margin-top:34px;
  font-size:14px; line-height:1.65; color:var(--fg);
}
:root main[class]:has(>article) div[class*="Footer_area"] strong{
  font-family:var(--fmeta); font-weight:600; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--primary);
}
.Footer_area__SlxxK{font-size:.78rem;color:#8a8577;margin-top:1.5rem;padding-top:.75rem;border-top:1px dotted var(--line);display:block;}

/* article footer nav (older/newer) if present */
:root main[class] nav{margin-top:48px;padding-top:18px;border-top:2px solid var(--primary);font-size:14px;}
:root main[class] nav p a{color:var(--primary);text-decoration:none;border-bottom:1px solid var(--line);font-weight:500;}
:root main[class] nav p a:hover{border-bottom-color:var(--accent);color:var(--accent);}

/* site footer */
:root footer{background:transparent;border-top:1px solid var(--line);padding:26px 0 40px;margin-top:60px;text-align:center;font-family:var(--fmeta);font-size:11px;color:var(--fg);opacity:.6;letter-spacing:.08em;text-transform:uppercase;}
:root footer a{color:var(--fg);text-decoration:none;border-bottom:1px dotted var(--line);}
:root footer a:hover{color:var(--primary);border-bottom-color:var(--accent);}

/* ============================================================
   RESPONSIVE — collapse the grid to one column.
   Span resets must repeat the exact desktop selectors (implicit
   tracks otherwise survive; see pipeline gotcha #4).
   ============================================================ */
@media (max-width:840px){
  :root main[class]:has(>div>h2){grid-template-columns:1fr;column-gap:0;row-gap:26px;padding-left:20px;padding-right:20px;}
  :root main[class]:has(>div>h2)>div:nth-of-type(1),
  :root main[class]:has(>div>h2)>div:nth-of-type(n+2):nth-of-type(-n+4),
  :root main[class]:has(>div>h2)>div:nth-of-type(5),
  :root main[class]:has(>div>h2)>div:nth-of-type(n+6):has(>h2),
  :root main[class]:has(>div>h2)>div:has(>h2):nth-last-of-type(2),
  :root main[class]:has(>div>h2)>div:last-of-type{grid-column:1 / -1;}
  :root main[class]:has(>div>h2)>div:last-of-type{columns:2;column-gap:28px;}
  :root main[class]:has(>div>h2)>div:nth-of-type(1){padding:32px 26px;}
  :root main[class]:has(>div>h2)>div:nth-of-type(1)::after{margin:28px -26px -30px;padding:16px 26px 0;}
  :root main[class]:has(>div>h2)>div:nth-of-type(1)>h2{font-size:clamp(27px,7vw,38px);}
  :root body>header[class]{padding:40px 22px 32px;}
}
@media (max-width:520px){
  :root main[class]:has(>div>h2)>div:last-of-type{columns:1;}
  :root main[class]:has(>article)>article>p{font-size:17.5px;}
}


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


/* refix iter1: M7 archive tail cards */
:root main[class]:has(>div>h2)>div:last-of-type{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px 16px;
  align-items:stretch;
  background:transparent;
  border:0;
  box-shadow:none;
  padding:0;
  overflow:visible;
  columns:auto;
}
:root main[class]:has(>div>h2)>div:last-of-type::before{
  grid-column:1 / -1;
  margin:0 0 26px;
  border-radius:12px;
}
:root main[class]:has(>div>h2)>div:last-of-type p{
  display:flex;
  align-items:center;
  min-height:72px;
  height:100%;
  margin:0;
  padding:20px 22px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:0 1px 4px rgba(40,30,60,.05);
  line-height:1.45;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
:root main[class]:has(>div>h2)>div:last-of-type p:hover{
  transform:translateY(-1px);
  border-color:rgba(184,154,101,.46);
  box-shadow:0 4px 12px rgba(40,30,60,.08);
}
:root main[class]:has(>div>h2)>div:last-of-type a{
  display:block;
  width:100%;
  padding:0;
  border:0;
  color:var(--primary);
}
:root main[class]:has(>div>h2)>div:last-of-type a:hover{
  color:var(--accent);
  border:0;
}

/* refix iter1: S6 article meta personality anchor */
:root main[class]:has(>article)>span::after{
  content:" · By Jamie Okafor · Remote-focus field note";
}

@media (max-width:840px){
  :root main[class]:has(>div>h2)>div:last-of-type{
    grid-template-columns:repeat(2,1fr);
  }
}
@media (max-width:640px){
  :root main[class]:has(>div>h2)>div:last-of-type{
    grid-template-columns:1fr;
    gap:10px;
  }
  :root main[class]:has(>div>h2)>div:last-of-type p{
    min-height:68px;
    padding:18px 20px;
  }
}


/* premium-upgrade v1 */
/* premium editorial upgrade — style=Racquet-moody overlay=55% grid=equal scale=dramatic 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; }
}