/* ============================================================
   LAUREL & LANTERN INN — welcome.css (v14, 2026-09-27)
   Additions for "the Inn as a place": the hero welcome, per-room
   purpose lines, Innkeeper notes, and the Calm mode badge.
   Loaded after css/styles.css and uses only the tokens it defines.
   When styles.css is next pulled from the server, these rules can be
   pasted into it and the second <link> removed from tools/generate.py.
   ============================================================ */

/* ---------- hero: clip the drifting mist (it is 200% wide, which let the page scroll sideways) ---------- */
.hero-art { overflow: hidden; }

/* ---------- hero welcome ---------- */
.welcome {
  font-family: var(--serif-display);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  font-weight: 500;
  line-height: 1.3;
  margin-top: 22px;
}
.hero-copy .welcome + .lede { margin-top: 12px; }

/* ---------- "for when ..." purpose lines ---------- */
.card-purpose,
.room-purpose {
  font-style: italic;
  color: var(--copper);
}
.card-purpose { font-size: 0.98rem; margin: -6px 0 12px; }
.room-purpose { font-size: 1.15rem; margin-top: 10px; }

/* ---------- Calm mode badge (styles.css predates Calm) ---------- */
.mode-calm { border-color: rgba(204, 153, 102, 0.6); color: var(--copper); }

/* ---------- a note beside a session ---------- */
.v-note {
  display: block;
  font-style: italic;
  color: var(--parchment-dim);
  margin-top: 6px;
}

/* ---------- notes.html ---------- */
.note-list { list-style: none; max-width: 720px; margin: 0 auto; text-align: center; }
.note-list li { padding: 36px 0; border-bottom: 1px solid var(--parchment-faint); }
.note-list li:last-child { border-bottom: 0; }
.note-text {
  font-size: clamp(1.35rem, 1.05rem + 1vw, 1.7rem);
  font-style: italic;
  line-height: 1.35;
}
.note-meta {
  margin-top: 14px;
  font-family: var(--serif-caps);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--parchment-dim);
}
.note-meta a { color: inherit; text-decoration-color: var(--copper); text-underline-offset: 0.3em; }
.note-meta a:hover, .note-meta a:focus-visible { color: var(--amber); }
.notes-empty { color: var(--parchment-dim); font-style: italic; max-width: 560px; margin: 0 auto; text-align: center; }
.notes-empty a { text-decoration-color: var(--copper); text-underline-offset: 0.3em; }
.notes-empty a:hover, .notes-empty a:focus-visible { color: var(--amber); }