/* ==========================================================================
   Shezan Oxford — Our Menus page
   Namespace: menu-   (see DESIGN.md §9 — one namespace per page)

   Loads AFTER css/index.css, which supplies the :root tokens, the reset, the
   buttons, the reveal engine, the header and the footer. Nothing here
   overrides an index- rule; this file only adds the menu- blocks.

   LAYOUT NOTE — this page deliberately does not repeat the centred, full-bleed
   rhythm of index.html. A menu is a reference document: the reader arrives
   looking for one course, not for a narrative. So the page is built as an
   editorial split — a sticky course plate on the left carrying the numeral,
   title and note, with the dishes running down the right as a bordered ledger.
   The course you are reading stays named on screen the whole time you are in it.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root{
  --menu-plate:     clamp(230px, 26vw, 340px);  /* sticky course plate width */
  --menu-split:     clamp(32px, 5vw, 92px);     /* plate → ledger gutter */
  --menu-row:       clamp(20px, 2.2vw, 30px);   /* inside a dish row */
  --menu-rail:      clamp(38px, 4.4vw, 64px);   /* numeral column in a row */
}

/* ==========================================================================
   PAGE MASTHEAD — type on the left, the table photograph as a tall column on
   the right. The photograph is portrait (1200x1800), so it earns a column
   rather than a letterbox band, and it is the ONLY image on this page.

   The two halves are locked together by a gold frame that is offset from the
   picture and crosses the seam between them — the picture is never simply
   parked beside the type.
   ========================================================================== */
.menu-masthead{
  position:relative;
  padding:calc(var(--sx-header-actual, var(--sx-header-h)) + clamp(26px, 3vw, 44px))
          var(--sx-gutter) clamp(40px, 4.6vw, 68px);
  background:var(--sx-bg-deep);
  overflow:hidden;
  isolation:isolate;
}
/* the warm bloom the photograph throws back into the dark ground — the only
   place on the site where gold is allowed to be a wash rather than a line */
.menu-masthead__glow{
  position:absolute; z-index:-1;
  top:-10%; right:-6%;
  width:min(70%, 780px); aspect-ratio:1;
  background:radial-gradient(circle, rgba(181,140,103,.16) 0%, rgba(181,140,103,.05) 42%, transparent 70%);
  pointer-events:none;
}

.menu-masthead__inner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(300px, 40%, 520px);
  gap:clamp(34px, 5vw, 86px);
  align-items:center;
  max-width:var(--sx-max);
  margin:0 auto;
}

/* ----------------------------------------------------------- the copy ---- */
.menu-masthead__crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin:0 0 clamp(24px, 3vw, 40px);
  font-size:10px; font-weight:400;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--sx-muted);
}
.menu-masthead__crumbs a{transition:color .3s var(--sx-ease)}
.menu-masthead__crumbs a:hover{color:var(--sx-main)}
.menu-masthead__crumbs [aria-current]{color:var(--sx-main)}
.menu-masthead__crumb-sep{color:var(--sx-rule)}

.menu-masthead__script{
  margin:0;
  font-family:var(--sx-font-script);
  font-size:clamp(36px, 4vw, 58px);
  line-height:1;
  color:var(--sx-main);
}
.menu-masthead__title{
  margin:clamp(2px, .6vw, 8px) 0 0;
  font-size:clamp(40px, 6.2vw, 86px);
  font-weight:200;
  line-height:1.06;
  /* DESIGN.md §3: wide tracking needs a matching indent, or the trailing
     letter-space drags the block off its left axis */
  letter-spacing:.15em;
  text-indent:.15em;
  text-transform:uppercase;
}
.menu-masthead__accent{
  font-family:var(--sx-font-display);
  font-style:normal;
  font-size:1.12em;
  letter-spacing:.04em;
  text-transform:none;
  color:var(--sx-main);
}
/* a short gold rule that starts the measure of the paragraph below it */
.menu-masthead__rule{
  display:block;
  width:clamp(64px, 9vw, 120px); height:1px;
  margin:clamp(24px, 3vw, 38px) 0 0;
  background:linear-gradient(90deg, var(--sx-main) 0%, rgba(181,140,103,0) 100%);
}
.menu-masthead__text{
  max-width:88ch;
  margin:clamp(20px, 2.4vw, 28px) 0 0;
  color:var(--sx-para);
}

/* the three standing claims */
.menu-masthead__meta{
  display:flex; flex-wrap:wrap;
  gap:12px clamp(18px, 2.6vw, 36px);
  margin:clamp(28px, 3.4vw, 42px) 0 0;
  font-size:10px; font-weight:400;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--sx-muted);
}
.menu-masthead__meta li{display:flex; align-items:center; gap:11px}
.menu-masthead__meta li::before{
  content:"";
  width:16px; height:1px;
  background:var(--sx-main);
}

/* --------------------------------------------------------- the picture --- */
.menu-masthead__figure{
  position:relative;
  margin:0;
  /* the portrait crop is held well short of the source 2:3 so the column
     cannot push the course nav below the fold */
  aspect-ratio:1 / 1.12;
  max-height:min(62vh, 560px);
}
/* the gold frame is inset INTO the picture's top-left corner rather than
   hung outside it — an outside frame gets clipped by the section and reads
   as a stray bracket */
.menu-masthead__frame{
  position:absolute; z-index:2;
  top:clamp(12px, 1.6vw, 20px);
  left:clamp(12px, 1.6vw, 20px);
  width:clamp(46px, 6vw, 84px);
  height:clamp(46px, 6vw, 84px);
  border:1px solid var(--sx-border);
  border-right:0; border-bottom:0;
  opacity:.9;
  pointer-events:none;
}
.menu-masthead__media{
  position:relative; z-index:1;
  height:100%;
  overflow:hidden;
  background:var(--sx-box);
}
/* a soft foot so the caption has something to sit on, and a matching wash in
   the top-left corner so the gold bracket registers against the wood grain —
   without it the hairline disappears into the photograph */
.menu-masthead__media::after{
  content:"";
  position:absolute; z-index:1; inset:0;
  background:
    linear-gradient(180deg, rgba(12,22,26,0) 62%, rgba(12,22,26,.72) 100%),
    radial-gradient(58% 44% at 0% 0%, rgba(12,22,26,.62) 0%, rgba(12,22,26,0) 100%);
  pointer-events:none;
}
.menu-masthead__img{
  width:100%; height:100%;
  object-fit:cover; object-position:50% 50%;
  /* the food is the colour on this page; it is dimmed only enough to sit in
     the dark ground without glaring against it */
  filter:saturate(.96) brightness(.82);
  transform:scale(1.01);
  transition:transform 1.2s var(--sx-ease), filter .8s var(--sx-ease);
}
.menu-masthead__figure:hover .menu-masthead__img{
  transform:scale(1.045);
  filter:saturate(1) brightness(.88);
}
/* the caption sits inside the frame, over the darkened foot of the picture,
   so that nothing has to survive outside the section's clip */
.menu-masthead__caption{
  position:absolute; z-index:2;
  right:clamp(12px, 1.6vw, 20px); bottom:clamp(12px, 1.6vw, 18px);
  display:flex; align-items:center; gap:10px;
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,255,255,.82);
  text-shadow:0 1px 12px rgba(12,22,26,.9);
}
.menu-masthead__caption::before{
  content:"";
  width:20px; height:1px;
  background:var(--sx-main);
}

/* ==========================================================================
   STICKY COURSE NAV — the page is long, so the courses stay reachable.
   A horizontal scroller on narrow screens; no wrap, no second row.
   ========================================================================== */
.menu-nav{
  /* the site header is fixed and taller than this bar, so the bar has to stick
     below it rather than at the viewport top — otherwise the header covers it */
  position:sticky;
  top:var(--menu-head-h, var(--sx-header-actual, var(--sx-header-h)));
  z-index:40;
  background:rgba(12,22,26,.94);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--sx-rule-soft);
}
.menu-nav__inner{
  max-width:var(--sx-max);
  margin:0 auto;
  padding:0 var(--sx-gutter);
}
.menu-nav__list{
  display:flex; align-items:center;
  gap:clamp(2px, 1vw, 14px);
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.menu-nav__list::-webkit-scrollbar{display:none}
.menu-nav__link{
  position:relative;
  display:flex; align-items:baseline; gap:8px;
  padding:17px 12px;
  white-space:nowrap;
  font-size:11px; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.66);
  transition:color .3s var(--sx-ease);
}
/* the course numeral rides with its name in the bar, tying bar to plate */
.menu-nav__num{
  font-family:var(--sx-font-display);
  font-size:10px;
  letter-spacing:.14em;
  color:var(--sx-rule);
  transition:color .3s var(--sx-ease);
}
.menu-nav__link::after{
  content:"";
  position:absolute; left:12px; right:12px; bottom:11px;
  height:1px;
  background:var(--sx-main);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .45s var(--sx-ease-draw);
}
.menu-nav__link:hover{color:#fff}
.menu-nav__link:hover::after{transform:scaleX(1)}
.menu-nav__link:hover .menu-nav__num{color:var(--sx-main)}
/* set by the scroll-spy in js/menus.js */
.menu-nav__link.is-active{color:var(--sx-main)}
.menu-nav__link.is-active .menu-nav__num{color:var(--sx-main)}
.menu-nav__link.is-active::after{transform:scaleX(1)}

/* ==========================================================================
   GUIDE — the reading note, set as a two-column key rather than a paragraph
   ========================================================================== */
.menu-guide{
  padding:clamp(46px, 5.5vw, 78px) var(--sx-gutter);
  background:var(--sx-bg);
}
.menu-guide__inner{
  display:grid;
  grid-template-columns:var(--menu-plate) minmax(0,1fr);
  gap:var(--menu-split);
  align-items:start;
  max-width:var(--sx-max);
  margin:0 auto;
}
.menu-guide__label{
  margin:0;
  font-size:10px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--sx-main);
}
.menu-guide__list{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:clamp(18px, 2.4vw, 34px);
  margin:0;
}
.menu-guide__list div{
  padding:0 0 0 18px;
  border-left:1px solid var(--sx-rule-soft);
}
.menu-guide__term{
  margin:0 0 6px;
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--sx-heading);
}
.menu-guide__def{margin:0; font-size:15px; line-height:1.6; color:var(--sx-muted)}

/* ==========================================================================
   COURSE — one menu category, as a split: sticky plate | dish ledger
   Sections alternate the two grounds (DESIGN.md §2) and are seamed with a
   hairline rather than by contrast alone.
   ========================================================================== */
.menu-course{
  padding:clamp(52px, 6.5vw, 96px) var(--sx-gutter);
  background:var(--sx-bg);
  border-top:1px solid var(--sx-rule-soft);
}
.menu-course--alt{background:var(--sx-bg-deep)}
.menu-course__inner{
  display:grid;
  grid-template-columns:var(--menu-plate) minmax(0,1fr);
  gap:var(--menu-split);
  align-items:start;
  max-width:var(--sx-max);
  margin:0 auto;
}

/* --- the sticky plate: numeral, title, note, count ----------------------- */
.menu-course__head{
  position:sticky;
  /* must clear BOTH fixed/sticky bars above it: the site header and the
     course bar that sticks directly beneath it */
  top:calc(var(--menu-head-h, var(--sx-header-actual, var(--sx-header-h)))
           + var(--menu-nav-h, 53px) + clamp(24px, 3vw, 44px));
  padding:0 0 0 clamp(16px, 1.8vw, 26px);
  border-left:1px solid var(--sx-rule);
}
.menu-course__index{
  margin:0 0 clamp(14px, 1.8vw, 20px);
  font-family:var(--sx-font-display);
  font-size:clamp(30px, 3.4vw, 46px);
  line-height:1;
  letter-spacing:.06em;
  color:var(--sx-main);
}
.menu-course__title{
  margin:0;
  font-size:clamp(22px, 2.3vw, 31px);
  font-weight:200;
  line-height:1.28;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.menu-course__note{
  max-width:40ch;
  margin:clamp(14px, 1.8vw, 20px) 0 0;
  font-size:15px;
  line-height:1.6;
  color:var(--sx-muted);
}
.menu-course__count{
  display:block;
  margin:clamp(18px, 2.2vw, 26px) 0 0;
  padding:12px 0 0;
  border-top:1px solid var(--sx-rule-soft);
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--sx-muted);
}

/* --- the ledger: one dish per row, numeral in a fixed left rail ---------- */
.menu-list{
  display:flex;
  flex-direction:column;
  border-top:1px solid var(--sx-rule-soft);
}
.menu-item{
  position:relative;
  display:grid;
  grid-template-columns:var(--menu-rail) minmax(0,max-content) minmax(0,1fr);
  align-items:baseline;
  column-gap:clamp(14px, 1.6vw, 24px);
  padding:var(--menu-row) 0;
  border-bottom:1px solid var(--sx-rule-soft);
  transition:background-color .4s var(--sx-ease);
}
/* the hover wash bleeds past the text edges so it reads as a ruled row, not a box */
.menu-item::before{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:calc(var(--menu-row) * -0.6); right:calc(var(--menu-row) * -0.6);
  background:rgba(181,140,103,.05);
  opacity:0;
  transition:opacity .4s var(--sx-ease);
  pointer-events:none;
}
.menu-item:hover::before{opacity:1}

.menu-item__num{
  grid-column:1;
  margin:0;
  font-family:var(--sx-font-display);
  font-size:12px;
  letter-spacing:.14em;
  color:var(--sx-rule);
  transition:color .4s var(--sx-ease);
}
.menu-item:hover .menu-item__num{color:var(--sx-main)}
/* a bullet in place of the running number, sized up to read at the numeral's weight */
.menu-item__num--bullet{font-size:18px; line-height:1; color:var(--sx-main)}

.menu-item__name{
  grid-column:2;
  margin:0;
  font-size:clamp(15px, 1.25vw, 17px);
  font-weight:400;
  line-height:1.4;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--sx-heading);
}
.menu-item__price{
  grid-column:3;
  margin:0;
  font-size:clamp(15px, 1.25vw, 17px);
  font-weight:400;
  letter-spacing:.06em;
  color:var(--sx-main);
  white-space:nowrap;
}
/* two-price dishes (chicken / lamb, small / large) — the separator stays quiet */
.menu-item__price span{color:var(--sx-muted)}

/* description and tags sit under the name, aligned to the name column */
.menu-item__desc{
  grid-column:2 / -1;
  max-width:62ch;
  margin:8px 0 0;
  font-size:15px;
  line-height:1.6;
  color:var(--sx-muted);
}
.menu-item__tags{
  grid-column:2 / -1;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin:12px 0 0;
}
.menu-tag{
  display:inline-block;
  padding:4px 10px 3px;
  border:1px solid var(--sx-rule-soft);
  font-size:9.5px; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase;
  line-height:1.5;
  color:var(--sx-muted);
}
.menu-tag--veg,
.menu-tag--hot{border-color:rgba(181,140,103,.5); color:var(--sx-main)}

/* ==========================================================================
   CLOSING BAND — booking / ordering, on the feast photograph
   ========================================================================== */
/* no photograph here: the banner holds the page's only image, so this band
   closes on type, ground and rule alone */
.menu-closing{
  position:relative;
  padding:clamp(72px, 9vw, 128px) var(--sx-gutter);
  background:var(--sx-bg);
  border-top:1px solid var(--sx-rule-soft);
  isolation:isolate;
}
/* a single gold hairline across the top of the band, fading at both ends, so
   the closing section is announced without a photograph to do it */
.menu-closing::before{
  content:"";
  position:absolute; z-index:-1;
  top:0; left:50%;
  width:min(var(--sx-max), 100%); height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,
    rgba(181,140,103,0) 0%, var(--sx-rule) 30%, var(--sx-rule) 70%, rgba(181,140,103,0) 100%);
}
/* the closing band keeps the page's split axis rather than centring */
.menu-closing__inner{
  position:relative;
  display:grid;
  grid-template-columns:var(--menu-plate) minmax(0,1fr);
  gap:var(--menu-split);
  align-items:center;
  max-width:var(--sx-max);
  margin:0 auto;
}
.menu-closing__script{
  margin:0;
  font-family:var(--sx-font-script);
  font-size:clamp(46px, 6.4vw, 84px);
  line-height:1;
  color:var(--sx-main);
}
.menu-closing__title{
  margin:0;
  font-size:clamp(22px, 2.6vw, 34px);
  font-weight:200;
  line-height:1.3;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.menu-closing__text{margin:20px 0 0; max-width:52ch; color:var(--sx-para)}
.menu-closing__actions{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(18px, 3vw, 40px);
  margin:clamp(28px, 3.6vw, 44px) 0 0;
}

/* ==========================================================================
   MENU CTA — booking, on the same split axis, ahead of the allergen note
   ========================================================================== */
.menu-cta{
  padding:clamp(36px, 2vw, 96px) var(--sx-gutter);
  background:var(--sx-bg);
  border-top:1px solid var(--sx-rule-soft);
}
/* the button stands alone here, so the band centres rather than splitting */
.menu-cta__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(14px, 1.6vw, 22px);
  max-width:var(--sx-max);
  margin:0 auto;
}

/* ==========================================================================
   ALLERGEN NOTE — held on the same split axis as everything above it
   ========================================================================== */
.menu-note{
  padding:clamp(44px, 5.5vw, 72px) var(--sx-gutter);
  background:var(--sx-bg-deep);
  border-top:1px solid var(--sx-rule-soft);
}
.menu-note__inner{
  display:grid;
  grid-template-columns:var(--menu-plate) minmax(0,1fr);
  gap:var(--menu-split);
  align-items:start;
  max-width:var(--sx-max);
  margin:0 auto;
}
.menu-note__label{
  margin:0;
  font-size:10px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--sx-main);
}
.menu-note__text{margin:0; max-width:70ch; font-size:15px; color:var(--sx-muted)}
.menu-note__text a{color:var(--sx-main); transition:color .3s var(--sx-ease)}
.menu-note__text a:hover{color:#fff}

/* ==========================================================================
   BACK TO TOP — appears once the reader is past the masthead
   ========================================================================== */
.menu-top{
  position:fixed; right:clamp(16px, 2.4vw, 30px); bottom:clamp(16px, 2.4vw, 30px);
  z-index:45;
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px;
  border:1px solid var(--sx-rule);
  background:rgba(12,22,26,.9);
  color:var(--sx-main);
  opacity:0; visibility:hidden;
  transform:translateY(10px);
  transition:opacity .4s var(--sx-ease), transform .4s var(--sx-ease), visibility .4s;
}
.menu-top.is-visible{opacity:1; visibility:visible; transform:translateY(0)}
.menu-top:hover{color:#fff; border-color:var(--sx-border)}
.menu-top svg{width:14px; height:14px}

/* ==========================================================================
   RESPONSIVE  — breakpoints shared with index.css (DESIGN.md §4)
   ========================================================================== */
@media (max-width:1180px){
  :root{--menu-plate:clamp(200px, 24vw, 270px)}
}

/* the split collapses: the plate stops sticking and becomes a course header */
@media (max-width:1024px){
  .menu-course__inner,
  .menu-guide__inner,
  .menu-note__inner,
  .menu-closing__inner{
    grid-template-columns:minmax(0,1fr);
    gap:clamp(24px, 3.4vw, 36px);
  }
  .menu-course__head{
    position:static;
    padding:0 0 0 clamp(14px, 2vw, 20px);
  }
  .menu-course__note{max-width:60ch}
  .menu-course__count{
    display:inline-block;
    margin-top:clamp(14px, 2vw, 20px);
  }
  .menu-closing__script{margin-bottom:-6px}
}

/* the masthead stacks: the picture drops below the type and stops being a
   tall column, so it takes a landscape crop that suits a full-width block */
@media (max-width:900px){
  .menu-masthead__inner{
    grid-template-columns:minmax(0,1fr);
    gap:clamp(38px, 7vw, 56px);
  }
  .menu-masthead__figure{aspect-ratio:16 / 11; max-width:640px}
  .menu-masthead__img{object-position:50% 46%}
  .menu-masthead__frame{
    inset:clamp(-18px, -2.4vw, -12px) auto clamp(-18px, -2.4vw, -12px) clamp(-18px, -2.4vw, -12px);
    width:55%;
  }
  .menu-masthead__glow{width:min(90%, 560px); top:-4%; right:-14%}
}

@media (max-width:600px){
  :root{--menu-rail:30px}
  .menu-masthead__title{letter-spacing:.08em; text-indent:.08em}
  .menu-masthead__meta{gap:12px 0; flex-direction:column}
  /* the offset frame and the caption both need room the phone does not have */
  .menu-masthead__figure{aspect-ratio:4 / 3}
  .menu-masthead__frame{display:none}
  .menu-masthead__caption{display:none}
  .menu-nav__link{padding:15px 10px; font-size:10.5px; letter-spacing:.16em}
  .menu-nav__num{display:none}
  .menu-item__desc{font-size:14.5px}
  .menu-closing__actions{flex-direction:column; align-items:flex-start; gap:20px}
  .menu-top{width:42px; height:42px}
}

/* the three-column dish row cannot hold a wrapped name and a price on one
   baseline at this width, so the price drops to its own line under the name */
@media (max-width:420px){
  .menu-item{grid-template-columns:var(--menu-rail) minmax(0,1fr)}
  .menu-item__price{grid-column:2; margin-top:5px}
  .menu-item__desc,
  .menu-item__tags{grid-column:2}
}

/* --------------------------------------------------------- a11y / motion -- */
@media (prefers-reduced-motion:reduce){
  .menu-top{transition-duration:.001ms}
  .menu-masthead__img,
  .menu-masthead__figure:hover .menu-masthead__img{
    transform:none!important;
    transition-duration:.001ms;
  }
  .menu-item,
  .menu-item::before,
  .menu-item__num{transition-duration:.001ms}
}

/* ==========================================================================
   ==========================================================================
   Shezan Oxford — Special Offers page
   Namespace: offer-   (see DESIGN.md §9 — one namespace per page)

   Appended after the menu- blocks in this same file. Loads AFTER css/index.css,
   which supplies the :root tokens, the reset, the buttons and the reveal
   engine. Nothing here overrides an index- rule or a menu- rule.

   LAYOUT NOTE — there is no photography on this page. Four offers is too few
   to carry a gallery and too many to set as prose, so the page is drawn in
   type, gold rule and ground alone: a counted banner, then the offers as
   numbered cards on the same left-rail axis the menus page uses.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root{
  --offer-rail:   clamp(46px, 5vw, 82px);    /* numeral column in a card */
  --offer-gap:    clamp(18px, 2.2vw, 30px);  /* between cards */
}

/* ==========================================================================
   BANNER — type only, with the four offers counted out beneath the title
   ========================================================================== */
.offer-banner{
  position:relative;
  padding:calc(var(--sx-header-actual, var(--sx-header-h)) + clamp(34px, 4.4vw, 70px))
          var(--sx-gutter) clamp(48px, 6vw, 82px);
  background:var(--sx-bg-deep);
  overflow:hidden;
  isolation:isolate;
}
/* the warm bloom that stands in for a photograph on this page */
.offer-banner__glow{
  position:absolute; z-index:-1;
  top:-22%; right:-8%;
  width:min(64%, 720px); aspect-ratio:1;
  background:radial-gradient(circle, rgba(181,140,103,.15) 0%, rgba(181,140,103,.045) 44%, transparent 72%);
  pointer-events:none;
}
.offer-banner__rule{
  position:absolute; left:var(--sx-gutter); right:var(--sx-gutter);
  height:1px;
  background:linear-gradient(90deg,
    rgba(181,140,103,0) 0%, var(--sx-rule) 26%, var(--sx-rule) 74%, rgba(181,140,103,0) 100%);
}
.offer-banner__rule--top{bottom:0}

.offer-banner__inner{position:relative; max-width:var(--sx-max); margin:0 auto}

.offer-banner__crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin:0 0 clamp(24px, 3vw, 40px);
  font-size:10px; font-weight:400;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--sx-muted);
}
.offer-banner__crumbs a{transition:color .3s var(--sx-ease)}
.offer-banner__crumbs a:hover{color:var(--sx-main)}
.offer-banner__crumbs [aria-current]{color:var(--sx-main)}
.offer-banner__crumb-sep{color:var(--sx-rule)}

.offer-banner__script{
  margin:0;
  font-family:var(--sx-font-script);
  font-size:clamp(36px, 4vw, 56px);
  line-height:1;
  color:var(--sx-main);
}
.offer-banner__title{
  margin:clamp(2px, .6vw, 8px) 0 0;
  font-size:clamp(38px, 6vw, 84px);
  font-weight:200;
  line-height:1.08;
  /* DESIGN.md §3: wide tracking needs a matching indent, or the trailing
     letter-space drags the block off its left axis */
  letter-spacing:.15em;
  text-indent:.15em;
  text-transform:uppercase;
}
.offer-banner__accent{
  font-family:var(--sx-font-display);
  font-style:normal;
  font-size:1.12em;
  letter-spacing:.04em;
  text-transform:none;
  color:var(--sx-main);
}
.offer-banner__text{
  max-width:52ch;
  margin:clamp(22px, 2.6vw, 30px) 0 0;
  color:var(--sx-para);
}

/* the four offers, counted out as jump links under the title.
   The list is an <ol> so the order is carried in the markup, but the numerals
   are drawn by the .offer-banner__num spans — the browser markers are dropped
   or every entry reads "1. 01". */
.offer-banner__index{
  display:flex; flex-wrap:wrap;
  gap:10px clamp(18px, 2.6vw, 40px);
  margin:clamp(28px, 3.4vw, 44px) 0 0;
  list-style:none;
  padding:0;
}
.offer-banner__index a{
  display:flex; align-items:baseline; gap:10px;
  font-size:11px; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.72);
  transition:color .3s var(--sx-ease);
}
.offer-banner__index a:hover{color:var(--sx-main)}
.offer-banner__num{
  font-family:var(--sx-font-display);
  font-size:10px;
  letter-spacing:.14em;
  color:var(--sx-rule);
  transition:color .3s var(--sx-ease);
}
.offer-banner__index a:hover .offer-banner__num{color:var(--sx-main)}

/* ==========================================================================
   THE OFFERS — numbered cards, drawn with hairlines rather than fills
   ========================================================================== */
.offer-list{
  padding:clamp(52px, 3.5vw, 96px) var(--sx-gutter);
  background:var(--sx-bg);
}
.offer-list__inner{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:var(--offer-gap);
  max-width:var(--sx-max);
  margin:0 auto;
}
/* the lead offer and the private-dining offer each take the full row */
.offer-card--lead,
.offer-card--wide{grid-column:1 / -1}

.offer-card{
  position:relative;
  display:grid;
  grid-template-columns:var(--offer-rail) minmax(0,1fr);
  align-items:start;
  padding:clamp(26px, 3.2vw, 44px) clamp(22px, 2.6vw, 38px);
  border:1px solid var(--sx-rule-soft);
  background:var(--sx-bg-deep);
  transition:border-color .45s var(--sx-ease), background-color .45s var(--sx-ease);
}
.offer-card:hover{border-color:var(--sx-rule); background:var(--sx-box)}

/* the gold tick that draws itself along the top edge of the card on hover */
.offer-card::before{
  content:"";
  position:absolute; top:-1px; left:-1px; right:-1px;
  height:1px;
  background:var(--sx-main);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .55s var(--sx-ease-draw);
}
.offer-card:hover::before{transform:scaleX(1)}

.offer-card__num{
  margin:0;
  font-family:var(--sx-font-display);
  font-size:clamp(22px, 2.4vw, 32px);
  line-height:1;
  letter-spacing:.06em;
  color:var(--sx-rule);
  transition:color .45s var(--sx-ease);
}
.offer-card:hover .offer-card__num{color:var(--sx-main)}

.offer-card__body{min-width:0}
.offer-card__title{
  margin:0;
  font-size:clamp(19px, 2vw, 27px);
  font-weight:200;
  line-height:1.28;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.offer-card--lead .offer-card__title{font-size:clamp(22px, 2.6vw, 34px)}

.offer-card__rule{
  display:block;
  width:clamp(48px, 6vw, 84px); height:1px;
  margin:clamp(16px, 1.8vw, 22px) 0 0;
  background:linear-gradient(90deg, var(--sx-main) 0%, rgba(181,140,103,0) 100%);
}

/* the discount, set large in the display serif — the one numeral on the page
   that is a selling point rather than an index */
.offer-card__figure{
  margin:clamp(18px, 2.2vw, 26px) 0 0;
  font-family:var(--sx-font-display);
  font-size:clamp(44px, 5.4vw, 72px);
  line-height:.9;
  letter-spacing:.02em;
  color:var(--sx-main);
}
.offer-card__figure span{font-size:.46em; margin-left:.06em}

.offer-card__lead{
  max-width:56ch;
  margin:clamp(18px, 2.2vw, 26px) 0 0;
  font-size:clamp(16px, 1.4vw, 19px);
  line-height:1.55;
  color:var(--sx-para);
}
.offer-card__text{
  max-width:60ch;
  margin:clamp(16px, 1.8vw, 22px) 0 0;
  font-size:15.5px;
  line-height:1.65;
  color:var(--sx-muted);
}
.offer-card--lead .offer-card__text{font-size:16.5px; color:var(--sx-para)}

/* the standing instruction on the birthday card — held apart by a gold edge */
.offer-card__note{
  max-width:56ch;
  margin:clamp(16px, 1.8vw, 22px) 0 0;
  padding:2px 0 2px 16px;
  border-left:1px solid var(--sx-rule);
  font-size:15px;
  line-height:1.6;
  color:var(--sx-para);
}

.offer-card__link{margin:clamp(18px, 2.2vw, 26px) 0 0}

/* --- the conditions, as the same tag chip the menus page uses ------------ */
.offer-card__terms{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin:clamp(18px, 2.2vw, 26px) 0 0;
}
.offer-tag{
  display:inline-block;
  padding:5px 11px 4px;
  border:1px solid var(--sx-rule-soft);
  font-size:9.5px; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase;
  line-height:1.5;
  color:var(--sx-muted);
  transition:border-color .45s var(--sx-ease), color .45s var(--sx-ease);
}
.offer-card:hover .offer-tag{border-color:rgba(181,140,103,.5); color:var(--sx-main)}

/* ==========================================================================
   CLOSING BAND — booking, on the flat ground
   ========================================================================== */
.offer-closing{
  position:relative;
  padding:clamp(64px, 8vw, 116px) var(--sx-gutter);
  background:var(--sx-bg-deep);
  border-top:1px solid var(--sx-rule-soft);
  isolation:isolate;
}
.offer-closing::before{
  content:"";
  position:absolute; z-index:-1;
  top:0; left:50%;
  width:min(var(--sx-max), 100%); height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,
    rgba(181,140,103,0) 0%, var(--sx-rule) 30%, var(--sx-rule) 70%, rgba(181,140,103,0) 100%);
}
/* the closing band keeps the split axis of the page rather than centring */
.offer-closing__inner{
  position:relative;
  display:grid;
  grid-template-columns:clamp(230px, 26vw, 340px) minmax(0,1fr);
  gap:clamp(32px, 5vw, 92px);
  align-items:center;
  max-width:var(--sx-max);
  margin:0 auto;
}
.offer-closing__script{
  margin:0;
  font-family:var(--sx-font-script);
  font-size:clamp(46px, 6.4vw, 84px);
  line-height:1;
  color:var(--sx-main);
}
.offer-closing__title{
  margin:0;
  font-size:clamp(22px, 2.6vw, 34px);
  font-weight:200;
  line-height:1.3;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.offer-closing__text{margin:20px 0 0; max-width:52ch; color:var(--sx-para)}
.offer-closing__actions{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(18px, 3vw, 40px);
  margin:clamp(28px, 3.6vw, 44px) 0 0;
}

/* ==========================================================================
   SMALL PRINT — held on the same split axis as the band above it
   ========================================================================== */
.offer-note{
  padding:clamp(44px, 5.5vw, 72px) var(--sx-gutter);
  background:var(--sx-bg);
  border-top:1px solid var(--sx-rule-soft);
}
.offer-note__inner{
  display:grid;
  grid-template-columns:clamp(230px, 26vw, 340px) minmax(0,1fr);
  gap:clamp(32px, 5vw, 92px);
  align-items:start;
  max-width:var(--sx-max);
  margin:0 auto;
}
.offer-note__label{
  margin:0;
  font-size:10px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--sx-main);
}
.offer-note__text{margin:0; max-width:70ch; font-size:15px; color:var(--sx-muted)}

/* ==========================================================================
   RESPONSIVE  — breakpoints shared with index.css (DESIGN.md §4)
   ========================================================================== */
@media (max-width:1024px){
  /* two cards per row stop holding their measure below this */
  .offer-list__inner{grid-template-columns:minmax(0,1fr)}
  .offer-closing__inner,
  .offer-note__inner{
    grid-template-columns:minmax(0,1fr);
    gap:clamp(24px, 3.4vw, 36px);
  }
  .offer-closing__script{margin-bottom:-6px}
}

@media (max-width:600px){
  :root{--offer-rail:38px}
  .offer-banner__title{letter-spacing:.08em; text-indent:.08em}
  .offer-banner__index{gap:12px 0; flex-direction:column}
  .offer-card{padding:clamp(22px, 5vw, 30px) clamp(18px, 4vw, 24px)}
  .offer-closing__actions{flex-direction:column; align-items:flex-start; gap:20px}
}

/* the numeral rail costs more than it gives once the card is this narrow:
   the number moves above the title and the body takes the full width */
@media (max-width:420px){
  .offer-card{grid-template-columns:minmax(0,1fr); gap:14px}
  .offer-card__num{font-size:20px}
}

/* --------------------------------------------------------- a11y / motion -- */
@media (prefers-reduced-motion:reduce){
  .offer-card,
  .offer-card::before,
  .offer-card__num,
  .offer-tag{transition-duration:.001ms}
}

/* ==========================================================================
   ==========================================================================
   Shezan Oxford — Our Story page
   Namespace: story-   (see DESIGN.md §9 — one namespace per page)

   Appended after the menu- and offer- blocks in this same file. Loads AFTER
   css/index.css, which supplies the :root tokens, the reset, the buttons and
   the reveal engine. Nothing here overrides an index-, menu- or offer- rule.

   LAYOUT NOTE — this page has real archive material, so the pictures lead
   rather than decorate: the drawing of the building opens it, the archive
   photograph sits inside the timeline it documents, and the Mughal paintings
   are hung as a gallery rather than scattered through the prose.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root{
  --story-split:  clamp(34px, 5vw, 88px);    /* copy → picture gutter */
  --story-year:   clamp(96px, 12vw, 168px);  /* the year column in the timeline */
}

/* ==========================================================================
   BANNER — the drawing of 135 High Street, framed as a hung picture, with the
   opening statement beside it.

   COMPOSITION NOTE — the two halves are sized to meet: the copy column is
   capped at its own measure and pushed to the right of its track, so there is
   no dead gutter between the last word and the frame. The "Since 1915" stamp
   straddles the frame edge, which is what ties picture to type; without it the
   two columns read as unrelated blocks parked side by side.
   ========================================================================== */
.story-banner{
  position:relative;
  padding:calc(var(--sx-header-actual, var(--sx-header-h)) + clamp(30px, 3.6vw, 56px))
          var(--sx-gutter) clamp(52px, 6vw, 88px);
  background:var(--sx-bg-deep);
  overflow:hidden;
  isolation:isolate;
}
/* the warm bloom behind the picture, the one place gold is a wash not a line */
.story-banner__glow{
  position:absolute; z-index:-1;
  top:-18%; right:-4%;
  width:min(58%, 680px); aspect-ratio:1;
  background:radial-gradient(circle, rgba(181,140,103,.16) 0%, rgba(181,140,103,.05) 44%, transparent 72%);
  pointer-events:none;
}
.story-banner__inner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(290px, 36%, 440px);
  gap:clamp(36px, 5vw, 96px);
  align-items:center;
  max-width:var(--sx-max);
  margin:0 auto;
}

/* ------------------------------------------------------------- the copy -- */
/* capped and right-aligned in its track: the measure stays readable and the
   column ends near the frame instead of stranding a half-page of ground */
.story-banner__copy{
  max-width:60ch;
  justify-self:end;
  width:100%;
}

.story-banner__crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin:0 0 clamp(20px, 2.4vw, 32px);
  font-size:10px; font-weight:400;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--sx-muted);
}
.story-banner__crumbs a{transition:color .3s var(--sx-ease)}
.story-banner__crumbs a:hover{color:var(--sx-main)}
.story-banner__crumbs [aria-current]{color:var(--sx-main)}
.story-banner__crumb-sep{color:var(--sx-rule)}

.story-banner__title{
  margin:0;
  font-size:clamp(40px, 5.6vw, 78px);
  font-weight:200;
  line-height:1.04;
  /* DESIGN.md §3: wide tracking needs a matching indent, or the trailing
     letter-space drags the block off its left axis */
  letter-spacing:.15em;
  text-indent:.15em;
  text-transform:uppercase;
}
.story-banner__accent{
  font-family:var(--sx-font-display);
  font-style:normal;
  font-size:1.14em;
  letter-spacing:.04em;
  text-transform:none;
  color:var(--sx-main);
}
/* the standfirst is the page's thesis: display serif, larger than body copy,
   so it is read before the two paragraphs under it */
.story-banner__standfirst{
  max-width:30ch;
  margin:clamp(18px, 2.2vw, 26px) 0 0;
  font-family:var(--sx-font-display);
  font-size:clamp(20px, 2vw, 28px);
  line-height:1.36;
  letter-spacing:.02em;
  color:var(--sx-border);
}
.story-banner__rule{
  display:block;
  width:clamp(64px, 9vw, 120px); height:1px;
  margin:clamp(22px, 2.6vw, 32px) 0 0;
  background:linear-gradient(90deg, var(--sx-main) 0%, rgba(181,140,103,0) 100%);
}
.story-banner__text{
  max-width:50ch;
  margin: clamp(11px, 1.9vw, 14px) 0 0;
  color:var(--sx-para);
}
/* the actions anchor the foot of the column, so the stack does not simply
   trail off into the ground */
.story-banner__actions{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(16px, 2.6vw, 34px);
  margin:clamp(28px, 3.4vw, 42px) 0 0;
}

/* ---------------------------------------------------------- the drawing -- */
.story-banner__figure{
  position:relative;
  margin:0;
}
/* The drawing is pencil on white paper, so it is hung in a frame rather than
   bled to the ground: a dark mount, a gold hairline, and a fixed ratio the
   picture fills. Filling the ratio matters — sized by its own height the
   drawing's baked-in white margins made the mount look misaligned. */
.story-banner__plate{
  position:relative; z-index:1;
  padding:clamp(12px, 1.5vw, 20px);
  background:
    linear-gradient(180deg, rgba(22,36,42,1) 0%, rgba(16,28,33,1) 100%);
  border:1px solid var(--sx-rule);
  box-shadow:
    0 0 0 1px rgba(12,22,26,.6) inset,
    0 26px 60px -30px rgba(0,0,0,.9);
}
/* The scan carries the artist's own paper margin, which is wider on the left
   and at the foot. Left alone it reads as a crooked mount, so the frame takes
   a narrower ratio than the scan and the crop is biased right and up, which
   trims that uneven border and centres the building in the frame. */
.story-banner__img{
  display:block;
  width:100%;
  aspect-ratio:4 / 5;
  object-fit:cover;
  object-position:58% 36%;
  filter:saturate(.88) brightness(.96) contrast(1.04);
}

/* the stamp straddles the frame's bottom-left corner and locks the two
   halves of the banner together */
.story-banner__stamp{
  position:absolute; z-index:2;
  left:clamp(-18px, -2vw, -12px);
  bottom:clamp(24px, 3.4vw, 46px);
  display:flex; flex-direction:column; align-items:center;
  gap:2px;
  margin:0;
  padding:clamp(10px, 1.2vw, 15px) clamp(12px, 1.4vw, 18px);
  background:var(--sx-bg);
  border:1px solid var(--sx-main);
  line-height:1;
}
.story-banner__stamp-script{
  font-family:var(--sx-font-script);
  font-size:clamp(22px, 2.4vw, 30px);
  line-height:.9;
  color:var(--sx-main);
}
.story-banner__stamp-year{
  font-family:var(--sx-font-display);
  font-size:clamp(15px, 1.5vw, 19px);
  letter-spacing:.14em;
  color:var(--sx-heading);
}

.story-banner__caption{
  display:flex; align-items:center; gap:10px;
  margin:clamp(16px, 1.8vw, 20px) 0 0;
  padding-left:clamp(34px, 4vw, 54px);
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--sx-muted);
}
.story-banner__caption::before{
  content:"";
  width:18px; height:1px;
  background:var(--sx-main);
}

/* ==========================================================================
   TIMELINE — the four dated entries, with the archive photograph beside them
   ========================================================================== */
.story-timeline{
  padding:clamp(56px, 7vw, 104px) var(--sx-gutter);
  background:var(--sx-bg);
  border-top:1px solid var(--sx-rule-soft);
}
.story-timeline__inner{max-width:var(--sx-max); margin:0 auto}

.story-timeline__head{margin:0 0 clamp(36px, 4.6vw, 62px)}
.story-timeline__eyebrow{
  margin:0 0 12px;
  font-size:10px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--sx-main);
}
.story-timeline__title{
  margin:0;
  font-size:clamp(24px, 3vw, 40px);
  font-weight:200;
  line-height:1.22;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.story-timeline__intro{
  max-width:none;
  margin:clamp(14px, 1.6vw, 20px) 0 0;
  font-size:15.5px;
  line-height:1.68;
  color:var(--sx-para);
}
.story-timeline__rule{
  display:block;
  width:clamp(64px, 9vw, 120px); height:1px;
  margin:clamp(20px, 2.4vw, 28px) 0 0;
  background:linear-gradient(90deg, var(--sx-main) 0%, rgba(181,140,103,0) 100%);
}

.story-timeline__body{
  display:grid;
  /* the entry column is capped: unbounded, a one-line entry runs the whole
     page width and the dated list stops reading as a column */
  grid-template-columns:clamp(240px, 30%, 380px) minmax(0, 780px);
  gap:var(--story-split);
  align-items:start;
}
.story-timeline__figure{margin:0; position:sticky; top:clamp(110px, 14vw, 190px)}
.story-timeline__media{
  padding:clamp(8px, 1vw, 12px);
  background:var(--sx-box);
  border:1px solid var(--sx-rule-soft);
}
.story-timeline__img{
  display:block;
  width:100%; height:auto;
  filter:saturate(.85) brightness(.92);
}
.story-timeline__caption{
  margin:14px 0 0;
  font-size:11px; line-height:1.6;
  letter-spacing:.02em;
  color:var(--sx-muted);
}

/* --- the entries: year in a fixed column, drawn on a single gold spine ---- */
.story-list{
  list-style:none;
  margin:0; padding:0;
  position:relative;
}
/* the spine runs behind the dots, from the first entry to the last */
.story-list::before{
  content:"";
  position:absolute; top:10px; bottom:10px;
  left:calc(var(--story-year) + 0px);
  width:1px;
  background:linear-gradient(180deg,
    rgba(181,140,103,0) 0%, var(--sx-rule-soft) 8%, var(--sx-rule-soft) 92%, rgba(181,140,103,0) 100%);
}
.story-entry{
  display:grid;
  grid-template-columns:var(--story-year) minmax(0,1fr);
  gap:0 clamp(20px, 2.4vw, 34px);
  padding:0 0 clamp(30px, 3.6vw, 48px);
}
.story-entry:last-child{padding-bottom:0}

.story-entry__year{
  margin:0;
  font-family:var(--sx-font-display);
  font-size:clamp(17px, 1.7vw, 23px);
  line-height:1.3;
  letter-spacing:.04em;
  color:var(--sx-main);
  white-space:nowrap;
}
.story-entry__body{position:relative}
/* the dot that pins the entry to the spine */
.story-entry__dot{
  position:absolute;
  top:9px;
  left:calc(-1 * clamp(20px, 2.4vw, 34px) - 3.5px);
  width:7px; height:7px;
  background:var(--sx-bg);
  border:1px solid var(--sx-rule);
  transform:rotate(45deg);
  transition:background-color .4s var(--sx-ease), border-color .4s var(--sx-ease);
}
/* the present day is the one filled dot — the story arrives here */
.story-entry--now .story-entry__dot{background:var(--sx-main); border-color:var(--sx-main)}

/* the name the rooms traded under, above the line of description */
.story-entry__name{
  margin:0;
  font-family:var(--sx-font-display);
  font-size:16.5px;
  line-height:1.4;
  font-weight:400;
  letter-spacing:.02em;
  color:var(--sx-main);
}
.story-entry__name + .story-entry__text{margin-top:7px}

.story-entry__text{
  max-width:58ch;
  margin:0;
  font-size:15.5px;
  line-height:1.68;
  color:var(--sx-muted);
}
.story-entry--now .story-entry__text{color:var(--sx-para)}

/* --- the closing statement, set below the dated list on a hairline --------- */
.story-timeline__coda{
  margin:clamp(34px, 4vw, 54px) 0 0;
  padding:clamp(24px, 2.8vw, 36px) 0 0;
  border-top:1px solid var(--sx-rule-soft);
}
.story-timeline__coda-lead{
  margin:0;
  font-family:var(--sx-font-display);
  font-size:clamp(17px, 1.7vw, 23px);
  line-height:1.4;
  letter-spacing:.04em;
  color:var(--sx-main);
}
.story-timeline__coda-text{
  max-width:72ch;
  margin:12px 0 0;
  font-size:15.5px;
  line-height:1.68;
  color:var(--sx-para);
}

/* ==========================================================================
   THE ROOMS — the interior photograph, picture left and copy right
   ========================================================================== */
.story-rooms{
  padding:clamp(56px, 7vw, 104px) var(--sx-gutter);
  background:var(--sx-bg-deep);
  border-top:1px solid var(--sx-rule-soft);
}
.story-rooms__inner{
  display:grid;
  /* the copy column is capped rather than left to fill: at full width the
     title stretches the whole measure and strands an empty half-page beside it */
  grid-template-columns:clamp(240px, 34%, 420px) minmax(0, 760px);
  gap:var(--story-split);
  align-items:center;
  justify-content:center;
  max-width:var(--sx-max);
  margin:0 auto;
}
.story-rooms__figure{margin:0}
.story-rooms__media{
  position:relative;
  overflow:hidden;
  background:var(--sx-box);
  border:1px solid var(--sx-rule-soft);
}
.story-rooms__img{
  display:block;
  width:100%; height:auto;
  filter:saturate(.96) brightness(.92);
  transform:scale(1.01);
  transition:transform 1.2s var(--sx-ease);
}
.story-rooms__figure:hover .story-rooms__img{transform:scale(1.04)}

.story-rooms__eyebrow{
  margin:0 0 12px;
  font-size:10px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--sx-main);
}
.story-rooms__title{
  margin:0;
  font-size:clamp(22px, 2.7vw, 36px);
  font-weight:200;
  line-height:1.24;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.story-rooms__rule{
  display:block;
  width:clamp(64px, 9vw, 120px); height:1px;
  margin:clamp(20px, 2.4vw, 28px) 0 0;
  background:linear-gradient(90deg, var(--sx-main) 0%, rgba(181,140,103,0) 100%);
}
.story-rooms__text{
  max-width:52ch;
  margin:clamp(20px, 2.4vw, 28px) 0 0;
  color:var(--sx-para);
}

/* ==========================================================================
   MUGHAL ART — the paintings, hung as a gallery
   ========================================================================== */
.story-art{
  padding:clamp(56px, 7vw, 104px) var(--sx-gutter);
  background:var(--sx-bg);
  border-top:1px solid var(--sx-rule-soft);
}
.story-art__inner{max-width:var(--sx-max); margin:0 auto}

.story-art__head{
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  margin:0 0 clamp(34px, 4.4vw, 58px);
}
.story-art__eyebrow{
  margin:0 0 12px;
  font-size:10px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--sx-main);
}
.story-art__title{
  margin:0;
  font-size:clamp(24px, 3vw, 40px);
  font-weight:200;
  line-height:1.22;
  letter-spacing:.12em;
  text-indent:.12em;
  text-transform:uppercase;
}
.story-art__accent{
  font-family:var(--sx-font-display);
  font-style:normal;
  font-size:1.12em;
  letter-spacing:.04em;
  text-transform:none;
  color:var(--sx-main);
}
.story-art__note{
  max-width:56ch;
  margin:16px 0 0;
  font-size:15px;
  color:var(--sx-muted);
}
.story-art__rule{
  position:relative;
  width:min(240px, 60%); height:1px;
  margin:clamp(20px, 2.4vw, 28px) 0 0;
  background:linear-gradient(90deg,
    rgba(181,140,103,0) 0%, var(--sx-rule) 22%, var(--sx-rule) 78%, rgba(181,140,103,0) 100%);
}

.story-art__grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(14px, 1.8vw, 26px);
  list-style:none;
  margin:0; padding:0;
}
/* each painting is mounted on the inset surface, never bled to the ground */
.story-art__item{
  padding:clamp(8px, 1vw, 13px);
  background:var(--sx-box);
  border:1px solid var(--sx-rule-soft);
  transition:border-color .45s var(--sx-ease);
}
.story-art__item:hover{border-color:var(--sx-rule)}
.story-art__img{
  display:block;
  width:100%; height:auto;
  aspect-ratio:3 / 4;
  object-fit:cover;
  filter:saturate(.95) brightness(.94);
  transition:filter .5s var(--sx-ease);
}
.story-art__item:hover .story-art__img{filter:saturate(1) brightness(1)}

/* ==========================================================================
   VISIT — hours, address and telephone, on the page split axis
   ========================================================================== */
.story-visit{
  position:relative;
  padding:clamp(64px, 8vw, 116px) var(--sx-gutter);
  background:var(--sx-bg-deep);
  border-top:1px solid var(--sx-rule-soft);
  isolation:isolate;
}
.story-visit::before{
  content:"";
  position:absolute; z-index:-1;
  top:0; left:50%;
  width:min(var(--sx-max), 100%); height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,
    rgba(181,140,103,0) 0%, var(--sx-rule) 30%, var(--sx-rule) 70%, rgba(181,140,103,0) 100%);
}
.story-visit__inner{
  display:grid;
  grid-template-columns:clamp(230px, 26vw, 340px) minmax(0,1fr);
  gap:var(--story-split);
  align-items:start;
  max-width:var(--sx-max);
  margin:0 auto;
}
.story-visit__script{
  margin:0;
  font-family:var(--sx-font-script);
  font-size:clamp(46px, 6.4vw, 84px);
  line-height:1;
  color:var(--sx-main);
}
.story-visit__title{
  margin:0;
  font-size:clamp(22px, 2.6vw, 34px);
  font-weight:200;
  line-height:1.3;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.story-visit__details{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:clamp(20px, 2.6vw, 38px);
  margin:clamp(26px, 3.2vw, 40px) 0 0;
}
.story-visit__details div{
  padding:0 0 0 18px;
  border-left:1px solid var(--sx-rule-soft);
}
.story-visit__term{
  margin:0 0 8px;
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--sx-main);
}
.story-visit__def{
  margin:0;
  font-size:15px; line-height:1.7;
  color:var(--sx-para);
}
.story-visit__def a{color:var(--sx-para); transition:color .3s var(--sx-ease)}
.story-visit__def a:hover{color:#fff}
.story-visit__actions{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(18px, 3vw, 40px);
  margin:clamp(30px, 3.8vw, 46px) 0 0;
}

/* ==========================================================================
   RESPONSIVE  — breakpoints shared with index.css (DESIGN.md §4)
   ========================================================================== */
@media (max-width:1024px){
  /* the paintings drop to two rows of two rather than shrinking to stamps */
  .story-art__grid{grid-template-columns:repeat(2, minmax(0,1fr))}

  .story-timeline__body,
  .story-rooms__inner,
  .story-visit__inner{
    grid-template-columns:minmax(0,1fr);
    gap:clamp(28px, 3.6vw, 42px);
  }
  /* once stacked there is nothing to stick alongside */
  .story-timeline__figure{position:static; max-width:520px}
  .story-rooms__figure{max-width:420px}
  .story-visit__script{margin-bottom:-8px}
}

@media (max-width:900px){
  /* the banner stacks: the drawing sits under the opening statement */
  .story-banner__inner{
    grid-template-columns:minmax(0,1fr);
    gap:clamp(34px, 6vw, 50px);
  }
  /* stacked, there is no second track to push the copy against */
  .story-banner__copy{justify-self:stretch; max-width:none}
  .story-banner__figure{max-width:420px}
  .story-banner__standfirst{max-width:32ch}
}

@media (max-width:600px){
  :root{--story-year:clamp(74px, 22vw, 104px)}
  .story-banner__title{letter-spacing:.08em; text-indent:.08em}
  .story-banner__standfirst{max-width:none}
  /* the stamp cannot hang off the frame inside the page gutter */
  .story-banner__stamp{left:auto; right:clamp(10px, 3vw, 16px); bottom:clamp(10px, 3vw, 16px)}
  .story-banner__caption{padding-left:0}
  /* stacked, the textual button's own side padding pushes its label out of
     line with the outlined button above it */
  .story-banner__actions{flex-direction:column; align-items:flex-start; gap:18px}
  .story-banner__actions .index-btn--textual{padding-left:0}
  .story-art__title{letter-spacing:.08em; text-indent:.08em}
  .story-visit__actions{flex-direction:column; align-items:flex-start; gap:20px}
  .story-entry__name{font-size:16px}
  .story-entry__text,
  .story-timeline__coda-text,
  .story-timeline__intro{font-size:15px}
}

/* the year column and the spine cost more than they give at this width:
   the year moves above its entry and the spine is dropped */
@media (max-width:460px){
  .story-list::before{display:none}
  .story-entry{grid-template-columns:minmax(0,1fr); gap:8px}
  .story-entry__dot{display:none}
  .story-entry__year{
    padding:0 0 0 14px;
    border-left:1px solid var(--sx-rule);
  }
  .story-art__grid{grid-template-columns:minmax(0,1fr); max-width:340px; margin:0 auto}
}

/* --------------------------------------------------------- a11y / motion -- */
@media (prefers-reduced-motion:reduce){
  .story-rooms__img,
  .story-rooms__figure:hover .story-rooms__img{
    transform:none!important;
    transition-duration:.001ms;
  }
  .story-art__img,
  .story-art__item,
  .story-entry__dot{transition-duration:.001ms}
}

/* ==========================================================================
   ==========================================================================
   Shezan Oxford — Location page
   Namespace: loc-   (see DESIGN.md §9 — one namespace per page)

   Appended after the menu-, offer- and story- blocks in this same file. Loads
   AFTER css/index.css, which supplies the :root tokens, the reset, the buttons
   and the reveal engine. Nothing here overrides a rule from any other block.

   LAYOUT NOTE — built on the menu-masthead pattern (see §1 of this file), so
   the page opens the way every other interior page does: a type column beside
   a framed photograph of the room, with the three facts carried on a seamed
   row across the foot of the band. The map then follows as its own bordered
   band — a reference the visitor drops into, never the page's background.
   ========================================================================== */

/* ==========================================================================
   MASTHEAD — the type column, the picture, and the facts beneath
   ========================================================================== */
.loc-hero{
  position:relative;
  padding:calc(var(--sx-header-actual, var(--sx-header-h)) + clamp(26px, 3vw, 44px))
          var(--sx-gutter) clamp(34px, 4vw, 56px);
  background:var(--sx-bg-deep);
  overflow:hidden;
  isolation:isolate;
}
/* the same warm bloom the other mastheads throw back into the dark ground */
.loc-hero__glow{
  position:absolute; z-index:-1;
  top:-10%; right:-6%;
  width:min(70%, 780px); aspect-ratio:1;
  background:radial-gradient(circle, rgba(181,140,103,.16) 0%, rgba(181,140,103,.05) 42%, transparent 70%);
  pointer-events:none;
}

.loc-hero__inner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(280px, 38%, 460px);
  gap:clamp(34px, 5vw, 86px);
  align-items:center;
  max-width:var(--sx-max);
  margin:0 auto;
}

/* ----------------------------------------------------------- the copy ---- */
.loc-hero__crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin:0 0 clamp(24px, 3vw, 40px);
  font-size:10px; font-weight:400;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--sx-muted);
}
.loc-hero__crumbs a{transition:color .3s var(--sx-ease)}
.loc-hero__crumbs a:hover{color:var(--sx-main)}
.loc-hero__crumbs [aria-current]{color:var(--sx-main)}
.loc-hero__crumb-sep{color:var(--sx-rule)}

.loc-hero__script{
  margin:0;
  font-family:var(--sx-font-script);
  font-size:clamp(36px, 4vw, 58px);
  line-height:1;
  color:var(--sx-main);
}
.loc-hero__title{
  margin:clamp(2px, .6vw, 8px) 0 0;
  font-size:clamp(34px, 5.2vw, 72px);
  font-weight:200;
  line-height:1.06;
  /* DESIGN.md §3: wide tracking needs a matching indent, or the trailing
     letter-space drags the block off its left axis */
  letter-spacing:.15em;
  text-indent:.15em;
  text-transform:uppercase;
}
.loc-hero__accent{
  font-family:var(--sx-font-display);
  font-style:normal;
  font-size:1.12em;
  letter-spacing:.04em;
  text-transform:none;
  color:var(--sx-main);
}
.loc-hero__rule{
  display:block;
  width:clamp(64px, 9vw, 120px); height:1px;
  margin:clamp(24px, 3vw, 38px) 0 0;
  background:linear-gradient(90deg, var(--sx-main) 0%, rgba(181,140,103,0) 100%);
}
.loc-hero__text{
  max-width:46ch;
  margin:clamp(20px, 2.4vw, 28px) 0 0;
  color:var(--sx-para);
}
.loc-hero__actions{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(16px, 2vw, 30px);
  margin:clamp(28px, 3.4vw, 42px) 0 0;
}

/* --------------------------------------------------------- the picture --- */
.loc-hero__figure{
  position:relative;
  margin:0;
  aspect-ratio:1 / 1.12;
  max-height:min(58vh, 520px);
}
/* the gold bracket is inset INTO the picture's top-left corner rather than
   hung outside it — an outside frame gets clipped by the section */
.loc-hero__frame{
  position:absolute; z-index:2;
  top:clamp(12px, 1.6vw, 20px);
  left:clamp(12px, 1.6vw, 20px);
  width:clamp(46px, 6vw, 84px);
  height:clamp(46px, 6vw, 84px);
  border:1px solid var(--sx-border);
  border-right:0; border-bottom:0;
  opacity:.9;
  pointer-events:none;
}
.loc-hero__media{
  position:relative; z-index:1;
  height:100%;
  overflow:hidden;
  background:var(--sx-box);
}
/* a soft foot for the caption, and a wash in the top-left so the gold bracket
   registers against the picture instead of disappearing into it */
.loc-hero__media::after{
  content:"";
  position:absolute; z-index:1; inset:0;
  background:
    linear-gradient(180deg, rgba(12,22,26,0) 62%, rgba(12,22,26,.72) 100%),
    radial-gradient(58% 44% at 0% 0%, rgba(12,22,26,.62) 0%, rgba(12,22,26,0) 100%);
  pointer-events:none;
}
.loc-hero__img{
  width:100%; height:100%;
  object-fit:cover; object-position:50% 50%;
  filter:saturate(.96) brightness(.82);
  transform:scale(1.01);
  transition:transform 1.2s var(--sx-ease), filter .8s var(--sx-ease);
}
.loc-hero__figure:hover .loc-hero__img{
  transform:scale(1.045);
  filter:saturate(1) brightness(.88);
}
.loc-hero__caption{
  position:absolute; z-index:2;
  right:clamp(12px, 1.6vw, 20px); bottom:clamp(12px, 1.6vw, 18px);
  display:flex; align-items:center; gap:10px;
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,255,255,.82);
  text-shadow:0 1px 12px rgba(12,22,26,.9);
}
.loc-hero__caption::before{
  content:"";
  width:20px; height:1px;
  background:var(--sx-main);
}

/* --- the facts: three columns seamed across the foot of the masthead ------ */
.loc-facts{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  max-width:var(--sx-max);
  margin:clamp(38px, 4.6vw, 66px) auto 0;
  padding:clamp(28px, 3.2vw, 40px) 0 0;
  border-top:1px solid var(--sx-rule-soft);
}
/* the seam runs between the columns here, not under each fact */
.loc-fact{
  padding-left:clamp(24px, 3.4vw, 54px);
  border-left:1px solid var(--sx-rule-soft);
}
.loc-fact:first-child{padding-left:0; border-left:0}

.loc-fact__term{
  display:flex; align-items:center; gap:10px;
  margin:0 0 9px;
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--sx-main);
}
.loc-fact__term i{
  width:13px;
  font-size:11px;
  text-align:center;
  color:var(--sx-rule);
}
.loc-fact__def{
  margin:0;
  font-size:14.5px; line-height:1.65;
  color:var(--sx-muted);
}
/* the fact itself is set brighter and larger than the line that qualifies it */
.loc-fact__strong{
  display:block;
  margin:0 0 2px;
  font-size:clamp(16px, 1.4vw, 18px);
  line-height:1.45;
  letter-spacing:.02em;
  color:var(--sx-heading);
}
a.loc-fact__strong{transition:color .3s var(--sx-ease)}
a.loc-fact__strong:hover{color:var(--sx-main)}

/* ==========================================================================
   GETTING HERE — a three-up finding row: the map carried in a labelled plate,
   two approach photographs beside it. Cards are the same dark box with a gold
   hairline used elsewhere on the site; nothing here introduces a new colour.
   ========================================================================== */
.loc-find{
  padding:clamp(40px, 5vw, 70px) var(--sx-gutter) clamp(48px, 6vw, 88px);
  background:var(--sx-bg-deep);
}
.loc-find__inner{
  width:100%;
  max-width:var(--sx-max);
  margin:0 auto;
}

/* ------------------------------------------------------------- heading -- */
.loc-find__head{margin:0 0 clamp(26px, 3vw, 42px)}
.loc-find__script{
  margin:0;
  font-family:var(--sx-font-script);
  font-size:clamp(30px, 3.2vw, 46px);
  line-height:1;
  color:var(--sx-main);
}
.loc-find__title{
  margin:clamp(6px, .8vw, 12px) 0 0;
  font-family:var(--sx-font-display);
  font-weight:400;
  font-size:clamp(26px, 3.4vw, 46px);
  line-height:1.12;
  letter-spacing:.04em;
  color:var(--sx-heading);
}
.loc-find__rule{
  display:block;
  width:68px; height:1px;
  margin-top:clamp(14px, 1.6vw, 22px);
  background:var(--sx-main);
}

/* --------------------------------------------------------------- grid --- */
.loc-find__grid{
  display:grid;
  grid-template-columns:1.25fr 1fr 1fr;
  gap:clamp(16px, 1.8vw, 28px);
  align-items:stretch;
}

/* --------------------------------------------------------------- card --- */
.loc-card{
  display:flex;
  flex-direction:column;
  background:var(--sx-box);
  border:1px solid var(--sx-rule-soft);
  overflow:hidden;
  transition:border-color .4s var(--sx-ease);
}
.loc-card:hover{border-color:var(--sx-rule)}

/* the labelled bar across the head of the map plate */
.loc-card__bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:14px clamp(14px, 1.4vw, 20px);
  border-bottom:1px solid var(--sx-rule-soft);
  background:var(--sx-bg-deep);
}
.loc-card__label{
  display:inline-flex; align-items:center; gap:9px;
  font-size:10px; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--sx-heading);
}
.loc-card__label i{font-size:11px; color:var(--sx-main)}
.loc-card__action{
  display:inline-flex; align-items:center; gap:8px;
  font-size:10px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--sx-main);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--sx-ease), color .3s var(--sx-ease);
}
.loc-card__action i{font-size:9px}
.loc-card__action:hover{color:var(--sx-border); border-bottom-color:var(--sx-border)}

/* the picture / map well — every card keeps the same well height so the row
   reads as one band rather than three unequal tiles */
.loc-card__media{
  position:relative;
  height:clamp(230px, 24vw, 300px);
  overflow:hidden;
}
.loc-card--map{grid-row:span 1}
.loc-card--map .loc-card__media{height:auto; flex:1 1 auto; min-height:clamp(230px, 24vw, 300px)}

.loc-card__embed{
  display:block;
  width:100%; height:100%;
  border:0;
  /* Google's panel is near-white and cannot be restyled across the iframe
     boundary, so it is tuned to sit in the dark palette — dimmed and warmed,
     but NOT desaturated to the point the streets stop reading. Restored in
     full on hover or keyboard focus, when the reader is actually using it. */
  filter:grayscale(.3) brightness(.8) contrast(1.06) sepia(.1);
  transition:filter .6s var(--sx-ease);
}
.loc-card--map:hover .loc-card__embed,
.loc-card__embed:focus-within{filter:none}

/* the two approach photographs open in a lightbox -- the link simply fills
   the well so the framing, the crop and the hover zoom are unchanged */
.loc-card__zoom{
  display:block;
  width:100%; height:100%;
  cursor:zoom-in;
}

.loc-card__img{
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.02);
  transition:transform 1.2s var(--sx-ease-slide);
}
.loc-card:hover .loc-card__img{transform:scale(1.07)}

/* the caption beneath a photograph */
.loc-card__foot{
  padding:clamp(16px, 1.6vw, 22px) clamp(14px, 1.4vw, 20px) clamp(18px, 1.8vw, 24px);
  border-top:1px solid var(--sx-rule-soft);
}
.loc-card__name{
  margin:0;
  font-family:var(--sx-font-display);
  font-weight:400;
  font-size:clamp(17px, 1.5vw, 21px);
  letter-spacing:.03em;
  color:var(--sx-heading);
}
.loc-card__note{
  margin:7px 0 0;
  font-size:13px;
  line-height:1.6;
  color:var(--sx-main);
}
/* ==========================================================================
   RESPONSIVE  — breakpoints shared with index.css (DESIGN.md §4)
   ========================================================================== */
/* the picture drops below the type and the facts stop being three columns:
   the terms wrap and the seams start reading as a table */
@media (max-width:900px){
  .loc-hero__inner{
    grid-template-columns:minmax(0,1fr);
    gap:clamp(38px, 7vw, 56px);
  }
  .loc-hero__figure{aspect-ratio:16 / 11; max-width:640px}
  .loc-hero__img{object-position:50% 46%}
  .loc-hero__frame{
    inset:clamp(-18px, -2.4vw, -12px) auto clamp(-18px, -2.4vw, -12px) clamp(-18px, -2.4vw, -12px);
    width:55%;
  }
  .loc-hero__glow{width:min(90%, 560px); top:-4%}
}

@media (max-width:860px){
  .loc-facts{grid-template-columns:1fr}
  .loc-fact{
    padding:clamp(14px, 2vw, 18px) 0 0;
    margin:clamp(14px, 2vw, 18px) 0 0;
    border-left:0;
    border-top:1px solid var(--sx-rule-soft);
  }
  .loc-fact:first-child{padding-top:0; margin-top:0; border-top:0}

  /* the map takes the full width and the two photographs pair beneath it */
  .loc-find__grid{grid-template-columns:1fr 1fr}
  .loc-card--map{grid-column:1 / -1}
  .loc-card--map .loc-card__media{height:clamp(260px, 48vw, 360px); min-height:0}
}

@media (max-width:600px){
  .loc-hero__title{letter-spacing:.08em; text-indent:.08em}
  .loc-hero__actions{flex-direction:column; align-items:flex-start; gap:18px}
  .loc-hero__actions .index-btn--textual{padding-left:0}
  /* the offset bracket and the caption both need room the phone does not have */
  .loc-hero__figure{aspect-ratio:4 / 3}
  .loc-hero__frame{display:none}
  .loc-hero__caption{display:none}
  .loc-find__grid{grid-template-columns:1fr}
  .loc-card--map{grid-column:auto}
  .loc-card--map .loc-card__media{height:clamp(240px, 62vw, 320px)}
  .loc-card__media{height:clamp(200px, 52vw, 260px)}
  .loc-card__bar{flex-wrap:wrap; gap:10px}
}

/* --------------------------------------------------------- a11y / motion -- */
@media (prefers-reduced-motion:reduce){
  .loc-hero__figure:hover .loc-hero__img{
    transform:none!important;
    transition-duration:.001ms;
  }
  .loc-card__embed{transition-duration:.001ms}
  .loc-card:hover .loc-card__img{transform:scale(1.02); transition-duration:.001ms}
}

/* ------------------------------------------------- the centred masthead ---
   The location hero lost its picture, so the copy is the only child of the
   masthead grid: collapse the empty picture column and run the block down
   the page's centre axis instead of the left one. */
.loc-hero__inner{grid-template-columns:minmax(0,1fr)}
.loc-hero__copy{text-align:center}
.loc-hero__crumbs{justify-content:center}
.loc-hero__actions{justify-content:center}
.loc-hero__rule{margin-left:auto; margin-right:auto}
/* centred text needs the tracking split both sides, not indented left */
.loc-hero__title{text-indent:0; margin-right:-.15em}
.loc-hero__text{margin-left:auto; margin-right:auto}
/* the glow was hung off the picture's corner; centre it on the copy */
.loc-hero__glow{left:50%; right:auto; transform:translateX(-50%)}