*, *::before, *::after { box-sizing:border-box; }
:root {
  --bg:#090909; --bg-2:#10100f; --bg-3:#171613; --panel:#12110f;
  --gold:#c9a24d; --gold-bright:#ecd082; --gold-dim:#8f6f32; --gold-border:rgba(201,162,77,.27);
  --text:#eee6d6; --text-dim:#afa493; --text-faint:#756d60; --border:rgba(255,255,255,.085);
  --blue:#6f9eb0; --purple:#8c79a9; --bronze:#b97b48; --accent:#d1aa54;
  --cinzel:'Cinzel',serif; --crimson:'Crimson Text',serif;
}
html { scroll-behavior:smooth; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 50% -15%,rgba(201,162,77,.13),transparent 34%),var(--bg); color:var(--text); font-family:var(--crimson); font-size:18px; line-height:1.55; }
a { color:var(--gold-bright); }
button { font:inherit; }
.temple-hero { position:relative; overflow:hidden; padding:50px 20px 28px; text-align:center; background:linear-gradient(180deg,#16130e,#0b0b0a); border-bottom:1px solid var(--gold-border); }
.temple-hero::before, .temple-hero::after { content:""; position:absolute; left:50%; transform:translateX(-50%); border:1px solid rgba(201,162,77,.1); }
.temple-hero::before { width:78%; height:160%; top:28px; border-bottom:0; }
.temple-hero::after { width:58%; height:140%; top:52px; border-bottom:0; }
.temple-eyebrow { position:relative; z-index:1; display:block; color:var(--gold); font-family:var(--cinzel); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; }
.temple-hero h1 { position:relative; z-index:1; margin:7px 0 5px; color:var(--gold-bright); font-family:var(--cinzel); font-weight:500; font-size:clamp(1.7rem,4vw,3.15rem); letter-spacing:.045em; }
.temple-hero p { position:relative; z-index:1; max-width:760px; margin:0 auto; color:var(--text-dim); font-size:1.04rem; }
.temple-app { width:min(1460px,100%); margin:0 auto; padding:23px 18px 90px; }
.era-shell { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:17px; }
.era-tabs { display:flex; gap:7px; flex-wrap:wrap; }
.era-tab, .sources-button { cursor:pointer; border:1px solid var(--border); border-radius:999px; background:var(--bg-2); color:var(--text-dim); padding:8px 15px; font-family:var(--cinzel); font-size:.69rem; letter-spacing:.07em; }
.era-tab:hover, .sources-button:hover { color:var(--text); border-color:var(--gold-border); }
.era-tab[aria-pressed="true"] { color:#13100a; background:var(--gold-bright); border-color:var(--gold-bright); }
.explorer-layout { display:grid; grid-template-columns:minmax(560px,1.25fr) minmax(350px,.75fr); gap:18px; align-items:start; }
.plan-column { min-width:0; }
.era-intro { display:grid; grid-template-columns:1fr auto; gap:14px; align-items:end; margin-bottom:12px; }
.era-intro h2 { margin:0; color:var(--gold-bright); font-family:var(--cinzel); font-size:1.12rem; font-weight:500; }
.era-period { color:var(--gold); font-family:var(--cinzel); font-size:.65rem; letter-spacing:.11em; text-transform:uppercase; }
.era-description { margin:7px 0 0; max-width:820px; color:var(--text-dim); font-size:.91rem; }
.orientation { color:var(--text-faint); font-size:.76rem; text-align:right; }
.orientation strong { display:block; color:var(--gold); font-family:var(--cinzel); font-size:.66rem; letter-spacing:.1em; }
.plan-frame { position:relative; padding:32px; border:1px solid var(--gold-border); border-radius:12px; background:linear-gradient(135deg,rgba(201,162,77,.07),transparent 35%),#0e0e0d; box-shadow:0 20px 50px rgba(0,0,0,.25); }
.plan-frame::after { content:"EAST →"; position:absolute; right:15px; top:9px; color:var(--gold); font-family:var(--cinzel); font-size:.58rem; letter-spacing:.13em; }
.sacred-plan { position:relative; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-template-rows:repeat(8,minmax(42px,1fr)); gap:0; min-height:520px; isolation:isolate; }
.plan-zone { position:relative; z-index:0; grid-column:var(--col); grid-row:var(--row); display:flex; align-items:flex-end; justify-content:center; padding:6px; border:1px solid rgba(201,162,77,.22); background:rgba(201,162,77,.025); color:var(--text-faint); font-family:var(--cinzel); font-size:.55rem; letter-spacing:.09em; text-align:center; text-transform:uppercase; }
.plan-zone.sanctuary { border:2px solid var(--gold-dim); background:rgba(201,162,77,.07); }
.plan-zone.stone { background:repeating-linear-gradient(0deg,rgba(201,162,77,.055) 0 1px,transparent 1px 18px),rgba(201,162,77,.055); }
.plan-zone.holy { border-color:rgba(111,158,176,.45); background:rgba(111,158,176,.075); }
.plan-zone.most-holy { border-color:rgba(140,121,169,.55); background:rgba(140,121,169,.12); }
.plan-zone.most-holy.empty { background:repeating-linear-gradient(135deg,rgba(140,121,169,.09) 0 8px,rgba(140,121,169,.02) 8px 16px); }
.plan-zone.porch { border-color:rgba(185,123,72,.5); background:rgba(185,123,72,.08); }
.plan-zone.women { background:rgba(111,158,176,.05); }
.plan-zone.israel { background:rgba(185,123,72,.06); }
.plan-zone.priests { background:rgba(201,162,77,.09); }
.plan-item { position:relative; z-index:3; grid-column:var(--col); grid-row:var(--row); align-self:center; justify-self:center; display:grid; place-items:center; gap:2px; width:min(92%,100px); min-height:48px; cursor:pointer; border:1px solid rgba(201,162,77,.42); border-radius:8px; padding:5px 6px; background:rgba(17,16,14,.94); color:var(--text); box-shadow:0 7px 17px rgba(0,0,0,.35); text-align:center; transition:transform .15s ease,border-color .15s ease,background .15s ease; }
.plan-item:hover { z-index:5; transform:translateY(-2px); border-color:var(--gold-bright); }
.plan-item[aria-pressed="true"] { z-index:5; border-color:var(--gold-bright); background:rgba(201,162,77,.18); box-shadow:0 0 0 2px rgba(201,162,77,.18),0 9px 24px rgba(0,0,0,.45); }
.plan-item[data-concept="altar"] { border-color:rgba(185,123,72,.75); }
.plan-item[data-concept="laver"] { border-color:rgba(111,158,176,.75); }
.plan-item[data-concept="mostHoly"], .plan-item[data-concept="ark"] { border-color:rgba(140,121,169,.8); }
.plan-item[data-status] { border-style:dashed; opacity:.88; }
.plan-symbol { color:var(--gold); font-size:1rem; line-height:1; }
.plan-name { display:block; overflow:hidden; max-width:100%; color:inherit; font-family:var(--cinzel); font-size:.52rem; line-height:1.2; text-overflow:ellipsis; }
.plan-legend { display:flex; gap:14px; flex-wrap:wrap; margin-top:10px; color:var(--text-faint); font-size:.73rem; }
.plan-legend span { display:inline-flex; align-items:center; gap:6px; }
.plan-legend i { width:10px; height:10px; border:1px solid var(--gold); background:rgba(201,162,77,.08); }
.plan-legend i.holy { border-color:var(--blue); background:rgba(111,158,176,.15); }
.plan-legend i.most { border-color:var(--purple); background:rgba(140,121,169,.2); }
.detail-panel { position:sticky; top:18px; min-width:0; border:1px solid var(--gold-border); border-radius:12px; background:var(--panel); overflow:hidden; }
.detail-head { padding:21px 22px 17px; background:linear-gradient(135deg,rgba(201,162,77,.12),transparent); border-bottom:1px solid var(--border); }
.detail-concept { color:var(--gold); font-family:var(--cinzel); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; }
.detail-head h2 { margin:4px 0 2px; color:var(--gold-bright); font-family:var(--cinzel); font-size:1.23rem; font-weight:500; }
.detail-era { color:var(--text-faint); font-size:.8rem; }
.detail-scripture { display:inline-block; margin-top:9px; text-decoration:none; font-weight:600; }
.detail-body { padding:0 22px 21px; }
.detail-section { padding-top:16px; }
.detail-section + .detail-section { margin-top:15px; border-top:1px solid var(--border); }
.detail-section h3 { margin:0 0 7px; color:var(--gold); font-family:var(--cinzel); font-size:.65rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; }
.detail-section p { margin:0; color:var(--text-dim); font-size:.9rem; }
.fulfillment { border-left:3px solid var(--gold); padding-left:12px; }
.reference-links { display:flex; gap:6px; flex-wrap:wrap; margin-top:9px; }
.reference-links a { border:1px solid var(--border); border-radius:999px; padding:4px 9px; color:var(--text); text-decoration:none; font-size:.76rem; }
.reference-links a:hover { color:var(--gold-bright); border-color:var(--gold-border); }
.status-label { display:inline-block; margin-top:9px; border:1px dashed var(--purple); border-radius:999px; padding:3px 9px; color:#b9a9d0; font-size:.72rem; }
.continuity { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-top:9px; }
.continuity-item { min-width:0; padding:8px; background:var(--bg-3); border:0; border-top:2px solid var(--border); color:var(--text); font-family:var(--crimson); text-align:left; }
.continuity-item:is(button) { cursor:pointer; }
.continuity-item:is(button):hover { background:rgba(201,162,77,.08); }
.continuity-item.current { border-color:var(--gold); }
.continuity-item strong { display:block; overflow:hidden; color:var(--text); font-family:var(--cinzel); font-size:.57rem; text-overflow:ellipsis; white-space:nowrap; }
.continuity-item span { display:block; color:var(--text-faint); font-size:.69rem; margin-top:2px; }
.source-strip { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.source-strip a { color:var(--text-faint); font-size:.75rem; text-decoration:none; }
.source-strip a + a::before { content:"·"; margin-right:6px; color:var(--gold-dim); }
dialog { width:min(680px,calc(100% - 24px)); max-height:82vh; color:var(--text); border:1px solid var(--gold-border); border-radius:12px; padding:0; background:#11100e; box-shadow:0 28px 80px rgba(0,0,0,.7); }
dialog::backdrop { background:rgba(0,0,0,.78); backdrop-filter:blur(3px); }
.source-dialog-inner { position:relative; padding:26px; }
.source-dialog-inner h2 { margin:0 0 5px; color:var(--gold-bright); font-family:var(--cinzel); font-size:1.1rem; }
.source-dialog-inner p { color:var(--text-dim); }
.source-dialog-close { position:absolute; right:13px; top:10px; cursor:pointer; border:0; background:transparent; color:var(--text-dim); font-size:1.5rem; }
.source-list { display:grid; gap:7px; margin-top:15px; }
.source-list a { padding:9px 11px; color:var(--text); background:var(--bg-3); border:1px solid var(--border); border-radius:7px; text-decoration:none; }
.study-note { margin:18px 2px 0; color:var(--text-faint); font-size:.76rem; }
@media (max-width:1080px) {
  .explorer-layout { grid-template-columns:1fr; }
  .detail-panel { position:static; }
}
@media (max-width:760px) {
  .temple-app { padding:18px 11px 70px; }
  .era-shell, .era-intro { display:block; }
  .sources-button { margin-top:9px; }
  .orientation { margin-top:8px; text-align:left; }
  .plan-frame { padding:25px 10px 15px; overflow-x:auto; }
  .sacred-plan { min-width:660px; min-height:440px; }
}
@media (max-width:520px) {
  body { font-size:17px; }
  .temple-hero { padding:39px 15px 24px; }
  .era-tabs { display:grid; grid-template-columns:1fr; }
  .era-tab { text-align:left; }
  .continuity { grid-template-columns:1fr; }
}
@media print {
  body { background:#fff; color:#111; font-size:11pt; }
  .tb-bible-nav, .era-shell, .sources-button { display:none !important; }
  .temple-hero { background:#fff; border-color:#777; padding:18px; }
  .temple-hero h1, .era-intro h2, .detail-head h2, .detail-section h3 { color:#111; }
  .temple-hero p, .era-description, .detail-section p { color:#333; }
  .explorer-layout { display:block; }
  .plan-frame, .detail-panel { background:#fff; border-color:#999; }
  .detail-panel { position:static; margin-top:14px; }
}