/* ─────────────────────────────────────────────────────────────
   747 Mastering Studio — site styles
   Palette from the 747 business card, dark ground.
   ───────────────────────────────────────────────────────────── */

:root {
  --ground:      #171A20;
  --ground-sunk: #1E222A;
  --ground-lift: #232830;
  --ink:         #EAF1EE;
  --ink-soft:    #C9D4D1;
  --muted:       #8D96A1;
  --rule:        #2E353F;
  --sage:        #4A6660;
  --bronze:      #C79A5C;
  --slot-line:   #3A434E;
  --bar:         #0E1116;

  --measure: 44rem;
  --wide:    68rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

html, body { background: var(--ground); }

body {
  margin: 0;
  color: var(--ink);
  background: var(--ground);
  /* Instrument Sans has the same x-height as Questrial, so the size and
     leading below are unchanged and body text sits exactly where it did.
     Its capitals are taller, which is why headings read stronger. It also
     has a real italic, which Questrial never had: every <em> on the site
     used to be a faux slant. */
  font-family: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video, iframe { max-width: 100%; }

a {
  color: var(--bronze);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .2s ease;
}
a:hover { color: var(--ink); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--bronze); color: var(--bar);
  padding: .6rem 1rem; z-index: 100;
}
.skip:focus { left: .5rem; top: .5rem; }

/* ── Utility type ───────────────────────────────────────────── */

.mono {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

.eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

.hairline { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* ── Header ─────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bar);
  border-bottom: 1px solid var(--rule);
}

.site-header .bar {
  max-width: var(--wide);
  margin: 0 auto;
  padding: .55rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.social {
  display: flex;
  align-items: center;
  gap: .85rem;
}

.social a {
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  color: var(--muted);
  transition: color .2s ease;
}
.social a:hover { color: var(--bronze); }
.social svg { width: 1.35rem; height: 1.35rem; display: block; fill: currentColor; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.site-nav a {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  padding: .3rem 0;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] {
  color: var(--bronze);
  border-bottom-color: var(--bronze);
}

/* language switcher */
.lang {
  display: flex;
  align-items: center;
  gap: .55rem;
}
.lang a {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .66rem;
  letter-spacing: .12em;
  text-decoration: none;
  color: var(--muted);
  padding: .2rem .35rem;
  border: 1px solid transparent;
  border-radius: 2px;
}
.lang a:hover { color: var(--ink); border-color: var(--rule); }
.lang a.on {
  color: var(--bronze);
  border-color: var(--slot-line);
}

@media (max-width: 900px) {
  .site-header .bar { justify-content: center; }
}

@media (max-width: 560px) {
  .site-header .bar { justify-content: center; padding: .5rem 1rem .35rem; }
  .site-nav { gap: 1rem; justify-content: center; }
  .site-nav a { font-size: .66rem; letter-spacing: .12em; }
  .lang { gap: .35rem; }
}

/* ── Page shell ─────────────────────────────────────────────── */

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 3.5rem 1.5rem 4.5rem;
  display: flex;
  flex-direction: column;
  gap: 3.25rem;
}

.wrap--wide { max-width: var(--wide); }

.masthead { display: flex; flex-direction: column; gap: 1.1rem; }

h1 {
  font-size: clamp(3rem, 10vw, 5.5rem);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}

/* The About page opens in the first person, so the greeting is set well below
   a section title: about 27% down at the top of the scale, 30% at the bottom. */
h1.h1--intro {
  font-size: clamp(2.1rem, 7vw, 4rem);
}

h2 {
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}

.standfirst {
  font-size: 1.19rem;
  color: var(--ink-soft);
  margin: 0;
  max-width: 34rem;
  text-wrap: pretty;
}

p { margin: 0; text-wrap: pretty; }
p + p { margin-top: .85rem; }

em { font-style: italic; color: var(--ink-soft); }

/* ── Hero (home) ────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: min(78vh, 640px);
  display: grid;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-media video,
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.75) contrast(1.02);
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(23,26,32,.94) 0%, rgba(23,26,32,.72) 46%, rgba(23,26,32,.42) 100%),
    linear-gradient(to bottom, rgba(23,26,32,.55), rgba(23,26,32,.85));
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--wide);
  width: 100%;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 2rem;
}

.wordmark {
  font-size: clamp(3.4rem, 12vw, 8rem);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.03em;
  margin: 0;
  max-width: 12ch;
}

.hero-sub {
  margin-top: 1.4rem;
  max-width: 30rem;
  color: var(--ink-soft);
  font-size: 1.1rem;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }

/* ── Promise bar (four columns) ─────────────────────────────── */

.promise {
  background: var(--ground-sunk);
  border-bottom: 1px solid var(--rule);
}

.promise-grid {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.promise-grid > div {
  padding: 1.75rem 1.5rem 1.75rem 0;
  border-right: 1px solid var(--rule);
  font-size: 1.02rem;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.promise-grid > div:first-child { padding-left: 0; }
.promise-grid > div + div { padding-left: 1.5rem; }
.promise-grid > div:last-child { border-right: 0; }

@media (max-width: 860px) {
  .promise-grid { grid-template-columns: repeat(2, 1fr); }
  .promise-grid > div:nth-child(2n) { border-right: 0; }
  .promise-grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
}
@media (max-width: 480px) {
  .promise-grid { grid-template-columns: 1fr; }
  .promise-grid > div { border-right: 0; padding-left: 0 !important; }
  .promise-grid > div:not(:last-child) { border-bottom: 1px solid var(--rule); }
}

/* ── Sections ───────────────────────────────────────────────── */

.section {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.section--tight { padding-top: 3rem; padding-bottom: 3rem; }

.section-head { display: flex; flex-direction: column; gap: .6rem; }

/* ── SoundCloud playlist ────────────────────────────────────── */

.playlist {
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
  background: var(--ground-sunk);
  line-height: 0;
}
.playlist iframe { width: 100%; height: 470px; border: 0; display: block; }

/* SoundCloud ships a light widget and offers no dark theme, so the whole
   frame is inverted to sit on the dark ground. Hue-rotate puts the colours
   back the right way round. Known side effect: artwork renders as negatives. */
.playlist iframe { filter: invert(1) hue-rotate(180deg); }

@media (max-width: 560px) { .playlist iframe { height: 420px; } }

/* ── Services ───────────────────────────────────────────────── */

.checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.checks li {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  color: var(--ink-soft);
  font-size: 1.02rem;
}
.checks li::before {
  content: "✓";
  color: var(--bronze);
  flex: 0 0 auto;
  line-height: 1.6;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.cards--four { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.cards--four .card { padding: 1.5rem 1.3rem; }
.cards--four .card h3 { font-size: 1.18rem; }
.cards--four .card p { font-size: .94rem; }

@media (max-width: 1060px) { .cards--four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px)  { .cards { grid-template-columns: 1fr; } }
@media (max-width: 560px)  { .cards--four { grid-template-columns: 1fr; } }

.card {
  background: var(--ground-sunk);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1.75rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.card h3 {
  font-size: 1.3rem;
  font-weight: 400;
  margin: 0;
  letter-spacing: -.01em;
}

.card p { font-size: .98rem; color: var(--ink-soft); }

.card .price {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 1.15rem;
  color: var(--bronze);
  margin-top: auto;
  padding-top: .6rem;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

.card .note {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.vat {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Buttons ────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bar);
  background: var(--ink);
  border: 1px solid var(--ink);
  padding: .85rem 1.6rem;
  border-radius: 2px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { background: var(--bronze); border-color: var(--bronze); color: var(--bar); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--slot-line);
}
.btn--ghost:hover { background: transparent; border-color: var(--bronze); color: var(--bronze); }

.btn--block { display: block; width: 100%; text-align: center; }

/* ── Case studies (Work) ────────────────────────────────────── */

.cases { display: flex; flex-direction: column; gap: 3rem; }
.case { display: flex; flex-direction: column; gap: .9rem; }
.case + .case { border-top: 1px solid var(--rule); padding-top: 3rem; }

.case h2 { font-size: 1.85rem; }

.project {
  display: block;
  font-size: 1.02rem;
  color: var(--muted);
  margin-top: .3rem;
}

.credit {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .74rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--bronze);
  margin: .35rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .1rem .55rem;
}
.credit .sep { color: var(--slot-line); }

/* ── Players ────────────────────────────────────────────────── */

.media { display: flex; flex-direction: column; gap: .95rem; margin-top: .8rem; }

.player-label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .4rem;
}

.sc-frame {
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
  background: var(--ground-sunk);
  line-height: 0;
}
.sc-frame iframe { width: 100%; height: 166px; border: 0; display: block; }

.yt {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
  background: #0B0D11;
  padding: 0;
  cursor: pointer;
  display: block;
}
.yt img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  opacity: .72;
  transition: opacity .25s ease, transform .5s ease;
}
.yt:hover img, .yt:focus-visible img { opacity: 1; transform: scale(1.015); }

.yt .play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 4rem; height: 4rem;
  border-radius: 50%;
  background: rgba(14,17,22,.66);
  border: 1px solid rgba(234,241,238,.45);
  display: grid; place-items: center;
  transition: background .25s ease, border-color .25s ease;
}
.yt:hover .play { background: var(--bronze); border-color: var(--bronze); }
.yt .play svg { width: 1.1rem; height: 1.1rem; margin-left: .18rem; fill: var(--ink); }
.yt:hover .play svg { fill: var(--bar); }

.yt .cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: .7rem .9rem;
  background: linear-gradient(to top, rgba(11,13,17,.9), rgba(11,13,17,0));
  color: var(--ink);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: left;
}

.yt iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ── Journal — long-form articles ───────────────────────────── */

.posts { display: flex; flex-direction: column; gap: 5.5rem; }

.post {
  border-top: 1px solid var(--rule);
  padding-top: 2.4rem;
}
.post:first-child { border-top: 0; padding-top: 0; }

.post-hero {
  margin: 0 0 2rem;
  overflow: hidden;
  border-radius: 2px;
  background: var(--ground-sunk);
}
.post-hero figcaption {
  margin: .6rem 0 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.post-hero figcaption a { color: var(--muted); text-decoration-color: var(--slot-line); }
.post-hero figcaption a:hover { color: var(--bronze); }

.post-hero img {
  display: block;
  width: 100%;
  height: clamp(200px, 34vw, 380px);
  object-fit: cover;
  filter: saturate(.88) contrast(1.02);
}

.post-body { max-width: var(--measure); }

.kicker {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bronze);
  margin: 0 0 .9rem;
}
.kicker .dot, .crosspost .dot { margin: 0 .55rem; color: var(--slot-line); }

.post h2 {
  font-size: clamp(1.9rem, 4.4vw, 2.7rem);
  line-height: 1.14;
  font-weight: 400;
  letter-spacing: -.02em;
  margin: 0 0 .7rem;
  text-wrap: balance;
}

.post .standfirst {
  font-size: 1.16rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 2rem;
  max-width: 34rem;
}

.post .teaser, .post .rest { font-size: 1.06rem; line-height: 1.78; }
.post .teaser p, .post .rest p { margin: 0 0 1.35rem; color: var(--ink-soft); }
.post .teaser > p:first-child::first-letter {
  float: left;
  font-size: 3.3rem;
  line-height: .84;
  padding: .1rem .55rem 0 0;
  color: var(--bronze);
}

.post .rest h3 {
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 2.6rem 0 .9rem;
}
.post .rest h4 {
  font-size: 1.02rem;
  font-weight: 400;
  letter-spacing: .01em;
  color: var(--bronze);
  margin: 1.9rem 0 .6rem;
}
.post .rest ul { margin: 0 0 1.35rem; padding-left: 1.1rem; }
.post .rest li { margin: 0 0 .5rem; color: var(--ink-soft); }
.post .rest li::marker { color: var(--sage); }

.post blockquote {
  margin: 2rem 0;
  padding: 0 0 0 1.4rem;
  border-left: 2px solid var(--bronze);
}
.post blockquote p {
  font-size: 1.28rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  font-style: italic;
}

/* The fold */
.post details { margin-top: -.4rem; }
.post details > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bronze);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: .7rem 1.15rem;
  transition: border-color .2s ease, background .2s ease;
}
.post details > summary::-webkit-details-marker { display: none; }
.post details > summary:hover { border-color: var(--bronze); background: rgba(199,154,92,.07); }
.post details > summary::after { content: "\2193"; font-size: .9rem; letter-spacing: 0; }
.post details[open] > summary::after { content: "\2191"; }
.post details > summary .less { display: none; }
.post details[open] > summary .more { display: none; }
.post details[open] > summary .less { display: inline; }
.post details[open] > summary { margin-bottom: 1.8rem; }

/* Fade the last teaser line while the piece is closed. */
.post:has(details:not([open])) .teaser { position: relative; }
.post:has(details:not([open])) .teaser::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 5.5rem;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--ground));
}

.crosspost {
  margin: 2.8rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  font-size: .88rem;
  color: var(--muted);
}

@media (max-width: 700px) {
  .posts { gap: 4rem; }
  .post .teaser, .post .rest { font-size: 1.02rem; }
}

/* ── Form ───────────────────────────────────────────────────── */

.form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-width: 34rem;
}

.field { display: flex; flex-direction: column; gap: .4rem; }

.field label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.field input,
.field textarea {
  background: var(--ground-sunk);
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
  padding: .8rem .9rem;
  width: 100%;
}
.field input:focus, .field textarea:focus { border-color: var(--bronze); }
.field textarea { min-height: 8rem; resize: vertical; }

.form-note { font-size: .92rem; color: var(--muted); }

.form-status {
  font-size: .98rem;
  line-height: 1.55;
  margin: 0;
  padding-left: .9rem;
  border-left: 2px solid var(--rule);
  color: var(--ink-soft);
}
.form-status:empty { display: none; }
.form-status.is-ok  { border-left-color: var(--bronze); color: var(--ink); }
.form-status.is-bad { border-left-color: var(--sage);   color: var(--ink); }
.form--inline .form-status { grid-column: 1 / -1; }

/* consent checkbox */
.check {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  color: var(--ink-soft);
  font-size: .95rem;
  line-height: 1.5;
  cursor: pointer;
}
.check input {
  accent-color: var(--bronze);
  margin-top: .2rem;
  width: 1rem; height: 1rem;
  flex: 0 0 auto;
}

/* ── Free-sample block ──────────────────────────────────────── */

.sample {
  background: var(--ground-sunk);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--bronze);
  border-radius: 2px;
  padding: 2.4rem 2.2rem;
}
.sample .standfirst { max-width: var(--measure); }
.sample .hs-form-frame { max-width: 75%; }

.form--inline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem 1.4rem;
  max-width: var(--wide);
  align-items: end;
}
.form--inline .field--wide { grid-column: 1 / -1; }
.form--inline .btn { justify-self: start; grid-column: 1 / -1; }
.form--inline input { background: var(--ground); }

@media (max-width: 640px) {
  .form--inline { grid-template-columns: 1fr; }
  .sample .hs-form-frame { max-width: 100%; }
  .sample { padding: 1.8rem 1.3rem; }
}

/* ── Review quotes ──────────────────────────────────────────── */

.quotes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem;
}
.quote {
  background: var(--ground-lift);
  border: 1px solid var(--rule);
  border-radius: 2px;
  margin: 0;
  padding: 1.8rem 1.7rem;
}
.quote blockquote { margin: 0; }
.quote blockquote p {
  color: var(--ink);
  font-size: 1.08rem;
  line-height: 1.65;
  margin: 0;
}
.quote blockquote p::before { content: "\201C"; }
.quote blockquote p::after  { content: "\201D"; }
.quote figcaption {
  color: var(--bronze);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-top: 1.1rem;
}
@media (max-width: 780px) { .quotes { grid-template-columns: 1fr; } }

/* ── Contact split ──────────────────────────────────────────── */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 2.25rem; } }

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  font-size: 1.02rem;
  color: var(--ink-soft);
}
.contact-list .k {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: .2rem;
}

/* ── Close / CTA block ──────────────────────────────────────── */

.close { display: flex; flex-direction: column; gap: .9rem; align-items: flex-start; }
.close p { font-size: 1.15rem; }

/* ── Footer ─────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--rule);
  background: var(--bar);
  margin-top: 2rem;
  /* flow-root keeps the last child's margin inside the footer, so the strip
     below the legal line is footer coloured instead of showing the page ground */
  display: flow-root;
}

.footer-inner {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 2.75rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3rem;
  justify-content: space-between;
  align-items: flex-start;
}

.footer-inner .col { display: flex; flex-direction: column; gap: .45rem; }

.footer-inner .name {
  font-size: 1.05rem;
  letter-spacing: .01em;
}

.footer-inner p,
.footer-inner a {
  font-size: .92rem;
  color: var(--muted);
}
.footer-inner a { text-decoration: none; }
.footer-inner a:hover { color: var(--bronze); }

.colophon {
  border-top: 1px solid var(--rule);
  padding: 1.1rem 1.5rem;
  text-align: center;
}
.colophon p {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Narrow prose section (privacy note) ────────────────────── */

.section--narrow { max-width: var(--measure); }
.section--narrow h2 {
  font-size: 1.15rem;
  margin: 2rem 0 0;
}
.section--narrow p { margin: .6rem 0 0; }

/* ── Newsletter ─────────────────────────────────────────────── */

.nl-band {
  border-top: 1px solid var(--rule);
  background: var(--ground-sunk);
}
.nl-band-inner {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 3rem 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 3rem;
  align-items: start;
}
.nl-band-copy h2 { font-size: 1.35rem; margin: .35rem 0 .5rem; }
.nl-band-copy p { color: var(--ink-soft); margin: 0; max-width: 28rem; }

.nl-form { display: flex; flex-direction: column; gap: .7rem; }

.nl-row {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: stretch;
}
.nl-label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.nl-row input[type="email"] {
  flex: 1 1 15rem;
  min-width: 0;
  background: var(--ground);
  color: var(--ink);
  border: 1px solid var(--slot-line);
  border-radius: 2px;
  padding: .7rem .85rem;
  font: inherit;
  font-size: .98rem;
}
.nl-row input[type="email"]::placeholder { color: var(--muted); }
.nl-row input[type="email"]:focus { border-color: var(--bronze); }
.nl-row .btn { flex: 0 0 auto; }

/* Honeypot. Real people never see it, bots fill it in. */
.nl-trap {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
}

.nl-consent {
  margin: 0;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 32rem;
}
.nl-consent a { color: var(--ink-soft); }
.nl-consent a:hover { color: var(--bronze); }

.nl-status { margin: 0; }

@media (max-width: 46rem) {
  .nl-band-inner { grid-template-columns: 1fr; padding: 2.5rem 1.25rem; }
}

/* ── Newsletter popup ───────────────────────────────────────── */

.nl-pop[hidden] { display: none; }
.nl-pop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.nl-pop-veil {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 14, .72);
  backdrop-filter: blur(2px);
}
.nl-pop-card {
  position: relative;
  width: min(34rem, 100%);
  background: var(--ground-lift);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 2.25rem 2rem 1.75rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  animation: nl-rise .28s ease-out both;
}
@keyframes nl-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.nl-pop-card h2 { font-size: 1.45rem; margin: .35rem 0 .6rem; }
.nl-pop-text { color: var(--ink-soft); margin: 0 0 1.25rem; }

.nl-pop-x {
  position: absolute;
  top: .6rem; right: .6rem;
  width: 2.25rem; height: 2.25rem;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  border-radius: 2px;
}
.nl-pop-x:hover { color: var(--ink); }
.nl-pop-x svg { width: 18px; height: 18px; }

.nl-pop-later {
  margin-top: 1rem;
  background: transparent;
  border: 0;
  padding: .2rem 0;
  color: var(--muted);
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.nl-pop-later:hover { color: var(--ink-soft); }

/* On a phone it comes up from the bottom as a sheet, never a full-screen
   interstitial: Google penalises those and readers hate them. */
@media (max-width: 40rem) {
  .nl-pop { align-items: flex-end; padding: 0; }
  .nl-pop-card {
    width: 100%;
    border-radius: 4px 4px 0 0;
    border-bottom: 0;
    padding: 1.75rem 1.25rem 1.25rem;
  }
  @keyframes nl-rise {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: none; }
  }
}


/* ── Links page ───────────────────────────────────────────────
   One tall column of tap targets. Same rules and bronze accent as
   the rest of the site, sized for a thumb on a phone. */
.links { display: flex; flex-direction: column; gap: 0; margin-top: 1.4rem; }
.links a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .95rem .2rem;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
}
.links a:first-child { border-top: 1px solid var(--rule); }
.links a:hover, .links a:focus-visible { color: var(--bronze); }
.links .links-name { font-size: 1.02rem; }
.links .links-note {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: right;
  flex: 0 0 auto;
}
.links-group { margin-top: 2.6rem; }
.links-group:first-of-type { margin-top: 0; }