/*
Theme Name: Microbiome Times
Theme URI: https://www.microbiometimes.com
Author: Microbiome Times
Description: Custom theme for the Microbiome Times redesign — teal-to-violet brand gradient, trade-magazine layout, dense editorial sections.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: microbiome-times
*/

/* Google Fonts (Fraunces / Libre Franklin / IBM Plex Mono) are enqueued
   separately in functions.php via mt_scripts() — not @import'd here —
   so they load in parallel with this stylesheet instead of blocking on it. */

:root{
  --paper: #F4F7F1;
  --paper-raised: #FFFFFF;
  --paper-sunken: #ECF0E8;
  --ink: #14231D;
  --ink-soft: #4B5D53;
  --ink-faint: #7C8B81;
  --line: #D3DACC;
  --accent-amber: #B87A22;
  --accent-amber-soft: #F1E1C4;
  --accent-violet: #6C4A8E;
  --accent-violet-soft: #E7DEF0;
  --accent-teal: #2E8B8D;
  --accent-teal-soft: #DCEEEE;
  --ticker-bg: #4D6A8E;
  --ticker-text: #FFFFFF;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper: #0E1712;
    --paper-raised: #16221B;
    --paper-sunken: #0B120E;
    --ink: #E9EFE6;
    --ink-soft: #A9BBAF;
    --ink-faint: #77897E;
    --line: #26362C;
    --accent-amber: #E3A94A;
    --accent-amber-soft: #3A2E17;
    --accent-violet: #B294D1;
    --accent-violet-soft: #2E2438;
    --accent-teal: #6FD1CF;
    --accent-teal-soft: #163333;
    --ticker-bg: #90B2D0;
    --ticker-text: #241A15;
  }
}
:root[data-theme="dark"]{
  --paper: #0E1712;
  --paper-raised: #16221B;
  --paper-sunken: #0B120E;
  --ink: #E9EFE6;
  --ink-soft: #A9BBAF;
  --ink-faint: #77897E;
  --line: #26362C;
  --accent-amber: #E3A94A;
  --accent-amber-soft: #3A2E17;
  --accent-violet: #B294D1;
  --accent-violet-soft: #2E2438;
  --accent-teal: #6FD1CF;
  --accent-teal-soft: #163333;
  --ticker-bg: #90B2D0;
  --ticker-text: #241A15;
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--paper-sunken);
  color:var(--ink);
  font-family:'Libre Franklin', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  font-size:14px;
}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:'Fraunces', Georgia, 'Times New Roman', serif; text-wrap:balance; margin:0;}
img{max-width:100%; height:auto;}
.mono{font-family:'IBM Plex Mono', ui-monospace, monospace;}
em{color:var(--ink-soft);}
.screen-reader-text{position:absolute; left:-9999px;}

.wrap{max-width:1260px; margin:0 auto; padding:0 22px;}

/* ---------- masthead ---------- */
.brand-bar{height:5px; background:linear-gradient(115deg, var(--accent-teal), var(--accent-violet));}
.masthead-bar{background:linear-gradient(115deg, var(--accent-teal), var(--accent-violet) 145%); border-bottom:1px solid var(--accent-violet); font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:#fff; padding:8px 0;}
.masthead-bar .wrap{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;}
.masthead-bar nav{display:flex; gap:18px; flex-wrap:wrap;}
.masthead-bar nav ul{list-style:none; margin:0; padding:0; display:flex; gap:18px; flex-wrap:wrap;}
.masthead-bar nav a{color:#fff; opacity:.88; transition:opacity .15s;}
.masthead-bar nav a:hover{opacity:1; text-decoration:underline;}
.masthead-bar .tools{display:flex; gap:14px; align-items:center;}
.masthead-bar .tools span, .masthead-bar .tools a{padding:2px 8px; border:1px solid rgba(255,255,255,.45); border-radius:3px; color:#fff;}

.nameplate{background:var(--paper-raised); padding:18px 0 14px; border-bottom:2px solid var(--ink); position:relative; overflow:hidden;}
.nameplate-inner{position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap;}
.brand-block{text-align:left;}
.nameplate .kicker{font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-teal); display:block; margin-bottom:8px;}
.brand-lockup{display:flex; align-items:center;}
.brand-lockup a{display:inline-flex; align-items:center;}
.brand-word{font-family:'Libre Franklin', sans-serif; font-size:29px; line-height:1; letter-spacing:-.015em; white-space:nowrap; display:inline-flex; align-items:baseline;}
.brand-word .dark{font-weight:800; color:var(--ink);}
.brand-word .light{font-weight:500; color:var(--ink-soft);}
.o-ring{width:.66em; height:.66em; display:inline-block; vertical-align:-.04em; color:var(--accent-teal); margin:0 .01em;}
.nameplate-ad{width:50%; max-width:640px; flex:1 1 480px;}
.ad-real{position:relative; border-radius:6px; overflow:hidden; border:1px solid var(--line);}
.ad-real::before{content:'Advertisement'; position:absolute; top:6px; left:10px; font-family:'IBM Plex Mono', monospace; font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); z-index:2; background:rgba(255,255,255,.8); padding:1px 5px; border-radius:2px;}
.ad-real img{display:block; width:100%; height:auto;}
.nameplate .tagline{margin-top:6px; color:var(--ink-soft); font-size:12.5px; font-style:italic; font-family:'Fraunces', serif;}

.ticker{background:var(--accent-teal); border-bottom:1px solid var(--line); overflow:hidden; white-space:nowrap;}
.ticker .wrap{display:flex; align-items:center; gap:10px; padding:7px 22px;}
.ticker b{font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.08em; color:var(--ticker-text); flex:0 0 auto;}
.ticker .items{font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ticker-text); overflow:hidden; text-overflow:ellipsis;}
.ticker .items span{color:var(--ticker-text); opacity:.55; margin:0 10px;}

/* ---------- layout ---------- */
.layout{display:grid; grid-template-columns:1fr 300px; gap:24px; padding:22px 0 40px; align-items:start;}
@media (max-width:920px){ .layout{grid-template-columns:1fr;} }

.panel{background:var(--paper-raised); border:1px solid var(--line); border-radius:6px; padding:20px 22px; margin-bottom:20px;}

.section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; padding-bottom:10px; border-bottom:3px solid transparent; border-image:linear-gradient(115deg, var(--accent-teal), var(--accent-violet)) 1;}
.section-head h2{font-size:13px; font-family:'IBM Plex Mono', monospace; font-weight:600; letter-spacing:.08em; text-transform:uppercase;}
.section-head a{font-size:11px; color:var(--accent-teal); font-family:'IBM Plex Mono', monospace;}

.tag{display:inline-flex; align-items:center; gap:5px; font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase; padding:2px 7px; border-radius:3px; white-space:nowrap;}
.tag::before{content:''; width:5px; height:5px; border-radius:50%; background:currentColor;}
.tag--choice{color:var(--accent-teal); background:var(--accent-teal-soft);}
.tag--health{color:var(--accent-teal); background:var(--accent-teal-soft);}
.tag--finance{color:var(--accent-violet); background:var(--accent-violet-soft);}
.tag--news{color:var(--ink-soft); background:var(--paper-sunken); border:1px solid var(--line);}
.tag--sponsor{color:#8A6D2A; background:#F3EAD2;}

.thumb{border-radius:4px; border:1px solid var(--line); position:relative; overflow:hidden; flex:0 0 auto; background-size:cover; background-position:center;}
.thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.thumb--choice{background:radial-gradient(circle at 32% 32%, color-mix(in srgb, var(--accent-teal) 55%, transparent), transparent 60%), radial-gradient(circle at 68% 70%, color-mix(in srgb, var(--accent-violet) 35%, transparent), transparent 55%), var(--paper-sunken);}
.thumb--health{background:radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--accent-teal) 55%, transparent), transparent 60%), radial-gradient(circle at 65% 68%, color-mix(in srgb, var(--accent-teal) 25%, transparent), transparent 55%), var(--paper-sunken);}
.thumb--finance{background:radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--accent-violet) 55%, transparent), transparent 60%), radial-gradient(circle at 65% 68%, color-mix(in srgb, var(--accent-violet) 25%, transparent), transparent 55%), var(--paper-sunken);}
.thumb--news{background:radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--ink-soft) 35%, transparent), transparent 60%), var(--paper-sunken);}

/* ---- lead block ---- */
.lead-row{display:grid; grid-template-columns:1.1fr 1fr; gap:22px;}
@media (max-width:700px){ .lead-row{grid-template-columns:1fr;} }
.lead .thumb{width:100%; aspect-ratio:16/10; margin-bottom:12px;}
.lead h3{font-size:22px; font-weight:700; line-height:1.14; margin:8px 0 8px;}
.lead p{color:var(--ink-soft); font-size:13.5px; line-height:1.5; margin:0 0 8px;}
.byline{font-family:'IBM Plex Mono', monospace; font-size:10px; color:var(--ink-faint);}

.pick-list{display:flex; flex-direction:column; gap:0;}
.card{display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--line);}
.card:last-child{border-bottom:none; padding-bottom:0;}
.card:first-child{padding-top:0;}
.card .thumb{width:64px; height:64px;}
.card .body{flex:1; min-width:0;}
.card h4{font-size:13.5px; font-weight:600; line-height:1.28; margin:0 0 4px;}
.card .meta{font-size:10px; color:var(--ink-faint); font-family:'IBM Plex Mono', monospace;}
.card .amt{color:var(--accent-violet); font-weight:700; font-variant-numeric:tabular-nums;}

.card-grid{display:grid; grid-template-columns:repeat(3, 1fr); column-gap:22px;}
@media (max-width:820px){ .card-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .card-grid{grid-template-columns:1fr;} }
.card-grid .card{border-bottom:1px solid var(--line);}

.sponsor-card{background:var(--accent-amber-soft); border:1px dashed var(--accent-amber); border-radius:5px; padding:12px; margin-top:14px; display:flex; gap:12px; align-items:center;}
.sponsor-card .body h4{font-size:13px; margin:4px 0 3px;}
.sponsor-card .body p{margin:0; font-size:11.5px; color:var(--ink-soft);}

.ad-slot{position:relative; border-radius:6px; overflow:hidden; color:#fff; isolation:isolate;}
.ad-slot::before{content:'Advertisement'; position:absolute; top:7px; left:12px; font-family:'IBM Plex Mono', monospace; font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.72); z-index:2;}
.ad-slot .cta{background:#fff; color:var(--ink); font-family:'Libre Franklin'; font-weight:700; font-size:11.5px; padding:8px 16px; border-radius:4px; white-space:nowrap; flex:0 0 auto;}
.ad-slot.wide{min-height:84px; margin:6px 0 20px; background:linear-gradient(115deg, var(--accent-teal), var(--accent-violet)); display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px 26px;}
.ad-slot.wide .headline{font-family:'Fraunces', serif; font-weight:700; font-size:19px; line-height:1.2; max-width:60ch;}
.ad-slot.wide .headline b{font-variation-settings:'opsz' 40;}
.ad-slot.tall{min-height:260px; background:linear-gradient(165deg, var(--accent-amber), var(--accent-violet)); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:12px; padding:34px 22px 22px;}
.ad-slot.tall .headline{font-family:'Fraunces', serif; font-weight:800; font-size:23px; line-height:1.18;}
.ad-slot.tall .sub{font-size:12px; color:rgba(255,255,255,.85); line-height:1.4;}

.stat-strip{display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--line); border-radius:5px; overflow:hidden; margin-top:14px;}
.stat-strip > div{flex:1 1 140px; padding:12px 16px; border-right:1px solid var(--line); background:var(--paper-sunken);}
.stat-strip > div:last-child{border-right:none;}
.stat-strip .n{display:block; font-family:'IBM Plex Mono', monospace; font-weight:700; font-size:18px; color:var(--accent-violet); font-variant-numeric:tabular-nums;}
.stat-strip .l{font-size:9.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.06em;}

.news-row{display:grid; grid-template-columns:78px 1fr auto; gap:14px; align-items:baseline; padding:10px 0; border-bottom:1px solid var(--line);}
.news-row:last-child{border-bottom:none;}
.news-row .date{font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:var(--ink-faint);}
.news-row h4{font-size:14px; font-weight:600;}
.news-row .cat{font-size:10px; color:var(--ink-faint); font-family:'IBM Plex Mono', monospace; text-align:right;}

/* ---------- pagination ---------- */
.pagination{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; padding:18px 0 6px;}
.pagination a, .pagination span{font-family:'IBM Plex Mono', monospace; font-size:11px; padding:6px 11px; border:1px solid var(--line); border-radius:4px; color:var(--ink-soft);}
.pagination .current{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.pagination a:hover{border-color:var(--accent-teal); color:var(--accent-teal);}

/* ---------- sidebar ---------- */
.widget{background:var(--paper-raised); border:1px solid var(--line); border-radius:6px; padding:16px; margin-bottom:18px;}
.widget h4{font-family:'IBM Plex Mono', monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink); margin:0 0 12px; padding-bottom:8px; border-bottom:1px solid var(--line);}
.widget .sample-note{display:block; font-family:'Fraunces', serif; font-style:italic; font-weight:400; text-transform:none; letter-spacing:0; color:var(--ink-faint); font-size:10.5px; margin-top:2px;}

.nl-widget{background:var(--ink); border-color:var(--ink); color:var(--paper);}
.nl-widget h4{color:var(--paper); border-color:color-mix(in srgb, var(--paper) 25%, transparent);}
.nl-widget p{font-size:11.5px; color:color-mix(in srgb, var(--paper) 72%, transparent); margin:0 0 10px; line-height:1.45;}
.nl-widget input{width:100%; background:transparent; border:1px solid color-mix(in srgb, var(--paper) 35%, transparent); color:var(--paper); padding:8px 10px; border-radius:4px; font-size:12.5px; margin-bottom:8px; font-family:'Libre Franklin';}
.nl-widget input::placeholder{color:color-mix(in srgb, var(--paper) 55%, transparent);}
.nl-widget button{width:100%; background:var(--accent-amber); color:#241804; border:none; padding:9px; border-radius:4px; font-weight:700; font-size:12.5px; cursor:pointer; font-family:'Libre Franklin';}

.most-read{list-style:none; margin:0; padding:0; display:flex; flex-direction:column;}
.most-read li{display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); align-items:flex-start;}
.most-read li:last-child{border-bottom:none; padding-bottom:0;}
.most-read li:first-child{padding-top:0;}
.most-read .num{font-family:'IBM Plex Mono', monospace; font-weight:700; color:var(--accent-amber); font-size:14px; width:16px; flex:0 0 auto;}
.most-read h5{font-size:12px; font-weight:600; margin:0; line-height:1.32; font-family:'Libre Franklin';}
.most-read a{display:flex; gap:10px; width:100%;}

.list-entry{padding:9px 0; border-bottom:1px solid var(--line);}
.list-entry:last-child{border-bottom:none; padding-bottom:0;}
.list-entry:first-child{padding-top:0;}
.list-entry h5{font-size:12px; font-weight:600; margin:0 0 3px; font-family:'Libre Franklin';}
.list-entry .meta{font-size:10px; color:var(--ink-faint); font-family:'IBM Plex Mono', monospace;}

footer{background:var(--ink); color:var(--paper); margin-top:8px;}
footer .wrap{padding:30px 22px; display:grid; grid-template-columns:1.4fr repeat(4, 1fr); gap:24px;}
@media (max-width:760px){ footer .wrap{grid-template-columns:repeat(2,1fr);} }
footer .fmark{font-family:'Fraunces', serif; font-weight:800; font-size:17px; margin-bottom:8px;}
footer .fmark + p{font-size:11.5px; color:color-mix(in srgb, var(--paper) 65%, transparent); max-width:32ch; line-height:1.5;}
footer h5{font-family:'IBM Plex Mono', monospace; font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:color-mix(in srgb, var(--paper) 55%, transparent); margin:0 0 10px;}
footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; font-size:12px; color:color-mix(in srgb, var(--paper) 85%, transparent);}
.fbottom{border-top:1px solid color-mix(in srgb, var(--paper) 18%, transparent); padding:14px 22px; font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:color-mix(in srgb, var(--paper) 55%, transparent); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;}

/* ---------- drifting microbe decoration (nameplate only) ---------- */
.nameplate-bio{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
.nameplate-bio .bio{transform-box:fill-box; transform-origin:center; position:absolute;}
.bio-teal{color:var(--accent-teal); opacity:.22;}
.bio-violet{color:var(--accent-violet); opacity:.19;}
.bio-amber{color:var(--accent-amber); opacity:.20;}
@keyframes bioA{0%,100%{transform:translate(0,0) rotate(0deg);} 50%{transform:translate(24px,-17px) rotate(11deg);}}
@keyframes bioB{0%,100%{transform:translate(0,0) rotate(0deg);} 50%{transform:translate(-20px,19px) rotate(-12deg);}}
@keyframes bioC{0%,100%{transform:translate(0,0) rotate(0deg);} 50%{transform:translate(17px,21px) rotate(9deg);}}
.bio-anim-a{animation:bioA 15s ease-in-out infinite;}
.bio-anim-b{animation:bioB 18s ease-in-out infinite;}
.bio-anim-c{animation:bioC 13s ease-in-out infinite;}
@media (prefers-reduced-motion: reduce){
  .nameplate-bio [class*="bio-anim"]{animation:none;}
}

/* ---------- single article ---------- */
.crumbs{font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:16px;}
.crumbs a{color:var(--ink-faint);}
.crumbs a:hover{color:var(--accent-teal);}
.crumbs span{margin:0 7px; opacity:.6;}
.crumbs b{color:var(--ink-soft); font-weight:600;}

.article-panel{padding:30px 32px 34px;}
.article-panel h1{font-family:'Fraunces', serif; font-weight:800; font-size:32px; line-height:1.16; margin:14px 0 14px; max-width:34ch;}
.article-dek{font-family:'Fraunces', serif; font-style:italic; font-size:16.5px; color:var(--ink-soft); line-height:1.5; max-width:64ch; margin:0 0 20px;}
.article-byline-row{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; padding-bottom:20px; margin-bottom:22px; border-bottom:1px solid var(--line);}
.article-byline-row .byline{font-size:11px; letter-spacing:.05em;}
.share-row{display:flex; gap:8px; flex:0 0 auto;}
.share-row a{width:27px; height:27px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono', monospace; font-size:10px; font-weight:700; color:var(--ink-soft); text-decoration:none;}
.share-row a:hover{background:var(--accent-teal); border-color:var(--accent-teal); color:#fff;}

.hero-figure{float:right; width:280px; max-width:38%; margin:4px 0 16px 26px;}
.article-hero{width:100%; aspect-ratio:4/3; object-fit:cover; display:block; border-radius:6px; border:1px solid var(--line); background:var(--paper-sunken);}
.article-hero-cap{font-size:10.5px; color:var(--ink-faint); margin:6px 0 0; font-style:italic; line-height:1.35;}
@media (max-width:640px){ .hero-figure{float:none; width:100%; max-width:100%; margin:0 0 18px;} }

.article-body{max-width:70ch; font-size:15.5px; line-height:1.75; color:var(--ink);}
.article-body p{margin:0 0 18px;}
.article-body h2{font-family:'Fraunces', serif; font-weight:800; font-size:20px; margin:32px 0 12px;}
.article-body img{border-radius:6px; margin:8px 0;}
.article-body a{color:var(--accent-teal); text-decoration:underline; text-underline-offset:2px;}
.article-body ul, .article-body ol{padding-left:22px;}

.pull-quote,
.article-body blockquote{border-left:3px solid transparent; border-image:linear-gradient(180deg, var(--accent-teal), var(--accent-violet)) 1; padding:2px 0 2px 22px; margin:28px 0; font-family:'Fraunces', serif; font-style:italic; font-weight:600; font-size:21px; line-height:1.42; color:var(--ink); max-width:60ch;}
.pull-quote cite,
.article-body blockquote cite{display:block; font-family:'IBM Plex Mono', monospace; font-style:normal; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); margin-top:10px;}
.article-body blockquote p{margin:0;}

.tags-row{display:flex; flex-wrap:wrap; gap:8px; margin:32px 0 26px;}
.tags-row a{font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); background:var(--paper-sunken); border:1px solid var(--line); padding:4px 11px; border-radius:14px; text-decoration:none;}
.tags-row a:hover{border-color:var(--accent-teal); color:var(--accent-teal);}

.author-card{display:flex; gap:14px; align-items:flex-start; padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:32px;}
.author-avatar{width:44px; height:44px; border-radius:50%; flex:0 0 auto; background:linear-gradient(135deg, var(--accent-teal), var(--accent-violet)); object-fit:cover;}
.author-card h5{font-size:13.5px; margin:0 0 3px;}
.author-card p{font-size:12px; color:var(--ink-soft); line-height:1.5; margin:0; max-width:56ch;}

.related-heading{font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 14px;}
.related-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media (max-width:820px){ .related-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .related-grid{grid-template-columns:1fr;} }
.related-grid .thumb{width:100%; aspect-ratio:16/10; margin-bottom:10px;}
.related-grid h4{font-size:13.5px; font-weight:600; line-height:1.3; margin:0 0 5px;}
.related-grid .meta{font-size:10px; color:var(--ink-faint); font-family:'IBM Plex Mono', monospace;}

/* ---------- static pages ---------- */
.page-panel{padding:30px 32px 34px;}
.page-panel h1{font-family:'Fraunces', serif; font-weight:800; font-size:30px; line-height:1.18; margin:0 0 20px;}
.page-content{max-width:74ch; font-size:15.5px; line-height:1.75;}
.page-content p{margin:0 0 18px;}
.page-content h2{font-family:'Fraunces', serif; font-weight:800; font-size:22px; margin:30px 0 12px;}
.page-content h3{font-family:'Fraunces', serif; font-weight:700; font-size:18px; margin:24px 0 10px;}
.page-content a{color:var(--accent-teal); text-decoration:underline; text-underline-offset:2px;}

/* ---------- comments ---------- */
.article-comments{max-width:74ch;}
.article-comments h2.comments-title,
.article-comments h3#reply-title{font-family:'Fraunces', serif; font-weight:800; font-size:20px; margin:0 0 16px;}
.article-comments ol.comment-list{list-style:none; margin:0; padding:0;}
.article-comments .comment{border-top:1px solid var(--line); padding:16px 0;}
.article-comments .comment-author .fn{font-weight:700; font-style:normal; font-size:13.5px;}
.article-comments .comment-metadata{font-family:'IBM Plex Mono', monospace; font-size:10px; color:var(--ink-faint); margin-bottom:8px;}
.article-comments .comment-metadata a{color:inherit;}
.article-comments .comment-content p{font-size:14px; line-height:1.65; margin:0 0 10px;}
.article-comments .comment-respond input:not([type=submit]),
.article-comments .comment-respond textarea{width:100%; max-width:100%; font-family:'Libre Franklin', sans-serif; font-size:14px; padding:9px 11px; border:1px solid var(--line); border-radius:4px; background:var(--paper); color:var(--ink); margin-bottom:12px;}
.article-comments .comment-respond textarea{min-height:120px;}
.article-comments .form-submit input[type=submit]{background:var(--accent-teal); color:#fff; border:none; font-weight:700; font-size:13px; padding:9px 20px; border-radius:4px; cursor:pointer;}
.article-comments .comment-reply-link{font-family:'IBM Plex Mono', monospace; font-size:10.5px; text-transform:uppercase; color:var(--accent-teal);}