/* LIGHTYEAR 5 Log (v51, 2026-10-10; was "Captain's Log"): the house blog as an object in the Back Room.
   v51-4: the open sheet and the post reader wear a dark navy ship-terminal
   theme (.log-terminal / .pr-terminal, at the end of this file), so the log
   reads clearly differently from the Flyer Wall's cards.
   The island's navy glass screen (assets/back-room-v55.webp) gets live CSS light:
   a slow soft screen pulse (.log-pulse) and a tiny stacked gold Tilt Neon LOG
   (.log-word) with a soft flicker. Tap opens #log-sheet, a full-height sheet of
   the approved room='blog' posts as collapsed cards; View opens the post in
   js/post-reader.js's reader on top. The Back Room loads only css/photo.css,
   so the sheet, card and reader styles from css/style.css are repeated here.
   No glow boxes. Reduced motion holds still; .scene.is-paused stops it. */

/* ---------- the screen on the island ---------- */
.scene[data-name="back-room"] .log-screen {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: .12cqw;
  /* v59: fitted to the photo's tilted glass (slight trapezoid), inside its gold frame,
     with feathered edges so no rectangle edge reads against the photo */
  clip-path: polygon(7% 4%, 98% 2%, 96% 96%, 2% 95%);
  -webkit-mask-image: radial-gradient(ellipse 62% 60% at 50% 50%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 62% 60% at 50% 50%, #000 55%, transparent 100%);
}
.scene[data-name="back-room"] .log-pulse {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 55% at 50% 48%, rgba(110, 140, 240, .16), rgba(60, 70, 190, .06) 60%, transparent 100%);
  mix-blend-mode: screen;
  opacity: .55;
  animation: log-pulse 7s ease-in-out infinite alternate;
}
.scene[data-name="back-room"] .log-word {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .32cqw;
  font: 400 1.25cqw/1 "Tilt Neon", system-ui, sans-serif;
  color: rgba(214, 178, 104, .62);
  text-shadow: 0 0 .12cqw rgba(255, 200, 110, .35), 0 0 .4cqw rgba(255, 160, 60, .18);
  animation: log-flicker 19s ease-in-out infinite;
  animation-delay: -6s;
}
.scene[data-name="back-room"] .log-word span { display: block; }
@keyframes log-pulse { from { opacity: .4; } to { opacity: .8; } }
@keyframes log-flicker { 0%, 76%, 100% { opacity: 1; } 86% { opacity: .72; } }
.scene.is-paused .log-pulse,
.scene.is-paused .log-word { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .scene[data-name="back-room"] .log-pulse,
  .scene[data-name="back-room"] .log-word { animation: none !important; }
  .scene[data-name="back-room"] .log-pulse { opacity: .6; }
}

/* ---------- the sheets (log list + post reader) ---------- */
.log-sheet, .log-shade, .pr-sheet, .pr-shade {
  --bg: #07040b;
  --panel: rgba(16, 10, 22, 0.82);
  --line: rgba(255, 255, 255, 0.09);
  --text: #ece6f5;
  --text-dim: #a59bb5;
  --gold: #ffb938;
  --purple: #b35cff;
  --radius: 12px;
  --col: 430px;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: Georgia, "Times New Roman", serif;
}
.log-shade, .pr-shade {
  position: fixed; inset: 0; z-index: 45;
  background: rgba(2, 1, 4, 0.62);
  opacity: 0; transition: opacity 0.28s ease;
}
.pr-shade { z-index: 47; }
.log-shade.on, .pr-shade.on { opacity: 1; }
.log-sheet, .pr-sheet {
  --c: var(--gold);
  position: fixed; z-index: 46; top: 0; bottom: 0;
  left: 50%; width: min(100vw, var(--col));
  display: flex; flex-direction: column;
  overflow: hidden;
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  background:
    radial-gradient(ellipse 75% 30% at 50% -6%, rgba(255, 185, 56, 0.10), transparent 70%),
    linear-gradient(rgba(179, 92, 255, 0.07), transparent 18%),
    repeating-linear-gradient(90deg, transparent 0 96px, rgba(0, 0, 0, 0.6) 96px 97px, rgba(255, 255, 255, 0.04) 97px 98px),
    linear-gradient(100deg, rgba(255, 255, 255, 0.025), transparent 35%, rgba(255, 255, 255, 0.015) 65%, transparent),
    linear-gradient(#0c0a10, #09070d 65%, var(--bg));
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  transform: translate(-50%, 100%);
  transition: transform 0.3s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.pr-sheet { z-index: 48; }
.log-sheet[hidden], .log-shade[hidden], .pr-sheet[hidden], .pr-shade[hidden] { display: none; }
.log-sheet.on, .pr-sheet.on { transform: translate(-50%, 0); }
.log-sheet::before, .pr-sheet::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: color-mix(in srgb, var(--c) 70%, #fff); opacity: 0.8; pointer-events: none;
}
.log-bar, .pr-bar {
  flex: none; display: flex; align-items: center; justify-content: flex-end; gap: .8rem;
  padding: calc(var(--safe-top, env(safe-area-inset-top, 0px)) + 0.7rem) 1rem 0.5rem 1.35rem;
}
.log-bar h2 {
  flex: 1 1 auto; min-width: 0;
  font: 400 1.75rem/1.1 "Tilt Neon", system-ui, sans-serif;
  letter-spacing: .03em;
  color: #ffc94a;
  text-shadow: 0 0 1px #ffe9a8, 0 0 4px #ffd56a, 0 0 10px #ffae3d, 0 0 18px rgba(255, 120, 20, .6);
}
.log-scroll, .pr-body {
  flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 0.4rem 1.35rem calc(var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + 2.5rem);
}
.log-line { color: var(--text-dim); font-style: italic; margin: 0 0 1.3rem; }
.log-empty, .log-scroll .club-status { color: var(--text-dim); font-style: italic; font-size: .9rem; }
.log-empty[hidden], .log-scroll .club-status[hidden] { display: none; }
.log-fallback { margin-top: 1.6rem; font-family: var(--font-ui); font-size: .85rem; }
.log-fallback a { color: var(--text-dim); }

.log-close, .pr-view, .pr-close {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 1.25rem; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(12, 10, 18, 0.62);
  color: #f3ecfb;
  font-family: var(--font-ui); font-size: 0.9rem; letter-spacing: 0.06em;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  flex: none;
}
.log-close:active, .pr-view:active, .pr-close:active { transform: scale(0.97); }
.log-close:focus-visible, .pr-view:focus-visible, .pr-close:focus-visible { outline: 2px solid color-mix(in srgb, var(--c, var(--gold)) 75%, #fff); outline-offset: 3px; }

/* collapsed cards inside the log (same as .entry in css/style.css) */
.log-sheet .entries { display: grid; gap: 1.2rem; }
.log-sheet .entry {
  --c: var(--gold);
  position: relative;
  padding: 1.4rem 1.25rem 1.15rem;
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 40%), var(--panel);
  border: 1px solid var(--line);
  border-top-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.log-sheet .entry[hidden] { display: none; }
.log-sheet .entry::before {
  content: ""; position: absolute; left: 14px; right: 14px; top: -1px; height: 2px; border-radius: 2px;
  background: var(--c); box-shadow: 0 0 10px var(--c), 0 0 22px var(--c); opacity: 0.8;
}
.log-sheet .entry h2 { font-size: 1.45rem; line-height: 1.25; margin: 0.5rem 0 0.2rem; color: #fff; font-weight: 700; overflow-wrap: anywhere; }
.log-sheet .entry .subtitle { margin: 0.05rem 0 0.3rem; font-size: 1.02rem; line-height: 1.35; color: #cfc3dd; opacity: 0.9; overflow-wrap: anywhere; }
.log-sheet .entry .meta { color: var(--text-dim); font-size: 0.85rem; margin-bottom: 0.85rem; font-style: italic; }

/* the post reader (js/post-reader.js) */
.pr-body h2 { font-size: 1.85rem; line-height: 1.2; margin: 0.3rem 0 0.3rem; color: #fff; overflow-wrap: anywhere; }
.pr-body .meta { color: var(--text-dim); font-size: 0.88rem; font-style: italic; margin-bottom: 1.2rem; }
.pr-body .subtitle { margin: 0 0 0.45rem; font-size: 1.1rem; line-height: 1.4; color: #cfc3dd; opacity: 0.92; }
.pr-body p.subtitle + p { margin-top: 0; }
.pr-body p { overflow-wrap: anywhere; }
.pr-body p + p { margin-top: 0.85rem; }
.pr-body img { max-width: 100%; height: auto; margin: 0.8rem 0; border-radius: 8px; }

html.pr-open, html.pr-open body, html.log-open, html.log-open body { overflow: hidden; }
html.pr-open body { position: fixed; left: 0; right: 0; width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .log-sheet, .log-shade, .pr-sheet, .pr-shade { transition: none !important; }
}

/* ================================================================
   v51-4 LIGHTYEAR 5 Log terminal theme (dimmer + slightly smaller type)
   .log-sheet.log-terminal = the list; .pr-sheet.pr-terminal = the open entry
   (post-reader.js adds pr-terminal from data-pr-theme="terminal").
   Darker navy glass, IBM Plex Mono, dimmed cyan text (~18%), gold headers,
   quieter scanlines, one slow scan band, a slow blinking cursor under the list.
   Body text stays WCAG AA on the navy. Entry body not below 14px.
   No glow boxes on tap targets. Reduced motion: nothing moves.
   ================================================================ */
.log-terminal, .pr-terminal {
  --t-bg: #030814;
  --t-text: #9dbdd1;
  --t-dim: #6888a1;
  --t-cyan: #68bad1;
  --t-gold: #d1a53d;
  --t-line: rgba(104, 186, 209, 0.13);
  --t-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --c: var(--t-gold);
  color: var(--t-text);
  font-family: var(--t-mono);
  line-height: 1.6;
  background:
    radial-gradient(ellipse 90% 45% at 50% 0%, rgba(55, 95, 210, 0.12), transparent 70%),
    radial-gradient(ellipse 120% 70% at 50% 110%, rgba(30, 55, 140, 0.14), transparent 70%),
    linear-gradient(#050f28, #040a1a 55%, var(--t-bg));
  border-left: 1px solid rgba(104, 186, 209, 0.08);
  border-right: 1px solid rgba(104, 186, 209, 0.08);
}
/* faint scanlines over the whole screen + one slow soft scan band */
.log-terminal::after, .pr-terminal::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    linear-gradient(to bottom, transparent 0%, rgba(104, 186, 209, 0.035) 48%, rgba(104, 186, 209, 0.055) 50%, rgba(104, 186, 209, 0.035) 52%, transparent 100%) 0 -40vh / 100% 40vh no-repeat,
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, 0.26) 2px 3px);
  animation: log-scan 11s linear infinite;
}
@keyframes log-scan { from { background-position: 0 -40vh, 0 0; } to { background-position: 0 140vh, 0 0; } }
.log-terminal::before, .pr-terminal::before { background: var(--t-gold); opacity: .45; height: 1px; }

/* header */
.log-terminal .log-bar { align-items: flex-end; border-bottom: 1px dashed var(--t-line); padding-bottom: .8rem; margin: 0 0 .2rem; }
.log-terminal .log-head { flex: 1 1 auto; min-width: 0; }
.log-terminal .log-sys { margin: 0 0 .25rem; font: 500 .6rem/1.2 var(--t-mono); letter-spacing: .14em; color: var(--t-dim); }
.log-terminal .log-bar h2 {
  font: 600 1.19rem/1.15 var(--t-mono);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--t-gold);
  text-shadow: 0 0 5px rgba(209, 165, 61, 0.28);
}
.log-terminal .log-close, .pr-terminal .pr-close {
  border-radius: 4px;
  border: 1px solid rgba(104, 186, 209, 0.26);
  background: transparent;
  color: var(--t-cyan);
  font: 500 .72rem/1 var(--t-mono); letter-spacing: .12em; text-transform: uppercase;
  padding: 0 .95rem;
}
.log-terminal .log-close:active, .pr-terminal .pr-close:active { transform: none; color: #fff; }
.log-terminal .log-close:focus-visible, .pr-terminal .pr-close:focus-visible { outline: 1px dashed var(--t-gold); outline-offset: 3px; }

/* list */
.log-terminal .log-scroll { position: relative; z-index: 1; padding-top: .9rem; }
.log-terminal .log-line { font: 400 .72rem/1.5 var(--t-mono); font-style: normal; color: var(--t-dim); margin: 0 0 1rem; }
.log-terminal .log-line::before { content: "> "; color: var(--t-gold); }
.log-terminal .log-empty, .log-terminal .log-scroll .club-status { font: 400 .74rem/1.5 var(--t-mono); font-style: normal; color: var(--t-dim); }
.log-terminal .entries { display: block; }
.log-terminal .entry {
  position: relative;
  padding: .85rem 4.2rem .9rem 0;
  border: 0; border-radius: 0; box-shadow: none; background: none;
  border-bottom: 1px dashed var(--t-line);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.log-terminal .entry::before {   /* the dated log line: ENTRY 002  2026-10-09 */
  content: attr(data-stamp);
  position: static; display: block; height: auto; width: auto; border-radius: 0;
  background: none; box-shadow: none; opacity: 1;
  white-space: pre;
  font: 500 .65rem/1.3 var(--t-mono); letter-spacing: .1em;
  color: var(--t-gold);
  margin: 0 0 .3rem;
}
.log-terminal .entry h2 {
  font: 600 .92rem/1.35 var(--t-mono);
  margin: 0; color: #c5dce8;
}
.log-terminal .entry .subtitle { font: 400 .77rem/1.45 var(--t-mono); color: var(--t-dim); opacity: 1; margin: .2rem 0 0; }
.log-terminal .entry .meta { display: none; }   /* the date is on the entry line */
.log-terminal .entry:active h2 { color: var(--t-cyan); }
/* the View button becomes a quiet OPEN cue at the right of the line */
.log-terminal .pr-view {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  min-height: 44px; min-width: 44px; padding: 0 .1rem 0 .6rem;
  border: 0; border-radius: 0; background: none;
  color: var(--t-cyan);
  font: 500 .65rem/1 var(--t-mono); letter-spacing: .14em;
  font-size: 0;   /* hide the word "View"; the ::before says OPEN */
}
.log-terminal .pr-view::before { content: "OPEN >"; font-size: .65rem; }
.log-terminal .pr-view:active { transform: translateY(-50%); color: #fff; }
.log-terminal .pr-view:focus-visible { outline: 1px dashed var(--t-gold); outline-offset: 2px; }

/* the blinking cursor at the end of the list */
.log-terminal .log-cursor { margin: 1rem 0 0; font: 500 .81rem/1 var(--t-mono); color: var(--t-gold); display: flex; align-items: center; gap: .5rem; }
.log-terminal .log-caret {
  display: inline-block; width: .6em; height: 1.05em;
  background: var(--t-cyan); opacity: .7;
  animation: log-blink 2.2s steps(1, end) infinite;
}
@keyframes log-blink { 0%, 55% { opacity: .7; } 56%, 100% { opacity: 0; } }
.log-terminal .log-fallback { font: 400 .67rem/1.4 var(--t-mono); margin-top: 1.4rem; }
.log-terminal .log-fallback a { color: var(--t-dim); }

/* the open entry */
.pr-terminal .pr-bar { position: relative; z-index: 3; border-bottom: 1px dashed var(--t-line); padding-bottom: .7rem; }
.pr-terminal .pr-body { position: relative; z-index: 1; padding-top: 1.1rem; font-family: var(--t-mono); }
.pr-terminal .pr-stamp { margin: 0 0 .45rem; font: 500 .67rem/1.3 var(--t-mono); letter-spacing: .1em; color: var(--t-gold); white-space: pre; }
.pr-terminal .pr-body h2 { font: 600 1.17rem/1.3 var(--t-mono); color: #c5dce8; margin: 0 0 .3rem; }
.pr-terminal .pr-body .subtitle { font: 400 .86rem/1.45 var(--t-mono); color: var(--t-dim); opacity: 1; margin: 0 0 .3rem; }
.pr-terminal .pr-body .meta { font: 400 .67rem/1.4 var(--t-mono); font-style: normal; color: var(--t-dim); margin: 0 0 1.1rem; padding-bottom: .9rem; border-bottom: 1px dashed var(--t-line); }
.pr-terminal .pr-body p:not(.pr-stamp):not(.subtitle):not(.meta) { font: 400 .9rem/1.7 var(--t-mono); color: var(--t-text); white-space: pre-line; } /* 14.4px */
.pr-terminal .pr-body img { border-radius: 2px; border: 1px solid var(--t-line); }

/* hidden tab: hold still */
html.tab-hidden .log-terminal::after, html.tab-hidden .pr-terminal::after, html.tab-hidden .log-caret { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .log-terminal::after, .pr-terminal::after { animation: none !important; background-position: 0 -40vh, 0 0; }
  .log-terminal .log-caret { animation: none !important; opacity: .7; }
}

/* ================================================================
   v61 LIGHTYEAR 5 Log as a page (rooms/blog.html): the same navy ship
   terminal, larger, filling the screen. A terminal menu first (like the
   Poet's Stage choices), then the entry list; entries open in the same
   terminal reader (.pr-terminal), sized to match. No glow boxes.
   ================================================================ */
body.log-page-body { margin: 0; background: #010309; min-height: 100vh; min-height: 100dvh; }
.log-page {
  position: relative; min-height: 100vh; min-height: 100dvh; box-sizing: border-box;
  width: min(100vw, 760px); margin: 0 auto; overflow: hidden;
  display: flex; flex-direction: column;
}
.log-page .log-bar { padding: calc(env(safe-area-inset-top, 0px) + 1.4rem) 1.35rem .9rem; }
.log-page .log-sys { font-size: .66rem; }
.log-page .log-bar h2 { font-size: 1.5rem; }
.log-page .log-scroll { flex: 1 1 auto; overflow: visible; padding: 1.1rem 1.35rem calc(env(safe-area-inset-bottom, 0px) + 2.5rem); }
.log-page .log-line { font-size: .8rem; }
.log-page .log-view[hidden] { display: none; }
.log-menu { list-style: none; margin: 1.4rem 0 0; padding: 0; }
.log-menu li { border-bottom: 1px dashed var(--t-line); }
.log-opt {
  display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 56px;
  padding: .7rem 0; background: none; border: 0; box-shadow: none; text-align: left; text-decoration: none;
  font: 600 1.02rem/1.3 var(--t-mono); letter-spacing: .08em; text-transform: uppercase;
  color: #c5dce8; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.log-opt::before { content: ">"; color: var(--t-gold); }
.log-opt small { margin-left: auto; font: 400 .66rem/1 var(--t-mono); letter-spacing: .12em; color: var(--t-dim); }
.log-opt:active { color: var(--t-cyan); }
.log-opt:focus-visible { outline: 1px dashed var(--t-gold); outline-offset: 3px; }
.log-page .entry h2 { font-size: 1rem; }
.log-page .entry .subtitle { font-size: .82rem; }
.log-back { margin-top: 1.6rem; }
body.log-page-body .pr-sheet.pr-terminal { width: min(100vw, 760px); }
body.log-page-body .pr-terminal .pr-body h2 { font-size: 1.3rem; }
body.log-page-body .pr-terminal .pr-body p:not(.pr-stamp):not(.subtitle):not(.meta) { font-size: .95rem; }