/* Base
   Prototype lines 56-64, lifted verbatim, plus the faces and the few classes
   the theme needs where the prototype used inline styles. Nothing here restyles
   a prototype selector; every addition is a new name. */

@font-face{font-family:'Gravita GEO';src:url('../fonts/gravita-light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Gravita GEO';src:url('../fonts/gravita-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Gravita GEO';src:url('../fonts/gravita-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Gravita GEO';src:url('../fonts/gravita-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Myriad Pro';src:url('../fonts/myriadpro-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Cairo';src:url('../fonts/cairo-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Cairo';src:url('../fonts/cairo-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Cairo';src:url('../fonts/cairo-semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Cairo';src:url('../fonts/cairo-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

html,body{margin:0;padding:0;background:#222223}
html{scroll-padding-block-start:var(--bar-h)}
*{box-sizing:border-box}
p{margin:0}
img{display:block}
a{color:inherit;text-decoration:none}
input{font:inherit;color:inherit}
:focus-visible{outline:var(--focus-width) solid var(--terracotta);outline-offset:var(--focus-offset)}
svg.i{flex:none;stroke:currentColor;fill:none}

/* Photographs. The prototype paints .photo and .swap as background images
   because a prototype has no media library; the theme uses a real <img> so
   srcset, lazy loading and fetchpriority apply. The box still positions it —
   this only restores the cover behaviour the background rule carried. */
img.photo,img.swap{width:100%;height:100%;object-fit:cover}
/* Crops the prototype set on the background rule, restated for the element. */
.fd-plate img.photo{object-position:center 58%}
.vhero img.photo{object-position:center 55%}
/* Where the prototype oversized a photograph with negative insets, an <img>
   needs the width spelled out: an absolutely positioned replaced element takes
   its width from the width property, not from the two inline insets. The
   carousel's panes run 9% wide on each side so the photograph can lag the lane. */
.fcar-pane img.photo{width:118%}

/* Wordmark swap (prototype lines 85-87). Both marks ship in the markup and CSS
   picks one, so this has to load in both directions — rtl.css only loads when
   is_rtl(), and without these the Arabic mark would print alongside the
   English one. */
.mark-ar{display:none}
[dir="rtl"] .mark-en{display:none}
[dir="rtl"] .mark-ar{display:block}

/* The document ground. The prototype set this on its wrapper element; here the
   body is the wrapper, and .ground-black in components.css supplies the pair. */
body{font-family:var(--font-body);-webkit-font-smoothing:antialiased;min-height:100svh}

/* Ordinal suffixes set small, on the client's 14 September note. line-height:0 keeps
   the raised suffix from opening up the line box it sits in. */
sup{font-size:.62em;line-height:0}

/* Skip link — off screen until focused, then a real 44-high target. Written as
   .px.skip: components.css loads after this sheet, so a bare .skip would tie
   with .px on specificity and lose its ground to .px{background:none}. It
   hides by position, not by transform, so the global press model keeps the
   transform channel to itself. */
.px.skip{position:fixed;inset-inline-start:var(--margin);inset-block-start:-6rem;z-index:60;background:var(--cream);color:var(--black);--px-mark:var(--terracotta-ink-cream);--px-ink:var(--cream)}
.px.skip:focus{inset-block-start:var(--space-4)}

/* Off the page, still announced. The line-up's filter count lives here: the
   client asked for its sentence off the page on 14 September, and it is also
   the filters' aria-live region, so deleting the element would take the "3 of 9"
   announcement with it. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Overlay menu chrome. The dialog itself is .menu in components.css; these are
   the inner rows the prototype carried as inline styles. The attribute selector
   outranks .menu's own display, so [hidden] closes it without !important. */
.menu[hidden]{display:none}
body.menu-open{overflow:hidden}
.menu-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5)}
.menu-top img{height:30px;width:auto}
.menu-close{--px-mark:var(--terracotta-ink-cream);--px-ink:var(--cream);color:var(--black)}
.menu-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap;border-block-start:var(--hairline) solid var(--rule-strong-cream);padding-block-start:var(--space-5)}
.menu-foot-eyebrow{font:var(--type-eyebrow);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--ink-muted-cream);margin-block-end:var(--space-2)}
.menu-foot-line{font:var(--type-caption);display:flex;align-items:center;gap:var(--space-3)}
.menu-foot-actions{display:flex;gap:var(--space-2);align-items:center}
.menu-social{--px-mark:var(--black);--px-ink:var(--cream);color:var(--black)}
.menu-aside{position:relative;border-inline-start:var(--hairline) solid var(--rule-strong-cream);overflow:hidden;min-height:320px}
.menu-aside-card{position:absolute;inset-block-end:0;inset-inline:0;background:var(--black);color:var(--cream);padding:var(--space-5) var(--space-6)}
.menu-aside-eyebrow{font:var(--type-eyebrow);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--ink-muted-black);margin-block-end:var(--space-2)}
.menu-aside-head{font:var(--type-display-sm);letter-spacing:var(--track-display);text-transform:uppercase}

/* Footer chrome, likewise inline in the prototype. */
.foot-brand{display:inline-flex;margin-block-end:var(--space-6)}
.foot-brand img{width:56px;height:56px}
.foot-eyebrow{font:var(--type-eyebrow);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--ink-muted);margin-block-end:var(--space-4)}
.foot-address{font:var(--type-caption);color:var(--ink);margin-block-end:var(--space-3)}
.foot-links{display:flex;flex-direction:column}
.foot-links .px{--px-mark:var(--terracotta-ink-black);--px-ink:var(--black);color:var(--cream)}
.foot-social{display:flex;gap:var(--space-4);margin-block-start:var(--space-5)}
.foot-social a{display:inline-flex;flex:none;align-items:center;justify-content:center;width:var(--target-min);height:var(--target-min);border:var(--hairline) solid var(--rule-strong)}
@media (hover:hover){.foot-social a:hover{color:var(--accent-ink);border-color:var(--accent-ink)}}
.foot-signup{container-type:inline-size;background:var(--blue);color:var(--black);padding:var(--space-6)}
.foot-signup-eyebrow{font:var(--type-eyebrow);letter-spacing:var(--track-eyebrow);text-transform:uppercase;margin-block-end:var(--space-4)}
.foot-signup p{font:var(--type-caption);margin-block-end:var(--space-4)}
.foot-signup form{display:flex}
.foot-signup input{flex:1;min-width:0;height:var(--target-min);padding-inline:var(--space-4);background:none;border:var(--hairline) solid rgba(34,34,35,0.44);margin-inline-end:calc(-1 * var(--hairline));border-radius:0;font:var(--type-caption)}
/* The sign-up sits in a quarter-width column, so from 1024 to 1439 the row
   left the field 37-113px: "Email a" in English, a sliver beside the longer
   Arabic button. Below a usable width the field takes the line and the
   button goes under it. The field keeps its whole border and tucks its
   joining edge under the button by a hairline (end in a row, bottom when
   stacked), so neither layout restates the border colour. */
@container (max-width:240px){.foot-signup form{flex-direction:column}.foot-signup input{flex:none;margin-inline-end:0;margin-block-end:calc(-1 * var(--hairline))}}
.foot-signup button{--px-size:8px;--px-half:4px;--px-inset:var(--space-3);--px-scale:70;--px-mark:var(--cream);--px-ink:var(--black);padding-inline:var(--space-6) var(--space-4);background:var(--black);color:var(--cream);border:none}

/* Registration confirmation. */
/* The ground pair comes from .ground-cream in the markup, so --ink-muted,
   --rule-strong and --accent-ink below are all cream's own values rather than
   a half-pair assembled here. */
.thanks{border:var(--hairline) solid var(--rule-strong);padding:var(--space-7);max-width:min(46ch,calc(100vw - var(--margin) * 2))}
.thanks::backdrop{background:rgba(34,34,35,.72)}
.thanks-head{margin-block-end:var(--space-4)}
.thanks-line{margin-block-end:var(--space-6);color:var(--ink-muted)}
.foot-base{display:flex;justify-content:space-between;gap:var(--space-5);flex-wrap:wrap;border-block-start:var(--hairline) solid var(--rule);margin-block-start:var(--space-8);padding-block-start:var(--space-5)}
.foot-base img{width:min(100%,300px);height:auto;opacity:0.9}
.foot-base-meta{display:flex;gap:var(--space-6);align-items:center;flex-wrap:wrap}
.site-foot{border-block-start:var(--hairline) solid var(--rule);padding:var(--section-block) var(--margin) var(--space-7)}

/* The two grounds the prototype never drew as classes.
   Blue takes #3a4247 as its accent as well as its muted tier: terracotta on
   blue measures 3.49:1, which fails AA at eyebrow size, and §10 states the
   blue-ground eyebrow at 4.99:1 — which is this value, measured. Same shape as
   .ground-black and .ground-cream in components.css: surface and ink set
   together, with the muted tier and rules that belong to that ground and no
   other. Both take black ink — terracotta and blue are the surfaces here, never
   the type. */
.ground-blue{--media-ground:color-mix(in oklab,var(--blue) 86%,var(--black) 14%);--surface-wash:rgba(34,34,35,0.06);--surface:var(--blue);--ink:var(--black);--ink-muted:var(--ink-muted-blue);--rule:var(--rule-blue);--rule-strong:var(--rule-strong-blue);--accent-ink:var(--ink-muted-blue);--counter:var(--black);--counter-ink:var(--blue);--sec-fill:var(--black);background:var(--surface);color:var(--ink)}
.ground-terracotta{--media-ground:color-mix(in oklab,var(--terracotta-ground) 86%,var(--cream) 14%);--surface-wash:rgba(214,210,196,0.08);--surface:var(--terracotta-ground);--ink:var(--cream);--ink-muted:var(--ink-muted-terracotta);--rule:var(--rule-terracotta);--rule-strong:var(--rule-strong-terracotta);--accent-ink:var(--cream);--counter:var(--cream);--counter-ink:var(--terracotta-ground);--sec-fill:var(--cream);background:var(--surface);color:var(--ink)}

/* Pixel-button grounds. The prototype set --px-mark and --px-ink inline on every
   button because it had no ground context to lean on. Here the ground pair
   already carries both values, so a button asks its section which ground it is
   standing on instead of naming colours. */
.px-ground{--px-mark:var(--accent-ink);--px-ink:var(--surface);color:var(--ink)}
.ground-cream .px-ground{--px-pressed:var(--terracotta-pressed)}
.px-invert{--px-mark:var(--ink);--px-ink:var(--surface);color:var(--ink)}

/* Food & Drink — the plate and the standfirst. */
.eyebrow.fd-plate-eyebrow{color:var(--cream);opacity:.72;margin-block-end:var(--space-5)}
.fd-plate-head{font:var(--type-display-xl);letter-spacing:var(--track-display-xl);text-transform:uppercase;max-width:16ch;text-wrap:balance;margin:0}
.fd-intro{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:var(--space-8);align-items:start}
@media (max-width:1023px){.fd-intro{grid-template-columns:minmax(0,1fr);gap:var(--space-6)}}
.fd-standfirst{font:var(--type-display-body);max-width:34ch;text-wrap:pretty}
.fd-facts{display:flex;flex-direction:column;gap:var(--space-5);border-inline-start:var(--hairline) solid var(--rule-strong);padding-inline-start:var(--space-6)}
.fd-fact-n{font:var(--type-display-md);letter-spacing:var(--track-display);color:var(--ink)}
.fd-fact-label{margin-block-start:var(--space-2)}

.fcar-head{padding-block-end:var(--space-6);display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-5);flex-wrap:wrap}
.fcar-count{color:var(--ink-muted)}
.fcar-cap-go{display:flex;justify-content:center;margin-block-start:var(--space-5)}

.fd-lineup{padding-block-start:var(--section-block)}
.fd-lineup-head{padding:0 var(--margin) var(--space-7);display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-6);flex-wrap:wrap}
.eyebrow.fd-lineup-eyebrow{color:var(--ink-muted);margin-block-end:var(--space-4)}
.fd-lineup-count{max-width:32ch}
.fdfil-n{color:var(--ink-muted);font-variant-numeric:tabular-nums}
.fdfil button[aria-pressed="true"] .fdfil-n{color:var(--ink)}
.vlist{padding:0 var(--margin) var(--space-10)}
.vstory{max-width:52ch;margin-block-start:var(--space-3);text-wrap:pretty}
.vstory p + p{margin-block-start:var(--space-5)}
.vmeta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-5);margin-block-start:var(--space-4)}
.eyebrow.vmeta-line{color:var(--ink-muted);white-space:nowrap}
/* Cuisine · zone · state fits on one line down to 560; below that the longest
   pairing overruns the column, so let it wrap rather than push the page. */
@media (max-width:560px){.eyebrow.vmeta-line{white-space:normal}}

.card-name{display:block;font:var(--type-display-sm);letter-spacing:var(--track-display);text-transform:uppercase;margin-block-start:var(--space-4)}
.card-meta{display:block;margin-block-start:var(--space-2)}

.empty{margin:0 var(--margin) var(--space-10);border:var(--hairline) solid var(--rule-strong);padding:var(--space-8);display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4)}
.empty[hidden]{display:none}
.empty-body{max-width:44ch}
.empty-actions{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-block-start:var(--space-2)}

/* One kitchen. */
/* The hero is a wide band, and `min(62svh,620px)` only delivers one on a wide
   screen. Height there is capped by the 620px term, so the ratio is set by the
   viewport width -- 3.10:1 at 1920. On a phone the svh term wins instead and the
   box turns PORTRAIT: 390x461, 0.84:1. Every photograph in the library was shot
   landscape, so on a phone each hero was reduced to a narrow vertical sliver of
   its own centre. The prototype carries the same rule and never covered it --
   it is drawn at 1440, so the case never appeared.
   The third term is a floor on the ratio: 72vw keeps the band at 1.39:1 or wider
   at every size, and never binds at >=1024 (at 1024 it is 737px against the
   476px the svh term already gives), so the desktop hero is untouched. */
.vhero{position:relative;height:min(62svh,620px,72vw);overflow:hidden;background:var(--media-ground)}
.vhero-veil{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(34,34,35,.72) 0%,rgba(34,34,35,.15) 40%,rgba(34,34,35,.86) 100%)}
.vhead{padding:var(--space-8) var(--margin) var(--space-7)}
/* No longer a link: it names the storey, not a route to the zone. */
.vhead-zone{margin-block-end:var(--space-3);cursor:auto}
.h1.vhead-name{margin-block-end:var(--space-4)}
.vhead-line{font:var(--type-display-body);max-width:48ch;text-wrap:pretty}
.vbodyrow{padding:0 var(--margin) var(--space-9)}
.vmenu{margin-block-start:var(--space-8);border-block-start:var(--hairline) solid var(--rule-strong);padding-block-start:var(--space-6)}
.vmenu-head{margin-block-end:var(--space-5)}
.vdish{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-5);align-items:baseline;padding-block:var(--space-4)}
.vdish-name{font:var(--type-title);letter-spacing:var(--track-title);text-transform:uppercase}
.vdish-note{display:block;margin-block-start:var(--space-2)}
.vdish-price{font:var(--type-body);font-variant-numeric:tabular-nums;color:var(--ink)}
.vdish-price-soft{color:var(--ink-muted)}
.vmenu-foot{display:flex;gap:var(--space-3);flex-wrap:wrap;border-block-start:var(--hairline) solid var(--rule-strong);padding-block-start:var(--space-5);margin-block-start:var(--space-5)}
.vmenu-pdf{--px-mark:var(--sec-fill);--px-ink:var(--cream);color:var(--ink)}
.vgallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter);margin-block-start:var(--space-8)}
@media (max-width:767px){.vgallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
.vgallery-shot{aspect-ratio:var(--ar-card)}
.side-label{margin-block-end:var(--space-3)}
.side-block{border-block-start:var(--hairline) solid var(--rule);padding-block-start:var(--space-4)}
.side-hours{display:flex;justify-content:space-between;gap:var(--space-4);padding-block:var(--space-2)}
.cap.side-time{color:var(--ink);font-variant-numeric:tabular-nums}
.side-note{margin-block-start:var(--space-3)}
.side-facts{display:flex;flex-direction:column;gap:var(--space-3)}
.side-fact{display:flex;align-items:center;gap:var(--space-3);font:var(--type-caption);min-height:var(--target-min)}
.side-cta{justify-content:center}
.h2.related-head{margin-block-end:var(--space-6)}

/* Page tops, shared by What's On and Four rooms. */
.pagetop-eyebrow{margin-block-end:var(--space-4)}
.h1.pagetop-head{margin-block-end:var(--space-5)}
.pagetop-line{font:var(--type-display-body);max-width:56ch;text-wrap:pretty}
.pagetop-line-wide{max-width:60ch}

/* What's On. */
.efeat-wrap{padding:0 var(--margin) var(--space-8)}
.efeat{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
@media (max-width:1023px){.efeat{grid-template-columns:minmax(0,1fr)}}
/* The media fills the panel rather than holding its ratio and leaving a band of
   bare ground underneath: the copy decides the row height here. Both dimensions
   are stated so aspect-ratio does not start driving the width instead. Stacked
   below 1024 there is no row to fill, so the ratio comes back. */
.efeat-media{position:relative;width:100%;height:100%;min-height:280px;overflow:hidden;background:var(--media-ground)}
@media (max-width:1023px){.efeat-media{height:auto;min-height:0;aspect-ratio:var(--ar-wide)}}
.efeat-body{padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-4);justify-content:center}
.efeat-date{display:flex;align-items:baseline;gap:var(--space-4);flex-wrap:wrap}
.efeat-day{font:300 64px/0.9 var(--font-display);letter-spacing:var(--track-display-xl)}
.efeat-month{font:var(--type-display-md);letter-spacing:var(--track-display);text-transform:uppercase}
.efeat-line{max-width:44ch}
.efeat-go{display:flex;align-items:center;gap:var(--space-5);margin-block-start:var(--space-2);flex-wrap:wrap}
.elist{padding:0 var(--margin) var(--space-10)}
.ecard-shot{aspect-ratio:var(--ar-wide)}
.ecard-date{display:flex;align-items:baseline;gap:var(--space-3);margin-block-start:var(--space-4)}
.ecard-day{font:300 28px/0.92 var(--font-display);letter-spacing:var(--track-display-xl)}
.ecard-month{font:var(--type-eyebrow);letter-spacing:var(--track-eyebrow);text-transform:uppercase}
.ecard .card-name{margin-block-start:var(--space-3)}
.cap.ecard-where{display:flex;align-items:center;gap:var(--space-3);margin-block-start:var(--space-2)}
.cap.ecard-state{display:block;margin-block-start:var(--space-2);color:var(--accent-ink)}
.cap.ecard-state-dim{color:var(--ink-muted)}

.ehero{position:relative;height:min(56svh,560px);overflow:hidden;background:var(--media-ground)}
.ehero img.photo{object-position:center 45%}
.ebody{padding:var(--space-8) var(--margin) var(--space-9)}
.ebody-when{margin-block-end:var(--space-4)}
.h1.ebody-head{margin-block-end:var(--space-5)}
.ebody-line{font:var(--type-display-body);max-width:44ch;margin-block-end:var(--space-6);text-wrap:pretty}
.ebody-actions{border-block-start:var(--hairline) solid var(--rule-strong);padding-block-start:var(--space-5);display:flex;gap:var(--space-3);flex-wrap:wrap}
.ebody-host{--px-mark:var(--sec-fill);--px-ink:var(--cream);color:var(--ink)}
.efact{display:flex;align-items:flex-start;gap:var(--space-4);border-block-start:var(--hairline) solid var(--rule);padding-block-start:var(--space-3)}
.efact svg{margin-block-start:2px}
.cap.efact-value{color:var(--ink)}

/* Four rooms. */
/* Alternating sides. The prototype flipped these with an inline order, so
   .band never got a data-flip rule the way .feat did. Below 1024 the
   components sheet forces the photograph above the body regardless. */
.band[data-flip="1"] .band-media{order:2}
.band-num{font:300 clamp(48px,5vw,88px)/0.82 var(--font-display);letter-spacing:var(--track-display-xl);color:var(--accent-ink)}
.h1.band-name{display:flex;align-items:center;gap:var(--space-4);margin:0}
.band-standfirst{font:var(--type-display-body);max-width:36ch;text-wrap:pretty}
.band-go{--px-mark:var(--accent-ink);--px-ink:var(--counter-ink);color:var(--ink);align-self:flex-start}

.zhero{position:relative;height:min(60svh,600px);overflow:hidden;background:var(--media-ground)}
.zhead{padding:var(--space-8) var(--margin) var(--space-7)}
.zhead-eyebrow{margin-block-end:var(--space-4)}
.h1.zhead-name{margin-block-end:var(--space-5)}
.zhead-line{font:var(--type-display-body);max-width:52ch;text-wrap:pretty}
.zstats{padding:0 var(--margin) var(--space-8);display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--space-6)}
.zstat{border-block-start:var(--hairline) solid var(--rule-strong);padding-block-start:var(--space-4)}
.zstat-value{font:300 44px/0.9 var(--font-display);letter-spacing:var(--track-display-xl)}
.zstat-label{margin-block-start:var(--space-3)}
.zbody{padding:0 var(--margin) var(--space-9)}
.zbody-copy{font:var(--type-display-body);max-width:40ch;text-wrap:pretty}
.zbusy{margin-block-start:var(--space-8)}
.h2.zbusy-head{margin-block-end:var(--space-5)}
.zbusy-chart{display:flex;align-items:flex-end;gap:var(--space-2);height:150px;border-block-end:var(--hairline) solid var(--rule-strong);padding-block-end:var(--space-2)}
.zbusy-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.zbusy-bar{width:100%}
.zbusy-low{background:var(--rule-strong)}
.zbusy-mid{background:var(--ink)}
.zbusy-peak{background:var(--accent-ink)}
.zbusy-scale{display:flex;justify-content:space-between;margin-block-start:var(--space-3)}
.zbusy-note{margin-block-start:var(--space-5);max-width:52ch}

/* What's On chip row. */
.echips-row{padding:0 var(--margin) var(--space-6);display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:center}
.echips-label{display:flex;align-items:center;gap:var(--space-2);font:var(--type-eyebrow);letter-spacing:var(--track-eyebrow);text-transform:uppercase;width:96px;flex:none;color:var(--ink-muted)}
.echips{display:flex;gap:var(--space-3);flex-wrap:wrap}
.px.echip{gap:var(--space-3);border:var(--hairline) solid var(--rule-strong);color:var(--ink);--px-mark:var(--ink);--px-ink:var(--surface)}
.px.echip[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink);--px-mark:var(--ink);--px-ink:var(--surface)}
.ecard[hidden]{display:none}
.efeat[hidden]{display:none}
/* Any element the filter hides needs this spelled out: the UA sheet's [hidden]
   loses to an author display, so a .vrow keeps its grid and stays on screen
   with the attribute set. */
.vrow[hidden]{display:none}
.zbody-copy p + p{margin-block-start:var(--space-5)}
.zfact{display:flex;align-items:center;gap:var(--space-3);font:var(--type-caption);border-block-start:var(--hairline) solid var(--rule);padding-block-start:var(--space-3);min-height:var(--target-min)}
.h2.zn-head{margin-block-end:var(--space-4)}
.zn-line{max-width:56ch;margin-block-end:var(--space-6)}

/* The static pages. */
.pad-sides{padding:0 var(--margin) var(--space-9)}
.visit-facts{display:flex;flex-direction:column;gap:var(--space-6)}
.visit-fact-label{margin-block-end:var(--space-3)}
.visit-fact-value{max-width:42ch}
.visit-aside{display:flex;flex-direction:column;gap:var(--space-5)}
/* The empty placeholder this replaces sat on both Visit and Contact from the
   build until 11 September. The label moves out of the box and onto the page
   ground, so it takes that ground's muted ink rather than the black-ground
   value it used while it was sitting inside a black box. */
/* The floor plan. Geometry is schematic but every position is the real one, so
   nothing here may mirror in Arabic -- the building does not flip. SVG geometry
   ignores `dir`, and every text-anchor is set explicitly for the same reason. */
.plan-section{display:flex;flex-direction:column;gap:var(--space-6);padding-block:var(--space-9) 0}
.plan-head{margin-block-end:var(--space-2)}
.plan{margin:0;display:flex;flex-direction:column;gap:var(--space-4)}
.plan-svg{display:block;width:100%;max-width:100%;height:auto;overflow:visible}
.plan-plate rect{fill:var(--surface-wash);stroke:var(--rule);stroke-width:1}
.plan-zone rect{fill:none;stroke:var(--rule-strong);stroke-width:1}
.plan-label{font:var(--type-eyebrow);letter-spacing:var(--track-eyebrow);text-transform:uppercase;fill:var(--ink-muted);text-anchor:middle}
.plan-floor{font:var(--type-eyebrow);letter-spacing:var(--track-eyebrow);text-transform:uppercase;fill:var(--accent-ink);text-anchor:middle}
.plan-pod rect{fill:var(--black)}
.plan-pod text{font:400 15px/1 var(--font-display);fill:var(--cream);text-anchor:middle}
.plan-label-sub{fill:var(--ink-muted);opacity:0.72}
.plan-compass{font:var(--type-eyebrow);letter-spacing:var(--track-eyebrow);text-transform:uppercase;fill:var(--ink-muted);text-anchor:middle}
.plan-mark circle{fill:var(--accent-ink)}
.plan-caption{font:var(--type-caption);color:var(--ink-muted);max-width:68ch}
@media (max-width:767px){
  /* At phone width the two plates stack badly inside one viewBox, so the plan
     scrolls sideways at a readable size rather than shrinking to a smear. */
  .plan{overflow-x:auto}
  .plan-svg{width:720px;max-width:none}
}
.visit-map{margin:0;display:flex;flex-direction:column;gap:var(--space-3)}
.visit-map-frame{display:block;width:100%;max-width:100%;aspect-ratio:var(--ar-wide);border:var(--hairline) solid var(--rule-strong);background:var(--black)}
.visit-map-label{display:flex;align-items:center;gap:var(--space-3);font:var(--type-eyebrow);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--ink-muted)}
/* The caption became the client's own map pin on 14 September, so it has to be a
   real target rather than a label with an icon next to it. */
.visit-map-open{display:flex;align-items:center;gap:var(--space-3);min-height:var(--target-min);color:inherit;transition-property:color,transform;transition-duration:var(--dur-micro),var(--dur-release);transition-timing-function:var(--ease-out),var(--ease-release)}
@media (hover:hover){.visit-map-open:hover{color:var(--accent-ink)}}
.visit-map-open:active{transform:scale(var(--press-soft));transition-duration:var(--dur-press);transition-timing-function:var(--ease-press)}
.visit-book{border:var(--hairline) solid var(--rule-strong);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-5)}
.visit-book-note{max-width:40ch}
.visit-form{display:flex;flex-direction:column;gap:var(--space-4)}
.visit-label{display:flex;flex-direction:column;gap:var(--space-2)}
.visit-label-text{font:var(--type-eyebrow);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--ink-muted)}
.visit-label input{min-height:var(--target-min);padding-inline:var(--space-4);background:none;border:var(--hairline) solid var(--rule-strong);border-radius:0;font:var(--type-body)}
.visit-label textarea{padding:var(--space-4);background:none;border:var(--hairline) solid var(--rule-strong);border-radius:0;font:var(--type-body);resize:vertical}
.visit-trap{display:none}
.contact-note{border-inline-start:2px solid var(--accent-ink);padding-inline-start:var(--space-4);margin-block-end:var(--space-5)}
.contact-direct{display:flex;align-items:center;gap:var(--space-3);margin-block-start:var(--space-5)}
.visit-submit{justify-content:center}

.qa-group{margin-block-end:var(--space-8)}
.qa-group-name{margin-block-end:var(--space-5)}
.qa-answer{max-width:56ch;padding-block:var(--space-3) var(--space-5)}

.work-roles{padding:0 var(--margin) var(--space-8)}
.work-roles-label{margin-block-end:var(--space-5)}
.work-note{margin-block-start:var(--space-5);max-width:70ch}
.work-vendor-wrap{padding:0 var(--margin) var(--space-9)}
.work-vendor{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.work-vendor-media{position:relative;aspect-ratio:var(--ar-card);overflow:hidden;background:var(--media-ground)}
.work-vendor-body{padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-5);justify-content:center}
.work-vendor-line{max-width:44ch}
.work-vendor-go{display:flex;flex-wrap:wrap;gap:var(--space-3)}

.hire-wrap{padding:0 var(--margin) var(--space-8)}
.hire-shot{aspect-ratio:var(--ar-wide)}
.hire-body{padding-block-start:var(--space-4)}
.hire-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4)}
.hire-cap{font:300 28px/0.92 var(--font-display);letter-spacing:var(--track-display-xl);color:var(--accent-ink)}
.hire-note{margin-block-start:var(--space-3);max-width:34ch}
.h2.hire-includes-head{margin-block-end:var(--space-5)}
.include{display:flex;align-items:flex-start;gap:var(--space-4);border-block-start:var(--hairline) solid var(--rule);padding-block:var(--space-4)}
.include svg{margin-block-start:2px}
.include-label{font:var(--type-title);letter-spacing:var(--track-title);text-transform:uppercase}
.include-note{margin-block-start:var(--space-2);max-width:46ch}

.press-wrap{padding:0 var(--margin) var(--space-8)}
.h3.press-name{margin-block-start:var(--space-3)}
.cap.press-meta{margin-block-start:var(--space-2)}
.h2.coverage-head{margin-block-end:var(--space-5)}
.cap.cov-date{color:var(--ink-muted)}
.cap.cov-source{text-align:end}
@media (max-width:560px){.cap.cov-source{text-align:start}}
.press-terms{margin-block-start:var(--space-5);color:var(--ink-muted)}

.crow{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:var(--gutter);border-block-start:var(--hairline) solid var(--rule);padding-block:var(--space-5);align-items:baseline}
.crow-what{font:var(--type-title);letter-spacing:var(--track-title);text-transform:uppercase}
.cap.crow-when{margin-block-start:var(--space-2)}
.cap.crow-phone{margin-block-start:var(--space-2);color:var(--ink-muted)}

/* Narrative pages. The prose sits in a measure column set in from the margins,
   so a long-form page keeps the same rhythm as the art-directed ones. */
.h1.narrative-head{max-width:20ch;margin-block-end:0}
.narrative-standfirst{margin-block-start:var(--space-7);max-width:46ch}
/* Same ratio floor as .vhero, for the same reason: without the vw term this
   box turns portrait on a phone and a landscape photograph becomes a sliver. */
.narrative-plate{position:relative;height:min(58svh,620px,72vw);overflow:hidden;background:var(--media-ground)}
.narrative-plate img.photo{object-position:center 45%}
.narrative{padding:var(--space-9) var(--margin) var(--space-9);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter)}
.narrative > *{grid-column:4 / span 6}
@media (max-width:1023px){.narrative > *{grid-column:1 / -1}}
.narrative p{font:var(--type-body);max-width:60ch;margin-block-end:var(--space-5);text-wrap:pretty}
.narrative h2{font:var(--type-display-lg);letter-spacing:var(--track-display);text-transform:uppercase;margin:var(--space-8) 0 var(--space-5);max-width:20ch}
.narrative h3{font:var(--type-display-md);letter-spacing:var(--track-display);text-transform:uppercase;margin:var(--space-7) 0 var(--space-3)}
.narrative figure{margin:var(--space-6) 0}
.narrative figure img{width:100%;height:auto}
.narrative figcaption{font:var(--type-caption);color:var(--ink-muted);margin-block-start:var(--space-3)}
.narrative ul,.narrative ol{font:var(--type-body);max-width:60ch;padding-inline-start:var(--space-6);margin-block-end:var(--space-5)}
.narrative li{margin-block-end:var(--space-2)}
/* The two blocks that may break the measure, because they are the page's
   punctuation rather than its prose. */
.narrative .block-stat-band,.narrative .pullquote{grid-column:3 / span 8}
@media (max-width:1023px){.narrative .block-stat-band,.narrative .pullquote{grid-column:1 / -1}}
.narrative-card-shot{aspect-ratio:var(--ar-wide)}

/* The About band.
   The client's four photographs are appended to post_content after an
   <!-- mfh-about-band --> marker (tools/db/2026-09-11-new-amends.php), so they
   arrive as the last four sibling figures in .narrative. The marker is a
   comment and cannot carry a class; their position can, and the migration
   guarantees it. Left alone they inherited `.narrative > *` and stacked four
   portraits down the six-column measure — a contact sheet, not a band.

   The grid is already twelve columns, so the run takes all twelve in a mirrored
   pair: square beside wide, then wide beside tall. The two rows bottom- and
   top-align in opposite directions, which is what makes it read as one
   composition rather than four boxes. Ratios come from the same three tokens
   the cards use, and the sources are mixed portrait and square, so each box
   sets its ratio and the photograph covers it. */
.narrative > figure.size-mfh-wide:nth-last-child(-n+4){margin:0;overflow:hidden;background:var(--media-ground)}
.narrative > figure.size-mfh-wide:nth-last-child(-n+4) img{display:block;width:100%;height:100%;object-fit:cover}
.narrative > figure.size-mfh-wide:nth-last-child(4){grid-column:1 / span 5;aspect-ratio:var(--ar-tile);margin-block-start:var(--space-8)}
.narrative > figure.size-mfh-wide:nth-last-child(3){grid-column:6 / span 7;aspect-ratio:var(--ar-wide);align-self:end;margin-block-start:var(--space-8)}
.narrative > figure.size-mfh-wide:nth-last-child(2){grid-column:1 / span 7;aspect-ratio:var(--ar-wide);align-self:start}
.narrative > figure.size-mfh-wide:nth-last-child(1){grid-column:8 / span 5;aspect-ratio:var(--ar-card);align-self:start}
/* Below the twelve-column breakpoint `.narrative > *` collapses to one column.
   These selectors outrank that rule, so the collapse has to be restated here or
   the band keeps its desktop columns on a phone. Two up on a tablet, one on a
   phone, and every box back to the same ratio so the rows stay level. */
@media (max-width:1023px){
  .narrative > figure.size-mfh-wide:nth-last-child(-n+4){grid-column:span 6;aspect-ratio:var(--ar-wide);align-self:auto;margin-block-start:0}
  .narrative > figure.size-mfh-wide:nth-last-child(4),.narrative > figure.size-mfh-wide:nth-last-child(3){margin-block-start:var(--space-7)}
}
@media (max-width:560px){
  .narrative > figure.size-mfh-wide:nth-last-child(-n+4){grid-column:1 / -1;margin-block-start:0}
  .narrative > figure.size-mfh-wide:nth-last-child(4){margin-block-start:var(--space-7)}
}

/* The value run. The number stays put while its own column scrolls, which is
   what .vrun in components.css is for; these are the rows around it. */
.values{padding:0 var(--margin) var(--space-10)}
.values-head{border-block-start:var(--hairline) solid var(--rule-strong);padding-block-start:var(--space-7);margin-block-end:var(--space-6);display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap}
.h2.values-title{max-width:14ch;margin:0}
.values-note{max-width:40ch}
.h3.vrun-name{display:block;margin-block-start:var(--space-3)}
.vrun-body{font:var(--type-display-body);max-width:44ch;text-wrap:pretty}
.vrun-caption{margin-block-start:var(--space-3)}

/* The two narrative blocks. */
.block-stat-band{margin-block:var(--space-7)}
.pullquote{margin:var(--space-8) 0;border-block:var(--hairline) solid var(--rule-strong);padding-block:var(--space-8)}
.pullquote-line{font:300 44px/1.15 var(--font-display);letter-spacing:var(--track-display);text-transform:uppercase;margin:0;text-wrap:pretty}
@media (max-width:1023px){.pullquote-line{font-size:30px}}
.pullquote-source{font:var(--type-eyebrow);letter-spacing:var(--track-eyebrow);text-transform:uppercase;margin-block-start:var(--space-6)}

/* Story closer. The section's own rules are in components.css; these are the
   two rows the prototype carried inline. */
.story-go{display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap;margin-block-start:var(--space-3)}
.story-ring svg{display:block}

/* Home. */
.slide-eyebrow{margin-block-end:var(--space-5)}
.slide-figure{display:flex;align-items:baseline;gap:var(--space-4);flex-wrap:wrap}
.welcome{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-5)}
.h1.welcome-head{max-width:16ch}
.welcome-line{font:var(--type-display-body);max-width:52ch;text-wrap:pretty}
.welcome-go{display:flex;gap:var(--space-3);flex-wrap:wrap;justify-content:center;margin-block-start:var(--space-3)}

.home-rooms{padding-block:var(--section-block)}
.home-rooms-head{padding-inline:var(--margin)}
.home-rooms-eyebrow{margin-block-end:var(--space-3)}
/* All four zones are one card. The first used to be 560px at 16:10 while the
   other three were 300px at 3:4, so the row read as one feature plus three
   offcuts rather than a set of four rooms. 16:10 is the ratio that was on
   the first card, and it is the one the photography suits -- these are
   rooms, and a room is wider than it is tall. */
.room-card{flex:0 0 420px}
@media (max-width:1023px){.room-card{flex:0 0 300px}}
.room-shot{aspect-ratio:16/10}
.room-num{position:absolute;inset-block-start:0;inset-inline-start:0;z-index:1;background:var(--black);color:var(--cream);padding:var(--space-3) var(--space-4);font:300 32px/1 var(--font-display);letter-spacing:var(--track-display-xl)}
.cap.room-meta{display:flex;align-items:center;gap:var(--space-3);margin-block-start:var(--space-2)}


.lab{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-9);align-items:center}
@media (max-width:1023px){.lab{grid-template-columns:minmax(0,1fr);gap:var(--space-6)}}
.lab-media{position:relative;aspect-ratio:var(--ar-card);overflow:hidden;background:var(--media-ground)}
.lab-eyebrow{margin-block-end:var(--space-4)}
.h1.lab-head{margin-block-end:var(--space-5)}
.lab-line{max-width:46ch;margin-block-end:var(--space-6)}
.lab-go{display:flex;gap:var(--space-3);flex-wrap:wrap}


/* ── About ─────────────────────────────────────────────────────────────────
   page-about.php. The page made three claims and proved none of them, so the
   layout's whole job here is to put the evidence next to the sentence that
   needs it. Rhythm is deliberate: a narrow column of argument, then a full
   measure of proof, alternating black and cream so three claims do not read as
   one grey stretch. Nothing here is a new component -- the zone cards are the
   zone page's own .card/.shot, and the buttons are .px. */

.about-lead{padding-block:var(--space-9) 0}
.about-lead p{font:var(--type-display-body);max-width:52ch}

.about-claim{
  padding:var(--space-9) var(--margin);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter);
}
.about-claim + .about-claim{padding-block-start:var(--space-9)}

/* The argument sits on the same measure the narrative template uses, so About
   still reads as one of the long-form pages rather than a landing page. */
.about-claim-text{grid-column:4 / span 6}
.h2.about-claim-head{max-width:22ch;margin-block-end:var(--space-5);text-wrap:balance}
.about-claim-body p{font:var(--type-body);max-width:60ch;margin-block-end:var(--space-5);text-wrap:pretty}
.about-claim-body p:last-child{margin-block-end:0}

/* Evidence takes the full twelve. The width change is the point: the reader
   moves from being told to being shown. */
.about-proof{grid-column:1 / -1;margin-block-start:var(--space-8)}

/* Separated by space, not by rules. A border-inline-end leaves a dangling
   stroke wherever the row wraps, and there is no selector for "last on this
   visual line" -- the gap carries the separation and survives RTL untouched. */
.about-cuisine-list{
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:var(--space-4) var(--space-7);margin:0;padding:0;list-style:none;
  border-block-start:var(--hairline) solid var(--rule-strong);
  padding-block-start:var(--space-6);
}
.about-cuisine{font:var(--type-display-md);letter-spacing:var(--track-display);text-transform:uppercase}

.about-proof-go{margin-block-start:var(--space-7)}

.about-zone-shot,.about-figure{aspect-ratio:var(--ar-card)}




@media (max-width:1023px){
  .about-claim{padding-block:var(--space-8);gap:var(--space-6)}
  .about-claim-text{grid-column:1 / -1}
  .about-proof{margin-block-start:var(--space-7)}
  .about-cuisine{font:var(--type-display-sm);letter-spacing:var(--track-display)}
}
@media (max-width:560px){
  .about-lead{padding-block:var(--space-8) 0}
}