/* Inter — bundled locally (SIL OFL 1.1). No third-party font calls. */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-var.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   OVERLAY — brand shell stylesheet
   Cream-dominant, raspberry ink, Inter. Per-stream accent cue only.
   The rendered issue HTML carries its own rich stream palette.
   ============================================================ */

:root {
    --rasp:        #451425;
    --rasp-deep:   #33101c;
    --cream:       #F0EDE8;
    --cream-raised:#F7F4EF;
    --cream-band:  #E7E2DA;
    --grey:        #9D9B96;
    --grey-line:   #D8D3CB;

    /* Stream accent — neutral by default, overridden per stream below */
    --stream-accent: var(--rasp);

    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

    --maxw: 1140px;
    --bar-skew: -29deg;        /* matches the locked bar slope: atan(500/900) */
    --radius: 4px;
}

/* Stream accent overrides — apply on body (tag/post pages) and on any scoped element */
body.tag-on-the-turf,     .tag-on-the-turf     { --stream-accent: #6B9AB5; }
body.tag-under-the-lights, .tag-under-the-lights { --stream-accent: #2BB892; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--cream);
    color: var(--rasp);
    font-family: var(--font);
    font-weight: 400;
    line-height: 1.6;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--rasp); text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
    font-weight: 600;
    letter-spacing: -0.05em;
    line-height: 1.1;
    margin: 0;
}

.site { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1 0 auto; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    background: var(--rasp);
    color: var(--cream);
    font-weight: 600;
    letter-spacing: -0.02em;
    padding: 0.6rem 1.25rem;
    border-radius: var(--radius);
    transition: background .18s ease, transform .18s ease;
}
.btn:hover { background: var(--rasp-deep); }
.btn-lg { padding: 0.85rem 2rem; font-size: 1.05rem; }
.btn-account { background: transparent; color: var(--rasp); border: 1.5px solid var(--rasp); }
.btn-account:hover { background: var(--rasp); color: var(--cream); }

/* ---------- Bar motif (the diagonal device, as a rule) ---------- */
.bar-rule {
    display: inline-block;
    width: 72px;
    height: 14px;
    background: var(--stream-accent);
    transform: skewX(var(--bar-skew));
    margin-top: 1rem;
}

/* ---------- Masthead ---------- */
.masthead {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(240, 237, 232, 0.92);
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--grey-line);
}
.masthead-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0.9rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}
.brand-wordmark { height: 44px; width: auto; display: block; }
.nav { display: flex; align-items: center; gap: 1.75rem; }
.nav-list {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-item a {
    font-weight: 500;
    color: var(--rasp);
    opacity: 0.78;
    transition: opacity .15s ease;
}
.nav-item a:hover, .nav-item.nav-current a { opacity: 1; }

/* ---------- Hero ---------- */
.hero {
    text-align: center;
    padding: 5.5rem 1.5rem 3.5rem;
}
.hero-wordmark { height: 96px; width: auto; margin: 0 auto 1.5rem; }
.hero-tagline {
    color: var(--grey);
    font-size: 1.2rem;
    max-width: 30ch;
    margin: 0 auto 2rem;
}

/* ---------- Stream tiles ---------- */
.streams {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 3.5rem 1.5rem 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
.stream-tile {
    position: relative;
    overflow: hidden;
    background: var(--cream-raised);
    border: 1px solid var(--grey-line);
    border-radius: var(--radius);
    padding: 2rem 1.75rem 1.75rem;
    transition: transform .2s ease, box-shadow .2s ease;
}
.stream-tile::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 6px;
    background: var(--stream-accent);
}
.stream-tile:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(69,20,37,0.10); }
.stream-tile-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--grey);
}
.stream-tile-title { font-size: 2rem; margin: 0.4rem 0 1.25rem; }
.stream-tile-go { font-weight: 600; color: var(--stream-accent); }

/* ---------- Proof stripe ---------- */
.proof-stripe {
    max-width: var(--maxw);
    margin: 3.5rem auto 0;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--grey-line);
    border: 1px solid var(--grey-line);
    border-radius: var(--radius);
    overflow: hidden;
}
.proof-cell {
    background: var(--rasp);
    color: var(--cream);
    padding: 1.5rem 1rem;
    text-align: center;
}
.proof-value { display: block; font-size: 1.9rem; font-weight: 700; letter-spacing: -0.04em; }
.proof-label {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--grey);
}

/* ---------- Section heads ---------- */
.section-head, .stream-hub-head, .page-header {
    max-width: var(--maxw);
    margin: 4rem auto 1.5rem;
    padding: 0 1.5rem;
}
.section-title { font-size: 1.75rem; }
.stream-hub { padding-top: 2.5rem; }
.stream-hub-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--grey);
}
.stream-hub-title { font-size: 2.75rem; margin: 0.3rem 0 0; }
.stream-hub-desc { color: var(--grey); max-width: 56ch; margin: 0.75rem 0 0; }

/* ---------- Issue grid + cards ---------- */
.issue-grid {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 1.5rem 3rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.issue-card {
    background: var(--cream-raised);
    border: 1px solid var(--grey-line);
    border-radius: var(--radius);
    transition: transform .18s ease, box-shadow .18s ease;
}
.issue-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(69,20,37,0.10); }
.issue-card-link { display: block; padding: 1.5rem; height: 100%; }
.issue-card-title { font-size: 1.3rem; margin: 0.75rem 0 0.5rem; }
.issue-card-excerpt { color: var(--grey); font-size: 0.95rem; margin: 0 0 1rem; }
.issue-card-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--grey);
    font-size: 0.82rem;
}

/* ---------- Stream chip ---------- */
.stream-chip {
    display: inline-block;
    background: var(--stream-accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.28rem 0.7rem;
    border-radius: 100px;
}
.lock {
    margin-left: auto;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rasp);
    opacity: 0.6;
}

/* ---------- Issue (post) ---------- */
.issue, .page {
    max-width: 760px;
    margin: 0 auto;
    padding: 3rem 1.5rem 4rem;
}
.issue-accent-rule {
    display: block;
    width: 100%;
    height: 6px;
    background: var(--stream-accent);
    margin-bottom: 2rem;
}
.issue-header { margin-bottom: 2rem; }
.issue-title { font-size: 2.6rem; margin: 1rem 0 0.75rem; }
.issue-meta { color: var(--grey); font-size: 0.9rem; display: flex; gap: 0.5rem; align-items: center; }
.issue-feature { margin: 0 0 2rem; border-radius: var(--radius); overflow: hidden; }

/* Base content typography (plain posts/pages; rendered issues bring their own) */
.gh-content > * { margin: 0 0 1.4rem; }
.gh-content h2 { font-size: 1.7rem; margin-top: 2.5rem; }
.gh-content h3 { font-size: 1.3rem; margin-top: 2rem; }
.gh-content a { color: var(--stream-accent); text-decoration: underline; text-underline-offset: 2px; }
.gh-content img { border-radius: var(--radius); }

/* ---------- Paywall ---------- */
.paywall {
    max-width: 620px;
    margin: 0 auto 4rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
}
.paywall .bar-rule { margin: 0 auto 1.5rem; }
.paywall-title { font-size: 1.9rem; }
.paywall-copy { color: var(--grey); margin: 0.75rem 0 1.75rem; }
.paywall-signin { color: var(--grey); font-size: 0.9rem; margin-top: 1.25rem; }
.paywall-signin a { color: var(--stream-accent); }

/* ---------- Pagination ---------- */
.pagination {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 1.5rem 4rem;
    text-align: center;
    color: var(--grey);
}

/* ---------- Footer ---------- */
.site-footer {
    flex-shrink: 0;
    background: var(--rasp);
    color: var(--cream);
    margin-top: 2.5rem;
}
.footer-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 1.75rem 1.5rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}
.footer-wordmark { height: 30px; width: auto; display: block; }
.footer-tagline { color: var(--grey); max-width: 46ch; margin: 0.5rem 0 0; font-size: 0.85rem; line-height: 1.45; }
.footer-nav { display: flex; flex-direction: row; align-items: center; gap: 0; }
.footer-nav a { color: var(--cream); opacity: 0.85; }
.footer-nav a:hover { opacity: 1; }
.footer-nav a + a::before { content: "|"; margin: 0 0.75rem; color: var(--cream); opacity: 0.35; }
.footer-base {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 1rem 1.5rem 1.5rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    border-top: 1px solid rgba(240,237,232,0.12);
    color: var(--grey);
    font-size: 0.8rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
    .issue-grid { grid-template-columns: repeat(2, 1fr); }
    .proof-stripe { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
    .streams { grid-template-columns: 1fr; }
    .issue-grid { grid-template-columns: 1fr; }
    .nav-list { display: none; }      /* simple mobile fallback; add a menu later */
    .hero { padding-top: 3.5rem; }
    .issue-title { font-size: 2rem; }
}

/* ---------- Koenig editor content widths (required by Ghost) ---------- */
.gh-content .kg-width-wide {
    position: relative;
    width: 85vw;
    max-width: 1040px;
    left: 50%;
    transform: translateX(-50%);
}
.gh-content .kg-width-full {
    position: relative;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 0;
}
.gh-content .kg-width-full img { border-radius: 0; width: 100%; }

/* ---------- Custom font support (defaults to locked Inter brand face) ---------- */
:root {
    --font-heading: var(--gh-font-heading, var(--font));
    --font-body:    var(--gh-font-body, var(--font));
}
body { font-family: var(--font-body); }
h1, h2, h3, .stream-tile-title, .proof-value { font-family: var(--font-heading); }

/* ===================================================================
   HOMEPAGE COVER (full-bleed photo + wordmark; toggle via @custom.cover_image)
   =================================================================== */
.cover{
  position:relative;
  width:100vw; margin-left:calc(50% - 50vw);
  min-height:min(72vh,620px);
  display:flex; align-items:center; justify-content:center;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  overflow:hidden;
}
.cover--mono   { background-image:url('../images/cover-mono.jpg'); }
.cover--colour { background-image:url('../images/cover-colour.jpg'); }
.cover-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(15,20,25,0.30) 0%,
    rgba(15,20,25,0.04) 22%,
    rgba(15,20,25,0.06) 52%,
    rgba(58,16,25,0.82) 100%);
}
.cover-inner{ position:relative; z-index:2; text-align:center; padding:64px 24px 56px; max-width:780px; }
.cover-wordmark{ height:clamp(84px, 12vw, 150px); width:auto; display:inline-block; filter:drop-shadow(0 6px 22px rgba(0,0,0,0.45)); }
.cover-tagline{
  margin:20px auto 0; max-width:520px;
  color:#F0EDE8; font-family:'Inter',-apple-system,sans-serif; font-weight:500;
  font-size:18px; line-height:1.5; letter-spacing:-0.01em;
  text-shadow:0 2px 10px rgba(0,0,0,0.5);
}
.cover .btn-on-cover{
  margin-top:26px; background:#F0EDE8; color:#451425; border:none; font-weight:600;
}
.cover .btn-on-cover:hover{ background:#fff; }

/* Homepage: masthead floats transparently over the cover, wordmark hidden (cover carries it) */
body.home-template .masthead{
  position:absolute; top:0; left:0; right:0; z-index:10;
  background:transparent; border-bottom:none; box-shadow:none;
}
.brand-wordmark--light{ display:none; }
body.home-template .masthead .brand-wordmark--dark{ display:none; }
body.home-template .masthead .brand-wordmark--light{ display:block; }
body.home-template .nav-list a{ color:#F0EDE8; text-shadow:0 1px 10px rgba(0,0,0,0.45); }
body.home-template .nav-list a:hover{ color:#fff; }
body.home-template .btn-subscribe,
body.home-template .btn-account{
  color:#F0EDE8; border-color:rgba(240,237,232,0.6); background:transparent;
  text-shadow:0 1px 10px rgba(0,0,0,0.45);
}

/* Colour cover: centred — the crop keeps the horse to the right of the wordmark */