/* ==========================================================================
   NS Music - persona-home.css v1.0.0
   The hub. Deep aubergine night, bone text, brass and plum. Mak for display.
   Lush but disciplined: one gradient, one brass hairline, no decoration that
   is not carrying information. The memorable element is the seam where the
   two persona panels meet.
   ========================================================================== */

:root {
  --nsm-paper:        #17141C;
  --nsm-paper-2:      #221D28;
  --nsm-ink:          #EFE7DA;
  --nsm-ink-soft:     #C8BDB0;
  --nsm-muted:        #96899C;
  --nsm-rule:         #37303F;

  --nsm-accent:       #C79238;   /* brass  */
  --nsm-accent-2:     #7E2A57;   /* plum   */
  --nsm-accent-3:     #1B6B60;   /* teal   */

  --nsm-link:         #E3C079;
  --nsm-link-hover:   #FFFFFF;

  --nsm-font-display: "Mak", "Instrument Sans", Georgia, serif;
  --nsm-font-body:    "Instrument Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --nsm-font-meta:    "Courier Prime", ui-monospace, "SFMono-Regular", monospace;

  --nsm-h1:           clamp(2.75rem, 8vw, 5.25rem);
  --nsm-h2:           clamp(1.6rem, 3.4vw, 2.4rem);
  --nsm-h3:           1.3rem;
  --nsm-body-size:    1.0625rem;
  --nsm-lh-body:      1.62;
  --nsm-ls-display:   -0.015em;
  --nsm-weight-display: 400;

  --nsm-container:    1180px;
  --nsm-measure:      66ch;
  --nsm-gutter:       1.5rem;
  --nsm-radius:       0;

  --nsm-shell-bg:     #100E14;
  --nsm-shell-ink:    #EFE7DA;
  --nsm-shell-rule:   #302938;

  --nsm-btn-bg:       transparent;
  --nsm-btn-ink:      #EFE7DA;
  --nsm-btn-border:   1px solid #C79238;
}

body {
  background:
    radial-gradient(120% 80% at 50% 0%, #221D28 0%, #17141C 60%, #120F17 100%);
  background-attachment: fixed;
}

/* Mak is a high-contrast display face: it needs air and no extra weight. */
h1, h2 { font-variant-ligatures: common-ligatures; }

.nsm-header { backdrop-filter: blur(6px); }
.nsm-brand { font-size: 1.35rem; }

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

.nsm-hub-hero {
  padding-block: clamp(3.5rem, 10vw, 7rem) clamp(2rem, 5vw, 3.5rem);
}
.nsm-hub-hero h1 {
  margin: 0 0 .8rem;
  line-height: .98;
}
.nsm-hub-hero .nsm-dek {
  max-width: 46ch;
  color: var(--nsm-ink-soft);
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  margin: 0;
}
.nsm-hub-hero .nsm-rule-brass {
  width: 6.5rem; height: 2px;
  background: var(--nsm-accent);
  margin: 0 0 2rem;
}

/* ---------------------------------------------------------------- doors --- */
/* Two panels, each previewing its own persona's type and colour, meeting at
   one hard seam. Content is centred in each panel, horizontally and
   vertically, so the two titles sit opposite each other across the seam. */

.nsm-doors {
  display: grid;
  grid-template-columns: 1fr;
  border-block: 1px solid var(--nsm-rule);
}
@media (min-width: 860px) {
  .nsm-doors { grid-template-columns: 1fr 4px 1fr; }
}

.nsm-seam {
  display: none;
  background: linear-gradient(to bottom, #A81B7C 0%, #C79238 50%, #B93A1C 100%);
}
@media (min-width: 860px) { .nsm-seam { display: block; } }

.nsm-door {
  padding: clamp(2rem, 4.5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
  display: flex; flex-direction: column;
  justify-content: center; align-items: center; text-align: center;
  min-height: clamp(320px, 42vw, 460px);
  text-decoration: none;
  position: relative;
  isolation: isolate;
}
.nsm-door h2 { margin: 0 0 .5rem; }
.nsm-door .nsm-door-kicker {
  font-size: .75rem;
  letter-spacing: .2em;
  margin: 0 0 1.4rem;
}
.nsm-door p { margin: 0 auto 1.5rem; max-width: 34ch; }
.nsm-door .nsm-door-cue {
  font-size: .8125rem;
  letter-spacing: .08em;
  border-bottom: 1px solid currentColor;
  align-self: center;
  padding-bottom: 2px;
}

/* Left door: Das Oaschloch. Nicotine wallpaper, blackletter, magenta. */
.nsm-door--oaschloch {
  background-color: #E3D9BF;
  background-image:
    repeating-linear-gradient(90deg, rgba(62,82,51,.10) 0 2px, transparent 2px 13px),
    repeating-linear-gradient(0deg, rgba(122,74,33,.07) 0 1px, transparent 1px 9px);
  color: #17120E;
  text-align: center;
}
.nsm-door--oaschloch h2 {
  font-family: "Pirata One", var(--nsm-font-display);
  font-size: clamp(2.9rem, 7vw, 4.5rem);
  color: #A81B7C;
  letter-spacing: 0;
  text-shadow: 4px 4px 0 rgba(23,18,14,.30);
  transform: rotate(-1.2deg);
  transform-origin: center;
}
.nsm-door--oaschloch .nsm-door-kicker,
.nsm-door--oaschloch .nsm-door-cue { font-family: "Grenze", Georgia, serif; color: #3E5233; }
.nsm-door--oaschloch p { font-family: "Grenze", Georgia, serif; font-size: 1.0625rem; }
.nsm-door--oaschloch:hover { background-color: #EBE2CB; }

/* Right door: The Serious Dilettante. Faded paper, condensed sans, vermilion. */
.nsm-door--dilettante {
  background-color: #DCD9CE;
  color: #1B1A18;
  text-align: center;
}
.nsm-door--dilettante h2 {
  font-family: "Prida01", Georgia, serif;
  font-weight: 700;
  font-feature-settings: "ss02" 1, "calt" 1, "liga" 1;
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  letter-spacing: .005em;
  line-height: 1.02;
  text-transform: none;
  color: #1B1A18;
}
.nsm-door--dilettante .nsm-door-kicker,
.nsm-door--dilettante .nsm-door-cue {
  font-family: "Courier Prime", monospace; color: #B93A1C;
}
.nsm-door--dilettante p { font-family: "Courier Prime", monospace; font-size: 1rem; }
.nsm-door--dilettante:hover { background-color: #E5E2D8; }

/* The chord stack: root / 3rd / 5th / 7th. The 7th is off the rhythm. */
.nsm-door--dilettante .nsm-chord {
  display: flex; gap: 4px; align-items: flex-end;
  height: 34px; margin-bottom: 1.2rem;
}
.nsm-door--dilettante .nsm-chord i {
  display: block; width: 7px; background: #A9B4BE;
}
.nsm-door--dilettante .nsm-chord i:nth-child(1) { height: 14px; }
.nsm-door--dilettante .nsm-chord i:nth-child(2) { height: 21px; background: #B2BCA2; }
.nsm-door--dilettante .nsm-chord i:nth-child(3) { height: 28px; background: #D3B8AE; }
.nsm-door--dilettante .nsm-chord i:nth-child(4) { height: 24px; background: #B93A1C; margin-left: 9px; }

/* ------------------------------------------------------- latest / strip --- */

.nsm-strip { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.nsm-strip h2 { font-size: var(--nsm-h2); margin-bottom: 1.5rem; }
.nsm-strip .nsm-item { border-top-color: var(--nsm-rule); }
.nsm-strip .nsm-item h3 a { text-decoration: none; }
.nsm-strip .nsm-item h3 a:hover { text-decoration: underline; text-decoration-color: var(--nsm-accent); }

.nsm-hub-about {
  border-top: 1px solid var(--nsm-rule);
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.nsm-hub-about .nsm-prose > * { max-width: var(--nsm-measure); }

.nsm-featured::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(16,14,20,.94) 0%, rgba(16,14,20,.45) 55%, rgba(16,14,20,.15) 100%);
}
.nsm-featured > .nsm-wrap { z-index: 1; }