@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Libre+Caslon+Display&display=swap');
:root{--paper:#f5f1e8;--ink:#302e26;--muted:#7d7b6f;--line:#dedace;--accent:#766d42;--serif:'Libre Caslon Display',Georgia,serif;--sans:'DM Sans',sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:14px var(--sans)}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid #8f5c2c;outline-offset:4px}button{border:1px solid var(--line);background:transparent;border-radius:5px;padding:10px 14px}button:disabled{opacity:.35;cursor:default}button:hover:not(:disabled){background:#e9e3d6}a{color:inherit}.masthead{height:77px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 32px;gap:30px}.brand{text-decoration:none;display:flex;gap:12px;align-items:center;font:28px var(--serif)}.edition,.eyebrow{font-size:10px;letter-spacing:2px;font-weight:600;color:var(--accent)}.masthead .quiet{margin-left:auto}.quiet{border:0;font-size:11px}.edition{color:var(--muted)}main{display:grid;grid-template-columns:minmax(0,1fr) 365px;min-height:calc(100vh - 121px)}.explorer{min-width:0;position:relative;display:flex;flex-direction:column}.scene-heading{padding:35px 36px 0;z-index:2}.eyebrow{margin:0 0 14px}h1{font:58px/.98 var(--serif);letter-spacing:-1.8px;margin:0}h1 em{color:var(--accent);font-weight:400}.subtitle{color:var(--muted);font-size:12px;margin:15px 0 22px}.switch{display:inline-flex;border:1px solid var(--line);padding:3px;border-radius:6px;gap:3px;background:#f8f5ee}.switch button{border:0;font-size:11px;padding:9px 12px}.switch button[aria-pressed=true]{background:#353b31;color:#fff;box-shadow:0 2px 4px #0001}#viewport{position:relative;min-height:390px;flex:1;height:calc(100vh - 432px);overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:none}#markers{position:absolute;inset:0;pointer-events:none}.marker{pointer-events:auto;position:absolute;width:27px;height:27px;padding:0;border-radius:50%;background:#fbf8f0;color:#5d6349;border:1px solid #a8ab8b;box-shadow:0 3px 8px #0002;font-size:11px;transform:translate(-50%,-50%)}.marker[aria-current=true]{background:#535b3d;color:white;border-color:#fff;box-shadow:0 0 0 5px #535b3d22}.compass{position:absolute;left:35px;bottom:30px;color:#8b897b;text-align:center;font-size:13px;line-height:1.3;pointer-events:none}.compass span{font-size:8px;letter-spacing:1px}.scene-caption{position:absolute;bottom:30px;right:30px;text-align:right;pointer-events:none;font-size:9px;letter-spacing:1.8px;color:#747867}.scene-caption small{display:block;margin-top:7px;letter-spacing:.3px;font-size:10px}.view-tools{position:sticky;bottom:0;z-index:3;display:flex;flex-wrap:wrap;gap:8px 17px;align-items:center;justify-content:center;padding:12px 28px;background:linear-gradient(var(--line),var(--line)) top/calc(100% - 56px) 1px no-repeat,#f5f1e8e6;backdrop-filter:blur(6px)}.view-tools label{font-size:10px;white-space:nowrap;display:flex;align-items:center;gap:4px}.view-tools button{white-space:nowrap}input{accent-color:#606747}.hint{text-align:center;font-size:10px;color:var(--muted);margin:0 15px 20px}.reader{background:#fcfaf5;border-left:1px solid var(--line);padding:28px 27px;display:flex;flex-direction:column}.reader-top{display:flex;justify-content:space-between;align-items:baseline}.reader-top .eyebrow{font-size:9px}.reader-top span{font-size:10px;color:var(--muted)}#stops{display:flex;gap:6px;padding:6px 0 25px;border-bottom:1px solid var(--line);flex-wrap:wrap}.stop{border-radius:50%;width:28px;height:28px;padding:0;font-size:10px}.stop[aria-current=step]{background:#626b4a;color:white;border-color:#626b4a}#reading{padding-top:29px}#reading .chapter{color:var(--accent);letter-spacing:1.8px;font-size:9px}h2{font:39px/1.07 var(--serif);letter-spacing:-.7px;margin:12px 0 18px}.lead{font:20px/1.45 var(--serif);color:#625e4c}#reading p:not(.chapter):not(.lead){font-size:12px;line-height:1.9;color:#656358}.fact{margin:22px 0;padding:16px 17px;background:#efeee4;border-left:2px solid #959c73}.fact strong{display:block;font-size:9px;letter-spacing:1.5px;margin-bottom:8px;color:#737a56}.fact span{font:20px var(--serif)}.references{display:flex;flex-wrap:wrap;gap:7px}.references a{font-size:10px;color:#64704e;text-underline-offset:3px;padding:4px 0}.tour-controls{display:flex;justify-content:space-between;gap:12px;margin-top:28px}.tour-controls button{font-size:11px;flex:1}#next{background:#626b4a;color:white;border-color:#626b4a}.reader-foot{font-size:9px;line-height:1.8;color:#929083;margin-top:auto;padding-top:30px}dialog{border:1px solid var(--line);border-radius:10px;max-width:600px;padding:35px;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#24291f88;backdrop-filter:blur(4px)}dialog p{line-height:1.7;font-size:14px}#about-close{float:right}#fallback{position:absolute;top:40%;left:10%;right:10%;background:var(--paper);padding:20px;line-height:1.8}.reader a:hover{color:#9b612c}@media(min-width:1500px){main{grid-template-columns:minmax(0,1fr) 430px}.reader{padding:35px 40px}.scene-heading{padding-left:55px}h1{font-size:70px}#reading p:not(.chapter):not(.lead){font-size:14px}}@media(max-width:1100px){.view-tools{column-gap:10px;padding-inline:20px}.view-tools .quiet{padding-inline:10px}}@media(max-width:1000px){main{grid-template-columns:minmax(0,1fr) 320px}.masthead{padding:0 20px}.edition{display:none}.scene-heading{padding:26px 24px 0}h1{font-size:48px}.view-tools{gap:8px;flex-wrap:wrap}.reader{padding:25px 22px}}@media(max-width:720px){.masthead{height:65px;padding:0 18px}.brand{font-size:24px}.masthead .quiet{max-width:110px;font-size:9px;text-align:right}main{display:block}.scene-heading{padding:26px 24px 0}h1{font-size:46px}#viewport{height:380px;min-height:320px}.reader{border-left:0;border-top:1px solid var(--line);padding:28px 25px}.reader-foot{margin-bottom:0}.view-tools{gap:12px}.scene-caption{right:20px;bottom:20px}.compass{left:20px;bottom:20px}#reading{padding-top:20px}.hint{line-height:1.8}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.leader-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.leader-lines line{stroke:#8c9275;stroke-width:1;opacity:.65}#reading p:not(.chapter):not(.lead){font-size:14px;line-height:1.8}.references a{font-size:12px}
/* Free walking in the Blender temple */
#walk-hud{position:absolute;top:16px;left:16px;display:flex;gap:8px}
#walk-hud button{background:#fbf8f0e8;font-size:11px;box-shadow:0 3px 10px #0002}
#walk-hud button[aria-pressed=true]{background:#353b31;color:#fff}
.joystick{position:absolute;left:24px;bottom:24px;width:96px;height:96px;border-radius:50%;background:#fbf8f055;border:1px solid #fbf8f0aa;box-shadow:0 3px 12px #0002;touch-action:none;cursor:grab}
.joystick span{position:absolute;left:30px;top:30px;width:36px;height:36px;border-radius:50%;background:#fbf8f0;box-shadow:0 2px 6px #0003;pointer-events:none}
.minimap{position:absolute;top:16px;right:16px;border-radius:6px;box-shadow:0 3px 12px #0002;pointer-events:none}
#viewport:has(.joystick:not([hidden])) .compass{display:none}
dialog.film{max-width:min(960px,94vw);padding:28px}
dialog.film video{width:100%;border-radius:6px;background:#1b1a17;aspect-ratio:16/9;margin:6px 0 4px}
@media(max-width:720px){.minimap{transform:scale(.8);transform-origin:top right}.joystick{left:16px;bottom:16px}#walk-hud{top:12px;left:12px}}
#walk-hud[hidden],.joystick[hidden],.minimap[hidden]{display:none}
#loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:11px;letter-spacing:1.5px;color:#747867;text-transform:uppercase}
#loading[hidden]{display:none}
/* The stop card: each stop's reading over the scene while walking */
#stop-card{position:absolute;right:16px;bottom:16px;width:min(410px,calc(100% - 150px));max-height:calc(100% - 150px);overflow:auto;background:#fbf8f0f2;border:1px solid var(--line);border-radius:10px;padding:18px 20px 14px;box-shadow:0 10px 30px #0003;backdrop-filter:blur(6px);z-index:2}
#stop-card[hidden]{display:none}
#stop-card .chapter{font-size:9px;letter-spacing:1.6px;color:var(--muted);margin:0 24px 6px 0}
#stop-card h2{font-size:26px;margin:0 0 8px;line-height:1.1}
#stop-card .lead{font-size:15px;line-height:1.5;margin:0 0 10px}
#card-more p{font-size:13px;line-height:1.65;margin:0 0 10px}
#card-more .card-fact{font-size:12px;border-left:2px solid #8f5c2c;padding-left:10px;color:#4b4a40}
#card-more .references{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:12px;margin-bottom:6px}
#card-close{position:absolute;top:8px;right:8px;padding:4px 9px;font-size:16px;line-height:1}
.card-actions{display:flex;gap:8px;justify-content:flex-end;align-items:center;margin-top:6px}
.card-actions button{font-size:11px;padding:8px 12px}
#card-continue{background:#353b31;color:#fff;border-color:#353b31}
#card-continue:hover:not(:disabled){background:#4a5244}
#card-toggle{display:none}
.card-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:#0000;border-radius:0 0 10px 10px;overflow:hidden}
.card-progress span{display:block;height:100%;width:0;background:#8f5c2c}
#viewport:has(#stop-card:not([hidden])) .scene-caption{display:none}
@media(max-width:720px){
 #stop-card{left:12px;right:12px;width:auto;bottom:126px;max-height:calc(100% - 190px);padding:14px 16px 12px}
 #stop-card h2{font-size:21px}
 #stop-card .lead{font-size:14px;margin-bottom:4px}
 #card-toggle{display:inline-block}
 #stop-card:not(.expanded) #card-more{display:none}
}
@media(max-width:720px){#viewport{flex:none}.explorer.walking #viewport{height:min(74vh,640px)}}
/* Measurements drawn over the scene */
.leader-lines line.measure{stroke:#8f5c2c;stroke-width:2.2;stroke-linecap:round;opacity:1;filter:drop-shadow(0 0 1.5px #fff)}
.measure-label{position:absolute;transform:translate(-50%,-50%);background:#8f5c2c;color:#fff;font-size:10px;letter-spacing:.3px;padding:3px 7px;border-radius:10px;white-space:nowrap;pointer-events:none;box-shadow:0 2px 6px #0003}
.measure-label[hidden]{display:none}
.switch.sites{flex-wrap:wrap;max-width:560px}
@media(max-width:720px){.switch.sites{max-width:none}.switch.sites button{padding:8px 10px}}
/* Jerusalem's timeline of eras */
#era-bar{display:flex;margin:0 28px;border-top:1px solid var(--line);position:relative;padding:14px 0 10px}
#era-bar[hidden]{display:none}
#era-bar::before{content:"";position:absolute;left:10%;right:10%;top:22px;height:1px;background:#b9b29c}
#era-bar button{flex:1;border:0;background:none;padding:0 4px;display:flex;flex-direction:column;align-items:center;gap:3px;position:relative;font-size:11px}
#era-bar button::before{content:"";width:11px;height:11px;border-radius:50%;background:var(--paper);border:1.5px solid #8c9275;margin-bottom:4px;z-index:1}
#era-bar button[aria-pressed=true]::before{background:#8f5c2c;border-color:#8f5c2c;box-shadow:0 0 0 4px #8f5c2c22}
#era-bar button span{font-size:9px;color:var(--muted);letter-spacing:.3px}
#era-bar button[aria-pressed=true] strong{color:#8f5c2c}
@media(max-width:720px){#era-bar{margin:0 12px}#era-bar button{font-size:10px}}
/* Phones: a compact heading, and one scrolling row each of sites and view controls, so the model and its controls fill the screen */
@media(max-width:720px){
 .scene-heading{padding:14px 16px 0}
 .scene-heading .eyebrow{margin-bottom:6px}
 h1{font-size:30px;letter-spacing:-.8px}
 .subtitle{display:none}
 .switch.sites{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:12px -16px 10px;padding:3px 16px;border:0;border-radius:0;background:none;scroll-padding:0 16px}
 .switch.sites::-webkit-scrollbar{display:none}
 .switch.sites button{flex:none;white-space:nowrap;border:1px solid var(--line);border-radius:16px;background:#f8f5ee}
 .switch.sites button[aria-pressed=true]{background:#353b31;border-color:#353b31;color:#fff}
 .view-tools{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;justify-content:flex-start;gap:12px;padding:6px 16px;background-size:calc(100% - 32px) 1px}
 .view-tools::-webkit-scrollbar{display:none}
 .view-tools>*{flex:none}
 #viewport{height:max(360px,calc(100svh - 295px));max-height:720px}
 :where(.explorer:has(#era-bar:not([hidden]))) #viewport{height:max(360px,calc(100svh - 368px))}
}
/* Wider screens: the masthead, the title and sites, and the guided walk share one narrow sidebar on the left,
   and the model fills the rest of the screen, held in place while the sidebar scrolls */
@media(min-width:721px){
 main{--side:292px;--pad:20px;grid-template-columns:var(--side) minmax(0,1fr);grid-template-rows:auto auto 1fr;background:#fcfaf5}
 .masthead,.scene-heading,.reader{grid-column:1;padding-inline:var(--pad)}
 .masthead{grid-row:1;height:auto;flex-direction:column;align-items:flex-start;gap:4px;padding-block:18px 14px}
 .masthead .edition{display:none}
 .masthead .quiet{margin:0;padding:0;font-size:10px;color:var(--muted)}
 .scene-heading{grid-row:2;padding-block:22px 20px}
 .scene-heading .eyebrow{margin-bottom:10px}
 .scene-heading h1{font-size:38px;letter-spacing:-1px}
 .subtitle{margin:10px 0 16px}
 .switch.sites{display:grid;grid-template-columns:1fr 1fr;max-width:none}
 .switch.sites button{text-align:left;padding:7px 6px}
 .reader{grid-row:3;border-left:0;border-top:1px solid var(--line);padding-block:20px 24px}
 #reading{padding-top:20px}
 #reading h2{font-size:30px;margin:10px 0 14px}
 #reading .lead{font-size:17px}
 #reading p:not(.chapter):not(.lead){font-size:13px;line-height:1.75}
 .fact span{font-size:17px}
 .explorer{grid-column:2;grid-row:1/-1;position:sticky;top:var(--appnav-h,0px);height:calc(100vh - var(--appnav-h,0px));min-height:480px;border-left:1px solid var(--line);background:var(--paper)}
 #viewport{flex:1 1 0;height:auto;min-height:300px}
}
@media(min-width:1500px){main{--side:344px;--pad:30px}.scene-heading h1{font-size:44px}#reading h2{font-size:34px}#reading p:not(.chapter):not(.lead){font-size:14px}}
@media(min-width:721px) and (max-width:1000px){main{--side:256px;--pad:18px}.scene-heading h1{font-size:32px}#reading h2{font-size:26px}}