/* =========================================================================
   LEAVE A NOTE — a small moderated guestbook on the home page.

   Kept out of site.css because it is a self-contained feature with its own
   palette, its own two dialogs and a fair amount of surface area. Everything
   here is scoped to .notes, .note, .ndialog or .nform, so it cannot reach any
   other section. Colour, type and button language all come from site.css
   tokens; the six pastel note colours are the one deliberate exception.
   ========================================================================= */

/* The palette sits on :root, not on .notes: the two dialogs are siblings of
   <main> rather than descendants of the section, so a note rendered inside one
   has to be able to inherit these too. */
:root {
  --note-yellow: #fff3bf;
  --note-blue: #dfeeff;
  --note-pink: #fde0e3;
  --note-mint: #def2e6;
  --note-lavender: #e9e4fb;
  --note-cream: #fff3df;
  --note-ink: #2c2c2c;
  --note-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

.notes {
  position: relative;
  isolation: isolate;
  margin-top: 5.5rem;
  padding-block: 3.5rem 5rem;
  background: #fcfcfb;
  border-top: 1px solid #f0efec;
  overflow: hidden;
}

.notes__inner {
  position: relative;
  z-index: 1;
  max-width: 68rem;
}

/* --- Decorative scene ---------------------------------------------------
   Allowed to run the full width of the viewport while the notes themselves
   stay in the container. Pure inline SVG: no raster, nothing to download. */

.notes__scene {
  position: absolute;
  inset: auto 0 0;
  z-index: 0;
  height: 26rem;
  pointer-events: none;
}

.notes__range {
  display: block;
  width: 100%;
  height: 100%;
}

.notes__range-far path {
  fill: #eaeef2;
}

.notes__range-near path {
  fill: #dee5ec;
}

.notes__trees path,
.notes__trail {
  fill: none;
  stroke: #cfd6dd;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notes__trail {
  stroke-dasharray: 5 7;
  stroke-width: 1;
}

/* The scene fades out under the notes so nothing ever competes with text. */
.notes__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #fcfcfb 0%, rgba(252, 252, 251, 0.86) 30%, rgba(252, 252, 251, 0.42) 62%, rgba(252, 252, 251, 0) 100%);
}

.notes__whisper {
  position: absolute;
  right: clamp(1.25rem, 5vw, 4.5rem);
  bottom: 2.25rem;
  z-index: 1;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 0.875rem;
  line-height: 1.6;
  text-align: right;
  color: #98a1ab;
  opacity: 0.75;
}

/* --- Heading ------------------------------------------------------------ */

.notes__head {
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
}

.notes__title {
  margin: 0.75rem 0 0;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.024em;
  line-height: 1.15;
}

.notes__lede {
  margin: 0.6875rem 0 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted);
}

/* --- Note ---------------------------------------------------------------
   One block for both sizes; --note-bg and the size modifiers do the rest. */

.note {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  background: var(--note-bg, var(--note-yellow));
  border-radius: 2px;
  box-shadow: var(--note-shadow);
  transform: rotate(var(--note-tilt, 0deg));
}

/* Simulated tape: a semi-transparent sliver straddling the top edge. */
.note::before {
  content: "";
  position: absolute;
  top: -0.5rem;
  left: 50%;
  width: 3.25rem;
  height: 1.0625rem;
  transform: translateX(-50%) rotate(-1.5deg);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(16, 16, 16, 0.045);
  border-radius: 1px;
}

.note__body {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  line-height: 1.45;
  color: var(--note-ink);
  overflow-wrap: anywhere;
}

.note__author {
  margin: 0.875rem 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.8125rem;
  color: #5a5a5a;
  overflow-wrap: anywhere;
}

/* --- Featured notes ----------------------------------------------------- */

.notes__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2.75rem;
}

.notes__featured {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 1.75rem;
  /* Reserved so the skeletons and the real notes occupy the same box. */
  min-height: 15rem;
  margin: 0;
  padding: 0.75rem 0 0;
  list-style: none;
}

.note--featured {
  width: 15rem;
  min-height: 14rem;
  padding: 1.5rem 1.375rem 1.25rem;
}

.note--featured .note__body {
  font-size: 1.125rem;
}

.notes__featured.is-swapping .note {
  opacity: 0;
  transform: translateX(var(--swap-from, 0)) rotate(var(--note-tilt, 0deg));
}

.notes__featured .note {
  transition: opacity 0.26s var(--ease), transform 0.26s var(--ease);
}

/* Once the list is genuinely empty — no notes, or a failed load — the
   reserved height is dead space, so it collapses. */
.notes__featured:empty {
  min-height: 0;
  padding: 0;
}

/* Skeletons carry no text and no tape — just the reserved box. */
.note.is-skeleton {
  background: #f1f1ee;
  box-shadow: none;
}

.note.is-skeleton::before {
  display: none;
}

/* --- Arrows ------------------------------------------------------------- */

.notes__arrow {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}

.notes__arrow svg {
  width: 0.8125rem;
  height: 0.8125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notes__arrow:hover {
  border-color: var(--text);
}

.notes__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

/* --- Pager -------------------------------------------------------------- */

.notes__pager {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.notes__dots {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 0.5rem;
}

.notes__dot {
  width: 0.4375rem;
  height: 0.4375rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(16, 16, 16, 0.2);
  transition: background-color var(--speed) var(--ease), transform var(--speed) var(--ease);
}

.notes__dot.is-current {
  background: var(--accent);
}

/* Edge dots shrink, so a long run reads as "there is more this way". */
.notes__dot.is-edge {
  transform: scale(0.64);
}

.notes__count,
.notes__empty,
.notes__status {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--muted);
  text-align: center;
}

.notes__empty {
  margin-top: 1.75rem;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 1rem;
}

/* --- Actions ------------------------------------------------------------ */

.notes__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.btn__icon {
  width: 0.875rem;
  height: 0.875rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Preview wall ------------------------------------------------------- */

.notes__wall-label {
  max-width: 24rem;
  margin: 3.25rem auto 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--light-muted);
  text-align: center;
}

.notes__wall {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 1rem;
  margin: 1.5rem 0 0;
  padding: 0.5rem 0 0;
  list-style: none;
}

.note--mini {
  width: 7.5rem;
  min-height: 5.5rem;
  padding: 0.875rem 0.75rem 0.6875rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.055);
}

.note--mini::before {
  top: -0.3125rem;
  width: 1.875rem;
  height: 0.625rem;
}

.note--mini .note__body {
  font-size: 0.8125rem;
  /* Four lines, then an ellipsis: the full text lives in the browse dialog. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.note--mini .note__author {
  margin-top: 0.5rem;
  font-size: 0.6875rem;
}

/* The closing tile is a button, not a note: it opens the browse dialog. */
.notes__more-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  width: 7.5rem;
  min-height: 5.5rem;
  padding: 0.875rem 0.75rem;
  border: 1px dashed var(--border-strong);
  border-radius: 2px;
  background: transparent;
  color: var(--muted);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 0.8125rem;
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}

.notes__more-tile span {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 1rem;
  line-height: 1;
}

.notes__more-tile:hover {
  border-color: var(--text);
  color: var(--text);
}

/* =========================================================================
   Dialogs
   ========================================================================= */

.ndialog {
  width: min(100%, 34rem);
  max-width: 100%;
  max-height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.ndialog--browse {
  width: min(100%, 68rem);
}

.ndialog::backdrop {
  background: rgba(16, 16, 16, 0.42);
}

.ndialog__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  padding: 1.875rem;
  border-radius: 6px;
  background: var(--bg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
}

.ndialog__panel--wide {
  padding: 1.5rem 1.75rem 1.75rem;
}

.ndialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex: 0 0 auto;
}

.ndialog__title {
  margin: 0;
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.018em;
}

.ndialog__close {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
  transition: border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}

.ndialog--form .ndialog__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.ndialog__close svg {
  width: 0.75rem;
  height: 0.75rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
}

.ndialog__close:hover {
  border-color: var(--text);
  color: var(--text);
}

.ndialog__body {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 1.25rem;
  overflow-y: auto;
}

/* --- Form --------------------------------------------------------------- */

.nform__field {
  margin-top: 1.375rem;
}

.nform__label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
}

.nform__help {
  margin: 0.1875rem 0 0.5rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.nform__input {
  width: 100%;
  padding: 0.5625rem 0.6875rem;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.875rem;
}

.nform__input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.nform__textarea {
  min-height: 6.5rem;
  resize: vertical;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  line-height: 1.5;
}

.nform__counter {
  margin: 0.375rem 0 0;
  font-size: 0.75rem;
  color: var(--light-muted);
  text-align: right;
}

.nform__counter.is-over {
  color: var(--accent);
}

.nform__error {
  margin: 1rem 0 0;
  padding: 0.5625rem 0.6875rem;
  border: 1px solid rgba(181, 18, 23, 0.16);
  border-radius: 4px;
  background: var(--soft-accent);
  font-size: 0.8125rem;
  color: var(--accent);
}

.nform__actions {
  margin-top: 1.375rem;
}

.nform__privacy {
  margin: 1rem 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--light-muted);
}

.nform__turnstile {
  margin-top: 1.25rem;
}

.nform__done-text {
  margin: 0.75rem 0 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted);
}

/* --- Browse-all grid ----------------------------------------------------
   CSS columns give the masonry look without a library and without JS
   measuring anything. */

.notes__all {
  margin: 0;
  padding: 0.5rem 0 0;
  list-style: none;
  column-count: 4;
  column-gap: 1.125rem;
}

.notes__all .note {
  width: 100%;
  padding: 1.125rem 1rem 0.9375rem;
  margin-bottom: 1.125rem;
  /* Keeps a note from being split across two columns. */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

.notes__all .note__body {
  font-size: 0.9375rem;
}

.notes__all-empty,
.notes__all-count {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--muted);
  text-align: center;
}

.notes__all-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1rem;
}

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 1024px) {
  .notes__all {
    column-count: 3;
  }
}

/* Tablet: two featured notes per page. */
@media (max-width: 900px) {
  .notes__featured {
    gap: 1.25rem;
  }

  .note--featured {
    width: 14rem;
  }
}

@media (max-width: 700px) {
  .notes {
    margin-top: 4rem;
    padding-block: 2.75rem 3.5rem;
  }

  .notes__scene {
    height: 17rem;
  }

  .notes__whisper {
    font-size: 0.8125rem;
  }

  .notes__stage {
    gap: 0.5rem;
  }

  .note--featured {
    width: min(17rem, 100%);
  }

  .notes__all {
    column-count: 2;
  }

  .notes__wall {
    gap: 0.75rem;
  }

  .ndialog__panel {
    padding: 1.5rem 1.25rem;
  }

  .ndialog__panel--wide {
    padding: 1.25rem 1.125rem 1.5rem;
  }
}

@media (max-width: 480px) {
  .notes__all {
    column-count: 1;
  }

  .note--mini,
  .notes__more-tile {
    width: 6.75rem;
    min-height: 5rem;
  }

  .notes__whisper {
    bottom: 1.25rem;
    font-size: 0.75rem;
  }
}

/* Reduced motion: content is replaced outright, never slid or faded. */
@media (prefers-reduced-motion: reduce) {
  .notes__featured .note,
  .notes__arrow,
  .notes__dot,
  .notes__more-tile,
  .ndialog__close {
    transition: none;
  }

  .notes__featured.is-swapping .note {
    opacity: 1;
    transform: rotate(var(--note-tilt, 0deg));
  }
}