/* lens + detail view */
.lens{position:fixed;z-index:60;width:180px;height:180px;border-radius:50%;pointer-events:none;display:none;
  border:3px solid rgba(255,255,255,.9);box-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 0 20px rgba(0,0,0,.2);background-repeat:no-repeat;background-color:#222}
.lensbtn{margin:20px 0 0 8px}.lens-hint{margin:8px 0 0}
.dv{position:fixed;inset:0;z-index:110;background:#0d0b08;overflow:hidden;display:grid;place-items:center;touch-action:none}
.dv[hidden]{display:none}
.dv img{max-width:94vw;max-height:90vh;transform-origin:50% 50%;cursor:grab;user-select:none;-webkit-user-drag:none}
.dv-x{position:absolute;top:14px;right:16px;z-index:2;background:transparent;border:1px solid #5a5040;color:#efe8dc;border-radius:99px;width:40px;height:40px;cursor:pointer}
.dv-tip{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:#a8977c;font-size:12.5px;letter-spacing:.06em;z-index:2}
/* timeline */
.tl-nav{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 30px;position:sticky;top:64px;z-index:5;background:var(--wall);padding:10px 0}
.tl-nav a{border:1px solid var(--line);border-radius:99px;padding:4px 12px;font-size:13px;text-decoration:none;background:var(--card)}
.era{border-left:2px solid var(--line);padding:0 0 30px 26px;margin-left:8px;position:relative}
.era::before{content:"";position:absolute;left:-8px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--acc)}
.era-yrs{font:600 12px var(--sans);letter-spacing:.14em;color:var(--acc)}
.era-head h2{font-size:36px;margin:4px 0 6px}
.era-head p{font:italic 500 20px/1.45 var(--serif);color:var(--ink2);max-width:720px;margin:0 0 4px}.era-head small{color:var(--mut)}
.era-row{display:flex;gap:22px;overflow-x:auto;padding:22px 2px 12px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.tl-item{flex:0 0 230px;scroll-snap-align:start}.tl-year{display:block;font:600 22px var(--serif);color:var(--acc);margin-bottom:8px}
/* compare */
.cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,4vw,50px);margin-top:20px}
.cmp-name{font:600 30px var(--serif);text-decoration:none;color:var(--acc)}.cmp-col p{font-size:16px}.cmp-col .wall-label{margin:18px 0}
.cmp-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,4vw,50px);margin-bottom:30px}
.cmp-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin:10px 0 60px}
.cmp-list a{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:16px}
.cmp-list b{font:600 20px var(--serif)}.cmp-list span{color:var(--mut);font-style:italic}
/* guest thoughts */
.thoughts{list-style:none;padding:0;margin:0 0 18px}
.thoughts li{border-left:2px solid var(--acc);padding:4px 0 4px 14px;margin:0 0 14px}
.thoughts p{font:italic 500 19px/1.5 var(--serif)!important;margin:4px 0 0!important}.thoughts small{color:var(--mut)}
.gform{display:grid;gap:10px;max-width:560px}
.gform input,.gform textarea{font:inherit;font-size:16px;padding:10px 14px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.gform .btn{justify-self:start}.gmsg{color:var(--acc)}
@media (max-width:860px){.cmp-grid,.cmp-pair{gap:12px}.cmp-name{font-size:22px}.tl-item{flex-basis:170px}.tl-nav{top:56px}}