/* Boyer Audio — site-level components. boyer.css is the house system;
   this file adds what the multi-page site needs on top of it. */

/* ── work-in-progress markers ─────────────────────────────────────────
   Anything that still needs Guillaume or photography is marked so it
   cannot be mistaken for finished. Delete these rules when the site is
   ready to ship and any leftovers will look obviously wrong. */
.todo{
  color:var(--accent);
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;line-height:1.7;
  border-left:2px solid var(--accent);padding-left:14px;
}
.plate-todo{
  position:relative;display:grid;place-items:center;
  border:1px dashed var(--line);border-radius:2px;
  background:repeating-linear-gradient(-45deg,transparent 0 14px,rgba(218,145,109,.06) 14px 15px),var(--bg-2);
  width:100%;
}
.plate-todo span{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-dim);padding:12px 16px;text-align:center;
}
.plate-todo.frame{box-shadow:none}

/* ── brand cards (home, brands index) ─────────────────────────────── */
.bgrid{row-gap:clamp(40px,5vw,72px)}
.bcard{grid-column:span 12;text-decoration:none;color:inherit;display:block}
@media(min-width:700px){.bcard{grid-column:span 6}}
@media(min-width:1100px){.bcard{grid-column:span 4}}
.bcard .frame img{width:100%;height:auto;display:block}
.bcard .lead{font-size:clamp(26px,2.4vw,36px);margin-top:20px}
.bcard-place{
  font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-dim);margin:8px 0 0;
}
.bcard-intro{color:var(--ink-soft);max-width:38ch;margin:12px 0 0;font-size:clamp(15px,1.05vw,17px);line-height:1.6}
.bcard .frame,.bcard .plate-todo{transition:transform .7s var(--silk)}
@media(hover:hover){.bcard:hover .frame,.bcard:hover .plate-todo{transform:translateY(-4px)}}

/* the strip of other brands at the foot of a brand page */
.bstrip-wrap{padding-block:clamp(40px,5vw,80px) clamp(60px,8vw,120px)}
.bstrip{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-soft);border-block:1px solid var(--line-soft);margin-top:24px}
@media(min-width:700px){.bstrip{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){.bstrip{grid-template-columns:repeat(6,1fr)}}
.bstrip-item{background:var(--bg);padding:clamp(20px,2.4vw,34px) clamp(14px,1.6vw,22px);text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:6px;transition:background .5s var(--silk)}
.bstrip-name{font-family:var(--display);font-weight:300;font-size:clamp(19px,1.6vw,24px);line-height:1.1}
.bstrip-place{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
@media(hover:hover){.bstrip-item:hover{background:var(--bg-2)}}

/* ── news cards ───────────────────────────────────────────────────── */
.ngrid{row-gap:clamp(40px,5vw,72px)}
.ncard{grid-column:span 12;text-decoration:none;color:inherit}
@media(min-width:760px){.ncard{grid-column:span 6}}
@media(min-width:1100px){.ncard{grid-column:span 4}}
.ncard .frame img{width:100%;height:auto;display:block}
.ncard .cap{margin-top:18px}
.ncard .lead{margin-top:10px}

/* ── dealers ──────────────────────────────────────────────────────── */
.dealers{padding-block:clamp(20px,3vw,50px) clamp(80px,10vw,150px);align-items:start}
.dmap-wrap{position:sticky;top:110px}
.dmap{position:relative;color:var(--ink);opacity:.92}
html[data-theme="dark"] .dmap{opacity:.85}
.dmap > svg:first-child,.dmap-outline > svg{width:100%;height:auto;display:block;color:var(--bg-2);filter:drop-shadow(0 1px 0 var(--line-soft))}
html[data-theme="dark"] .dmap > svg:first-child,html[data-theme="dark"] .dmap-outline > svg{color:#1C1917}
.dmap-pins{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pin{cursor:pointer}
.pin circle.core{fill:var(--copper);stroke:var(--bg);stroke-width:2}
.pin circle.halo{fill:none;stroke:var(--copper);stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:center;animation:pulse 3.2s ease-out infinite}
.pin{transition:opacity .35s var(--silk)}
.pin circle.hit{fill:transparent}
.pin.is-dim{opacity:.22}
/* one dealer in focus: the rest of the map steps back to 15% */
.dmap-pins.has-hot .pin:not(.is-hot){opacity:.15}
/* the dealer in focus grows to twice its size on the map */
.pin .pbody{transform-box:view-box;transform-origin:0 0;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.pin.is-hot .pbody{transform:scale(2)}
.dmap-pins.has-hot .pin.is-hot{opacity:1}
/* the name tag — instant, no browser tooltip delay */
.dtip{position:absolute;z-index:5;pointer-events:none;transform:translate(-50%,calc(-100% - 10px));
  background:var(--ink);color:var(--bg);padding:8px 12px 9px;border-radius:3px;white-space:nowrap;
  display:flex;flex-direction:column;gap:2px;align-items:center;opacity:0;visibility:hidden}
.dtip.on{opacity:1;visibility:visible}
.dtip b{font-family:var(--sans);font-weight:600;font-size:13.5px;line-height:1.2}
.dtip span{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.62}
.dtip::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;background:inherit;transform:translateX(-50%) rotate(45deg);border-radius:1px}
.pin.is-hot circle.core{fill:var(--copper-bright)}
@keyframes pulse{0%{transform:scale(.6);opacity:.75}70%{opacity:0}100%{transform:scale(2.6);opacity:0}}
@media(prefers-reduced-motion:reduce){.pin circle.halo{animation:none;opacity:.35;transform:scale(1.6)}}
.dtools{display:flex;flex-direction:column;gap:18px;margin-bottom:22px}
.dsearch{
  font-family:var(--sans);font-size:17px;padding:16px 0;width:100%;
  background:none;border:0;border-bottom:1px solid var(--line);color:var(--ink);outline:none;
  transition:border-color .5s var(--silk);
}
.dsearch:focus{border-bottom-color:var(--accent)}
.dsearch::placeholder{color:var(--ink-dim)}
.dchips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  font-family:var(--mono);font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:none;color:var(--ink-soft);
  cursor:pointer;transition:border-color .4s var(--silk),color .4s var(--silk),background .4s var(--silk);
}
.chip.is-on{border-color:var(--accent);color:var(--accent)}
@media(hover:hover){.chip:hover{border-color:var(--ink)}}
.dlist{display:flex;flex-direction:column}
.dealer{
  display:grid;grid-template-columns:1fr;gap:6px 28px;
  padding-block:clamp(22px,2.6vw,34px);border-top:1px solid var(--line-soft);
  transition:opacity .4s var(--silk);
}
@media(min-width:760px){.dealer{grid-template-columns:1.1fr 1fr}}
.dealer:last-child{border-bottom:1px solid var(--line-soft)}
/* the same light rising off the rule as the index rows: brightest along
   the line beneath the dealer, falling away upward and to both sides,
   reaching nothing well inside the box so no edge ever shows */
.dealer{position:relative}
.dealer > *{position:relative;z-index:1}
.dealer::before{
  content:"";position:absolute;inset:0 0 -1px;z-index:0;pointer-events:none;
  background:radial-gradient(64% 132% at 50% 100%,
    rgba(224,155,114,.30) 0%,   rgba(223,152,112,.256) 12%,
    rgba(220,145,105,.199) 24%, rgba(215,135,97,.143) 36%,
    rgba(208,123,87,.095) 48%,  rgba(201,112,78,.056) 60%,
    rgba(195,102,70,.027) 72%,  rgba(190,95,65,.008) 85%,
    rgba(188,92,63,0) 100%);
  opacity:0;transition:opacity .75s var(--silk);will-change:opacity;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%),
                     linear-gradient(0deg,#000 0,#000 62%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%),
             linear-gradient(0deg,#000 0,#000 62%,transparent 100%);
  mask-composite:intersect;
}
html[data-theme="dark"] .dealer::before{
  background:radial-gradient(64% 132% at 50% 100%,
    rgba(238,180,142,.26) 0%,   rgba(236,175,137,.222) 12%,
    rgba(233,167,129,.172) 24%, rgba(227,155,118,.124) 36%,
    rgba(219,140,105,.082) 48%, rgba(211,126,93,.048) 60%,
    rgba(204,114,83,.023) 72%,  rgba(199,106,77,.007) 85%,
    rgba(196,102,74,0) 100%);
}
.dealer.is-hot::before{opacity:1}
.dname{font-family:var(--display);font-weight:300;font-size:clamp(24px,2.2vw,32px);line-height:1.1;margin:0}
.dname .prem{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);vertical-align:middle;margin-left:10px}
.daddr{color:var(--ink-soft);margin:4px 0 0;font-size:15px;line-height:1.55}
.dbrands{display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 0 0}
.dbrands span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.dcontact{display:flex;flex-direction:column;gap:6px;justify-content:center;font-size:15px}
.dcontact a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .4s var(--silk)}
@media(hover:hover){.dcontact a:hover{border-color:var(--accent)}}
.dealer.is-todo .dname{color:var(--accent)}
.dempty{padding:40px 0;color:var(--ink-dim)}
.home-dealers{padding-block:clamp(30px,4vw,65px)}
.home-dealers .dmap-wrap{position:static}
/* on the home page the map runs a little bigger than its column, and the
   land is a shade darker so it carries against the cream */
@media(min-width:900px){.home-dealers .dmap{width:110%;margin-left:-10%}}
.home-dealers .dmap-outline > svg{color:#E5DED0;filter:drop-shadow(0 1px 0 rgba(26,23,21,.14))}
.home-dealers .btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:32px}
.btn-copper{border-color:var(--accent);color:var(--accent)}
@media(hover:hover) and (pointer:fine){.btn-copper:hover{border-color:var(--copper);color:var(--copper-dark);gap:18px}}

/* ── the hero: the picture, and the story ─────────────────────────────
   The left half of the screen is the photograph, full bleed, black and
   white until the cursor is over it. The right half is the story: the
   mark at the top, then the latest headline, its blurb and a copper
   button, and at the foot, EXPLORE and the pager. */
:root{--hpad:clamp(40px,4.5vw,80px)}
.h2{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:100vh;min-height:100svh;background:var(--bg)}
.h2-img{position:relative;overflow:hidden;background:var(--bg-2);cursor:pointer}
.hslide{position:absolute;inset:0;opacity:0;transition:opacity 1.3s var(--silk);display:block}
.hslide.is-on{opacity:1}
.hslide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 28%;display:block}
/* black and white at rest; colour when the cursor is over the picture. A
   story with its own black-and-white grade lays that on top; otherwise the
   colour image is desaturated in place. */
.hs-c{filter:grayscale(1);transition:filter .7s var(--silk)}
.hslide.keep .hs-c{filter:none}   /* a story whose picture stays in colour */
/* the first picture arrives out of focus and settles — a lens pulling
   focus, not a reveal. Only on landing; later slides cross-fade as usual. */
.hslide.focus-in .hs-c{filter:blur(14px);transform:scale(1.04)}
.hslide.focus-in.is-sharp .hs-c{filter:none;transform:none;transition:filter 2.4s cubic-bezier(.3,.1,.1,1),transform 2.8s cubic-bezier(.3,.1,.1,1)}
.hslide.focus-in:not(.keep).is-sharp .hs-c{filter:grayscale(1)}
@media(prefers-reduced-motion:reduce){.hslide.focus-in .hs-c{filter:none;transform:none}.hslide.focus-in:not(.keep) .hs-c{filter:grayscale(1)}}
.hs-bw{opacity:1;transition:opacity .7s var(--silk)}
/* under the cursor the picture comes up in colour and eases in a touch
   — so a story that is already in colour still answers the hover */
.hs-c{transition:filter .7s var(--silk),transform 1.4s var(--silk);transform-origin:50% 50%}
@media(hover:hover){
  .h2-img:hover .hs-c{filter:none}
  .h2-img:hover .hs-bw{opacity:0}
  .h2-img:hover .hslide.is-on .hs-c{transform:scale(1.035);filter:none;transition:filter .7s var(--silk),transform 1.4s var(--silk)}
}
/* …and while the cursor is on the READ THE STORY button (home.js) */
.h2-img.is-colour .hs-c{filter:none}
.h2-img.is-colour .hs-bw{opacity:0}
.h2-img.is-colour .hslide.is-on .hs-c{transform:scale(1.035);filter:none;transition:filter .7s var(--silk),transform 1.4s var(--silk)}
.h2-side{
  display:grid;grid-template-rows:auto 1fr auto;
  padding:var(--ntop) calc(var(--gut) + 2px) clamp(36px,5vh,56px) var(--hpad);   /* the right edge is the burger's right edge */
}
/* the ring's ink starts ~10% into its canvas on each side; land the ink
   on the content edge and its top on the burger's top */
.h2-mark{--size:clamp(120px,10vw,160px);justify-self:start;align-self:start;margin:calc(var(--size) * -.1) 0 0 calc(var(--size) * -.105)}
.h2-story{align-self:center;padding-block:clamp(32px,5vh,64px)}
.hh-heads{display:grid}
.hhead{grid-area:1/1;pointer-events:none;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(22px,3vh,36px)}
.hhead.is-on{pointer-events:auto}
.hh-date{font-family:var(--mono);font-weight:600;font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-dim);margin:0;line-height:1.4}
/* the measure is set in the headline's own ems, so the three stories break
   into the same number of lines at every window width */
.hh-title{margin:0;max-width:12.4em;font-family:var(--display);font-weight:700;font-size:clamp(34px,3.7vw,86px);line-height:1.03;letter-spacing:-.022em;color:var(--ink)}
.hh-title a{color:inherit;text-decoration:none}
.hh-sf{margin:0;color:var(--ink-soft);font-size:clamp(17px,1.25vw,20px);line-height:1.55;max-width:42ch}
.hhead .btn-sheen{margin-top:clamp(4px,1vh,12px)}
/* each line drops in from above, a beat behind the one before */
.hhead > *{opacity:0;transform:translateY(-22px);
  transition:opacity .62s var(--silk),transform .8s cubic-bezier(.2,.7,.2,1)}
.hhead > .btn-sheen{transition:opacity .62s var(--silk),transform .8s cubic-bezier(.2,.7,.2,1),gap .35s var(--ease)}
.hhead.is-on > *{opacity:1;transform:none}
.hhead.is-on > :nth-child(2){transition-delay:.07s}
.hhead.is-on > :nth-child(3){transition-delay:.14s}
.hhead.is-on > :nth-child(4){transition-delay:.21s}
.hhead.is-out > *{opacity:0;transform:translateY(22px);
  transition:opacity .34s cubic-bezier(.4,0,1,1),transform .4s cubic-bezier(.4,0,1,1)}
.hhead.is-out > :nth-child(2){transition-delay:.035s}
.hhead.is-out > :nth-child(3){transition-delay:.07s}
.hhead.is-out > :nth-child(4){transition-delay:.105s}
@media(prefers-reduced-motion:reduce){.hhead > *{transform:none !important;transition:opacity .01s !important}}
/* the copper button. The same ramp as the pull quotes, laid across the
   button rather than clipped to type, and the scroll handler walks the
   light across it. */
.hhead .btn-sheen{margin-top:6px}
/* READ THE STORY with a plain NEXT beside it, for anyone who misses the bars */
.hh-acts{margin:0;display:flex;align-items:center;gap:clamp(18px,2vw,30px);flex-wrap:wrap}
.hh-acts .btn-sheen{margin-top:0}
.hh-next{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);transition:color .35s ease,gap .35s var(--ease)}
.hh-next svg{width:14px;height:14px;transition:transform .4s var(--silk)}
@media(hover:hover) and (pointer:fine){.hh-next:hover{color:var(--accent);gap:14px}}
.hh-next:focus-visible{outline:1px solid var(--accent);outline-offset:4px;border-radius:2px}
.btn-sheen{
  position:relative;overflow:hidden;isolation:isolate;
  color:#F6F1E9;background:transparent;border-color:transparent;
  --sx:62%;                                  /* where the light sits; the scroll handler moves it */
  transition:gap .35s var(--ease);
}
/* the metal is a layer wider than the button, so on hover it can slide a
   little to the right without its edge ever showing */
.btn-sheen::before{
  content:"";position:absolute;top:-1px;bottom:-1px;left:-14%;width:128%;z-index:-1;
  background-image:linear-gradient(127deg,
    #B05943 0%, #8E5337 12%, #845134 25%, #8E5337 36%,
    #A96546 43%, #C8855D 47.5%, #E4A277 50.5%, #F2B084 53%, #E19F74 55.5%,
    #C17C53 60%, #9C5C3F 66%, #845134 77%, #8E5337 89%, #B05943 100%);
  background-size:320% 100%;background-position:var(--sx) 50%;background-repeat:no-repeat;
  transition:transform .7s var(--silk),filter .7s var(--silk);
}
@media(hover:hover) and (pointer:fine){
  .btn-sheen:hover{background:transparent;border-color:transparent;color:#F6F1E9}
  .btn-sheen:hover::before{transform:translateX(5.5%);filter:brightness(1.09)}
}
.h2-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.ar-scroll{
  display:flex;flex-direction:column;align-items:center;gap:12px;text-decoration:none;
  font-family:var(--mono);font-weight:600;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);
}
.ar-scroll i{display:block;width:1px;height:48px;background:linear-gradient(180deg,rgba(26,23,21,0) 0,rgba(26,23,21,.7) 45%,rgba(26,23,21,.7) 55%,rgba(26,23,21,0) 100%) 0 -48px/100% 200% no-repeat,var(--line);animation:arscroll 2.6s cubic-bezier(.4,0,.2,1) infinite}
html[data-theme="dark"] .ar-scroll i{background:linear-gradient(180deg,rgba(246,241,233,0) 0,rgba(246,241,233,.8) 45%,rgba(246,241,233,.8) 55%,rgba(246,241,233,0) 100%) 0 -48px/100% 200% no-repeat,var(--line)}
@keyframes arscroll{0%{background-position:0 -48px}55%,100%{background-position:0 48px}}
@media(prefers-reduced-motion:reduce){.ar-scroll i{animation:none;background-position:0 0}}
/* the three stories: a numbered bar each. The bar of the story on screen
   fills with copper over its hold, and the slideshow advances when the
   fill completes, so the bar is the clock rather than a picture of one. */
.hh-bars{display:flex;gap:clamp(14px,1.6vw,28px);align-items:flex-end;padding-bottom:4px;flex:0 1 65%}
.hh-bar{all:unset;cursor:pointer;display:grid;gap:11px;justify-items:start;flex:1 1 0;min-width:44px;padding-top:10px}
.hh-bar b{font-family:var(--mono);font-weight:600;font-size:10px;letter-spacing:.18em;line-height:1;color:var(--ink-dim);transition:color .5s var(--silk)}
.hh-bar i{position:relative;display:block;width:100%;height:2px;background:var(--line);overflow:hidden;transition:background .5s var(--silk)}
.hh-bar i::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:0 50%}
.hh-bar.is-on b{color:var(--ink)}
.hh-bar.is-on i::after{animation:hhfill var(--hold,14s) linear forwards}
.hh-bars.is-paused .hh-bar.is-on i::after{animation-play-state:paused}
@keyframes hhfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(hover:hover){
  .hh-bar:not(.is-on):hover b{color:var(--ink)}
  .hh-bar:not(.is-on):hover i{background:rgba(26,23,21,.32)}
}
.hh-bar:focus-visible b{color:var(--accent)}
@media(prefers-reduced-motion:reduce){.hh-bar.is-on i::after{animation:none;transform:scaleX(1)}}
/* ── the hero on a phone: one screen, the picture behind everything, the
   headline and its button at the foot, the story bars under them. The
   desktop hero above is untouched; all of this is inside the query. ── */
@media(max-width:899px){
  .h2{display:block;min-height:100vh;min-height:100svh;background:#1A1715;color:#F6F1EA}
  .h2-img{position:absolute;inset:0;aspect-ratio:auto;max-height:none;cursor:default}
  .hslide img{object-position:50% 40%}
  /* scrims: a little at the top for the bar, more at the foot for the words */
  .h2-img::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(180deg,rgba(12,11,10,.42) 0,rgba(12,11,10,0) 24%,rgba(12,11,10,0) 44%,rgba(12,11,10,.74) 76%,rgba(12,11,10,.9) 100%)}
  .h2-side{position:relative;z-index:3;min-height:100vh;min-height:100svh;grid-template-rows:1fr auto;row-gap:34px;
    padding:calc(var(--ntop) + 64px) var(--gut) 34px}
  .h2-mark{display:none}   /* the logotype is on the bar already */
  .h2-story{padding-block:0;align-self:end}
  .hhead{gap:16px}
  .hh-date{color:rgba(246,241,234,.62)}
  .hh-title{max-width:none;color:#F6F1EA;font-size:clamp(34px,9.6vw,54px)}
  .hh-sf{display:none}
  .hhead .btn-sheen{margin-top:10px}
  .hh-acts{margin-top:10px}
  .hh-next{color:rgba(246,241,234,.72)}
  .hh-bars{flex:0 1 66%}
  .hh-bar b{color:rgba(246,241,234,.5)}
  .hh-bar.is-on b{color:#F6F1EA}
  .hh-bar i{background:rgba(246,241,234,.22)}
  .ar-scroll{color:rgba(246,241,234,.62)}
  .ar-scroll i{background:linear-gradient(180deg,rgba(246,241,233,0) 0,rgba(246,241,233,.85) 45%,rgba(246,241,233,.85) 55%,rgba(246,241,233,0) 100%) 0 -48px/100% 200% no-repeat,rgba(246,241,234,.22)}
  /* the bar over the hero: just the logotype and the burger, on the picture;
     it keeps its landing height until the hero has gone, then tightens */
  .is-home.over-hero .top{background:transparent;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
  .is-home.over-hero .top.stuck{padding-top:var(--ntop);opacity:0;pointer-events:none}   /* scrolling through the hero: only the burger stays */
  .is-home.over-hero .burger{color:#F6F1EA}
  body.is-home.over-hero.menu-open .burger{color:#F6F1EA}
  .is-home.over-hero .top .iglink{color:rgba(246,241,234,.8)}
  .is-home.over-hero .top .btn-line{color:#F6F1EA;border-color:rgba(246,241,234,.45)}
}
@media(max-width:699px){header.top .right{display:none}}   /* PRICE LISTS and Instagram are in the menu */
/* the header on the home page: the fixed bar stays out of the way until
   the reader is well into the introduction, then slides in. The burger is
   its own fixed element, so it is there from the first pixel. */
@media(min-width:900px){
  .is-home.over-hero .top{opacity:0;transform:translateY(-100%);visibility:hidden;pointer-events:none;
    transition:opacity .5s var(--silk),transform .5s var(--silk),visibility 0s .5s}
}
@media(max-width:899px){.h2-side{padding-right:var(--gut)}}

/* ── BRANDS in the bar: the seven tiles drop down on hover ─────────
   The same tiles as the menu, in the page's light: a cream panel under
   the bar, the tiles outlined, marks in ink, copper on hover. */
.nav-dd{position:relative;display:block}
.nav-dd > a{display:block;cursor:default}
.nav-drop{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:22px;   /* the gap keeps the hover alive on the way down */
  opacity:0;visibility:hidden;transition:opacity .35s var(--silk),visibility 0s .35s;z-index:70}
.nav-drop-in{display:flex;gap:10px;padding:14px;background:var(--bg);border:1px solid var(--line-soft);border-radius:18px;
  box-shadow:0 30px 60px -24px rgba(26,23,21,.35),0 8px 20px -10px rgba(26,23,21,.18);
  transform:translateY(-6px);transition:transform .45s var(--silk)}
.nav-drop-in::before{content:"";position:absolute;top:14px;left:50%;width:10px;height:10px;margin-left:-5px;background:var(--bg);border-left:1px solid var(--line-soft);border-top:1px solid var(--line-soft);transform:rotate(45deg)}
@media(hover:hover) and (pointer:fine){
  .nav-dd:hover .nav-drop,.nav-dd:focus-within .nav-drop{opacity:1;visibility:visible;transition:opacity .35s var(--silk)}
  .nav-dd:hover .nav-drop-in,.nav-dd:focus-within .nav-drop-in{transform:none}
}
/* the tiles, in the light */
.top .nav .nav-drop .mtile-b{display:flex;line-height:1.2;opacity:1;transform:none;width:124px;padding:18px 10px 16px;gap:12px;
  border-color:var(--line);background:transparent;color:var(--ink);transition:transform .4s var(--silk),border-color .35s ease,background .35s ease}
.nav-drop .mtile-b-icon{color:var(--ink);width:69px;height:69px}
.nav-drop .mtile-b-name{color:var(--ink-dim)}
@media(hover:hover){
  .nav-drop .mtile-b:hover{transform:translateY(-3px);border-color:var(--accent);background:rgba(218,145,109,.06)}
  .nav-drop .mtile-b:hover .mtile-b-icon,.nav-drop .mtile-b:hover .mtile-b-name{color:var(--accent)}
}
/* when the bar is over the hero it is hidden, so no dropdown there */
.is-home.over-hero .nav-drop{display:none}

/* ── instagram: the glyph beside PRICE LISTS, and in the menu ─────── */
.iglink{display:grid;place-items:center;width:40px;height:40px;color:var(--ink-dim);transition:color .35s ease,filter .35s ease,transform .5s var(--silk)}
.iglink .ig{width:24px;height:24px}
@media(hover:hover) and (pointer:fine){.iglink:hover{color:var(--accent);filter:brightness(1.12);transform:translateY(-1px)}}
.menu-ig{display:inline-flex;align-items:center;gap:10px}
.menu-ig .ig{width:18px;height:18px}

/* ── the burger and the menu ─────────────────────────────────────────
   Two lines at the top right on every page, fixed, above everything. The
   menu is a full-screen sheet of off-black with the six links set large,
   the brands and contact beside them. */
.burger{
  all:unset;position:fixed;z-index:90;top:calc(var(--ntop) + 6px);right:calc(var(--gut) + 2px);   /* its centre on the bar's content line */
  width:40px;height:40px;cursor:pointer;display:grid;place-items:center;
  color:var(--ink);transition:top .5s var(--silk),color .5s var(--silk);
}
.burger i{grid-area:1/1;display:block;width:26px;height:1.5px;background:currentColor;border-radius:1px;
  transition:transform .55s var(--silk),width .4s var(--silk)}
.burger i:first-child{transform:translateY(-4.5px)}
.burger i:last-child{transform:translateY(4.5px)}
@media(hover:hover){
  .burger:hover i:first-child{transform:translateY(-4.5px) translateX(-2px)}
  .burger:hover i:last-child{transform:translateY(4.5px) translateX(2px)}
}
.burger:focus-visible{outline:1px solid var(--accent);outline-offset:4px;border-radius:50%}
body.is-stuck .burger{top:26px}
.is-home.over-hero .burger{top:calc(var(--ntop) - 2px)}   /* over the hero there is no bar: its top on the B's top line */
body.menu-open .burger{color:#F6F1EA}
body.menu-open .burger i:first-child{transform:rotate(45deg)}
body.menu-open .burger i:last-child{transform:rotate(-45deg)}
.top .right{padding-right:calc(40px + 14px)}   /* room for the burger */
.menu{
  position:fixed;inset:0;z-index:80;background:#1A1715;color:#F6F1EA;overflow:auto;
  opacity:0;visibility:hidden;transition:opacity .55s var(--silk),visibility 0s .55s;
}
.menu[hidden]{display:block}
body.menu-open .menu{opacity:1;visibility:visible;transition:opacity .45s var(--silk)}
.menu-in{
  min-height:100%;display:grid;grid-template-rows:1fr auto;align-content:stretch;
  padding:clamp(130px,16vh,170px) var(--gut) clamp(32px,4vh,48px);
}
/* the copper B at the top left: it fades in on the last beat of its turn
   (boyer.js calls settle() on the canvas) and then sits still */
.menu-logo{--size:clamp(96px,8vw,120px);position:absolute;top:calc(var(--ntop) - 2px - var(--size) * .1);left:calc(var(--gut) - var(--size) * .105);display:block;
  width:var(--size);height:var(--size);line-height:0;opacity:0;transition:opacity .01s}
body.menu-open .menu-logo{opacity:1;transition:opacity .9s var(--silk) .15s}
/* the logotype as a watermark, bottom right */
.menu-wm{position:absolute;right:calc(var(--gut) - 1.5vw);bottom:calc(var(--gut) - 1vw);width:clamp(220px,26vw,420px);line-height:0;pointer-events:none;opacity:0;transition:opacity .01s}
.menu-wm svg{width:100%;height:auto;display:block}
.menu-wm svg *{fill:#F6F1EA !important}
body.menu-open .menu-wm{opacity:.035;transition:opacity 1.2s var(--silk) .4s}
/* the links: a numbered row each, a hairline between; BRANDS folds down
   to a row of tiles */
.menu-nav{display:grid;align-content:start;align-self:center}   /* the links sit on the screen's middle */
/* the rules ARE the pseudo-elements (no borders), so there is one line per
   boundary: at rest it spans the content; on hover the lines above and
   below the row run out to the window's edges, and a faint light fills
   the row */
.menu-row{position:relative;opacity:0;transform:translateY(-14px);transition:opacity .01s,transform .01s}
.menu-row::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(246,241,234,.14);
  transition:left .55s var(--silk),right .55s var(--silk)}
.menu-row:first-child::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(246,241,234,.14);
  transition:left .55s var(--silk),right .55s var(--silk)}
.menu-row .menu-glow{position:absolute;inset:0;left:calc(-1 * var(--gut));right:calc(-1 * var(--gut));pointer-events:none;z-index:0;
  background:rgba(232,169,133,.055);
  opacity:0;transition:opacity .55s var(--silk)}
@media(hover:hover){
  /* the line under the row, the line above it (the previous row's), and
     the top rule when it is the first row */
  .menu-row:hover::after,.menu-row:has(+ .menu-row:hover)::after,.menu-row:first-child:hover::before{left:calc(-1 * var(--gut));right:calc(-1 * var(--gut))}
  .menu-row:hover .menu-glow{opacity:1}
}
.menu-row > *{position:relative;z-index:1}
body.menu-open .menu-row{opacity:1;transform:none;
  transition:opacity .6s var(--silk) calc(.1s + var(--n) * .05s),transform .8s cubic-bezier(.2,.7,.2,1) calc(.1s + var(--n) * .05s)}
.menu-link{
  all:unset;box-sizing:border-box;display:grid;grid-template-columns:clamp(64px,6vw,88px) auto 1fr;align-items:baseline;
  width:min(100%,760px);padding:clamp(14px,2.2vh,22px) 0;cursor:pointer;
  text-decoration:none;color:#F6F1EA;
  font-family:var(--display);font-weight:300;font-size:clamp(26px,2.6vw,40px);line-height:1;letter-spacing:-.018em;
}
.menu-link i{font-style:normal;font-family:var(--mono);font-weight:600;font-size:10.5px;letter-spacing:.16em;color:rgba(246,241,234,.42);transition:color .45s var(--silk)}
.menu-link span{display:block;transition:transform .6s var(--silk),color .45s var(--silk)}
@media(hover:hover){
  .menu-link:hover span{transform:translateX(16px);color:var(--copper)}
  .menu-link:hover i{color:var(--copper)}
}
.menu-link[aria-current] span,.menu-link[aria-current] i,.menu-row.is-open .menu-link span,.menu-row.is-open .menu-link i{color:var(--copper)}
.menu-link:focus-visible span{color:var(--copper);transform:translateX(16px)}
/* the chevron on BRANDS: a thin v that turns over when open */
.menu-chev{position:relative;width:14px;height:14px;align-self:center;justify-self:start;margin-left:18px;transition:transform .6s var(--silk)}
.menu-link:hover .menu-chev{transform:translateX(16px)}   /* it rides along with the word */
.menu-chev::before{content:"";position:absolute;left:2px;top:1px;width:8px;height:8px;border-right:1.5px solid rgba(246,241,234,.5);border-bottom:1.5px solid rgba(246,241,234,.5);transform:rotate(45deg);transition:transform .5s var(--silk),border-color .45s var(--silk)}
.menu-row.is-open .menu-chev::before{transform:rotate(225deg) translate(-2px,-2px);border-color:var(--copper)}
/* the fold: closed at 0fr, open at 1fr */
.menu-fold{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--silk)}
.menu-row.is-open .menu-fold{grid-template-rows:1fr}
.menu-fold-in{overflow:hidden;min-height:0}
.mtiles{display:flex;gap:12px;padding:6px 0 clamp(22px,3vh,32px) clamp(64px,6vw,88px);overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
.mtiles::-webkit-scrollbar{display:none}
/* the tiles — the same ones as the Vienna page: equal boxes, the mark
   above the name */
.mtile-b{
  flex:0 0 auto;width:clamp(118px,9.4vw,138px);scroll-snap-align:start;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:22px 14px 20px;border:1.5px solid rgba(246,241,234,.14);border-radius:14px;
  background:rgba(246,241,234,.035);color:#F6F1EA;text-decoration:none;
  transition:transform .4s var(--silk),border-color .35s ease,background .35s ease,opacity .5s var(--silk);
  opacity:0;transform:translateY(8px);
}
.menu-row.is-open .mtile-b{opacity:1;transform:none;transition:transform .5s var(--silk) calc(.12s + var(--k) * .045s),opacity .5s var(--silk) calc(.12s + var(--k) * .045s),border-color .35s ease,background .35s ease}
.mtile-b-icon{width:84px;height:84px;display:grid;place-items:center;color:#F6F1EA;transition:color .3s ease}
.mtile-b-icon svg{width:100%;height:100%;display:block}
.mtile-all .mtile-b-icon{color:rgba(246,241,234,.6)}
.mtile-all .mtile-b-icon svg{width:26px;height:26px}
.mtile-b-name{font-family:var(--mono);font-weight:600;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(246,241,234,.7);text-align:center;line-height:1.2;transition:color .3s ease}
/* the little arrow in the corner: you are leaving the site */
.mtile-b{position:relative}
.mtile-b-ext{position:absolute;right:10px;top:10px;width:13px;height:13px;color:var(--copper);
  opacity:0;transform:translate(-5px,5px);transition:opacity .4s var(--silk),transform .5s var(--silk)}
@media(hover:hover){
  .menu-row.is-open .mtile-b:hover{transform:translateY(-3px);border-color:rgba(232,169,133,.6);background:rgba(246,241,234,.06)}
  .mtile-b:hover .mtile-b-icon,.mtile-b:hover .mtile-b-name{color:var(--copper)}
  .mtile-b:hover .mtile-b-ext{opacity:1;transform:none}
}
.mtile-b:focus-visible .mtile-b-ext{opacity:1;transform:none}
/* contact along the bottom */
.menu-foot{display:flex;flex-wrap:wrap;gap:clamp(22px,3vw,48px);align-items:center;align-self:end;padding-top:40px;
  opacity:0;transition:opacity .01s}
body.menu-open .menu-foot{opacity:1;transition:opacity .8s var(--silk) .4s}
.menu-foot a{color:rgba(246,241,234,.72);text-decoration:none;font-size:clamp(15px,1.1vw,18px);transition:color .35s ease}
@media(hover:hover){.menu-foot a:hover{color:#F6F1EA}}
@media(max-width:899px){
  .menu-in{padding:120px var(--gut) 36px}
  .menu-link{font-size:clamp(24px,7vw,34px);width:100%}
  .mtiles{margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut)}
  .menu-row .menu-glow{display:none}
}
@media(prefers-reduced-motion:reduce){.menu-row,.menu-foot,.menu,.mtile-b,.menu-fold{transition:none !important}}
@media(max-width:999px){.top{grid-template-columns:auto 1fr auto}}

/* ── the introduction: a copper ground below the hero ────────────── */
.intro{
  position:relative;isolation:isolate;color:#F6F1EA;
  /* copper leather: a tileable grain under a slow sheen across the hide;
     the top and bottom are rolled edges — a bright lip where the hide turns
     over, a shade where it turns away — and the piece casts a shadow on
     the page */
  background:
    linear-gradient(180deg,rgba(255,236,220,.30) 0,rgba(255,236,220,.12) 1.5px,rgba(255,236,220,.04) 4px,rgba(50,16,6,.16) 6px,rgba(50,16,6,0) 12px) top/100% 14px no-repeat,
    linear-gradient(0deg,rgba(255,236,220,.12) 0,rgba(40,14,6,.40) 1.5px,rgba(40,14,6,.28) 4px,rgba(40,14,6,.10) 9px,rgba(40,14,6,0) 15px) bottom/100% 16px no-repeat,
    radial-gradient(120% 90% at 18% 10%,rgba(255,225,200,.12),rgba(255,225,200,0) 55%),
    radial-gradient(90% 80% at 85% 95%,rgba(50,16,6,.30),rgba(50,16,6,0) 60%),
    linear-gradient(118deg,rgba(150,80,52,.22),rgba(170,100,72,0) 60%),
    url(../img/leather.webp) center/480px 480px repeat #A65B3E;
  box-shadow:0 -2px 3px rgba(26,23,21,.10), 0 22px 36px -8px rgba(26,23,21,.55), 0 6px 10px -2px rgba(26,23,21,.35), 0 1px 2px rgba(26,23,21,.3);
  z-index:1;
}
/* saddle stitching along both edges: a little rendered piece of thread,
   twisted, lying in its groove between two awl holes, repeated */
.intro::before,.intro::after{
  content:"";position:absolute;left:0;right:0;height:16px;z-index:0;pointer-events:none;
  background:url(../img/stitch.webp) left center/12px 16px repeat-x;
}
.intro::before{top:3px}      /* right on the fold, where the lip turns down */
.intro::after{bottom:4px}
.intro > .grid{position:relative;z-index:1}
.intro .label{color:rgba(246,241,234,.72)}
.intro .lead{color:#F6F1EA;white-space:nowrap}
@media(min-width:900px){.intro .lead{font-size:clamp(32px,3.4vw,50px)}}   /* one line, inside the column, at any width */
@media(max-width:899px){.intro .lead{white-space:normal}}
.intro .lead em{color:#F6F1EA}
.intro .body p{color:rgba(246,241,234,.9)}
.intro .todo{color:#F6F1EA;border-left-color:#F6F1EA}

/* ── the quotes on British racing green leather: the same strap as the
   intro, in green, with green thread; the copper quote reads warmer on
   it, so the ramp is lifted a little ── */
.qleather{
  position:relative;isolation:isolate;z-index:1;
  margin-top:clamp(40px,5vw,80px);
  background:
    linear-gradient(180deg,rgba(220,240,228,.22) 0,rgba(220,240,228,.09) 1.5px,rgba(220,240,228,.03) 4px,rgba(0,10,5,.22) 6px,rgba(0,10,5,0) 12px) top/100% 14px no-repeat,
    linear-gradient(0deg,rgba(220,240,228,.10) 0,rgba(0,10,5,.5) 1.5px,rgba(0,10,5,.34) 4px,rgba(0,10,5,.12) 9px,rgba(0,10,5,0) 15px) bottom/100% 16px no-repeat,
    radial-gradient(120% 90% at 18% 10%,rgba(200,235,215,.10),rgba(200,235,215,0) 55%),
    radial-gradient(90% 80% at 85% 95%,rgba(0,8,4,.35),rgba(0,8,4,0) 60%),
    url(../img/leather-green.webp) center/480px 480px repeat #24392F;
  box-shadow:0 -2px 3px rgba(26,23,21,.10), 0 22px 36px -8px rgba(26,23,21,.55), 0 6px 10px -2px rgba(26,23,21,.35), 0 1px 2px rgba(26,23,21,.3);
}
.qleather::before,.qleather::after{content:"";position:absolute;left:0;right:0;height:16px;z-index:0;pointer-events:none;
  background:url(../img/stitch-green.webp) left center/12px 16px repeat-x}
.qleather::before{top:3px}
.qleather::after{bottom:4px}
.qleather > .grid{position:relative;z-index:1}
.qleather .moment.qslides{padding-top:clamp(90px,10vw,160px);padding-bottom:clamp(90px,10vw,160px)}
.qleather .qb{color:var(--copper)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .qleather .metal{background-image:linear-gradient(127deg,
    #C9704F 0%, #B0653F 12%, #A5623C 25%, #B0653F 36%,
    #C77A52 43%, #E09868 47.5%, #F4B88C 50.5%, #FBC79F 53%, #F2B585 55.5%,
    #D98F62 60%, #BA7049 66%, #A5623C 77%, #B0653F 89%, #C9704F 100%);
    color:transparent}   /* the .qb colour above is only the no-clip fallback; the light must show through */
}
.qleather .cap{color:rgba(246,241,234,.62)}
.qleather .qdot{background:rgba(246,241,234,.22)}
.qleather .qdot.is-on{background:var(--copper)}
.qleather + .about-home{padding-top:0}

/* ── the brand mosaic ────────────────────────────────────────────────
   Seven tiles edge to edge with a 1px seam of page between them. Two run
   double width, so three across fills three rows without a hole. The
   picture sits dark and desaturated with the name on it; on hover it comes
   up in colour and the tagline rises under the name. Brands without a
   photograph yet get a plain off-black tile, marked. */
.mosaic{
  display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:clamp(300px,24vw,400px);grid-auto-flow:dense;
  gap:1px;background:var(--bg);margin-top:0;
  margin-bottom:clamp(80px,10vw,150px);
}
.mtile{
  position:relative;display:block;overflow:hidden;text-decoration:none;color:#F6F1EA;
  background:#1A1715;isolation:isolate;
}
.mtile.is-wide{grid-column:span 2}
.mtile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) brightness(.72);transform:scale(1.001);
  transition:filter .9s var(--silk),transform 1.4s var(--silk)}
.mtile::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,11,10,0) 45%,rgba(12,11,10,.55) 100%)}
.mt-mark{position:absolute;top:clamp(18px,2vw,30px);left:clamp(18px,2vw,30px);z-index:2;width:clamp(46px,4vw,60px);height:auto;
  color:#F6F1EA;opacity:.55;transition:opacity .6s var(--silk)}
@media(hover:hover){.mtile:hover .mt-mark{opacity:.95}}
.mt-text{position:absolute;left:clamp(24px,2.6vw,40px);right:clamp(24px,2.6vw,40px);bottom:clamp(22px,2.4vw,36px);z-index:2;display:grid;gap:6px}
.mt-name{font-family:var(--display);font-weight:700;font-size:clamp(30px,2.9vw,46px);line-height:1;letter-spacing:-.022em}
.mt-place{font-family:var(--mono);font-weight:600;font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:rgba(246,241,234,.62)}
.mt-line{font-size:clamp(15px,1.05vw,17px);line-height:1.5;max-width:34ch;color:rgba(246,241,234,.9);
  margin-top:6px;opacity:0;transform:translateY(10px);transition:opacity .6s var(--silk),transform .7s var(--silk)}
.mt-main{position:absolute;inset:0;display:block;color:inherit;text-decoration:none}
.mt-main:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* the words sit over the main link and let clicks through to it; only the
   two buttons take the pointer. On hover the tagline comes up and the row
   of buttons unfolds beneath it, so the name lifts a little to make room. */
.mt-text{pointer-events:none}
.mt-links{display:grid;grid-template-rows:0fr;opacity:0;margin-top:0;transform:translateY(12px);
  transition:grid-template-rows .6s var(--silk),opacity .55s var(--silk),margin-top .6s var(--silk),transform .7s var(--silk)}
/* the row grows to make room but never clips: the buttons fade and rise
   over the words rather than being cut off by the growing row */
.mt-links-in{min-height:0;overflow:visible;display:flex;flex-wrap:wrap;gap:10px;pointer-events:auto}
.mt-links .btn{padding:12px 18px;font-size:10.5px;letter-spacing:.12em;gap:9px;color:#fff}
.mt-links .btn-sheen:hover{color:#fff}
.mt-links .btn:focus-visible{outline:1px solid #F6F1EA;outline-offset:3px}
@media(hover:hover){
  .mtile:hover img{filter:none;transform:scale(1.035)}
  .mtile:hover .mt-line,.mtile:focus-within .mt-line{opacity:1;transform:none}
  .mtile:hover .mt-links,.mtile:focus-within .mt-links{grid-template-rows:1fr;opacity:1;margin-top:18px;transform:none}
}
@media(max-width:1099px){
  .mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(260px,36vw,380px)}
  .mtile.is-wide:not(.is-first){grid-column:auto}   /* Shunyata across the top, then pairs */
}
@media(max-width:699px){
  .mosaic{grid-template-columns:1fr;grid-auto-rows:clamp(300px,78vw,400px)}
  .mtile.is-wide{grid-column:auto}
  .mt-line{opacity:1;transform:none}
  /* no hover on a phone: the buttons are there under the tagline, always */
  .mt-links{grid-template-rows:1fr;opacity:1;margin-top:18px;transform:none}
}
@media(prefers-reduced-motion:reduce){.mtile img{transition:none}.mt-line{transition:none}}

/* ── in the room: the system as a strip of cards, then the playlist ──
   The cards are the Vienna page's room items: a white box, soft border,
   brand in mono copper, model in Sincerity, a role tag. They run sideways
   in signal order; drag or swipe through the whole system. */
.playing{padding-block:clamp(80px,9vw,150px) clamp(90px,10vw,160px);row-gap:0;align-items:start;overflow-x:clip}   /* the glass wash blurs past its box */
.room-head{position:relative;margin-bottom:clamp(28px,3.5vw,52px)}
.room-head .lead{max-width:18em}
.room-hint{position:absolute;right:0;bottom:6px;display:flex;align-items:center;gap:12px;margin:0;
  font-family:var(--mono);font-weight:600;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim)}
.room-hint i{display:block;width:48px;height:1px;background:linear-gradient(90deg,rgba(26,23,21,0),rgba(26,23,21,.7) 45%,rgba(26,23,21,.7) 55%,rgba(26,23,21,0)) -48px 0/200% 100% no-repeat,var(--line);animation:filmhint 2.6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes filmhint{0%{background-position:-48px 0}55%,100%{background-position:48px 0}}
@media(prefers-reduced-motion:reduce){.room-hint i{animation:none}}
.room-strip-wrap{margin-bottom:clamp(56px,7vw,110px)}
.room-strip-wrap{position:relative}
.room-strip{
  display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  margin-inline:calc(-1 * (var(--gut) + max(0px,(100vw - var(--max)) / 2)));   /* window-wide: the cards run off both edges */
  padding:8px calc(var(--gut) + max(0px,(100vw - var(--max)) / 2)) 40px;        /* room below for the hover shadow */
  margin-bottom:-30px;scroll-padding-inline:calc(var(--gut) + max(0px,(100vw - var(--max)) / 2));cursor:grab;
  scrollbar-width:none;-ms-overflow-style:none;
}
/* the strip fades out at both edges of the window: there is more */
.room-strip-wrap::before,.room-strip-wrap::after{content:"";position:absolute;top:0;bottom:0;width:clamp(80px,10vw,160px);pointer-events:none;z-index:2}
.room-strip-wrap::after{right:calc(-1 * (var(--gut) + max(0px,(100vw - var(--max)) / 2)));background:linear-gradient(90deg,rgba(245,241,234,0),var(--bg) 85%)}
.room-strip-wrap::before{left:calc(-1 * (var(--gut) + max(0px,(100vw - var(--max)) / 2)));background:linear-gradient(270deg,rgba(245,241,234,0),var(--bg) 85%);opacity:0;transition:opacity .4s var(--silk)}
.room-strip-wrap.is-scrolled::before{opacity:1}
.room-strip::-webkit-scrollbar{display:none}
.room-strip.is-drag{cursor:grabbing;scroll-snap-type:none}
.room-strip:focus-visible{outline:1px solid var(--accent);outline-offset:6px}
.sysc{
  flex:0 0 clamp(280px,26vw,380px);scroll-snap-align:start;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line-soft);border-radius:12px;overflow:hidden;
  text-decoration:none;color:inherit;user-select:none;
  transition:transform .5s var(--silk),border-color .35s ease,box-shadow .5s var(--silk);
}
.sysc-media{display:block;aspect-ratio:4/3;background:var(--bg-2);overflow:hidden}
.sysc-media img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;transition:transform 1.2s var(--silk)}
.sysc-plate{display:grid;place-items:center;height:100%;font-family:var(--mono);font-weight:600;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  background:repeating-linear-gradient(-45deg,transparent 0 14px,rgba(218,145,109,.06) 14px 15px),var(--bg-2)}
.sysc-body{display:grid;gap:5px;padding:18px 20px 20px;align-content:start;flex:1}
.sysc-brand{font-family:var(--mono);font-weight:600;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:3px}
.sysc-name{font-family:var(--display);font-weight:700;font-size:clamp(21px,1.6vw,24px);line-height:1.1;letter-spacing:-.015em;color:var(--ink)}
.sysc-desc{font-size:15px;line-height:1.45;color:var(--ink-dim)}
.sysc-tag{justify-self:start;margin-top:12px;font-family:var(--mono);font-weight:600;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  padding:6px 11px;border:1px solid var(--line);border-radius:100px;white-space:nowrap}
@media(hover:hover){
  .sysc:hover{transform:translateY(-4px);border-color:var(--line);box-shadow:0 24px 40px -28px rgba(26,23,21,.35)}
  .sysc:hover .sysc-media img{transform:scale(1.04)}
}
.pl-h{margin:0 0 14px;font-family:var(--serif);font-style:italic;font-size:clamp(22px,1.8vw,30px);color:var(--accent)}
.pl-intro .body{margin-top:clamp(26px,3vw,44px)}
.playing .r3{grid-row:3}
@media(max-width:899px){.room-hint{display:none}.playing .r3{grid-row:auto}.playing .pl-intro{margin-bottom:32px}}

/* ── header: the nav sits on the true centre of the bar ───────────── */
:root{--ntop:44px}
/* Every control's top edge on one line — on the home page that line is
   the top of the spinning ring. Once you scroll, the bar tightens. */
.top{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;
  padding-top:var(--ntop);padding-bottom:20px;transition:padding .5s var(--silk),background .4s ease,border-color .4s ease}
.top.stuck{padding-top:20px}
.top .nav a{display:block;line-height:1}
.top .brand{justify-self:start}
/* everything on the bar's centre line: the logotype, the links and the
   PRICE LISTS button share one vertical middle */
.top{align-items:center}
.top .nav{justify-self:center;margin-left:0;margin-top:1px}   /* the mono label sits a hair high of its box */
.top .right{display:flex;align-items:center;gap:12px;justify-self:end}

/* ── quote slideshow ──────────────────────────────────────────────── */
.qslides{min-height:340px}
/* Each slide shares row 1 and spans every column. `grid-area:1/1` alone
   meant row 1, COLUMN 1 — in a twelve-column grid that crushed the quote
   into a 93px strip in the left margin. */
.qslide{grid-row:1;grid-column:1/-1 !important;justify-self:center;width:min(100%,1080px);
  opacity:0;transform:translateY(-22px);pointer-events:none;
  transition:opacity .62s var(--silk),transform .8s cubic-bezier(.2,.7,.2,1)}
.qslide.is-on{opacity:1;transform:none;pointer-events:auto}
/* same grammar as the headlines: drop away below, then the next drops in.
   The slide moves as one piece — the copper is clipped to the blockquote's
   own text, and moving its lines separately would tear the metal. */
.qslide.is-out{opacity:0;transform:translateY(22px);
  transition:opacity .38s cubic-bezier(.4,0,1,1),transform .44s cubic-bezier(.4,0,1,1)}
@media(prefers-reduced-motion:reduce){.qslide,.qslide.is-out{transform:none !important;transition:opacity .01s !important}}
.qslide .cap{margin-top:22px}
/* the measure is set in the quote's own ems, so a quote breaks into the same
   lines at every window width */
.qslide .pull{max-width:17.2em;margin-inline:auto}
.qdots{grid-row:2;grid-column:1/-1;display:flex;justify-content:center;gap:10px;margin-top:28px}
.qdot{all:unset;cursor:pointer;width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .5s var(--silk),transform .5s var(--silk)}
.qdot.is-on{background:var(--accent);transform:scale(1.35)}

/* ── nav current page ─────────────────────────────────────────────── */
.nav a[aria-current="page"]{color:var(--ink)}

/* ── footer ───────────────────────────────────────────────────────────
   The foundation of every page: a shade deeper than the page so it reads
   as a separate slab, the full logotype, the founder's hand, every brand
   and every page. When it arrives the header steps away, so the logotype
   is never shown twice. */
:root{--foot:#ECE6DB;--foot-line:rgba(26,23,21,.10)}
html[data-theme="dark"]{--foot:#141210;--foot-line:rgba(246,241,233,.08)}
.foot{position:relative;border-top:0;padding-block:0;
  /* pebbled vanilla leather, with a slow sheen; rolled, stitched edges top
     and bottom — the bottom one turning down onto the mahogany */
  background:
    linear-gradient(180deg,rgba(255,255,250,.45) 0,rgba(255,255,250,.14) 1.5px,rgba(255,255,250,0) 4px,rgba(70,50,35,.06) 6px,rgba(70,50,35,0) 11px) top/100% 12px no-repeat,
    radial-gradient(120% 90% at 20% 0%,rgba(255,255,250,.30),rgba(255,255,250,0) 55%),
    radial-gradient(90% 80% at 85% 100%,rgba(90,70,50,.08),rgba(90,70,50,0) 60%),
    url(../img/leather-cream.webp) center/420px 420px repeat var(--foot);
  z-index:1}
.foot::before,.foot-main::after{content:"";position:absolute;left:0;right:0;height:16px;z-index:1;pointer-events:none;
  background:url(../img/stitch-cream.webp) left center/12px 16px repeat-x}
.foot::before{top:3px}
.foot-main::after{bottom:4px;left:calc(50% - 50vw);right:calc(50% - 50vw)}
/* the leather's bottom edge is the top of the mahogany row: the shade of
   the hide turning down */
.foot-main::before{content:"";position:absolute;left:calc(50% - 50vw);right:calc(50% - 50vw);bottom:0;height:14px;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(60,40,28,.20) 0,rgba(60,40,28,.09) 2px,rgba(60,40,28,.03) 6px,rgba(60,40,28,0) 14px)}
.foot > *{position:relative;z-index:1}
html[data-theme="dark"] .foot{background:var(--foot)}
.foot-main{position:relative;padding-block:clamp(72px,8vw,128px) clamp(56px,6vw,96px);row-gap:48px;align-items:stretch}
/* instagram, under the contact links, the colour of the links */
.foot-igli{margin-top:10px}
.foot-ig{display:inline-grid;place-items:center;width:32px;height:32px;margin-left:-4px;color:var(--ink-soft);transition:color .45s var(--silk)}
.foot-ig .ig{width:26px;height:26px}
@media(hover:hover) and (pointer:fine){.foot-ig:hover{color:var(--accent)}}
.foot-brand{grid-column:1/-1;display:flex;flex-direction:column}
.foot-sigblock{margin-top:auto;padding-top:clamp(28px,3vw,44px)}
.foot-col{grid-column:span 6}
.foot-mark{grid-column:1/-1;justify-self:start}
@media(min-width:760px){
  .foot-brand{grid-column:1/5}
  .foot-col{grid-column:span 4}
  .foot-brand + .foot-col{grid-column:5/9}
  .foot-mark{grid-column:9/13;justify-self:end;align-self:end}
}
@media(min-width:1100px){
  .foot-brand{grid-column:1/5}
  .foot-brand + .foot-col{grid-column:5/7}
  .foot-brand + .foot-col + .foot-col{grid-column:7/9}
  .foot-brand + .foot-col + .foot-col + .foot-col{grid-column:9/11}
  .foot-mark{grid-column:11/13;justify-self:end;align-self:end}
}
.foot-logo{display:block;width:clamp(150px,13vw,210px);line-height:0;margin-left:calc(clamp(150px,13vw,210px) * -.0847)}   /* the artwork carries 8.5% left whitespace */
.foot-logo svg{width:100%;height:auto;display:block}
.foot-line{margin:clamp(22px,2.4vw,32px) 0 0;color:var(--ink-soft);font-size:clamp(16px,1.1vw,18px);line-height:1.6;max-width:30ch}
.foot-sig{display:block;width:clamp(120px,9vw,150px);color:var(--ink);opacity:.82}
.foot-sig svg{width:100%;height:auto;display:block}
.foot-signame{margin:10px 0 3px;font-size:14px;color:var(--ink-dim)}   /* 3px lifts its baseline onto the link column's */
.foot-h{margin:0 0 18px;font-family:var(--display);font-weight:300;font-size:clamp(20px,1.5vw,24px);line-height:1.1;color:var(--ink)}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.foot-col a,.foot-signame{line-height:1.5}
.foot-col a{font-size:clamp(15px,1.02vw,17px);color:var(--ink-soft);text-decoration:none;transition:color .45s var(--silk)}
/* a brand in the footer goes to the maker's own site: the small arrow that
   comes up on hover says so */
.foot-maker{display:inline-flex;align-items:center;gap:7px}
.foot-ext{width:12px;height:12px;flex:none;color:var(--accent);opacity:0;transform:translate(-3px,3px);transition:opacity .35s var(--silk),transform .45s var(--silk)}
@media(hover:hover){.foot-maker:hover .foot-ext{opacity:1;transform:none}}
.foot-maker:focus-visible .foot-ext{opacity:1;transform:none}
@media(hover:hover){.foot-col a:hover{color:var(--accent)}}
.foot-mark{--size:clamp(120px,10vw,160px);margin-bottom:calc(var(--size) * -.058)}   /* the canvas keeps room for the shadow; drop the ring onto the baseline */
.foot-base{position:relative;padding-block:56px 60px;align-items:center;overflow:hidden;
  max-width:none;margin-inline:0;padding-inline:var(--gut);
  color:rgba(246,241,234,.72);background:#2A0E09;
}
/* the mahogany: a board taller than the row, moved by boyer.js as the
   page scrolls so it reads as lying under the site rather than on it */
.foot-base .foot-wood{position:absolute;grid-area:auto;left:0;right:0;top:-120px;bottom:-120px;z-index:0;pointer-events:none;   /* grid-area auto: the padding box, not the columns */
  background:url(../img/wood.webp) center/auto 100% repeat-x #2A0E09;
  transform:translateY(var(--wy,0px));will-change:transform}
.foot-base::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.45) 0,rgba(0,0,0,.16) 10px,rgba(0,0,0,0) 34px),
    linear-gradient(100deg,rgba(255,220,190,0) 30%,rgba(255,220,190,.05) 48%,rgba(255,220,190,0) 62%),
    radial-gradient(110% 100% at 50% 110%,rgba(0,0,0,0) 40%,rgba(0,0,0,.22) 100%)}
.foot-base > *{position:relative;z-index:1}
.foot-base .legal{color:rgba(246,241,234,.80);font-size:clamp(11px,.8vw,12.5px);font-weight:600;letter-spacing:.14em}
.foot-base .foot-baselinks a{color:rgba(246,241,234,.95)}
@media(hover:hover){.foot-base .foot-baselinks a:hover{color:var(--copper)}}
/* the rule spans the content only, like the index-row rules above it */
.foot-base::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:rgba(0,0,0,.5)}
.foot-base .legal{grid-column:1/-1}
@media(min-width:760px){.foot-base .legal{grid-column:1/7}.foot-base .foot-baselinks{grid-column:7/13;justify-self:end}}
.foot-base.grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap)}
@media(min-width:1560px){.foot-base.grid{padding-inline:calc((100% - var(--max)) / 2 + var(--gut))}}
.foot-baselinks{display:flex;gap:28px}
.foot-baselinks a{color:inherit;text-decoration:none;transition:color .45s var(--silk);display:inline-flex;align-items:center;gap:8px}
.foot-baselinks svg{width:13px;height:13px}
@media(hover:hover){.foot-baselinks a:hover{color:var(--accent)}}
/* the header steps away once the footer is in view */
.top{transition:padding .5s var(--silk),background .4s ease,border-color .4s ease,opacity .6s var(--silk),transform .6s var(--silk)}
/* (the bar no longer hides at the footer — it stays once past the fold) */

/* index rows: the label column was sized to its content, so a longer label
   ("ALL HEADLINES") pushed the description column right in its row. A
   fixed third track keeps every description on the same left edge. */
@media(min-width:760px){.row{grid-template-columns:2.2fr 3fr minmax(13rem,auto)}.row .go{justify-self:end}}

/* ── what's playing ───────────────────────────────────────────────────
   A placeholder for a live playlist. Built in Boyer's own dress rather
   than any platform's — the platform is named, not imitated — so it can
   take an embed or an API feed later without changing the look. */
.player{--pad:clamp(22px,2.4vw,34px);background:var(--surface);border:1px solid var(--line-soft);border-radius:18px;
  padding:var(--pad);box-shadow:0 40px 70px -48px rgba(26,23,21,.35)}
/* ── the player is a sheet of glass ─────────────────────────────────
   A thin sheet, precisely cut, lying on the page: a face a shade cooler
   than the page so the light shows on it; a hairline of light along the
   edge, bright where the light falls and fading round, with the hairline
   of shadow of the sheet's own thickness beneath it; one broad reflection
   crossing the face. All of it moves with the scroll (--st, 0 → 1 as the
   sheet travels up the screen, from the sheen handler): the light runs
   round the edge, the reflection crosses, the corner glints come and go,
   and the lit edge throws a little light onto the page. */
.glass-wrap{position:relative}
.player.glass{position:relative;z-index:1;overflow:visible;
  --st:0.5;
  --ang:calc(200deg + var(--st) * 220deg);
  --dx:calc((0.5 - var(--st)) * 40px);
  /* the sheet: a cool, faintly smoky tint, darker than the page in the middle */
  background:linear-gradient(160deg,rgba(255,255,255,.62) 0%,rgba(224,218,208,.36) 40%,rgba(216,210,200,.40) 62%,rgba(255,255,255,.46) 100%);
  /* the corners are concentric with the B's ring: its centre sits
     --pad + 0.4·size in from the corner, its outer edge 0.4·size out */
  border:0;border-radius:calc(var(--pad) + var(--csize) * .4);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),                                    /* the top edge of the sheet, lit */
    inset calc(var(--dx) * .6) calc(6px - var(--st) * 12px) 48px -8px rgba(255,255,255,.75),   /* light pooling inside the lit edge */
    inset 0 -1px 0 rgba(255,255,255,.55),                                   /* the bottom edge, catching a little */
    inset 1px 0 0 rgba(255,255,255,.45),inset -1px 0 0 rgba(255,255,255,.45),
    inset 0 -2px 0 rgba(26,23,21,.06),                                      /* the sheet's thickness, in shadow */
    0 1px 1px rgba(26,23,21,.06),
    0 24px 50px -28px rgba(26,23,21,.38),                                   /* it lies just off the page */
    var(--dx) calc(-10px + var(--st) * 20px) 36px -2px rgba(255,255,255,1),       /* light off the lit edge, onto the page */
    calc(var(--dx) * 1.4) calc(-14px + var(--st) * 28px) 90px -10px rgba(255,255,255,.9),   /* …and a wider, softer bloom */
    calc(var(--dx) * -.7) calc(16px - var(--st) * 32px) 60px -10px rgba(232,169,133,.42)}   /* …with a little copper in it */
/* the face: one broad reflection, crossing as the page scrolls */
.player.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;pointer-events:none;
  /* one band: a soft fade in from the left, a razor cut on the right */
  background:linear-gradient(104deg,
    rgba(255,255,255,0) 34%,rgba(255,255,255,.03) 40%,rgba(255,255,255,.13) 48%,rgba(255,255,255,.32) 54%,rgba(255,255,255,.44) 56.95%,rgba(255,255,255,0) 57%);
  background-size:240% 100%;background-repeat:no-repeat;background-position:var(--sx,60%) 50%;
  mix-blend-mode:screen;transition:background-position .15s linear}
/* the cut edge: a crisp 1.25px hairline of light, bright where the light
   falls and fading round, running round the sheet as you scroll */
.player.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:2;pointer-events:none;
  background:conic-gradient(from var(--ang) at 50% 50%,
    #FFFFFF 0deg,rgba(255,255,255,.95) 18deg,rgba(120,112,104,.55) 50deg,rgba(90,84,78,.42) 120deg,
    rgba(255,255,255,.9) 150deg,rgba(255,255,255,.95) 160deg,rgba(90,84,78,.42) 190deg,
    rgba(100,92,86,.45) 250deg,rgba(255,252,247,.9) 285deg,rgba(90,84,78,.42) 310deg,#FFFFFF 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.9));   /* the bright segments bloom a touch */
  transition:background .15s linear}
.player.glass > *{position:relative;z-index:1}
/* glints: a point of light on a corner of the cut, brightest when the light passes it */
.glint{position:absolute;z-index:3;width:170px;height:170px;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,1),rgba(255,255,255,.45) 22%,rgba(255,255,255,0) 68%);
  transform:translate(-50%,-50%);mix-blend-mode:screen;transition:opacity .15s linear}
.glint.g1{left:0;top:0;opacity:clamp(0,1 - (var(--st) - .18) * (var(--st) - .18) * 28,1)}
.glint.g2{left:100%;top:100%;opacity:clamp(0,1 - (var(--st) - .62) * (var(--st) - .62) * 28,1)}
.glint.g3{left:100%;top:0;width:120px;height:120px;opacity:clamp(0,.85 - (var(--st) - .42) * (var(--st) - .42) * 28,.85)}
.player.glass .pl-row{border-radius:6px}
@media(hover:hover){.player.glass .pl-row:hover{background:rgba(255,255,255,.42)}}
.player.glass .pl-track{background:rgba(26,23,21,.16)}
.player.glass .pl-head,.player.glass .pl-now{border-color:rgba(26,23,21,.12)}

@media(prefers-reduced-motion:reduce){.player.glass::before,.player.glass::after,.glint{transition:none}}
html[data-theme="dark"] .player{background:#141210;box-shadow:0 40px 70px -40px rgba(0,0,0,.8)}
.pl-head{display:flex;gap:clamp(18px,2vw,28px);align-items:flex-end}
/* the cover is the copper B itself, at rest — the footer's render, still */
.player{--csize:clamp(104px,9vw,136px)}
.pl-cover{--size:var(--csize);flex:none;margin:calc(var(--size) * -.1) 0 calc(var(--size) * -.1) calc(var(--size) * -.1)}
.pl-kind{margin:0;font-family:var(--mono);font-weight:600;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}
.pl-title{margin:8px 0 0;font-family:var(--display);font-weight:700;font-size:clamp(28px,2.6vw,42px);line-height:1;letter-spacing:-.02em;color:var(--ink)}
.pl-sub{margin:12px 0 0;font-size:14px;color:var(--ink-dim);line-height:1.5}
.pl-now{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;align-items:center;
  margin-top:clamp(22px,2.4vw,30px);padding-block:18px;border-block:1px solid var(--line-soft)}
.pl-play{all:unset;cursor:pointer;box-sizing:border-box;width:48px;height:48px;border-radius:50%;background:var(--ink);color:var(--bg);
  display:grid;place-items:center;transition:background .45s var(--silk),transform .45s var(--silk)}
.pl-play svg{width:20px;height:20px}
.pl-play .i-pause{display:none}
.player.is-playing .pl-play .i-play{display:none}
.player.is-playing .pl-play .i-pause{display:block}
@media(hover:hover){.pl-play:hover{background:var(--accent);transform:scale(1.04)}}
.pl-play:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
.pl-nowtext{display:flex;flex-direction:column;gap:2px;min-width:0}
.pl-nowt{font-size:17px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-nowa{font-size:14px;color:var(--ink-dim)}
.pl-bar{display:flex;align-items:center;gap:12px;grid-column:2}
.pl-pos{font-family:var(--mono);font-size:11px;color:var(--ink-dim);min-width:3.2em}
.pl-pos:last-child{text-align:right}
.pl-track{flex:1;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.pl-track i{display:block;height:100%;width:0;background:var(--accent)}
.pl-list{list-style:none;margin:10px 0 0;padding:0 0 10px}
.pl-row{display:grid;grid-template-columns:2.2em 1fr auto;grid-template-areas:"n t d" "n a d";gap:0 12px;align-items:center;
  padding:9px 6px;border-radius:3px;cursor:pointer;transition:background .4s var(--silk)}
@media(min-width:1100px){.pl-row{grid-template-columns:2.2em 1.25fr 1fr auto;grid-template-areas:"n t a d"}}
@media(hover:hover){.pl-row:hover{background:var(--bg)}}
.pl-n{grid-area:n;position:relative;height:16px;font-family:var(--mono);font-size:11.5px;color:var(--ink-dim)}
.pl-t{grid-area:t;font-size:16px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-a{grid-area:a;font-size:14px;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-d{grid-area:d;font-family:var(--mono);font-size:11.5px;color:var(--ink-dim)}
.pl-row.is-now .pl-t{color:var(--accent)}
/* the playing track's number becomes three small bars */
.pl-eq{position:absolute;left:0;bottom:2px;display:none;gap:2px;align-items:flex-end;height:12px}
.pl-eq i{display:block;width:2.5px;height:30%;background:var(--accent);border-radius:1px}
.pl-row.is-now .pl-num{visibility:hidden}
.pl-row.is-now .pl-eq{display:flex}
.player.is-playing .pl-row.is-now .pl-eq i{animation:eq 1.1s ease-in-out infinite}
.player.is-playing .pl-row.is-now .pl-eq i:nth-child(2){animation-duration:.8s;animation-delay:-.3s}
.player.is-playing .pl-row.is-now .pl-eq i:nth-child(3){animation-duration:1.3s;animation-delay:-.6s}
@keyframes eq{0%,100%{height:25%}50%{height:100%}}
@media(prefers-reduced-motion:reduce){.player.is-playing .pl-row.is-now .pl-eq i{animation:none;height:70%}}

/* half the usual breathing room beneath the quote slideshow */
.moment.qslides{padding-top:clamp(4px,.7vw,12px);padding-bottom:clamp(60px,8vw,124px)}   /* the quote sits on the centre line between the map and the portrait */
/* Guillaume on the home page: black and white until the cursor is on the
   picture or on CONTACT GUILLAUME */
.about-home{padding-top:0;padding-bottom:0;background:#F0EBE2;max-width:none;margin-inline:0;padding-inline:calc(max(0px,(100vw - var(--max)) / 2) + var(--gut))}   /* full-width band, a shade darker than the page; portrait straight under the green strap */
.about-home .abio .body p{max-width:none}
.about-home .abio .lead{max-width:none}
.gport{position:relative;overflow:hidden;background:var(--bg-2)}
@media(min-width:900px){
  .about-home{column-gap:0}
  .about-home .gport{grid-column:1/7;margin-left:calc(50% - 50vw + 0px);margin-left:calc(-1 * (50vw - 50%));width:calc(50vw);justify-self:start;align-self:stretch}
  .about-home .gport{margin-left:calc(-1 * ((100vw - min(100vw,var(--max))) / 2 + var(--gut)));width:50vw}
  .about-home .abio{grid-column:7/13;padding-left:clamp(36px,4vw,64px);padding-right:0;margin-right:calc(-1 * ((100vw - min(100vw,var(--max))) / 2 + var(--gut)));padding-right:var(--gut);align-self:center;padding-block:clamp(48px,6vw,96px)}
  .about-home .abio .body p{max-width:none}
  .about-home .abio .lead{font-size:clamp(32px,3.4vw,52px)}
}
.gport img{width:100%;height:100%;min-height:100%;aspect-ratio:auto;object-fit:cover;object-position:46% 28%;display:block;
  filter:grayscale(1);transition:filter .8s var(--silk),transform 1.4s var(--silk);transform:scale(1.001)}
@media(hover:hover){
  .gport:hover img,.about-home.is-colour .gport img{filter:none;transform:scale(1.03)}
}
.dnote{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--ink-dim);font-style:italic}

/* ── imported stories (build/import_news.py) ───────────────────────────
   Text in the reading measure; a lone picture a little wider than the
   text; a row of columns across the whole grid, each column keeping the
   span it had on the old site. */
.art{padding-block:clamp(48px,6vw,96px) clamp(80px,10vw,150px);row-gap:clamp(28px,3.2vw,52px)}
.art .read{width:100%;grid-column:1/-1;max-width:772px;margin-inline:auto}
.art-text{font-size:clamp(17px,1.2vw,19.5px);line-height:1.68;color:var(--ink-soft)}
.art-text > *:first-child{margin-top:0}
.art-text > *:last-child{margin-bottom:0}
.art-text p{margin:0 0 1.2em}
.art-text h2,.art-text h3,.art-text h4{font-family:var(--display);font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1.1;margin:1.6em 0 .6em}
.art-text h2{font-size:clamp(26px,2.5vw,38px)}
.art-text h3,.art-text h4{font-size:clamp(22px,2vw,30px)}
.art-text strong{font-weight:600;color:var(--ink)}
.art-text em{font-style:italic}
.art-text a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(181,110,76,.35);transition:border-color .3s ease}
@media(hover:hover){.art-text a:hover{border-bottom-color:var(--accent)}}
.art-text ul,.art-text ol{margin:0 0 1.2em;padding-left:1.3em}
.art-text li{margin:0 0 .35em}
.art-text blockquote{margin:1.4em 0;padding:0 0 0 1.2em;border-left:2px solid var(--accent);font-family:var(--serif);font-style:italic;font-size:1.12em;color:var(--ink)}
.art-text blockquote p{margin:0}
.art-img{margin:0;grid-column:1/-1}
.art-img img{width:100%;height:auto;display:block;background:var(--bg-2)}
.art-img .cap{margin-top:12px}
/* a row of columns is exactly as wide as a lone picture */
.art-row{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:clamp(28px,3.2vw,52px);align-items:start}
@media(min-width:900px){.art-img:not(.in-col),.art-row{grid-column:2/12}}
.art-col{grid-column:span var(--span,12);display:grid;row-gap:clamp(20px,2.4vw,36px)}
.art-col .art-text{max-width:none}
/* a row that is only pictures: each column's width is its picture's
   aspect ratio, so every picture in the row is exactly the same height and
   together they fill the row — locked, whatever the ratios */
.art-row.is-pics{display:flex;align-items:stretch;gap:var(--gap)}
.art-row.is-pics .art-col{flex:var(--r,1) 1 0%;min-width:0;display:block}
.art-row.is-pics .art-img{width:100%}
.art-row.is-pics .art-img img{width:100%;height:auto}
@media(max-width:699px){.art-row.is-pics{flex-wrap:wrap}.art-row.is-pics .art-col{flex-basis:100%}}
/* the article's opening picture: full bleed, 16:9 */
.art-hero{width:100vw;margin-inline:calc(50% - 50vw);position:relative}
.art-hero img{width:100%;height:min(56.25vw,92vh);object-fit:cover;display:block;background:var(--bg-2)}
/* …or, where the old page opened on a pair, the pair, full bleed, edge to
   edge, no seam: widths from the ratios, so one height */
/* an award over the story's picture: it sits on the picture's top right
   corner, breaking the edge, so it reads before anything else */
.art-badge{position:absolute;top:clamp(-30px,-2.6vw,-46px);right:var(--gut);width:clamp(200px,22vw,340px);display:block;line-height:0;
  transition:transform .5s var(--silk)}
.art-badge img{width:100%;height:auto;display:block;background:none !important}   /* the badge is a PNG with clear corners; the hero's placeholder fill must not show through them */
@media(hover:hover){a.art-badge:hover{transform:translateY(-5px)}}
@media(min-width:1560px){.art-badge{right:calc((100% - var(--max)) / 2 + var(--gut))}}
.art-hero.is-pair{display:flex;gap:0}
.art-hero.is-pair figure{margin:0;flex:var(--r,1) 1 0%;min-width:0}
.art-hero.is-pair img{width:100%;height:auto}
@media(max-width:699px){.art-hero.is-pair{flex-wrap:wrap}.art-hero.is-pair figure{flex-basis:100%}}
.art-btn{margin:0}
.art-btn.read{text-align:center}
@media(max-width:699px){.art-col{grid-column:1/-1}}

/* the standfirst under an article's title: Playfair italic, copper */
.art-sf{text-transform:none;letter-spacing:-.005em;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(20px,1.7vw,27px);line-height:1.4;color:var(--accent);max-width:34ch}

/* ── the three big links at the foot of the home page: on desktop, three
   boxes end to end across the whole width, sitting straight on the
   footer; on phones the stacked rows as elsewhere ── */
@media(min-width:900px){
  .rows-three{display:grid;grid-template-columns:repeat(3,1fr);column-gap:0;max-width:none;padding-inline:0;margin-top:0;
    background:linear-gradient(100deg,#F5F1EA 0%,#F0EBE2 55%,#ECE6DB 100%)}
  .rows-three .row{
    grid-column:auto;margin-inline:0;padding:clamp(44px,5vw,80px) var(--gut) clamp(40px,4.5vw,72px);
    display:flex;flex-direction:column;align-items:flex-start;gap:14px;
    border-top:1px solid var(--line-soft);
  }
  .rows-three .row + .row{border-left:1px solid var(--line-soft)}
  .rows-three .row .t{font-size:clamp(34px,3.6vw,56px);margin-bottom:6px}
  .rows-three .row .d{max-width:30ch}
  .rows-three .row .go{margin-top:auto;padding-top:22px}
  /* no stretching rules here — the boxes are the rules; the sunrise still
     rises off the bottom edge, where the footer begins */
  .rows-three .row::after,.rows-three .row .rule-top{display:none}
  .rows-three .row::before{inset:0;width:auto;transform:none}
  .rows-three .row:hover .t{transform:translateX(8px)}
  .rows-three .row:hover .d{transform:translateX(6px)}
  .rows-three .row:hover .go{transform:translateX(4px)}
}

/* ── More headlines under a story: on hover the row lights evenly in
   copper from edge to edge of the window, like the menu's rows, and the
   rules above and below run out to the edges ── */
.rows-more .row::before{top:0;bottom:0;background:rgba(232,169,133,.14);background-image:none}
.rows-more .row:first-child::before{top:0;background-image:none}
@media(hover:hover) and (pointer:fine){
  .rows-more .row:has(+ .row:hover)::after,.rows-more .row:hover .rule-top{background:var(--accent)}
}

/* with the text links on the bar there is no need for the burger — except
   on the home hero, where the bar is away and the burger is the only way in */
@media(min-width:1000px){
  .burger{display:none}
  .is-home.over-hero .burger{display:grid}
  .top .right{padding-right:0}
}


/* the playlist intro sits level with the middle of the player */
.pl-intro{align-self:center}
.pl-intro .label{margin-bottom:0}
.pl-intro .label + .body{margin-top:36px}
.pl-intro .body a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* ── the hero on a phone, round two (23 Oct). Phone only; desktop untouched. ── */
@media(max-width:899px){
  /* the turning B, top left, instead of the logotype while over the hero */
  .h2-mark{display:block;position:absolute;z-index:4;--size:68px;
    top:calc(var(--ntop) - 14px);left:calc(var(--gut) - 8px);margin:0}
  .is-home.over-hero .top .brand{opacity:0;pointer-events:none}
  /* more shade from the top for the B and the burger, and from the foot for the words */
  .h2-img::after{background:linear-gradient(180deg,rgba(12,11,10,.72) 0,rgba(12,11,10,.38) 13%,rgba(12,11,10,0) 30%,rgba(12,11,10,0) 40%,rgba(12,11,10,.55) 58%,rgba(12,11,10,.86) 76%,rgba(12,11,10,.95) 100%)}
  /* colour straight away — the black-and-white-until-hover is a desktop idea */
  .h2 .hs-c,.h2 .hslide.focus-in.is-sharp .hs-c{filter:none}
  .h2 .hs-bw{opacity:0}
  /* everything sits lower: the words, then the button row, then the bars at the very foot */
  .h2-side{row-gap:16px;padding-bottom:max(14px,env(safe-area-inset-bottom))}
  .hhead{gap:14px}
  .hh-date,.hh-next{color:#fff}
  .hh-acts{margin-top:18px}
  .hh-acts .btn-sheen{margin-top:0;padding:11px 18px;font-size:10px;gap:9px}
  .hh-acts .btn-sheen svg{width:12px;height:12px}
  .hh-next{line-height:1}
  .hh-bar b{display:none}
  .hh-bar{padding-top:0}
  .hh-bars{padding-bottom:0}
  .h2-foot{align-items:flex-end}
  .ar-scroll span{display:none}
  .ar-scroll{margin-right:calc(var(--gut) * -.55)}
  .ar-scroll i{height:30px}
}

/* ── phone, round three (23 Oct). Phone only. ── */
@media(max-width:899px){
  /* quotes slide side to side and fade; direction follows the swipe */
  .qslides{touch-action:pan-y}
  .qleather{overflow-x:clip}
  .qslide{transform:translateX(56px)}
  .qslide.is-out{transform:translateX(-56px)}
  .qslides[data-dir="prev"] .qslide{transform:translateX(-56px)}
  .qslides[data-dir="prev"] .qslide.is-out{transform:translateX(56px)}
  .qslide.is-on,.qslides[data-dir="prev"] .qslide.is-on{transform:none}
  /* Guillaume edge to edge, coming up in colour once he's on screen */
  .about-home .gport{margin-inline:calc(-1 * var(--gut));width:auto}
  .about-home.is-colour .gport img{filter:none;transform:scale(1.03)}
  /* the system strip: no label, no fades at the edges */
  .room-head .label{display:none}
  .room-strip-wrap::before,.room-strip-wrap::after{display:none}
}
@media(max-width:759px){
  /* the foot of the page: PRIVACY TERMS · BACK TO TOP, then © and the credit, smaller */
  .foot-base.grid{row-gap:0}
  .foot-base .foot-baselinks{grid-column:1/-1;grid-row:1;display:flex;width:100%}
  .foot-base .foot-baselinks .foot-top{margin-left:auto}
  .foot-base .foot-copy{grid-row:2;grid-column:1/-1;justify-self:start;white-space:nowrap;margin-top:26px;font-size:9px;letter-spacing:.08em}
  .foot-base .foot-credit{grid-row:2;grid-column:1/-1;justify-self:end;white-space:nowrap;margin-top:26px;font-size:9px;letter-spacing:.08em}
}
@media(min-width:760px){.foot-base .foot-credit{display:none}}

/* ── phone, round four (23 Oct). Phone only. ── */
@media(max-width:699px){
  /* the brand tiles: black and white, the one in the middle of the screen in colour, eased in */
  .mtile.is-centre img{filter:none;transform:scale(1.035)}
  .mtile.is-centre .mt-mark{opacity:.95}
  /* the two buttons side by side and smaller; the words sit lower */
  .mt-text{bottom:18px;left:20px;right:20px}
  .mt-links{margin-top:14px}
  .mt-links-in{flex-wrap:nowrap;gap:8px}
  .mt-links .btn{padding:9px 12px;font-size:9px;letter-spacing:.08em;gap:6px;white-space:nowrap}
  .mt-links .btn svg{width:11px;height:11px}
}
@media(max-width:899px){
  /* the bar: near-solid cream, so it reads over anything; the logotype always in it once it's showing */
  .top.stuck{background:rgba(245,241,234,.96);background:color-mix(in srgb,var(--bg) 96%,transparent)}
}
@media(max-width:899px){
  /* the landing picture pulls focus from a blur: start it oversized so the
     blur's soft edge is off-screen, and put dark behind it, not cream */
  .h2-img{background:#1A1715}
  .hslide.focus-in .hs-c{transform:scale(1.14)}
}
@media(max-width:899px){
  /* the hero stops just short of the screen's foot, so the leather's stitched
     edge shows below it — that says "there's more" — and the scroll line goes */
  .h2,.h2-side{min-height:calc(100vh - 26px);min-height:calc(100svh - 26px)}
  .ar-scroll{display:none}
}

/* ── phone hero, round five (23 Oct). Phone only. ── */
@media(max-width:899px){
  .h2-img::after{background:radial-gradient(140px 120px at 48px 72px,rgba(12,11,10,.55),rgba(12,11,10,0) 100%),linear-gradient(180deg,rgba(12,11,10,.88) 0,rgba(12,11,10,.66) 12%,rgba(12,11,10,.28) 24%,rgba(12,11,10,0) 34%,rgba(12,11,10,0) 40%,rgba(12,11,10,.55) 58%,rgba(12,11,10,.86) 76%,rgba(12,11,10,.95) 100%)}
  .hero-swipe,.h2{touch-action:pan-y}
  /* READ THE STORY and NEXT: one size, one tracking, one arrow */
  .hh-acts .btn-sheen,.hh-next{font-size:10px;letter-spacing:.14em;line-height:1}
  .hh-next svg,.hh-acts .btn-sheen svg{width:12px;height:12px}
  /* the story bars across the whole width, hairline-thin */
  .h2-foot{display:block}
  .hh-bars{width:100%;flex:none}
  .hh-bar i{height:1px}
  /* the date line smaller, tighter round its dots */
  .hh-date{font-size:9px;letter-spacing:.12em;word-spacing:-.25em}
}

@media(max-width:899px){
  /* the stuck bar on phones: glass, but with a light cream in it so it reads over
     anything — plain rgba, nothing a phone browser might not understand */
  .top.stuck{background-color:rgba(245,241,234,.82) !important;
    -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%)}
}
@media(max-width:899px){
  /* the system strip on phones: one card at a time, always centred — a swipe
     moves exactly one card, never leaves you between two */
  .room-strip{scroll-snap-type:x mandatory;padding-inline:11vw;scroll-padding-inline:0}
  .sysc{flex:0 0 78vw;scroll-snap-align:center;scroll-snap-stop:always}
}
.menu-ig-cu{display:none}
/* ── the menu on phones (23 Oct) ── */
@media(max-width:899px){
  .menu-wm{display:none}
  /* Brands / Prices unfold to all seven tiles at once, three across */
  .mtiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;overflow:visible;margin-inline:0;padding:6px 0 24px}
  .mtile-b{width:auto;padding:16px 6px 14px;gap:10px;border-radius:12px}
  .mtile-b-icon{width:46px;height:46px}
  .mtile-b-name{font-size:8.5px;letter-spacing:.1em}
  .mtile-b-ext{right:7px;top:7px;width:11px;height:11px}
  /* email and phone on the left, a copper Instagram on the right */
  .menu-foot{display:grid;grid-template-columns:1fr auto;column-gap:20px;row-gap:8px;align-items:center}
  .menu-foot > a:nth-child(1){grid-row:1;grid-column:1}
  .menu-foot > a:nth-child(2){grid-row:2;grid-column:1}
  .menu-foot a{font-size:14px}
  .menu-ig{grid-row:1/3;grid-column:2;justify-self:end}
  .menu-ig > .ig:not(.menu-ig-cu),.menu-ig > span{display:none}
  .menu-ig .menu-ig-cu{display:block;width:36px;height:36px}
}
.top-mark{display:none}
/* ── phones (23 Oct): every page opens with the turning B at the top left. It
   belongs to the page, not the bar — it scrolls away with the content. The bar
   (with the logotype) slides in only once the B is well out of sight, so the
   two never overlap. The logotype sits on the content's left edge (its
   artwork carries ~8.5% left whitespace). ── */
@media(max-width:899px){
  .top-mark{display:block;position:absolute;z-index:66;--size:68px;width:var(--size);height:var(--size);
    top:calc(var(--ntop) - 14px);left:calc(var(--gut) - 8px);line-height:0}
  .is-home .top-mark{display:none}          /* the home hero has its own B */
  body:not(.is-home) .top{transform:translateY(-100%);opacity:0;pointer-events:none;
    transition:transform .45s var(--silk),opacity .35s var(--silk)}
  body.bar-in:not(.is-home) .top{transform:none;opacity:1;pointer-events:auto}
  .top .brand svg{margin-left:calc(-104px * .0847)}
}

/* ── dealers on phones (23 Oct) ── */
@media(max-width:899px){
  .dealers:not(.home-dealers) > .c6-12{position:relative;z-index:2}             /* search, filters and list above the map */
  .dtools{position:relative;z-index:3}
  .dealers:not(.home-dealers) .dmap{transition:opacity .6s var(--silk)}
  .dealers.is-over .dmap{opacity:.87}   /* once the list is over it: a touch fainter, and no dots... */
  .dealers.is-over .pin{opacity:0;transition:opacity .4s var(--silk)}
  .dealers.is-over .pin.is-hot{opacity:1}       /* ...except the dealer you've tapped */
  .dealers.is-over .dmap-pins.has-hot .pin:not(.is-hot){opacity:0}
  /* the list is simply there — no fade-in */
  .dealers:not(.home-dealers) > .c6-12.rise{opacity:1 !important;transform:none !important;transition:none !important}
  .dealers:not(.home-dealers) .pin circle.core{r:2.6;stroke-width:1}
  .dealers:not(.home-dealers) .pin circle.halo{r:4.2}
  .dname{font-weight:700;letter-spacing:-.02em}
}
@media(max-width:899px){
  /* price lists: until the site bar slides in, the list's own search bar sticks to the very top */
  body:not(.bar-in) .pl .bar{top:0}
  .pl .bar{transition:top .45s var(--silk)}
}
@media(max-width:899px){
  /* the first card starts on the headline's left edge; the rest still snap to centre */
  .room-strip{padding-left:var(--gut);scroll-padding-left:var(--gut)}
  .sysc:first-child{scroll-snap-align:start}
}
/* ── home on phones (23 Oct): the same as every other page — the hero's B
   scrolls away with the page, then the cream bar with the logotype slides
   in once it's well gone; the burger turns dark with it ── */
@media(max-width:899px){
  body.is-home .top{transform:translateY(-100%);opacity:0;pointer-events:none;
    transition:transform .45s var(--silk),opacity .35s var(--silk)}
  body.is-home.bar-in .top,body.is-home.bar-in .top.stuck{transform:none;opacity:1;pointer-events:auto;padding-top:20px;
    background-color:rgba(245,241,234,.82);border-bottom-color:var(--line-soft);
    -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%)}
  body.is-home.bar-in .top .brand{opacity:1;pointer-events:auto}
  body.is-home.bar-in .burger{top:26px}
  body.is-home.bar-in:not(.menu-open) .burger{color:var(--ink)}
}
/* ── desktop (23 Oct): every page opens with the turning B top left, in the
   page (it scrolls away under the bar); the logotype comes into the bar only
   once you've scrolled clear of it. The home page keeps its own hero B. ── */
@media(min-width:900px){
  .top-mark{display:block;position:absolute;z-index:64;--size:clamp(110px,8.5vw,140px);width:var(--size);height:var(--size);
    top:calc(var(--ntop) - var(--size) * .1);left:calc(var(--gut) - var(--size) * .105);line-height:0}
  .is-home .top-mark{display:none}
  body:not(.is-home) .top .brand{opacity:0;pointer-events:none;transition:opacity .45s var(--silk)}
  body.bar-in:not(.is-home) .top .brand{opacity:1;pointer-events:auto}
}
/* Guillaume's portrait arrives from above, out from behind the green leather, so no gap shows */
.qleather{position:relative;z-index:2}
.about-home{position:relative;z-index:1}
.about-home .gport.rise:not(.in){transform:translateY(-48px)}
/* desktop menu (23 Oct): the logotype sits at the end of the contact row, its
   letters standing on the same baseline as the email, phone and Instagram.
   An SVG's baseline is its bottom edge, so the part of the artwork below the
   letters' baseline (the y's tail and margin: 30.45% of the height, from the
   artwork — baseline at 513.85 of 738.87) is pulled below with a negative margin. */
@media(min-width:900px){
  .menu-foot{align-items:baseline}
  .menu-foot .menu-wm{position:static;margin-left:auto;--w:clamp(150px,13vw,220px);width:var(--w);line-height:normal;margin-right:calc(var(--w) * -.0847)}
  .menu-foot .menu-wm svg{display:inline-block;width:100%;height:auto;vertical-align:calc(var(--w) * 738.87 / 1920 * -.3045)}
}
@media(min-width:900px){.menu-ig{align-items:baseline}.menu-ig .ig{align-self:center}}   /* the Instagram word on the row's baseline too */
/* videos carried over from the old stories (YouTube / Vimeo), as wide as a lone picture */
.art-vid{position:relative;aspect-ratio:16/9;background:#1A1715}
.art-vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* desktop: let the system strip run to both edges of the window (html already clips sideways overflow) */
@media(min-width:900px){.playing{overflow-x:visible}}

/* desktop: before the bar arrives, the empty header must not sit over the B mark, so the mark can take you home */
@media(min-width:900px){body:not(.bar-in) .top{pointer-events:none} body:not(.bar-in) .top > *{pointer-events:auto}}

/* footer credit: inline after the copyright on desktop, its own line on phone; Santeri Lohi links out */
.foot-copy-credit{display:none}
@media(min-width:760px){.foot-copy-credit{display:inline}.foot-base .legal.foot-copy{white-space:nowrap}}
.foot-sep{display:inline-block;margin-inline:1.4em;opacity:.55}
.foot-base .foot-copy a,.foot-base .foot-credit a{color:rgba(246,241,234,.95);text-decoration:none}
@media(hover:hover){.foot-base .foot-copy a:hover,.foot-base .foot-credit a:hover{color:var(--copper)}}