/* Feels Right
   Museum frame, loud pieces: quiet chrome (square corners, hairlines, numbered labels),
   energy kept for the few pieces that earn it.
   Palette: the shared material of both cities, red clay roof tile, on stucco and night. One hue. */

/* Geist and Geist Mono, self-hosted (SIL OFL, fonts/OFL-Geist.txt): no requests to Google, so no visitor IPs leave the site */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/geist-latin-wght-normal.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; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/geist-latin-ext-wght-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/geist-mono-latin-wght-normal.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; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/geist-mono-latin-ext-wght-normal.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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gutter: clamp(1rem, 4vw, 3rem);
  --page-max: 1360px;
  --nav-h: 3.75rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Dark (default): night stucco, fired telha clay */
  --bg: #100e0d;
  --surface: #171412;
  --fg: #ece4d8;          /* limewash */
  --muted: #8c8277;
  --line: #2b2623;
  --accent: #c47457;      /* telha: unglazed clay roof tile, sun-faded */
  --on-accent: #100e0d;
  --spark: #c8f542;       /* acid green: interaction only (hover, selection, focus), never identity */
  --on-spark: #100e0d;
  --paper: #e6dccb;       /* sleeve stock */
  --grain: 0.22;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #f5f3ef;          /* stucco white: whitewash, not cream */
  --surface: #ece9e3;
  --fg: #1d1a17;
  --muted: #6e665c;
  --line: #dfdbd3;
  --accent: #94503a;      /* telha, fired deeper to hold on stucco */
  --on-accent: #f4eee5;
  --paper: #e4d8c5;
  --grain: 0.12;
  color-scheme: light;
}

/* Page transitions: native cross-document view transitions. A quick crossfade with the nav held still;
   the new page's title then rises out of its line, the same motion as the home wordmark. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
.nav { view-transition-name: nav; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 1rem/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .4s var(--ease), color .4s var(--ease);
}
/* Print grain over everything: a fixed, static noise tile on its own layer, in normal blending (a blend
   mode here would force the whole screen to re-composite on every animation frame) */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: var(--grain);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.6 -.55'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  transform: translateZ(0);
}

a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
::selection { background: var(--spark); color: var(--on-spark); }
:focus-visible { outline: 2px solid var(--spark); outline-offset: 3px; }
:root[data-theme="light"] :focus-visible { outline-color: var(--fg); }   /* spark is 1:1 on stucco, so light focus is ink */

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--accent); color: var(--on-accent); padding: .5rem 1rem; }
.skip:focus { left: var(--gutter); }

/* Numbered museum label */
.exhibit {
  display: inline-flex; align-items: baseline; gap: .6em;
  font: 500 .72rem/1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.exhibit b { color: var(--accent); font-weight: 500; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; padding: 0 1.25rem;
  background: var(--accent); color: var(--on-accent);
  border: 1px solid var(--accent);
  font: 500 .875rem/1 var(--font); letter-spacing: -.005em;
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.btn:hover { background: transparent; color: var(--accent); }
.btn-sm { min-height: 2.25rem; padding: 0 .9rem; font-size: .8rem; }
.btn-line { background: transparent; color: var(--fg); border-color: var(--line); }
.btn-line:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--nav-h);
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 var(--gutter);
  border-bottom: 1px solid transparent;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.nav.scrolled {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--line);
}
.brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; letter-spacing: -.02em; justify-self: start; }
/* The mark: a channel fader cut into a block, the level pushed high. On hover it rides up a notch. */
.mark { width: 24px; height: 24px; color: var(--fg); flex: none; }   /* ink, so mark and name read as one lockup; the favicon stays clay */
/* The whole fader (its window, cap and grip) travels the track as one piece: it rises into place
   on load, rides up the track on hover and settles back when the pointer leaves. */
.mark .fader { transition: transform .6s var(--ease); }
.brand:hover .mark .fader { transform: translateY(-2px); }
html.js:not(.is-in) .mark .fader { transform: translateY(3px); }
.nav-end { justify-self: end; display: flex; align-items: center; gap: .75rem; }
.nav-links { display: flex; gap: clamp(1rem, 2.4vw, 2rem); margin-right: clamp(.5rem, 1.5vw, 1.25rem); }
.nav-links a { font: 500 .75rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: .75rem 0; transition: color .2s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--fg); }
@media (max-width: 760px) { .nav-links { display: none; } }
/* Language: both codes in a hairline box the height of the theme button, the current one in ink; kept on phones */
.lang { display: flex; height: 2.25rem; border: 1px solid var(--line); font: 500 .75rem/1 var(--mono); letter-spacing: .06em; transition: border-color .2s; }
.lang:hover { border-color: var(--muted); }
.lang > * { display: grid; place-items: center; padding: 0 .6rem; color: var(--muted); transition: color .2s, background-color .2s; }
.lang > * + * { border-left: 1px solid var(--line); }
.lang .lang-on { color: var(--fg); background: var(--line); }
.lang a:hover { color: var(--fg); }
.theme {
  width: 2.25rem; height: 2.25rem; display: grid; place-items: center;
  background: none; border: 1px solid var(--line); color: var(--fg); cursor: pointer;
}
.theme:hover { border-color: var(--muted); }
.theme svg { width: 16px; height: 16px; }
.theme circle { fill: none; stroke: currentColor; stroke-width: 1.4; }
.theme path { fill: currentColor; }

/* ---------- Hero: facts on one hairline, the name edge to edge ---------- */
.hero {
  position: relative;
  padding: calc(var(--nav-h) + clamp(1.5rem, 4vw, 3rem)) var(--gutter) clamp(2.5rem, 6vw, 4.5rem);
}
.hero-meta {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: first baseline; column-gap: 2rem;
  border-top: 1px solid var(--line); padding-top: 1.1rem;
  margin-top: 0;   /* main.js sets it so the hairline touches the bottom of the g */
}
.thesis { font-size: clamp(1.15rem, .9rem + 1vw, 1.65rem); font-weight: 500; letter-spacing: -.025em; line-height: 1.12; max-width: 24ch; padding-right: 2rem; text-wrap: balance; }
.hero-cta {
  position: relative; justify-self: end;
  font: 500 .78rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  padding-bottom: .3rem;
}
.hero-cta::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
  transform-origin: right; transition: transform .5s var(--ease);
}
.hero-cta:hover::after { transform: scaleX(0); }
.hero-cta span { display: inline-block; transition: transform .4s var(--ease); }
.hero-cta:hover span { transform: translateY(3px); }

/* Fitted wordmarks: JS sets font-size so each line spans the full width */
.fit { white-space: nowrap; font-weight: 700; letter-spacing: -.06em; line-height: .78; margin: 0 -.04em; font-size: 17vw; }
.wm-line { display: inline-block; overflow: hidden; padding-bottom: .25em; margin-bottom: -.25em; vertical-align: top; }   /* room for the g, clipped only during the rise */
.wm-ch {
  display: inline-block; font-weight: var(--w, 720);
  transition: font-weight .5s var(--ease), transform 1.1s var(--ease) var(--t, 0s);
}
.wordmark { color: var(--fg); font-size: 18.7vw; }   /* close to the fitted size, so the fit barely shifts the page */
.dateline { font: 500 .78rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.city { white-space: nowrap; }
@media (max-width: 760px) {
  .dateline .city { display: block; }   /* stacked on phones, no dangling dot */
  .dateline .sep { display: none; }
  .wordmark .wm-line { display: block; }
  .wordmark .wm-gap { display: none; }
  .wordmark { font-size: 37.7vw; display: flow-root; }   /* keeps the stacked lines' negative margin inside, so the hairline lands on the cut */
}

/* Intro: the name rises out of its line, then the facts arrive */
html.js:not(.is-in) .wordmark .wm-ch, html.js:not(.is-in) .page-title .wm-ch { transform: translateY(105%); }
.rise { transition: opacity .9s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s); }
html.js:not(.is-in) .rise { opacity: 0; transform: translateY(12px); }

/* ---------- Pillars: three words, one row each ---------- */
.pillars ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.pillar {
  position: relative; overflow: hidden;
  display: flex; align-items: baseline; gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(.5rem, 1.2vw, 1rem) var(--gutter);
  border-bottom: 1px solid var(--line);
}
.p-no { font: 500 .75rem/1 var(--mono); letter-spacing: .06em; color: var(--muted); }
.pillars li { list-style: none; }
a.pillar { color: inherit; }
.p-arrow { margin-left: auto; align-self: center; font: 500 .75rem/1 var(--mono); letter-spacing: .06em; color: var(--muted); }
.p-word, .p-track { font-size: clamp(3.25rem, 1.5rem + 9vw, 11rem); font-weight: 600; letter-spacing: -.055em; line-height: .95; }
/* "Lançamentos" is three letters longer than "Releases": a touch smaller on phones, the same on desktop */
:lang(pt) .p-word, :lang(pt) .p-track { font-size: clamp(2.5rem, .5rem + 10.5vw, 11rem); }
/* The wipe moves, it never repaints: the outer layer slides in from the left while the inner layer
   slides the other way by the same amount, so the green and the word stay fixed in place and only the
   leading edge travels. Both are transforms, so the GPU does it. */
.p-fill {
  position: absolute; inset: 0; overflow: hidden;
  transform: translate3d(-100.5%, 0, 0);
  transition: transform .7s cubic-bezier(0.65, 0, 0.35, 1);
}
.p-fill-in {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  background: var(--spark); color: var(--on-spark);
  transform: translate3d(100.5%, 0, 0);
  transition: transform .7s cubic-bezier(0.65, 0, 0.35, 1);
}
.pillar:hover .p-fill, .pillar:hover .p-fill-in, .pillar:focus-visible .p-fill, .pillar:focus-visible .p-fill-in { transform: translate3d(0, 0, 0); }
.p-fill, .p-fill-in { will-change: transform; }
.p-track { display: flex; white-space: nowrap; animation: run 14s linear infinite; animation-play-state: paused; will-change: transform; }
.p-track span { padding-right: .4em; }
.pillar:hover .p-track, .pillar:focus-visible .p-track { animation-play-state: running; }
@keyframes run { to { transform: translate3d(-50%, 0, 0); } }

/* ---------- Prints: photos pulled in one clay ink ---------- */
.prints {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: end;
  gap: clamp(1rem, 2.5vw, 2rem);
  padding: clamp(4rem, 9vw, 7rem) var(--gutter);
}
.print { margin: 0; }
.print-frame { position: relative; overflow: hidden; background: var(--surface); }
.print-frame img, .print-frame canvas { display: block; width: 100%; height: auto; }
.print-frame img { transition: opacity .8s var(--ease); }
.print.pulled .print-frame img { opacity: 0; }        /* the photo shows until its print is ready */
.print-frame canvas { position: absolute; inset: 0; height: 100%; transition: opacity .8s var(--ease); }
@media (max-width: 760px) { .prints { grid-template-columns: 1fr; } }

/* ---------- Section pages: Events, Artists, Releases ---------- */
.page-head { padding: calc(var(--nav-h) + clamp(1.5rem, 4vw, 3rem)) var(--gutter) 0; }
.page-title { color: var(--fg); }
.page-meta {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  border-top: 1px solid var(--line); margin-top: clamp(1.5rem, 3vw, 2.5rem); padding-top: 1.1rem;
  font: 500 .78rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase;
}
.page-meta .of { color: var(--muted); white-space: nowrap; }
.page-meta .where { text-align: right; }
.page-body .btn { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.page-body .btn:hover { background: transparent; color: var(--fg); }
.page-meta .where { color: var(--accent); }
.page-body { padding: clamp(3rem, 7vw, 5.5rem) var(--gutter); display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); }
.page-lede { font-size: clamp(1.8rem, 1rem + 3vw, 3.75rem); font-weight: 600; letter-spacing: -.045em; line-height: 1.02; max-width: 20ch; text-wrap: balance; }
.list-label { font: 500 .75rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: .9rem; }
.cities { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fg); }
.cities li { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding: clamp(.9rem, 2vw, 1.5rem) 0; border-bottom: 1px solid var(--line); font-size: clamp(2rem, 1rem + 3.6vw, 4.5rem); font-weight: 600; letter-spacing: -.05em; line-height: .95; }
.cities .yr { font-weight: 400; color: var(--muted); }
.cities .yr.now { color: var(--accent); }
.act { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; border-top: 1px solid var(--line); padding-top: 1.5rem; }
.act .door { padding-top: 0; }
.act .door-who { color: var(--accent); }
.act .btn { justify-self: start; }
/* Releases: the TEAK LP as a dense tracklist, one tight row per song (number, cover, play, title and
   artist, genre, BPM, key, seek, time), like a record store's list. Covers show as printed: they're
   already one-ink pieces. */
.tracks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fg); }
.track {
  display: grid; align-items: center; gap: 0 1.25rem;
  grid-template-columns: 3rem minmax(9rem, 1.3fr) 6.5rem 4.75rem 3.5rem minmax(5rem, 1fr) 5.5rem;
  min-height: 3.75rem; padding: .5rem 0; border-bottom: 1px solid var(--line);
  transition: background-color .2s var(--ease);
}
.track:hover, .track.playing { background: color-mix(in srgb, var(--fg) 4%, transparent); }
/* The cover is the play button: the icon shows over the art on hover and stays while playing */
.track .play { position: relative; width: 3rem; height: 3rem; padding: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--line); color: #f5f3ef; }
.track .play:hover { background: var(--surface); color: #f5f3ef; }
.t-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.track .play svg { position: relative; z-index: 1; width: .9rem; height: .9rem; opacity: 0; transition: opacity .2s var(--ease); filter: drop-shadow(0 0 3px rgb(0 0 0 / .6)); }
.track .play::after { content: ""; position: absolute; inset: 0; background: rgb(16 14 13 / .45); opacity: 0; transition: opacity .2s var(--ease); }
.track:hover .play svg, .track.playing .play svg, .track .play:focus-visible svg { opacity: 1; }
.track:hover .play::after, .track.playing .play::after, .track .play:focus-visible::after { opacity: 1; }
.track .play:focus:not(:focus-visible) { outline: none; }
.t-no { font: 500 .72rem/1 var(--mono); letter-spacing: .04em; color: var(--muted); font-variant-numeric: tabular-nums; }
.t-main { display: grid; gap: .15rem; min-width: 0; }
.t-title { font-weight: 600; font-size: 1.05rem; letter-spacing: -.02em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-artist { font-size: .85rem; color: var(--muted); }
.t-tag { font: 500 .72rem/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.track.playing .t-title { color: var(--accent); }
.track .time { text-align: right; }
@media (max-width: 860px) {
  .track { grid-template-columns: 3rem minmax(0, 1fr) auto; grid-template-areas: "play main time" ". seek seek"; gap: .35rem .85rem; padding: .7rem 0; }
  .track .play svg, .track .play::after { opacity: 1; }   /* no hover on touch: always show the icon */ .track .play { grid-area: play; } .track .t-main { grid-area: main; }
  .track .time { grid-area: time; } .track .seek { grid-area: seek; }
  .track .t-tag { display: none; }
  .track .t-title { white-space: normal; }
}


.play {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0;
  background: var(--fg); color: var(--bg); border: 1px solid var(--fg); cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.play:hover { background: transparent; color: var(--fg); }
.play svg { width: 1rem; height: 1rem; fill: currentColor; }
.play .i-pause, .player.playing .play .i-play { display: none; }
.player.playing .play .i-pause { display: block; }
.time { font: 500 .75rem/1 var(--mono); letter-spacing: .04em; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.player.playing .time [data-now] { color: var(--fg); }

/* The seek bar: a hairline, the played part in clay, a small square thumb */
.seek { -webkit-appearance: none; appearance: none; width: 100%; height: 1.5rem; margin: 0; background: transparent; cursor: pointer; --p: 0%; }
.seek::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right, var(--accent) var(--p), var(--line) var(--p)); }
.seek::-moz-range-track { height: 2px; background: var(--line); }
.seek::-moz-range-progress { height: 2px; background: var(--accent); }
.seek::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; margin-top: -4px; background: var(--fg); border: 0; border-radius: 0; }
.seek::-moz-range-thumb { width: 10px; height: 10px; background: var(--fg); border: 0; border-radius: 0; }
.seek:hover::-webkit-slider-thumb { background: var(--spark); }
.seek:hover::-moz-range-thumb { background: var(--spark); }
:root[data-theme="light"] .seek:hover::-webkit-slider-thumb { background: var(--accent); }   /* spark is 1:1 on stucco */
:root[data-theme="light"] .seek:hover::-moz-range-thumb { background: var(--accent); }

/* Artists: equal cards, image then name then location */
.artists-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: clamp(1.5rem, 3vw, 2.25rem) clamp(1rem, 2.5vw, 1.75rem); }
.artist { display: grid; gap: .45rem; align-content: start; }
.artist-img { aspect-ratio: 4 / 5; overflow: hidden; margin: 0 0 .45rem; background: var(--surface); }   /* margin also resets the figure default */
.artist-img .print-frame { height: 100%; }
.artist-img .print-frame img, .artist-img .print-frame canvas { width: 100%; height: 100%; object-fit: cover; }
.artist-img > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.artist-img.ph { display: grid; place-items: center; border: 1px solid var(--line); }
.artist-img.ph svg { width: 22%; color: var(--line); fill: currentColor; }
.a-name { font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem); font-weight: 700; letter-spacing: -.045em; line-height: 1; }
.a-meta { font: 500 .75rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.a-link { justify-self: start; font: 500 .75rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: .2rem; }
.a-demo { font: 500 .68rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }

.next { border-top: 1px solid var(--line); }
@media (max-width: 760px) { .act { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .artists-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .a-name { font-size: 1.15rem; } }

/* ---------- Sections ---------- */
.section {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: clamp(4rem, 9vw, 7rem) var(--gutter);
}
.join h2 {
  font-weight: 600;
  line-height: .95;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.lede { font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); color: var(--muted); max-width: 40rem; text-wrap: pretty; }

/* Join: a dark beat in ink (limewash in the dark theme), so clay stays a stamp, not a field */
.join {
  --j-bg: var(--fg); --j-fg: var(--bg);
  --j-clay: #c47457;            /* the night clay reads on ink (4.9:1) */
  max-width: none; background: var(--j-bg); color: var(--j-fg);
}
:root[data-theme="dark"] .join { --j-clay: #94503a; }   /* the stucco clay reads on limewash (4.8:1) */
.join-inner { max-width: var(--page-max); margin: 0 auto; display: grid; gap: 1.25rem; }
.join .exhibit { color: var(--j-fg); opacity: .75; }
.join .exhibit b { color: var(--j-clay); }
.join h2 { font-size: clamp(3rem, 1.5rem + 6vw, 8rem); max-width: 12ch; }
.join .lede { color: var(--j-fg); opacity: .8; }
.join-form { margin-top: 1.5rem; display: grid; gap: 1rem; max-width: 40rem; }
.city-pick { border: 0; margin: 0; padding: 0; display: flex; gap: .5rem; flex-wrap: wrap; }
.city-pick label { cursor: pointer; }
.city-pick input { position: absolute; opacity: 0; pointer-events: none; }
.city-pick span {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 2.5rem; padding: 0 1rem;
  border: 1px solid color-mix(in srgb, var(--j-fg) 40%, transparent);
  font: 500 .78rem/1 var(--mono); letter-spacing: .05em; text-transform: uppercase;
  transition: background-color .2s, color .2s;
}
.city-pick span::before { content: ""; width: 8px; height: 8px; border: 1px solid currentColor; }
.city-pick input:checked + span { background: var(--j-fg); color: var(--j-bg); border-color: var(--j-fg); }
.city-pick input:checked + span::before { background: currentColor; }
.city-pick input:focus-visible + span { outline: 2px solid var(--j-fg); outline-offset: 3px; }
.field { display: flex; border-bottom: 1px solid var(--j-fg); }
.field input {
  flex: 1; min-width: 0;
  background: none; border: 0; color: var(--j-fg);
  font: 500 clamp(1.25rem, 1rem + 1.5vw, 2rem)/1 var(--font); letter-spacing: -.02em;
  padding: 1rem 0;
}
.field input::placeholder { color: var(--j-fg); opacity: .45; }
.field input:focus { outline: none; }
.join .btn { background: var(--j-fg); color: var(--j-bg); border-color: var(--j-fg); align-self: center; }
.join .btn:hover { background: transparent; color: var(--j-fg); }
.follow { justify-self: start; margin-top: 1.25rem; min-height: 3.5rem; padding: 0 1.5rem; font-size: clamp(1rem, .9rem + .5vw, 1.25rem); letter-spacing: -.01em; gap: .5rem; }
.form-note { min-height: 1.4em; font: 500 .8rem/1.4 var(--mono); }
.consent { max-width: 52ch; font-size: .82rem; line-height: 1.5; color: color-mix(in srgb, var(--j-fg) 72%, var(--j-bg)); }
.consent a { color: var(--j-fg); text-decoration: underline; text-underline-offset: .2em; }

/* Doors: artists and venues, under the follow button, quieter than it */
.doors {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid color-mix(in srgb, var(--j-fg) 25%, transparent);
}
.door { display: grid; gap: .6rem; align-content: start; padding-top: 1.25rem; }
.door-who { font: 500 .72rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--j-clay); }
.door-line { font-size: clamp(1.4rem, 1rem + 1.6vw, 2.25rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; }
.door-link {
  justify-self: start; position: relative; padding-bottom: .25rem;
  font: 500 .78rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase;
}
.door-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: right; transition: transform .5s var(--ease); }
.door-link:hover::after { transform: scaleX(0); }
.door-link.soon { opacity: .55; pointer-events: none; }
.door-link.soon::after { display: none; }
@media (max-width: 760px) { .doors { grid-template-columns: 1fr; } .door + .door { border-top: 1px solid color-mix(in srgb, var(--j-fg) 25%, transparent); margin-top: 1.25rem; } }

/* Footer: small facts, then the name again, cropped by the bottom edge */
.footer { padding: 3rem var(--gutter) 2.5rem; font-size: .9rem; }
.footer-row { display: flex; gap: clamp(2rem, 6vw, 5rem); flex-wrap: wrap; }
.footer-row .muted { margin-left: auto; }
.footer a:hover { color: var(--accent); }
.footer-links { display: grid; align-content: start; }
.muted { color: var(--muted); }


/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js:not(.is-in) .wordmark .wm-ch, html.js:not(.is-in) .page-title .wm-ch, html.js:not(.is-in) .rise, html.js:not(.is-in) .mark .fader { transform: none; opacity: 1; }
  .mark .fader { transition: none; }
  .p-track { animation: none; }
  .p-fill, .p-fill-in { transition: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}