/* ==========================================================================
   Oriental Plaza — Fordsburg
   Shared stylesheet
   Concept: the shop-code wayfinding system (N / S / C / Kiosk) drives both
   the navigation logic and the colour language of the whole site.
   ========================================================================== */

/* Brand fonts, served from this site (no third-party request). Both are
   variable fonts, so one file covers every weight. SIL Open Font Licence. */
@font-face{font-family:'Cinzel';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/cinzel-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/cinzel-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Jost';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/jost-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/jost-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* Brand palette — Oriental Plaza brand guide (23 Sept 2026). */
  --red:        #8A1F1F;  /* Deep Plaza Red — header bands, headlines, key CTAs */
  --red-dark:   #6E1818;  /* working shade for hover states only */
  --ivory:      #F7F1E6;  /* Warm Ivory — main background, used instead of white */
  --ivory-2:    #EFE6D5;  /* slightly deeper ivory for alternate bands */
  --card:       #FCF9F3;  /* raised surfaces on ivory */
  --charcoal:   #2B2B2B;  /* body text, dark bands */
  --green:      #3E6B3A;  /* Plaza Green — section labels, "open", heritage */
  --gold:       #C79A3C;  /* Warm Gold — accents only: rules, dividers, highlights.
                             Never text on ivory; on red, large text only. */

  --line:       #E0D4BF;
  --muted:      #5A554E;
  --on-dark:    #F7F1E6;
  --on-dark-muted: rgba(247,241,230,.74);

  --shell:      min(1220px, 100% - 3rem);
  --radius:     6px;
  --radius-lg:  12px;
  --shadow-sm:  0 1px 3px rgba(138,31,31,.07), 0 1px 2px rgba(138,31,31,.05);
  --shadow-md:  0 8px 24px -4px rgba(138,31,31,.14), 0 2px 8px rgba(138,31,31,.08);
  --shadow-lg:  0 20px 48px -12px rgba(43,43,43,.22), 0 6px 16px rgba(43,43,43,.10);

  --f-display:  'Cinzel', Georgia, serif;
  --f-body:     'Jost', Arial, sans-serif;
  --track-label: .2em;
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

body{
  margin:0;
  background:var(--ivory);
  color:var(--charcoal);
  font-family:var(--f-body);
  font-size:1.0625rem;
  line-height:1.6;
  overflow-x:hidden;
}

img,svg{max-width:100%;display:block}
a{color:inherit}

/* Cinzel carries titles and headings (all caps, +4–8% tracking, never
   below 20px); Jost carries everything else, subheadings included. */
h1,h2{
  font-family:var(--f-display);
  font-weight:700;
  line-height:1.14;
  letter-spacing:.05em;
  text-transform:uppercase;
  margin:0;
  text-wrap:balance;
}
h3,h4{
  font-family:var(--f-body);
  font-weight:600;
  line-height:1.25;
  letter-spacing:0;
  margin:0;
  text-wrap:balance;
}

p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.shell{width:var(--shell);margin-inline:auto}
.shell-narrow{width:min(760px, 100% - 3rem);margin-inline:auto}

:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--red);color:var(--ivory);padding:.75rem 1.1rem;
  font-size:.85rem;
}
.skip:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- eyebrow / label type ----------
   Labels: Jost, all caps, +20% tracking. Plaza Green on ivory (gold fails
   contrast there), gold on charcoal, ivory on red. The trailing hairline is
   the brand's gold rule. */
.eyebrow{
  font-weight:600;
  font-size:.74rem;
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  color:var(--green);
  margin:0 0 1rem;
  display:flex;align-items:center;gap:.9rem;
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--gold);opacity:.7}
.band-ink .eyebrow{color:var(--gold)}
.hero .eyebrow,.page-head .eyebrow,.oops .eyebrow{color:var(--ivory)}

/* ==========================================================================
   Header
   ========================================================================== */
.masthead{
  position:sticky;top:0;z-index:60;
  background:var(--red);
  color:var(--ivory);
}
.masthead-in{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;
  padding:.8rem 0;
}
/* Horizontal logo, never under 160px wide on screen (brand minimum). */
.brand{display:block;line-height:0;text-decoration:none}
.brand img{height:44px;width:auto}

.nav{display:flex;align-items:center;gap:1.6rem}
.nav a{
  text-decoration:none;
  font-size:.95rem;
  font-weight:500;
  color:var(--ivory);
  padding:.35rem 0;
  border-bottom:2px solid transparent;
  transition:border-color .18s ease, color .18s ease;
  white-space:nowrap;
}
.nav a:hover{border-bottom-color:var(--gold)}
.nav a[aria-current="page"]{border-bottom-color:var(--gold)}

.nav .nav-cta{
  background:var(--ivory);
  color:var(--red);
  font-weight:600;
  padding:.5rem 1rem;
  border-radius:var(--radius);
  border-bottom:0;
  font-size:.85rem;
}
.nav .nav-cta:hover{background:#fff}

.nav .nav-wa{
  display:flex;align-items:center;gap:.4rem;
  font-size:.85rem;
  border:1px solid rgba(247,241,230,.45);
  border-radius:var(--radius);padding:.42rem .85rem;
}
.nav-wa svg{width:15px;height:15px;flex:none}
.nav .nav-wa:hover{border-color:var(--ivory);background:rgba(247,241,230,.08)}

.burger{
  display:none;
  background:none;border:1px solid rgba(255,255,255,.3);
  color:var(--ivory);
  border-radius:var(--radius);
  padding:.5rem .8rem;
  font-family:var(--f-body);font-weight:600;font-size:.74rem;letter-spacing:var(--track-label);
  text-transform:uppercase;cursor:pointer;
}

/* Full-screen overlay menu — deliberately NOT an off-canvas transform,
   which is the usual cause of stray horizontal scroll on mobile. */
.mobile-menu{
  position:fixed;inset:0;z-index:90;
  background:var(--red);
  color:var(--ivory);
  display:none;
  flex-direction:column;
  padding:1.5rem;
  overflow-y:auto;
}
.mobile-menu[data-open="true"]{display:flex}
.mobile-menu .mm-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}
.mobile-menu a{
  text-decoration:none;
  font-family:var(--f-display);
  font-weight:600;
  font-size:1.35rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:.7rem 0;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.mobile-menu a:last-of-type{border-bottom:0}
body[data-lock="true"]{overflow:hidden}

@media (max-width:1120px){
  .nav{display:none}
  .burger{display:block}
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  background:var(--red);
  color:var(--ivory);
  position:relative;
  overflow:hidden;
  padding:clamp(3.5rem,9vw,7rem) 0 clamp(2.5rem,5vw,4rem);
}
/* Brand watermark: the minaret icon, very faint and cropped off the edge. */
.watermark{
  position:absolute;right:-4%;bottom:-22%;
  width:clamp(220px,34vw,460px);aspect-ratio:89.5/108.7;
  pointer-events:none;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 89.5 108.7'%3E%3Cg transform='scale%280.895%2C0.799%29'%3E%3Cpath fill='%23F7F1E6' d='M50%2C0 C43%2C18 0%2C46 0%2C90 C0%2C120 22%2C136 46%2C136 C29%2C129 16%2C113 16%2C90 C16%2C58 40%2C28 50%2C0 Z'/%3E%3Cpath fill='%23F7F1E6' d='M50%2C0 C57%2C18 100%2C46 100%2C90 C100%2C120 78%2C136 54%2C136 C71%2C129 84%2C113 84%2C90 C84%2C58 60%2C28 50%2C0 Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
  opacity:.08;
}
.band .watermark{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 89.5 108.7'%3E%3Cg transform='scale%280.895%2C0.799%29'%3E%3Cpath fill='%238A1F1F' d='M50%2C0 C43%2C18 0%2C46 0%2C90 C0%2C120 22%2C136 46%2C136 C29%2C129 16%2C113 16%2C90 C16%2C58 40%2C28 50%2C0 Z'/%3E%3Cpath fill='%238A1F1F' d='M50%2C0 C57%2C18 100%2C46 100%2C90 C100%2C120 78%2C136 54%2C136 C71%2C129 84%2C113 84%2C90 C84%2C58 60%2C28 50%2C0 Z'/%3E%3C/g%3E%3C/svg%3E");opacity:.06}
.band-ink .watermark{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 89.5 108.7'%3E%3Cg transform='scale%280.895%2C0.799%29'%3E%3Cpath fill='%23F7F1E6' d='M50%2C0 C43%2C18 0%2C46 0%2C90 C0%2C120 22%2C136 46%2C136 C29%2C129 16%2C113 16%2C90 C16%2C58 40%2C28 50%2C0 Z'/%3E%3Cpath fill='%23F7F1E6' d='M50%2C0 C57%2C18 100%2C46 100%2C90 C100%2C120 78%2C136 54%2C136 C71%2C129 84%2C113 84%2C90 C84%2C58 60%2C28 50%2C0 Z'/%3E%3C/g%3E%3C/svg%3E");opacity:.06}
/* ---------- Homepage 3D hero ----------
   A turning ring of client photos in the brand's onion-dome arches, on a
   Plaza Red stage. Only the track's rotateY changes while it turns, so the
   animation stays on the compositor. Mobile first: copy, ring, then search
   stack; from 1000px the ring moves into its own column. */
.hero-3d{
  padding:1.6rem 0 clamp(2.75rem,6vw,3.75rem);
  background:#242424;
  isolation:isolate;overflow:hidden;
}
/* Soft blurred light in Plaza red, gold and green over the charcoal, with a
   blurred echo of the front photo underneath. */
.hero-ambient{position:absolute;inset:-12%;pointer-events:none;z-index:-1}
.hero-ambient::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(38% 46% at 18% 22%,rgba(138,31,31,.55),transparent 70%),
    radial-gradient(34% 44% at 82% 78%,rgba(199,154,60,.32),transparent 70%),
    radial-gradient(30% 40% at 70% 30%,rgba(62,107,58,.22),transparent 70%),
    rgba(36,36,36,.62);
}
.amb{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  filter:blur(60px) saturate(1.2);
  opacity:0;transition:opacity 1.4s ease;
}
.amb.is-on{opacity:.7}
.hero-grid{
  position:relative;
  display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-areas:"copy" "ring";
}
.hero-copy{grid-area:copy}
.hero-3d .eyebrow{margin:0 0 .75rem;font-size:.68rem;letter-spacing:.14em;color:rgba(247,241,230,.8)}
.hero-3d .eyebrow::after{display:none}
.hero h1{
  font-size:clamp(1.9rem,7.4vw,4.1rem);
  letter-spacing:.05em;
  max-width:16ch;
  color:var(--ivory);
}
.hero-lede{
  margin-top:1.1rem;
  max-width:46ch;
  font-weight:500;
  font-size:clamp(1.05rem,1.5vw,1.22rem);
  color:var(--on-dark);
}
@media (max-width:760px){.hero-3d .hero-lede{display:none}}

.ring{
  grid-area:ring;
  --cw:clamp(156px,47vw,250px);
  --ch:calc(var(--cw) * 1.25);
  --r:calc(var(--cw) * 1.4);
  margin-inline:calc(50% - 50vw);
}
.ring-stage{
  position:relative;
  height:calc(var(--ch) * 1.5);
  perspective:calc(var(--cw) * 6);
  perspective-origin:50% 30%;
  touch-action:pan-y;
  cursor:grab;
  user-select:none;-webkit-user-select:none;
  outline:none;
}
.ring-stage.is-dragging{cursor:grabbing}
.ring-stage:focus-visible .ring-floor{
  position:absolute;left:50%;bottom:2%;
  width:calc(var(--r) * 2.3);height:calc(var(--cw) * .42);
  transform:translateX(-50%);
  border-radius:50%;
  border:1px solid rgba(247,241,230,.18);
  background:radial-gradient(closest-side,rgba(255,255,255,.08),transparent 70%);
}
.ring-ui{display:flex;align-items:center;justify-content:center;gap:1.25rem;margin:.2rem 0 .4rem}
.ring-btn{
  width:56px;height:56px;flex:none;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:var(--ivory);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.ring-btn:hover{background:var(--ivory);color:#2B2B2B;border-color:var(--ivory)}
.ring-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.ring-btn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ring-track{
  position:absolute;left:50%;top:10%;
  width:var(--cw);height:var(--ch);margin-left:calc(var(--cw) / -2);
  transform-style:preserve-3d;
  transform:translateZ(calc(var(--r) * -1)) rotateX(var(--tilt-x,-5deg)) rotateY(calc(var(--rot,0deg) + var(--tilt-y,0deg)));
  will-change:transform;
}
.ring-card{
  position:absolute;inset:0;margin:0;
  transform:rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(var(--r));
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  -webkit-box-reflect:below 6px linear-gradient(transparent 64%,rgba(0,0,0,.22));
  cursor:pointer;
}
.ring-photo,.ring-shade{
  position:absolute;inset:0;display:block;
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 125' preserveAspectRatio='none'%3E%3Cpath d='M0 50A50 50 0 0 1 100 50V117Q100 125 92 125H8Q0 125 0 117Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 125' preserveAspectRatio='none'%3E%3Cpath d='M0 50A50 50 0 0 1 100 50V117Q100 125 92 125H8Q0 125 0 117Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.ring-photo{background:#4a1010}
.ring-photo img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.ring-shade{background:#1b0505;opacity:var(--shade,0);pointer-events:none}
.ring-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 125' preserveAspectRatio='none'%3E%3Cpath d='M0 50A50 50 0 0 1 100 50V117Q100 125 92 125H8Q0 125 0 117Z' transform='translate%281.6 2%29 scale%28.968 .968%29' fill='none' stroke='%23C79A3C' stroke-width='1.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.ring-floor{
  position:absolute;left:50%;bottom:2%;
  width:calc(var(--r) * 2.3);height:calc(var(--cw) * .42);
  transform:translateX(-50%);
  border-radius:50%;
  border:1px solid rgba(199,154,60,.38);
  background:radial-gradient(closest-side,rgba(199,154,60,.28),rgba(199,154,60,.06) 70%,transparent);
}
@media (min-width:1000px){
  .hero-3d{padding-top:3.5rem}
  .hero-grid{
    grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
    grid-template-areas:"copy ring";
    column-gap:2rem;align-items:center;
  }
  .ring{--cw:clamp(215px,19vw,290px);--r:calc(var(--cw) * 1.32);margin-inline:0}
  .ring-stage{height:calc(var(--ch) * 1.62)}
  .hero-3d .eyebrow{font-size:.74rem;letter-spacing:var(--track-label)}
}
@media (prefers-reduced-motion: reduce){.amb{transition:none}}

/* Ticker — real trading names from the directory */
.ticker{
  margin-top:clamp(2.75rem,6vw,4.5rem);
  overflow:hidden;
  position:relative;z-index:1;
  background:rgba(20,20,20,.85);border-top:1px solid rgba(255,255,255,.08);
}
.ticker-track{
  display:flex;
  width:max-content;
  animation:slide 64s linear infinite;
}
.ticker-track > div{display:flex;flex-shrink:0}
.ticker span{
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--on-dark);
  padding:.8rem 0;
  white-space:nowrap;
}
.ticker span::after{content:"·";margin:0 1.15rem;color:var(--gold)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){
  .ticker-track{animation:none;width:100%;overflow:hidden}
}

/* ---------- FAQ accordion ---------- */
.faq-list{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line)}
.faq-item{background:var(--ivory)}
.faq-item summary{
  cursor:pointer;list-style:none;
  padding:1.25rem 1.4rem;
  font-weight:600;font-size:1.1rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";flex:none;
  font-size:1.35rem;line-height:1;color:var(--red);
}
.faq-item[open] summary::after{content:"\2212"}
.faq-a{padding:0 1.4rem 1.4rem;max-width:66ch}
.faq-a p{font-size:.98rem}
.faq-a a{color:var(--red);text-decoration:none;font-weight:600}
.faq-a a:hover{text-decoration:underline}

/* Page header for interior pages */
.page-head{
  background:var(--red);color:var(--ivory);
  padding:clamp(2.75rem,7vw,5rem) 0 clamp(2.25rem,5vw,3.5rem);
  position:relative;overflow:hidden;
}
.page-head-in{position:relative;z-index:1}
.page-head h1{
  font-size:clamp(1.8rem,5vw,3.4rem);
}
.page-head p{
  margin-top:1.1rem;max-width:56ch;color:var(--on-dark);
}
.crumb{
  font-size:.72rem;font-weight:500;letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--on-dark-muted);margin-bottom:1.1rem;
}
.crumb a{text-decoration:none;color:var(--on-dark)}
.crumb a:hover{text-decoration:underline}

/* ==========================================================================
   Sections
   ========================================================================== */
.band{padding:clamp(3.25rem,7vw,5.75rem) 0}
.band-paper2{background:var(--ivory-2)}
.band-textured{position:relative;overflow:hidden}
.band-textured .shell{position:relative;z-index:1}
.band-ink{background:var(--charcoal);color:var(--ivory)}
.band-ink h2,.band-ink h3{color:var(--ivory)}
.band-ink.band-culture{background:var(--green)}
.band-ink.band-culture .eyebrow{color:var(--ivory)}
.band-tight{padding-block:clamp(2.25rem,5vw,3.25rem)}
.band-flush{padding:0}

.h2{font-size:clamp(1.6rem,3.8vw,2.5rem)}
.h3{font-size:clamp(1.25rem,2.4vw,1.6rem)}
.lede{font-size:clamp(1.05rem,1.5vw,1.2rem);max-width:62ch;color:var(--muted)}
.band-ink .lede{color:var(--on-dark)}

.split{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(1.75rem,4vw,3.25rem);
  align-items:start;
}
@media (min-width:860px){
  .split{grid-template-columns:0.85fr 1.15fr}
  .split-even{grid-template-columns:1fr 1fr}
}

/* ---------- category grid ---------- */
.cats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
  margin-top:2.5rem;
}
@media (min-width:620px){.cats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:980px){.cats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.cat{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:1.4rem 1.2rem 1.5rem;
  text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:.85rem;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.cat:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
@media (prefers-reduced-motion: reduce){.cat:hover{transform:none}}
.cat b{font-weight:600;font-size:1.05rem;line-height:1.25;color:var(--charcoal)}
.cat small{font-weight:600;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green);align-self:flex-start}
/* Arched tiles with a coloured rim and icon badge, one colour per
   department, so the 40 categories read as groups at a glance. */
.cat-arch{
  border-radius:50% 50% var(--radius-lg) var(--radius-lg) / 38px 38px var(--radius-lg) var(--radius-lg);
  border-top:5px solid var(--cat-c);
  padding:2rem .9rem 1.15rem;
  gap:.55rem;
  align-items:center;text-align:center;
  background:linear-gradient(180deg,var(--cat-tint),transparent 64%),var(--card);
}
.cat-arch:hover{border-color:var(--cat-c)}
.cat-badge{
  width:60px;height:60px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  background:var(--card);
  box-shadow:0 0 0 3px var(--cat-c),0 6px 14px -6px rgba(43,43,43,.35);
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.cat-badge img{width:40px;height:40px;object-fit:contain}
.cat:hover .cat-badge{transform:scale(1.08) rotate(-4deg)}
.cat-arch b{font-size:.95rem;margin-top:.2rem}
.cat-arch small{
  align-self:center;font-size:.64rem;
  color:var(--cat-ink);background:var(--cat-tint);
  padding:.22rem .6rem;border-radius:99px;
}
.cat-gold{--cat-c:var(--gold);--cat-tint:rgba(199,154,60,.26);--cat-ink:#6b4f12}
.cat-red{--cat-c:var(--red);--cat-tint:rgba(138,31,31,.14);--cat-ink:var(--red)}
.cat-green{--cat-c:var(--green);--cat-tint:rgba(62,107,58,.18);--cat-ink:var(--green)}
@media (prefers-reduced-motion: reduce){.cat:hover .cat-badge{transform:none}}

/* ---------- section code chips ---------- */
.chip{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.7rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;
  padding:.24rem .55rem;
  border-radius:4px;
  border:1px solid var(--line);
  color:var(--charcoal);
  white-space:nowrap;
}
/* Section codes: the colour lives on the dot, so text stays charcoal/ivory
   and readable on any background. */
.chip-dot{width:8px;height:8px;border-radius:99px;background:var(--sec,var(--muted));flex:none}
.c-north{--sec:var(--gold)}
.c-south{--sec:var(--red)}
.c-central{--sec:var(--green)}
.c-kiosk{--sec:var(--charcoal)}
.band-ink .chip,.page-head .chip{color:var(--on-dark);border-color:rgba(247,241,230,.35)}
.band-ink .c-kiosk,.page-head .c-kiosk{--sec:var(--on-dark)}
.page-head .c-south{--sec:var(--ivory)}

/* ---------- store directory ---------- */
/* Pinned on wider screens only; on a phone it would cover ~40% of the
   screen while scrolling the list. */
.filters{
  position:sticky;top:70px;z-index:40;
  background:var(--ivory);
  border-bottom:1px solid var(--line);
  padding:1rem 0;
}
.filters-in{display:flex;flex-direction:column;gap:.85rem}
@media (max-width:760px){.filters{position:static}}
.search-wrap{position:relative;display:flex}
/* [type="text"] here isn't decorative — it bumps specificity past the
   generic `input[type=text]{padding:...}` rule below (same 0-1-1 without
   it), which was clobbering this padding-left and pulling the placeholder
   text in over the search icon. */
.search-wrap input[type="text"]{
  flex:1;min-width:0;
  font-family:var(--f-body);font-size:1rem;
  padding:.8rem 1rem .8rem 2.6rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--card);color:var(--charcoal);
}
.search-wrap input[type="text"]:focus{outline:none;border-color:var(--charcoal);box-shadow:0 0 0 3px rgba(43,43,43,.12)}
.search-wrap svg{
  position:absolute;left:.85rem;top:50%;transform:translateY(-50%);
  width:18px;height:18px;stroke:var(--muted);stroke-width:1.6;fill:none;pointer-events:none;
}
.filter-row{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;min-width:0}
.pill{
  font-family:var(--f-body);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  padding:.45rem .85rem;
  border:1px solid var(--line);
  background:var(--card);color:var(--muted);
  border-radius:var(--radius);cursor:pointer;
  transition:all .15s ease;
  white-space:nowrap;flex:0 0 auto;
}
.pill:hover{border-color:var(--charcoal);color:var(--charcoal)}
.pill[aria-pressed="true"]{background:var(--charcoal);border-color:var(--charcoal);color:var(--ivory)}
.pill.p-north[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--charcoal)}
.pill.p-south[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:var(--ivory)}
.pill.p-central[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:var(--ivory)}

select.pill{
  -webkit-appearance:none;appearance:none;
  padding-right:2rem;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236B6558' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .75rem center;background-size:10px;
  width:auto;max-width:min(200px, 100%);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  flex:0 1 auto;
}

.result-count{
  font-size:.72rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}

.store-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1rem;
  margin-top:2rem;
}
@media (min-width:640px){.store-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1020px){.store-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

.store{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  padding:1.35rem 1.25rem;
  display:flex;flex-direction:column;gap:.7rem;
  border-left:3px solid transparent;
  transition:box-shadow .2s ease, transform .2s ease;
}
.store:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
@media (prefers-reduced-motion: reduce){.store:hover{transform:none}}
.store[data-section="North"]{border-left-color:var(--gold)}
.store[data-section="South"]{border-left-color:var(--red)}
.store[data-section="Central Bazaar"]{border-left-color:var(--green)}
.store[data-section="Kiosk"]{border-left-color:var(--charcoal)}
.store[data-section="Office"]{border-left-color:var(--muted)}

.store h3{font-size:1.1rem;line-height:1.25}
.store h3 a{display:inline-block;padding:.2rem 0}
.store-code{
  font-size:.8rem;
  letter-spacing:.06em;color:var(--charcoal);
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
}
.store-floor{color:var(--muted)}
.store-floor::before{content:"\00b7";margin-right:.5rem}
.store-cat{
  font-size:.7rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.store-links{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:auto;padding-top:.35rem}
.store-links a{
  font-size:.88rem;text-decoration:none;color:var(--charcoal);
  border-bottom:1px solid var(--line);padding-bottom:1px;
  word-break:break-word;
}
.store-links a:hover{border-bottom-color:var(--red);color:var(--red)}

.empty{
  grid-column:1/-1;
  background:var(--ivory);
  padding:3rem 1.5rem;text-align:center;
}
.empty b{font-size:1.2rem;font-weight:600;display:block;margin-bottom:.5rem}
.empty p{color:var(--muted);max-width:44ch;margin-inline:auto}

/* ==========================================================================
   Hours / open-now
   ========================================================================== */
/* Status badge — brand style: Jost caps, wide tracking, 2px outline. */
.status{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  border:2px solid currentColor;border-radius:4px;padding:.3rem .8rem;
}
.status .dot{position:relative;width:8px;height:8px;border-radius:99px;background:currentColor;flex:none}
.status .dot::after{
  content:"";position:absolute;inset:-5px;border-radius:99px;
  border:1.5px solid currentColor;
  animation:status-pulse 2.4s ease-out infinite;
}
@keyframes status-pulse{
  0%{transform:scale(.5);opacity:.8}
  100%{transform:scale(2.4);opacity:0}
}
.status[data-state="open"]{color:var(--green)}
.status[data-state="closed"]{color:var(--red)}
.status[data-state="soon"]{color:var(--charcoal)}
@media (prefers-reduced-motion: reduce){.status .dot::after{animation:none;display:none}}

/* ==========================================================================
   Plan / wayfinding
   ========================================================================== */
.plan-card{
  background:var(--ivory);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:clamp(1.25rem,3vw,2rem);
  box-shadow:var(--shadow-sm);
}
.band-ink .plan-card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.16)}
/* The whole-centre plan (inline SVG from tools/plan_diagram.py). It is
   drawn for paper; on dark bands its ink-coloured marks are recoloured. */
.plan-board{display:block;cursor:zoom-in;text-decoration:none}
.plaza-plan{display:block;width:100%;height:auto}
.plan-card .pp-bg{fill:transparent}
.band-ink .plaza-plan .pp-code text,.band-ink .plaza-plan .pp-cap{fill:var(--on-dark)}
.band-ink .plaza-plan .pp-sub{fill:var(--on-dark-muted)}
.band-ink .plaza-plan .pp-k{fill:var(--on-dark);stroke:var(--on-dark-muted)}
.band-ink .plaza-plan .pp-link{stroke:var(--on-dark-muted)}

/* Detailed centre-plan floors (/visit/centre-plan/) */
.plan-scan{margin:2rem 0 0;padding:clamp(.5rem,2vw,1rem)}
.plan-scan img{display:block;width:100%;height:auto;border-radius:6px}
.plan-scan figcaption{margin-top:.75rem;font-size:.85rem;display:flex;gap:.5rem;flex-wrap:wrap}
.plan-scan figcaption a{color:var(--red);font-weight:600}

.code-key{list-style:none;margin:1.75rem 0 0;padding:0;display:grid;gap:.6rem}
.code-key li{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:1rem 1.1rem;display:flex;gap:1rem;align-items:flex-start}
.band-ink .code-key li{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);box-shadow:none}
.code-key .k{
  font-weight:600;font-size:.95rem;
  min-width:3.4rem;flex:none;
  border-left:3px solid var(--sec,var(--muted));padding-left:.6rem;
}
.code-key .k.north{--sec:var(--gold)}
.code-key .k.south{--sec:var(--red)}
.code-key .k.central{--sec:var(--green)}
.code-key .k.kiosk{--sec:var(--charcoal)}
.band-ink .code-key .k.kiosk{--sec:var(--on-dark)}
.code-key p{font-size:.95rem;margin:0}
.code-key b{display:block;font-weight:600;font-size:1.02rem;margin-bottom:.15rem}

/* ==========================================================================
   Editorial content
   ========================================================================== */
.prose{max-width:66ch}
.prose h2{font-size:clamp(1.3rem,2.8vw,1.75rem);margin:2.75rem 0 .9rem}
.prose h2:first-child{margin-top:0}
.prose p{font-size:1.06rem}
.prose ul{padding-left:1.15rem;margin:0 0 1.2em}
.prose li{margin-bottom:.5rem}
.pull,.prose .pull{
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(1.25rem,3vw,1.6rem);
  letter-spacing:.03em;
  line-height:1.35;
  border-left:3px solid var(--gold);
  padding:.3rem 0 .3rem 1.35rem;
  margin:2.25rem 0;
  color:var(--charcoal);
}

.fact-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.fact-list li{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.05rem 1.2rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.35rem 1.5rem;align-items:baseline}
.band-ink .fact-list li{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.fact-list dt,.fact-list .fk{font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);min-width:0}
.fact-list .fv{font-weight:600;font-size:1.08rem;text-align:right;min-width:0;overflow-wrap:anywhere;color:var(--charcoal)}
.band-ink .fact-list dt,.band-ink .fact-list .fk{color:var(--on-dark-muted)}
.band-ink .fact-list .fv{color:var(--ivory)}
@media (max-width:520px){
  .fact-list li{flex-direction:column;align-items:flex-start}
  .fact-list .fv{text-align:left}
}

/* cards */
.cards{display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem;margin-top:2.5rem}
@media (min-width:720px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1020px){.cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:1.6rem 1.5rem;
  display:flex;flex-direction:column;gap:.75rem;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .22s ease, transform .22s ease;
}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.band-paper2 .card{background:var(--ivory)}
.band-ink .card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.16);box-shadow:none}
.band-ink .card:hover{transform:none;box-shadow:none}
@media (prefers-reduced-motion: reduce){.card:hover{transform:none}}
.card h3{font-size:1.2rem}
.card p{font-size:1rem;color:var(--muted);margin:0}
.band-ink .card p{color:var(--on-dark)}
.card-num{
  font-size:.72rem;font-weight:600;letter-spacing:var(--track-label);
  color:var(--green);text-transform:uppercase;
}
.band-ink .card-num{color:var(--gold)}
.card-feature{border:2px solid var(--red);background:linear-gradient(180deg,rgba(138,31,31,.07),var(--card) 55%)}
.card-feature .card-num{color:var(--red)}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--f-body);font-weight:600;font-size:.95rem;letter-spacing:.02em;
  padding:.8rem 1.35rem;
  border-radius:var(--radius);
  text-decoration:none;
  border:1px solid var(--red);
  background:var(--red);color:var(--ivory);
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:background .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.btn:hover{background:var(--red-dark);border-color:var(--red-dark);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
@media (prefers-reduced-motion: reduce){.btn:hover{transform:none}}
.btn-ghost{background:transparent;color:var(--red)}
.btn-ghost:hover{background:var(--red);color:var(--ivory)}
/* On red/charcoal/green bands the primary flips to ivory-on-red text. */
.band-ink .btn:not(.btn-ghost),.oops .btn:not(.btn-ghost){background:var(--ivory);border-color:var(--ivory);color:var(--red)}
.band-ink .btn:not(.btn-ghost):hover,.oops .btn:not(.btn-ghost):hover{background:#fff;border-color:#fff}
.band-ink .btn-ghost,.oops .btn-ghost{color:var(--ivory);border-color:rgba(247,241,230,.5)}
.band-ink .btn-ghost:hover,.oops .btn-ghost:hover{background:var(--ivory);color:var(--red)}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}

/* map */
.map-frame{border:1px solid var(--line);background:var(--ivory-2);line-height:0}
.map-frame iframe{width:100%;height:400px;border:0;display:block}
@media (max-width:640px){.map-frame iframe{height:300px}}

/* form */
.form-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.1rem}
@media (min-width:660px){.form-grid .half{grid-column:span 1}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid .full{grid-column:1/-1}}
label{display:block;font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.45rem}
input[type=text],input[type=email],input[type=tel],select:not(.pill),textarea{
  width:100%;
  font-family:var(--f-body);font-size:1rem;
  padding:.8rem .95rem;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--card);color:var(--charcoal);
}
textarea{min-height:150px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--charcoal);box-shadow:0 0 0 3px rgba(43,43,43,.12)}

.notice{
  border:2px solid var(--red);
  background:var(--card);
  padding:1rem 1.15rem;
  font-size:.9rem;
  border-radius:var(--radius);
  margin-top:1.5rem;
}
.notice b{font-size:.74rem;font-weight:600;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--red);display:block;margin-bottom:.35rem}

/* ==========================================================================
   Footer
   ========================================================================== */
.foot{background:var(--charcoal);color:var(--ivory);padding:clamp(3rem,6vw,4.5rem) 0 0}
/* Brand footer band: handle left, slogan right (gold on charcoal). */
.foot-band{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 2rem;
  padding-bottom:clamp(2rem,4vw,2.75rem);margin-bottom:clamp(2rem,4vw,2.75rem);
  border-bottom:1px solid rgba(247,241,230,.14);
}
.foot-handle{font-weight:500;font-size:.8rem;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--on-dark)}
.foot-slogan{font-family:var(--f-display);font-weight:700;font-size:1.25rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin:0}
.foot-grid{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:2.5rem;
}
@media (min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
@media (min-width:1020px){.foot-grid{grid-template-columns:1.5fr .8fr .8fr 1.1fr}}
.foot h2{
  font-family:var(--f-body);
  font-size:.72rem;letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--gold);font-weight:600;
  margin:0 0 1rem;
}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.foot a{text-decoration:none;font-size:.95rem;color:var(--on-dark)}
.foot a:hover{color:var(--gold)}
.foot-brand p{font-size:.95rem;color:var(--on-dark-muted);max-width:38ch}
.foot-bar{
  margin-top:clamp(2.5rem,5vw,3.5rem);
  border-top:1px solid rgba(255,255,255,.12);
  padding:1.35rem 0;
  display:flex;flex-wrap:wrap;gap:.85rem;justify-content:space-between;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-muted);
}
.foot-bar a{font-size:.7rem;color:var(--on-dark-muted);display:inline-block;padding:.45rem 0}
.foot-bar a:hover{color:var(--gold)}

/* 404 */
.oops{
  min-height:72vh;display:flex;align-items:center;
  background:var(--red);color:var(--ivory);
  position:relative;overflow:hidden;
}
.oops-in{position:relative;z-index:1;padding:4rem 0}
.oops .code{
  font-size:.8rem;font-weight:600;letter-spacing:var(--track-label);
  color:var(--on-dark);margin-bottom:1.25rem;text-transform:uppercase;
}
.oops h1{font-size:clamp(2.2rem,7vw,4.4rem)}
.oops p{margin-top:1.25rem;max-width:48ch;color:var(--on-dark)}

/* ==========================================================================
   Photography & brand mark
   ========================================================================== */
.foot-brand img{height:44px;width:auto;margin-bottom:1.25rem}

/* ---------- Quick-action deck — floats over the hero's lower edge ---------- */
.quick-links{
  position:relative;z-index:5;
  margin-top:clamp(-3.5rem,-6vw,-2.5rem);
  margin-bottom:clamp(2.5rem,5vw,3.5rem);
}
.quick-links-in{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.6rem;
  background:var(--ivory-2);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:.6rem;
}
.quick-link{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;
  background:var(--card);
  border-radius:var(--radius);
  padding:1.25rem 1rem;
  text-decoration:none;color:var(--charcoal);
  text-align:center;min-height:96px;
  transition:background .18s ease,transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s ease;
}
.quick-link:hover{transform:translateY(-4px);box-shadow:inset 0 -3px 0 var(--ql),0 12px 22px -6px rgba(43,43,43,.18)}
/* Brand icon style: rounded line icons in Plaza Red. */
/* Each action gets its own colour: a solid disc for the icon and a matching
   bar along the tile's foot. */
.quick-link{--ql:var(--red);--ql-ink:var(--ivory);box-shadow:inset 0 -3px 0 var(--ql)}
.ql-directory{--ql:var(--red)}
.ql-hours{--ql:var(--gold);--ql-ink:var(--charcoal)}
.ql-parking{--ql:var(--green)}
.ql-whatsapp{--ql:#1FA855}
.ql-badge{
  width:48px;height:48px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--ql);color:var(--ql-ink);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.28),0 4px 10px -2px rgba(43,43,43,.28);
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.quick-link:hover .ql-badge{transform:scale(1.08) rotate(-4deg)}
.quick-link .ql-icon{width:23px;height:23px;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;fill:none;flex:none}
.quick-link .ql-label{font-weight:600;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--charcoal)}
.quick-link .status{font-size:.68rem;letter-spacing:.1em;padding:.28rem .6rem;gap:.4rem;text-align:center;justify-content:center}
@media (max-width:760px){.quick-link .status .dot{display:none}}
@media (max-width:760px){.quick-links-in{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion: reduce){
  .quick-link,.quick-link:hover,.ql-badge,.quick-link:hover .ql-badge{transform:none;transition:none}
}
.quick-links-caption{
  text-align:center;padding:.6rem 0 0;
  font-size:.82rem;color:var(--muted);
}
.quick-links-caption a{color:var(--red);text-decoration:none;font-weight:600;margin-left:.4rem;display:inline-block;padding:.25rem 0}
.quick-links-caption a:hover{text-decoration:underline}
.google-rating{display:inline-flex;align-items:center;gap:.3rem;color:var(--charcoal);font-weight:600;margin-left:0;text-decoration:none}
.google-rating .star{width:14px;height:14px;fill:var(--gold);flex:none}
.google-rating:hover{text-decoration:underline}
.quick-links-sep{margin:0 .5rem;color:var(--line)}
@media (max-width:520px){.quick-links-caption{display:flex;flex-direction:column;gap:.35rem}.quick-links-sep{display:none}}
.google-rating-lg{
  display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.5rem;margin-top:1rem;font-size:1.15rem;font-weight:600;
}
.google-rating-lg .star{width:20px;height:20px}
@media (max-width:520px){.google-rating-lg{font-size:1rem}.google-rating-lg .quick-links-sep{display:none}}

/* Feature image */
.figure{margin:0;border:1px solid var(--line);background:var(--ivory-2);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.band-ink .figure{border-color:rgba(255,255,255,.16)}
.figure img{width:100%;height:auto;display:block}
.figure figcaption{
  font-size:.7rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);padding:.75rem .9rem;
}
.band-ink .figure figcaption{color:var(--on-dark-muted)}

/* Gallery strip */
.gallery{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;margin-top:2.5rem;
}
@media (min-width:840px){.gallery{grid-template-columns:repeat(4,minmax(0,1fr))}}
.gallery-pair{margin-top:1.75rem}
@media (min-width:840px){.gallery-pair{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gallery figure{margin:0;position:relative;overflow:hidden;background:var(--charcoal);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}
.gallery img{
  width:100%;height:100%;min-height:170px;object-fit:cover;display:block;
  transition:transform .5s ease, opacity .3s ease;
  opacity:.88;
}
.gallery figure:hover img{transform:scale(1.04);opacity:1}
.gallery figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:1.6rem .9rem .7rem;
  font-size:.7rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ivory);
  background:linear-gradient(180deg,rgba(43,43,43,0),rgba(43,43,43,.88));
}
@media (prefers-reduced-motion: reduce){.gallery figure:hover img{transform:none}}

/* Photo trade cards */
.trades{
  display:grid;grid-template-columns:minmax(0,1fr);gap:2.75rem;margin-top:2.75rem;
}
@media (min-width:700px){.trades{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}}
@media (min-width:1100px){.trades{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Trades strip — an endless, gently drifting row of cards, made of the
   real cards plus identical hidden copies. Phones scroll it natively
   (their own momentum and feel); app.js drifts it and, whenever it comes
   to rest, jumps it by whole copies back to the middle, which looks
   identical, so it never runs out. Mouse devices get .is-driven: app.js
   moves the row with a transform (drag with momentum, arrows, wheel). */
.trades-carousel{position:relative}
.trades-marquee-outer{
  width:100%;overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
}
.trades-marquee-outer::-webkit-scrollbar{display:none}
/* Mouse devices: app.js moves the row itself (drag, arrows, wheel). */
.trades-marquee-outer.is-driven{overflow:hidden;touch-action:pan-y;cursor:grab}
.trades-marquee-outer.is-dragging{cursor:grabbing}
.trades-marquee-outer.is-dragging a{pointer-events:none}
.trades-marquee-row{display:flex;width:max-content;align-items:stretch;gap:1.1rem;will-change:transform}
.trades-marquee-group{display:flex;flex-shrink:0;gap:1.1rem}
.trades-marquee-group .trade{flex:0 0 auto;width:60vw;max-width:230px}
.trades-marquee-group img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
@media (min-width:700px){
  .trades-marquee-row,.trades-marquee-group{gap:2.75rem}
  .trades-marquee-group .trade{width:320px;max-width:none}
}
/* Arrows: shown where there's a mouse; touch screens swipe. Centred on
   the photos (4:5 under the card's width). */
.tc-arrow{
  display:none;position:absolute;z-index:2;top:calc(160px - 28px);
  width:56px;height:56px;border-radius:50%;place-items:center;cursor:pointer;
  background:var(--card);color:var(--red);border:1px solid rgba(138,31,31,.18);
  box-shadow:0 10px 24px -10px rgba(43,23,23,.45);
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.tc-arrow:hover{background:var(--red);color:var(--ivory);transform:scale(1.05)}
.tc-arrow:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.tc-arrow svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tc-prev{left:-10px}
.tc-next{right:-10px}
@media (hover:hover) and (pointer:fine){.tc-arrow{display:grid}}
@media (min-width:700px){.tc-arrow{top:calc(200px - 28px)}}
@media (min-width:1300px){.tc-prev{left:-28px}.tc-next{right:-28px}}
.trade{display:flex;flex-direction:column}
/* Photos sit under a rounded arch, echoing the Grand Bazaar's arches. */
.trade-media{display:block}
.trade .ph{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--ivory-2);border-radius:50% 50% 16px 16px / 22% 22% 16px 16px;box-shadow:var(--shadow-md)}
.trade .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.trade:hover .ph img{transform:scale(1.05)}
.trade .body{padding:.9rem .1rem 0;display:flex;flex-direction:column;gap:.4rem}
.trade h3,.trade h2.h3{font-family:var(--f-display);font-weight:700;font-size:1.25rem;letter-spacing:.06em;text-transform:uppercase}
.trade h3 a{color:inherit;text-decoration:none;display:inline-block;padding:.15rem 0}
.trade h3 a:hover{text-decoration:underline}
.trade p{font-size:.92rem;color:var(--muted);margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.trade-actions{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;margin-top:.15rem}
@media (min-width:700px){
  .trade .body{padding:1.35rem .1rem 0;gap:.55rem}
  .trade h3,.trade h2.h3{font-size:1.45rem}
  .trade p{font-size:1rem;-webkit-line-clamp:unset}
  .trade-actions{gap:1.1rem;margin-top:.4rem}
}
.search-pill{
  display:inline-flex;align-items:center;gap:.35rem;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--card);
  padding:.32rem .75rem;font-size:.8rem;font-weight:600;color:var(--red);
  text-decoration:none;transition:border-color .2s ease, background .2s ease;
}
.search-pill svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.search-pill:hover{border-color:var(--red);background:var(--ivory-2)}
.trade .go{display:inline-block;padding:.45rem 0;font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--red);text-decoration:none}
.trade .go:hover{text-decoration:underline}
@media (min-width:700px){
  .search-pill{gap:.45rem;padding:.42rem .95rem;font-size:.86rem}
  .search-pill svg{width:14px;height:14px}
}
@media (prefers-reduced-motion: reduce){.trade:hover .ph img{transform:none}}

/* Wide banner image */
.banner{
  position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:var(--charcoal);
}
.banner img{width:100%;height:auto;display:block}
.banner-bleed{border:none;border-radius:0}
.banner-bleed img{width:100%;height:clamp(170px,32vw,420px);object-fit:cover;display:block}
.banner-cap{
  position:absolute;inset:auto 0 0 0;padding:2.5rem 1.5rem 1.25rem;
  background:linear-gradient(180deg,rgba(43,43,43,0),rgba(43,43,43,.9));
  font-size:.7rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-dark);
}

/* Website link on a store card */
.store-links a.store-web{color:var(--green);border-bottom-color:var(--green)}
.store-links a.store-web:hover{color:var(--red);border-bottom-color:var(--red)}

/* ==========================================================================
   3D centre plan (/visit/centre-plan/)
   Mobile first: search and floor chips above a tall stage; the info sheet
   rises from the bottom. From 900px the sheet docks to the right.
   ========================================================================== */
.page-head-tight{padding:clamp(2rem,5vw,3.25rem) 0 clamp(1.5rem,4vw,2.5rem)}
.p3{background:var(--charcoal);color:var(--ivory);position:relative}
.p3-top{
  position:relative;z-index:6;
  display:grid;gap:.7rem;
  width:var(--shell);margin-inline:auto;
  padding:1rem 0 .8rem;
}
.p3-search{position:relative;z-index:3;display:flex;align-items:center}
.p3-search svg{position:absolute;left:.95rem;width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:1.8;pointer-events:none}
.p3-search input{
  width:100%;font:inherit;font-size:1rem;
  padding:.85rem 1rem .85rem 2.7rem;
  border:1px solid transparent;border-radius:var(--radius);
  background:var(--card);color:var(--charcoal);
}
.p3-search input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(199,154,60,.35)}
.p3-results{
  position:absolute;left:0;right:0;top:calc(100% + .35rem);
  list-style:none;margin:0;padding:.35rem;
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-lg);
  max-height:min(60vh,360px);overflow:auto;
}
.p3-results button{
  display:flex;justify-content:space-between;gap:1rem;width:100%;
  text-align:left;font:inherit;color:var(--charcoal);
  background:none;border:0;border-radius:4px;padding:.65rem .7rem;cursor:pointer;
}
.p3-results button:hover,.p3-results button:focus-visible{background:var(--ivory-2)}
.p3-results b{font-weight:600}
.p3-results span{color:var(--red);font-weight:600;font-size:.85rem;letter-spacing:.06em;white-space:nowrap}
.p3-noresult{padding:.65rem .7rem;color:var(--muted)}
.p3-chips{
  display:flex;gap:.45rem;overflow-x:auto;scrollbar-width:none;
  margin-inline:calc(50% - 50vw);padding-inline:max(16px,calc(50vw - 50%));
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 16px),transparent);
  mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 16px),transparent);
}
.p3-chips::-webkit-scrollbar{display:none}
.p3-chip{
  flex:none;font:inherit;font-weight:600;font-size:.8rem;letter-spacing:.04em;
  padding:.55rem .95rem;border-radius:99px;cursor:pointer;white-space:nowrap;
  color:var(--ivory);background:rgba(247,241,230,.08);border:1px solid rgba(247,241,230,.22);
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.p3-chip:hover{border-color:var(--gold)}
.p3-chip[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--charcoal)}

.p3-stage{
  position:relative;overflow:hidden;
  height:clamp(460px,76svh,820px);
  background:radial-gradient(120% 90% at 50% 30%,#5a1a1a 0%,#2f1414 55%,#1c1010 100%);
  touch-action:none;
}
.p3-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab}
.p3-stage canvas:active{cursor:grabbing}
.p3-tags{position:absolute;inset:0;pointer-events:none;z-index:2}
.p3-tag{
  position:absolute;left:0;top:0;pointer-events:auto;
  display:flex;flex-direction:column;align-items:center;
  font:inherit;font-weight:600;font-size:.74rem;letter-spacing:.05em;white-space:nowrap;line-height:1.15;
  padding:.4rem .75rem .38rem;border-radius:12px;cursor:pointer;
  color:var(--charcoal);background:rgba(247,241,230,.95);border:1px solid var(--gold);
  box-shadow:0 6px 16px -6px rgba(0,0,0,.55);
}
.p3-tag::after{content:"";position:absolute;left:50%;bottom:-6px;width:10px;height:10px;margin-left:-5px;background:inherit;border:inherit;border-width:0 1px 1px 0;transform:rotate(45deg)}
.p3-tag small{font-size:.62rem;font-weight:500;letter-spacing:.06em;color:var(--muted)}
.p3-tag[hidden]{display:none}
.p3-tag:hover{background:var(--gold)}
.p3-tag:hover small{color:var(--charcoal)}
.p3-now{
  position:absolute;left:12px;top:12px;z-index:3;margin:0;max-width:calc(100% - 84px);
  font-family:'Cinzel',Georgia,serif;font-weight:600;font-size:.86rem;letter-spacing:.05em;
  padding:.4rem .8rem;border-radius:99px;background:rgba(28,16,16,.72);color:var(--ivory);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.p3-now:empty{display:none}
.p3-tools{position:absolute;right:12px;top:12px;z-index:3;display:grid;gap:.4rem}
.p3-tool{
  width:42px;height:42px;display:grid;place-items:center;cursor:pointer;
  border-radius:12px;border:1px solid rgba(247,241,230,.25);
  background:rgba(28,16,16,.72);color:var(--ivory);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.p3-tool:hover{border-color:var(--gold);color:var(--gold)}
.p3-tool[aria-pressed="true"]{background:var(--gold);color:var(--charcoal);border-color:var(--gold)}
.p3-tool svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.p3-i-close,.is-full .p3-i-open{display:none}
.is-full .p3-i-close{display:inline}
/* Full screen (or, where the browser can't, covering the page) */
.p3.is-full{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;overflow:hidden}
.p3.is-full .p3-top{width:auto;margin:0;padding:max(.6rem,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) .6rem max(12px,env(safe-area-inset-left))}
.p3.is-full .p3-chips{margin-inline:0;padding-inline:0}
.p3.is-full .p3-stage{flex:1;height:auto;min-height:0}
html.p3-lock,html.p3-lock body{overflow:hidden}
.p3-help{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:2;margin:0;
  font-size:.74rem;letter-spacing:.06em;white-space:nowrap;
  padding:.35rem .8rem;border-radius:99px;background:rgba(28,16,16,.66);color:var(--on-dark-muted);
  pointer-events:none;transition:opacity .3s ease;
}
.p3-help-mouse{display:none}
@media (hover:hover) and (pointer:fine){.p3-help-touch{display:none}.p3-help-mouse{display:inline}}
.has-sheet .p3-help{opacity:0}
.p3-hint{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;margin:0;
  padding:.7rem 1.1rem;border-radius:var(--radius);background:rgba(28,16,16,.88);color:var(--ivory);font-weight:500;
  pointer-events:none;
}
.p3-sheet{
  position:absolute;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));z-index:5;
  max-height:46%;overflow:auto;overscroll-behavior:contain;
  background:var(--card);color:var(--charcoal);
  border-radius:16px;border-top:4px solid var(--gold);
  box-shadow:0 18px 40px -10px rgba(0,0,0,.6);
  padding:1rem 1.1rem 1.1rem;
  animation:p3-rise .35s cubic-bezier(.22,1,.36,1);
}
.p3-sheet[hidden]{display:none}
@keyframes p3-rise{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
.p3-sheet-close{
  position:absolute;right:.5rem;top:.4rem;width:40px;height:40px;
  font-size:1.6rem;line-height:1;border:0;background:none;color:var(--muted);cursor:pointer;
}
.p3-sheet-floor{margin:0 2.5rem .2rem 0;font-size:.7rem;font-weight:600;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--green)}
.p3-sheet-title{margin:0 2.5rem .7rem 0;font-size:1.05rem;line-height:1.35;color:var(--red)}
.p3-sheet-list{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.p3-sheet-list a{
  display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;
  padding:.6rem .55rem;border-radius:8px;text-decoration:none;color:inherit;
}
.p3-sheet-list a:hover{background:var(--ivory-2)}
.p3-sheet-list b{font-weight:600}
.p3-sheet-list span{font-size:.78rem;color:var(--muted);text-align:right}
.p3-sheet-list .is-focus a{background:rgba(199,154,60,.2)}
.p3-sheet-empty{margin:0;color:var(--muted);font-size:.95rem}
.p3-loading{position:absolute;inset:0;display:grid;place-items:center;z-index:1;pointer-events:none;transition:opacity .4s ease}
.p3-loading span{width:42px;height:42px;border-radius:50%;border:3px solid rgba(199,154,60,.25);border-top-color:var(--gold);animation:p3-spin 1s linear infinite}
@keyframes p3-spin{to{transform:rotate(360deg)}}
.is-ready .p3-loading{opacity:0}
.p3-fallback{display:none;position:absolute;inset:0;z-index:6;place-items:center;padding:2rem;text-align:center;color:var(--on-dark)}
.is-fallback .p3-fallback{display:grid}
.is-fallback .p3-loading,.is-fallback .p3-tools,.is-fallback .p3-help,.is-fallback .p3-top{display:none}
.is-fallback .p3-stage{height:auto;min-height:200px}
@media (min-width:900px){
  .p3-top{grid-template-columns:minmax(0,360px) minmax(0,1fr);align-items:center;padding:1.1rem 0}
  .p3-chips{margin-inline:0;padding-inline:0;-webkit-mask-image:none;mask-image:none;flex-wrap:wrap}
  .p3-stage{height:clamp(560px,78vh,880px)}
  .p3.is-full .p3-top{padding-inline:24px}
  .p3-sheet{left:auto;right:72px;top:14px;bottom:auto;width:340px;max-height:calc(100% - 28px)}
  .p3-tools{right:16px;top:16px}
}
@media (prefers-reduced-motion: reduce){.p3-sheet{animation:none}.p3-loading span{animation:none}}
.form-send{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.form-note{flex-basis:100%;margin:0;font-size:.9rem;color:var(--muted)}
.entrance-list{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.5rem}
.entrance-list a{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1rem;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--charcoal)}
.entrance-list a:hover,.entrance-list a:focus-visible{border-color:var(--red)}
.ent-name{display:flex;flex-direction:column;gap:.1rem}
.ent-name b{font-weight:600}
.ent-name span{color:var(--muted);font-size:.92rem}
.entrance-list i{font-style:normal;font-size:.88rem;color:var(--red);white-space:nowrap}
.fact-list li.is-past .fk,.fact-list li.is-past .fv{color:var(--muted);font-weight:400}
.fact-list li.is-past .fv::after{content:" (passed)"}