/* Playfair Display — self-hosted variable font (OFL). Replaces the Google Fonts
   import from the handoff export: house rule, no CDN references at runtime. */
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400 700;font-display:swap;src:url("../assets/fonts/playfair-display-var.woff2") format("woff2")}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:400 700;font-display:swap;src:url("../assets/fonts/playfair-display-italic-var.woff2") format("woff2")}
/* ============ TOKENS ============ */
:root{
  --paper:#FFFFFF;
  --ink:#0A0A0A;
  --scarlet:#C8102E;
  --grey:#5F5F5F;
  --display:"Didot","Bodoni 72","Playfair Display",Georgia,serif; /* @kind font */
  --serif:Georgia,"Times New Roman",serif; /* @kind font */
  --sans:-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif; /* @kind font */
  --rule-thin:1px solid var(--ink);
  --rule-box:2px solid var(--ink);
  --rule-heavy:4px solid var(--ink);
  --wrap:1280px;
  --pad:48px;
  --navh:64px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:calc(var(--navh) + 16px)}
body{background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{display:block;width:100%;height:auto}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
::selection{background:var(--scarlet);color:#fff}
:focus-visible{outline:2px solid var(--scarlet);outline-offset:3px}

/* ============ AGATE / LABEL UTILITIES ============ */
.agate{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.agate.soft{color:var(--grey)}
/* WCAG 2.4.1 Bypass Blocks: keyboard users skip the masthead and nav.
   Off-screen until focused, then it lands top-left. */
.skip-link{position:fixed;left:8px;top:-60px;z-index:200;background:var(--ink);color:#fff;
  font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:12px 18px;border:2px solid var(--ink);transition:top .15s ease}
.skip-link:focus{top:8px}
/* main carries tabindex="-1" so the skip link moves FOCUS, not just the scroll
   position (WebKit otherwise leaves focus on the link). It is never in the tab
   sequence, so suppressing its ring removes no keyboard indicator — and the
   default ring would draw a scarlet box down the full height of the page,
   which the house rule forbids. Everything actually tabbable keeps :focus-visible. */
main[tabindex="-1"]:focus{outline:none}
/* Screen-reader-only heading: keeps the document outline complete where the
   design intentionally runs a section without a visible banner. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.slug{display:inline-block;font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;border:var(--rule-box);padding:7px 12px 6px}
h2.slug{margin:0;font-size:11.5px}
.slug.fill{background:var(--ink);color:#fff;border-color:var(--ink)}
.folio{color:var(--scarlet);font-family:var(--sans);font-weight:700;letter-spacing:.08em}

/* ============ TOP BAR ============ */
.topbar{border-bottom:var(--rule-box)}
.topbar .wrap{display:flex;justify-content:space-between;gap:20px;padding-top:12px;padding-bottom:12px}
.topbar span{white-space:nowrap}
.topbar .mid{flex:1;text-align:center}

/* ============ MASTHEAD ============ */
.masthead{padding:44px var(--pad) 30px;text-align:center;position:relative}
.masthead .flank{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:-6px}
/* Nameplate letterfit: uniform tracked-out caps (masthead convention) so every
   gap reads deliberate; the full stop is optically trimmed to match the letter
   gaps, and its trailing tracking is swallowed to keep the lockup centered. */
.nameplate{font-family:var(--display);font-weight:400;font-size:clamp(44px,10.5vw,148px);line-height:1.04;letter-spacing:.055em;margin-top:15px}
.nameplate .dot{color:var(--scarlet);margin-left:-.02em;margin-right:-.055em;letter-spacing:0}
/* small marks stay tight-set with the stop tucked in */
.brand>span,.masthead-int .mark>span,.colophon .mark>span{margin-left:-.06em;letter-spacing:0}
.masthead .undertitle{margin-top:14px}
.double-rule{border-top:var(--rule-heavy);border-bottom:var(--rule-thin);height:7px}

/* ============ NAV ============ */
.navstrip{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:var(--rule-box);transition:box-shadow .25s ease}
.navstrip.stuck{box-shadow:0 10px 30px rgba(10,10,10,.12)}
.navstrip .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--navh);gap:18px}
.navstrip .brand{font-family:var(--display);font-size:24px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease,visibility .3s;pointer-events:none}
.navstrip.stuck .brand{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.navlinks{display:flex;gap:28px}
.navlinks a{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}
.navstrip .btn{white-space:nowrap}
.navlinks a:hover{color:var(--scarlet);border-bottom-color:var(--scarlet)}
.btn{display:inline-block;font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;background:var(--ink);color:#fff;border:var(--rule-box);padding:13px 22px 12px;transition:background .2s ease,color .2s ease}
.btn:hover{background:var(--scarlet);border-color:var(--scarlet);color:#fff}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn.reverse{background:#fff;color:var(--ink);border-color:#fff}
.btn.reverse:hover{background:var(--scarlet);border-color:var(--scarlet);color:#fff}

/* ============ SECTION BANNERS ============ */
.banner{display:flex;align-items:center;gap:18px;border-top:var(--rule-heavy);padding-top:14px;margin-bottom:34px}
.banner .note{margin-left:auto;text-align:right}

/* ============ A1 FRONT PAGE ============ */
.front{padding-top:64px;padding-bottom:56px}
.front-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:56px;align-items:start}
.kicker-row{display:flex;align-items:center;gap:16px;margin-bottom:30px}
h1.lead,h1.pagehead,.headline,.backpage h2,.dept h3{overflow-wrap:break-word}
h1.lead{font-family:var(--display);font-weight:400;font-size:clamp(38px,8.6vw,132px);line-height:.95;letter-spacing:.005em;text-transform:uppercase}
.hl{display:block;overflow:hidden}
.hl-in{display:block;transform:translateY(108%);transition:transform 1s cubic-bezier(.19,1,.22,1)}
.in .hl-in{transform:none}
.dek{font-size:21px;line-height:1.55;margin-top:30px}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:26px;padding-top:14px;border-top:var(--rule-thin)}
.livedot{width:9px;height:9px;border-radius:50%;background:var(--scarlet);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:26px;margin-top:34px}
.textlink{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border-bottom:2px solid var(--ink);padding-bottom:4px}
.textlink:hover{color:var(--scarlet);border-bottom-color:var(--scarlet)}
.textlink .arrow{color:var(--scarlet)}

/* index box */
.indexbox{border:var(--rule-box);position:sticky;top:calc(var(--navh) + 24px)}
.indexbox h2{background:var(--ink);color:#fff;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;padding:12px 16px}
.indexbox ol{list-style:none}
.indexbox li{border-top:var(--rule-thin)}
.indexbox li:first-child{border-top:none}
.indexbox a{display:flex;align-items:baseline;gap:10px;padding:13px 16px;font-family:var(--sans);font-size:13.5px;font-weight:600;letter-spacing:.04em}
.indexbox a:hover{background:#F4F4F2;color:var(--scarlet)}
.indexbox .leader{flex:1;border-bottom:1px dotted var(--ink);transform:translateY(-4px)}
.indexbox .pg{font-weight:700}

/* briefly strip */
.briefly{border-top:var(--rule-box);padding:34px 0 8px}
.briefly-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.brief{border-top:3px solid var(--ink);padding-top:16px}
.brief h3{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--scarlet);margin-bottom:10px}
.brief p{font-size:16px}

/* ============ SECTIONS SHARED ============ */
section.sheet{padding-top:72px;padding-bottom:72px}
section.sheet + section.sheet{border-top:var(--rule-box)}
h2.headline{font-family:var(--display);font-weight:400;font-size:clamp(38px,4.8vw,64px);line-height:1.04}
.figure{border:var(--rule-box)}
/* Wide lead photograph. Colour stock sits on the section fronts the way a
   broadsheet runs colour on page one and mono inside. */
.leadfig{margin:0}
.leadfig .figure img,.leadfig .figure video{aspect-ratio:16/9;object-fit:cover;display:block;width:100%;height:auto}
.leadfig .figcap .capright{display:flex;align-items:baseline;gap:16px}
/* WCAG 2.2.2: moving content over five seconds needs a pause control. Revealed
   by JS, because with no JS the video never autoplays and the button is moot. */
.vidbtn{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;background:none;border:0;border-bottom:2px solid var(--ink);
  padding:0 0 2px;cursor:pointer;color:var(--ink)}
.vidbtn:hover{color:var(--scarlet);border-bottom-color:var(--scarlet)}
/* Figure inside the ink band. A black rule would vanish on black, so the frame
   is white here. Scarlet stays off borders, as everywhere else. */
.nightfig{margin-top:44px}
.nightfig img{border:2px solid #fff}
.nightfig .figcap{border-top:none}
.figcap{display:flex;justify-content:space-between;gap:14px;padding-top:10px}

/* ============ A2 MARKET REPORT ============ */
.market-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:44px}
.play{padding:0 44px}
.play:first-child{padding-left:0;border-right:var(--rule-thin)}
.play:last-child{padding-right:0}
.play .slug{margin:26px 0 18px}
.play .playdek{font-size:19px;line-height:1.55}
.svc{list-style:none;margin-top:22px}
.svc li{display:flex;justify-content:space-between;gap:14px;border-top:var(--rule-thin);padding:11px 2px;font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.03em}
.svc li:last-child{border-bottom:var(--rule-thin)}
.svc .tick{color:var(--scarlet);font-weight:700}

/* ============ B DEPARTMENTS ============ */
.dept-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;margin-top:44px}
.dept h3{font-family:var(--display);font-weight:400;font-size:clamp(26px,3.4vw,44px);line-height:1.06;margin:18px 0 14px}
.dept p{}
.dept .slugline{display:flex;align-items:center;gap:14px;margin-top:26px}
.dept .go{display:inline-block;margin-top:16px}
.dropcap::first-letter{font-family:var(--display);font-size:64px;line-height:.82;float:left;padding:8px 12px 0 0}
.dept-side .dept + .dept{margin-top:48px;padding-top:48px;border-top:var(--rule-box)}

/* ============ C1 METHOD ============ */
.method-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin-top:44px}
.step{border-top:3px solid var(--ink);padding-top:18px}
.step .num{font-family:var(--display);font-size:44px;line-height:1}
.step h3{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin:12px 0 10px}
.step p{font-size:15.5px}

/* ============ C2 INSIGHTS ============ */
.issue-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;margin-top:44px;align-items:start}
.tocbox{border:var(--rule-box)}
.tocbox a{display:flex;align-items:baseline;gap:12px;padding:20px 22px;border-top:var(--rule-thin)}
.tocbox a:first-child{border-top:none}
.tocbox a:hover .t{color:var(--scarlet)}
.tocbox .t{font-family:var(--display);font-size:22px;line-height:1.25;flex-shrink:1}
.tocbox .leader{flex:1;border-bottom:1px dotted var(--ink);transform:translateY(-5px);min-width:24px}

/* ============ ADVERTISEMENT ============ */
.adwrap{padding-bottom:72px}
.adlabel{text-align:center;margin-bottom:10px}
.adbox{border:var(--rule-box);text-align:center;padding:64px 32px}
.adbox .big{font-family:var(--display);font-size:clamp(40px,5.6vw,72px);line-height:1;text-transform:uppercase}
.adbox .big em{font-style:italic;text-transform:none}
.adbox p{margin:18px auto 26px;font-size:18px}

/* ============ D1 APPOINTMENT ============ */
.backpage{background:var(--ink);color:#fff;padding:96px 0}
.backpage .banner{border-top-color:#fff}
.backpage .slug{border-color:#fff;color:#fff}
.backpage h2.slug{margin:0;font-size:11.5px}
.backpage .slug.fill{background:#fff;color:var(--ink)}
.backpage h2{font-family:var(--display);font-weight:400;font-size:clamp(34px,6.4vw,92px);line-height:1.02}
.backpage .sub{font-size:20px;margin-top:24px;color:#EDEDED}
.backpage .cta-row{margin-top:40px}
.backpage .geo{margin-top:56px;color:#BDBDBD}

/* ============ COLOPHON ============ */
.colophon{border-top:var(--rule-heavy);padding:34px 0 60px}
.colophon .inner{border-top:var(--rule-thin);padding-top:26px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-top:6px}
.colophon p,.colophon a{font-family:var(--sans);font-size:13px;line-height:1.7;color:var(--grey)}
/* WCAG 1.4.1 Use of Colour: colophon links sit in running grey text at the
   same weight and colour, so an underline is the only thing that marks them
   as links. Without it "© 2026 · The Masthead" is indistinguishable from
   the copy around it. */
.colophon a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.colophon a:hover{color:var(--scarlet)}
.colophon .mark{font-family:var(--display);font-size:26px;color:var(--ink);margin-bottom:8px}
.colophon ul{list-style:none}

/* ============ REVEALS ============ */
[data-rv]{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.19,1,.22,1)}
[data-rv].in{opacity:1;transform:none}
/* WCAG 2.4.7 Focus Visible: a reveal that has not fired yet is opacity:0, and a
   keyboard user can reach a control inside it (during the 2.5s failsafe window,
   or on a #fragment jump before the observer fires). Focus must never land on an
   invisible control, so focus inside an unrevealed block forces it visible now. */
[data-rv]:focus-within{opacity:1;transform:none;transition:none}
.rule-x{transform-origin:left center;transform:scaleX(0);transition:transform 1.1s cubic-bezier(.19,1,.22,1)}
.rule-x.in{transform:none}

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  :root{--pad:28px}
  .front-grid{grid-template-columns:1fr;gap:44px}
  .indexbox{position:static}
  .dept-grid{grid-template-columns:1fr}
  .issue-grid{grid-template-columns:1fr}
  .method-grid{grid-template-columns:1fr 1fr;gap:32px}
  .navlinks{display:none}
  /* With the links gone the CTA is the only sized item in the strip, and it
     cannot wrap, so it needs to shrink or it pushes past the wrap padding. */
  .navstrip .btn{font-size:11px;letter-spacing:.1em;padding:11px 14px 10px}
}
@media (max-width:560px){
  /* The hidden brand still reserves its width, which squeezes the CTA off the
     edge. Drop it and centre the button instead. */
  .navstrip .brand{display:none}
  .navstrip .wrap{justify-content:center}
}
@media (max-width:720px){
  :root{--pad:20px}
  .topbar .wrap{flex-direction:column;gap:4px;align-items:center;text-align:center}
  .briefly-grid{grid-template-columns:1fr;gap:26px}
  .market-grid{grid-template-columns:1fr}
  .play{padding:0}
  .play:first-child{border-right:none;border-bottom:var(--rule-box);padding-bottom:40px}
  .play:last-child{padding-top:40px}
  .method-grid{grid-template-columns:1fr}
  .colophon .inner{grid-template-columns:1fr;gap:26px}
  .masthead .flank{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-rv],.hl-in,.rule-x{opacity:1!important;transform:none!important}
}

/* ============ INTERIOR PAGES (added with the interior build) ============ */
/* Interior masthead — the slim section header used on every page but the front */
.masthead-int{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:24px 0 16px}
.masthead-int .mark{font-family:var(--display);font-size:34px;line-height:1}
.masthead-int .section{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.masthead-int .vol{white-space:nowrap}

/* Page lead block */
.pagelead{padding-top:56px;padding-bottom:8px}
.pagelead .dek{margin-top:22px}
h1.pagehead{font-family:var(--display);font-weight:400;font-size:clamp(34px,6.2vw,88px);line-height:1}

/* Q&A — questions from owners; static rules, print-style */
.qa{margin-top:10px}
.qa-item{border-top:var(--rule-thin);padding:20px 0}
.qa-item:last-child{border-bottom:var(--rule-thin)}
.qa-item .q{font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:.06em;margin-bottom:8px}
.qa-item .a{font-size:16.5px}

/* Retail calendar band */
.calband{border:var(--rule-box);padding:30px 30px 26px;margin-top:44px}
.calband .calhead{display:flex;justify-content:space-between;gap:14px;margin-bottom:22px}
.cal{display:grid;grid-template-columns:repeat(12,1fr);border-top:var(--rule-heavy)}
.cal .m{border-left:var(--rule-thin);padding:10px 0 0 8px;font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.cal .m:first-child{border-left:none;padding-left:0}
.callanes{display:grid;grid-template-columns:repeat(12,1fr);gap:10px 0;margin-top:14px}
.season{grid-row:auto;border:var(--rule-box);padding:9px 10px;font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center;gap:8px;background:#fff}
.season .dot{width:7px;height:7px;border-radius:50%;background:var(--scarlet);flex:none}

/* Booking slip (contact form) */
.slip{border:var(--rule-box);padding:38px;max-width:760px}
.slip .fld{margin-bottom:24px}
.slip label.top{display:block;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:9px}
.slip input[type=text],.slip input[type=email],.slip textarea{width:100%;border:var(--rule-box);background:#fff;padding:13px 14px;font-family:var(--serif);font-size:16px;color:var(--ink);border-radius:0;-webkit-appearance:none}
.slip textarea{min-height:120px;resize:vertical}
/* WCAG 1.4.3: the UA default placeholder colour is roughly #A9A9A9, which is
   2.35:1 on white. Grey is 6.39:1. opacity:1 is needed for Firefox. */
.slip input::placeholder,.slip textarea::placeholder{color:var(--grey);opacity:1}
.pillset{display:flex;flex-wrap:wrap;gap:10px}
.pill{position:relative;border:var(--rule-box);padding:10px 16px;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;user-select:none}
.pill input{position:absolute;opacity:0;pointer-events:none}
.pill:has(input:checked){background:var(--ink);color:#fff}
.pill:hover{color:var(--scarlet)}
/* the input is visually hidden, so the label must show the focus ring */
.pill:focus-within{outline:2px solid var(--scarlet);outline-offset:3px}
.pill:has(input:checked):hover{color:#fff}
/* The checked state is carried entirely by :has(), and the real radio is
   opacity:0 — so a browser without :has() (Firefox <121, Safari <15.4) shows NO
   visible selection at all. Screen readers are unaffected (the input is real and
   its checked state is exposed), but sighted users would be stranded. Where
   :has() is missing, put the native radio back. */
@supports not selector(:has(*)){
  .pill input{position:static;opacity:1;pointer-events:auto;margin-right:9px;vertical-align:middle}
}
.slipnote{margin-top:16px;min-height:1.4em}
/* Field-level error. Text carries the message, so it never depends on colour
   alone (1.4.1). Scarlet is used as TEXT here, never as a border. An invalid
   field thickens its existing black rule instead. */
.fld-err{font-family:var(--sans);font-size:12.5px;letter-spacing:.04em;color:var(--scarlet);margin-top:7px;min-height:0}
.fld-err:empty{display:none}
.slip [aria-invalid="true"]{border-width:3px}

/* Article */
.art-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:56px;align-items:start}
.art-body p{font-size:18px;line-height:1.7;margin-bottom:1.25em}
.art-body h3{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin:34px 0 12px}
.pullquote{font-family:var(--display);font-size:clamp(24px,2.6vw,32px);line-height:1.3;border-top:var(--rule-heavy);border-bottom:var(--rule-thin);padding:24px 2px;margin:34px 0}
.notebox{border:var(--rule-box);position:sticky;top:calc(var(--navh) + 24px)}
.notebox h3{background:var(--ink);color:#fff;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;padding:12px 16px}
.notebox .inner{padding:18px 16px}
.notebox .inner p{font-size:15px;margin-bottom:14px}
.notebox .inner p:last-child{margin-bottom:0}
.notebox b.term{font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase}

/* Cross-reference line between sections */
.crossline{display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:center;border-top:var(--rule-thin);margin-top:46px;padding-top:20px}

/* Compact back page for interior pages */
.backpage.compact{padding:72px 0}
.backpage.compact h2{font-size:clamp(36px,4.6vw,64px)}

/* Interior responsive */
@media (max-width:1080px){
  .art-grid{grid-template-columns:1fr}
  .notebox{position:static}
}
@media (max-width:720px){
  .masthead-int{flex-wrap:wrap;gap:8px 18px}
  /* WCAG 1.4.10 Reflow: the volume line is nowrap so it stays on one line in
     the desktop lockup. On the long department strings ("The department for
     showrooms & online furniture") that forced the page to 455px at a 320px
     viewport. Let it wrap once the strip has already gone multi-line. */
  .masthead-int .vol{white-space:normal}
  .cal{display:none}
  .callanes{grid-template-columns:1fr;gap:10px}
  .season{grid-column:1/-1 !important}
  .slip{padding:24px}
}