/* ------------------------------------------------------------------
   councilflat.com — The Council Flats of Kingsbury
   Palette sampled from the 2009 sleeve artwork (UNCH021).
   ------------------------------------------------------------------ */

:root {
  --paper:      #e9f4f2;  /* page ground, pale aqua wash          */
  --paper-deep: #c5dfdc;  /* the sleeve's dominant aqua           */
  --paper-warm: #f7f1e6;  /* aged card, used for panels           */
  --ink:        #16332f;  /* deep teal, body text                 */
  --ink-soft:   #3d5d58;  /* secondary text                       */
  --rose:       #d81b6a;  /* the sleeve's magenta — every action  */
  --rose-deep:  #a9124f;
  --coral:      #ee7f44;
  --peach:      #f7d8b4;
  --sepia:      #8a5a36;  /* the burnt edge — rules and hairlines */

  --rule: 1px solid color-mix(in srgb, var(--sepia) 42%, transparent);
  --rail: 13rem;

  --measure: 62ch;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --shell: 70rem;

  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.62;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--rose-deep); }

:focus-visible {
  outline: 3px solid var(--rose);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--rose);
  color: #fff;
  padding: 0.75rem 1.25rem;
  font-family: var(--sans);
  z-index: 10;
}
.skip:focus { left: 0; }

/* ---------------------------------------------------- cut-up collage */

.collage {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--paper);
}

.shard {
  position: absolute;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Four photographs from the band's own folder, cut against each other
   at hard diagonals. Each keeps its own colour — the pink tower, the
   crimson palms, the gold aerial city, the lilac front room — held
   together by low opacity and the grain over the top. */
.shard--tower {
  inset: -8% 54% 46% -10%;
  background-image: image-set(url("assets/collage/shard-tower.webp") type("image/webp"),
                              url("assets/collage/shard-tower.jpg") type("image/jpeg"));
  background-position: 50% 35%;
  clip-path: polygon(0 0, 100% 0, 82% 100%, 0 88%);
  opacity: 0.3;
}
.shard--palms {
  inset: 2% -8% 40% 62%;
  background-image: image-set(url("assets/collage/shard-palms.webp") type("image/webp"),
                              url("assets/collage/shard-palms.jpg") type("image/jpeg"));
  background-position: 60% 50%;
  clip-path: polygon(26% 0, 100% 0, 100% 100%, 0 76%);
  opacity: 0.22;
}
.shard--city {
  inset: 58% 58% -10% -6%;
  background-image: image-set(url("assets/collage/shard-city.webp") type("image/webp"),
                              url("assets/collage/shard-city.jpg") type("image/jpeg"));
  background-position: 40% 60%;
  clip-path: polygon(0 22%, 92% 0, 100% 84%, 8% 100%);
  opacity: 0.26;
}
.shard--room {
  inset: 46% -6% -8% 48%;
  background-image: image-set(url("assets/collage/shard-room.webp") type("image/webp"),
                              url("assets/collage/shard-room.jpg") type("image/jpeg"));
  background-position: 70% 40%;
  clip-path: polygon(14% 0, 100% 16%, 100% 100%, 0 100%);
  opacity: 0.2;
}
.shard--rose {
  inset: 10% 6% 62% 66%;
  background: var(--rose);
  clip-path: polygon(34% 0, 100% 22%, 72% 100%, 0 64%);
  opacity: 0.14;
  mix-blend-mode: multiply;
}

/* Paper grain over the whole backdrop. */
.collage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--paper) 52%, transparent);
}

.grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.32;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------ shell */

main { position: relative; }

.hero,
.player,
.notes,
.tracks,
.label,
.foot__inner {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --------------------------------------------------------- headings */

h1, h2 {
  font-family: var(--sans);
  font-variation-settings: "wdth" 88;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.15rem, 1.2rem + 4vw, 3.6rem);
  margin-block: 0.35rem 0.9rem;
  text-wrap: normal;
}
/* The name stacks in two parts, the way it does on the sleeve. */
h1 span { display: block; }

h2 {
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.1rem);
  margin-bottom: 1.1rem;
}

.kicker {
  font-family: var(--sans);
  font-variation-settings: "wdth" 92;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  margin: 0;
}

/* ----------------------------------------------------------- hero */

.hero {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  padding-block: clamp(2rem, 6vw, 4.5rem) clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

/* Wide: sleeve and release facts stack in the left column, the name
   and the listening choices hold the right. Narrow: sleeve, then the
   name and the choices, and the facts last — the CTAs stay high. */
@media (min-width: 62rem) {
  .hero {
    grid-template-columns: minmax(0, 1.02fr) minmax(24rem, 0.98fr);
    grid-template-areas:
      "sleeve intro"
      "facts  intro";
    grid-template-rows: max-content 1fr;
    row-gap: 0;
  }
  .sleeve { grid-area: sleeve; }
  .intro  { grid-area: intro; }
  .facts  { grid-area: facts; }
}


.sleeve { margin: 0; }

.sleeve img {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--sepia) 40%, transparent);
  box-shadow: 0 1.5rem 3rem -1.5rem rgba(22, 51, 47, 0.45);
}

.sleeve figcaption {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin-top: 0.7rem;
}

/* Release facts, tucked under the sleeve where the landscape crop
   leaves the column short. */
.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0 1.25rem;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  align-self: start;
  padding-top: 1rem;
  border-top: var(--rule);
  font-family: var(--sans);
  font-size: 0.9rem;
}
.facts dt {
  font-weight: 600;
  font-variation-settings: "wdth" 84;
  color: var(--ink-soft);
  padding: 0.3rem 0;
}
.facts dd {
  margin: 0;
  padding: 0.3rem 0;
  font-weight: 500;
}

/* Wide screens: the sleeve and its facts bleed left, out of the shell
   and towards the viewport edge, so the artwork runs as large as it can
   without pushing the listening links below the fold. Placed after the
   base .sleeve / .facts rules on purpose — a media query adds no
   specificity, so their `margin` shorthands would cancel this. */
@media (min-width: 78rem) {
  .hero { grid-template-columns: minmax(0, 1.16fr) minmax(24rem, 0.84fr); }
  .sleeve,
  .facts { margin-left: calc((100vw - var(--shell)) / -2 - var(--gutter) + 2rem); }
}

.standfirst {
  font-size: clamp(1.1rem, 1rem + 0.45vw, 1.3rem);
  line-height: 1.48;
  max-width: 34ch;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  color: var(--ink);
}

/* --------------------------------------------------------- listen */

/* Two offers of equal rank. The Bandcamp heading is itself the link;
   the streaming heading introduces the list. Same family, size, weight
   and rule beneath — neither reads as the junior option. Set after the
   base h2 rule, and every h2 property it needs is restated here. */
.listen__head {
  font-family: var(--sans);
  font-variation-settings: "wdth" 92;
  font-weight: 700;
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.35rem);
  letter-spacing: -0.015em;
  line-height: 1.25;
  text-wrap: normal;
  color: var(--ink);
  margin: 0 0 0.6rem;
  border-bottom: 2px solid var(--ink);
}

.listen__head a {
  display: block;
  padding-bottom: 0.5rem;
  color: var(--rose-deep);
  text-decoration: none;
  transition: color 140ms ease;
}
.listen__head a:hover,
.listen__head a:focus-visible {
  color: var(--rose);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* The heading with no link still needs the space its padding gave. */
.listen__head:not(:has(a)) { padding-bottom: 0.5rem; }

.listen__note {
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem);
}

.platforms {
  list-style: none;
  margin: 0;
  padding: 0;
}
.platforms li { border-bottom: var(--rule); }

.platforms a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0.6rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.05rem;
  font-variation-settings: "wdth" 92;
  color: var(--ink);
  text-decoration: none;
  transition: background-color 140ms ease, color 140ms ease;
}
.platforms a:hover,
.platforms a:focus-visible {
  background: var(--peach);
  color: var(--rose-deep);
}

.role {
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--ink-soft);
  flex: none;
}

/* --------------------------------------------------------- player */

.player {
  padding-block: clamp(2rem, 5vw, 3.5rem);
  border-top: var(--rule);
}

.player__frame {
  background: var(--paper-warm);
  border: 1px solid color-mix(in srgb, var(--sepia) 35%, transparent);
  min-height: 13rem;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.9rem;
  padding: 2rem 1.5rem;
  text-align: center;
}
.player__frame:has(iframe) {
  min-height: 24rem;
  padding: 0;
  background: transparent;
  border: 0;
  place-items: stretch;
}

.player__frame iframe {
  width: 100%;
  min-height: 24rem;
  border: 0;
  display: block;
}

.player__start {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.05rem;
  font-variation-settings: "wdth" 92;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: 999px;
  padding: 0.95rem 1.6rem;
  cursor: pointer;
  text-align: center;
  transition: background-color 140ms ease;
}
.player__start:hover { background: var(--rose); }
.player__note {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-soft);
  max-width: 34ch;
  margin: 0;
}
.player__frame:has(iframe) .player__note { display: none; }

/* ------------------------------------------------- the left rail

   Every section below the hero hangs its heading in a rail, so the
   page keeps one spine down the left and the reading column stays a
   sane measure instead of stretching across the whole shell. */

@media (min-width: 62rem) {
  .player,
  .notes,
  .tracks,
  .label {
    display: grid;
    grid-template-columns: var(--rail) minmax(0, 1fr);
    column-gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }

  .player > h2,
  .notes > h2,
  .tracks > h2,
  .label > h2 {
    grid-column: 1;
    margin-bottom: 0;
    font-size: clamp(1.25rem, 0.9rem + 0.7vw, 1.55rem);
  }

  .player > .player__frame,
  .notes > .notes__body,
  .notes > .photo,
  .tracks > .tracklist,
  .label > .label__body { grid-column: 2; }
}

/* ---------------------------------------------------- sleeve notes */

.notes {
  padding-block: clamp(2rem, 5vw, 3.5rem);
  border-top: var(--rule);
}

.notes__body { max-width: var(--measure); }
.notes__body p { margin: 0 0 1.1em; }

.notes .lead {
  font-size: clamp(1.15rem, 1.02rem + 0.6vw, 1.42rem);
  line-height: 1.5;
  color: var(--ink);
}

.notes__body p + p { color: var(--ink-soft); }

/* A single photograph, printed straight, no treatment — the collage
   behind the page is doing enough. */
.photo {
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
}
.photo img {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--sepia) 40%, transparent);
}
.photo figcaption {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin-top: 0.7rem;
}

/* ------------------------------------------------------- tracklist */

.tracks {
  padding-block: clamp(2rem, 5vw, 3.5rem);
  border-top: var(--rule);
}

.tracklist {
  list-style: none;
  counter-reset: track;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  max-width: 52rem;
}

@media (max-width: 40rem) { .tracklist { columns: 1; } }

.tracklist li {
  counter-increment: track;
  break-inside: avoid;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: var(--rule);
}

.tracklist li::before {
  content: counter(track, decimal-leading-zero);
  font-family: var(--sans);
  font-variation-settings: "wdth" 80;
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--coral);
  flex: none;
  width: 1.8rem;
}

.t-name { flex: 1 1 auto; }

.t-time {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-variation-settings: "wdth" 80;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  flex: none;
}

/* ----------------------------------------------------------- label */

.label {
  padding-block: clamp(2rem, 5vw, 3.5rem);
  border-top: var(--rule);
}

.label p { max-width: var(--measure); margin: 0 0 1.1em; }

.label__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0;
}

.label__links a { color: var(--rose-deep); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

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

.foot {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--ink);
  color: var(--paper-deep);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.foot__inner {
  padding-block: clamp(2rem, 5vw, 3rem);
  display: grid;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 0.95rem;
}

.foot a { color: var(--peach); text-underline-offset: 0.2em; }

.foot__legal {
  margin: 0.8rem 0 0;
  font-size: 0.82rem;
  color: color-mix(in srgb, var(--paper-deep) 65%, var(--ink));
}

.foot p { margin: 0; }

.todo {
  border: 1px dashed var(--coral);
  color: var(--peach);
  padding: 0.15rem 0.5rem;
}

/* -------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}