/* ==========================================================================
   THE BURROW — CORE STYLESHEET (Midori Grid & Tight Verse)
   ========================================================================== */

:root {
  --bg: #ece5d8;
  /* Sanftere Midori-Punkte: schneiden nicht mehr ins Auge */
  --dot: rgba(60, 110, 75, 0.22);
  --ink: #2c2b28;
  --ink-dim: #736d63;
  --clay: #be7b6a;
  --sage: #566b44;
  --ochre: #b8822d;
  --slate: #406175;
  --line: rgba(44, 43, 40, 0.12);
}

* { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
}

/* --- Paper Canvas & Dot Grid --- */
html, body {
  min-height: 100vh;
  background-color: var(--bg);
  background-image: radial-gradient(var(--dot) 1px, transparent 1px);
  background-size: 24px 24px;
  /* +4px Offset schiebt die Punkte genau in die Zeilenzwischenräume */
  background-position: 12px 4px;
  color: var(--ink);
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  line-height: 24px;
  letter-spacing: -0.01em;
}

/* --- Tinten-Layer --- */
#ink-overlay {
  position: fixed;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}

.ink-blob {
  position: fixed;
  width: 600px;
  height: 600px;
  pointer-events: none;
  mix-blend-mode: multiply;
  will-change: opacity;
}

.ink-blob svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}

/* --- Layout --- */
.journal-canvas {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px 36px 144px 48px;
  display: flex;
  gap: 80px;
  align-items: flex-start;
}

aside.sidebar {
  position: sticky;
  top: 72px;
  flex: 0 0 380px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

/* Clean Header ohne "Vol. 01" */
.log-index {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-dim);
  border-bottom: 1px dashed var(--line);
  padding-bottom: 8px;
}

/* --- Poem Navigation: Dicht wie eine Strophe --- */
.poem-nav {
  display: flex;
  flex-direction: column;
  gap: 6px; /* Eng zusammen, damit es als Textkörper liest */
  list-style: none;
}

.poem-nav li a {
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease;
}

.poem-nav li a:hover {
  transform: translateX(4px);
}

.nav-verse {
  font-size: 13px;
  line-height: 22px;
  font-weight: 700;
  white-space: nowrap;
  display: block;
  transition: filter 0.15s ease;
}

.source-shelf .nav-verse, .source-shelf .nav-label { color: #3b8a3e; }
.source-fridge .nav-verse, .source-fridge .nav-label { color: #d1503a; }
.source-bubbles .nav-verse, .source-bubbles .nav-label { color: #d67f00; }
.source-windowsill .nav-verse, .source-windowsill .nav-label { color: #2774a6; }

.poem-nav li a:hover .nav-verse {
  filter: brightness(1.2) saturate(1.1);
}

.nav-hidden {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.2s ease, max-height 0.25s ease;
}

.poem-nav li a:hover .nav-hidden {
  opacity: 1;
  max-height: 48px;
  padding: 2px 0 6px 0;
}

.nav-label {
  font-size: 11px;
  line-height: 18px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: block;
}

.nav-aside {
  font-size: 11px;
  line-height: 16px;
  color: var(--ink-dim);
  font-style: italic;
  display: block;
}

/* --- Feed & Einträge --- */
#feed-container {
  display: flex;
  flex-direction: column;
  gap: 72px;
  width: 100%;
}

.entry {
  position: relative;
  max-width: 580px;
  padding: 8px 16px;
  cursor: default;
}

/* Datum und Tag direkt am Titel */
.entry-meta {
  font-size: 11px;
  line-height: 24px;
  color: var(--ink-dim);
  margin-bottom: 4px; /* Vorher 24px: jetzt dockt der Titel direkt an */
  display: flex;
  gap: 12px;
  align-items: center;
}

.entry-tag {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.entry h2 {
  font-size: 15px;
  line-height: 24px;
  font-weight: 700;
  margin: 0 0 12px 0; /* Sauberer Halb-Raster-Abstand zum Fließtext */
}

.entry p {
  line-height: 24px;
  margin: 0 0 20px 0;
}

.entry-aside {
  display: inline-block;
  font-size: 11px;
  line-height: 20px;
  color: var(--ink-dim);
  background: rgba(190, 123, 106, 0.08);
  border-left: 2px solid var(--clay);
  padding: 4px 10px;
  margin-top: -4px;
  margin-bottom: 12px;
}

/* --- Marker Highlights --- */
.marker-target {
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  background-repeat: no-repeat;
  background-size: 0% 100%;
  padding: 2px 4px;
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
  transform: rotate(-0.3deg);
  transition: background-size 0.6s cubic-bezier(0.15, 0.85, 0.25, 1);
}

.entry[data-tag="shelf"] .marker-target {
  background-image: linear-gradient(92deg, rgba(59,138,62,0.12) 0%, rgba(59,138,62,0.32) 35%, rgba(59,138,62,0.18) 75%, rgba(59,138,62,0.28) 100%);
}
.entry[data-tag="fridge"] .marker-target {
  background-image: linear-gradient(92deg, rgba(209,80,58,0.12) 0%, rgba(209,80,58,0.32) 35%, rgba(209,80,58,0.18) 75%, rgba(209,80,58,0.26) 100%);
}
.entry[data-tag="bubbles"] .marker-target {
  background-image: linear-gradient(92deg, rgba(214,127,0,0.12) 0%, rgba(214,127,0,0.32) 35%, rgba(214,127,0,0.18) 75%, rgba(214,127,0,0.26) 100%);
}
.entry[data-tag="windowsill"] .marker-target {
  background-image: linear-gradient(92deg, rgba(39,116,166,0.12) 0%, rgba(39,116,166,0.32) 35%, rgba(39,116,166,0.18) 75%, rgba(39,116,166,0.26) 100%);
}

.entry .marker-target.dir-ltr { background-position: left center; }
.entry .marker-target.dir-rtl { background-position: right center; }

.entry:hover .marker-target {
  background-size: 100% 100%;
}
/* ==========================================================================
   MARGIN NOTES — wrinkled paper, cellotape, ink-bled handwriting
   Rendered by notes.js (transpiled from notes.ts). That script only ever
   sets position/top/left/transform inline on .note-text-rendered /
   .note-text-wide-rendered and appends a .tint + .tape child — everything
   else (paper texture, colour, font, ink bleed) lives here.
   ========================================================================== */

.page-content {
  position: relative;
}

/* The inline trigger inside running text that a note is attached to */
.note {
  cursor: help;
  border-bottom: 1px dotted var(--ink-dim);
}

.note-text-rendered,
.note-text-wide-rendered {
  --paper-tint: hsla(42, 70%, 68%, 0.32);
  position: relative;
  width: max-content;
  max-width: 190px;
  padding: 16px 16px 18px;
  background-color: #efe8ce;
  box-shadow: 2px 6px 12px rgba(0,0,0,0.22);
  z-index: 3;
}

.note-text-wide-rendered {
  max-width: 280px;
  margin-top: 16px;
}

/* Wrinkle: two randomized black/white gradient stacks blended by
   "difference", the second inverted and offset by 1px — the same trick as
   the compass/sass version, just generated per-note in notes.js instead of
   at build time, via the --wrinkle-gradient custom property. */
.note-text-rendered::before,
.note-text-rendered::after,
.note-text-wide-rendered::before,
.note-text-wide-rendered::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--wrinkle-gradient);
  background-blend-mode: difference;
  pointer-events: none;
}

.note-text-rendered::after,
.note-text-wide-rendered::after {
  filter: invert(1);
  opacity: 0.45;
  top: 1px;
}

.note-text-rendered .tint,
.note-text-wide-rendered .tint {
  position: absolute;
  inset: 0;
  background: var(--paper-tint);
  mix-blend-mode: overlay;
  pointer-events: none;
}

.note-text-rendered span,
.note-text-wide-rendered span {
  position: relative;
  z-index: 2;
  display: block;
  font-family: 'Indie Flower', cursive;
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink);
  /* soft blur + a gentle alpha threshold — the same blur-and-threshold
     trick as the slider demo, just with the values fixed instead of
     slider-driven. Gives handwriting a bit of soaked-in-paper bleed
     without turning it to mush. */
  filter: blur(var(--ink-blur, 0.5px)) url(#ink-bleed-filter);
}

.note-text-rendered .tape,
.note-text-wide-rendered .tape {
  background-color: hsla(0,0%,100%,.35);
  box-shadow: inset 0 0 1em .5em hsla(0,0%,100%,.12);
  height: 2.3em;
  position: absolute;
  top: -1.15em;
  left: 0;
  right: 0;
  margin: 0 auto;
  min-width: 70px;
  max-width: 120px;
  transform: rotate(var(--tape-angle, -2deg));
  filter: drop-shadow(0 1px 1px hsla(0,0%,0%,.3));
  z-index: 4;
}

.note-text-rendered .tape::after,
.note-text-rendered .tape::before,
.note-text-wide-rendered .tape::after,
.note-text-wide-rendered .tape::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: .18em;
  background-size: .35em .35em;
}

.note-text-rendered .tape::after,
.note-text-wide-rendered .tape::after {
  left: -.18em;
  background-image: linear-gradient(45deg, transparent 50%, hsla(0,0%,100%,.35) 50%),
                     linear-gradient(-45deg, transparent 50%, hsla(0,0%,100%,.35) 50%);
  background-position: 0 100%;
}

.note-text-rendered .tape::before,
.note-text-wide-rendered .tape::before {
  right: -.18em;
  background-image: linear-gradient(135deg, transparent 50%, hsla(0,0%,100%,.35) 50%),
                     linear-gradient(-135deg, transparent 50%, hsla(0,0%,100%,.35) 50%);
  background-position: 100% 100%;
}

/* ==========================================================================
   MAIN PAGE HUB — static, no feed: one random thought + the latest
   fridge + shelf post, plus whatever test notes are sitting around
   ========================================================================== */

#main-hub {
  display: flex;
  flex-direction: column;
  gap: 56px;
  width: 100%;
}

.static-post {
  margin: 0;
}

.todo-lead {
  max-width: 460px;
  line-height: 26px;
  color: var(--ink);
}

/* ==========================================================================
   PAGE CORNERS — perforated on the hub (there to be torn), already torn
   on every subpage (so the two states read as one continuous page)
   ========================================================================== */

.perf-corner {
  position: fixed;
  bottom: 0;
  width: 110px;
  height: 90px;
  pointer-events: none;
  z-index: 6;
  opacity: 0.5;
}
.perf-corner.perf-left { left: 0; }
.perf-corner.perf-right { right: 0; transform: scaleX(-1); }
.perf-corner svg { width: 100%; height: 100%; display: block; }
.perf-corner circle { fill: var(--ink-dim); }

.torn-corner {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 130px;
  height: 130px;
  pointer-events: none;
  z-index: 6;
}
.torn-corner::before {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: polygon(
    0% 100%, 0% 40%, 9% 58%, 17% 74%, 25% 52%, 34% 71%,
    43% 48%, 53% 69%, 62% 45%, 72% 64%, 82% 41%, 92% 59%,
    100% 36%, 100% 100%
  );
  background: linear-gradient(135deg, rgba(0,0,0,0.18), rgba(0,0,0,0.02) 55%);
}
.torn-corner::after {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: polygon(
    0% 100%, 0% 40%, 9% 58%, 17% 74%, 25% 52%, 34% 71%,
    43% 48%, 53% 69%, 62% 45%, 72% 64%, 82% 41%, 92% 59%,
    100% 36%, 100% 39%, 92% 62%, 82% 44%, 72% 67%, 62% 48%,
    53% 72%, 43% 51%, 34% 74%, 25% 55%, 17% 77%, 9% 61%, 0% 43%
  );
  background: var(--bg);
}