/* ==========================================================================
   NS Music - persona-dilettante.css v1.0.0
   The Serious Dilettante. Faded paper with dusty blue / rose / sage fields,
   vermilion and ochre as the strong foreground. Prida01 (stylistic set 2) for
   display, Courier Prime for the whole body.

   The contradiction is the point: a decorative bracket-serif that looks arty
   and is, in the end, slightly ridiculous, set against a typewriter body that
   refuses to be decorative at all. That mismatch is the overused 7th.

   The "visual 7th chord":
     - .nsm-chord is a literal stack of four bars (root, 3rd, 5th, 7th); the
       fourth is vermilion and sits off the stack's rhythm, so the figure never
       squares up;
     - structural borders stack as three offset rules rather than one;
     - the content grid is off-centre: a narrow typewriter rail carries meta,
       the wide column carries text, and they do not share a baseline.
   ========================================================================== */

:root {
  --nsm-paper:        #DCD9CE;
  --nsm-paper-2:      #CFCCC0;
  --nsm-ink:          #1B1A18;
  --nsm-ink-soft:     #454340;
  --nsm-muted:        #6E6B64;
  --nsm-rule:         #A9A69A;

  --nsm-accent:       #B93A1C;   /* vermilion - the 7th */
  --nsm-accent-2:     #C88A12;   /* ochre */
  --nsm-accent-3:     #A9B4BE;   /* dusty blue */

  --nsm-pastel-rose:  #D3B8AE;
  --nsm-pastel-sage:  #B2BCA2;

  --nsm-link:         #A5331A;
  --nsm-link-hover:   #1B1A18;

  --nsm-font-display: "Prida01", Georgia, "Times New Roman", serif;
  --nsm-font-body:    "Courier Prime", ui-monospace, "SFMono-Regular", Courier, monospace;
  /* Accent slot. Currently the same typewriter as the body: fill this in when
     the third face is chosen and only the labels change. */
  --nsm-font-meta:    "Courier Prime", ui-monospace, "SFMono-Regular", Courier, monospace;

  --nsm-h1:           clamp(2.4rem, 7vw, 4.75rem);
  --nsm-h2:           clamp(1.7rem, 3.6vw, 2.5rem);
  --nsm-h3:           1.3rem;
  /* Courier Prime runs small and wide for its point size, so the body goes up
     to 18px and the measure comes down: 58 monospaced characters is roughly
     the same physical line length as 66 proportional ones. */
  --nsm-body-size:    1.125rem;
  --nsm-lh-body:      1.6;
  --nsm-ls-display:   0.005em;
  --nsm-weight-display: 700;

  --nsm-container:    1080px;
  --nsm-measure:      58ch;
  --nsm-gutter:       1.5rem;
  --nsm-radius:       0;

  --nsm-shell-bg:     #CFCCC0;
  --nsm-shell-ink:    #1B1A18;
  --nsm-shell-rule:   #B93A1C;

  --nsm-btn-bg:       #1B1A18;
  --nsm-btn-ink:      #DCD9CE;
  --nsm-btn-border:   0;
}

body {
  background-color: var(--nsm-paper);
  background-image:
    linear-gradient(175deg, rgba(169,180,190,.30) 0%, rgba(169,180,190,0) 42%),
    linear-gradient(350deg, rgba(178,188,162,.26) 0%, rgba(178,188,162,0) 38%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Stylistic set 2 is the conservative one. Contextual alternates and the
   initial/terminal forms the family ships are left on: switching them off
   makes Prida01 look like a plain serif, which defeats the point.
   If ss02 appears to do nothing, the set may be registered under another tag
   in the FontForge-built OTF - drop the file on wakamaifondue.com to see which
   feature tags are actually present, and change the number here. */
h1, h2, h3, h4, .nsm-brand, .nsm-wordmark {
  font-feature-settings: "ss02" 1, "calt" 1, "liga" 1;
}
h1, h2 { line-height: 1.04; }
h3 { font-weight: 700; }

/* A trace of ink spread on running text. One rule, one line: delete it and the
   typewriter goes clean again. */
.nsm-prose p, .nsm-prose li, .nsm-sheet {
  text-shadow: 0 0 0.45px currentColor;
}

/* The wordmark, set exactly as typed - no text-transform anywhere in this
   persona, so "the SERIOUS Dilettante" survives verbatim. */
.nsm-wordmark {
  font-family: var(--nsm-font-display);
  font-weight: 700;
  text-transform: none;
  letter-spacing: var(--nsm-ls-display);
}

/* ------------------------------------------------------------ chord mark -- */

.nsm-chord {
  display: flex; gap: 4px; align-items: flex-end;
  height: 40px;
}
.nsm-chord i { display: block; width: 8px; }
.nsm-chord i:nth-child(1) { height: 16px; background: var(--nsm-accent-3); }
.nsm-chord i:nth-child(2) { height: 24px; background: var(--nsm-pastel-sage); }
.nsm-chord i:nth-child(3) { height: 32px; background: var(--nsm-pastel-rose); }
.nsm-chord i:nth-child(4) { height: 27px; background: var(--nsm-accent); margin-left: 11px; }

.nsm-chord--sm { height: 22px; }
.nsm-chord--sm i { width: 5px; }
.nsm-chord--sm i:nth-child(1) { height: 9px; }
.nsm-chord--sm i:nth-child(2) { height: 13px; }
.nsm-chord--sm i:nth-child(3) { height: 18px; }
.nsm-chord--sm i:nth-child(4) { height: 15px; margin-left: 7px; }

/* Stacked thirds as a border: three offset rules instead of one. */
.nsm-stack-rule {
  border: 0;
  height: 9px;
  background:
    linear-gradient(var(--nsm-ink) 0 1px, transparent 1px) 0 0/100% 4px repeat-y,
    linear-gradient(var(--nsm-accent) 0 1px, transparent 1px) 0 8px/100% 9px no-repeat;
  margin-block: 2.5rem;
}

/* ------------------------------------------------------------ shell ------- */

.nsm-header { border-bottom: 2px solid var(--nsm-shell-rule); }
.nsm-brand { font-weight: 700; font-size: 1.35rem; text-transform: none; }
.nsm-brand small { color: var(--nsm-accent); letter-spacing: .16em; }
.nsm-nav a { letter-spacing: .02em; }

/* ------------------------------------------------------------ page head --- */
/* Off-centre: the meta rail is narrow and left, the title column is wide and
   starts one column in. On mobile it collapses to a single stack. */

.nsm-page-head { padding-block: clamp(2.2rem, 6vw, 4rem) 1.5rem; }
.nsm-page-head .nsm-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 860px) {
  .nsm-page-head .nsm-wrap {
    grid-template-columns: 10rem 1fr;
    gap: 0 2.5rem;
    align-items: start;
  }
  .nsm-page-head .nsm-head-rail { padding-block-start: .55rem; }
  .nsm-page-head .nsm-head-body { margin-block-start: -.35rem; } /* off the baseline, on purpose */
}
.nsm-page-head .nsm-kicker {
  font-family: var(--nsm-font-meta);
  color: var(--nsm-accent);
  letter-spacing: .1em;
  font-size: .75rem;
  margin: 0;
}
.nsm-page-head h1 { line-height: .94; }
.nsm-page-head .nsm-dek { color: var(--nsm-ink-soft); }
.nsm-head-rail .nsm-chord { margin-bottom: .8rem; }

/* --------------------------------------------------------------- prose ---- */

.nsm-prose > h2 {
  position: relative;
  padding-inline-start: 1.6rem;
}
.nsm-prose > h2::before {
  content: "";
  position: absolute; left: 0; top: .28em;
  width: 5px; height: .72em;
  background: var(--nsm-accent);
}
.nsm-prose blockquote {
  border-inline-start: 0;
  padding: 0 0 0 1.4rem;
  background:
    linear-gradient(var(--nsm-accent-3) 0 100%) 0 0/3px 100% no-repeat,
    linear-gradient(var(--nsm-accent) 0 100%) 6px 0/3px 100% no-repeat;
  font-size: 1.0625rem;
  font-style: italic;
}
.nsm-prose a { text-decoration-color: var(--nsm-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Track / lyric sheet: the typewriter register. */
.nsm-sheet, .example-box {
  font-family: var(--nsm-font-meta);
  font-size: 1rem;
  line-height: 1.7;
  background: #E6E3D9;
  border-top: 2px solid var(--nsm-ink);
  border-bottom: 1px solid var(--nsm-accent);
  padding: 1.1rem 1.3rem;
}

.nsm-tracklist { list-style: none; margin: 0; padding: 0; font-family: var(--nsm-font-meta); }
.nsm-tracklist li {
  display: flex; gap: 1rem; align-items: baseline;
  padding-block: .55rem;
  border-bottom: 1px solid var(--nsm-rule);
  margin: 0;
}
.nsm-tracklist li span:last-child { margin-inline-start: auto; color: var(--nsm-muted); }

/* --------------------------------------------------------------- buttons -- */

.nsm-btn {
  letter-spacing: .04em;
  box-shadow: 6px 6px 0 var(--nsm-accent-3);
}
.nsm-btn:hover, .nsm-btn:focus {
  background: var(--nsm-accent);
  color: var(--nsm-paper);
  box-shadow: 6px 6px 0 var(--nsm-accent-2);
}

/* ---------------------------------------------------------------- items --- */

.nsm-item {
  border-top: 2px solid var(--nsm-ink);
  padding-block-start: .9rem;
  position: relative;
}
.nsm-item::after {
  content: "";
  position: absolute; top: -2px; left: 0;
  width: 3.5rem; height: 2px;
  background: var(--nsm-accent);
}
.nsm-item h3 a { color: inherit; text-decoration: none; }
.nsm-item h3 a:hover { color: var(--nsm-accent); }

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

.nsm-footer { border-top: 2px solid var(--nsm-shell-rule); }
.nsm-footer h2 { font-size: 1.0625rem; letter-spacing: .01em; }
.nsm-footer .nsm-legal { border-top-color: var(--nsm-rule); }

.nsm-featured::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(220,217,206,.95) 0%, rgba(220,217,206,.55) 60%, rgba(220,217,206,.2) 100%);
}
.nsm-featured > .nsm-wrap { z-index: 1; }