/* == fonts: generated by `npm run fonts` (sites/tools/fonts.mjs), do not edit by hand == */
/* Self-hosted from Google Fonts. To change the faces, edit the URL below and
   re-run `npm run fonts`; it reads the URL back from here, and the preload
   list too (PAGE.md, "Preload what paints first").
   source: https://fonts.googleapis.com/css2?family=Bitter:wght@400;600&family=Courier+Prime:wght@400&family=Source+Sans+3:wght@400&family=Stint+Ultra+Condensed&display=swap
   preload: Source Sans 3:400,Bitter:600
*/
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/bitter-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/bitter-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/bitter-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/bitter-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/courier-prime-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/courier-prime-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/source-sans-3-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/source-sans-3-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Stint Ultra Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/stint-ultra-condensed-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Stint Ultra Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/stint-ultra-condensed-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* == end fonts == */

/* ===========================================================================
   Rustic Roads
   DRAFT 2 (27 Sep 2026): built to Susan's own design boards, the three sheets
   she made after the first draft (design/mockup/board-*.jpg): a 1956 road
   map, torn paper strips taped onto it, Polaroids, a postcard. "Overall the
   pages look too busy with so many side comments" - so the loose notes, the
   route signs, the guitar and the blue torn bands of draft 1 are gone.

   Every value below traces to design/SPEC.md, "Draft 2". The boards are
   photographs of paper, so their numbers are PROPORTIONS of the sheet,
   converted to the 941 design units draft 1 was built in, not pixels.

   1200 MAX, NO BLEED (sites/.claude/rules/BUILD.md, "The defaults"). Sizes
   are written in 941px design pixels as `N * var(--u)`; --u renders them at
   1200/941 at 1200 and above and shrinks below it. Floor a size for
   legibility with max() on the same line.

   DRAFT 3 (27 Sep 2026): Susan's second Home board and her notes of the
   same day. The map is her blue-tinted copy, every photograph carries her
   blue tint, the paper is off-white instead of beige ("more like a real
   polaroid, so it would be off white"), and the booking form is her
   business card.

   DRAFT 4 (28 Sep 2026): Susan's notes on draft 3. The map is light tan
   and faded ("Is the grey blue working for the map background? Could try
   light tan", "not sure if the background looks too busy"), the logo a
   darker, softer steel blue with a white outline, a light cranberry route
   across the Home map with the Polaroids on it, push pins in place of tape
   on the photos and the postcard, and the postcard is the vintage card back
   she sent, typed. The songs live on Our Music only and the booking card on
   its own Book Us page.

   Everything is in normal flow. Draft 1 pinned decoration absolutely and had
   to drop it below 1100; draft 2 has no decoration that is not also content,
   so the boards are grids and they stack below 1100 instead.
   =========================================================================== */

:root {
  --u: min(calc(1200px / 941), 100vw / 941);

  /* --- Colour (SPEC.md, "Colour") ---------------------------------------- */
  --ink: #28211E;          /* body copy */
  --black: #151515;        /* display type and icons */
  --paper: #E9DDD0;        /* header strip and cream sheets (sheet centre) */
  --steel: #5c9fc8;        /* the logo's blue (logo-shield-steel's mean, lightened toward the map's lakes 1 Oct): focus rings */
  --navy: #23384a;         /* buttons (draft 1's dark button; Susan: blue in the logo only) */
  --navy-deep: #172633;    /* button hover */
  --charcoal: #27292C;     /* footer ground */
  --on-dark: #DEDFE0;      /* footer text */
  --map: #d5c9bb;          /* under the map while it loads: map-susan-highway's mean */
  --card: #e4e4e2;         /* the business card: "a light grey background" (Susan, 27 Sep) */

  /* --- Type (SPEC.md, "Type") -------------------------------------------- */
  /* Bitter SemiBold and Source Sans 3 since 27 Sep 2026 (Jacob: "vintage
     without looking cheesy"), in place of Roboto Serif at wdth 50 and
     Merriweather. Schoolbell, the handwriting face that stood in for Susan's
     lettering, went the same day (Jacob: "i hate that old rustic font"). */
  --display: "Bitter", Rockwell, Georgia, serif;
  --body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  /* The postcard only: "Maybe it should look like it was typed" (Susan, 28 Sep). */
  --typed: "Courier Prime", "Courier New", monospace;

  --f-strip: max(24px, calc(32 * var(--u)));    /* strip labels: "Good music further ahead" 323 wide on the Home board */
  --f-hand: max(17px, calc(20 * var(--u)));     /* Polaroid captions, the footer line */
  --f-song: max(19px, calc(23 * var(--u)));     /* song titles on the Tune In labels */
  --f-h3: max(22px, calc(24 * var(--u)));       /* Book Rustic Roads */
  --f-body: max(15px, calc(14 * var(--u)));
  --lh-body: 1.45;
  --f-small: max(13px, calc(12.5 * var(--u)));
  --f-nav: max(17px, calc(21 * var(--u)));
  --f-btn: max(15px, calc(17 * var(--u)));

  /* Paper. Susan's boards are drawn on the supplied cream paper; since draft 3
     it is shown off-white, through this filter rather than a new file, so
     the torn edges stay the supplied ones. */
  --off-white: grayscale(0.85) brightness(1.1);
  /* Her photo tint, for the prints she did not tint herself (Robert, the
     radio). Solved against her own tinted files, whose four luminance bands
     average #141e2f #546470 #959da2 #e0dfdf; this gives #151719 #596068
     #a1adbd #f3f8fd on the same grey ramp. */
  --tint: grayscale(1) sepia(0.6) hue-rotate(175deg) saturate(0.7);
  /* The band photos' Polaroid colour (2 Oct). Draft 6's saturate(0.6) with a
     grey wash left them warm, blue minus red -3 to -39 on the page, and
     Susan: "a bit to current, not the Polaroid feel". Her own blue versions
     (1 Oct) measure +32 to +65, and she asked "Is it too much? Don't want to
     look like the Blue Man group". This lands them at -14 to +12, beside the
     Home prints' +4 and +7 on the page. */
  --aged: saturate(0.45) contrast(0.97) brightness(1.02);
  --aged-wash: rgb(90 140 190 / 0.55);

  /* --- Rhythm (SPEC.md, "Draft 2, rhythm") ------------------------------- */
  --gap-sec: calc(56 * var(--u));      /* board to board: The Band, polaroid row -> Tune In */
  --pad-sheet: calc(34 * var(--u));    /* cream sheet inner */
  --shadow: 0 calc(4 * var(--u)) calc(10 * var(--u)) rgb(0 0 0 / 0.35);
}

/* No bleed: one 1200 column. */
.site-header, main, .site-footer { max-width: 1200px; margin-inline: auto; }

/* A minimal reset. Everything else belongs to the design. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure, blockquote, ul { margin: 0; }
a { color: inherit; }

body {
  background: #1d1f22;
  color: var(--ink);
  font: var(--f-body) / var(--lh-body) var(--body);
  -webkit-font-smoothing: antialiased;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--paper); color: var(--black); padding: 10px 14px;
}
.skip:focus { left: 12px; top: 12px; }

:where(a, button, input, textarea):focus-visible {
  outline: 3px solid var(--steel);
  outline-offset: 3px;
}

/* ------------------------------------------------------------ header --- */
/* The Home board: the small shield on the left, the four links in Susan's
   hand on the right, the current page highlighted in the logo's blue. */

.site-header {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: calc(24 * var(--u));
  min-height: calc(58 * var(--u));
  padding-inline: calc(40 * var(--u)) calc(50 * var(--u));
  background: #f2f1ee;   /* paper-cream through --off-white, averaged: the header is not filtered, or the logo and the nav chip would lose their blue */
  box-shadow: 0 calc(3 * var(--u)) calc(8 * var(--u)) rgb(0 0 0 / 0.35);
}
.brand {
  flex: none;
  width: calc(76 * var(--u));
  min-width: 56px;
  padding-block: calc(6 * var(--u));
}
.brand img { width: 100%; }
.nav { margin-left: auto; }
.nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: calc(18 * var(--u));
}
.nav a {
  display: block;
  padding: calc(4 * var(--u)) calc(12 * var(--u));
  font: var(--f-nav) / 1.2 var(--body);
  text-decoration: none;
  color: var(--black);
}
.nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* The current page on a torn swatch of cranberry, the route's colour, since
   29 Sep: the site's one warm colour on every page, so the blue is the
   logo's alone (Jacob, from ChatGPT's colour review). White type: black on
   it measured under 4.5:1. */
.nav a[aria-current="page"] {
  background: url("/assets/img/paper-cranberry.webp") center / 100% 100% no-repeat;
  color: #fff;
}
.nav-toggle { display: none; }

/* -------------------------------------------------------------- board --- */
/* The map everything is pinned to, shown at 1200, the column's width, so a
   whole sheet is on screen (Jacob: "lets get more of the map visible so its
   smaller"), repeating down the page. This said it was ChatGPT's San Mateo
   coast map until 1 Oct, two days after that map was dropped. */
/* The map is the highway sheet Susan sent (552303, 29 Sep), in her own
   brighter edit of it (30 Sep, "more color"), in its own colours. Draft 5
   showed it beside a copy faded to tan; Susan chose the colour one ("I think
   the tan map seems a bit bland"), Jacob agreed, and the tan went on 1 Oct. */
:root { --map-img: url("/assets/img/map-susan-highway.webp"); --map-h: 834px; }   /* 1112 x 1200/1600 */
/* The band's colour photos are aged to sit with the Home prints
   (Jacob, 30 Sep: "look older and faded, kind of like the images on the
   homepage"): colour drained, blacks lifted, and a blue-grey wash over the
   window, since those prints are cool and faded. Draft 5's other look
   tinted them to near black and white, and Susan wrote "I don't
   really like the black and white on the band photos with the colored map
   ... I thought the tinted photos would look nice." */
.members .polaroid--tint > img:first-child { filter: var(--aged); }
.members .polaroid--tint::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 7.1%; left: 7.57%; width: 85%; height: 72.35%;   /* the photo's window */
  background: var(--aged-wash);
  mix-blend-mode: soft-light;
  pointer-events: none;
}
/* Members whose subject sits off centre in a landscape file. */
.members li:nth-child(2) img { object-position: 46% 50%; }
.members li:nth-child(3) img { object-position: 38% 50%; }
/* Richard's file is taller than the window, and centred it cut the top of
   his head (Susan, 30 Sep: "The drummer has his head cut off a bit"). */
.members li:nth-child(5) img { object-position: 50% 0%; }

main {
  position: relative;
  overflow: hidden;
  /* Where one sheet of map meets the next, a soft shadow along the
     join, so the repeat reads as sheets overlapping rather than a cut. */
  background:
    repeating-linear-gradient(to bottom, rgb(0 0 0 / 0.28) 0, rgb(0 0 0 / 0) 9px, rgb(0 0 0 / 0) var(--map-h)),
    var(--map) var(--map-img) center top / 1200px auto repeat-y;
  padding: calc(34 * var(--u)) 0 calc(60 * var(--u));
}

.row { position: relative; margin-top: var(--gap-sec); }
/* Room under each board for the tilt: a rotated strip or Polaroid reaches a
   few px past its own box. 17 at most since 28 Sep: at 768 Our Music's
   "Different Roads, Different Stories" strip, one line tilted 4deg, reached
   3 past the old 14 (check:derived). */
main > section { padding-bottom: max(18px, calc(16 * var(--u))); }
.row:first-child { margin-top: 0; }
.w-530 { width: calc(530 * var(--u)); margin-inline: auto; }
.w-600 { width: calc(600 * var(--u)); margin-inline: auto; }
.w-730 { width: calc(730 * var(--u)); margin-inline: auto; }

/* Pins: gone since draft 5 (Susan, 29 Sep: "Not sure if the push pins are
   working, they look like they are just floating so maybe remove them"). */

/* ------------------------------------------------------------ strip --- */
/* A torn strip of cream paper with one line of Susan's lettering on it:
   "All roads lead to Americana Music", "Our Music". Used for every heading
   the boards draw. No tape since 1 Oct (Susan, 30 Sep: "I don't think the
   tape adds much"). */

.strip {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding: calc(18 * var(--u)) calc(44 * var(--u)) calc(20 * var(--u));
  background: url("/assets/img/paper-cream.webp") center / 100% 100% no-repeat;
  filter: var(--off-white) drop-shadow(var(--shadow));
  rotate: var(--tilt, -1deg);
  font: 600 var(--f-strip) / 1.2 var(--display);   /* 1.2: a strip that wraps on a phone needs 1.15 at least (MOBILE.md 2) */
  color: var(--black);
  text-align: center;
  text-decoration: none;
  text-wrap: balance;
}
a.strip:hover { text-decoration: underline; text-underline-offset: 5px; }

/* ------------------------------------------------------------ sheet --- */
/* A cream sheet taped to the map, for anything longer than a line. */

.sheet {
  position: relative;
  z-index: 3;
  padding: var(--pad-sheet) calc(40 * var(--u)) calc(30 * var(--u));
  filter: drop-shadow(var(--shadow));
}
/* The paper is a layer of its own, so --off-white greys the paper and not
   the logo on the business card sitting on it. */
.sheet::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: url("/assets/img/paper-cream.webp") center / 100% 100% no-repeat;
  filter: var(--off-white);
}
.sheet p { max-width: 62ch; }
.sheet p + p { margin-top: calc(12 * var(--u)); }
.sheet--center { text-align: center; }
.sheet--center p { margin-inline: auto; }

/* --------------------------------------------------------- polaroid ---- */
/* The frame is a supplied image with a transparent window; the photo sits
   behind it in that window (window measured off the frame file:
   portrait 7.57 / 7.10 / 7.43 / 20.55 %, landscape 5.67 / 8.52 / 5.78 / 22.37 %). */

.polaroid {
  position: relative;
  aspect-ratio: 700 / 944;
  filter: drop-shadow(var(--shadow));
  rotate: var(--tilt, 0deg);
}
.polaroid--wide { aspect-ratio: 900 / 657; }
.polaroid > img:first-child {
  position: absolute;
  top: 7.1%;
  left: 7.57%;
  width: 85%;
  height: 72.35%;
  object-fit: cover;
}
.polaroid--wide > img:first-child {
  top: 8.52%;
  left: 5.67%;
  width: 88.55%;
  height: 69.11%;
}
/* Susan's tint (--tint), for a print she did not tint herself. */
.polaroid--tint > img:first-child { filter: var(--tint); }
.polaroid::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/img/polaroid-portrait.webp") center / 100% 100% no-repeat;
  filter: var(--off-white);
}
.polaroid--wide::after { background-image: url("/assets/img/polaroid-landscape.webp"); }
.polaroid figcaption,
.polaroid .cap {
  position: absolute;
  z-index: 1;
  left: 8%;
  right: 8%;
  bottom: 2%;
  height: 18%;
  display: grid;
  place-items: center;
  font: 400 var(--f-hand) / 1.15 var(--display);
  color: var(--black);
  text-align: center;
}
a.polaroid { display: block; text-decoration: none; }
a.polaroid:hover .cap { text-decoration: underline; text-underline-offset: 4px; }

/* ---------------------------------------------------------- Home hero --- */
/* The Home board (home-1200.jpg): a strip, the big shield, a Polaroid either
   side of it. Draft 4 (28 Sep): both Polaroids upright ("both photos should
   be vertical to match"), so both side columns are the right Polaroid's
   measured 255, and both sit on the route. */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: calc(255 * var(--u)) minmax(0, 1fr) calc(255 * var(--u));
  grid-template-rows: auto auto;
  align-items: start;
  padding-inline: calc(30 * var(--u));
  padding-bottom: calc(40 * var(--u));
}
.hero > .strip { grid-column: 1 / -1; grid-row: 1; z-index: 1; }
/* The shield is wider than the middle column: it spans all three and the
   Polaroids sit over its edges, as they do on the board. */
.hero-logo {
  position: relative;
  z-index: 2;
  grid-column: 1 / -1;
  grid-row: 2;
  width: calc(382 * var(--u));
  justify-self: center;
  margin-top: calc(28 * var(--u));
  filter: drop-shadow(0 calc(5 * var(--u)) calc(8 * var(--u)) rgb(0 0 0 / 0.45));
}
.hero-logo img { width: 100%; }
.hero .shot-l { grid-column: 1; grid-row: 2; margin-top: calc(96 * var(--u)); --tilt: -4deg; z-index: 4; }
.hero .shot-r { grid-column: 3; grid-row: 2; margin-top: calc(66 * var(--u)); --tilt: 5deg; z-index: 4; }
/* The guitar file is landscape; upright, the guitar and the hubcap are the
   picture, so the crop keeps them (the guitar sits at 20-45% of the width). */
.hero .shot-l > img:first-child { object-position: 36% 50%; }


/* ------------------------------------------------- Our Music: postcard -- */
/* The Our Music board (board-our-music.jpg): the heading strip across the
   top; the postcard on the left (530 of the sheet's 941); the coastline
   Polaroid right. "Different Roads, Different Stories" came out from under
   it on 1 Oct (Susan, 30 Sep: "Not sure it adds much"). */

.intro {
  display: grid;
  grid-template-columns: calc(560 * var(--u)) 1fr;   /* 560: the postcard landscape at 3:2 ("so it looks like a real postcard") */
  gap: calc(20 * var(--u)) calc(40 * var(--u));
  align-items: start;
  padding-inline: calc(30 * var(--u));
}
.intro > .strip:first-child { grid-column: 1 / -1; }
.intro .postcard { grid-column: 1; grid-row: 2; margin-top: calc(40 * var(--u)); rotate: -1deg; }
.intro .polaroid { grid-column: 2; grid-row: 2; width: calc(227 * var(--u)); justify-self: center; --tilt: 2deg; }

/* The back of the vintage postcard Susan sent (28 Sep, s-l1200.jpg: "Can
   we try one of these postcards?"), at its own 1092:686. The card prints its
   own POST CARD, divider and stamp box, so the message fills the left half
   and the address sits in the middle of the right ("Move up 'somewhere west
   of ordinary' to the middle of the address section"). */
.postcard {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  aspect-ratio: 1092 / 686;
  padding: 7% 0 6%;
  filter: drop-shadow(var(--shadow));
}
.postcard::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: url("/assets/img/postcard-back.webp") center / 100% 100% no-repeat;
  filter: saturate(0.6);
}
.pc-head { display: none; }   /* the card prints it; shown on the phone's plain card */
.pc-msg {
  align-self: center;
  padding: 0 7% 0 8%;
  font: 400 var(--f-body) / 1.5 var(--typed);
  color: var(--black);
}
.pc-addr {
  position: relative;
  display: grid;
  align-content: center;
  padding: 26% 0 0 16%;   /* clear of the printed POST CARD, which sits at 33% of the card's height */
}
.pc-addr img { position: absolute; right: 3%; top: -6%; width: 44%; opacity: 0.7; }
.pc-hand { font: 400 var(--f-h3) / 1.25 var(--typed); color: var(--black); }

/* -------------------------------------------------- The Band: members -- */
/* The Band board (board-the-band.jpg): the heading strip, a sheet carrying
   the covers line, and the five Polaroids in a row across the sheet. */

.band-note { margin-top: calc(30 * var(--u)); }
.members {
  list-style: none;
  margin-top: calc(40 * var(--u));
  padding: 0 calc(8 * var(--u));
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: calc(10 * var(--u));
}
.members li:nth-child(odd) .polaroid { --tilt: -3deg; }
.members li:nth-child(even) .polaroid { --tilt: 2.5deg; }
.members li:nth-child(3) .polaroid { --tilt: 0deg; }

/* ---------------------------------------------------------- Tune In ---- */
/* Songs on torn paper labels, as the Band board draws them either side of
   the radio: title in Susan's hand, the band's name, and a player. */

.tune {
  list-style: none;
  padding: 0;
  margin-top: calc(26 * var(--u));
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: calc(26 * var(--u)) calc(34 * var(--u));
}
.song {
  position: relative;
  width: calc(236 * var(--u));
  padding: calc(30 * var(--u)) calc(26 * var(--u)) calc(26 * var(--u));
  background: url("/assets/img/note-torn.webp") center / 100% 100% no-repeat;
  filter: var(--off-white) drop-shadow(var(--shadow));
  rotate: var(--tilt, 0deg);
  text-align: center;
}
.tune > li:nth-child(odd) .song { --tilt: -2deg; }
.tune > li:nth-child(even) .song { --tilt: 2deg; }
.song h3 { font: 600 var(--f-song) / 1.25 var(--display); color: var(--black); }
.song .by { font: 400 var(--f-small) / 1.3 var(--body); color: #4a4440; }
.player {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "btn seek" "btn time";
  align-items: center;
  column-gap: calc(8 * var(--u));
  margin-top: calc(10 * var(--u));
  text-align: left;
}
.player button {
  grid-area: btn;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.player button img { width: 100%; }
.player input[type="range"] {
  grid-area: seek;
  width: 100%;
  min-width: 0;
  accent-color: var(--black);
  height: 20px;
  margin: 0;
}
.player time { grid-area: time; font-size: var(--f-small); font-variant-numeric: tabular-nums; }

/* The car radio, labelled "Tune In" in its caption like the other
   Polaroids (Susan, 30 Sep: "typed on the bottom of the photo like the
   others"), the three songs in one row under it. */
.radio { width: calc(330 * var(--u)); margin-inline: auto; --tilt: -1.5deg; }
/* A square file in a 1.76:1 window: the dial and buttons sit in the upper
   two thirds of it, the dashboard below is empty black. */
.radio img { object-position: 50% 36%; }
.radio h2 { font: inherit; }
.tune { margin-top: calc(30 * var(--u)); flex-wrap: nowrap; align-items: flex-start; }

/* ---------------------------------------------------------- Book Us --- */
/* Its own page since 28 Sep: the heading strip, Susan's instruments photo
   above the booking card. Smaller since 1 Oct, so at 1200 the page fits on
   one sheet of map (834) without it repeating (Susan, 30 Sep: "make the
   photo of the instruments a bit smaller so then it can be on one page
   without having to repeat the map"). Bigger again on 2 Oct, and laid over
   the top of the booking sheet (Susan: "make the instrument photo a little
   bigger to overlap some on the contact information"); the overlap pays for
   the extra height. Pushed down again the same day, less overlap and
   the page a little past one sheet (Jacob: "it already requires scrolling
   so a little more is no big deal"). */

.book-photo { z-index: 4; width: calc(290 * var(--u)); margin: calc(16 * var(--u)) auto calc(-14 * var(--u)); --tilt: -2deg; }   /* above .sheet's 3; 290 wide, 14 over the sheet's top (60, then 36, were too much: Jacob 2 Oct). The page runs a little past one sheet of map at 1200, by Jacob's choice */

/* ---------------------------------------------------------- button ---- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: calc(10 * var(--u)) calc(28 * var(--u));
  min-height: 44px;
  background: var(--navy);
  border: 2px solid rgb(255 255 255 / 0.35);
  border-radius: calc(3 * var(--u));
  box-shadow: var(--shadow);
  color: #fff;
  font: 600 var(--f-btn) / 1 var(--display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { background: var(--navy-deep); }

/* ---------------------------------------------------------- booking --- */
/* The heading and Susan's line on the left, her business card on the right
   (27 Sep, her drawing IMG_7482): the logo centred, the two names and
   phones in the lower corners in her hand, on light grey. */

.booking {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);   /* the card needs two phone numbers side by side in Susan's hand */
  gap: calc(14 * var(--u)) calc(30 * var(--u));
  align-items: center;
}
.booking h2 {
  font: 600 var(--f-h3) / 1.1 var(--display);
  color: var(--black);
  margin-bottom: calc(8 * var(--u));
}
.booking p { font-size: var(--f-small); max-width: 34ch; }
.bizcard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto;
  align-items: end;
  aspect-ratio: 3.5 / 2;   /* a business card */
  padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u));
  background: var(--card);
  box-shadow: var(--shadow);
  rotate: 1.5deg;
  position: relative;
}
/* The road behind the logo, edge to edge, as her drawing has it (28 Sep:
   "The road stripe behind the logo on the business card"): asphalt with a
   white line along each edge and a dashed one down the middle, across the
   logo's lower half (her drawing: 45-76% of the card's height). */
.bizcard::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 40%;
  height: 26%;
  background:
    repeating-linear-gradient(90deg, #f1f1ee 0 5%, transparent 5% 9%) center / 100% max(2px, calc(3 * var(--u))) no-repeat,
    linear-gradient(#f1f1ee, #f1f1ee) center 14% / 100% max(1px, calc(1.5 * var(--u))) no-repeat,
    linear-gradient(#f1f1ee, #f1f1ee) center 86% / 100% max(1px, calc(1.5 * var(--u))) no-repeat,
    #262626;
}
.bizcard > * { position: relative; }
.bizcard img { grid-column: 1 / -1; justify-self: center; align-self: center; width: 48%; }
.booking .bizcard-who { font: max(15px, calc(17 * var(--u))) / 1.3 var(--body); color: var(--black); max-width: none; }
.bizcard-who + .bizcard-who { text-align: right; }
/* The names in the logo's lettering (Susan, 30 Sep: "Can we have the font
   from our logo be the same for our names on the business card?"). The logo
   is outlines, no font in the PDF; its condensed slab is closest, of the
   Google faces font-match scored, to Stint Ultra Condensed. */
.bizcard-name { font: 400 1.5em / 1 "Stint Ultra Condensed", var(--display); letter-spacing: 0.03em; text-transform: uppercase; }
.bizcard a { text-decoration: none; white-space: nowrap; }
.bizcard a:hover { text-decoration: underline; }

/* 404: two ways back, centred under the heading. */
.lost-note { margin-top: calc(30 * var(--u)); }
.lost { margin-top: calc(26 * var(--u)); display: flex; flex-wrap: wrap; justify-content: center; gap: calc(16 * var(--u)); }

/* ------------------------------------------------------------ footer --- */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(14 * var(--u)) calc(30 * var(--u));
  padding: calc(18 * var(--u)) calc(48 * var(--u)) calc(16 * var(--u)) calc(45 * var(--u));
  background: var(--charcoal) url("/assets/img/texture-charcoal.webp") center / cover;
  color: var(--on-dark);
}
.footer-brand { display: flex; align-items: center; gap: calc(14 * var(--u)); text-decoration: none; }
.footer-brand img { width: calc(76 * var(--u)); min-width: 56px; }
.footer-brand span { font: 400 var(--f-hand) / 1.2 var(--display); }
.footer-nav { margin-left: auto; text-align: right; }
.footer-nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: calc(8 * var(--u)) calc(34 * var(--u));
  font-size: var(--f-small);
}
.footer-nav a { text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }
.copy { margin-top: calc(10 * var(--u)); font-size: max(12px, calc(11.5 * var(--u))); }
.copy a { margin-left: 0.6em; text-decoration: underline; text-underline-offset: 2px; }
/* The About page's credit strip: the footer's own ground, directly under it. */
.footer-credit {
  max-width: 1200px;
  margin: calc(-10 * var(--u)) auto 0;   /* up into the footer's bottom padding */
  padding: 0 calc(48 * var(--u)) calc(14 * var(--u)) calc(45 * var(--u));
  background: var(--charcoal) url("/assets/img/texture-charcoal.webp") center bottom / cover;
  color: var(--on-dark);
  text-align: right;
  font-size: max(12px, calc(11.5 * var(--u)));
}
.footer-credit a { text-underline-offset: 3px; }

/* ============================================================ PHONE ==== */
/* Below 1100 the boards stack: one column, every sheet the width of the
   screen, the Polaroids in pairs. Sizes stop scaling with --u and take their
   floors. */

@media (max-width: 1100px) {
  :root { --gap-sec: 34px; --pad-sheet: 26px; }

  .site-header { flex-wrap: wrap; padding: 8px 16px; gap: 10px; }
  .brand { width: 58px; padding: 0; }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    min-height: 44px;
    padding: 0 16px;
    background: var(--navy);
    color: #fff;
    border: 0;
    border-radius: 3px;
    font: 600 16px / 1 var(--display);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .nav { flex-basis: 100%; display: none; }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; gap: 2px; padding-bottom: 8px; }
  .nav a { padding: 10px 14px; font-size: 21px; }

  main { padding: 26px 16px 34px; }
  .w-530, .w-600, .w-730 { width: 100%; }
  .strip { padding: 14px 34px 16px; }

  .hero { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; padding: 0 6px 26px; }   /* 26: the 6deg Polaroid's corner */
  .hero > .strip { grid-column: 1 / -1; grid-row: 1; }
  .hero-logo { grid-column: 1 / -1; grid-row: 2; width: min(78%, 340px); margin-top: 18px; }
  /* One above the other, both the right Polaroid's size, zig-zagging. */
  .hero .shot-l { grid-column: 1 / -1; grid-row: 3; justify-self: start; width: min(62%, 280px); margin: 40px 0 0 4%; }
  .hero .shot-r { grid-column: 1 / -1; grid-row: 4; justify-self: end; width: min(62%, 280px); margin: 30px 4% 0 0; }

  .intro { grid-template-columns: minmax(0, 1fr); padding-inline: 0; }
  /* Same selectors as the desktop placements, or they win (MOBILE.md 12). */
  .intro .postcard, .intro .polaroid { grid-column: 1; grid-row: auto; }
  .intro .postcard { margin-top: 8px; }
  .intro .polaroid { width: min(70%, 280px); margin-top: 16px; }
  /* Stacked, the card back cannot hold the message at its own shape, so the
     phone gets the plain paper card with its own printed head. */
  .postcard { grid-template-columns: minmax(0, 1fr); gap: 18px; aspect-ratio: auto; padding: 26px 22px 26px; }
  .postcard::after { background-image: url("/assets/img/paper-cream.webp"); filter: var(--off-white); }
  .pc-head { display: block; font: 400 var(--f-small) / 1 var(--typed); letter-spacing: 0.22em; text-transform: uppercase; color: #5b5550; }
  .pc-msg { padding: 0; }
  .pc-addr { padding: 92px 0 0;   /* clear of the postmark: 12 + 150 x 237/520 = 80, plus 12 */ border-top: 1px solid rgb(40 33 30 / 0.35); }
  .pc-addr img { width: 150px; top: 12px; right: 0; }

  .members { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 0; }
  .members li:last-child:nth-child(odd) { grid-column: 1 / -1; width: 50%; justify-self: center; }

  .song { width: min(100%, 300px); padding: 26px 24px 24px; }
  .radio { width: min(80%, 300px); }
  .tune { flex-wrap: wrap; }
  .book-photo { width: min(90%, 420px); margin: 30px auto 34px; }
  .booking { grid-template-columns: 1fr; }
  .bizcard { width: min(100%, 420px); justify-self: center; padding: 12px 16px; }

  .site-footer { flex-direction: column; align-items: flex-start; padding: 22px 16px; }
  .footer-nav { margin-left: 0; text-align: left; }
  .footer-nav ul { justify-content: flex-start; gap: 10px 22px; }
  .footer-credit { text-align: left; padding: 0 16px 18px; }
}

/* ====================================================== THE REVIEW LOOK ==== */
/* ChatGPT's desktop, tablet and mobile reviews of draft 7 (2 Oct 2026,
   design/chatgpt-*-feedback/feedback.md), shown beside draft 7 for Susan to
   compare, on Jacob's ask: on at ?look=new (site.js), draft 7 untouched
   without it. Nothing here is measured off her boards. Each value is the
   review's ask applied to draft 7's own (a shield "20-25% smaller" is 382 ->
   300), and the comment says which ask. Left out on purpose, as decided
   before: black-and-white band photos (Susan, 30 Sep, wants them tinted),
   a handwritten face (Jacob, 27 Sep), pins (Susan, 29 Sep) and tape (1 Oct).
   When she chooses, the winner is folded into the rules above and this
   block and the switch go. */

/* Every width. */
/* The footer: dark charcoal rather than near black, and a smaller tagline. */
:root[data-look="new"] .site-footer,
:root[data-look="new"] .footer-credit {
  background-image: linear-gradient(rgb(80 84 90 / 0.45), rgb(80 84 90 / 0.45)), url("/assets/img/texture-charcoal.webp");
}
:root[data-look="new"] .footer-brand span { font-size: max(15px, calc(16 * var(--u))); }
:root[data-look="new"] .copy a { margin-left: 0; }
/* The song players: smaller, charcoal instead of black. The button keeps
   its 44px target; only the drawn circle shrinks. */
:root[data-look="new"] .player button img { width: 80%; margin: auto; opacity: 0.82; }
:root[data-look="new"] .player input[type="range"] { accent-color: #3d4045; }
:root[data-look="new"] .song h3 { font-size: max(18px, calc(21 * var(--u))); }
:root[data-look="new"] .song .by { margin-top: 2px; }
/* The band crops: tighter on Robert, Steve and Richard, so the five faces
   are closer in size. 1.15 at most: the window is 85% of the frame, so a
   1.15 photo still ends under the frame's own border. */
:root[data-look="new"] .members li:nth-child(2) img { scale: 1.14; transform-origin: 46% 30%; }
:root[data-look="new"] .members li:nth-child(4) img { scale: 1.12; transform-origin: 50% 20%; }
:root[data-look="new"] .members li:nth-child(5) img { scale: 1.15; transform-origin: 50% 12%; object-position: 50% 10%; }
/* "More like a scrapbook": small, mismatched tilts and heights, so no two
   pieces of paper sit the same. */
:root[data-look="new"] .members li:nth-child(1) .polaroid { --tilt: -2.5deg; }
:root[data-look="new"] .members li:nth-child(2) .polaroid { --tilt: 1.5deg; translate: 0 calc(16 * var(--u)); }
:root[data-look="new"] .members li:nth-child(3) .polaroid { --tilt: -1deg; translate: 0 calc(-6 * var(--u)); }
:root[data-look="new"] .members li:nth-child(4) .polaroid { --tilt: 3deg; translate: 0 calc(12 * var(--u)); }
:root[data-look="new"] .members li:nth-child(5) .polaroid { --tilt: -1.5deg; translate: 0 calc(-2 * var(--u)); }
:root[data-look="new"] .tune > li:nth-child(1) .song { --tilt: -2.5deg; }
:root[data-look="new"] .tune > li:nth-child(2) .song { --tilt: 1deg; translate: 0 calc(14 * var(--u)); }
:root[data-look="new"] .tune > li:nth-child(3) .song { --tilt: 2.5deg; translate: 0 calc(4 * var(--u)); }
:root[data-look="new"] .intro > .strip:first-child { --tilt: 1.5deg; translate: calc(-36 * var(--u)) 0; }
:root[data-look="new"] .band-note { rotate: 0.6deg; }
:root[data-look="new"] .radio { --tilt: 2deg; }
/* The postcard: a little smaller, the typed message looser. */
:root[data-look="new"] .pc-msg { line-height: 1.62; }

@media (min-width: 1101px) {
  /* The header: about a fifth lower, the logo smaller, warm off-white. The
     current page's swatch a little taller and tilted, so it reads as a
     stroke rather than a box. */
  :root[data-look="new"] .site-header { min-height: calc(46 * var(--u)); background: #ece8e0; }
  :root[data-look="new"] .brand { width: calc(62 * var(--u)); padding-block: calc(4 * var(--u)); }
  :root[data-look="new"] .nav a[aria-current="page"] { padding-block: calc(7 * var(--u)); rotate: -1.5deg; }
  /* The heading strips: about a tenth smaller, wider and flatter paper. */
  :root[data-look="new"] .strip { font-size: max(22px, calc(29 * var(--u))); padding: calc(13 * var(--u)) calc(52 * var(--u)) calc(15 * var(--u)); }
  /* Home: the shield 382 -> 300 ("20-25% smaller"), the Polaroids in
     toward it, and no longer mirror images: the right one narrower and
     higher, the two at unequal angles. */
  :root[data-look="new"] .hero { padding-inline: calc(120 * var(--u)); }
  /* Room above the footer for the staggered paper. */
  :root[data-look="new"] main { padding-bottom: calc(84 * var(--u)); }
  :root[data-look="new"] .hero-logo { width: calc(300 * var(--u)); margin-top: calc(22 * var(--u)); }
  :root[data-look="new"] .hero .shot-l { margin-top: calc(104 * var(--u)); --tilt: -5deg; }
  :root[data-look="new"] .hero .shot-r { width: 90%; justify-self: end; margin-top: calc(58 * var(--u)); --tilt: 3deg; }
  /* Our Music: the postcard about 12% smaller, moved down a little. */
  :root[data-look="new"] .intro { grid-template-columns: calc(494 * var(--u)) 1fr; }
  :root[data-look="new"] .intro .postcard { margin: calc(52 * var(--u)) 0 0 calc(24 * var(--u)); rotate: -2deg; }
  :root[data-look="new"] .pc-msg { font-size: max(14px, calc(13 * var(--u))); }
  /* The Band: the covers sheet narrower (600 -> 500) and closer to the
     photos, the title set off its axis. */
  :root[data-look="new"] .band-note { width: calc(500 * var(--u)); margin-top: calc(22 * var(--u)); }
  :root[data-look="new"] .members { margin-top: calc(28 * var(--u)); }
  :root[data-look="new"] .strip:has(+ .band-note) { --tilt: -2deg; translate: calc(30 * var(--u)) 0; }
  /* The footer: about a fifth shorter. */
  :root[data-look="new"] .site-footer { padding-block: calc(12 * var(--u)) calc(10 * var(--u)); }
  :root[data-look="new"] .footer-brand img { width: calc(62 * var(--u)); }
  :root[data-look="new"] .copy { margin-top: calc(6 * var(--u)); }
}

@media (max-width: 1100px) {
  :root[data-look="new"] { --gap-sec: 24px; }
  /* The header: the logo up, the MENU button down, so they weigh the same. */
  :root[data-look="new"] .site-header { padding: 6px 18px; background: #ece8e0; }
  :root[data-look="new"] .brand { width: 64px; }
  :root[data-look="new"] .nav-toggle { padding: 0 13px; background: #2f4a61; border-radius: 6px; font-size: 15px; letter-spacing: 0.04em; }
  /* Paper keeps the map showing either side of it. */
  :root[data-look="new"] main { padding-inline: 20px; padding-bottom: 46px; }
  :root[data-look="new"] .strip { width: fit-content; max-width: 92%; padding: 12px 30px 14px; }
  :root[data-look="new"] .w-600 { width: min(100%, 560px); }
  /* Home: a smaller shield and the two Polaroids pulled up under it,
     overlapping its lower edge, so the hero is one picture again. */
  :root[data-look="new"] .hero { padding-bottom: 30px; }
  :root[data-look="new"] .hero-logo { width: min(66%, 300px); margin-top: 16px; }
  /* Floors of 200 and 180 so each caption stays on one line at 320; the
     right card overlaps the left by 22 from 407 up, easing to none at 320,
     where the floors push the two cards across each other. */
  :root[data-look="new"] .hero .shot-l { width: min(max(200px, 60%), 270px); margin: -34px 0 0 2%; --tilt: -5deg; }
  :root[data-look="new"] .hero .shot-r { width: min(max(180px, 52%), 240px); margin: max(-22px, min(6px, calc(100px - 30vw))) 2% 0 0; --tilt: 4deg; }
  /* Our Music: the postcard inset from the edges and tilted, the two
     Polaroids smaller and off centre, the gaps between them tighter. */
  :root[data-look="new"] .intro .postcard { width: calc(100% - 12px); justify-self: center; rotate: -1deg; }
  :root[data-look="new"] .pc-msg { line-height: 1.55; }
  :root[data-look="new"] .pc-addr { padding-top: 70px; }   /* clear of the smaller postmark: 10 + 120 x 237/520 = 65, plus 5 */
  :root[data-look="new"] .pc-addr img { width: 120px; top: 10px; }
  :root[data-look="new"] .intro .polaroid { width: min(62%, 250px); margin-top: 12px; translate: 8% 0; --tilt: 3deg; }
  :root[data-look="new"] .radio { width: min(72%, 280px); translate: -5% 0; }
  /* The Band: real gutters, the sheet narrower. */
  :root[data-look="new"] .members { gap: 26px 22px; padding-inline: 6px; max-width: 600px; margin-inline: auto; }
  /* The footer: the four links a 2 x 2 grid of 44px rows. */
  :root[data-look="new"] .site-footer { gap: 12px; padding: 16px 20px; }
  :root[data-look="new"] .footer-nav ul { display: grid; grid-template-columns: repeat(2, auto); gap: 0 28px; font-size: 16px; }
  :root[data-look="new"] .footer-nav a { display: flex; align-items: center; min-height: 44px; }
  :root[data-look="new"] .copy { margin-top: 6px; }
}
/* Tablet: the footer keeps its two columns, and the songs go two and one. */
@media (min-width: 640px) and (max-width: 1100px) {
  :root[data-look="new"] .site-footer { flex-direction: row; align-items: center; }
  :root[data-look="new"] .footer-nav { margin-left: auto; }
  :root[data-look="new"] .tune { max-width: 640px; margin-inline: auto; }
  :root[data-look="new"] .song { width: 280px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}