/* fonts, served from this site (no request to google): The Seasons (her wordmark face) for headlines, Jost (SIL Open Font License 1.1) for text */
  @font-face { font-family: "The Seasons"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/TheSeasons-Light.woff") format("woff"); }
  @font-face { font-family: "The Seasons"; font-style: italic; font-weight: 300; font-display: swap; src: url("fonts/TheSeasons-LightItalic.woff") format("woff"); }
  @font-face { font-family: "The Seasons"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/TheSeasons-Regular.woff") format("woff"); }
  @font-face { font-family: "The Seasons"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/TheSeasons-Italic.woff") format("woff"); }
  @font-face { font-family: "Jost"; font-style: normal; font-weight: 300 500; font-display: swap; src: url("fonts/web/jost-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
  @font-face { font-family: "Jost"; font-style: normal; font-weight: 300 500; font-display: swap; src: url("fonts/web/jost-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; }


/* mölly · the issue. One stylesheet for every page.
   The site reads as a magazine: paper and ink from the EPK, hairline rules, a running header (the folio)
   on every section, numbered titles, captions under photographs. Photographs carry the colour. */

  /* ---------- tokens (the brand kit, oct 2026: "mölly - static sites") ---------- */
  :root {
    --paper:   #EAE1CF;   /* warm sand, from her earlier site; the page also carries its grain (grain-bg.jpg) */
    --paper-2: #E3D8C4;
    --ink:     #4A3A2B;   /* headings */
    --text:    #5B4938;   /* running text */
    --taupe:   #6E5C48;   /* muted; the kit's #86735E deepened to pass AA on clay */
    --ochre:   #64513D;   /* labels */
    --rule:    #CFC5B6;   /* the earlier site's hairline, rgba(45,25,27,.14) on sand */
    --accent:  #E3C4C6;   /* dusty pink: hovers */
    --night:   #1A1614;   /* buttons */
    --cream:   #FFF6E8;   /* type on photographs */
    /* from her "mölly mood" board: sprinkled, each with one job */
    --gold:    #9C7433;   /* gold line art (the moon dividers, the footer sun, the crest) and every page and section title; 3.3:1 on paper: graphics and large type only */
    --amber:   #9A5F28;   /* golden-hour light: what is chosen or touched (tab lines, the email / text choice, link and icon hovers); 4:1, never small text */
    --alert:   #8A5220;   /* the amber deepened for words: what a field still needs (4.9:1 on paper); its line stays --amber */
    --peach:   #F0D5BE;   /* the sunset horizon: the glow behind stay in the loop */
    /* buttons and icons in gold (Sam, 2026-10-22), each gold where it reads: */
    --leaf:      #C9A45C;   /* gold leaf: the fill of the main buttons (near-black words on it, 7.7:1), icons over photos and the dark panel */
    --gold-hover: #7A5A1F;  /* hover: the brightest gold that still reads (4.9:1 on paper, 4.5:1 on the peach glow), with a gold line */
    --gold-deep: #765522;   /* deep gold: words of every button and link on paper (5.2:1); the hover fill of every boxed button */
    --serif: "The Seasons", Georgia, serif;
    --sans: "Jost", system-ui, sans-serif;
    --gutter: clamp(16px, 3.4vw, 48px);
    --max: 1240px;
    --bar: 64px;          /* the top bar */
    /* one type scale for every page (Sam, 2026-10-24: title sizes the same, content the same, sign-up prompts the same):
       --t1 every title (section heads, page heads, stay in the loop), --t2 names and leads in The Seasons (cities, set and
       press titles, privacy's sub-heads, "coming soon", the tagline, the inbox address), --body running text, --small fine print,
       --label the tracked 12px labels. Only the album numeral "22" (1.75x a title) and the menu's own word sit outside it. */
    --t1: clamp(36px, 4.4vw, 60px);
    --t2: clamp(24px, 2.2vw, 28px);   /* never under 24px: these are gold on sand (3.3:1), which only large type may be */
    --body: 16px;
    --small: 13px;
    --label: 12px;
  }

  /* ---------- base ---------- */
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: var(--bar); -webkit-text-size-adjust: 100%; }
  body { margin: 0; background: var(--paper) url("grain-bg.jpg") repeat; background-size: 320px 320px; color: var(--text); font: 300 16px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
  /* the light (Sam, 2026-10-23: "some motion to give the site life", the sand unchanged): two soft pools of light drift
     behind the content. They are fixed to the window, so the page scrolls through the light like a room in late sun.
     Transforms only; with reduced motion they simply stay where they are. */
  /* three colours (Sam, 2026-10-24: "get rid of the sea glass, but bring back the peach and honey ... peach, honey, and
     sand"): a warm peach pool and a honey pool over the sand. Blush and sea glass were tried the same day and taken out.
     A third pool, gold leaf from her kit (#E2BE52), is on trial (Sam, 2026-10-24: "experiment with a third color"). It sits
     under the other two (html::before). Gold is darker than the sand, so it stays faint (.14 at its heart) and the honey
     eased from .5 to .3 to make room: wherever any of the three pools meet, small taupe text keeps 4.5:1 and gold titles 3:1. */
  html::before, body::before, body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; border-radius: 50%; will-change: transform; }
  html::before { width: 70vmax; height: 70vmax; left: -28vmax; bottom: -36vmax;
                 background: radial-gradient(closest-side, rgba(226, 190, 82, .14), rgba(226, 190, 82, .12) 34%, rgba(226, 190, 82, .05) 64%, rgba(226, 190, 82, 0));
                 animation: light-drift-c 27s ease-in-out infinite alternate; }
  @keyframes light-drift-c { 0% { transform: translate3d(0, 0, 0) scale(1); } 25% { transform: translate3d(30vw, -60vh, 0) scale(1.2); }
                             50% { transform: translate3d(72vw, -30vh, 0) scale(.92); } 75% { transform: translate3d(56vw, -84vh, 0) scale(1.22); } 100% { transform: translate3d(20vw, -44vh, 0) scale(1); } }
  body::before { width: 90vmax; height: 90vmax; left: -32vmax; top: -38vmax;
                 background: radial-gradient(closest-side, rgba(247, 221, 197, .7), rgba(247, 221, 197, .62) 34%, rgba(247, 221, 197, .26) 64%, rgba(247, 221, 197, 0));
                 animation: light-drift-a 24s ease-in-out infinite alternate; }
  body::after { width: 72vmax; height: 72vmax; right: -30vmax; bottom: -34vmax;
                background: radial-gradient(closest-side, rgba(240, 207, 142, .3), rgba(240, 207, 142, .26) 34%, rgba(240, 207, 142, .11) 64%, rgba(240, 207, 142, 0));
                animation: light-drift-b 31s ease-in-out infinite alternate; }
  /* amped up (Sam, 2026-10-24: "amp up the animation in the background"): twice as quick, a wider loop with more turns, and
     each pool keeps its full glow further out before it fades, so its edge is seen travelling. The strength at the heart is
     unchanged: where both pools meet, small text is already at 4.5:1, so the light can move more but not glow more. */
  @keyframes light-drift-a { 0% { transform: translate3d(0, 0, 0) scale(1); } 25% { transform: translate3d(62vw, 8vh, 0) scale(1.2); }
                             50% { transform: translate3d(70vw, 64vh, 0) scale(.9); } 75% { transform: translate3d(14vw, 96vh, 0) scale(1.24); } 100% { transform: translate3d(36vw, 40vh, 0) scale(1); } }
  @keyframes light-drift-b { 0% { transform: translate3d(0, 0, 0) scale(1); } 25% { transform: translate3d(-58vw, -14vh, 0) scale(1.26); }
                             50% { transform: translate3d(-66vw, -72vh, 0) scale(.92); } 75% { transform: translate3d(-12vw, -92vh, 0) scale(1.2); } 100% { transform: translate3d(-34vw, -38vh, 0) scale(1); } }
  /* phones (Sam, 2026-10-24: the movement was hard to see there): sized from the taller side, the pools were far bigger than
     the screen and washed it evenly, so nothing seemed to move. Sized from the narrow side and drifting further, their soft
     edges now cross the screen; the colours and strength are the same as on desktop. */
  @media (max-width: 760px) {
    body::before { width: 150vmin; height: 150vmin; left: -55vmin; top: -45vmin; animation-name: light-drift-a-phone; animation-duration: 19s; }
    body::after { width: 125vmin; height: 125vmin; right: -50vmin; bottom: -40vmin; animation-name: light-drift-b-phone; animation-duration: 25s; }
    html::before { width: 120vmin; height: 120vmin; left: -50vmin; bottom: -40vmin; animation-name: light-drift-c-phone; animation-duration: 22s; }
    @keyframes light-drift-c-phone { 0% { transform: translate3d(0, 0, 0) scale(1); } 25% { transform: translate3d(40vw, -64vh, 0) scale(1.18); }
                                     50% { transform: translate3d(80vw, -34vh, 0) scale(.92); } 75% { transform: translate3d(60vw, -90vh, 0) scale(1.2); } 100% { transform: translate3d(24vw, -48vh, 0) scale(1); } }
    @keyframes light-drift-a-phone { 0% { transform: translate3d(0, 0, 0) scale(1); } 25% { transform: translate3d(78vw, 18vh, 0) scale(1.18); }
                                     50% { transform: translate3d(66vw, 70vh, 0) scale(.9); } 75% { transform: translate3d(8vw, 108vh, 0) scale(1.2); } 100% { transform: translate3d(40vw, 46vh, 0) scale(1); } }
    @keyframes light-drift-b-phone { 0% { transform: translate3d(0, 0, 0) scale(1); } 25% { transform: translate3d(-74vw, -20vh, 0) scale(1.22); }
                                     50% { transform: translate3d(-60vw, -74vh, 0) scale(.92); } 75% { transform: translate3d(-6vw, -100vh, 0) scale(1.18); } 100% { transform: translate3d(-36vw, -44vh, 0) scale(1); } }
  }
  h1, h2, h3, h4 { font-family: var(--serif); font-weight: 300; line-height: 1.05; margin: 0; color: var(--ink); }
  /* every page and section title is gold, as on the home page (Sam, 2026-10-22); item names (shows, sets, releases) stay ink */
  main h1, main h2, .mu-txt h3, .menu-word, .sheet-head h2 { color: var(--gold); }
  p { margin: 0; text-wrap: pretty; }   /* no paragraph ends on one word alone (2026-10-24 review: "favor.", "page.") */
  a { color: inherit; }
  img { max-width: 100%; height: auto; display: block; }
  button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
  :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  /* outlines are for the keyboard: after a tap or a click (issue.js notes which) nothing pressed is boxed, and phones flash nothing */
  html { -webkit-tap-highlight-color: transparent; }
  /* an open dialog holds the page still behind it (audit 2026-10-25: the page scrolled 500px under the listen panel); the gutter
     stays reserved where scrollbars take room, so nothing shifts sideways when one opens */
  html { scrollbar-gutter: stable; }
  html:has(dialog[open]) { overflow: hidden; }
  :root[data-input="pointer"] :focus-visible { outline: none; }
  :root[data-input="pointer"] .loop-channel label:has(input:focus-visible) { outline: none; }
  .on-photo :focus-visible, .photo :focus-visible { outline-color: var(--cream); }
  [hidden] { display: none !important; }   /* a class that sets display must never un-hide something */
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .skip { position: absolute; left: 12px; top: -60px; z-index: 60; background: var(--ink); color: var(--paper); padding: 12px 16px; font-size: 14px; }
  .skip:focus { top: 12px; }
  /* "skip the player": hidden until a keyboard reaches it, then a small ink tab just above the player */
  .skip-player:focus { position: absolute; z-index: 3; left: 0; top: -50px; width: auto; height: auto; overflow: visible; clip: auto; white-space: nowrap;
                       padding: 10px 14px; background: var(--ink); color: var(--paper); font-size: 14px; }   /* floats above the player; nothing shifts */
  .mu-lead { position: relative; }
  #feature-words:focus { outline: none; }
  .anchor { position: relative; top: calc(-1 * var(--bar)); display: block; height: 0; }

  /* ---------- the page system ---------- */
  .page { max-width: var(--max); margin: 0 auto; padding: clamp(28px, 4vw, 48px) var(--gutter) clamp(40px, 4.4vw, 64px); }   /* the moon divider marks each section, so the paper around it stays short */
  @media (min-width: 761px) { .page { padding-top: clamp(44px, 5.2vw, 76px); padding-bottom: clamp(60px, 6vw, 90px); } }   /* more air between sections on desktop (Sam, 2026-10-24) */
  .page-head { font-size: var(--t1); line-height: .98; padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
  .page + .page { border-top: 1px solid var(--ink); }
  .label { display: block; font-size: 12px; letter-spacing: .26em; color: var(--ochre); }
  .link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 500; letter-spacing: .06em; color: var(--gold-deep);
          text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 6px; }
  .link.inert { color: var(--taupe); text-decoration: none; cursor: default; }
  a.link:hover, button.link:hover { text-decoration-color: var(--gold-deep); text-decoration-thickness: 2px; }
  .cap { display: block; margin-top: 10px; font-size: 12px; letter-spacing: .14em; color: var(--taupe); }
  .rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }
  ::selection { background: var(--accent); color: var(--ink); }

  /* ---------- the kit's ornaments: the moon divider opens each section after the contents; tones alternate ---------- */
  .page + .page { border-top: 0; }
  .page + .page::before { content: ""; display: block; width: min(340px, 100%); height: 38px; margin: 0 auto; background: var(--gold);
                          -webkit-mask: url("divider.svg") center / 100% 38px no-repeat; mask: url("divider.svg") center / 100% 38px no-repeat; }   /* drawn in gold */

  /* ---------- the top bar ---------- */
  .topbar { position: sticky; top: 0; z-index: 40; height: var(--bar); display: flex; align-items: center; justify-content: space-between;
            gap: 24px; padding: 0 var(--gutter); background: rgba(238, 230, 222, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--rule);
            transition: background-color .3s ease, color .3s ease, border-color .3s ease; }
  .topbar .brand { display: inline-flex; align-items: center; min-height: 44px; }
  .topbar .brand img { height: 28px; width: auto; }   /* a touch larger (Sam, 2026-10-24: 22 → 28), the menu words sized to match */
  .topbar .brand .on-photo { display: none; }
  .topbar .sections { display: flex; align-items: center; gap: 26px; }
  .topbar .sections a, .contents-btn { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px;
                                       letter-spacing: .16em; text-decoration: none; }
  .topbar .sections a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
  .topbar .sections .merch { color: var(--taupe); }   /* evenly spaced with the rest, before contact (Sam, 2026-10-23) */
  .contents-btn { display: none; width: 44px; height: 44px; place-items: center; margin-right: -10px; color: var(--gold); }   /* two lines: the menu, gold on paper */
  .topbar.on-photo .contents-btn { color: var(--cream); }
  .contents-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
  /* over the cover photograph (index.html): cream type, no ground; the sand fades in once the cover has gone up under it */
  .topbar.on-photo { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: transparent; color: var(--cream); }
  .topbar.on-photo .brand .on-paper { display: none; }
  .topbar.on-photo .brand .on-photo { display: block; }
  .topbar.on-photo .sections .merch { color: var(--cream); }

  /* ---------- the contents menu (phones) ---------- */
  .contents-menu { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0 var(--gutter) 32px; border: 0;
                   background: var(--paper); color: var(--ink); }
  .contents-menu::backdrop { background: rgba(55, 40, 30, .4); }
  .menu-head { display: flex; justify-content: space-between; align-items: end; padding: 24px 0 8px; border-bottom: 1px solid var(--ink); }
  .menu-word { font-family: var(--serif); font-weight: 300; font-size: 64px; line-height: .78; letter-spacing: -.02em; }
  .menu-close { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 500; letter-spacing: .06em; color: var(--gold-deep);
                text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 6px; text-decoration-thickness: 1px; }
  .menu-list { list-style: none; margin: 0; padding: 0; }
  .menu-list a { display: flex; align-items: baseline; min-height: 60px; padding: 12px 0;
                 border-bottom: 1px solid var(--rule); text-decoration: none; }
  .menu-list .t { font-family: var(--serif); font-size: 32px; line-height: 1.05; }

  /* ---------- end of issue (the footer) ---------- */
  .end { max-width: var(--max); margin: 0 auto; padding: 16px var(--gutter) 0; color: var(--taupe); }   /* no line above it (Sam, 2026-10-24: "it just splits the page up more") */
  .end-row { display: grid; grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 14px; }   /* tighter since Sam asked for a shorter footer (2026-10-24) */   /* centred on every screen: sun and name, icons, links */
  .end-right { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 18px; }
  /* her profiles as icons, as on the earlier site */
  .end-icons { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 6px; }
  .end .end-icons a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--gold);
                      transition: color .2s ease, background-color .2s ease, transform .2s ease; }
  .end .end-icons a:hover, .end .end-icons a:focus-visible { color: var(--gold-hover); background: rgba(201, 164, 92, .22); transform: translateY(-2px); text-decoration: none; }
  .end-icons svg { width: 22px; height: 22px; overflow: visible; }
  .end-icons svg[viewBox="0 0 32 32"] { width: 27px; height: 27px; }
  .end-icons svg.wide { width: 34px; height: 27px; }
  .end-icons svg[viewBox="0 0 20 20"] { width: 23px; height: 23px; }
  .end-icons .fill { fill: currentColor; }
  .end-icons .line { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
  .end-icons .stroke { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
  .end-icons .cut { fill: none; stroke: var(--paper); stroke-width: 2.2; stroke-linecap: round; }
  .end-icons .knock { fill: var(--paper); }
  .end a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; font-size: 12px; letter-spacing: .2em; text-decoration: none; }
  .end a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; }
  .end-mid { order: -1; position: relative; display: grid; justify-items: center; gap: 6px; font-size: 12px; letter-spacing: .22em; }
  .end-mid img { height: 36px; width: auto; }   /* larger (Sam, 2026-10-24) */
  /* "breathe with mölly" sits in the base line with merch and privacy (Sam, 2026-10-24), set like them, in deep gold */
  .breathe-line { position: relative; display: inline-flex; justify-content: center; gap: .5em; min-height: 44px; align-items: center; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
                  font: inherit; font-size: 12px; letter-spacing: .2em; color: var(--gold-deep); }
  /* the footer in groups, centred (Sam, 2026-10-23: it felt clumped): her mark, then her icons, then the breathe line,
     then one quiet base line under a hairline: © and merch · privacy together */
  .end-base { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 26px; margin-top: 10px; padding: 6px 0 10px; }   /* no hairline above it (Sam, 2026-10-24: "get rid of that horizontal line all together") */
  .end-copy { text-align: center; font-size: 12px; letter-spacing: .14em; margin: 0; }


  /* ---------- the home page: a fixed bar, so the cover photograph runs under it on every screen ---------- */
  .home .topbar { position: fixed; left: 0; right: 0; top: 0; }
  /* on phones her name waits in the bar while the cover shows it large, then fades in (issue.js adds .past-cover);
     on desktop it is in the bar from the start (Sam, 2026-10-23) */
  @media (max-width: 760px) {
    .home .topbar .brand { opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
    .home .topbar.past-cover .brand { opacity: 1; visibility: visible; transition: opacity .5s ease; }
  }
  .home main { padding-top: 0; }

  /* ---------- the cover: a magazine on the table ---------- */
  .cover { display: grid; grid-template-columns: 1fr; justify-items: center; }   /* full bleed on phones, a cinema frame from 761px (below) */
  /* the cover dissolves into the sand (Sam, 2026-10-23): its foot deepens to dusk (.cover-fade, over the photo, under the words),
     and a band below carries that dusk out into the page, so "events" rises out of it instead of starting under a ledge */
  .cover-mag { isolation: isolate; }
  .cover-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 44%; pointer-events: none;   /* taller and eased (Sam, 2026-10-24: even more seamless) */
                background: linear-gradient(180deg, rgba(26, 20, 15, 0) 0%, rgba(26, 20, 15, .06) 18%, rgba(26, 20, 15, .2) 36%, rgba(26, 20, 15, .44) 56%, rgba(26, 20, 15, .74) 78%, rgb(26, 20, 15) 100%); }
  .cover::after { content: ""; display: block; width: 100%; height: clamp(96px, 18vh, 190px); pointer-events: none;
                  background: linear-gradient(180deg, rgb(26, 20, 15) 0%, rgba(26, 20, 15, .8) 14%, rgba(26, 20, 15, .55) 30%, rgba(26, 20, 15, .32) 48%, rgba(26, 20, 15, .16) 66%, rgba(26, 20, 15, .05) 84%, rgba(26, 20, 15, 0) 100%); }
  .cover-mag { position: relative; display: flex; flex-direction: column; container-type: inline-size; overflow: hidden;
               height: min(calc(100svh - var(--bar) - 96px), 1060px); aspect-ratio: 3 / 4; padding: 5% 5.5% 5%;
               color: var(--cream); box-shadow: 0 28px 40px -24px rgba(40, 28, 20, .55); }   /* the home page deepens it as the page turns */
  .cover-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
  .cover-mag::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(20,14,10,.58) 0%, rgba(20,14,10,.18) 26%, rgba(20,14,10,0) 40%, rgba(20,14,10,0) 62%, rgba(20,14,10,.5) 100%); }
  .cover-mast, .cover-line.tag, .cover-mag .cover-open { position: relative; z-index: 1; }
  .cover-mast { margin: 4% 0 0; }
  .cover-mast img { width: 100%; height: auto; }
  .cover-line { display: block; text-decoration: none; }
  .cover-line.tag { margin-top: auto; text-align: center; font-family: var(--serif); font-size: var(--t2); }
  /* the scroll cue: a small word over a fine line, with a light that slides down it; centred under the tagline on every screen */
  .cover-open { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; min-width: 44px; min-height: 44px; padding: 6px 12px;
                color: inherit; text-decoration: none; }
  .cue-word { font-size: 12px; font-weight: 400; letter-spacing: .32em; padding-left: .32em; transition: opacity .3s ease; }
  .cue-line { position: relative; width: 1px; height: 52px; overflow: hidden; }
  .cue-line::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: .45; }
  .cue-line::after { content: ""; position: absolute; left: 0; top: -45%; width: 1px; height: 45%; background: currentColor;
                     animation: cue-fall 2.4s cubic-bezier(.6, 0, .35, 1) infinite; }
  @keyframes cue-fall { to { transform: translateY(330%); } }
  .cover-open:hover .cue-word, .cover-open:focus-visible .cue-word { opacity: .65; }
  .cover-mag .cover-open { align-self: center; }

  /* tablets and desktop: her wide photo fills the screen (Sam, 2026-10-23; before that a cinema frame of her portrait between
     blurred bands). It is her press photo, untouched, inside the desert higgsfield extended to widescreen; she stands at
     x 1322 of its 2521, so it shifts to put her at the middle as far as the spare width allows, never leaving a gap.
     Her gold name sits in the middle, across her body, its top just under her chin (Sam, 2026-10-23: "as long as it doesn't
     cover her face"); the tagline under it, the cue at the foot. */
  .cover-mag picture { display: contents; }
  @media (min-width: 761px) and (min-height: 521px) {
    .cover-mag { width: 100%; height: 100svh; max-height: none; aspect-ratio: auto; box-shadow: none; background: #2A1E16;
                 justify-content: flex-start; align-items: center; padding: calc(var(--bar) + clamp(14px, 2.5vh, 28px)) var(--gutter) clamp(18px, 3vh, 32px); }
    /* where the photo draws, worked out once and used by the photo and the name (each resolves it where it is used, so cqw is the
       cover's): --box the cover's full width (cqw counts only inside its padding, the gutter each side), --drawn the photo's
       drawn width, --chin how far down the cover her chin falls (39% down her photo, which sits 30% into any spare height) */
    .cover-mag { --box: calc(100cqw + 2 * var(--gutter)); --drawn: max(var(--box), calc(100svh * 2521 / 1394));
                 --tall: calc(var(--drawn) * 1394 / 2521);
                 --chin: calc((100svh - var(--tall)) * .3 + var(--tall) * .41); }
    .cover-photo { object-position: clamp(calc(var(--box) - var(--drawn)), calc(var(--box) / 2 - var(--drawn) * 1322 / 2521), 0px) 30%; }
    .cover-mast { width: min(calc(66vh - 80px), 820px, 90vw); margin: calc(var(--chin) - var(--bar) - clamp(14px, 2.5vh, 28px) + 1vh) 0 0; }
    .cover-mast img { filter: drop-shadow(0 2px 16px rgba(20, 14, 10, .55)) drop-shadow(0 1px 3px rgba(20, 14, 10, .35)); }   /* the gold holds on the sunlit rock */
    .cover-line.tag { margin-top: clamp(6px, 1.2vh, 14px); font-size: var(--t2); text-shadow: 0 1px 14px rgba(20, 14, 10, .6); }
    .cover-mag .cover-open { margin-top: auto; text-shadow: 0 1px 10px rgba(20, 14, 10, .6); }
  }


  /* each home section's own title (events, music, live sets, contact) */
  .section-head { color: var(--gold); font-size: var(--t1); line-height: .9; letter-spacing: -.01em; text-align: center; padding-bottom: 14px; margin-bottom: clamp(16px, 2vw, 24px);   /* the one space under every title; what follows adds none */
                  border-bottom: 1px solid var(--rule); }

  /* ---------- 01 events: the original site's show list (upcoming / past / all shows; list or grid) ---------- */
  .tour-bar { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 10px; }   /* only the list / grid switch since the tabs went (2026-10-24) */
  .tour-view { display: flex; gap: 8px; }
  /* the list / grid switch, in the framed buttons' gold-foil (Sam, 2026-10-23): the chosen view gold leaf ruled in the dark, a dark icon,
     the other the gold double rule on sand; hovering that one eases its inner rule out (no fill, so it never looks chosen) */
  .tour-view button { position: relative; isolation: isolate; width: 48px; height: 46px; border: 0; border-radius: 2px; background: none;
                      color: var(--gold); display: grid; place-items: center; transition: color .25s ease; }
  .tour-view button::after { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid var(--gold); border-radius: 2px;
                             outline: 1px solid rgba(156, 116, 51, .45); outline-offset: -5px; background-color: transparent; pointer-events: none;
                             transition: background-color .25s ease, border-color .25s ease, outline-color .25s ease, outline-offset .45s cubic-bezier(.16, 1, .3, 1); }
  .tour-view button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.3; }
  .tour-view button[aria-pressed="true"] { color: #2A1E16; }
  .tour-view button[aria-pressed="true"]::after { background-color: var(--leaf); border-color: #2A1E16; outline-color: rgba(42, 30, 22, .75); }
  .tour-view button:hover:not([aria-pressed="true"]) { color: var(--gold-deep); }
  .tour-view button:hover:not([aria-pressed="true"])::after { outline-color: var(--gold); outline-offset: -3px; }
  .shows { border-top: 1px solid var(--rule); }
  .show { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 2px 28px; align-items: center;
          padding: 22px 8px; border-bottom: 1px solid var(--rule); transition: background-color .2s ease; }
  /* the venue sits under its city, so one show reads in one place (2026-10-24 review: it ran 1100px across on desktop) */
  .show .when { grid-row: 1 / span 2; }
  .show .city { align-self: end; }
  .show .venue { grid-column: 2; align-self: start; }
  .show .acts { grid-column: 3; grid-row: 1 / span 2; }
  .show:hover { background: rgba(255, 255, 255, .25); }
  .show .when { display: grid; justify-items: center; line-height: 1; }
  .show .mon { font-size: 12px; letter-spacing: .18em; color: var(--ochre); }
  .show .day { font-family: var(--serif); font-size: 42px; color: var(--ink); font-variant-numeric: lining-nums; margin: 4px 0 3px; }
  .show .yr { font-size: 12px; letter-spacing: .12em; color: var(--taupe); }
  .show .city { font-family: var(--serif); font-size: var(--t2); color: var(--ink); line-height: 1.15; }
  .show .venue { font-size: 14px; letter-spacing: .06em; color: var(--text); line-height: 1.5; }   /* readable at a glance (was 13px, .16em: it wrapped fast) */
  .show .acts { display: flex; gap: 4px 20px; justify-content: flex-end; flex-wrap: wrap; }
  /* the next show leads (2026-10-24 review): a larger date and a touch of light behind it; its city keeps the one name size */
  .show.next { background: rgba(255, 255, 255, .28); }
  .show.next .day { font-size: 56px; }
  /* shows already played: apart, small and quiet, newest first */
  .played { margin-top: clamp(32px, 4vw, 48px); }
  .played-head { font-family: var(--sans); font-weight: 400; font-size: var(--label); letter-spacing: .26em; color: var(--ochre); margin: 0 0 6px; }
  .played-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
  .played-list li { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 4px 28px; align-items: baseline; padding: 12px 0;
                    border-bottom: 1px solid var(--rule); font-size: var(--small); color: var(--taupe); }
  .played-list .p-when { text-align: center; letter-spacing: .12em; }
  .played-list .p-where { display: flex; flex-wrap: wrap; gap: 0 14px; }
  .played-list .p-city { color: var(--text); }
  .played-list .p-set { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; color: var(--gold-deep);
                        text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 5px; }
  .shows.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; border-top: 0; }
  .shows.grid .show { grid-template-columns: auto 1fr; grid-template-areas: "when city" "when venue" "acts acts"; gap: 4px 18px; align-items: start;
                      padding: 20px; border: 1px solid var(--rule); }
  .shows.grid .when { grid-area: when; }
  .shows.grid .city { grid-area: city; align-self: end; }
  .shows.grid .venue { grid-area: venue; }
  .shows.grid .acts { grid-area: acts; justify-content: flex-start; margin-top: 14px; }
  .shows-more { display: flex; justify-content: center; margin-top: 30px; }
  .empty { font-family: var(--serif); font-size: var(--t2); line-height: 1.3; color: var(--ink); padding: 28px 0 24px; border-top: 1px solid var(--rule); }
  .empty small { display: block; font-family: var(--sans); font-size: var(--body); color: var(--taupe); margin-top: 14px; }
  /* the row buttons are words with a line under them, as on the original site */
  .btn.sm { gap: 6px; padding: 0; border: 0; background: none; font-size: 14px; font-weight: 500; letter-spacing: .04em; color: var(--gold-deep);
            text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; text-decoration-color: var(--gold); }
  .btn.sm:hover, .btn.sm:focus-visible { background: none; border: 0; color: var(--gold-deep); text-decoration-color: currentColor; text-decoration-thickness: 2px; }
  .btn.sm.solid { background: none; border: 0; color: var(--gold-deep); text-decoration-color: currentColor; text-decoration-thickness: 1.5px; }
  .btn.sm.solid:hover { color: var(--gold-deep); }
  .btn.sm.dashed { text-decoration-style: dashed; }
  .btn.sm.accent { color: var(--gold-deep); }
  .btn.sm.inert { color: var(--taupe); text-decoration: none; pointer-events: none; }
  .btn.sm svg { width: 11px; height: 11px; }

  /* ---------- 02 music ---------- */
  .mu-lead { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 30px; }   /* stacked and centred on every screen (Sam, 2026-10-24): the words, then the player */
  /* the album's player: spotify's player for the feature in the sleeve's square (never shorter than its track list) */
  .mu-player { width: min(620px, 100%); height: 420px; min-height: 352px; border-radius: 12px; box-shadow: 0 20px 32px -20px rgba(40, 28, 20, .5);
                background: #121212 url("album-22.jpg") center / cover; }   /* the sleeve shows while spotify's player loads (2026-10-24 review) */
  .mu-player iframe { display: block; width: 100%; height: 100%; border: 0; }
  .mu-player iframe:focus-visible { outline: 1px solid var(--ochre); outline-offset: 4px; }
  .mu-txt h3 { font-size: clamp(64px, 7.4vw, 104px); line-height: .8; margin-top: 8px; }
  .listen-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 34px; margin-top: 22px; }
  /* the album words sit centred beside (and on phones under) the player (mölly, 2026-10-23) */
  .mu-txt { text-align: center; align-self: center; }

  /* ---------- the listen sheet ---------- */
  .sheet { width: min(560px, calc(100% - 32px)); max-height: calc(100% - 48px); padding: 0; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); }
  .sheet::backdrop { background: rgba(55, 40, 30, .45); }
  .sheet-card { position: relative; padding: 22px; }
  .sheet-close { position: absolute; top: 10px; right: 10px; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; color: var(--gold); }
  .sheet-close svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.4; fill: none; }
  .sheet-cover { position: relative; width: min(240px, 60%); aspect-ratio: 1; }
  .sheet-cover img { width: 100%; height: 100%; object-fit: cover; }
  .sheet-cover.playing { width: 100%; aspect-ratio: auto; height: 352px; }
  .sheet-cover iframe { width: 100%; height: 100%; border: 0; }
  .sheet-play { position: absolute; inset: 0; display: grid; place-items: center; }
  .sheet-play .set-btn { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--leaf); background: rgba(20, 14, 10, .35); display: grid; place-items: center; }
  .sheet-play svg { width: 22px; height: 22px; fill: var(--leaf); }
  .sheet-head { margin: 18px 0 8px; }
  .sheet-head h2 { font-size: 34px; line-height: 1; }
  .sheet-head p { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--taupe); margin-top: 4px; }
  .sheet-list { list-style: none; margin: 0; padding: 0; }
  .sheet-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; border-top: 1px solid var(--rule); }
  .sheet-name { font-family: var(--serif); font-size: 20px; line-height: 1.1; }
  .sheet-name small { display: block; font-family: var(--sans); font-size: 12px; letter-spacing: .1em; color: var(--taupe); }
  .sheet-list .btn { border: 0; padding: 0; background: none; color: var(--gold-deep); }
  .sheet-list .btn:hover { background: none; color: var(--gold-deep); }
  .sheet-list .btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; font-weight: 500; letter-spacing: .06em; text-decoration: underline;
                     text-underline-offset: 6px; text-decoration-thickness: 1px; }
  .sheet-list .btn svg { width: 10px; height: 10px; stroke: currentColor; stroke-width: 1.4; fill: none; }

  @keyframes sheet-rise { from { transform: translateY(100%); } to { transform: none; } }
  @keyframes sheet-sink { to { transform: translateY(100%); } }


  /* ---------- 03 live sets ---------- */
  .sets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px clamp(16px, 2.4vw, 32px); }
  .sets h3 { font-weight: 400; font-size: var(--t2); line-height: 1.15; margin-top: 12px; text-wrap: balance; }   /* no word left alone on a line ("italy") */
  #sets-more { margin-top: 18px; }
  .set-play, .set-frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); }
  .set-play img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
  .set-play:hover img { transform: scale(1.02); }
  .set-play .play-mark { transition: transform .3s cubic-bezier(.16, 1, .3, 1), background-color .3s ease; }
  .set-play:hover .play-mark, .set-play:focus-visible .play-mark { transform: scale(1.08); background: rgba(20, 14, 10, .45); }   /* the mark answers the pointer */
  /* the documentary on about (Sam, 2026-10-25): one wide still, played in place like the live sets; its title in the name
     size, a small line of facts under it */
  .doc { width: min(880px, 100%); margin: clamp(20px, 2.4vw, 32px) auto 0; }   /* centred on the page (Sam, 2026-10-26); its title and line keep to the video's left edge */
  .doc-title { font-weight: 400; font-size: var(--t2); line-height: 1.15; margin-top: 14px; }
  #documentary .sub-head { text-align: center; }   /* "the documentary" centred over the video; its line stays full width (Sam, 2026-10-26) */
  .doc-meta { margin-top: 6px; font-size: var(--small); color: var(--taupe); }
  .set-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .6s ease; }
  .set-frame.ready iframe { opacity: 1; }
  /* a set starting: its still dims and settles while the player fades up over it */
  .set-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: set-dim .8s cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes set-dim { from { filter: none; transform: scale(1.02); } to { filter: brightness(.4); transform: none; } }
  .play-mark { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
               border: 1px solid var(--leaf); background: rgba(20, 14, 10, .3); }   /* gold leaf over the photographs */
  .play-mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 20px; margin: -10px 0 0 -6px;
                      background: var(--leaf); clip-path: polygon(0 0, 100% 50%, 0 100%); }   /* the play triangle */


  .copy.copied { color: var(--ochre); }

  /* ---------- stay in the loop: the title, then the email line and arrow under it, then the small print ---------- */
  /* a sunset horizon behind the sign-up: peach rising from the footer's line, fading out before the edges */
  /* the two lists as one spread (Sam, 2026-10-24): retreats on the left page, stay in the loop on the right, a fine spine between;
     on phones one column with a moon between the two. The peach horizon glows behind the whole spread. */
  .spread-grid { display: grid; grid-template-columns: 1fr; }
  .spread-col { min-width: 0; }
  .spread-col + .spread-col::before { content: ""; display: block; width: min(340px, 100%); height: 30px; margin: clamp(40px, 4.4vw, 64px) auto clamp(28px, 4vw, 48px);
                                      background: var(--gold); -webkit-mask: url("divider.svg") center / 260px 30px no-repeat; mask: url("divider.svg") center / 260px 30px no-repeat; }
  .spread .retreat { padding-top: 0; }
  .spread .loop-title { width: 100%; line-height: .9; }   /* the same height as "retreats" beside it, so the two hairlines are level */
  .spread .loop-field { width: min(380px, 100%); }   /* never wider than its page */
  .spread .retreat-soon { margin-bottom: 6px; }
  .spread .retreat-line { margin-bottom: 14px; }
  @media (min-width: 900px) {   /* side by side once each page has room; tablets stack like phones */
    /* two equal pages and the spine drawn in the exact middle of the gap, so it lines up with the moon divider above and the
       centre of the footer below (Sam, 2026-10-24: it sat ~30px right of centre as the second page's left border) */
    .spread-grid { position: relative; grid-template-columns: 1fr 1fr; column-gap: clamp(64px, 8vw, 128px); align-items: start; }
    .spread-grid::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -.5px; background: var(--rule); pointer-events: none; }
    .spread-col + .spread-col::before { content: none; }
    /* the two pages share six rows (subgrid), so the titles' hairlines, the italic leads, the sentences and the email lines sit
       level across the spine however the copy wraps (Sam, 2026-10-24). The forms give up their boxes so their parts take the rows. */
    .spread-col { display: grid; grid-template-rows: subgrid; grid-row: span 6; justify-items: center; align-content: start; }
    .spread-col > form, .spread .retreat, .spread .loop-one { display: contents; }
    .spread .section-head { grid-row: 1; width: 100%; align-self: end; }
    .spread .retreat-soon { grid-row: 2; }
    .spread .retreat-line { grid-row: 3; align-self: start; }
    .spread .loop-field { grid-row: 4; }
    .spread .loop-channel, .spread .breathe-try { grid-row: 5; }
    .spread .loop-note { grid-row: 6; }
  }
  #lists { position: relative; }
  /* the glow runs on 140px under the spread and fades out there, so it melts into the footer instead of stopping in an edge
     (the footer's line, which hid that edge, went on 2026-10-24) */
  #lists::after { content: ""; position: absolute; inset: 0 0 -140px; z-index: -1; pointer-events: none;   /* its own layer, so the sun's rays can pass over it and under the words */
                 background: radial-gradient(ellipse 58% 90% at 50% calc(100% - 140px), rgba(240, 213, 190, .85), rgba(240, 213, 190, .35) 45%, rgba(240, 213, 190, 0) 72%);
                 -webkit-mask: linear-gradient(180deg, #000 calc(100% - 140px), transparent); mask: linear-gradient(180deg, #000 calc(100% - 140px), transparent); }
  .loop-one { display: grid; justify-items: center; text-align: center; gap: 4px; }
  .loop-title { font-size: var(--t1); font-weight: 300; line-height: 1.1; }
  .loop-field { display: flex; align-items: center; width: min(380px, 84vw); border-bottom: 1px solid var(--ink); }
  .loop-field input { flex: 1; min-width: 0; min-height: 48px; border: 0; background: none; padding: 0 0 0 34px;   /* 34px balances the arrow, */
                      font: italic 300 19px var(--serif); color: var(--ink); text-align: center; }                      /* so the words sit on the centre line */
  .loop-field input::placeholder { color: var(--taupe); }
  .loop-field input:focus { outline: none; }
  /* from the keyboard the field takes the site's own ring, as every other control does (audit 2026-10-25: a 1px line was all) */
  .loop-field:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 4px; }
  :root[data-input="pointer"] .loop-field:has(input:focus-visible) { outline: none; }   /* a tap shows no box (Sam, 2026-10-23); the line still darkens */
  .loop-field:focus-within { box-shadow: 0 1px 0 var(--ink); }
  .loop-field button { width: 44px; height: 48px; display: grid; place-items: center; margin-right: -10px; color: var(--gold); }
  .loop-field button svg { width: 22px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.2; transition: transform .25s ease; }
  .loop-field button:hover svg, .loop-field button:focus-visible svg { transform: translateX(4px); }
  /* when a sign-up lands, the line catches the light: gold runs along it from the left, and the arrow draws itself into a check
     (index.html adds .landed; Sam, 2026-10-23) */
  .loop-field { position: relative; }
  .loop-field::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gold); pointer-events: none;
                       transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
  .landed .loop-field::after { transform: none; }
  /* while a sign-up is on its way the arrow travels along the line (index.html adds .sending) */
  .sending .loop-field svg .arrow { animation: arrow-go .9s ease-in-out infinite; }
  @keyframes arrow-go { 0%, 100% { transform: none; opacity: 1; } 50% { transform: translateX(6px); opacity: .5; } }
  /* a bad entry: the line draws in ochre from the left, the same way the gold one does when it lands */
  .loop-field:has(input[aria-invalid="true"])::after { background: var(--amber); transform: none; transition-duration: .45s; }
  /* a link that leads here lights the line: the gold runs in from the left and out to the right, once (index.html adds .glint) */
  .loop-field.glint::after { animation: glint 1.1s cubic-bezier(.3, .7, .2, 1) both; }
  @keyframes glint { 0% { transform: scaleX(0); transform-origin: left; } 50% { transform: none; transform-origin: left; } 51% { transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }
  .loop-field svg .arrow { transition: opacity .2s ease; }
  .loop-field svg .check { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .45s cubic-bezier(.6, 0, .3, 1) .3s; }
  .landed .loop-field svg .arrow { opacity: 0; }
  .landed .loop-field svg .check { stroke-dashoffset: 0; }
  .loop-channel { display: flex; justify-content: center; gap: 22px; border: 0; margin: 2px 0 0; padding: 0; min-width: 0; }
  .loop-channel label { position: relative; display: inline-flex; align-items: center; min-height: 44px; cursor: pointer;
                        font-size: 12px; letter-spacing: .26em; color: var(--taupe); }
  .loop-channel input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
  /* every small word-control is at least 44px each way (audit 2026-10-25: "text" was 29px wide, "close" 36px, "buy" 41px) */
  .loop-channel label, .menu-close, .breathe-close, .sheet-list .btn { min-width: 44px; justify-content: center; }
  .breathe-close { display: inline-flex; align-items: center; min-height: 44px; }
  .loop-channel label:has(input:checked) { color: var(--ink); text-decoration: underline var(--amber); text-decoration-thickness: 2px; text-underline-offset: 6px; }
  .loop-channel label:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
  .loop-note { min-height: 1.6em; font-size: 14px; color: var(--ink); }
  /* "until then, breathe with her for a minute": opens the breathing; a small gold light breathes beside the words on the
     dialog's own rhythm (in four, out six), the one hint of what it does */
  .breathe-try { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
                 font: inherit; font-size: var(--small); letter-spacing: .06em; color: var(--gold-deep);
                 text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 6px; }
  .breath-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); opacity: .55; }
  .motion .breath-dot { animation: breath-dot 10s cubic-bezier(.45, 0, .55, 1) infinite; }
  @keyframes breath-dot { 0%, 100% { transform: scale(.7); opacity: .45; } 40% { transform: scale(1.35); opacity: .9; } }
  /* retreats: "coming soon" in her italic, one line, and the loop's own field (mölly, 2026-10-23) */
  .retreat { display: grid; justify-items: center; text-align: center; gap: 10px; padding: clamp(18px, 2.6vw, 34px) 0 4px; }
  .retreat-soon { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: var(--t2); line-height: 1.1; color: var(--gold); }
  .retreat-line { font-size: var(--body); line-height: 1.6; max-width: 40ch; margin-bottom: 4px; }
  .loop-fine { max-width: 40ch; }   /* the loop's sentence, set like retreats' (.retreat-line) since the two pages share rows (2026-10-24) */


  /* ---------- motion (motion.js adds .motion to <html> only when motion is welcome) ---------- */
  .motion .reveal { opacity: 0; transform: translateY(14px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
  .motion .reveal.in { opacity: 1; transform: none; }
  /* a link target (retreats, stay in the loop) only fades: if it also rose 14px, a link measured it while it was still low and
     left its heading under the top bar on phones (audit M1, 2026-10-24) */
  .motion .reveal[id] { transform: none; transition: opacity .9s ease; }
  .motion .settle > * { opacity: 0; transform: translateY(10px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
                        transition-delay: calc(var(--s, 0) * 70ms); }
  .motion .settle.in > * { opacity: 1; transform: none; }
  .motion .rise { transform: translateY(18px); opacity: .001; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1), opacity 1.1s ease; }
  .motion .rise.in { transform: none; opacity: 1; }
  /* into the dusk: --turn runs 0 to 1 as the cover goes up, and her photo dims into the dusk at its foot
     (it used to shrink back with a deepening shadow, which drew a hard card edge against the next section) */
  .home .cover-photo { filter: brightness(calc(1 - .35 * var(--turn, 0))); }
  .tick { width: 14px; height: 14px; margin-right: 6px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; display: none; }
  .copied .tick, .done .tick { display: inline-block; animation: draw-tick .45s ease forwards; }
  @keyframes draw-tick { to { stroke-dashoffset: 0; } }

  /* golden hour: on every visit the cover opens from dusk into full light, her name arrives,
     and one sheen crosses the gold leaf of the masthead. CSS only, so it plays even if a script fails, and ends fully shown */
  .cover-mag::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: #1A1410; opacity: 0;
                       animation: dusk 1.8s cubic-bezier(.33, 0, .2, 1) both; }
  .cover-photo { animation: settle-photo 2.4s cubic-bezier(.16, 1, .3, 1) both; }
  .cover-mast { animation: arrive 1.1s cubic-bezier(.16, 1, .3, 1) .5s both; }
  .cover-line.tag, .cover-mag .cover-open { animation: arrive 1s cubic-bezier(.16, 1, .3, 1) 1.1s both; }
  .cover-mast::after { content: ""; position: absolute; inset: 0; pointer-events: none;
                       -webkit-mask: url("logo-gold-1100.png") 0 0 / 100% auto no-repeat; mask: url("logo-gold-1100.png") 0 0 / 100% auto no-repeat;
                       background: linear-gradient(105deg, transparent 40%, rgba(255, 250, 232, .55) 46%, #FFFDF6 50%, rgba(255, 250, 232, .55) 54%, transparent 60%) 100% 0 / 300% 100% no-repeat;
                       animation: gild 1.6s cubic-bezier(.45, 0, .2, 1) 1.5s both; }
  @keyframes dusk { from { opacity: .72; } to { opacity: 0; } }
  @keyframes settle-photo { from { transform: scale(1.06); } to { transform: none; } }
  @keyframes arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  @keyframes gild { from { background-position: 100% 0; } to { background-position: 0 0; } }

  /* the moon divider opens each section: the moon first, then its dots and lines draw out to either side (motion.js adds .moon, then .in) */
  .motion .moon::before { clip-path: inset(0 44%); transition: clip-path 1.6s cubic-bezier(.3, .7, .2, 1) .15s; }
  .motion .moon.in::before { clip-path: inset(0); }

  /* her sunlight (Sam, 2026-10-24, after several tries): a big fan of faint gold rays rises behind "mölly", like a sunrise
     behind the name, right above her icons; the rays twinkle (below). The fan stays inside the footer. The same footer on
     every page (Sam, 2026-10-25: "make sure the hero page footer is the same across all the pages"); the small round sun the
     other pages carried is gone. Top to bottom: her name in the heart of the sunrise, the icons right below it, then the base
     line right below them. */
  .end-row { gap: 6px; }
  /* her name sits in the empty heart of the sunrise, so the sun seems to rise out of "mölly" (Sam, 2026-10-24): the rays'
     base is on the letters' baseline (80.7% down the logo), and the hollow at their centre (23% of the fan's size, in
     sunrays.svg) holds the name; on phones the fan is taller and the name a touch smaller so it still fits */
  .end { --fan-w: min(560px, 98vw); --fan-h: min(190px, 46vw); --logo-h: 36px; padding-top: calc(var(--fan-h) - var(--logo-h) * .807 + 6px); }   /* room for the rays above her name, inside the footer */
  .end-mid img { height: var(--logo-h); }
  /* the .fan is a zero-height anchor at the foot of her name; its rays rise from the letters' baseline. No round sun ("get rid
     of the round thing", the same day). */
  .fan { display: block; position: relative; width: 0; height: 0; margin: -6px auto 0; pointer-events: none; --fan-base: calc(var(--logo-h) * .193); }
  /* the rays twinkle (Sam, 2026-10-24: "a twinkling one rather than the radiating one"): they are three interleaved sets
     (sunrays-a/b/c.svg, every third ray), each brightening and dimming on its own uneven rhythm, so single rays catch the
     light here and there across the fan. Faint at rest; all still when the footer is off screen or motion is reduced. */
  .fan::before, .fan::after, .fan i {
                    content: ""; position: absolute; z-index: -1; left: 50%; bottom: var(--fan-base, 44px);   /* the fan's base level with "mölly" (Sam, 2026-10-24) */
                    width: var(--fan-w); height: var(--fan-h); margin-left: calc(var(--fan-w) / -2); background: var(--gold); opacity: .26; }
  .fan::before { -webkit-mask: url("sunrays-a.svg") center / 100% 100% no-repeat; mask: url("sunrays-a.svg") center / 100% 100% no-repeat; }
  .fan::after { -webkit-mask: url("sunrays-b.svg") center / 100% 100% no-repeat; mask: url("sunrays-b.svg") center / 100% 100% no-repeat; }
  .fan i { display: block; -webkit-mask: url("sunrays-c.svg") center / 100% 100% no-repeat; mask: url("sunrays-c.svg") center / 100% 100% no-repeat; }
  .motion .fan::before { animation: twinkle 3.7s ease-in-out infinite; }
  .motion .fan::after { animation: twinkle 4.9s ease-in-out -1.6s infinite; }
  .motion .fan i { animation: twinkle 3.1s ease-in-out -2.4s infinite; }
  @keyframes twinkle { 0%, 100% { opacity: .14; } 18% { opacity: .62; } 34% { opacity: .2; } 60% { opacity: .38; } 76% { opacity: .16; } }
  .motion .end:not(.awake) .fan::before, .motion .end:not(.awake) .fan::after, .motion .end:not(.awake) .fan i { animation-play-state: paused; }

  /* lists that change under your hand settle in: the shows after a tab or view switch, the phone menu as it opens */
  @keyframes row-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .motion .shows.fresh > * { animation: row-in .5s cubic-bezier(.16, 1, .3, 1) both; }
  .motion .shows.fresh > :nth-child(2) { animation-delay: 40ms; }
  .motion .shows.fresh > :nth-child(3) { animation-delay: 80ms; }
  .motion .shows.fresh > :nth-child(4) { animation-delay: 120ms; }
  .motion .shows.fresh > :nth-child(5) { animation-delay: 160ms; }
  .motion .shows.fresh > :nth-child(6) { animation-delay: 200ms; }
  .motion .shows.fresh > :nth-child(7) { animation-delay: 240ms; }
  .motion .shows.fresh > :nth-child(n+8) { animation-delay: 280ms; }
  .contents-menu[open] { animation: menu-in .3s ease both; }
  @keyframes menu-in { from { opacity: 0; } to { opacity: 1; } }
  /* dialogs arrive and leave with motion (2026-10-24): the listen sheet and breathe fade and settle in on arrival (the phone sheet
     rises instead, below); issue.js gives every dialog a short .leaving before it really closes, which fades it out, the phone
     sheet sinking back. Backdrops fade with them. Exits are quicker than entrances. */
  .sheet[open], .breathe[open] { animation: dialog-in .32s cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes dialog-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .sheet[open]::backdrop, .contents-menu[open]::backdrop, .breathe[open]::backdrop { animation: backdrop-in .3s ease both; }
  @keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
  dialog[open].leaving { animation: dialog-out .18s ease-in both; }   /* [open] so it outranks the arrivals above */
  dialog[open].leaving::backdrop { animation: backdrop-out .18s ease-in both; }
  @keyframes dialog-out { to { opacity: 0; transform: translateY(6px); } }
  @keyframes backdrop-out { to { opacity: 0; } }
  .contents-menu[open] .menu-list li { animation: row-in .55s cubic-bezier(.16, 1, .3, 1) 60ms both; }
  .contents-menu[open] .menu-list li:nth-child(2) { animation-delay: 110ms; }
  .contents-menu[open] .menu-list li:nth-child(3) { animation-delay: 160ms; }
  .contents-menu[open] .menu-list li:nth-child(4) { animation-delay: 210ms; }
  .contents-menu[open] .menu-list li:nth-child(n+5) { animation-delay: 260ms; }

  /* between pages the paper cross-fades and the top bar stays where it is (browsers without view transitions simply change page) */
  @media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    .topbar { view-transition-name: topbar; }
    ::view-transition-old(root) { animation: page-out .22s ease both; }
    ::view-transition-new(root) { animation: page-in .5s cubic-bezier(.16, 1, .3, 1) both; }
  }
  @keyframes page-out { to { opacity: 0; } }
  @keyframes page-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

  /* ---------- breathe with mölly ---------- */
  .breathe { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: var(--paper); color: var(--ink); }
  .breathe::backdrop { background: var(--paper); }
  .breathe-inner { min-height: 100%; display: grid; place-content: center; justify-items: center; gap: 18px; padding: 32px 16px; text-align: center; }
  .breathe-title { font-size: 12px; letter-spacing: .26em; color: var(--ochre); }
  .breathe-orb { position: relative; display: grid; place-items: center; width: min(64vw, 320px); aspect-ratio: 1; }
  .breathe-orb > * { grid-area: 1 / 1; }
  .breathe-ring { position: relative; width: 100%; height: 100%; transform: rotate(-90deg); }
  /* the breath itself: warm light inside the ring, small when the lungs are empty, filling the ring at the top of the in-breath.
     In for four (0 to 40%), out for six (40 to 100%), on the same clock as the trace and the words. */
  .breathe-bloom { width: 94%; aspect-ratio: 1; border-radius: 50%; transform: scale(.36);
                   background: radial-gradient(circle at 50% 42%, #FFF6E8 0%, #F6E3CC 22%, #F0D5BE 42%, rgba(201, 164, 92, .55) 74%, rgba(201, 164, 92, .16) 100%);
                   box-shadow: inset 0 0 0 1px rgba(156, 116, 51, .28);   /* the gradient feathers its own edge: no halo */ opacity: .7; }
  .breathe-orb.go .breathe-bloom { animation: breathe-bloom 10s infinite; }
  @keyframes breathe-bloom {
    0%   { transform: scale(.36); opacity: .7; animation-timing-function: cubic-bezier(.45, 0, .4, 1); }
    40%  { transform: scale(1);   opacity: 1;  animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
    100% { transform: scale(.36); opacity: .7; }
  }
  .breathe-ring circle { fill: none; }
  .breathe-ring .track { stroke: var(--rule); stroke-width: .5; }
  .breathe-ring .trace { stroke: #B4753A; stroke-width: .6; stroke-dasharray: 1; stroke-dashoffset: 1; }
  .breathe-orb.go .trace { animation: breathe-trace 10s ease-in-out infinite; }
  @keyframes breathe-trace { 0% { stroke-dashoffset: 1; } 40% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
  .breathe-cue { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(30px, 5vw, 48px); line-height: 1; white-space: nowrap;
                 opacity: 0; transition: opacity .24s ease; }   /* out quickly and fully, then the new word fades in (Sam, 2026-10-24: the words overlapped) */
  .breathe-cue.is-on { opacity: 1; transition: opacity .6s ease; }
  .breathe-count { font-size: 12px; letter-spacing: .2em; color: var(--taupe); min-height: 1.6em; }


  /* ---------- buttons the subpages share ---------- */
  .btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font-size: 14px; font-weight: 500; letter-spacing: .06em;
         color: var(--gold-deep); text-decoration: none; background: none; transition: color .2s ease; }   /* .btn.sm: words with a line under them */

  /* ---------- buttons are lines, not boxes (Sam, 2026-10-24, option A of a side-by-side test) ----------
     The site's own way of saying "tap here": the words in The Seasons over a fine gold line, with an arrow. On hover (and keyboard
     focus) the words and line warm to the brightest readable gold, the line reaches a touch further and the arrow steps forward.
     Listen, vinyl, all shows, send message, press photos and the 404's two all share it; .btn.sm stays the small underlined word.
     (It replaced the gold-foil boxes of 2026-10-23, whose dark double rule had become the heaviest line on the page.) */
  .btn:not(.sm), .listen-btn, .vinyl-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 44px; padding: 0 2px 4px; border: 0; border-radius: 0; background: none; cursor: pointer;
    font-family: var(--serif); font-size: 22px; font-weight: 400; letter-spacing: .02em; line-height: 1;
    color: var(--gold-deep); text-decoration: none; transition: color .25s ease; }
  .btn:not(.sm)::after, .listen-btn::after, .vinyl-btn::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background-color: var(--gold); pointer-events: none;
    transform-origin: left; transition: transform .45s cubic-bezier(.16, 1, .3, 1), background-color .25s ease; }
  .btn:not(.sm):focus-visible, .listen-btn:focus-visible, .vinyl-btn:focus-visible { color: var(--gold-hover); }
  .btn:not(.sm):focus-visible::after, .listen-btn:focus-visible::after, .vinyl-btn:focus-visible::after { background-color: var(--gold-hover); transform: scaleX(1.06); }

  .btn svg, .listen-btn svg, .vinyl-btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; flex: none;
                                               transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
  .text-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
  .text-link:hover { text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
  .sentence { font-family: var(--serif); font-weight: 300; }
  /* her sun-and-moon crest, in the board's gold, opens every inside page above its headline */
  main h1.sentence::before { content: ""; display: block; width: clamp(52px, 5vw, 72px); aspect-ratio: 1; margin-bottom: clamp(14px, 1.6vw, 22px); background: var(--gold);
                             -webkit-mask: url("crest.svg") center / contain no-repeat; mask: url("crest.svg") center / contain no-repeat; }
  #about h1.sentence::before { margin-left: auto; margin-right: auto; }   /* centred on about (Sam, 2026-10-22) */

  /* ---------- 05 the feature (about.html) ---------- */
  .ft { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(24px, 4vw, 56px);   /* her photo first, then the words */ margin-top: clamp(24px, 3vw, 40px); align-items: start; }
  .ft h1 { font-size: var(--t1); line-height: 1.02; margin-bottom: 22px; }
  .bio p { font-size: var(--body); line-height: 1.75; margin-top: 14px; max-width: 60ch; }
  .bio p.first { margin-top: 0; }   /* the same face and size as the rest of the bio (Sam, 2026-10-24: the italic was hard to read) */
  /* about's headline and bio sit centred under the crest (Sam, 2026-10-23) */
  #about .ft-text { text-align: center; }
  #about .ft-text h1 { text-wrap: balance; }
  #about .bio p { margin-left: auto; margin-right: auto; }
  .portrait-fig { margin: 0; }
  .portrait { overflow: hidden; }
  .portrait img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 22%; }
  .sub-head { padding: clamp(28px, 4vw, 44px) 0 12px; border-bottom: 2px solid var(--ink); }
  .sub-head h2 { font-size: var(--t1); line-height: 1.02; }


  /* ---------- about · press: where she has been named, each a row that opens the article (mölly, 2026-10-23) ---------- */
  .press { list-style: none; margin: 4px 0 0; padding: 0; }   /* the heading's ink line is the top edge */
  .press li { border-bottom: 1px solid var(--rule); }
  .press a { display: grid; grid-template-columns: minmax(150px, 1fr) 3fr auto; align-items: baseline; gap: 6px 24px; min-height: 64px; padding: 18px 4px;
             text-decoration: none; color: var(--ink); }
  .press-src { font-size: 12px; letter-spacing: .2em; color: var(--ochre); }
  .press-what { font-family: var(--serif); font-size: var(--t2); line-height: 1.25; transition: color .2s ease; }   /* they wrap to two lines on phones */
  .press-go { font-size: 14px; font-weight: 500; letter-spacing: .06em; color: var(--gold-deep); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 6px; }

  /* ---------- the 404 page: her crest, a line, two ways back ---------- */
  .lost { text-align: center; padding-top: clamp(48px, 10vh, 120px); padding-bottom: clamp(64px, 12vh, 140px); }
  .lost .page-head { border-bottom: 0; text-wrap: balance; }
  .lost h1.sentence::before { margin-left: auto; margin-right: auto; }
  .lost-line { font-size: var(--body); line-height: 1.75; color: var(--taupe); max-width: 34ch; margin: 18px auto 0; }
  .lost-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px; margin-top: 28px; }

  /* ---------- the contact page ---------- */
  .contact-card { margin-top: clamp(24px, 3vw, 40px); }
  .contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
  .inbox-for { font-size: 12px; letter-spacing: .26em; color: var(--ochre); }
  .inbox-mail { display: inline-block; min-height: 44px; margin-top: 2px; padding: 8px 0; font-family: var(--serif); font-size: var(--t2); line-height: 1.15;
                text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; overflow-wrap: anywhere; }
  .inbox-note { font-size: var(--small); color: var(--taupe); margin: 10px 0 14px; }
  .copy-mail svg:not(.tick) { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.3; }
  .copy-mail.done svg:not(.tick) { display: none; }
  .contact-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
  .field { display: flex; flex-direction: column; margin-top: 16px; }
  .field label { font-size: 12px; letter-spacing: .14em; color: var(--taupe); }
  .field input, .field select, .field textarea { min-height: 44px; border: 0; border-bottom: 1px solid var(--ink); background: none; border-radius: 0;
                                                 font: 300 16px var(--sans); color: var(--ink); padding: 8px 0; }
  .field textarea { resize: vertical; }
  .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-width: 2px; }
  .field [aria-invalid="true"] { border-bottom-color: var(--amber); }
  /* a missing or wrong field: its ochre line draws in from the left under it (2026-10-24), not a faint change of colour */
  .field { position: relative; }
  .field::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--amber); pointer-events: none;
                  transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
  .field:has([aria-invalid="true"])::after { transform: none; }
  /* what a field still needs, in words under it (2026-10-24 review: a colour change alone went unseen); the line stays at the control */
  .field-msg { position: absolute; left: 0; bottom: 0; margin: 0; font-size: var(--small); line-height: 22px; color: var(--alert); }
  .field:has([aria-invalid="true"]) { padding-bottom: 24px; }
  .field:has([aria-invalid="true"])::after { bottom: 24px; }
  .form-need { margin: 0 0 4px; font-size: var(--small); color: var(--taupe); }   /* one line instead of "required" on every label */
  /* while the message is on its way the send arrow travels (contact.html adds .sending) */
  .contact-form.sending .send svg { animation: arrow-go .9s ease-in-out infinite; }
  .contact-form .note { min-height: 1.6em; margin-top: 16px; font-size: 14px; }
  .contact-form .send { margin-top: 10px; }

  /* ---------- the analytics question (consent.js; shown only once a GA_ID is set) ---------- */
  .consent { position: fixed; left: 16px; bottom: 16px; z-index: 50; width: min(420px, calc(100% - 32px)); padding: 18px;
             background: var(--paper); color: var(--text); border: 1px solid var(--ink); box-shadow: 0 18px 30px -18px rgba(40, 28, 20, .45);
             opacity: 0; transform: translateY(12px); transition: opacity .4s ease, transform .4s ease; }
  .consent.in { opacity: 1; transform: none; }
  .consent.leaving { opacity: 0; transform: translateY(12px); }
  .consent p { font-size: 14px; line-height: 1.6; }
  .consent-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
  .consent-status { font-size: 14px; color: var(--ink); }

  /* ---------- the privacy page ---------- */
  .prose { max-width: 68ch; margin-top: clamp(20px, 2.4vw, 32px); }
  .prose .lead { font-size: var(--body); line-height: 1.75; color: var(--taupe); }   /* body text, as the bio (no italic lead since 2026-10-24) */
  .prose h2 { font-size: var(--t2); margin: 32px 0 8px; padding-top: 12px; border-top: 1px solid var(--rule); }
  .prose p, .prose li { font-size: var(--body); line-height: 1.75; }
  .prose p + p { margin-top: 10px; }
  .prose ul { padding-left: 1.1em; margin: 8px 0 0; }
  .prose code { font-size: .9em; }
  .consent-row { margin-top: 10px; }


  /* ---------- phones ---------- */
  @media (max-width: 760px) {
    .show { grid-template-columns: 64px minmax(0, 1fr); gap: 4px 16px; padding: 18px 4px; }
    .show .when { grid-row: 1 / span 3; }
    .show .acts { grid-column: 2; grid-row: auto; justify-content: flex-start; margin-top: 6px; }
    .show .day { font-size: 34px; }
    .show.next .day { font-size: 44px; }
    .tour-bar { display: none; }   /* on a phone both views are one column: no switch to offer */
    .end { --logo-h: 32px; }   /* her name fits the sunrise's hollow on a phone */
    .played-list li { grid-template-columns: 64px minmax(0, 1fr); gap: 2px 16px; }
    .played-list .p-set { grid-column: 2; margin: -8px 0 -12px; }
    .shows.grid { grid-template-columns: 1fr; }
    .page + .page::before { -webkit-mask-size: 260px 30px; mask-size: 260px 30px; height: 30px; }
    #lists::after { background: linear-gradient(180deg, rgba(240, 213, 190, 0) 35%, rgba(240, 213, 190, .7) calc(100% - 140px), rgba(240, 213, 190, .7)); }   /* full width on phones: a horizon, not a spot */

    .ft, .contact-grid, .field-row { grid-template-columns: 1fr; }
    .press a { grid-template-columns: 1fr auto; }
    .press-src { grid-column: 1 / -1; }
    .ft .portrait img { aspect-ratio: 4 / 5; }   /* a little shorter on phones, so the headline starts on the first screen */
    .feature .ft { margin-top: 0; }
    .mu-player { aspect-ratio: auto; height: 380px; }   /* a square with a 352px floor would force 352px wide on a 320px phone */


    .sets { grid-template-columns: 1fr; }

    .sheet { width: 100%; max-width: none; margin: auto 0 0; max-height: 88%; border: 0; background: #37281E; color: var(--paper); }
    .sheet[open] { animation: sheet-rise 240ms cubic-bezier(.2, .7, .2, 1); }
    .sheet[open].leaving { animation: sheet-sink .18s ease-in both; }
    .sheet .sheet-name small, .sheet .sheet-head p { color: #D9B98C; }   /* pale gold for small words on the dark panel (DESIGN.md) */
    .sheet .sheet-head h2 { color: var(--leaf); }   /* gold leaf on the dark phone panel */
    .sheet .sheet-list li { border-color: rgba(241, 232, 222, .22); }
    .sheet .sheet-list .btn, .sheet .sheet-list .btn:hover, .sheet .sheet-close { color: var(--leaf); }   /* gold leaf on the dark phone panel */


    .home main { padding-top: 0; }
    .cover-mag { width: 100%; height: 100svh; aspect-ratio: auto; padding: calc(var(--bar) + 12px) 18px 22px; box-shadow: none; }
    /* her gold name sits right under her chin, as on desktop (Sam, 2026-10-23), never across her face (mölly, 2026-10-23):
       --tall is the photo's drawn height (the cover's, unless the screen is wide enough to crop it top and bottom),
       --chin how far down the cover her chin falls (39% down her photo, which sits 22% into any spare height) */
    .cover-mag { --tall: max(100svh, calc((100cqw + 36px) * 1400 / 934)); --chin: calc((100svh - var(--tall)) * .22 + var(--tall) * .41); }
    .cover-mast { margin: calc(var(--chin) - var(--bar) - 12px + .6svh) 0 0; }
    .cover-mag .cover-open { margin-top: auto; }   /* the cue at the foot */
    /* she stands 7% right of the photo's middle, so the photo shifts left by that much of its drawn width (100svh tall here) */
    .cover-photo { object-position: calc(50% - 100svh * 934 / 1400 * .07) 22%; }
    .cover-line.tag { margin-top: 6px; text-shadow: 0 1px 14px rgba(20, 14, 10, .6); }   /* as on desktop: it holds where letters cross the sequins (audit 2026-10-25) */
    .topbar .sections { display: none; }
    .contents-btn { display: grid; }
  }

  /* ---------- a phone held sideways, or any short landscape screen (audit D4, 2026-10-23) ----------
     Her portrait zoomed so far here that only her eyes showed under a name on gold rock. Any landscape screen 520px tall or
     less now gets the wide photo (it fits these almost exactly), her whole face below the bar, and her name under her chin,
     as on phones and desktop; the tagline under it, a shorter cue at the foot. Placed from where the photo draws, as on desktop. */
  @media (orientation: landscape) and (max-height: 520px) {
    .cover-mag { width: 100%; height: 100svh; max-height: none; aspect-ratio: auto; box-shadow: none; padding: calc(var(--bar) + 8px) var(--gutter) 12px;
                 --box: calc(100cqw + 2 * var(--gutter)); --drawn: max(var(--box), calc(100svh * 2521 / 1394));
                 --tall: calc(var(--drawn) * 1394 / 2521); --chin: calc((100svh - var(--tall)) * .3 + var(--tall) * .41); }
    .cover-photo { object-position: clamp(calc(var(--box) - var(--drawn)), calc(var(--box) / 2 - var(--drawn) * 1322 / 2521), 0px) 30%; }
    .cover-mast { width: min(46vw, calc((100svh - var(--bar)) * .56)); margin: calc(var(--chin) - var(--bar) - 4px) auto 0; }
    .cover-line.tag { margin-top: 6px; font-size: clamp(16px, 2.2vw, 22px); }
    .cover-mag .cover-open { margin-top: auto; }   /* the cue at the foot */
    .cover-mag .cue-line { height: 18px; }
  }


  /* ---------- hover turns things gold (Sam, 2026-10-23), only where there is a pointer, so a tap on a phone leaves nothing lit ---------- */
  @media (hover: hover) {
    /* words: hover gold, with a gold line beneath */
    .topbar .sections a:hover, .end-right a:hover, .link:hover, .btn.sm:hover, .text-link:hover, .menu-close:hover, .inbox-mail:hover,
    .sheet-list .btn:hover, .breathe-line:hover, .contents-menu .menu-list a:hover .t {
      color: var(--gold-hover); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 6px; }
    /* names and choices: hover gold */
    .breathe-try:hover { color: var(--gold-hover); }
    .played-list .p-set:hover, .show:hover .city, .sets li:hover h3, .press a:hover .press-what, .loop-channel label:hover { color: var(--gold-hover); }
    .topbar.on-photo .sections a:hover { color: var(--leaf); text-decoration-color: var(--leaf); }
    /* buttons as lines: the words and line warm to gold, the line reaches a touch further, the arrow steps forward */
    .btn:not(.sm):hover, .listen-btn:hover, .vinyl-btn:hover { color: var(--gold-hover); }
    .btn:not(.sm):hover::after, .listen-btn:hover::after, .vinyl-btn:hover::after { background-color: var(--gold-hover); transform: scaleX(1.06); }
    .btn:not(.sm):hover svg, .listen-btn:hover svg, .vinyl-btn:hover svg { transform: translateX(3px); }
    .topbar .sections a, .end a, .link, .btn.sm, .text-link, .menu-close, .inbox-mail, .breathe-line, .show .city, .press-what, .sets h3, .loop-channel label {
      transition: color .2s ease, text-decoration-color .2s ease; }
  }

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