/* ============================================================================
   /christmas · CHRISTMAS 2026 CAMPAIGN PAGE — page delta, ROUND 4
   Loads AFTER the approved css/bond-fonts.css + css/bond-system.css (unchanged,
   pack version: D303 external-link icon, .upev events module, .video-pause-ctrl).
   Every selector is prefixed .xm-; nothing in the shared sheet is redefined.
   Reused as supplied: .nav*, .crumb, .kicker, .qtag, .t-h2/.t-h3, .btn*, .lnk-int/
   .lnk-ext, .ar/.imgph, .slot, .dcard/.dcard--static, .more-grid, .fbar/.fchip,
   .countline, .panel--outline, .rows, .qans/.qac, .r1/.stmt/.r1__line, .upev/.evgrid/
   .evcard, .tc, .video-pause-ctrl, footer, --junction.
   Campaign grounds = approved poster panel tints (round 5, 16 Sep 2026), campaign-scoped.
   ============================================================================ */

/* 0 · review-only stand-ins (production has the PNG lock-up; delete at integration) */
.logo-type{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  background:#000;color:#fff;width:128px;height:38px;flex:none;text-decoration:none;line-height:1;gap:2px}
.logo-type .lt1{font-family:var(--font-sans);font-weight:var(--fw-bold);font-size:11px;letter-spacing:var(--ls-logo);white-space:nowrap}
.logo-type .lt2{font-family:var(--font-sans);font-weight:var(--fw-med);font-size:5px;letter-spacing:.46em;text-indent:.46em;white-space:nowrap}
.logo-type--footer{width:170px;height:48px;gap:3px}
.logo-type--footer .lt1{font-size:14.5px}
.logo-type--footer .lt2{font-size:6.5px}
.footer__grid a.logo-type,.footer__grid a.logo-type:hover{display:inline-flex;font-size:0;margin-bottom:0;color:#fff}
.footer__grid a.logo-type .lt1{font-size:14.5px}
.footer__grid a.logo-type .lt2{font-size:6.5px}
.ar>.imgph{position:absolute;inset:0}
.imgph-cap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;
  font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.04em;line-height:1.45;color:var(--body);
  background:rgba(255,255,255,.8);padding:4px 8px;border-radius:3px;text-align:center;max-width:calc(100% - 16px)}
[data-labels="off"] .slot{display:none!important}

/* 1 · campaign tokens */
:root{--xm-pearl:#EBEDF0;--xm-pink:#F6E7E5;--xm-lilac:#E8E3F0;--xm-blush:#F3DCDC;--xm-mint:#C7E2DB;--xm-ecru:#EFE7DD}

/* 2 · campaign statement: Gotham Light caps line + Escrow Banner italic line */
.xm-hl{font-family:var(--font-sans);font-weight:var(--fw-light);text-transform:uppercase;letter-spacing:-.015em;
  line-height:.98;color:var(--ink);margin:0;text-wrap:balance}
.xm-hl .a,.xm-hl .b{display:block}
.xm-hl .b{font-family:var(--font-punch);font-style:italic;font-weight:var(--fw-book);letter-spacing:0}
.xm-hl--display{font-size:clamp(40px,5.2vw,74px)}
.xm-hl--section{font-size:clamp(32px,4.2vw,56px)}
/* D489 (15 Oct): exception for the John Lewis module only. Its head office headline is six words; at 56px it ran to four lines and outgrew the photograph. Mirrors .hpx .hpx-hl on the homepage. Delete both if the headline returns to two words. */
.xm-jl .xm-hl--section{font-size:clamp(32px,3.8vw,50px)}
/* authored line breaks in campaign copy: inline by default, blocks once the
   measure is known to hold both lines (measured against the campaign containers) */
.xm-ln{display:inline}
@media(min-width:600px){.xm-ln{display:block}}

/* 3 · CAMPAIGN FIELD — one full-width tinted ground per section (the hero included),
   content on the site grid inside .wrap. Fields are separated by paper. */
.xm-field{--xm-pt:clamp(36px,4.6vw,64px);background:var(--xm-tint,var(--surface-alt));padding:var(--xm-pt) 0;
  /* anchor landing: the module's eyebrow sits 24px below the sticky header, the tinted ground
     runs up behind the header edge (no paper sliver). Same rule for every anchored section. */
  scroll-margin-top:calc(var(--nav-h) + 24px - var(--xm-pt))}
.xm-page #visit.sec{scroll-margin-top:calc(var(--nav-h) + 24px - var(--sec-y))}
.xm-field--pearl{--xm-tint:var(--xm-pearl)}.xm-field--pink{--xm-tint:var(--xm-pink)}.xm-field--lilac{--xm-tint:var(--xm-lilac)}
.xm-field--blush{--xm-tint:var(--xm-blush)}.xm-field--mint{--xm-tint:var(--xm-mint)}.xm-field--ecru{--xm-tint:var(--xm-ecru)}
.xm-gap{margin-top:clamp(22px,2.8vw,40px)}
.xm-field .kicker{color:var(--body)}

/* 4 · HERO — static split on the ecru ground: copy beside the campaign photograph */
.xm-hero{padding:clamp(28px,3.6vw,52px) 0;margin-top:clamp(8px,1.2vw,14px)}
.xm-hero__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:stretch}
.xm-hero__copy{min-width:0;display:flex;flex-direction:column;justify-content:center}
.xm-hero__copy .kicker{margin-bottom:clamp(14px,1.8vw,22px)}
.xm-hero__body{margin-top:clamp(14px,1.8vw,22px);font-size:clamp(16px,1.3vw,19px);line-height:1.45;color:var(--body);max-width:34ch;text-wrap:pretty}
.xm-hero__acts{margin-top:clamp(18px,2.2vw,26px);display:flex;flex-wrap:wrap;gap:10px 12px}
.xm-jump{margin-top:clamp(20px,2.6vw,30px);padding-top:clamp(14px,1.8vw,18px);border-top:1px solid var(--line-strong)}
.xm-jump .kicker{margin-bottom:8px;font-size:11px}
.xm-jump__row{display:flex;flex-wrap:wrap;gap:2px 18px}
.xm-jump__row a{display:inline-flex;align-items:center;min-height:32px;font-size:14px;font-weight:600;color:var(--ink);
  text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line-strong)}
.xm-jump__row a:hover{color:var(--accent);text-decoration-color:currentColor}
.xm-photo{position:relative;margin:0;overflow:hidden;background:var(--surface-alt);border-radius:var(--r-md)}
/* D477. The frame's own background is a warm off-white. Inside a 10px rounded,
   overflow:hidden box whose height lands on a half pixel, it peels out along
   the rounded edge as a pale hairline - very visible where the frame sits on
   the teal hero. The film covers the box completely, so in the hero the
   background has nothing to do but show through: it is removed there. */
.xm-hero__photo{background:transparent}
.xm-photo>img,.xm-photo>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* D475. The hero frame now carries the Christmas film rather than a still.
   The master is left uncropped and the frame flexes as it always did, so the
   film is cropped by object-fit at whatever shape the column happens to be;
   object-position holds the hand and bauble in view as it narrows. */
.xm-hero__photo{min-height:clamp(380px,34vw,520px)}
@media(min-width:901px){.xm-hero__photo{height:100%}}
@media(max-width:900px){
  .xm-hero__grid{grid-template-columns:1fr;gap:clamp(18px,3vw,28px)}
  /* D476. The frame led nothing on a phone: order:2 put it below the headline,
     the copy, both buttons and the eight jump links, around 660px down an
     812px screen, so the film was effectively absent until you scrolled past
     the whole hero. It now leads, as a hero image normally does on a narrow
     screen, and takes the 4:5 shape the campaign uses elsewhere so it reads as
     a picture rather than a band. Desktop is untouched. */
  /* The grid sets align-items:stretch, and a stretched grid item has its
     height decided by the row, not by aspect-ratio. This figure holds no
     in-flow content - the video inside it is absolutely positioned - so
     where the browser resolves the stretch first the box collapses to zero
     and the film vanishes entirely rather than merely sitting in the wrong
     place. align-self:start takes it out of the stretch so the ratio is
     honoured, and the min-height is a floor so it can never be nothing even
     if the ratio is dropped. */
  /* 4:3 on a phone. At 4:5 the frame ran to 443px on a 390 screen and pushed
     the headline and both buttons off the first view; 4:3 gives the film real
     presence at about 265px and still leaves WHERE CHRISTMAS LIVES, both CTAs
     and the start of the jump nav above the fold. One value to change if a
     different shape is wanted. */
  .xm-hero__photo{aspect-ratio:4/3;min-height:clamp(200px,68vw,340px);max-height:44vh;
    order:-1;align-self:start;width:100%}
}

/* 5 · SCENE — headline row, then the photograph at full container width in ONE
   shared frame: 2:1 from 761px, 16:9 below */
.xm-scene{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(24px,4vw,64px);row-gap:14px;align-items:end}
.xm-scene__head{max-width:62ch;min-width:0}
.xm-scene__cap{margin-top:clamp(10px,1.2vw,16px);font-size:var(--t-lead);line-height:1.5;color:var(--body);max-width:52ch;text-wrap:pretty}
.xm-scene__go{white-space:nowrap;padding-bottom:6px;font-size:15px}
.xm-scene__media{grid-column:1/-1;aspect-ratio:2/1;margin-top:clamp(18px,2.2vw,30px)}
@media(min-width:761px){[data-ratio="16x9"] .xm-scene__media{aspect-ratio:16/9}}
@media(max-width:760px){
  .xm-scene{grid-template-columns:1fr}
  .xm-scene__go{white-space:normal;padding-bottom:0}
  .xm-scene__media{aspect-ratio:16/9;margin-top:16px}
}

/* 6 · TILES — one compact linked card per retailer: 4:3 frame, name, one line.
   Four columns, then three, then two. Same content sequence on every tile. */
.xm-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,18px);margin-top:clamp(24px,3vw,40px)}
@media(max-width:1080px){.xm-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.xm-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
.xm-tile{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;color:inherit;text-decoration:none;
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.xm-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-1)}
.xm-tile:hover h3{color:var(--accent)}
.xm-tile:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.xm-tile__b{padding:11px 13px 13px}
.xm-tile h3{font-family:var(--font-sans);font-weight:600;font-size:15px;line-height:1.2;color:var(--ink);margin:0 0 4px;overflow-wrap:anywhere}
.xm-tile p{font-size:12.5px;line-height:1.45;color:var(--body);margin:0}
.xm-tile[hidden]{display:none}

/* 7 · CARDS with actions (dining, experiences, salons): shared .dcard--static, 16:9 frame */
.xm-cards{margin-top:clamp(24px,3vw,40px)}
/* the shared .more-grid has no default column count (every instance must carry --N) and the
   page markup carries none, so the cards fell to one full-width column. Set it here. */
.more-grid.xm-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.more-grid.xm-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.more-grid.xm-cards{grid-template-columns:minmax(0,1fr)}}
.xm-sub{margin-top:clamp(28px,3.4vw,44px)}
.xm-sub__head{display:flex;align-items:baseline;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;margin-bottom:clamp(12px,1.4vw,16px)}
.xm-sub__head .t-h3{margin:0}
.xm-sub__intro{margin:-4px 0 clamp(12px,1.4vw,16px);font-size:14.5px;line-height:1.55;color:var(--body);max-width:60ch}
.dcard .dcard__b{padding:14px 15px 16px}
.dcard .xm-status{flex:0 0 auto;font-size:10.5px;font-weight:var(--fw-bold);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.dcard .xm-status--plain{color:var(--muted)}
.dcard h3{font-size:17px}
.xm-acts{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;font-size:13px;line-height:1.5}
/* D490 - dining price lines (section lead-in and per-restaurant).
   Type follows .xm-tile__price, which is this page's existing price treatment;
   only the spacing differs, because the card line sits between the name and the
   description rather than under one.

   flex:0 0 auto IS LOAD-BEARING. .dcard p carries flex:1 so the description
   stretches and pins .xm-acts to the bottom of the card. A second plain <p>
   would share that stretch and the price would float in a gap of its own, with
   the cards no longer agreeing on where the links sit. .xm-status above it
   carries the same guard for the same reason.

   Each option is nowrap so a two-option line breaks at the separator on a
   narrow screen and never mid-price ("2 courses / £24.95pp"). The separator is
   decorative and hidden from screen readers, which read the two options as the
   two phrases they are. */
.dcard__price{flex:0 0 auto;font-family:var(--font-sans);font-weight:600;font-size:14px;line-height:1.45;color:var(--ink);margin:0 0 7px}
.dcard__price .o{white-space:nowrap}
.dcard__sep{color:var(--muted)}
.xm-scene__price{font-family:var(--font-sans);font-weight:600;font-size:14px;color:var(--ink);margin-top:clamp(8px,1vw,12px)}

.xm-acts a{font-weight:600}

/* 8 · GIFT GUIDE — the shared .fbar/.fchip controls (selected state from the shared
   sheet, nothing overridden) over the tile grid; then the gift-card rows */
.xm-gifts__bar{margin-top:clamp(24px,3vw,40px)}
.xm-gifts__bar .fbar{margin-top:0}
.xm-gifts__bar .countline{margin-top:12px}
.xm-gifts .xm-tiles{margin-top:16px}

/* 9 · ROWS — one arrangement for every list row: title · description · action.
   Grid, so the stack at narrow widths is deliberate (title, then text, then action). */
.xm-rows{margin-top:clamp(28px,3.4vw,44px)}
.xm-rows .t-h3{margin-bottom:6px}
.xm-rows__intro{font-size:14.5px;line-height:1.55;color:var(--body);max-width:60ch;margin-bottom:12px}
.xm-rows .rows>.row{display:grid;grid-template-columns:minmax(160px,220px) minmax(0,1fr) auto;gap:6px clamp(16px,2vw,28px);padding:14px 2px;align-items:baseline}
.xm-rows .row .t{font-weight:600;color:var(--ink);font-size:15px;line-height:1.35}
.xm-rows .row .d{font-size:14px;color:var(--body);line-height:1.5;text-wrap:pretty}
.xm-rows .row .d .qtag{display:block;margin-top:3px;white-space:normal}
.xm-rows .row .a{font-size:14px;white-space:nowrap}
.xm-rows .rows>.row:last-child{border-bottom:0;padding-bottom:4px}
@media(max-width:760px){
  .xm-rows .rows>.row{grid-template-columns:1fr;gap:4px}
  .xm-rows .row .a{white-space:normal;margin-top:2px}
}

/* 10 · JOHN LEWIS — compact retail feature on the ecru field (round 5, Oct 2026).
   Two jobs only: the Christmas Shop (copy 40 / photograph 60), then What's on as a
   horizontal rail of one card per event, every session its own Eventbrite link.
   Replaces the round-4 teal band, Personal Styling row and floor guide. */
/* third-party link icon (box + arrow), the D303 outbound mark: every Eventbrite and
   johnlewis.com link on this page. Replaces the arrow glyph from the shared sheet; never type an arrow character. */
.xm-page .lnk-ext::after{content:"";display:inline-block;flex:none;width:.95em;height:.95em;margin-left:.45em;vertical-align:-.1em;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3h7v7'/%3E%3Cpath d='M21 3l-9 9'/%3E%3Cpath d='M19 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3h7v7'/%3E%3Cpath d='M21 3l-9 9'/%3E%3Cpath d='M19 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h5'/%3E%3C/svg%3E") center/contain no-repeat}
.xm-page #john-lewis.xm-field{scroll-margin-top:calc(var(--nav-h) + 24px - var(--xm-pt))} /* beats the shared #john-lewis event-page offset */
.xm-jl__shop{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:clamp(20px,3.6vw,56px);align-items:center}
.xm-jl__copy{min-width:0}
.xm-jl__copy .kicker{margin-bottom:clamp(12px,1.6vw,18px)}
.xm-jl__body{margin-top:clamp(12px,1.6vw,18px);font-size:clamp(16px,1.3vw,18px);line-height:1.5;color:var(--body);max-width:36ch;text-wrap:pretty}
.xm-page .xm-jl__copy .xm-jl__where{margin-top:1.75em;font-size:13px;line-height:1.45;color:var(--body)}  /* D481 - a location note, not a fourth line of the paragraph. At 390px the
     body copy is 16px and this was 14px sitting 8px under it, so it read as
     the sentence continuing. Three signals now separate it rather than one:
     size and space. --muted was tried and dropped: it measured 4.49:1 on
     this ecru field, which is below AA for normal text by a hair. The
     The selector is the design agent's from handover 03, which wins on
     specificity rather than on !important; the 13px is Guy's, since the brief
     was smaller type AND more space, and their version changed only space. */
.xm-jl__copy .btn{margin-top:clamp(16px,2vw,24px)}
.xm-jl__pic{margin:0;overflow:hidden;border-radius:var(--r-md);aspect-ratio:3/2;background:var(--surface-alt)}
.xm-jl__pic picture{display:block;width:100%;height:100%}
.xm-jl__pic img{display:block;width:100%;height:100%;object-fit:cover}
.xm-jl__pic.imgph{display:flex;align-items:center;justify-content:center;padding:16px}
.xm-jl__ph{font-family:ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.04em;color:var(--muted);text-align:center}
.xm-jl__ev{margin-top:clamp(26px,3.4vw,44px);padding-top:clamp(20px,2.6vw,30px);border-top:1px solid var(--line-strong)}
.xm-jl__evhead{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:clamp(14px,1.8vw,20px)}
.xm-jl__evhead h3{font-family:var(--font-sans);font-weight:600;font-size:clamp(19px,1.8vw,24px);line-height:1.2;color:var(--ink);margin:0}
.xm-jl__ctrl{display:flex;gap:8px;flex:none}
.xm-jl__ctrl[hidden]{display:none}
.xm-jl__arr{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink);background:transparent;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.xm-jl__arr svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.xm-jl__arr:hover:not(:disabled){background:var(--ink);color:#fff}
.xm-jl__arr:disabled{opacity:.35;cursor:default}
.xm-jl__rail{--gap:clamp(12px,1.6vw,20px);display:flex;gap:var(--gap);list-style:none;margin:0;padding:2px 0 6px; /* rail sits exactly on the content edges, so clipped cards align with the heading and the rule */
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.xm-jl__rail::-webkit-scrollbar{display:none}
.xm-jl__rail.is-drag{scroll-snap-type:none;cursor:grabbing;user-select:none}
.xm-jl__rail>li{flex:0 0 84%;scroll-snap-align:start;display:flex;min-width:0}
.xm-jl__rail>li:last-child{scroll-snap-align:end} /* the end of the rail must be a snap point or Next can't reach the last card */
@media(min-width:640px){.xm-jl__rail>li{flex-basis:calc((100% - 2 * var(--gap)) / 2.25)}}
@media(min-width:1024px){.xm-jl__rail>li{flex-basis:calc((100% - 3 * var(--gap)) / 3.2)}}
/* D480 - position:relative is load-bearing, not decoration. The .vh span inside
   each card's booking link is position:absolute. With no positioned ancestor it
   resolves against the initial containing block, which puts the spans belonging
   to cards 2, 3 and 4 at their static position inside the rail's scroll content,
   486px to 1151px out, ESCAPING the rail's overflow:auto. documentElement
   scrollWidth went to 962 against a 390 viewport and the whole page scrolled
   sideways on a phone. body.scrollWidth stayed 390 throughout, which is why a
   normal overflow hunt finds nothing. The shared .evcard already carries this
   declaration for the same reason; this card was the one that did not. */
.xm-evc{display:flex;flex-direction:column;width:100%;position:relative;background:var(--surface);border-radius:var(--r-md);overflow:hidden}
.xm-evc__pic{margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--surface-alt)}
.xm-evc__pic img{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
.xm-evc__body{display:flex;flex-direction:column;flex:1;padding:clamp(14px,1.6vw,20px) clamp(16px,1.8vw,22px) clamp(10px,1.2vw,14px)}
.xm-evc__cat{font-size:11px;font-weight:var(--fw-bold);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.xm-evc__nm{font-family:var(--font-sans);font-weight:600;font-size:17px;line-height:1.3;color:var(--ink);margin:0;text-wrap:balance;min-height:3.9em} /* fixed three-line title area: descriptions start level across the rail */
.xm-evc__terms{font-size:14px;line-height:1.5;color:var(--body);margin:8px 0 0;text-wrap:pretty}
.xm-evc__book{margin-top:auto;padding-top:12px}
.xm-evc__k{font-size:11px;font-weight:var(--fw-bold);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.xm-evc__ses{list-style:none;margin:0;padding:0}
/* D485 - THE DATES ARE INFORMATION; ONE ACTION PER CARD.
   Every occurrence URL in a multi-date Eventbrite series lands on the same page,
   titled "Multiple dates", with no date selected (verified in the browser on
   8 October against both Treetorial URLs and the 19 and 26 November Charlotte
   Tilbury URLs). Three Book buttons on a card therefore sent three clicks to one
   identical picker. The rows are plain text now and the card books once.
   The booking link takes the shared .lnk-ext:not(.btn):not(.pill) treatment
   UNALTERED - accent, 500, underlined - because here the whole of the visible
   text IS the link, so nothing has to out-specify it. Only the arrow is
   overridden, down from the page's .95em to match 14px text. */
.xm-evc__row{border-top:1px solid #ECE7DE;padding:9px 0;font-size:14px;line-height:1.4;color:var(--ink);font-variant-numeric:tabular-nums} /* one light rule above every row, the first included: never a second rule under the label */
.xm-evc__d{min-width:0}
.xm-page .xm-jl .xm-evc__go{display:inline-flex;align-items:center;margin-top:11px;padding:10px 0;min-height:44px;font-size:14px}
@media(pointer:fine){.xm-page .xm-jl .xm-evc__go{min-height:39px}} /* ~12% tighter with a mouse; touch keeps the 44px target */
.xm-page .xm-jl .xm-evc__go.lnk-ext::after{width:.82em;height:.82em;opacity:.7}
.xm-jl .upev-foot--note{margin:clamp(18px,2.2vw,26px) 0 0;padding-top:clamp(14px,1.6vw,18px);border-top:1px solid var(--line);font-size:13.5px;line-height:1.55;color:var(--body);max-width:none;padding-right:calc(100% - 72ch)} /* rule spans the full rail; the text keeps a 72ch measure */
.xm-page .xm-jl .upev-foot--note a.lnk-ext:not(.btn){color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.xm-page .xm-jl .upev-foot--note a.lnk-ext:not(.btn):hover{color:var(--accent)}
@media(max-width:760px){
  .xm-jl__shop{grid-template-columns:1fr}
  .xm-jl__pic{aspect-ratio:16/9}
}
@media(prefers-reduced-motion:reduce){.xm-jl__rail{scroll-behavior:auto}.xm-jl__arr{transition:none}}

/* 11 · OPENING HOURS, PARKING & ACCESS — the shared .qans/.qac fact cards kept in a
   single local column; the 4:5 film slot secondary beside them, below when narrow */
.xm-visit{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,34vw,440px);gap:clamp(20px,3vw,44px);align-items:start}
.xm-facts.qans{grid-template-columns:1fr;margin-top:0;gap:clamp(12px,1.6vw,16px)}
.xm-facts .qac{padding:clamp(16px,2vw,22px) clamp(16px,2vw,22px) clamp(14px,1.8vw,20px)}
.xm-facts .qac .big{margin-top:6px}
.xm-facts .qac .sub{margin-top:8px}
.xm-facts .qac .ln{padding-top:14px}
.xm-hours{display:grid;grid-template-columns:auto auto;gap:4px clamp(16px,2vw,28px);justify-content:start;margin:8px 0 0}
.xm-hours dt{font-size:14.5px;color:var(--body);line-height:1.5}
.xm-hours dd{font-family:var(--font-sans);font-weight:600;font-size:clamp(16px,1.6vw,18px);color:var(--ink);line-height:1.35;margin:0}
.xm-factlist{list-style:none;margin:8px 0 0;padding:0}
.xm-factlist li{font-size:14.5px;color:var(--body);line-height:1.5;padding:2px 0}
.xm-factlist li b{font-family:var(--font-sans);font-weight:600;color:var(--ink)}
/* Same one-pixel seam as the hero frame: a fractional box height leaves the
   absolutely positioned video a pixel short and the frame's own background
   shows through as a pale line. Nothing needs to be behind this film either. */
.xm-filmaside{position:relative;aspect-ratio:4/5;border-radius:var(--r-md);overflow:hidden;background:transparent}
.xm-filmaside>.imgph,.xm-filmaside>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.xm-filmaside .video-pause-ctrl{appearance:none;padding:0}
.xm-filmaside .video-pause-ctrl svg{display:block}
.xm-filmaside__cap{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;font-family:ui-monospace,Menlo,monospace;font-size:10.5px;letter-spacing:.03em;line-height:1.5;color:var(--body);background:rgba(255,255,255,.86);padding:8px 10px;border-radius:3px}
@media(max-width:900px){
  .xm-visit{grid-template-columns:1fr}
  .xm-filmaside{max-width:440px}
}

/* 12 · tail + mobile menu fallback (production js/nav-drawer.js is not in the pack) */
.xm-tail{padding-bottom:0}
.xm-menu{background:var(--surface);border-top:1px solid var(--line)}
.xm-menu nav{display:flex;flex-direction:column;padding:6px 0 14px}
.xm-menu a{padding:12px 0;font-size:15px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line)}
.xm-menu a.u{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:var(--fw-bold)}

/* 13 · ROUND 4 · supplied retailer photography in the tiles. Fashion exports are 4:5
   (800×1000 / 400×500), advent calendars 1:1 (800×800 / 400×400), ready-framed on the
   approved warm ivory: shown whole with object-fit:contain in a matching-ratio frame,
   no further crop, no filters. Uniform Buffalo keeps the labelled placeholder. */
.xm-tile__img{background:#F4F1EB}
.xm-tile__img>img{object-fit:contain;background:#F4F1EB}
.xm-tiles--advent{margin-top:clamp(14px,1.6vw,18px)}
.xm-tile__price{font-family:var(--font-sans);font-weight:600;font-size:14px;color:var(--ink);margin-top:6px}
/* card photograph links to the venue's Bond Street page; the text actions keep menus and booking */
a.xm-card__pic{display:block;color:inherit}
a.xm-card__pic>img{transition:transform var(--dur-fast) var(--ease)}
a.xm-card__pic:hover>img{transform:scale(1.03)}
a.xm-card__pic:focus-visible{outline:3px solid var(--focus);outline-offset:-3px;border-radius:0}

/* guest list: restaurant frames carry the tenant logo on the parchment ground (no photograph);
   the frame still links to the venue page. Logo bounded to the centre of the frame. */
a.xm-card__logo{background:var(--surface-alt)}
a.xm-card__logo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:9% 0;box-sizing:border-box;background:none;transition:transform var(--dur-fast) var(--ease)}
a.xm-card__logo:hover>img{transform:scale(1.03)}

/* D472 · DINING CARDS — venue photograph with the brand mark as a chip.
   The card picture used to be the venue logo in a 4:3 box, which told the visitor who
   it was and nothing about the table. The photograph is now the picture and the logo
   sits over it as a chip. The tenant logo files are 320×320 tiles on their own brand
   ground, not transparent wordmarks, so a letterbox pill renders the mark thumbnail
   size: the chip is a square badge on a white surround instead, which keeps the ground
   intact and reads on a pale flat-lay and a dark restaurant shot alike. The chip is
   decorative — the venue name is already the link's accessible name and the h3 below —
   so its <img> carries alt="". It is a grandchild of the anchor, so neither .ar>img nor
   the a.xm-card__pic:hover>img zoom touches it; only the photograph moves. */
/* .xm-card__chip now lives in bond-system.css as .card-chip - one owner. */

/* Countdown to Christmas: the beauty advent edit moved beneath the hero. Same field grammar as
   the campaign sections (kicker, two-line headline, caption), the compact advent tiles beneath. */
.xm-adventsec .xm-advent{margin-top:clamp(20px,2.6vw,32px);padding-top:0;border-top:0}
.xm-adventsec .xm-scene__cap{max-width:56ch}

/* HERO GROUND CONCEPTS — colours sampled from 02A Dress the tree (bauble gold #B0924C, needle
   green #494C20). Switched with data-hero on .xm-page; ecru stays the default until a pick is made.
   gold   · deep bauble gold field, ink type keeps AA (7.1:1 on #C9A85E; body copy set in ink)
   green  · the tree's needle green deepened to a solid fir field, white type (10.9:1)
   pale-green · the needle green lifted to the poster-tint lightness band, ink type */
[data-hero="gold"] .xm-hero{--xm-tint:#C9A85E}
[data-hero="gold"] .xm-hero .kicker,[data-hero="gold"] .xm-hero .xm-jump .kicker{color:var(--ink)}
[data-hero="gold"] .xm-hero__body{color:var(--ink)}
[data-hero="gold"] .xm-jump__row a{color:var(--ink);text-decoration-color:rgba(21,18,15,.45)}
[data-hero="gold"] .xm-hero__acts .btn--secondary{border-color:var(--ink)}
[data-hero="green"] .xm-hero{--xm-tint:#2F3A1E}
[data-hero="green"] .xm-hero .xm-hl,[data-hero="green"] .xm-hero .kicker,[data-hero="green"] .xm-hero__body,[data-hero="green"] .xm-jump__row a{color:#fff}
[data-hero="green"] .xm-jump__row a{text-decoration-color:rgba(255,255,255,.5)}
[data-hero="green"] .xm-jump__row a:hover{color:#fff;text-decoration-color:#fff}
[data-hero="green"] .xm-hero__acts .btn--primary{background:#fff;color:var(--ink);border-color:#fff}
[data-hero="green"] .xm-hero__acts .btn--secondary{color:#fff;border-color:#fff}
[data-hero="green"] .xm-jump{border-top-color:rgba(255,255,255,.3)}
[data-hero="green"] .xm-hero__photo{box-shadow:0 18px 38px rgba(0,0,0,.3)}
[data-hero="pale-green"] .xm-hero{--xm-tint:#DCE3CF}

/* teal · the site's own register colour (--accent #0C6B5E) as the hero ground: white type
   (6.4:1, the sanctioned white-on-teal pairing), inverted buttons as on the .r1 band */
[data-hero="teal"] .xm-hero{--xm-tint:var(--accent)}
[data-hero="teal"] .xm-hero .xm-hl,[data-hero="teal"] .xm-hero .kicker,[data-hero="teal"] .xm-hero__body,[data-hero="teal"] .xm-jump__row a{color:#fff}
[data-hero="teal"] .xm-jump__row a{text-decoration-color:rgba(255,255,255,.5)}
[data-hero="teal"] .xm-jump__row a:hover{color:#fff;text-decoration-color:#fff}
[data-hero="teal"] .xm-hero__acts .btn--primary{background:#fff;color:var(--ink);border-color:#fff}
[data-hero="teal"] .xm-hero__acts .btn--primary:hover{background:var(--surface-alt);color:var(--ink)}
[data-hero="teal"] .xm-hero__acts .btn--secondary{color:#fff;border-color:#fff}
[data-hero="teal"] .xm-hero__acts .btn--secondary:hover{background:#fff;color:var(--accent)}
[data-hero="teal"] .xm-jump{border-top-color:rgba(255,255,255,.3)}
[data-hero="teal"] .xm-hero__photo{box-shadow:0 18px 38px rgba(0,0,0,.22)}