/* Shared styles for the front page and the directory pages */
/* Self-hosted Inter Tight (SIL OFL 1.1, see fonts/OFL.txt), Latin subset, variable weight */
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400 900;font-display:swap;src:url(fonts/inter-tight-latin.woff2) format('woff2');}
:root{
  --cream: #f4f0e6;
  --paper: #faf8f2;
  --ink: #14130f;
  --stone: #8c8579;
  --line: #dcd6c8;
  --olive: #5b6b45;
  --rust: #b5502e;
  --night-line: #2a2822;
  --night-text: #a8a196;
  --night-muted: #736c60;
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.65,0,.35,1);
  --h1: clamp(56px, 10.5vw, 168px);
  interpolate-size: allow-keywords; /* lets Read more animate to height:auto where supported */
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--cream);color:var(--ink);font-family:'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;}
::selection{background:var(--rust);color:var(--cream);}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-0.02em;}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:2px solid var(--rust);outline-offset:3px;}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px;}
.eyebrow{font-size:11px;letter-spacing:0.16em;text-transform:uppercase;font-weight:700;color:var(--stone);}
.display{font-weight:800;text-transform:uppercase;letter-spacing:-0.03em;word-spacing:0.04em;line-height:0.86;}
.h2{font-size:clamp(44px, 6.4vw, 96px);margin-top:14px;}
.grain{position:absolute;inset:0;filter:url(#grain);opacity:0.5;mix-blend-mode:overlay;pointer-events:none;}

/* Rolling label: a copy of the text rides in from below on hover */
.roll{display:inline-flex;overflow:hidden;height:1.25em;line-height:1.25em;vertical-align:top;}
.roll > span{display:block;transition:transform .6s var(--ease);text-shadow:0 1.25em 0 var(--roll, currentColor);}
a:hover .roll > span, button:hover .roll > span, a:focus-visible .roll > span{transform:translateY(-1.25em);}

/* NAV */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb, var(--cream) 84%, transparent);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--line);animation:drop 1s var(--ease) .15s both;transition:background-color .6s var(--ease), color .6s var(--ease), border-color .6s;}
.top.dark{background:color-mix(in srgb, var(--ink) 82%, transparent);color:var(--cream);border-color:var(--night-line);}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:24px;}
.brand{font-weight:800;font-size:15px;letter-spacing:0.02em;}
.nav{display:flex;gap:28px;font-size:12px;letter-spacing:0.1em;text-transform:uppercase;font-weight:700;--roll:var(--rust);}
.progress{position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:var(--rust);transform:scaleX(0);transform-origin:left;}
@keyframes drop{from{transform:translateY(-100%);}}

/* BUTTONS: liquid fill rises from below, label rolls, arrow nudges */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:12px;padding:16px 28px;border-radius:999px;background:var(--olive);color:var(--cream);font-weight:700;font-size:13px;letter-spacing:0.08em;text-transform:uppercase;border:none;cursor:pointer;min-height:48px;transition:color .5s var(--ease);}
.btn::before{content:"";position:absolute;inset:-1px;z-index:-1;background:var(--ink);border-radius:50% 50% 0 0 / 100% 100% 0 0;transform:translateY(101%);transition:transform .7s var(--ease), border-radius .7s var(--ease);}
.btn:hover::before, .btn:focus-visible::before{transform:none;border-radius:0;}
.btn svg{transition:transform .6s var(--ease);}
.btn:hover svg{transform:translateX(5px);}
.btn-line{background:transparent;box-shadow:inset 0 0 0 1.5px var(--cream);--roll:var(--ink);}
.btn-line::before{background:var(--cream);}
.btn-line:hover, .btn-line:focus-visible{color:var(--ink);}

/* COMPARISON SLIDER (hero + cards) */
.compare{cursor:ew-resize;touch-action:pan-y;-webkit-user-select:none;user-select:none;}
.divider{position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--cream);pointer-events:none;box-shadow:0 0 14px rgba(20,15,10,0.35);}
.handle{position:absolute;top:50%;left:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;border:1.5px solid var(--cream);color:var(--cream);display:grid;place-items:center;pointer-events:none;background:rgba(20,15,10,0.25);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform .55s var(--ease), background .3s, color .3s;}
.compare:hover .handle{transform:scale(1.14);}
.compare.dragging .handle{transform:scale(.86);background:var(--cream);color:var(--ink);}
.settle .divider, .settle .handle{transition:left .8s var(--ease), transform .55s var(--ease);}
.settle .now{transition:clip-path .8s var(--ease);}

/* HERO */
.hero-drag{position:relative;width:100%;height:84vh;min-height:520px;overflow:hidden;}
.hero-media{position:absolute;inset:0;animation:open 1.9s var(--ease) both;}
.hero-media img{position:absolute;left:0;width:100%;object-fit:cover;pointer-events:none;}
#hero-then{filter:brightness(.62) contrast(1.1);} /* the archive photo is pale; the knockout headline needs a darker ground */
@keyframes open{from{clip-path:inset(12% 9% 12% 9% round 32px);transform:scale(1.2);}to{clip-path:inset(0 round 0);transform:none;}}
.hero-shade{position:absolute;inset:0;background:linear-gradient(to bottom, rgba(20,15,10,0.25), transparent 22%, transparent 45%, rgba(20,15,10,0.65) 100%);pointer-events:none;}
.hero-drag .handle::before, .hero-drag .handle::after{position:absolute;top:50%;transform:translateY(-50%);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;font-weight:700;white-space:nowrap;color:var(--cream);text-shadow:0 1px 10px rgba(20,15,10,0.6);transition:opacity .4s;}
.hero-drag .handle::before{content:"Today";right:calc(100% + 16px);}
.hero-drag .handle::after{content:"Then";left:calc(100% + 16px);}
.hero-drag.dragging .handle::before, .hero-drag.dragging .handle::after{color:var(--ink);text-shadow:none;opacity:0;}
.hero-corner{position:absolute;top:28px;left:32px;right:32px;display:flex;justify-content:space-between;gap:16px;pointer-events:none;animation:fade 1s var(--ease) 1.2s both;}
.hint{display:inline-flex;align-items:center;gap:8px;transition:opacity .6s var(--ease), transform .6s var(--ease);}
.touched .hint{opacity:0;transform:translateY(-8px);}
.hero-title{position:relative;margin-top:calc(var(--h1) * -1.42);pointer-events:none;}
/* Knockout headline: difference blend inverts whatever sits underneath,
   so letters read light over the photograph and dark over the page. */
.hero-title h1{font-size:var(--h1);color:#fffff5;mix-blend-mode:difference;}
.ln{display:block;overflow:hidden;padding:0 .06em .05em 0;margin-bottom:-.05em;}
.ln > span{display:inline-block;transform-origin:left bottom;animation:rise 1.3s var(--ease) both;animation-delay:calc(.45s + var(--d, 0) * .1s);}
.ln:nth-child(2){--d:1;} .ln:nth-child(3){--d:2;}
@keyframes rise{from{transform:translateY(112%) rotate(4deg);}}
@keyframes fade{from{opacity:0;transform:translateY(16px);}}
.hero-copy{display:grid;grid-template-columns:minmax(0, 46ch) auto;justify-content:space-between;align-items:end;gap:32px;padding-top:40px;padding-bottom:72px;}
.hero-copy > *{animation:fade 1.1s var(--ease) both;}
.hero-copy > :nth-child(2){animation-delay:1.05s;}
.hero-copy > :first-child{animation-delay:.9s;}
.lede{font-size:17px;line-height:1.55;color:var(--stone);margin:0;}
.fine{font-size:11px;color:var(--stone);letter-spacing:0.04em;line-height:1.5;margin:0;grid-column:1 / -1;animation-delay:1.2s !important;}

/* INTRO: text inks in with scroll, line by line */
.intro{border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.intro .wrap{display:grid;grid-template-columns:1fr 2.3fr;gap:56px;padding-top:112px;padding-bottom:112px;}
.fill{font-size:clamp(28px, 3.5vw, 50px);line-height:1.1;font-weight:500;letter-spacing:-0.02em;margin:0;}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .fill span{background:linear-gradient(var(--ink), var(--ink)) 0 0 / var(--p, 100%) 100% no-repeat, #c9c1b1;-webkit-background-clip:text;background-clip:text;color:transparent;}
}

/* MAP: Leaflet map, with the chosen shop docked beside it (a bottom sheet on phones) */
.map-sec{padding:120px 0;background:var(--ink);color:var(--cream);overflow:clip;} /* clip, not hidden: hidden would break the sticky sheet */
.sec-head > :nth-child(2){--i:1;}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px 32px;}
.map-layout{position:relative;display:grid;grid-template-columns:minmax(0, 1fr) 400px;grid-template-rows:min(520px, 70vh);gap:24px 40px;margin-top:48px;}
.map-card{position:relative;z-index:0;overflow:hidden;border-radius:8px;border:1px solid var(--night-line);scroll-margin-top:72px;} /* z-index keeps Leaflet's panes under the sticky header */
#leaflet{position:absolute;inset:0;background:#e9e4d8;font-family:inherit;}
#leaflet .leaflet-tile-pane{filter:grayscale(0.35) sepia(0.15) contrast(1.04);}
.pin{position:relative;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:2px solid var(--cream);background:var(--ink);color:var(--cream);font-weight:700;font-size:11px;box-shadow:0 2px 8px rgba(20,15,10,0.5);transition:transform .5s var(--ease), background .25s;}
.pin::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--rust);opacity:0;pointer-events:none;}
.pin.hot{transform:scale(1.3);background:var(--rust);}
.pin.is-active{background:var(--rust);}
.pin.hot::after, .pin.is-active::after{animation:ping 1.4s var(--ease) infinite;}
.pin-wrap{border-radius:50%;}
@keyframes ping{from{transform:scale(1);opacity:.9;}to{transform:scale(2.3);opacity:0;}}
.chips{grid-area:1 / 2;display:flex;flex-wrap:wrap;align-content:flex-start;gap:10px;overflow-y:auto;padding:4px 2px;margin:-4px -2px;}
.map-layout.open .chips{display:none;}
.chip{display:flex;align-items:center;gap:10px;padding:10px 20px 10px 10px;border-radius:999px;border:1.5px solid #3a382f;background:transparent;color:var(--cream);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background .4s var(--ease), color .4s var(--ease), border-color .4s, transform .5s var(--ease);}
.chip b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--night-line);font-size:10px;transition:background .4s, transform .7s var(--ease);}
.chip:hover, .chip.hot, .chip:focus-visible{background:var(--cream);color:var(--ink);border-color:var(--cream);transform:translateY(-3px);}
.chip:hover b, .chip.hot b, .chip:focus-visible b{background:var(--rust);color:var(--cream);transform:rotate(360deg);}
.chip.is-active{border-color:var(--rust);}
.chip.is-active b{background:var(--rust);}
.shop-view{position:relative;z-index:2;grid-area:1 / 2;align-self:start;max-height:100%;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;background:var(--paper);color:var(--ink);border-radius:8px;animation:sv-open .6s var(--ease);}
.shop-view[hidden]{display:none;}
.sv-bar{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:8px;padding:8px 10px 8px 20px;background:var(--paper);border-bottom:1px solid var(--line);}
.sv-back{display:inline-flex;align-items:center;gap:8px;margin-right:auto;min-height:40px;padding:0;border:0;background:none;color:var(--ink);font-family:inherit;font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;cursor:pointer;--roll:var(--rust);}
.sv-back svg{transition:transform .6s var(--ease);}
.sv-back:hover svg{transform:translateX(-4px);}
.sv-count{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--stone);margin-right:6px;}
.sv-step{display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%;border:1.5px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;transition:background .3s, color .3s, border-color .3s;}
.sv-step:hover{background:var(--ink);color:var(--cream);border-color:var(--ink);}
.sv-body .photo{aspect-ratio:16/10;}
.sv-body .num{color:var(--rust);-webkit-text-stroke-color:var(--rust);}
/* Content swaps in from the side you stepped towards (--dx), or rises when opened from the map */
.sv-body > *{animation:sv-in .6s var(--ease) both;}
.sv-body > .info{animation-delay:.06s;}
/* Leader line from the chosen marker to its card; drawn in the rAF loop */
.leader{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1;opacity:0;transition:opacity .4s var(--ease);}
.leader.on{opacity:1;}
.leader line{stroke:var(--rust);stroke-width:1.5;stroke-linecap:round;}
.leader circle{fill:var(--rust);}
@keyframes sv-open{from{opacity:0;transform:translateY(16px);}}
@keyframes sv-in{from{opacity:0;transform:translate(var(--dx, 0), var(--dy, 0));}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}

/* SHOPS */
.shops{padding:120px 0 96px;}
.shop-grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:2px;margin-top:56px;background:var(--line);}
.card{position:relative;background:var(--paper);scroll-margin-top:80px;}
.photo{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;}
.photo .then{filter:grayscale(1) sepia(0.3) contrast(1.08) brightness(0.95);}
.cap{position:absolute;inset:0;pointer-events:none;display:flex;align-items:flex-end;padding:16px 18px;background:linear-gradient(to top, rgba(20,15,10,0.6), transparent 45%);}
.cap.then-cap{justify-content:flex-end;align-items:flex-start;background:linear-gradient(to bottom, rgba(20,15,10,0.6), transparent 45%);} /* opposite corner to Now, so long names never collide */
.cap span{font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--cream);font-weight:700;}
.card .handle{width:42px;height:42px;margin:-21px 0 0 -21px;}
.info{display:grid;grid-template-columns:auto minmax(0, 1fr);gap:6px 22px;padding:24px 26px 28px;}
.num{font-size:clamp(30px, calc(200px / var(--len, 2)), 72px);white-space:nowrap;line-height:.78;font-weight:800;letter-spacing:-0.04em;color:transparent;-webkit-text-stroke:1px var(--ink);transition:color .6s var(--ease), -webkit-text-stroke-color .6s var(--ease), transform .7s var(--ease);}
.card:hover .num{color:var(--rust);-webkit-text-stroke-color:var(--rust);transform:translateY(-3px);}
.card h3{font-size:26px;letter-spacing:-0.02em;}
.card h3 span{background:linear-gradient(currentColor, currentColor) 0 100% / 0% 2px no-repeat;transition:background-size .7s var(--ease);}
.card:hover h3 span{background-size:100% 2px;}
.meta{font-size:12px;color:var(--stone);margin:0;letter-spacing:0.06em;text-transform:uppercase;font-weight:700;}
.txt{display:grid;gap:6px;align-content:start;justify-items:start;min-width:0;overflow-wrap:anywhere;}
.note{font-size:14px;line-height:1.55;margin:4px 0 0;}
.more{justify-self:stretch;margin-top:6px;}
.more > summary{display:inline-flex;align-items:center;gap:8px;list-style:none;cursor:pointer;font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;min-height:32px;}
.more > summary::-webkit-details-marker{display:none;}
.more > summary svg{transition:transform .5s var(--ease);}
.more[open] > summary svg{transform:rotate(180deg);}
.more .less, .more[open] .lbl{display:none;}
.more[open] .less{display:inline;}
.more::details-content{block-size:0;overflow:clip;transition:block-size .6s var(--ease), content-visibility .6s allow-discrete;}
.more[open]::details-content{block-size:auto;}
.desc{font-size:14px;line-height:1.6;max-width:62ch;padding-bottom:4px;}
.desc p{margin:8px 0 0;}
.to-map, .to-card{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--rust);--roll:var(--ink);}
.to-map svg, .to-card svg{transition:transform .6s var(--ease);}
.to-map:hover svg{transform:translateY(-3px);}
.to-card:hover svg{transform:translateY(3px);}

/* KNOCKOUT MARQUEE */
.band{overflow:hidden;padding:48px 0 32px;border-top:1px solid var(--line);}
.marquee{display:flex;width:max-content;animation:marq 42s linear infinite;}
.band:hover .marquee{animation-play-state:paused;}
.marquee > span{display:flex;gap:.28em;padding-right:.28em;font-size:clamp(88px, 15vw, 240px);white-space:nowrap;}
.marquee i{font-style:normal;color:transparent;-webkit-text-stroke:1.5px var(--ink);transition:color .6s var(--ease);}
.marquee i:hover{color:var(--rust);-webkit-text-stroke-color:var(--rust);}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .marquee b{color:transparent;background:url(img/hero-then.jpg) center 45% / cover;-webkit-background-clip:text;background-clip:text;}
}
@keyframes marq{to{transform:translateX(-50%);}}

/* TIMELINE */
.timeline{padding:56px 0 120px;}
.tl{position:relative;margin-top:44px;padding-top:26px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;}
.tl::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 1.8s var(--ease-io);}
.tl.in::before{transform:none;}
.tl div{position:relative;font-size:13px;letter-spacing:0.06em;color:var(--stone);opacity:0;transform:translateY(12px);transition:opacity .9s var(--ease), transform .9s var(--ease), color .3s;transition-delay:calc(.4s + var(--i, 0) * .14s);cursor:default;}
.tl div:nth-child(2){--i:1;} .tl div:nth-child(3){--i:2;} .tl div:nth-child(4){--i:3;} .tl div:nth-child(5){--i:4;} .tl div:nth-child(6){--i:5;} .tl div:nth-child(7){--i:6;}
.tl.in div{opacity:1;transform:none;}
.tl div::before{content:"";position:absolute;top:-31px;left:0;width:9px;height:9px;border-radius:50%;background:var(--cream);border:1.5px solid var(--ink);transition:transform .5s var(--ease), background .3s, border-color .3s;}
.tl div:hover{color:var(--ink);}
.tl div b{display:block;font-size:22px;font-weight:800;letter-spacing:-0.02em;color:var(--ink);margin-bottom:4px;}
.tl div span{display:block;max-width:15ch;font-size:12px;line-height:1.4;letter-spacing:0.02em;}
.tl div:last-child{text-align:right;}
.tl div:last-child span{margin-left:auto;}
.tl div:hover::before{transform:scale(1.7);background:var(--rust);border-color:var(--rust);}
.tl div:last-child{color:var(--ink);font-weight:700;}
.tl div:last-child::before{left:auto;right:0;background:var(--rust);border-color:var(--rust);}

/* FOOTER */
.foot{background:var(--ink);color:var(--cream);padding:128px 0 40px;overflow:hidden;}
.ko{font-size:clamp(48px, 9.5vw, 148px);padding-right:.12em;} /* padding keeps glyph overhang inside the clipped background */
@supports (background-clip:text) or (-webkit-background-clip:text){
  .ko{color:transparent;background:linear-gradient(rgba(244,240,230,0.3), rgba(244,240,230,0.3)), url(img/hero-now.jpg) 50% var(--by, 50%) / cover;-webkit-background-clip:text;background-clip:text;filter:brightness(1.15) saturate(1.1);}
}
.foot p.lede{color:var(--night-text);margin-top:28px;max-width:52ch;}
.legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:11px;color:var(--night-muted);letter-spacing:0.04em;margin-top:88px;padding-top:20px;border-top:1px solid var(--night-line);}
.credits{font-size:10px;color:#5a544a;margin-top:10px;letter-spacing:0.02em;line-height:1.6;}

/* Scroll reveals (only when JS is running, so nothing stays hidden without it) */
.js [data-reveal]{opacity:0;transform:translateY(48px);transition:opacity 1.1s var(--ease), transform 1.3s var(--ease);transition-delay:calc(var(--i, 0) * 90ms);}
.js [data-reveal].in{opacity:1;transform:none;}
.js .card[data-reveal] .photo{clip-path:inset(14% 0 0 0);transition:clip-path 1.5s var(--ease) calc(var(--i, 0) * 90ms);}
.js .card[data-reveal].in .photo{clip-path:inset(0);}

@media (max-width: 720px){
  .wrap{padding-left:20px;padding-right:20px;}
  .brand{font-size:13px;}
  .nav{gap:14px;font-size:11px;letter-spacing:0.08em;}
  .ko{font-size:11vw;}
  .hero-drag{height:72vh;min-height:440px;}
  .hero-corner{left:20px;right:20px;}
  .hero-corner .eyebrow:first-child{display:none;}
  .hero-copy{grid-template-columns:1fr;}
  .intro .wrap{grid-template-columns:1fr;gap:20px;padding-top:72px;padding-bottom:72px;}
  .map-sec, .shops{padding:80px 0;}
  .map-layout{grid-template-columns:1fr;grid-template-rows:none;}
  .map-card{height:46vh;height:46svh;min-height:280px;}
  .chips, .shop-view{grid-area:auto;}
  .map-layout.open .chips{display:flex;}
  /* Bottom sheet: sticks to the viewport while the map is on screen, leaves with the section */
  .sv-body .photo{aspect-ratio:2/1;}
  .shop-view{position:sticky;bottom:0;z-index:5;max-height:56vh;max-height:56svh;margin:0 -20px;border-radius:16px 16px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,0.45);animation-name:sv-sheet;}
  @keyframes sv-sheet{from{transform:translateY(100%);}}
  .shop-grid{grid-template-columns:minmax(0, 1fr);}
  .num{font-size:clamp(26px, calc(150px / var(--len, 2)), 56px);}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *, *::before, *::after{animation-duration:1ms !important;animation-delay:0s !important;animation-iteration-count:1 !important;transition-duration:1ms !important;transition-delay:0s !important;}
  .marquee{animation:none;}
}

/* DIRECTORY CONTENT: occupant timelines, adverts, section tiles and pages */
.info.nonum{grid-template-columns:1fr;}
.hist{list-style:none;margin:4px 0 0;padding:0;font-size:14px;line-height:1.5;}
.hist li{position:relative;padding:3px 0 3px 18px;}
.hist li::before{content:"";position:absolute;left:1px;top:.72em;width:7px;height:7px;border-radius:50%;border:1.5px solid var(--stone);}
.hist li:first-child::before{background:var(--stone);}
.hist li.sub{padding-left:0;margin-top:10px;font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--rust);}
.hist li.sub:first-child{margin-top:0;}
.hist li.sub::before, .hist li.ed::before{display:none;}
.hist li.ed{padding-left:0;font-style:italic;color:var(--stone);}
sup{font-size:9px;line-height:0;font-weight:700;color:var(--rust);margin-left:2px;cursor:help;}
.more .hist{margin-top:2px;}
.more .hist li:first-child::before{background:none;} /* only the current occupant gets the filled dot */
.extras{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px;margin-top:16px;}
.extras figure{margin:0;max-width:min(100%, 280px);}
.extras img{display:block;max-width:100%;max-height:240px;height:auto;border:1px solid var(--line);background:#fff;}
.extras figcaption{font-size:11px;line-height:1.4;color:var(--stone);margin-top:6px;}
.photo.solo img{filter:grayscale(1) sepia(0.2);}
.chip b{width:auto;min-width:22px;padding:0 6px;border-radius:999px;}
.chip{max-width:100%;text-align:left;}

/* Front page: one tile per directory section */
.directory{padding:120px 0 96px;border-top:1px solid var(--line);}
/* Two columns, one per side of the street, each with its High Street tile and its parade */
.sections{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:24px 32px;margin-top:48px;}
.side-col{display:grid;gap:2px;align-content:start;background:var(--line);border-top:2px solid var(--ink);}
.side-label{padding:12px 0 10px;background:var(--cream);font-size:11px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;}
.tile{display:flex;flex-direction:column;gap:10px;min-height:170px;padding:28px 26px 30px;background:var(--paper);transition:background .5s var(--ease), color .5s var(--ease);}
.tile:hover, .tile:focus-visible{background:var(--ink);color:var(--cream);}
.tile.big{min-height:250px;}
.tile b{font-size:clamp(30px, 3.4vw, 44px);line-height:.9;font-weight:800;letter-spacing:-0.04em;color:transparent;-webkit-text-stroke:1px var(--ink);transition:color .5s var(--ease);}
.tile:hover b, .tile:focus-visible b{color:var(--rust);-webkit-text-stroke-color:var(--rust);}
.tile h3{font-size:24px;margin-top:auto;}
.tile p{margin:0;font-size:14px;line-height:1.5;color:var(--stone);}
.tile .go{font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--rust);--roll:currentColor;}

/* Directory pages */
.dir-head{padding:72px 0 64px;}
.dir-head h1{font-size:clamp(56px, 10vw, 150px);margin-top:14px;}
.dir-head .lede{margin-top:20px;max-width:56ch;}
.tabs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:36px;}
.tab-side{font-size:11px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--stone);margin-left:10px;}
.tab-side:first-child{margin-left:0;}
.tabs a{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;border:1.5px solid var(--line);font-size:13px;font-weight:700;letter-spacing:0.04em;transition:background .4s var(--ease), color .4s var(--ease), border-color .4s;}
.tabs a:hover{border-color:var(--ink);}
.tabs a[aria-current="page"]{background:var(--ink);color:var(--cream);border-color:var(--ink);}
.group-media{display:grid;align-items:start;grid-template-columns:minmax(0, 3fr) minmax(0, 2fr);gap:2px;margin-top:40px;background:var(--line);}
.group-media .photo{aspect-ratio:4/3;}
.group-media figure{margin:0;background:#fff;display:flex;flex-direction:column;justify-content:center;padding:16px;}
.group-media figure img{width:100%;height:auto;}
.group-media figcaption{font-size:11px;color:var(--stone);margin-top:8px;}
.shop-grid .card:not(:has(.photo)) .info{padding-top:28px;}

/* Map card links: full details, and (front page) the shop's section */
button.to-card{padding:0;border:0;background:none;font-family:inherit;cursor:pointer;}
.to-section{display:inline-flex;align-items:center;gap:8px;margin-top:2px;font-size:11px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--stone);--roll:var(--ink);}
.to-section svg{transition:transform .6s var(--ease);}
.to-section:hover svg{transform:translate(2px, -2px);}

/* FULL VIEW: the whole entry in a modal, opened from the map card */
.full{width:min(1120px, calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:12px;background:var(--paper);color:var(--ink);overflow:hidden;}
.full[open]{display:flex;flex-direction:column;animation:fl-in .5s var(--ease);}
.full::backdrop{background:rgba(20,15,10,0.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
html:has(.full[open]){overflow:hidden;}
.fl-body{overflow-y:auto;overscroll-behavior:contain;}
.fl-grid{display:grid;grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr);animation:sv-in .5s var(--ease) both;--dy:0px;}
.fl-grid.text-only{grid-template-columns:minmax(0, 760px);justify-content:center;}
.fl-media{position:sticky;top:0;align-self:start;padding:24px 0 24px 24px;}
.fl-media .photo{border-radius:6px;}
.fl-media .extras img{max-height:300px;}
.fl-body .info{padding:28px 32px 36px;}
.fl-body h3{font-size:clamp(28px, 3vw, 40px);}
.fl-body .num{color:var(--rust);-webkit-text-stroke-color:var(--rust);}
.fl-body .hist{font-size:15px;}
.fl-src{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:11px;line-height:1.6;color:var(--stone);}
.fl-src sup{cursor:default;}
@keyframes fl-in{from{opacity:0;transform:translateY(24px) scale(.98);}}

/* FINDER: search and trade filter over the whole directory */
.finder{margin-top:36px;}
.finder-box{display:flex;align-items:center;gap:12px;max-width:640px;padding:0 18px;border:1.5px solid #3a382f;border-radius:999px;transition:border-color .3s;}
.finder-box:focus-within{border-color:var(--cream);}
.finder-box svg{flex:none;color:var(--night-text);}
.finder-box input{flex:1;min-width:0;height:52px;border:0;background:none;color:var(--cream);font:inherit;font-size:16px;outline:none;}
.finder-box input::placeholder{color:var(--night-muted);}
.finder-box input::-webkit-search-cancel-button{filter:invert(1);}
.trades{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.trades button{padding:7px 14px;border-radius:999px;border:1.5px solid #3a382f;background:none;color:var(--night-text);font:inherit;font-size:12px;font-weight:700;letter-spacing:0.04em;cursor:pointer;transition:background .3s, color .3s, border-color .3s;}
.trades button:hover{border-color:var(--cream);color:var(--cream);}
.trades button[aria-pressed="true"]{background:var(--rust);border-color:var(--rust);color:var(--cream);}
.finder-sum{margin:16px 0 0;font-size:13px;color:var(--night-text);}
.finder-sum:empty{display:none;}
.finder-sum button{margin-left:10px;padding:0;border:0;background:none;color:var(--cream);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer;}
.finder-results{list-style:none;margin:12px 0 0;padding:0;max-height:300px;overflow-y:auto;overscroll-behavior:contain;border-top:1px solid var(--night-line);}
.finder-results:empty{display:none;}
.finder-results a{display:grid;grid-template-columns:52px minmax(0, 1fr) auto;gap:2px 14px;padding:10px 4px;border-bottom:1px solid var(--night-line);transition:background .3s;}
.finder-results a:hover, .finder-results a:focus-visible{background:#1f1d18;}
.finder-results b{grid-row:span 2;font-size:20px;font-weight:800;color:var(--rust);white-space:nowrap;}
.r-name{font-weight:700;font-size:14px;}
.r-sec{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--night-muted);text-align:right;}
.r-line{grid-column:2 / -1;font-size:13px;color:var(--night-text);}
.r-line mark{background:none;color:var(--cream);font-weight:700;box-shadow:inset 0 -2px var(--rust);}
.chip[hidden]{display:none;}
.filtering .pin:not(.match){opacity:.28;scale:.8;}
.filtering .pin.match{background:var(--rust);}

/* Markers: shaded by side of the street, nudged apart when shopfronts overlap */
.pin.side-north{background:var(--cream);color:var(--ink);border-color:var(--ink);}
.pin.side-north.hot, .pin.side-north.is-active, .filtering .pin.side-north.match{background:var(--rust);color:var(--cream);border-color:var(--cream);}
.pin-wrap.moved::before{content:"";position:absolute;left:50%;top:50%;width:var(--sl);height:1.5px;background:var(--ink);transform-origin:0 50%;rotate:var(--sa);opacity:.7;}
.pin-wrap.moved::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--ink);}
.map-key{position:absolute;left:10px;bottom:10px;z-index:1000;display:flex;flex-wrap:wrap;gap:4px 14px;padding:6px 10px;border-radius:6px;background:rgba(250,248,242,0.92);color:var(--ink);font-size:11px;font-weight:600;pointer-events:none;}
.map-key span{display:inline-flex;align-items:center;gap:6px;}
.map-key i{width:12px;height:12px;border-radius:50%;border:2px solid var(--cream);background:var(--ink);box-shadow:0 0 0 1px var(--ink);}
.map-key i.north{background:var(--cream);border-color:var(--ink);box-shadow:none;}

.to-tell{display:inline-block;margin-top:14px;font-size:13px;font-weight:600;color:var(--rust);text-decoration:underline;text-underline-offset:3px;}

/* Footer sources */
.sources{margin:14px 0 0;padding:0 0 0 18px;columns:2;column-gap:40px;font-size:10px;line-height:1.6;color:#5a544a;}

/* Phones: the four links fold into a menu. Inline they overflowed narrow screens and large text
   settings, which zooms the whole page out. */
.top .brand{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.menu-btn{flex:none;display:none;align-items:center;gap:8px;min-height:40px;padding:0 4px;border:0;background:none;color:inherit;font:inherit;font-size:12px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;}
@media (max-width: 560px){
  .menu-btn{display:inline-flex;}
  .top .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;padding:6px 20px 14px;font-size:13px;background:var(--cream);border-bottom:1px solid var(--line);box-shadow:0 12px 24px rgba(20,15,10,0.12);}
  .top.dark .nav{background:var(--ink);border-color:var(--night-line);}
  .top.menu-open .nav{display:flex;}
  .top .nav a{padding:12px 0;border-top:1px solid var(--line);}
  .top.dark .nav a{border-color:var(--night-line);}
  .top .nav a:first-child{border-top:0;}
}
@media (max-width: 720px){
  /* Timeline runs down the page on phones: the line on the left, a dot beside each year */
  .tl{flex-direction:column;flex-wrap:nowrap;gap:22px;margin-top:32px;padding:0 0 0 28px;}
  .tl::before{top:6px;bottom:6px;left:4px;right:auto;width:1px;height:auto;transform:scaleY(0);transform-origin:top;}
  .tl.in::before{transform:none;}
  .tl div::before, .tl div:last-child::before{top:8px;left:-28px;right:auto;}
  .tl div:last-child{text-align:left;}
  .tl div:last-child span{margin-left:0;}
  .tl div span{max-width:none;font-size:13px;}
}

@media (max-width: 720px){
  .full{width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0;}
  .fl-grid{grid-template-columns:1fr;}
  .fl-media{position:static;padding:0;}
  .fl-media .photo{border-radius:0;}
  .fl-media .extras{padding:0 20px;}
  .fl-body .info{padding:22px 20px 32px;}
  .directory{padding:80px 0;}
  .sections{grid-template-columns:minmax(0, 1fr);}
  .tile{min-height:0;}
  .dir-head{padding:48px 0 40px;}
  .group-media{grid-template-columns:1fr;}
  .sources{columns:1;}
}