/* Taste refinement: keep the camera concept, clarify the archive around it. */
:root {
  --paper: #f3f1eb;
  --ink: #242722;
  --muted: #72766c;
  --ui-accent: #58634c;
  --ui-line: #d3d4c9;
}
body { cursor: auto; -webkit-font-smoothing: antialiased; }
button, a { -webkit-tap-highlight-color: transparent; }
button { touch-action: manipulation; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 5px;
}
button:not(.sd-card):active { scale: .98; }
button:disabled { cursor: default; }
.noise { opacity: .027; }
.skip-link {
  position: fixed; z-index: 101; top: 12px; left: 12px;
  padding: 14px 20px; color: var(--paper); background: var(--ink);
  transform: translateY(-150%); text-decoration: none;
}
.skip-link:focus { transform: none; }
.topbar {
  width: min(1600px, 100%); left: 50%; translate: -50% 0;
  height: 88px; padding-inline: clamp(24px, 4vw, 64px);
  grid-template-columns: 1fr auto 1fr; gap: 24px;
}
.brand { gap: 12px; }
.brand__mark { width: 36px; height: 36px; border-color: var(--ui-line); font-size: 13px; }
.brand__name { gap: 7px; font-weight: 500; font-size: 12px; }
.brand__name span { font-size: 8px; letter-spacing: .06em; color: var(--muted); }
.lobby-nav { display: flex; align-items: center; gap: 26px; }
.lobby-nav button {
  position: relative; min-height: 44px; padding: 8px 0; border: 0; background: transparent;
  color: var(--muted); font: 500 12px/1.4 "Noto Sans SC", sans-serif;
  transition: color .2s;
}
.lobby-nav button[aria-current], .lobby-nav button:hover { color: var(--ink); }
.lobby-nav button::after {
  content: ""; position: absolute; bottom: 5px; left: 50%; width: 4px; height: 4px;
  background: var(--ui-accent); border-radius: 50%; opacity: 0; transition: opacity .2s;
}
.lobby-nav button[aria-current]::after { opacity: 1; }
.audio-controls { gap: 8px; }
.shutter-presets { border-color: var(--ui-line); }
.shutter-presets button { min-width: 28px; min-height: 28px; }
.sound-toggle { min-height: 34px; border-color: var(--ui-line); font-size: 8px; }
.sound-toggle:hover { background: #e7e7de; }
.hero-copy { top: 16%; width: min(1380px, 91vw); }
.eyebrow { color: var(--muted); font-size: 9px; letter-spacing: .17em; margin-bottom: 22px; }
.hero-copy h1 { font-size: clamp(40px, 9.1vw, 138px); line-height: .9; letter-spacing: -.068em; }
.hero-copy h1 span { -webkit-text-stroke-color: #a9ad9f; }
.hero-caption { margin: 24px 0 0; color: var(--muted); font: 400 13px/1.6 "Noto Sans SC", sans-serif; letter-spacing: .08em; }
.orbital-stage { top: 54%; }
.edge-copy { display: none; }
.category-readout { bottom: 157px; opacity: 0; pointer-events: none; }
.scene--lobby.category-hover .category-readout { opacity: 1; }
.scene--lobby.category-hover .hero-copy h1 { opacity: .16; }
.scroll-hint {
  bottom: 143px; display: flex; align-items: center; gap: 12px; min-height: 40px;
  border: 0; padding: 10px 14px; background: transparent;
  color: var(--muted); font: 400 11px/1.4 "Noto Sans SC", sans-serif; letter-spacing: .03em;
  cursor: pointer; transition: color .2s, opacity .3s;
}
.scroll-hint i { font-style: normal; color: var(--ui-accent); }
.scroll-hint:hover { color: var(--ink); }
.scroll-hint span { width: 22px; background: var(--ui-line); }
.collection-shortcuts {
  position: absolute; z-index: 20; left: 50%; bottom: max(28px, env(safe-area-inset-bottom));
  translate: -50% 0; width: min(980px, 88vw); display: grid; grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid var(--ui-line); transition: opacity .3s;
}
.collection-shortcuts button {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  position: relative; min-height: 74px; padding: 18px 20px; border: 0; background: transparent; text-align: left;
  transition: background .2s, color .2s;
}
.collection-shortcuts button + button { border-left: 1px solid var(--ui-line); }
.collection-shortcuts button > span { color: var(--muted); font: 400 9px/1.4 "Space Mono", monospace; }
.collection-shortcuts strong { font-size: 16px; font-weight: 500; letter-spacing: .03em; }
.collection-shortcuts small { color: var(--muted); font-size: 10px; font-weight: 400; }
.collection-shortcuts i { display: none; font-style: normal; }
.collection-shortcuts button:hover { background: #e8e9df; }
.collection-shortcuts:focus-visible { outline-offset: 6px; }
.scene--lobby.is-scroll-story .collection-shortcuts { opacity: 0; pointer-events: none; }
.scene--lobby.is-scroll-story .hero-caption { opacity: var(--story-intro-opacity); }
.story-about p, .story-about dd { font-family: "Noto Sans SC", Arial, sans-serif; }
.story-about p { font-size: 13px; line-height: 1.8; color: #626659; }
.story-about .story-about__anchor { color: var(--ink); font-family: Georgia, serif; font-style: italic; font-size: 17px; line-height: 1.5; }
.story-about dl { border-color: var(--ui-line); }
.scroll-menu { right: 5vw; top: 27vh; width: min(660px, 48vw); }
.scroll-menu > header { padding-left: 0; font-size: 9px; border-color: var(--ui-line); }
.scroll-menu__list button {
  min-height: 80px; height: 12vh; grid-template-columns: 28px 1fr auto 20px;
  gap: 12px; padding-left: 88px; border-color: var(--ui-line);
}
.menu-preview {
  position: absolute; left: 0; width: 64px; height: 64%; object-fit: cover;
  filter: saturate(.7); transition: filter .25s, transform .3s;
}
.scroll-menu__list button strong { font-size: clamp(24px, 2.8vw, 42px); font-weight: 500; letter-spacing: -.04em; }
.scroll-menu__list button em { font-size: 8px; letter-spacing: .03em; }
.scroll-menu__list button em small { display: block; margin-top: 10px; font: 400 10px/1.3 "Noto Sans SC", sans-serif; color: var(--muted); }
.scroll-menu__list button:hover, .scroll-menu__list button:focus-visible {
  background: #e7e8de; color: var(--ink); padding-left: 94px;
}
.scroll-menu__list button:hover span, .scroll-menu__list button:focus-visible span { color: var(--muted); }
.scroll-menu__list button:hover .menu-preview { filter: saturate(1); transform: scale(1.03); }
.archive-toolbar {
  position: absolute; z-index: 30; inset: 0 0 auto; min-height: 100px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
  padding: 20px clamp(24px, 4vw, 64px); background: var(--paper); border-bottom: 1px solid var(--ui-line);
}
.archive-back { justify-self: start; min-height: 44px; border: 0; background: transparent; font-size: 12px; padding: 8px 0; }
.archive-back span { margin-right: 12px; }
.archive-back:hover { color: var(--ui-accent); }
.archive-heading { text-align: center; }
.archive-heading h2 { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: .08em; }
.archive-heading p { margin: 8px 0 0; color: var(--muted); font: 400 9px/1.3 "Space Mono", monospace; }
#archiveCategories { justify-self: end; display: flex; gap: 4px; }
#archiveCategories button { border: 0; background: transparent; color: var(--muted); padding: 12px; font-size: 11px; transition: background .2s, color .2s; }
#archiveCategories button[aria-pressed="true"] { background: #e1e4d8; color: var(--ink); }
#archiveCategories button:hover { color: var(--ink); }
.archive-hint {
  position: absolute; z-index: 20; inset: auto 24px 18px; pointer-events: none; text-align: center;
  font-size: 11px; color: var(--muted); letter-spacing: .03em;
}
.lightbox {
  grid-template-columns: minmax(0, 1fr); padding: 88px 84px 136px; gap: 0;
  background: #20231ff7; backdrop-filter: blur(18px); color: #eeeee6;
}
.lightbox img { max-height: calc(100dvh - 224px); box-shadow: none; transition: opacity .25s, transform .45s; }
.lightbox img.is-loading { opacity: .25; }
.lightbox__heading {
  position: absolute; inset: 30px auto auto 40px; display: flex; gap: 24px;
  color: #c2c6b9; font: 400 11px/1.4 "Space Mono", "Noto Sans SC", monospace;
}
.lightbox__close {
  top: 20px; right: 28px; min-height: 44px; border: 0; border-radius: 0; padding: 12px;
  color: #eeeee6; background: transparent; font: 400 12px/1.5 "Noto Sans SC", sans-serif;
}
.lightbox__close:hover { background: #ffffff0d; }
.lightbox__arrow {
  position: absolute; top: 50%; translate: 0 -50%; width: 48px; height: 56px;
  border: 1px solid #c2c6b933; background: transparent; color: #eeeee6; font-size: 22px;
  transition: background .2s, border-color .2s;
}
.lightbox__arrow--previous { left: 20px; }
.lightbox__arrow--next { right: 20px; }
.lightbox__arrow:hover { background: #ffffff0d; border-color: #c2c6b9; }
.lightbox__arrow:disabled { opacity: .2; }
.lightbox__settings {
  position: absolute; bottom: 28px; left: 50%; translate: -50% 0; width: min(620px, 80vw);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; color: #eeeee6;
  border-top: 1px solid #c2c6b930; padding-top: 20px;
}
.lightbox__settings dt { color: #aeb4a3; font-size: 10px; }
.lightbox__settings dt span { display: none; }
.lightbox__settings dd { font-size: 16px; margin-top: 8px; }
.lightbox__status { position: absolute; left: 50%; top: 50%; translate: -50% -50%; margin: 0; color: #c2c6b9; font-size: 12px; }
.lightbox button:focus-visible { outline-color: #c2c6b9; }
@media (max-width: 1050px) {
  .shutter-presets { display: none; }
  .topbar { gap: 16px; }
  .lobby-nav { gap: 20px; }
  #archiveCategories button { padding: 12px 8px; }
  .scroll-menu__list button em { display: none; }
  .scroll-menu__list button { grid-template-columns: 24px 1fr 20px; }
}
@media (max-width: 760px) {
  .topbar { height: 76px; padding-inline: 20px; grid-template-columns: 1fr auto; gap: 12px; }
  .brand__mark { width: 30px; height: 30px; }
  .brand__name { font-size: 11px; }
  .brand__name span { font-size: 7px; }
  .lobby-nav { gap: 18px; }
  .lobby-nav button { font-size: 11px; }
  .audio-controls { display: none; }
  .hero-copy { top: 17%; width: 92vw; }
  .eyebrow { font-size: 7px; margin-bottom: 18px; letter-spacing: .12em; }
  .hero-copy h1 { font-size: clamp(28px, 9.4vw, 70px); letter-spacing: -.055em; }
  .hero-copy h1 span { display: none; }
  .hero-caption { margin-top: 18px; font-size: 11px; letter-spacing: .04em; }
  .orbital-stage { top: 52%; height: 43dvh; }
  .scroll-hint { bottom: 123px; font-size: 10px; }
  .category-readout { display: none; }
  .collection-shortcuts { bottom: max(22px, env(safe-area-inset-bottom)); width: calc(100% - 40px); }
  .collection-shortcuts button { grid-template-columns: 1fr; gap: 7px; min-height: 76px; padding: 12px; text-align: center; }
  .collection-shortcuts button > span { display: none; }
  .collection-shortcuts strong { font-size: 13px; }
  .collection-shortcuts small { font-size: 9px; }
  .scroll-menu { top: 26vh; right: 5vw; width: 74vw; }
  .scroll-menu__list button { height: 11vh; min-height: 70px; padding-left: 64px; gap: 8px; }
  .menu-preview { width: 48px; }
  .scroll-menu__list button:hover, .scroll-menu__list button:focus-visible { padding-left: 70px; }
  .scroll-menu__list button strong { font-size: 26px; }
  .scroll-story__scene { top: 14%; }
  .scroll-story__scene strong { font-size: clamp(40px, 10vw, 72px); }
  .story-image { display: none; }
  .story-about { width: 83vw; margin-top: 20px; }
  .story-about p { font-size: 12px; line-height: 1.65; }
  .story-about .story-about__anchor { font-size: 16px; }
  .story-about dd { font-size: 11px; }
  .archive-toolbar { min-height: 136px; grid-template-columns: 1fr auto; padding: 16px 20px 12px; gap: 12px; }
  .archive-heading { text-align: right; }
  .archive-heading h2 { font-size: 20px; }
  .archive-heading p { font-size: 8px; }
  #archiveCategories { grid-column: 1 / -1; width: 100%; justify-self: stretch; justify-content: space-between; }
  #archiveCategories button { padding: 10px 16px; min-height: 40px; font-size: 12px; }
  .archive-hint { bottom: 12px; font-size: 10px; margin: 0; }
  .scene--collection.is-visible { background: var(--paper); }
  .scene--collection .collection-camera-back {
    left: 20px !important; top: 156px !important; width: calc(100% - 40px) !important;
    height: calc(100dvh - 210px) !important; background: transparent;
  }
  .scene--collection .collection-camera__lcd-bezel { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; background: transparent; }
  .scene--collection .collection-camera__lcd { background: transparent; }
  .scene--collection .collection-camera__buttons { display: none; }
  .scene--collection .contact-grid { scrollbar-width: thin; scrollbar-color: #b6baab transparent; }
  .scene--collection .contact-grid *, .scene--collection .contact-photo { cursor: pointer; }
  .focus-cursor { display: none; }
  .lightbox { padding: 88px 20px 160px; }
  .lightbox img { max-width: 100%; max-height: calc(100dvh - 248px); }
  .lightbox__heading { top: 30px; left: 20px; gap: 12px; font-size: 9px; }
  .lightbox__close { right: 12px; font-size: 11px; }
  .lightbox__arrow { top: auto; bottom: 112px; translate: none; width: 48px; height: 36px; }
  .lightbox__arrow--previous { left: calc(50% - 58px); }
  .lightbox__arrow--next { right: calc(50% - 58px); }
  .lightbox__settings { bottom: max(24px, env(safe-area-inset-bottom)); width: calc(100% - 40px); gap: 12px; padding-top: 16px; }
  .lightbox__settings dt { font-size: 9px; }
  .lightbox__settings dd { font-size: 12px; }
}
@media (max-height: 640px) and (min-width: 761px) {
  .hero-copy { top: 18%; }
  .hero-copy h1 { font-size: 8vw; }
  .hero-caption { display: none; }
  .collection-shortcuts { bottom: 18px; }
  .collection-shortcuts button { min-height: 58px; }
  .scroll-hint { bottom: 92px; }
}
/* Keep the projected camera visible while hiding the lobby's navigation layer. */
.orbital-stage { height: min(480px, 44dvh); }
.archive-toolbar { color: var(--ink); }
.scene--lobby.is-camera-screen .collection-shortcuts,
.scene--lobby.is-camera-screen .hero-caption,
.scene--lobby.is-camera-screen .lobby-nav { visibility: hidden; pointer-events: none; }
.lightbox { background: #20231f; }
@media (max-width: 760px) { .orbital-stage { height: 37dvh; } }

.lightbox { pointer-events: none; }
.lightbox.is-open { pointer-events: auto; }
@media (min-width: 761px) { .orbital-stage { top: 58%; } }
.scene--lobby.category-hover .scroll-hint { opacity: 0; pointer-events: none; }
@media (max-width: 760px) { .camera-rig:not(.is-lcd-zooming) { translate: -34px 0; } }
@media (max-width: 360px) { .camera-rig:not(.is-lcd-zooming) { scale: .65; translate: -54px 0; } }

/* Focused navigation and translucent selected-photo viewer. */
.lobby-transition-curtain { position:fixed; inset:0; z-index:120; background:#f3f1eb; pointer-events:auto; transform:translateY(100%); }
.lightbox.is-sphere-lightbox { background:rgba(243,241,235,.25); backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px); color:#242720; }
.lightbox.is-sphere-lightbox .lightbox__settings,
.lightbox.is-sphere-lightbox .lightbox__settings dt,
.lightbox.is-sphere-lightbox .lightbox__status,
.lightbox.is-sphere-lightbox button { color:#242720; }
.lightbox.is-sphere-lightbox button { border-color:#24272050; background:#f3f1eb60; }

.lightbox.is-sphere-lightbox .lightbox__heading { color:#34372f; }

/* Unobstructed LCD: only a small floating exit remains. */
.archive-toolbar { display:none !important; }
.lcd-exit { position:fixed; top:20px; left:24px; z-index:30; border:1px solid #ffffff45; color:#fff; background:#15151599; padding:10px 14px; cursor:pointer; }
.sphere-photo.is-hovered { outline:3px solid white; outline-offset:3px; }

.local-admin-link { position:fixed; bottom:12px; right:20px; z-index:80; padding:7px 10px; background:#f3f1eb; color:#383d2c; border:1px solid #aaa99e; font:12px/1.4 system-ui; text-decoration:none; }