/* blackrabbit.lol - night, one light, one rabbit that will not run. */

:root {
  --ink:    #08080a;
  --ink-2:  #0c0c10;
  --bone:   #efece6;
  --ash:    #8f8b84;
  --line:   rgba(239, 236, 230, .13);
  --moon:   #f6f3ec;
  --ember:  #c4452f;

  --serif: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --pad: clamp(20px, 5vw, 64px);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* faint grain so the black is not a flat void */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; }

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------- topbar -- */

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px var(--pad);
  background: linear-gradient(to bottom, rgba(8, 8, 10, .92), rgba(8, 8, 10, 0));
  backdrop-filter: blur(3px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ash);
}
.brand:hover { color: var(--bone); }

.tool-link {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bone);
  border: 1px solid var(--line);
  padding: 9px 16px;
  transition: border-color .25s, background .25s;
}
.tool-link:hover { border-color: rgba(239, 236, 230, .5); background: rgba(239, 236, 230, .05); }

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

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: clamp(96px, 15vh, 170px) var(--pad) clamp(72px, 12vh, 130px);
  overflow: hidden;
}

/* the photograph: bleeds off the right, dissolves into the page on the left */
.portrait {
  position: absolute;
  top: 0;
  right: 0;
  width: 62%;
  height: 100%;
  object-fit: cover;
  object-position: 46% 42%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 40%);
          mask-image: linear-gradient(to right, transparent 0%, #000 40%);
  pointer-events: none;
  user-select: none;
}

/* and dissolves into the next section along the bottom */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 34%;
  background: linear-gradient(to bottom, rgba(8, 8, 10, 0), var(--ink) 88%);
  pointer-events: none;
}

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 620px;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ash);
  margin: 0 0 22px;
}

.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(62px, 12.5vw, 152px);
  line-height: .84;
  letter-spacing: -.02em;
  margin: 0 0 30px;
}

.hero h1 span {
  display: block;
  padding-left: .06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(239, 236, 230, .62);
}

.lead {
  font-size: clamp(16.5px, 1.9vw, 19px);
  color: #cfcbc4;
  margin: 0 0 38px;
  max-width: 52ch;
  text-shadow: 0 1px 22px rgba(8, 8, 10, .9);
}

.lead em {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.14em;
  color: var(--bone);
}

.hero-acts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 30px;
}

.btn {
  display: inline-block;
  background: var(--bone);
  color: var(--ink);
  border: 1px solid var(--bone);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 28px;
  transition: background .25s, color .25s;
}
.btn:hover { background: transparent; color: var(--bone); }
.btn.big { padding: 19px 40px; font-size: 12px; }

.cue {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bone);
  border-bottom: 1px solid var(--line);
  padding-bottom: 9px;
  transition: border-color .3s, letter-spacing .3s;
}
.cue::after { content: " \2193"; }
.cue:hover { border-color: var(--bone); letter-spacing: .3em; }

/* --------------------------------------------------------------- bands -- */

.band {
  position: relative;
  z-index: 2;
  max-width: 1140px;
  margin: 0 auto;
  padding: clamp(84px, 12vh, 145px) var(--pad);
  border-top: 1px solid var(--line);
  background: var(--ink);
}

.kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ash);
  margin: 0 0 20px;
}

.band h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 5.4vw, 60px);
  line-height: 1.04;
  letter-spacing: -.015em;
  margin: 0 0 18px;
}

.sub {
  color: var(--ash);
  max-width: 58ch;
  margin: 0 0 52px;
}

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .3, 1);
}
.reveal.seen { opacity: 1; transform: none; }

/* --------------------------------------------------------- two rabbits -- */

.rabbits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.col { background: var(--ink); padding: clamp(24px, 3.4vw, 40px); }
.col.black { background: var(--ink-2); }

.col-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 20px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ash);
}

.ico { width: 20px; height: 29px; flex: none; }
.brand .ico { width: 15px; height: 22px; }
.brand .ico use,
.col.black .ico use { fill: #050506; stroke: var(--moon); stroke-opacity: .7; stroke-width: .7; }
.col.white .ico use { fill: var(--moon); opacity: .8; }

.col ul { list-style: none; margin: 0; padding: 0; }

.col li {
  padding: 15px 0;
  border-bottom: 1px solid rgba(239, 236, 230, .06);
}
.col li:last-child { border-bottom: 0; }

.col.white li { color: var(--ash); }

.col.black li {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.35;
  color: var(--bone);
}

/* ------------------------------------------------------------- lessons -- */

.lessons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.lesson {
  background: var(--ink);
  padding: clamp(26px, 3.2vw, 40px);
  transition: background .45s ease, opacity .8s ease, transform .8s cubic-bezier(.2, .7, .3, 1);
}
.lesson:hover { background: var(--ink-2); }

.num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--ash);
  opacity: .55;
}

.told {
  font-family: var(--serif);
  font-size: clamp(23px, 2.6vw, 29px);
  line-height: 1.2;
  color: var(--bone);
  margin: 16px 0 20px;
}

.told span {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 12px;
}

.says {
  color: #b9b5ae;
  font-size: 15.5px;
  margin: 0;
  padding-left: 18px;
  border-left: 1px solid var(--line);
}

.out {
  display: inline-block;
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bone);
  border-bottom: 1px solid rgba(239, 236, 230, .35);
  padding-bottom: 6px;
}
.out::after { content: " \2192"; }
.out:hover { border-color: var(--bone); }

/* ---------------------------------------------------------------- tool -- */

.tool { background: var(--ink-2); }

.tool-facts {
  list-style: none;
  margin: 0 0 44px;
  padding: 0;
  max-width: 62ch;
  border-top: 1px solid var(--line);
}

.tool-facts li {
  position: relative;
  padding: 16px 0 16px 30px;
  border-bottom: 1px solid var(--line);
  color: #b9b5ae;
  font-size: 15.5px;
}

.tool-facts li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 25px;
  width: 8px;
  height: 1px;
  background: var(--ember);
}

/* --------------------------------------------------------------- alone -- */

.alone { text-align: center; }

.field {
  display: block;
  width: 100%;
  max-width: 900px;
  margin: 44px auto 8px;
  height: auto;
}

.moon { fill: var(--moon); opacity: .9; }

.herd use {
  fill: var(--moon);
  opacity: .22;
  animation: hop 3.4s ease-in-out infinite;
  animation-delay: var(--d, 0s);
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

@keyframes hop {
  0%, 100% { transform: translateY(0)    scaleY(1);    }
  42%      { transform: translateY(-9px) scaleY(1.04); }
  58%      { transform: translateY(-3px) scaleY(.98);  }
}

@media (prefers-reduced-motion: reduce) { .herd use { animation: none; } }

.loner use {
  fill: #030304;
  stroke: var(--moon);
  stroke-opacity: .8;
  stroke-width: .5;
  filter: drop-shadow(0 0 26px rgba(246, 243, 236, .3));
}

.ground { fill: #050506; stroke: rgba(239, 236, 230, .09); stroke-width: 1; }

.creed {
  max-width: 30ch;
  margin: 34px auto 0;
  font-family: var(--serif);
  font-size: clamp(20px, 2.5vw, 27px);
  line-height: 1.45;
}

.creed p {
  margin: 0;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.creed p:last-child { border-bottom: 0; color: var(--bone); }

/* ---------------------------------------------------------------- join -- */

.join-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 620px;
}

.join-form input[type="text"],
.join-form input[type="email"] {
  flex: 1 1 210px;
  min-width: 0;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 15px;
  padding: 15px 17px;
}

.join-form input::placeholder { color: #5f5c57; }
.join-form input:focus { outline: none; border-color: rgba(239, 236, 230, .5); }

.join-form button {
  flex: 0 0 auto;
  background: var(--bone);
  color: var(--ink);
  border: 1px solid var(--bone);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 15px 30px;
  cursor: pointer;
  transition: background .25s, color .25s;
}
.join-form button:hover { background: transparent; color: var(--bone); }

.trap { position: absolute; left: -9999px; }

.fineprint {
  color: #6c6963;
  font-size: 13px;
  margin: 20px 0 0;
  max-width: 56ch;
}

.done {
  font-family: var(--serif);
  font-size: clamp(21px, 2.6vw, 28px);
  color: var(--bone);
  border-left: 2px solid var(--bone);
  padding-left: 20px;
  margin: 0;
}

.fail { color: var(--ember); font-size: 15px; margin: 0 0 18px; }

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

footer {
  position: relative;
  z-index: 2;
  background: var(--ink);
  border-top: 1px solid var(--line);
  padding: 52px var(--pad) 64px;
  text-align: center;
  color: var(--ash);
  font-size: 14px;
}

footer p { margin: 6px 0; }
footer strong { color: var(--bone); font-weight: 500; }
footer a { color: var(--ash); text-decoration: none; border-bottom: 1px solid var(--line); }
footer a:hover { color: var(--bone); }
footer .small { font-size: 12px; opacity: .6; }

.ico.foot { width: 22px; height: 32px; margin-bottom: 14px; }
.ico.foot use { fill: #050506; stroke: var(--moon); stroke-opacity: .6; stroke-width: .7; }

/* --------------------------------------------------------------- small -- */

@media (max-width: 900px) {
  .portrait {
    width: 100%;
    opacity: .42;
    object-position: 58% 30%;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 88%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 88%);
  }
  .hero { align-items: flex-end; }
  .hero-copy { max-width: none; }
}

@media (max-width: 720px) {
  .rabbits { grid-template-columns: 1fr; }
  .col.black li { font-size: 19px; }
  .topbar { padding: 12px var(--pad); }
  .brand span { display: none; }
}

/* ================================================================ studio ==
   Music, artwork and words - everything the back room feeds the page.
   ========================================================================= */

.navlinks {
  display: flex;
  align-items: center;
  gap: 8px 20px;
  flex-wrap: wrap;
}

.navlinks a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ash);
}
.navlinks a:hover { color: var(--bone); }
.navlinks a.on { color: var(--bone); }

main.inner { padding-top: 78px; }
.band.top { border-top: 0; }

/* ---------------------------------------------------------------- music -- */

.tracks {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: 30px;
}

.track {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 26px);
  background: var(--ink);
  padding: clamp(18px, 2.4vw, 26px);
  transition: background .4s ease;
}
.track:hover { background: var(--ink-2); }

.cover {
  width: clamp(76px, 9vw, 104px);
  height: clamp(76px, 9vw, 104px);
  object-fit: cover;
  flex: none;
  border: 1px solid var(--line);
}

.cover.blank {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-2);
}
.cover.blank .ico { width: 24px; height: 35px; }
.cover.blank .ico use { fill: #050506; stroke: var(--moon); stroke-opacity: .55; stroke-width: .7; }

.track-body { flex: 1; min-width: 0; }

.track-body h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.15;
  margin: 0 0 6px;
}

.note { color: var(--ash); font-size: 14px; margin: 0 0 12px; }

audio {
  width: 100%;
  max-width: 460px;
  height: 38px;
  filter: invert(92%) hue-rotate(180deg) contrast(.92);
}

/* -------------------------------------------------------------- artwork -- */

.artstrip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 30px;
}

.wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.piece { margin: 0; }

.piece img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--line);
  transition: opacity .35s ease;
}
.piece a:hover img { opacity: .82; }

.wall .piece img { aspect-ratio: 4 / 5; }

.piece figcaption {
  display: block;
  font-size: 13px;
  color: var(--ash);
  padding-top: 10px;
}
.piece figcaption strong { display: block; color: var(--bone); font-weight: 500; }
.piece figcaption .note { display: block; margin: 4px 0 0; font-size: 13px; }

/* ---------------------------------------------------------------- words -- */

.wordlist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: 30px;
}

.wordcard {
  display: block;
  background: var(--ink);
  padding: clamp(24px, 3vw, 34px);
  text-decoration: none;
  transition: background .4s ease;
}
.wordcard:hover { background: var(--ink-2); }

.tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ember);
}

.wordcard h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.5vw, 28px);
  line-height: 1.2;
  color: var(--bone);
  margin: 12px 0 8px;
}

.ref {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ash);
  margin: 0 0 10px;
}
.ref.big { font-size: 12px; margin-bottom: 26px; }

.excerpt { color: #b9b5ae; font-size: 15px; margin: 0; }
.when { color: var(--ash); font-size: 12px; margin: 14px 0 0; }

.lyric {
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.55;
  color: var(--bone);
  max-width: 34ch;
  margin: 0 0 40px;
  border-left: 1px solid var(--line);
  padding-left: clamp(18px, 3vw, 34px);
}

/* ---------------------------------------------------------------- verse -- */

.verse { text-align: center; }

.verse blockquote {
  margin: 0 auto;
  max-width: 30ch;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.4;
  color: var(--bone);
}
.verse blockquote p { margin: 0 0 22px; }

.verse cite {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ash);
}

.about {
  max-width: 46ch;
  margin: 34px auto 0;
  color: #b9b5ae;
  text-align: left;
  font-size: 16.5px;
}

@media (max-width: 640px) {
  .track { flex-direction: column; align-items: flex-start; }
  .cover { width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .navlinks { gap: 6px 14px; }
  .navlinks a { font-size: 10px; letter-spacing: .14em; }
  .brand span { display: none; }
  main.inner { padding-top: 64px; }
}

/* ============================================================= wet black ==
   Black is not one colour. Wet black has a light on it: a hard bright edge,
   a slow falloff, and a pool of reflection underneath. Everything below is
   that idea applied to the page itself.
   ========================================================================= */

:root {
  --ink:   #050506;
  --ink-2: #0a0a0e;
  --wet:   rgba(214, 226, 240, .07);   /* the sheen */
  --edge:  rgba(239, 243, 249, .16);   /* the bright edge water leaves */
}

body {
  background:
    radial-gradient(120% 85% at 78% -8%,  rgba(196, 214, 236, .10) 0%, rgba(196, 214, 236, .03) 34%, rgba(5, 5, 6, 0) 62%),
    radial-gradient(90%  70% at 12% 108%, rgba(150, 168, 190, .05) 0%, rgba(5, 5, 6, 0) 60%),
    var(--ink);
  background-attachment: fixed;
}

/* the drawn rabbit sits in the light instead of bleeding off the edge */
.portrait.draw {
  width: min(46%, 520px);
  height: auto;
  top: 50%;
  right: 3%;
  transform: translateY(-46%);
  -webkit-mask-image: none;
          mask-image: none;
  filter: drop-shadow(0 34px 60px rgba(0, 0, 0, .85))
          drop-shadow(0 0 90px rgba(198, 216, 238, .12));
}

@media (max-width: 900px) {
  .portrait.draw {
    position: relative;
    width: min(70%, 340px);
    right: auto;
    top: auto;
    transform: none;
    margin: 0 auto -8px;
    opacity: 1;
    display: block;
  }
  .hero { flex-direction: column; align-items: center; text-align: center; justify-content: center; }
  .hero-copy { margin-top: 8px; }
  .hero-acts { justify-content: center; }
  .lead { margin-left: auto; margin-right: auto; }
}

/* every band is a wet slab: dark, with light caught along its top edge */
.band, footer {
  background:
    linear-gradient(to bottom, rgba(214, 226, 240, .035) 0%, rgba(214, 226, 240, 0) 180px),
    var(--ink);
  border-top: 1px solid var(--edge);
}

.band::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 1px;
  background: linear-gradient(to right,
              rgba(239, 243, 249, 0) 0%,
              rgba(239, 243, 249, .42) 22%,
              rgba(239, 243, 249, .12) 60%,
              rgba(239, 243, 249, 0) 100%);
  pointer-events: none;
}

.tool { background: linear-gradient(to bottom, rgba(214, 226, 240, .06), rgba(5, 5, 6, 1) 60%); }

/* headings read like light sliding off a wet surface */
.band h2, .hero h1 {
  background: linear-gradient(168deg, #ffffff 0%, #e6e9ee 34%, #9aa2ad 76%, #6d747e 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.hero h1 span {
  background: none;
  -webkit-background-clip: border-box;
          background-clip: border-box;
  color: transparent;
}

/* cards: a bead of light on the top edge, a reflection when you touch them */
.track, .lesson, .wordcard, .col, .piece img, .join-form input {
  position: relative;
  background-image: linear-gradient(to bottom, var(--wet) 0%, rgba(5, 5, 6, 0) 46%);
}

.track:hover, .lesson:hover, .wordcard:hover {
  background-image: linear-gradient(to bottom, rgba(214, 226, 240, .12) 0%, rgba(5, 5, 6, 0) 55%);
  box-shadow: inset 0 1px 0 rgba(239, 243, 249, .22);
}

.tracks, .wordlist, .rabbits, .lessons { background: var(--edge); }

.cover, .piece img {
  box-shadow: inset 0 1px 0 rgba(239, 243, 249, .18), 0 12px 30px rgba(0, 0, 0, .6);
}

/* buttons look like wet stone with a light on the lip */
.btn, .join-form button {
  background-image: linear-gradient(to bottom, #ffffff 0%, #dcdfe4 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 10px 26px rgba(0, 0, 0, .55);
}
.btn:hover, .join-form button:hover {
  background-image: none;
  box-shadow: inset 0 1px 0 rgba(239, 243, 249, .3);
}

.tool-link {
  background-image: linear-gradient(to bottom, rgba(214, 226, 240, .1), rgba(214, 226, 240, 0));
  border-color: var(--edge);
}

/* the moon, and the little rabbits, get the same wet edge */
.moon { filter: drop-shadow(0 0 26px rgba(214, 226, 240, .5)); }
.loner use { filter: drop-shadow(0 0 22px rgba(214, 226, 240, .35)); }

.verse blockquote p {
  background: linear-gradient(170deg, #ffffff 0%, #dfe3e9 40%, #8e959f 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* a wet floor under the whole page */
footer { box-shadow: inset 0 60px 60px -60px rgba(214, 226, 240, .07); }

/* Gradient text is beautiful until a browser does not support it, and then the
   heading is simply invisible. Never let that happen. */
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .band h2, .hero h1, .verse blockquote p { color: var(--bone); background: none; }
}

/* ================================================== studio, room, wall ==
   The three places where somebody actually does something on this site.
   ======================================================================= */

/* ------------------------------------------------------------- studio -- */

.booth {
  border: 1px solid var(--edge);
  background: linear-gradient(to bottom, rgba(214, 226, 240, .05), rgba(5, 5, 6, 0) 50%);
  padding: clamp(26px, 4vw, 48px);
  text-align: center;
}

.meter {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  height: 62px;
  margin-bottom: 26px;
}

.meter span {
  width: 6px;
  height: 8px;
  background: rgba(239, 236, 230, .1);
  transition: height .07s linear, background .12s linear;
}
.meter span.on  { height: 46px; background: var(--bone); }
.meter span.hot { background: var(--ember); }

.clock {
  font-family: var(--mono);
  font-size: clamp(38px, 7vw, 62px);
  letter-spacing: .04em;
  color: var(--bone);
  margin: 0 0 22px;
}

.booth-acts {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
}

.rec {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--ember);
  color: #fff;
  border: 1px solid var(--ember);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 16px 30px;
  cursor: pointer;
}
.rec:disabled { opacity: .45; cursor: default; }
.rec .dot { width: 11px; height: 11px; border-radius: 50%; background: #fff; }

.booth.live .rec .dot { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .booth.live .rec .dot { animation: none; } }

.btn.ghosted {
  background: transparent;
  background-image: none;
  color: var(--bone);
  border-color: var(--edge);
  box-shadow: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 15px 26px;
}
.btn.ghosted:disabled { opacity: .35; cursor: default; }

.booth-state { color: var(--ash); font-size: 14px; margin: 0 0 22px; }

.keep-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}
.keep-form input[type="text"] {
  flex: 1 1 240px;
  max-width: 340px;
  background: transparent;
  border: 1px solid var(--edge);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 15px;
  padding: 14px 16px;
}
.keep-form input:focus { outline: none; border-color: rgba(239, 236, 230, .5); }
.keep-form button { cursor: pointer; }
.keep-form button:disabled { opacity: .4; cursor: default; }

.booth audio { width: 100%; max-width: 520px; margin: 4px auto 0; display: block; }

/* --------------------------------------------------------------- room -- */

.room { border: 1px solid var(--edge); background: var(--ink-2); }

.room-log {
  height: min(58vh, 520px);
  overflow-y: auto;
  padding: 20px clamp(16px, 2.4vw, 28px);
}

.line { padding: 12px 0; border-bottom: 1px solid rgba(239, 236, 230, .06); }
.line:last-child { border-bottom: 0; }

.line-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 4px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.line-head strong { color: var(--bone); font-weight: 500; }
.line-head span   { color: var(--ash); opacity: .7; }
.line-head em {
  font-style: normal;
  color: var(--ember);
  letter-spacing: .18em;
}
.line-head .drop {
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--ash);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: .5;
}
.line-head .drop:hover { color: var(--ember); opacity: 1; }

.line-body {
  margin: 0;
  color: #d6d2cb;
  font-size: 16px;
  overflow-wrap: anywhere;
}
.line.host .line-body { color: var(--bone); }

.room-say {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 16px;
  border-top: 1px solid var(--edge);
  background: linear-gradient(to bottom, rgba(214, 226, 240, .05), rgba(5, 5, 6, 0));
}
.room-say input {
  background: transparent;
  border: 1px solid var(--edge);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 15px;
  padding: 13px 15px;
  min-width: 0;
}
#who  { flex: 0 1 170px; }
#line { flex: 1 1 260px; }
.room-say input:focus { outline: none; border-color: rgba(239, 236, 230, .5); }
.room-say button {
  background: var(--bone);
  color: var(--ink);
  border: 1px solid var(--bone);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 13px 26px;
  cursor: pointer;
}
.room-say button:hover { background: transparent; color: var(--bone); }

.room-note { color: var(--ember); font-size: 13px; margin: 12px 0 0; min-height: 18px; }

/* --------------------------------------------------------------- wall -- */

.drawkit { border: 1px solid var(--edge); background: var(--ink-2); padding: 16px; }

.tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: center;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--edge);
}

.tool-row { display: flex; align-items: center; gap: 8px; }

.swatch {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(239, 236, 230, .25);
  background: var(--s);
  cursor: pointer;
  padding: 0;
}
.swatch.on { box-shadow: 0 0 0 2px var(--ink-2), 0 0 0 3px var(--bone); }

.size {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--edge);
  cursor: pointer;
  padding: 0;
}
.size span { display: block; background: var(--bone); border-radius: 50%; }
.size.on { border-color: var(--bone); background: rgba(239, 236, 230, .07); }

.tbtn {
  background: transparent;
  border: 1px solid var(--edge);
  color: var(--ash);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 11px 18px;
  cursor: pointer;
}
.tbtn:hover { color: var(--bone); border-color: rgba(239, 236, 230, .45); }
.tbtn.on { color: var(--ink); background: var(--bone); border-color: var(--bone); }

#wall {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  border: 1px solid var(--edge);
  background: #0a0a0d;
  cursor: crosshair;
  touch-action: none;
}

.draw-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding-top: 16px;
}
.draw-acts input[type="text"] {
  flex: 1 1 200px;
  max-width: 300px;
  background: transparent;
  border: 1px solid var(--edge);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 15px;
  padding: 12px 15px;
}
.draw-acts input:focus { outline: none; border-color: rgba(239, 236, 230, .5); }
.draw-acts button { cursor: pointer; }
.draw-acts .fineprint { margin: 0; }

@media (max-width: 640px) {
  .tools { gap: 10px 14px; }
  .room-log { height: 54vh; }
}


/* --------------------------------------------------------- logo + doors -- */

.brand .mark {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: block;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .6);
}
@media (max-width: 720px) { .brand .mark { width: 30px; height: 30px; } }

.doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--edge);
  border: 1px solid var(--edge);
}

.door {
  display: block;
  background-image: linear-gradient(to bottom, var(--wet) 0%, rgba(5, 5, 6, 0) 46%);
  background-color: var(--ink);
  padding: clamp(26px, 3.2vw, 40px);
  text-decoration: none;
  transition: background .4s ease;
}
.door:hover {
  background-image: linear-gradient(to bottom, rgba(214, 226, 240, .12) 0%, rgba(5, 5, 6, 0) 55%);
  box-shadow: inset 0 1px 0 rgba(239, 243, 249, .22);
}

.door-no {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--ash);
  opacity: .55;
}

.door h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 2.7vw, 32px);
  line-height: 1.15;
  color: var(--bone);
  margin: 14px 0 10px;
}
.door h3::after { content: " \2192"; color: var(--ash); font-size: .7em; }

.door p { color: #b9b5ae; font-size: 15.5px; margin: 0; }

/* ================================================ drop, share, poems ==
   ===================================================================== */

/* The bar was see-through, so text scrolled up underneath it and smeared.
   Make it read as glass over black instead. */
.topbar {
  background: linear-gradient(to bottom,
              rgba(5, 5, 6, .97) 0%,
              rgba(5, 5, 6, .93) 62%,
              rgba(5, 5, 6, 0) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

:target, .track, .band { scroll-margin-top: 90px; }

/* ----------------------------------------------------------- the drop -- */

.dropzone {
  border: 1px dashed rgba(239, 243, 249, .28);
  background: linear-gradient(to bottom, var(--wet), rgba(5, 5, 6, 0) 60%);
  padding: clamp(38px, 7vw, 78px) 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color .25s, background .25s, transform .18s;
}
.dropzone:hover, .dropzone:focus-visible {
  border-color: rgba(239, 243, 249, .55);
  outline: none;
}
.dropzone.over {
  border-color: var(--bone);
  background: linear-gradient(to bottom, rgba(214, 226, 240, .16), rgba(5, 5, 6, 0) 70%);
  transform: scale(1.006);
}
.dropzone.cold { opacity: .45; cursor: not-allowed; }

.ico.big { width: 42px; height: 60px; margin-bottom: 18px; }
.ico.big use { fill: #030304; stroke: var(--moon); stroke-opacity: .7; stroke-width: .55; }

.dz-main {
  font-family: var(--serif);
  font-size: clamp(24px, 3.2vw, 34px);
  color: var(--bone);
  margin: 0 0 8px;
}
.dz-sub { color: var(--ash); font-size: 14px; margin: 0; }

.linkish {
  background: none;
  border: 0;
  padding: 0;
  color: var(--bone);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.dropped {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  margin-top: 26px;
}

.shot {
  margin: 0;
  border: 1px solid var(--edge);
  background: var(--ink-2);
  overflow: hidden;
}
.shot img { display: block; width: 100%; height: 130px; object-fit: cover; }
.shot figcaption {
  padding: 9px 11px;
  font-size: 12.5px;
  color: var(--ash);
  overflow-wrap: anywhere;
}
.shot.waiting { opacity: .55; }
.shot.waiting img { filter: grayscale(1); }
.shot.ok  figcaption { color: var(--bone); }
.shot.bad { border-color: rgba(196, 69, 47, .5); }
.shot.bad figcaption { color: #e08a78; }
.shot.bad img { opacity: .3; }

/* ---------------------------------------------------------- the share -- */

.share {
  display: inline-block;
  margin-top: 12px;
  background: none;
  border: 1px solid var(--edge);
  color: var(--ash);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 8px 14px;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.share:hover { color: var(--bone); border-color: rgba(239, 236, 230, .45); }
.share.shared { color: var(--ink); background: var(--bone); border-color: var(--bone); }

.share-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.share-row .out { margin-top: 0; }
.share-row .share { margin-top: 0; }

.piece figcaption .share { margin-top: 10px; }

/* the track someone shared you */
.track.lit {
  background-image: linear-gradient(to bottom, rgba(214, 226, 240, .14) 0%, rgba(5, 5, 6, 0) 60%);
  box-shadow: inset 0 1px 0 rgba(239, 243, 249, .3), inset 3px 0 0 var(--bone);
}

/* ----------------------------------------------------- raps and poems -- */

.kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -30px 0 40px;
}

.kinds a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ash);
  border: 1px solid var(--edge);
  padding: 9px 16px;
  background-image: linear-gradient(to bottom, rgba(214, 226, 240, .05), rgba(214, 226, 240, 0));
}
.kinds a:hover { color: var(--bone); border-color: rgba(239, 236, 230, .4); }
.kinds a.on { color: var(--ink); background: var(--bone); border-color: var(--bone); }
.kinds a span { opacity: .6; margin-left: 6px; }
.kinds a.on span { opacity: .55; }

/* ============================================ mic, camera, and the viewer ==
   ========================================================================= */

/* ------------------------------------------------------- room additions -- */

.room { position: relative; }

.dropveil {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  place-items: center;
  background: rgba(5, 5, 6, .88);
  border: 2px dashed rgba(239, 243, 249, .5);
  pointer-events: none;
}
.dropveil.on { display: grid; }
.dropveil span {
  font-family: var(--serif);
  font-size: clamp(20px, 3vw, 30px);
  color: var(--bone);
}

.iconbtn {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--edge);
  color: var(--ash);
  cursor: pointer;
  padding: 0;
  transition: color .2s, border-color .2s, background .2s;
}
.iconbtn svg { width: 21px; height: 21px; }
.iconbtn:hover { color: var(--bone); border-color: rgba(239, 236, 230, .45); }
.iconbtn.rec {
  color: #fff;
  background: var(--ember);
  border-color: var(--ember);
  animation: micpulse 1s ease-in-out infinite;
}
@keyframes micpulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .iconbtn.rec { animation: none; } }

/* what you are about to send */
.pending {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-top: 1px solid var(--edge);
  background: linear-gradient(to bottom, rgba(214, 226, 240, .07), rgba(5, 5, 6, 0));
}
.pending img { width: 84px; height: 84px; object-fit: cover; border: 1px solid var(--edge); }
.pending audio { flex: 1; max-width: 340px; height: 38px; }
.pending-side { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pending-side span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ash);
}

/* the camera */
.camera {
  border-top: 1px solid var(--edge);
  padding: 14px 16px;
  background: #050506;
}
.camera video {
  display: block;
  width: 100%;
  max-height: 46vh;
  background: #000;
  border: 1px solid var(--edge);
  transform: scaleX(-1);          /* a mirror, the way a mirror should be */
}
.cam-acts { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

/* a photo sitting in the room */
.shotlink {
  display: block;
  margin-top: 10px;
  padding: 0;
  border: 1px solid var(--edge);
  background: none;
  cursor: zoom-in;
  max-width: 320px;
  line-height: 0;
}
.shotlink img { display: block; width: 100%; height: auto; max-height: 320px; object-fit: cover; }
.shotlink:hover { border-color: rgba(239, 236, 230, .45); }

.voicenote {
  display: block;
  width: 100%;
  max-width: 340px;
  height: 38px;
  margin-top: 10px;
}

/* ------------------------------------------------------------- the viewer -- */

body.lb-open { overflow: hidden; }

.lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: rgba(3, 3, 4, .97);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* half screen: the same viewer, windowed */
.lb.half {
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: min(62vw, 900px);
  height: min(62vh, 640px);
  border: 1px solid var(--edge);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .8);
}

.lb-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--edge);
  background: rgba(5, 5, 6, .9);
  flex: none;
  flex-wrap: wrap;
}

.lb-cap {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ash);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-btn {
  flex: none;
  background: transparent;
  border: 1px solid var(--edge);
  color: var(--ash);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px 12px;
  cursor: pointer;
  line-height: 1;
}
.lb-btn:hover { color: var(--bone); border-color: rgba(239, 236, 230, .5); }
.lb-btn.lb-x { font-size: 16px; padding: 5px 12px; }

.lb-zoom {
  flex: none;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ash);
  min-width: 52px;
  text-align: center;
}

.lb-stage {
  flex: 1;
  overflow: hidden;
  display: grid;
  place-items: center;
  cursor: zoom-out;
}
.lb-stage.grabby { cursor: grab; }
.lb-stage.grabby:active { cursor: grabbing; }

.lb-stage img {
  max-width: 100%;
  max-height: 100%;
  transform-origin: center center;
  transition: transform .08s linear;
  user-select: none;
  -webkit-user-drag: none;
}

@media (max-width: 640px) {
  .lb.half { width: 92vw; height: 62vh; }
  .lb-cap { flex-basis: 100%; }
  .iconbtn { width: 42px; height: 42px; }
}

/* the house that built it */
.by {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ash);
  opacity: .55;
  margin-top: 16px !important;
}
.by a { color: var(--ash); text-decoration: none; border-bottom: 1px solid var(--line); }
.by a:hover { color: var(--bone); border-color: var(--bone); opacity: 1; }

/* ------------------------------------------------------------------------
   hidden means HIDDEN.

   The browser's own rule for [hidden] is display:none, but any author rule
   that sets display - .lb{display:flex}, .btn{display:inline-block} - beats
   it and the element stays on screen. That is what pinned the picture
   viewer open over the whole site. One rule, once, for the whole stylesheet.
   ------------------------------------------------------------------------ */
[hidden] { display: none !important; }

/* ------------------------------------------------------------------------
   The camera was squeezing the conversation off the screen, and the preview
   itself was too small to frame yourself in. Give the picture real room,
   and never let the talk shrink to nothing underneath it.
   ------------------------------------------------------------------------ */

.camera { padding: 16px; }

.camera video {
  width: 100%;
  max-height: min(64vh, 620px);
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: #000;
}

/* a camera that is open should not eat the whole room */
.room-log { min-height: 200px; }

.cam-acts { justify-content: center; }
.cam-acts .tbtn { padding: 13px 26px; font-size: 12px; }

/* if a picture is being sent, show it bigger than a stamp */
.pending img { width: 110px; height: 110px; }

@media (max-width: 640px) {
  .camera video { aspect-ratio: 3 / 4; max-height: 58vh; }
  .pending img { width: 84px; height: 84px; }
}

/* a shared screen is not a mirror, and it should say what you are looking at */
.camera video.noflip { transform: none; object-fit: contain; background: #000; }

.cam-what {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ash);
  margin: 0 0 10px;
}