/* Thematic notebook variables are in global.css:root block.
   Base .diary-note + ::before/::after, testimonial classes, pen-* typography,
   and shared .srid-wrap:has(.diary-note) layout rules have moved to global.css
   so stories pages can drop this stylesheet. This file retains only the
   docs/@talk.php-specific desktop alignment plus its doodles, sketches,
   note-day/title/row/label/list, margin annotations, marker-yellow, etc. */

.diary-note .doodle {
  position: absolute;
  z-index:1;
  pointer-events:none;
  user-select:none;
  color:var(--notebook-blue);
  font-family:var(--notebook-font);
  font-weight:700;
  line-height:1;
  opacity:0.74;
}

.diary-note .doodle-door {
  left:clamp(14px, 2vw, 22px);
  top:190px;
  width:22px;
  height:34px;
  border:2px solid var(--notebook-blue);
  border-radius:2px;
  transform:rotate(-7deg);
}

.diary-note .doodle-door::before {
  content: "";
  position:absolute;
  left:5px;
  top:var(--spacing-sm);
  width:9px;
  height:19px;
  border:2px solid var(--notebook-blue);
  border-bottom:0;
}

.diary-note .doodle-door::after {
  content: "";
  position:absolute;
  right:3px;
  top:var(--spacing-lg);
  width:4px;
  height:4px;
  background:var(--notebook-blue);
  border-radius:50%;
}

.diary-note .doodle-orbit {
  left:clamp(13px, 2vw, 22px);
  top:188px;
  width:30px;
  height:30px;
  border:2px solid var(--notebook-blue);
  border-radius:50%;
  transform:rotate(12deg);
}

.diary-note .doodle-orbit::before {
  content: "";
  position:absolute;
  left:7px;
  top:7px;
  width:11px;
  height:11px;
  border:2px solid var(--notebook-blue);
  border-radius:50%;
}

.diary-note .doodle-orbit::after {
  content: "";
  position:absolute;
  right:-3px;
  top:11px;
  width:5px;
  height:5px;
  background:var(--notebook-blue);
  border-radius:50%;
}

.diary-note .doodle-arrow {
  left:clamp(var(--spacing-md), 2vw, var(--spacing-xl));
  top:194px;
  width:34px;
  height:3px;
  background:var(--notebook-blue);
  transform:rotate(-11deg);
}

.diary-note .doodle-arrow::after {
  content: "";
  position:absolute;
  right:-1px;
  top:-5px;
  width:10px;
  height:10px;
  border-top:3px solid var(--notebook-blue);
  border-right:3px solid var(--notebook-blue);
  transform:rotate(45deg);
}

.diary-note .doodle-people {
  left:clamp(10px, 1.9vw, var(--spacing-xl));
  top:190px;
  width:38px;
  height:26px;
  transform:rotate(7deg);
}

.diary-note .doodle-people::before,
.diary-note .doodle-people::after {
  content: "";
  position:absolute;
  top:0;
  width:10px;
  height:10px;
  border:2px solid var(--notebook-blue);
  border-radius:50%;
}

.diary-note .doodle-people::before { left: 4px; }
.diary-note .doodle-people::after { right: 4px; }

.diary-note .doodle-people span {
  position:absolute;
  left:7px;
  right:7px;
  bottom:1px;
  height:10px;
  border-bottom:3px solid var(--notebook-blue);
  border-radius:0 0 14px 14px;
}

.diary-note .doodle-fire {
  left:clamp(var(--spacing-md), 2vw, 22px);
  top:186px;
  width:32px;
  height:40px;
  transform:rotate(-6deg);
}

.diary-note .doodle-fire::before {
  content: "";
  position:absolute;
  left:9px;
  top:2px;
  width:14px;
  height:22px;
  border:2px solid var(--notebook-blue);
  border-radius:60% 60% 50% 50%;
  transform:rotate(12deg);
}

.diary-note .doodle-fire::after {
  content: "";
  position:absolute;
  left:var(--spacing-xs);
  bottom:7px;
  width:24px;
  height:3px;
  background:var(--notebook-blue);
  box-shadow:-6px 4px 0 var(--notebook-blue), 6px 4px 0 var(--notebook-blue);
}

.note-title {
  display:block;
  margin:0 0 0.45rem;
  color:var(--notebook-ink-black);
  font-family:inherit;
  font-size:clamp(1.34rem, 3vw, 1.9rem);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-0.03em;
}

.note-day {
  display:inline-block;
  margin:0 0 0.12rem;
  color:var(--notebook-red);
  font-size:0.92rem;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  transform:rotate(-1.2deg);
}

.note-row,
.diary-note p {
  margin:0.48rem 0;
  color:var(--notebook-ink-grey);
  font-weight:500;
  letter-spacing:-0.01em;
  text-shadow:none;
  opacity:0.96;
  overflow-wrap:break-word;
}

.diary-note .note-label {
  display:inline-block;
  margin-right:0.32rem;
  color:var(--notebook-red);
  font-weight:700;
  text-transform:lowercase;
}

.diary-note .note-list {
  display:block;
  margin:0.2rem 0 0.36rem 1.05rem;
  padding:0;
  list-style-position:outside;
  list-style-type:disc;
  color:var(--notebook-ink-grey);
}

.diary-note .note-list > li {
  display:list-item;
  margin:0.16rem 0;
  padding:0 0 0 0.08rem;
  color:var(--notebook-ink-grey);
  font:inherit;
  line-height:inherit;
  text-align:left;
  background:none;
  border:0;
  box-shadow:none;
  list-style:inherit;
  text-indent:0;
  text-transform:none;
}

.diary-note .note-list > li::before,
.diary-note .note-list > li::after {
  content: none;
}

.diary-note .note-list > li::marker {
  color: var(--notebook-red);
}

.marker-yellow {
  padding:0 0.16rem;
  color:#111;
  font-weight:700;
  background:linear-gradient(
    to bottom,
    transparent 38%,
    var(--notebook-highlight) 38% 83%,
    transparent 83%
  );
}



.pinned-note {
  margin:0.78rem 0 0.62rem;
  padding:0.56rem 0.72rem 0.62rem;
  color:var(--notebook-ink-black);
  font-weight:700;
  background:var(--notebook-pinned-bg);
  border-left:4px solid var(--notebook-red);
  border-radius:0.22rem;
  transform:rotate(-0.35deg);

}




.next-note {
  margin-top:0.58rem;
}

/* .diary-note:is(p, li, ...) font/color inheritance is now in global.css */

.srid-wrap > div:is(:nth-child(3n+2), :nth-child(3n+3)).diary-note > :is(p, li, h4, .note-row):not(.margin-note) {
  color: inherit;
  font-size:inherit;
  padding-left:.3rem;
}

.srid-wrap:nth-of-type(odd) .diary-note {
  transform: rotate(-0.35deg);
}

.srid-wrap:nth-of-type(even) .diary-note {
  transform: rotate(0.28deg);
}

.srid-wrap:nth-of-type(3) .diary-note,
.srid-wrap:nth-of-type(5) .diary-note {
  min-height: 430px;
}

.srid-wrap:nth-of-type(4) .diary-note {
  min-height: 360px;
}

@media (min-width:769px) {
  .srid-wrap:has(.diary-note) {
    align-items: start;
  }
}

@media (max-width:768px) {
  .srid-wrap {
    grid-template-columns: minmax(0, 1fr);
  }

  .srid-wrap img {
    max-width:100%;
    height:auto;
  }

  /* .diary-note mobile sizing + .diary-note::before mobile lines moved to global.css */

  .diary-note .doodle {
    left: 6px;
    opacity:0.35;
    transform:scale(0.68) rotate(-5deg);
  }

  .note-title {
    font-size:clamp(1.4rem, 8vw, 1.8rem);
    margin-bottom:0.6rem;
  }

  .note-list {
    margin-left:0.86rem;
  }

}

/* ------------------------------------------------------------------
   Marginalia
   ------------------------------------------------------------------
   Handwritten-style annotations placed beside each day's entry, so
   they read as notebook scribbles and not as headings. Wide screens:
   absolute-positioned around the page edges. Narrow screens: collapse
   to inline italic notes above the heading. Web fonts (Caveat, Patrick
   Hand) are tried first; if neither is installed the stack falls back
   to the existing notebook handwriting fonts and finally to cursive.
   -------------------------------------------------------------- */
body .diary-note p.margin-note {
  position:absolute;
  z-index:1;
  margin:0;
  padding:0;
  pointer-events:none;
  user-select:none;
  font-family:var(--font-handwriting);
  font-size:clamp(0.78rem, 1.5vw, 0.94rem);
  font-style:italic;
  font-weight:600;
  line-height:1.15;
  letter-spacing:0.02em;
  white-space:nowrap;
  color:var(--notebook-blue);
  opacity:0.78;
}

.diary-note p.margin-note.faint {
  opacity:0.52;
}

.diary-note p.margin-note.big {
  font-size:clamp(0.96rem, 1.95vw, 1.2rem);
  font-style:normal;
  font-weight:700;
}

.diary-note p.margin-note.m1 { left:clamp(var(--spacing-md), 2vw, var(--spacing-xl));  top:96px;  transform:rotate(-12deg); }
.diary-note p.margin-note.m2 { left:clamp(10px, 1.8vw, 18px); top:144px; transform:rotate(8deg); }
.diary-note p.margin-note.m3 { right:clamp(var(--spacing-lg), 2.5vw, 28px); top:46px; transform:rotate(-7deg); }
.diary-note p.margin-note.m4 { right:clamp(14px, 2vw, var(--spacing-2xl)); bottom:42px; transform:rotate(9deg); }
.diary-note p.margin-note.m5 { left:clamp(10px, 1.8vw, 18px); bottom:88px; transform:rotate(-9deg); }
.diary-note p.margin-note.m6 { right:clamp(14px, 2vw, var(--spacing-2xl)); top:50%; transform:translateY(-50%) rotate(6deg); }
.diary-note p.margin-note.m7 { left:clamp(10px, 1.8vw, 18px); top:56px; transform:rotate(-14deg); }
.diary-note p.margin-note.m8 { right:clamp(14px, 2vw, var(--spacing-2xl)); top:128px; transform:rotate(-6deg); }
.diary-note p.margin-note.m9 { left:clamp(10px, 1.8vw, 18px); bottom:44px; transform:rotate(11deg); }

/* ------------------------------------------------------------------
   Character sketch doodles — rudimentary biro outlines of the
   illustration figure for each diary entry. Each uses::before
   (head circle) and ::after (body/detail). All positioned on the
   right margin so they don't clash with the left-side shape doodles.
   ------------------------------------------------------------------ */

/* Shared sketch base — right side, mid-lower */
.diary-note [class*="doodle-sketch"] {
  right: clamp(16px, 3vw, 28px);
  top:246px;
  left:auto;
  opacity:0.62;
}

/* ── Erica (image 2) ─────────────────────────────────────────────
   Seated on a bench, wavy shoulder-length hair, writing on notebook
   tilted across her lap.
   Layout (top→bottom): wavy-hair puff, round head, sloped-shoulders
   body, angled notebook rectangle across the lap.
   ──────────────────────────────────────────────────────────────── */
.diary-note .doodle-sketch-erica {
  /* body / torso block */
  width:28px;
  height:26px;
  border:2px solid var(--notebook-blue);
  border-radius:4px 4px 6px 6px;
  transform:rotate(3deg);
}
/* head */
.diary-note .doodle-sketch-erica::before {
  content: "";
  position:absolute;
  top:-17px; left:7px;
  width:13px; height:13px;
  border:2px solid var(--notebook-blue);
  border-radius:50%;
  /* wavy hair as box-shadow arcs on top */
  box-shadow:-5px -5px 0 1px var(--notebook-blue),
     5px -6px 0 1px var(--notebook-blue),
     0   -7px 0 1px var(--notebook-blue);
}
/* notebook on lap — tilted rectangle */
.diary-note .doodle-sketch-erica::after {
  content: "";
  position:absolute;
  bottom:-10px; left:-var(--spacing-xs);
  width:22px; height:12px;
  border:2px solid var(--notebook-blue);
  border-radius:2px;
  transform:rotate(-12deg);
}

/* ── Eric on rock (image 1) ──────────────────────────────────────
   Seated on a boulder, dark spiky hair, round glasses, beard,
   sweater, writing in notebook across lap.
   ──────────────────────────────────────────────────────────────── */
.diary-note .doodle-sketch-eric-rock {
  /* torso / sweater block */
  width:30px;
  height:24px;
  border:2px solid var(--notebook-blue);
  border-radius:4px;
  transform:rotate(-2deg);
}
/* head with spiky hair on top */
.diary-note .doodle-sketch-eric-rock::before {
  content: "";
  position:absolute;
  top:-18px; left:var(--spacing-sm);
  width:14px; height:14px;
  border:2px solid var(--notebook-blue);
  border-radius:50%;
  /* spiky hair:sharp box-shadow spikes above */
  box-shadow:
    -3px -7px 0 0 var(--notebook-blue),
     1px -8px 0 0 var(--notebook-blue),
     5px -7px 0 0 var(--notebook-blue),
     8px -5px 0 0 var(--notebook-blue);
}
/* round glasses — two small circles */
.diary-note .doodle-sketch-eric-rock::after {
  content: "";
  position:absolute;
  top:-var(--spacing-md); left:10px;
  width:5px; height:5px;
  border:1.5px solid var(--notebook-blue);
  border-radius:50%;
  box-shadow:7px 0 0 var(--notebook-blue);
}

/* ── Eric in suit (image 3) ──────────────────────────────────────
   Sitting on a briefcase, dark suit, tie, writing.
   ──────────────────────────────────────────────────────────────── */
.diary-note .doodle-sketch-suit {
  /* jacket — wider rectangle with notched lapel suggestion */
  width:32px;
  height:26px;
  border:2px solid var(--notebook-blue);
  border-radius:3px 3px 4px 4px;
  transform:rotate(-3deg);
}
/* head */
.diary-note .doodle-sketch-suit::before {
  content: "";
  position:absolute;
  top:-17px; left:9px;
  width:13px; height:13px;
  border:2px solid var(--notebook-blue);
  border-radius:50%;
  /* spiky hair */
  box-shadow:-2px -6px 0 0 var(--notebook-blue),
     2px -7px 0 0 var(--notebook-blue),
     6px -6px 0 0 var(--notebook-blue);
}
/* briefcase below — small rectangle with centre clasp line */
.diary-note .doodle-sketch-suit::after {
  content: "";
  position:absolute;
  bottom:-14px; left:2px;
  width:28px; height:12px;
  border:2px solid var(--notebook-blue);
  border-radius:2px;
  /* tie as a vertical line from top of body */
  box-shadow:inset 9px 0 0 -7px var(--notebook-blue);
}

/* ── Eric at lighthouse (image 4) ───────────────────────────────
   Standing figure, wide bucket-hat brim, long rain-coat,
   arm extended holding a round lantern.
   ──────────────────────────────────────────────────────────────── */
.diary-note .doodle-sketch-lantern {
  /* long coat / body */
  width:22px;
  height:36px;
  border:2px solid var(--notebook-blue);
  border-radius:3px 3px 5px 5px;
  transform:rotate(2deg);
}
/* head + bucket-hat brim above */
.diary-note .doodle-sketch-lantern::before {
  content: "";
  position:absolute;
  top:-17px; left:var(--spacing-xs);
  width:13px; height:12px;
  border:2px solid var(--notebook-blue);
  border-radius:50% 50% 30% 30%;
  /* wide hat brim as box-shadow bar */
  box-shadow:0 -6px 0 2px var(--notebook-blue);
}
/* extended arm + round lantern */
.diary-note .doodle-sketch-lantern::after {
  content: "";
  position:absolute;
  top:var(--spacing-sm); right:-18px;
  width:10px; height:10px;
  border:2px solid var(--notebook-blue);
  border-radius:50%;
  /* arm line reaching back to body */
  box-shadow:5px 2px 0 -3px var(--notebook-blue), 10px 1px 0 -3px var(--notebook-blue);
}

/* ── Elder Eric (image 5) ────────────────────────────────────────
   Older man, massive fluffy cloud of grey hair, big long beard,
   sitting on a travel trunk, barefoot, writing.
   ──────────────────────────────────────────────────────────────── */
.diary-note .doodle-sketch-elder {
  /* seated body */
  width:30px;
  height:26px;
  border:2px solid var(--notebook-blue);
  border-radius:4px;
  transform:rotate(4deg);
}
/* enormous fluffy hair + head as one big puff */
.diary-note .doodle-sketch-elder::before {
  content: "";
  position:absolute;
  top:-var(--spacing-2xl); left:1px;
  width:26px; height:20px;
  border:2px solid var(--notebook-blue);
  border-radius:50% 50% 30% 30%;
  /* inner face circle via inset shadow */
  box-shadow:inset 5px 6px 0 -2px var(--notebook-blue),   /* left eye area */
    2px -2px 0 1px var(--notebook-blue),           /* extra hair puff left */
   -3px -1px 0 1px var(--notebook-blue),           /* extra hair puff right */
    8px -3px 0 1px var(--notebook-blue);            /* top puff */
}
/* large beard below — wide drooping arc */
.diary-note .doodle-sketch-elder::after {
  content: "";
  position:absolute;
  top:-6px; left:-2px;
  width:32px; height:16px;
  border-bottom:2px solid var(--notebook-blue);
  border-left:2px solid var(--notebook-blue);
  border-right:2px solid var(--notebook-blue);
  border-radius:0 0 50% 50%;
}

/* ------------------------------------------------------------------
   Micro-shape doodles — reused across sections with fixed positions
   ------------------------------------------------------------------ */

/* Crescent moon — right side high */
.diary-note .doodle-moon {
  right:clamp(18px, 3vw, 30px);
  top:80px;
  left:auto;
  width:14px; height:14px;
  border:2px solid var(--notebook-blue);
  border-radius:50%;
  box-shadow:-4px -2px 0 2px var(--notebook-blue);
  transform:rotate(-20deg);
}

/* Four-point star — left side low */
.diary-note .doodle-star {
  left:clamp(var(--spacing-md), 2vw, var(--spacing-xl));
  bottom:136px;
  width:14px; height:14px;
  transform:rotate(15deg);
}
.diary-note .doodle-star::before,
.diary-note .doodle-star::after {
  content: "";
  position:absolute;
  background:var(--notebook-blue);
}
.diary-note .doodle-star::before { top: 6px; left:0; width:14px; height:2px; }
.diary-note .doodle-star::after  { top: 0; left:6px; width:2px; height:14px; }

/* Small wave line — right side */
.diary-note .doodle-wave {
  right:clamp(var(--spacing-lg), 3vw, 28px);
  top:308px;
  width:24px; height:8px;
  border-bottom:2px solid var(--notebook-blue);
  border-radius:0 0 50% 50% / 0 0 100% 100%;
  transform:rotate(-8deg);
}
.diary-note .doodle-wave::before {
  content: "";
  position:absolute;
  left:var(--spacing-md); top:0;
  width:12px; height:8px;
  border-bottom:2px solid var(--notebook-blue);
  border-radius:0 0 50% 50% / 0 0 100% 100%;
  transform:scaleX(-1);
}

/* Small cross/plus — right, lower */
.diary-note .doodle-cross {
  right:clamp(var(--spacing-lg), 3vw, 28px);
  top:312px;
  width:14px; height:14px;
  transform:rotate(12deg);
}
.diary-note .doodle-cross::before,
.diary-note .doodle-cross::after {
  content: "";
  position:absolute;
  background:var(--notebook-blue);
}
.diary-note .doodle-cross::before { top: 6px; left:0; width:14px; height:2px; }
.diary-note .doodle-cross::after  { top: 0; left:6px; width:2px; height:14px; }

/* Loop / small infinity curl — left side */
.diary-note .doodle-loop {
  left:clamp(var(--spacing-md), 2vw, var(--spacing-xl));
  bottom:134px;
  width:22px; height:10px;
  border:2px solid var(--notebook-blue);
  border-radius:50%;
  transform:rotate(-10deg) scaleX(1.4);
}

/* Step arrow — right side lower */
.diary-note .doodle-steps {
  right:clamp(var(--spacing-lg), 3vw, 28px);
  top:308px;
  width:20px; height:16px;
  border-left:2px solid var(--notebook-blue);
  border-bottom:2px solid var(--notebook-blue);
  transform:rotate(-5deg);
}
.diary-note .doodle-steps::before {
  content: "";
  position:absolute;
  top:-6px; left:var(--spacing-sm);
  width:10px; height:10px;
  border-right:2px solid var(--notebook-blue);
  border-top:2px solid var(--notebook-blue);
}

/* Small house outline — left side */
.diary-note .doodle-house {
  left:clamp(var(--spacing-md), 2vw, var(--spacing-xl));
  bottom:132px;
  width:20px; height:18px;
  border:2px solid var(--notebook-blue);
  border-top:0;
  transform:rotate(-4deg);
}
.diary-note .doodle-house::before {
  content: "";
  position:absolute;
  top:-10px; left:-3px;
  width:0; height:0;
  border-left:13px solid transparent;
  border-right:13px solid transparent;
  border-bottom:11px solid var(--notebook-blue);
}
.diary-note .doodle-house::after {
  content: "";
  position:absolute;
  bottom:0; left:5px;
  width:8px; height:10px;
  border:2px solid var(--notebook-blue);
  border-bottom:0;
}

/* Thought dot trail — right side */
.diary-note .doodle-thought {
  right:clamp(var(--spacing-lg), 3vw, 28px);
  top:308px;
  width:5px; height:5px;
  background:var(--notebook-blue);
  border-radius:50%;
  box-shadow:8px -6px 0 -1px var(--notebook-blue),
    14px -12px 0 -2px var(--notebook-blue);
  transform:rotate(-5deg);
}

@media (max-width:768px) {
  /* sidebar collapses to a row of inline notes above the heading so
     all four annotations stay visible on narrow viewports */
  body .diary-note p.margin-note {
    display: none;
  }

  .diary-note p.margin-note.faint {
    opacity:0.5;
  }

  .diary-note p.margin-note.big {
    font-size:1rem;
  }

  /* hide extra doodles on mobile to avoid clutter */
  .diary-note [class*="doodle-sketch"],
  .diary-note .doodle-moon,
  .diary-note .doodle-star,
  .diary-note .doodle-wave,
  .diary-note .doodle-cross,
  .diary-note .doodle-loop,
  .diary-note .doodle-steps,
  .diary-note .doodle-house,
  .diary-note .doodle-thought {
    display:none;
  }
}

/* Testimonial classes (.testimonials-paper, .testimonial-item, .testimonial-note, ::after)
   and pen typography variants (.pen-blue-biro, .pen-black-ink, .pen-pencil, .pen-red-pen,
   .pen-purple-pen, .pen-marker) moved to global.css — they're used by long-story.php and
   short-story.php which no longer load this file. */