/* Jay & Joss — colours, type and layout from the brand guidelines (v1.0, Oct 2026). */
:root {
	--cream: #f4f1ec;
	--black: #141212;
	--panel: #1c1919;
	--burgundy: #c4174a;      /* on dark, large shapes only */
	--burgundy-ink: #a3123a;  /* on cream, and buttons */
	--muted: rgba(244, 241, 236, 0.78);
	--faint: rgba(244, 241, 236, 0.62);
	--line: rgba(244, 241, 236, 0.14);
	--ink-muted: rgba(20, 18, 18, 0.75);
	--ink-line: rgba(20, 18, 18, 0.18);
	--display: Anton, Impact, 'Arial Narrow', sans-serif;
	--body: Poppins, 'Helvetica Neue', Arial, sans-serif;
	--gutter: clamp(20px, 5vw, 72px);
	--max: 1296px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.menu-open { overflow: hidden; }
body { margin: 0; background: var(--black); color: var(--cream); font-family: var(--body); font-weight: 300; font-size: 17px; line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: .75; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
.on-cream a:focus-visible, .on-cream button:focus-visible, .on-cream input:focus-visible, .on-cream select:focus-visible, .on-cream textarea:focus-visible { outline-color: var(--black); }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--cream); color: var(--black); padding: 10px 16px; }
.skip:focus { left: 8px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.wrap { max-width: var(--max); margin-left: auto; margin-right: auto; }
.section { padding: clamp(80px, 11vw, 160px) var(--gutter); }
.section--tight { padding-top: clamp(56px, 7vw, 100px); padding-bottom: clamp(56px, 7vw, 100px); }
.rule-top { border-top: 1px solid var(--line); }

.label { font-size: 13px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; }
.display { font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: .95; }
.display--xl { font-size: clamp(56px, 9vw, 150px); line-height: .92; }
.display--l { font-size: clamp(48px, 6vw, 96px); }
.display--m { font-size: clamp(44px, 5vw, 76px); }
.display--s { font-size: clamp(34px, 3.6vw, 52px); }
.hl { color: var(--burgundy); }
.on-cream .hl { color: var(--burgundy-ink); }
.lede { font-size: 19px; color: var(--muted); max-width: 620px; }
.muted { color: var(--muted); }
.stack { display: flex; flex-direction: column; gap: 24px; }
.stack--s { gap: 12px; }
.prose { display: flex; flex-direction: column; gap: 20px; font-size: 19px; color: var(--muted); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 0 28px; background: var(--burgundy-ink); color: var(--cream); border: 0; border-radius: 0; font: 500 13px/1 var(--body); letter-spacing: .3em; text-transform: uppercase; cursor: pointer; }
.link-line { align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 13px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; border-bottom: 2px solid var(--burgundy); }
.play { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--burgundy); color: var(--cream); flex: none; }
.play--l { width: 96px; height: 96px; }

/* Header */
.site-header { position: relative; z-index: 20; background: var(--black); border-bottom: 1px solid rgba(244, 241, 236, .12); }
.site-header--overlay { position: absolute; top: 0; left: 0; right: 0; background: transparent; border-bottom: 0; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 24px var(--gutter); }
.site-logo { display: block; padding: 6px; }
.site-logo img { width: 64px; } /* one size on every page */
.nav-links { display: flex; flex-wrap: wrap; gap: 8px 32px; font-size: 13px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; }
.nav-links a { padding: 12px 0 8px; border-bottom: 2px solid transparent; }
.nav-links a[aria-current="page"] { border-bottom-color: var(--burgundy); }
.menu-btn, .menu-close { display: none; align-items: center; gap: 12px; min-height: 44px; padding: 0 4px; background: transparent; border: 0; color: var(--cream); font: 500 13px/1 var(--body); letter-spacing: .3em; text-transform: uppercase; cursor: pointer; }
.menu-close { display: inline-flex; }
.menu-panel { position: fixed; inset: 0; z-index: 50; background: var(--black); display: flex; flex-direction: column; padding: 24px var(--gutter) 40px; overflow-y: auto; } /* same spacing as .site-nav, so the logo doesn't move */
.menu-panel[hidden] { display: none; }
.menu-panel__top { display: flex; align-items: center; justify-content: space-between; }
.menu-panel__links { display: flex; flex-direction: column; gap: 4px; margin-top: 48px; font-family: var(--display); font-size: 48px; line-height: 1.1; text-transform: uppercase; }
.menu-panel__links a[aria-current="page"] { color: var(--burgundy); }
.menu-panel__foot { margin-top: auto; padding-top: 40px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--muted); }
.menu-panel__foot .label { font-size: 12px; color: var(--cream); }
.menu-panel__foot a { min-height: 44px; display: inline-flex; align-items: center; color: var(--cream); }

/* Footer */
.site-footer { border-top: 1px solid rgba(244, 241, 236, .12); padding: 48px var(--gutter); color: rgba(244, 241, 236, .65); font-size: 13px; font-weight: 400; }
.site-footer__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 32px; }
.site-footer__row img { width: 64px; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 4px 28px; font-size: 12px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--cream); }
.site-footer__links a { min-height: 44px; display: inline-flex; align-items: center; }
.site-footer__more { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; margin-bottom: 24px; padding-top: 24px; border-top: 1px solid rgba(244, 241, 236, .12); }
.site-footer__more .label { font-size: 11px; margin-right: 8px; color: rgba(244, 241, 236, .65); }
.site-footer__more a { min-height: 44px; display: inline-flex; align-items: center; color: var(--cream); font-size: 14px; }
.menu-panel__more { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 28px; font-size: 15px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.menu-panel__more a { min-height: 44px; display: inline-flex; align-items: center; }
.site-footer__small a { text-decoration: underline; text-underline-offset: 3px; }
.social { display: flex; gap: 4px; color: var(--cream); }
.social a { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; }

/* Home hero */
.hero { position: relative; min-height: clamp(640px, 64vw, 920px); display: flex; flex-direction: column; overflow: hidden; background: radial-gradient(ellipse 55% 60% at 62% 55%, rgba(196, 23, 74, .32) 0%, rgba(196, 23, 74, .1) 45%, rgba(20, 18, 18, 0) 75%), var(--black); }
.hero__word { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-58%); text-align: center; font-family: var(--display); font-size: clamp(96px, 17vw, 280px); line-height: .95; text-transform: uppercase; color: rgba(244, 241, 236, .1); white-space: nowrap; pointer-events: none; }
.hero__word span { color: rgba(196, 23, 74, .55); }
.hero__photo { position: absolute; bottom: 0; right: clamp(0px, 6vw - 20px, 120px); width: min(62vw, 880px); }
.hero__fade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 18, 18, 0) 55%, rgba(20, 18, 18, .7) 82%, var(--black) 100%), linear-gradient(90deg, rgba(20, 18, 18, .75) 0%, rgba(20, 18, 18, 0) 45%); pointer-events: none; }
.hero__copy { position: relative; margin-top: auto; padding: 0 var(--gutter) clamp(40px, 7vw, 96px); display: flex; flex-direction: column; gap: 24px; max-width: 1280px; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; }
.hero__actions .watch { display: inline-flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; min-height: 44px; }
.hero__seen { font-size: 15px; color: rgba(244, 241, 236, .75); }
.now { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 8px; }
.now .label { color: rgba(244, 241, 236, .75); }

/* As seen on strip */
.seen { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 28px var(--gutter); }
.seen__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px 40px; font-family: var(--display); font-size: clamp(20px, 2.1vw, 28px); line-height: 1; text-transform: uppercase; letter-spacing: .02em; color: var(--faint); }
.seen__row .label { font-family: var(--body); font-size: 12px; color: var(--cream); line-height: 1.6; }
/* phones: label on its own line, then two names on the left and two on the right (longer ones on the left) */
@media (max-width: 760px) {
	.seen__row { display: grid; grid-template-columns: auto auto; justify-content: space-between; gap: 14px 12px; font-size: min(20px, 4.4vw); white-space: nowrap; }
	.seen__row .label { grid-column: 1 / -1; }
	.seen__row > :nth-child(3) { order: 1; } /* Penn & Teller: Fool Us */
	.seen__row > :nth-child(2) { order: 2; justify-self: end; } /* Britain's Got Talent */
	.seen__row > :nth-child(5) { order: 3; } /* The Chris Moyles Show */
	.seen__row > :nth-child(4) { order: 4; justify-self: end; } /* Lorraine */
}

.statement { text-align: center; max-width: 1180px; margin: 0 auto; }
.statement .display { font-size: clamp(52px, 8vw, 124px); }
.statement .lede { margin: 36px auto 0; }

/* Split: image + text */
.split { display: flex; flex-wrap: wrap; align-items: stretch; }
.split > * { flex: 1 1 420px; min-width: 0; }
.split__img { width: 100%; min-height: 520px; max-height: 860px; object-fit: cover; object-position: 45% 40%; }
.split__text { padding: clamp(48px, 7vw, 120px) clamp(24px, 6vw, 96px); display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.split__text .lede { font-size: 18px; max-width: 520px; }
.split__cutout { display: flex; align-items: flex-end; justify-content: center; padding: 40px clamp(20px, 3vw, 48px) 0; }
.split__cutout img { width: 100%; max-width: 620px; }
.glow { background: radial-gradient(ellipse 50% 60% at 75% 60%, rgba(196, 23, 74, .26) 0%, rgba(196, 23, 74, .08) 45%, rgba(20, 18, 18, 0) 75%), var(--black); }

/* Show block */
.show { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 32px clamp(48px, 8vw, 128px); margin-bottom: 64px; }
.show__art { width: min(340px, 64%); }
.show__text { flex: 0 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.show__text h2 { width: min(560px, 100%); }
.show__text .prose { font-size: 18px; }
.only-mobile { display: none; }

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 12px; }
.gallery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.gallery--four { grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); }
.gallery--tall { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.gallery--tall img { aspect-ratio: 4 / 5; }

.pull { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.pull blockquote { margin: 0; font-family: var(--display); font-size: clamp(40px, 6vw, 88px); line-height: .98; text-transform: uppercase; }
.pull figcaption { color: rgba(244, 241, 236, .75); }
.pull figcaption a { border-bottom: 1px solid var(--burgundy); color: var(--cream); }

.video { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.video--wide { aspect-ratio: 21 / 9; min-height: 320px; width: 100%; } /* width set, so on phones it grows taller instead of wider than the screen */
.video img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.5); }
.video__over { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; text-align: center; }
.video__over--left { align-items: flex-start; justify-content: flex-end; text-align: left; padding: clamp(24px, 4vw, 56px); gap: 16px; }
.video__title { font-family: var(--display); font-size: clamp(32px, 4vw, 56px); line-height: 1; text-transform: uppercase; }
.video__over--left .video__title { font-size: clamp(40px, 6vw, 88px); line-height: .95; }

.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 48px; }
.quotes figure { margin: 0; display: flex; flex-direction: column; gap: 20px; border-top: 3px solid var(--burgundy); padding-top: 28px; }
.quotes figure.is-placeholder { border-top-color: rgba(244, 241, 236, .2); color: rgba(244, 241, 236, .55); }
.quotes blockquote { margin: 0; font-size: clamp(22px, 2vw, 28px); line-height: 1.45; }
.quotes figcaption { font-size: 12px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; }

/* Cream panels */
.on-cream { background: var(--cream); color: var(--black); }
.on-cream .muted, .on-cream .lede { color: var(--ink-muted); }
.head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 48px; }
.cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); border-top: 1px solid var(--line); }
.cells > * { display: flex; flex-direction: column; gap: 10px; padding: 32px 32px 32px 0; border-bottom: 1px solid var(--line); }
.on-cream .cells { border-top-color: var(--ink-line); }
.on-cream .cells > * { border-bottom-color: var(--ink-line); }
.cells h3, .cells h2 { font-size: 13px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; }
.on-cream .cells h3 { color: var(--black); }
.contact-link { font-size: 17px; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; }
.on-cream .contact-link { color: var(--burgundy-ink); }

/* Lists: TV credits, milestones */
.credits > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 48px; padding: 32px 0; border-top: 1px solid rgba(244, 241, 236, .16); }
.credits > div:last-child { border-bottom: 1px solid rgba(244, 241, 236, .16); }
.credits h3 { flex: 1 1 420px; font-family: var(--display); font-size: clamp(36px, 4.4vw, 64px); line-height: .95; text-transform: uppercase; }
.credits p { flex: 1 1 320px; color: var(--muted); }
.miles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); border-top: 1px solid rgba(244, 241, 236, .16); }
.miles > div { display: flex; flex-direction: column; gap: 8px; padding: 28px 28px 28px 0; border-bottom: 1px solid rgba(244, 241, 236, .16); }
.miles .year { font-family: var(--display); font-size: 40px; line-height: 1; }
.miles .year.is-placeholder { color: rgba(244, 241, 236, .55); }

/* Forms */
.form-line { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; }
.field input, .field select, .field textarea { background: transparent; border: 0; border-bottom: 1px solid rgba(244, 241, 236, .4); border-radius: 0; color: inherit; font: 300 17px/1.5 var(--body); letter-spacing: 0; text-transform: none; padding: 10px 0; min-height: 44px; width: 100%; }
.on-cream .field input, .on-cream .field select, .on-cream .field textarea { border-bottom-color: rgba(20, 18, 18, .45); }
.field select option { color: var(--black); }
.field textarea { resize: vertical; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 28px 32px; }
.form-grid .full { grid-column: 1 / -1; }
.form-note { padding: 14px 18px; background: rgba(196, 23, 74, .12); border-left: 3px solid var(--burgundy); margin-bottom: 24px; }
.on-cream .form-note { background: rgba(163, 18, 58, .08); border-left-color: var(--burgundy-ink); }

/* Ordinary pages (town pages, shop, policies) */
.page-head { padding: clamp(56px, 8vw, 120px) var(--gutter) clamp(32px, 4vw, 56px); }
.page-body { padding: 0 var(--gutter) clamp(72px, 9vw, 128px); }
.page-body .entry { max-width: 820px; }
.page-body.is-builder { padding: 0; }
.page-body.is-builder .entry { max-width: none; }
.entry > * + * { margin-top: 1.1em; }
.entry h2 { font-family: var(--display); text-transform: uppercase; font-size: clamp(32px, 4vw, 52px); line-height: 1; margin-top: 1.4em; }
.entry h3 { font-weight: 500; font-size: 20px; margin-top: 1.4em; }
.entry a { text-decoration: underline; text-decoration-color: var(--burgundy); text-underline-offset: 4px; }
.entry ul, .entry ol { padding-left: 1.2em; }
.entry img { margin: 1.5em 0; }
.entry .elementor img { margin: 0; }

/* WooCommerce, toned to the brand */
.woocommerce .page-body .entry, .woocommerce-page .page-body .entry { max-width: none; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--display); text-transform: uppercase; font-weight: 400; font-size: 24px; }
.woocommerce .price, .woocommerce ul.products li.product .price { color: var(--cream) !important; }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--burgundy-ink) !important; color: var(--cream) !important; border-radius: 0 !important; font: 500 13px/1 var(--body) !important; letter-spacing: .2em; text-transform: uppercase; padding: 16px 24px !important; }
.woocommerce div.product .product_title { font-family: var(--display); text-transform: uppercase; font-weight: 400; font-size: clamp(40px, 5vw, 72px); line-height: .95; }
.woocommerce table.shop_table, .woocommerce-checkout #payment { background: var(--panel) !important; color: var(--cream); border-color: var(--line) !important; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce .quantity .qty, .select2-container--default .select2-selection--single { background: var(--cream); color: var(--black); border-radius: 0; border: 0; padding: 10px; }
.woocommerce-message, .woocommerce-info, .woocommerce-error { background: var(--panel) !important; color: var(--cream) !important; border-top-color: var(--burgundy) !important; }
.woocommerce span.onsale { background: var(--burgundy) !important; border-radius: 0 !important; }

@media (max-width: 760px) {
	.nav-links { display: none; }
	.menu-btn { display: inline-flex; }
	.hero { min-height: 0; padding-top: 96px; }
	.hero__photo { position: relative; right: auto; width: 100%; margin-top: -8px; }
	.hero__copy { margin-top: -90px; }
	.hero__word { top: 34%; }
	.only-desktop { display: none !important; }
	.only-mobile { display: block !important; }
	.split__img { min-height: 380px; }
	.menu-panel__links { font-size: 44px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Video players */
.video.is-playing { background: #000; }
.video.is-playing iframe, .viewer__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.viewer { width: min(1200px, 100vw - 32px); max-width: none; max-height: none; padding: 0; border: 0; background: transparent; color: var(--cream); overflow: visible; }
.viewer::backdrop { background: rgba(10, 9, 9, .92); }
.viewer__frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.viewer__close { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin: 0 0 8px auto; padding: 0 4px; background: transparent; border: 0; color: var(--cream); font: 500 13px/1 var(--body); letter-spacing: .3em; text-transform: uppercase; cursor: pointer; float: right; }
.viewer__frame { clear: both; }

/* News */
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 48px 32px; }
.news-card { display: flex; flex-direction: column; gap: 16px; }
.news-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: #1c1919; }
.news-card__text { display: flex; flex-direction: column; gap: 10px; }
.news-card__title { font-family: var(--display); font-size: clamp(24px, 2.2vw, 32px); line-height: 1.05; text-transform: uppercase; }
.news-card:hover .news-card__title { color: var(--burgundy); }
.news-card--lead { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px 48px; align-items: center; padding-bottom: 48px; border-bottom: 1px solid var(--line); }
.news-card--lead .news-card__title { font-size: clamp(36px, 4.4vw, 64px); line-height: .95; }
.news-pages { display: flex; justify-content: space-between; margin-top: 64px; }
.article-photo { padding: 0 var(--gutter); }
.article-photo { margin-bottom: clamp(40px, 5vw, 72px); }
.article-photo img { display: block; width: 100%; max-width: var(--max); aspect-ratio: 16 / 9; margin: 0 auto; object-fit: cover; }
.label a:hover { color: var(--burgundy); }
.entry blockquote { margin: 2em 0; padding-left: 24px; border-left: 3px solid var(--burgundy); font-size: clamp(20px, 2vw, 24px); line-height: 1.45; }
.entry blockquote p:last-child:not(:first-child) { margin-top: .8em; font-size: 13px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; }
.entry .wp-block-embed, .entry iframe[src*="tiktok"], .entry blockquote.tiktok-embed { display: block; margin: 2em auto; max-width: 340px; }

/* Media page */
.media-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 48px 32px; }
.media-video { display: flex; flex-direction: column; gap: 14px; }
.media-video__frame { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #1c1919; }
.media-video__frame img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.7); transition: filter .2s; }
.media-video__frame .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.media-video:hover img { filter: brightness(.9); }
.media-video:hover .news-card__title { color: var(--burgundy); }
.media-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.media-photo { position: relative; display: block; overflow: hidden; background: #1c1919; aspect-ratio: 3 / 2; }
.media-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.media-photo--lead { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.media-photo--wide { grid-column: span 2; aspect-ratio: 3 / 1; } /* two tiles wide, one tall */
.media-photo--wide img { position: absolute; inset: 0; }
.media-photo--lead img { position: absolute; inset: 0; object-position: 50% 20%; } /* fills the 2×2 space without setting its height */
.media-photo__cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 12px; padding: 32px 16px 14px; font-size: 13px; background: linear-gradient(to top, rgba(20,18,18,.85), rgba(20,18,18,0)); opacity: 0; transition: opacity .2s; }
.media-photo__cap span { flex: none; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; font-size: 11px; color: var(--cream); border-bottom: 2px solid var(--burgundy); }
.media-photo:hover img { transform: scale(1.03); }
.media-photo:hover .media-photo__cap, .media-photo:focus-visible .media-photo__cap { opacity: 1; }
@media (hover: none) { .media-photo__cap { opacity: 1; } }
@media (max-width: 620px) { .media-photo--lead { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 5; } .media-photo--wide { grid-column: auto; aspect-ratio: 3 / 2; } }

/* Floating basket button (WooCommerce Fast Cart): only on the shop, product and basket pages */
body:not(.woocommerce):not(.woocommerce-page) #wfc-open-cart-button { display: none !important; }

/* Shop pop-ups (quick view, fast cart): dark like the rest of the site, so the cream text shows */
.wc-quick-view-modal, .wc-quick-view-modal .modal, .wc-quick-view-modal .wc-quick-view-product,
.wc-fast-cart, .wc-fast-cart__inner-contents { background: var(--black) !important; color: var(--cream) !important; }
.wc-quick-view-modal .price, .wc-quick-view-modal .price * { color: var(--cream) !important; }
.wc-quick-view-modal .woocommerce-product-details__short-description, .wc-quick-view-modal p { color: var(--muted) !important; }
.wc-quick-view-modal a.close-modal, .wc-fast-cart__close-btn { filter: invert(1); }
.wc-fast-cart h2, .wc-fast-cart .wc-fast-cart__title { color: var(--cream) !important; }
/* Cart pop-up buttons and links in the site's colours */
.wc-fast-cart .wfc-button { background: var(--burgundy-ink) !important; color: var(--cream) !important; border: 0 !important; border-radius: 0 !important; font: 500 13px/1 var(--body) !important; letter-spacing: .3em !important; text-transform: uppercase !important; min-height: 48px; display: flex !important; align-items: center; justify-content: center; }
.wc-fast-cart .wfc-button.wfc-exit { background: transparent !important; border: 1px solid rgba(244, 241, 236, .4) !important; }
.wc-fast-cart a:not(.wfc-button), .wc-fast-cart .remove { color: var(--cream) !important; }
.wc-fast-cart a.remove { opacity: .7; }
.wc-fast-cart input[type=radio] { accent-color: var(--burgundy); }
.wc-fast-cart [class*="remove"] svg, .wc-fast-cart [class*="remove"] { color: var(--cream) !important; fill: var(--cream) !important; filter: none; }
.wc-fast-cart .woocommerce-message::before, .wc-fast-cart .woocommerce-message svg { color: var(--burgundy) !important; fill: var(--burgundy) !important; }
.wc-fast-cart .wfc-cart__remove { filter: invert(1) brightness(.95); opacity: .75; } /* the plugin draws the ✕ as a black picture */