/* benidorm.co.uk site skin — one nav, one palette, pinned Sheila. Applied to every page by scripts/apply_skin.py.
   Palette: red var(--red) (logo), black var(--ink), white, warm grey var(--paper). Yellow var(--yellow) only on hover / active. */

/* ===== benidorm.co.uk DESIGN SYSTEM v1 — tokens. Every page uses these; do not hard-code colours or spacing. =====
   Colour   red var(--red) (brand, CTAs, numbers) · red-dark var(--red-dark) (links, hover) · grey var(--grey) (nav, dark panels, table heads)
            grey-2 var(--grey-2) (cards on grey) · ink var(--ink) (text) · muted var(--muted) · line var(--line) · paper var(--paper) (page) · white var(--white) (cards)
            yellow var(--yellow) (stars, hover/active marks only)
   Type     logo Archivo Black · display Barlow Condensed 800 UPPERCASE · body Source Sans 3 (400/600/700)
   Space    4 · 8 · 12 · 16 · 24 · 32 · 48 · 64   (--s1 … --s8)
   Radius   chip 999 · card 16 · panel 20 · image 18
   Shadow   rest none · hover 0 14px 30px rgba(0,0,0,.14) + lift 4px */
:root{--red:#EB1701;--red-dark:#C41200;--grey:#43474E;--grey-2:#54585F;--ink:#141414;--muted:#5C5C5C;--line:#E3E0DA;--paper:#F2F0EC;--white:#fff;--yellow:#FFCC00;
--red-tint:#FDECEA;--on-grey:#E4E4E4;--paper-soft:#FAF9F6;--yellow-tint:#FFF4D1;--star:#F5B800;--good:#1E7A3C;--good-tint:#EAF6EE;
--font-logo:var(--f-logo);--font-display:var(--f-display);--font-body:var(--f-body);--menu:0 18px 40px rgba(0,0,0,.28);--page-max:1240px;--measure:720px;
--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--r-chip:999px;--r-card:16px;--r-panel:20px;--r-img:18px;
--f-logo:'Archivo Black',sans-serif;--f-display:'Barlow Condensed','Arial Narrow',sans-serif;--f-body:'Source Sans 3',system-ui,sans-serif;
--lift:0 14px 30px rgba(0,0,0,.14);--nav-h:58px}
/* space between the nav and the first block on every page */
.skn + main,.skn + .wrap,.skn + div,.skn + header,.skn + section{margin-top:var(--s5)!important}

/* ---- palette + type for every page template (id-level :not() beats the pages' own dark-mode rules) ---- */
html:root:not(#_){
  --bg:#F2F0EC;--fg:#141414;--ink:#141414;--muted:#5C5C5C;--line:#E3E0DA;--rule:#E3E0DA;--card:#fff;--surface:#fff;--soft:#F2F0EC;
  --sea:#141414;--accent:#EB1701;--link:#C41200;--coral:#EB1701;--sun:#FFCC00;--ok:#141414;--warn:#EB1701;--pend:#5C5C5C;
  --display:'Barlow Condensed','Arial Narrow',system-ui,sans-serif;--body:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;
  --red:#EB1701;color-scheme:light}
html:root:not(#_) body{background:var(--paper)!important;color:var(--ink)!important;font-family:var(--body)}
html:root:not(#_) h1,html:root:not(#_) h2{font-family:var(--display);text-transform:uppercase;letter-spacing:.01em;font-weight:800}
html:root:not(#_) h1{line-height:.95}
html:root:not(#_) main a:not([class]),html:root:not(#_) .wrap a:not([class]){color:var(--red-dark)}
html:root:not(#_) .kick{color:var(--red)!important}

/* hide the old navs, month strips and the old corner dock */
nav.nav.gut,nav.sitenav,.sitemonths,.shd,.shd-mini{display:none!important}

/* ---- nav ---- */
.skn{position:sticky;top:0;z-index:960;background:var(--grey);color:var(--white);font-family:'Source Sans 3',system-ui,sans-serif}
.skn-bar{max-width:1320px;margin:0 auto;padding:0 16px 0 0;display:flex;align-items:center;gap:14px;height:58px}
.skn-logo{flex:none;align-self:stretch;display:flex;align-items:center;background:var(--red);padding:0 18px 0 14px;text-decoration:none}
.lg{display:inline-flex;align-items:baseline;color:var(--white);font-family:'Archivo Black',sans-serif;transform:skewX(-14deg);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.lg .b{font-size:30px;letter-spacing:-.04em;-webkit-text-stroke:1px var(--white);line-height:1}
.lg .d{font-size:14px;letter-spacing:-.02em;margin-left:.08em;transition:color .2s}
.lg .dot{display:inline-block;transition:transform .3s}
.skn-logo:hover .lg,.skn-logo:focus-visible .lg{transform:skewX(-14deg) translateY(-2px) scale(1.03)}
.skn-logo:hover .d,.skn-logo:focus-visible .d{color:var(--yellow)}.skn-logo:hover .dot{transform:translateY(-.15em)}
.skn-tabs{display:flex;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;height:100%}.skn-tabs::-webkit-scrollbar{display:none}
.skn a.skn-t{flex:none;display:inline-flex;align-items:center;gap:5px;padding:0 12px;color:var(--on-grey);text-decoration:none;font:600 17px 'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.03em;border-bottom:3px solid transparent;border-top:3px solid transparent;white-space:nowrap}
.skn a.skn-t span{font-size:11px;opacity:.7}
.skn a.skn-t.on{color:var(--white)}
.skn a.skn-t:hover,.skn a.skn-t:focus-visible,.skn a.skn-t[aria-expanded=true]{color:var(--white);outline:none}
.skn a.skn-t[aria-expanded=true]{border-bottom-color:var(--yellow)}.skn a.skn-t[aria-expanded=true] span{color:var(--yellow);opacity:1}
.skn a.skn-talk{flex:none;background:var(--red);color:var(--white);text-decoration:none;font:700 16px 'Barlow Condensed',sans-serif;text-transform:uppercase;padding:9px 14px;border-radius:999px}
.skn a.skn-talk:hover{background:var(--red-dark)}
.skn-ps{position:absolute;left:0;right:0;top:100%;background:var(--white);color:var(--ink);border-top:3px solid var(--yellow);box-shadow:0 18px 40px rgba(0,0,0,.28);max-height:calc(100vh - 120px);overflow-y:auto;text-align:left}
.skn-ps[hidden],.skn-p[hidden]{display:none!important}
.skn-p{max-width:1320px;margin:0 auto;padding:20px 16px 24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px 32px;box-sizing:border-box}
.skn-c h6{margin:0 0 8px;font:700 12px 'Source Sans 3',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.skn-c ul{list-style:none;margin:0;padding:0}.skn-c li{break-inside:avoid;margin:0}
.skn-c.skn-2{grid-column:span 2}.skn-c.skn-2 ul{columns:2;column-gap:32px}
.skn-c a{display:block;padding:6px 8px 5px;margin:0 -8px;border-radius:6px;color:var(--ink)!important;text-decoration:none;font:600 15px/1.35 'Source Sans 3',sans-serif}
.skn-c a small{display:block;font-weight:400;font-size:13px;color:var(--muted)}
.skn-c a:hover,.skn-c a:focus-visible{background:var(--paper);outline:none;box-shadow:inset 3px 0 0 var(--red)}

/* ---- photo header + Sheila card (added to every page) ---- */
.skin-hero{position:relative;margin:14px 0 22px;border-radius:18px;overflow:hidden;height:clamp(180px,30vw,340px);background:var(--line)}
.skin-hero img{width:100%;height:100%;object-fit:cover;display:block}
.skin-hero figcaption{position:absolute;left:12px;bottom:12px;max-width:min(560px,calc(100% - 24px));background:rgba(255,255,255,.94);color:var(--ink);font:15px/1.3 'Source Sans 3',sans-serif;padding:9px 13px;border-radius:12px}.skin-hero figcaption b{display:block;font:800 19px 'Barlow Condensed',sans-serif;text-transform:uppercase}
.skin-wrap{max-width:1100px;margin:0 auto;padding:0 16px}.skin-sheila{display:flex;flex-wrap:wrap;align-items:stretch;background:var(--grey);color:var(--white);border-radius:18px;overflow:hidden;margin:32px 0 24px}
.skin-sheila .ph{flex:1 1 260px;min-height:260px;position:relative}.skin-sheila .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.skin-sheila .q{flex:2 1 380px;padding:28px;display:flex;flex-direction:column;gap:12px;justify-content:center}
.skin-sheila .k{font:700 14px 'Barlow Condensed',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.skin-sheila blockquote{margin:0;font:700 clamp(22px,2.4vw,30px)/1.2 'Source Sans 3',sans-serif;color:var(--white)}
.skin-sheila blockquote::before{content:"\201C";color:var(--red);margin-right:2px}.skin-sheila blockquote::after{content:"\201D";color:var(--red)}
.skin-sheila .by{font-size:14px;color:var(--on-grey)}
.skin-sheila a.go{align-self:flex-start;background:var(--red);color:var(--white)!important;text-decoration:none;font:700 16px 'Source Sans 3',sans-serif;padding:11px 18px;border-radius:999px}
.skin-sheila a.go:hover{background:var(--red-dark)}

/* ---- tables: cards, not naked grids ---- */
html:root:not(#_) .tbl,html:root:not(#_) .scroll{background:var(--white);border-radius:16px;box-shadow:0 1px 0 var(--line),0 6px 18px rgba(0,0,0,.05);overflow-x:auto;margin:12px 0 18px;border:0}
html:root:not(#_) main table,html:root:not(#_) .wrap table{border-collapse:separate;border-spacing:0;width:100%;background:var(--white);font-size:15px}
html:root:not(#_) main table thead th,html:root:not(#_) .wrap table thead th{background:var(--grey);color:var(--white);font:700 13px 'Source Sans 3',sans-serif;text-transform:uppercase;letter-spacing:.05em;padding:11px 12px;border:0;text-align:left}
html:root:not(#_) main table td,html:root:not(#_) .wrap table td,html:root:not(#_) .wrap table th[scope=row]{padding:11px 12px;border:0;border-bottom:1px solid var(--line)}
html:root:not(#_) main table tbody tr:nth-child(even) td,html:root:not(#_) .wrap table tbody tr:nth-child(even) td{background:var(--paper-soft)}
html:root:not(#_) main table tbody tr:hover td,html:root:not(#_) .wrap table tbody tr:hover td{background:var(--red-tint)}
html:root:not(#_) .wrap table.ledger th[scope=row]{background:var(--paper);color:var(--ink);width:30%;font-weight:700}

/* ---- Sheila pinned to the base ---- */
.sbar{position:fixed;left:0;right:0;bottom:0;z-index:950;background:var(--grey);color:var(--white);border-top:4px solid var(--red);box-shadow:0 -10px 30px rgba(0,0,0,.25);font-family:'Source Sans 3',system-ui,sans-serif}
.sbar .in{max-width:1320px;margin:0 auto;padding:12px 16px 12px 150px;display:flex;align-items:center;gap:18px;position:relative;min-height:84px;box-sizing:border-box}
.sbar .face{position:absolute;left:16px;bottom:8px;width:118px;height:118px;border-radius:50%;border:4px solid var(--red);object-fit:cover;background:var(--white);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.sbar .who{flex:0 1 auto;display:flex;flex-direction:column;line-height:1.15;min-width:0}.sbar .who b{font:800 28px 'Barlow Condensed',sans-serif;text-transform:uppercase}.sbar .who small{font-size:14px;color:var(--on-grey)}
.sbar form{flex:1 1 360px;display:flex;gap:8px;min-width:0;margin:0}
.sbar input{flex:1;min-width:0;font:inherit;font-size:17px;padding:14px 18px;border:0;border-radius:999px;background:var(--white);color:var(--ink)}
.sbar button[type=submit]{font:700 17px 'Source Sans 3',sans-serif;background:var(--red);color:var(--white);border:0;border-radius:999px;padding:0 24px;min-height:52px;cursor:pointer}
.sbar button[type=submit]:hover{background:var(--red-dark)}
.sbar .x{background:none;border:0;color:var(--on-grey);font-size:24px;min-height:44px;padding:0 6px;cursor:pointer}
body{padding-bottom:120px!important}body.sbar-off{padding-bottom:0!important}body.sbar-off .sbar{display:none}
.sbar-tab{position:fixed;right:14px;bottom:14px;z-index:950;display:none;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;border:0;background:var(--grey);color:var(--white);font:700 15px 'Source Sans 3',sans-serif;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.sbar-tab img{width:52px;height:52px;border-radius:50%;border:3px solid var(--red)}body.sbar-off .sbar-tab{display:inline-flex}
.vh{position:absolute!important;left:-9999px!important}

@media (max-width:640px){
  .lg .b{font-size:23px}.lg .d{font-size:11px}.skn-logo{padding:0 10px}.skn a.skn-talk{display:none}.skn a.skn-t{padding:0 9px;font-size:16px}
  .skn-p{grid-template-columns:1fr 1fr;gap:14px 18px}.skn-c.skn-2{grid-column:1/-1}
  .sbar .who{display:none}.sbar .in{padding-left:96px;min-height:72px}.sbar .face{width:78px;height:78px;left:10px;bottom:6px}.sbar input{padding:12px 14px}
  body{padding-bottom:96px!important}
  .skin-sheila .q{padding:20px}
}
@media print{.skn,.sbar,.sbar-tab{display:none!important}}

/* compact booking links instead of a yellow pill on every row */
html:root:not(#_) a.book{background:none!important;color:var(--red-dark)!important;padding:4px 0!important;border:0!important;box-shadow:none!important;border-radius:0!important;font:700 14px 'Source Sans 3',sans-serif!important;white-space:nowrap;text-decoration:none}
html:root:not(#_) a.book:hover{text-decoration:underline}
html:root:not(#_) a.book::after{content:" \2192"}
/* stars in yellow */
.star{color:var(--star);text-shadow:0 0 1px rgba(0,0,0,.35);letter-spacing:.02em}
/* roll-over cards */
html:root:not(#_) .card,html:root:not(#_) .alt,html:root:not(#_) .keyrow>div,html:root:not(#_) .tbl,html:root:not(#_) .scroll{transition:transform .18s ease,box-shadow .18s ease}
html:root:not(#_) .card:hover,html:root:not(#_) .alt:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.12)}

.skin-credit{max-width:1100px;margin:6px auto 12px;padding:0 16px;font:12px 'Source Sans 3',sans-serif;color:var(--muted)}
.skin-letters{max-width:1180px;margin:24px auto;padding:26px;background:var(--white);border-radius:20px;font-family:'Source Sans 3',sans-serif;color:var(--ink);box-sizing:border-box}
.skin-letters .lt-h{display:flex;gap:16px;align-items:center;margin-bottom:16px}.skin-letters .lt-h img{width:72px;height:72px;border-radius:50%;border:3px solid var(--red);object-fit:cover}
.skin-letters .k{font:700 14px 'Barlow Condensed',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.skin-letters h2{margin:0;font:800 clamp(30px,3.6vw,44px)/.95 'Barlow Condensed',sans-serif;text-transform:uppercase;color:var(--ink)}
.skin-letters p{margin:6px 0 0}.skin-letters a{color:var(--red-dark)}
.skin-letters .lt-g{display:grid;gap:14px 28px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.skin-letters h3{margin:0 0 6px;font:800 19px 'Barlow Condensed',sans-serif;text-transform:uppercase;color:var(--grey)}
.skin-letters ul{list-style:none;margin:0;padding:0}.skin-letters li{margin:0;padding:5px 0;border-bottom:1px solid var(--line);font-size:15px}
.skin-letters li a{text-decoration:none;color:var(--ink)}.skin-letters li a:hover{color:var(--red-dark)}
/* Talk to Sheila = Dear Sheila menu (Anthony 15 Oct) */
.skn a.skn-talk.skn-t{padding:9px 14px;color:var(--white);border-bottom:0;font:700 16px 'Barlow Condensed',sans-serif}
.skn a.skn-talk.skn-t span{color:var(--white);opacity:.85}
.skn a.skn-talk.skn-t[aria-expanded=true]{background:var(--red-dark)}
@media (max-width:900px){.skn a.skn-talk.skn-t{display:inline-flex;padding:7px 10px;font-size:14px}}

/* ===== Standardise every page on the Ask Sheila look (Anthony 15 Oct 2026, session claude-letters) =====
   H3 subheads = display font, sentence case, like "Who's going?" on /ask-brenda/. Cards = white, radius 16. No navy anywhere. One type family set. */
html:root:not(#_) h3,html:root:not(#_) .card h3,html:root:not(#_) .src-lang h3,html:root:not(#_) .fit h3,html:root:not(#_) .book h3{font-family:var(--display)!important;font-weight:800;letter-spacing:.005em;line-height:1.1}
html:root:not(#_) main h3,html:root:not(#_) .wrap h3{text-transform:none}
html:root:not(#_){--mono:var(--body)}
html:root:not(#_) .card,html:root:not(#_) a.card,html:root:not(#_) .dcard,html:root:not(#_) .letter,html:root:not(#_) .bd,html:root:not(#_) .b,
html:root:not(#_) .picks li,html:root:not(#_) .est,html:root:not(#_) .tips li,html:root:not(#_) .listen,html:root:not(#_) .trend{border-radius:var(--r-card)}
html:root:not(#_) .card,html:root:not(#_) a.card,html:root:not(#_) .bd{overflow:hidden}
html:root:not(#_) .letter,html:root:not(#_) .dcard{background:var(--white);color:var(--ink);border-color:var(--line)}
html:root:not(#_) .letter .dear,html:root:not(#_) .letter .sig,html:root:not(#_) .dcard .n{color:var(--muted)}
html:root:not(#_) .dcard .t{color:var(--ink)}
html:root:not(#_) .letter:before{color:var(--red)}
html:root:not(#_) .reply{background:var(--grey);border-radius:var(--r-card)}
html:root:not(#_) .reply .who,html:root:not(#_) .est-pick b{color:var(--yellow)}
html:root:not(#_) .est-pick{background:var(--grey);border-radius:12px}
html:root:not(#_) header.hero,html:root:not(#_) header#top{background-color:var(--grey)!important}
html:root:not(#_) .picks li{border-top-color:var(--red)}
html:root:not(#_) .tips li{border-left-color:var(--yellow)}
html:root:not(#_) .trend{border-left-color:var(--red)}
/* Bricolage / Instrument links are stripped; anything that named them falls back to the site fonts */
html:root:not(#_) [style*="Bricolage"],html:root:not(#_) .card,html:root:not(#_) .src-lang{font-family:var(--body)}
/* wide tables on phones: keep the first column readable */
@media (max-width:600px){html:root:not(#_) table th:first-child,html:root:not(#_) table td:first-child{min-width:132px}}