:root{
  --max:1100px;
  --gap:1.25rem;
  --brand:#0a66c2;
  --ink:#fff;          /* primary text colour (white) */
  --muted:#bbb;        /* muted text on dark */
  --bg:#000;           /* site background (black) */
  --line:#222;         /* subtle divider on dark */

  /* Horizontal padding scales */
  --header-pad-x: clamp(1rem, 4vw, 2.25rem);
  --body-pad-x:   clamp(1.25rem, 5vw, 3rem); /* a touch more than header */
}

/* ===== Averta (self-hosted) ===== */
@font-face{
  font-family: "Averta";
  src: url("/assets/fonts/averta.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 900; /* if yours is not variable, change to 400 (or 700 for Bold) */
  font-display: swap;
}

/* Resets */
*{box-sizing:border-box}
html,body{margin:0}

/* Use Averta everywhere — single source of truth */
body{
  font: 16px/1.6 "Averta", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1, h2, h3{
  font-family: "Averta", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700;      /* if you only have Regular, add a Bold file or drop this */
  line-height: 1.2;
  margin: 1.2em 0 .5em;
  letter-spacing: -0.01em;
}

/* Optional: only applies if your file is variable */
@supports (font-variation-settings: normal){
  body{ font-variation-settings: "wght" 400; }
  h1, h2, h3{ font-variation-settings: "wght" 700; }
}

/* Sticky footer layout */
html, body { height: 100%; }
body{
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.site-main{ flex: 1 0 auto; }      /* main expands to push footer down */
.site-footer{ margin-top: auto; }  /* footer stays at the bottom */


/* Header */
.site-header{position:sticky;top:0;background:var(--bg);border-bottom:1px solid var(--line);z-index:20}
.header-inner{display:flex;align-items:center;gap:1rem;padding:.75rem 0}
/* extra horizontal padding so logo/nav don't touch edges on half-screen */
.site-header .container{padding-left:var(--header-pad-x);padding-right:var(--header-pad-x)}
.logo-img{height:clamp(36px, 3.8vw, 44px);width:auto;display:block} /* larger, responsive */
.site-nav{margin-left:auto;display:none}
.site-nav ul{list-style:none;display:flex;gap:1rem;margin:0;padding:0}
.site-nav a{color:var(--ink);text-decoration:none}
.site-nav a[aria-current="page"]{text-decoration:underline}
.nav-toggle{margin-left:auto;background:transparent;border:0;font-size:1.25rem;color:var(--ink)}
.mobile-menu{display:none;border-top:1px solid var(--line);background:var(--bg)}
.mobile-menu[data-open="true"]{display:block}
.mobile-menu ul{list-style:none;margin:0;padding:.5rem}
.mobile-menu a{display:block;padding:.5rem 0;color:var(--ink);text-decoration:none}
@media (min-width: 860px){
  .nav-toggle{display:none}
  .site-nav{display:block}
  .mobile-menu{display:none!important}
}

/* Centred page wrapper with generous side padding */
.container{
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--body-pad-x);
  padding-right: var(--body-pad-x);
}

/* Buttons */
.btn{display:inline-block;padding:.6rem 1rem;border-radius:.5rem;border:1px solid var(--line);text-decoration:none}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-outline{background:transparent;color:var(--ink)}

/* Hero */
.hero{position:relative}
.hero--split{padding:3rem 0}
.hero-inner{display:grid;gap:2rem;align-items:center}
.hero--split .hero-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.hero-copy h1{margin:.25rem 0 .5rem}
.hero-media img{max-width:100%;height:auto;border-radius:.75rem}

/* Hero – full-bleed background that truly covers */
.hero--fullbleed{
  position: relative;
  min-height: 320px;                    /* a touch taller; tweak to taste */
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center;
  margin-bottom: 2rem;                  /* creates gap before the grid */
}

/* Single overlay that covers the entire hero */
.hero--fullbleed::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.45));
  pointer-events: none;
}

/* Keep inner content stacked above the overlay */
.hero--fullbleed .hero-overlay{
  position: relative;
  padding: 3.5rem 0;                    /* your original vertical rhythm */
}

.hero--fullbleed h1,.hero--fullbleed .lead{color:#fff}

/* Posts */
.post-hero{padding:2rem 0 0}
.post-title{margin:.4rem 0}
.post-meta{color:var(--muted)}
.copy-link{color:var(--muted);text-decoration:none;border-bottom:1px dashed var(--muted)}
.copy-link[data-copied="true"]{color:#7fff7f;border-bottom-color:#7fff7f}
/* Post nav: grid ensures correct alignment with 1 or 2 buttons */
.post-nav{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:1rem;
  padding-block:1.5rem;
  margin-top:2rem;
}
.post-nav a[data-prev]{ justify-self:start; }
.post-nav a[data-next]{ justify-self:end;  }

/* Only when Next is the ONLY button, move it to the right column */
.post-nav a[data-next]:only-child{
  grid-column: 2 / 3;
  justify-self: end;
}

/* Footer */
.site-footer{
  border-top:1px solid var(--line);
  padding:1rem 0;
  margin-top:3rem;
}
.footer-text{
  margin:0;
  text-align:center;
}

/* Visually hidden utility (keeps semantics for screen readers) */
.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Card grid */
.cards{ display:grid; gap:1.5rem; }
.cards--grid{ grid-template-columns: 1fr; }
@media (min-width: 760px){
  .cards--grid{ grid-template-columns: repeat(2, 1fr); }
}

.card{
  background: transparent;
  border: 1px solid var(--line);
  border-radius: .75rem;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.card-media img{ width:100%; height: 220px; object-fit: cover; display:block; }
.card-placeholder{ width:100%; height:220px; background: #111; }

.card-body{ padding: 1rem 1rem 1.25rem; }
.card-title{ margin: .25rem 0 .5rem; }
.card-title a{ color: var(--ink); text-decoration: none; }
.card-title a:hover{ text-decoration: underline; }

.card-meta{
  display: inline-flex;            /* shrink-wrap the row */
  align-items: center;
  justify-content: flex-start;     /* force left alignment */
  flex-wrap: wrap;
  gap: .5rem;
  color: var(--muted);
  font-size: .92rem;
}

/* Prevent any child from flexing/stretching */
.card-meta > *{
  flex: 0 0 auto;
}

.card-avatar{ width:24px; height:24px; border-radius:50%; object-fit:cover; }
.card-desc{ color: #ccc; margin:.25rem 0 0; }

/* Pager */
.pager{ display:flex; justify-content:space-between; gap:1rem; padding:2rem 0; }

/* Centre images inside post content */
.prose img{
  display:block;
  max-width:100%;
  height:auto;
  margin-inline:auto;              /* centres the image */
  border-radius:.5rem;
  border:1px solid var(--line);
  background:#111;
}

.post-figure{ margin: 0 0 1rem 0; }
.post-figure img{ width:100%; }
.post-figure figcaption{ color:var(--muted); font-size:.9rem; text-align:center; margin-top:.5rem; }

/* If using {% img %} → <picture> */
.prose picture{
  display:block;
  margin-inline:auto;              /* centres the whole responsive picture */
  max-width: min(100%, var(--img-max, 900px));
}
.prose picture > img{ display:block; height:auto; }

/* Figures (Markdown or shortcode) */
.prose figure,
.post-figure{
  margin:1.25rem auto;             /* centre the block */
  text-align:center;               /* centres caption */
  max-width: min(100%, var(--img-max, 900px));
}
.post-figure img{ margin-inline:auto; }

/* Optional: utility for truly wide images when you want them */
.prose .wide{ max-width:none; width:100%; }

.chart svg{ width:100%; height:auto; background:transparent }
.chart text{ fill:var(--ink) }