.e2-room { --e2-paper:#d8ddd3; --e2-ink:#233c31; color:var(--e2-ink); background:var(--e2-paper); }
.e2-opening { position:relative; height:900px; overflow:hidden; }
.e2-period { position:absolute; top:36px; left:5vw; font-size:13px; }
.e2-opening h1 { position:absolute; top:110px; left:5vw; z-index:2; margin:0; font:600 97px/1.25 var(--serif); letter-spacing:.015em; }
.e2-location { position:absolute; top:395px; left:5vw; font-size:15px; }
.e2-opening-photo { position:absolute; left:38%; top:195px; width:min(57%,812px); margin:0; }
.e2-opening-photo button { width:100%; padding:0; display:block; }
.e2-opening-photo img { width:100%; height:auto; display:block; }
.e2-opening-photo figcaption { text-align:right; font-size:11px; margin-top:15px; }
.e2-opening-book { position:absolute; left:30%; top:535px; width:153px; transform:rotate(-7deg); z-index:2; }
.e2-opening-book img { display:block; width:100%; height:auto; box-shadow:6px 9px 20px #20362d29; }
.e2-opening-book span { display:block; margin-top:13px; font-size:12px; line-height:1.8; }
.e2-opening-copy { position:absolute; left:5vw; top:525px; max-width:250px; font:20px/1.9 var(--serif); }
.e2-down { position:absolute; bottom:30px; left:5vw; font-size:14px; text-decoration:underline; text-underline-offset:6px; padding:10px 0; }
.e2-nav { position:sticky; top:66px; z-index:5; display:flex; gap:40px; justify-content:center; padding:5px 20px; background:#e9e9df; border-bottom:1px solid #bcc6b7; }
.e2-nav a { display:flex; align-items:center; min-height:44px; font-size:13px; }
.e2-workroom { padding:80px 6vw 90px; display:grid; grid-template-columns:1fr 1.4fr; gap:6vw; align-items:start; scroll-margin-top:140px; }
.e2-room h2 { font:500 clamp(35px,3.5vw,53px)/1.45 var(--serif); margin:0 0 30px; }
.e2-context>p,.e2-practice-copy>p { font:19px/1.95 var(--serif); margin:0 0 25px; }
.e2-photo-frame { overflow:hidden; width:100%; aspect-ratio:812/517; background:#acb4a7; }
.e2-photo-frame img { display:block; width:100%; height:auto; transition:transform 350ms ease; }
.e2-photo-study nav { display:flex; flex-wrap:wrap; gap:18px; margin-top:17px; }
.e2-photo-study nav button { font-size:13px; padding:10px 0; min-height:44px; }
.e2-photo-study nav button[aria-pressed=true] { text-decoration:underline; text-underline-offset:7px; }
.e2-photo-study>p { font:15px/1.8 var(--sans); margin:10px 0; min-height:54px; }
.e2-source-link { font:13px/1.8 var(--sans); text-decoration:underline; text-underline-offset:5px; padding:12px 0; min-height:44px; }
.e2-arrangements { display:grid; grid-template-columns:1.1fr 1fr; gap:9vw; padding:80px 9vw 100px; background:#eeece1; scroll-margin-top:140px; }
.e2-practice-copy .e2-dateline { font:13px/1.8 var(--sans); margin-bottom:35px; }
.e2-material-study { align-self:center; background:#e7e4d9; padding:30px 38px; text-align:center; }
.e2-material-study>p:first-child { font-size:13px; }
.e2-material-options { display:flex; justify-content:center; gap:35px; margin:20px 0 0; }
.e2-material-options button { min-height:44px; padding:5px 0; font-size:16px; }
.e2-material-options button[aria-pressed=true] { text-decoration:underline; text-underline-offset:8px; }
.e2-shovel svg { width:180px; height:230px; margin:5px 0; color:#33493e; }
.e2-material-study h3 { font:500 27px var(--serif); }
.e2-material-study>p { font:15px/1.9 var(--serif); margin:20px 0; }
.e2-material-study small { display:block; font:11px/1.8 var(--sans); color:#65715d; }
.e2-plain-links { display:flex; flex-wrap:wrap; gap:18px; font:13px/1.9 var(--sans); }
.e2-plain-links a,.e2-plain-links button { text-decoration:underline; text-underline-offset:5px; padding:8px 0; min-height:44px; }
.e2-connections { padding:70px 10vw 85px; min-height:calc(100svh - 125px); background:#354a42; color:#f0ede0; scroll-margin-top:140px; }
.e2-connections>p:first-child { font-size:13px; margin-bottom:30px; }
.e2-connections>div { display:flex; flex-wrap:wrap; gap:24px; margin-top:35px; }
.e2-connections a { font-size:15px; text-decoration:underline; text-underline-offset:6px; padding:8px 0; }
.e2-boundary { max-width:740px; font:13px/1.9 var(--sans); margin-top:50px; color:#c8d1c4; }
.e2-original { clear:both; }
.e2-original>p { font:14px/1.9 var(--sans); }
.e2-original-image { display:block; position:relative; margin:24px 0; }
.e2-original-image img { display:block; width:100%; height:auto; }
.e2-original-image span { display:block; margin-top:12px; font-size:13px; }
dialog:has(.e2-original) { width:min(920px,97vw); }
.e2-workroom:focus,.e2-arrangements:focus,.e2-connections:focus { outline:none; }
@media(min-width:701px) and (max-width:1100px){
 .e2-opening { height:1070px; } .e2-opening h1 { font-size:77px; top:100px; }
 .e2-location { top:320px; } .e2-opening-photo { left:25%; top:390px; width:70%; }
 .e2-opening-copy { top:790px; max-width:320px; font-size:18px; } .e2-opening-book { left:65%; top:700px; width:125px; }
 .e2-opening-photo figcaption { text-align:left; max-width:275px; line-height:1.8; }
 .e2-workroom { grid-template-columns:1fr; } .e2-context { max-width:650px; } .e2-arrangements { gap:5vw; padding:60px 6vw; }
 .e2-material-study { padding:25px; }
}
@media(max-width:700px){
 .e2-opening { height:850px; }
 .e2-period { top:25px; left:24px; font-size:11px; }
 .e2-opening h1 { top:80px; left:24px; font-size:59px; }
 .e2-location { top:251px; left:24px; font-size:12px; }
 .e2-opening-photo { top:315px; left:24px; width:calc(100% - 48px); }
 .e2-opening-photo figcaption { font-size:9px; text-align:left; line-height:1.7; margin-top:10px; }
 .e2-opening-book { width:90px; left:auto; right:29px; top:566px; }
 .e2-opening-book span { font-size:10px; margin-top:9px; width:130px; position:relative; left:-32px; transform:rotate(7deg); text-align:right; }
 .e2-opening-copy { left:24px; top:578px; max-width:calc(100% - 158px); font-size:18px; }
 .e2-down { left:24px; bottom:23px; font-size:13px; }
 .e2-nav { top:53px; gap:20px; justify-content:space-between; padding:5px 16px; }
 .e2-nav a { font-size:11px; white-space:nowrap; }
 .e2-workroom { display:block; padding:45px 24px 55px; scroll-margin-top:125px; }
 .e2-room h2 { font-size:34px; }
 .e2-context>p,.e2-practice-copy>p { font-size:18px; }
 .e2-photo-study { margin-top:35px; }
 .e2-photo-study nav { gap:16px; }
 .e2-photo-study nav button { font-size:12px; }
 .e2-arrangements { display:block; padding:45px 24px 55px; scroll-margin-top:125px; }
 .e2-material-study { margin-top:35px; padding:28px 20px; }
 .e2-connections { padding:45px 24px 55px; scroll-margin-top:125px; }
 .e2-connections>div { display:grid; gap:15px; }
 .e2-boundary { margin-top:35px; }
 dialog:has(.e2-original) { padding:25px 20px; }
}
@media(prefers-reduced-motion:reduce){.e2-photo-frame img{transition:none;}}