/* Field Notes — site styles layered on the App Kit shell + graphite.
   One accent, the icon's moss (#b8cc68 → #47571a): identity and attention only,
   never decoration. Two surfaces share this sheet: the public home (fn- classes)
   and the room shells (rm- classes). The guide pages inside a room keep their own
   baked-in light style and are deliberately untouched by this file — each
   destination's guide is an artifact with its own look, and reskinning a
   phone-QA'd map would risk the thing people actually carry. */

:root {
  --kit-accent:       #a8bd5c;
  --kit-accent-hover: #c5d788;
  --kit-accent-2:     #47571a;
  --kit-accent-soft:  rgba(168, 189, 92, .12);
  --kit-accent-line:  rgba(168, 189, 92, .34);
  --kit-on-accent:    #14180a;
}

/* ---- public home ----
   The rules this page is built to (Travis, 2026-08-07): NO dates anywhere, and no
   past/upcoming/present grouping. Rooms list most recent first and nothing more.
   Travis and Cathy read the order; a visitor learns nothing, which is also what
   settles the house-is-empty concern. Dates live inside the gated room. */
.fn-home {
  max-width: 760px;
  margin: 0 auto;
  padding: 34px 20px 60px;
  color: var(--kit-ink);
}
.fn-masthead { margin-bottom: 34px; }
.fn-brand { display: flex; align-items: center; gap: 14px; }
.fn-mark { border-radius: 10px; display: block; }
.fn-title { font-size: 22px; margin: 0; color: var(--kit-soft); font-weight: 600; }
.fn-hero {
  margin: 20px 0 0; font-size: 34px; line-height: 1.2;
  color: var(--kit-ink); letter-spacing: -.01em;
}
.fn-tag { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--kit-soft); max-width: 46ch; }
@media (max-width: 520px) {
  .fn-hero { font-size: 27px; }
  .fn-tag { font-size: 14.5px; }
}

.fn-doors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 12px;
}
.fn-door { display: block; text-decoration: none; padding: 16px 18px; }
.fn-doorname { display: block; font-size: 20px; font-weight: 700; color: var(--kit-ink); }
.fn-doorline { display: block; margin-top: 3px; font-size: 13.5px; color: var(--kit-soft); }
.fn-doorlock { display: block; margin-top: 8px; font-size: 13px; color: var(--kit-muted); max-width: 21em; }
a.fn-door:hover { border-color: var(--kit-accent-line); }
a.fn-door:hover .fn-doorname { color: var(--kit-accent-hover); }

/* ---- room header ----
   Same shape as D&D Guidance's rooms: the icon and wordmark together are the way
   home, and the destination is the biggest thing on screen, because that is what
   tells you which room you are standing in. */
.rm-head { margin: 0 0 26px; }
.rm-home {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--kit-muted);
}
.rm-home:hover { color: var(--kit-accent-hover); }
.rm-homemark { border-radius: 7px; display: block; }
.rm-homeword { font-size: 12px; text-transform: uppercase; letter-spacing: 1.6px; }
.rm-place { margin: 14px 0 0; font-size: 32px; line-height: 1.15; letter-spacing: -.01em; color: var(--kit-ink); }
.rm-when { margin: 7px 0 0; font-size: 14px; color: var(--kit-soft); }
@media (max-width: 520px) { .rm-place { font-size: 26px; } }