/* ─────────────────────────────────────────────────────────────
   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(--wide);
  margin: 0 auto;
  padding: 3.5rem 1.5rem 4.5rem;
  display: flex;
  flex-direction: column;
  gap: 3.25rem;
}

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

/* Inner pages share Home's frame: the page runs to the same left edge as the
   menu, headings and grids use the full width, and running text keeps its
   reading measure, set flush left on that edge. */
.wrap p,
.wrap ol,
.wrap ul:not([class]),
.wrap blockquote { max-width: var(--measure); }
.wrap .card p,
.wrap .quotes p { max-width: none; }
/* A .section nested in the page frame would add its own gutter and, as a
   flex item with auto margins, shrink and centre itself. Pin it to the edge. */
.wrap > .section { width: 100%; margin: 0; padding-left: 0; padding-right: 0; }

.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, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.cards--four { grid-template-columns: repeat(4, minmax(0, 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;
}

/* Mix + master sits inside the Mixing card as a second price. Only the
   first price takes the auto margin that pins prices to the card foot; the
   bundle follows it after a hairline, so the grid keeps four cards. */
.card .note--bundle {
  margin-top: .5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}
.card .price--bundle { margin-top: calc(.2rem - .9rem); padding-top: 0; }

.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);
}

/* The same amount, broken out underneath: what it is before VAT, plus the 21%.
   The headline above it stays the figure Stripe actually charges, so the page
   and the checkout can never disagree, and a consumer still reads the final
   price first, which is what Belgian price-indication rules ask for. Quiet on
   purpose: it is a reassurance for the business clients who need the split,
   not a second price competing with the first. */
.card .price-ex,
.cards--four .card .price-ex {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .68rem;
  /* Both selectors, because ".cards--four .card p" carries one more element
     than ".card .price-ex" and would otherwise win on specificity and set this
     line at the card's body size. Tight leading too: the inherited 1.62 is for
     paragraphs, and on a one-line figure it only buys half-leading that reads
     as a gap between this and the price it belongs to. */
  line-height: 1.3;
  letter-spacing: .04em;
  color: var(--muted);
  /* The card is a flex column with gap: .9rem between every child, and a flex
     gap ignores margins rather than collapsing with them. So this cancels that
     .9rem and asks for .2rem instead: the split belongs to the price above it,
     not to the next thing down the card. */
  margin-top: calc(.2rem - .9rem);
  font-variant-numeric: tabular-nums;
}

/* ── 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%;
}
/* The shadow text. Same muted grey the newsletter field already uses, so a
   placeholder never reads as a value somebody typed. */
.field input::placeholder,
.field textarea::placeholder { color: var(--muted); opacity: 1; }

.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) ────────────────────── */

/* Privacy and Links: same frame as every other page, text at reading measure. */
.section--narrow { max-width: var(--wide); }
.section--narrow > * { max-width: var(--measure); width: 100%; }
.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; }

/* Language tag on a review card. The wall mixes languages, so a reader should
   know which one they are about to read before they start. */
.quote{position:relative;}
.quote[data-lang]::after{
  content:attr(data-lang);
  position:absolute;top:0;right:0;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.62rem;letter-spacing:.16em;line-height:1;
  color:var(--muted);border:1px solid var(--rule);
  padding:.28rem .42rem;
}
@media (max-width:600px){
  .quote[data-lang]::after{font-size:.56rem;padding:.22rem .34rem;}
}

/* A reader who finishes a piece has nowhere to go but four more pieces, so
   each one closes with the one thing worth doing next. Sunk panel rather than
   a band, so it reads as the end of the article and not as a new section. */
.post-cta {
  margin: 2.6rem 0 0;
  padding: 1.8rem;
  background: var(--ground-sunk);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--bronze);
  border-radius: 2px;
}
.post-cta .eyebrow { margin: 0 0 .7rem; }
.post .rest .post-cta p { margin: 0; }
.post-cta-title {
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 1.22rem;
  line-height: 1.3;
  color: var(--ink);
}
.post .rest .post-cta .post-cta-text {
  margin: .7rem 0 1.4rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 34rem;
}
@media (max-width: 600px) {
  .post-cta { padding: 1.4rem; }
  .post-cta-title { font-size: 1.1rem; }
  .post-cta .btn { display: block; width: 100%; text-align: center; }
}

/* A quote is more convincing when you can go and hear the record it is about.
   Sits under the name, and only appears on reviews that carry a link. */
.quote-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: .8rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  border: 1px solid var(--slot-line);
  border-radius: 2px;
  padding: .55rem .9rem;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.quote-link:hover, .quote-link:focus-visible {
  color: var(--bronze);
  border-color: var(--bronze);
  background: rgba(199,154,92,.07);
}
.quote-play { font-size: .6rem; line-height: 1; }

/* The player, once the reader has asked for it. It plays inside the card at
   the card's own width: the quote stays where it was and the grid does not
   move under the reader. K asked for this on 18 Sept 2026, having seen the
   alternative, so if a future change is tempted to widen the card again on
   open, that is a decision to put to him rather than a bug to fix. */
.quote-embed { margin-top: 1rem; border-radius: 3px; overflow: hidden; background: #0B0D11; }
.quote-embed iframe { display: block; width: 100%; border: 0; }
.quote-embed--video iframe { aspect-ratio: 16 / 9; }
/* Spotify's own two sizes: one row for a track, a track listing for a
   playlist or an album. See embed_for() in content.py. */
.quote-embed--audio iframe { height: 152px; }
.quote-embed--audiolist iframe { height: 352px; }

/* On a phone the card's own side padding is the difference between Spotify
   fitting the artist name and the track titles in and truncating both, so the
   player takes the padding back and runs edge to edge inside the card. */
@media (max-width: 560px) {
  .quote-embed {
    margin-left: -1.7rem;
    margin-right: -1.7rem;
    border-radius: 0;
  }
}

/* The offer on the left, the free sample on the right. Used on the homepage
   beside the services and on the booking page beside the rates: one row, the
   box opening in place, so the sample never pushes the prices down the page. */
.rates-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}
.rates-intro { display: flex; flex-direction: column; gap: 1.5rem; }
.rates-intro h2 { margin: 0; }
@media (max-width: 720px) { .rates-top { grid-template-columns: 1fr; } }

/* Negative: the price colour carries the box, ink on bronze. */
.sample-neg {
  background: var(--bronze);
  color: var(--bar);
  border-radius: 3px;
  overflow: hidden;
}
.sample-neg > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: 1.5rem 1.4rem;
}
.sample-neg > summary::-webkit-details-marker { display: none; }
.sample-neg > summary:focus-visible { outline: 2px solid var(--bar); outline-offset: -4px; }

.sample-neg .eyebrow { margin: 0; color: rgba(14,17,22,.62); }
.sn-title {
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--bar);
}
.sn-note {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(14,17,22,.72);
}
.sn-cue {
  margin-top: .5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bronze);
  background: var(--bar);
  border: 1px solid var(--bar);
  border-radius: 2px;
  padding: .85rem 1rem;
  text-align: center;
  transition: background .2s ease, color .2s ease;
}
.sn-cue::after { content: "\2193"; font-size: .9rem; letter-spacing: 0; }
.sample-neg[open] .sn-cue::after { content: "\2191"; }
.sample-neg > summary:hover .sn-cue { background: transparent; color: var(--bar); }
.sample-neg .less { display: none; }
.sample-neg[open] .more { display: none; }
.sample-neg[open] .less { display: inline; }

/* Open, the form sits on the dark surface so it reads like every other form
   on the site. The bronze head stays, so the box keeps its identity. */
.sn-body {
  background: var(--ground-sunk);
  color: var(--ink);
  padding: 1.4rem;
  border-top: 1px solid rgba(14,17,22,.25);
}
.sn-body p { margin: 0 0 1.1rem; color: var(--ink-soft); font-size: .98rem; line-height: 1.65; }

/* Open, the box takes the full width and the rest of the row moves above it.
   A form in a 316px column with the other half of the row empty is not worth
   looking at. */
.rates-top:has(> details[open]) { grid-template-columns: 1fr; }

/* Open, the box takes the full width and the rates move above it. A form in a
   316px column with the other half of the row empty is not worth looking at. */


/* The price is the thing a reader's eye lands on, so it may as well be the
   way through to the rates. Carries the card's own accent already, so it
   only needs to say it is clickable on hover. */
.card .price a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.card .price a:hover, .card .price a:focus-visible { border-bottom-color: var(--bronze); }


/* Four cards in a 44rem column leaves about 110px of text width each, and the
   uppercase mono note sets words like DISTRIBUTION wider than that. Without
   this the tracks refuse to shrink and the whole row hangs 76px past the
   column, out of line with everything above it. */
.cards--four .card { min-width: 0; }
.cards--four .card .note { font-size: .64rem; letter-spacing: .04em; }
.cards--four .card .btn--block { padding-left: .6rem; padding-right: .6rem; letter-spacing: .1em; }

/* Click-to-load players. The button stands where the SoundCloud iframe
   will go, so nothing shifts when the player arrives. */
.sc-load {
  width: 100%;
  min-height: 166px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1.2rem;
  background: var(--ground-sunk);
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.sc-load:hover, .sc-load:focus-visible { border-color: var(--bronze); color: var(--ink); }
.sc-load .play {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--bronze);
  border-radius: 50%;
}
.sc-load .play svg { width: 1.2rem; height: 1.2rem; fill: var(--bronze); }
.sc-load .cap {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
}
.sc-load--wide { min-height: 470px; }
@media (max-width: 560px) { .sc-load--wide { min-height: 420px; } }