/* CHRLY-K — a photocopied flyer.
   Three colours only: paper, ink, and a light grey, printed slightly out of
   register. The grey replaced a mint green on 2026-09-21, when the record
   label it was sampled from was replaced by a plain black-and-white one.
   See DESIGN.md before changing the tokens below. */

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

:root {
  /* Ground and ink */
  --paper:      oklch(0.982 0.006 170);
  --paper-2:    oklch(0.955 0.010 170);
  --ink:        oklch(0.18 0.015 300);
  --ink-soft:   oklch(0.46 0.012 300);

  /* The one spot tone. Too light to carry text on paper, so it is only ever
     used as a fill: the offset behind the logo, monogram tiles, hovers, and
     song titles where the ground is ink. */
  --grey:       oklch(0.90 0.004 170);

  --rule:       color-mix(in oklab, var(--ink) 16%, transparent);
  --rule-light: color-mix(in oklab, var(--paper) 22%, transparent);

  --display: 'Familjen Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --body:    'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --wrap:   1240px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --bar:    58px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  line-height: 1.6;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* height: auto matters. The HTML width/height attributes are presentational
   hints, so an image with only its width set in CSS keeps its intrinsic
   pixel height and stretches. */
img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--grey); color: var(--ink); }

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

/* Black on black is no outline at all. */
.s-placed :focus-visible { outline-color: var(--grey); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: .75rem 1.25rem;
  z-index: 200;
}
.skip:focus { left: 0; }

/* ─────────────────────────────  GRID  ───────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.grid12 {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
}

@media (min-width: 900px) {
  .grid12 { grid-template-columns: repeat(12, 1fr); }
}

/* ──────────────────────────  TYPOGRAPHY  ────────────────────────── */

h1, h2, h3, h4, .display {
  font-family: var(--display);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

h2 { font-size: clamp(2.4rem, 7vw, 5rem); }

h3 {
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  line-height: 1.05;
}

p { max-width: 68ch; }
p + p { margin-top: 1em; }

a { color: inherit; }

/* Text link: hairline ink rule that swells into a grey highlighter swipe. */
.link {
  text-decoration: none;
  background-image: linear-gradient(var(--ink), var(--ink));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
  padding-bottom: 1px;
  transition: background-size .25s var(--ease);
}

.link:hover {
  background-image: linear-gradient(var(--grey), var(--grey));
  background-size: 100% .55em;
}

.meta {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ────────────────────────────  TOPBAR  ──────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in oklab, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}

.topbar-inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: var(--bar);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.brand {
  margin-right: auto;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.nav-links {
  display: flex;
  gap: clamp(1rem, 2vw, 2rem);
  align-items: center;
}

.nav-links a {
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  padding: .25rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color .2s var(--ease);
}

.nav-links a:hover,
.nav-links a.active { border-bottom-color: var(--ink); }

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
}

@media (max-width: 800px) {
  .hamburger { display: flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: var(--bar);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: 1rem var(--gutter) 1.5rem;
  }
  .nav-links.open { display: flex; }
  .nav-links a { font-size: 1.15rem; }
}

/* ────────────────────────────  SECTIONS  ────────────────────────── */

section { scroll-margin-top: var(--bar); }

.s-hero    { padding-block: clamp(2rem, 5vw, 4rem) clamp(3.5rem, 7vw, 6rem); }
.s-sound   { background: var(--grey); padding-block: clamp(3.5rem, 8vw, 7rem); overflow: hidden; }
.s-who     { padding-block: clamp(4rem, 9vw, 8rem); }
.s-placed  { background: var(--ink); color: var(--paper); padding-block: clamp(3.5rem, 8vw, 7rem); }
.s-gigs    { padding-block: clamp(3.5rem, 8vw, 7rem); }
.s-contact { background: var(--grey); padding-block: clamp(3rem, 7vw, 6rem); }

/* ─────────────────────────────  HERO  ───────────────────────────── */

/* The logo printed twice: a grey pass offset up and left, the black pass on
   top. Two PNGs rather than a filter, so it cannot fall back to a colour block. */
.wordmark {
  position: relative;
  width: min(100%, 1000px);
  margin-bottom: clamp(1.25rem, 3vw, 2.5rem);
}

.wordmark .mark { width: 100%; height: auto; }

.wordmark .mark-ghost {
  position: absolute;
  inset: 0;
  transform: translate(-0.6%, -2.4%);
}

.wordmark .mark-ink { position: relative; z-index: 1; }

.hero-photo {
  width: 100%;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.hero-photo img {
  width: 100%;
  height: clamp(220px, 44vw, 560px);
  object-fit: cover;
  object-position: 58% 40%;
}

.hero-greeting {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  line-height: .98;
  letter-spacing: -0.03em;
}

/* The spot tone as a highlighter swipe rather than as type colour. */
.hero-greeting em {
  font-style: normal;
  background-image: linear-gradient(var(--grey), var(--grey));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% .3em;
}

@media (min-width: 900px) {
  .hero-copy .hero-greeting { grid-column: 1 / 6; }
  .hero-copy .hero-text     { grid-column: 6 / 12; }
}

.hero-text p + p { margin-top: 1.1em; }

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(.4rem, 1.5vw, 1rem);
  align-items: center;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  list-style: none;
}

.socials a {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: var(--ink);
  transition: background .2s var(--ease);
}

.socials svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

.socials a:hover { background: var(--grey); }

/* ──────────────────────────  SOUNDBITES  ────────────────────────── */

.sound-head { grid-column: 1 / -1; }

@media (min-width: 900px) {
  .sound-side  { grid-column: 1 / 6; }
  .sound-embed { grid-column: 6 / 13; align-self: start; }
}

.sound-note { margin-top: clamp(1.5rem, 3vw, 2.25rem); color: color-mix(in oklab, var(--ink) 74%, transparent); }

.record {
  width: min(100%, 352px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 12px 40px color-mix(in oklab, var(--ink) 22%, transparent);
}

/* Overscan by 2%: record.jpg is cropped to the disc and scaled to a true
   circle — the photograph's disc is an ellipse, and squaring it by cropping
   sliced the rim off its left and right. This covers the antialiased edge so
   the circular mask shows no halo.
   
   The image is rounded as well as its container. `overflow: hidden` with a
   border-radius is supposed to be enough, but the spin below puts the image on
   its own compositing layer, and the rounded clip is not applied there — so a
   white corner of the source swept into view once per revolution, which looked
   like a bite taken out of the record. Rounding the image itself holds whether
   or not the parent clips, and a rotating circle is still a circle. */
.record img {
  /* max-width: none, or the global `img { max-width: 100% }` caps this at the
     container's width and the overscan only happens vertically. The image then
     sits 352 wide in a 352 box with a -2% left margin, i.e. 7px left of centre,
     and the background shows through as a white crescent down the right-hand
     side — which is what made the record look sliced. */
  max-width: none;
  width: 104%;
  height: 104%;
  margin: -2%;
  object-fit: cover;
  border-radius: 50%;
}

@media (prefers-reduced-motion: no-preference) {
  .record img { animation: spin 12s linear infinite; }
}

@keyframes spin { to { transform: rotate(360deg); } }

.sound-embed iframe {
  width: 100%;
  height: 352px;
  border: 0;
  border-radius: 12px;
  display: block;
}

/* ──────────────────────────  WHO? WHAT?  ────────────────────────── */

@media (min-width: 900px) {
  .who-head { grid-column: 1 / 5; position: sticky; top: calc(var(--bar) + 2rem); align-self: start; }
  .who-body { grid-column: 6 / 13; }
}

.who-lead {
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  line-height: 1.4;
}

.who-body > p + p { margin-top: 1.2em; }

.roles {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
  margin-block: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 620px) {
  .roles { grid-template-columns: 1fr 1fr; }
}

.role {
  background: var(--paper);
  padding: 1.5rem 1.5rem 1.75rem;
}

.role h3 { margin-bottom: .5rem; }
.role .meta { display: block; margin-bottom: .9rem; }
.role p { font-size: .95rem; color: var(--ink-soft); }

/* ────────────────────────────  PLACED  ──────────────────────────── */

.s-placed h2 { color: var(--paper); }
.s-placed .meta { color: color-mix(in oklab, var(--paper) 62%, transparent); }

.credits {
  list-style: none;
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--rule-light);
}

.credits ~ .credits { border-top: none; }

.credit {
  display: grid;
  grid-template-columns: clamp(76px, 11vw, 128px) 1fr;
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: center;
  padding-block: clamp(1.1rem, 2.2vw, 1.75rem);
  border-bottom: 1px solid var(--rule-light);
}

.credit-art {
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--paper-2);
}

.credit-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
  transition: filter .45s var(--ease);
}

.credit:hover .credit-art img { filter: none; }

/* No artwork exists for this one. A monogram block, not a hole. */
.credit-art.monogram {
  background: var(--grey);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  letter-spacing: -0.04em;
}

.credit-body {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 1.5rem;
  row-gap: .35rem;
}

.credit-title {
  flex-basis: 100%;
  margin-bottom: .1rem;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  line-height: 1.05;
}

.credit-song {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.9vw, 1.45rem);
  letter-spacing: -0.02em;
  color: var(--grey);
}

.credit-medium { margin-left: auto; }

@media (max-width: 560px) {
  .credit-medium { margin-left: 0; flex-basis: 100%; }
}

/* Where a placement has been written about somewhere, the credit cites it.
   Its own line under the song, underlined only on hover: a credits list that
   sprouts blue links stops reading like a closing crawl. */
.credit-source {
  flex-basis: 100%;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.credit-source:hover,
.credit-source:focus-visible { border-bottom-color: currentColor; }

.upcoming-head {
  margin-top: clamp(3rem, 6vw, 5rem);
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.upcoming-head h3 { color: var(--grey); }

.upcoming-head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule-light);
}

/* ─────────────────────────────  GIGS  ───────────────────────────── */

.gig {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  align-items: start;
}

@media (min-width: 720px) {
  .gig { grid-template-columns: minmax(180px, 300px) 1fr; }
}

.gig-poster {
  border: 1px solid var(--rule);
  overflow: hidden;
}

.gig-poster img { width: 100%; }

.gig-when {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: .95;
  letter-spacing: -0.03em;
  margin-bottom: .4rem;
}

.gig-where { font-size: clamp(1.1rem, 2vw, 1.35rem); margin-bottom: 1.25rem; }

.gig-bill {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding-block: 1rem;
  margin-bottom: 1.75rem;
}

.gig-bill dt { margin-bottom: .2rem; }
.gig-bill dd { font-weight: 500; }
.gig-bill dd + dt { margin-top: .8rem; }

.gig-empty {
  color: var(--ink-soft);
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

/* Played dates. The same heading-plus-rule device as Upcoming in Placements,
   but on paper, so the heading is ink rather than the green — the green never
   carries text on this ground. The rows are deliberately plainer than a live
   date: a tour history is a list, not a poster. */

.past-head {
  margin-top: clamp(3rem, 6vw, 5rem);
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.past-head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.past-gigs {
  list-style: none;
  margin-top: clamp(1rem, 2vw, 1.5rem);
}

.past-gig {
  display: grid;
  gap: .15rem 1.5rem;
  padding-block: .9rem;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}

@media (min-width: 720px) {
  .past-gig { grid-template-columns: 15ch 1fr auto; }
}

.past-when {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.past-where { font-weight: 500; }

.past-bill { color: var(--ink-soft); }

/* Photos from the night. Printed in the same harsh black and white as the
   press shot in the hero — one photographic voice, so a pink-lit phone snap
   sits beside a shot press photo without either looking out of place. */

.past-shots {
  grid-column: 1 / -1;
  list-style: none;
  display: grid;
  gap: .5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  margin-top: 1rem;
}

.past-shots img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: grayscale(1) contrast(1.12);
  border: 1px solid var(--rule);
}

/* ────────────────────────────  BUTTONS  ─────────────────────────── */

.btn {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  padding: .85rem 2rem;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}

.btn:hover {
  background: var(--grey);
  color: var(--ink);
}

.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ────────────────────────────  CONTACT  ─────────────────────────── */

@media (min-width: 900px) {
  .contact-head { grid-column: 1 / 6; }
  .contact-form { grid-column: 6 / 12; }
}

.contact-head p { margin-top: 1rem; }

/* Turnstile's iframe carries its own dimensions; this only reserves the gap
   when the widget is actually present, so an unconfigured form is unchanged. */
.cf-turnstile-slot:not(:empty) { margin-bottom: 1.25rem; }

.field { margin-bottom: 1rem; }

label {
  display: block;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: .4rem;
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  padding: .8rem 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 0;
}

input::placeholder, textarea::placeholder { color: color-mix(in oklab, var(--ink) 45%, transparent); }
input:focus, textarea:focus { outline: none; }
textarea { resize: vertical; min-height: 120px; }

.form-status {
  margin-top: 1rem;
  font-size: .92rem;
  font-weight: 500;
  min-height: 1.5rem;
}

.form-status.error { font-weight: 700; }

/* ────────────────────────────  FOOTER  ──────────────────────────── */

footer {
  border-top: 1px solid var(--rule);
  padding-block: clamp(2rem, 4vw, 3rem);
  font-size: .85rem;
  color: var(--ink-soft);
}

.footer-inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
}

.social-links a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.social-links a:hover { border-bottom-color: var(--ink); color: var(--ink); }

/* ──────────────────  BLOG (built by scripts/build_blog.py)  ─────── */

.post-header { padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.post-header h1 { font-size: clamp(2.2rem, 6vw, 4rem); }
.post-body { padding-bottom: clamp(4rem, 8vw, 7rem); }
.post-body h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); margin: 2.5rem 0 .75rem; }
.post-body h3 { margin: 2rem 0 .5rem; }
.post-body p + p { margin-top: 1em; }
.post-body ul, .post-body ol { padding-left: 1.4rem; margin-block: 1rem; }
.post-body li { margin-bottom: .35rem; }
.post-body a { text-decoration-color: var(--ink); text-underline-offset: 3px; }

.post-body blockquote {
  background: var(--grey);
  padding: 1.25rem 1.5rem;
  margin-block: 1.5rem;
}

.post-body table {
  width: 100%;
  border-collapse: collapse;
  margin-block: 1.5rem;
  font-size: .92rem;
}

.post-body th, .post-body td { text-align: left; padding: .6rem 1rem; border: 1px solid var(--rule); }
.post-body th { background: var(--paper-2); font-weight: 600; }

.post-list { list-style: none; margin-top: 2.5rem; border-top: 1px solid var(--rule); }

.post-item { padding-block: 1.75rem; border-bottom: 1px solid var(--rule); }

.post-meta { margin-bottom: .6rem; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }

.post-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: -0.03em;
  line-height: 1.02;
  text-decoration: none;
  display: block;
  margin-bottom: .5rem;
}

.post-title:hover { text-decoration: underline; text-underline-offset: .12em; }
.post-excerpt { color: var(--ink-soft); font-size: .95rem; }

.back-link { display: inline-block; margin-bottom: 1.5rem; font-size: .85rem; color: var(--ink-soft); }

.tag {
  display: inline-block;
  background: var(--grey);
  color: var(--ink);
  padding: .15rem .55rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ────────────────────────  PAGE-LOAD MOTION  ────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .lift {
    opacity: 0;
    transform: translateY(1.25rem);
    animation: lift .8s var(--ease) forwards;
    animation-delay: var(--d, 0ms);
  }

  .wordmark .mark-ghost { animation: settle 1.1s var(--ease) both; }
}

@keyframes lift { to { opacity: 1; transform: none; } }

@keyframes settle {
  from { transform: translate(-3%, -9%); opacity: 0; }
  to   { transform: translate(-0.6%, -2.4%); opacity: 1; }
}

/* ─────────────────────  THE CMS GUIDE (/admin/guide)  ───────────────────── */
/* Not part of the site proper: the how-to that sits beside the editor, set in
   the site's type so it feels like the same place. */

.guide { max-width: 68ch; }
.guide h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin-bottom: .75rem; }
.guide h2 { margin-top: 2.75rem; margin-bottom: .6rem; }
.guide h2:first-of-type { margin-top: 2rem; }
.guide ul { margin: 1rem 0 1.5rem 1.1rem; }
.guide li { margin-bottom: .45rem; }
.guide li strong { font-weight: 700; }
.guide .btn { margin-top: 2.5rem; }