/* Liquid Soundz, two-page sleeve. Tokens first, then the front, then the back. */
:root {
  --sc-canvas:     #04060b;
  --sc-surface:    #0b111d;
  --sc-ink:        #e4ecfa;
  --sc-ink-soft:   #93a3c1;
  --sc-accent:     #8ad9f2;
  --sc-accent-ink: #03121a;
  --sc-shadow-color: 222 60% 2%;
  --sc-font-display: "Michroma", system-ui, sans-serif;
  --sc-font-text:    "Michroma", system-ui, sans-serif;  /* the same wide face, plain and small, for everything that isn't a heading */
  --fade: #4650ff;  /* the blue that bleeds under the display type */
  --art-ground: #000;
}

@view-transition { navigation: auto; }

/* Michroma is very wide, so the text runs a size smaller with extra leading */
body { font-size: clamp(0.78rem, 0.74rem + 0.18vw, 0.88rem); line-height: 1.85; letter-spacing: 0.01em; }

/* ------------------------------------------------------------- the bar -- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: var(--sc-4);
  padding: var(--sc-4) var(--sc-gutter) var(--sc-6);
  background: linear-gradient(180deg, color-mix(in oklab, var(--sc-canvas) 92%, transparent) 40%, transparent);
  pointer-events: none;
}
.bar a { pointer-events: auto; }
.bar .mark { justify-self: start; }
.bar nav { justify-self: end; }
/* the graffiti logo, dead centre of the bar */
.bar-logo { justify-self: center; display: block; transition: transform 160ms var(--sc-ease-out); }
.bar-logo img { height: clamp(58px, 5vw, 80px); width: auto; }
.bar-logo:hover { transform: scale(1.04); }
.bar-logo:active { transform: scale(0.97); }
/* Display type, after the "SOUND" reference: a wide face, stretched flatter
   and wider, slanted, letters pulled into each other and then fused by an SVG
   filter, with blue bleeding out underneath. site.js builds a fuse filter
   sized to each element's font size, so small text fuses as cleanly as big. */
.mark, h1, h2 {
  --sx: 1.5; --sy: 0.74;
  font-family: var(--sc-font-display); font-weight: 400; line-height: 1;
  text-transform: uppercase; letter-spacing: -0.13em; word-spacing: 0.35em;
  transform: skewX(-12deg) scale(var(--sx), var(--sy)); transform-origin: left center;
}
/* the stretch is a transform, so give the line less room to begin with:
   once stretched it lands exactly on the full width */
h1, h2 { width: calc(100% / var(--sx)); }
.mark { display: inline-block; font-size: 1.05rem; text-decoration: none; white-space: nowrap; }
.bar a.turn { font-size: 0.74rem; letter-spacing: 0.02em; white-space: nowrap; color: var(--sc-ink-soft); text-decoration: none; transition: color var(--sc-d-fast) var(--sc-ease-out); }
.bar a.turn:hover { color: var(--sc-ink); }
.bar nav { align-items: center; }

/* "Hire the rig" in the bar is set inside a crystal. site.js builds it: an
   irregular faceted gem (the clip-path), facets that each catch the light
   differently, rainbow refraction along the edge, hairline cracks, and a
   crusty frost. Part of the frost and the cracks sit in front of the words,
   so they read as being inside the stone. Without JS it's a plain link. */
.bar a.hire {
  position: relative; display: inline-block; color: var(--sc-ink); text-decoration: none; white-space: nowrap;
  font-size: 0.95rem; letter-spacing: 0.04em;
  filter: drop-shadow(0 9px 7px rgb(2 8 25 / 0.7)) drop-shadow(0 0 10px rgb(120 190 255 / 0.22)); /* sits on something: a shadow under it */
  transition: transform 160ms var(--sc-ease-out), filter 200ms var(--sc-ease-out);
}
.cx {
  position: relative; display: block; isolation: isolate; padding: 1.35rem 2.5rem 1.05rem; /* the words sit on the front face, a little below centre */
  clip-path: polygon(3.64% 40%, 17.27% 12.5%, 82.73% 7.5%, 96.36% 35%, 92.73% 65%, 84.55% 87.5%, 15.45% 92.5%, 5.45% 70%);
  background: rgb(120 175 235 / 0.08);
  -webkit-backdrop-filter: blur(9px) saturate(1.6) brightness(1.08); backdrop-filter: blur(9px) saturate(1.6) brightness(1.08);
}
.cx svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cx-back { z-index: 0; }
.cx-front { z-index: 2; }
.cx-label {
  position: relative; z-index: 1; display: block;
  color: rgb(236 246 255 / 0.9); filter: blur(0.3px);
  text-shadow: 0 0 6px rgb(150 205 255 / 0.75), 0 0 1px rgb(255 255 255 / 0.9);
}
.cx-sheen { transform: translateX(-60%); transition: transform 700ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .bar a.hire:hover { filter: drop-shadow(0 11px 8px rgb(2 8 25 / 0.7)) drop-shadow(0 0 14px rgb(140 205 255 / 0.45)); transform: translateY(-1px); }
  .bar a.hire:hover .cx-sheen { transform: translateX(160%); }
}
.bar a.hire:active { transform: scale(0.97); }

/* ---------------------------------------------------------- shared art -- */
.art { position: relative; aspect-ratio: 1; background: var(--art-ground); isolation: isolate; overflow: hidden; }
.art img { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; user-select: none; -webkit-user-drag: none; }
.add { mix-blend-mode: plus-lighter; }
@supports not (mix-blend-mode: plus-lighter) { .add { mix-blend-mode: screen; } }

/* button: one label per intent, used everywhere */
.cta {
  display: inline-flex; align-items: center; gap: var(--sc-3);
  padding: var(--sc-3) var(--sc-5); border-radius: var(--sc-r-pill);
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-weight: 400; font-size: 1em; text-decoration: none; white-space: nowrap; border: 0; cursor: pointer;
  box-shadow: var(--sc-e2);
  transition: transform 140ms var(--sc-ease-out), background-color var(--sc-d-fast) var(--sc-ease-out);
}
.cta:hover { background: #b2e8f8; }
.cta:active { transform: scale(0.97); }
.cta:disabled { opacity: .5; cursor: not-allowed; }
.cta svg { width: 1em; height: 1em; }

h1, h2 { text-wrap: balance; margin: 0; }
p { text-wrap: pretty; }

/* ============================================================ the front -- */
.front { background: var(--art-ground); }
/* The cover runs edge to edge, full width, and you scroll to see the rest of
   it. The bar sits above it (not over it) and scrolls away, so nothing ever
   covers any of the artwork. */
.front .bar { position: relative; background: none; }
.stage, .frame { position: relative; }
.front .art { width: 100%; height: auto; margin-inline: auto; overflow: hidden; }
/* on a wide screen the art keeps a 1.5in black border either side */
@media (min-width: 1100px) and (orientation: landscape) {
  .front .art { width: calc(100% - 3in); }
}
.front .art img { clip-path: inset(0 0 0 0.2%); } /* the source file has a stray white pixel column on its left edge */

/* the logo in the brain is the door to the archive */
/* The link is a circle over the logo's black disc (52% across, 26% down,
   radius about 5.7% of the cover). On hover a ring lights up around the disc
   and the name curves along its underside. In the SVG, 1 unit = 0.2% of the
   cover: ring r 26 on the disc edge, text baseline r 37 just outside it. */
.archive-door {
  position: absolute; left: 42.8%; top: 16.8%; width: 20%; height: 20%; z-index: 2;
  border-radius: 50%; clip-path: circle(28% at 50% 50%); /* only the disc is clickable */
}
.archive-door:focus-visible { outline: none; }
.door-mark {
  position: absolute; left: 42.8%; top: 16.8%; width: 20%; height: 20%; z-index: 1; overflow: visible;
  pointer-events: none; opacity: 0; scale: 0.96;
  transition: opacity 220ms var(--sc-ease-out), scale 220ms var(--sc-ease-out);
  filter: drop-shadow(0 0 0.35rem rgb(30 144 255 / 0.85)); /* a clear blue glow, not the purple-blue of the type */
}
.archive-door:hover + .door-mark, .archive-door:focus-visible + .door-mark { opacity: 1; scale: 1; }
.door-mark .ring { fill: none; stroke: #6cc4ff; stroke-width: 1.3; }
.door-mark text {
  fill: var(--sc-ink); font-family: var(--sc-font-display); font-size: 6.6px; letter-spacing: 0.6px; text-transform: uppercase;
  stroke: rgb(2 4 10 / 0.9); stroke-width: 2.1px; stroke-linejoin: round; paint-order: stroke; /* a dark edge so it reads on the busy art */
}
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bar nav { display: flex; gap: var(--sc-5); }
/* the small section at the bottom: music, then who to call */
.listen {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sc-4) var(--sc-7);
  padding: var(--sc-9) var(--sc-gutter) var(--sc-6);
  border-top: 1px solid var(--sc-hairline);
}
.listen h2 { font-size: var(--sc-t-2xl); }
.listen p { margin: var(--sc-2) 0 0; color: var(--sc-ink-soft); max-width: 38ch; }
.listen .sc {
  display: inline-flex; align-items: center; gap: var(--sc-2);
  font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase;
  text-decoration: none; transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.listen .sc:hover { color: var(--sc-accent); }
.listen .sc svg { width: 0.8em; height: 0.8em; }
/* the rig, lit in the dark under the music; the photo already dissolves into the
   canvas colour, the mask just guarantees no edge can ever show */
.rigshot { margin: 0 auto; max-width: 1500px; }
.rigshot img {
  display: block; width: 100%; height: auto;
  -webkit-mask-image: radial-gradient(ellipse 72% 66% at 50% 48%, #000 64%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 66% at 50% 48%, #000 64%, transparent 100%);
}
.foot {
  display: flex; flex-wrap: wrap; gap: var(--sc-3) var(--sc-6); justify-content: space-between;
  padding: 0 var(--sc-gutter) var(--sc-6); color: var(--sc-ink-soft); font-size: var(--sc-t-sm);
}
.foot a { text-decoration: none; }
.foot a:hover { color: var(--sc-ink); }

@media (max-width: 860px) {
  .bar nav { gap: var(--sc-4); }
}
.bar .short { display: none; }
@media (max-width: 480px) {
  .bar .long { display: none; } .bar .short { display: inline; }
  /* phones: no room for logo, wordmark and links side by side. The graffiti
     logo is the brand here (it links home too), with the links centred under it */
  .bar { grid-template-columns: 1fr; grid-template-areas: "logo" "nav"; row-gap: var(--sc-2); }
  .bar .mark { display: none; }
  .bar nav { justify-self: center; } .bar a.turn { white-space: nowrap; }
  .bar-logo { grid-area: logo; } .bar nav { grid-area: nav; }
  .bar-logo img { height: 56px; }
  .bar a.turn { font-size: 0.64rem; }
  .mark { font-size: 0.82rem; }
}

/* ============================================================= the back -- */
.back { background: var(--sc-canvas); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.rigstage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: #0b1424; }
.rigstage .art { position: absolute; height: 100%; left: 50%; top: 0; transform: translateX(-50%); }
.rigstage .spk { transform-origin: 50% 80%; }
/* the graffiti logo, medium-large, top-left over the speaker art, clear of the bar */
.rig-logo {
  position: absolute; z-index: 2; top: 6.5rem; left: var(--sc-gutter);
  width: clamp(130px, 15vw, 240px); height: auto;
  /* grey chrome like the logo painted into the art: dulled fill, a tight dark
     outline, then a soft cast shadow */
  filter: brightness(0.72) contrast(1.2)
    drop-shadow(1px 0 0 #15171d) drop-shadow(-1px 0 0 #15171d)
    drop-shadow(0 1px 0 #15171d) drop-shadow(0 -1px 0 #15171d)
    drop-shadow(2px 3px 0 rgb(10 12 18 / 0.7))
    drop-shadow(0 4px 10px rgb(2 4 10 / 0.6));
}
.notes { padding: calc(var(--sc-9) + var(--sc-7)) var(--sc-gutter) var(--sc-8); max-width: 40rem; }
.notes h1 { font-size: clamp(2.2rem, 1rem + 2.6vw, 3.8rem); }
.lead { font-size: clamp(0.92rem, 0.86rem + 0.3vw, 1.05rem); line-height: 1.7; color: var(--sc-ink); margin: var(--sc-5) 0 0; }
.soft { color: var(--sc-ink-soft); }
.notes h2 { font-size: var(--sc-t-xl); margin-top: var(--sc-9); }
.stack { list-style: none; padding: 0; margin: var(--sc-5) 0 0; border-top: 1px solid var(--sc-hairline); }
.stack li { display: grid; grid-template-columns: 3.2rem 1fr; padding: var(--sc-3) 0; border-bottom: 1px solid var(--sc-hairline); font-variant-numeric: tabular-nums; }
.stack b { font-weight: 600; color: var(--sc-accent); }
.stack .total { grid-template-columns: 1fr; color: var(--sc-ink-soft); }
.stack.prices li { grid-template-columns: 4.2rem 1fr; }
.stack.prices .total { grid-template-columns: 1fr; }

form { margin-top: var(--sc-5); display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-5) var(--sc-4); }
.field { display: grid; gap: var(--sc-2); }
.field.wide { grid-column: 1 / -1; }
/* everything in and under the form runs at the body size, so it reads as one voice with the page */
label { font-size: 1em; color: var(--sc-ink-soft); }
.group { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-3) var(--sc-4); margin: 0; padding: 0; border: 0; min-width: 0; }
.group legend { padding: 0; margin-bottom: var(--sc-3); color: var(--sc-ink); }
.hint { grid-column: 1 / -1; margin: 0; font-size: 0.9em; color: var(--sc-ink-soft); }
label .opt { opacity: .75; }
input, select, textarea {
  width: 100%; min-height: 3rem; padding: var(--sc-3) var(--sc-4);
  background: var(--sc-surface); border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-sm);
  box-shadow: var(--sc-edge); color-scheme: dark;
  transition: border-color var(--sc-d-fast) var(--sc-ease-out);
}
textarea { min-height: 7rem; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: color-mix(in oklab, var(--sc-ink) 36%, transparent); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 1px; border-color: transparent; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: #f2a0a8; }
.send { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-4); margin-top: var(--sc-2); }
.status { font-size: 1em; color: var(--sc-ink-soft); margin: 0; min-height: 1.5em; }
.status.ok { color: var(--sc-accent); }
.status.err { color: #f2a0a8; }
.reach { margin-top: var(--sc-9); padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline); display: grid; gap: var(--sc-2); }
.reach a { font-size: 1em; text-decoration: none; font-variant-numeric: tabular-nums; width: fit-content; }
.reach a:hover { color: var(--sc-accent); }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .rigstage { position: relative; height: auto; aspect-ratio: 1; }
  .rigstage .art { width: 100%; height: auto; }
  .notes { padding-top: var(--sc-7); }
  form, .group { grid-template-columns: 1fr; }
}

/* ======================================================== the archives -- */
.archive-main { padding: calc(var(--sc-9) + var(--sc-7)) var(--sc-gutter) var(--sc-8); }
.archive-main h1 { font-size: clamp(2.2rem, 1rem + 4.2vw, 5rem); margin-bottom: var(--sc-7); }
.wall { list-style: none; margin: 0; padding: 0; columns: 3 18rem; column-gap: var(--sc-3); }
.wall li { break-inside: avoid; margin-bottom: var(--sc-3); }
.wall button { display: block; width: 100%; padding: 0; border: 0; background: var(--sc-surface); cursor: zoom-in; border-radius: var(--sc-r-sm); overflow: hidden; }
.wall img { width: 100%; height: auto; transition: transform 240ms var(--sc-ease-out), opacity 240ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .wall button:hover img { transform: scale(1.02); }
}
.wall button:active img { transform: scale(0.99); }

.viewer { padding: 0; border: 0; background: none; max-width: 100vw; max-height: 100svh; width: 100vw; height: 100svh; overflow: hidden; }
.viewer::backdrop { background: color-mix(in oklab, #000 92%, transparent); }
.viewer[open] { display: grid; place-items: center; }
.viewer img { max-width: calc(100vw - 2 * var(--sc-gutter) - 6rem); max-height: calc(100svh - 6rem); width: auto; height: auto; border-radius: var(--sc-r-sm); }
.v-btn {
  position: fixed; display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0; border: 0; border-radius: 50%;
  background: color-mix(in oklab, var(--sc-surface) 85%, transparent); color: var(--sc-ink); cursor: pointer;
  transition: background-color var(--sc-d-fast) var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.v-btn:hover { background: var(--sc-surface); }
.v-btn:active { transform: scale(0.95); }
.v-btn svg { width: 1.1rem; height: 1.1rem; }
.v-close { top: var(--sc-4); right: var(--sc-4); }
.v-prev { left: var(--sc-4); top: 50%; translate: 0 -50%; }
.v-next { right: var(--sc-4); top: 50%; translate: 0 -50%; }
@media (max-width: 860px) {
  .viewer img { max-width: 100vw; max-height: calc(100svh - 9rem); border-radius: 0; }
  .v-prev, .v-next { top: auto; bottom: var(--sc-5); translate: none; }
  .v-prev { left: calc(50% - 3.5rem); } .v-next { right: calc(50% - 3.5rem); }
}

/* fewer and gentler: keep everything, drop the movement */
@media (prefers-reduced-motion: reduce) {
  .stage { height: auto; }
  .frame { position: relative; min-height: 100svh; height: auto; }
  .art img { will-change: auto; }
}

/* phones: the bar is two rows (logo, then wordmark and links), so whatever
   sits under it starts lower. Last in the file so it wins over the page rules. */
@media (max-width: 480px) {
  .rig-logo { top: 7.5rem; }
  .archive-main { padding-top: 10rem; }
  .bar a.hire { font-size: 0.74rem; } .cx { padding: 1.05rem 1.8rem 0.8rem; }
}