:root{
  --paper:#F3EFE6; --card:#FFFDF8; --sunk:#E8E2D5; --line:#D6CDBA; --rule:#9C9382;
  --ink:#241E17; --muted:#615748; --deep:#31261B; --steel:#4E5A62;
  --accent:#9C4A16; --ok:#1E6B4F;
  --display:"Bitter",Georgia,serif; --ui:"Barlow",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace; --read:"Bitter",Georgia,serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.66 var(--read);
  -webkit-font-smoothing:antialiased}
.ft-wrap{max-width:1160px;margin:0 auto;padding:0 24px;width:100%}
h1,h2,h3{margin:0}
a{color:var(--accent)}
.hdr{background:var(--card);border-bottom:2px solid var(--deep)}
.hdr-in{height:74px;display:flex;align-items:center;gap:24px;padding-left:150px}
.mark{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--deep);white-space:nowrap;flex:none}
.mark i{width:28px;height:10px;flex:none;display:block;
  background:repeating-linear-gradient(90deg,var(--deep) 0 2px,transparent 2px 6px)}
.mark b{font:700 22px/1 var(--display);letter-spacing:-.015em}
.nav{margin-left:auto;display:flex;gap:17px;flex-wrap:nowrap}
.nav a{font:500 14px/1 var(--ui);color:var(--ink);text-decoration:none;white-space:nowrap}
.nav a:hover{color:var(--accent)}
@media(max-width:1260px){.nav .more{display:none}}
@media(max-width:820px){.hdr-in{padding-left:0;height:auto;flex-wrap:wrap;padding:14px 0;gap:12px}
  .nav{margin-left:0;flex-wrap:wrap;gap:13px}}
/* hero: A's photograph, B's proposition */
.hero{position:relative;overflow:hidden;background:var(--deep);display:flex;align-items:flex-end;
  min-height:clamp(320px,38vw,480px)}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%;z-index:0}
.hero .band{position:relative;z-index:2;width:100%;padding-top:48px;
  background:linear-gradient(180deg,rgba(30,22,14,0) 0%,rgba(30,22,14,.32) 5%,
    rgba(30,22,14,.90) 18%,rgba(30,22,14,.96) 100%)}
.hero .ft-wrap{padding-bottom:32px}
.hero .kick{font:500 11.5px/1.4 var(--mono);letter-spacing:.15em;text-transform:uppercase;
  color:#E0C6A4;margin:0 0 12px}
.hero h1{font:700 clamp(28px,3.8vw,44px)/1.13 var(--display);color:#FFF9F0;letter-spacing:-.02em;max-width:21ch}
.hero .sf{margin:14px 0 0;max-width:64ch;font-size:18px;line-height:1.55;color:#EDDFCC}
/* the join: job router whose cards carry the spec each job hangs on */
.jobs{background:var(--card);border-bottom:1px solid var(--line);padding:42px 0 46px}
.k{font:500 11.5px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.t{font:700 clamp(23px,2.8vw,32px)/1.16 var(--display);letter-spacing:-.015em;color:var(--deep)}
.l{margin:12px 0 0;max-width:72ch;color:var(--muted);font-size:17px}
.jobgrid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:24px;
  grid-template-columns:repeat(auto-fit,minmax(min(252px,100%),1fr))}
.job{display:block;text-decoration:none;color:inherit;background:var(--card);padding:17px 18px 19px}
.job:hover{background:var(--sunk)}
.job b{display:block;font:700 19px/1.2 var(--display);color:var(--deep)}
.job span{display:block;margin-top:6px;font:400 14.5px/1.5 var(--ui);color:var(--muted)}
.job em{display:block;margin-top:10px;padding-top:9px;border-top:1px dashed var(--line);
  font:500 12.5px/1.4 var(--mono);font-style:normal;color:var(--steel)}
/* B's decoder, in A's materials */
.decoder{background:var(--sunk);padding:44px 0 48px;border-bottom:1px solid var(--line)}
.dec{margin-top:24px;border:1px solid var(--rule);background:var(--card)}
.dec-head,.dec-row{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr) minmax(0,1.15fr)}
.dec-head{background:var(--deep)}
.dec-head div{padding:11px 15px;font:600 11px/1.35 var(--mono);letter-spacing:.13em;
  text-transform:uppercase;color:#E8DCCB;border-left:1px solid rgba(255,255,255,.16)}
.dec-head div:first-child{border-left:0}
.dec-row{border-top:1px solid var(--line)}
.dec-row div{padding:14px 15px;border-left:1px solid var(--line);font-size:15.5px;line-height:1.5}
.dec-row div:first-child{border-left:0;font-family:var(--mono);font-weight:500;font-size:14px;
  color:var(--deep);background:var(--paper)}
.dec-row .no::before{content:"✕ ";color:var(--accent);font-weight:700}
.dec-row .yes::before{content:"✓ ";color:var(--ok);font-weight:700}
@media(max-width:860px){
  .dec-head{display:none}
  .dec-row{grid-template-columns:1fr}
  .dec-row div{border-left:0;border-top:1px solid var(--line)}
  .dec-row div:first-child{border-top:0}
}
.sec{padding:44px 0 48px}
.reads{list-style:none;margin:22px 0 0;padding:0;border-top:2px solid var(--deep)}
.reads li{border-bottom:1px solid var(--line)}
.reads a{display:block;padding:15px 2px;text-decoration:none;color:var(--ink);font:400 18px/1.4 var(--read)}
.reads a:hover{color:var(--accent)}
.adzone{padding:46px 0}
.ad{border:1px solid var(--line);background:var(--card);padding:16px}
.adl{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.adb{border:1px dashed var(--line);height:230px;display:flex;align-items:center;justify-content:center;
  color:var(--muted);font:400 14px/1 var(--mono);background:var(--sunk)}
.cats{background:var(--card);border-top:1px solid var(--line);padding:44px 0 48px}
.cg{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:22px;
  grid-template-columns:repeat(auto-fit,minmax(min(244px,100%),1fr))}
.cg a{background:var(--card);padding:17px 18px 19px;text-decoration:none;display:block}
.cg a:hover{background:var(--sunk)}
.cg b{display:block;font:700 16.5px/1.3 var(--display);color:var(--deep)}
.cg span{display:block;margin-top:5px;font:400 14.5px/1.5 var(--ui);color:var(--muted)}
.stop{background:var(--deep);color:#EBE0D0;padding:44px 0 48px;border-top:6px solid var(--accent)}
.stop h2{font:700 clamp(21px,2.4vw,28px)/1.2 var(--display);color:#FFF9F0}
.stop p{color:#D5C7B4;max-width:74ch;margin:12px 0 0}
.sl{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:1px;background:rgba(255,255,255,.16);
  grid-template-columns:repeat(auto-fit,minmax(min(258px,100%),1fr))}
.sl li{background:var(--deep);padding:15px 17px}
.sl b{display:block;font:600 11.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#FFF9F0;margin-bottom:6px}
.sl span{font:400 14.5px/1.5 var(--ui);color:#C4B5A1}
.ftr{background:var(--card);border-top:1px solid var(--line);padding:30px 0 18px;color:var(--muted);font:400 15px/1.6 var(--ui)}
.disc{max-width:1160px;margin:0 auto;padding:0 24px 32px;font:400 13.5px/1.65 var(--ui);color:var(--muted)}
.disc strong{color:var(--ink)}
.art{max-width:755px;margin:0 auto;padding:34px 24px 8px}
.art-meta{font:500 12px/1.5 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 15px}
.art h1{font:700 clamp(28px,3.8vw,41px)/1.14 var(--display);color:var(--deep);letter-spacing:-.02em;margin:0 0 15px}
.art .lede{font-size:19.5px;line-height:1.58;color:var(--muted);margin:0 0 6px}
.art h2{font:700 clamp(20px,2.3vw,26px)/1.22 var(--display);color:var(--deep);margin:32px 0 11px}
.art p{margin:0 0 15px}
.art figure{margin:26px 0}
.art figure img{display:block;width:100%;height:auto;border:1px solid var(--line)}
.art figcaption{margin-top:9px;font:400 13px/1.55 var(--mono);color:var(--muted)}
.spec{border:1px solid var(--rule);background:var(--card);margin:26px 0}
.spec .h{background:var(--deep);color:#E8DCCB;padding:10px 15px;font:600 11px/1.3 var(--mono);letter-spacing:.13em;text-transform:uppercase}
.spec dl{margin:0;display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1fr)}
.spec dt,.spec dd{margin:0;padding:12px 15px;border-top:1px solid var(--line)}
.spec dt{font:500 13.5px/1.45 var(--mono);color:var(--deep);background:var(--paper)}
.spec dd{font-size:15.5px;line-height:1.5}
@media(max-width:620px){.spec dl{grid-template-columns:1fr}.spec dd{border-top:0}}
.badat{border:1px solid var(--line);border-left:5px solid var(--accent);background:var(--card);padding:17px 19px 19px;margin:26px 0}
.badat b{display:block;font:700 15.5px/1.3 var(--ui);color:var(--accent);margin-bottom:8px}
.badat p{margin:0;font-size:16.5px}
.guard{border:2px solid var(--accent);padding:19px 21px;margin:0 auto 34px;max-width:755px;background:var(--card)}
.guard h3{font:600 11.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;margin:0 0 9px;color:var(--accent)}
.guard p{margin:0;font-size:16.5px;color:var(--muted)}
.guardwrap{padding-top:240px}
@media(max-width:700px){.guardwrap{padding-top:200px}}

/* ==================================================================
   WORDPRESS / GENERATEPRESS INTEGRATION
   Every lesson from the poolsshop build is baked in here rather than rediscovered:
   body.* anchors (GP puts class="page" on the <article> too), desktop nav scoped to
   min-width:769px so it cannot break GP's own mobile toggle, and full-bleed only on .home.
   ================================================================== */
body{background:var(--paper)}
.site-content{padding:0}
.inside-article,.entry-content{max-width:none}

/* --- masthead --- */
.site-header{background:var(--card);border-bottom:2px solid var(--deep);padding:0}
.site-header .inside-header{max-width:1160px;margin:0 auto;padding:0 24px;height:74px;
  display:flex;align-items:center;gap:24px;justify-content:space-between;flex-wrap:nowrap}
.site-header .site-branding{padding:0;flex:0 0 auto}
.site-header .main-title{margin:0;font:700 22px/1 var(--display);letter-spacing:-.015em;white-space:nowrap}
.site-header .main-title a{color:var(--deep);text-decoration:none}
.site-header .site-description{display:none}
.main-navigation{background:transparent}
.main-navigation .inside-navigation{padding:0;max-width:none}
.main-navigation .main-nav ul li a{padding:0;line-height:1;font:500 14px/1 var(--ui);
  color:var(--ink);white-space:nowrap;background:transparent}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item a{color:var(--accent);background:transparent}
.main-navigation .menu-toggle{color:var(--ink);background:transparent;font-family:var(--ui)}
@media(min-width:769px){
  .site-header #site-navigation{flex:0 0 auto;margin-left:auto;min-width:0}
  .main-navigation .main-nav>ul{display:flex;gap:16px;flex-wrap:nowrap;
    justify-content:flex-start;margin:0;padding:0}
  .main-navigation .main-nav>ul>li{margin:0}
}
@media(max-width:1320px){.main-navigation .main-nav>ul>li:nth-child(n+8){display:none}}
@media(max-width:1140px){.main-navigation .main-nav>ul>li:nth-child(n+6){display:none}}
/* Below GP's breakpoint the theme's own collapse is correct — only restyle it. */
@media(max-width:768px){
  .site-header .inside-header{height:auto;flex-wrap:wrap;padding:12px 20px}
  .site-header #site-navigation{order:2;flex:0 0 auto;margin:0;width:auto}
  .site-header .menu-toggle{display:block;padding:8px 4px;font:600 14px/1 var(--ui)}
  .site-header .main-nav>ul,
  .site-header .main-nav>ul>li:nth-child(n+6),
  .site-header .main-nav>ul>li:nth-child(n+8){display:none}
  .site-header #site-navigation.toggled{order:3;flex:1 1 100%;width:100%}
  .site-header #site-navigation.toggled .main-nav>ul,
  .site-header #site-navigation.toggled .main-nav>ul>li:nth-child(n+6),
  .site-header #site-navigation.toggled .main-nav>ul>li:nth-child(n+8){display:block}
  .site-header #site-navigation.toggled .main-nav>ul{width:100%;padding:8px 0 4px}
  .site-header #site-navigation.toggled .main-nav>ul>li>a{display:block;padding:11px 0;
    font-size:15px;border-bottom:1px solid var(--line)}
}

/* --- front page is full bleed; each section carries its own .ft-wrap --- */
.home .entry-header,.home .page-header,.home .entry-title{display:none}
.home #page,.home #page.container,.home #page.grid-container{max-width:none;padding:0;margin:0}
.home .site-content,.home .content-area,.home .site-main{max-width:none;width:100%;padding:0;margin:0}
.home .site-content .inside-article,.home article.page{padding:0;margin:0;border:0;background:transparent}
.home #page,.home article.page,.home .inside-article,.home .entry-content{background:transparent}
.home .entry-content>p:empty{display:none}

/* --- single / page --- */
body.single .inside-article,body.page:not(.home) .inside-article{max-width:772px;margin:0 auto;
  padding:34px 24px 8px;background:transparent}
body.single .entry-title,body.page:not(.home) .entry-title{
  font:700 clamp(28px,3.8vw,41px)/1.14 var(--display);color:var(--deep);letter-spacing:-.02em;margin:0 0 15px}
body.single .entry-meta,body.page .entry-meta{font:500 12px/1.5 var(--mono);letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin:0 0 18px}
body.single .entry-meta a,body.page .entry-meta a{color:var(--muted)}
.entry-content{font:400 17.5px/1.7 var(--read);color:var(--ink)}
.entry-content p{margin:0 0 16px}
.entry-content h2{font:700 clamp(20px,2.3vw,26px)/1.22 var(--display);color:var(--deep);margin:34px 0 12px}
.entry-content h3{font:600 18.5px/1.3 var(--ui);color:var(--deep);margin:26px 0 10px}
.entry-content a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.entry-content ul,.entry-content ol{margin:0 0 18px;padding-left:22px}
.entry-content li{margin:0 0 9px}
.entry-content img{height:auto;max-width:100%}
.entry-content figure{margin:26px 0}
.entry-content figure img{border:1px solid var(--line)}
.entry-content figcaption{margin-top:9px;font:400 13px/1.55 var(--mono);color:var(--muted);text-align:left}
.entry-content blockquote{margin:24px 0;padding:15px 18px;border:0;border-left:5px solid var(--accent);
  background:var(--card);font-size:16.5px}
.entry-content blockquote p:last-child{margin:0}
.entry-content table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:16px}
.entry-content th,.entry-content td{border:1px solid var(--line);padding:9px 12px;text-align:left}
.entry-content th{background:var(--sunk);font-family:var(--ui);font-weight:600}
.entry-content .wp-block-table,.entry-content pre{overflow-x:auto;max-width:100%}

/* --- archives --- */
.archive .page-header,.blog .page-header{max-width:1160px;margin:0 auto;padding:40px 24px 0;
  background:transparent;border:0}
.archive .page-title,.blog .page-title{font:700 clamp(26px,3vw,35px)/1.16 var(--display);color:var(--deep)}
.archive .taxonomy-description{font-size:17px;color:var(--muted);max-width:74ch;margin-top:10px}
.archive .site-main,.blog .site-main{max-width:1160px;margin:0 auto;padding:22px 24px 40px}
.archive .inside-article,.blog .inside-article{background:var(--card);border:1px solid var(--line);
  padding:20px 22px 22px;margin-bottom:18px}
.archive .entry-title,.blog .entry-title{font:700 20px/1.3 var(--display);margin:0 0 8px}
.archive .entry-title a,.blog .entry-title a{color:var(--deep);text-decoration:none}
.archive .entry-summary,.blog .entry-summary{font-size:16px;color:var(--muted)}

/* --- footer + disclaimer --- */
.site-footer,.site-info{background:var(--card);border-top:1px solid var(--line);color:var(--muted)}
.site-info{max-width:1160px;margin:0 auto;padding:26px 24px 28px;font:400 15px/1.6 var(--ui)}
.site-info a{color:var(--accent)}
.sc-disclaimer{max-width:1160px;margin:0 auto;padding:2px 24px 30px;font:400 13.5px/1.65 var(--ui);
  color:var(--muted);opacity:1}
.sc-disclaimer strong{color:var(--ink)}
.adzone .ad{border:1px solid var(--line);background:var(--card);padding:16px}
.adzone .ad-label{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px}

/* --- the entry-content link rule must not reach the design layer ---
   The front page's shortcode output lives INSIDE .entry-content, so the article underline rule was
   underlining every job card, category tile and footer link. Scope it to real prose. */
.entry-content a{text-decoration:none}
.entry-content p > a,
.entry-content li > a,
.entry-content blockquote a{text-decoration:underline;text-underline-offset:2px}
.jobs a,.cats a,.reads a,.dec a,.stop a,.hero a{text-decoration:none}

/* --- reserve clear photograph above the hero band ---
   MEASURED on the sibling build: the band sizes itself to its own content, so on a narrower screen
   it grows until it covers the whole hero and the photograph disappears under the scrim. A
   margin-top RESERVES picture regardless of how tall the text becomes. */
.hero{min-height:0}
.hero .band{margin-top:210px;padding-top:44px;
  background:linear-gradient(180deg,rgba(30,22,14,0) 0%,rgba(30,22,14,.30) 5%,
    rgba(30,22,14,.88) 17%,rgba(30,22,14,.95) 100%)}
.hero img{object-position:center 42%}
@media(max-width:1024px){.hero .band{margin-top:170px}}
@media(max-width:768px){
  .hero .band{margin-top:140px;padding-top:34px;
    background:linear-gradient(180deg,rgba(30,22,14,0) 0%,rgba(30,22,14,.55) 3%,
      rgba(30,22,14,.92) 9%,rgba(30,22,14,.96) 100%)}
  .hero h1{font-size:28px}
  .hero .sf{font-size:16.5px}
}

/* --- six jobs must fill their grid ---
   auto-fit at minmax(252px) resolves to FOUR columns at 1160px, leaving two empty cells that
   render as a bare beige block. Six is 3×2 or 2×3; pin it so the grid is always full. */
@media(min-width:1000px){.jobgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:660px) and (max-width:999px){.jobgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:659px){.jobgrid{grid-template-columns:1fr}}

/* --- hero photo credit (CC BY requires attribution) + article image credits --- */
.hero-credit{position:absolute;right:0;bottom:0;z-index:3;margin:0;padding:5px 12px;
  font:400 10.5px/1.4 var(--mono);color:rgba(255,249,240,.62);background:rgba(30,22,14,.55)}
.hero-credit a{color:rgba(255,249,240,.78);text-decoration:underline}
.entry-content .ft-credit,.entry-content figcaption{font:400 12px/1.5 var(--mono);color:var(--muted)}
.entry-content .ft-credit{margin-top:26px;padding-top:12px;border-top:1px solid var(--line)}
@media(max-width:600px){.hero-credit{font-size:9.5px;padding:4px 9px}}

/* gutter fix 2026-08-03 — text was running to the viewport edge with no padding */
@media(max-width:768px){.hero .hero-credit{padding-left:20px;padding-right:20px}}