/* ==========================================================================
   NS Music - persona-oaschloch.css v1.0.0
   Das Oaschloch. Nicotine wallpaper, Trachten loden, oak, mustard, and the
   cover magenta. Pirata One display over Grenze body.

   Deliberate dissonance, by rule:
     - magenta headings on a loden/mustard ground, never resolved to a
       harmonious pair;
     - headings rotated -1.2deg and left uncorrected;
     - hard 5px offset shadow instead of a soft one;
     - Urkunde framing: triple rules, symmetric, centred;
     - a visible wallpaper pattern behind running text.
   Body text itself stays legible (ink on paper, >7:1). The discomfort is in
   the colour and the ornament, not in the reading.
   ========================================================================== */

:root {
  --nsm-paper:        #E3D9BF;   /* nicotine wallpaper */
  --nsm-paper-2:      #D5C8A6;
  --nsm-ink:          #17120E;
  --nsm-ink-soft:     #3B2F22;
  --nsm-muted:        #6B5A3F;
  --nsm-rule:         #7A4A21;   /* oak */

  --nsm-accent:       #A81B7C;   /* magenta, from the cover */
  --nsm-accent-2:     #3E5233;   /* loden */
  --nsm-accent-3:     #D8A62B;   /* mustard */

  --nsm-link:         #8F1668;
  --nsm-link-hover:   #3E5233;

  --nsm-font-display: "Pirata One", "Grenze", Georgia, serif;
  --nsm-font-body:    "Grenze", Georgia, "Times New Roman", serif;
  --nsm-font-meta:    "Grenze", Georgia, serif;

  --nsm-h1:           clamp(2.6rem, 8vw, 5rem);
  --nsm-h2:           clamp(1.9rem, 4.2vw, 2.9rem);
  --nsm-h3:           1.5rem;
  --nsm-body-size:    1.125rem;
  --nsm-lh-body:      1.58;
  --nsm-ls-display:   0.01em;
  --nsm-weight-display: 400;

  --nsm-container:    960px;
  --nsm-measure:      62ch;
  --nsm-gutter:       1.5rem;
  --nsm-radius:       0;

  --nsm-shell-bg:     #3E5233;
  --nsm-shell-ink:    #E3D9BF;
  --nsm-shell-rule:   #D8A62B;

  --nsm-btn-bg:       #D8A62B;
  --nsm-btn-ink:      #17120E;
  --nsm-btn-border:   3px double #17120E;
}

/* Wallpaper. Two repeating gradients plus a dot grid. Visible, not subtle. */
body {
  background-color: var(--nsm-paper);
  background-image:
    radial-gradient(rgba(122,74,33,.14) 1px, transparent 1.6px),
    repeating-linear-gradient(90deg, rgba(62,82,51,.13) 0 3px, transparent 3px 22px),
    repeating-linear-gradient(0deg,  rgba(168,27,124,.05) 0 1px, transparent 1px 11px);
  background-size: 18px 18px, auto, auto;
}

/* -------------------------------------------------------------- headings -- */

h1, h2 {
  color: var(--nsm-accent);
  text-shadow: 5px 5px 0 rgba(23,18,14,.28);
  transform: rotate(-1.2deg);
  transform-origin: left bottom;
  line-height: 1.02;
}
h3, h4 { color: var(--nsm-accent-2); }
h2 { margin-block-start: 2.2rem; }

.nsm-prose > h2, .nsm-prose > h3 { clear: both; }

/* -------------------------------------------------------- shell + header -- */

.nsm-header {
  border-bottom: 6px double var(--nsm-shell-rule);
  background-image: repeating-linear-gradient(135deg, rgba(216,166,43,.10) 0 6px, transparent 6px 16px);
}
.nsm-brand {
  font-family: "Pirata One", serif;
  font-size: 1.6rem;
  color: var(--nsm-shell-ink);
  text-shadow: 3px 3px 0 rgba(0,0,0,.35);
}
.nsm-brand small { color: var(--nsm-accent-3); letter-spacing: .22em; text-transform: none; }
.nsm-nav a { font-size: 1rem; letter-spacing: .06em; }
.nsm-nav a:hover, .nsm-nav .current-menu-item > a { border-bottom-color: var(--nsm-accent-3); }

/* ------------------------------------------------------------- page head -- */
/* Urkunde: a centred certificate block, triple-framed, magenta on loden. */

.nsm-page-head {
  text-align: center;
  background: var(--nsm-accent-2);
  border-block: 4px double var(--nsm-accent-3);
  padding-block: clamp(2.2rem, 5vw, 3.6rem);
  margin-block-end: 2.5rem;
}
.nsm-page-head h1 {
  transform: rotate(-1.2deg);
  transform-origin: center;
  text-shadow: 5px 5px 0 rgba(0,0,0,.32);
}
.nsm-page-head .nsm-kicker {
  color: var(--nsm-accent-3);
  letter-spacing: .3em;
  font-size: .8125rem;
}
.nsm-page-head .nsm-dek {
  color: #E3D9BF;
  margin-inline: auto;
  font-size: 1.0625rem;
}

/* Ornamental divider: a Spiessig little lace run. */
.nsm-ornament {
  display: block;
  height: 14px;
  margin: 1.2rem auto 0;
  max-width: 14rem;
  background:
    radial-gradient(circle at 50% 0, transparent 6px, var(--nsm-accent-3) 6px 7px, transparent 7px) 0 0/14px 14px repeat-x;
}

/* ---------------------------------------------------------------- prose --- */
/* Running text sits on an opaque panel so the wallpaper stays behind it. */

.nsm-panel {
  background: #EFE8D5;
  border: 1px solid var(--nsm-rule);
  box-shadow: 7px 7px 0 rgba(62,82,51,.35);
  padding: clamp(1.4rem, 4vw, 2.6rem);
}

.nsm-prose a { text-decoration-thickness: 2px; text-underline-offset: 2px; }
.nsm-prose blockquote {
  border-inline-start: 6px double var(--nsm-accent);
  font-style: italic;
  background: rgba(216,166,43,.16);
  padding: 1rem 1.2rem;
}
.nsm-prose ul { list-style: square; }

/* Example / Merkkasten box, for lyric notes and asides. */
.example-box, .nsm-kasten {
  background: var(--nsm-accent-3);
  border: 3px double var(--nsm-ink);
  padding: 1rem 1.2rem;
  font-size: 1rem;
}

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

.nsm-btn {
  font-family: "Pirata One", serif;
  font-size: 1.1rem;
  letter-spacing: .04em;
  transform: rotate(-1.4deg);
  box-shadow: 4px 4px 0 rgba(23,18,14,.35);
}
.nsm-btn:hover, .nsm-btn:focus {
  background: var(--nsm-accent);
  color: #E3D9BF;
  transform: rotate(1deg);
}

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

.nsm-item {
  border-top: 4px double var(--nsm-rule);
  padding-block-start: 1.2rem;
}
.nsm-item h2, .nsm-item h3 {
  font-family: "Pirata One", serif;
  color: var(--nsm-accent);
  font-size: 1.5rem;
  transform: none;
  text-shadow: 3px 3px 0 rgba(23,18,14,.22);
}
.nsm-item h3 a { color: inherit; text-decoration: none; }
.nsm-item h3 a:hover { color: var(--nsm-accent-2); }

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

.nsm-footer {
  border-top: 6px double var(--nsm-shell-rule);
  background-image: repeating-linear-gradient(135deg, rgba(216,166,43,.10) 0 6px, transparent 6px 16px);
}
.nsm-footer h2 { font-family: "Pirata One", serif; color: var(--nsm-accent-3); transform: none; text-shadow: none; }
.nsm-footer .nsm-legal { border-top-color: var(--nsm-accent-3); }

.nsm-featured::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(62,82,51,.92) 0%, rgba(62,82,51,.35) 70%, rgba(62,82,51,.1) 100%);
}
.nsm-featured > .nsm-wrap { z-index: 1; }

/* A rotated Vereinsstempel, for the persona intro. Purely ornamental. */
.nsm-stempel {
  display: inline-block;
  border: 3px double var(--nsm-accent);
  color: var(--nsm-accent);
  padding: .5rem .9rem;
  font-family: "Grenze", serif;
  font-weight: 700;
  letter-spacing: .16em;
  font-size: .75rem;
  transform: rotate(-7deg);
}

/* Rotated headings can push a few pixels past the viewport. Clip on the main
   element only: clipping on <body> would kill the sticky header, which sits
   outside .nsm-main. */
.nsm-main { overflow-x: clip; }