/* RPM Analogue Audio: shared styles */
/* Colours and fonts from the current rpmanalogue.com */
:root{
  --tone:#F25500; --tone-ink:#FFFFFF; --grey:#F3F3F3; --white:#FFFFFF; --salmon:#F29D80; --orange:#F25500; --ink:#151515; --muted:#666;
  --display:"Antonio","Arial Narrow",Arial,sans-serif;
  --wide:"Syncopate","Arial Black",Arial,sans-serif;
  --body:"DM Sans",Futura,"Century Gothic",Helvetica,Arial,sans-serif;   /* body text: geometric like Futura, bigger x-height (trial 30 Oct) */
  --head:"Antonio","Arial Narrow",Arial,sans-serif;   /* headlines: Antonio, as on the home page (trial 30 Oct; was Bricolage Grotesque) */
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--salmon);color:var(--ink);font-family:var(--body);font-size:clamp(17px,15.5px + .35vw,19px);line-height:1.7;font-optical-sizing:auto}
img{max-width:100%}

/* ---- Collage, shared by every section ---- */
.collage{position:absolute;display:grid;grid-template-columns:repeat(var(--cols,6),1fr);gap:clamp(8px,1.2vmax,16px);transform:rotate(var(--tilt,-14deg))}
.collage img{width:100%;aspect-ratio:1;object-fit:cover;display:block;border-radius:2px}
.collage.empty{inset:0;transform:none;background:repeating-linear-gradient(-14deg,var(--tone) 0 60px,rgba(0,0,0,.12) 60px 64px),var(--tone)}
.collage.empty span{font-family:var(--wide);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;opacity:.9;position:absolute;bottom:22%;right:24px}
.tint{position:absolute;inset:0;background:var(--tone);mix-blend-mode:multiply;opacity:.42;pointer-events:none}
.shade{position:absolute;inset:0;pointer-events:none}

/* ---- Hi-fi collage: fixed behind the top of the page, slides up as you scroll ---- */
.bg{position:fixed;inset:0;overflow:hidden;background:var(--salmon);z-index:-1}
.bg .mover{position:absolute;inset:0;will-change:transform}
.bg .collage{top:-60vmax;left:50%;width:190vmax;margin-left:-95vmax;transform-origin:50% 190vmax}
.bg .shade{background:linear-gradient(180deg,rgba(0,0,0,.5) 0,rgba(0,0,0,.15) 38%,rgba(0,0,0,0) 60%),linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,.1) 60%,rgba(0,0,0,0))}

/* ---- Top bar ---- */
.masthead{position:relative;z-index:5;padding:calc(14px + env(safe-area-inset-top,0px)) clamp(16px,5vw,60px) 0;background:var(--bar);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.mast-row{display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{margin:0;flex:0 1 500px;min-width:0}
.logo img{display:block;width:100%;height:auto;filter:drop-shadow(0 3px 10px rgba(0,0,0,.55))}
.topnav{display:flex;flex-wrap:nowrap;justify-content:flex-end;gap:clamp(12px,1.6vw,24px)}
.topnav a,.contact-row a,.sidemenu a{font-family:var(--wide);font-weight:400;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--white);text-decoration:none;opacity:.92;white-space:nowrap}
.topnav a:hover,.contact-row a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.contact-row{display:flex;flex-wrap:wrap;gap:6px 26px;padding:10px 0 12px;margin-top:12px;border-top:1px solid rgba(255,255,255,.12)}
@media (max-width:1060px){.topnav{display:none}}

/* edge tab + slide-in menu */
.edgetab{position:fixed;right:0;top:58%;z-index:20;transform:translateY(-50%);writing-mode:vertical-rl;font-family:var(--wide);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--white);background:var(--bar);border:1px solid rgba(255,255,255,.25);border-right:0;border-radius:8px 0 0 8px;padding:14px 7px;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .25s}
.edgetab.show{opacity:1;pointer-events:auto}
@media (max-width:1060px){.edgetab{opacity:1;pointer-events:auto;padding:16px 10px}}
@media (max-width:600px){.btn{padding:15px 26px}}
.sidemenu[hidden]{display:none!important}
.sidemenu{position:fixed;top:0;right:0;bottom:0;z-index:30;width:min(300px,86vw);background:rgba(17,17,17,.94);padding:calc(56px + env(safe-area-inset-top,0px)) 28px 28px;display:flex;flex-direction:column;gap:18px;box-shadow:-10px 0 30px rgba(0,0,0,.4)}
.sidemenu a{font-size:.72rem}
.sideclose{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:16px;background:none;border:0;color:#fff;font-size:1.8rem;line-height:1;cursor:pointer}
.sidecontact{margin-top:auto;display:flex;flex-direction:column;gap:12px;border-top:1px solid rgba(255,255,255,.15);padding-top:18px}
.contact-row .contact-btn,.sidecontact .contact-btn{border:1px solid rgba(255,255,255,.55);border-radius:999px;padding:5px 14px;margin:-5px 0;opacity:1}   /* Contact us: a small outlined pill */
.contact-row .contact-btn{margin-left:auto}.sidecontact .contact-btn{align-self:flex-start;margin:0 0 4px}
/* Facebook and Instagram in orange beside Contact us; Contact us solid orange to balance the orange tone arm in the logo */
.contact-row .social{margin-left:auto;display:flex;gap:14px;align-items:center}
.social a{display:grid;opacity:1}
.social svg{width:18px;height:18px;fill:var(--orange,#F25500);transition:transform .15s}
.social a:hover svg{transform:scale(1.12)}
.contact-row .social + .contact-btn{margin-left:0}
.contact-row .contact-btn,.sidecontact .contact-btn{background:#F25500;border-color:#F25500;color:#fff}
.contact-row .contact-btn:hover,.sidecontact .contact-btn:hover{background:#d94c00;border-color:#d94c00;text-decoration:none}
.sidecontact .social{display:flex;gap:18px;margin-top:4px}.sidecontact .social svg{width:22px;height:22px}
/* Phones: the address (opens Google Maps) small, the phone number tucked under it, and a small Contact us pill on the right. The social icons are in the slide-in menu and the footer */
@media (max-width:640px){
  .contact-row .social{display:none}
  .contact-row{display:grid;grid-template-columns:1fr auto;column-gap:10px;row-gap:0;align-items:center}
  .contact-row a{font-size:var(--bar-fs,9px);letter-spacing:.08em}.contact-row .wide-only{display:none}
  .contact-row > a:first-child{grid-column:1;grid-row:1;line-height:1.15}
  .contact-row a[href^="tel:"]{grid-column:1;grid-row:2;line-height:1.15;justify-self:start}
  .contact-row .contact-btn{display:inline-block;grid-column:2;grid-row:1 / span 2;margin:0;padding:3px 9px;line-height:1.2;font-size:8px}   /* 1px smaller than the address */
}

/* ---- Hero ---- */
.hero{min-height:calc(100vh - 120px);min-height:calc(100svh - 120px);display:flex;align-items:center;color:var(--white)}
.words{padding:clamp(24px,6vw,90px);max-width:1200px;display:grid;gap:clamp(10px,2vw,22px)}
.big{font-family:var(--display);font-weight:700;font-size:clamp(4rem,14vw,11rem);line-height:.92;margin:clamp(10px,2vw,24px) 0 clamp(18px,3vw,36px);text-shadow:0 2px 24px rgba(0,0,0,.25)}
.big span{display:block}

/* ---- Buttons and panels ---- */
.btns{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.btn{font-family:var(--wide);font-weight:400;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--tone-ink);background:var(--tone);padding:12px 26px;border-radius:50%;display:inline-block;border:1.5px solid var(--tone);line-height:1.1;text-align:center;transition:filter .15s,transform .15s}
.btn:hover{transform:translateY(-1px)}
.btn:hover{filter:brightness(1.08)}
.btn.alt{background:transparent;color:var(--white);border-color:rgba(255,255,255,.85)}
.panel .btn.alt{color:var(--ink);border-color:var(--tone)}
.panel{position:relative;background:var(--white);border-radius:10px;max-width:600px;width:100%;padding:clamp(18px,2.4vw,28px);box-shadow:0 18px 50px rgba(0,0,0,.3);display:grid;gap:10px}
.kicker{font-family:var(--wide);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tone);margin:0}
h2{font-family:var(--head);font-weight:760;font-stretch:80%;font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.05;margin:0}
p{margin:0}

/* Panels floating over the fixed hi-fi collage */
.over{padding:clamp(40px,8vh,90px) clamp(16px,5vw,60px);display:grid;justify-items:start}
.over.right{justify-items:end}
#about.over{justify-items:center}

.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:20px;align-items:center}
.feature img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;display:block}
.price{font-family:var(--head);font-stretch:80%;font-size:1.25rem;font-weight:700}
@media (max-width:620px){.feature{grid-template-columns:1fr}}

/* ---- Bands: a section with its own collage (repairs, records, studio, Blue Room, bakery) ---- */
.band{position:relative;overflow:hidden;padding:clamp(80px,14vh,150px) clamp(16px,5vw,60px);display:grid;justify-items:start;align-items:center;background:var(--tone,#2a2a2a);min-height:80vh}
.band.right{justify-items:end}

.band .mover{position:absolute;inset:-40% 0;will-change:transform}
.band .collage{top:-25%;left:-30%;width:160%}
.band .collage.empty{top:0;left:0;width:auto}
.band .shade{background:rgba(0,0,0,.32)}
/* Records: bigger photos, gentler angle, lighter wash and a touch more contrast so sleeves read */
.band.clear .tint{opacity:.22}
.band.clear .shade{background:rgba(0,0,0,.16)}
.band.clear .collage img{filter:contrast(1.12) saturate(1.12)}
/* Studio and Blue Room: landscape frames so whole rooms show, not close crops */
.band.wide .collage img{aspect-ratio:3/2}

footer{background:var(--ink);color:#ddd;padding:40px clamp(16px,5vw,60px);display:flex;flex-wrap:wrap;gap:10px 30px;justify-content:space-between;font-size:.95rem}
footer b{font-family:var(--head);font-stretch:75%;font-size:1.3rem;color:var(--white)}

/* About page */
.panel.wide{max-width:780px}
.lead-photo{width:100%;height:auto;border-radius:6px;display:block}
.credit{font-size:.8rem;color:var(--muted)}
.story p{margin:0 0 .9em}
.signoff{font-family:var(--head);font-weight:700;font-stretch:80%;font-size:1.2rem}

/* Home: the About RPM introduction sits wider than the other panels */

/* Panels: 70% wide, alternating left and right (the About RPM introduction is the exception) */
.over .panel,.band .panel{max-width:70%}
#story.over{justify-items:center}
#story .panel{max-width:780px}
@media (max-width:700px){.over .panel,.band .panel{max-width:100%}}
#about .panel{max-width:min(80%,1100px)}
@media (max-width:700px){#about .panel{max-width:100%}}

/* Buttons chosen in the editing area, inside the story box: centred, wrapping into balanced rows */
.linkstrip{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:10px;padding-top:18px;border-top:1px solid #eee}
.lrow{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.linkstrip .btn{padding:11px 15px;letter-spacing:.1em}
@media (max-width:600px){.linkstrip,.lrow{display:contents}.linkstrip{display:grid;grid-template-columns:1fr 1fr}.linkstrip .btn{padding:14px 10px}}

/* Stock: gallery cards and item page. Photos sit whole on a pale backing (hi-fi is wide and flat) and zoom toward the pointer. */
#stock.over,#item.over{justify-items:center}
#stock.over,#item.over{padding-left:clamp(12px,3vw,40px);padding-right:clamp(12px,3vw,40px)}
.over .panel.shop{max-width:1600px;gap:14px}
@media (max-width:700px){.over .panel.shop{max-width:100%}}
.panel.shop .kicker a{color:inherit;text-decoration:none}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips a{font-family:var(--wide);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);text-decoration:none;border:1px solid #ddd;border-radius:999px;padding:8px 12px}
.chips a[aria-current]{background:var(--tone);border-color:var(--tone);color:var(--tone-ink)}
.chips span{opacity:.55}
.cards{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 18px}   /* four across, like the stock front page */
@media (max-width:1000px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}}
.card{display:grid;gap:4px;color:inherit;text-decoration:none}
.card b{font-family:var(--head);font-stretch:85%;font-size:1.1rem;line-height:1.15}
.card .sum{font-size:.88rem;color:var(--muted);line-height:1.35}
.card .price{font-size:1.05rem}
.ph,.stage{position:relative;aspect-ratio:4/3;background:rgba(244,242,236,.9);border-radius:6px;overflow:hidden;display:block}
.ph img,.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform-origin:var(--ox,50%) var(--oy,50%);transition:transform .35s ease-out}
.ph.hasimg,.stage{cursor:zoom-in}
.card:hover .ph img,.stage:hover img{transform:scale(2.4)}
.card:focus-visible{outline:2px solid var(--tone);outline-offset:4px;border-radius:6px}
.tag{position:absolute;top:10px;left:10px;font-style:normal;font-family:var(--wide);font-size:.52rem;letter-spacing:.14em;text-transform:uppercase;background:var(--tone);color:var(--tone-ink);padding:6px 9px;border-radius:999px}
@media (hover:none){.card:hover .ph img,.stage:hover img{transform:none}.zoomhint{display:none}}
.itemgrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(18px,3vw,36px);align-items:start}
@media (max-width:820px){.itemgrid{grid-template-columns:1fr}}
.itemtext{display:grid;gap:10px}
.itemtext .price{font-size:1.6rem;margin:0}
.itemtext p{margin:0}
.views{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.views button{padding:0;width:78px;height:58px;border:2px solid transparent;border-radius:5px;background:#f4f2ec;cursor:pointer;opacity:.7;overflow:hidden}
.views button[aria-current="true"],.views button:hover{opacity:1;border-color:var(--tone)}
.views img{width:100%;height:100%;object-fit:contain;display:block}
.zoomhint{font-size:.8rem;color:var(--muted);margin:8px 0 0}
.sorter{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:end;padding:12px 0 2px;border-top:1px solid #eee}
.sorter label{display:grid;gap:4px;font-family:var(--wide);font-size:.52rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sorter select{font:inherit;font-family:var(--body);font-size:.95rem;letter-spacing:0;text-transform:none;color:var(--ink);padding:8px 10px;border:1px solid #ccc;border-radius:8px;background:#fff;min-width:150px}
.sorter .count{margin-left:auto;font-size:.85rem;color:var(--muted)}
.card b small{font-family:var(--body);font-stretch:100%;font-weight:400;font-size:.8rem;color:var(--muted)}
@media (max-width:520px){.sorter label{flex:1 1 45%}.sorter select{min-width:0;width:100%}.sorter .count{margin-left:0}}

/* Google Material Symbols */
.ms{font-family:"Material Symbols Outlined";font-weight:normal;font-style:normal;font-size:1.4em;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;vertical-align:middle;-webkit-font-smoothing:antialiased;font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24}
.ms.sm{font-size:1.5em;margin:-.3em .15em -.3em 0}
.ms.fill{font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 24}
h2 .ms{font-size:.95em;color:var(--tone);vertical-align:-.12em}

/* Product types: the shop front page and the home page "In stock" box */
.typetiles{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.typetiles a{display:grid;color:inherit;text-decoration:none;border-radius:8px;overflow:hidden;background:#f4f2ec;transition:transform .15s,box-shadow .15s}
.typetiles a:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.14)}
.tt-ph{aspect-ratio:4/3;display:block;position:relative}
.tt-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:10px;box-sizing:border-box}
.tt-label{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--tone);color:var(--tone-ink)}
.tt-label b{font-family:var(--head);font-stretch:85%;font-size:1.05rem;line-height:1.1;flex:1}
.tt-label i{font-style:normal;font-family:var(--wide);font-size:.55rem;letter-spacing:.1em;opacity:.85}
.typetiles.small{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.typetiles.small .tt-label b{font-size:.92rem}
/* The stock page's own tiles: four across, each photo filling its tile, the name in the body font */
.tt4 .typetiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.tt4 .typetiles a{background:#222}
.tt4 .tt-ph{overflow:hidden}
.tt4 .tt-ph img{object-fit:cover;padding:0;transition:transform .3s}
.tt4 .typetiles a:hover .tt-ph img{transform:scale(1.04)}
.tt4 .tt-label b{font-family:var(--body);font-stretch:100%;font-weight:700}
@media (max-width:900px){.tt4 .typetiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.typetiles,.tt4 .typetiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tt-label{padding:8px 10px}.tt-label b{font-size:.92rem}}

/* Home page: text boxes take a darker, see-through version of the colour wash behind them, with near-white text */
.home .panel{
  --panel:color-mix(in srgb,color-mix(in srgb,var(--tone),#000 48%) 84%,transparent);
  background:var(--panel);color:rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(8px) saturate(1.15);backdrop-filter:blur(8px) saturate(1.15);
  box-shadow:0 18px 50px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08)}
.home .panel h2,.home .panel .price{color:rgba(255,255,255,.95)}
.home .panel .kicker{color:color-mix(in srgb,var(--tone),#fff 55%)}
.home .panel a:not(.btn){color:rgba(255,255,255,.95)}
.home .panel .btn.alt{color:rgba(255,255,255,.95);border-color:rgba(255,255,255,.7)}
.home .panel .btn{box-shadow:0 0 0 1px rgba(255,255,255,.18)}

/* Home page, calmer: the collages sit back as a coloured texture behind the boxes (option 1, 29 Oct; delete this block to undo) */
.home .collage img,.home .band.clear .collage img{filter:saturate(.55) brightness(.85)}
.home .tint,.home .band.clear .tint{opacity:.72}
.home .band .shade,.home .band.clear .shade{background:rgba(0,0,0,.36)}
.shop .caption{margin:8px 0 0;font-weight:600;font-size:1.02rem;line-height:1.4}
/* Item descriptions from the editor */
.story blockquote{margin:0 0 .9em;padding-left:14px;border-left:3px solid var(--tone,#F06A1C);font-style:italic}
.story ul,.story ol{margin:0 0 .9em;padding-left:1.4em}
.story a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.story .responsive-embed{position:relative;aspect-ratio:16/9;margin:0 0 .9em;background:#000;border-radius:6px;overflow:hidden}
.story .responsive-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Home page BIG 10: number one large, nine beneath in a tight three-by-three. Photos sit inside fixed frames, whatever their shape. */
#topten.over{justify-items:center}
#topten.over{padding-left:clamp(12px,3vw,40px);padding-right:clamp(12px,3vw,40px)}
.over .panel.big10{max-width:1600px;gap:clamp(14px,2vw,24px)}
.big10 header{display:grid;gap:clamp(10px,1.4vw,16px);text-align:center}
.b10-title{font-family:var(--head);font-weight:800;font-stretch:75%;font-size:clamp(3.4rem,10vw,6.5rem);line-height:.95;text-transform:uppercase;letter-spacing:-.01em;margin:0}
.b10-sub{font-family:var(--wide);font-size:clamp(.55rem,1.4vw,.68rem);letter-spacing:.16em;text-transform:uppercase;margin:0;opacity:.85}
.big10 a{color:inherit;text-decoration:none}
.b10-ph{position:relative;display:block;aspect-ratio:4/3;background:rgba(244,242,236,.9);border-radius:6px;overflow:hidden}
.b10-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:6%;box-sizing:border-box}
.b10-n{position:absolute;top:8px;left:8px;min-width:30px;height:30px;padding:0 6px;border-radius:99px;display:grid;place-items:center;font-style:normal;font-family:var(--head);font-weight:800;font-stretch:80%;font-size:1rem;background:var(--orange);color:#fff}
.b10-lead{display:grid;gap:12px}
.b10-lead .b10-ph{aspect-ratio:16/7}
.b10-lead .b10-ph img{padding:3%}
.b10-lead .b10-n{min-width:44px;height:44px;font-size:1.5rem;top:12px;left:12px}
.b10-text{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
.b10-text b{flex:1 1 320px}
.b10-text > span:not(.price):not(.btn){flex:1 1 100%;order:3}
.b10-text b{font-family:var(--head);font-weight:760;font-stretch:80%;font-size:clamp(1.6rem,3.2vw,2.4rem);line-height:1.02}
.b10-lead:hover .b10-ph,.b10-grid a:hover .b10-ph{box-shadow:0 0 0 3px var(--orange)}
.b10-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,2vw,16px)}
.b10-grid a{display:grid;gap:5px;align-content:start}
.b10-grid b{font-family:var(--head);font-weight:700;font-stretch:85%;font-size:clamp(.82rem,1.6vw,1.05rem);line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.b10-grid .price{font-size:clamp(.85rem,1.6vw,1.05rem)}
.big10 .btns{justify-content:center}
@media (max-width:620px){
  .b10-lead .b10-ph{aspect-ratio:4/3}
  .b10-grid .b10-n{min-width:22px;height:22px;font-size:.8rem;top:5px;left:5px}
}
/* Shop pages: the white box is slightly see-through, like the home page */
.panel.shop{background:rgba(255,255,255,.9)}
.itemtext .delivery{display:flex;align-items:center;gap:4px;font-weight:600;margin-top:14px;padding-top:16px;border-top:1px solid rgba(0,0,0,.12)}
.itemtext .delivery .ms{color:var(--tone)}
/* The Big 10 page: explainer 40% on the left, the list 60% on the right */
.panel.b10page{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:clamp(20px,4vw,56px);align-items:start}
.b10-about{position:sticky;top:20px;display:grid;gap:12px;align-content:start}
.b10-about .b10-title{text-align:left}
.b10-about h3{font-family:var(--head);font-weight:760;font-stretch:80%;font-size:1.4rem;line-height:1.1;margin:8px 0 0}
.b10-about .story p{margin:0 0 .8em}
.b10-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.b10-list a{display:grid;grid-template-columns:minmax(120px,38%) minmax(0,1fr);gap:clamp(12px,2vw,22px);align-items:center;color:inherit;text-decoration:none;padding-bottom:14px;border-bottom:1px solid rgba(0,0,0,.1)}
.b10-list li:last-child a{border-bottom:0;padding-bottom:0}
.b10-list a:hover .b10-ph{box-shadow:0 0 0 3px var(--orange)}
.b10-row{display:grid;gap:6px}
.b10-row b{font-family:var(--head);font-weight:760;font-stretch:80%;font-size:clamp(1.15rem,2vw,1.6rem);line-height:1.08}
.b10-row .price{font-size:1.2rem}
@media (max-width:820px){
  .panel.b10page{grid-template-columns:1fr}
  .b10-about{position:static}
}
@media (max-width:520px){.b10-list a{grid-template-columns:42% minmax(0,1fr)}.b10-row b{font-size:1.05rem}}
/* Piece page: four small contact buttons in one line (two by two on narrow phones) */
.askrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.askrow a{display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 10px;border:1.5px solid var(--tone);border-radius:50%;background:transparent;font-family:var(--wide);font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
.askrow a .ms{font-size:1.2rem;color:var(--tone)}
.askrow a.main{background:var(--tone);color:var(--tone-ink)}.askrow a.main .ms{color:var(--tone-ink)}
.askrow a:hover{background:var(--tone);color:var(--tone-ink)}.askrow a:hover .ms{color:var(--tone-ink)}
.askrow a.main:hover{background:color-mix(in srgb,var(--tone),#000 18%);border-color:color-mix(in srgb,var(--tone),#000 18%)}
@media (max-width:420px){.askrow{grid-template-columns:repeat(2,minmax(0,1fr))}}
.itemtop{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.backlink{display:inline-flex;align-items:center;gap:4px;font-family:var(--wide);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none;border:1.5px solid var(--tone);border-radius:50%;padding:6px 16px 6px 12px}
.backlink .ms{font-size:1.1rem;color:var(--tone)}
.backlink:hover{background:var(--tone);color:var(--tone-ink)}.backlink:hover .ms{color:var(--tone-ink)}
/* Repair service pages (repairs-*.php) */
.itemtext .lede{font-family:var(--head);font-weight:700;font-stretch:85%;font-size:1.3rem;line-height:1.25}
.itemtext .story h3,.svc-head{font-family:var(--head);font-weight:760;font-stretch:80%;font-size:1.25rem;line-height:1.1;margin:14px 0 6px}
.todo{outline:2px dashed var(--tone);outline-offset:4px;border-radius:4px;color:var(--muted);font-style:italic;margin:6px 4px 14px}
ul.todo{padding-left:1.6em}
.review{margin:6px 0 0;padding:14px 16px;background:rgba(0,0,0,.04);border-left:3px solid var(--tone);border-radius:0 6px 6px 0;font-style:italic;line-height:1.5}
.review cite{display:block;margin-top:6px;font-style:normal;font-weight:700;font-size:.9rem}
.svc-head{margin-top:10px}
.svc-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.svc-gallery a{display:block;aspect-ratio:1;border-radius:6px;overflow:hidden;background:rgba(244,242,236,.9)}
.svc-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .25s}
.svc-gallery a:hover img{transform:scale(1.06)}
.svc-gallery figure{margin:0;display:grid;gap:4px}.svc-gallery figcaption{font-size:.75rem;line-height:1.3}
.pg-gallery .svc-gallery{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}   /* a page's own gallery: bigger squares */
/* Photo viewer */
.lb{position:fixed;inset:0;z-index:60;background:rgba(10,10,10,.92);display:grid;place-items:center;padding:56px 56px 24px}
.lb[hidden]{display:none}
.lb img{max-width:100%;max-height:calc(100vh - 90px);object-fit:contain;border-radius:4px}
.lb button{position:absolute;background:rgba(255,255,255,.12);border:0;color:#fff;width:46px;height:46px;border-radius:50%;cursor:pointer;display:grid;place-items:center}
.lb button:hover{background:var(--tone)}
.lb-x{top:12px;right:12px}.lb-prev{left:8px;top:50%;transform:translateY(-50%)}.lb-next{right:8px;top:50%;transform:translateY(-50%)}
@media (max-width:520px){.lb{padding:56px 8px 24px}.lb-prev,.lb-next{top:auto;bottom:16px;transform:none}.svc-gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}}
/* Repairs: photos that open in the viewer */
.rp-photo{display:block;border-radius:6px;overflow:hidden;background:rgba(244,242,236,.9);cursor:zoom-in}
.rp-photo img{display:block;width:100%;height:100%;object-fit:cover}
.rp-photo.lead{aspect-ratio:auto}
.rp-photo.lead img{height:auto;max-height:80vh;object-fit:contain}
.rp-photo.lead.wide{aspect-ratio:4/3}
.rp-photo.lead.wide img{object-fit:cover}
.svc-gallery.small{grid-template-columns:repeat(auto-fill,minmax(130px,200px))}
.beforeafter{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.beforeafter figure{margin:0;display:grid;gap:6px}
.beforeafter .rp-photo.lead{aspect-ratio:4/3}
.beforeafter figcaption,.tale figcaption{font-family:var(--wide);font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(16px,3vw,32px)}
.parts section{display:grid;gap:8px;align-content:start}
.parts .rp-photo{aspect-ratio:4/3}
.parts h3,.rp-hub h3{font-family:var(--head);font-weight:760;font-stretch:80%;font-size:1.25rem;line-height:1.1;margin:6px 0 0}
.parts p{margin:0}
.rp-photo.hero{aspect-ratio:auto;border-radius:8px;min-height:0;display:block}   /* not the home page .hero: that one is a full screen tall, which left a big empty box under page photos */
.rp-photo.hero img{height:auto;max-height:78vh;object-fit:cover}
.tale-head{display:grid;gap:8px;max-width:62rem}
.tale-head h2{font-size:clamp(2.2rem,4.6vw,4rem);line-height:.98}
.tale-head .lede{font-size:clamp(1.15rem,1rem + .6vw,1.5rem);font-weight:500;line-height:1.35;margin:0}
.tale{display:grid;gap:clamp(28px,4vw,48px)}
.chap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,3.5vw,48px);align-items:start;padding-top:clamp(20px,3vw,32px);border-top:1px solid rgba(0,0,0,.1)}
.chap-text{font-size:clamp(1.1rem,1rem + .4vw,1.3rem);line-height:1.75}
.chap-text p{margin:0 0 1em}
.chap-text p:last-child{margin-bottom:0}
.chap-media{display:grid;gap:14px}
.chap-media.two{grid-template-columns:1fr 1fr}
.chap-media figure{margin:0;display:grid;gap:6px}
.chap-media .rp-photo.inline{aspect-ratio:auto}
.chap-media .rp-photo.inline img{height:auto}
.pull{margin:0;font-family:var(--head);font-weight:760;font-stretch:80%;font-size:clamp(1.6rem,2.8vw,2.4rem);line-height:1.05;color:color-mix(in srgb,var(--tone),#000 42%);border-left:4px solid var(--tone);padding-left:18px}
@media (max-width:760px){.chap{grid-template-columns:1fr}.chap-media.two{grid-template-columns:1fr 1fr}}
/* Repairs front page */
.rp-hub .itemtext .story p{margin:0 0 .8em}
.rp-how{display:grid;gap:10px;padding:18px;border-radius:8px;background:color-mix(in srgb,var(--tone),transparent 82%)}
.rp-how p{margin:0;font-weight:600}
.rp-lists{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(16px,3vw,32px)}
.rp-lists section,.rp-speakers{display:grid;gap:8px;align-content:start}
.rp-lists ul,.rp-speakers ul{margin:0;padding-left:1.2em;display:grid;gap:5px;line-height:1.4}
.rp-no ul{list-style:"✕  "}
.rp-burnt{aspect-ratio:16/9;margin-top:6px}
.rp-onbench img{object-position:50% 82%}   /* tall photo in a wide frame: show the amp on the bench */
.rp-speakers ul{columns:2 300px;display:block}
.rp-speakers li{margin-bottom:5px;break-inside:avoid}
.rp-tiles .tt-label b small{display:block;font-family:var(--body,inherit);font-stretch:100%;font-weight:400;font-size:.8rem;opacity:.85;margin-top:2px}
.rp-tiles .tt-ph img{object-fit:cover;padding:0}
.rp-reviews{display:grid;gap:10px}
.tale .delivery{display:flex;align-items:center;gap:4px;font-weight:600;margin-top:22px;padding-top:16px;border-top:1px solid rgba(0,0,0,.12)}
.chap-media.two .rp-photo.inline{aspect-ratio:4/3}
.chap-media.two .rp-photo.inline img{height:100%;object-fit:cover}
.tale .askrow{max-width:760px}
/* Home page "In stock": full width and centred like the Big 10, every type with stock in tidy rows */
#instock.over{justify-items:center;padding-left:clamp(12px,3vw,40px);padding-right:clamp(12px,3vw,40px)}
.over .panel.instock{max-width:1600px;gap:clamp(14px,2vw,22px)}
.instock header{display:grid;gap:8px;text-align:center;justify-items:center}
.instock header h2{font-size:clamp(2rem,4.4vw,3.6rem);line-height:1}
.instock header p:not(.kicker){margin:0;font-size:clamp(1.05rem,1rem + .3vw,1.25rem)}
.instock .typetiles,.instock .typetiles.small{--cols:6;--gap:clamp(8px,1.2vw,14px);display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap)}
.instock .typetiles li{flex:0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols))}   /* a short last row sits in the middle */
.instock .btns{justify-content:center}
@media (max-width:1100px){.instock .typetiles,.instock .typetiles.small{--cols:4}}
@media (max-width:700px){.instock .typetiles,.instock .typetiles.small{--cols:3}}
@media (max-width:460px){.instock .typetiles,.instock .typetiles.small{--cols:2}}
/* No price yet: a quiet line, not a headline (a real £ price keeps the bold headline style) */
.askprice{font-size:.9rem;color:var(--muted);margin:0}
/* What's On */
.wo-head{display:grid;gap:10px;justify-items:start}
.wo-head h2{font-size:clamp(2.4rem,5vw,4rem);line-height:.95}
.wo-month{font-family:var(--head);font-weight:700;font-size:clamp(1.3rem,2vw,1.7rem);margin:12px 0 0;padding-top:14px;border-top:1px solid rgba(0,0,0,.1)}
.wo-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.wo-list a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(12px,2vw,22px);align-items:center;padding:12px;border-radius:10px;background:rgba(255,255,255,.6);border:1px solid rgba(0,0,0,.08);color:inherit;text-decoration:none;transition:border-color .15s,transform .15s}
.wo-list a:hover{border-color:var(--tone);transform:translateY(-1px)}
.wo-date{display:grid;justify-items:center;align-content:center;width:68px;height:68px;border-radius:8px;background:var(--tone);color:var(--tone-ink);line-height:1;font-family:var(--wide);font-size:.55rem;letter-spacing:.14em;text-transform:uppercase}
.wo-date b{font-family:var(--head);font-size:2rem;letter-spacing:0}
.wo-text{display:grid;gap:3px}
.wo-text b{font-family:var(--head);font-weight:700;font-size:clamp(1.3rem,2.2vw,1.8rem);line-height:1.05}
.wo-space{font-family:var(--wide);font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--tone),#000 25%)}
.wo-rpt{display:flex;align-items:center;gap:4px;font-size:.9rem;color:var(--muted);margin:0}
.wo-list img{width:clamp(70px,12vw,130px);aspect-ratio:1;object-fit:cover;border-radius:8px}
.wo-none{font-size:1.15rem}
.ev-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(20px,3.5vw,48px);align-items:start}
.ev-body:not(:has(.ev-main)){grid-template-columns:minmax(0,1fr)}
.ev-main{aspect-ratio:auto}
.ev-main img{height:auto;max-height:85vh;object-fit:contain}
.ev-text{display:grid;gap:14px}
@media (max-width:760px){.ev-body{grid-template-columns:1fr}.wo-list a{grid-template-columns:auto minmax(0,1fr)}.wo-list img{display:none}}
/* Home page What's On */
#whatson.over{justify-items:center;padding-left:clamp(12px,3vw,40px);padding-right:clamp(12px,3vw,40px)}
.over .panel.whatson{max-width:1600px;gap:clamp(14px,2vw,22px)}
.whatson header{display:grid;gap:8px;text-align:center;justify-items:center}
.whatson header h2{font-size:clamp(2.2rem,5vw,4rem);line-height:.95}
.wo-pinned{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(16px,3vw,36px);align-items:center;color:inherit;text-decoration:none}
.wo-pinned img{width:100%;height:auto;max-height:70vh;object-fit:contain;border-radius:8px;display:block}
.wo-pinned .wo-text b{font-size:clamp(2rem,4vw,3.4rem)}
.wo-pinned .wo-text span:not(.wo-space){font-size:1.15rem}
.wo-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.wo-cards a{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:12px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:inherit;text-decoration:none}
.wo-cards a:hover{border-color:var(--tone)}
.home .whatson .wo-space{color:color-mix(in srgb,var(--tone),#fff 45%)}
.home .whatson .wo-rpt{color:rgba(255,255,255,.75)}
.whatson .btns{justify-content:center}
@media (max-width:760px){.wo-pinned{grid-template-columns:1fr}}
.wo-sub,.ev-sub{font-weight:600;color:color-mix(in srgb,var(--tone),#000 30%)}
.home .whatson .wo-sub{color:color-mix(in srgb,var(--tone),#fff 55%)}
.ev-sub{font-size:clamp(1.15rem,1rem + .6vw,1.5rem);margin:0}
.ev-run{display:grid;gap:10px}
.wo-list a[aria-current]{border-color:var(--tone);box-shadow:0 0 0 2px var(--tone) inset}
.wo-here{font-family:var(--wide);font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* Story pages changed in the editing area (records.php etc., inc-pages.php) */
.story-hero{margin:0;display:grid;gap:6px}
.story-hero figcaption{font-family:var(--wide);font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:right}
.chap-head{font-family:var(--head);font-weight:600;font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem);line-height:1.05;margin:0 0 .5em}
.chap.solo{grid-template-columns:minmax(0,62rem)}
.chap:not(.solo){align-items:center}   /* the text sits halfway down beside its photo */
@media (min-width:761px){.chap.flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.chap.flip .chap-media{order:-1}}
.pull cite{display:block;margin-top:10px;font-family:var(--wide);font-style:normal;font-weight:400;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.chap-media .pull{margin-top:6px}
/* Link to an enquiry form under the contact buttons */
.formlink{margin:10px 0 0;font-size:.95rem}.formlink a{color:inherit;font-weight:600;text-underline-offset:3px}.formlink .ms{vertical-align:-3px;color:var(--tone)}
footer a{color:inherit}
/* Footer: the site's main areas in four short columns (two by two on phones) */
footer.sitefoot{display:block;padding:44px clamp(16px,5vw,60px) 28px;background:var(--ink);color:#ddd}
.footnav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px clamp(16px,3vw,40px);max-width:1200px;margin:0 auto}
.footnav div{display:grid;align-content:start;gap:9px}
.footnav h2{font-family:var(--wide);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--white);margin:0 0 4px}
.footnav a,.footnav span{color:#ccc;text-decoration:none;font-size:.95rem;line-height:1.35}
.footnav a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.footsmall{max-width:1200px;margin:32px auto 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 20px;font-size:.8rem;color:#999}
@media (max-width:760px){.footnav{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Band panel with a small right-hand column: the next event's flyer (home page, Loaf Actually) */
.band .panel.has-aside{max-width:min(80%,780px);grid-template-columns:minmax(0,1fr) 190px;gap:clamp(16px,2.4vw,28px);align-items:start}
.panel-main{display:grid;gap:10px;align-content:start;min-width:0}
.band-ev{display:grid;gap:8px;color:inherit;text-decoration:none}
.band-ev img{width:100%;height:auto;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.22);transform:rotate(1.5deg);transition:transform .2s}
.band-ev:hover img{transform:rotate(0) scale(1.02)}
.band-ev span{display:grid;font-size:.85rem;line-height:1.35}
.band-ev small{font-family:var(--wide);font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--tone),#000 25%)}
.band-ev b{font-family:var(--head);font-size:1.15rem;font-weight:600;line-height:1.15}
@media (max-width:700px){.band .panel.has-aside{max-width:100%;grid-template-columns:minmax(0,1fr) 120px}}
@media (max-width:420px){.band .panel.has-aside{grid-template-columns:1fr}.band-ev{grid-template-columns:110px 1fr;align-items:center}}
.home .band-ev small{color:color-mix(in srgb,var(--tone),#fff 55%)}
/* Event status: Today / On now / Finished at 1pm today / This was on… */
.ev-status{display:inline-block;justify-self:start;font-size:.78rem;font-weight:700;line-height:1.3;padding:3px 10px;border-radius:99px;margin-top:4px;background:var(--tone,#2F78B7);color:var(--tone-ink,#fff)}
.ev-status.now{background:#2e7d32;color:#fff}
.ev-status.done,.ev-status.past{background:#e9e6df;color:#444}
.ev-status.big{font-size:.95rem;padding:6px 14px;margin:6px 0 0}
.ev-status.big a{color:inherit}
.wo-recent{margin-top:28px}
.wo-past li{opacity:.8}
.ev-status.few{background:#F06A1C;color:#fff}
.ev-status.soldout{background:#151515;color:#fff}
.ev-other{margin:8px 0 0;font-weight:600}
/* Home What's On: every card the same height, even across rows */
.wo-cards{grid-auto-rows:1fr}
.wo-cards li{display:grid}
.wo-cards a{height:100%;box-sizing:border-box;align-items:start}
/* …and laid out to suit how many there are, so none sits on its own: computers one row (four or three across), tablets two by two */
@media (min-width:1000px){.wo-cards.n4{grid-template-columns:repeat(4,minmax(0,1fr))}.wo-cards.n3{grid-template-columns:repeat(3,minmax(0,1fr))}.wo-cards.n2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:640px) and (max-width:999px){.wo-cards.n4,.wo-cards.n2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){.wo-cards{grid-auto-rows:auto}}
@media (min-width:1000px){.wo-cards.n4 a{grid-template-columns:1fr;align-content:start}.wo-cards.n4 .wo-date{justify-self:start}}

/* PHONE LAYER (5 Nov, from the home page tests): the same sizes on every page.
   Small capitals 11px, button labels 9px, reading text 15.5px, 14px padding inside boxes and between boxes and the screen edge */
@media (max-width:640px){
  body{font-size:15.5px;line-height:1.6}
  section .panel p:not(.kicker):not(.swipe-hint):not(.b10-sub){font-size:15.5px;line-height:1.6}
  .btn{font-size:9px!important;letter-spacing:.1em;padding-left:16px;padding-right:16px}   /* labels small, like the address line; the buttons stay a comfortable size to tap */
  .btns{gap:8px}
  .kicker,.hi-lab,.wo-space,.wo-date,.band-ev small,.footnav h2,.b10-sub,.swipe-hint{font-size:11px!important}
  .wo-cards .wo-text>span,.band-ev span,.wo-pinned .wo-text>span{font-size:15px}
  .footsmall{font-size:13.5px}
  section .panel{padding:14px}
  .over,.band{padding-left:14px!important;padding-right:14px!important}
  .band{min-height:0;padding-top:56px;padding-bottom:56px}   /* bands no longer forced to most of the screen height */
}

/* BACK TAB (5 Nov): Back sits in a small dark tab hanging under the top bar, only as wide as the word, its right edge slanting at 10 degrees.
   The footer script moves the page's Back link here; once the top bar scrolls away the tab pins to the top of the screen.
   Without JavaScript the old Back button stays in the box. */
.js .itemtop .backlink{display:none}   /* hidden until the script moves it, so it doesn't flash in the box */
.contact-row{padding-bottom:6px}
.contact-row .contact-btn{padding:2px 14px;margin:-3px 0}   /* computers: slimmer pill, clear of the bottom of the dark bar (phones have their own size above) */
.masthead.has-back{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(18,16,15,.82)}   /* the blur would stop the tab pinning to the screen */
.masthead .backbar{display:flex;position:absolute;left:0;top:100%;padding:6px 22px 6px clamp(16px,5vw,60px);background:var(--bar);clip-path:polygon(0 0,100% 0,calc(100% - 0.1763 * var(--h,28px)) 100%,0 100%)}
.masthead .backbar.pinned{position:fixed;top:0;background:rgba(18,16,15,.95);padding-top:calc(6px + env(safe-area-inset-top,0px));z-index:6}
.backbar a{display:inline-flex;align-items:center;gap:5px;font-family:var(--wide);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:#F25500;line-height:1}
.backbar a .ms{font-size:15px;color:#F25500}
.backbar a,.backbar a:hover{text-decoration:none!important}.backbar a:hover,.backbar a:hover .ms{color:#ff7a33}   /* no underline; a lighter orange on hover */
.backbar a::after{content:"";position:absolute;inset:-8px 0}   /* a bigger invisible area to tap than the slim tab shows */
.backbar svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.backbar svg path{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1}   /* a faint line along the bottom and up the slant */
@media (max-width:640px){.contact-row{padding-bottom:5px}.masthead .backbar{padding:6px 16px}.backbar a{font-size:9px;letter-spacing:.08em}.backbar a .ms{font-size:12px}}