/* ==========================================================================
   MAROSI — Field Notes (notes.html)
   The lab's writing shelf. Dark by default: the page root carries .inverted,
   so every token from main.css is already night-side. Each note is a vessel
   like the lab's wave tank: a rounded dark box whose background is a live
   Canvas 2D pattern (js/note-covers.js), one pattern per note.
   ========================================================================== */

/* the nav rides the document here instead of fixing to the viewport: this is
   a scrolling shelf, not a film, and a floating brand would collide with the
   note copy. The footer brand takes over below, same as the main page's end. */
.nav { position: absolute; }

/* ---------- header ---------- */
.notes-hero {
  padding: calc(var(--nav-h) + var(--nav-top) + clamp(4rem, 10vh, 8rem)) 0 clamp(3.5rem, 7vh, 6rem);
}
.notes-kicker { margin-bottom: clamp(1.2rem, 2.5vh, 2rem); }
.notes-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.25rem, 8.5vw, 8.5rem);
  line-height: 0.98;
  letter-spacing: -0.032em;
}
.notes-deck {
  margin-top: clamp(1.5rem, 3vh, 2.25rem);
  color: var(--grey-700);
  font-size: clamp(1.1875rem, 1.5vw, 1.4375rem);
  line-height: 1.55;
  max-width: 52ch;
}

/* ---------- the shelf ---------- */
.notes-list { padding-bottom: clamp(5rem, 10vh, 8rem); }
/* a real ordered list (the ItemList in the page's JSON-LD mirrors it) */
.notes-ol {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3.2vh, 2.75rem);
}
.notes-ol > li { display: flex; flex-direction: column; }
.notes-ol > li > .note { flex: 1; }

/* one note = one vessel. The canvas is the water; the copy floats above it
   and lets the pointer through so hovering the title still stirs the pattern. */
.note {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: clamp(440px, 64svh, 700px);
  overflow: hidden;
  isolation: isolate;
  border-radius: clamp(20px, 2.4vw, 36px);
  border: 1px solid var(--panel-border);
  background: #0c0e11; /* the pattern ink floats on this, a step above the page */
  box-shadow: var(--shadow-panel);
  transition: border-color 0.35s var(--ease-out);
  /* touch: taps and horizontal drags feed the pattern, vertical pans scroll */
  touch-action: pan-y;
}
.note:hover { border-color: var(--hairline-strong); }
.note-canvas {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
}
/* ghost numeral, upper right — the capabilities cards' voice */
.note-index {
  position: absolute; top: -0.12em; right: 0.06em; z-index: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(6rem, 20vh, 13rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(244, 245, 247, 0.07);
  pointer-events: none;
}
.note-copy {
  position: relative; z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(3rem, 8vh, 6rem);
  padding: clamp(1.75rem, 3.5vw, 3.25rem);
  pointer-events: none;
}
/* ink sits raw on the pattern; a dark halo keeps it readable over bright ink */
.note-meta { color: var(--grey-600); text-shadow: 0 0 14px rgba(8, 9, 11, 0.9); }
.note-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.2vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.028em;
  text-wrap: balance;
  max-width: 18ch;
  text-shadow: 0 0 20px rgba(8, 9, 11, 0.85), 0 2px 10px rgba(8, 9, 11, 0.7);
}
.note-abstract {
  margin-top: 1.1rem;
  color: var(--grey-700);
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  line-height: 1.55;
  max-width: 52ch;
  text-shadow: 0 0 16px rgba(8, 9, 11, 0.9), 0 1px 8px rgba(8, 9, 11, 0.75);
}

/* the whole card is the link; the read line names the action and carries the
   forward arrow swap on card hover */
a.note:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.note-read {
  display: inline-flex; align-items: center; gap: 0.55em;
  margin-top: 1.5rem;
  color: var(--fg);
  text-shadow: 0 0 14px rgba(8, 9, 11, 0.9);
}
.note-read .btn-arr svg { width: 1em; height: 1em; stroke-width: 1.5; }
a.note:hover .btn-arr--fwd svg:first-child,
a.note:focus-visible .btn-arr--fwd svg:first-child { transform: translate(150%, 0); }
a.note:hover .btn-arr--fwd svg:last-child,
a.note:focus-visible .btn-arr--fwd svg:last-child { transform: translate(0, 0); }

@media (max-width: 640px) {
  .note { min-height: clamp(380px, 58svh, 560px); }
  .note-index { font-size: clamp(4.5rem, 14vh, 7rem); }
}