/* There & Back site styles layered on the App Kit shell and graphite.
   The approved field-book direction uses bottle green, parchment, and one
   cognac accent. Color marks identity, selection, and attention, never content
   categories. The guide pages inside a room keep their own baked-in light style. */

:root {
  --kit-bg:           #0c1712;
  --kit-nav:          #0c1712;
  --kit-surface:      #14251c;
  --kit-surface-2:    #1d3327;
  --kit-surface-3:    #274534;
  --kit-field:        #102017;
  --kit-ink:          #f4efe3;
  --kit-soft:         #d1cec4;
  --kit-muted:        #b2b5aa;
  --kit-meta:         #b2b5aa;
  --kit-line:         #4b5a4c;
  --kit-line-strong:  #627261;
  --kit-accent:       #d58b50;
  --kit-accent-hover: #e1a372;
  --kit-accent-2:     #8f4c2f;
  --kit-accent-soft:  rgba(213, 139, 80, .12);
  --kit-accent-line:  rgba(213, 139, 80, .52);
  --kit-on-accent:    #1c1008;
  --kit-warn:         #e6bc73;
  --kit-ok:           #78b58b;
  --kit-danger:       #e2786f;
  --kit-radius:       4px;
  --kit-radius-sm:    2px;
  --kit-radius-lg:    4px;
  --kit-pill:         2px;
  --kit-shadow:       none;
  --kit-shadow-soft:  none;
  --fn-serif:         Georgia, "Times New Roman", serif;
}

html, body { background: var(--kit-bg); }
:focus-visible { outline-color: #e6bc73; }

/* ---- 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: 28px 22px 64px;
  color: var(--kit-ink);
}
.fn-masthead { margin-bottom: 26px; padding-bottom: 26px; border-bottom: 1px solid var(--kit-line); }
.fn-brand { display: flex; align-items: center; gap: 13px; }
.fn-mark { border-radius: 12px; display: block; }
.fn-eyebrow {
  margin: 0 0 4px;
  color: var(--kit-accent);
  font-family: var(--kit-font-mono);
  font-size: 10px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 1.15px;
  text-transform: uppercase;
}
.fn-title {
  margin: 0;
  color: var(--kit-ink);
  font-family: var(--fn-serif);
  font-size: 29px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.02em;
}
.fn-hero {
  max-width: 13em;
  margin: 30px 0 0;
  color: var(--kit-ink);
  font-family: var(--fn-serif);
  font-size: 38px;
  line-height: 1.13;
  font-weight: 600;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.fn-tag {
  max-width: 48ch;
  margin: 16px 0 0;
  color: var(--kit-muted);
  font-size: 14px;
  line-height: 1.6;
  text-wrap: pretty;
}
@media (max-width: 520px) {
  .fn-home { padding-top: 24px; }
  .fn-hero { font-size: 30px; }
  .fn-tag { font-size: 13.5px; }
}

/* Neutral group labels explain access and function without classifying rooms by
   time. The public bytes still carry no dates or trip state. */
.fn-sectionhead {
  margin: 22px 0 10px;
  padding-top: 13px;
  border-top: 1px solid var(--kit-line);
}
.fn-masthead + section .fn-sectionhead { border-top: 0; padding-top: 0; }
.fn-sectiontitle {
  margin: 0;
  color: var(--kit-ink);
  font-family: var(--fn-serif);
  font-size: 24px;
  line-height: 1.1;
  font-weight: 600;
}

.fn-doors {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--kit-line);
}
.fn-door {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 70px;
  padding: 11px 4px;
  color: inherit;
  border-bottom: 1px solid var(--kit-line);
  text-decoration: none;
}
.fn-door--destination { min-height: 92px; }
.fn-dooricon { flex: 0 0 auto; display: block; border-radius: 11px; }
.fn-doorbody { flex: 1; min-width: 0; }
.fn-doorname {
  display: block;
  color: var(--kit-ink);
  font-family: var(--fn-serif);
  font-size: 19px;
  line-height: 1.2;
  font-weight: 600;
}
.fn-doorline { display: block; margin-top: 4px; color: var(--kit-muted); font-size: 12px; line-height: 1.4; }
.fn-doorlock { display: block; margin-top: 7px; color: var(--kit-accent-hover); font-size: 11px; line-height: 1.35; }
.fn-doorarrow { flex: 0 0 auto; color: var(--kit-accent); font-size: 20px; line-height: 1; }
a.fn-door:hover { background: rgba(39, 69, 52, .3); }
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 ----
   A quiet field-book header for secondary pages. The exact destination mark and
   name remain the way back to the room; the page title carries the visual weight. */
.rm-head { margin: 0 0 28px; padding-bottom: 20px; border-bottom: 1px solid var(--kit-line); }
.rm-home {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--kit-accent-hover);
  /* 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-family: var(--kit-font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.15px; }
.rm-place { margin: 12px 0 0; color: var(--kit-ink); font-family: var(--fn-serif); font-size: 32px; line-height: 1.1; font-weight: 600; letter-spacing: -.02em; }
.rm-when { margin: 7px 0 0; font-size: 13px; line-height: 1.45; color: var(--kit-muted); }
@media (max-width: 520px) { .rm-place { font-size: 26px; } }