/* There & Back 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: NO dates anywhere, and no
   past/upcoming/present grouping. Rooms list most recent first and nothing more.
   The people who live here 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; }
}

/* Group label for NON-room doors only (added with Photography). The
   rooms grid stays unlabelled: labelling it would be the past/upcoming grouping
   the rules forbid. This heading separates a standing reference from the rooms,
   which is a different thing entirely, and carries no date. */
.fn-group {
  font-size: 12px; text-transform: uppercase; letter-spacing: 1.6px;
  color: var(--kit-muted); margin: 30px 0 10px; font-weight: 600;
}

.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); }

/* ---- photography ----
   The third surface on this sheet. Photography is a standing
   section, not a trip: it sits behind Access like a room does, so
   the public root stays a bare door list. Everything here is device reference
   with no dates, names or destinations in it, deliberately, so the section stays
   safe to move or share and reads the same on every trip.

   Two layout rules learned from the room pages: no wide tables (they overflow at
   390px), so spec pairs stack as label-over-value on narrow screens; and every
   tappable thing clears 44px. */
.ph-page { max-width: 760px; margin: 0 auto; padding: 30px 20px 60px; color: var(--kit-ink); }
.ph-lede { margin: 0 0 24px; font-size: 15px; line-height: 1.65; color: var(--kit-soft); max-width: 58ch; }
.ph-page section + section { margin-top: 32px; }
.ph-h2 { font-size: 12px; text-transform: uppercase; letter-spacing: 1.6px; color: var(--kit-muted); margin: 0 0 12px; }
.ph-page h3 { font-size: 16.5px; font-weight: 650; color: var(--kit-ink); margin: 22px 0 8px; }
.ph-page p { font-size: 14.5px; line-height: 1.65; color: var(--kit-soft); margin: 0 0 12px; }
.ph-page b, .ph-page strong { color: var(--kit-ink); font-weight: 650; }
.ph-page ul, .ph-page ol { margin: 0 0 12px; padding-left: 20px; }
.ph-page li { font-size: 14.5px; line-height: 1.6; color: var(--kit-soft); margin-bottom: 7px; }

/* The one thing to remember on a page: accent-edged, never a warning colour. */
.ph-key { padding: 14px 17px; margin: 0 0 18px; border-color: var(--kit-accent-line); background: var(--kit-accent-soft); }
.ph-key p:last-child { margin-bottom: 0; }

/* Spec pairs. Two columns on a laptop, stacked on a phone: this replaces the
   wide tables the markdown sources use, which overflow a 390px screen. */
.ph-rows { border-top: 1px solid var(--kit-line); margin: 0 0 14px; }
.ph-row { display: grid; grid-template-columns: 13.5em 1fr; gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--kit-line); }
.ph-rk { font-size: 13.5px; font-weight: 650; color: var(--kit-ink); }
.ph-rv { font-size: 13.5px; line-height: 1.55; color: var(--kit-soft); }
@media (max-width: 560px) { .ph-row { grid-template-columns: 1fr; } }

/* Numbered steps that need to survive being read one-handed in the dark. */
.ph-steps { counter-reset: s; list-style: none; padding: 0; margin: 0 0 14px; }
.ph-steps li {
  counter-increment: s; position: relative; padding: 9px 0 9px 38px;
  border-bottom: 1px solid var(--kit-line); font-size: 14.5px; line-height: 1.55;
}
.ph-steps li::before {
  content: counter(s); position: absolute; left: 0; top: 8px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--kit-accent-soft); border: 1px solid var(--kit-accent-line);
  color: var(--kit-ink); font-size: 12.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* ---- scenario accordions ----
   The shape: the device first, then scenarios you expand to get that
   device's exact settings. Native <details> on purpose — it works with no JS,
   survives the offline cache, and is keyboard and screen-reader accessible for
   free. Each summary is a 44px+ target and states what makes the scenario hard,
   so the list is useful while still collapsed. */
.ph-scn { border: 1px solid var(--kit-line); border-radius: 10px; background: var(--kit-surface); margin-bottom: 8px; overflow: hidden; }
.ph-scn[open] { border-color: var(--kit-accent-line); }
.ph-scn > summary {
  list-style: none; cursor: pointer; padding: 13px 16px 13px 42px;
  position: relative; min-height: 44px; display: flex; flex-direction: column; justify-content: center;
}
.ph-scn > summary::-webkit-details-marker { display: none; }
/* The chevron is drawn rather than a glyph so it rotates cleanly and never
   depends on an emoji font being present. */
.ph-scn > summary::before {
  content: ""; position: absolute; left: 17px; top: 50%;
  width: 8px; height: 8px; margin-top: -5px;
  border-right: 2px solid var(--kit-muted); border-bottom: 2px solid var(--kit-muted);
  transform: rotate(-45deg); transition: transform .16s ease;
}
.ph-scn[open] > summary::before { transform: rotate(45deg); margin-top: -6px; border-color: var(--kit-accent); }
.ph-scn > summary:hover { background: var(--kit-surface-2); }
.ph-scnh { font-size: 15.5px; font-weight: 650; color: var(--kit-ink); }
.ph-scnw { font-size: 13px; line-height: 1.45; color: var(--kit-muted); margin-top: 2px; }
.ph-scnb { padding: 2px 16px 16px; border-top: 1px solid var(--kit-line); }
.ph-scnb .ph-rows { margin-top: 12px; }
.ph-scnb p { font-size: 14px; }
.ph-scnb p:first-child { margin-top: 12px; }
.ph-scnb ul { margin-top: 10px; }
/* The single most important instruction in a scenario, called out because these
   get read one-handed in a dark room. */
.ph-most { padding: 11px 14px; margin: 12px 0 0; border-radius: 8px; border: 1px solid var(--kit-accent-line); background: var(--kit-accent-soft); font-size: 14px; line-height: 1.55; color: var(--kit-soft); }
.ph-most b { color: var(--kit-ink); }

.ph-cards { display: grid; gap: 10px; }
.ph-card { display: block; text-decoration: none; padding: 15px 18px; }
.ph-cardh { display: block; font-size: 18px; font-weight: 680; color: var(--kit-ink); }
.ph-cardd { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.55; color: var(--kit-soft); }
a.ph-card:hover { border-color: var(--kit-accent-line); }
a.ph-card:hover .ph-cardh { color: var(--kit-accent-hover); }

/* Cross-links between the three photography pages. 44px minimum touch height. */
.ph-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.ph-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 15px;
  border: 1px solid var(--kit-line); border-radius: 8px; text-decoration: none;
  font-size: 13.5px; color: var(--kit-soft); background: var(--kit-surface);
}
.ph-nav a:hover { border-color: var(--kit-accent-line); color: var(--kit-accent-hover); }
.ph-nav a[aria-current="page"] { border-color: var(--kit-accent-line); background: var(--kit-accent-soft); color: var(--kit-ink); font-weight: 650; }

.ph-foot { margin-top: 34px; padding-top: 14px; border-top: 1px solid var(--kit-line); font-size: 12.5px; line-height: 1.6; color: var(--kit-meta); }

/* ---- 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);
  /* 44px minimum: the mark itself is 26px, so the link needs the padding to be a
     real target. Measured at 26px and corrected. */
  min-height: 44px; padding-right: 6px;
}
.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; } }