*{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}
.sc-dGthbq{max-width:900px;margin:0 auto;padding:0 28px}
.sc-zunJxe{background:#111;color:#fff;padding:64px 0;margin-bottom:48px}
.sc-zunJxe h1{font-size:42px;font-weight:800;letter-spacing:-1px;margin-bottom:8px}
.sc-zunJxe p{font-size:18px;opacity:.7}
.sc-zunJxe a{color:#fff;text-decoration:none;font-size:22px;font-weight:800}
.sc-iHXRlF{padding:0}
.sc-cVTxXE{padding:32px 0;border-left:4px solid #111;padding-left:24px;margin-bottom:28px}
.sc-cVTxXE h2{font-size:24px;font-weight:700;margin-bottom:6px}
.sc-cVTxXE h2 a{color:#111;text-decoration:none}
.sc-cVTxXE h2 a:hover{text-decoration:underline}
.sc-cVTxXE .sc-eBsRiV{font-size:12px;font-weight:600;text-transform:uppercase;color:#888;letter-spacing:1px;margin-bottom:8px}
.sc-cVTxXE p{font-size:15px;color:#444;margin-bottom:10px}
.sc-CbnQNT{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}
.sc-CbnQNT:hover{background:#333}
.sc-NLUmVR{padding-bottom:60px}
.sc-NLUmVR h1{font-size:38px;font-weight:800;letter-spacing:-1px;margin-bottom:10px}
.sc-NLUmVR time{font-size:12px;font-weight:600;text-transform:uppercase;color:#888;letter-spacing:1px;display:block;margin-bottom:28px}
.sc-NLUmVR h2{font-size:26px;font-weight:700;margin:40px 0 14px}
.sc-NLUmVR h3{font-size:20px;font-weight:700;margin:32px 0 10px}
.sc-NLUmVR p{margin-bottom:18px;font-size:17px}
.sc-NLUmVR ul,.sc-NLUmVR ol{margin:0 0 18px 24px}
.sc-NLUmVR a{color:#111;font-weight:600;text-decoration:underline}
.sc-NLUmVR img{max-width:100%;height:auto;margin:20px 0}
.sc-LgSBVH{background:#111;color:#888;padding:28px 0;margin-top:48px;text-align:center;font-size:12px}
.sc-LgSBVH a{color:#888;text-decoration:none}
.sc-HFjHoe{background:#222;color:#aaa;padding:14px 20px;margin-bottom:24px;font-size:13px;font-style:italic}
.sc-JiJHPx{background:#1a1a1a;color:#888;padding:14px 20px;margin-top:32px;font-size:12px;border-top:3px solid #444}
.sc-zBQmbp{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}
.sc-Ovnjfd{margin:0 0 24px}
.sc-BvYQUD{width:100%;height:auto;border-radius:0}
.sc-BtThkv{border-left:4px solid #111;padding-left:24px;margin-top:48px}
.sc-BtThkv h3{font-size:18px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}
.sc-BtThkv ul{list-style:none;padding:0}
.sc-BtThkv li{padding:6px 0}
.sc-BtThkv a{color:#111;text-decoration:underline;font-weight:600}
.sc-sGaAZX{border-left:4px solid #ddd;padding-left:24px;margin-top:36px}
.sc-sGaAZX ul{list-style:none;padding:0}
.sc-sGaAZX li{padding:6px 0;font-size:16px}
.sc-sGaAZX a{color:#111;text-decoration:none;font-weight:600}
.sc-sGaAZX a:hover{text-decoration:underline}
.sc-sGaAZX .sc-eBsRiV{margin:0 0 0 8px}
/* === Theme === */
:root{--primary:#3F5E36;--accent:#C2843D;--bg:#E8E0CB;--fg:#1A1F26;--border:#B8B6A0;--r:9px;--fb:'Lustria';--fh:'Fraunces'}
/* === Custom === */
/* v.dc38f7 — layout revision */
/*
 * Brackenly — editorial-signature pass (backyard-outdoor-building-diy / a rural-NC couple).
 * Voices:  Fraunces italic  = display wordmark + featured/section titles (the loud voice)
 *          Lustria          = serif reading body + excerpts (the calm voice)
 *          Archivo          = uppercase-tracked kickers / bylines / labels (the meta voice)
 * Moment color: taupe-olive #7A6B4A used EXACTLY twice — masthead manifesto rule + hero drop cap.
 * Signature:    gable-house monogram (SVG data URI) in masthead + a roofline dinkus on article h2.
 * All selectors are element/structural. `:is(#qafix, el)` claims ID-level specificity so this pass
 * beats the obfuscated base template (`.sc-xxxxxx …` = up to (0,2,0)) and every earlier round;
 * #qafix is absent from the DOM, so matching happens through the real `body`/`main` alternative.
 * Fonts declared as @font-face (position-independent) — a top-of-file @import is dropped once the
 * deploy concatenates template + theme + custom into one site.css.
 * Theme assets front-image.jpg / chapter-cover.jpg 404 at build time, so every background layers the
 * photo OVER an opaque palette gradient: if the photo is absent the band still reads as designed.
 */

@font-face{font-family:'Fraunces';font-style:italic;font-weight:500 700;font-display:swap;
  src:url(https://fonts.gstatic.com/s/fraunces/v38/6NU58FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChTeP2Xz5c.woff2) format('woff2');}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600 700;font-display:swap;
  src:url(https://fonts.gstatic.com/s/fraunces/v38/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0K9C1Zf9-V.woff2) format('woff2');}
@font-face{font-family:'Lustria';font-style:normal;font-weight:400;font-display:swap;
  src:url(https://fonts.gstatic.com/s/lustria/v14/9oRONYodvDEyjuhOrC05NNPz.woff2) format('woff2');}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500 700;font-display:swap;
  src:url(https://fonts.gstatic.com/s/archivo/v25/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sIyfMRWOvQ.woff2) format('woff2');}

:root{ --moment:#7A6B4A; --paper:#F3EDDD; --meta:'Archivo'; }

:root body{
  font-family:var(--fb),Cambria,'Times New Roman',serif;
  color:var(--fg); background:var(--bg);
  line-height:1.72; font-size:17px;
}
html,body{ overflow-x:hidden; }
::selection{ background:var(--primary); color:var(--bg); }
:root hr{ border:0; border-top:1px solid var(--border); margin:32px 0; }

/* ======================================================================
   1. MASTHEAD — atmospheric forest band, gable monogram, italic wordmark
   Shared element on both templates: body > div:first-child.
   ====================================================================== */
:is(#qafix, body) > div:first-child{
  position:relative;
  background:
    linear-gradient(166deg, rgba(29,40,27,.88) 0%, rgba(45,64,44,.80) 55%, rgba(63,94,54,.62) 100%),
    url("/theme-assets/front-image.jpg") center 34% / cover no-repeat,
    linear-gradient(150deg, #2C3E28 0%, #3F5E36 100%);
  color:var(--bg);
  padding:100px 0 58px;
  margin-bottom:64px;
  border-bottom:4px solid var(--accent);
  overflow:hidden;
}
:is(#qafix, body) > div:first-child > div{
  max-width:min(1120px,92vw); margin:0 auto; padding:0 28px;
  position:relative; z-index:2;
}
/* gable-house monogram badge, top-left — the signature */
:is(#qafix, body) > div:first-child::before{
  content:""; position:absolute; z-index:3;
  top:32px; left:max(28px, calc((100vw - 1120px) / 2 + 28px));
  width:56px; height:56px; background-repeat:no-repeat; background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Ccircle%20cx='50'%20cy='50'%20r='46'%20fill='none'%20stroke='%23C2843D'%20stroke-width='2.5'/%3E%3Cpath%20d='M28%2060%20L50%2038%20L72%2060'%20fill='none'%20stroke='%23E8E0CB'%20stroke-width='4'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3Cpath%20d='M34%2057%20L34%2072%20L66%2072%20L66%2057'%20fill='none'%20stroke='%23E8E0CB'%20stroke-width='4'%20stroke-linejoin='round'/%3E%3Cpath%20d='M46%2072%20L46%2062%20L54%2062%20L54%2072'%20fill='none'%20stroke='%23E8E0CB'%20stroke-width='3'/%3E%3C/svg%3E");
}
/* wordmark — italic Fraunces on both home (h1) and article (a) */
:is(#qafix, body) > div:first-child h1,
:is(#qafix, body) > div:first-child a{
  font-family:var(--fh),Cambria,'Times New Roman',serif;
  font-style:italic; font-weight:700;
  font-size:clamp(46px,7vw,74px); line-height:1; letter-spacing:-.022em;
  color:var(--bg); text-shadow:0 2px 14px rgba(0,0,0,.34);
  text-decoration:none; margin:0;
}
/* tagline (home only) */
:is(#qafix, body) > div:first-child p{
  font-family:var(--fb),Cambria,serif; font-style:italic;
  font-size:17px; line-height:1.5; color:rgba(232,224,203,.86);
  margin:20px 0 0; max-width:46ch; text-shadow:0 1px 8px rgba(0,0,0,.3);
}
/* manifesto line under the tagline — MOMENT COLOR #1 (taupe-olive rule) */
:is(#qafix, body) > div:first-child p::after{
  content:"Not contractors. Not architects. Just good plans and enough stubbornness.";
  display:block; margin-top:18px; padding-left:16px; border-left:3px solid var(--moment);
  font-family:var(--fb),Cambria,serif; font-style:italic; font-size:15px; line-height:1.45;
  color:rgba(232,224,203,.78); max-width:44ch; text-shadow:0 1px 8px rgba(0,0,0,.3);
}
/* article-page masthead: slimmer band, no manifesto */
:is(#qafix, body) > div:first-child:has(> div > a){ padding:30px 0 26px; margin-bottom:48px; }
:is(#qafix, body) > div:first-child:has(> div > a)::before{ top:50%; transform:translateY(-50%); width:44px; height:44px; }
:is(#qafix, body) > div:first-child > div:has(> a){ padding-left:96px; }
:is(#qafix, body) > div:first-child > div > a{ font-size:clamp(30px,4.4vw,40px); }

/* ======================================================================
   2. HOMEPAGE  —  hero -> Editor's Picks -> strip -> Project Log grid
                    -> strip -> full-width archive index
   Home <main> is the only one with `> div > h2` (the cards). Kept as a grid at
   ALL widths so the strip/label pseudo-elements slot in order everywhere.
   ====================================================================== */
:is(#qafix, main):has(> div > h2){
  display:grid; grid-template-columns:1fr; column-gap:48px; row-gap:0;
  max-width:min(1120px,92vw); margin:0 auto; padding:8px 0 96px;
  align-items:start;
}
:is(#qafix, main):has(> div > h2) > div{ grid-column:1/-1; }

/* shared card shell for Picks + Project Log (everything after the hero that has a title) */
:is(#qafix, main):has(> div > h2) > div:nth-of-type(n+2):has(> h2){
  background:var(--paper);
  border:1px solid rgba(63,94,54,.15); border-radius:8px;
  box-shadow:0 1px 4px rgba(0,0,0,.04);
  padding:28px 34px;
}
:is(#qafix, main):has(> div > h2) > div:nth-of-type(n+2):has(> h2) > p:first-child{
  font-family:var(--meta),system-ui,sans-serif; font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
  margin:0 0 12px; opacity:1;
}
:is(#qafix, main):has(> div > h2) > div:nth-of-type(n+2):has(> h2) > h2{
  font-family:var(--fh),Cambria,serif; font-size:20px; font-weight:600;
  line-height:1.26; letter-spacing:-.006em; margin:0 0 10px; color:var(--fg);
}
:is(#qafix, main):has(> div > h2) > div:nth-of-type(n+2):has(> h2) > h2 a{ color:var(--fg); text-decoration:none; }
:is(#qafix, main):has(> div > h2) > div:nth-of-type(n+2):has(> h2) > h2 a:hover{ color:var(--primary); }
:is(#qafix, main):has(> div > h2) > div:nth-of-type(n+2):has(> h2) > p:not(:first-child){
  font-family:var(--fb),Cambria,serif; font-size:15.5px; line-height:1.6;
  color:var(--fg); opacity:.85; margin:0 0 16px; max-width:64ch;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;
}
/* quiet arrow read-link on Picks + Log cards */
:is(#qafix, main):has(> div > h2) > div:nth-of-type(n+2):has(> h2) > a:last-child{
  font-family:var(--meta),system-ui,sans-serif; font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--primary);
  background:transparent; padding:0; border:0; border-radius:0; box-shadow:none;
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  transition:color .18s ease, gap .18s ease;
}
:is(#qafix, main):has(> div > h2) > div:nth-of-type(n+2):has(> h2) > a:last-child::after{ content:"\002192"; font-size:14px; }
:is(#qafix, main):has(> div > h2) > div:nth-of-type(n+2):has(> h2) > a:last-child:hover{ color:var(--accent); gap:11px; background:transparent; }

/* ---------- 2a. HERO — the one loud voice (first card, frameless spread) ---------- */
:is(#qafix, main):has(> div > h2) > div:first-of-type{
  order:1; position:relative;
  background:transparent; border:0; box-shadow:none;
  padding:6px 0 56px; margin:0 0 12px;
  border-bottom:3px double rgba(63,94,54,.34);
}
:is(#qafix, main):has(> div > h2) > div:first-of-type::before{
  content:"LATEST BUILD"; display:inline-block; margin:0 0 18px;
  font-family:var(--meta),system-ui,sans-serif; font-size:10px; font-weight:700;
  letter-spacing:.3em; text-transform:uppercase; color:var(--accent);
  border:1px solid var(--accent); border-radius:999px; padding:6px 14px 5px;
}
:is(#qafix, main):has(> div > h2) > div:first-of-type > p:first-child{
  font-family:var(--meta),system-ui,sans-serif; font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--primary); opacity:.7; margin:0 0 14px;
}
:is(#qafix, main):has(> div > h2) > div:first-of-type > h2{
  font-family:var(--fh),Cambria,serif; font-weight:700;
  font-size:clamp(38px,5.4vw,62px); line-height:1.04; letter-spacing:-.02em;
  margin:0 0 18px; max-width:18ch; color:var(--fg);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:none; overflow:visible;
}
:is(#qafix, main):has(> div > h2) > div:first-of-type > h2 a{ color:var(--fg); text-decoration:none; }
:is(#qafix, main):has(> div > h2) > div:first-of-type > h2 a:hover{ color:var(--primary); }
/* byline block under the featured title */
:is(#qafix, main):has(> div > h2) > div:first-of-type > h2::after{
  content:"BY CHRIS & SAM\0000A0\0000B7\0000A07 MIN READ\0000A0\0000B7\0000A0THE PROJECT LOG";
  display:block; margin-top:22px;
  font-family:var(--meta),system-ui,sans-serif; font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--primary); opacity:.7;
}
:is(#qafix, main):has(> div > h2) > div:first-of-type > p:not(:first-child){
  font-family:var(--fb),Cambria,serif; font-size:20px; line-height:1.5;
  color:var(--fg); opacity:.9; margin:22px 0 26px; max-width:58ch;
  display:block; -webkit-line-clamp:none; overflow:visible;
}
/* drop cap — MOMENT COLOR #2 (taupe-olive) */
:is(#qafix, main):has(> div > h2) > div:first-of-type > p:nth-of-type(2)::first-letter{
  font-family:var(--fh),Cambria,'Times New Roman',serif; font-weight:700; font-size:76px;
  line-height:.78; float:left; margin:8px 12px -6px 0; color:var(--moment);
}
/* CTA — outlined pill */
:is(#qafix, main):has(> div > h2) > div:first-of-type > a:last-child{
  font-family:var(--meta),system-ui,sans-serif; font-size:11.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--primary);
  border:1.5px solid var(--primary); border-radius:999px; padding:11px 24px;
  display:inline-flex; align-items:center; gap:8px; text-decoration:none; background:transparent;
  transition:background .18s ease, color .18s ease, gap .18s ease;
}
:is(#qafix, main):has(> div > h2) > div:first-of-type > a:last-child::after{ content:"\002192"; font-size:14px; }
:is(#qafix, main):has(> div > h2) > div:first-of-type > a:last-child:hover{ background:var(--primary); color:var(--bg); gap:11px; }
/* Editor's Picks label — full-width block at the foot of the hero, above the band (RULE B) */
:is(#qafix, main):has(> div > h2) > div:first-of-type::after{
  content:"EDITOR\002019S PICKS\0000A0\002014\0000A0START HERE";
  display:block; margin-top:46px; padding-bottom:12px;
  border-bottom:1px solid rgba(194,132,61,.4);
  font-family:var(--meta),system-ui,sans-serif; font-size:13px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--accent);
}

/* ---------- 2b. EDITOR'S PICKS band (cards 2-4) ---------- */
:is(#qafix, main):has(> div > h2) > div:nth-of-type(2):has(> h2),
:is(#qafix, main):has(> div > h2) > div:nth-of-type(3):has(> h2),
:is(#qafix, main):has(> div > h2) > div:nth-of-type(4):has(> h2){
  order:2; border-top:3px solid var(--primary);
}

/* ---------- STRIP 1 — chapter break between Picks and the Project Log (RULE F) ---------- */
:is(#qafix, main):has(> div > h2)::before{
  content:"MORE ESSAYS BELOW"; order:3; grid-column:1/-1;
  min-height:200px; margin:40px 0 0;
  display:flex; align-items:center; justify-content:center; border-radius:8px;
  background:
    linear-gradient(rgba(20,24,28,.55), rgba(20,24,28,.25)),
    url("/theme-assets/chapter-cover.jpg") center 30% / cover no-repeat,
    linear-gradient(118deg, #2C3E28 0%, #3F5E36 58%, #5F6B36 100%);
  font-family:var(--meta),system-ui,sans-serif; font-size:13px; font-weight:600;
  letter-spacing:.32em; text-transform:uppercase; color:#F3EBD8;
  text-shadow:0 1px 6px rgba(0,0,0,.6);
}
/* ---------- Project Log section label — full-width (RULE B) ---------- */
:is(#qafix, main):has(> div > h2)::after{
  content:"THE PROJECT LOG\0000A0\002014\0000A0NEWEST FIRST"; order:4; grid-column:1/-1;
  margin:40px 0 0; padding-bottom:12px; border-bottom:1px solid rgba(63,94,54,.3);
  font-family:var(--meta),system-ui,sans-serif; font-size:13px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--primary);
}

/* ---------- 2c. PROJECT LOG — quiet chronological grid (cards 5+) ---------- */
:is(#qafix, main):has(> div > h2) > div:nth-of-type(n+5):has(> h2){ order:5; }

/* ---------- 2d. ARCHIVE INDEX (tail, div with a ul) + STRIP 2 (RULE F, RULE G) ---------- */
:is(#qafix, main):has(> div > h2) > div:has(> ul){
  order:6; grid-column:1/-1;
  background:transparent; border:0; border-radius:0; box-shadow:0 1px 4px rgba(0,0,0,.04);
  padding:0; margin:44px 0 0;
}
:is(#qafix, main):has(> div > h2) > div:has(> ul)::before{
  content:"SEE MORE ESSAYS"; display:flex; align-items:center; justify-content:center;
  min-height:210px; margin-bottom:36px; border-radius:8px;
  background:
    linear-gradient(rgba(20,24,28,.55), rgba(20,24,28,.25)),
    url("/theme-assets/chapter-cover.jpg") center 70% / cover no-repeat,
    linear-gradient(118deg, #3F5E36 0%, #7B6234 55%, #C2843D 100%);
  font-family:var(--meta),system-ui,sans-serif; font-size:13px; font-weight:600;
  letter-spacing:.32em; text-transform:uppercase; color:#F3EBD8;
  text-shadow:0 1px 6px rgba(0,0,0,.6);
}
:is(#qafix, main):has(> div > h2) > div:has(> ul) > ul{ list-style:none; margin:0; padding:0; }
:is(#qafix, main):has(> div > h2) > div:has(> ul) > ul > li{
  padding:12px 0; border-bottom:1px dotted rgba(0,0,0,.14);
  break-inside:avoid; line-height:1.4;
}
:is(#qafix, main):has(> div > h2) > div:has(> ul) > ul > li > a{
  font-family:var(--fb),Cambria,serif; font-size:15.5px; color:var(--fg);
  text-decoration:none; font-weight:400;
}
:is(#qafix, main):has(> div > h2) > div:has(> ul) > ul > li > a:hover{ color:var(--primary); text-decoration:underline; text-underline-offset:3px; }
:is(#qafix, main):has(> div > h2) > div:has(> ul) > ul > li > span{
  font-family:var(--meta),system-ui,sans-serif; font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent); opacity:.75; margin-left:10px;
}

/* ---------- DESKTOP grid ---------- */
@media (min-width:900px){
  :is(#qafix, main):has(> div > h2){ grid-template-columns:repeat(6,1fr); row-gap:0; }
  /* Picks: 3-up band */
  :is(#qafix, main):has(> div > h2) > div:nth-of-type(2):has(> h2),
  :is(#qafix, main):has(> div > h2) > div:nth-of-type(3):has(> h2),
  :is(#qafix, main):has(> div > h2) > div:nth-of-type(4):has(> h2){ grid-column:span 2; }
  /* Project Log: 2-up */
  :is(#qafix, main):has(> div > h2) > div:nth-of-type(n+5):has(> h2){ grid-column:span 3; }

  /* hero becomes a spread: content left, metadata right */
  :is(#qafix, main):has(> div > h2) > div:first-of-type{
    grid-column:1/-1;
    display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
    column-gap:60px; align-items:start;
  }
  :is(#qafix, main):has(> div > h2) > div:first-of-type > h2,
  :is(#qafix, main):has(> div > h2) > div:first-of-type > p:not(:first-child),
  :is(#qafix, main):has(> div > h2) > div:first-of-type > a:last-child{ grid-column:1; }
  :is(#qafix, main):has(> div > h2) > div:first-of-type::before{ grid-column:1; }
  :is(#qafix, main):has(> div > h2) > div:first-of-type::after{ grid-column:1/-1; }
  /* right column: big N° numeral built off the date line, then the date, then a tag */
  :is(#qafix, main):has(> div > h2) > div:first-of-type > p:first-child{
    grid-column:2; grid-row:1/span 4; justify-self:end; text-align:right; align-self:start;
    margin:6px 0 0; color:var(--primary); opacity:.9;
  }
  :is(#qafix, main):has(> div > h2) > div:first-of-type > p:first-child::before{
    content:"N\0000BA\0000A001"; display:block;
    font-family:var(--fh),Cambria,serif; font-style:italic; font-weight:700;
    font-size:58px; line-height:.9; letter-spacing:-.02em; color:var(--accent); opacity:.85; margin-bottom:8px;
  }
  :is(#qafix, main):has(> div > h2) > div:first-of-type > p:first-child::after{
    content:"SHED\0000A0\0000B7\0000A0DECK\0000A0\0000B7\0000A0COOP\0000A0\0000B7\0000A0PERGOLA";
    display:block; margin-top:14px; padding-top:12px; border-top:1px solid rgba(63,94,54,.2);
    font-size:10px; letter-spacing:.16em; color:var(--primary); opacity:.6;
  }
  /* archive index reads as a magazine two-up (RULE G) */
  :is(#qafix, main):has(> div > h2) > div:has(> ul) > ul{ columns:2; column-gap:52px; }
}

/* ======================================================================
   3. ARTICLE PAGES — display title, roofline dinkus, hanging quote, /out/ chips
   Article <main> has `> article` (body prose), never `> div > h2`.
   ====================================================================== */
:is(#qafix, main) > hgroup > h1,
:is(#qafix, main) > h1{
  font-family:var(--fh),Cambria,'Times New Roman',serif; font-weight:700;
  font-size:clamp(34px,4.6vw,52px); line-height:1.08; letter-spacing:-.018em;
  color:var(--primary); margin:6px 0 12px;
}
:is(#qafix, main) > hgroup > time,
:is(#qafix, main) > time{
  display:block; font-family:var(--meta),system-ui,sans-serif; font-size:11px; font-weight:600;
  color:var(--accent); letter-spacing:.16em; text-transform:uppercase; margin-bottom:34px;
}
:is(#qafix, main) > hgroup{ border-bottom:1px solid rgba(63,94,54,.2); padding-bottom:8px; margin-bottom:36px; }

:is(#qafix, main) > article > p{
  font-family:var(--fb),Cambria,serif; font-size:18.5px; line-height:1.78; margin-bottom:1.2em;
}
:is(#qafix, main) > article ul,
:is(#qafix, main) > article ol{ margin:0 0 20px 24px; }
:is(#qafix, main) > article li{ font-size:18px; line-height:1.7; margin-bottom:8px; }

/* h2 — quiet serif head beneath a centered roofline dinkus (signature) */
:is(#qafix, main) > article > h2{
  font-family:var(--fh),Cambria,serif; font-weight:600; font-size:28px;
  line-height:1.18; letter-spacing:-.012em; color:var(--primary);
  background:transparent; border:0; padding:0; text-transform:none; margin:52px 0 16px;
}
:is(#qafix, main) > article > h2::before{
  content:""; display:block; width:66px; height:24px; margin:0 auto 30px;
  background-repeat:no-repeat; background-position:center; background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2090%2028'%3E%3Cpath%20d='M8%2022%20L28%2010%20L45%2020'%20fill='none'%20stroke='%23C2843D'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3Cpath%20d='M45%2020%20L62%2010%20L82%2022'%20fill='none'%20stroke='%233F5E36'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}
:is(#qafix, main) > article > h3{
  font-family:var(--fh),Cambria,serif; font-weight:600; font-style:italic; font-size:20px;
  color:var(--accent); margin:32px 0 10px; border:0; padding:0;
}

/* blockquote — hanging quote, no panel */
:is(#qafix, main) > article blockquote{
  position:relative; border:0; background:transparent; padding:2px 0 2px 46px; margin:32px 0;
  font-family:var(--fb),Cambria,serif; font-style:italic; font-size:20px; line-height:1.6; color:var(--primary);
}
:is(#qafix, main) > article blockquote::before{
  content:"\00201C"; position:absolute; left:0; top:-2px;
  font-family:var(--fh),Cambria,serif; font-weight:700; font-size:62px; line-height:1; color:var(--accent); opacity:.55;
}

/* body links + affiliate /out/ chips */
:is(#qafix, main) > article > p a,
:is(#qafix, main) > article > p a:visited{
  color:var(--primary); text-decoration:underline; text-decoration-color:var(--accent);
  text-underline-offset:3px; text-decoration-thickness:1.5px; font-weight:600;
}
:is(#qafix, main) > article > p a:hover{ color:var(--accent); text-decoration-color:var(--primary); }
:is(#qafix, main) > article > p a[href^="/out/"],
:is(#qafix, main) > article > p a[href^="/out/"]:visited{
  color:var(--bg); background:var(--accent); padding:1px 9px 2px; border-radius:6px;
  text-decoration:none; font-weight:700; font-family:var(--meta),system-ui,sans-serif;
  font-size:14.5px; letter-spacing:.01em; white-space:nowrap;
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}
:is(#qafix, main) > article > p a[href^="/out/"]:hover{ background:var(--primary); color:var(--bg); text-decoration:none; }

/* article images */
:is(#qafix, main) > article section > img,
:is(#qafix, main) > article img{
  width:100%; height:auto; display:block; border-radius:var(--r);
  box-shadow:0 3px 14px rgba(26,31,38,.14); border:1px solid var(--border); margin:6px 0 26px;
}

/* related articles (article-page div with a ul) */
:is(#qafix, main) > div:has(> ul){
  background:rgba(63,94,54,.05); border:0; border-top:2px solid rgba(194,132,61,.34);
  border-radius:0 0 var(--r) var(--r); padding:26px 30px; margin-top:52px;
}
:is(#qafix, main) > div:has(> ul) > h3{
  font-family:var(--meta),system-ui,sans-serif; font-size:13px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--primary); margin:0 0 14px;
}
:is(#qafix, main) > div:has(> ul) > ul{ list-style:none; margin:0; padding:0; }
:is(#qafix, main) > div:has(> ul) > ul > li{ padding:11px 0; border-bottom:1px dotted rgba(0,0,0,.14); }
:is(#qafix, main) > div:has(> ul) > ul > li:last-child{ border-bottom:0; }
:is(#qafix, main) > div:has(> ul) > ul > li > a{
  font-family:var(--fb),Cambria,serif; font-size:16px; line-height:1.5; color:var(--primary); text-decoration:none;
}
:is(#qafix, main) > div:has(> ul) > ul > li > a:hover{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }

/* article aside */
:is(#qafix, main) > article aside,
:is(#qafix, main) > aside{
  background:rgba(63,94,54,.06); border-left:4px solid var(--primary);
  border-radius:0 var(--r) var(--r) 0; padding:16px 22px; margin:36px 0 0;
  font-family:var(--fb),Cambria,serif; font-style:italic; font-size:15px; line-height:1.65; color:var(--fg);
}

/* ======================================================================
   4. FOOTER
   ====================================================================== */
:is(#qafix, body) footer{
  background:transparent; border-top:1px solid var(--border);
  padding:28px 0 40px; margin-top:56px; text-align:center;
  font-family:var(--meta),system-ui,sans-serif; font-size:11px; color:var(--fg);
  opacity:.6; letter-spacing:.12em; text-transform:uppercase;
}
:is(#qafix, body) footer a{ color:var(--fg); text-decoration:none; border-bottom:1px dotted var(--border); }
:is(#qafix, body) footer a:hover{ color:var(--primary); border-bottom-color:var(--primary); }