/* PHLOEM blog — list and article. Tokens copied from home.html :root.
   Astra's stylesheet is dequeued on these views, so this file is the whole design. */

@font-face{font-family:PhDisplay;src:url(/wp-content/uploads/fonts/nippo-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:PhBody;src:url(/wp-content/uploads/fonts/synonym-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:PhMono;src:url(/wp-content/uploads/fonts/sligoil-500.woff2) format("woff2");font-weight:500;font-display:swap}

body.phlb-body{margin:0;background:#FFFFFF}

#phlb{
  --manila:#F4F9F5; --sheet:#FFFFFF; --sunk:#DCEDE2;
  --pine:#0A7846; --pine-2:#08683C; --pine-3:#065731;
  --ink:#10241B; --ink-2:#476053; --ink-3:#6B7E74;
  --on-pine:#FFFFFF; --on-pine-2:#D9F0E3; --brass:#EAF7F0;
  --rule:#C7DACD; --rule-soft:#DCE8E0;
  --pad:clamp(20px,5vw,64px); --maxw:1240px; --r:3px;
  display:block;width:100%;background:var(--sheet);color:var(--ink);
  font-family:PhBody,ui-sans-serif,system-ui,sans-serif;font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
#phlb *,#phlb *::before,#phlb *::after{box-sizing:border-box}
#phlb a{color:inherit;text-decoration:none}
#phlb h1,#phlb h2,#phlb h3,#phlb h4,#phlb p,#phlb li,#phlb address,#phlb figure{color:inherit;margin:0;font-style:normal}
#phlb ul,#phlb ol{margin:0;padding:0;list-style:none}
#phlb a:focus-visible,#phlb button:focus-visible{outline:2px solid var(--pine);outline-offset:3px;border-radius:2px}
#phlb .in{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
#phlb .k{font-family:PhMono,ui-monospace,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

/* ===== buttons ===== */
#phlb .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
#phlb .btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 22px;border-radius:var(--r);
  background:var(--pine);color:var(--on-pine);font-size:15.5px;border:1px solid var(--pine);
  transition:transform .18s ease,background .18s ease}
#phlb .btn:hover{transform:translateY(-2px);background:var(--pine-2)}
#phlb .btn.line{background:transparent;color:var(--pine);border-color:var(--rule)}
#phlb .btn.line:hover{border-color:var(--pine);background:transparent}

/* ===== hero (same green band as /careers/ and /contact/) ===== */
#phlb .hero{position:relative;background:var(--pine);color:var(--on-pine);overflow:hidden}
#phlb .hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%)}
#phlb .hero .in{position:relative;z-index:1;padding-block:clamp(52px,7vw,96px) clamp(44px,6vw,80px)}
#phlb .hero .k{color:var(--on-pine-2);margin-bottom:18px}
#phlb .hero .k a{border-bottom:1px solid rgba(255,255,255,.35)}
#phlb .hero .k a:hover{border-bottom-color:var(--on-pine)}
#phlb .hero h1{font-family:PhDisplay,Georgia,serif;font-weight:700;font-size:clamp(32px,5vw,56px);
  line-height:1.04;letter-spacing:-.03em;max-width:22ch}
#phlb .hero .lede{margin-top:20px;font-size:clamp(16.5px,1.8vw,18.5px);color:var(--on-pine-2);max-width:56ch}
#phlb .hero .lede p{margin:0}
#phlb .hero.art h1{font-size:clamp(30px,4.4vw,50px);max-width:26ch}
#phlb .hero .meta{margin-top:20px;font-family:PhMono,ui-monospace,monospace;font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--on-pine-2)}

/* ===== category filter ===== */
#phlb .filter{border-bottom:1px solid var(--rule)}
#phlb .filter .in{display:flex;flex-wrap:wrap;gap:8px;padding-block:20px}
#phlb .filter a{font-family:PhMono,ui-monospace,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:10px 14px;border:1px solid var(--rule);border-radius:var(--r);color:var(--ink-2);
  transition:border-color .18s ease,color .18s ease}
#phlb .filter a:hover{border-color:var(--pine);color:var(--pine)}
#phlb .filter a[aria-current="page"]{background:var(--pine);border-color:var(--pine);color:var(--on-pine)}

/* ===== article rows — the signature ===== */
#phlb .list{padding-bottom:clamp(40px,5vw,72px)}
#phlb .row{border-bottom:1px solid var(--rule)}
#phlb .row:nth-of-type(even){background:var(--manila)}
#phlb .row .in{display:grid;grid-template-columns:120px 1fr;gap:0 clamp(20px,3.4vw,52px);
  padding-block:clamp(28px,3.8vw,46px);align-items:start}
#phlb .date{display:flex;flex-direction:column;font-family:PhMono,ui-monospace,monospace;color:var(--pine)}
#phlb .date .d{font-size:clamp(34px,4vw,48px);line-height:1;letter-spacing:-.02em}
#phlb .date .m{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:8px}
#phlb .row .meta{font-family:PhMono,ui-monospace,monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
#phlb .row h2{font-family:PhDisplay,Georgia,serif;font-weight:700;font-size:clamp(22px,2.8vw,32px);
  line-height:1.12;letter-spacing:-.024em;max-width:30ch}
#phlb .row h2.h3{font-size:clamp(19px,2.2vw,24px)}
#phlb .row h2 a{background-image:linear-gradient(var(--pine),var(--pine));background-size:0 2px;
  background-repeat:no-repeat;background-position:0 100%;transition:background-size .3s ease}
#phlb .row h2 a:hover{background-size:100% 2px}
#phlb .row .ex{margin-top:12px;font-size:16px;color:var(--ink-2);max-width:62ch}
#phlb .row .more{display:inline-block;margin-top:14px;font-size:15px;color:var(--pine)}
#phlb .row .more span{display:inline-block;transition:transform .18s ease}
#phlb .row:hover .more span{transform:translateX(4px)}
#phlb .more-list{border-top:1px solid var(--rule)}
#phlb .more-list .head{padding-block:clamp(40px,5vw,64px) clamp(18px,2.4vw,26px)}
#phlb .more-list .head h2{font-family:PhDisplay,Georgia,serif;font-weight:700;font-size:clamp(24px,3.2vw,36px);letter-spacing:-.028em;margin-top:10px}

/* pagination */
#phlb .pages .in{padding-block:30px}
#phlb .pages ul{display:flex;flex-wrap:wrap;gap:8px}
#phlb .pages a,#phlb .pages span{display:inline-flex;min-width:44px;min-height:44px;align-items:center;justify-content:center;
  padding:0 14px;border:1px solid var(--rule);border-radius:var(--r);font-family:PhMono,ui-monospace,monospace;font-size:12px}
#phlb .pages .current{background:var(--pine);border-color:var(--pine);color:var(--on-pine)}
#phlb .pages a:hover{border-color:var(--pine);color:var(--pine)}

/* empty state */
#phlb .empty .in{padding-block:clamp(56px,7vw,100px)}
#phlb .empty h2{font-family:PhDisplay,Georgia,serif;font-weight:700;font-size:clamp(26px,3.6vw,40px);
  line-height:1.08;letter-spacing:-.028em;margin:10px 0 14px;max-width:22ch}
#phlb .empty p{color:var(--ink-2);font-size:17px;max-width:52ch}

/* ===== the article ===== */
#phlb .cover .in{padding-top:clamp(28px,4vw,48px)}
#phlb .cover img{display:block;width:100%;max-width:1080px;height:auto;margin:0 auto;border-radius:var(--r)}
#phlb .read .in{padding-block:clamp(40px,5.5vw,80px)}
#phlb .read.has-toc .in{display:grid;grid-template-columns:1fr;gap:28px}
#phlb .toc{border:1px solid var(--rule);border-radius:var(--r);padding:18px 20px;background:var(--manila)}
#phlb .toc .k{margin-bottom:10px}
#phlb .toc ol{counter-reset:t}
#phlb .toc li{counter-increment:t}
#phlb .toc a{display:flex;gap:10px;padding:7px 0;font-size:14.5px;line-height:1.4;color:var(--ink-2);border-top:1px solid var(--rule-soft)}
#phlb .toc li:first-child a{border-top:0}
#phlb .toc a::before{content:counter(t,decimal-leading-zero);font-family:PhMono,ui-monospace,monospace;font-size:10.5px;color:var(--pine);padding-top:3px}
#phlb .toc a:hover,#phlb .toc a[aria-current]{color:var(--pine)}

#phlb .prose{max-width:68ch;margin-inline:auto;font-size:clamp(17px,1.35vw,18.5px);line-height:1.75;color:var(--ink)}
#phlb .prose > * + *{margin-top:1.15em}
#phlb .prose h2{font-family:PhDisplay,Georgia,serif;font-weight:700;font-size:clamp(24px,2.6vw,31px);
  line-height:1.15;letter-spacing:-.022em;margin-top:2em;scroll-margin-top:110px}
#phlb .prose h3{font-family:PhDisplay,Georgia,serif;font-weight:700;font-size:clamp(19px,1.9vw,22px);
  line-height:1.25;letter-spacing:-.015em;margin-top:1.7em;scroll-margin-top:110px}
#phlb .prose h2 + *,#phlb .prose h3 + *{margin-top:.6em}
#phlb .prose a{color:var(--pine);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
#phlb .prose a:hover{color:var(--pine-3);text-decoration-thickness:2px}
#phlb .prose strong{font-weight:700}
#phlb .prose ul,#phlb .prose ol{padding-left:1.3em}
#phlb .prose ul{list-style:disc}
#phlb .prose ol{list-style:decimal}
#phlb .prose li{margin-top:.45em}
#phlb .prose li::marker{color:var(--pine)}
#phlb .prose blockquote{margin-inline:0;padding:4px 0 4px 22px;border-left:3px solid var(--pine);
  font-size:1.08em;color:var(--ink-2)}
#phlb .prose blockquote p{margin:0}
#phlb .prose img{max-width:100%;height:auto;border-radius:var(--r)}
#phlb .prose figure{margin-inline:0}
#phlb .prose figcaption{margin-top:10px;font-family:PhMono,ui-monospace,monospace;font-size:11px;letter-spacing:.08em;color:var(--ink-3)}
#phlb .prose hr{border:0;border-top:1px solid var(--rule);margin-block:2.2em}
#phlb .prose table{width:100%;border-collapse:collapse;font-size:.92em;display:block;overflow-x:auto}
#phlb .prose th,#phlb .prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
#phlb .prose th{font-family:PhMono,ui-monospace,monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
#phlb .prose code{font-family:PhMono,ui-monospace,monospace;font-size:.88em;background:var(--manila);padding:2px 5px;border-radius:2px}

/* ===== next step band ===== */
#phlb .next{background:var(--manila);border-top:1px solid var(--rule)}
#phlb .next .in{padding-block:clamp(48px,6vw,84px)}
#phlb .next h2{font-family:PhDisplay,Georgia,serif;font-weight:700;font-size:clamp(26px,3.6vw,40px);
  line-height:1.08;letter-spacing:-.028em;margin:10px 0 14px;max-width:24ch}
#phlb .next .lede{font-size:17px;color:var(--ink-2);max-width:56ch}

/* ===== footer (same as the pine .foot on every page) ===== */
#phlb .site-foot{background:var(--pine);color:var(--on-pine)}
#phlb .site-foot .in{padding-block:clamp(44px,5.5vw,76px) 26px}
#phlb .foot{display:grid;grid-template-columns:1fr;gap:28px}
#phlb .foot h4{font-family:PhMono,monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-pine-2);font-weight:500;margin-bottom:12px}
#phlb .foot li{margin-bottom:7px;font-size:15.5px}
#phlb .foot address{font-size:15px;line-height:1.6}
#phlb .foot a:hover{color:var(--brass)}
#phlb .foot .social{display:flex;gap:16px;margin-top:14px;font-size:14px}
#phlb .foot .social a{border-bottom:1px solid rgba(255,255,255,.35)}
#phlb .legal{border-top:1px solid #0E8250;margin-top:clamp(30px,3.6vw,46px);padding-top:22px;
  display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}
#phlb .legal p{font-family:PhMono,monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-pine-2)}

/* ===== responsive ===== */
@media (min-width:760px){ #phlb .foot{grid-template-columns:repeat(4,1fr)} }
@media (min-width:1080px){
  #phlb .read.has-toc .in{grid-template-columns:240px minmax(0,1fr);gap:clamp(40px,5vw,72px);align-items:start}
  #phlb .read.has-toc .prose{margin-inline:0}
  #phlb .toc{position:sticky;top:110px;background:transparent;border:0;padding:0}
}
@media (max-width:620px){
  #phlb .row .in{grid-template-columns:1fr}
  #phlb .date{flex-direction:row;align-items:baseline;gap:10px;margin-bottom:12px}
  #phlb .date .d{font-size:22px}
  #phlb .date .m{margin-top:0}
  #phlb .acts .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  #phlb .btn,#phlb .row h2 a,#phlb .row .more span{transition:none}
  #phlb .btn:hover{transform:none}
}