/* Bond Street Christmas 2026 · temporary homepage hero and "This Christmas" rail (xh) · round 2
   Rebased from the Bond Street turns 10 hero (e10h). Live from LAUNCH to CUTOFF (see the guard),
   then removed with the markup and xh-home-hero.js.
   Round 2: rail on Bond Street teal (--accent #0C6B5E), manual tabs only (no auto-rotation,
   no rail pause), four stories, the approved homepage type reveal on "Christmas".
   Every rule is written at #xh-hero specificity with literal weights and font stacks
   (index.html's inline .wrap resets vertical padding, e10h D468). */

#xh-hero{--xh-ink:var(--ink,#15120f);--xh-body:var(--body,#46413a);--xh-line:var(--line,#e3ddd0);--xh-teal:#0C6B5E;--xh-teal-deep:#0a564b;--xh-ecru:#EFE7DD;
  --xh-sans:"Gotham","Montserrat",Helvetica,Arial,sans-serif;--xh-punch:"Escrow Banner",Georgia,"Times New Roman",serif;
  background:var(--xh-ecru);color:var(--xh-body);font-family:var(--xh-sans)}
#xh-hero[hidden]{display:none}
#xh-hero *,#xh-hero *::before,#xh-hero *::after{box-sizing:border-box}
#xh-hero p,#xh-hero h1,#xh-hero h2,#xh-hero ol,#xh-hero figure{margin:0}
#xh-hero .vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
#xh-hero a:focus-visible,#xh-hero button:focus-visible{outline:3px solid var(--focus,#1457c8);outline-offset:3px}

/* 1 · hero: campaign statement left, the Christmas film right */
#xh-hero .xh-grid{display:grid;grid-template-areas:"copy" "media";grid-template-columns:minmax(0,1fr);row-gap:24px;padding-top:clamp(26px,4vw,56px);padding-bottom:clamp(26px,4vw,56px)}
#xh-hero .xh-copy{grid-area:copy;min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:stretch;padding:0}
#xh-hero .xh-copy>*{margin-left:0;padding-left:0;text-indent:0}
#xh-hero .xh-media{grid-area:media;min-width:0;position:relative}
#xh-hero .xh-label{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;line-height:1.4;color:var(--xh-ink)}
#xh-hero .xh-title{margin-top:clamp(12px,1.6vw,20px);font-family:var(--xh-sans);font-weight:300;text-transform:uppercase;font-size:clamp(42px,5.6vw,80px);line-height:.96;letter-spacing:-.015em;color:var(--xh-ink)}
#xh-hero .xh-title .a,#xh-hero .xh-title .b{display:block}
#xh-hero .xh-title .b{font-family:var(--xh-punch);font-style:italic;font-weight:400;letter-spacing:0;padding-bottom:.04em}
/* the approved homepage reveal (index.html twClip/twWord): a width wipe on a clipping span.
   The line keeps its height at width 0, so WHERE / LIVES never move. */
#xh-hero .xh-clip{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;max-width:100%}
#xh-hero .xh-clip.is-armed{width:0}
#xh-hero .xh-word{display:inline-block;padding-right:.1em}
#xh-hero .xh-intro{margin-top:clamp(16px,2vw,24px);font-size:18px;line-height:1.55;color:var(--xh-body)}
#xh-hero .xh-intro .ln{display:block}
/* below 400px each sentence takes its own line, so nothing breaks mid-phrase */
@media(max-width:399px){#xh-hero .xh-intro .s{display:block}}
@media(min-width:400px){#xh-hero .xh-intro .ln{white-space:nowrap}}
#xh-hero .xh-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,2.4vw,28px)}
#xh-hero .xh-btn{font-family:var(--xh-sans);font-weight:500;font-size:16px;line-height:1.1;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border:1.5px solid var(--xh-ink);border-radius:6px;text-decoration:none;transition:background-color .18s ease,color .18s ease,border-color .18s ease}
#xh-hero .xh-btn--primary{background:var(--xh-ink);color:#fff}
#xh-hero .xh-btn--secondary{background:transparent;color:var(--xh-ink)}
#xh-hero .xh-btn:hover{background:var(--xh-teal);border-color:var(--xh-teal);color:#fff}

/* the film is supplied 4:5 portrait and is always shown whole: no crop at any width */
#xh-hero .xh-film{position:relative;display:block;border-radius:10px;overflow:hidden;background:#d9d2c6;aspect-ratio:4/5;width:100%;max-width:520px;margin-inline:auto}
#xh-hero .xh-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
#xh-hero .xh-vbtn{position:absolute;right:12px;bottom:12px;z-index:2;width:44px;height:44px;border-radius:50%;border:0;background:rgba(21,18,15,.62);color:#fff;display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer}
#xh-hero .xh-vbtn[hidden]{display:none}
#xh-hero .xh-vbtn:hover{background:rgba(21,18,15,.82)}
#xh-hero .xh-vbtn:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px rgba(21,18,15,.62)}
#xh-hero svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#xh-hero .ico-play{display:none}
#xh-hero .is-paused .ico-pause{display:none}
#xh-hero .is-paused .ico-play{display:block}

@media(min-width:900px){
  /* a fixed-width 4:5 column sets the hero height; the statement centres beside it */
  #xh-hero .xh-grid{grid-template-columns:minmax(0,1fr) clamp(340px,34vw,460px);grid-template-areas:"copy media";column-gap:clamp(32px,4.5vw,64px);align-items:center}
  #xh-hero .xh-film{max-width:none}
}

/* 2 · "This Christmas" rail: Bond Street teal, manual tabs, one story at a time.
   One grid from 760px: column A (112px) holds the label and the thumbnail, column B holds the
   tabs and the story. The first tab, kicker, headline, body and CTA share one left edge. */
#xh-hero .xh-strip{background:var(--xh-teal);color:#fff;--xh-colA:140px;--xh-gut:clamp(24px,3vw,32px)}
#xh-hero .xh-strip__grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"label" "tabs" "list";row-gap:10px;padding-top:18px;padding-bottom:22px}
#xh-hero .xh-strip__label{grid-area:label;font-family:var(--xh-sans);font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;line-height:1.4;color:#fff}
#xh-hero .xh-tabs{grid-area:tabs;min-width:0;display:flex;gap:clamp(20px,2.6vw,30px);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;box-shadow:inset 0 -1px 0 rgba(255,255,255,.22);margin-bottom:12px}
#xh-hero .xh-tabs[hidden]{display:none}
#xh-hero .xh-tabs::-webkit-scrollbar{display:none}
/* one weight in every state; selection is colour plus a 2px rule on the shared baseline */
#xh-hero .xh-tab{position:relative;flex:none;display:flex;align-items:flex-end;min-height:44px;padding:8px 0 12px;border:0;background:none;color:rgba(255,255,255,.84);font:500 14px/1.2 var(--xh-sans);text-align:left;white-space:nowrap;cursor:pointer}
#xh-hero .xh-tab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:transparent}
#xh-hero .xh-tab:hover{color:#fff}
#xh-hero .xh-tab[aria-selected="true"]{color:#fff}
#xh-hero .xh-tab[aria-selected="true"]::after{background:#fff}
#xh-hero .xh-strip :focus-visible{outline:3px solid #fff;outline-offset:3px}
#xh-hero .xh-tab:focus{outline:none}
#xh-hero .xh-tab:focus-visible{outline:2px solid #fff;outline-offset:-2px;border-radius:2px}

/* scripts off: the stories are a plain static list */
#xh-hero .xh-list{grid-area:list;list-style:none;padding:0;display:grid;gap:20px 32px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
/* scripts on: every story shares one cell and stretches to it, so the rail keeps one height
   and the CTA (pinned to the foot of the copy column) sits at one position in every state */
#xh-hero .xh-strip.is-live .xh-list{grid-template-columns:minmax(0,1fr)}
#xh-hero .xh-strip.is-live .xh-item{grid-area:1/1;visibility:hidden;opacity:0;transition:opacity .16s ease;display:flex}
#xh-hero .xh-strip.is-live .xh-item.is-on{visibility:visible;opacity:1}
#xh-hero .xh-item{min-width:0}
#xh-hero .xh-link{flex:1;display:grid;grid-template-columns:84px minmax(0,1fr);grid-template-rows:minmax(0,1fr);column-gap:16px;align-items:stretch;color:#fff;text-decoration:none;border-radius:6px}
#xh-hero .xh-pic{display:block;align-self:start;width:100%;aspect-ratio:1;border-radius:6px;overflow:hidden;background:var(--xh-teal-deep)}
#xh-hero .xh-pic img{display:block;width:100%;height:100%;object-fit:cover}
#xh-hero .xh-b{display:flex;flex-direction:column;min-width:0}
#xh-hero .xh-k{display:block;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1;color:#fff}
#xh-hero .xh-t{display:block;margin-top:6px;font-size:19px;font-weight:500;line-height:1.25;color:#fff;text-wrap:balance}
#xh-hero .xh-d{display:block;margin-top:7px;font-size:16px;line-height:1.45;min-height:2.9em;color:#fff;text-wrap:pretty}
#xh-hero .xh-go{display:inline-flex;align-self:flex-start;margin-top:auto;padding-top:9px;font-size:16px;font-weight:500;line-height:1.3;color:#fff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.6)}
#xh-hero .xh-go::after{content:"→";margin-left:.4em;text-decoration:none}
#xh-hero .xh-link:hover .xh-go{text-decoration-color:#fff}
#xh-hero .xh-link:hover .xh-t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}

/* phones: all four tabs visible as a 2 x 2 grid (no tab hidden off-screen); the story keeps
   the thumbnail beside the kicker and headline, then runs body and CTA at full width */
@media(max-width:359px){#xh-hero .xh-tab{font-size:13px}}
@media(max-width:559px){
  #xh-hero .xh-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;overflow:visible;box-shadow:none;margin-bottom:14px}
  #xh-hero .xh-tab{white-space:normal;box-shadow:inset 0 -1px 0 rgba(255,255,255,.22)}
  #xh-hero .xh-tabs{align-items:stretch}
  #xh-hero .xh-link{grid-template-columns:72px minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr);grid-template-areas:"pic k" "pic t" "d d" "go go";column-gap:14px}
  #xh-hero .xh-b{display:contents}
  #xh-hero .xh-pic{grid-area:pic;width:72px}
  #xh-hero .xh-k{grid-area:k;align-self:start}
  #xh-hero .xh-t{grid-area:t;align-self:start}
  #xh-hero .xh-d{grid-area:d;margin-top:12px;font-size:15px;min-height:0}
  #xh-hero .xh-go{grid-area:go;align-self:end}
}
@media(min-width:760px){
  #xh-hero .xh-strip__grid{grid-template-columns:var(--xh-colA) minmax(0,1fr);grid-template-areas:"label tabs" "list list";column-gap:var(--xh-gut);row-gap:22px;align-items:end;padding-top:14px;padding-bottom:24px}
  #xh-hero .xh-strip__label{padding-bottom:12px;white-space:nowrap}
  #xh-hero .xh-tabs{margin-bottom:0;gap:clamp(18px,2.4vw,30px)}
  #xh-hero .xh-link{grid-template-columns:var(--xh-colA) minmax(0,1fr);column-gap:var(--xh-gut)}
  #xh-hero .xh-pic{width:104px}
  #xh-hero .xh-t{font-size:21px}
}
/* from 900px the measure holds every authored line, so the breaks are fixed, not browser-made */
@media(min-width:900px){
  #xh-hero .xh-d .ln{display:block;white-space:nowrap}
  #xh-hero .xh-t{white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){
  #xh-hero .xh-clip,#xh-hero .xh-clip.is-armed{width:auto!important;transition:none!important}
  #xh-hero .xh-strip.is-live .xh-item,#xh-hero .xh-btn{transition:none}
}
@media print{#xh-hero .xh-tabs,#xh-hero .xh-vbtn{display:none}}