/* ============================================================
   Tony's Field Blogs — a faithful port of rauno.me/notes.
   Layout math, blob/number geometry, and the handwriting
   draw-on recipe are from his shipped bundles, reused with
   Rauno Freiberg's written permission.
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* html carries the same ground as body (tokens.css paints html gray1;
   left unpaired it shows as a seam wherever body ends — short pages,
   the scrollbar gutter) */
html, body { background: var(--colors-bg); }
body {
  font-family: var(--fonts-body);
  min-height: 100svh;
  color: var(--colors-gray12);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--yellow); color: black; }

/* ---- fixed nav: the shared breadcrumb chrome (chrome.css), shifted to
   this page's own left column so it aligns with the notes label ---- */
.crumbs { left: 45px; }
@media (max-width: 640px) {
  .crumbs { left: 16px; } /* restate chrome.css's mobile rule — this file loads after it */
}

/* ============================================================
   Index (/notes) — blog index. Each stage is sized by its own
   "#N Title" text block (notes.js), so every note shares one
   glyph scale while the blob hugs the content. Blob fill, hover
   reveal, and jitter stay verbatim from his notes_*.css.
   ============================================================ */
.notes-root {
  position: relative;
  overflow-x: hidden;
  padding: 18svh 0 8svh;
}

.notes-label {
  position: fixed;
  top: 76px;
  left: 45px;
  z-index: 1;
  margin: 0;
  font-size: 17px;
  font-weight: 400; /* it is the page's h1 now; keep the quiet label look */
  /* gray11, not gray9: 17px text on gray9 measured 3.23:1 light */
  color: var(--colors-gray11);
}

.notes-item {
  display: grid;
  place-items: center;
  min-height: 46svh;
  color: inherit;
  text-decoration: none;
  outline: none;
}
.notes-item:focus-visible .notes-blob { opacity: 1; }
/* the blob alone is a low-contrast wash (1.2:1 on the ground): keyboard
   focus also gets a real ring, mouse hover keeps the quiet blob */
.notes-item:focus-visible {
  outline: 2px solid var(--colors-focus);
  outline-offset: 6px;
  border-radius: 8px;
}

/* stage width + aspect-ratio are set inline per note */
.notes-stage {
  position: relative;
  display: grid;
  place-items: center;
}

.notes-blob {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.1s ease;
}
.notes-blob path { fill: #eaeaea; }
html.dark .notes-blob path { fill: var(--colors-gray3); }
@media (pointer: fine) {
  .notes-item:hover .notes-blob { opacity: 1; }
}

/* the "#N Title" lockup (width set inline as a % of the stage) */
.notes-number {
  position: relative;
  height: auto;
  color: var(--red-accent);
}

@media (max-width: 960px) {
  .notes-label {
    position: relative;
    top: unset;
    left: unset;
    width: 100%;
    text-align: center;
    margin: 32px auto 0;
    font-size: 15px;
  }
}

/* ============================================================
   Note pages (/notes/1, /notes/2) — column verbatim from live probe:
   max-width 640, padding 200px 16px, title margin-bottom 200px
   ============================================================ */
.note-main {
  --section-gap: 200px;
  max-width: 640px;
  margin: 0 auto;
  padding: 200px 16px;
}
.note-title { margin: 0 0 200px; font-size: inherit; font-weight: inherit; }
/* when a blog title follows the heading, it takes over the big gap */
.note-title:has(+ .note-subtitle) { margin-bottom: 30px; }
.note-subtitle { margin-bottom: 200px; }
.note-subtitle.hw-root svg { width: auto; max-width: 100%; height: auto; }

/* the coming-soon line, written small in gray, exactly where the body
   text will start (the subtitle's 200px gap is the body position) */
.note-soon { margin-top: 0; }
.note-soon.hw-root { --hw-stroke: var(--colors-gray9); }
.note-soon.hw-root svg { width: auto; max-width: 100%; height: auto; }

/* reading progress for published posts (blog template): DD orange,
   hairline, growing left -> right with scroll — never mounted on
   coming-soon pages */
.blog-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--orange);
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 45;
  pointer-events: none;
}

.note-main h3 {
  font-size: 18px;
  line-height: 1.7;
  font-weight: 500;
  color: var(--colors-gray11);
  margin: 0 0 8px;
}
.note-main h3:not(:first-of-type) {
  margin-top: var(--section-gap);
  color: var(--red-accent);
}
.note-main p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--colors-gray12);
  margin: 16px 0;
}

@media (max-width: 800px) {
  .note-main { --section-gap: 150px; }
  .note-main h3,
  .note-main p { font-size: 16px; }
}

/* ============================================================
   Handwriting draw-on (title entrance) — recipe verbatim from
   his handwriting-svg_* css
   ============================================================ */
.hw-root {
  --hw-stroke: var(--red-accent, #ff484c);
  display: inline-block;
  line-height: 0;
  width: 100%;
}
.hw-root svg {
  width: 100%;
  height: auto;
}

.hw-path {
  fill: none;
  stroke: var(--hw-stroke);
  stroke-linecap: round;
  stroke-dasharray: 1 1.02;
  stroke-dashoffset: 1.01;
  pointer-events: none;
}
.hw-path.draw {
  animation: hw-draw var(--hw-duration, 1s) ease forwards;
  animation-delay: calc(var(--stroke-order) * 0.045s + var(--hw-base-delay, 200ms));
}
@keyframes hw-draw {
  0% { stroke-dashoffset: 1.01; }
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .notes-blob,
  .notes-number { transition: none; }
  .hw-path { stroke-dashoffset: 0; }
  .hw-path.draw { animation: none; }
}