/* ============================================================
   HARD TO FIND GOOD HELP — h2f-theme
   v2.5.0 — The Hard Times model. Stark editorial.
   White / black / vermillion. Cream retired.
   Type: Fraunces (display + prose), JetBrains Mono (machine text).
   Legacy hooks .spot-frame / .colophon-block preserved.
   ============================================================ */

:root{
  --ink:#111111;
  --bg:#ffffff;
  --soft:#f4f3f1;       /* page frame behind the site column */
  --line:#e3e1dc;
  --muted:#6b6a66;
  --accent:#c8351c;     /* locked brand vermillion */
  --max:1080px;
}

*{margin:0;padding:0;box-sizing:border-box;}

html{ -webkit-text-size-adjust:100%; }
/* Guard: nothing may push the page sideways on mobile. */
html,body{ overflow-x:hidden; }

body{
  background:var(--soft);
  color:var(--ink);
  font-family:'Fraunces',Georgia,serif;
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:var(--accent);}
img{max-width:100%;height:auto;display:block;}

/* Site column — the framed white sheet on a soft ground */
.site-shell{
  max-width:var(--max);
  margin:1.2rem auto;
  background:var(--bg);
  border:1px solid var(--line);
}

.container{ max-width:var(--max); margin:0 auto; padding:0 1.6rem; }
.container-prose{ max-width:720px; margin:0 auto; padding:0 1.6rem; }
.container-narrow{ max-width:780px; margin:0 auto; padding:0 1.6rem; }
.home-standfirst{ font-family:'Fraunces',Georgia,serif; font-size:1.18rem; line-height:1.55; color:#333; text-align:center; max-width:720px; margin:1.6rem auto 2.4rem; padding:0 1.6rem; }

/* mono helper */
.mono{ font-family:'JetBrains Mono',monospace; }

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar{
  background:var(--ink);
  color:#fff;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0.45rem 1.4rem;
  font-family:'JetBrains Mono',monospace;
  font-size:0.72rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
}
.topbar .soc{ display:flex; align-items:center; gap:0.9rem; }
.topbar .soc a{ color:#bbb; text-decoration:none; }
.topbar .soc a:hover{ color:#fff; }
.topbar .cred{ color:#fff; font-weight:700; }

/* ============================================================
   MASTHEAD
   ============================================================ */
/* A4 masthead: centered text wordmark, tagline + subscribe row */
.mast{
  text-align:center;
  padding:2rem 1.2rem 1.7rem;
  border-bottom:3px solid var(--ink);
}
.mast-logo{ margin:0; font-weight:400; line-height:0.98; }
.mast-logo a{
  font-family:'GFS Didot',serif;
  color:var(--ink); text-decoration:none;
  font-size:clamp(2rem,6vw,3.4rem);
  letter-spacing:0.01em; text-transform:uppercase;
}
.mast-logo a:hover{ color:var(--ink); }
.mast-logo .mw-red{ color:var(--accent); }
.mast-logo .mw-help{ display:inline-block; color:var(--accent); transform:rotate(15deg); transform-origin:left center; margin-left:0.16em; }
.mast-dek-row{
  display:flex; align-items:center; justify-content:center;
  gap:0.9rem; flex-wrap:wrap; margin-top:1.9rem;
}
.mast-dek{ font-style:italic; color:var(--muted); font-size:1.02rem; }
.mast-sub-btn{
  display:inline-block;
  background:var(--accent); color:#fff;
  font-family:'JetBrains Mono',monospace; font-weight:700;
  letter-spacing:0.14em; text-transform:uppercase;
  font-size:0.66rem; text-decoration:none;
  padding:0.45rem 0.95rem;
}
.mast-sub-btn:hover{ background:var(--ink); color:#fff; }
@media (max-width:760px){
  .mast{ padding:1.5rem 1rem 1.3rem; }
}

/* ============================================================
   NAV  (category nav, sticky)
   ============================================================ */
.nav{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:0;
  border-bottom:1px solid var(--line);
  background:#fff;
  position:sticky;
  top:0;
  z-index:20;
}
.nav a{
  font-family:'JetBrains Mono',monospace;
  font-size:0.78rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--ink);
  text-decoration:none;
  padding:0.8rem 1rem;
  border-bottom:2px solid transparent;
  white-space:nowrap;
}
.nav a:hover{ border-bottom-color:var(--accent); color:var(--accent); }
.nav a.shop,
.nav .nav-shop a{ color:var(--accent); font-weight:700; }

/* hamburger — hidden on desktop */
.nav-toggle{ display:none; }
.nav-toggle-label{
  display:none;
  font-family:'JetBrains Mono',monospace;
  font-size:0.76rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding:0.8rem 1rem;
  cursor:pointer;
  user-select:none;
}

/* ============================================================
   HOMEPAGE — LEAD STORY
   ============================================================ */
.lead{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  border-bottom:1px solid var(--line);
}
.lead-art{
  background:#dedcd6;
  min-height:340px;
  border-right:1px solid var(--line);
  overflow:hidden;
}
.lead-art a{ display:block; width:100%; height:100%; }
.lead-art img{ width:100%; height:100%; object-fit:cover; }
.lead-art-empty{
  display:flex; align-items:center; justify-content:center;
  height:100%; min-height:340px; padding:1rem; text-align:center;
  font-family:'JetBrains Mono',monospace; font-size:0.76rem;
  color:#8a8881; text-transform:uppercase; letter-spacing:0.08em;
}
.lead-body{
  padding:2.2rem 2rem;
  display:flex; flex-direction:column; justify-content:center;
}
.lead .cat{
  font-family:'JetBrains Mono',monospace; font-size:0.72rem;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--accent); margin-bottom:0.9rem;
}
.lead h2{
  font-family:'Fraunces',serif; font-weight:600;
  font-size:clamp(1.5rem,3vw,2.2rem); line-height:1.05;
  letter-spacing:-0.015em; margin-bottom:0.9rem;
}
.lead h2 a{ color:inherit; text-decoration:none; }
.lead h2 a:hover{ color:var(--accent); }
.lead .dek{ font-size:1rem; line-height:1.5; color:#444; font-style:italic; }

/* ============================================================
   HOMEPAGE — FEED GRID
   ============================================================ */
.grid{ display:grid; grid-template-columns:repeat(3,1fr); }
.card{
  padding:1.5rem 1.4rem 1.7rem;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:flex; flex-direction:column;
}
.card:nth-child(3n){ border-right:none; }
.card-link{ text-decoration:none; color:inherit; display:flex; flex-direction:column; height:100%; }
.card .thumb{
  background:#dedcd6; height:150px; margin-bottom:1rem; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.card .thumb img{ width:100%; height:100%; object-fit:cover; }

/* Grievance cards are documents — show them WHOLE, never cropped (homepage Lead + feed). */
.lead-art.grv{ min-height:0; display:flex; align-items:center; }
.lead-art.grv a{ width:100%; height:auto; }
.lead-art.grv img{ height:auto; object-fit:contain; }
.card .thumb.grv{ height:auto; aspect-ratio:16/9; }
.card .thumb.grv img{ object-fit:contain; }
.card .thumb-empty{
  font-family:'JetBrains Mono',monospace; font-size:0.68rem; color:#8a8881;
  text-transform:uppercase; letter-spacing:0.06em; text-align:center; padding:0.6rem;
}
.card .cat{
  font-family:'JetBrains Mono',monospace; font-size:0.68rem;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--accent); margin-bottom:0.5rem;
}
.card h3{
  font-family:'Fraunces',serif; font-weight:600; font-size:1.14rem;
  line-height:1.12; letter-spacing:-0.01em; margin-bottom:0.5rem;
}
.card-link:hover h3{ color:var(--accent); }
.card .dek{ font-size:0.84rem; line-height:1.4; color:var(--muted); font-style:italic; }
.card-more{
  font-family:'JetBrains Mono',monospace; font-size:0.7rem;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--accent); margin-top:auto; padding-top:0.9rem;
}
.card-link:hover .card-more{ text-decoration:underline; }
.lead-more{
  font-family:'JetBrains Mono',monospace; font-size:0.76rem;
  letter-spacing:0.13em; text-transform:uppercase;
  color:var(--accent); text-decoration:none; margin-top:1.1rem;
}
.lead-more:hover{ text-decoration:underline; }

/* ============================================================
   READ-NEXT — bottom-of-post cross-publication recirculation
   Reuses .grid / .card (homepage feed look). Only the section
   wrapper + heading are new here.
   ============================================================ */
.read-next{ border-top:3px double var(--line); margin-top:2.6rem; }
.read-next .read-next-head{
  font-family:'JetBrains Mono',monospace; font-size:0.72rem; font-weight:700;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--accent);
  padding:1.4rem 1.4rem 1rem;
}
.read-next .grid{ border-top:1px solid var(--line); }

/* ============================================================
   SUBSCRIBE BAND — Courtesy Notice (BAG aesthetic on wrinkled paper)
   ============================================================ */
.cfn-wrap{ display:flex; justify-content:center; padding:46px 22px;
  background:#e6e1d6 url("../images/grievance-bg.jpg") center/cover no-repeat; }
.cfn{ width:760px; max-width:100%; background:#f5f2ec; color:var(--ink);
  font-family:'Fraunces',serif; position:relative; overflow:hidden;
  transform:rotate(-1.1deg);
  box-shadow:0 10px 34px rgba(0,0,0,0.26), 0 2px 8px rgba(0,0,0,0.18); box-sizing:border-box; }
.cfn *{ box-sizing:border-box; }
.cfn-topbar{ background:var(--ink); color:#fff; font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:1.5px; display:flex; justify-content:space-between; padding:11px 24px; }
.cfn-topbar .l{ font-weight:700; }
.cfn-topbar .r{ color:var(--accent); font-weight:700; }
.cfn-pad{ padding:26px 48px 30px 70px; position:relative; }
.cfn-punch{ position:absolute; left:38px; width:16px; height:16px; border-radius:50%;
  background:#cdc9c1; z-index:5; }
.cfn-lh{ display:flex; align-items:center; gap:15px; margin-bottom:18px; }
.cfn-badge{ width:46px; height:46px; border:2.5px solid var(--ink); display:flex;
  align-items:center; justify-content:center; font-family:'JetBrains Mono',monospace;
  font-weight:700; font-size:14px; letter-spacing:1px; flex-shrink:0; }
.cfn-org .b{ font-size:21px; font-weight:700; letter-spacing:-0.3px; line-height:1.06; }
.cfn-org .pub{ font-size:13px; color:#666; margin-top:3px; }
.cfn-tag{ font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700;
  letter-spacing:1.5px; color:var(--accent); margin-bottom:12px; }
.cfn-h{ font-family:'Fraunces',serif; font-size:27px; font-weight:700; line-height:1.16;
  letter-spacing:-0.4px; margin:0 0 8px; }
.cfn-subrow{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:20px; }
.cfn-sub{ font-size:13.5px; color:#777; }
.cfn-stamp{ font-family:'JetBrains Mono',monospace; font-weight:700; font-size:15px; color:var(--accent);
  border:3px solid var(--accent); padding:5px 14px; transform:rotate(-5deg); letter-spacing:1px;
  white-space:nowrap; flex-shrink:0; }
.cfn-rule{ height:1.5px; background:var(--ink); margin:0 0 20px; }
.cfn-body p{ font-size:14.5px; line-height:1.5; margin-bottom:13px; }
.cfn-body p:last-child{ margin-bottom:0; }
.cfn-act{ display:flex; align-items:center; gap:18px; margin:24px 0 6px; flex-wrap:wrap; }
.cfn-btn{ display:inline-block; background:var(--accent); color:#fff; text-decoration:none;
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:13px; letter-spacing:1.5px;
  padding:14px 26px; white-space:nowrap; }
.cfn-btn:hover{ background:#a82a15; }
.cfn-fine{ font-size:12.5px; color:#777; line-height:1.4; }
.cfn-foot{ background:var(--ink); color:#aaa; display:flex; justify-content:space-between; gap:24px;
  font-family:'JetBrains Mono',monospace; font-size:10.5px; line-height:1.6; padding:18px 40px 18px 70px; }
.cfn-foot b{ color:#fff; }
.cfn-foot .red{ color:var(--accent); }
.cfn-urlband{ background:var(--accent); color:#fff; text-align:center; font-family:'JetBrains Mono',monospace;
  font-weight:700; font-size:15px; letter-spacing:2px; padding:12px 10px; }
@media (max-width:600px){
  .cfn-punch{ display:none; }
  .cfn-pad{ padding:22px 22px 24px; }
  .cfn-topbar{ flex-direction:column; gap:3px; padding:10px 18px; }
  .cfn-h{ font-size:22px; }
  .cfn-subrow{ flex-direction:column; align-items:flex-start; gap:12px; }
  .cfn-foot{ flex-direction:column; gap:12px; padding:18px 22px; }
  .cfn-urlband{ font-size:12px; letter-spacing:1px; }
}

/* pagination on the feed */
.feed-more{ text-align:center; padding:1.6rem; border-bottom:1px solid var(--line); }
.feed-more a{
  font-family:'JetBrains Mono',monospace; font-size:0.76rem;
  letter-spacing:0.12em; text-transform:uppercase; text-decoration:none;
  color:var(--ink); border:1px solid var(--ink); padding:0.65rem 1.4rem; display:inline-block;
}
.feed-more a:hover{ background:var(--ink); color:#fff; }

/* ============================================================
   POST / ISSUE
   ============================================================ */
.issue-header{ padding:2.6rem 0 1.4rem; text-align:center; border-bottom:1px solid var(--line); }
.issue-eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:0.72rem;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--accent); margin-bottom:1rem;
}
.issue-header h1{
  font-family:'Fraunces',serif; font-weight:600;
  font-size:clamp(1.8rem,4vw,2.8rem); line-height:1.04;
  letter-spacing:-0.02em; max-width:780px; margin:0 auto;
}
.issue-subhead{
  font-style:italic; color:#444; font-size:1.1rem;
  max-width:640px; margin:1.1rem auto 0; line-height:1.5;
}
.issue-meta{
  font-family:'JetBrains Mono',monospace; font-size:0.72rem;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--muted);
  margin-top:1.4rem; display:flex; gap:0.6rem; justify-content:center; flex-wrap:wrap;
}
.issue-meta .divider{ color:var(--line); }
.issue-byline{ font-family:'JetBrains Mono',monospace; font-size:0.76rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--muted); margin-top:0.8rem; }
.issue-byline span{ color:var(--ink); }

/* The Sketch / feature image — legacy hook .spot-frame preserved */
.spot-section{ padding:2rem 0; }
.spot-frame{ border:1px solid var(--line); }
.spot-frame img{ width:100%; height:auto; }
.spot-caption{
  font-family:'JetBrains Mono',monospace; font-size:0.7rem;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--muted);
  text-align:center; margin-top:0.7rem;
}

/* prose */
.post-content{ padding:2.4rem 0 3rem; }
.post-content p{ margin:0 0 1.3rem; }
.post-content h2{
  font-family:'Fraunces',serif; font-weight:600; font-size:1.5rem;
  letter-spacing:-0.01em; margin:2.4rem 0 1rem;
}
.post-content h3{
  font-family:'Fraunces',serif; font-weight:600; font-size:1.2rem;
  margin:2rem 0 0.8rem;
}
.post-content a{ color:var(--accent); text-underline-offset:2px; }
.post-content blockquote, .page-content blockquote, .help-body blockquote{
  border-left:3px solid var(--accent); margin:1.6rem 0; padding:0.2rem 0 0.2rem 1.4rem;
  font-style:italic; color:#333; font-size:1.16rem; line-height:1.55;
}
.post-content ul,.post-content ol{ margin:0 0 1.3rem 1.4rem; }
.post-content li{ margin-bottom:0.5rem; }
.post-content img{ margin:1.6rem auto; }
.post-content hr{ border:none; border-top:1px solid var(--line); margin:2.4rem 0; }
.post-content figcaption{
  font-family:'JetBrains Mono',monospace; font-size:0.7rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--muted); text-align:center; margin-top:0.5rem;
}

/* Koenig editor card widths (required by Ghost) */
.post-content :not(.kg-width-full):not(.kg-width-wide){ }
.kg-width-wide{ position:relative; width:75vw; max-width:1000px; left:50%; transform:translateX(-50%); }
.kg-width-full{ position:relative; width:100vw; max-width:100vw; left:50%; transform:translateX(-50%); }
/* Mobile: 100vw includes the scrollbar gutter and overflows, clipping
   full-bleed strips on both edges. Below the column width, pin cards to
   the content column instead of the viewport. */
@media (max-width:760px){
  .kg-width-full,
  .kg-width-wide{ width:100%; max-width:100%; left:auto; transform:none; }
}
.kg-image-card img{ margin-left:auto; margin-right:auto; }
.kg-gallery-container{ display:flex; flex-direction:column; max-width:1040px; width:75vw; }
.kg-gallery-row{ display:flex; flex-direction:row; justify-content:center; }
.kg-gallery-image img{ display:block; margin:0; width:100%; height:100%; }
.kg-bookmark-card{ width:100%; }

.signature-section{ padding:0 0 2.4rem; }
.signature{
  font-family:'Fraunces',serif; font-style:italic; font-size:1.2rem;
  text-align:center; color:var(--ink);
}

/* next/prev */
.issue-nav{ border-top:1px solid var(--line); }
.issue-nav-grid{ display:grid; grid-template-columns:1fr 1fr; }
.issue-nav-cell{
  padding:1.6rem; text-decoration:none; color:var(--ink);
  border-right:1px solid var(--line);
}
.issue-nav-cell.right{ border-right:none; text-align:right; }
.issue-nav-direction{
  font-family:'JetBrains Mono',monospace; font-size:0.7rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--accent); margin-bottom:0.5rem;
}
.issue-nav-title{ font-family:'Fraunces',serif; font-size:1.05rem; line-height:1.2; }
.issue-nav-cell:hover .issue-nav-title{ color:var(--accent); }

/* subscribe block */
.subscribe{ background:var(--ink); color:#fff; padding:3rem 1.4rem; text-align:center; }
.subscribe-eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:0.7rem; letter-spacing:0.18em;
  text-transform:uppercase; color:#999; margin-bottom:0.8rem;
}
.subscribe h3{ font-family:'Fraunces',serif; font-weight:400; font-size:1.6rem; margin-bottom:0.6rem; }
.subscribe h3 em{ color:var(--accent); font-style:italic; }
.subscribe p{ color:#bbb; font-size:0.95rem; margin-bottom:1.4rem; }
.subscribe-fineprint{
  font-family:'JetBrains Mono',monospace; font-size:0.66rem; letter-spacing:0.08em;
  text-transform:uppercase; color:#777; margin-top:1rem;
}

/* form rows */
.form-row{ display:flex; gap:0.5rem; max-width:440px; margin:0 auto; }
.form-row input{
  flex:1; padding:0.7rem 0.9rem; border:1px solid #444; background:#1a1a1a; color:#fff;
  font-family:'JetBrains Mono',monospace; font-size:0.82rem;
}
.form-row input::placeholder{ color:#777; }
.form-row button{
  background:var(--accent); color:#fff; border:none; cursor:pointer;
  font-family:'JetBrains Mono',monospace; font-size:0.76rem; letter-spacing:0.1em;
  text-transform:uppercase; padding:0 1.2rem;
}
.form-row button:hover{ background:#a82a15; }

/* ============================================================
   TAG / SECTION INDEX
   ============================================================ */
.section-header{ padding:2.4rem 0 1.6rem; text-align:center; border-bottom:1px solid var(--line); }
.section-eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:0.72rem; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--accent); margin-bottom:0.9rem;
}
.section-header h1{
  font-family:'Fraunces',serif; font-weight:900; font-size:clamp(2rem,5vw,3rem);
  letter-spacing:-0.02em; line-height:0.98;
}
.section-header h1 em{ font-style:italic; font-weight:400; color:var(--accent); }
.section-intro{ font-style:italic; color:#444; max-width:600px; margin:1rem auto 0; line-height:1.5; }

/* ============================================================
   FOOTER  (legacy hook .colophon-block preserved)
   ============================================================ */
footer{ background:var(--ink); color:#bbb; padding:3rem 0 0; }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:2rem; padding-bottom:2.4rem; }
.footer-mark{ font-family:'Fraunces',serif; font-weight:900; font-size:1.5rem; color:#fff; margin-bottom:0.8rem; }
.footer-mark em{ font-style:italic; font-weight:400; color:var(--accent); }
.footer-tag{ font-size:0.92rem; line-height:1.5; color:#999; max-width:420px; }
.footer-col h4{
  font-family:'JetBrains Mono',monospace; font-size:0.7rem; letter-spacing:0.14em;
  text-transform:uppercase; color:#fff; margin-bottom:0.9rem;
}
.footer-col ul{ list-style:none; }
.footer-col li{ margin-bottom:0.55rem; }
.footer-col a{
  color:#bbb; text-decoration:none; font-size:0.9rem;
}
.footer-col a:hover{ color:#fff; }

.colophon-block{ border-top:1px solid #333; padding:1.8rem 0; }
.colophon-inner{ display:flex; flex-wrap:wrap; gap:2rem; }
.colophon-item-label{
  font-family:'JetBrains Mono',monospace; font-size:0.64rem; letter-spacing:0.14em;
  text-transform:uppercase; color:#777; margin-bottom:0.3rem;
}
.colophon-inner > div{ font-size:0.82rem; color:#ccc; line-height:1.4; }

.colophon-bottom{ border-top:1px solid #333; }
.colophon-bottom-inner{
  display:flex; justify-content:space-between; padding:1rem 1.6rem;
  font-family:'JetBrains Mono',monospace; font-size:0.64rem; letter-spacing:0.08em;
  text-transform:uppercase; color:#777;
}

/* ============================================================
   ERROR
   ============================================================ */
.error-wrap{ text-align:center; padding:5rem 1.4rem; }
.error-code{ font-family:'Fraunces',serif; font-weight:900; font-size:5rem; color:var(--accent); line-height:1; }
.error-msg{ font-family:'Fraunces',serif; font-size:1.4rem; margin:1rem 0 1.6rem; }
.error-wrap a{
  font-family:'JetBrains Mono',monospace; font-size:0.76rem; letter-spacing:0.1em;
  text-transform:uppercase; text-decoration:none; color:var(--ink);
  border:1px solid var(--ink); padding:0.65rem 1.4rem; display:inline-block;
}
.error-wrap a:hover{ background:var(--ink); color:#fff; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:820px){
  .lead{ grid-template-columns:1fr; }
  /* Lead stacks: the strip is 16:9 with edge-to-edge art, so show it whole
     instead of cropping to fill a fixed-height box. Drop the forced height
     and let the image set its own aspect. */
  .lead-art{ border-right:none; border-bottom:1px solid var(--line); min-height:0; }
  .lead-art a{ height:auto; }
  .lead-art img{ height:auto; object-fit:contain; }
  .grid{ grid-template-columns:1fr 1fr; }
  .card:nth-child(3n){ border-right:1px solid var(--line); }
  .card:nth-child(2n){ border-right:none; }
  .footer-grid{ grid-template-columns:1fr; gap:1.6rem; }
}

@media (max-width:560px){
  body{ font-size:17px; }
  .site-shell{ margin:0; border-left:none; border-right:none; }
  .grid{ grid-template-columns:1fr; }
  .card{ border-right:none !important; }
  .issue-nav-grid{ grid-template-columns:1fr; }
  .issue-nav-cell{ border-right:none; border-bottom:1px solid var(--line); text-align:left !important; }

  /* mobile nav → hamburger */
  .nav{ flex-direction:column; align-items:stretch; }
  .nav-toggle-label{ display:block; text-align:center; border-bottom:1px solid var(--line); }
  .nav .nav-links{ display:none; flex-direction:column; width:100%; }
  .nav-toggle:checked ~ .nav-links{ display:flex; }
  .nav .nav-links a{ text-align:center; border-bottom:1px solid var(--line); border-top:none; }
  .colophon-bottom-inner{ flex-direction:column; gap:0.4rem; text-align:center; }
  .topbar{ font-size:0.64rem; }
}

/* ============================================================
   BAG GRIEVANCE ARTIFACT — recovered from v2.4.0.
   The artifact is a deliberate worn-paper office document; its
   paper texture is artifact identity (the BAG traveler), distinct
   from the retired site cream. Local vars below scope the two
   legacy tokens it needs without reintroducing cream site-wide.
   ============================================================ */
.bag-art,
.office-share-top{
  --paper:#f5f2ec;
  --rule-soft:rgba(10,10,10,0.12);
}

   BAG GRIEVANCE ARTIFACT — live HTML render (.bag-art)
   Ported from the standalone artifact; scoped so it renders as
   real indexable text inside the office case-file viewer.
   ============================================================ */
.bag-art {
  width: 100%; max-width: 600px; position: relative;
  background-color: #fff;
  background-image: url("../img/grievance-paper.png");
  background-size: cover;
  background-position: center;
  font-family: 'Fraunces', serif; color: var(--ink); overflow: hidden;
  box-shadow: 0 12px 34px rgba(0,0,0,0.4); z-index: 2;
}
.bag-topbar {
  background: var(--ink); color: #fff; font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem; letter-spacing: 0.12em; display: flex; justify-content: space-between;
  padding: 0.6rem 1.2rem 0.6rem 2.8rem;
}
.bag-topbar .l { font-weight: 700; }
.bag-topbar .r { color: var(--accent); font-weight: 700; }
.bag-pad { padding: 1.1rem 2rem 0 2.8rem; }
.bag-lh { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.9rem; }
.bag-badge {
  width: 44px; height: 44px; border: 2.5px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em;
}
.bag-org .b { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.3px; line-height: 1.05; }
.bag-org .pub { font-size: 0.78rem; color: #333; margin-top: 0.18rem; }
.bag-meta {
  display: flex; border-top: 1.5px solid var(--ink); border-bottom: 1px solid #ddd;
  font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; letter-spacing: 0.04em;
  color: #333; padding: 0.5rem 0; margin-bottom: 1.2rem; flex-wrap: wrap; gap: 0.4rem 0;
}
.bag-meta > div { padding-right: 1.4rem; }
.bag-meta b { color: var(--ink); font-weight: 700; }
.bag-tag {
  font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.12em; color: var(--accent); margin-bottom: 0.8rem;
}
.bag-h { font-family: 'Fraunces', serif; font-size: 1.6rem; font-weight: 700; line-height: 1.13; letter-spacing: -0.4px; }
.bag-subrow { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 0.75rem; gap: 1rem; }
.bag-sub { font-size: 1rem; color: #333; }
.bag-stamp {
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 1.1rem;
  color: var(--accent); border: 3px solid var(--accent); padding: 0.3rem 0.9rem;
  transform: rotate(-5deg); letter-spacing: 0.06em; white-space: nowrap; flex-shrink: 0;
}
.bag-resp-label { display: flex; align-items: center; gap: 0.8rem; margin: 1.4rem 0 1rem; }
.bag-resp-label .t { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; }
.bag-resp-label .ln { flex: 1; height: 1.5px; background: var(--ink); }
.bag-body p { font-size: 1rem; line-height: 1.5; margin-bottom: 0.75rem; }
.bag-det { background: rgba(225,222,215,0.55); padding: 0.9rem 1.3rem; margin: 1rem 0; }
.bag-det .l { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; color: #888; margin-bottom: 0.4rem; }
.bag-det .v { font-size: 1rem; line-height: 1.5; }
.bag-det b { color: var(--accent); }
.bag-sign { margin: 1.3rem 0 0; }
.bag-sign .s1 { font-size: 1rem; }
.bag-sign .nm { font-family: 'Fraunces', serif; font-size: 1.3rem; font-style: italic; margin: 0.25rem 0 0.35rem; }
.bag-sign .s2 { font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; letter-spacing: 0.06em; color: #777; }
.bag-detach {
  display: flex; align-items: center; gap: 0.7rem;
  font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; letter-spacing: 0.12em; color: #999;
  margin: 2rem 0 0.6rem; padding: 0 2rem 0 2.4rem;
}
.bag-detach .dash { flex: 1; border-top: 1.5px dashed #bbb; }
.bag-detach .sc { font-size: 0.85rem; color: #999; }
.bag-stub { margin: 0 2rem 0 2.4rem; border: 1.5px dashed #999; padding: 0.95rem 1.3rem; }
.bag-stub-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.bag-stub-id { display: flex; align-items: center; gap: 0.8rem; }
.bag-stub-badge {
  width: 38px; height: 38px; border: 2px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 0.7rem;
}
.bag-stub-title .t1 { font-size: 1rem; font-weight: 700; letter-spacing: 0.06em; }
.bag-stub-title .t2 { font-size: 0.66rem; color: #777; margin-top: 0.05rem; }
.bag-stub-form { text-align: right; font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; color: var(--accent); line-height: 1.6; }
.bag-stub hr { border: none; border-top: 1px solid #ccc; margin: 0.7rem 0; }
.bag-stub-h { font-family: 'Fraunces', serif; font-size: 1rem; font-weight: 700; margin-bottom: 0.6rem; }
.bag-stub-lead { font-size: 0.72rem; line-height: 1.45; color: #333; margin-bottom: 0.8rem; }
.bag-checks { display: flex; gap: 3rem; margin-bottom: 0.85rem; }
.bag-checkcol { flex: 1; }
.bag-ck { display: flex; align-items: center; gap: 0.6rem; font-size: 0.76rem; margin-bottom: 0.5rem; }
.bag-box { width: 16px; height: 16px; border: 1.5px solid var(--ink); flex-shrink: 0; position: relative; }
.bag-box.x { border-color: var(--accent); }
.bag-box.x::before, .bag-box.x::after { content: ''; position: absolute; left: 1px; top: 6px; width: 13px; height: 2px; background: var(--accent); }
.bag-box.x::before { transform: rotate(45deg); }
.bag-box.x::after { transform: rotate(-45deg); }
.bag-stub-close { font-size: 0.72rem; line-height: 1.45; color: #333; }
.bag-stub-foot { display: flex; justify-content: space-between; gap: 1rem; font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; color: #777; border-top: 1px solid #ccc; margin-top: 0.7rem; padding-top: 0.65rem; }
.bag-stub-foot b { color: var(--ink); }
.bag-foot {
  background: var(--ink); color: #aaa; display: flex; justify-content: space-between; gap: 1.5rem;
  font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; line-height: 1.6;
  padding: 1.1rem 2rem 1.1rem 2.4rem; margin-top: 2rem;
}
.bag-foot b { color: #fff; }
.bag-foot .right { text-align: right; white-space: nowrap; }
.bag-foot .red { color: var(--accent); }
.bag-urlband {
  position: relative;
  background: var(--accent); color: #fff; text-align: center;
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: 0.9rem; letter-spacing: 0.12em; padding: 0.75rem 0.6rem;
}
.bag-bellmark { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); width: 1.5rem; height: 1.5rem; }
@media (max-width: 680px) {
  .bag-pad { padding: 1rem 1.2rem 0; }
  .bag-meta { display: none; }
  .bag-h { font-size: 1.3rem; }
  .bag-foot { flex-direction: column; gap: 0.8rem; padding: 1.1rem 1.2rem; }
  .bag-foot .right { text-align: left; }
  .bag-stub { margin: 0 1.2rem; }
  .bag-detach { padding: 0 1.2rem; }
  .bag-checks { gap: 1.2rem; }
}

/* punch-holes — 3-hole on the left edge of the artifact (8.5x11 proportion) */
.bag-art { padding-left: 0; }
.bag-punch {
  position: absolute; left: 16px; width: 16px; height: 16px;
  border-radius: 50%; background: #d4d1ca;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.35); z-index: 6;
  transform: translateY(-50%);
}
@media (max-width: 680px) { .bag-punch { display: none; } }

/* top share strip — slim, sits above the artifact */
.office-share-top {
  background: var(--paper); border-bottom: 1px solid var(--rule-soft);
  padding: 0.6rem 1.75rem; display: flex; align-items: center; gap: 0.9rem;
  flex-wrap: wrap;
}
.office-share-top .ost-label {
  font-family: 'JetBrains Mono', monospace; font-size: 0.62rem;
  letter-spacing: 0.06em; color: var(--muted); margin-right: 0.2rem;
}
.office-share-top a {
  font-family: 'JetBrains Mono', monospace; font-size: 0.62rem;
  letter-spacing: 0.04em; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 1px;
}
.office-share-top a:hover { border-bottom-color: var(--accent); color: var(--accent); }
@media (max-width: 680px) {
  .office-share-top { padding: 0.55rem 1.2rem; gap: 0.7rem; }
  .office-share-top .ost-label { width: 100%; margin-bottom: 0.2rem; }
}

/* Hide literary masthead on office-tagged posts (case files) —
   the breadcrumb is the navigation there. Body carries tag-* class. */
body.tag-office-grievances .masthead,
body.tag-office-silly-prompts .masthead,
body.tag-office-ai-vs-ai .masthead,
body.tag-office-fabricated .masthead { display: none; }
body.tag-office-back-pages .masthead { display: none; }

/* Worn-paper rotation — 4 sheets, picked per filing by URL hash (JS adds paper-N) */
.bag-art.paper-1 { background-image: url("../img/grievance-paper.png"); }
.bag-art.paper-2 { background-image: url("../img/grievance-paper2.png"); }
.bag-art.paper-3 { background-image: url("../img/grievance-paper3.png"); }
.bag-art.paper-4 { background-image: url("../img/grievance-paper4.png"); }

/* slim office-head on case files — no big headline, just context strip */
.office-head-slim { padding-top: 0.9rem; padding-bottom: 0.9rem; }
.office-head-slim .jur { margin-top: 0.2rem; }


/* grievance artifact section spacing on the stark site */
.bag-section{ padding:2.4rem 0 3rem; }

/* ============================================================
   SECTION INDEX — filing directory (.grow rows)
   Recovered from the retired office-index; reskinned stark.
   ============================================================ */
.office-rows-section{ padding:1.6rem 0 3rem; }
.office-rows{ display:flex; flex-direction:column; gap:0.9rem; }
.office-rows-rev{ flex-direction:column-reverse; }
.grow{
  background:#fff; border:1px solid var(--line);
  display:flex; align-items:stretch; text-decoration:none; color:var(--ink);
  overflow:hidden; transition:transform 0.12s, box-shadow 0.12s;
}
.grow:hover{ transform:translateY(-2px); box-shadow:0 4px 16px rgba(0,0,0,0.10); }
.grow-spine{
  background:var(--ink); color:var(--accent); width:3.4rem; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:0.8rem; letter-spacing:0.06em;
}
.grow-main{ padding:1rem 1.2rem; flex:1; min-width:0; }
.grow-thumb{ flex-shrink:0; width:8rem; border-right:1px solid var(--line); overflow:hidden; background:#dedcd6; }
.grow-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.grow-tag{
  font-family:'JetBrains Mono',monospace; font-size:0.68rem; font-weight:700;
  letter-spacing:0.12em; color:var(--muted); margin-bottom:0.4rem;
  display:flex; justify-content:space-between; text-transform:uppercase;
}
.grow-no{ color:var(--accent); }
.grow-filing{ font-weight:700; color:var(--accent); }
.grow-head{
  font-family:'Fraunces',serif; font-weight:600; font-size:1.05rem;
  line-height:1.25; letter-spacing:-0.01em;
}
.grow:hover .grow-head{ color:var(--accent); }
.grow-sub{
  font-family:'Fraunces',serif; font-size:0.92rem; color:#3a3a38;
  margin-top:0.45rem; letter-spacing:0; line-height:1.4;
}
.grow-status{
  border-left:1px solid var(--line); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; padding:0 1.1rem;
}
.grow-stamp{
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:0.8rem; color:var(--accent);
  border:2px solid var(--accent); padding:0.18rem 0.5rem; transform:rotate(-4deg);
  letter-spacing:0.04em; white-space:nowrap;
}
.grow-empty{
  text-align:center; font-family:'JetBrains Mono',monospace; font-size:0.8rem;
  color:var(--muted); padding:2rem; border:1px dashed var(--line);
}
@media (max-width:560px){
  .grow-status{ display:none; }
  .grow-thumb{ display:none; }
  .grow-spine{ width:2.6rem; font-size:0.78rem; }
}

/* ============================================================
   THE HELP — authored article (McSweeney's format, stark)
   ============================================================ */
.help-article{ padding:0 0 1.4rem; }
.help-article .container-prose{ max-width:680px; padding-top:1.9rem; }
/* full-bleed lead = the traveler / og:image */
.help-lead{ position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:#1a1a1a; margin:0; }
.help-lead img{ width:100%; height:100%; object-fit:cover; }
.help-lead-url{ position:absolute; right:0; bottom:0.9rem; background:var(--accent); color:#fff; font-family:'JetBrains Mono',monospace; font-size:0.7rem; letter-spacing:0.14em; padding:0.35rem 0.7rem; }
.help-lead figcaption{ position:absolute; left:0; bottom:0; width:100%; padding:0.5rem 0.9rem; background:linear-gradient(0deg,rgba(0,0,0,0.55),rgba(0,0,0,0)); color:#fff; font-family:'JetBrains Mono',monospace; font-size:0.7rem; letter-spacing:0.06em; }
.help-article .kicker{
  font-family:'JetBrains Mono',monospace; font-size:0.8rem; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--accent); margin-bottom:1.2rem;
}
.help-article h1{
  font-family:'Fraunces',serif; font-weight:300;
  font-size:clamp(1.9rem,4.4vw,2.9rem); line-height:1.08;
  letter-spacing:-0.02em; margin-bottom:0.8rem;
}
.help-article .sub{
  font-family:'GFS Didot','Fraunces',serif; font-size:1.12rem; font-style:italic;
  color:var(--muted); margin-bottom:1.6rem; line-height:1.4;
}
.help-byline{
  font-family:'JetBrains Mono',monospace; font-size:0.76rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--muted); margin-bottom:0;
  display:flex; gap:0.6rem; flex-wrap:wrap;
}
.help-byline span:first-child{ color:var(--ink); }
.help-byline .divider{ color:var(--line); }

.help-strip{ margin:2rem 0; }
.help-strip img{ width:100%; border:1px solid var(--line); }
.help-strip figcaption{
  font-family:'JetBrains Mono',monospace; font-size:0.7rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--muted); text-align:center; margin-top:0.6rem;
}

.help-body{ margin-top:1rem; }
.help-body p{ font-size:1.16rem; line-height:1.66; margin-bottom:1.4rem; }
.help-body em{ font-style:italic; }
.help-body h2{ font-family:'Fraunces',serif; font-weight:600; font-size:1.5rem; margin:2.4rem 0 1rem; }
.help-body hr{ border:none; border-top:1px solid var(--line); width:60px; margin:2.4rem auto 2.4rem 0; }
.help-body a{ color:var(--accent); }
.help-body img{ margin:1.6rem auto; }
.help-sign{
  font-family:'JetBrains Mono',monospace; font-size:0.82rem; letter-spacing:0.06em;
  color:var(--muted); text-transform:uppercase; margin-top:2rem;
}
/* full-width subscribe band — the Ask (Gate 3), automatic on every Help Desk post */
.help-band{ background:var(--accent); color:#fff; padding:2.4rem 1.6rem; margin-top:2.6rem; }
.help-band-in{ max-width:680px; margin:0 auto; }
.help-band-copy{ font-family:'Fraunces',serif; font-weight:400; font-size:1.3rem; line-height:1.3; margin-bottom:1.1rem; }
.help-band-form{ display:flex; gap:0.5rem; max-width:480px; }
.help-band-email{ flex:1; padding:0.8rem 0.9rem; border:none; border-radius:0; font-family:'JetBrains Mono',monospace; font-size:0.8rem; }
.help-band-btn{ background:var(--ink); color:#fff; border:none; cursor:pointer; font-family:'JetBrains Mono',monospace; font-weight:700; font-size:0.8rem; letter-spacing:0.1em; text-transform:uppercase; padding:0 1.2rem; }
.help-band-btn:hover{ background:#000; }
.help-band-note{ display:none; font-family:'JetBrains Mono',monospace; font-size:0.8rem; letter-spacing:0.04em; margin-top:0.9rem; }
.help-band-form.success + .help-band-note{ display:block; }
.help-band-form.success{ display:none; }
@media (max-width:520px){ .help-band-form{ flex-direction:column; max-width:none; } }
/* standardized inline subscribe card (floated before the 3rd paragraph) */
.help-body::after{ content:""; display:block; clear:both; }
.help-subcard{ float:right; width:320px; max-width:50%; border:2.5px solid var(--accent); background:#fff; padding:1.8rem 1.5rem; margin:0.3rem 0 1.2rem 1.7rem; text-align:center; box-shadow:6px 6px 0 rgba(200,53,28,0.10); }
.help-subcard-eye{ font-family:'JetBrains Mono',monospace; font-size:0.7rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent); margin-bottom:0.7rem; }
.help-subcard-h{ font-family:'Fraunces',serif; font-weight:500; font-size:1.55rem; line-height:1.16; margin:0 0 0.7rem; }
.help-subcard-h em{ color:var(--accent); font-style:italic; }
.help-subcard-p{ font-size:1rem; color:#444; line-height:1.4; margin-bottom:1.2rem; }
.help-subcard a.help-subcard-btn{ display:block; background:var(--accent); color:#fff; text-decoration:none; font-family:'JetBrains Mono',monospace; font-weight:700; font-size:0.76rem; letter-spacing:0.1em; text-transform:uppercase; padding:0.85rem; }
.help-subcard a.help-subcard-btn:hover{ background:#a82a15; color:#fff; }
@media (max-width:560px){ .help-subcard{ float:none; width:100%; max-width:none; margin:1.6rem 0; } }

/* Run-It-Yourself box */
.tryit{ border-top:2px solid var(--ink); margin-top:3rem; padding-top:2rem; }
.tryit .tl{
  font-family:'JetBrains Mono',monospace; font-size:0.78rem; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--accent); margin-bottom:0.8rem;
}
.tryit p{ font-size:1.05rem; line-height:1.5; margin-bottom:1rem; }
.promptbox{
  background:var(--soft); border:1px solid var(--line); padding:0.85rem 1.1rem;
  font-family:'Fraunces',serif; font-style:italic; font-size:1.08rem; line-height:1.45; margin-bottom:1rem;
}
.copy{
  display:inline-block; background:var(--ink); color:#fff;
  font-family:'JetBrains Mono',monospace; font-size:0.78rem; letter-spacing:0.12em;
  text-transform:uppercase; text-decoration:none; padding:0.6rem 1.2rem; cursor:pointer;
}
.copy:hover{ background:var(--accent); }

/* ============ HELP SHARE ROWS + PROMPT PITCH (v2.6.2) ============ */
.help-share{
  display:flex; flex-wrap:wrap; align-items:center; gap:0.55rem;
  font-family:'JetBrains Mono',monospace; font-size:0.76rem;
  letter-spacing:0.05em; text-transform:uppercase;
}
.help-share-top{ margin-top:1.6rem; padding:1.1rem 0; border-top:2px solid var(--ink); border-bottom:1px solid var(--line); }
.help-share-close{ margin-top:2.4rem; padding:1.1rem 0; border-top:2px solid var(--ink); border-bottom:1px solid var(--line); }
.help-share-label{ flex-basis:100%; color:var(--ink); font-weight:700; margin:0 0 0.3rem; }
.help-share a{
  color:var(--accent); text-decoration:none; font-weight:700;
  border:1.5px solid var(--accent); border-radius:3px;
  padding:0.6rem 1rem; line-height:1; transition:background 0.12s, color 0.12s;
}
.help-share a:hover{ background:var(--accent); color:#fff; }

/* ===== fixed left share rail (desktop) ===== */
.help-rail{
  display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:0.6rem; max-width:720px; margin:1.6rem auto; padding:0 1.6rem;
}
.help-rail-label{
  font-family:'JetBrains Mono',monospace; font-size:0.68rem; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--ink); margin-right:0.3rem;
}
.help-rail-btn{
  position:relative; width:38px; height:38px; border:1.5px solid var(--accent);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--accent); background:var(--paper-light,#fdfbf6);
  transition:background 0.12s, color 0.12s;
}
.help-rail-btn:hover{ background:var(--accent); color:#fff; }
.help-rail-btn svg{ width:17px; height:17px; fill:var(--accent); }
.help-rail-btn svg path{ fill:var(--accent); }
.help-rail-btn:hover svg, .help-rail-btn:hover svg path{ fill:#fff; }
.help-rail-toast{
  position:absolute; bottom:46px; white-space:nowrap; background:var(--ink); color:#fff;
  font-family:'JetBrains Mono',monospace; font-size:0.64rem; letter-spacing:0.08em;
  text-transform:uppercase; padding:0.25rem 0.5rem; border-radius:2px;
  opacity:0; pointer-events:none; transition:opacity 0.12s;
}
.help-rail-copy.copied .help-rail-toast{ opacity:1; }
.help-article .help-rail{ display:none; }

/* Horizontal share rows (top + bottom of content, normal flow) */
.share-row-wrap{ }
.share-row-top{ margin:0 0 1.4rem; }
.share-row-bottom{ margin:1.6rem 0 0; }
.share-row{
  display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:0.55rem; max-width:600px; margin:0 auto;
}
.share-row-label{
  flex-basis:100%; text-align:center; margin:0 0 0.7rem;
  font-family:'JetBrains Mono',monospace; font-size:0.72rem; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--ink);
}
.share-row-btn{
  position:relative; width:36px; height:36px; border:1.5px solid var(--accent);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--paper-light,#fdfbf6); transition:background 0.12s;
}
.share-row-btn svg{ width:16px; height:16px; fill:var(--accent); }
.share-row-btn svg path{ fill:var(--accent); }
.share-row-btn:hover{ background:var(--accent); }
.share-row-btn:hover svg, .share-row-btn:hover svg path{ fill:#fff; }
.share-row-btn[hidden]{ display:none; }
.share-row-copy.copied{ background:var(--accent); }
.share-row-copy.copied svg, .share-row-copy.copied svg path{ fill:#fff; }
.share-row-copy.copied::after{
  content:'Copied'; position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
  font-family:'JetBrains Mono',monospace; font-size:0.68rem; font-weight:700; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--ink); background:var(--paper-light,#fdfbf6);
  border:1px solid var(--accent); border-radius:3px; padding:2px 6px; white-space:nowrap;
}

.subscribe-pitch{
  color:#bbb; font-size:0.82rem; line-height:1.5;
  margin-top:1.2rem; max-width:34rem; margin-left:auto; margin-right:auto;
}
.subscribe-pitch a{ color:#fff; border-bottom:1px solid var(--accent); text-decoration:none; }
.subscribe-pitch a:hover{ color:var(--accent); }

/* Comments */
.post-comments{ padding:1rem 0 3rem; }
.post-comments .container-prose{ margin:0 auto; }

/* Grievance share + ask */
.grievance-share-section{ padding:1.4rem 0 0.4rem; }
/* ===== Grievance Desk — prominent intake CTA band ===== */
.gd-cta-section{ padding:0 0 1.6rem; }
.gd-cta{
  display:block; text-decoration:none; text-align:center;
  background:var(--accent); color:#fff;
  border:none; padding:1.1rem 1.4rem;
}
.gd-cta:hover{ background:var(--ink); }
.gd-cta-l{
  display:block; font-family:'JetBrains Mono',monospace; font-size:0.62rem;
  font-weight:700; letter-spacing:0.18em; text-transform:uppercase; opacity:0.9; margin-bottom:0.3rem;
}
.gd-cta-h{ display:block; font-family:'GFS Didot',serif; font-size:1.5rem; }

/* ===== File a Grievance — intake page ===== */
.intake{ padding:2.4rem 0 3rem; background:#e6e1d6 url("../images/grievance-bg.jpg") center top/cover no-repeat; }
.intake-kick{
  font-family:'JetBrains Mono',monospace; font-size:0.66rem; font-weight:700;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--accent); margin-bottom:0.7rem;
}
.intake-h{ font-family:'GFS Didot',serif; font-weight:400; font-size:2.8rem; line-height:1; margin:0 0 1.2rem; }
.intake-prose{ font-size:1.08rem; line-height:1.6; margin-bottom:1rem; }
.intake-rule{
  font-size:1rem; line-height:1.55; font-style:italic; color:var(--muted);
  border-left:3px solid var(--accent); padding-left:1rem; margin:1.2rem 0 1.6rem;
}
.intake-btn{
  display:inline-block; background:var(--accent); color:#fff;
  font-family:'JetBrains Mono',monospace; font-weight:700; letter-spacing:0.14em;
  text-transform:uppercase; font-size:0.84rem; text-decoration:none; padding:0.9rem 1.6rem;
}
.intake-btn:hover{ background:var(--ink); }
.intake-note{ font-family:'JetBrains Mono',monospace; font-size:0.62rem; letter-spacing:0.06em; color:var(--muted); margin-top:0.6rem; }
.intake-cap{ border:1.5px solid var(--accent); padding:1.3rem 1.4rem; margin-top:2.2rem; }
.intake-cap-h{ font-family:'GFS Didot',serif; font-size:1.4rem; margin-bottom:0.4rem; }
.intake-cap-p{ font-size:0.98rem; color:var(--ink); margin-bottom:0.9rem; }
.intake-cap .form-row{ display:flex; gap:0.5rem; }
.intake-cap input{ flex:1; border:1px solid var(--line); font-family:'Fraunces',serif; font-size:0.98rem; padding:0.6rem 0.75rem; }
.intake-cap button{
  background:var(--ink); color:#fff; border:none; cursor:pointer;
  font-family:'JetBrains Mono',monospace; font-weight:700; letter-spacing:0.1em;
  text-transform:uppercase; font-size:0.7rem; padding:0 1.2rem;
}
.intake-cap-fine{ font-family:'JetBrains Mono',monospace; font-size:0.6rem; letter-spacing:0.05em; color:var(--muted); margin-top:0.7rem; }

.grievance-ask-section{ padding:1.2rem 0 2.6rem; }
.grievance-ask{
  display:block; text-decoration:none; color:var(--ink);
  border:2px solid var(--accent); border-radius:3px;
  padding:1.5rem 1.6rem; background:var(--paper-light,#fdfbf6);
  transition:background .15s ease;
}
.grievance-ask:hover{ background:#fff; box-shadow:none; }
.grievance-ask-label{
  font-family:'JetBrains Mono',monospace; font-size:0.72rem; font-weight:700;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); margin-bottom:0.6rem;
}
.grievance-ask-head{
  font-family:'Fraunces',serif; font-weight:700; font-size:1.3rem;
  line-height:1.2; letter-spacing:-0.01em; margin-bottom:0.5rem;
}
.grievance-ask-sub{ font-size:0.98rem; line-height:1.5; color:var(--ink); margin-bottom:1rem; }
.grievance-ask-btn{
  display:inline-block; font-family:'JetBrains Mono',monospace; font-weight:700;
  font-size:0.82rem; letter-spacing:0.08em; text-transform:uppercase;
  color:#f5f2ec; background:var(--accent); padding:0.55rem 1rem; border-radius:2px;
}

/* ============================================================
   THE SUBSCRIBE CARD — canonical email ask (v2.7.69).
   One component, every page. Inline single-field form on desktop
   (capture in place); portal button on mobile (no keyboard jank).
   Replaces .subscribe / .help-band / .help-subcard / .intake-cap /
   .form-row asks — those classes are retired.
   ============================================================ */
.subscribe-card{ background:var(--accent); color:#fff; padding:2.6rem 1.6rem; margin:2.6rem 0 0; }
.subscribe-card-in{ max-width:620px; margin:0 auto; text-align:center; }
.subscribe-card-eye{
  font-family:'JetBrains Mono',monospace; font-size:0.7rem; font-weight:700;
  letter-spacing:0.16em; text-transform:uppercase; color:rgba(255,255,255,0.78); margin-bottom:0.7rem;
}
.subscribe-card-h{ font-family:'Fraunces',serif; font-weight:500; font-size:1.5rem; line-height:1.22; margin:0 0 0.5rem; }
.subscribe-card-h em{ font-style:italic; }
.subscribe-card-p{ font-size:0.96rem; line-height:1.45; color:rgba(255,255,255,0.9); margin:0 0 1.3rem; }
.subscribe-card-form{ display:flex; gap:0.5rem; max-width:460px; margin:0 auto; }
.subscribe-card-email{
  flex:1; padding:0.8rem 0.9rem; border:none; border-radius:0;
  font-family:'JetBrains Mono',monospace; font-size:0.8rem; color:var(--ink); background:#fff;
}
.subscribe-card-email::placeholder{ color:#999; }
.subscribe-card-btn{
  background:var(--ink); color:#fff; border:none; cursor:pointer;
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:0.8rem;
  letter-spacing:0.1em; text-transform:uppercase; padding:0 1.3rem;
}
.subscribe-card-btn:hover{ background:#000; }
.subscribe-card-note{
  display:none; font-family:'JetBrains Mono',monospace; font-size:0.78rem;
  letter-spacing:0.04em; color:#fff; margin:0.9rem 0 0;
}
.subscribe-card-form.success + .subscribe-card-note{ display:block; }
.subscribe-card-portal{
  display:none; text-decoration:none; background:var(--ink); color:#fff;
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:0.82rem;
  letter-spacing:0.08em; text-transform:uppercase; padding:0.85rem 1.4rem;
}
.subscribe-card-portal:hover{ background:#000; }
.subscribe-card-fine{
  font-family:'JetBrains Mono',monospace; font-size:0.62rem; letter-spacing:0.05em;
  color:rgba(255,255,255,0.72); margin-top:0.9rem;
}
/* desktop captures inline; phones get the portal button (dodges the keyboard-zoom jank) */
@media (max-width:640px){
  .subscribe-card-form{ display:none; }
  .subscribe-card-form.success + .subscribe-card-note{ display:none; }
  .subscribe-card-portal{ display:inline-block; }
}

/* Issue share-row placement wrapper (Issue branch had no share before v2.7.69) */
.share-section{ padding:0.4rem 0 0; }

/* homepage submission pitch (preserved from the old subscribe band) */
.submit-pitch{
  max-width:560px; margin:1.2rem auto 0; text-align:center;
  font-size:0.92rem; line-height:1.5; color:var(--muted);
}
.submit-pitch a{ color:var(--accent); }

/* ===== THE INTAKE — featured submission CTA (namespaced .subcta-*) ===== */
.subcta-wrap{ max-width:var(--max); margin:2.6rem auto; padding:0 1.6rem; }
.subcta{ background:#0d0d0c; border-radius:3px; padding:32px 34px 28px; }
.subcta-eyebrow{ font-family:'JetBrains Mono',monospace; font-weight:600; font-size:11px; letter-spacing:.2em; color:var(--accent); margin-bottom:14px; }
.subcta-h{ font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:1.9rem; line-height:1.08; letter-spacing:-0.01em; color:#f5f2ec; margin:0; }
.subcta-body{ font-family:'Fraunces',Georgia,serif; font-size:1.05rem; line-height:1.5; color:#cfc7b6; margin-top:12px; max-width:600px; }
.subcta-act{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:22px; }
.subcta-btn{ font-family:'JetBrains Mono',monospace; font-weight:600; font-size:12px; letter-spacing:.06em; text-decoration:none; padding:12px 18px; background:var(--accent); color:#fff; border-radius:2px; }
.subcta-btn:hover{ background:#a82c16; color:#fff; }
.subcta-link{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.04em; color:#cfc7b6; text-decoration:underline; text-underline-offset:3px; }
.subcta-link:hover{ color:#fff; }
.subcta-fine{ border-top:1px solid #2a2a28; margin-top:22px; padding-top:13px; font-family:'Fraunces',Georgia,serif; font-style:italic; font-size:13px; line-height:1.5; color:#b4ac9a; }
@media (max-width:600px){ .subcta{ padding:24px 22px 22px; } .subcta-h{ font-size:1.55rem; } }

/* ===== Grievance intake form + stamped receipt ===== */
.gform{ margin:1.9rem 0 0; }
.gform-row{ margin-bottom:1.15rem; }
.gform-label{ display:block; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); margin-bottom:.45rem; }
.gform-hint{ display:inline; font-weight:400; text-transform:none; letter-spacing:0; color:var(--muted); font-style:italic; font-family:'Fraunces',Georgia,serif; font-size:12.5px; }
.gform-input{ width:100%; font-family:'Fraunces',Georgia,serif; font-size:1rem; color:var(--ink); background:#fff; border:1.5px solid var(--ink); border-radius:2px; padding:.7rem .8rem; }
.gform-input::placeholder{ color:#9a978f; font-style:italic; }
.gform-input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 2px rgba(200,53,28,.15); }
.gform-textarea{ resize:vertical; line-height:1.5; }
.gform-affirm{ display:flex; gap:.6rem; align-items:flex-start; font-family:'Fraunces',Georgia,serif; font-size:.94rem; line-height:1.45; color:#333; margin:.3rem 0 1.4rem; cursor:pointer; }
.gform-affirm input{ margin-top:.25rem; width:16px; height:16px; accent-color:var(--accent); flex-shrink:0; }
.gform-affirm.gform-err span{ color:var(--accent); }
.gform-submit{ border:none; cursor:pointer; }
.gform-note{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); margin-top:.9rem; line-height:1.55; }
.gform-err{ border-color:var(--accent) !important; }
.greceipt{ position:relative; margin:0.5rem 0 0; background:#faf7f0; border:1.5px solid var(--ink); border-radius:2px; padding:2rem 1.8rem 1.5rem; }
.greceipt-stamp{ position:absolute; top:1.2rem; right:1.2rem; font-family:'JetBrains Mono',monospace; font-weight:700; font-size:1.05rem; letter-spacing:.08em; color:var(--accent); border:3px solid var(--accent); padding:.3rem .7rem; transform:rotate(-6deg); border-radius:2px; }
.greceipt-kick{ font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600; letter-spacing:.18em; color:var(--accent); margin-bottom:.5rem; }
.greceipt-no{ font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--ink); margin-bottom:.9rem; }
.greceipt-body{ font-family:'Fraunces',Georgia,serif; font-size:1.02rem; line-height:1.55; color:var(--ink); margin-bottom:.8rem; }
.greceipt-dim{ font-size:.9rem; color:var(--muted); }
.greceipt-fine{ border-top:1px solid #e3ddcf; margin-top:.5rem; padding-top:.7rem; font-family:'Fraunces',Georgia,serif; font-style:italic; font-size:12px; color:var(--muted); }
@media (max-width:600px){ .greceipt-stamp{ position:static; display:inline-block; transform:rotate(-3deg); margin-bottom:.8rem; } }

/* ===== The Funnies — grievance paper background ===== */
.funnies-paper{ background:#e6e1d6 url("../images/grievance-bg.jpg") center top/cover no-repeat; }

/* ===== Grievance paper rotation — landing/page backgrounds ===== */
.gpaper-1{ background:#e6e1d6 url("../img/grievance-paper.png")  center top/cover no-repeat; }
.gpaper-2{ background:#e6e1d6 url("../img/grievance-paper2.png") center top/cover no-repeat; }
.gpaper-3{ background:#e6e1d6 url("../img/grievance-paper3.png") center top/cover no-repeat; }
.gpaper-4{ background:#e6e1d6 url("../img/grievance-paper4.png") center top/cover no-repeat; }

/* ============================================================
   HOMEPAGE ZONES — section labels, The Funnies rail,
   From the Back Cover feature. Added v2.7.86.
   ============================================================ */
.home-seclabel{ display:flex; align-items:center; gap:1rem; max-width:var(--max); margin:2.6rem auto 1rem; padding:0 1.6rem; }
.home-seclabel .t{ font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); white-space:nowrap; }
.home-seclabel .rule{ flex:1; height:1px; background:var(--line); }
.home-seclabel .more{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-decoration:none; white-space:nowrap; }
.home-seclabel .more:hover{ color:var(--accent); }

/* The Funnies rail */
.funnies-rail{ max-width:var(--max); margin:0 auto; padding:0 1.6rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.funnies-rail .funny{ text-decoration:none; color:inherit; display:flex; flex-direction:column; }
.funny-art{ border:1px solid var(--line); background:var(--soft); aspect-ratio:16/9; overflow:hidden; }
.funny-art img{ width:100%; height:100%; object-fit:cover; }
.funny-empty{ display:flex; align-items:center; justify-content:center; height:100%; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.funny-cap{ font-size:.86rem; line-height:1.4; color:#444; font-style:italic; margin-top:.5rem; }
.funnies-rail .funny:hover .funny-cap{ color:var(--accent); }

/* From the Back Cover feature */
.backcover-feature{ display:block; max-width:var(--max); margin:0 auto; padding:0 1.6rem; text-decoration:none; color:inherit; }
.bcf-art{ border:1px solid var(--line); background:var(--soft); aspect-ratio:16/9; overflow:hidden; }
.bcf-art img{ width:100%; height:100%; object-fit:cover; }
.bcf-empty{ display:flex; align-items:center; justify-content:center; height:100%; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.bcf-cap{ font-size:.92rem; line-height:1.45; color:#444; font-style:italic; margin-top:.6rem; text-align:center; }

@media(max-width:680px){
  .funnies-rail{ grid-template-columns:1fr; }
}