@charset "UTF-8";
/* ==========================================================================
   Lindsay Ullmann — landing page

   Built to her own brief: "a creative scrapbook world — quirky, colourful,
   slightly eccentric and very personal", with music at the heart and
   navigation that stays dead simple.

   THE PALETTE IS HER RECORD COVERS.
   An earlier pass sampled only the paintings attached to her poems, which are
   sombre and near-grey, and concluded the site should be achromatic. Wrong
   sample. Her cover art is vivid and consistent: Breathe is 67% mean
   saturation in cyan through deep blue, Miss Serious 47%, the cat book 37%.
   Every colour below comes from those covers, with the ochre of the paintings
   as the counterpoint. Contrast checked to WCAG AA on both grounds.

   THE ECCENTRICITY IS IN THE ARRANGEMENT, NOT IN INVENTED DRAWINGS.
   Overlap, rotation, layering, fragments crowding the edges — every element
   is a real Lindsay artefact. Her hand-drawn layer (zodiac figures, scribbled
   arrows, handwriting) is hers to supply; faking it with a handwriting font
   would be the "template trying to look quirky" she warned about.
   ========================================================================== */

:root {
  /* grounds */
  --deep:      #0B2231;   /* hero — from the deep blues of her covers */
  --paper:     #EEF2F3;   /* cool, from #B7D0D9 lightened — not cream */
  --paper-2:   #E2EAEC;

  /* ink */
  --ink:       #10222B;
  --ink-2:     #3A5560;
  --ink-3:     #4A606A;

  /* her colours */
  --teal:      #0E6C8E;   /* Breathe */
  --teal-hi:   #12809F;
  --cyan:      #58C8E0;   /* Breathe, on dark */
  --ochre:     #855618;   /* the paintings, on light */
  --ochre-hi:  #E0B183;   /* the paintings, on dark */

  --on-teal:   #EEF2F3;
  --on-cyan:   #0B2231;

  --rule:      #CBD8DC;
  --rule-2:    #A9BEC5;
  --rule-dark: #24455A;

  --voice: Petrona, Georgia, "Times New Roman", serif;
  --structure: Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --s-3: .75rem; --s-4: 1rem;   --s-5: 1.5rem;
  --s-6: 2rem;   --s-7: 3rem;   --s-8: 4.5rem; --s-9: 6.5rem;

  --page: 74rem;
  --gutter: clamp(1.15rem, 4vw, 2.75rem);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--structure);
  font-size: clamp(1rem, .97rem + .16vw, 1.08rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;          /* fallback */
  overflow-x: clip;            /* fragments bleed off-page; clip does not create
                                  a scroll container, so sticky keeps working */
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--teal); text-underline-offset: .18em; }
a:hover { color: var(--teal-hi); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.on-dark :focus-visible { outline-color: var(--cyan); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--teal); color: var(--on-teal);
  padding: .7rem 1.2rem; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

.wrap { max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(3rem, 8vw, 5.5rem); position: relative; }
/* The header is sticky, so anchor targets must clear it. */
:target, section[id] { scroll-margin-top: 4.75rem; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.section--band { background: var(--paper-2); }

/* ------------------------------------------------------------- type ----- */
h1, h2, h3 { margin: 0; text-wrap: balance; }

.hero-name {
  font-family: var(--voice); font-weight: 500;
  font-size: clamp(2.9rem, 1.9rem + 4.6vw, 6.2rem);
  line-height: .96; letter-spacing: -.028em; color: var(--paper);
}
.hero-line {
  font-family: var(--voice); font-style: italic; font-weight: 400;
  font-size: clamp(1.25rem, 1.05rem + .95vw, 1.95rem);
  line-height: 1.35; color: var(--ochre-hi); margin: 0;
  max-width: 24ch;
}
.h-lg { font-family: var(--voice); font-weight: 500; font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem); line-height: 1.1; letter-spacing: -.016em; }
.h-md { font-family: var(--voice); font-weight: 500; font-size: clamp(1.35rem, 1.2rem + .7vw, 1.75rem); line-height: 1.2; }

.label {
  font-family: var(--structure); font-size: .715rem; font-weight: 600;
  letter-spacing: .145em; text-transform: uppercase;
  font-variant-numeric: tabular-nums; color: var(--ink-3); margin: 0;
}
.label--ink { color: var(--ink-2); }
.label--ochre { color: var(--ochre); }
.on-dark .label { color: #A9C2CC; }
.on-dark .label--ochre { color: var(--ochre-hi); }

.say { font-family: var(--voice); font-size: clamp(1.1rem, 1rem + .45vw, 1.32rem); line-height: 1.6; color: var(--ink-2); margin: 0; max-width: 34rem; }
.on-dark .say { color: #C3D6DD; }

/* ---------------------------------------------------------- controls ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--structure); font-size: .95rem; font-weight: 600;
  padding: .85rem 1.5rem; border: 2px solid var(--teal); background: var(--teal);
  color: var(--on-teal); text-decoration: none; cursor: pointer;
  border-radius: 999px;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.btn:hover { background: var(--teal-hi); border-color: var(--teal-hi); color: var(--on-teal); }
.btn--spotify { background: var(--cyan); border-color: var(--cyan); color: var(--on-cyan); }
.btn--spotify:hover { background: #7BD8EC; border-color: #7BD8EC; color: var(--on-cyan); }
.btn--ghost { background: transparent; color: var(--cyan); border-color: var(--cyan); }
.btn--ghost:hover { background: transparent; color: #7BD8EC; border-color: #7BD8EC; }
/* The same outline treatment for light grounds — cyan on paper fails contrast. */
.btn--line { background: transparent; color: var(--teal); border-color: var(--teal); }
.btn--line:hover { background: transparent; color: var(--teal-hi); border-color: var(--teal-hi); }
.btn svg { width: 1.05em; height: 1.05em; fill: currentColor; flex: 0 0 auto; }

.arrow { display: inline-flex; align-items: baseline; gap: .4rem; font-family: var(--structure); font-size: .9rem; font-weight: 600; text-decoration: none; }
.arrow::after { content: "\2192"; transition: transform .2s var(--ease); }
.arrow:hover::after { transform: translateX(4px); }
.on-dark .arrow { color: var(--cyan); }

/* ------------------------------------------------------------ header ---- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--deep); color: var(--paper);
  border-bottom: 1px solid var(--rule-dark);
}
.site-header__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); padding-block: .85rem; flex-wrap: wrap; }
.site-mark { font-family: var(--voice); font-size: 1.2rem; font-weight: 500; color: var(--paper); text-decoration: none; letter-spacing: -.01em; white-space: nowrap; }
.site-mark:hover { color: var(--cyan); }
.nav-toggle { display: inline-flex; border: 1px solid var(--rule-dark); background: none; color: var(--paper); padding: .5rem .8rem; font-size: .85rem; font-weight: 600; cursor: pointer; border-radius: 999px; }
@media (min-width: 56rem) { .nav-toggle { display: none; } }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.site-nav a { display: block; color: #C3D6DD; text-decoration: none; padding: .6rem 0; border-bottom: 1px solid var(--rule-dark); font-size: .95rem; }
.site-nav a:hover { color: var(--cyan); }
@media (max-width: 55.99rem) {
  .site-nav { display: none; flex-basis: 100%; padding-bottom: var(--s-3); }
  .site-nav.is-open { display: block; }
}
@media (min-width: 56rem) {
  .site-nav ul { flex-direction: row; align-items: center; gap: clamp(1rem, 2.2vw, 1.9rem); }
  .site-nav a { padding: .2rem 0; border-bottom: 2px solid transparent; font-size: .9rem; }
  .site-nav a:hover { border-bottom-color: var(--cyan); }
}

/* -------------------------------------------------------------- hero ---- */
/* A scrapbook cluster: her covers and paintings overlapping at slight angles.
   Nothing here is invented — every tile is one of her records or canvases. */
.hero { background: var(--deep); color: var(--paper); position: relative; overflow: hidden; padding-block: clamp(2.5rem, 7vw, 5rem) clamp(3rem, 8vw, 5.5rem); }
.hero__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 62rem) { .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.hero__meta { margin-top: var(--s-5); }

/* Scribbled marginalia — a handwriting face plus a couple of drawn marks,
   standing in for the loose sketches she asked for until she sends real
   ones. Used in a small handful of spots only; never body text. */
.scribble { display: inline-flex; align-items: flex-end; gap: .3rem; font-family: 'Caveat', cursive; font-weight: 600; color: var(--ochre); line-height: 1; white-space: nowrap; transform: rotate(var(--tilt, -4deg)); }
.on-dark .scribble { color: var(--ochre-hi); }
.scribble__text { font-size: 1.5rem; }
.scribble img { width: 2.6rem; height: auto; flex: none; }
.hero__note { margin: .5rem 0 0 .4rem; }
.scribble-line { margin: .3rem 0 0 .1rem; }

.trap-field { position: absolute; left: -9999px; }
.form-notice { padding: .8rem 1rem; border-radius: 4px; margin-bottom: var(--s-4); }
.form-notice--ok { background: rgba(133,86,24,.08); color: var(--ochre); }
.form-notice--error { background: rgba(180,40,40,.08); color: #a33; }

.cluster { position: relative; min-height: 21rem; }
@media (min-width: 40rem) { .cluster { min-height: 27rem; } }
.cluster figure { position: absolute; margin: 0; box-shadow: 0 18px 40px -18px rgba(0,0,0,.75); }
.cluster img { width: 100%; }
.cluster figcaption {
  position: absolute; left: 0; bottom: -1.45rem;
  font-family: var(--structure); font-size: .64rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: #93AEB9; white-space: nowrap;
}
/* Captions hang below their tile, except the two upper tiles, whose labels sit
   above instead — anything below them is covered by the tiles in front. */
.cluster { padding-block: 1.5rem 1.6rem; }
.tile-a figcaption, .tile-b figcaption { top: -1.35rem; bottom: auto; }
.tile-a { width: 46%; left: 0;    top: 4%;   transform: rotate(-3.2deg); z-index: 3; }
.tile-b { width: 34%; right: 10%; top: 0;    transform: rotate(2.4deg);  z-index: 2; }
.tile-c { width: 32%; left: 2%;   bottom: 0; transform: rotate(1.6deg);  z-index: 4; }
.tile-d { width: 25%; right: -1%; bottom: 0; transform: rotate(-2deg);   z-index: 5; }

@media (max-width: 39.99rem) {
  .cluster { position: static; min-height: 0; padding-bottom: 0;
             display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.9rem 1rem; }
  .cluster figure { position: static; width: auto; inset: auto; }
  .cluster figcaption { position: static; margin-top: .5rem; white-space: normal; }
}

/* Fragments of her paintings crowding in at the page edges. Her imagery,
   arriving where you do not expect it — the honest version of the figures
   she wants at the margins. */
.fragment { position: absolute; pointer-events: none; opacity: .5; z-index: 0; }
.fragment img { width: 100%; }
.frag-1 { width: 13rem; left: -5rem; bottom: -3rem; transform: rotate(-14deg); }
.frag-2 { width: 10rem; right: -3.5rem; top: 8%; transform: rotate(11deg); }
@media (max-width: 48rem) { .fragment { display: none; } }

/* -------------------------------------------------------------- music --- */
.music__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-6); }
.music__cta { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; }
.music__note { margin: 0; }

.releases { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s-5); }
@media (min-width: 52rem) { .releases { grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s-6); } }
.release { margin: 0; }
.release img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.release figcaption { margin-top: .7rem; }
.release__title { display: block; font-family: var(--voice); font-size: 1.1rem; font-weight: 500; line-height: 1.25; }

.tracks { list-style: none; margin: var(--s-7) 0 0; padding: 0; border-top: 1px solid var(--rule); }
.tracks > li { border-bottom: 1px solid var(--rule); }
.track { display: flex; align-items: center; gap: var(--s-4); padding-block: .7rem; }
.track__n { flex: 0 0 1.5rem; font-family: var(--structure); font-size: .715rem; font-weight: 600; letter-spacing: .12em; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.track__name { flex: 1 1 auto; min-width: 0; font-family: var(--voice); font-size: 1.2rem; font-weight: 500; }
.track__year { font-family: var(--structure); font-size: .715rem; font-weight: 600; letter-spacing: .12em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.play {
  flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: 999px;
  border: 2px solid var(--teal); background: transparent; color: var(--teal);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.play:hover { background: var(--teal); color: var(--on-teal); }
.play[aria-pressed="true"] { background: var(--teal); color: var(--on-teal); }
.play svg { width: .72rem; height: .82rem; fill: currentColor; }
.play svg[hidden] { display: none; }
.play[disabled] { opacity: .4; cursor: not-allowed; }

/* --------------------------------------------------------------- art ---- */
/* Her paintings, shown as paintings. They have been on her own website for
   five years filed as blog-post images. */
.art-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s-5); align-items: start; }
@media (min-width: 46rem) { .art-grid { grid-template-columns: repeat(6, minmax(0,1fr)); gap: var(--s-6); } }
.art { margin: 0; }
.art a { display: block; text-decoration: none; color: inherit; }
.art img { width: 100%; }
.art figcaption { margin-top: .75rem; display: flex; flex-wrap: wrap; gap: .2rem .9rem; }
.art__title { font-family: var(--voice); font-size: 1.05rem; font-weight: 500; }
.art a:hover .art__title { color: var(--teal); }
@media (min-width: 46rem) {
  .art { grid-column: span 2; }
  .art--wide { grid-column: span 3; }
  .art--big  { grid-column: span 4; }
}

/* ------------------------------------------------------------- books ---- */
.books { display: grid; gap: var(--s-6); }
@media (min-width: 48rem) { .books { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s-8); } }
.book { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0,1fr); gap: var(--s-5); align-items: start; }
.book img { width: 100%; box-shadow: 0 12px 30px -16px rgba(16,34,43,.55); }

/* ----------------------------------------------------------- stories ---- */
.stories { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.stories > li { border-bottom: 1px solid var(--rule); }
.stories a { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .3rem var(--s-5); align-items: baseline; padding-block: var(--s-4); text-decoration: none; color: inherit; transition: transform .2s var(--ease); }
@media (hover: hover) { .stories a:hover { transform: translateX(4px); } }
.stories a:hover .stories__t { color: var(--teal); }
.stories__t { font-family: var(--voice); font-size: 1.22rem; font-weight: 500; line-height: 1.3; }
@media (max-width: 34rem) { .stories a { grid-template-columns: minmax(0,1fr); } }

/* --------------------------------------------------------- subscribe ---- */
.subscribe { background: var(--deep); color: var(--paper); position: relative; overflow: hidden; }
.subscribe__in { max-width: 40rem; position: relative; z-index: 1; }
.subscribe form { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.subscribe input {
  flex: 1 1 15rem; min-width: 0; font-family: var(--structure); font-size: 1rem;
  color: var(--paper); background: rgba(255,255,255,.06);
  border: 1px solid var(--rule-dark); border-radius: 999px; padding: .85rem 1.2rem;
}
.subscribe input::placeholder { color: #7E9BA7; }
.subscribe input:focus-visible { border-color: var(--cyan); }

/* -------------------------------------------------------------- note ---- */
/* The one place we say out loud what is missing, rather than faking it. */
.handnote {
  border: 1px dashed var(--rule-2); border-radius: 6px;
  padding: var(--s-5); margin-top: var(--s-7);
  display: grid; gap: var(--s-3); max-width: 44rem;
}
.handnote p { margin: 0; }

/* ------------------------------------------------------------ footer ---- */
.site-footer { background: var(--deep); color: #C3D6DD; padding-block: var(--s-7) var(--s-6); }
.site-footer a { color: #C3D6DD; text-decoration: none; font-size: .9rem; }
.site-footer a:hover { color: var(--cyan); }
.footer-grid { display: grid; gap: var(--s-6); }
@media (min-width: 48rem) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; gap: var(--s-7); } }
.footer-grid ul { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.colophon { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--rule-dark); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; }

/* ------------------------------------------------------------ motion ---- */
.lift { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--d, 0ms); }
.is-lit .lift, .lift.is-lit { opacity: 1; transform: none; }
html:not(.js) .lift { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; transition-delay: 0ms !important; }
  .lift { opacity: 1 !important; transform: none !important; }
  .cluster figure, .fragment { transform: none !important; }
}

/* --------------------------------------------------------------------------
   Component spacing
   Kept as real classes rather than style attributes: a design system that
   leaks inline styles into the markup is not a system.
   -------------------------------------------------------------------------- */
.section__intro { margin-top: var(--s-4); }
.section__more  { margin-top: var(--s-6); }
.section__more--tight { margin-top: var(--s-5); }

.h-lg--light { color: var(--paper); }
.h-lg--spaced { margin-bottom: var(--s-6); }

.art-grid { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.stories  { margin-top: var(--s-6); }

.book__meta  { margin: .4rem 0 .75rem; }
.book__blurb { font-size: 1.05rem; }

.about-col { max-width: 44rem; }

.subscribe__say  { margin-top: var(--s-3); }
.subscribe__else { margin-top: var(--s-5); }
.subscribe__else a { color: var(--cyan); }

.footer-quote {
  font-family: var(--voice); font-style: italic; font-weight: 400;
  font-size: 1.3rem; line-height: 1.35; color: var(--ochre-hi); margin: 0;
}
.footer-place { margin-top: var(--s-4); }

.handnote__say { font-size: 1.05rem; color: var(--ink-2); }

/* The subscribe fragment sits low-right rather than high-right. */
.frag-3 { width: 12rem; right: -3.5rem; bottom: -3rem; transform: rotate(9deg); }

/* ==========================================================================
   INNER PAGES
   Music, Art, Stories, Books, About, Contact — the six she named. Each opens
   on the same deep ground as the home hero so arriving anywhere feels like
   the same place, then drops to paper for the content.
   ========================================================================== */

.site-nav [aria-current="page"] { color: var(--paper); }
@media (min-width: 56rem) { .site-nav [aria-current="page"] { border-bottom-color: var(--ochre-hi); } }

.page-head { background: var(--deep); color: var(--paper); position: relative; overflow: hidden; padding-block: clamp(2.5rem, 6vw, 4.25rem) clamp(2.75rem, 6vw, 4rem); }
.page-head__in { position: relative; z-index: 1; max-width: 42rem; }
.page-head h1 { font-family: var(--voice); font-weight: 500; font-size: clamp(2.15rem, 1.6rem + 2.5vw, 3.6rem); line-height: 1.02; letter-spacing: -.022em; color: var(--paper); margin-top: var(--s-3); }
.page-head .say { margin-top: var(--s-4); }
.page-head__date { margin-top: var(--s-4); }
/* Fragment placements particular to the inner-page bands. */
.frag-4 { width: 11rem; right: -3rem; bottom: -3.5rem; transform: rotate(-8deg); }
.frag-5 { width: 9rem; right: 8%; top: -2.5rem; transform: rotate(13deg); }

/* Shared rhythm for a run of titled blocks down a page. */
.strip { border-top: 1px solid var(--rule); padding-top: var(--s-6); margin-top: var(--s-8); }
.strip__label { margin-bottom: var(--s-5); }

/* ------------------------------------------------------ music page ------ */
/* One release per row, big cover, room for a sentence. The home page shows
   four covers in a line; here each record gets to be a record. */
.record { display: grid; gap: var(--s-5); align-items: start; padding-block: var(--s-6); border-bottom: 1px solid var(--rule); }
@media (min-width: 42rem) { .record { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--s-6); } }
.record:last-of-type { border-bottom: 0; }
.record img { width: 100%; aspect-ratio: 1/1; object-fit: cover; box-shadow: 0 14px 34px -20px rgba(16,34,43,.6); }
.record__body > * + * { margin-top: var(--s-3); }
.record__links { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }

/* Spotify's own player, for a release that has no small enough file of its
   own to stream here. A real play through this counts toward her actual
   Spotify numbers — the goal she named — which a locally hosted file never
   would, so this is not just a workaround for the file-size problem. */
.record__embed { margin-top: var(--s-5); max-width: 26rem; border-radius: 12px; overflow: hidden; }
.record__embed iframe { display: block; width: 100%; border: 0; }

/* A record with no small file to stream. Saying so is better than a play
   button that quietly downloads sixty-six megabytes. */
.note-inline { font-size: .92rem; color: var(--ink-3); font-style: italic; }

.demo { display: grid; gap: var(--s-5); align-items: center; }
@media (min-width: 42rem) { .demo { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); } }
.demo img { width: 100%; box-shadow: 0 14px 34px -20px rgba(16,34,43,.6); }

/* ------------------------------------------------------- art page ------- */
/* Every canvas at a decent size. No masonry tricks — a wall of paintings
   wants air, not density. */
.wall { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); margin-top: clamp(2rem, 5vw, 3rem); }
.piece { margin: 0; }
.piece img { width: 100%; }
.piece figcaption { margin-top: var(--s-4); display: grid; gap: .35rem; max-width: 34rem; }
.piece__title { font-family: var(--voice); font-size: clamp(1.3rem, 1.15rem + .6vw, 1.65rem); font-weight: 500; line-height: 1.2; }
.piece__note { font-family: var(--voice); font-size: 1.05rem; color: var(--ink-2); margin: 0; }
/* Alternate which side the caption sits on, so the wall has a gait. */
@media (min-width: 52rem) {
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .piece--full { grid-column: 1 / -1; }
  .piece--full figcaption { margin-left: auto; margin-right: 0; }
}

/* ---------------------------------------------------- stories page ------ */
.stories__ex { font-family: var(--voice); font-size: 1.02rem; color: var(--ink-2); grid-column: 1 / -1; margin: .1rem 0 0; max-width: 46rem; }
.stories--full a { padding-block: var(--s-5); }

/* ------------------------------------------------------ books page ------ */
.volume { display: grid; gap: var(--s-5); align-items: start; padding-block: var(--s-7); border-bottom: 1px solid var(--rule); }
@media (min-width: 44rem) { .volume { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: var(--s-7); } }
.volume:last-of-type { border-bottom: 0; }
.volume img { width: 100%; box-shadow: 0 14px 34px -18px rgba(16,34,43,.6); }
.volume__body > * + * { margin-top: var(--s-4); }

/* ------------------------------------------------------ about page ------ */
/* A real photo, not a decorative fragment — she said this is the one page
   it belongs on, and it should be one she actually likes. Paired with the
   opening words rather than floated above them: a centred image sitting
   over left-aligned prose read as two unrelated things stacked by accident,
   not a considered layout. No frame or shadow, matching every other real
   image on the site. */
.about-intro { display: grid; gap: var(--s-6); margin-bottom: var(--s-6); }
.about-portrait { margin: 0; }
.about-portrait img { width: 100%; margin-inline: auto; max-width: 20rem; }
.about-intro .prose { margin: 0; }
@media (min-width: 40rem) {
  .about-intro { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); align-items: start; gap: var(--s-7); }
  .about-portrait img { max-width: none; }
}

.prose { max-width: 36rem; }
.prose p { font-family: var(--voice); font-size: clamp(1.1rem, 1rem + .45vw, 1.28rem); line-height: 1.65; color: var(--ink-2); margin: 0; }
.prose p + p { margin-top: var(--s-5); }
.prose p strong { color: var(--ink); font-weight: 500; }

/* Testimonials reuse the wall grid, with a quote in place of a canvas. */
.piece__quote {
  font-family: var(--voice); font-size: clamp(1.08rem, 1rem + .35vw, 1.24rem);
  line-height: 1.5; color: var(--ink-2); margin: 0;
  border-left: 2px solid var(--ochre); padding-left: var(--s-5);
}

.gigs { list-style: none; margin: var(--s-6) 0 0; padding: 0; border-top: 1px solid var(--rule); }
.gigs li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem 1.5rem; padding-block: .8rem; border-bottom: 1px solid var(--rule); }
.gigs__t { font-family: var(--voice); font-size: 1.12rem; font-weight: 500; }

.pull {
  font-family: var(--voice); font-style: italic; font-weight: 400;
  font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2rem); line-height: 1.3;
  color: var(--teal); margin: var(--s-7) 0; max-width: 26ch;
  border-left: 2px solid var(--ochre); padding-left: var(--s-5);
}

/* ---------------------------------------------------- contact page ------ */
.contact-grid { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 48rem) { .contact-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s-8); } }
.field { display: grid; gap: .4rem; }
.field label { font-family: var(--structure); font-size: .715rem; font-weight: 600; letter-spacing: .145em; text-transform: uppercase; color: var(--ink-3); }
.field input, .field textarea {
  font-family: var(--structure); font-size: 1rem; color: var(--ink);
  background: #fff; border: 1px solid var(--rule-2); border-radius: 6px; padding: .8rem 1rem;
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--teal); }
.contact-form { display: grid; gap: var(--s-5); max-width: 34rem; }
.contact-form .btn { justify-self: start; }

.elsewhere { list-style: none; margin: var(--s-5) 0 0; padding: 0; border-top: 1px solid var(--rule); }
.elsewhere li { border-bottom: 1px solid var(--rule); }
.elsewhere a { display: flex; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-4); text-decoration: none; color: inherit; font-family: var(--voice); font-size: 1.12rem; font-weight: 500; }
.elsewhere a:hover { color: var(--teal); }
.elsewhere .label { align-self: center; }

/* ------------------------------------------------------ poem pages ------ */
/* One poem, its picture, and nothing else competing. The measure is narrow
   because verse is read line by line, not in a block. */
.poem-plate { margin: 0 0 clamp(2rem, 5vw, 3rem); }
/* Capped, or a tall canvas fills the screen and the poem starts below the
   fold — on a poem page the words are the point. */
.poem-plate img { max-height: 34rem; width: auto; max-width: 100%; margin-inline: auto; }
.poem-plate figcaption { margin-top: var(--s-4); }

.poem-body { max-width: 33rem; margin-inline: auto; }
/* Verse, not a paragraph that happens to have line breaks — italic is her
   speaking voice everywhere else on the site (the hero line, every pull
   quote), and roman type here was the reason this page read as boring:
   nothing distinguished it from an ordinary caption. Sized between body
   copy and a full pull-quote — big enough to read as a poem, not so big
   that forty lines of it becomes a wall. */
.poem-body p {
  font-family: var(--voice); font-style: italic; font-weight: 400;
  font-size: clamp(1.3rem, 1.15rem + .5vw, 1.6rem);
  line-height: 1.65; color: var(--ink); margin: 0 0 .65em;
  /* wrapped lines indent, so a long line still reads as one line of verse */
  text-indent: -1.5rem; padding-left: 1.5rem;
}
.poem-attrib { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--rule); max-width: 33rem; margin-inline: auto; }

/* ------------------------------------------------------ blog posts ------ */
/* Her announcements are a sentence or two each, so they are shown whole
   rather than teased — a "read more" leading to two more lines is a lie. */
.posts { border-top: 1px solid var(--rule); margin-top: clamp(2rem, 5vw, 3rem); }
.post { padding-block: var(--s-7); border-bottom: 1px solid var(--rule); max-width: 44rem; }
.post > * + * { margin-top: var(--s-4); }
.post .label + .h-md { margin-top: .5rem; }

/* A post with a cover — the same record-style pairing used on the Music
   page, just smaller, so a post reads as belonging to this site rather
   than as a plain wall of text. */
.post--media { max-width: none; }
.post--media img { width: 100%; aspect-ratio: 1/1; object-fit: cover; box-shadow: 0 14px 34px -20px rgba(16,34,43,.6); }
@media (min-width: 34rem) {
  .post--media { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: var(--s-5); align-items: start; }
  .post--media img { margin-top: .2rem; }
  .post--media .post__body { margin-top: 0; }
}
.post--media .post__body { max-width: 44rem; }
.post--media .post__body > * + * { margin-top: var(--s-4); }

/* Index of poems: the picture small, the first line doing the work. */
.poem-list { list-style: none; margin: clamp(2rem, 5vw, 3rem) 0 0; padding: 0; display: grid; gap: var(--s-6); }
.poem-card { display: grid; grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); gap: var(--s-5); align-items: start; text-decoration: none; color: inherit; }
@media (min-width: 44rem) { .poem-card { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: var(--s-6); } }
/* One shape for every thumbnail, or the rows stagger — her pictures run from a
   2.3:1 strip to a tall portrait. Cropped slightly above centre, where the
   faces and the eyes are. */
.poem-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 40%; }
.poem-card__t { font-family: var(--voice); font-size: clamp(1.35rem, 1.2rem + .7vw, 1.75rem); font-weight: 500; line-height: 1.15; display: block; }
.poem-card:hover .poem-card__t { color: var(--teal); }
.poem-card__first { font-family: var(--voice); font-size: 1.08rem; color: var(--ink-2); margin: .5rem 0 0; }
.poem-card .label { margin-top: .4rem; display: block; }

/* --------------------------------------------------------- next up ------ */
/* The end of every inner page points at another room rather than stopping. */
.onward { background: var(--paper-2); border-top: 1px solid var(--rule); padding-block: clamp(2.5rem, 6vw, 3.75rem); }
.onward__in { display: grid; gap: var(--s-5); }
@media (min-width: 44rem) { .onward__in { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s-6); } }
.onward a { display: block; text-decoration: none; color: inherit; border: 1px solid var(--rule-2); border-radius: 8px; padding: var(--s-5); transition: border-color .2s var(--ease), transform .2s var(--ease); }
.onward a:hover { border-color: var(--teal); }
@media (hover: hover) { .onward a:hover { transform: translateY(-2px); } }
.onward__t { display: block; font-family: var(--voice); font-size: 1.35rem; font-weight: 500; margin-top: .5rem; }
.onward__d { display: block; font-size: .95rem; color: var(--ink-2); margin-top: .35rem; }

/* Two doors out of the homepage poems strip. */
.arrow--sp { margin-left: var(--s-5); }