:root { --archive-paper:#f5f0e3; --archive-line:#c5bda9; --archive-ink:#243b3b; --archive-accent:#a64a38; --card-radius:3px; }
.site-header nav { gap:22px; font-size:14px; }
.site-header { grid-template-columns:1fr auto 1fr; }
.header-tools { gap:16px; }
body[data-world="archive"] .site-header { background:rgba(246,241,226,.94); backdrop-filter:blur(10px); }
body[data-world="archive"][data-time="day"] .site-header { color:#263a38; }
body[data-world="archive"][data-time="night"] .site-header { background:rgba(18,43,54,.94); }
.mobile-nav,.mobile-settings { display:none; }
.archive-page { padding:132px max(5vw,24px) 90px; color:var(--archive-ink); background:radial-gradient(ellipse at 20% 0,#fffaf0,#f1ebdd 65%,#e5decb); }
.archive-heading { max-width:1200px; margin:0 auto 42px; }
.archive-kicker { font-size:12px; letter-spacing:.22em; color:#8b7154; margin:0 0 18px; }
.archive-heading h1 { margin:0; font:400 clamp(45px,5.5vw,76px)/1.12 var(--serif-cn); letter-spacing:.08em; }
.archive-heading>p:last-child { margin:18px 0 0; font:17px/1.7 var(--serif-cn); color:#65726c; }
.collection-controls { max-width:1200px; margin:0 auto; padding:18px 0; border-top:1px solid var(--archive-line); border-bottom:1px solid var(--archive-line); display:flex; align-items:center; gap:24px; }
.world-filter { display:flex; gap:8px; margin-right:auto; }
.world-filter button { min-height:42px; min-width:64px; padding:8px 16px; color:inherit; background:transparent; border:1px solid transparent; cursor:pointer; font-size:14px; }
.world-filter button[aria-pressed="true"] { color:#fff6e4; background:#284846; border-color:#284846; }
.collection-controls>label { display:flex; align-items:center; gap:10px; font-size:14px; }
.collection-controls select,.setting-row select { min-height:42px; padding:8px 12px; color:inherit; background:#fffaf1; border:1px solid #bcbba9; font-size:14px; border-radius:0; }
.collection-count { max-width:1200px; margin:22px auto; font-size:13px; letter-spacing:.12em; color:#768077; }
.collection-grid { max-width:1200px; margin:auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; align-items:start; }
.collection-card { padding:0; overflow:hidden; text-align:left; background:#fffcf3; color:var(--archive-ink); border:1px solid #cec5b0; border-radius:var(--card-radius); cursor:pointer; box-shadow:0 9px 25px rgba(37,47,39,.08); transition:transform .35s var(--ease),box-shadow .35s; }
.collection-card:hover { transform:translateY(-6px); box-shadow:0 18px 35px rgba(37,47,39,.17); }
.collection-cover { position:relative; height:210px; overflow:hidden; background-size:190% auto; }
.collection-cover::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(13,30,32,.45),transparent 65%); }
.collection-cover img { width:100%; height:100%; object-fit:cover; }
.cover-number { position:absolute; z-index:1; bottom:18px; left:24px; font-size:11px; color:#f8efd9; letter-spacing:.2em; }
.collection-card-content { padding:22px 24px 25px; }
.collection-card-meta { display:flex; align-items:center; justify-content:space-between; color:#84745b; font-size:13px; letter-spacing:.1em; }
.card-symbol { display:grid; place-items:center; width:28px; height:28px; color:#a44c38; border:1px solid #a44c38; font:15px var(--serif-cn); transform:rotate(-5deg); }
.card-west { border-top:3px solid #b79c64; color:#1c3c55; }
.card-west .card-symbol { color:#ad8f51; border:0; font-size:24px; transform:none; }
.collection-card h2 { min-height:2.6em; margin:15px 0 14px; font:400 25px/1.35 var(--serif-cn); overflow-wrap:anywhere; }
.card-west h2 { font-family:var(--serif-west); }
.card-place { font-size:14px; margin:0 0 18px; color:#65776c; }
.card-tags { display:flex; flex-wrap:wrap; gap:7px; }
.card-tags span { font-size:12px; color:#787761; border-bottom:1px solid #cbc4b0; padding:3px 0; }
.collection-empty { grid-column:1/-1; min-height:300px; padding:45px 20px; border:1px dashed #b7b59e; text-align:center; }
.collection-empty>span { font-size:42px; color:#a84b37; }
.collection-empty h2 { font:400 30px var(--serif-cn); }
.collection-empty p { font-size:16px; line-height:1.6; color:#748077; }
.collection-empty a { display:inline-block; margin-top:15px; padding:10px 15px; border:1px solid currentColor; font-size:14px; }

.year-jumps { max-width:1200px; margin:0 auto 50px; display:flex; flex-wrap:wrap; gap:9px; }
.year-jumps button { padding:8px 12px; color:#63776b; background:transparent; border:1px solid #c4c3ad; cursor:pointer; font:15px var(--serif-west); }
.timeline-years { max-width:1080px; margin:auto; }
.timeline-year { position:relative; display:grid; grid-template-columns:180px 1fr; gap:60px; min-height:190px; padding:10px 0 55px; scroll-margin-top:110px; opacity:0; transform:translateY(20px); transition:opacity .7s,transform .7s var(--ease); }
.timeline-year.year-visible { opacity:1; transform:none; }
.timeline-year::before { content:""; position:absolute; top:18px; left:210px; bottom:-18px; width:1px; background:#bcbba6; }
.timeline-year:last-child::before { background:linear-gradient(#bcbba6,transparent); }
.timeline-year h2 { margin:0; color:#3f655f; font:400 66px/1 var(--serif-west); }
.year-notes { padding-top:6px; }
.quiet-year { margin:10px 0; color:#929686; font:16px/1.7 var(--serif-cn); }
.timeline-note { position:relative; display:flex; align-items:start; gap:22px; width:100%; padding:19px 23px; margin-bottom:15px; text-align:left; color:#2b4841; background:rgba(255,254,247,.6); border:1px solid #d1c9b6; cursor:pointer; transition:background .2s,transform .2s; }
.timeline-note:hover { background:#fffdf5; transform:translateX(4px); }
.timeline-symbol { display:grid; place-items:center; width:30px; height:30px; flex:none; color:#a84d3c; border:1px solid #a84d3c; font-family:var(--serif-cn); }
.note-west .timeline-symbol { color:#a7884f; border:0; font-size:25px; }
.timeline-note-writing { display:flex; flex-direction:column; gap:8px; }
.timeline-note time { color:#8a8067; font-size:12px; letter-spacing:.12em; }
.timeline-note strong { font:400 24px/1.3 var(--serif-cn); }
.note-west .timeline-note strong,.note-west .timeline-note-writing strong { font-family:var(--serif-west); }
.timeline-note small { font-size:13px; color:#738077; }

.record-page { min-height:100svh; padding:116px max(4vw,20px) 80px; color:#2a3f38; background:linear-gradient(135deg,#cdd8ca,#e8e3d3 45%,#b9c7b6); }
.record-page[data-realm="west"] { color:#253e51; background:linear-gradient(135deg,#d4dde0,#ede8db 55%,#c6d2d7); }
.record-toolbar { max-width:1180px; margin:0 auto 28px; display:flex; justify-content:space-between; gap:15px; }
.record-toolbar button { min-height:40px; padding:8px 0; color:inherit; background:none; border:0; border-bottom:1px solid currentColor; cursor:pointer; font-size:14px; }
.record-paper { position:relative; max-width:1180px; margin:auto; padding:60px clamp(26px,5vw,75px) 30px; background:#fcf6e9; box-shadow:0 25px 75px rgba(28,49,42,.16); border:1px solid #c9c3ac; }
.record-page[data-realm="west"] .record-paper { background:#fcfbf4; border-top:5px solid #b79a64; }
.record-heading { position:relative; padding-right:110px; border-bottom:1px solid #c9c1ac; padding-bottom:30px; }
.record-world { margin:0 0 25px; font-size:13px; color:#7b846e; letter-spacing:.08em; }
.record-date { margin:0 0 12px; color:#a14b3b; font:18px var(--serif-west); letter-spacing:.12em; }
.record-heading h1 { margin:0; max-width:820px; font:400 clamp(33px,4vw,52px)/1.3 var(--serif-cn); overflow-wrap:anywhere; }
.record-page[data-realm="west"] .record-heading h1 { font-family:var(--serif-west); }
.record-phase { margin:17px 0 0; font-size:16px; line-height:1.65; color:#7b816f; }
.record-seal { position:absolute; right:0; top:40px; display:grid; place-items:center; width:72px; height:72px; padding:12px; color:#b2533b; border:2px solid #b2533b; font:22px/1.15 var(--serif-cn); transform:rotate(-5deg); }
.record-page[data-realm="west"] .record-seal { color:#9d824a; border:1px solid #9d824a; border-radius:50%; font:11px/1.5 var(--sans); letter-spacing:.12em; transform:none; }
.record-layout { display:grid; grid-template-columns:minmax(260px,.95fr) minmax(280px,1.05fr); gap:clamp(30px,4vw,65px); padding:42px 0; }
.record-writing section { margin-bottom:30px; }
.record-writing h2 { margin:0 0 15px; font:400 24px var(--serif-cn); }
.record-writing p { margin:0; font:17px/1.9 var(--serif-cn); white-space:pre-wrap; color:#566459; overflow-wrap:anywhere; }
.record-tags { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.record-tags span { padding:6px 10px; color:#6a7567; border:1px solid #c6c7b3; font-size:13px; }
.record-photos { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; align-content:start; }
.record-photos[data-count="1"] { grid-template-columns:1fr; }
.record-photos[data-count="3"] .record-photo:first-child { grid-column:1/-1; }
.record-photo { padding:7px; min-width:0; background:#fffdf5; border:1px solid #c7c7b3; cursor:zoom-in; box-shadow:0 4px 12px rgba(35,48,38,.07); transition:transform .25s; }
.record-photo:hover { transform:translateY(-3px); }
.record-photo>img { display:block; width:100%; height:220px; object-fit:cover; }
.record-photos[data-count="1"] .record-photo>img { height:auto; max-height:500px; }
.photo-placeholder { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:10px; min-height:200px; padding:18px; color:#887b62; background:repeating-linear-gradient(0deg,transparent 0 28px,rgba(162,143,105,.07) 29px 30px),#eee7d5; text-align:center; }
.photo-placeholder-index { font:10px var(--sans); letter-spacing:.18em; opacity:.65; }
.photo-placeholder strong { font:400 24px var(--serif-cn); }
.photo-placeholder small { font-size:11px; line-height:1.5; opacity:.65; }
.no-record-photos { grid-column:1/-1; margin:0; padding:40px 25px; border:1px dashed #c7c7b3; color:#8c927e; font:16px/1.7 var(--serif-cn); }
.record-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 0 0; border-top:1px solid #cec8b4; font-size:12px; color:#8b8f7b; }
.record-footer button { padding:8px; color:inherit; background:transparent; border:1px solid currentColor; cursor:pointer; font-size:13px; }

.node-detail-inner { padding:40px; position:relative; }
.modal-close { position:absolute; top:16px; right:16px; width:34px; height:34px; background:none; border:1px solid currentColor; color:inherit; cursor:pointer; font-size:22px; }
.node-detail-inner h2 { font:400 34px/1.3 var(--serif-cn); margin:25px 0 12px; }
.node-detail-status { color:#a45842; font-size:13px; letter-spacing:.1em; }
.node-detail-note { font-size:16px; line-height:1.7; white-space:pre-wrap; }
.detail-edit-node { color:inherit; background:transparent; border:1px solid #879688; }
.detail-light-node,.record-node { background:#a44c3b; color:white; border:1px solid #a44c3b; }
[data-realm="west"] .detail-light-node,[data-realm="west"] .record-node { background:#234e6c; border-color:#234e6c; }
.node-detail-dialog[data-realm="west"] h2 { font-family:var(--serif-west); }
.journey-node { display:grid; grid-template-columns:1fr auto; padding:0 15px 0 0; }
.node-open { display:grid; grid-template-columns:58px 1fr; gap:13px; width:100%; padding:16px 0; text-align:left; color:inherit; border:0; background:none; cursor:pointer; }
button.node-edit { align-self:start; padding:22px 0 8px; color:#71827a; background:none; border:0; cursor:pointer; font-size:12px; }
.place-page[data-realm="west"] .journey-node { padding:0 17px 0 0; }
.achievement-form-dialog { width:min(750px,calc(100vw - 28px)); }
.form-two-columns { display:grid; grid-template-columns:.8fr 1.2fr; gap:20px; }
.image-upload-field { margin:15px 0 25px; }
.image-upload-field>div:first-child { display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:14px; font-weight:400; }
.image-upload-field>p { font-size:12px; line-height:1.6; color:#838b78; }
.upload-button { position:relative; display:inline-block; padding:10px 14px; color:inherit; border:1px solid #879480; overflow:hidden; cursor:pointer; font-size:14px; }
.upload-button input { position:absolute; inset:0; opacity:0; width:100%; cursor:pointer; }
.form-image-previews { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.form-image-tile { position:relative; min-width:0; }
.form-image-tile>img { width:100%; height:120px; object-fit:cover; }
.form-image-tile>.photo-placeholder { min-height:120px; padding:12px; }
.form-image-tile .photo-placeholder strong { font-size:16px; }
.form-image-tile .photo-placeholder small { display:none; }
.form-image-tile>button { position:absolute; top:4px; right:4px; width:28px; height:28px; padding:0; color:white; background:rgba(30,50,47,.85); border:0; cursor:pointer; font-size:18px; }
.lightbox { width:min(1100px,calc(100vw - 32px)); max-width:none; max-height:94svh; padding:55px 35px 20px; color:#f7eeda; background:#142927; border:1px solid #91a18d; box-shadow:0 30px 100px #0008; }
.lightbox::backdrop { background:rgba(2,15,20,.9); backdrop-filter:blur(6px); }
.lightbox-close { position:absolute; right:16px; top:12px; width:34px; height:34px; color:inherit; background:none; border:1px solid currentColor; cursor:pointer; font-size:22px; }
.lightbox-body { display:flex; justify-content:center; align-items:center; min-height:300px; }
.lightbox-body { touch-action:pan-y; }
.lightbox-body>img { display:block; max-width:100%; max-height:70svh; object-fit:contain; }
.lightbox-body>.photo-placeholder { width:100%; min-height:55svh; }
.lightbox-controls { display:flex; align-items:center; justify-content:space-between; gap:15px; padding-top:15px; }
.lightbox-controls button { padding:9px 14px; color:inherit; background:none; border:1px solid #a4ae95; cursor:pointer; font-size:14px; }
.lightbox-controls button:disabled { opacity:.3; cursor:default; }
.lightbox-caption { font-size:13px; text-align:center; line-height:1.5; }
.journey-toast { position:fixed; z-index:110; top:110px; left:50%; transform:translateX(-50%) rotate(-4deg); padding:18px 22px; color:#a24836; background:#fff4df; border:2px solid #a24836; font:25px var(--serif-cn); letter-spacing:.12em; box-shadow:0 10px 35px #0d201f30; animation:stampIn .35s var(--ease); pointer-events:none; }
.journey-toast[data-realm="west"] { color:#937642; border-color:#937642; font:14px var(--sans); letter-spacing:.18em; transform:translateX(-50%); }
@keyframes stampIn { from { opacity:0; scale:1.15; } to { opacity:1; scale:1; } }

.settings-surface { max-width:1000px; margin:0 auto; background:#fffbf1; padding:15px 40px 35px; border:1px solid #c8c3ac; box-shadow:0 15px 45px rgba(38,52,41,.08); }
.settings-surface section { padding:25px 0; border-bottom:1px solid #d1cbb7; }
.settings-surface section:last-child { border:0; }
.settings-surface h2 { font:400 29px var(--serif-cn); margin:0 0 20px; }
.setting-row { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:18px 0; }
.setting-row>span:first-child { max-width:620px; }
.setting-row strong { display:block; font-size:16px; font-weight:400; }
.setting-row small { display:block; margin-top:7px; font-size:14px; line-height:1.6; color:#7e8878; }
.setting-row select { flex:none; }
.setting-badge { flex:none; font-size:12px; letter-spacing:.1em; color:#8c7752; border:1px solid #c1b99e; padding:8px 10px; }
.future-settings>p { color:#7e8878; font-size:16px; line-height:1.6; }
.future-options { display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
.future-options span { padding:12px 16px; border:1px dashed #c2c3ad; color:#9b9f8c; font-size:14px; }

body[data-time="night"] .archive-page { color:#ede7d7; background:radial-gradient(ellipse at 20% 0,#243e49,#132c37 70%,#0d242e); }
body[data-time="night"] .archive-page .archive-heading>p:last-child,body[data-time="night"] .collection-count { color:#aabbb4; }
body[data-time="night"] .archive-kicker { color:#c4aa73; }
body[data-time="night"] .collection-controls { border-color:#587171; }
body[data-time="night"] .world-filter button[aria-pressed="true"] { background:#dac38f; color:#14303a; }
body[data-time="night"] .collection-controls select { color:#ecdfc2; background:#203b44; border-color:#668077; }
body[data-time="night"] .collection-empty,body[data-time="night"] .year-jumps button { color:#bac7b5; border-color:#52716b; }
body[data-time="night"] .timeline-year h2 { color:#d0c3a0; }
body[data-time="night"] .timeline-note { color:#e7e4d2; background:#22404a; border-color:#4b6d6d; }
body[data-time="night"] .timeline-note:hover { background:#2a4b55; }
body[data-time="night"] .timeline-note small,body[data-time="night"] .quiet-year { color:#a2b5ac; }
body[data-time="night"] .record-page { background:linear-gradient(135deg,#173634,#2e4640,#102825); }
body[data-time="night"] .record-page[data-realm="west"] { background:linear-gradient(135deg,#173548,#253e4a,#102836); }
body[data-time="night"] .record-toolbar { color:#eee6cf; }
body[data-time="night"] .settings-surface { color:#253e3c; }
body[data-motion="reduced"] *,body[data-motion="reduced"] *::before,body[data-motion="reduced"] *::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
body[data-motion="reduced"] .timeline-year { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { .timeline-year { opacity:1; transform:none; } }

@media(max-width:1180px) { .date-range { display:none; } .collection-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:800px) {
  .site-header nav { display:none; }
  .site-header { grid-template-columns:1fr auto; }
  .mobile-settings { display:block; font-size:12px; }
  .header-tools { gap:18px; }
  .mobile-nav { display:flex; position:fixed; bottom:0; left:0; right:0; z-index:55; height:64px; align-items:center; justify-content:space-around; color:#37554c; background:rgba(249,245,231,.97); border-top:1px solid #bcbba7; backdrop-filter:blur(12px); padding-bottom:env(safe-area-inset-bottom); }
  .mobile-nav a { position:relative; display:grid; place-items:center; min-width:52px; height:46px; font-size:14px; opacity:.66; }
  .mobile-nav a.active { opacity:1; color:#a74d3a; }
  .mobile-nav a.active::before { content:""; position:absolute; top:4px; width:4px; height:4px; border-radius:50%; background:currentColor; }
  body[data-time="night"] .mobile-nav,body[data-world="east"] .mobile-nav { background:rgba(16,40,43,.97); color:#f1e5c8; border-color:#516c60; }
  body[data-time="night"] .mobile-nav a.active,body[data-world="east"] .mobile-nav a.active { color:#ddb77e; }
  .home-page { padding-bottom:90px; }
  .place-inner { padding-bottom:64px; }
  .map-page { padding-bottom:64px; }
  .archive-page { padding:100px 20px 100px; }
  .archive-heading { margin-bottom:30px; }
  .archive-heading h1 { font-size:45px; }
  .archive-heading>p:last-child { font-size:16px; }
  .archive-kicker { font-size:11px; }
  .collection-controls { flex-wrap:wrap; gap:12px; }
  .world-filter { width:100%; margin:0 0 5px; }
  .world-filter button { flex:1; }
  .collection-controls>label { flex:1; flex-direction:column; align-items:stretch; gap:6px; min-width:0; }
  .collection-controls select { width:100%; min-width:0; }
  .collection-grid { gap:20px; }
  .collection-cover { height:170px; }
  .collection-card-content { padding:18px; }
  .collection-card h2 { font-size:22px; }
  .timeline-year { grid-template-columns:1fr; gap:20px; padding:10px 0 45px 18px; min-height:170px; }
  .timeline-year::before { left:0; top:12px; }
  .timeline-year h2 { font-size:52px; }
  .timeline-note { padding:16px; gap:14px; }
  .timeline-note strong { font-size:21px; }
  .record-page { padding:96px 14px 95px; }
  .record-paper { padding:30px 22px 23px; }
  .record-heading { padding-right:0; padding-top:8px; }
  .record-seal { top:0; right:0; width:47px; height:47px; padding:7px; font-size:15px; }
  .record-page[data-realm="west"] .record-seal { font-size:8px; }
  .record-world { padding-right:58px; font-size:12px; line-height:1.6; }
  .record-heading h1 { font-size:34px; }
  .record-layout { grid-template-columns:1fr; gap:20px; padding:30px 0; }
  .record-writing p { font-size:16px; }
  .record-photos { gap:10px; }
  .record-photos:not([data-count="0"]) { display:flex; overflow-x:auto; padding-bottom:12px; scroll-snap-type:x mandatory; }
  .record-photo { flex:0 0 87%; scroll-snap-align:center; }
  .record-photos[data-count="1"] .record-photo { flex-basis:100%; }
  .record-photo>img { height:180px; }
  .record-footer { flex-direction:column; align-items:flex-start; }
  .photo-placeholder { min-height:165px; }
  .photo-placeholder strong { font-size:20px; }
  .photo-placeholder small { font-size:10px; }
  .settings-surface { padding:8px 22px 20px; }
  .setting-row { align-items:flex-start; flex-direction:column; gap:12px; }
  .setting-row select { width:100%; }
  .form-two-columns { grid-template-columns:1fr; gap:0; }
  .achievement-form-dialog form { padding:30px 22px; }
  .form-image-previews { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dialog-actions { gap:8px; }
  .node-detail-inner { padding:32px 24px; }
  .lightbox { padding:50px 14px 16px; }
  .lightbox-controls { flex-wrap:wrap; justify-content:center; }
  .lightbox-caption { order:-1; width:100%; margin:0 0 5px; }
  .journey-toast { top:85px; }
}
@media(max-width:520px) { .collection-grid { grid-template-columns:1fr; } .collection-cover { height:210px; } .node-open { grid-template-columns:46px 1fr; gap:8px; } }