/*
Theme Name: About Barrow
Description: Newspaper-style directory theme for aboutbarrow.com. Listings and
  categories come from the About Barrow Core plugin, so switching themes never
  destroys the data.
Author: Rogue Pine
Version: 1.6
*/

:root{--paper:#f7f4ec;--ink:#191817;--ink-soft:#3c3a36;--muted:#6f6a5e;
  --rule:#c9c2b0;--rule-dark:#191817;--red:#9e1b1b;--card:#fffdf8}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:'Source Serif 4',Georgia,serif;font-size:18px;line-height:1.6;
  -webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{width:min(1080px,100% - 2.5rem);margin-inline:auto}
/* Narrow reading column. Must be an inner block, not a modifier on .wrap:
   .wrap is auto-centred, so shrinking it centres the text instead of keeping
   it flush with the masthead and the h1 above it. */
.narrow{max-width:70ch}
h1,h2,h3{font-family:'Playfair Display',Georgia,serif;font-weight:700;
  line-height:1.08;letter-spacing:-.01em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.1rem,5vw,3.5rem)}
h2{font-size:clamp(1.5rem,3vw,2.1rem)}
h3{font-size:1.18rem}
.kicker{font-family:'Archivo',sans-serif;font-weight:700;font-size:.7rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin:0 0 .5rem}
p{margin:0 0 1rem}
/* masthead */
.mast{border-bottom:3px double var(--rule-dark);background:var(--paper)}
.mast .wrap{display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;padding:1.1rem 0;flex-wrap:wrap}
.logo{font-family:'Playfair Display',serif;font-weight:800;font-size:1.6rem;
  letter-spacing:-.02em;text-decoration:none}
.logo span{color:var(--red)}
/* The masthead logotype, borrowed into running text. Used in the homepage H1 so
   the brand name reads as the brand and still scans as an ordinary sentence:
   "About" is capitalised to match the logo exactly, per Reade 2026-09-28, and
   takes the red on "Barrow". Added 1.4.1, capitalised in 1.4.2.
   Deliberately real text in two spans, NOT a ::after with content:"Barrow".
   Generated content is not reliably read by screen readers, is not always
   indexed, and cannot be selected or copied, which is a poor trade for a
   colour change on the most important three words on the site. */
h1 .mark{font-weight:800;letter-spacing:-.02em}
h1 .mark > span{color:var(--red)}
.mast nav{font-family:'Archivo',sans-serif;font-size:.72rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;display:flex;gap:1.3rem;flex-wrap:wrap}
.mast nav a{text-decoration:none;color:var(--ink-soft)}
.mast nav a:hover{color:var(--red)}
/* hero */
.hero{padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(1.5rem,3vw,2.5rem);
  border-bottom:1px solid var(--rule)}
.hero p.lede{font-size:1.2rem;color:var(--ink-soft);max-width:62ch;margin-top:1.2rem}
.stats{display:flex;flex-wrap:wrap;gap:.4rem 2.4rem;margin-top:1.8rem;
  font-family:'Archivo',sans-serif;font-size:.75rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.stats b{color:var(--ink);font-weight:700}
/* category grid */
.cats{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));margin:2.2rem 0}
.cat{background:var(--card);padding:1.15rem 1.25rem;text-decoration:none;display:block}
.cat:hover{background:#fff}
.cat b{font-family:'Playfair Display',serif;font-size:1.12rem;display:block}
.cat span{font-family:'Archivo',sans-serif;font-size:.72rem;color:var(--muted);
  letter-spacing:.06em;text-transform:uppercase;display:block;margin-top:.3rem}
section{padding-block:clamp(2rem,4vw,3.2rem)}
section+section{border-top:1px solid var(--rule)}
/* ranked list */
ol.rank{list-style:none;margin:2rem 0 0;padding:0;counter-reset:r}
ol.rank li{counter-increment:r;display:grid;grid-template-columns:auto 1fr;
  gap:1.1rem;padding:1.3rem 0;border-top:1px solid var(--rule)}
ol.rank li::before{content:counter(r);font-family:'Playfair Display',serif;
  font-weight:800;font-size:1.9rem;color:var(--red);line-height:1;min-width:1.6ch}
ol.rank li:first-of-type{border-top:2px solid var(--rule-dark)}
.biz h3{margin:0}
.biz h3 a{text-decoration:none}
.biz h3 a:hover{color:var(--red)}
.meta{font-family:'Archivo',sans-serif;font-size:.78rem;color:var(--muted);
  margin-top:.35rem;display:flex;gap:.35rem 1.1rem;flex-wrap:wrap;align-items:center}
.stars{color:var(--red);letter-spacing:.05em}
.meta a{color:var(--ink-soft)}
.tel{font-weight:600;color:var(--ink)!important;text-decoration:none;
  border-bottom:1px solid var(--rule)}
/* method + faq */
/* The per-category editorial section, theme 1.5. Narrower measure than the
   ranked list above it, because this is prose and prose needs a shorter line. */
.ab-body{max-width:66ch;margin:2.5rem 0 0}
.ab-body h2{margin:0 0 1rem}
.ab-body details{margin:1.5rem 0 0;border-top:1px solid var(--rule);padding-top:1rem}
.ab-body summary{cursor:pointer;font-weight:600}
.ab-body summary::marker{color:var(--red)}
.ab-body details p{margin:.75rem 0 0}
.note{background:var(--card);border:1px solid var(--rule);padding:1.3rem 1.4rem;
  font-size:.95rem;color:var(--ink-soft)}
.note h3{font-size:1rem;margin-bottom:.5rem}
details{border-top:1px solid var(--rule);padding:.9rem 0}
details summary{cursor:pointer;font-family:'Playfair Display',serif;
  font-weight:600;font-size:1.05rem}
details p{margin:.7rem 0 0;color:var(--ink-soft)}
/* signup */
.signup{background:var(--ink);color:var(--paper);padding:clamp(1.8rem,4vw,2.6rem)}
.signup h2{color:var(--paper)}
.signup p{color:#cfc9bb;max-width:52ch}
.signup .kicker{color:#e8a0a0}
.btn{display:inline-block;background:var(--red);color:#fff;text-decoration:none;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:.8rem;
  letter-spacing:.1em;text-transform:uppercase;padding:.85rem 1.5rem;margin-top:1rem}
footer{border-top:3px double var(--rule-dark);padding:2rem 0 3rem;
  font-size:.85rem;color:var(--muted)}
footer a{color:var(--ink-soft)}
.crumb{font-family:'Archivo',sans-serif;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.9rem}
.crumb a{color:var(--muted)}
/* single listing */
.dl{display:grid;gap:.1rem 1.5rem;margin:1.5rem 0}
@media(min-width:600px){.dl{grid-template-columns:auto 1fr}}
.dl dt{font-family:'Archivo',sans-serif;font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);padding-top:.55rem}
.dl dd{margin:0;padding-top:.4rem;border-top:1px solid var(--rule)}
@media(max-width:599px){.dl dt{border-top:1px solid var(--rule);padding-top:.7rem}
  .dl dd{border:0;padding-top:.15rem}}

/* Client disclosure on a single listing. Deliberately not styled to look like
   fine print: it carries the same weight as the rest of the page. */
.ab-disclosure{border-left:4px solid var(--red)}
.ab-disclosure h3{margin-top:0}