/* ============================================================
   Lab 02 — Das Blatt · Die Dirigentin
   Print-Essay: Garamond-Mengensatz, Marginalien, Fußnoten,
   goldener Lesefaden. Bewegung fast null — das ist der Punkt.
   ============================================================ */

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

:root {
  --berry:#8B1A6B; --berry-deep:#6E1455;
  --gold:#C8A55B; --gold-deep:#A8853F;
  --plum:#3A1530;
  --paper:#FBF8F3; --paper-mid:#F3EDE2; --paper-deep:#E8DDC8;
  --ink:#1F1A17; --ink-soft:#4A413B; --ink-mute:#877B71;
  --serif:'EB Garamond', Georgia, serif;
  --sans:'Inter', -apple-system, sans-serif;
  --measure:41em;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }

body {
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:clamp(17px, 1.32vw, 19px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"liga", "kern";
}

::selection { background:var(--berry); color:var(--paper); }

/* feines Papierkorn */
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:50;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  opacity:.05; mix-blend-mode:multiply;
}

/* ---------- Lesefaden ---------- */
.thread {
  position:fixed; top:0; bottom:0; left:clamp(1rem, 3.5vw, 3.4rem);
  width:1px; z-index:5;
}
.thread__line { position:absolute; inset:0; width:1px; background:var(--paper-deep); }
.thread__fill {
  position:absolute; top:0; left:0; width:1px; height:0%;
  background:linear-gradient(to bottom, var(--gold-deep), var(--gold));
}
.thread__fill::after {
  content:""; position:absolute; bottom:-3px; left:50%; transform:translateX(-50%);
  width:7px; height:7px; border-radius:50%; background:var(--gold-deep);
}
.thread__marks { list-style:none; position:absolute; inset:0; }
.thread__marks li {
  position:absolute; left:.9rem; transform:translateY(-50%);
  font-family:var(--serif); font-style:italic; font-size:.82rem;
  color:var(--ink-mute); transition:color .5s;
}
.thread__marks li.passed { color:var(--berry); }
@media (max-width:900px) { .thread { display:none; } }

/* ---------- Masthead ---------- */
.masthead {
  text-align:center;
  padding:clamp(3.4rem, 9vh, 6.5rem) 1.4rem 0;
  max-width:46em; margin:0 auto;
}
.masthead__rule { border-top:1px solid var(--ink); margin-bottom:1.6rem; }
.masthead__rule--double {
  border-top:3px double var(--ink); margin:2rem 0 0;
}
.masthead__eyebrow {
  font-family:var(--sans); font-weight:600; font-size:.64rem;
  letter-spacing:.3em; text-transform:uppercase; color:var(--gold-deep);
}
.masthead__title {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(3.2rem, 9.5vw, 6.8rem);
  line-height:1.02; letter-spacing:-.015em;
  color:var(--berry);
  margin-top:1.4rem;
}
.masthead__sub {
  margin-top:1.1rem;
  font-size:clamp(1.05rem, 2vw, 1.3rem);
  color:var(--ink-soft);
}
.masthead__sub em { color:var(--gold-deep); }

/* ---------- Essay-Spalte ---------- */
.essay {
  max-width:var(--measure);
  margin:0 auto;
  padding:clamp(3rem, 7vh, 5.5rem) 1.5rem 4rem;
  position:relative;
}

.chapter { margin-top:4.2rem; }
.chapter:first-of-type { margin-top:0; }
.chapter__head { text-align:center; margin-bottom:2.2rem; }
.chapter__label {
  font-family:var(--sans); font-weight:600; font-size:.62rem;
  letter-spacing:.34em; text-transform:uppercase; color:var(--gold-deep);
}
.chapter__label::after {
  content:""; display:block; width:2.2rem; height:1px;
  background:var(--gold); margin:.85rem auto 0;
}
.chapter__title {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.7rem, 3.4vw, 2.3rem);
  color:var(--berry); margin-top:.9rem;
}

.essay p {
  text-align:justify;
  hyphens:auto; -webkit-hyphens:auto;
  color:var(--ink);
}
.essay p + p { text-indent:1.7em; margin-top:.35em; }
.has-note { position:relative; }

/* Initiale */
.dropcap {
  float:left;
  font-family:var(--serif);
  font-size:4.6em; line-height:.82;
  padding:.06em .09em 0 0;
  color:var(--berry);
}

/* Fußnoten-Zeichen */
.fn a {
  font-family:var(--sans); font-size:.62em; font-weight:600;
  color:var(--berry); text-decoration:none;
  padding-left:.1em;
}
.fn a:hover { color:var(--berry-deep); }

/* ---------- Marginalien ---------- */
.marginal {
  display:block;
  position:absolute; top:.2em; right:calc(-1 * (13rem + 2.6rem));
  width:13rem;
  font-family:var(--sans); font-size:.72rem; line-height:1.6;
  color:var(--ink-mute); text-align:left; text-indent:0;
  hyphens:none;
  padding-left:.85rem;
  border-left:2px solid var(--gold);
  opacity:0; transform:translateX(-6px);
  transition:opacity 1s ease .15s, transform 1s ease .15s;
}
.marginal.in { opacity:1; transform:none; }
@media (max-width:1280px) {
  .marginal {
    position:static; width:auto;
    margin:1.3rem 0 1.3rem 1.7em;
    transform:none; opacity:1;
  }
}

/* ---------- Bildtafel ---------- */
.plate { margin:3.6rem auto; max-width:30em; }
.plate img {
  width:100%; display:block;
  filter:grayscale(1) sepia(.08) contrast(1.02);
  border:1px solid var(--ink);
  padding:6px; background:var(--paper);
}
.plate--etch { max-width:34em; }
.plate--etch img { filter:none; }
.plate figcaption {
  margin-top:.75rem; text-align:center;
  font-family:var(--sans); font-size:.7rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-mute);
}

/* ---------- Pull-Quote ---------- */
.pull {
  margin:3.8rem auto; padding:0 1rem;
  text-align:center;
}
.pull p {
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.5rem, 3.2vw, 2.1rem); line-height:1.35;
  color:var(--plum); text-align:center; hyphens:none;
}
.pull em { font-style:italic; color:var(--gold-deep); }
.pull::before, .pull::after {
  content:""; display:block; width:3.2rem; height:1px;
  background:var(--gold); margin:0 auto;
}
.pull::before { margin-bottom:1.7rem; }
.pull::after { margin-top:1.7rem; }

.closing { font-style:italic; }

/* ---------- Schlussstück & Fußnoten ---------- */
.tailpiece {
  text-align:center; color:var(--gold-deep);
  font-size:1.5rem; margin:3.4rem 0 0;
}
.footnotes {
  margin-top:3.6rem; padding-top:1.6rem;
  border-top:1px solid var(--paper-deep);
}
.footnotes__label {
  font-family:var(--sans); font-weight:600; font-size:.62rem;
  letter-spacing:.3em; text-transform:uppercase; color:var(--ink-mute);
  margin-bottom:1rem;
}
.footnotes ol { list-style:none; counter-reset:fn; }
.footnotes li {
  counter-increment:fn;
  font-size:.86em; line-height:1.6; color:var(--ink-soft);
  margin-bottom:.6rem; padding-left:1.5em; position:relative;
}
.footnotes li::before {
  content:counter(fn);
  position:absolute; left:0; top:.1em;
  font-family:var(--sans); font-size:.72em; font-weight:600; color:var(--berry);
}
.fn-back { color:var(--gold-deep); text-decoration:none; font-size:.9em; }
.setnote {
  margin-top:2rem; text-align:center !important;
  font-style:italic; font-size:.82em; color:var(--ink-mute);
}

/* ---------- Colophon / CTA ---------- */
.colophon {
  margin-top:4.2rem; padding:2.4rem 0 0;
  border-top:3px double var(--ink);
  text-align:center;
}
.colophon p { text-align:center; font-style:italic; font-size:1.1em; color:var(--ink); }
.colophon__link {
  display:inline-block; margin-top:1.1rem;
  font-family:var(--sans); font-weight:600; font-size:.78rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--berry); text-decoration:none;
  border-bottom:1px solid rgba(139,26,107,.35);
  padding-bottom:.3em;
  transition:border-color .3s, color .3s;
}
.colophon__link:hover { color:var(--berry-deep); border-color:var(--berry-deep); }

/* ---------- Footer ---------- */
.footer {
  text-align:center; padding:3rem 1.4rem 2.4rem;
  background:var(--paper-mid);
  margin-top:5rem;
}
.footer__firm {
  font-family:var(--sans); font-weight:600; font-size:.66rem;
  letter-spacing:.3em; text-transform:uppercase; color:var(--berry);
}
.footer__meta { margin-top:.6rem; font-family:var(--sans); font-size:.72rem; color:var(--ink-mute); }
.footer__lab { margin-top:1.3rem; font-family:var(--sans); font-size:.66rem; letter-spacing:.1em; }
.footer__lab a { color:var(--gold-deep); text-decoration:none; }
.footer__lab a:hover { color:var(--berry); }

/* Auf schmalen Spalten reißt Blocksatz — Flattersatz ist die Print-Antwort */
@media (max-width:640px) {
  .essay p { text-align:left; }
}

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