:root {
  
  --bg: #f3f2ee;       
  --ink: #1a1a1a;      
  --mute: #6b6b6b;     
  --hair: #e5e5e5;     
  --accent: #c8401f;   
  --accent-text: #c43e1e; 
  --tile: #e9e8e3;     
  --land: #e6e5e0;     
  --mat: #ffffff;      
  --mat-edge: 0 0 0 1px rgb(0 0 0 / .05), 0 1px 3px rgb(0 0 0 / .06);

  
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: ui-serif, "New York", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --t-display: 700 38px/1.1 var(--serif);  
  --t-title: 600 24px/1.2 var(--font);    
  --t-h2: 600 20px/1.3 var(--font);       
  --t-h3: 600 17px/1.4 var(--font);       
  --t-body: 400 17px/1.6 var(--font);     
  --t-quote: italic 400 20px/1.5 var(--font); 
  --t-ui: 400 14px/1.45 var(--font);      
  --t-caption: 400 14px/1.45 var(--font); 
  --t-label: 600 11px/1.3 var(--font);    
  --t-dot: 600 11px/1 var(--font);        
  
  --night: #2d3550; --blue: #5576b8; --gold: #e3a540; --day: #cfdcea;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141414;
    --ink: #ecebe7;
    --mute: #9d9c97;
    --hair: #2c2c2b;
    --accent: #dc5a32;
    --accent-text: #dc5a32;
    --tile: #1f1f1e;
    --land: #2a2a29;
    --mat: #000000;
    --mat-edge: 0 0 0 1px rgb(255 255 255 / .07);
    --night: #252c40; --blue: #4a69a8; --gold: #cf9638; --day: #8ea6bd;
  }
}
@view-transition { navigation: auto; }

@keyframes vt-to-left { to { transform: translateX(-100%); } }
@keyframes vt-from-right { from { transform: translateX(100%); } }
@keyframes vt-to-right { to { transform: translateX(100%); } }
@keyframes vt-from-left { from { transform: translateX(-100%); } }
html:active-view-transition-type(forward)::view-transition-old(root) { animation: vt-to-left .38s cubic-bezier(.25, .8, .25, 1) both; }
html:active-view-transition-type(forward)::view-transition-new(root) { animation: vt-from-right .38s cubic-bezier(.25, .8, .25, 1) both; }
html:active-view-transition-type(back)::view-transition-old(root) { animation: vt-to-right .38s cubic-bezier(.25, .8, .25, 1) both; }
html:active-view-transition-type(back)::view-transition-new(root) { animation: vt-from-left .38s cubic-bezier(.25, .8, .25, 1) both; }
.back { view-transition-name: back; }

@keyframes words-in { from { opacity: 0; transform: translateY(6px); } }

.arrived .hero.cover .head { animation: words-in 1.4s cubic-bezier(.2, .7, .3, 1) .4s both; }
.arrived .hero.cover .foot { animation: words-in 1.4s cubic-bezier(.2, .7, .3, 1) .75s both; }
* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--t-ui);
  -webkit-text-size-adjust: 100%;
}
a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

.share { font: inherit; color: var(--ink); background: none; border: 0; padding: 4px 0; margin: -4px 0; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

.share:hover { text-decoration-thickness: 2px; }
.small.mute .share { color: var(--mute); }

.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 100001; margin: 0; padding: 8px 14px; border-radius: 999px; background: var(--ink); color: var(--bg); font: var(--t-ui); }
.toast[hidden] { display: none; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 4px var(--bg); }

.pswp :focus-visible { outline-color: #fff; box-shadow: none; }
img { display: block; }
h1 { font: var(--t-title); margin: 0 0 12px; }
h2 { font: var(--t-h2); margin: 40px 0 12px; }
h3 { font: var(--t-h3); margin: 28px 0 8px; }
p { margin: 0 0 12px; }
blockquote { font: var(--t-quote); margin: 24px 0; padding: 0 0 0 16px; border-left: 2px solid var(--hair); }
blockquote p { font: inherit !important; }
figcaption { font: var(--t-caption); color: var(--mute); margin-top: 8px; }
.label { font: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.num { font-variant-numeric: tabular-nums; }
.mute { color: var(--mute); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { display: inline-block; margin: 8px 16px 0; background: var(--bg); padding: 8px 12px; }
.col { max-width: 640px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
.col p, .col li { font: var(--t-body); }
.col .small, .col .small p, .col .small li { font: var(--t-caption); }


.entry { padding-top: 40px; }
.after-grid { padding-top: 40px; padding-bottom: 60px; }
@media (max-width: 899px) { .entry { padding-top: 24px; } }


.home-head { max-width: 1192px; margin: 0 auto; padding: 36px max(16px, env(safe-area-inset-right)) 4px max(16px, env(safe-area-inset-left)); }
.home-head .kicker { font: var(--t-ui); color: var(--mute); margin: 0 0 8px; }
.home-head h1 { font: 700 clamp(40px, 10.5vw, 92px)/1.02 var(--serif); letter-spacing: -.01em; margin: 0 0 16px; max-width: 11ch; }
.home-head .dek { font: var(--t-body); color: var(--mute); max-width: 36em; margin: 0 0 16px; }
.switch { display: inline-flex; border: 1px solid var(--hair); border-radius: 999px; padding: 3px; }
.switch[hidden] { display: none; }
.switch.pending { visibility: hidden; }
.switch a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 18px; border-radius: 999px; font: var(--t-ui); color: var(--ink); text-decoration: none; }
.switch a[aria-current="true"] { background: var(--ink); color: var(--bg); }


.views { max-width: 1192px; margin: 24px auto 0; padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
.views[hidden] { display: none; }
.tiles { display: grid; grid-template-columns: repeat(100, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.tile { grid-row: var(--row); grid-column: var(--x) / span var(--w); min-width: 0; margin-bottom: 72px; }
.tile a { display: block; color: var(--ink); text-decoration: none; }
.tile .tn { display: block; margin-bottom: 10px; font: 600 15px/1 var(--serif); }
.tile .tp { display: block; position: relative; aspect-ratio: var(--r); background: var(--tile); outline: 3px solid var(--mat); box-shadow: var(--mat-edge); }
.tile .tp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile .tt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 12px; font: 700 20px/1.15 var(--serif); }
.tile a:hover .tt { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .12em; }
.tile a:focus-visible { outline-offset: 4px; }

.tile .tps { display: flex; gap: 12px; }
.tile .tpw { flex: var(--r) 1 0%; min-width: 0; }
.tile .tl { display: block; margin-top: 8px; font: var(--t-caption); color: var(--mute); }

.tile.soon { margin-bottom: 28px; }
.tile.soon .tp { aspect-ratio: auto; min-height: 68px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px 12px; outline: 0; box-shadow: none; border: 1px solid var(--hair); background: none; }
.tile.soon .when { font: 400 14px/1.35 var(--font); color: var(--mute); }
.tile.soon .tn { color: var(--mute); }
@media (min-width: 700px) {
  .tile { grid-column: var(--xw) / span var(--ww); margin-bottom: 128px; }
  .tile .tn { font-size: clamp(16px, 1.4vw, 19px); }
  .tile .tt { margin-top: 14px; font-size: clamp(22px, 2.3vw, 30px); }
  .tile .tps { gap: 20px; }
  .tile.soon { margin-bottom: 40px; }
  .tile.soon .tp { min-height: 88px; }
  .tile.soon .when { font-size: 16px; }
}



.mapview { position: relative; max-width: 1192px; margin: 16px auto 0; padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
.mapview[hidden] { display: none; }
.homemap { height: min(78svh, 900px); min-height: min(380px, calc(100svh - 70px)); background: var(--tile); }

@media (max-width: 599px) { .mapview { padding: 0; margin-top: 12px; } .homemap { height: calc(100svh - 70px); } }
.map-failed { margin: 16px auto 0; }
.mapcard {
  position: absolute; z-index: 3; left: max(28px, env(safe-area-inset-left)); right: max(28px, env(safe-area-inset-right)); bottom: 28px; max-width: 460px;
  display: flex; gap: 12px; align-items: flex-start; padding: 10px; background: var(--bg); color: var(--ink); text-decoration: none;
  border-radius: 6px; box-shadow: 0 0 0 1px var(--hair), 0 6px 24px rgb(0 0 0 / .18);
}
.mapcard[hidden] { display: none; }
@media (max-width: 599px) { .mapcard { left: 12px; right: 12px; bottom: 12px; } }
.mapcard .ph { flex: none; width: 104px; }
.mapcard .ph img { width: 100%; height: auto; }
.mapcard .t { display: block; font: 700 19px/1.2 var(--serif); margin: 2px 0 4px; }
.mapcard .m, .mapcard .c { display: block; font: var(--t-caption); color: var(--mute); }
.mapcard .c { color: var(--ink); margin-top: 4px; }
.mapcard .go { display: block; font: var(--t-ui); margin-top: 6px; text-decoration: underline; text-underline-offset: 2px; }
.pin {
  width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--ink); padding: 0;
  background: var(--ink); color: var(--bg); font: var(--t-dot);
  font-variant-numeric: tabular-nums; display: flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer;
}
.pin:hover { color: var(--bg); }

.pin::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; }

.mapboxgl-marker.pin { transition: opacity .2s, width .3s ease, height .3s ease, background-color .3s ease, border-color .3s ease; }
.pin.active { width: 28px; height: 28px; background: var(--accent); border-color: var(--accent); }

.pin.active::after {
  content: ''; position: absolute; inset: -1px; border-radius: 50%; pointer-events: none;
  border: 1.5px solid var(--accent);
  animation: pin-breathe 2.4s cubic-bezier(.2, .6, .3, 1) infinite;
}
@keyframes pin-breathe {
  0% { transform: scale(1); opacity: .55; }
  75%, 100% { transform: scale(2.3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pin, .mapboxgl-marker.pin, .pin.active::after { transition: none; animation: none; }
  .pin.active::after { transform: scale(1.45); opacity: .3; }
}
.towerpin {
  width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: 10px solid var(--accent); pointer-events: none;
}
.tip .mapboxgl-popup-content {
  font: var(--t-caption);
  background: var(--bg); border: 1px solid var(--hair); border-radius: 0; box-shadow: none; padding: 4px 8px; color: var(--ink);
}
.tip .mapboxgl-popup-tip { display: none; }



.back {
  position: fixed; top: max(10px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); z-index: 50;
  height: 40px; padding: 0 16px 0 10px; border-radius: 999px; display: flex; align-items: center; gap: 4px;
  font: var(--t-ui); color: var(--ink); text-decoration: none; background: var(--bg); box-shadow: 0 0 0 1px var(--hair);
  transition: transform .25s ease, opacity .25s ease;
}
.back.tucked { transform: translateY(calc(-100% - 24px)); opacity: 0; pointer-events: none; }
@media (min-width: 900px) and (min-aspect-ratio: 5/4) { .viewpage.v2 .back.tucked { transform: none; opacity: 1; pointer-events: auto; } }
@media (prefers-reduced-motion: reduce) { .back { transition: none; } }
.hero { height: calc(100dvh - 24px); display: flex; flex-direction: column; }

.stage { flex: 1; position: relative; min-height: 0; overflow: hidden; container-type: size; display: flex; align-items: center; justify-content: center; }
.stage.hold { container-type: normal; padding: 64px 24px 24px; overflow: visible; }

@media (min-width: 600px) { .stage:not(.hold) { padding: clamp(12px, 3vh, 32px) 16px 0; } }
.holdcard { max-width: 420px; border: 1px solid var(--hair); padding: 32px 24px; text-align: center; }
.holdcard h1 { margin: 0 0 12px; }
.holdcard p { font: var(--t-body); margin: 0 0 8px; }
@media (max-width: 599px) {
  
  .hero { height: auto; max-height: none; }
  .hero .stage:not(.hold) { flex: none; container-type: inline-size; display: block; }
  
  .hero .stage:not(.hold) .mat { --m: 10px; width: min(100cqw - 2 * var(--m), (100svh - 24px - 80px - 2 * var(--m)) * var(--ar)); margin: 0 auto; }
  .stage.hold { min-height: 60dvh; }
  
  .hero .strip { padding-bottom: 0; }
}



.hero.cover { position: relative; display: block; height: 100vh; height: 100svh; background: #0b0b0b; color: #fff; overflow: hidden; }
.hero.cover .stage { position: absolute; inset: 0; display: block; padding: 0; overflow: hidden; container-type: normal; flex: none; }
.hero.cover .stage picture { position: absolute; inset: 0; }
.hero.cover .stage .photo { width: 100%; height: 100%; object-fit: contain; }
.hero.cover .lqip { position: absolute; inset: 0; background-size: contain; background-position: center; background-repeat: no-repeat; }
.hero.cover .head, .hero.cover .foot { position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none; transition: opacity .25s; }
.hero.cover .head { top: 0; padding: calc(env(safe-area-inset-top) + 64px) max(20px, env(safe-area-inset-right)) 56px max(20px, env(safe-area-inset-left)); background: linear-gradient(rgb(0 0 0 / .72), rgb(0 0 0 / .58) 60%, rgb(0 0 0 / .4) 80%, transparent); }

.hero.cover .head, .hero.cover .foot { text-shadow: 0 1px 2px rgb(0 0 0 / .35), 0 0 16px rgb(0 0 0 / .3); }

.hero.cover .series { color: rgb(255 255 255 / .88); margin: 0 0 10px; }
.hero.cover .series a { color: inherit; text-decoration: none; pointer-events: auto; }
.hero.cover .series a:hover { text-decoration: underline; }
.holdcard .series, .entry .series { margin: 0 0 12px; }
.holdcard .series a, .entry .series a { color: inherit; text-decoration: none; }
.hero.cover .vnum { font: 600 17px/1 var(--serif); margin: 0 0 8px; color: #fff; }
.hero.cover h1 { font: 700 clamp(34px, 9.5vw, 76px)/1.04 var(--serif); margin: 0; color: #fff; text-wrap: balance; }
.hero.cover .foot { bottom: 0; padding: 64px max(20px, env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 18px) max(20px, env(safe-area-inset-left)); background: linear-gradient(transparent, rgb(0 0 0 / .56) 64px, rgb(0 0 0 / .7)); }
@media (prefers-contrast: more) {
  .hero.cover .head { background: linear-gradient(rgb(0 0 0 / .82), rgb(0 0 0 / .72) 80%, transparent); }
  .hero.cover .foot { background: linear-gradient(transparent, rgb(0 0 0 / .78) 48px, rgb(0 0 0 / .85)); }
}
.hero.cover .vcap { font: 400 clamp(19px, 5.2vw, 26px)/1.28 var(--serif); margin: 0 0 10px; color: #fff; max-width: 34em; text-wrap: pretty; }
.hero.cover .vmeta { font: var(--t-ui); color: rgb(255 255 255 / .8); margin: 0 0 6px; }
.hero.cover .foot a, .hero.cover .foot button { pointer-events: auto; }
.hero.cover .vmeta a, .hero.cover .vmeta .share { color: #fff; }
.hero.cover .vmeta .sharewrap, .hero.cover .vmeta .nb { white-space: nowrap; }
.hero.cover .more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: var(--t-ui); color: rgb(255 255 255 / .75); text-decoration: none; }
.hero.cover .more::after { content: ''; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); }

.panes { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.panes button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 3px 12px 3px 3px; border-radius: 8px;
  font: var(--t-ui); cursor: pointer; background: rgb(0 0 0 / .3); color: #fff; border: 1px solid rgb(255 255 255 / .55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.panes button[aria-pressed="true"] { background: #fff; color: #111; border-color: #fff; }

.panes button { position: relative; }
.panes button::after { content: ''; position: absolute; inset: -4px -4px; }
.panes .th { display: block; height: 28px; width: auto; border-radius: 5px; flex: none; }
.panes svg.th { width: 28px; }

.hero.cover .pane { position: absolute; inset: 0; background: #0b0b0b; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
.hero.cover .stage[data-pane="map"] .pane-map, .hero.cover .stage[data-pane="print"] .pane-print { opacity: 1; visibility: visible; transition: opacity .35s ease; }
.hero.cover .stage:not([data-pane="photo"]) > .zoomer, .hero.cover .stage:not([data-pane="photo"]) > .seqbtn { opacity: 0; visibility: hidden; }

.stagemap { width: 100%; height: 100%; }

.stagemap .mapboxgl-ctrl-top-right, .nearmap .mapboxgl-ctrl-top-right { right: env(safe-area-inset-right); }
.stagemap .mapboxgl-ctrl-top-right { z-index: 4; top: env(safe-area-inset-top); }
.hero.cover:has(.stage[data-pane="map"]) .head { padding-right: calc(max(20px, env(safe-area-inset-right)) + 52px); }

.stagemap.waiting::before { content: 'Loading the map\2026'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: var(--t-ui); color: rgb(255 255 255 / .7); }
.stagemap .map-failed { position: absolute; inset: 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; align-content: center; justify-content: center; margin: 0; padding: 24px; text-align: center; font: var(--t-ui); color: rgb(255 255 255 / .8); }
.stagemap .map-retry { font: var(--t-ui); min-height: 44px; padding: 0 16px; border-radius: 8px; border: 1px solid rgb(255 255 255 / .6); background: none; color: #fff; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .hero.cover .pane, .hero.cover .stage[data-pane] .pane { transition: none; } }

.hero.cover .frame { position: absolute; inset: 0; opacity: 0; background: #0b0b0b; transition: opacity .4s ease; pointer-events: none; }
.hero.cover .frame.on { opacity: 1; }
.hero.cover .stage.home .frame { transition: opacity 1.2s ease-in-out; }
.hero.cover .frame picture { position: absolute; inset: 0; }
@media (prefers-reduced-motion: reduce) { .hero.cover .frame, .hero.cover .stage.home .frame { transition: none; } }

.hero.cover .arrow, .hero.cover .zoomer, .hero.cover .seqbtn {
  position: absolute; z-index: 3; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; background: rgb(0 0 0 / .32); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: opacity .25s;
}
.hero.cover .arrow { top: 50%; margin-top: -22px; }
.hero.cover .arrow.prev { left: max(8px, env(safe-area-inset-left)); }
.hero.cover .arrow.next { right: max(8px, env(safe-area-inset-right)); }
.hero.cover .zoomer { right: max(12px, env(safe-area-inset-right)); top: calc(env(safe-area-inset-top) + 12px); }
.hero.cover .seqbtn { right: calc(max(12px, env(safe-area-inset-right)) + 52px); top: calc(env(safe-area-inset-top) + 12px); border: 0; padding: 0; cursor: pointer; }
.seqbtn .i-stop, .seqbtn.playing .i-play { display: none; }
.seqbtn.playing .i-stop { display: block; }

.hero.cover.clean .head, .hero.cover.clean .foot, .hero.cover.clean .arrow, .hero.cover.clean .zoomer, .hero.cover.clean .seqbtn { opacity: 0; pointer-events: none; }
.hero.cover.clean .foot a, .hero.cover.clean .foot button, .hero.cover.clean .head a { pointer-events: none; }

@media (max-height: 520px) and (max-width: 899px) {
  .hero.cover { height: auto; overflow: visible; }
  .hero.cover .stage { position: relative; height: 100vh; height: 100svh; }
  .hero.cover .head, .hero.cover .foot { position: static; background: none; pointer-events: auto; }
  .hero.cover .head { padding: 20px max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); }
  .hero.cover .foot { padding: 10px max(20px, env(safe-area-inset-right)) 24px max(20px, env(safe-area-inset-left)); }
  .hero.cover h1 { font-size: clamp(28px, 6vw, 44px); }
  .hero.cover.clean .head, .hero.cover.clean .foot { opacity: 1; pointer-events: auto; }
  .hero.cover.clean .foot a, .hero.cover.clean .foot button, .hero.cover.clean .head a { pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) { .hero.cover .head, .hero.cover .foot, .hero.cover .arrow, .hero.cover .zoomer { transition: none; } }

@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .viewpage.v2 { display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 30vw, 480px); grid-template-rows: auto auto 1fr; align-items: start; }
  .hero.cover { display: contents; }
  .hero.cover .stage { grid-column: 1; grid-row: 1 / span 3; position: sticky; inset: auto; top: 0; height: 100vh; height: 100svh; background: #0b0b0b; }
  .hero.cover .head, .hero.cover .foot { position: static; grid-column: 2; background: none; pointer-events: auto; opacity: 1; }
  .hero.cover .head { grid-row: 1; padding: 76px 32px 0; color: var(--ink); }
  .hero.cover .vnum, .hero.cover .series { color: var(--mute); }
  .hero.cover .head, .hero.cover .foot { text-shadow: none; }
  .hero.cover:has(.stage[data-pane="map"]) .head { padding-right: 32px; }
  .hero.cover h1 { color: var(--ink); font-size: clamp(36px, 3.4vw, 54px); }
  .hero.cover .foot { grid-row: 2; padding: 14px 32px 0; }
  .hero.cover .vcap { color: var(--ink); font-size: 21px; }
  .hero.cover .vmeta { color: var(--mute); }
  .hero.cover .vmeta a, .hero.cover .vmeta .share { color: var(--ink); }
  .hero.cover .more { display: none; }
  
  .panes button { background: var(--bg); color: var(--ink); border-color: var(--hair); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .panes button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .hero.cover.clean .head, .hero.cover.clean .foot { opacity: 1; pointer-events: auto; }
  .hero.cover.clean .foot a, .hero.cover.clean .foot button { pointer-events: auto; }
  .viewpage.v2 .below { grid-column: 2; grid-row: 3; max-width: none; margin: 0; padding: 8px max(32px, env(safe-area-inset-right)) 64px 32px; container-type: inline-size; }
  
  .hero.cover .stage .photo { cursor: zoom-in; }
}



.pswp__info {
  position: absolute; left: 0; right: 0; bottom: 0; box-sizing: border-box; text-align: center;
  padding: 10px 16px calc(8px + env(safe-area-inset-bottom)); color: rgb(255 255 255 / .88);
}
.pswp__info[hidden] { display: none; }
.pswp__info p { margin: 0 auto; max-width: 680px; font: var(--t-caption); }
.pswp__info .pswp__shot { margin-top: 2px; font-size: 12px; color: rgb(255 255 255 / .6); }
.pswp__info .pswp__acts { margin-top: 2px; color: rgb(255 255 255 / .5); }
.pswp__prints, .pswp__share { display: inline-block; padding: 6px 10px; font: var(--t-ui); color: rgb(255 255 255 / .8); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; cursor: pointer; }
.pswp__prints:hover, .pswp__share:hover { color: #fff; }



.mat {
  --m: clamp(8px, 2.2cqmin, 26px);
  position: relative; display: block; box-sizing: content-box; aspect-ratio: var(--ar);
  padding: var(--m); background: var(--mat); box-shadow: var(--mat-edge);
  cursor: zoom-in; -webkit-tap-highlight-color: transparent;
}
.stage .mat { flex: none; width: min(100cqw - 2 * var(--m), (100cqh - 2 * var(--m)) * var(--ar)); }
.mat picture, .mat .lqip { position: absolute; inset: var(--m); }
.mat .photo { width: 100%; height: 100%; object-fit: cover; }

.lqip { background-size: cover; filter: blur(20px); opacity: .5; transition: opacity .3s; clip-path: inset(0); }
.stage.loaded .lqip { opacity: 0; }

.stage.swapping .mat picture { visibility: hidden; }

.mat:focus-visible { outline-offset: -6px; }
.strip {
  min-height: 44px; padding-bottom: env(safe-area-inset-bottom); box-sizing: content-box;
  padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);
  border-top: 1px solid var(--hair); display: flex; align-items: center; gap: 8px;
}
.strip .arrow { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; }
.strip .mid { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; padding-block: 4px; }

.strip .mid .nb, .strip .mid .sharewrap { white-space: nowrap; }

.strip .mid .line2 { display: block; white-space: normal; font: var(--t-caption); color: var(--mute); margin-top: 2px; }
@media (max-width: 599px) { .strip .mid { white-space: normal; padding: 6px 0; } }
.below { padding-bottom: 60px; }
.below h2:first-child { margin-top: 6px; }
.opening { margin-top: 20px; }
.prose strong { font-variant-numeric: tabular-nums; }
.section figure { margin: 0; }
.section figcaption { text-align: center; }


.ways { list-style: none; padding: 0; margin: 0; }
.ways li { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 10px; }

.ways .how { flex: none; width: 48px; height: 28px; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.ways .how img.logo { height: 22px; width: auto; }

@media (prefers-color-scheme: dark) { .ways .how img.logo:not(.round) { background: #fff; border-radius: 4px; padding: 2px 3px; box-sizing: content-box; } }


.asides { list-style: none; padding: 0; margin: 0; }
.asides li { margin: 0 0 20px; }
.asides a { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr; column-gap: 14px; text-decoration: none; }
.asides .thumb { grid-row: 1 / 4; width: 96px; }

.asides a.nocover { grid-template-columns: 1fr; }

.asides .thumb { display: flex; align-items: center; justify-content: center; height: 72px; }
.asides .thumb img { max-width: 96px; max-height: 72px; width: auto; height: auto; outline: 3px solid var(--mat); box-shadow: var(--mat-edge); }
.asides .t { font: var(--t-h3); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.asides .d { font: var(--t-caption); color: var(--mute); }
.col .asides .s { font: var(--t-caption); color: var(--ink); margin-top: 4px; }
.asides-home { margin-top: 40px; }
.aside .below { padding-top: 64px; }
.aside .below > .label { margin: 0 0 8px; }
.aside h1 { margin-bottom: 4px; }
.col .standfirst { font: var(--t-quote); font-style: normal; margin: 20px 0; }



.story figure { margin: 0; }
.story figcaption { text-align: center; }

.viewpage { container-type: inline-size; }
.plate { position: relative; left: 50%; width: min(880px, 100cqw - 32px); margin: 32px 0 32px calc(min(880px, 100cqw - 32px) / -2); }
.plate .mat { --m: clamp(8px, 1.4vw, 14px); width: min(100% - 2 * var(--m), (80vh - 2 * var(--m)) * var(--ar)); margin: 0 auto; }

.reel { position: relative; left: 50%; width: min(1100px, 100cqw); margin: 32px 0 32px calc(min(1100px, 100cqw) / -2); }
.reel ul {
  display: flex; gap: 16px; list-style: none; margin: 0; padding: 4px 16px 8px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
}
.reel ul::-webkit-scrollbar { display: none; }
.reel li { flex: none; width: min-content; scroll-snap-align: center; }

.reel li:first-child { margin-inline-start: auto; }
.reel li:last-child { margin-inline-end: auto; }
.reel .mat { --m: 8px; width: min(min(62vh, 520px) * var(--ar), 100cqw - 64px); }

.after { margin: 12px 0 28px; }
.after-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.after .mat { --m: 6px; width: calc(100% - 2 * var(--m)); }
.after figcaption { font: var(--t-caption); color: var(--mute); margin-top: 8px; }
.after-page .after { margin: 28px 0 36px; }
.after-page .after figcaption a { font: var(--t-ui); color: var(--ink); }
.reel-nav[hidden] { display: none; }
.reel-nav { display: flex; justify-content: center; gap: 8px; margin-top: 4px; }
.reel-nav button {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--hair); border-radius: 50%; color: var(--ink); cursor: pointer;
}


.around { list-style: none; padding: 0; margin: 0 0 16px; }
.around li { position: relative; margin: 0 0 16px; }
.around.numbered li { padding-left: 36px; }
.around .dot {
  position: absolute; left: 0; top: 3px; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--bg); font: var(--t-dot);
}
.around .label { display: block; margin-bottom: 2px; }
.col .around p { margin: 0; }
.nearmap { position: relative; left: 50%; width: min(880px, 100cqw - 32px); margin: 8px 0 24px calc(min(880px, 100cqw - 32px) / -2); height: min(60vh, 460px); background: var(--tile); }



.sorted { --cell: 72px; padding-bottom: 60px; }

.sorted-head, .sorted .source, .sorted-foot { max-width: 1100px; margin-inline: auto; padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }
.sorted-head > *, .sorted .source { max-width: 640px; }

.sorted .source { margin-inline: max(0px, calc((100% - 1100px) / 2)) auto; }
.sorted-head { padding-top: 40px; }
.sorted-head .label a { text-decoration: none; }
.sorted-head .label a:hover { text-decoration: underline; }
.sorted-head h1 { font: var(--t-display); letter-spacing: -.01em; margin: 6px 0 12px; }
.col .dek { font: var(--t-body); color: var(--mute); margin: 0; }
.sort-by { max-width: 1100px; margin: 28px auto 0; padding: 0 16px; display: flex; flex-wrap: wrap; column-gap: 22px; border-bottom: 1px solid var(--hair); }
.sort-by button {
  font: 600 14px/1.2 var(--font); background: none; border: 0; padding: 12px 0 10px; margin-bottom: -1px;
  color: var(--mute); border-bottom: 2px solid transparent; cursor: pointer;
}
.sort-by button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.chart { max-width: 1100px; margin: 0 auto; padding: 22px 16px 0; }
.finding { font: var(--t-h3); margin: 0 0 22px; }
.bins { display: grid; grid-template-columns: repeat(var(--bins), minmax(0, 1fr)); align-items: end; }
.bin { display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.bin .count { font: 12px/1.2 var(--font); font-variant-numeric: tabular-nums; color: var(--mute); text-align: center; margin-bottom: 6px; }
.bin .cells {
  display: flex; flex-wrap: wrap-reverse; justify-content: center; align-content: flex-start; gap: 4px;
  padding: 0 3px 6px; border-bottom: 1px solid var(--ink); min-height: 8px;
}
.bin .name { font: var(--t-label); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); text-align: center; padding: 8px 2px 0; }
.bin.top .name, .bin.top .count { color: var(--accent-text); }
.cell {
  width: var(--cell); aspect-ratio: 4 / 3; padding: 2px; display: flex; align-items: center; justify-content: center;
  background: var(--mat); box-shadow: var(--mat-edge); transform-origin: 0 0; -webkit-tap-highlight-color: transparent;
  
  overflow: hidden;
}
.cell picture { display: contents; }
.cell img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.cell.on { outline: 2px solid var(--accent); outline-offset: 1px; }
.detail { position: relative; display: grid; grid-template-columns: minmax(0, 480px) 1fr; gap: 24px; align-items: start; margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--hair); }
.detail .big { display: block; padding: 8px; background: var(--mat); box-shadow: var(--mat-edge); }
.detail .big img { width: 100%; height: auto; }
.detail .words p { margin: 0 0 8px; }
.detail .line1 { font: var(--t-h3); }
.detail .line2, .detail .fact { font: var(--t-body); }
.detail .fact { color: var(--mute); }
.detail .close { position: absolute; top: 12px; right: 0; width: 44px; height: 44px; font: 22px/1 var(--font); background: var(--bg); border: 0; border-radius: 50%; box-shadow: 0 0 0 1px var(--hair); color: var(--ink); cursor: pointer; }
.source { margin-top: 28px; }
@media (max-width: 719px) {
  .sorted { --cell: 54px; }
  .sorted-head h1 { font-size: 30px; }
  .bins { display: block; }
  .bin { display: grid; grid-template-columns: 7.2em 1fr 1.6em; align-items: center; column-gap: 8px; padding: 8px 0; border-top: 1px solid var(--hair); }
  .bin .name { grid-area: 1 / 1; text-align: left; padding: 0; }
  .bin .cells { grid-area: 1 / 2; flex-wrap: wrap; justify-content: flex-start; border: 0; padding: 0; }
  .bin .count { grid-area: 1 / 3; margin: 0; text-align: right; }
  
  .sort-by { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; column-gap: 18px; }
  .sort-by::-webkit-scrollbar { display: none; }
  .sort-by button { flex: none; }
  .detail { grid-template-columns: 1fr; gap: 12px; margin: 0 0 8px; padding: 12px 0 16px; }
}


.dayline { margin: 6px 0 24px; }
.dayline[hidden] { display: none; }
.dl { position: relative; height: 70px; margin: 0 2px; }
.dl-bar { position: absolute; left: 0; right: 0; top: 38px; height: 8px; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px var(--hair); }
.dl-bar span { position: absolute; top: 0; bottom: 0; transition: opacity .15s; }
.dl-bar.picking span:not(.on) { opacity: .25; }
.b-night { background: var(--night); } .b-blue { background: var(--blue); } .b-gold { background: var(--gold); } .b-day { background: var(--day); }
.dl-sun { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--ink); }
.dl-sun span { order: -1; font: 400 12px/1 var(--font); color: var(--mute); white-space: nowrap; }
.dl-sun svg { display: block; width: 16px; height: 16px; fill: var(--gold); stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.dl-cam { position: absolute; top: 47px; transform: translateX(-50%); color: var(--accent); }
.dl-cam svg { display: block; width: 20px; height: 21px; fill: var(--bg); stroke: currentColor; stroke-width: 1.5; }
.dl-cam .pt { fill: currentColor; stroke: none; }

.dl-hit { position: absolute; left: 0; right: 0; top: 26px; height: 32px; touch-action: pan-y; cursor: default; }
.dayline figcaption { font: 400 13px/1.4 var(--font); color: var(--mute); }
.dayline figcaption.naming { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .dl-bar span { transition: none; } }
.basics { list-style: none; padding: 0; margin: 0; }
.basics li { margin: 0 0 6px; }
.basics details { display: inline; }
.basics summary { cursor: pointer; display: inline; text-decoration: underline; text-underline-offset: 2px; }
.inset { display: block; margin: 24px 0 8px; }
.inset svg { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto; }
.endnav { margin-top: 24px; }
.bottom-strip { display: flex; justify-content: space-between; gap: 16px; margin-top: 40px; padding-top: 4px; border-top: 1px solid var(--hair); }

.bottom-strip a { display: inline-flex; align-items: center; min-height: 44px; }


.about { padding-top: 40px; padding-bottom: 60px; }
.facts ul { padding-left: 20px; }

.contact .mail { font: var(--t-h2); overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  * { scroll-behavior: auto !important; }
}



@media print {
  .hero { height: auto; }
  .stage, .hero .stage:not(.hold) { container-type: normal; display: block; padding: 0; }
  .mat, .stage .mat, .hero .stage:not(.hold) .mat, .plate .mat, .reel .mat { width: auto; max-width: 100%; box-shadow: none; }
  .mat picture, .mat .lqip { position: static; }
  .back, .lqip, .strip .arrow, .reel-nav, .nearmap, .homemap, .mappanel, .bottom-strip, .endnav, .skip { display: none !important; }
  :root { --bg: #fff; --ink: #111; --mute: #555; --hair: #ccc; --mat: #fff; --tile: #eee; }
  body { background: #fff; color: #111; }
  .hero.cover { height: auto; background: none; color: #111; }
  .hero.cover .stage { position: relative; inset: auto; height: 60vh; background: none; }
  .hero.cover .head, .hero.cover .foot { position: static; background: none; text-shadow: none; padding-left: 0; padding-right: 0; }
  .hero.cover .head *, .hero.cover .foot * { color: #111 !important; }
  .hero.cover .arrow, .hero.cover .zoomer, .hero.cover .seqbtn, .hero.cover .pane, .panes, .hero.cover .more, .sharewrap { display: none !important; }
  .reel, .plate, .nearmap { left: 0; width: auto; margin-inline: 0; }
  .reel ul { overflow: visible; flex-wrap: wrap; }
  .reel li { width: 45%; }
  figure, .mat { break-inside: avoid; }
}



@media (forced-colors: active) {
  .panes button[aria-pressed="true"], .versions button[aria-pressed="true"], .sort-by button[aria-pressed="true"], .switch a[aria-current="true"], .pin.active { outline: 3px solid Highlight; outline-offset: 2px; }
  .sort-by button:not([aria-pressed="true"]) { border-bottom-color: Canvas; }
  .dl-bar span { forced-color-adjust: none; }
}



.pswp .pswp__top-bar { padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); box-sizing: border-box; height: calc(60px + env(safe-area-inset-top)); }
.pswp .pswp__button--arrow--prev { left: env(safe-area-inset-left); }
.pswp .pswp__button--arrow--next { right: env(safe-area-inset-right); }