:root{
 --teal:#0b3d3f;--teal2:#14565a;--dark:#061718;--bone:#e9ddbd;
 --gold:#b99855;--muted:#9f9477;--line:rgba(185,152,85,.55)
}
*{box-sizing:border-box}
html{background:#041011}
body{margin:0;color:var(--bone);font-family:Georgia,'Times New Roman',serif;
 background:radial-gradient(circle at 50% 20%,#1b6869 0,#0d4144 30%,#082729 67%,#041213 100%);min-height:100vh}
body.locked{overflow:hidden}
.topbar{height:86px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 4.5vw;
 border-bottom:1px solid var(--line);background:rgba(4,20,21,.94)}
.back,.catalogue{font-size:11px;letter-spacing:.23em;color:#c8ae74;text-decoration:none}
.catalogue{text-align:right}.logo{width:72px;max-height:68px;object-fit:contain;filter:sepia(1) saturate(.55) brightness(1.65)}
.masthead{min-height:190px;display:grid;grid-template-columns:150px minmax(420px,680px) 150px;justify-content:center;
 align-items:center;padding:18px 4vw 16px;column-gap:24px;border-bottom:9px solid #082224;box-shadow:0 7px 0 #020909,0 12px 28px #0008;
 position:relative;overflow:hidden}
.masthead:after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(#fff1 1px,transparent 1px);background-size:4px 4px;opacity:.08}
.dept-mark{display:block;width:150px;height:135px;object-fit:cover;object-position:center;justify-self:center;
 box-shadow:0 9px 24px #0008;border:1px solid rgba(185,152,85,.5)}
.titleblock{text-align:center;z-index:1;grid-column:2}.eyebrow{font-size:10px;letter-spacing:.32em;color:#c6b078;margin:0 0 8px;font-weight:bold}
.titleblock h1{font-weight:500;font-size:clamp(39px,4.1vw,64px);letter-spacing:.035em;margin:0;color:#eee1bd;text-shadow:0 2px 10px #0008}
.plate{display:inline-block;margin:9px 0 10px;padding:7px 29px;border:2px solid #775f2e;outline:1px solid #c9a85e;
 background:linear-gradient(#dbc486,#9e7c3e);color:#092c2e;box-shadow:inset 0 0 0 3px #b59652,0 4px 12px #0007;font-weight:bold;letter-spacing:.16em}
.tagline{font-size:12px;letter-spacing:.28em;color:#d4c69f;margin:0;font-weight:bold}
.shelf-wrap{position:relative;background:linear-gradient(#071f21,#041415 7%,#082a2c 94%,#020a0b);border-bottom:10px solid #082224;
 box-shadow:inset 0 12px 24px #0008,inset 0 -10px 18px #0008;padding:14px 54px 30px}
.shelf{padding:8px 0 10px;display:flex;gap:34px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.shelf::-webkit-scrollbar{display:none}.era{flex:0 0 clamp(310px,29vw,430px);scroll-snap-align:start;text-align:center}
.panel{width:100%;padding:0;border:1px solid #846c3e;background:#071516;cursor:pointer;box-shadow:0 12px 26px #000a;transition:.22s ease;display:block}
.panel:hover{transform:translateY(-4px);border-color:#d0ad61;box-shadow:0 18px 34px #000c}
.panel img{display:block;width:100%;height:auto;object-fit:contain}
.shelf-arrow{position:absolute;z-index:5;top:47%;transform:translateY(-50%);width:34px;height:66px;border:1px solid rgba(185,152,85,.58);
 background:rgba(4,20,21,.9);color:#d6b96f;font:38px/1 Georgia,serif;cursor:pointer;box-shadow:0 4px 15px #0008;transition:.18s ease}
.shelf-arrow:hover{background:#14565a;color:#f0d28d;border-color:#d5ad5e}.shelf-arrow.prev{left:10px}.shelf-arrow.next{right:10px}
footer{min-height:76px;padding:20px 4vw;display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;border-top:1px solid var(--line);
 background:#041011;color:#9e8c65;font-size:9px;letter-spacing:.2em}footer span:nth-child(2){text-align:center}footer span:last-child{text-align:right}

.anteroom{position:fixed;z-index:30;inset:0;background:rgba(2,10,11,.88);backdrop-filter:blur(8px);display:none;place-items:center;padding:28px}
.anteroom.open{display:grid}.story{width:min(760px,94vw);max-height:90vh;overflow:auto;position:relative;padding:48px clamp(28px,6vw,70px) 42px;
 background:linear-gradient(145deg,#103f42,#08282a 56%,#061c1e);border:1px solid #a68a50;box-shadow:0 30px 90px #000;
 text-align:center}
.story:before{content:"";position:absolute;inset:10px;border:1px solid rgba(185,152,85,.22);pointer-events:none}
.close{position:absolute;right:16px;top:10px;border:0;background:transparent;color:#d7c79d;font:34px Georgia;cursor:pointer}
.story-kicker{font:10px Arial,sans-serif;letter-spacing:.27em;color:#aa986e;margin:0 0 17px}
.story h2{font-size:clamp(30px,5vw,48px);font-weight:500;letter-spacing:.06em;margin:0;color:#efe1bd}
.story-age{margin:7px 0 0;font:10px Arial,sans-serif;letter-spacing:.24em;color:#9e8c65;text-transform:uppercase}
.story-line{font-size:19px;font-style:italic;color:#cdb274;margin:9px 0 28px}
.story-copy{text-align:left;max-width:610px;margin:auto;color:#ded4b8;font-size:16px;line-height:1.72}.story-copy p{margin:0 0 16px}
.story-copy p:last-child{margin-bottom:0}.story-copy strong{color:#f1d998}
.spine{display:flex;align-items:center;justify-content:center;gap:12px;margin:30px auto 24px;font:9px Arial,sans-serif;letter-spacing:.22em;color:#716c5d}
.spine i{width:52px;height:1px;background:#6e644e}.spine span.active{color:#e0bc68;text-shadow:0 0 12px #b58d3e}
.enter{border:1px solid #a88849;background:#0a292b;color:#e4cf99;padding:12px 22px;font:11px Georgia,serif;letter-spacing:.18em;cursor:pointer}
.enter:hover{background:#174c4f}.placeholder{display:none;margin:16px 0 0;color:#8f8469;font:10px Arial,sans-serif;letter-spacing:.14em}.placeholder.show{display:block}

@media(max-width:900px){
 .topbar{height:72px;padding:0 18px;grid-template-columns:1fr auto}.logo{width:58px}.catalogue{display:none}.back{font-size:9px}
 .masthead{min-height:235px;grid-template-columns:1fr;padding:30px 20px 25px}.dept-mark{display:none}.titleblock{grid-column:1}
 .titleblock h1{font-size:40px}.tagline{font-size:9px;letter-spacing:.17em}
 .shelf-wrap{padding:0;background:none}.shelf-arrow{display:none}.shelf{display:grid;grid-template-columns:1fr;padding:28px 7vw;gap:34px;background:linear-gradient(#071f21,#041415 7%,#082a2c 94%,#020a0b)}
 .era{min-width:0}.panel{width:100%;max-width:520px;margin:auto}.panel:hover{transform:none}
 footer{grid-template-columns:1fr;text-align:center;gap:10px;padding:24px 18px}footer span:last-child,footer span:nth-child(2){text-align:center}
 .anteroom{padding:14px}.story{padding:42px 25px 32px}.story-copy{font-size:15px;line-height:1.65}.spine{gap:8px}.spine i{width:28px}
}
@media(min-width:901px) and (max-width:1100px){
 .masthead{grid-template-columns:120px minmax(400px,620px) 80px;column-gap:14px}.dept-mark{width:118px;height:108px}
}