/* ==========================================================================
   ALBA — musicbyalba.com
   Design tokens
   ========================================================================== */

:root {
  /* Color: extracted from the actual Questions Unanswered cover art
     (not a generic AI palette guess) — near-black from her outfit, a
     warm sand pulled from the cloud highlights and skin tone (not a
     jewelry-gold invented from a tiny button detail), a teal-cyan from
     the sky itself, and a deeper brown-rust from the shadow side of the
     same photo as a third, genuinely different hue. */
  --ink: #111213;
  --ink-soft: #1a1b1c;
  --paper: #f1ede6;
  --paper-dim: #a89f93;
  --sand: #c2a179;
  --sand-bright: #d8bd97;
  --teal: #6fa3a8;
  --teal-bright: #8ec3c7;
  --rust: #8a5c46;
  --rust-bright: #a3735b;
  --line: rgba(242, 237, 228, 0.14);
  --line-strong: rgba(242, 237, 228, 0.28);

  /* Type */
  --display: "Luthon Southard Serif", "Fraunces", "Iowan Old Style", "Georgia", serif;
  --sans: "Inter", -apple-system, "Segoe UI", sans-serif;

  --container: 1120px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Luthon Southard Serif";
  src: url("../fonts/luthon-southard-serif.woff2") format("woff2"),
       url("../fonts/luthon-southard-serif.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}

/* ==========================================================================
   Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--sand-bright);
  outline-offset: 3px;
}

.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

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

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 200;
  background: var(--sand);
  color: var(--ink);
  padding: 0.65rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 2px;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 1rem;
}

/* ==========================================================================
   Nav
   ========================================================================== */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem var(--gutter);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, padding 0.25s ease;
}

/* Background lives on a pseudo-element: a backdrop-filter on .nav itself
   would turn it into the containing block for the fixed mobile menu,
   trapping the menu inside the 60px bar once the page is scrolled.
   Unscrolled, it's a soft shade so the links read over a bright sky. */
.nav::before {
  content: "";
  position: absolute;
  inset: 0 0 -2.5rem;
  z-index: -1;
  background: linear-gradient(180deg, rgba(17,18,19,0.5), rgba(17,18,19,0));
  transition: background-color 0.25s ease, inset 0.25s ease;
  pointer-events: none;
}
.nav.is-scrolled::before {
  inset: 0;
  background: rgba(17, 18, 19, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.nav.is-scrolled {
  border-bottom-color: var(--line);
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

.nav__mark {
  position: relative;
  z-index: 110;
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  font-weight: 600;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}

.nav__links {
  display: flex;
  gap: 2rem;
}

.nav__links a {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--paper);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
  opacity: 0.88;
  transition: opacity 0.2s ease;
}
.nav__links a:hover { opacity: 1; }

.nav__extra { display: none; }

.nav__toggle {
  display: none;
  background: none;
  border: none;
  color: var(--paper);
  padding: 0.65rem;
  margin: -0.65rem -0.65rem -0.65rem 0;
  cursor: pointer;
}
.nav__toggle svg { width: 24px; height: 24px; }

/* Mobile: a full-screen menu rather than a side drawer. Big serif links
   with hairline dividers, contact details pinned at the bottom. Closed,
   it's visibility:hidden so it's out of the tab order too. */
@media (max-width: 760px) {
  .nav__links {
    position: fixed;
    inset: 0;
    height: 100dvh;
    flex-direction: column;
    gap: 0;
    padding: 6.5rem var(--gutter) 2.5rem;
    background: var(--ink);
    counter-reset: menu;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  }
  .nav__links.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s;
  }

  .nav__links li:not(.nav__extra) {
    border-bottom: 1px solid var(--line);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .nav__links.is-open li:not(.nav__extra) { opacity: 1; transform: none; }
  .nav__links.is-open li:nth-child(2) { transition-delay: 0.05s; }
  .nav__links.is-open li:nth-child(3) { transition-delay: 0.1s; }

  .nav__links li:not(.nav__extra) a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 1.1rem 0 0.9rem;
    font-family: var(--display);
    font-size: clamp(2.2rem, 11vw, 3rem);
    font-weight: 600;
    line-height: 1;
    opacity: 1;
    text-shadow: none;
    counter-increment: menu;
  }
  .nav__links li:not(.nav__extra) a::after {
    content: "0" counter(menu);
    font-family: var(--sans);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--sand);
  }

  .nav__extra {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-top: auto;
    font-size: 0.9rem;
  }
  .nav__extra a {
    color: var(--paper-dim);
    text-shadow: none;
    opacity: 1;
  }
  .nav__extra > a { color: var(--paper); font-size: 1rem; }
  .nav__extra-row { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; }
  .nav__extra-row a { padding: 0.35rem 0; }

  .nav__toggle { display: block; position: relative; z-index: 110; }
  .nav.menu-is-open::before { opacity: 0; }
}

body.menu-open { overflow: hidden; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--ink);
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  will-change: transform;
}

/* Vignette rather than a flat wash: the sky stays close to true color
   through the middle, and darkening ramps up firmly from ~40% down so the
   headline and tagline always sit on a solidly readable base. */
.hero__bg-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(17,18,19,0.25) 0%,
    rgba(17,18,19,0.05) 18%,
    rgba(17,18,19,0.08) 30%,
    rgba(17,18,19,0.6) 46%,
    rgba(17,18,19,0.88) 66%,
    var(--ink) 92%);
}

.hero__content {
  position: relative;
  z-index: 3;
  padding: 0 var(--gutter) 3.5rem;
  max-width: 640px;
  opacity: 0;
  transform: translateY(16px);
  animation: hero-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
}

@keyframes hero-rise {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__content { opacity: 1; transform: none; animation: none; }
}

.hero__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.6rem, 8vw, 4.4rem);
  line-height: 0.98;
  color: var(--paper);
}

.hero__tag {
  margin-top: 1.1rem;
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  color: rgba(241, 237, 230, 0.86);
  max-width: 34ch;
  text-shadow: 0 1px 16px rgba(17, 18, 19, 0.6);
}

.hero__actions {
  margin-top: 1.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* Phone: the photo sits above the text instead of behind it, so the
   tagline reads on solid ink, never across her body. The headline
   overlaps the photo's faded lower edge to tie the two together. */
@media (max-width: 640px) {
  .hero { min-height: 0; display: block; }
  .hero__bg {
    position: relative;
    height: auto;
    aspect-ratio: 4 / 5;
    object-position: center 18%;
  }
  /* Fade drawn on the photo's own box, so it always ends exactly where
     the photo does. */
  .hero__bg-fade { display: none; }
  .hero picture { position: relative; }
  .hero picture::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
      rgba(17,18,19,0.45) 0%,
      rgba(17,18,19,0) 16%,
      rgba(17,18,19,0) 58%,
      rgba(17,18,19,0.75) 85%,
      var(--ink) 100%);
  }
  .hero__content { max-width: 100%; margin-top: -3.6rem; padding-bottom: 3rem; }
  .hero__tag { text-shadow: none; }
  .hero__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
  .hero__actions .btn { justify-content: center; padding-left: 0.5rem; padding-right: 0.5rem; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.3rem;
  font-size: 0.92rem;
  font-weight: 500;
  border-radius: 2px;
  border: 1px solid var(--line-strong);
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.btn--solid {
  background: var(--sand);
  border-color: var(--sand);
  color: var(--ink);
}
.btn--solid:hover { background: var(--sand-bright); border-color: var(--sand-bright); }

.btn--ghost {
  color: var(--paper);
}
.btn--ghost:hover { border-color: var(--paper); }

/* ==========================================================================
   Section framing
   ========================================================================== */

section { position: relative; }

.section-pad {
  padding: 5.5rem 0;
}

@media (max-width: 640px) {
  .section-pad { padding: 3.75rem 0; }
}

.section-head {
  margin-bottom: 2.75rem;
  max-width: 46ch;
}

.section-head__title {
  font-family: var(--display);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 600;
  color: var(--paper);
}

/* Full width, height set by each image's own aspect ratio (via inline
   style per instance) rather than an arbitrary clamped height — a fixed
   short height was cropping these down to an unrecognisable sliver,
   especially on mobile. */
.strip-divider {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   About
   ========================================================================== */

.about {
  background: var(--ink-soft);
}

.about__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* Grid items default to min-width: auto, which lets a wide child (an
   image, mainly) force the track — and the whole row — wider than its
   container instead of shrinking. This is what caused the mobile
   horizontal-overflow/text-clipping bug; it applies to every grid below. */
.about__grid > *,
.music__intro > *,
.contact__grid > * {
  min-width: 0;
}

.about__portrait {
  width: 100%;
  height: auto;
  border-radius: 2px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  object-position: top center;
}

.about__bio p + p { margin-top: 1rem; }
.about__bio { color: var(--paper-dim); font-size: 1rem; max-width: 56ch; }

.about__bio-more {
  overflow: visible;
  max-height: none;
}
.about__bio-more p { margin-top: 1rem; }

.bio-toggle {
  display: none;
  margin-top: 1rem;
  padding: 0.35rem 0;
  background: none;
  border: none;
  color: var(--teal);
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  min-height: 24px;
}
.bio-toggle:hover { border-bottom-color: var(--teal); }

.about__press {
  margin-top: 2.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Press kit language dropdown — a native <details>/<summary> disclosure,
   so it's keyboard- and screen-reader-accessible with no JS required. */
.press-dropdown { position: relative; }
.press-dropdown summary {
  list-style: none;
  cursor: pointer;
}
.press-dropdown summary::-webkit-details-marker { display: none; }
.press-dropdown summary::after {
  content: "▾";
  margin-left: 0.5rem;
  font-size: 0.8em;
}
.press-dropdown[open] summary::after { content: "▴"; }
.press-dropdown__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 20;
  min-width: 170px;
  background: var(--ink-soft);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
}
.press-dropdown__menu a {
  padding: 0.6rem 0.7rem;
  font-size: 0.92rem;
  color: var(--paper);
  border-radius: 2px;
}
.press-dropdown__menu a:hover { background: var(--line); }

@media (max-width: 860px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__portrait { max-width: 100%; margin: 0 auto; }

  /* Show more/less only earns its keep on phone and tablet, where the
     full bio adds real scroll length. On desktop there's room to just
     show it all. */
  .about__bio-more {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease;
  }
  .about__bio-more.is-open { max-height: 700px; }
  .bio-toggle { display: inline-block; }

  /* Crop the top third of the portrait away on phone and tablet — it's
     mostly empty sky/tower, and keeping it just adds scroll length for
     no visual gain at this size. A near-square box anchored to the
     bottom crops from the top instead of the sides. */
  .about__portrait { aspect-ratio: 1 / 1; object-position: bottom center; }
}

/* Quotes */

.quotes {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.quote {
  background: var(--ink-soft);
  padding: 1.75rem;
  position: relative;
}
.quote::before {
  content: "\201C";
  position: absolute;
  top: 0.6rem;
  left: 1.2rem;
  font-family: var(--display);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--rust);
  opacity: 0.55;
}

.quote__text {
  position: relative;
  font-family: var(--display);
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--paper);
}

.quote__source {
  margin-top: 0.9rem;
  font-size: 0.8rem;
  color: var(--paper-dim);
}

@media (max-width: 700px) {
  .quotes { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Music
   ========================================================================== */

.music__intro {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  margin-bottom: 4rem;
}

.music__vinyl { max-width: 420px; }

.music__eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sand);
}
.music__ep-title {
  margin: 0.6rem 0 1rem;
  font-family: var(--display);
  font-size: clamp(1.9rem, 4vw, 2.4rem);
  font-weight: 600;
  line-height: 1.05;
  color: var(--paper);
}
.music__ep-blurb { color: var(--paper-dim); max-width: 42ch; }
.music__vinyl img { width: 100%; }

.music__intro-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

.music__player {
  margin: 0 0 4rem;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.music__player iframe { display: block; width: 100%; }

@media (max-width: 860px) {
  .music__intro { grid-template-columns: 1fr; }
  .music__vinyl { margin: 0 auto; }
}

/* Discography timeline */

.discog__heading {
  margin-bottom: 1rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sand);
}

.discog {
  border-top: 1px solid var(--line);
}

.discog__type {
  margin-left: 0.4rem;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  vertical-align: middle;
  color: var(--paper-dim);
}

.discog__row {
  display: grid;
  grid-template-columns: 96px 88px 1fr auto;
  gap: 1.25rem;
  align-items: center;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line);
}
.discog__row > * { min-width: 0; }

.discog__date {
  font-size: 0.82rem;
  color: var(--paper-dim);
  font-variant-numeric: tabular-nums;
}

.discog__cover {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 2px;
}

.discog__title {
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--paper);
}

.discog__credit {
  margin-top: 0.2rem;
  font-size: 0.8rem;
  color: var(--paper-dim);
}

.discog__link {
  display: inline-block;
  padding: 0.6rem 0;
  font-size: 0.85rem;
  color: var(--teal);
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.discog__link:hover { border-color: var(--teal); }

@media (max-width: 700px) {
  .discog__row {
    grid-template-columns: 56px 1fr;
    grid-template-areas:
      "cover title"
      "cover credit"
      "cover link";
    row-gap: 0.25rem;
  }
  .discog__cover { grid-area: cover; width: 56px; height: 56px; align-self: start; }
  .discog__title { grid-area: title; font-size: 1.02rem; }
  .discog__credit { grid-area: credit; }
  .discog__link { grid-area: link; justify-self: start; margin: -0.2rem 0 -0.5rem; }
  .discog__date { display: none; }
}

/* ==========================================================================
   Contact
   ========================================================================== */

.contact { background: var(--ink-soft); }

.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
}

.contact__block + .contact__block { margin-top: 2.25rem; }

.contact__label {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 0.5rem;
}

.contact__cta { align-self: center; }
.contact__lead {
  max-width: 34ch;
  margin-bottom: 1.5rem;
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.6vw, 1.6rem);
  line-height: 1.35;
  color: var(--paper);
}

.contact__value a {
  display: inline-block;
  padding: 0.35rem 0 0.1rem;
  font-size: 1.02rem;
  border-bottom: 1px solid var(--line-strong);
}
.contact__value a:hover { border-color: var(--paper); }

.social-row {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.social-row a {
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  font-size: 0.82rem;
  color: var(--paper-dim);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.social-row a:hover { color: var(--paper); border-color: var(--paper); }

/* Form */

.form-field { margin-bottom: 1.1rem; }
.form-field label {
  display: block;
  font-size: 0.82rem;
  color: var(--paper-dim);
  margin-bottom: 0.4rem;
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field textarea {
  width: 100%;
  background: var(--ink);
  border: 1px solid var(--line-strong);
  color: var(--paper);
  padding: 0.75rem 0.85rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  border-radius: 2px;
  resize: vertical;
}
.form-field input:focus, .form-field textarea:focus { border-color: var(--sand); }

.form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--paper-dim);
  margin-bottom: 1.4rem;
}
.form-check { cursor: pointer; line-height: 1.5; }
.form-check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0.05rem 0 0;
  accent-color: var(--sand);
  cursor: pointer;
}

.form-note {
  margin-top: 0.9rem;
  font-size: 0.8rem;
  color: var(--paper-dim);
}

.form-success {
  display: none;
  padding: 1rem 1.1rem;
  border: 1px solid var(--sand);
  color: var(--sand-bright);
  font-size: 0.92rem;
  border-radius: 2px;
  margin-bottom: 1.25rem;
}
.form-success.is-visible { display: block; }

@media (max-width: 860px) {
  .contact__grid { grid-template-columns: 1fr; }
  .contact__cta { order: -1; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  padding: 2.25rem 0;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--paper-dim);
}
.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  width: 100%;
}
.site-footer a { display: inline-block; padding: 0.5rem 0; }

/* Honeypot: off-screen, for bots only */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Form error message */
.cf-turnstile { margin-bottom: 1rem; }
.form-error {
  margin-bottom: 1.1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--rust-bright);
  background: rgba(163, 115, 91, 0.14);
  color: var(--paper);
  font-size: 0.9rem;
  border-radius: 2px;
}
.form-error[hidden] { display: none; }
.btn[disabled] { opacity: 0.6; cursor: wait; }