/*
Theme Name: The Plumbing Brief
Theme URI: https://theplumbingbrief.com
Author: CT Strategic Partners LLC
Description: Independent plumbing trade publication. Working trade-paper design, contractor-first with a homeowner desk.
Version: 1.0.0
*/

@font-face{font-family:'Frank Ruhl Libre';font-weight:400;font-style:normal;font-display:swap;src:url('fonts/FrankRuhlLibre-Regular.ttf') format('truetype');}
@font-face{font-family:'Frank Ruhl Libre';font-weight:700;font-style:normal;font-display:swap;src:url('fonts/FrankRuhlLibre-Bold.ttf') format('truetype');}
@font-face{font-family:'Frank Ruhl Libre';font-weight:900;font-style:normal;font-display:swap;src:url('fonts/FrankRuhlLibre-Black.ttf') format('truetype');}
@font-face{font-family:'Source Serif 4';font-weight:400;font-style:normal;font-display:swap;src:url('fonts/SourceSerif4-Regular.ttf') format('truetype');}
@font-face{font-family:'Source Serif 4';font-weight:400;font-style:italic;font-display:swap;src:url('fonts/SourceSerif4-Italic.ttf') format('truetype');}
@font-face{font-family:'Bricolage Grotesque';font-weight:200 800;font-style:normal;font-display:swap;src:url('fonts/BricolageGrotesque.woff2') format('woff2');}

/* ============================================================
     Working trade paper (Plumbing & Mechanical density, contractor-
     first) carrying This Old House warmth: photo-forward, warm cream
     bands, copper accent rules, small-caps kickers, a numbered Most
     Read, and a real-faces "Meet the Desk" module. Photos load from
     /img by filename; warm placeholders stand in until then.
     ============================================================ */
  :root{
    --paper:#F7F2E7; --band:#EFE5D1; --surface:#FFFFFF;
    --ink:#211B14; --ink-soft:#5A5346; --meta:#8C8474;
    --rule:#DDD2BC; --rule-soft:#E9E0CE;
    --copper:#A85A22; --copper-deep:#8A4817; --gold:#B67C2A;
    --serif:"Frank Ruhl Libre","Iowan Old Style",Georgia,serif;
    --read:"Source Serif 4","Source Serif Pro",Georgia,"Times New Roman",serif;
    --sans:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
    --wrap:1160px;
    --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  @media (prefers-color-scheme:dark){
    :root{--paper:#15120C; --band:#1C1710; --surface:#1A150E;
      --ink:#EFE7D7; --ink-soft:#B2A791; --meta:#877E6D;
      --rule:#322B20; --rule-soft:#greeff;--rule-soft:#28221A;
      --copper:#D2894F; --copper-deep:#BC7038; --gold:#C99A54;}
  }
  :root[data-theme="light"]{--paper:#F7F2E7; --band:#EFE5D1; --surface:#FFFFFF;
    --ink:#211B14; --ink-soft:#5A5346; --meta:#8C8474; --rule:#DDD2BC; --rule-soft:#E9E0CE;
    --copper:#A85A22; --copper-deep:#8A4817; --gold:#B67C2A;}
  :root[data-theme="dark"]{--paper:#15120C; --band:#1C1710; --surface:#1A150E;
    --ink:#EFE7D7; --ink-soft:#B2A791; --meta:#877E6D; --rule:#322B20; --rule-soft:#28221A;
    --copper:#D2894F; --copper-deep:#BC7038; --gold:#C99A54;}

  *{box-sizing:border-box;}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--read);
    font-size:16.5px;line-height:1.55;-webkit-font-smoothing:antialiased;position:relative;}
  body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
    background-image:var(--grain);background-size:150px 150px;opacity:.24;mix-blend-mode:multiply;}
  @media (prefers-color-scheme:dark){body::before{mix-blend-mode:screen;opacity:.05;}}
  :root[data-theme="dark"] body::before{mix-blend-mode:screen;opacity:.05;}
  :root[data-theme="light"] body::before{mix-blend-mode:multiply;opacity:.24;}
  header,footer,nav,div,section,main{position:relative;z-index:2;}
  a{color:inherit;text-decoration:none;}
  .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;}

  /* photo placeholder, warm; real photo drops in via [data-has] */
  .ph{position:relative;background:repeating-linear-gradient(135deg,#e4d7bd 0 10px,#ddceb0 10px 20px);
    border:1px solid var(--rule);overflow:hidden;}
  .ph::after{content:attr(data-cap);position:absolute;left:0;right:0;bottom:0;padding:5px 8px;
    font-family:var(--read);font-style:italic;font-size:11px;color:#4a4130;background:rgba(247,242,231,.8);
    border-top:1px solid rgba(33,27,20,.25);}
  .ph[data-cap=""]::after{display:none;}
  .ph[data-has]{background:#ccc;background-size:cover;background-position:center;border-color:var(--ink);}
  .ph[data-has]::after{display:none;}
  @media (prefers-color-scheme:dark){.ph:not([data-has]){background:repeating-linear-gradient(135deg,#2a2417 0 10px,#241e12 10px 20px);}
    .ph::after{color:#c9bda3;background:rgba(21,18,12,.82);border-top-color:rgba(239,231,215,.25);}}

  .kick{font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--copper-deep);}
  .byl{font-family:var(--sans);font-size:12px;color:var(--meta);}
  .byl b{color:var(--ink-soft);font-weight:600;}

  /* ---------- folio ---------- */
  .folio{background:var(--ink);color:#e8dcc6;}
  .folio .wrap{display:flex;justify-content:space-between;align-items:center;height:33px;
    font-family:var(--sans);font-size:11px;letter-spacing:.06em;text-transform:uppercase;}
  .folio .l{display:flex;gap:14px;}
  .folio .r{display:flex;gap:16px;align-items:center;}
  .folio a{color:#e8dcc6;} .folio a:hover{color:#fff;}
  .nightbtn{background:none;border:none;color:#e8dcc6;font-family:var(--sans);font-size:11px;
    letter-spacing:.06em;text-transform:uppercase;cursor:pointer;padding:0;}
  .nightbtn:hover{color:var(--gold);}

  /* ---------- masthead (compact, logo-left) ---------- */
  .mast{background:var(--paper);border-bottom:2px solid var(--ink);}
  .mast .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 24px;}
  .brand{display:flex;align-items:center;gap:13px;}
  .brand svg{flex:none;}
  .brand .wm{font-family:var(--serif);font-weight:700;font-size:30px;letter-spacing:-.01em;line-height:.95;color:var(--ink);}
  .brand .tl{font-family:var(--sans);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--copper-deep);margin-top:3px;}
  .mast .r{display:flex;align-items:center;gap:14px;}
  .search{font-family:var(--sans);font-size:13px;color:var(--meta);border:1px solid var(--rule);padding:8px 13px;min-width:190px;}
  .subbtn{font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:.02em;background:var(--copper);color:#fff;padding:9px 15px;}
  .subbtn:hover{background:var(--copper-deep);}

  /* ---------- nav ---------- */
  nav.desks{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1px solid var(--ink);}
  nav.desks .wrap{display:flex;flex-wrap:wrap;align-items:stretch;}
  nav.desks a{font-family:var(--sans);font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
    color:var(--ink);padding:11px 16px;border-bottom:3px solid transparent;}
  nav.desks a:first-child{padding-left:0;}
  nav.desks a:hover{color:var(--copper-deep);}
  nav.desks a.active{border-bottom-color:var(--copper);color:var(--copper-deep);}
  nav.desks .sep{flex:1;}
  nav.desks a.home{color:var(--copper-deep);}

  /* ---------- section header (copper rule, TOH-style) ---------- */
  .shd{display:flex;align-items:center;gap:16px;margin:0 0 20px;}
  .shd h2{font-family:var(--serif);font-size:25px;font-weight:700;margin:0;letter-spacing:-.015em;white-space:nowrap;}
  .shd h2 em{font-style:italic;color:var(--copper-deep);}
  .shd .ln{flex:1;height:2px;background:var(--gold);}
  .shd .more{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--copper-deep);white-space:nowrap;}
  .shd .more:hover{color:var(--ink);}

  section.blk{padding:36px 0;}
  .band{background:var(--band);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}

  /* ---------- hero lead well ---------- */
  .lead-well{padding:26px 0 6px;}
  .lead-grid{display:grid;grid-template-columns:1.62fr 1fr;gap:34px;}
  .feature .ph{aspect-ratio:16/9;}
  .feature .kick{display:inline-block;margin:15px 0 7px;font-size:12px;}
  .feature h1{font-family:var(--serif);font-weight:700;font-size:clamp(30px,4.2vw,46px);line-height:1.03;
    letter-spacing:-.017em;margin:0;text-wrap:balance;}
  .feature h1 a:hover{color:var(--copper-deep);}
  .feature .deck{font-size:18px;line-height:1.55;color:var(--ink-soft);margin:13px 0 0;max-width:62ch;}
  .feature .deck::first-letter{float:left;font-family:var(--serif);font-weight:700;font-size:58px;line-height:.72;padding:6px 9px 0 0;color:var(--copper);}
  .feature .foot{margin-top:14px;}

  .mr{border-top:3px solid var(--ink);padding-top:10px;}
  .mr .hd{font-family:var(--sans);font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:6px;}
  .mr .row{display:grid;grid-template-columns:32px 1fr;gap:13px;padding:13px 0;border-bottom:1px solid var(--rule);align-items:start;}
  .mr .row:last-child{border-bottom:none;}
  .mr .n{font-family:var(--serif);font-weight:700;font-size:26px;color:var(--copper);line-height:.9;}
  .mr .kick{font-size:10px;}
  .mr h4{font-family:var(--serif);font-size:17.5px;font-weight:700;line-height:1.16;margin:3px 0 0;letter-spacing:-.01em;}
  .mr .row:hover h4{color:var(--copper-deep);}

  /* ---------- photo card row ---------- */
  .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
  .cards.three{grid-template-columns:repeat(3,1fr);}
  .pcard .ph{aspect-ratio:3/2;}
  .pcard .kick{display:inline-block;margin:11px 0 5px;}
  .pcard h3{font-family:var(--serif);font-size:19px;font-weight:700;line-height:1.17;margin:0 0 6px;letter-spacing:-.011em;}
  .pcard.big h3{font-size:22px;}
  .pcard:hover h3{color:var(--copper-deep);}
  .pcard p{font-size:13.5px;color:var(--ink-soft);margin:0 0 7px;line-height:1.5;}

  /* ---------- two audiences ---------- */
  .aud{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--ink);background:var(--surface);}
  .aud .col{padding:22px 24px;}
  .aud .col:first-child{border-right:1px solid var(--ink);}
  .aud .kick{display:block;margin-bottom:6px;}
  .aud h4{font-family:var(--serif);font-size:22px;font-weight:700;margin:0 0 6px;letter-spacing:-.01em;line-height:1.12;}
  .aud p{margin:0 0 10px;font-size:14px;color:var(--ink-soft);line-height:1.5;}
  .aud .go{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
    color:var(--copper-deep);border-bottom:2px solid var(--gold);padding-bottom:2px;}
  .aud .col:hover .go{color:var(--ink);border-color:var(--ink);}

  /* ---------- data & reference index ---------- */
  .index .row{display:grid;grid-template-columns:30px 1fr auto;gap:20px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--rule);}
  .index .row:first-child{border-top:1px solid var(--rule);}
  .index .no{font-family:var(--serif);font-weight:700;color:var(--copper);font-size:17px;}
  .index .ti{font-family:var(--serif);font-size:20px;font-weight:700;letter-spacing:-.01em;line-height:1.12;}
  .index .ds{font-family:var(--read);color:var(--ink-soft);font-size:14px;margin-top:2px;max-width:72ch;}
  .index .fig{font-family:var(--serif);font-size:19px;font-weight:700;white-space:nowrap;text-align:right;letter-spacing:-.01em;}
  .index .fig small{display:block;font-family:var(--sans);font-weight:600;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--meta);}
  .index .row:hover .ti{color:var(--copper-deep);}

  /* ---------- homeowners cost cards ---------- */
  .hgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .hcard .ph{aspect-ratio:16/9;}
  .hcard .kick{display:inline-block;margin:11px 0 5px;}
  .hcard h3{font-family:var(--serif);font-size:20px;font-weight:700;margin:0 0 4px;letter-spacing:-.01em;}
  .hcard .cost{font-family:var(--serif);font-size:22px;font-weight:700;color:var(--copper-deep);letter-spacing:-.01em;}
  .hcard p{font-size:13.5px;color:var(--ink-soft);margin:5px 0 0;line-height:1.5;}
  .hcard:hover h3{color:var(--copper-deep);}
  .home-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap;}
  .home-top h2{font-family:var(--serif);font-size:27px;font-weight:700;margin:0 0 4px;letter-spacing:-.015em;}
  .home-top p{margin:0;color:var(--ink-soft);font-size:14px;max-width:54ch;}
  .home-top .find{font-family:var(--sans);font-weight:700;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;
    color:#fff;background:var(--copper);padding:11px 16px;white-space:nowrap;}
  .home-top .find:hover{background:var(--copper-deep);}

  /* ---------- Meet the Desk (real faces) ---------- */
  .desk{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
  .person{display:grid;grid-template-columns:88px 1fr;gap:16px;align-items:start;}
  .person .face{width:88px;height:88px;border-radius:50%;border:1px solid var(--ink);
    background:repeating-linear-gradient(135deg,#e4d7bd 0 8px,#ddceb0 8px 16px);}
  .person .face[data-has]{background:#ccc;background-size:cover;background-position:center;}
  .person .nm{font-family:var(--serif);font-size:19px;font-weight:700;letter-spacing:-.01em;}
  .person .beat{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--copper-deep);margin:2px 0 7px;}
  .person .ti{font-family:var(--read);font-size:14.5px;line-height:1.35;color:var(--ink-soft);}
  .person:hover .ti{color:var(--copper-deep);}

  /* ---------- trade strip ---------- */
  .strip{display:grid;grid-template-columns:1.1fr 1fr 1.1fr;gap:30px;}
  .rh{font-family:var(--sans);font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
    border-bottom:2px solid var(--ink);padding-bottom:7px;margin:0 0 12px;}
  /* mock current-issue cover (CSS, no image needed) */
  .issue{display:grid;grid-template-columns:118px 1fr;gap:16px;}
  .cover{aspect-ratio:3/4;border:1px solid var(--ink);background:var(--band);padding:12px 11px;display:flex;flex-direction:column;}
  .cover .cn{font-family:var(--serif);font-weight:700;font-size:15px;line-height:.98;letter-spacing:-.01em;border-bottom:1px solid var(--ink);padding-bottom:6px;}
  .cover .cn small{display:block;font-family:var(--sans);font-size:7px;letter-spacing:.2em;text-transform:uppercase;color:var(--copper-deep);}
  .cover .cph{flex:1;margin:8px 0;background:repeating-linear-gradient(135deg,#e4d7bd 0 7px,#ddceb0 7px 14px);border:1px solid var(--rule);}
  .cover .cl{font-family:var(--serif);font-size:11px;font-weight:700;line-height:1.1;}
  .issue .il{font-family:var(--read);font-size:14px;}
  .issue .il .it{display:block;padding:7px 0;border-bottom:1px solid var(--rule);}
  .issue .il .it:hover{color:var(--copper-deep);}
  .issue .il a.readmag{font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--copper-deep);display:inline-block;margin-top:10px;}
  .ev{padding:10px 0;border-bottom:1px solid var(--rule);}
  .ev:last-child{border-bottom:none;}
  .ev .d{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--copper-deep);}
  .ev .en{font-family:var(--serif);font-size:16.5px;font-weight:700;letter-spacing:-.01em;}
  .ev .el{font-family:var(--sans);font-size:12px;color:var(--meta);}
  .news{border:1px solid var(--ink);padding:16px;background:var(--surface);}
  .news h4{font-family:var(--serif);font-size:19px;margin:0 0 5px;letter-spacing:-.01em;}
  .news p{font-size:13px;color:var(--ink-soft);margin:0 0 11px;line-height:1.45;}
  .news .f{display:flex;border:1px solid var(--ink);}
  .news input{flex:1;border:none;background:transparent;padding:9px 11px;font-family:var(--read);font-size:14px;color:var(--ink);}
  .news input:focus{outline:2px solid var(--copper);outline-offset:-2px;}
  .news button{border:none;background:var(--copper);color:#fff;font-family:var(--sans);font-weight:700;font-size:12px;
    letter-spacing:.05em;text-transform:uppercase;padding:0 15px;cursor:pointer;}
  .news button:hover{background:var(--copper-deep);}
  .news small{font-family:var(--sans);display:block;margin-top:9px;color:var(--meta);font-size:11px;}

  /* ---------- footer ---------- */
  footer{background:var(--band);border-top:3px double var(--ink);margin-top:16px;padding:34px 0 22px;color:var(--ink-soft);}
  .ft{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:26px;}
  .ft .fb .brand .wm{color:var(--ink);font-size:23px;}
  .ft .fb .brand .tl{color:var(--copper-deep);}
  .ft .fb p{font-family:var(--read);font-size:13.5px;line-height:1.55;max-width:36ch;color:var(--ink-soft);margin:12px 0 0;}
  .ft h5{font-family:var(--sans);font-weight:800;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--copper-deep);margin:0 0 11px;border-bottom:1px solid var(--rule);padding-bottom:7px;}
  .ft a{display:block;font-family:var(--read);color:var(--ink-soft);font-size:14px;padding:3px 0;}
  .ft a:hover{color:var(--copper-deep);}
  .fbot{border-top:1px solid var(--rule);margin-top:24px;padding-top:14px;display:flex;justify-content:space-between;gap:14px;
    flex-wrap:wrap;font-family:var(--sans);font-size:11px;color:var(--meta);letter-spacing:.02em;}
  .fbot .fine{max-width:66ch;line-height:1.5;}

  .flag{position:fixed;bottom:12px;right:12px;z-index:60;font-family:var(--sans);font-size:10px;font-weight:700;
    letter-spacing:.05em;text-transform:uppercase;background:var(--ink);color:var(--paper);padding:6px 11px;opacity:.85;}

  @media (max-width:900px){
    .lead-grid{grid-template-columns:1fr;} .mr{margin-top:8px;}
    .cards,.cards.three{grid-template-columns:1fr 1fr;} .aud{grid-template-columns:1fr;}
    .aud .col:first-child{border-right:none;border-bottom:1px solid var(--ink);}
    .hgrid{grid-template-columns:1fr;} .desk{grid-template-columns:1fr;} .strip{grid-template-columns:1fr;}
    .ft{grid-template-columns:1fr 1fr;} .search{display:none;}
  }
  @media (max-width:540px){ .cards,.cards.three{grid-template-columns:1fr;} .ft{grid-template-columns:1fr;}
    .index .row{grid-template-columns:1fr;gap:3px;} .index .fig{text-align:left;} }

/* ---- single / archive / page templates ---- */
.rd{max-width:750px;margin:0 auto;padding:34px 24px 10px;}
.rd .kick{display:inline-block;margin-bottom:9px;}
.rd h1{font-family:var(--serif);font-weight:700;font-size:clamp(28px,4vw,42px);line-height:1.05;letter-spacing:-.016em;margin:0 0 10px;text-wrap:balance;}
.rd .meta{font-family:var(--sans);font-size:13px;color:var(--meta);margin-bottom:22px;}
.rd .lede-img{aspect-ratio:16/9;margin:0 0 22px;}
.rd .body{font-family:var(--read);font-size:18px;line-height:1.72;color:var(--ink);}
.rd .body h2{font-family:var(--serif);font-size:25px;margin:1.5em 0 .4em;letter-spacing:-.01em;}
.rd .body p{margin:0 0 1.05em;} .rd .body strong{font-weight:700;}
.rd .backlink{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--copper-deep);display:inline-block;margin:26px 0 0;}
.arch{padding:30px 0 12px;} .arch .head{border-bottom:2px solid var(--ink);padding-bottom:9px;margin-bottom:22px;}
.arch .head h1{font-family:var(--serif);font-size:30px;font-weight:700;margin:0;letter-spacing:-.015em;}
.arch .head .k{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--copper-deep);}

/* ---- From the Desk cards (replaces fabricated personas) ---- */
.deskcard{display:block;padding:16px 0 4px;border-top:2px solid var(--ink);}
.deskcard .kick{display:block;margin-bottom:7px;}
.deskcard h3{font-family:var(--serif);font-size:20px;font-weight:700;line-height:1.16;margin:0 0 7px;letter-spacing:-.01em;}
.deskcard:hover h3{color:var(--copper-deep);}
.deskcard p{font-size:14px;color:var(--ink-soft);line-height:1.5;margin:0 0 9px;}
.deskcard .deskmore{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--copper-deep);}