:root{--dark:#2C2418;--accent:#1F3A5F;--ground:#FFFFFF;--ink:#2C2418;
--muted:#7b766f;--surface:#ffffff;--line:#e1e0df;--on-accent:#FFFFFF;
--accent-on-dark:#FFFFFF;--muted-on-dark:#8f8b84;--emphasis:#8A6A2F;
--cream:#eae4da}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font:17px/1.6 'Open Sans', system-ui, sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:'Open Sans', system-ui, sans-serif;font-weight:900;line-height:1.2;margin:0 0 .4em;letter-spacing:-.01em}
a{color:var(--ink)}
.wrap{max-width:1300px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px;margin:0 auto}

/* ── masthead: white bar, then a coloured category band ───────────────── */
.topbar{background:var(--ground);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:16px;padding-bottom:16px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink)}
.brand img{height:54px;width:auto}
.wordmark{font-family:'Open Sans', system-ui, sans-serif;font-weight:900;font-size:25px;line-height:1.05;letter-spacing:-.02em;text-transform:uppercase}
.wordmark .sub{display:block;font-size:11.5px;font-weight:700;letter-spacing:.34em;color:var(--accent);margin-top:5px;
  text-transform:uppercase;border-top:1px solid var(--line);padding-top:5px}
.util{display:flex;gap:26px;font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.util a{color:var(--accent);text-decoration:none}
.util a:hover{color:var(--ink)}

.catband{background:var(--accent)}
.catband .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 22px;padding-top:17px;padding-bottom:17px}
.catband a{color:var(--on-accent);text-decoration:none;font-size:15px}
.catband a:hover{opacity:.78}

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero-full{position:relative;min-height:470px;display:flex;align-items:center;background-size:cover;background-position:center}
.hero-full::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.45) 55%,rgba(0,0,0,.25) 100%)}
.hero-full .wrap{position:relative;z-index:1;padding-top:54px;padding-bottom:54px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#fff;margin:0 0 14px}
.hero-full h1{color:#fff;font-size:clamp(34px,4.8vw,62px);line-height:1.2;max-width:19ch}
.hero-full .standfirst{color:#fff;font-weight:700;font-size:19px;margin:14px 0 10px;max-width:50ch}
.hero-full .body{color:#fff;opacity:.92;max-width:62ch;margin:0 0 26px}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:11px 18px;border-radius:2px;font-size:12px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border:1px solid transparent}
.btn-solid{background:#1F3A5F;color:#fff}
.btn-ghost{border-color:rgba(255,255,255,.65);color:#fff}

/* ── section furniture ────────────────────────────────────────────────── */
.sec{padding:58px 0}
.sec h2{font-size:clamp(28px,3.4vw,50px)}
.sec .standfirst{color:var(--muted);margin:0 0 30px}
.band-dark{background:var(--accent);
  background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);background-size:18px 18px}
.band-dark h2{color:var(--cream)}
.band-dark .standfirst{color:var(--muted-on-dark)}

/* ── the split: compact list beside one feature ───────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:start}
.mini{display:grid;grid-template-columns:132px 1fr;gap:18px;padding:0 0 22px;text-decoration:none;color:inherit}
.mini .shot{width:132px;height:124px;object-fit:cover;border-radius:2px}
/* The plate's place label is set for a hero-sized panel. At thumbnail width it
   truncates to "Loud…" and reads as a rendering fault rather than a label, so
   it is dropped rather than scaled — a label nobody can read is not a label. */
.mini .plate span{display:none}
.mini h3{font-size:19px;line-height:1.3;margin:.3em 0 .25em}
.mini p{margin:0;color:var(--muted);font-size:14px}
.mini:hover h3{color:var(--accent)}
.chip{display:inline-block;background:var(--accent);color:var(--on-accent);font-size:12.5px;
  padding:3px 9px;border-radius:2px;margin-bottom:4px}

.feature{position:relative;display:block;min-height:420px;border-radius:2px;overflow:hidden;
  text-decoration:none;background-size:cover;background-position:center}
.feature::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.25) 58%,rgba(0,0,0,.1) 100%)}
.feature .inner{position:relative;z-index:1;padding:26px;display:flex;flex-direction:column;justify-content:flex-end;min-height:420px}
.feature h3{color:#fff;font-size:clamp(23px,2.5vw,33px);line-height:1.2;margin:.25em 0 .3em}
.feature p{color:#fff;opacity:.9;margin:0;font-size:14.5px}

/* ── category tiles ───────────────────────────────────────────────────── */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:20px}
.tile{position:relative;aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;
  text-decoration:none;background-size:cover;background-position:center;border-radius:2px;overflow:hidden}
.tile::after{content:"";position:absolute;inset:0;background:rgba(10,14,22,.46)}
.tile span{position:relative;z-index:1;color:#fff;font-family:'Open Sans', system-ui, sans-serif;font-weight:700;font-size:17px;text-align:center;padding:0 10px}
.tile::before{content:"";position:absolute;inset:14px;border:1px solid rgba(255,255,255,.6);z-index:1}
.tile:hover::after{background:rgba(10,14,22,.3)}

/* ── the author block ─────────────────────────────────────────────────── */
.author{display:grid;grid-template-columns:300px 1fr;gap:46px;align-items:center}
/* THE SIZE LIVES ON .portrait ITSELF, NOT ON ".author .portrait". The same
   element is reused on the author's own page, where there is no .author
   ancestor, so the rule did not match, the prose image rule took over and the
   headshot rendered at the full column width -- roughly 625px tall, filling
   the viewport. Nothing errored and the home page looked perfect, which is
   the whole shape of it: a class whose dimensions depend on where it sits is
   unsized the first time it sits somewhere new. Both axes are bound on the
   child, per the rule the footer logo and the service hero each taught.
   (No backticks in here -- this whole block is a template literal.) */
.portrait{width:300px;height:300px;border-radius:50%;object-fit:cover;border:3px solid var(--emphasis);display:block}
.portrait--sm{width:200px;height:200px}
.author .plate{width:300px;height:300px;border-radius:50%;border:3px solid var(--emphasis);justify-content:center}
.gold{color:var(--emphasis);font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin:0 0 14px}
.author h2{margin-bottom:.2em}

/* ── the manifesto band ───────────────────────────────────────────────── */
.band-cream{background:var(--cream)}
.manifesto{max-width:760px;margin:0 auto;text-align:center}
.manifesto .gold{margin-bottom:10px}
.manifesto h2{margin:0 0 12px}
.manifesto .body{color:var(--ink);font-size:17px}

/* ── footer columns ───────────────────────────────────────────────────── */
.footcols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;padding:48px 0 36px}
.footcols h3{font-size:15px;color:#fff;margin:0 0 12px}
.footcols p,.footcols li{color:var(--muted-on-dark);font-size:13.5px;margin:0 0 6px}
.footcols ul{list-style:none;padding:0;margin:0}
.footcols a{color:var(--muted-on-dark);text-decoration:none}
.footcols a:hover{color:#fff}
.footbar{border-top:1px solid rgba(255,255,255,.16);padding:16px 0;display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted-on-dark)}
.footbar nav{display:flex;gap:18px}

/* ── a plain prose page ───────────────────────────────────────────────── */
/* LEFT-ALIGNED, NOT CENTRED. .prose always sits under a .pagehead h1 that
   starts at the wrap's left edge, so "margin:0 auto" put the heading at one
   x-position and its own body text 230px to the right of it, with a wide
   empty gutter down the left of every standing page. */
.prose{max-width:720px;margin:0;padding:12px 0 20px}
.prose h2{font-size:24px;margin-top:1.6em}
.prose p,.prose li{max-width:68ch}

/* ── article rows ─────────────────────────────────────────────────────── */
.rows{display:flex;flex-direction:column;gap:0}
.row{display:grid;grid-template-columns:364px 1fr;gap:0;background:var(--surface);border-bottom:1px solid var(--line)}
.row .shot{width:100%;height:100%;min-height:214px;object-fit:cover}
.row .pad{padding:28px 32px}
.row h3{font-size:22px;margin:0 0 .4em}
.row p{margin:0 0 16px;color:var(--muted);max-width:72ch}
.row a.title{text-decoration:none;color:inherit}
.row a.title:hover h3{color:var(--accent)}

/* ── simple page heads, category and post pages ───────────────────────── */
.pagehead{padding:46px 0 10px}
.lede{color:var(--muted);font-size:18px;max-width:62ch}
.plate{display:flex;align-items:flex-end;padding:16px 20px;overflow:hidden}
.plate span{font-family:'Open Sans', system-ui, sans-serif;font-size:clamp(19px,2.6vw,30px);line-height:1;
  color:#fff;opacity:.3;letter-spacing:-.02em;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}

/* ── beacon: single column index ──────────────────────────────────────── */
.stack{padding:26px 0}
.entry{padding:26px 0;border-bottom:1px solid var(--line)}
.entry:last-child{border-bottom:0}
.entry h2{margin:.3em 0 .3em;font-size:clamp(22px,2.6vw,28px)}
.entry p{margin:0;color:var(--muted)}
.entry a{text-decoration:none;color:inherit}
.entry a:hover h2{color:var(--accent)}
.cards{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:2px;overflow:hidden}
.card .shot{aspect-ratio:16/9;width:100%;object-fit:cover}
.card .pad{padding:16px 18px 20px}
.card h3{margin:.45em 0 .35em;font-size:19px}
.card p{margin:0;color:var(--muted);font-size:14px}
.card a{text-decoration:none;display:block;color:inherit}
.card a:hover h3{color:var(--accent)}

article{padding:34px 0 10px}
article .shot{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:2px;margin:0 0 28px}
article .standfirst{font-size:20px;font-weight:700;max-width:58ch;margin:0 0 20px}
article p{max-width:68ch}
article ul{max-width:66ch}
.meta{color:var(--muted);font-size:12px;margin:0 0 10px;text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.faqs{margin:46px 0 0;padding:28px 0 0;border-top:2px solid var(--ink)}
.faqs h2{margin:0 0 10px;font-size:26px}
.faq{padding:16px 0;border-bottom:1px solid var(--line)}
.faq:last-child{border-bottom:0}
.faq h3{margin:0 0 5px;font-size:17px}
.faq p{margin:0;color:var(--muted)}

footer{padding:30px 0;font-size:13px}
.footband{background:var(--dark);color:#fff;margin-top:60px}
.footband .tag{display:block;margin-top:5px;color:var(--muted-on-dark)}

@media(max-width:1000px){.footcols{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.author{grid-template-columns:1fr;gap:22px;text-align:center;justify-items:center}
  .split{grid-template-columns:1fr}.row{grid-template-columns:1fr}
  .row .shot{min-height:200px}.topbar .wrap{flex-direction:column;align-items:flex-start;gap:12px}}
@media(max-width:560px){.wrap{padding:0 16px}.mini{grid-template-columns:96px 1fr}.mini .shot{width:96px;height:92px}}