/* =========================================================================
   Bajo las Campanas — interface styles
   ========================================================================= */

:root{
  --ink:        #0b0906;
  --ink-2:      #14100b;
  --paper:      #e9e2d3;
  --paper-dim:  #c4bba8;
  --paper-mute: #9a917f;
  --gold:       #d9a441;
  --gold-dim:   #8d6a2b;
  --blood:      #8e2b20;
  --blood-lt:   #c0432f;
  --sea:        #4e7f86;
  --line:       rgba(217,164,65,.28);
  --line-soft:  rgba(233,226,211,.14);

  --serif: "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua","Hoefler Text",Georgia,"Times New Roman",serif;
  --sans:  "Helvetica Neue",Inter,"Segoe UI",Roboto,system-ui,-apple-system,sans-serif;
  --mono:  ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-io: cubic-bezier(.65,.05,.36,1);

  --panel-w: min(430px, 92vw);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

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

/* Several components below set an explicit display, which would otherwise
   win against the user-agent rule for the hidden attribute. */
[hidden]{ display:none !important; }

html,body{
  margin:0; padding:0; height:100%;
  background:var(--ink); color:var(--paper);
  font-family:var(--sans);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overscroll-behavior:none;
  touch-action:none;
}
body.is-reading{ }

canvas#stage{
  position:fixed; inset:0; width:100%; height:100%; display:block;
  background:#05070a; z-index:0; outline:none;
}
body.is-booting canvas#stage{ filter:blur(0px); }

kbd{
  font-family:var(--mono); font-size:.68em; letter-spacing:.02em;
  border:1px solid var(--line); border-bottom-width:2px;
  border-radius:3px; padding:.12em .38em; margin:0 .12em;
  background:rgba(233,226,211,.06); color:var(--paper-dim);
}

::selection{ background:rgba(217,164,65,.3); color:#fff; }

/* scrollbars */
.panel__scroll::-webkit-scrollbar,.overlay__body::-webkit-scrollbar{ width:9px; }
.panel__scroll::-webkit-scrollbar-track,.overlay__body::-webkit-scrollbar-track{ background:rgba(0,0,0,.28); }
.panel__scroll::-webkit-scrollbar-thumb,.overlay__body::-webkit-scrollbar-thumb{ background:rgba(217,164,65,.3); border-radius:6px; }
.panel__scroll::-webkit-scrollbar-thumb:hover,.overlay__body::-webkit-scrollbar-thumb:hover{ background:rgba(217,164,65,.5); }

/* =========================================================================
   NOSCRIPT
   ========================================================================= */
.noscript-notice{
  position:fixed; inset:0; z-index:9999; background:var(--ink); color:var(--paper);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:8vw; font-family:var(--serif);
}
.noscript-notice h1{ font-size:3rem; letter-spacing:.02em; margin:0 0 1rem; }
.noscript-notice p{ max-width:48ch; line-height:1.7; color:var(--paper-dim); }
.noscript-notice a{ color:var(--gold); }

/* =========================================================================
   BOOT / ENTRY
   ========================================================================= */
.boot{
  position:fixed; inset:0; z-index:400;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(72,54,30,.55) 0%, rgba(11,9,6,0) 62%),
    radial-gradient(80% 60% at 50% 105%, rgba(120,44,26,.24) 0%, rgba(11,9,6,0) 70%),
    #07060455;
  backdrop-filter:blur(3px) saturate(.85);
  transition:opacity 1.15s var(--ease), backdrop-filter 1.15s var(--ease);
  padding:calc(3vh + var(--safe-t)) 4vw calc(3vh + var(--safe-b));
  overflow-y:auto;
}
.boot.is-gone{ opacity:0; pointer-events:none; backdrop-filter:blur(0px); }
.boot__vignette{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(115% 85% at 50% 45%, transparent 40%, rgba(0,0,0,.86) 100%);
}
.boot__inner{
  position:relative; max-width:760px; width:100%; text-align:center;
  animation:bootRise 1.6s var(--ease) both;
}
@keyframes bootRise{ from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:none;} }

.boot__eyebrow{
  font-family:var(--sans); font-size:.66rem; letter-spacing:.44em; text-transform:uppercase;
  color:var(--gold-dim); margin-bottom:1.6rem;
}
.boot__title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.9rem,9.2vw,6.2rem); line-height:.96; margin:0;
  letter-spacing:.005em;
  color:#f3ecdd;
  text-shadow:0 0 60px rgba(217,164,65,.22), 0 2px 0 rgba(0,0,0,.6);
}
.boot__sub{
  font-family:var(--serif); font-style:italic; font-size:clamp(1rem,2.6vw,1.45rem);
  color:var(--paper-mute); margin-top:.5rem; letter-spacing:.06em;
}
.boot__rule{
  width:min(320px,60%); height:1px; margin:2rem auto;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
}
.boot__dek{
  font-family:var(--serif); font-size:clamp(.94rem,2.05vw,1.09rem); line-height:1.78;
  color:var(--paper-dim); max-width:60ch; margin:0 auto; text-wrap:pretty;
}

.boot__progress{ margin:2.6rem auto 0; max-width:460px; }
.boot__bar{ height:2px; background:rgba(233,226,211,.12); overflow:hidden; }
.boot__bar span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--gold-dim),var(--gold));
  transition:width .5s var(--ease);
  box-shadow:0 0 14px rgba(217,164,65,.6);
}
.boot__status{
  margin-top:.85rem; font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--paper-mute); min-height:1.2em;
}

.boot__enter{
  margin-top:2.4rem; display:flex; flex-direction:column; gap:.7rem;
  max-width:430px; margin-left:auto; margin-right:auto;
  animation:bootRise .9s var(--ease) both;
}
.btn{
  appearance:none; cursor:pointer; text-align:left;
  background:rgba(233,226,211,.045); color:var(--paper);
  border:1px solid var(--line-soft); border-radius:2px;
  padding:.86rem 1.15rem; display:flex; flex-direction:column; gap:.18rem;
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .18s var(--ease);
  font-family:inherit;
}
.btn:hover,.btn:focus-visible{ background:rgba(217,164,65,.11); border-color:var(--line); transform:translateY(-1px); outline:none; }
.btn:active{ transform:translateY(0); }
.btn__label{ font-family:var(--serif); font-size:1.06rem; letter-spacing:.01em; }
.btn__note{ font-size:.72rem; color:var(--paper-mute); letter-spacing:.06em; }
.btn--primary{ background:rgba(217,164,65,.14); border-color:rgba(217,164,65,.45); }
.btn--primary:hover{ background:rgba(217,164,65,.22); }
.btn--quiet .btn__label{ font-size:.95rem; color:var(--paper-dim); }

.boot__meta{ margin-top:2.4rem; }
.boot__controls{
  display:flex; flex-wrap:wrap; gap:.35rem 1.15rem; justify-content:center;
  font-size:.68rem; color:var(--paper-mute); letter-spacing:.09em;
}
.boot__warn{
  margin-top:1.1rem; font-size:.72rem; color:var(--blood-lt); letter-spacing:.06em;
  max-width:56ch; margin-left:auto; margin-right:auto; line-height:1.6;
}

/* =========================================================================
   HUD
   ========================================================================= */
.hud{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  font-family:var(--sans);
  opacity:0; transition:opacity .9s var(--ease);
}
.hud.is-on{ opacity:1; }
.hud.is-dim{ opacity:.2; }

.hud__top{
  position:absolute; top:0; left:0; right:0;
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:calc(.95rem + var(--safe-t)) 1.15rem .95rem;
  background:linear-gradient(180deg, rgba(6,5,4,.72) 0%, rgba(6,5,4,0) 100%);
}
.hud__gallery{ display:flex; align-items:center; gap:.8rem; pointer-events:none; }
.hud__gnum{
  font-family:var(--serif); font-size:1.5rem; color:var(--gold);
  min-width:2.1ch; text-align:center; line-height:1;
  border-right:1px solid var(--line); padding-right:.8rem;
  text-shadow:0 0 20px rgba(217,164,65,.4);
}
.hud__gtitle{ font-family:var(--serif); font-size:1.02rem; line-height:1.15; color:#f0e9da; letter-spacing:.01em; }
.hud__gyears{ font-size:.66rem; letter-spacing:.24em; color:var(--paper-mute); text-transform:uppercase; margin-top:.2rem; }

.hud__tools{ display:flex; gap:.25rem; pointer-events:auto; flex-wrap:wrap; justify-content:flex-end; }
.tool{
  appearance:none; background:rgba(10,8,6,.5); border:1px solid var(--line-soft);
  color:var(--paper-dim); border-radius:2px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:.18rem;
  padding:.42rem .55rem; min-width:52px;
  transition:all .25s var(--ease); font-family:inherit;
}
.tool svg{ width:15px; height:15px; fill:currentColor; }
.tool span{ font-size:.55rem; letter-spacing:.14em; text-transform:uppercase; }
.tool:hover,.tool:focus-visible{ color:var(--gold); border-color:var(--line); background:rgba(217,164,65,.1); outline:none; }
.tool.is-on{ color:var(--gold); border-color:rgba(217,164,65,.5); background:rgba(217,164,65,.14); }

.hud__crosshair{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:26px; height:26px; display:grid; place-items:center;
  transition:opacity .4s var(--ease), transform .3s var(--ease);
}
.hud__crosshair i{
  display:block; width:5px; height:5px; border-radius:50%;
  border:1px solid rgba(233,226,211,.55); background:rgba(233,226,211,.12);
  transition:all .22s var(--ease);
}
.hud__crosshair.is-hot i{
  width:19px; height:19px; border-color:var(--gold);
  background:rgba(217,164,65,.14);
  box-shadow:0 0 18px rgba(217,164,65,.5);
}
.hud__crosshair.is-hidden{ opacity:0; }

.hud__prompt{
  position:absolute; left:50%; top:calc(50% + 30px); transform:translateX(-50%);
  display:flex; align-items:center; gap:.5rem;
  background:rgba(8,6,4,.74); border:1px solid var(--line);
  padding:.36rem .7rem; border-radius:2px;
  font-size:.74rem; letter-spacing:.12em; color:var(--paper);
  white-space:nowrap; animation:promptIn .3s var(--ease) both;
  max-width:80vw; overflow:hidden; text-overflow:ellipsis;
}
@keyframes promptIn{ from{opacity:0; transform:translateX(-50%) translateY(5px);} to{opacity:1; transform:translateX(-50%);} }

.hud__compass{
  position:absolute; top:calc(5.2rem + var(--safe-t)); left:50%; transform:translateX(-50%);
  font-size:.62rem; letter-spacing:.3em; color:var(--paper-mute);
}

.hud__bottom{
  position:absolute; left:0; right:0; bottom:0;
  padding:1rem 1.15rem calc(.9rem + var(--safe-b));
  background:linear-gradient(0deg, rgba(6,5,4,.78) 0%, rgba(6,5,4,0) 100%);
  pointer-events:none;
}
.century{ max-width:940px; margin:0 auto; pointer-events:auto; }
.century__track{
  position:relative; height:2px; background:rgba(233,226,211,.14); cursor:pointer;
}
.century__fill{
  position:absolute; left:0; top:0; bottom:0; width:0%;
  background:linear-gradient(90deg,rgba(78,127,134,.85),rgba(217,164,65,.9),rgba(142,43,32,.95));
  transition:width .7s var(--ease);
}
.century__head{
  position:absolute; top:50%; width:9px; height:9px; margin:-4.5px 0 0 -4.5px;
  border-radius:50%; background:var(--gold); box-shadow:0 0 12px rgba(217,164,65,.8);
  transition:left .7s var(--ease); left:0%;
}
.century__marks{ position:relative; height:1.5rem; margin-top:.4rem; }
.century__marks b{
  position:absolute; transform:translateX(-50%); font-weight:400;
  font-size:.6rem; letter-spacing:.14em; color:var(--paper-mute);
  cursor:pointer; padding:.15rem .3rem; white-space:nowrap;
  transition:color .25s var(--ease);
}
.century__marks b:hover{ color:var(--gold); }
.century__marks b.is-now{ color:var(--gold); }
.century__marks b.century__dot{ font-size:1.1rem; line-height:.5; letter-spacing:0; padding:0 .18rem; }

.hud__hint{
  text-align:center; font-size:.66rem; letter-spacing:.16em; color:var(--paper-mute);
  margin-top:.35rem; min-height:1em; transition:opacity .5s var(--ease);
}

/* tour bar */
.hud__tourbar{
  position:absolute; left:50%; transform:translateX(-50%);
  transition:transform .55s var(--ease);
  bottom:calc(4.6rem + var(--safe-b));
  display:flex; align-items:center; gap:.5rem; pointer-events:auto;
  background:rgba(8,6,4,.8); border:1px solid var(--line);
  padding:.4rem .5rem; border-radius:3px; backdrop-filter:blur(8px);
  max-width:min(620px,94vw);
}
.tourbtn{
  appearance:none; background:transparent; border:1px solid transparent; color:var(--paper-dim);
  cursor:pointer; font-family:inherit; font-size:.85rem; padding:.28rem .5rem; border-radius:2px;
  transition:all .2s var(--ease); min-width:30px;
}
.tourbtn:hover{ color:var(--gold); background:rgba(217,164,65,.12); }
.tourbtn--exit{ font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; border-color:var(--line-soft); }
.tourbar__mid{ min-width:min(340px,52vw); }
.tourbar__label{ font-family:var(--serif); font-size:.82rem; color:var(--paper); line-height:1.25; }
.tourbar__prog{ height:1px; background:rgba(233,226,211,.16); margin-top:.32rem; }
.tourbar__prog span{ display:block; height:100%; width:0%; background:var(--gold); transition:width .3s linear; }

/* captions */
body.is-reading .hud__tourbar{ transform:translateX(calc(-50% - var(--panel-w) / 2)); }
body.is-reading .hud__bottom{ padding-right:calc(var(--panel-w) + 1rem); }
@media (max-width:720px){
  body.is-reading .hud__tourbar{ transform:translateX(-50%); }
  body.is-reading .hud__bottom{ padding-right:1.15rem; }
}

.captions{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:calc(8.4rem + var(--safe-b)); max-width:min(680px,90vw);
  text-align:center; font-family:var(--serif); font-size:.9rem; line-height:1.55;
  color:#f2ead9; background:rgba(6,5,4,.72); padding:.5rem .9rem; border-radius:2px;
  border-left:2px solid var(--gold-dim);
}

/* =========================================================================
   TOUCH
   ========================================================================= */
.touch{ position:fixed; inset:0; z-index:65; pointer-events:none; }
.touch__stick{
  position:absolute; left:5vw; bottom:calc(9vh + var(--safe-b));
  width:112px; height:112px; border-radius:50%;
  border:1px solid rgba(233,226,211,.22); background:rgba(10,8,6,.3);
  pointer-events:auto; touch-action:none;
}
.touch__stick i{
  position:absolute; left:50%; top:50%; width:46px; height:46px; margin:-23px 0 0 -23px;
  border-radius:50%; background:rgba(217,164,65,.3); border:1px solid rgba(217,164,65,.6);
}
.touch__btns{ position:absolute; right:5vw; bottom:calc(9vh + var(--safe-b)); display:flex; flex-direction:column; gap:.6rem; }
.touch__b{
  pointer-events:auto; appearance:none; background:rgba(10,8,6,.6);
  border:1px solid var(--line); color:var(--paper); border-radius:50%;
  width:78px; height:78px; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  font-family:inherit;
}

/* =========================================================================
   EXHIBIT PANEL
   ========================================================================= */
.panel{
  position:fixed; top:0; right:0; bottom:0; width:var(--panel-w); z-index:120;
  background:linear-gradient(180deg, rgba(14,11,8,.975), rgba(9,7,5,.985));
  border-left:1px solid var(--line);
  box-shadow:-30px 0 80px rgba(0,0,0,.65);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .62s var(--ease);
  backdrop-filter:blur(14px);
}
.panel.is-open{ transform:none; }
.panel__close{
  position:absolute; top:.55rem; right:.65rem; z-index:3;
  appearance:none; background:rgba(0,0,0,.35); border:1px solid var(--line-soft);
  color:var(--paper-dim); width:30px; height:30px; border-radius:50%;
  font-size:1.15rem; line-height:1; cursor:pointer; transition:all .25s var(--ease);
}
.panel__close:hover{ color:var(--gold); border-color:var(--line); transform:rotate(90deg); }

.panel__scroll{
  flex:1; overflow-y:auto; overscroll-behavior:contain;
  padding:calc(1.7rem + var(--safe-t)) 1.6rem 1.4rem; touch-action:pan-y;
}
.panel__kicker{
  font-size:.6rem; letter-spacing:.34em; text-transform:uppercase; color:var(--gold-dim);
  margin-bottom:.7rem;
}
.panel__title{
  font-family:var(--serif); font-weight:400; font-size:1.72rem; line-height:1.12;
  margin:0 0 .3rem; color:#f4ecdc; letter-spacing:.005em;
}
.panel__sub{
  font-family:var(--serif); font-style:italic; font-size:.88rem; color:var(--paper-mute);
  margin-bottom:1rem; line-height:1.45;
}
.panel__label{
  font-family:var(--serif); font-size:1rem; line-height:1.72; color:var(--paper);
  border-left:2px solid var(--gold-dim); padding:.15rem 0 .15rem .95rem;
  margin-bottom:1.3rem; text-wrap:pretty;
}
.panel__tabs{ display:flex; gap:.35rem; flex-wrap:wrap; margin-bottom:1.1rem; border-bottom:1px solid var(--line-soft); padding-bottom:.7rem; }
.ptab{
  appearance:none; background:transparent; border:1px solid var(--line-soft); color:var(--paper-mute);
  font-family:inherit; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.34rem .6rem; cursor:pointer; border-radius:2px; transition:all .25s var(--ease);
}
.ptab:hover{ color:var(--paper); border-color:var(--line); }
.ptab.is-on{ color:var(--ink); background:var(--gold); border-color:var(--gold); }

.panel__body{ font-family:var(--serif); font-size:.94rem; line-height:1.8; color:var(--paper-dim); }
.panel__body p{ margin:0 0 1.05em; text-wrap:pretty; }
.panel__body h4{
  font-family:var(--sans); font-size:.61rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold-dim); margin:1.9em 0 .75em; font-weight:600;
}
.panel__body em{ color:var(--paper); }
.panel__body strong{ color:#f2ead9; font-weight:600; }
.panel__body blockquote{
  margin:1.4em 0; padding:.2em 0 .2em 1.1em; border-left:2px solid var(--blood);
  font-style:italic; color:#e8dfcb;
}
.panel__body blockquote cite{
  display:block; font-style:normal; font-family:var(--sans); font-size:.66rem;
  letter-spacing:.15em; text-transform:uppercase; color:var(--paper-mute); margin-top:.7em;
}
.panel__body ul{ margin:0 0 1.1em; padding-left:1.1em; }
.panel__body li{ margin-bottom:.55em; }
.panel__body .kv{ display:grid; grid-template-columns:auto 1fr; gap:.3em 1em; margin:0 0 1.2em; font-size:.86rem; }
.panel__body .kv dt{ font-family:var(--sans); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--paper-mute); padding-top:.35em; }
.panel__body .kv dd{ margin:0; color:var(--paper); }
.panel__body .note{
  font-size:.82rem; color:var(--paper-mute); font-style:italic;
  border-top:1px solid var(--line-soft); padding-top:.9em; margin-top:1.6em;
}
.panel__body .contested{
  background:rgba(142,43,32,.1); border:1px solid rgba(142,43,32,.32);
  padding:.85em 1em; margin:1.4em 0; font-size:.86rem; line-height:1.7;
}
.panel__body .contested b{
  display:block; font-family:var(--sans); font-size:.58rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--blood-lt); margin-bottom:.5em; font-weight:600;
}
.panel__body .srcs{ font-size:.74rem; color:var(--paper-mute); line-height:1.6; }
.panel__body .srcs li{ margin-bottom:.4em; }

.panel__foot{ border-top:1px solid var(--line-soft); padding:.85rem 1.6rem calc(.85rem + var(--safe-b)); }
.panel__xrefs{ display:flex; flex-wrap:wrap; gap:.35rem; }
.xref{
  appearance:none; cursor:pointer; font-family:var(--sans);
  background:rgba(233,226,211,.05); border:1px solid var(--line-soft);
  color:var(--paper-dim); font-size:.66rem; letter-spacing:.06em;
  padding:.3rem .55rem; border-radius:2px; transition:all .25s var(--ease);
}
.xref:hover{ color:var(--gold); border-color:var(--line); background:rgba(217,164,65,.1); }
.xref::before{ content:"→ "; color:var(--gold-dim); }

/* inline cross-reference link inside prose */
a.ref{
  color:#e5c98a; text-decoration:none; border-bottom:1px solid rgba(217,164,65,.35);
  cursor:pointer; transition:all .2s var(--ease);
}
a.ref:hover{ color:var(--gold); border-bottom-color:var(--gold); }

/* =========================================================================
   OVERLAYS (plan / timeline / index / settings)
   ========================================================================= */
.overlay{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; }
.overlay__scrim{ position:absolute; inset:0; background:rgba(4,3,2,.78); backdrop-filter:blur(6px); animation:fadeIn .35s var(--ease) both; }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
.overlay__sheet{
  position:relative; width:min(1080px,94vw); max-height:88vh;
  background:linear-gradient(180deg,#15110c,#0c0906);
  border:1px solid var(--line); border-radius:3px;
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 40px 120px rgba(0,0,0,.7);
  animation:sheetIn .45s var(--ease) both;
}
@keyframes sheetIn{ from{opacity:0; transform:translateY(22px) scale(.985);} to{opacity:1; transform:none;} }
.overlay__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.3rem; border-bottom:1px solid var(--line-soft); flex:0 0 auto;
}
.overlay__head h2{
  font-family:var(--serif); font-weight:400; font-size:1.2rem; margin:0; color:#f2ead9;
  letter-spacing:.04em;
}
.overlay__close{
  appearance:none; background:transparent; border:1px solid var(--line-soft); color:var(--paper-dim);
  width:30px; height:30px; border-radius:50%; font-size:1.1rem; cursor:pointer; transition:all .25s var(--ease);
}
.overlay__close:hover{ color:var(--gold); border-color:var(--line); transform:rotate(90deg); }
.overlay__body{ overflow:auto; padding:1.3rem; flex:1 1 auto; overscroll-behavior:contain; }

/* --- floor plan --- */
.plan-wrap{ display:grid; grid-template-columns:1fr; gap:1.2rem; }
@media (min-width:820px){ .plan-wrap{ grid-template-columns:1.55fr .95fr; } }
.plan-svg{ width:100%; height:auto; max-height:60vh; display:block; background:rgba(0,0,0,.3); border:1px solid var(--line-soft); }
.plan-svg .room{ fill:rgba(233,226,211,.045); stroke:rgba(217,164,65,.3); stroke-width:.9; cursor:pointer; transition:fill .25s var(--ease); }
.plan-svg .room:hover{ fill:rgba(217,164,65,.2); }
.plan-svg .room.is-now{ fill:rgba(217,164,65,.3); stroke:var(--gold); stroke-width:1.6; }
.plan-svg .link{ stroke:rgba(233,226,211,.2); stroke-width:.7; stroke-dasharray:2 2; }
.plan-svg .rlabel{ fill:var(--paper-mute); font-size:3.1px; font-family:var(--sans); letter-spacing:.28px; pointer-events:none; }
.plan-svg .rnum{ fill:var(--gold); font-size:6.4px; font-family:var(--serif); pointer-events:none; }
.plan-svg .you{ fill:var(--gold); }
.plan-list{ font-size:.82rem; }
.plan-list button{
  display:block; width:100%; text-align:left; appearance:none; cursor:pointer;
  background:transparent; border:0; border-bottom:1px solid var(--line-soft);
  padding:.55rem .3rem; color:var(--paper-dim); font-family:var(--serif); font-size:.88rem;
  transition:all .22s var(--ease);
}
.plan-list button:hover{ color:var(--gold); background:rgba(217,164,65,.07); padding-left:.7rem; }
.plan-list button.is-now{ color:var(--gold); }
.plan-list b{ font-family:var(--sans); font-size:.58rem; letter-spacing:.2em; color:var(--gold-dim); display:block; font-weight:600; }

/* --- timeline --- */
.tl{ position:relative; }
.tl__scale{
  position:relative; height:44px; border-bottom:1px solid var(--line-soft); margin-bottom:1rem;
}
.tl__scale i{
  position:absolute; bottom:0; width:1px; height:9px; background:rgba(233,226,211,.25);
}
.tl__scale b{
  position:absolute; bottom:13px; transform:translateX(-50%); font-weight:400;
  font-size:.62rem; letter-spacing:.14em; color:var(--paper-mute); font-family:var(--mono);
}
.tl__rows{ display:flex; flex-direction:column; gap:.28rem; }
.tl__era{
  position:relative; height:26px; cursor:pointer; border-radius:2px;
  background:rgba(233,226,211,.04); transition:background .25s var(--ease);
}
.tl__era:hover{ background:rgba(217,164,65,.1); }
.tl__era span{
  position:absolute; top:0; bottom:0; border-radius:2px;
  display:flex; align-items:center; padding:0 .5rem; overflow:hidden;
  font-size:.62rem; letter-spacing:.1em; white-space:nowrap; color:#0c0906; font-weight:600;
}
.tl__ev{
  display:grid; grid-template-columns:5.4rem 1fr; gap:.8rem; align-items:baseline;
  padding:.42rem .3rem; border-bottom:1px solid rgba(233,226,211,.07);
  cursor:pointer; transition:all .2s var(--ease);
}
.tl__ev:hover{ background:rgba(217,164,65,.08); }
.tl__ev time{ font-family:var(--mono); font-size:.68rem; color:var(--gold-dim); letter-spacing:.02em; }
.tl__ev p{ margin:0; font-family:var(--serif); font-size:.86rem; line-height:1.5; color:var(--paper-dim); }
.tl__ev p b{ color:#f0e8d8; font-weight:400; }
.tl__ev em{ font-style:normal; color:var(--paper-mute); font-size:.75rem; display:block; margin-top:.15rem; }
.tl__filter{ display:flex; gap:.3rem; flex-wrap:wrap; margin-bottom:1rem; }

/* --- index --- */
.idx-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:.5rem; }
.idx-card{
  appearance:none; cursor:pointer; text-align:left; font-family:inherit;
  background:rgba(233,226,211,.035); border:1px solid var(--line-soft); border-radius:2px;
  padding:.65rem .8rem; transition:all .25s var(--ease); color:var(--paper-dim);
}
.idx-card:hover{ background:rgba(217,164,65,.11); border-color:var(--line); transform:translateY(-2px); }
.idx-card b{ display:block; font-family:var(--serif); font-weight:400; font-size:.96rem; color:#f0e8d8; }
.idx-card i{ display:block; font-size:.68rem; font-style:normal; color:var(--paper-mute); margin-top:.2rem; letter-spacing:.04em; }
.idx-card u{ display:block; text-decoration:none; font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-dim); margin-top:.4rem; }
.idx-search{
  width:100%; background:rgba(0,0,0,.35); border:1px solid var(--line-soft); color:var(--paper);
  font-family:var(--serif); font-size:.95rem; padding:.6rem .85rem; border-radius:2px; margin-bottom:1rem;
}
.idx-search:focus{ outline:none; border-color:var(--line); }
.idx-sect{ font-family:var(--sans); font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-dim); margin:1.5rem 0 .7rem; }
.idx-sect:first-child{ margin-top:0; }

/* --- settings --- */
.set-row{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.75rem 0; border-bottom:1px solid var(--line-soft);
}
.set-row label{ font-family:var(--serif); font-size:.95rem; color:var(--paper); }
.set-row small{ display:block; font-family:var(--sans); font-size:.68rem; color:var(--paper-mute); margin-top:.2rem; max-width:46ch; line-height:1.5; }
.seg{ display:flex; border:1px solid var(--line-soft); border-radius:2px; overflow:hidden; flex:0 0 auto; }
.seg button{
  appearance:none; background:transparent; border:0; color:var(--paper-mute); cursor:pointer;
  font-family:inherit; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.4rem .7rem; transition:all .22s var(--ease);
}
.seg button:hover{ color:var(--paper); }
.seg button.is-on{ background:var(--gold); color:var(--ink); }
input[type=range]{ accent-color:var(--gold); width:150px; }

/* =========================================================================
   GALLERY TITLE CARD
   ========================================================================= */
.gcard{
  position:fixed; left:0; right:0; top:50%; transform:translateY(-50%); z-index:90;
  text-align:center; pointer-events:none; padding:0 6vw;
}
.gcard.is-in .gcard__num,
.gcard.is-in .gcard__title,
.gcard.is-in .gcard__years,
.gcard.is-in .gcard__line{ animation:gcIn 1.1s var(--ease) both; }
.gcard.is-in .gcard__title{ animation-delay:.12s; }
.gcard.is-in .gcard__years{ animation-delay:.24s; }
.gcard.is-in .gcard__line{ animation-delay:.36s; }
.gcard.is-out{ opacity:0; transition:opacity 1.1s var(--ease); }
@keyframes gcIn{ from{opacity:0; transform:translateY(16px); filter:blur(6px);} to{opacity:1; transform:none; filter:none;} }
.gcard__num{ font-family:var(--serif); font-size:.9rem; letter-spacing:.5em; color:var(--gold); margin-bottom:1rem; }
.gcard__title{
  font-family:var(--serif); font-size:clamp(2rem,6.5vw,4rem); line-height:1.05; color:#f6efe0;
  text-shadow:0 4px 40px rgba(0,0,0,.9);
}
.gcard__years{ font-family:var(--mono); font-size:.8rem; letter-spacing:.34em; color:var(--paper-mute); margin-top:.9rem; }
.gcard__line{
  font-family:var(--serif); font-style:italic; font-size:clamp(.9rem,2.2vw,1.1rem);
  color:var(--paper-dim); max-width:52ch; margin:1.4rem auto 0; line-height:1.65;
  text-shadow:0 2px 20px rgba(0,0,0,.9);
}

/* =========================================================================
   FADE
   ========================================================================= */
.fade{
  position:fixed; inset:0; z-index:300; background:#000; pointer-events:none;
  opacity:0; transition:opacity .8s var(--ease);
}
.fade.is-on{ opacity:1; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:720px){
  .hud__gtitle{ font-size:.86rem; max-width:38vw; }
  .hud__gnum{ font-size:1.15rem; padding-right:.55rem; }
  .tool{ min-width:44px; padding:.36rem .4rem; }
  .tool span{ font-size:.48rem; letter-spacing:.1em; }
  .panel{ width:100%; top:auto; height:76vh; border-left:0; border-top:1px solid var(--line);
          transform:translateY(100%); }
  .panel.is-open{ transform:none; }
  .panel__scroll{ padding:1.4rem 1.15rem 1rem; }
  .century__marks b:nth-child(even){ display:none; }
  .hud__bottom{ padding-bottom:calc(.6rem + var(--safe-b)); }
  .hud__tourbar{ bottom:calc(4.2rem + var(--safe-b)); width:94vw; }
  .tourbar__mid{ min-width:0; flex:1; }
  .captions{ bottom:calc(7.6rem + var(--safe-b)); font-size:.82rem; }
  .gcard__line{ font-size:.88rem; }
  .boot__controls{ display:none; }
}
@media (max-height:760px){
  .boot__title{ font-size:clamp(2.2rem,7vw,4.2rem); }
  .boot__eyebrow{ margin-bottom:.9rem; letter-spacing:.34em; }
  .boot__rule{ margin:1.1rem auto; }
  .boot__dek{ font-size:.9rem; line-height:1.62; max-width:56ch; }
  .boot__progress{ margin-top:1.5rem; }
  .boot__enter{ margin-top:1.4rem; gap:.5rem; }
  .btn{ padding:.66rem 1rem; }
  .boot__meta{ margin-top:1.3rem; }
}
@media (max-height:560px){
  .boot__dek{ display:none; }
  .boot__rule{ margin:.7rem auto; }
  .boot__sub{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.12s !important; }
}

/* =========================================================================
   TEXT EDITION (separate document shares this sheet)
   ========================================================================= */
body.text-edition{
  overflow:auto; touch-action:auto;
  background:#0c0a07;
  background-image:radial-gradient(120% 60% at 50% 0%, rgba(60,45,25,.35), transparent 70%);
}
.te-wrap{ max-width:78ch; margin:0 auto; padding:6vh 6vw 18vh; }
.te-wrap h1{
  font-family:var(--serif); font-weight:400; font-size:clamp(2.2rem,6vw,3.6rem);
  line-height:1.05; margin:0 0 .5rem; color:#f5eede;
}
.te-wrap .te-sub{ font-family:var(--serif); font-style:italic; color:var(--paper-mute); font-size:1.05rem; margin-bottom:2.5rem; }
.te-wrap h2{
  font-family:var(--serif); font-weight:400; font-size:1.9rem; color:#f2ead9;
  margin:4rem 0 .3rem; padding-top:2rem; border-top:1px solid var(--line);
}
.te-wrap h2 small{ display:block; font-family:var(--mono); font-size:.68rem; letter-spacing:.3em; color:var(--gold-dim); margin-bottom:.6rem; }
.te-wrap h3{ font-family:var(--serif); font-weight:400; font-size:1.28rem; color:#eee5d3; margin:2.6rem 0 .5rem; }
.te-wrap h4{ font-family:var(--sans); font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-dim); margin:1.9em 0 .7em; }
.te-wrap p,.te-wrap li{ font-family:var(--serif); font-size:1.02rem; line-height:1.82; color:var(--paper-dim); text-wrap:pretty; }
.te-wrap blockquote{ margin:1.5em 0; padding-left:1.2em; border-left:2px solid var(--blood); font-style:italic; color:#e8dfcb; }
.te-wrap blockquote cite{ display:block; font-style:normal; font-family:var(--sans); font-size:.66rem; letter-spacing:.15em; text-transform:uppercase; color:var(--paper-mute); margin-top:.7em; }
.te-wrap .contested{ background:rgba(142,43,32,.1); border:1px solid rgba(142,43,32,.32); padding:1em 1.2em; margin:1.5em 0; }
.te-wrap .contested b{ display:block; font-family:var(--sans); font-size:.58rem; letter-spacing:.26em; text-transform:uppercase; color:var(--blood-lt); margin-bottom:.5em; }
.te-wrap dl.kv{ display:grid; grid-template-columns:auto 1fr; gap:.35em 1.2em; margin:0 0 1.5em; }
.te-wrap dl.kv dt{ font-family:var(--sans); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--paper-mute); padding-top:.5em; }
.te-wrap dl.kv dd{ margin:0; font-family:var(--serif); color:var(--paper); line-height:1.7; }
.te-wrap a{ color:var(--gold); }
.te-nav{ position:sticky; top:0; background:rgba(12,10,7,.94); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-soft); padding:.7rem 6vw; z-index:5; display:flex; gap:1.2rem; flex-wrap:wrap; }
.te-nav a{ font-family:var(--sans); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--paper-mute); text-decoration:none; }
.te-nav a:hover{ color:var(--gold); }
.te-toc{ columns:2; column-gap:2.5rem; margin:2rem 0 3rem; }
.te-toc a{ display:block; font-family:var(--serif); font-size:.92rem; padding:.3rem 0; text-decoration:none; color:var(--paper-dim); border-bottom:1px solid rgba(233,226,211,.07); break-inside:avoid; }
.te-toc a:hover{ color:var(--gold); }
@media (max-width:640px){ .te-toc{ columns:1; } }
.te-fig{ border-left:2px solid var(--gold-dim); padding-left:1.1rem; margin:2rem 0; }
.te-fig .te-fig-name{ font-family:var(--serif); font-size:1.2rem; color:#f2ead9; }
.te-fig .te-fig-dates{ font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; color:var(--paper-mute); margin-bottom:.7rem; }
.skip-link{ position:absolute; left:-9999px; }
.skip-link:focus{ left:1rem; top:1rem; z-index:99; background:var(--gold); color:#000; padding:.6rem 1rem; }