:root {
    --teal: #49737a;
    --blue: #0058e6;
    --blue-hover: #0048bd;
    --ink: #181d23;
    --ink-2: #575a5f;
    --muted: #96989b;
    --paper: #fff;
    --border: #eaeaeb;
  }
  * { box-sizing: border-box; }
  /* Body 400, not 300: Open Sans Light for running paragraph text on
     white costs real legibility. 300 is kept only for the lede line. */
  body { margin: 0; font-family: "Open Sans", sans-serif; font-weight: 400; color: var(--ink-2); background: var(--teal); line-height: 1.7; }
  /* Mulish's thin weights fail at SMALL sizes, not display sizes -- so
     weight goes up most on the small pillar titles (700) and least on
     the big hero (600). The quote band deliberately stays at 200: huge
     ExtraLight on a dark ground is the most distinctive thing on the
     page, and a meme line set in Bold reads as trying too hard.
     Negative letter-spacing is required once Mulish gets heavier at
     display size, or it sets loose and looks like a different face. */
  h1, h2, h3, h4, h5 { font-family: "Mulish", sans-serif; color: var(--ink); line-height: 1.2; }
  h1 { font-weight: 600; font-size: clamp(2.1rem, 5vw, 3.4rem); letter-spacing: -0.02em; line-height: 1.1; }
  h2 { font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.1rem); letter-spacing: -0.01em; }
  a { color: var(--blue); }
  a:hover { color: var(--blue-hover); }
  /* #0058e6 on #49737a is ~1.1:1 -- effectively invisible. Any link on
     a teal/dark ground must be white, never brand blue. (Brand blue on
     white is ~5.9:1 and stays as-is for body links.) */
  .quote-band a, .hero-image a { color: #fff; }
  /* One shared text measure: midway between the old homepage width
     (1180px) and the old article width (760px). Padding matches
     .article-page's so the text column is identical on both. */
  .stage { max-width: 970px; margin: 0 auto; padding: 0 24px; }
  /* Full-bleed sections opt out of the text measure and run to the
     container edge instead. */
  .band.pillars-band .stage, .stage.wide { max-width: 1200px; }
  /* "Boxed" layout: the whole site sits in a centered, max-width column
     with the teal body background showing on either side. On a phone
     the viewport is already narrower than max-width, so this is
     automatically full-bleed there -- no separate breakpoint needed. On
     a very wide monitor the teal margins just grow proportionally. */
  /* Boxed container. px, not rem: no root font-size is declared, so rem
     resolves against the browser's 16px default -- the earlier rem values
     were wider than intended. */
  .site-surface { background: var(--paper); max-width: 1200px; margin: 0 auto; box-shadow: 0 0 40px rgba(0,0,0,0.15); }

  header.site-header { background: var(--paper); border-bottom: 1px solid var(--border); }
  .nav-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; max-width: 1180px; margin: 0 auto; padding-left: 24px; padding-right: 24px; position: relative; }
  .site-branding { display: flex; align-items: center; gap: 12px; text-decoration: none; }
  .site-branding img { width: 40px; height: 40px; }
  /* line-height was the inherited body value (1.7) on both lines, which
     is what made the tagline look like it "sits under" the logo with a
     big gap rather than sitting close beneath the title -- margin was
     already 0, the gap was pure line-height. */
  .site-branding-text .site-title { font-family: "Mulish", sans-serif; font-weight: 200; font-size: 1.4em; line-height: 1.15; color: var(--ink); margin: 0; }
  .site-branding-text .site-description { font-size: 0.75em; line-height: 1.2; color: var(--muted); margin: 0; }
  .nav-toggle { display: none; flex-direction: column; gap: 4px; background: none; border: 0; cursor: pointer; padding: 8px; }
  .nav-toggle span { width: 22px; height: 2px; background: var(--teal); }
  nav.main-nav > ul { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; align-items: center; }
  nav.main-nav > ul > li > a { text-decoration: none; color: var(--ink-2); font-size: 0.95em; }
  nav.main-nav > ul > li > a:hover { color: var(--teal); }
  .has-dropdown { position: relative; }
  .dropdown-toggle { background: none; border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 0.9em; cursor: pointer; color: var(--ink-2); }
  .dropdown-toggle:hover { border-color: var(--teal); color: var(--teal); }
  .dropdown-menu { display: none; position: absolute; right: 0; top: 100%; margin-top: 8px; background: var(--paper); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); list-style: none; padding: 6px; min-width: 190px; z-index: 20; }
  .dropdown-menu li a { display: block; padding: 8px 12px; border-radius: 6px; text-decoration: none; color: var(--ink-2); }
  .dropdown-menu li a:hover { background: #f3f4f4; color: var(--teal); }
  .has-dropdown.open .dropdown-menu { display: block; }

  /* The real live site never overlays text on the hero photo -- the
     image and the heading are two separate, stacked blocks (confirmed
     from the source: a sow-hero widget followed by a sibling
     sow-headline widget, not one on top of the other). That's also
     the actual fix for "looks bad on phone": no contrast to manage,
     no text fighting the image for room at any width. */
  .hero-image {
    /* Desktop hero: 3/1 -> 5/1 -> 8.33/1 (two 40% cuts) -> 6.94/1
       (+20% back). Portrait/landscape overrides below still apply on
       phones/tablets and are deliberately untouched by those changes. */
    aspect-ratio: 6.94 / 1;
    background: var(--ink) url('/assets/img/MIREC3.png') center/cover no-repeat;
  }
  /* Real device rotation, not just viewport width -- 10% taller in
     portrait (height/3 * 1.10 => ~2.7/1), 20% shorter in landscape
     (height/3 * 0.80 => 3.75/1). Landscape rule is width-guarded so it
     only affects phones/tablets rotated sideways, not desktop monitors
     (which are always "landscape" but were never part of this ask). */
  @media (orientation: portrait) {
    .hero-image { aspect-ratio: 2.7 / 1; }
  }
  @media (orientation: landscape) and (max-width: 1024px) {
    .hero-image { aspect-ratio: 3.75 / 1; }
  }
  .hero-text { max-width: 720px; padding: 48px 24px; margin: 0 auto; text-align: center; }
  .hero-text h1 { margin: 0; }
  .hero-divider { width: 70px; height: 2px; background: var(--border); margin: 24px auto; }
  .hero-text p.lead { font-size: 1.1em; font-weight: 300; color: var(--ink-2); margin: 0; }

  section.band { padding: 60px 0; }
  .band h2 { margin-top: 0; }
  /* Tinted C3 (the dense definitional block) rather than the pillars:
     dark quote -> tint -> white pillars -> footer means the page opens
     up at the payoff instead of fading out into a wash right before
     the footer. ~4% teal over white, not a neutral gray. */
  section.band.tinted { background: #f4f7f7; }
  section.band.pillars-band { padding: 96px 0; }
  .lead-line { font-size: 1.1em; font-weight: 300; color: var(--ink); }

  /* No background-attachment:fixed -- it's unreliable on iOS Safari at
     any width (not just narrow ones: it broke on iPhone 15 Pro in
     landscape too, well above the old 760px breakpoint that only
     "fixed" the portrait case). Plain scrolling background, height
     bounded by padding + max-height rather than however a browser
     wants to render a fixed/parallax background. */
  /* Scrim tinted toward #2f4c50 rather than flat ink, so the nav teal,
     hero teal and quote band aren't all the same value -- gives the
     page depth and buys back contrast headroom for the white text. */
  .quote-band { background: #2f4c50; background-image: linear-gradient(rgba(28,44,47,.78), rgba(28,44,47,.78)), url('/assets/img/MIRE-Server-BW.png'); background-position: center; background-size: cover; padding: 156px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
  /* Deliberately stays ExtraLight (200) -- deadpan beats Bold for a
     meme line, and it's the one place Mulish's thin weight earns its
     keep. Overrides the h2 rule above on purpose. */
  .quote-band h2 { color: #fff; font-weight: 200; font-size: clamp(1.7rem, 6vw, 3rem); letter-spacing: -0.01em; line-height: 1.25; margin: 0; }
  .quote-kicker { color: rgba(255,255,255,.6); font-size: .85em; margin: 14px 0 0; }

  .c3-list { list-style: none; margin: 0 0 20px; padding: 0; }
  .c3-list li { padding: 6px 0 6px 28px; position: relative; }
  .c3-list li::before { content: "\2022"; position: absolute; left: 6px; color: var(--teal); font-weight: 700; }
  .c3-list b { color: var(--ink); }

  .pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 30px; margin-top: 10px; text-align: center; }
  /* Pillars get their separation from texture (teal icons + teal
     headings + generous air), not from a background tint -- the tint
     goes on the C3 section instead so the page doesn't fade out right
     at the payoff. */
  .pillar .material-icons { font-size: 40px; color: var(--teal); }
  .pillar h5 { font-weight: 700; font-size: 1.25rem; letter-spacing: 0; color: var(--teal); margin: 12px 0 10px; }
  .pillar p { text-align: left; font-size: 0.95em; }

  footer.site-footer { background: var(--paper); border-top: 1px solid var(--border); padding: 20px 0; }
  .footer-links { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; max-width: 1180px; margin: 0 auto; padding: 0 24px; font-size: .85em; color: var(--muted); }
  .foot-copy { grid-column: 2; justify-self: center; }
  .build-tag { grid-column: 3; justify-self: end; }
  .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

  @media (max-width: 760px) {
    .nav-toggle { display: flex; }
    nav.main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--border); padding: 12px 24px; }
    nav.main-nav.open { display: block; }
    nav.main-nav > ul { flex-direction: column; align-items: flex-start; gap: 14px; }
    .dropdown-menu { position: static; margin-top: 8px; box-shadow: none; }
    .hero-text { padding: 32px 20px; }
    .quote-band { padding: 108px 20px; }
  }

/* --- Blog + embed pages (generated by build.py) --- */
.embed-wrap { margin: 0 0 44px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--paper); }
.embed-wrap iframe { display: block; width: 100%; border: 0; }

/* Tiled cards, following toce's article grid: auto-fit columns so it
   goes 3-up on desktop, 2-up on a tablet and 1-up on a phone without
   separate breakpoints for each. */
.post-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.6em; }
.post-card {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.post-card:hover { border-color: var(--teal); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.post-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #f4f7f7; }
.post-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.post-card-text { padding: 1.1em 1.2em 1.3em; display: flex; flex-direction: column; flex: 1; }
.post-card h2 { font-size: 1.05rem; margin: .35em 0 .5em; }
.post-excerpt { font-size: .88rem; margin: 0 0 1em; }
.post-card .read-more { margin-top: auto; font-size: .85rem; }
.post-card h2, .post-card h3 { margin: 4px 0 8px; }
.post-card h2 a, .post-card h3 a { color: var(--ink); text-decoration: none; }
.post-card h2 a:hover, .post-card h3 a:hover { color: var(--teal); }
.post-date { font-size: .8em; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0; }
.post-excerpt { margin: 0 0 10px; }
.read-more { font-weight: 400; text-decoration: none; }
.read-more:hover { text-decoration: underline; }

/* Article pages follow toce's layout: a narrow measure, a back-link pill
   row above the body, and figure-wrapped images. Colours are MIRE's. */
.article-page { max-width: 970px; margin: 0 auto; padding: 2.5em 24px 4em; }
/* Back-link left, like pill right. space-between rather than a margin
   on the button, so it stays right-justified if more actions are added
   on either side later. */
.article-actions { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 1.8em; }
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 14px; font-size: .85em; text-decoration: none;
  color: var(--ink-2); background: var(--paper);
}
.pill:hover { border-color: var(--teal); color: var(--teal); }
.article-body { font-size: 1rem; }
.article-body p { margin: 0 0 1.2em; }
.article-body h2 { font-size: 1.35rem; margin: 1.8em 0 .7em; }
.article-body h3 { font-size: 1.1rem; margin: 1.6em 0 .6em; }
.article-body h4 { font-size: 1rem; margin: 1.4em 0 .5em; }
.article-body a { color: var(--blue); }
.article-body ul, .article-body ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.article-body li { margin-bottom: .4em; }
.article-body blockquote { margin: 1.4em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--teal); color: var(--ink); }
.article-body pre { overflow-x: auto; background: #f4f7f7; padding: 16px; border-radius: 6px; font-size: .85em; }
.article-body code { background: #f4f7f7; padding: 1px 5px; border-radius: 3px; font-size: .9em; }
.article-body pre code { background: none; padding: 0; }
.article-body table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: .92em; display: block; overflow-x: auto; }
.article-body th, .article-body td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; }
.article-body th { background: #f4f7f7; font-weight: 600; }
.article-body figure { margin: 1.8em 0; text-align: center; }
.article-body figure img { max-width: 100%; height: auto; border-radius: 6px; display: inline-block; }
.article-body figcaption { font-size: .85em; color: var(--muted); margin-top: 6px; }
.article-body img { display: block; max-width: min(100%, 620px); height: auto; margin: 1.6em auto; border-radius: 6px; }
.article-body figure.post-lead-image img { max-width: min(100%, 720px); }
.hero-bottom { margin-top: 14px; }
.hero-bottom .article-date { font-size: .8em; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

/* Doom-scroll sentinel on the blog index */
.sentinel { grid-column: 1 / -1; text-align: center; padding: 1.6em 0; color: var(--muted); font-size: .85em; }

/* ---- contact form ---- */
.contact-preview { background: #f4f7f7; border: 1px solid var(--border); border-radius: 8px; padding: 1.8em; }
/* The card's visible width and its readable text width are two different
   numbers: the card fills the measure, the inner column stays narrow. */
.contact-preview-inner { max-width: 640px; margin: 0 auto; }
#contact-form { display: flex; flex-direction: column; }
#contact-form label { font-size: .85em; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
#contact-form input, #contact-form textarea {
  font: inherit; font-size: .95em; color: var(--ink);
  background: var(--paper); border: 1px solid var(--border); border-radius: 6px;
  padding: 10px 12px; margin: 0 0 1.1em; width: 100%;
}
#contact-form input:focus, #contact-form textarea:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
#contact-form textarea { min-height: 160px; resize: vertical; }
#contact-form button[type="submit"] {
  font: inherit; font-weight: 600; cursor: pointer;
  background: var(--teal); color: #fff; border: 0; border-radius: 999px;
  padding: 11px 26px; align-self: flex-start;
}
#contact-form button[type="submit"]:hover { background: var(--teal-dark, #3b5f65); }
#contact-form button[type="submit"][disabled] { opacity: .6; cursor: default; }
.cf-turnstile { margin: 0 0 1.1em; }
/* Honeypot: off-screen rather than display:none, since some bots skip
   hidden fields but not positioned ones. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#contact-status { margin: 1em 0 0; font-size: .92em; color: var(--ink); }
.note { font-size: .88em; color: var(--muted); }

/* ---- like button ---- */
.like-btn { cursor: pointer; font: inherit; }
.like-btn .like-icon { filter: grayscale(1) brightness(1.3); transition: filter .15s ease; }
.like-btn .like-count { color: var(--teal); font-weight: 700; }
.like-btn.already { border-color: var(--teal); color: var(--teal); }
.like-btn.already .like-icon { filter: none; }