/* GENERATED by bin/build-css from DOCS/DesignSystem — do not hand-edit. */

@font-face {
  font-display: swap;
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/bricolage-grotesque-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-display: swap;
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/hanken-grotesk-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-display: swap;
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/hanken-grotesk-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==== tokens/colors.css ==== */
/* ===========================================================================
   oneservant2go — Color tokens · v2 "Field Journal, Editorial"
   Warm light editorial theme with dark "plate" sections (footer, scrims,
   ticker) that nod to the dark sibling site keypnchr.com.
   =========================================================================== */

:root {
  /* --- Base surfaces (warm off-white, crisper than cream) --- */
  --paper:        #f7f5f0;   /* page background                              */
  --surface:      #fffefb;   /* raised card / input                          */
  --surface-2:    #edeae2;   /* sunken well, tray, pressed                   */

  /* --- Plate (dark editorial sections — footer, ticker, scrims) --- */
  --plate:        #1c1915;   /* near-black warm                              */
  --plate-2:      #2a2620;   /* raised on plate                              */
  --on-plate:     #f7f5f0;   /* text on plate                                */
  --on-plate-2:   #a29a8c;   /* muted text on plate                          */
  --plate-line:   #3a352c;   /* hairlines on plate                           */

  /* --- Ink --- */
  --ink:          #1c1915;   /* primary text — high contrast, editorial      */
  --ink-2:        #5f5a51;   /* secondary / muted                            */
  --ink-3:        #8f897d;   /* faint — timestamps, placeholders             */

  /* --- Lines --- */
  --line:         #dcd7ca;   /* hairline borders                             */
  --line-2:       #e9e5db;   /* faint dividers                               */

  /* --- Accent (terracotta, slightly punchier for the editorial pop) ---   */
  --accent-h:     42;
  --accent:        oklch(0.58 0.115 var(--accent-h));
  --accent-strong: oklch(0.49 0.12 var(--accent-h));
  --accent-tint:   oklch(0.95 0.026 var(--accent-h));
  --accent-line:   oklch(0.89 0.04 var(--accent-h));
  --on-accent:     #fffefb;

  /* --- Alternate accent hues (kept for exploration) --- */
  --accent-clay:   oklch(0.58 0.115 42);
  --accent-ochre:  oklch(0.64 0.105 78);
  --accent-pine:   oklch(0.545 0.075 196);
  --accent-rose:   oklch(0.605 0.09 14);

  /* --- Status --- */
  --live:          oklch(0.62 0.17 27);
  --danger:        oklch(0.55 0.15 27);
  --danger-tint:   oklch(0.955 0.028 27);

  /* --- Semantic aliases --- */
  --bg:            var(--paper);
  --text:          var(--ink);
  --text-muted:    var(--ink-2);
  --text-faint:    var(--ink-3);
  --surface-card:  var(--surface);
  --surface-sunk:  var(--surface-2);
  --border:        var(--line);
  --border-soft:   var(--line-2);
  --link:          var(--accent-strong);
  --link-hover:    var(--accent);

  color-scheme: light;
}

/* ==== tokens/typography.css ==== */
/* ===========================================================================
   oneservant2go — Typography tokens · v2 "Field Journal, Editorial"
   TWO webfonts, three voices:
   · Bricolage Grotesque — expressive display (headlines, wordmark, numerals)
   · Hanken Grotesk — clean humanist body (reading text, UI)
   · system mono — the "field data" voice (kickers, timestamps, captions)
   =========================================================================== */

:root {
  /* --- Families --- */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body:    "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans:    var(--font-body);
  --font-serif:   var(--font-body);   /* legacy alias — v2 is sans throughout */
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  /* --- Type scale (fluid, editorial) --- */
  --fs-hero:     clamp(2.75rem, 1.8rem + 4.5vw, 5.5rem);  /* homepage / trip mastheads */
  --fs-display:  clamp(2rem, 1.4rem + 2.6vw, 3.5rem);     /* story titles, big moments */
  --fs-h1:       clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);  /* page headings             */
  --fs-h2:       1.5rem;     /* section headings, feature titles                       */
  --fs-h3:       1.1875rem;  /* sub-headings                                           */
  --fs-lead:     1.25rem;    /* standfirst / lead paragraph                            */
  --fs-body:     1.0625rem;  /* body copy                                              */
  --fs-caption:  0.8125rem;  /* photo captions (mono)                                  */
  --fs-meta:     0.75rem;    /* kickers, timestamps (mono, uppercase)                  */

  /* --- Weights --- */
  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semi:     600;
  --fw-bold:     700;
  --fw-black:    800;   /* display only                                               */

  /* --- Line heights --- */
  --lh-hero:     0.98;   /* big display                                               */
  --lh-tight:    1.1;    /* headings                                                  */
  --lh-snug:     1.3;    /* titles, leads                                             */
  --lh-body:     1.6;    /* reading                                                   */

  /* --- Tracking --- */
  --ls-display:  -0.03em;
  --ls-tight:    -0.015em;
  --ls-mono:     0.08em;  /* kickers / meta                                           */
}

/* ==== tokens/spacing.css ==== */
/* ===========================================================================
   oneservant2go — Spacing, layout, radius, shadow, motion tokens · v2
   Editorial: generous whitespace, hairline rules over boxes, sharp corners.
   =========================================================================== */

:root {
  /* --- Space scale (4px base, larger top end for editorial air) --- */
  --space-1:  0.25rem;   /*  4 */
  --space-2:  0.5rem;    /*  8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  3rem;      /* 48 */
  --space-8:  4.5rem;    /* 72 */
  --space-9:  7rem;      /* 112 — section breathing room                     */

  /* --- Layout widths --- */
  --measure:      42rem;  /* 672px — reading column                          */
  --measure-wide: 62rem;  /* 992px — photo spreads, feature rows             */
  --page:         80rem;  /* 1280px — outer page grid                        */
  --gutter:       1.25rem;
  --photo-gap:    0.5rem; /* 8px — grid gutter                               */

  /* --- Radii (sharp editorial) --- */
  --radius-lg:   6px;    /* hero covers, story covers                        */
  --radius:      4px;    /* cards, inputs                                    */
  --radius-sm:   3px;    /* thumbnails, small controls                       */
  --radius-photo: 3px;   /* inline photos                                    */
  --radius-pill: 999px;  /* buttons, live badge                              */

  /* --- Borders --- */
  --bw:          1px;

  /* --- Shadows (nearly none — rules and contrast do the work) --- */
  --shadow-sm:   0 1px 2px rgba(28, 25, 21, 0.05);
  --shadow-card: 0 1px 2px rgba(28, 25, 21, 0.04);
  --shadow-pop:  0 14px 40px -12px rgba(28, 25, 21, 0.28);

  /* --- Motion --- */
  --ease:        cubic-bezier(0.2, 0.65, 0.15, 1);
  --dur:         180ms;
  --dur-slow:    600ms;  /* scroll reveals                                   */
}

/* ==== css/base.css ==== */
/* ===========================================================================
   base.css · v2 — reset, document defaults, editorial primitives
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 { font-family: var(--font-display); }

/* --- Links --- */
a {
  color: var(--link);
  text-decoration: none;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
a:hover { color: var(--link-hover); text-decoration: underline; }

/* --- Layout columns --- */
.column {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.column--wide { max-width: var(--measure-wide); }
.column--page { max-width: var(--page); }

/* --- Kicker / meta — the mono "field data" voice --- */
.meta, .kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--text-faint);
}
.kicker { color: var(--accent-strong); }

/* --- Trip label / tag — editorial: mono text, no pill box --- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  line-height: 1;
  color: var(--accent-strong);
}
.tag::before { content: "/"; color: var(--accent); font-weight: var(--fw-bold); }
.tag--muted { color: var(--text-faint); }
.tag--muted::before { color: var(--ink-3); }

/* --- Timestamp --- */
.timestamp {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* --- Buttons --- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: var(--fw-semi);
  line-height: 1;
  padding: 0.8em 1.4em;
  border-radius: var(--radius-pill);
  border: var(--bw) solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn--primary {
  --btn-bg: var(--accent);
  --btn-fg: var(--on-accent);
  --btn-bd: var(--accent);
}
.btn--primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); }
.btn--ghost { --btn-bd: transparent; color: var(--text-muted); }
.btn--ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn--block { display: flex; width: 100%; }
.btn--lg { font-size: 1rem; padding: 1em 1.6em; }

/* --- Long-form reading prose --- */
.prose { color: var(--text); font-size: 1.125rem; line-height: 1.7; }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin-top: var(--space-7);
}
.prose h3 { font-size: var(--fs-h3); font-weight: var(--fw-semi); margin-top: var(--space-6); }
.prose p { margin: 0; text-wrap: pretty; }
.prose a { text-decoration: underline; }
.prose blockquote {
  margin: var(--space-6) 0;
  padding: 0;
  border: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}
.prose blockquote::before {
  content: "";
  display: block;
  width: 3rem; height: 3px;
  background: var(--accent);
  margin-bottom: var(--space-4);
}
.prose ul, .prose ol { margin: 0; padding-left: 1.3em; }
.prose li + li { margin-top: var(--space-2); }
.prose code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--surface-2);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}
.prose hr { border: 0; border-top: var(--bw) solid var(--border); margin: var(--space-7) 0; }

/* --- Photo figure + caption (mono caption, editorial) --- */
.figure { margin: 0; }
.figure__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-photo);
  background: var(--surface-2);
  cursor: zoom-in;
}
.figure figcaption {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.01em;
  color: var(--text-faint);
  line-height: 1.5;
  text-wrap: pretty;
}
.figure__frame::after {
  content: "⤢";
  position: absolute;
  right: 0.6rem; bottom: 0.6rem;
  width: 1.75rem; height: 1.75rem;
  display: grid; place-items: center;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--on-plate);
  background: rgba(28, 25, 21, 0.6);
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.figure__frame:hover::after { opacity: 1; }

/* --- Photo placeholder (stand-in for real field photos) --- */
.photo-ph {
  position: relative;
  aspect-ratio: 3 / 2;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  background:
    repeating-linear-gradient(135deg,
      #eae6dc 0 10px, #efebe2 10px 20px);
}
.photo-ph::before {
  content: attr(data-label);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: rgba(255, 254, 251, 0.75);
  padding: 0.3em 0.65em;
  border-radius: 2px;
}
.photo-ph--tall { aspect-ratio: 3 / 4; }
.photo-ph--square { aspect-ratio: 1 / 1; }
.photo-ph--wide { aspect-ratio: 16 / 9; }

/* --- Rules --- */
.rule { border: 0; border-top: var(--bw) solid var(--border); margin: 0; }
.rule--strong { border-top: 2px solid var(--ink); }

/* --- Scroll reveal (vanilla: IntersectionObserver adds .in) --- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ==== css/chrome.css ==== */
/* ===========================================================================
   chrome.css · v2 — header / nav / live ticker, dark-plate footer
   =========================================================================== */

/* --- Header ------------------------------------------------------------- */
.site-header {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.1) blur(10px);
  backdrop-filter: saturate(1.1) blur(10px);
  border-bottom: var(--bw) solid var(--border);
  position: relative;
  z-index: 10;
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
}

/* Wordmark — display type; "2go" in accent */
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.12em;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}
.brand:hover { color: var(--ink); text-decoration: none; }
.brand__go { color: var(--accent); }

/* Nav — mono uppercase, editorial */
.nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
}
.nav a { color: var(--text-muted); }
.nav a:hover { color: var(--ink); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 3px;
  background: var(--accent);
}

/* Live ticker — dark plate strip, appears only while a trip is live */
.trip-banner {
  display: block;
  padding-block: 0.55rem;
  background: var(--plate);
  color: var(--on-plate);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
}
.trip-banner a {
  color: var(--on-plate);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.trip-banner a:hover { color: var(--accent); text-decoration: none; }
.trip-banner .now-label { color: var(--accent); font-weight: var(--fw-bold); }
.trip-banner .sep { color: var(--plate-line); }

/* Live pulse dot */
.live-dot {
  position: relative;
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--live);
  flex: none;
}
.live-dot::after {
  content: "";
  position: absolute; inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--live);
  opacity: 0.5;
  animation: live-pulse 2.4s var(--ease) infinite;
}
@keyframes live-pulse {
  0%   { transform: scale(0.7); opacity: 0.55; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { opacity: 0; }
}

/* --- Footer — dark plate, big editorial triad -------------------------- */
.site-footer {
  background: var(--plate);
  color: var(--on-plate-2);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  margin-top: var(--space-9);
}
.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-block: var(--space-8) var(--space-6);
}
.signoff {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-display);
  line-height: 1.05;
  color: var(--on-plate);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35em;
  margin: 0;
}
.signoff .dot { color: var(--accent); }
.site-footer .rule { border-top-color: var(--plate-line); }
.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-plate-2);
}
.site-footer__meta a { color: var(--on-plate-2); }
.site-footer__meta a:hover { color: var(--on-plate); }
.sibling-link { display: inline-flex; align-items: center; gap: 0.4em; }

/* ==== css/content.css ==== */
/* ===========================================================================
   content.css · v2 — log entries, story features, photo grids, 360 frame,
   permalink reading experience, feed
   =========================================================================== */

/* --- Log entries — quick field notes, editorial timeline --------------- */
.log-stream {
  position: relative;
  padding-left: 2rem;
}
.log-stream::before {
  content: "";
  position: absolute;
  left: 0.25rem; top: 1rem; bottom: 1rem;
  width: 1px;
  background: var(--line);
}
.log {
  position: relative;
  padding: var(--space-5) 0;
}
.log + .log { border-top: var(--bw) solid var(--border-soft); }
.log::before {
  content: "";
  position: absolute;
  left: -2rem; top: 2rem;
  width: 0.55rem; height: 0.55rem;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--accent);
}
.log--photo::before { background: var(--accent); }
.log__meta {
  display: flex; align-items: center; gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}
.log__text {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.55;
  text-wrap: pretty;
}
.log__media { margin-top: var(--space-4); max-width: 28rem; }
.log__media .photo-grid { border-radius: var(--radius-photo); }
.log__media .pano__stage { aspect-ratio: 5 / 2; }

/* --- Story feature — borderless editorial (cover + type, hairline top) - */
.story {
  display: block;
  color: var(--ink);
  padding-top: var(--space-5);
  border-top: 2px solid var(--ink);
}
.story:hover { text-decoration: none; color: var(--ink); }
.story__cover {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}
.story__cover .photo-ph { aspect-ratio: 2 / 1; transition: transform var(--dur-slow) var(--ease); }
a.story:hover .story__cover .photo-ph { transform: scale(1.025); }
.story__cover .photo-grid { border-radius: 0; }
.story__count {
  position: absolute;
  right: var(--space-3); bottom: var(--space-3);
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.04em;
  color: var(--on-plate);
  background: rgba(28, 25, 21, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  padding: 0.4em 0.75em;
  border-radius: var(--radius-sm);
}
.story__body { max-width: var(--measure); }
.story__kicker {
  display: flex; align-items: center; gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.story__title {
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--ink);
  margin: 0 0 var(--space-3);
  text-wrap: balance;
  transition: color var(--dur) var(--ease);
}
a.story:hover .story__title { color: var(--accent-strong); }
.story__excerpt {
  font-size: 1.0625rem;
  color: var(--text-muted);
  margin: 0 0 var(--space-3);
  text-wrap: pretty;
}
.story__more {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--accent-strong);
}

/* --- Photo grid — contact-sheet treatment by count --------------------- */
.photo-grid {
  display: grid;
  gap: var(--photo-gap);
  border-radius: var(--radius-photo);
  overflow: hidden;
}
.photo-grid > * { min-width: 0; }
.photo-grid .photo-ph { border-radius: 0; }

.photo-grid[data-count="1"] { grid-template-columns: 1fr; }
.photo-grid[data-count="1"] .photo-ph { aspect-ratio: 3 / 2; }

.photo-grid[data-count="2"] { grid-template-columns: 1fr 1fr; }
.photo-grid[data-count="2"] .photo-ph { aspect-ratio: 1 / 1; }

.photo-grid[data-count="3"] {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  aspect-ratio: 3 / 2;
}
.photo-grid[data-count="3"] > * { height: 100%; }
.photo-grid[data-count="3"] .photo-ph { aspect-ratio: auto; height: 100%; }
.photo-grid[data-count="3"] > :first-child { grid-row: 1 / 3; }

.photo-grid[data-count="4"] {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.photo-grid[data-count="4"] .photo-ph { aspect-ratio: 4 / 3; }

.photo-grid[data-count="5"] {
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 1fr;
}
.photo-grid[data-count="5"] > :nth-child(1),
.photo-grid[data-count="5"] > :nth-child(2) { grid-column: span 3; }
.photo-grid[data-count="5"] > :nth-child(1) .photo-ph,
.photo-grid[data-count="5"] > :nth-child(2) .photo-ph { aspect-ratio: 3 / 2; }
.photo-grid[data-count="5"] > :nth-child(n+3) { grid-column: span 2; }
.photo-grid[data-count="5"] > :nth-child(n+3) .photo-ph { aspect-ratio: 1 / 1; }

.photo-grid__more { position: relative; }
.photo-grid__more::after {
  content: "+" attr(data-more);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(28, 25, 21, 0.55);
  color: var(--on-plate);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 1.5rem;
}

/* --- 360° panorama frame ("this one moves") ---------------------------- */
.pano {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: var(--bw) solid var(--accent-line);
  box-shadow: 0 0 0 4px var(--accent-tint);
  background: radial-gradient(120% 90% at 50% 40%, #edeadf 0%, #e2ddd0 100%);
}
.pano__stage {
  position: relative;
  aspect-ratio: 2 / 1;
  display: grid;
  place-items: center;
  background-image:
    repeating-linear-gradient(90deg, rgba(28,25,21,0.045) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(0deg, rgba(28,25,21,0.03) 0 1px, transparent 1px 48px);
}
.pano__badge {
  position: absolute;
  top: var(--space-3); left: var(--space-3);
  display: inline-flex; align-items: center; gap: 0.45em;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--on-plate);
  background: var(--plate);
  padding: 0.45em 0.75em;
  border-radius: var(--radius-sm);
}
.pano__ring {
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  border: 2px solid var(--accent);
  border-top-color: transparent;
  border-bottom-color: transparent;
  animation: pano-spin 6s linear infinite;
}
.pano__hint {
  position: absolute;
  bottom: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--on-plate);
  background: rgba(28, 25, 21, 0.65);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  padding: 0.5em 0.9em;
  border-radius: var(--radius-pill);
}
.pano__hint .glyph { display: inline-block; animation: pano-swipe 3s var(--ease) infinite; }
@keyframes pano-spin { to { transform: rotate(360deg); } }
@keyframes pano-swipe {
  0%, 100% { transform: translateX(-3px); }
  50%      { transform: translateX(3px); }
}

/* --- Permalink — the reading experience --------------------------------- */
.permalink { padding-block: var(--space-8); }
.permalink__head { margin-bottom: var(--space-6); }
.permalink__meta {
  display: flex; align-items: center; gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.permalink__title {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  margin: 0;
  text-wrap: balance;
}
.permalink__standfirst {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--text-muted);
  margin: var(--space-4) 0 0;
  max-width: 36rem;
  text-wrap: pretty;
}
.permalink figure { margin-block: var(--space-7); }
.permalink .figure--wide {
  width: min(var(--measure-wide), 100vw - 2 * var(--gutter));
  margin-inline: calc(50% - min(var(--measure-wide), 100vw - 2 * var(--gutter)) / 2);
}

/* --- Feed stream --------------------------------------------------------- */
.feed {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  padding-block: var(--space-7);
}
.feed__daymark {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink);
}
.feed__daymark::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ==== css/trip.css ==== */
/* ===========================================================================
   trip.css · v2 — trip masthead (hero), archived header, trips index,
   empty states
   =========================================================================== */

/* --- Trip hero — full-bleed editorial masthead -------------------------- */
.trip-hero {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-block: var(--space-5);
  background: var(--plate);
}
.trip-hero .photo-ph { aspect-ratio: 16 / 7; min-height: 340px; }
.trip-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20, 17, 13, 0.82) 0%,
              rgba(20, 17, 13, 0.28) 48%, rgba(20, 17, 13, 0.05) 75%);
}
.trip-hero__content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--space-6);
  color: var(--on-plate);
}
.trip-hero__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: rgba(247, 245, 240, 0.75);
  display: flex; align-items: center; gap: 0.75em;
  margin-bottom: var(--space-3);
}
.trip-hero__content .trip-title {
  font-size: var(--fs-hero);
  font-weight: var(--fw-black);
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-display);
  color: #fdfcf9;
  margin: 0 0 var(--space-3);
}
.trip-hero__facts {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(247, 245, 240, 0.8);
}
.trip-hero__status {
  position: absolute;
  top: var(--space-4); left: var(--space-4);
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  padding: 0.5em 0.9em;
  border-radius: var(--radius-pill);
  color: #fdfcf9;
  background: rgba(20, 17, 13, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(253, 252, 249, 0.22);
}
/* big day counter — the editorial numeral moment */
.trip-hero__day {
  position: absolute;
  top: var(--space-4); right: var(--space-5);
  text-align: right;
  color: #fdfcf9;
  font-family: var(--font-display);
  line-height: 1;
}
.trip-hero__day .n {
  font-size: clamp(2.5rem, 2rem + 2.4vw, 4rem);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-display);
  display: block;
}
.trip-hero__day .of {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: rgba(247, 245, 240, 0.7);
}

/* --- Archived trip header (quiet, past tense) --------------------------- */
.trip-header { padding-block: var(--space-7) var(--space-6); }
.trip-cover {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-5);
}
.trip-cover .photo-ph { aspect-ratio: 21 / 9; filter: saturate(0.9); }
.trip-header__status {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.trip-header__status.is-live { color: var(--accent-strong); }
.trip-header__status.is-archived { color: var(--text-faint); }
.trip-title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}
.trip-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}
.trip-facts .k { color: var(--text-faint); }
.trip-desc {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: var(--measure);
  text-wrap: pretty;
}
.trip-header__count {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--bw) solid var(--border);
}

/* --- Trips index — editorial ledger rows -------------------------------- */
.trips-index {
  display: flex;
  flex-direction: column;
  padding-block: var(--space-6);
}
.trip-item {
  display: grid;
  grid-template-columns: 3.5rem 7rem 1fr auto;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-5) var(--space-2);
  border-top: var(--bw) solid var(--border);
  color: var(--ink);
  transition: background var(--dur) var(--ease);
}
.trip-item:last-child { border-bottom: var(--bw) solid var(--border); }
.trip-item:hover { background: var(--surface); text-decoration: none; color: var(--ink); }
.trip-item__year {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-mono);
  color: var(--text-faint);
  writing-mode: initial;
}
.trip-item__thumb {
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.trip-item__thumb .photo-ph { aspect-ratio: 3 / 2; }
.trip-item__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  margin: 0 0 0.2em;
  display: flex; align-items: center; gap: 0.5em;
}
.trip-item__facts {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.trip-item__count {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--text-faint);
  justify-self: end;
}
.trip-item .live-dot { width: 0.45rem; height: 0.45rem; }
@media (max-width: 640px) {
  .trip-item { grid-template-columns: 5rem 1fr; }
  .trip-item__year, .trip-item__count { display: none; }
}

/* --- Empty states -------------------------------------------------------- */
.empty {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  max-width: 34rem;
  margin-inline: auto;
}
.empty__mark {
  width: 3.25rem; height: 3.25rem;
  margin: 0 auto var(--space-4);
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--accent-line);
  color: var(--accent);
  background: var(--accent-tint);
  font-size: 1.25rem;
}
.empty__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--space-2);
}
.empty__text {
  color: var(--text-muted);
  margin: 0 auto var(--space-5);
  text-wrap: pretty;
}
.empty--dashed {
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-lg);
}

/* ==== css/admin.css ==== */
/* ===========================================================================
   admin.css — mobile-first compose form, upload states, login
   Designed for one-handed use on an iPhone on slow hotel Wi-Fi.
   =========================================================================== */

.admin { max-width: 30rem; margin-inline: auto; }

/* --- Compose form ------------------------------------------------------ */
.compose {
  background: var(--surface-card);
  border: var(--bw) solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.compose__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--bw) solid var(--border-soft);
}
.compose__head h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  margin: 0;
}
.compose__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }

.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field__label {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--text-faint);
}
.input, .textarea, .select {
  width: 100%;
  font-family: var(--font-serif);
  font-size: 1.0625rem;           /* ≥16px: stops iOS zoom-on-focus */
  color: var(--ink);
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.75em 0.85em;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.textarea { min-height: 7rem; resize: vertical; line-height: var(--lh-body); }
.select {
  font-family: var(--font-sans);
  font-size: 1rem;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: right 1.05em center, right 0.75em center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.4em;
}

/* Photo picker + tray */
.photo-add {
  display: flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 3rem;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: var(--fw-medium);
  cursor: pointer;
}
.photo-add:hover { border-color: var(--accent-line); color: var(--accent-strong); }

.photo-tray {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}
.thumb {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: var(--bw) solid var(--border);
  background: var(--surface-2);
}
.thumb .photo-ph { aspect-ratio: 1 / 1; }
.thumb__remove {
  position: absolute; top: 4px; right: 4px;
  width: 1.4rem; height: 1.4rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: none;
  background: rgba(42, 37, 31, 0.6);
  color: var(--on-accent);
  font-size: 0.85rem;
  cursor: pointer;
  z-index: 2;
}
.thumb__caption {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  color: var(--ink);
  border: none;
  border-top: var(--bw) solid var(--border-soft);
  padding: 0.4em 0.5em;
  background: var(--surface);
}
.thumb__caption:focus { outline: none; background: var(--accent-tint); }

/* Per-photo upload progress — the "being shrunk / uploaded" reassurance */
.thumb__progress {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 100%;
  display: grid; place-items: end stretch;
  background: rgba(42, 37, 31, 0.35);
}
.thumb__bar {
  height: 4px;
  background: var(--accent);
  transition: width 240ms var(--ease);
}
.thumb__stage {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  z-index: 1;
}
.thumb__stage .meta {
  color: var(--on-accent);
  background: rgba(42, 37, 31, 0.5);
  padding: 0.25em 0.55em;
  border-radius: var(--radius-pill);
  text-transform: none;
  letter-spacing: 0.02em;
}
/* error / retry */
.thumb.is-error { border-color: var(--danger); }
.thumb.is-error .thumb__stage { background: rgba(122, 40, 30, 0.28); }
.thumb__retry {
  display: inline-flex; align-items: center; gap: 0.35em;
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  font-weight: var(--fw-semi);
  color: var(--on-accent);
  background: var(--danger);
  border: none;
  padding: 0.4em 0.7em;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

/* Global upload reassurance banner */
.upload-note {
  display: flex; align-items: center; gap: 0.6em;
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  color: var(--accent-strong);
  background: var(--accent-tint);
  border: var(--bw) solid var(--accent-line);
  border-radius: var(--radius-sm);
  padding: 0.65em 0.85em;
}
.upload-note.is-error {
  color: var(--danger);
  background: var(--danger-tint);
  border-color: color-mix(in srgb, var(--danger) 30%, var(--surface));
}
.upload-note__spin {
  width: 1rem; height: 1rem; flex: none;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: pano-spin 0.8s linear infinite;
}

/* Sticky post bar — thumb always reaches it one-handed */
.compose__foot {
  position: sticky;
  bottom: 0;
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-top: var(--bw) solid var(--border);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.compose__status {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}
.compose__foot .btn--primary { margin-left: auto; }

/* --- Story editor — desktop/laptop surface for the rich journal tier ---- */
.editor {
  display: grid;
  grid-template-columns: 1fr 17rem;
  gap: var(--space-4);
  align-items: start;
}
@media (max-width: 720px) { .editor { grid-template-columns: 1fr; } }
.editor__main, .editor__side {
  background: var(--surface-card);
  border: var(--bw) solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.editor__main { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.editor__side { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); position: sticky; top: var(--space-4); }

.editor__title {
  width: 100%;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-display);
  color: var(--ink);
  border: none;
  background: transparent;
  padding: 0;
}
.editor__title:focus { outline: none; }
.editor__title::placeholder { color: var(--ink-3); }

.editor__body {
  width: 100%;
  min-height: 16rem;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: var(--lh-body);
  color: var(--ink);
  border: none;
  background: transparent;
  padding: 0;
  resize: vertical;
}
.editor__body:focus { outline: none; }

/* markdown helper bar */
.editor__bar {
  display: flex; align-items: center; gap: var(--space-1);
  padding-bottom: var(--space-3);
  border-bottom: var(--bw) solid var(--border-soft);
}
.editor__bar .sep { width: 1px; height: 1.1rem; background: var(--line); margin-inline: var(--space-2); }
.tool {
  min-width: 2rem; height: 2rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: var(--fw-semi);
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding-inline: 0.45em;
}
.tool:hover { background: var(--surface-2); color: var(--ink); }
.editor__bar .meta { margin-left: auto; text-transform: none; letter-spacing: 0.02em; }

/* media strip — photos + 360s waiting to be placed into the story */
.media-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: var(--space-2);
}
.media-strip .thumb .photo-ph { aspect-ratio: 1 / 1; }
.thumb--pano { border-color: var(--accent-line); box-shadow: 0 0 0 2px var(--accent-tint); }
.thumb__type {
  position: absolute; top: 4px; left: 4px;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: var(--fw-semi);
  letter-spacing: 0.04em;
  color: var(--accent-strong);
  background: var(--surface);
  border: var(--bw) solid var(--accent-line);
  padding: 0.2em 0.45em;
  border-radius: var(--radius-pill);
  z-index: 2;
}
.thumb__insert {
  position: absolute; inset: auto 4px 4px auto;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: var(--fw-semi);
  color: var(--on-accent);
  background: rgba(42, 37, 31, 0.6);
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.3em 0.5em;
  cursor: pointer;
  z-index: 2;
}
.thumb__insert:hover { background: var(--accent-strong); }

/* side-panel niceties */
.editor__side .field__label { margin-bottom: -4px; }
.cover-pick {
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: var(--bw) solid var(--border);
  position: relative;
}
.cover-pick .photo-ph { aspect-ratio: 2 / 1; }
.cover-pick__change {
  position: absolute; right: 6px; bottom: 6px;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: var(--fw-semi);
  color: var(--on-accent);
  background: rgba(42, 37, 31, 0.6);
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.35em 0.6em;
  cursor: pointer;
}
.editor__side .rule { margin-block: var(--space-1); }
.save-state {
  display: flex; align-items: center; gap: 0.5em;
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  color: var(--text-faint);
}
.save-state .ok { color: var(--accent-strong); }

/* --- Login ------------------------------------------------------------- */
.login {
  max-width: 22rem;
  margin-inline: auto;
  text-align: center;
  padding-block: var(--space-8);
}
.login__mark {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-2);
}
.login__mark .brand__go { color: var(--accent); font-style: italic; }
.login__sub {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin-bottom: var(--space-5);
}
.login form { display: flex; flex-direction: column; gap: var(--space-3); }
.login .input { text-align: center; }

/* ==== assets/overrides.css (app layer) ==== */
/* ===========================================================================
   App layer — the ONLY hand-written CSS in this repo.
   The design system (DOCS/DesignSystem) styles photo slots via .photo-ph
   placeholder divs; production renders real <img> elements and mounts
   Pannellum inside .pano__stage. This layer maps those rules across.
   Appended last by bin/build-css.
   =========================================================================== */

/* --- real photos take the placeholder's crop rules --- */
.photo-grid img { width: 100%; height: 100%; object-fit: cover; }
.photo-grid[data-count="1"] img { aspect-ratio: 3 / 2; }
.photo-grid[data-count="2"] img { aspect-ratio: 1 / 1; }
.photo-grid[data-count="3"] img { aspect-ratio: auto; height: 100%; }
.photo-grid[data-count="4"] img { aspect-ratio: 4 / 3; }
.photo-grid[data-count="5"] > :nth-child(-n+2) img { aspect-ratio: 3 / 2; }
.photo-grid[data-count="5"] > :nth-child(n+3) img { aspect-ratio: 1 / 1; }
.photo-grid a { display: block; height: 100%; }

.story__cover img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
a.story:hover .story__cover img { transform: scale(1.025); }

.trip-hero > img {
  width: 100%;
  aspect-ratio: 16 / 7;
  min-height: 340px;
  object-fit: cover;
}
.trip-cover img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; filter: saturate(0.9); }
.trip-item__thumb img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.figure__frame img { width: 100%; }
.thumb > img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }

/* --- pano frame: preview image fills the stage until the viewer loads --- */
.pano__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pano__stage > * { position: relative; }   /* badge/hint/ring above the preview */
.pano__stage .pano__img { position: absolute; }
.pano__stage button.pano__hint { border: 0; cursor: pointer; font: inherit; }
/* Pannellum mounts here; make it fill the stage */
.pano__stage .pnlm-container { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; }

/* feed pano teasers are links */
a.pano { display: block; }
a.pano:hover { text-decoration: none; }

/* Design-system bug fix: `.prose p { margin: 0 }` (0,1,1) out-specifies the
   `.prose > * + *` spacing owl (0,1,0), so paragraph gaps never applied.
   This selector ties at (0,1,1) and wins by coming later in the sheet. */
.prose * + p { margin-top: var(--space-4); }

/* --- responsive guards the design cards didn't need --- */
/* On narrow phones the header bar (wordmark + 3 nav links) exceeds the
   viewport and inflates the whole page width — let it wrap instead. */
@media (max-width: 520px) {
  .site-header__bar { flex-wrap: wrap; row-gap: var(--space-2); }
  .nav { gap: var(--space-4); }
  .log-stream { padding-left: 1.5rem; }
  .log::before { left: -1.5rem; }
}
/* belt-and-suspenders: nothing may widen the page sideways */
html, body { overflow-x: clip; }

/* --- admin management surfaces (nav, list rows) — app-only chrome, styled
       in the system's mono "field data" voice --- */
.admin-nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
}
.admin-nav a { color: var(--text-muted); }
.admin-nav a:hover { color: var(--ink); text-decoration: none; }
.admin-nav a[aria-current="page"] { color: var(--ink); border-bottom: 2px solid var(--accent); padding-bottom: 2px; }
.admin-nav form { margin-left: auto; }
.admin-nav button {
  font: inherit; color: var(--text-faint);
  background: none; border: 0; padding: 0;
  text-transform: inherit; letter-spacing: inherit; cursor: pointer;
}
.admin-nav button:hover { color: var(--ink); }

.admin-list__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.admin-list__filters {
  display: flex; gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
}
.admin-list__filters a { color: var(--text-faint); }
.admin-list__filters a[aria-current="page"] { color: var(--ink); border-bottom: 2px solid var(--accent); }

.admin-list { display: flex; flex-direction: column; }
.admin-row {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-3) var(--space-2);
  border-top: var(--bw) solid var(--border);
}
.admin-row:last-child { border-bottom: var(--bw) solid var(--border); }
.admin-row.is-archived { opacity: 0.55; }
.admin-row__thumb { width: 4.5rem; height: 3rem; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); }
.admin-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.admin-row__title { color: var(--ink); font-weight: var(--fw-semi); }
.admin-row__meta {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 2px;
}
.admin-row__flag { color: var(--accent-strong); }
.admin-row__actions { display: flex; gap: var(--space-2); }
.admin-row__actions .btn { padding: 0.45em 0.8em; font-size: 0.8125rem; }
@media (max-width: 640px) {
  .admin-row { grid-template-columns: 1fr auto; }
  .admin-row__thumb { display: none; }
}

.admin-danger {
  display: flex; gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--bw) solid var(--border);
}
.btn--danger { --btn-bd: var(--danger); --btn-fg: var(--danger); }
.btn--danger:hover { background: var(--danger); border-color: var(--danger); color: var(--on-accent); }

/* --- small functional bits the design leaves to the app --- */
.admin-link {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
}
.compose input[type="file"] { display: none; }
/* the design's display:flex would defeat the hidden attribute */
.upload-note[hidden] { display: none; }
.thumb__bar { width: 0; }