/* Cookies For The Cat — cookiesforthecat.de
 *
 * Everything here is English: class names, custom properties, comments. The
 * content they describe is German. See AGENTS.md.
 */

/* ------------------------------------------------------------------- Tokens */

:root {
  /* WCAG AA: text 13.79:1, links 5.48:1, muted 5.33:1. */
  --color-background: #f8f2e4;
  --color-text: #2b2320;
  --color-accent: #9c4a2f;
  --color-muted: #6b625d;

  /* The wheat field and the embroidery on the dress, both from Plakat 1.
   * The selection tint only. It is never text, so it needs no text contrast. */
  --color-gold: #a8752a;
  /* The blue from the painted wall on Plakat 2, so focus is the band's own
   * colour and not a second terracotta. 6.65:1 on the paper. */
  --color-focus: #2f5591;

  /* The flyer and the press-kit posters are white sheets, and need an edge
   * against the cream. */
  --shadow-sheet: 0 1px 2px color-mix(in srgb, var(--color-text) 8%, transparent),
    0 6px 18px color-mix(in srgb, var(--color-text) 10%, transparent);

  /* One strength for every rule on the site. */
  --color-rule: color-mix(in srgb, var(--color-text) 25%, transparent);

  --width-text: 650px;
  --width-wide: 1000px;

  /* No webfont: Georgia on Apple and Windows, Noto Serif on Android. */
  --font-serif: Georgia, "Times New Roman", serif;
  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

  --size-small: 1rem;
  --size-medium: 1.125rem;
  --size-large: 1.5rem;
  --size-huge: clamp(1.4rem, 2.8vw, 1.65rem);
  --size-giant: clamp(1.65rem, 3.8vw, 2.1rem);
  --size-colossal: clamp(2.1rem, 4.7vw, 3.25rem);

  /* Everything below --space-block, on the same 4px grid. */
  --space-hair: 0.25rem;
  --space-tight: 0.5rem;
  --space-snug: 0.75rem;

  --space-block: 1.5rem;
  --space-gutter: max(1.25rem, 5vw);
  --space-section: clamp(2rem, 8vw, 6rem);
  --space-large: clamp(4rem, 10vw, 6rem);

  /* Applied twice between two gigs, and under the flyer on the home page. */
  --space-loose: clamp(2rem, 8vw, 2.5rem);

  --line-tight: 1.15;
  --line-snug: 1.2;
  --line-medium: 1.4;
  --line-normal: 1.6;
}

/* ---------------------------------------------------------------------- Base */

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

body {
  margin: 0;
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-system);
  font-size: var(--size-medium);
  line-height: var(--line-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Georgia has nothing between regular and bold, and a large x-height. */
h1,
h2,
h3,
h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.012em;
  overflow-wrap: anywhere;
  margin: 0 0 var(--space-block);
}

h1 {
  font-size: var(--size-colossal);
  line-height: var(--line-tight);
}

h2 {
  font-size: var(--size-giant);
  line-height: var(--line-snug);
}

h3 {
  font-size: var(--size-huge);
  line-height: var(--line-tight);
}

p,
figure {
  margin: 0 0 var(--space-block);
}

a {
  color: var(--color-accent);
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

/* 15% is as strong as the tint can go while every text colour on the site
 * still clears AA against it; links are the tightest at 4.65:1. */
::selection {
  background: color-mix(in srgb, var(--color-gold) 15%, transparent);
}

/* Keyboard focus must be more visible than the resting state, not less. */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* <address> is the right element for the contact details; its default italic
 * is not what we want. */
address {
  font-style: normal;
  margin: 0 0 var(--space-block);
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/* Present in the accessibility tree, absent from the screen. The skip link
 * uses the same technique and reappears on keyboard focus. */
.visually-hidden,
.skip-link {
  /* Hidden text should not inherit a display size or weight. */
  font: inherit;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link:focus {
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--space-snug) 1rem;
  overflow: visible;
  clip-path: none;
  background: var(--color-background);
  color: var(--color-text);
  z-index: 10;
}

/* ------------------------------------------------------------------- Layout */

/* 1000px inside the padding, not including it. */
.wrap {
  width: 100%;
  max-width: calc(var(--width-wide) + 2 * var(--space-gutter));
  margin: 0 auto;
  padding-inline: var(--space-gutter);
}

.content {
  max-width: var(--width-text);
  margin-inline: auto;
}

.wide {
  max-width: var(--width-wide);
  margin-inline: auto;
}

/* ------------------------------------------------------------------ Header */

.site-header {
  padding-top: var(--space-gutter);
  padding-bottom: var(--space-large);
}

.site-header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-block);
}

/* The traced wordmark, not type; the aspect ratio lives in the SVG. */
.site-title {
  margin: 0;
  line-height: 0;
}

.site-title a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
}

.site-title img {
  width: clamp(180px, 26vw, 340px);
  height: auto;
}

/* Below 700px the wordmark sits centred above the navigation. */
@media (max-width: 700px) {
  .site-header-inner {
    flex-direction: column;
    align-items: center;
    gap: var(--space-block);
  }

  .site-title img {
    width: min(68vw, 300px);
  }

  .site-nav ul {
    justify-content: center;
  }
}

.site-title a:hover {
  text-decoration: underline;
}

/* No JavaScript, so no hamburger: the navigation wraps instead. */
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-tight) clamp(var(--space-snug), 2.5vw, 1.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: clamp(var(--size-medium), 3.2vw, var(--size-large));
}

.site-nav a {
  color: inherit;
  text-decoration: none;
}

.site-nav a:hover {
  text-decoration: underline;
}

.site-nav a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ----------------------------------------------------------------- Content */

main > * + * {
  margin-top: var(--space-block);
}

/* A hidden heading must not push a margin onto what follows. */
main > .visually-hidden + * {
  margin-top: 0;
}

.page-intro {
  margin-bottom: var(--space-section);
}

/* ----------------------------------------------------------------- Gig list */

/* Venue names, notes and archive lines come from the calendar, so any of
 * them can arrive as one unbreakable word. */
.gigs,
.archive,
.kit-meta {
  overflow-wrap: anywhere;
}

/* Bracketed by the same hairline that divides the gigs inside it.
 * `0 auto`, not `0`: this list also carries .content, whose centring the
 * shorthand would undo. */
.gigs {
  margin: 0 auto;
  padding: var(--space-loose) 0;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
  list-style: none;
}

.gig {
  margin: 0 0 var(--space-loose);
}

/* The list's own padding closes the gap under the last one. */
.gig:last-child {
  margin-bottom: 0;
}

/* A small line above the venue; the venue name carries the entry. */
.gig-date {
  font-size: var(--size-small);
  line-height: var(--line-medium);
  letter-spacing: 0.04em;
  color: var(--color-muted);
  margin-bottom: var(--space-hair);
}

.gig-venue {
  font-family: var(--font-serif);
  font-size: var(--size-large);
  line-height: var(--line-snug);
  font-weight: 700;
  margin-bottom: var(--space-hair);
}

.gig-address {
  font-size: var(--size-medium);
  line-height: var(--line-medium);
  margin-bottom: var(--space-tight);
}

.gig-note {
  margin-bottom: 0;
}

/* Two notes on one gig need a gap between them. */
.gig-note + .gig-note {
  margin-top: var(--space-tight);
}

/* Quiet next to the venue: not a second call to action. */
.gig-add {
  margin: var(--space-tight) 0 0;
  font-size: var(--size-small);
}

.gig + .gig {
  border-top: 1px solid var(--color-rule);
  padding-top: var(--space-loose);
}

/* Archive: one line per gig. */
.archive {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Single-line entries need no paragraph spacing. */
.archive li {
  margin-bottom: var(--space-tight);
}

/* The year as a quiet subheading — it should divide the list, not compete
 * with it. */
.archive-year {
  font-size: var(--size-large);
  line-height: var(--line-snug);
  margin-bottom: var(--space-snug);
  padding-bottom: var(--space-tight);
  color: var(--color-accent);
  border-bottom: 1px solid var(--color-rule);
}

.archive time {
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- Press kit */

/* Image left, caption right (40/60); stacked on a narrow screen. */
.kit {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kit figure {
  display: grid;
  grid-template-columns: 40% 60%;
  align-items: center;
  gap: 0 var(--space-block);
  margin: 0 0 var(--space-block);
}

/* The full-resolution file is only fetched on click. */
.kit figure > a {
  display: block;
  line-height: 0;
}

.kit img {
  width: 100%;
  box-shadow: var(--shadow-sheet);
}

.kit-title {
  display: block;
  font-size: var(--size-medium);
  line-height: var(--line-medium);
}

.kit-meta {
  display: block;
  color: var(--color-muted);
  font-size: var(--size-small);
}

/* Secondary download, e.g. the poster as an image rather than a fillable PDF. */
.kit-alt {
  display: inline-block;
  margin-top: var(--space-tight);
  font-size: var(--size-small);
}

@media (max-width: 700px) {
  .kit figure {
    grid-template-columns: 1fr;
    gap: var(--space-block);
  }
}

/* Two per row. Top-aligned, so a landscape photo beside a portrait poster
 * keeps its own height. */
@media (min-width: 900px) {
  .kit {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: calc(var(--space-block) * 2) var(--space-block);
  }

  .kit figure {
    grid-template-columns: 48% 52%;
    margin-bottom: 0;
  }
}

/* ----------------------------------------------------------------- Footer */

/* 4rem of padding, 3rem more above the short rule. */
.site-footer {
  padding-top: 4rem;
  padding-bottom: 4rem;
  text-align: center;
}

.footer-rule {
  width: 100px;
  margin: 3rem auto var(--space-block);
  border: 0;
  border-top: 1px solid var(--color-rule);
}

/* `0 auto`, not `0`: on the contact page this list also carries .content. */
.social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vw, 1.75rem);
  list-style: none;
  margin: 0 auto;
  padding: 0;
  font-size: var(--size-small);
}

.social a {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: inherit;
  text-decoration: none;
}

.social a:hover {
  text-decoration: underline;
}

.social svg {
  width: 1.25em;
  height: 1.25em;
  fill: currentColor;
  flex: none;
}

/* Three labelled links need 283px plus two gaps plus two gutters, so they
 * fit from 356px up. Below that only the icons show; the names stay in the
 * accessibility tree. Re-measure this number if the gap or the labels change. */
@media (max-width: 355px) {
  .site-footer .social span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .site-footer .social svg {
    width: 1.75em;
    height: 1.75em;
  }

  .site-footer .social {
    gap: 1.75rem;
  }
}

.legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  list-style: none;
  margin: var(--space-block) 0 0;
  padding: 0;
  font-size: var(--size-small);
}

.legal a {
  color: inherit;
  text-decoration: none;
}

.legal a:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------------------ Images */

/* The display width sits in the img attributes, so it holds without CSS. */
.centred {
  text-align: center;
}

/* The flyer, at the size it was drawn for. A whole poster followed by one
 * line of text needs more air than the 24px every other block gets. */
.flyer {
  max-width: 436px;
  margin-inline: auto;
  margin-bottom: var(--space-loose);
}

.flyer img {
  width: 100%;
  box-shadow: var(--shadow-sheet);
}

/* Wider than the text under it; 800px is 2x the 1600px file. */
.photo {
  max-width: 800px;
  margin-inline: auto;
}

.photo img {
  width: 100%;
}

/* ------------------------------------------------------------------- Print */

/* Termine is the page anyone prints — a venue wants the dates on paper. The
 * navigation, the footer and the add-to-calendar links are no use there, and
 * the page box becomes the measure. Physical units are deliberate: a sheet of
 * paper has no viewport, and this is the one place where a font-size is not a
 * token. No `size` on @page, so a Letter sheet still works. */
@page {
  margin: 15mm;
}

@media print {
  :root {
    --color-background: #fff;
    --color-text: #000;
    --color-accent: #000;
    --color-muted: #333;
  }

  /* On paper: no navigation, no footer, no add-to-calendar links, and none
   * of the prose that only makes sense on screen — `.no-print` marks that
   * one element at a time, since `.page-intro` carries real text elsewhere. */
  .skip-link,
  .site-nav,
  .site-footer,
  .gig-add,
  .gig-note,
  .no-print {
    display: none;
  }

  .wrap {
    max-width: none;
    padding-inline: 0;
  }

  .content {
    max-width: none;
  }

  body {
    font-size: 11pt;
  }

  /* The wordmark centred at the top of the sheet, then the list. */
  .site-header {
    padding-top: 0;
    padding-bottom: 18pt;
  }

  .site-header-inner {
    justify-content: center;
  }

  .site-title img {
    width: 150pt;
  }

  .page-intro {
    margin-bottom: 12pt;
  }

  /* The fluid spacing is measured against a viewport, so it is replaced. */
  .gigs {
    padding: 18pt 0;
  }

  .gig {
    margin-bottom: 18pt;
  }

  .gig + .gig {
    padding-top: 18pt;
  }

  .archive-year {
    font-size: 13pt;
    margin-bottom: 6pt;
    break-after: avoid;
  }

  .archive li {
    margin-bottom: 3pt;
  }

  /* Neither a gig nor an archive line may straddle two sheets. */
  .gig,
  .archive li {
    break-inside: avoid;
  }

  a {
    color: inherit;
    text-decoration: none;
  }
}