/* Folder stage: holds the 3D perspective */
.folder-stage {
  perspective: 2400px;
  perspective-origin: center center;
  position: relative;
  /* Design-time dimensions — all inner styling (fonts, paddings, polaroids, etc.)
     is authored relative to this size. On larger viewports we scale the entire
     stage via transform (set by JS in updateFolderScale) so every element grows
     proportionally. */
  width: min(1000px, 94vw);
  aspect-ratio: 1.55 / 1;
  transform-origin: center center;
  will-change: transform;
}

/* Folder container: the flipper */
.folder {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  will-change: transform;
}

/* Each face takes full size (innerhalb ihres Containers) */
.folder-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 8px 20px rgba(0,0,0,0.3);
  will-change: transform;
}

/* ---------- BUCHDECKEL ----------
   Nimmt die RECHTE Haelfte der Buehne ein (= geschlossene Mappe) und
   schwenkt per rotateY um seine linke Kante (die Falz in der Mitte
   der aufgeschlagenen Doppelseite) auf. Waehrend der Drehung
   verschiebt js/09 die ganze .folder um -25%/0%, damit geschlossen
   die Mappe und geoeffnet die Doppelseite zentriert steht. */
.folder-cover {
  position: absolute;
  top: 0; right: 0;
  width: 50%; height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
  z-index: 3;
  will-change: transform;
}
.folder-cover .fc-front {
  /* Vorderseite = Mappen-Illustration; die Variante (akte-mappe-1..4)
     setzt js/09 passend zur Grid-Karte per inline background-image —
     und dieselbe URL zusaetzlich als inline mask-image (Silhouette,
     s. u.). Groesse/Wiederholung der Maske stehen hier statisch. */
  background: url("/assets/akte-mappe-1.webp") center / 100% 100% no-repeat;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  box-shadow: none;
}
.folder-cover .fc-back {
  transform: rotateY(180deg);
  background: url("/assets/akte-innen-links.webp") center / 100% 100% no-repeat;
  /* Silhouetten-Maske wie auf der Basis: schneidet den eckigen
     Seiten-Klon (.fc-back-page) an Eselsohr und Rundungen entlang
     der Illustration ab. */
  -webkit-mask-image: url("/assets/akte-innen-links.webp");
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("/assets/akte-innen-links.webp");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  box-shadow: none;
}
/* Portrait-Anpassungen der bisherigen (querformatigen) Deckel-Optik */
.folder-cover .folder-face-closed { padding: 2.4rem 1.8rem; }
.folder-cover .cover-big-number { font-size: 4.4rem; }
.folder-cover .cover-corner-tl,
.folder-cover .cover-corner-tr { font-size: 0.55rem; }
.folder-cover .cover-bottom-rule { font-size: 0.55rem; }

/* Die linke Basis-Seite ist DAUERHAFT sichtbar — verborgen wird sie
   allein durch den clip-path der Basis bzw. den davorliegenden
   Deckel (js/09). Auf die Deckel-RUECKSEITE klont js/09 beim Oeffnen
   den identischen Seiteninhalt (.fc-back-page): Die Akte klappt so
   direkt MIT Papier auf, und der Deckel-Austausch am Ende ist
   pixelgleich, ohne Einblenden. Die Masse spiegeln die Basis-
   Geometrie: 12px Rahmen (padding von .folder-face-open) oben/links,
   unten 12px + 52px Seiten-Navigation; rechts liegt die Falz buendig
   an der Deckelkante. */
.folder-cover .fc-back .fc-back-page {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 0;
  bottom: 64px;
  opacity: 1;
  visibility: visible;
}

/* --- CLOSED FACE (cover) --- */
.folder-face-closed {
  background:
    radial-gradient(ellipse at 30% 30%, #ddc08a, var(--manila)),
    var(--manila);
  color: var(--ink);
  padding: 3rem 3.5rem;
  cursor: pointer;
}
.folder-face-closed::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, transparent 0, transparent 22px, rgba(122, 95, 51, 0.06) 22px, rgba(122, 95, 51, 0.06) 23px),
    repeating-linear-gradient(-45deg, transparent 0, transparent 22px, rgba(122, 95, 51, 0.06) 22px, rgba(122, 95, 51, 0.06) 23px);
  pointer-events: none;
}
.folder-face-closed::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(122, 95, 51, 0.35);
  pointer-events: none;
}

.cover-tab {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--manila-dark);
  color: var(--paper);
  padding: 0.4rem 2rem 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: 0 0 4px 4px;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,0.15);
}

.cover-corner-tl,
.cover-corner-tr {
  position: absolute;
  top: 2.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--manila-deep);
  text-transform: uppercase;
}
.cover-corner-tl { left: 3rem; }
.cover-corner-tr { right: 3rem; }

.cover-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  padding: 0 3rem;
}
.cover-monogram-ring {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  margin: 0 auto 1.5rem;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 2px;
  color: var(--ink);
}
.cover-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.35em;
  color: var(--manila-deep);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.cover-big-number {
  font-family: var(--font-display);
  font-size: clamp(5rem, 12vw, 9rem);
  line-height: 0.9;
  color: var(--ink);
  letter-spacing: -0.04em;
  margin-bottom: 1rem;
}
.cover-title-line {
  font-family: var(--font-type);
  font-size: clamp(1.2rem, 2.2vw, 1.75rem);
  color: var(--ink);
  font-style: italic;
  margin-bottom: 1.25rem;
}
.cover-meta-row {
  display: inline-flex;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  color: var(--manila-deep);
  text-transform: uppercase;
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--manila-deep);
}
.cover-dot { color: var(--manila-deep); }

.cover-stamp-vertraulich {
  position: absolute;
  top: 50%;
  right: 3rem;
  transform: translateY(-50%) rotate(-8deg);
  font-family: var(--font-display);
  color: var(--stamp-red);
  border: 4px double var(--stamp-red);
  padding: 0.65rem 1.25rem;
  font-size: 1.05rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.85;
  pointer-events: none;
}

.cover-bottom-rule {
  position: absolute;
  bottom: 2.5rem;
  left: 3rem;
  right: 3rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  color: var(--manila-deep);
  text-transform: uppercase;
  padding-top: 1rem;
  border-top: 1px solid var(--manila-deep);
}

/* Click hint on closed cover */
.folder-face-closed .click-hint {
  position: absolute;
  bottom: 5rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  color: var(--manila-deep);
  text-transform: uppercase;
  opacity: 0.7;
  animation: breathe 2.2s ease-in-out infinite;
}

/* Reference mark on the closed folder cover — same pattern as the
   Vertraulich stamp: absolutely positioned, always present on the cover,
   automatically hidden during the flip because backface-visibility on the
   cover face takes care of it. Mirrored to the left side so the two
   stamps balance visually. ID value is filled from the server on page
   load — the HTML ships with placeholder dots and no descriptive label. */
.cover-mark-ref {
  position: absolute;
  top: 50%;
  left: 3rem;
  transform: translateY(-50%) rotate(7deg);
  font-family: var(--font-display);
  color: var(--stamp-red);
  border: 4px double var(--stamp-red);
  padding: 0.65rem 1.25rem;
  opacity: 0.85;
  pointer-events: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.cover-mark-ref-cap {
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.85;
}
/* Label text lives in CSS, not HTML — keeps it out of view-source. */
.cover-mark-ref-cap::before { content: "Codewort"; }
.cover-mark-ref-id {
  font-size: 1.05rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
}
@keyframes breathe {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.85; }
}

/* --- OPEN FACE (interior 2 pages) --- */
.folder-face-open {
  /* Basis = aufgeschlagene Doppelseite. Keine Rotation mehr (frueher
     drehte sich die GANZE Mappe wie eine Spielkarte um 180 Grad —
     jetzt schwenkt nur der Deckel). Hintergrund: EIN Doppelseiten-
     Bild der aufgeklappten Akte. Im geschlossenen Zustand
     blendet js/09 die linke Haelfte per clip-path aus und oeffnet sie
     synchron zur Deckel-Drehung. */
  background:
    url("/assets/akte-innen.webp") center / 100% 100% no-repeat,
    var(--manila);
  /* SILHOUETTEN-MASKE: dieselbe Illustration nochmal als Alpha-Maske
     (identische Groesse/Position wie der Background → deckungsgleich).
     Schneidet ALLES im Element — Manila-Rueckwand, eckige
     .folder-book-Ecke, Nav-Leiste — entlang der Kontur aus.
     WICHTIG fuers Asset: Bild x Maske QUADRIERT das Kanten-Alpha.
     Der Antialias-Ramp im Asset ist deshalb bewusst BREIT (5px),
     damit nach der Quadrierung noch ~2px weiche Kante bleiben.
     Ein schmaler 1px-Ramp wirkt nach Quadrierung treppig/pixelig.
     akte-innen-links.webp ist exakt die linke Haelfte desselben
     Bildes (fuer .fc-back). */
  -webkit-mask-image: url("/assets/akte-innen.webp");
  -webkit-mask-position: center;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("/assets/akte-innen.webp");
  mask-position: center;
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  /* box-shadow wuerde von der Maske mit weggeschnitten (liegt komplett
     ausserhalb der Border-Box) → Schatten stattdessen als drop-shadow-
     Filter, der der Silhouette UND dem animierten Oeffnungs-Clip folgt. */
  box-shadow: none;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.5)) drop-shadow(0 8px 10px rgba(0, 0, 0, 0.3));
  padding: 12px;
  display: flex;
  flex-direction: column;
}

.folder-book {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--paper-deep);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.08);
  overflow: hidden;
}
.folder-book::before {
  /* Center spine — the book's gutter */
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 3px;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.22) 8%, rgba(0,0,0,0.22) 92%, transparent);
  transform: translateX(-50%);
  z-index: 20;
  pointer-events: none;
}

/* Static pages: sit naturally in the 2-col grid */
.book-page-static {
  position: relative;
  z-index: 1;
}

/* The flipping leaf: covers the right half initially, rotates over to the left half.
   Lebt auf Desktop in .book-leaf-layer — einer UNBESCHNITTENEN Ebene
   ueber der maskierten Basis. Frueher steckte das Blatt in
   .folder-book (overflow:hidden) unter Maske+Filter der Face: die
   3D-Projektion wurde beim Schwenken oben/rechts abgeschnitten und
   das Umblaettern wirkte flach ("2D"). */
.book-leaf-layer {
  /* Deckt exakt die Buch-Flaeche der Basis ab: 12px Rahmen
     (padding von .folder-face-open) + 52px Seiten-Navigation unten */
  position: absolute;
  left: 12px;
  right: 12px;
  top: 12px;
  bottom: 64px;
  /* Etwas kuerzere Perspektive als die Buehne (2400px): das Blatt ist
     nur eine halbe Doppelseite breit und darf beim Drehen deutlich
     raeumlich wirken. */
  perspective: 1800px;
  perspective-origin: center center;
  z-index: 2;               /* ueber der Basis, unter dem Deckel (3) */
  pointer-events: none;     /* nur das Blatt selbst faengt Klicks */
}
/* Falz-Linie auch auf der Blatt-Ebene, damit sie am Scharnier UEBER
   dem Blatt liegt (die Linie der Basis verschwindet sonst darunter) */
.book-leaf-layer::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 3px;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.22) 8%, rgba(0,0,0,0.22) 92%, transparent);
  transform: translateX(-50%);
  pointer-events: none;
}
.book-leaf {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 50%;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 0.95s cubic-bezier(0.45, 0, 0.2, 1);
  z-index: 10;
  pointer-events: auto;
}
.book-leaf-layer[data-page="1"] .book-leaf { transform: rotateY(0deg); }
.book-leaf-layer[data-page="2"] .book-leaf { transform: rotateY(-180deg); }

/* Both faces of the leaf stack on top of each other inside .book-leaf */
.folder-page.leaf-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  margin: 0;
}
/* Front face: Beweismaterial — photo-stack is vertically centered in the page */
.folder-page.leaf-face-front {
  transform: rotateY(0deg);
  display: flex;
  flex-direction: column;
}
/* Back face is pre-rotated so that, combined with the leaf's rotateY(-180) on page 2,
   the content faces the viewer on the left half of the book. */
.folder-page.leaf-face-back {
  transform: rotateY(180deg);
}

/* Cast a soft shadow from the lifted leaf during the flip */
.folder-page.leaf-face-front::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to left, rgba(0,0,0,0) 60%, rgba(0,0,0,0.14) 100%);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 30;
}
.book-leaf-layer[data-page="2"] .folder-page.leaf-face-front::after { opacity: 1; }

/* Shadow cast onto the left static page by the leaf when it's lying on it */
.book-leaf-layer[data-page="2"] .book-leaf {
  box-shadow: 8px 0 28px rgba(0, 0, 0, 0.22);
}
/* Wait — the leaf itself doesn't render a 2D shadow since it's 3D-rotated. 
   Instead, use the shadow on the back-face which will be facing the viewer at page 2. */
.folder-page.leaf-face-back {
  box-shadow: 3px 3px 18px rgba(0, 0, 0, 0.18);
}

.folder-notes-page {
  height: 100%;
  overflow-y: auto;
  position: relative;
  padding: 0.5rem 0.5rem 0 0;
  margin: 0;
}
.notes-title {
  font-family: 'Kalam', 'Patrick Hand', cursive;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 1.5rem;
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  letter-spacing: 0.01em;
}
.notes-title::after {
  /* hand-drawn wavy underline */
  content: "";
  position: absolute;
  bottom: -4px;
  left: -4px;
  right: -8px;
  height: 8px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'><path d='M 2 6 Q 20 2, 40 5 T 80 5 Q 100 8, 120 4 T 160 5 Q 180 7, 198 4' stroke='%231a1613' stroke-width='1.8' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0.75;
}
.notes-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.note-entry {
  font-family: 'Kalam', 'Patrick Hand', cursive;
  font-size: 1.1rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.55;
  position: relative;
}
.note-entry.crossed {
  text-decoration: line-through;
  text-decoration-color: rgba(184, 39, 39, 0.75);
  text-decoration-thickness: 1.5px;
  opacity: 0.65;
}
.note-entry.important {
  color: var(--stamp-red);
  font-weight: 700;
}
.note-entry.underlined {
  text-decoration: underline wavy rgba(26, 22, 19, 0.4);
  text-underline-offset: 3px;
}
.note-entry.big {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink);
}
.note-entry.small {
  font-size: 0.92rem;
  opacity: 0.8;
}
.note-divider {
  height: 1rem;
  pointer-events: none;
}

/* Pagination nav at the bottom of the folder */
.folder-page-nav-wrap {
  flex-shrink: 0;
  height: 52px;
  background: var(--manila);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
  gap: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
}
.folder-page-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  background: var(--paper-deep);
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s;
}
.folder-page-nav:hover:not(:disabled) {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.folder-page-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.folder-page-nav svg { display: block; }
.folder-page-indicator {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

.folder-page {
  padding: 2rem 2.25rem;
  position: relative;
  overflow: hidden;
  background: var(--paper);
}
.folder-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to bottom, transparent 0, transparent 31px, rgba(58, 90, 138, 0.08) 31px, rgba(58, 90, 138, 0.08) 32px);
  pointer-events: none;
  opacity: 0.6;
}
.folder-page-left {
  border-right: 1px dashed var(--line);
}

/* Left page content: case info */
.page-header {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
  text-transform: uppercase;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--line-strong);
  margin-bottom: 1.5rem;
}
.page-title {
  font-family: var(--font-display);
  font-size: 2.25rem;
  line-height: 1;
  margin-bottom: 0.4rem;
  color: var(--ink);
}
.page-location {
  font-family: var(--font-type);
  font-size: 1.05rem;
  color: var(--ink-soft);
  font-style: italic;
  margin-bottom: 1.75rem;
}
.page-fields {
  display: grid;
  gap: 0.9rem;
  margin-bottom: 2rem;
}
.page-field {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px dotted var(--line);
}
.page-field dt {
  color: var(--ink-faint);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding-top: 2px;
}
.page-field dd {
  color: var(--ink);
  font-family: var(--font-type);
  font-size: 0.95rem;
}

/* Stamps on open folder */
.folder-stamp {
  position: absolute;
  font-family: var(--font-display);
  color: var(--stamp-red);
  border: 3px double var(--stamp-red);
  padding: 0.4rem 1rem;
  font-size: 0.9rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
}
.folder-stamp.solved {
  bottom: 2rem;
  right: 2rem;
  transform: rotate(-12deg);
  color: var(--seal-green);
  border-color: var(--seal-green);
}
.folder-stamp.pending {
  bottom: 2rem;
  right: 2rem;
  transform: rotate(-8deg);
  color: var(--ink-faint);
  border-color: var(--ink-faint);
  border-style: dashed;
}

/* Right page: photo stack + notes */
.photo-stack-wrap {
  position: relative;
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 0;
}
.photo-stack {
  position: relative;
  width: 78%;
  max-width: 320px;
  aspect-ratio: 4 / 3.4;
}
.polaroid {
  position: absolute;
  inset: 0;
  background: #f7efd8;
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 12px 12px 38px;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.06),
    0 6px 12px rgba(0, 0, 0, 0.22),
    0 14px 22px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  transform-origin: center center;
  user-select: none;
}
.polaroid.released { cursor: pointer; }
.polaroid.released:first-child:hover {
  /* GSAP owns transform; use filter so nothing fights */
  filter: brightness(1.04);
}
.polaroid-photo {
  flex: 1;
  min-height: 0;
  background: #2a241c;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
}
.polaroid-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* Overlay note on the hero-teaser photo — appears on lucky page loads
   (see script.js: server gates this on every Nth visit). Styled like an
   ink stamp pressed onto the photo: center-bottom, slight rotation,
   bright red-brown fill against a cream border so it reads against any
   photo background. */
.photo-overlay-note {
  position: absolute;
  left: 50%;
  bottom: 10%;
  transform: translateX(-50%) rotate(-4deg);
  padding: 10px 22px;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #f9eed3;
  background: rgba(138, 30, 20, 0.92);
  border: 3px solid rgba(249, 238, 211, 0.75);
  border-radius: 2px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
  box-shadow:
    0 5px 16px rgba(0, 0, 0, 0.5),
    inset 0 0 10px rgba(80, 20, 10, 0.55);
  pointer-events: none;
  z-index: 4;
  white-space: nowrap;
}
/* On the smaller polaroid-stack thumbnails the stamp scales down so it
   still fits comfortably in the card without dominating the photo. */
.polaroid-photo .photo-overlay-note {
  font-size: 0.72rem;
  padding: 4px 10px;
  letter-spacing: 0.15em;
  border-width: 1.5px;
  bottom: 10%;
}
.polaroid-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.1), transparent 40%),
    radial-gradient(circle at 30% 20%, transparent 50%, rgba(0,0,0,0.18) 100%);
  pointer-events: none;
}
.polaroid-caption {
  position: absolute;
  left: 0; right: 0;
  bottom: 8px;
  text-align: center;
  font-family: 'Kalam', 'Patrick Hand', cursive;
  font-size: 0.95rem;
  color: var(--ink-soft);
}