:root{
      --bg:#000; --fg:#fff; --muted:#b8b8b8; --line:#1a1a1a; --accent:#649ae5;
    }
    /* Base */
    body {
      margin-top: 0;
      margin-left:20%;
      margin-right:20%;
      font-family: "Lexend", sans-serif;
      font-optical-sizing: auto;
      font-weight: 200;
      font-style: normal;
      line-height: 1.6;
      background: #000;
      color: #FFF;
    }
    /* Container with responsive side gutters */
    .wrap{max-width:var(--max); margin:0 auto; padding:0 6vw}
    @media (min-width:1200px){ .wrap{padding:0 0} }

    /* Top nav / logo */
    .topbar{display:flex; align-items:center; gap:.75rem; padding:20px 0; margin-top: 20%}
    .topbar img{width:42px; height:auto}
    .topbar a{color:var(--fg); text-decoration:none}
    .crumb{font-size:.95rem; color:var(--muted)}
    .crumb a{color:var(--muted)}
    .crumb a:hover{color:var(--fg); text-decoration:none}

    /* Header */
    header.article-header{padding:28px 0 10px}
    .eyebrow{font: 600 .9rem/1.2 "Lexend",sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
    h1.title{font-family:"Instrument Serif",serif; font-weight:400; font-size: clamp(2.4rem, 5vw, 4.5rem); line-height:1.08; margin:.35rem 0 .6rem}
    .subhead{font-size: clamp(1.05rem, 2.2vw, 1.3rem); color:#e7e7e7; max-width: 72ch}
    .meta{margin-top:.75rem; font-size:.95rem; color:var(--muted)}
    .meta .dot::before{content:"•"; margin:0 .5rem; color:#666}
    .tags{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.6rem}
    .tag{font-size:.8rem; padding:.15rem .5rem; border-radius:.4rem; background:#0e0e0e; border:1px solid var(--line)}
    .tag::before{content:"#"; opacity:.8; margin-right:.15rem}

    /* Hero */
    .hero{margin:22px 0 8px}
    .hero img{width:100%; height:auto; display:block; border-radius:8px}
    .caption{font-size:.9rem; color:var(--muted); margin-top:.4rem}

    /* Body */
    .article{padding: 14px 0 64px; font-size: clamp(.95rem, 1.2vw, 1.25rem)}
    .article p{margin: 0 0 1.1em}
    .article a{color:var(--fg); text-decoration: underline}
    .article h2, .article h3{font-family:"Instrument Serif",serif; font-weight:400; line-height:1.2; margin:1.6em 0 .5em}
    .article h2{font-size: clamp(1.6rem, 2.7vw, 2.2rem); border-bottom:1px solid var(--line); padding-bottom:.3rem}
    .article h3{font-size: clamp(1.3rem, 2.2vw, 1.6rem)}
    .article ul, .article ol{margin: .4em 0 1.1em 1.1em}
    .article li{margin:.3em 0}
    .article blockquote{
      margin:1.3em 0; padding: .6em 1em; border-left:3px solid var(--accent); background:#0b0b0b; color:#eaeaea; border-radius:6px
    }
    .pull{
      margin: 1.4em 0; padding: .9em 1.1em; border:1px solid var(--line); border-radius:8px; background:#090909;
      font-family:"Instrument Serif",serif; font-size: clamp(1.3rem, 2.4vw, 1.8rem); line-height:1.35
    }
    .figure{margin:1.4em 0; text-align:center}
    .figure img{max-width:100%; height:auto; border-radius:8px}
    .figure figcaption{font-size:.9rem; color:var(--muted); margin-top:.4rem}

    /* Footer nav */
    .footnav{border-top:1px solid var(--line); padding:18px 0 64px; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap}
    .footnav a{color:var(--muted)}
    .footnav a:hover{color:var(--fg); text-decoration:none}

    /* Code / pre (optional) */
    pre, code{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size:.95em}
    pre{background:#0b0b0b; border:1px solid var(--line); border-radius:8px; padding:1em; overflow:auto}
    code{background:#0b0b0b; border:1px solid var(--line); border-radius:.35rem; padding:.1rem .35rem}

    /* Small screens */
    @media (max-width:640px){
      .topbar img{width:38px}
      .meta .dot::before{margin:0 .35rem}
 
      h1 {
        font-size: 2.2rem !important;
      }
      h1 {
      line-height:3rem !important;
      }
      header.site-header p {
        font-size: 1rem !important;      }
      body {
       margin-left:10%;
      margin-right:10%;
      }
      .meta {
        font-size:.8rem;
        }
        h2 {
        font-size:1.6rem;

      }
    }

    .embed-full {
    position: relative;
    width: 100%;         /* take full viewport width */
    padding-bottom: 56.25%; /* 16:9 ratio */
    margin-top: 2rem;
    margin-bottom: 2rem;
    background: #111;
  }
  .embed-full iframe {
    position: absolute;
    top:0; left:0;
    width:100%; height:100%;
    border:0;
  }
  h1, h2, h3, h4, h5, h6 {
      font-family: "Instrument Serif", serif;
      font-weight: 400;
      margin: 0;

    }

    h1 {
      line-height:6rem;
      }

      h2 {
        font-size:3rem;

      }
   /* Header (Intro Section) */
    header.site-header {
      padding: 2rem 1rem;
      text-align: center;
      background: #000;  /* light gray background to distinguish header */
    }
    header.site-header h1 {
      font-size: 6rem;
      margin-bottom: 0.5rem;
    }
    header.site-header p {
      font-size: 1.2rem;
      color: #fff;
      max-width: 600px;
      margin: 0.5rem auto 0;
    }

    /* Two media blocks side-by-side inside article content */
.media-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;        /* space between the two items */
  align-items: start;
  margin: 1.5rem 0;    /* breathing room above/below the pair */
}

/* Remove the default .hero margins inside the pair */
.media-pair .hero { margin: 0; }

/* Ensure images scale cleanly inside the pair */
.media-pair img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;  /* matches your existing style */
}

/* Stack on small screens */
@media (max-width: 900px) {
  .media-pair {
    grid-template-columns: 1fr;
  }
}

/* === Narrow text (45% of full width), full-width media === */
.article {
  --text-max: 45vw;                 /* 45% of the entire viewport width */
}

/* Narrow all non-media direct children of .article */
.article > *:not(.hero):not(.figure):not(.embed-full):not(.media-pair) {
  max-width: var(--text-max);
  margin-left: auto;
  margin-right: auto;               /* center the narrower text column */
}

/* Also narrow headings even if nested */
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
  max-width: var(--text-max);
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;               /* nicer multi-line breaks (modern browsers) */
}

/* Keep code/pre aligned with the text width */
.article pre {
  max-width: var(--text-max);
  margin-left: auto;
  margin-right: auto;
}

/* Mobile: let text be full width for readability */
@media (max-width: 900px) {
  .article { --text-max: 100%; }
}

/* Make embeds match main content width */
.article .embed-full {
  max-width: var(--text-max);  /* uses the 45vw value already defined on .article */
  margin-left: auto;
  margin-right: auto;
}

/* Tighten Vimeo embeds: no top/bottom bands, no extra spacing */
.embed-full {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  background: transparent !important; /* remove dark strip above/below */
}

/* When embeds are inside a two-up grid, let the grid gap control spacing */
.media-pair .embed-full {
  margin: 0 !important;
}

/* Remove vertical space around single embeds */
.article .embed-full {
  margin-block: 0;              /* no top/bottom margin on the wrapper */
  background: transparent;      /* no background band */
}

/* If a text block or figure is immediately before an embed, drop its bottom margin */
.article p:has(+ .embed-full),
.article ul:has(+ .embed-full),
.article ol:has(+ .embed-full),
.article .figure:has(+ .embed-full) {
  margin-bottom: 0;
}

/* If a block follows an embed, drop its top margin */
.article .embed-full + h2,
.article .embed-full + h3,
.article .embed-full + p,
.article .embed-full + ul,
.article .embed-full + ol,
.article .embed-full + .figure,
.article .embed-full + .hero {
  margin-top: 0;
}