:root {
  --archive-navy: #102b4d;
  --archive-blue: #2388f2;
  --archive-soft-blue: #eaf4ff;
  --archive-bg: #eef3f8;
  --archive-card: #fff;
  --archive-line: #dce6ef;
  --archive-muted: #64768b;
  --archive-gold: #b27a2b;
}

html { scroll-behavior:smooth; }
.capsule-view-body { min-height:100vh; margin:0; color:var(--archive-navy); background:linear-gradient(145deg,#f8fafc 0%,#edf3f8 46%,#e6eef6 100%); font-family:var(--sans); }
.capsule-view-body::before { display:none; }
.capsule-view-body a { color:inherit; }

.capsule-view-header { position:relative; z-index:10; width:min(100% - 40px,1240px); min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:20px; margin:auto; }
.capsule-view-brand { display:flex; align-items:center; color:#157bd1; }
.capsule-view-brand strong { font:700 24px/1 var(--sans); letter-spacing:-.045em; }
.capsule-view-header nav { display:flex; align-items:center; gap:8px; }
.capsule-view-header nav a,.capsule-view-header nav button { min-height:39px; display:inline-flex; align-items:center; justify-content:center; padding:0 16px; border:1px solid var(--archive-line); border-radius:8px; color:#40536a; background:#fff; box-shadow:0 3px 10px rgba(35,65,94,.06); font:600 12px var(--sans); cursor:pointer; transition:.2s; }
.capsule-view-header nav a:hover,.capsule-view-header nav button:hover { border-color:#9fcaf1; transform:translateY(-1px); }
.capsule-view-header nav .edit-link { border-color:var(--archive-blue); color:#fff; background:var(--archive-blue); }

.capsule-view-main { position:relative; z-index:1; width:min(100% - 40px,1160px); margin:0 auto 60px; }
.preview-switcher { display:grid; gap:1px; overflow:hidden; margin-bottom:10px; border:1px solid #d7e1e9; border-radius:10px; background:#d7e1e9; box-shadow:0 5px 18px rgba(31,65,98,.05); }
.preview-mode-row { min-height:56px; display:grid; grid-template-columns:16px minmax(0,1fr) auto; align-items:center; gap:11px; padding:8px 10px 8px 17px; color:#5e6f80; background:#f1f4f6; transition:.2s; }
.preview-mode-row>div { display:flex; align-items:baseline; gap:10px; min-width:0; }
.preview-mode-row strong { color:#46586a; font-size:12px; }
.preview-mode-row span:not(.preview-mode-icon) { color:#788897; font-size:11px; line-height:1.45; }
.preview-mode-icon { color:#a7b2bc; font-size:9px; }
.preview-mode-row button { min-width:88px; height:34px; border:1px solid #bdc9d3; border-radius:7px; color:#516273; background:#fff; font:700 10px var(--sans); letter-spacing:.05em; cursor:pointer; transition:.2s; }
.preview-mode-row button:hover { border-color:#8fa8bb; transform:translateY(-1px); }
.preview-mode-row.is-active[data-preview-row="private"] { color:#216c4c; background:#e8f7ef; }
.preview-mode-row.is-active[data-preview-row="private"] .preview-mode-icon,.preview-mode-row.is-active[data-preview-row="private"] strong { color:#177448; }
.preview-mode-row.is-active[data-preview-row="private"] span:not(.preview-mode-icon) { color:#3c775d; }
.preview-mode-row.is-active[data-preview-row="public"] { color:#445361; background:#e5e9ed; }
.preview-mode-row.is-active[data-preview-row="public"] .preview-mode-icon,.preview-mode-row.is-active[data-preview-row="public"] strong { color:#364654; }
.preview-mode-row.is-active button { border-color:transparent; color:#fff; background:#269261; cursor:default; transform:none; opacity:1; }
.preview-mode-row.is-active[data-preview-row="public"] button { background:#586a79; }
.locked-public-notice { min-height:52px; display:flex; align-items:center; gap:10px; margin-bottom:10px; padding:0 18px; border:1px solid #d4dde5; border-radius:9px; color:#435566; background:#eef1f4; font-size:11px; }
.locked-public-notice strong::before { content:"⌑"; margin-right:8px; }
.locked-public-notice span { color:#708090; }

.capsule-view-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,430px); gap:34px; min-height:230px; align-items:center; padding:0 0 12px; }
.capsule-hero-copy { padding:25px 6px 22px; }
.capsule-view-hero h1 { max-width:680px; margin:0; color:#122943; font:700 clamp(35px,5vw,54px)/1.02 var(--sans); letter-spacing:-.045em; text-wrap:balance; }
.capsule-intro { max-width:650px; margin:18px 0 0; color:#485c72; font:400 16px/1.7 var(--sans); }
.capsule-view-meta { display:flex; flex-wrap:wrap; gap:10px 25px; margin-top:25px; color:#516b86; font-size:12px; }
.capsule-view-meta span { display:flex; align-items:center; gap:7px; }
.capsule-view-meta i { color:#286fae; font-style:normal; font-size:13px; }
.capsule-view-total svg { width:15px; height:15px; color:#286fae; fill:none; stroke:currentColor; stroke-width:1.8; }
.capsule-cover { position:relative; height:265px; overflow:hidden; border-radius:13px; box-shadow:0 13px 27px rgba(22,47,74,.18); }
.capsule-cover-default { background-image:var(--capsule-cover-image,url('/assets/celestial-portal.png')); background-position:center; background-size:cover; background-repeat:no-repeat; }
.capsule-cover-default::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,31,70,.02) 20%,rgba(0,25,58,.78) 100%); }
.capsule-cover-brand { position:absolute; z-index:2; right:16px; top:13px; color:#fff; font:italic 500 20px var(--serif); text-shadow:0 2px 8px rgba(0,25,55,.7); }
.capsule-cover-dates { position:absolute; z-index:2; left:15px; right:15px; bottom:14px; display:grid; grid-template-columns:1fr 1fr; gap:10px 15px; color:#fff; }
.capsule-cover-dates>div { min-width:0; }
.capsule-cover-dates small,.capsule-cover-dates strong { display:block; }
.capsule-cover-dates small { margin-bottom:3px; color:#cfe9fb; font-size:9px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.capsule-cover-dates strong { font-size:13px; font-weight:600; line-height:1.3; text-shadow:0 2px 7px rgba(0,20,48,.8); }
.capsule-cover-dates .capsule-countdown { grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:12px; padding-top:9px; border-top:1px solid rgba(255,255,255,.3); }
.capsule-countdown strong { color:#fff3c7; font-size:17px; letter-spacing:.025em; font-variant-numeric:tabular-nums; }
.capsule-cover-views { display:flex; align-items:center; gap:6px; padding:6px 8px; border:1px solid rgba(255,255,255,.28); border-radius:999px; color:#fff; background:rgba(0,28,58,.38); font-size:10px; font-weight:600; backdrop-filter:blur(7px); }
.capsule-cover-views svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; }

.capsule-contents-nav { position:sticky; top:8px; z-index:8; display:flex; align-items:center; justify-content:center; gap:5px; margin:0 0 10px; padding:7px; border:1px solid var(--archive-line); border-radius:10px; background:rgba(255,255,255,.94); box-shadow:0 5px 18px rgba(31,65,98,.08); backdrop-filter:blur(14px); }
.capsule-contents-nav a { min-height:40px; display:flex; align-items:center; justify-content:center; gap:8px; flex:1; padding:0 12px; border-radius:7px; color:#344c66; font-size:12px; white-space:nowrap; transition:.2s; }
.capsule-contents-nav a:first-child { color:#176fc6; background:#e9f4ff; }
.capsule-contents-nav a:hover { color:#176fc6; background:#eef6ff; }
.capsule-contents-nav i { color:#2589ed; font-style:normal; font-size:13px; }
.capsule-contents-nav span { min-width:20px; height:20px; display:grid; place-items:center; border-radius:999px; color:#4f759b; background:#edf4fa; font-size:10px; }

.capsule-view-section,.capsule-empty { margin-top:10px; padding:16px; scroll-margin-top:64px; border:1px solid var(--archive-line); border-radius:11px; background:var(--archive-card); box-shadow:0 5px 18px rgba(31,65,98,.06); }
.view-section-heading { min-height:40px; display:grid; grid-template-columns:36px minmax(0,1fr) auto; align-items:center; gap:10px; margin-bottom:13px; }
.section-symbol { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; color:#fff; background:linear-gradient(145deg,#54aaff,#217fe8); font-size:14px; }
.view-section-heading h2 { margin:0 0 4px; color:#183450; font:700 18px/1.15 var(--sans); }
.view-section-heading p { margin:0; color:#718399; font-size:11px; line-height:1.45; }
.view-section-heading>small { align-self:start; padding:6px 10px; border-radius:999px; color:#54708b; background:#eef4f9; font-size:10px; }

.capsule-video-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.capsule-video-grid article { overflow:hidden; border:1px solid #d8e2ec; border-radius:8px; background:#f8fafc; }
.video-frame { position:relative; overflow:hidden; background:#081d32; }
.capsule-video-grid video { width:100%; aspect-ratio:16/9; display:block; object-fit:cover; }
.video-frame>b,.video-frame>span { position:absolute; top:7px; z-index:2; padding:4px 6px; border-radius:4px; color:#fff; background:rgba(3,18,34,.76); font-size:10px; font-weight:600; }
.video-frame>b { left:7px; }
.video-frame>span { right:7px; }
.locked-media-placeholder { aspect-ratio:16/9; display:grid; place-items:center; color:#75889a; background:linear-gradient(135deg,#b7c5d1,#dde5eb 45%,#aebdca); }
.locked-media-placeholder::before { content:""; position:absolute; inset:-20px; background:radial-gradient(circle at 25% 35%,rgba(255,255,255,.65),transparent 25%),linear-gradient(25deg,transparent 35%,rgba(65,91,115,.22) 36% 55%,transparent 56%); filter:blur(11px); }
.locked-media-placeholder i { position:relative; z-index:1; width:43px; height:43px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.75); border-radius:50%; color:#fff; background:rgba(35,58,79,.38); font-style:normal; }
.locked-media-placeholder em { position:absolute; z-index:1; right:8px; bottom:8px; padding:4px 7px; border-radius:5px; color:#fff; background:rgba(30,49,67,.55); font-size:9px; font-style:normal; }
.capsule-video-grid h3 { margin:0; padding:11px 12px; overflow:hidden; color:#263e57; font-size:12px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.capsule-video-grid article>p { margin:-3px 12px 12px; color:#65798e; font-size:11px; line-height:1.55; }

.capsule-photo-gallery { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); grid-auto-rows:94px; gap:7px; }
.capsule-photo-gallery a,.locked-photo-placeholder { position:relative; overflow:hidden; border-radius:7px; background:#dce8f1; }
.capsule-photo-gallery a:nth-child(1),.capsule-photo-gallery a:nth-child(2),.capsule-photo-gallery .locked-photo-placeholder:nth-child(1),.capsule-photo-gallery .locked-photo-placeholder:nth-child(2) { grid-column:span 2; grid-row:span 2; }
.capsule-photo-gallery img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .3s,filter .3s; }
.capsule-photo-gallery a:hover img { transform:scale(1.035); filter:brightness(1.05); }
.capsule-photo-gallery a>span,.locked-photo-placeholder>span { position:absolute; z-index:1; top:6px; left:6px; padding:4px 6px; border-radius:4px; color:#fff; background:rgba(6,25,44,.72); font-size:10px; }
.locked-photo-placeholder { display:grid; place-items:center; background:linear-gradient(145deg,#aab9c5,#e3e9ee 48%,#9faeba); }
.locked-photo-placeholder::before { content:""; position:absolute; inset:-20px; background:radial-gradient(circle at 70% 30%,rgba(255,255,255,.8),transparent 22%),linear-gradient(155deg,transparent 35%,rgba(43,72,97,.25) 36% 60%,transparent 61%); filter:blur(12px); }
.locked-photo-placeholder i { position:relative; color:rgba(255,255,255,.85); font-size:25px; font-style:normal; }

.capsule-story-copy { padding:7px 10px 6px 2px; color:#314961; font:400 14px/1.85 var(--sans); }
.capsule-story-copy::first-line { color:#1f3953; font-weight:600; }
.locked-story-placeholder { display:grid; gap:13px; padding:9px 4px 12px; }
.locked-story-placeholder span,.locked-text-line { width:var(--locked-width,100%); height:12px; display:block; border-radius:999px; background:linear-gradient(90deg,#d7e0e7,#edf1f4 50%,#d4dee6); filter:blur(3px); }
.locked-story-placeholder span:nth-child(3n) { height:10px; }
.capsule-life-featured { margin-top:10px; margin-bottom:10px; }
.capsule-life-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; overflow:hidden; border:1px solid #e3ebf2; border-radius:8px; background:#e3ebf2; }
.capsule-life-grid article { position:relative; min-height:72px; display:grid; align-content:center; gap:7px; padding:14px 16px; background:#fbfcfe; }
.capsule-life-grid small { color:#6d8196; font-size:10px; text-transform:none; }
.capsule-life-grid strong { overflow-wrap:anywhere; color:#263f58; font-size:11px; font-weight:500; }
.capsule-life-grid .locked-text-line { height:9px; filter:blur(2px); }
.capsule-life-grid .locked-text-line.is-short { width:64%; }

.capsule-document-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.capsule-document-grid a,.locked-document { position:relative; min-width:0; min-height:62px; display:grid; grid-template-columns:35px minmax(0,1fr) 22px; grid-template-rows:1fr 1fr; align-items:center; gap:0 9px; padding:9px; border:1px solid #d9e4ed; border-radius:7px; background:#fbfcfe; transition:.2s; }
.capsule-document-grid a:hover { border-color:#8fc6f4; background:#f2f8fe; transform:translateY(-1px); }
.capsule-document-grid a>span,.locked-document>span { grid-row:1/3; width:34px; height:40px; display:grid; place-items:center; border-radius:5px; color:#fff; background:#4196ef; font-size:7px; font-weight:700; }
.capsule-document-grid strong { align-self:end; overflow:hidden; color:#29425c; font-size:11px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.capsule-document-grid small { align-self:start; color:#7f91a4; font-size:9px; }
.capsule-document-grid b { grid-column:3; grid-row:1/3; width:22px; height:22px; display:grid; place-items:center; border:1px solid #d9e6f0; border-radius:5px; color:#3e78ad; font-size:10px; }
.locked-document { cursor:default; }
.locked-document>span { background:#8194a5; }

/* Owner-only simulation of the locked public page. Real public locking is rendered server-side. */
.is-public-simulation .capsule-video-grid video,.is-public-simulation .capsule-photo-gallery img { filter:blur(13px) saturate(.35); transform:scale(1.08); pointer-events:none; }
.is-public-simulation .capsule-video-grid video { opacity:.68; }
.is-public-simulation .capsule-video-grid .video-frame::after,.is-public-simulation .capsule-photo-gallery a::after { content:"LOCKED"; position:absolute; z-index:3; left:50%; top:50%; padding:7px 10px; border:1px solid rgba(255,255,255,.55); border-radius:999px; color:#fff; background:rgba(28,49,68,.62); font-size:9px; font-weight:700; letter-spacing:.08em; transform:translate(-50%,-50%); }
.is-public-simulation .capsule-video-grid video,.is-public-simulation .capsule-photo-gallery a,.is-public-simulation .capsule-story-copy,.is-public-simulation .capsule-life-grid strong { user-select:none; pointer-events:none; }
.is-public-simulation .capsule-story-copy,.is-public-simulation .capsule-life-grid strong { color:transparent; text-shadow:0 0 8px rgba(45,68,89,.55); }
.is-public-simulation .capsule-document-grid a { pointer-events:none; }
.is-public-simulation .capsule-document-grid a small { font-size:0; }
.is-public-simulation .capsule-document-grid a small::after { content:"Available when capsule opens"; font-size:9px; }
.is-public-simulation .capsule-document-grid a b { font-size:0; }
.is-public-simulation .capsule-document-grid a b::after { content:"⌑"; font-size:10px; }

.capsule-empty { padding:45px 25px; text-align:center; }
.capsule-empty h2 { margin:0; font:600 22px var(--sans); }
.capsule-empty p { margin:9px 0 0; color:var(--archive-muted); font-size:10px; }
.capsule-closing { min-height:66px; display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:13px; margin-top:10px; padding:11px 17px; border:1px solid #cfe5f7; border-radius:10px; background:linear-gradient(100deg,#e9f6ff,#f7fbff); }
.capsule-closing>span { color:#2588ed; font:400 37px/1 var(--sans); }
.capsule-closing strong { display:block; margin-bottom:4px; color:#23405c; font-size:13px; }
.capsule-closing p { margin:0; color:#647c92; font-size:10px; }
.capsule-closing a { padding:10px 15px; border-radius:7px; color:#fff; background:var(--archive-blue); font-size:11px; font-weight:600; }
.capsule-closing em { color:#173e63; font:italic 500 19px var(--serif); }

.photo-lightbox { width:min(94vw,1400px); max-width:none; height:min(92vh,1000px); max-height:none; padding:0; border:0; background:transparent; overflow:visible; }
.photo-lightbox::backdrop { background:rgba(0,12,31,.92); backdrop-filter:blur(9px); }
.photo-lightbox img { width:100%; height:100%; display:block; object-fit:contain; }
.photo-lightbox button { position:absolute; z-index:2; top:5px; right:5px; width:43px; height:43px; border:1px solid rgba(255,255,255,.4); border-radius:50%; color:#fff; background:rgba(0,24,57,.72); font:300 28px/1 var(--sans); cursor:pointer; }
.share-toast { position:fixed; z-index:20; left:50%; bottom:25px; padding:12px 18px; border-radius:999px; color:#fff; background:#123b65; box-shadow:0 8px 25px rgba(0,22,48,.24); font-size:10px; opacity:0; pointer-events:none; transform:translate(-50%,15px); transition:.25s; }
.share-toast.is-visible { opacity:1; transform:translate(-50%,0); }

.capsule-view-footer { position:relative; z-index:1; display:flex; align-items:baseline; justify-content:center; gap:7px; padding:25px; border-top:1px solid #dce5ed; color:#7b8ea1; font-size:8px; }
.capsule-view-footer a { color:#173e63; font:italic 500 20px var(--serif); }

@media(max-width:850px) {
  .capsule-view-main { width:min(100% - 24px,1160px); }
  .capsule-view-hero { grid-template-columns:1fr; gap:7px; }
  .capsule-hero-copy { padding-bottom:10px; }
  .capsule-cover { height:240px; }
  .capsule-contents-nav { position:relative; top:auto; justify-content:flex-start; overflow-x:auto; }
  .capsule-contents-nav a { flex:0 0 auto; }
  .capsule-video-grid { grid-template-columns:1fr; }
  .capsule-life-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .capsule-document-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media(max-width:600px) {
  .capsule-view-header { width:min(100% - 24px,1240px); min-height:84px; align-items:flex-start; padding-top:15px; }
  .capsule-view-header nav { align-items:flex-end; flex-wrap:wrap; justify-content:flex-end; }
  .capsule-view-header nav a,.capsule-view-header nav button { min-height:34px; padding:0 11px; font-size:10px; }
  .capsule-view-brand strong { font-size:20px; }
  .preview-mode-row { grid-template-columns:14px minmax(0,1fr) auto; padding-left:11px; }
  .preview-mode-row>div { align-items:flex-start; flex-direction:column; gap:2px; }
  .preview-mode-row button { min-width:74px; }
  .locked-public-notice { align-items:flex-start; flex-direction:column; justify-content:center; gap:2px; padding:9px 12px; }
  .capsule-view-hero h1 { font-size:37px; }
  .capsule-intro { font-size:14px; }
  .capsule-cover { height:260px; }
  .capsule-cover-dates strong { font-size:12px; }
  .capsule-countdown strong { font-size:14px; }
  .capsule-photo-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:115px; }
  .capsule-photo-gallery a:nth-child(1),.capsule-photo-gallery a:nth-child(2),.capsule-photo-gallery .locked-photo-placeholder:nth-child(1),.capsule-photo-gallery .locked-photo-placeholder:nth-child(2) { grid-column:span 1; grid-row:span 2; }
  .capsule-document-grid { grid-template-columns:1fr; }
  .capsule-life-grid { grid-template-columns:1fr; }
  .capsule-closing { grid-template-columns:38px minmax(0,1fr); }
  .capsule-closing a,.capsule-closing em { grid-column:2; justify-self:start; }
}

@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition-duration:.01ms!important; animation-duration:.01ms!important; }
}