/* Deliciously Deep — deliciouslydeep.com
   Dark only, by decision. There is no light palette and no toggle.
   Every value here comes from the brand system. */

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

:root {
  color-scheme: dark;

  /* Neutral ramp, very slightly warm so it sits with the brand paper.
     Contrast measured against --ink-0. */
  --ink-0:  #0A0A0B;   /* page */
  --ink-1:  #121213;   /* surface */
  --ink-2:  #1A1A1C;   /* raised */
  --ink-3:  #232325;   /* hover */
  --ink-4:  #2E2E31;   /* border */
  --ink-5:  #4A4A4E;   /* disabled */
  --grey-6: #8A8A90;   /* muted text      5.77:1 */
  --grey-7: #B8B8BD;   /* secondary text 10.02:1 */
  --paper:  #F2F0ED;   /* primary text   17.40:1 */

  /* The single accent — blood orange, hue 10, ten degrees off true red.
     Clears AA on every surface in the ramp (4.70:1 on the worst, --ink-2) and
     takes ink type on it at 5.35:1 for filled controls. Paper type on it is
     3.25:1 — large display sizes only, never body text. */
  --accent: #EE4B2B;

  /* Reversed-logo correction, in lockup path units. The monogram needs none: it
     holds uncorrected at every size, and stroking it would draw a hairline seam
     where its two overlapping shapes meet. The lockup's wordmark takes 0.04% of
     the rendered width, which is all its light stems will bear. Generated by
     build.py. */
  --dd-word-rev-stroke: 0.4468;

  /* One page gutter. Every section that holds centred content uses it, and the
     header wordmark and the footer lockup share its left edge. */
  --gutter: clamp(24px, 5vw, 72px);

  --measure: 68ch;
}

html, body { margin: 0; padding: 0; background: var(--ink-0); }

body {
  -webkit-font-smoothing: antialiased;
  font-family: "Public Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--paper);
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: var(--paper); text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--ink-0); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  padding: 12px 18px; background: var(--accent); color: var(--ink-0);
  font-family: "Public Sans", sans-serif; font-weight: 500;
}
.skip:focus { left: 12px; top: 12px; }

@keyframes ddRise { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- logo ---------- */

.logo { display: block; height: auto; fill: currentColor; color: var(--paper); }

/* Three assets, three jobs, never composed by hand. The wordmark carries the
   header, the monogram carries the hero, the lockup signs off in the footer.
   The reversed correction lives inside each symbol, applied by build.py, so it
   travels with the geometry instead of depending on a selector reaching it. */
.logo-nav   { width: clamp(108px, 13vw, 138px); }
.logo-hero  { width: 100%; }
.logo-lockup { width: 100%; }

/* The header sits over the hero rather than pushing it down, so the hero keeps
   its full viewport height. It scrolls away with the page. */
.site-head {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  padding: clamp(22px, 3.4vw, 34px) var(--gutter) 0;
  display: flex;
}
.site-head a { display: block; line-height: 0; }
.site-head a:hover { opacity: 0.72; transition: opacity 0.18s ease; }

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

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 104px var(--gutter) 96px;
  text-align: center;
}

.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; display: block;
}

.hero-inner {
  animation: ddRise 1.6s ease-out both;
  position: relative; z-index: 1;
  display: grid; justify-items: center;
  /* minmax(0, 1fr) or the column sizes to the tagline's max-content and drags
     the lockup out with it — that is how the hero logo ended up at 435px on a
     desktop when the rule says 240-320. The tagline may overflow the column;
     the logo may not. */
  grid-template-columns: minmax(0, 1fr);
  width: min(66vw, 268px);
}

.hero-line {
  margin: clamp(30px, 4.4vw, 50px) 0 0;
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(23px, 3vw, 34px);
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: var(--paper);
  text-wrap: balance;
  width: max-content;
  max-width: min(86vw, 620px);
}

/* ---------- shared type roles ---------- */

h2, h3 {
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-weight: 400;
  text-wrap: balance;
}

.about h2, .signup h2 {
  margin: 0;
  font-size: clamp(31px, 4.2vw, 48px);
  line-height: 1.06;
  letter-spacing: 0;
}

/* ---------- about ---------- */

.about { padding: clamp(64px, 9vw, 120px) var(--gutter); border-top: 1px solid var(--ink-4); }
.about-inner { max-width: 680px; margin: 0 auto; display: grid; gap: 24px; }
.about h2 { margin-bottom: 4px; }
.about p { margin: 0; font-size: 17px; line-height: 1.7; max-width: var(--measure); text-wrap: pretty; }

/* ---------- roster ---------- */

.roster {
  border-top: 1px solid var(--ink-4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.artist {
  display: flex; flex-direction: column; gap: 20px; min-width: 0;
  padding: clamp(48px, 7vw, 96px) var(--gutter);
  border-bottom: 1px solid var(--ink-4);
  transition: background-color 0.2s ease;
}
.artist-a { background: var(--ink-0); border-right: 1px solid var(--ink-4); }
.artist-a:hover { background: var(--ink-1); }
.artist-b { background: var(--ink-1); }
.artist-b:hover { background: var(--ink-0); }

.artist-name-rw {
  margin: 0;
  font-family: "Public Sans", sans-serif;
  font-weight: 600;
  font-size: clamp(21px, 2.6vw, 30px);
  line-height: 1.12;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
/* basirutti's own wordmark face — theirs, not the label's */
.artist-name-br {
  margin: 0;
  font-family: Michroma, "Public Sans", sans-serif;
  font-weight: 400;
  font-size: clamp(19px, 2.3vw, 26px);
  line-height: 1.24;
  letter-spacing: 0.02em;
  text-transform: lowercase;
}

.artist-desc { margin: 0; max-width: 40ch; font-size: 16px; line-height: 1.65; color: var(--grey-6); text-wrap: pretty; }

.artist-line {
  margin: 0; max-width: 34ch;
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic; font-weight: 400;
  font-size: clamp(20px, 2.2vw, 25px);
  line-height: 1.3;
  color: var(--paper);
}

.artist-link {
  margin-top: auto; padding-top: 18px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--accent);
  align-self: start;
  border-bottom: 1px solid transparent;
  transition: border-color 0.18s ease;
}
.artist:hover .artist-link { border-bottom-color: var(--accent); }

/* ---------- signup ---------- */

.signup { padding: clamp(72px, 10vw, 124px) var(--gutter); border-top: 1px solid var(--ink-4); }
.signup-inner { max-width: 720px; margin: 0 auto; }
.signup-sub { margin: 18px 0 0; max-width: 52ch; font-size: 17px; line-height: 1.65; color: var(--grey-6); text-wrap: pretty; }
.signup-slot { margin-top: clamp(30px, 4vw, 44px); min-height: 132px; }

.joined {
  margin: 0; padding: 20px 0;
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic; font-size: 27px; color: var(--paper);
}

#dd-form { display: grid; gap: 14px; }
#dd-form[hidden] { display: none; }
#dd-form label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-6);
}

.field-row { display: flex; flex-wrap: wrap; gap: 12px; }

#dd-email {
  flex: 1 1 240px; min-width: 0; min-height: 54px;
  padding: 15px 16px;
  background: transparent;
  border: 1px solid var(--ink-4); border-radius: 0;
  color: var(--paper);
  font-family: inherit; font-size: 17px;
  outline: none;
  transition: border-color 0.18s ease;
}
#dd-email::placeholder { color: var(--ink-5); opacity: 1; }
#dd-email:focus { border-color: var(--accent); }
#dd-email[aria-invalid="true"] { border-color: var(--accent); }

#dd-submit {
  min-height: 54px; padding: 15px 34px;
  background: var(--accent);
  border: 1px solid var(--accent); border-radius: 0;
  color: var(--ink-0);
  font-family: "Public Sans", sans-serif;
  font-weight: 600; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.18s ease;
}
#dd-submit:hover { opacity: 0.88; }
#dd-submit[disabled] { opacity: 0.5; cursor: default; }

.field-error { margin: 0; min-height: 22px; font-size: 15px; line-height: 1.45; color: var(--accent); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

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

/* Left-aligned so the lockup sits directly under the header wordmark: both
   start at the page gutter. */
footer {
  padding: clamp(48px, 7vw, 80px) var(--gutter) 56px;
  border-top: 1px solid var(--ink-4);
  display: grid; justify-items: start; gap: 24px; text-align: left;
}

/* The lockup's floor is 88px; 120 keeps it clear of it. */
.logo-foot { width: 120px; }

.copyright {
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.06em; color: var(--grey-6);
  font-variant-numeric: tabular-nums;
}

/* The icons are centred in 36px cells, so the row needs pulling back by the
   slack on the first one to sit flush with the gutter. */
.socials { display: flex; gap: 20px; align-items: center; margin-left: -8px; }
.socials a {
  display: grid; place-items: center; width: 36px; height: 36px;
  color: var(--grey-6);
  transition: color 0.18s ease;
}
.socials a:hover { color: var(--accent); }