@font-face{font-family:"Bricolage";src:url(fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-display:swap}
:root{
  --ink:#1c1a24; --paper:#fdf8f6; --soft:#f3e9e7;
  --pink:#ee8aa3; --blue:#8c9bd8; --teal:#8fc6c3; --teal-ink:#2b6a66; --dark:#1c1a24; --light:#fdf8f6;
  --band:#1c1a24; --bandtext:#fdf8f6; --shadow:var(--ink); --c:var(--pink);
  --body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --head:"Bricolage",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{--ink:#f5eef0; --paper:#16141d; --soft:#221f2c; --band:#f5eef0; --bandtext:#16141d}
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:4.5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:1.0625rem/1.65 var(--body)}
a{color:var(--ink);text-decoration-color:var(--pink);text-decoration-thickness:.18em;text-underline-offset:.18em}
a:hover{text-decoration-color:var(--blue)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.wrap{max-width:60rem;margin:0 auto;padding:0 1.25rem}

header.top{position:sticky;top:0;z-index:5;background:var(--pink);color:var(--dark);border-bottom:3px solid var(--dark)}
header.top .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem 1.25rem;padding-top:.6rem;padding-bottom:.6rem}
.brand{font:800 1.15rem var(--head);letter-spacing:-.01em;color:var(--dark);text-decoration:none;margin-right:auto;display:flex;align-items:center;gap:.6rem}
.brand img{height:2rem;width:auto}
nav a{color:var(--dark);text-decoration:none;font-weight:600;font-size:.95rem;margin-right:1rem}
nav a:last-child{margin-right:0}
nav a:hover{text-decoration:underline;text-decoration-thickness:.15em}

.hero{background:var(--pink);color:var(--dark);padding:3.5rem 0 4.5rem;--shadow:var(--dark)}
.hero .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2rem}
.hero .intro{flex:1 1 24rem}
.hero h1{font:800 clamp(1.5rem,7.8vw,3.4rem)/.92 var(--head);letter-spacing:-.035em;margin:0 0 1.4rem}
.hero p.lead{font-size:1.3rem;max-width:30rem;margin:0 0 1.8rem}
.hero img.portrait{width:min(18rem,70vw);height:auto;filter:drop-shadow(10px 10px 0 var(--dark))}
.btn{display:inline-block;background:var(--pink);color:var(--dark);padding:.75rem 1.4rem;border:3px solid var(--dark);border-radius:.4rem;box-shadow:4px 4px 0 var(--shadow);text-decoration:none;font:700 1rem var(--body);cursor:pointer}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--shadow)}
.hero .btn{background:var(--dark);color:var(--light);box-shadow:4px 4px 0 var(--light)}
.hero .btn:hover{box-shadow:2px 2px 0 var(--light)}
.hero .btn.alt{background:var(--light);color:var(--dark);margin-left:.6rem;box-shadow:4px 4px 0 var(--dark)}
.hero .btn.alt:hover{box-shadow:2px 2px 0 var(--dark)}

section{padding:4rem 0;border-top:3px solid var(--ink)}
section .wrap{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);column-gap:3rem}
section .wrap>*{grid-column:2}
/* span every row, not just row 1. The heading is the only thing in
   column 1, but sharing row 1 with the quote meant a tall heading
   ("The recording and mix engineer" is 3 lines, 180px) stretched that
   row and pushed the intro text 110px below the quote. The other two
   sections only showed 25-35px. Now all three are a flat 25px. */
section .wrap>h2{grid-column:1;grid-row:1 / span 40;align-self:start;position:sticky;top:5.5rem}
h2{font:800 clamp(1.7rem,3.2vw,2.15rem)/1.1 var(--head);letter-spacing:-.02em;margin:0 0 1rem}
h2::before{content:"";display:block;width:3.2rem;height:.65rem;background:var(--c);border:2px solid var(--ink);margin-bottom:.9rem}
h3{font:700 1.4rem var(--head);margin:2rem 0 .7rem}
p{margin:0 0 1rem}
blockquote{display:table;align-self:start;margin:0 0 1.5rem;padding-left:1.1rem;border-left:8px solid var(--c);font:600 1.45rem/1.3 var(--head);letter-spacing:-.01em}
.stars{display:block;line-height:0;margin-bottom:.5rem}
.stars svg{display:block;width:6.4rem;height:auto;fill:var(--pink)}
.facts{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.5rem 0 0}
/* four tags that fit on a single line across the 664px text column.
   Was .95rem with .9rem side padding - 841px, so it always wrapped.
   Measured total at this size is 648px, leaving 16px spare. If a
   browser renders the font fractionally wider they wrap to a second
   row rather than overflowing, so nothing breaks. */
.facts span{background:var(--blue);color:var(--dark);border:2px solid var(--dark);border-radius:999px;padding:.2rem .5rem;font-weight:600;font-size:.76rem;white-space:nowrap}
.albums{display:flex;flex-wrap:wrap;gap:1.25rem}
.albums figure{margin:0;width:200px;font-size:.9rem;line-height:1.4}
.albums iframe{border:0;width:200px;height:200px;display:block;margin-bottom:.5rem;border-radius:.3rem;outline:3px solid var(--ink)}
.spot{display:grid;gap:.8rem;margin-top:1rem}
.spot iframe{border:0;border-radius:12px;width:100%}
/* Resources: six PDFs as a card grid.
   The six are in source order guitar x3 then ukulele x3, so on a
   three-column layout they land as one guitar row above one ukulele row. */
ul.files{
  list-style:none;padding:0;margin:1.25rem 0 0;
  display:grid;grid-template-columns:1fr;gap:1rem;
}
ul.files li{
  border:1px solid rgba(28,26,36,.18);border-radius:.5rem;
  padding:.9rem .7rem;font-weight:600;font-size:.92rem;line-height:1.3;
  display:flex;align-items:stretch;
}
ul.files a{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:.7rem;text-decoration:none;color:var(--ink);width:100%;text-align:center;
}
ul.files a:hover span{text-decoration:underline;text-decoration-thickness:.15em;text-underline-offset:.18em}
ul.files picture{flex:0 0 auto;display:block;line-height:0}
ul.files img{
  width:5.2rem;height:auto;display:block;background:#fff;
  border:1px solid rgba(28,26,36,.28);border-radius:2px;
  box-shadow:3px 3px 0 rgba(28,26,36,.16);
}
@media (min-width:30rem){ ul.files{grid-template-columns:repeat(2,1fr)} }
@media (min-width:48rem){ ul.files{grid-template-columns:repeat(3,1fr)} }

#contact{background:var(--band);color:var(--bandtext);border-top-color:var(--band);--shadow:var(--bandtext)}
#contact a{color:var(--bandtext)}
#contact h2::before{border-color:var(--bandtext)}
form{display:grid;gap:1rem;margin-top:1.2rem;max-width:34rem}
label{display:grid;gap:.3rem;font-weight:600}
input,textarea{font:inherit;padding:.7rem .8rem;border:3px solid var(--bandtext);border-radius:.4rem;background:var(--paper);color:var(--ink)}
textarea{min-height:9rem;resize:vertical}
.hp{position:absolute;left:-9999px}
.consent{display:flex;gap:.6rem;font-weight:400;font-size:.95rem;align-items:flex-start}
.consent input{margin-top:.35rem}
#status{min-height:1.5rem;font-weight:600}
#privacy{--c:var(--teal);font-size:.83rem}
#privacy h2{font-size:1.25rem}
#privacy p{margin:0 0 .5rem;line-height:1.55}
footer{border-top:3px solid var(--ink);padding:2rem 0 3rem;font-size:.95rem}
/* Footer links sit on their own - not inside a sentence - so WCAG 2.2's
   inline exception does not cover them. At 18px tall they were the only
   standalone targets on the site under the 24px minimum. inline-block so
   the padding actually grows the line box; without it an inline element's
   vertical padding paints over the row above instead of moving it. */
footer a{display:inline-block;padding:.35rem 0;margin-right:1rem;font-weight:600}
@media (max-width:48rem){
  section .wrap{display:block}
  section .wrap>h2,
  section.subpage h1{position:static}
  /* single column, so the title sits directly above the quote and needs
     the same breathing space a homepage h2 gets */
  section.subpage .wrap>h1{margin:0 0 1.4rem}
  section.subpage .backlink{grid-row:auto;margin:0 0 1rem}
  .hero .btn.alt{margin:.8rem 0 0}
}


/* ===== QUICK-WINS PATCH ===== */
/* ----------------------------------------------------------------
   7. RESTORED RULES for .cta and .direct
   ----------------------------------------------------------------
   These two one-liners existed in the deployed stylesheet but were
   dropped when the button and contact lines were removed. Now that
   both are back, they need their styling back too.
   ---------------------------------------------------------------- */
.direct{ font-weight:600; }
.cta{ margin:1.5rem 0 0; }
section.subpage .cta + .services,
section.subpage .cta + .players{margin-top:2.4rem}
/* The tutor button is dark so the star can be the page pink. On the
   standard pink .btn a pink star is invisible - same colour as the
   button - and only its outline shows, which reads as an unfilled
   rating. Dark also matches the primary button in the hero. */
.cta .btn{background:var(--dark);color:var(--light);box-shadow:4px 4px 0 var(--pink)}
.cta .btn:hover{box-shadow:2px 2px 0 var(--pink)}
/* .alt only had a rule scoped to .hero, so inside .cta it inherited the
   dark primary styling and every subpage showed two identical dark buttons.
   This restores the intended split: dark = go to reviews, pink = stay here. */
.cta .btn.alt{background:var(--pink);color:var(--dark);box-shadow:4px 4px 0 var(--dark)}
.cta .btn.alt:hover{box-shadow:2px 2px 0 var(--dark)}
.btn-stars{white-space:nowrap;margin-left:.35em}
.btn-star{width:.92em;height:.92em;fill:var(--pink);stroke:none;vertical-align:-.1em;margin-right:.07em}
.btn-stars .btn-star:last-child{margin-right:0}


/* ----------------------------------------------------------------
   6. LOGO — swapped to WebP with a PNG fallback and correct sizes
   ----------------------------------------------------------------
   The old logo.png was 338 KB for a 480px image used at 288px and
   32px. Now: 38 KB WebP hero, 4 KB WebP header icon, PNG fallback,
   and a 2x hero variant for retina screens.

   The picture wrapper becomes the flex item in .hero .wrap, so it
   needs to be told not to shrink.
   ---------------------------------------------------------------- */
.hero picture.portrait-wrap{
  flex:0 0 auto;
  display:block;
  line-height:0;
}

/* the hero image is the LCP element — never lazy-load it */
.hero img.portrait{
  content-visibility:visible;
}


/* ================================================================
   QUICK-WINS PATCH — matthewthemusicman
   ----------------------------------------------------------------
   HOW TO APPLY
   Paste this at the very END of your existing inline style block,
   immediately before the closing style tag. It only overrides what
   it needs to; nothing else in your stylesheet changes.

   (Deliberately no angle brackets in this comment: a literal closing
   style tag inside a CSS comment still ends the style element early,
   which silently breaks every rule that follows it.)

   Every value below was measured, not guessed — see the notes.
   ================================================================ */


/* ----------------------------------------------------------------
   1. MOBILE NAV — stops the page scrolling sideways
   ----------------------------------------------------------------
   BEFORE: <nav> measured 447px inside a 390px viewport, forcing the
           whole document to 468px. Result: 78px of horizontal
           scrolling at 390px, 107px at 360px, and the "Contact"
           link pushed off-screen where it could not be tapped.
   AFTER:  nav wraps inside the viewport, Page width = viewport width.

   Note the `flex-wrap` on nav itself — the parent .wrap already
   wraps, but nav was a single unshrinkable flex item, which is
   what caused the overflow.
   ---------------------------------------------------------------- */
nav{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.15rem 1rem;      /* row-gap  col-gap */
  max-width:100%;
  min-width:0;
}
nav a{
  margin-right:0;       /* replaced by the gap above */
  padding:.5rem 0;      /* tap target 18px -> ~34px tall (WCAG 2.2 target size) */
}


/* ----------------------------------------------------------------
   2. HERO BUTTONS — a real gap, and they stack before colliding
   ----------------------------------------------------------------
   BEFORE: "Get in touch" (161px) + "Book lessons" (168px) = 329px
           with a 0px gap at every width below 768px. The 48rem media
           query zeroed .btn.alt's margin, but both buttons stayed
           inline-block, so they overlapped and the first button's
           offset shadow was drawn underneath the second.

   WHY IT COULDN'T JUST BE A MARGIN: two adjacent inline-block
   elements with no whitespace between them have no line-break
   opportunity, so they can never wrap — they just collide or push
   the page sideways.

   So below the breakpoint each button becomes a shrink-to-fit block,
   which forces its own line. Above it, they stay side by side with a
   real gap. This keeps your original design intent (the existing
   media query was clearly trying to stack them) and needs no changes
   to your HTML.
   ---------------------------------------------------------------- */
.hero .btn.alt{
  margin-left:.85rem !important;   /* was .6rem above 48rem, and 0 below it */
}

@media (max-width:48rem){
  .hero .btn{
    display:block;
    width:max-content;             /* keeps the button tight, not full width */
    margin:0 !important;
  }
  .hero .btn.alt{
    margin-top:.85rem !important;  /* the gap between the stacked buttons */
  }
}


/* ----------------------------------------------------------------
   2b. LONG EMAIL ADDRESS — stop it overflowing tiny screens
   ----------------------------------------------------------------
   At 320px the email link is 317px wide inside a 280px content area,
   giving 17px of horizontal scroll. An unbreakable string has no
   natural wrap point, so it has to be told it may break.
   ---------------------------------------------------------------- */
#contact .direct a{
  overflow-wrap:anywhere;
}


/* ----------------------------------------------------------------
   3a. FOCUS RING — visible on BOTH the paper and the pink header
   ----------------------------------------------------------------
   BEFORE: #8c9bd8 reached only 2.56:1 on paper. Needs 3:1 (WCAG 1.4.11).

   Why this isn't one colour: no blue reaches 3:1 against the pink
   header (#ee8aa3). The best available, #4a5fb4, only manages 2.45:1.
   So the ring is two-tone by context:

       #5468bb on paper ....... 4.89:1  PASS
       #5468bb on dark bg ..... 3.54:1  PASS
       #1c1a24 on pink header . 7.20:1  PASS
   ---------------------------------------------------------------- */
:root{
  --focus:#5468bb;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
}
/* inside the pink header and hero, switch to ink — a blue ring would
   vanish against the pink */
header.top a:focus-visible,
.hero a:focus-visible{
  outline-color:var(--dark);
}


/* ----------------------------------------------------------------
   3b. LINK UNDERLINE — from 2.27:1 to 3.55:1 on paper
   ----------------------------------------------------------------
   BEFORE: #ee8aa3 underline on #fdf8f6 paper = 2.27:1. Needs 3:1.
   AFTER:  #d45c7c = 3.55:1 on paper. A deeper tint of your existing
           pink, so the palette holds.

   One colour covers every surface, including the contact band, which
   flips to light in dark mode:
       paper (light) ......... 3.55:1  PASS
       dark-mode page ........ 4.88:1  PASS
       contact band (light) .. 4.60:1  PASS
       contact band (dark) ... 3.27:1  PASS
   ---------------------------------------------------------------- */
:root{
  --link-underline:#d45c7c;
}
a{
  text-decoration-color:var(--link-underline);
}


/* ----------------------------------------------------------------
   4. BANDCAMP PLAYERS — stop clipping the artwork
   ----------------------------------------------------------------
   BEFORE: the size=large player was forced into a 200x200 box. It is
           NOT square — it is 400x500 — so the album art was cut off
           and the tracklist, the whole point of the embed, was
           invisible on all three albums.

   AFTER:  a responsive grid at the player's true 500px height, so the
           artwork, transport controls and first tracks are all
           visible. Two players fit per row on desktop, one on a phone.

   Note it is deliberately a grid rather than the original flex: at
   340px wide only one player fits in the 664px content column, which
   left the section 2,100px tall and mostly empty. auto-fit packs
   them properly at any width.
   ---------------------------------------------------------------- */
.albums{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:1.5rem;
  /* The "Venues, credits & recordings" button sat flush against the first
     player below 56rem - 0px between the button's shadow and the frame's
     top edge. The 2rem that clears it was only ever declared inside the
     min-width:56rem block, so phones and tablets never got it. Declared
     here as well; the wider layout keeps its own copy of the same value. */
  margin-top:2rem;
}
.albums figure{
  width:100%;
  max-width:340px;
  margin:0;
}
.albums iframe{
  width:100%;
  /* Cover art shown, tracklist off. Bandcamp draws the cover as a
     full-width square, so the player is always column width + 143px
     of chrome (title, artist, scrubber, transport, buy/share). Height
     is therefore set per breakpoint to the measured value rather than
     guessed: 435px suits the 269-291px columns of the three-across
     grid, and the single-column phone layout gets 460px for its
     340px-wide column. The frame is overflow:hidden, so too short
     would crop the buy/share links. */
  display:block;
  margin-bottom:.5rem;
}


/* one player on a phone, the other two as links
   (see the note under section 4 for the reasoning) */
/* three albums side by side on desktop, sitting in the same text column
   as the prose rather than spanning the whole section. Spanning 1 / -1
   gave 291px plates - a quarter larger than the 221px plates on the
   Musician page, which is the size these now match. 2rem above clears the
   "Venues, credits & recordings" button, which previously sat 12px away. */
@media (min-width:56rem){
  section .wrap > .albums{
    grid-column:2;
    grid-template-columns:repeat(3, 1fr);
    gap:1rem;
    margin-top:2rem;
  }
  /* the "Albums" heading is the only h3 in this section — align it with
     the left edge of the wider grid above */
  #musician .wrap > h3{
    grid-column:1 / -1;
  }
  /* Sticky only works where the heading is alone in column 1. Here the
     "Discography" h3 and the album grid both span 1 / -1, so they pass
     underneath it: scrolled to ~900px, "Discography" and the first album
     card painted straight through "The musician". Sticky is off for this
     section only; the other two sections have no column-1 content. */
  #musician .wrap > h2{
    position:static;
  }
  .albums figure{ max-width:none; }
}

/* Below 56rem there is not enough room for three players, so keep the
   compact single-player layout right up to that point. Without this,
   768px-896px fell into a narrow one-per-row stack 1,693px tall. */
@media (max-width:55.99rem){
  .albums iframe{height:460px}
  .albums{
    grid-template-columns:1fr;
  }
  /* the 2nd and 3rd players are hidden, but their captions and
     Bandcamp links stay, so every album is still reachable */
  .albums figure:nth-child(n+2) .frame{
    display:none;
  }
  .albums figure:nth-child(n+2){
    padding-top:.9rem;
    border-top:1px solid var(--ink);
  }
}


/* ----------------------------------------------------------------
   5. COMPACT MOBILE HEADER
   ----------------------------------------------------------------
   Five nav links no longer fit on one line at phone widths, so the
   header wraps to two rows. With a sticky header that costs real
   vertical space:

       header only wrapping ............ 143px  (17% of a phone screen)
       + hide brand, tighten spacing ... 98px   (12%)

   Hiding the brand on phones costs nothing: the word
   "matthewthemusicman" is repeated as the h1 immediately beneath it,
   so it is saying the same thing twice within one screen. Above 48rem
   the brand returns as normal.
   ---------------------------------------------------------------- */
@media (max-width:48rem){
  .brand{
    display:none;
  }
  nav{
    gap:0 .85rem;
    width:100%;
    justify-content:flex-start;
  }
  nav a{
    padding:.4rem 0;
  }
}


/* ----------------------------------------------------------------
   8. SKIP LINK — lets keyboard and screen-reader users jump past
      the navigation. Hidden until it receives focus.
   ---------------------------------------------------------------- */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:100;
  background:var(--ink);
  color:var(--paper);
  padding:.7rem 1.1rem;
  border-radius:.3rem;
  font-weight:700;
  text-decoration:none;
}
.skip-link:focus{
  left:1rem;
  top:1rem;
}

/* The player's height is column width + 143px of chrome, and the
   three-across columns grow from 269px to 291px between 896px and
   960px. A container query sets the height from the column's own
   measured width, so it is exact at every viewport in that range
   instead of leaving a gap at one end or cropping at the other.
   435px above is the fallback for browsers without container queries. */
/* no per-breakpoint height any more: .albums .frame fixes the square and
   the iframe fills it, so the two can no longer disagree. */

/* ---------------- "Read more" subpages ----------------
   These pages are single-column rather than the two-column heading
   layout used by the homepage sections, and the measure is capped at
   44rem, matching the homepage text column exactly so that every
   three-across grid on the site uses the same plate width. */
/* The subpages now use the same two-column scaffold as the homepage
   sections: section .wrap{grid-template-columns:13rem 1fr} applies to them
   too, so the title sits in column 1 and everything else in column 2.
   Nothing here needs to override .wrap; only the h1 has to be told to
   behave like the homepage's section heading. */
section.subpage h1{
  grid-column:1;
  grid-row:1 / span 40;
  align-self:start;
  position:sticky;
  top:5.5rem;
  font:800 clamp(1.7rem,3.2vw,2.15rem)/1.1 var(--head);
  letter-spacing:-.02em;
  margin:0;
}
/* The homepage rule is `section .wrap>h2{grid-column:1; grid-row:1/span 40;
   position:sticky}`. On a subpage the h1 owns column 1, so any h2 that is a
   direct child of .wrap - "Where he teaches" on the Tutor page - was being
   shoved into the same cell and painted on top of the title. Only the h1
   belongs in column 1 here. */
section.subpage .wrap>h2{
  grid-column:2;
  grid-row:auto;
  position:static;
  margin:2.6rem 0 .9rem;
}
section.subpage h1::before{
  content:"";
  display:block;
  width:3.2rem;
  height:.65rem;
  background:var(--c);
  border:2px solid var(--ink);
  margin-bottom:.9rem;
}
/* the back link is navigation, not part of the title, so it stays in the
   text column above the pull-quote rather than under the heading */
section.subpage .backlink{grid-column:2;grid-row:1;align-self:start;margin:0 0 1.2rem}
section.subpage h2{position:static;margin:2.6rem 0 .9rem}
section.subpage h3{margin:1.9rem 0 .5rem}
section.subpage p{margin:0 0 1.1rem}
section.subpage blockquote{margin:0 0 1.8rem}
section.subpage .cta{margin:1.5rem 0 0}
/* Recording page: the three services as a three-up, each with its own
   circular photograph, echoing the original IONOS layout. The subpage wrap
   is capped at 46rem, so each column lands around 229px and the body text
   is dropped a notch at that width to keep the measure readable. */
section.subpage .services{display:grid;gap:2.2rem;margin:1.6rem 0 2.4rem}
/* Each column carries a rule above it in the section colour, so the three
   read as equal units rather than three ragged blocks of text. Headings are
   left aligned to sit flush with the body text beneath them - centred
   headings over left-aligned paragraphs was the main thing making the row
   look untidy. */
section.subpage .service{
  border-top:3px solid var(--c);
  padding-top:1rem;
}
section.subpage .service .step{
  font:800 .78rem/1 var(--body);
  letter-spacing:.14em;
  /* Was var(--c) = the pale teal #8fc6c3, which gives 1.81:1 on the cream
     background - a WCAG AA failure for text this size (12.5px needs 4.5:1).
     --teal-ink is the same hue darkened until it reaches 5.94:1. Dark mode
     puts the pale teal back, where it scores 9.58:1. */
  color:var(--teal-ink);
  margin:0 0 .6rem;
}
section.subpage .service h2{font-size:1.2rem;text-align:left;margin:0 0 .7rem}
/* these are h2 only to keep the heading order intact; they must not
   pick up the large size or the coloured bar of a real section heading */
section.subpage .service h2::before{display:none}
@media (min-width:56rem){
  section.subpage .services{grid-template-columns:repeat(3,1fr);gap:1.4rem;align-items:start}
  section.subpage .service h2{font-size:1.15rem}
  section.subpage .service p:not(.step){font-size:.9rem;line-height:1.5}
}
/* No break-out any more: the three-up sits in the 664px text column,
   exactly like the album players on the landing page, so its plates are
   the same 211px across as everywhere else on the site. */
.backlink{margin:0 0 .4rem;font-size:.92rem}
/* standalone link, so it needs a 24px target under WCAG 2.2; inline-block
   makes the padding grow the line box instead of painting over the text above */
.backlink a{font-weight:700;display:inline-block;padding:.3rem 0}

/* the read-more link at the foot of each homepage section */
.more{margin:1.4rem 0 0}

/* Musician page: six photographs as a square grid. Two up on narrow
   screens, three up from 56rem. Every plate is cropped to 1:1 and saved at
   480px, so they are all the same shape whatever the phone produced. */
section.subpage .shots{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:.8rem;
  margin:1.8rem 0 0;
}
section.subpage .shot{margin:0}
section.subpage .shot img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1 / 1;
  object-fit:cover;
  border:3px solid var(--dark);
  border-radius:.4rem;
}
/* Musician page: the three Bandcamp players, side by side. The homepage
   keeps its own .albums block; this is a separate class so the two can be
   sized independently for their different containers. */
section.subpage .players{
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
  margin:2.2rem 0 0;
}
section.subpage .players figure{margin:0;font-size:.9rem;line-height:1.4}
/* Album captions: the title is split into two fixed lines so all three
   caption blocks are exactly the same height and the row reads level,
   whatever the title length. Artist name follows on a third line. */
.albums figcaption a,
.albums figcaption span,
section.subpage .players figcaption a,
section.subpage .players figcaption span{display:block}
.albums figcaption a,
section.subpage .players figcaption a{font-weight:600}
/* Deliberately square. Given a square frame Bandcamp renders its compact
   player: cover art with a play button, and the title, scrubber, transport
   and buy/share links revealed on hover. That is the style used on the
   Musician page and on the landing page alike.
   padding-top percentages measure against the WRAPPER's own width, so this
   is not circular - unlike height:calc(100% + 143px), which resolved
   against an auto-height figure and let the iframe overflow it. */
section.subpage .players .frame,
.albums .frame{
  position:relative;
  width:100%;
  padding-top:100%;
  margin-bottom:.5rem;
  border-radius:.3rem;
  outline:3px solid var(--ink);
  background:#fff;
}
section.subpage .players iframe,
.albums iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}
@media (min-width:34rem){
  section.subpage .players{grid-template-columns:repeat(3, 1fr); gap:1rem}
  /* square geometry comes from .frame at every width */
}
@media (min-width:56rem){
  section.subpage .shots{grid-template-columns:repeat(3, 1fr); gap:1rem}
}
/* No break-out: the photographs stay inside the 44rem column and use the
   same three-across grid as the players above them, so each plate is
   exactly as wide as the album artwork. */
@media (min-width:56rem){
  section.subpage .shots{gap:1rem}
}

/* ----------------------------------------------------------------
   12. MOBILE HEADER — stop it sticking
   ----------------------------------------------------------------
   Below 30rem the five nav links cannot fit on one row: the container
   is 280px at a 320px viewport and the links need 361px. The header
   wraps to two rows and stands 98px tall - about 13% of a phone
   screen, held there permanently while the header is sticky.

   Shortening a label does not fix it. "Recording" -> "Studio" saves
   31px and the wrap point only moves from 456px to 425px, so 320-414
   still wrap. The other four labels set the width.

   So on small screens the header scrolls away with the page instead.
   Nothing else changes: same markup, same labels, same colours. The
   sticky section headings further down keep their own offset, which
   is measured from the viewport, not from the header.
   ---------------------------------------------------------------- */
@media (max-width:30rem){
  header.top{position:static}
}

/* ----------------------------------------------------------------
   12b. SUBPAGE TITLE — unsticking it for real
   ----------------------------------------------------------------
   The 48rem block near the top of this file already sets
   `section.subpage h1{position:static}` for the single-column layout,
   but the two-column scaffold further down re-declares
   `section.subpage h1{position:sticky}` outside any media query, so
   it won every width. The title stuck 88px from the top on a phone
   and sat over the body text - invisible only because the old sticky
   header happened to cover it. Now that the header scrolls away, the
   overlap is exposed. This restates the rule last so it wins.
   ---------------------------------------------------------------- */
@media (max-width:48rem){
  section.subpage h1{position:static}
}

/* The step numerals are the only text on the site drawn in an accent
   colour, so they are the only rule that has to flip with the scheme. */
@media (prefers-color-scheme:dark){
  section.subpage .service .step{color:var(--teal)}
}