/* =============================================================================================
* sk-batch2-2026.css — Clank batch 2 (2026-07-21, Helena's Basecamp round): events day view in
* the SPF Kilkenny format, the 11 client category colours, events intro tightened on phones,
* About feature photo made to fit on mobile. Loads AFTER sk-semantic.css (see site_functions).
* ============================================================================================= */
/* ---- Events archive: SPF-style day tab bar on phones (ALL + 5 festival days = 3x2 grid) ---- */
@media (max-width:1023px){
.event-filters__row[role="group"]{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%}
.event-filters__row[role="group"] .event-pill{width:100%;min-width:0;justify-content:center;border-radius:12px;padding:12px 4px;min-height:52px}
.event-pill__label{font-size:15px;line-height:20px;white-space:nowrap}
/* intro: the six-line shouty H1 calms down on phones */
.event-intro__title{font-size:26px;line-height:1.25}
.event-intro__text{font-size:18px;line-height:27px}
}
/* Day pill states, SPF-style (all widths): quiet tint when off, solid brand pink when on.
* Keyed on aria-pressed so it tracks the JS filter state, not class churn. */
.event-filters__row[role="group"] .sk-filter[aria-pressed="false"]{background:#fbdcea}
.event-filters__row[role="group"] .sk-filter[aria-pressed="false"] .event-pill__label{color:var(--sk-black)}
.event-filters__row[role="group"] .sk-filter[aria-pressed="true"]{background:var(--sk-pink)}
.event-filters__row[role="group"] .sk-filter[aria-pressed="true"] .event-pill__label{color:var(--sk-white)}
/* ---- Client category colours (Helena 2026-07-21) on the event-card tag ---- */
.event-card[data-cat="dining"] .event-card__tag{background:#4e154f}
.event-card[data-cat="drinks"] .event-card__tag{background:#ff751f}
.event-card[data-cat="talks-and-workshops"] .event-card__tag{background:#1800ad}
.event-card[data-cat="savour-stage"] .event-card__tag{background:#fdbf1e}
.event-card[data-cat="taste-stage"] .event-card__tag{background:#70ab45}
.event-card[data-cat="family-kids"] .event-card__tag{background:#f17857}
.event-card[data-cat="savour-the-night"] .event-card__tag{background:#1d135d}
.event-card[data-cat="home-of-halloween"] .event-card__tag{background:#7ed957}
.event-card[data-cat="savour-samhain"] .event-card__tag,
.event-card[data-cat="savour-samhain-spectacles"] .event-card__tag{background:#e94792}
.event-card[data-cat="wellness"] .event-card__tag{background:#52cfff}
.event-card[data-cat="savouring-art"] .event-card__tag{background:#cb6ce6}
/* readable label on each: white on the dark fills, charcoal on the light ones */
.event-card[data-cat="dining"] .event-card__cat,
.event-card[data-cat="talks-and-workshops"] .event-card__cat,
.event-card[data-cat="savour-the-night"] .event-card__cat,
.event-card[data-cat="savour-samhain"] .event-card__cat,
.event-card[data-cat="savour-samhain-spectacles"] .event-card__cat{color:var(--sk-white)}
.event-card[data-cat="drinks"] .event-card__cat,
.event-card[data-cat="savour-stage"] .event-card__cat,
.event-card[data-cat="taste-stage"] .event-card__cat,
.event-card[data-cat="family-kids"] .event-card__cat,
.event-card[data-cat="home-of-halloween"] .event-card__cat,
.event-card[data-cat="wellness"] .event-card__cat,
.event-card[data-cat="savouring-art"] .event-card__cat{color:var(--sk-black)}
/* ---- About: the rounded feature photo now fits phones and sits in the text flow ---- */
@media (max-width:1023px){
.about-photo-styled{width:100%;max-width:100%;margin:16px 0 4px}
.about-photo-styled__img{position:static;width:100%;height:auto;border-radius:18px}
.about-photo-styled__block{display:none}
}
/* ---- FIX (2026-07-21, flagged by Michal): 11.8 stripped the intro's pink card but the gallery
* heading/lead are WHITE — they vanished on the cream page. The real ask ("one element") is the
* heading + lead + cards sharing ONE pink block, so the pink moves up to .gallery__events. ---- */
@media (max-width:1023px){
.gallery__events{background:var(--sk-pink);border-radius:20px;margin:0 14px;width:calc(100% - 28px);padding:22px 22px 56px;overflow:hidden}
}
/* Round-3 made every eyebrow pink; on the gallery's pink block the --white variant must stay white
* (it was pink-on-pink). Scoped to the gallery so other eyebrows keep the round-3 pink. */
.gallery .hp-eyebrow__text--white{color:var(--sk-white)}
/* ============ WCAG sweep fixes (2026-07-21, axe 4.10 / WCAG 2.2 AA) ============
* The new print pink #ef509d is lighter than the old #e20390: pink TEXT on white/cream fell to
* ~2.9:1 (needs 4.5:1) and small white-on-pink to ~3.3:1 (only "large" text may pass at 3:1).
* Surfaces keep the brand pink; text-on-light gets a darker text-pink from the same family. */
:root{--sk-pink-text:#cc0d76} /* 4.9:1 on cream, 5.4:1 on white */
/* recipes archive: chef line + view link (296 cards x2 axe hits) */
.recipe-card-x__chef{color:var(--sk-pink-text)}
.recipe-card-x__more{color:var(--sk-pink-text)}
/* content links (Dine Out venue links, in-page links on legal pages) */
.sk-rte a{color:var(--sk-pink-text)}
/* countdown labels: 16px bold white-on-pink is "small" text under WCAG (needs 4.5:1).
* At 19px bold they count as large text and the 3.33:1 white-on-brand-pink passes. */
@media (max-width:1023px){
.countdown__word{font-size:19px;line-height:24px}
}
/* small phones (≤479px): four columns can't fit MINUTES/SECONDS at the 19px WCAG-large size
* without mid-word wraps — go 2x2 grid with large-text labels and no colons instead */
@media (max-width:479px){
.countdown__timer{display:grid;grid-template-columns:1fr 1fr;gap:14px 10px}
.countdown__colon{display:none}
.countdown__word{font-size:19px;line-height:24px}
.countdown__num{font-size:38px}
}
/* Plan Your Visit: round-3 turned ALL eyebrows pink but missed this --dark exception — pink on
* the yellow block is 2.0:1. Back to charcoal (6.8:1), matching the info-block exception. */
.plan-eyebrow__label--dark{color:var(--sk-black)}
/* WCAG round 2: the last homepage + content-link failures */
/* About Us pill (mobile): white label on brand pink was 3.33:1 at 16px — deepen to the text-pink */
@media (max-width:1023px){
.story-cta__pill{background:var(--sk-pink-text)}
}
/* Brochure pill: the disabled state's opacity washed it to 2.17:1 — full opacity, charcoal
* large-text label on the secondary pink (3.8:1, passes as large text) */
.info-btn--disabled{opacity:1}
.info-btn__pill--pink2 .hp-pill-label{color:var(--sk-black);font-size:19px;line-height:24px}
/* gallery lead: 20px REGULAR white-on-pink isn't "large" under WCAG; at 700 weight it is (3.33 ≥ 3.0) */
.gallery__lead{font-weight:700}
/* legal/prose page content links (Dine Out venues, in-text links) */
.sk-prose a{color:var(--sk-pink-text)}
/* Desktop fix (Michal 2026-07-21 eve): the market photo made the info content taller than the
* container's fixed 881px; align-items:center overflowed the yellow box ~50px UP over the
* stories photo + About Us pill. Let it grow instead, and keep the banner photo in check. */
@media (min-width:1024px){
.info__container{height:auto;min-height:881px;padding-top:70px;padding-bottom:70px}
.info__banner img{max-height:340px}
}
/* Festival map (Michal 2026-07-22): landscape, full width, no more square 140% crop; the
* lightbox now opens the complete rectangular map (same file) instead of the diagonal cut. */
.festival-map__link{width:min(1200px,100%);aspect-ratio:auto}
.festival-map__img{position:static;left:auto;top:auto;transform:none;width:100%;height:auto;max-width:100%;object-fit:contain;display:block}
/* Dine Out (and any prose page with figures): venue photos were full-size and unconstrained,
* sprawling the page to 20k+ px. Cap and round them, tighten the heading rhythm. */
.sk-prose figure{margin:10px 0 6px}
.sk-prose figure img{width:100%;max-width:760px;max-height:400px;height:auto;object-fit:cover;border-radius:16px}
.sk-prose h2{margin-top:34px}
/* About page (Michal 2026-07-22): the feature slot was a 560x935 PORTRAIT frame; the new
* landscape market photo floated in it, hung over the yellow card and clipped the buttons.
* Landscape treatment: frame hugs the photo, offset block scales with it. */
@media (min-width:1024px){
.about-info__firefly{height:auto;align-self:center;display:flex;align-items:center;justify-content:flex-end;padding:56px 0}
.about-photo-styled__img{width:92%;max-height:none;border-radius:10px}
.about-photo-styled__block{left:-4%;top:16%;width:58%;height:78%}
}
/* About "Brochure Coming Soon" pill: washed cream-on-yellow — match the homepage treatment
* (secondary pink, charcoal label). */
.about-btn__face--white{background:var(--sk-pink-2)}
.about-btn__face--white .about-btn__label{color:var(--sk-black)}
/* About info band: the card used to tuck -208px under the portrait photo; with the landscape
* photo the text/buttons collided with it. Side-by-side instead, no overlap. */
@media (min-width:1024px){
.about-info{gap:36px}
.about-info__card{margin-right:0;width:auto;flex:1 1 auto;min-width:0}
}
/* About info band v2 (Michal 2026-07-22 "looks crap"): ONE yellow band — text + buttons left,
* photo right INSIDE the band. Kills the floating photo, the stray offset block and the
* ragged centred button wrap. Mobile keeps the stacked card (these rules are ≥1024 only). */
@media (min-width:1024px){
.about-info{background:var(--sk-yellow);border-radius:12px;padding:72px 64px;gap:56px;align-items:center}
.about-info__card{background:transparent;border-radius:0;padding:0;margin:0;width:auto;flex:1 1 auto;min-width:0}
.about-info__inner,.about-info__head,.about-info__heading-group{align-items:flex-start;width:100%}
.about-info__heading{text-align:left;width:100%}
.about-info__card .about-rte,.about-info__card .about-rte p{text-align:left}
.about-eyebrow{justify-content:flex-start}
.about-info__actions{justify-content:flex-start}
.about-info__firefly{flex:0 0 500px;width:500px;height:auto;padding:0;display:block}
.about-photo-styled__block{display:none}
.about-photo-styled__block::after{display:none}
.about-photo-styled__img{width:100%;max-height:none;border-radius:14px;box-shadow:0 14px 38px rgba(0,0,0,.18)}
}
/* ============ Client round 4 (2026-07-22): remaining Basecamp asks ============ */
/* R4.1 Sponsor logo chip on the event card front (client: "option to have a sponsors logo on
* front of cards for events that are sponsored?"). Renders only when the event has a
* Card sponsor logo set (ACF event_card_sponsor_logo). */
.event-card__media{position:relative}
.event-card__sponsor{position:absolute;right:10px;bottom:10px;z-index:3;display:flex;align-items:center;justify-content:center;background:var(--sk-white);border-radius:12px;padding:6px 10px;box-shadow:0 2px 10px rgba(0,0,0,.18);max-width:46%}
.event-card__sponsor img{display:block;max-height:30px;width:auto;max-width:100%}
/* R4.2 Mobile: wave on the yellow SPONSORS AND FUNDERS band so it echoes the pink wave
* (client: "can we add a wave to mobile to match the pink design element"). Drawn as a
* masked yellow crest rising into the cream above the band. */
@media (max-width:1023px){
.sponsors-band{position:relative;margin-top:30px}
.sponsors-band::before{content:"";position:absolute;bottom:100%;left:0;width:100%;height:30px;background:var(--sk-yellow);-webkit-mask:url("data:image/svg+xml;utf8,") center/100% 100% no-repeat;mask:url("data:image/svg+xml;utf8,") center/100% 100% no-repeat}
}
/* R4.3 Savour web icon (client 2026-07-21 comment 13, "integrate more into website"):
* quiet placements — menu drawer foot, newsletter band, events empty state. */
.sk-menu-mark{display:flex;justify-content:center;padding:26px 0 18px}
.sk-menu-mark img{width:84px;height:auto;opacity:.9}
.newsletter__mark{display:block;width:72px;height:auto;margin:0 auto 10px}
.event-cards__empty-mark{display:block;width:88px;height:auto;margin:0 auto 12px}
/* R4.4 Single event: DATE/TIME/LOCATION values were invisible — they inherited the section's
* old white text on the new white meta cards (labels got a colour, values didn't). */
.event-meta__value{color:var(--sk-black)}
/* R4.5 Mobile, inner pages: the newsletter band's white heading sat on cream (the pink only
* painted the lower content box; the wave photo doesn't reach on non-overlap pages). Solid
* pink behind the whole band on those pages; the homepage overlap variant keeps its look. */
@media (max-width:1023px){
.news-instagram:not(.news-instagram--overlap){background:var(--sk-pink)}
}
/* R4.6 Single event: "Kindly Sponsored by" was brand pink at 18px on cream (2.9:1) — text-pink */
.event-sponsor-bar__label{color:var(--sk-pink-text)}
/* R4.7 Desktop sweep fixes (2026-07-22) */
/* The scrolled fixed header floated TRANSPARENT over content on desktop (mobile got a white bar,
* desktop never did): white bar + shadow at every width once .sk-nav-fixed is on, and the big
* hexagon logo slims down so it stops covering content and carousel arrows. */
.site-nav.sk-nav-fixed{background:var(--sk-white);box-shadow:0 2px 14px rgba(0,0,0,.12)}
@media (min-width:1024px){
.site-nav.sk-nav-fixed .site-nav__brand{height:auto;padding-top:4px;padding-bottom:4px}
.site-nav.sk-nav-fixed .site-nav__logo{width:120px}
.site-nav.sk-nav-fixed .site-nav__logo img{position:static;width:100%;height:auto}
}
/* Newsletter band on non-overlap pages: consent text was white on cream at desktop too */
.news-instagram:not(.news-instagram--overlap){background:var(--sk-pink)}
/* Single event meta cards: values clipped at the Figma fixed widths once they became visible */
.event-meta__text{width:100%!important;min-width:0}
.event-meta__value{overflow-wrap:break-word}
/* R4.8 The drawer's brand mark shares markup with the desktop header — drawer only */
@media (min-width:1024px){
.sk-menu-mark{display:none}
}
/* Prose pages (dine-out, legal): centre the reading column */
.sk-prose{margin-inline:auto}
/* ============ R5: mobile sweep fixes (2026-07-22) ============ */
/* R5.1 Event meta icons were white SVGs on the white cards (fill="var(--fill-0, white)"
* Figma export) — recolour to charcoal via filter since they're tags. */
/* Event detail icons (Michal 2026-07-22): two-tone SVGs now (soft-pink chip, charcoal glyph)
* instead of the old brightness-filter hack, and ~15% smaller — less of a grey slab. */
.event-meta__icon{width:68px;height:68px}
.event-meta__icon img{filter:none}
/* R5.2 Cookie policy table bled off the 390px viewport — scroll inside its own box */
.sk-prose table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse}
/* R5.3 Prose/CMS pages inherited the Figma-artifact display family ("Oswald:Bold") for BODY
* copy — body text goes back to Open Sans, headings stay Oswald. */
.sk-prose, .sk-prose p, .sk-prose li, .sk-prose td, .sk-prose th{font-family:var(--sk-os-reg)}
.sk-prose h1, .sk-prose h2, .sk-prose h3{font-family:var(--sk-oswald)}
.sk-prose a{color:var(--sk-pink-text)}
.sk-legal a{color:var(--sk-pink-text)}
/* R5.4b Non-overlap newsletter band (About etc.): hiding the wave (old R5.4) left a giant
* flat-pink void and broke the band's rhythm. Real fix = the mobile treatment on desktop too:
* the wave art COVERS the whole band (no mid-section hard cut, curve intact at the top). */
/* The wave keeps its ORIGINAL 1920/770 box (= exactly the pink zone above the cream line at
* 780px) — the old hard-cut was the art's aspect mismatch, which cover-fitting solves. Never
* stretch the box to 100%: that paints pink over the cream zone and the gallery straddle. */
.news-instagram:not(.news-instagram--overlap) .news-instagram__wave{display:block}
.news-instagram:not(.news-instagram--overlap) .news-instagram__wave img{object-fit:cover;object-position:center top}
/* R5.5 The drawer's brand mark peeked out as a 9px sliver while the drawer was closed —
* only render it when the menu is actually open. */
@media (max-width:1023px){
.sk-menu-mark{display:none}
.sk-menu-open .sk-menu-mark{display:flex}
}
/* R5.6 Mobile hero: black letterbox showed where the 16:9 video ran out of the 620px-tall
* hero — stretch the clip and cover-crop the video. */
@media (max-width:1023px){
.hero__bg, .hero__bg-clip{height:100%}
.hero__bg-video{height:100%;width:100%;object-fit:cover}
}
/* Legal/prose tables (Michal 2026-07-22: cookie-policy table crushed on mobile): tidy cells at
* all widths; below 1024 the table becomes a swipeable panel with sane column minimums
* instead of five crushed columns. */
.sk-prose table{border-collapse:collapse;width:100%}
.sk-prose th,.sk-prose td{text-align:left;vertical-align:top;padding:10px 14px;border-bottom:1px solid #e9e7e2;font-size:16px;line-height:24px}
.sk-prose th{font-family:var(--sk-os-bold);font-weight:700;background:#faf9f5}
@media (max-width:1023px){
.sk-prose table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.sk-prose th,.sk-prose td{min-width:110px}
.sk-prose th:nth-child(3),.sk-prose td:nth-child(3){min-width:230px}
}
/* R5.4c Non-overlap band spacing (Michal 2026-07-23): the content block's 246px headroom is
* sized for the homepage's deep wave dip; on About/Contact the wave is flatter, so the form sat
* ~250px too low and the subscribe button kissed (and at wide zooms clipped under) the strip
* below. Pull the content up and the button gets real clearance at every width. */
@media (min-width:1024px){
.news-instagram:not(.news-instagram--overlap) .news-instagram__content{padding-top:110px}
/* ...and the 136px removed above goes back in front of the Instagram block, so ONLY the
* newsletter rises: the gallery keeps its designed straddle over the band boundary and the
* section's total height (and everything below it) stays exactly as designed. */
.news-instagram:not(.news-instagram--overlap) .instagram{margin-top:136px}
}
/* Inner-page hero (Michal 2026-07-23): the 529px banner + default centre crop beheads the
* photo subjects at wide viewports — bias the cover-crop to the upper third where faces live. */
.page-hero__img{object-position:center 30%}
/* ============ Events content model v2 (Helena's sheet, 2026-07-27) ============ */
/* Festival Quarter tag (brand pink) + her sheet's category slugs aliased to the agreed colours */
.event-card[data-cat~="festival-quarter"] .event-card__tag{background:#ef509d}
.event-card[data-cat~="festival-quarter"] .event-card__cat{color:var(--sk-white)}
.event-card[data-cat~="dining-events"] .event-card__tag{background:#4e154f}
.event-card[data-cat~="dining-events"] .event-card__cat{color:var(--sk-white)}
.event-card[data-cat~="drinks-events"] .event-card__tag{background:#ff751f}
.event-card[data-cat~="drinks-events"] .event-card__cat{color:var(--sk-black)}
.event-card[data-cat~="talks-tours-workshops"] .event-card__tag{background:#1800ad}
.event-card[data-cat~="talks-tours-workshops"] .event-card__cat{color:var(--sk-white)}
.event-card[data-cat~="savour-samhain"] .event-card__tag{background:#e94792}
.event-card[data-cat~="savour-samhain"] .event-card__cat{color:var(--sk-white)}
/* multi-tag: the earlier exact [data-cat="x"] selectors still match single-tag cards; these ~= forms
* cover cards carrying "primary subtag" lists for the categories above */
.event-card[data-cat~="dining"] .event-card__tag{background:#4e154f}
.event-card[data-cat~="savour-stage"] .event-card__tag{background:#fdbf1e}
.event-card[data-cat~="savour-stage"] .event-card__cat{color:var(--sk-black)}
.event-card[data-cat~="taste-stage"] .event-card__tag{background:#70ab45}
.event-card[data-cat~="taste-stage"] .event-card__cat{color:var(--sk-black)}
.event-card[data-cat~="savour-the-night"] .event-card__tag{background:#1d135d}
.event-card[data-cat~="savour-the-night"] .event-card__cat{color:var(--sk-white)}
.event-card[data-cat~="family-kids"] .event-card__tag{background:#f17857}
.event-card[data-cat~="wellness"] .event-card__tag{background:#52cfff}
.event-card[data-cat~="home-of-halloween"] .event-card__tag{background:#7ed957}
.event-card[data-cat~="savouring-art"] .event-card__tag{background:#cb6ce6}
/* Single event: sub-title lead + icon-less Good-to-Know tile */
.event-subtitle{margin:0;width:100%;padding:34px var(--sk-gutter) 0;font-family:var(--sk-os-bold);font-weight:700;font-size:22px;line-height:32px;color:var(--sk-pink-text);text-transform:uppercase;letter-spacing:.03em;text-align:center}
@media (max-width:1023px){
.event-subtitle{padding:22px 24px 0;font-size:17px;line-height:25px}
}
/* ============ Mobile single-event restyle (Helena's SPF mock, approved 2026-07-28) ============ */
@media (max-width:1023px){
/* the pink wall of stacked tile cards becomes a tight details list on cream */
.event-meta{background:var(--sk-cream);padding:22px 24px 10px}
.event-meta__list{gap:0}
.event-meta__item{min-width:100%;background:transparent;border-top:0;border-radius:0;box-shadow:none;padding:10px 0;border-bottom:1px solid #e9e5dc;gap:14px;align-items:center}
.event-meta__item:last-child{border-bottom:0}
.event-meta__icon{width:40px;height:40px}
.event-meta__text{gap:2px;text-transform:none}
.event-meta__label{font-size:14px;line-height:20px;letter-spacing:.06em}
.event-meta__value{font-size:16px;line-height:24px;font-family:var(--sk-os-reg);font-weight:400}
.event-subtitle{padding:18px 24px 0;font-size:15px;line-height:22px}
/* clean rounded photo instead of the diagonal cut */
.event-media__img{clip-path:none!important;border-radius:16px;overflow:hidden}
.event-media__back{display:none}
/* content sits tighter, CTA full width */
.event-body{padding-top:8px}
.event-copy{gap:18px}
.event-book{width:100%;justify-content:center}
/* sponsor bar: quieter */
.event-sponsor-bar{padding:26px 24px 30px;gap:14px}
.event-sponsor-bar__logo{width:150px;height:84px;padding:10px 14px}
.event-sponsor-bar__logo img{max-height:60px}
}
/* ============ Scrolled-header pennant (the rescued developer banner) ============ */
/* hidden EVERYWHERE by default (!important: page-hero__nav's img rules out-specify a bare class);
* shown only in the homepage header's scrolled state (.site-nav exists on the front page only —
* inner pages use .page-hero__nav; extending the pennant there = follow-up with design nod) */
.site-nav__logo-img--pennant{display:none!important}
.sk-nav-fixed .site-nav__logo-img--desktop,
.sk-nav-fixed .site-nav__logo-img--mobile,
.sk-nav-fixed .sk-menu-mark{display:none!important}
.sk-nav-fixed .site-nav__logo{width:auto;height:auto;aspect-ratio:auto}
.sk-nav-fixed .site-nav__logo .site-nav__logo-img--pennant{display:block!important;position:static;width:auto;height:56px;max-width:60vw;object-fit:contain}
@media (min-width:1024px){
.sk-nav-fixed .site-nav__logo .site-nav__logo-img--pennant{height:64px;max-width:360px}
}
/* ============ Event page repair round (Michal 2026-07-28) ============ */
/* Desktop: the meta tiles flex (width:auto!important) but the TEXT kept fixed Figma widths
* (325/354/309px inline) — long real values clipped mid-letter at the card edge. Let text flex. */
.event-meta__text{width:auto!important;min-width:0;flex:1 1 auto}
.event-meta__value{overflow-wrap:anywhere}
@media (max-width:1023px){
/* (body photo stays hidden on phones by an existing design rule — the hero shows the same
* image; earlier flow-the-photo attempt removed as dead code) */
/* icons top-align with their first text line instead of floating mid-row */
.event-meta__item{align-items:flex-start}
.event-meta__icon{margin-top:2px}
/* icon-less rows (Good to Know) keep the same text column as the icon rows */
.event-meta__item:not(:has(.event-meta__icon)){padding-left:54px}
}
/* ============ EV2: SPF-style event cards (preview page /events-2/, 2026-07-28) ============ */
.ev2-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;width:100%}
.ev2-card{position:relative;border-radius:18px;overflow:hidden;min-height:340px;display:flex;align-items:flex-end;background:#1d135d}
.ev2-card__media{position:absolute;inset:0;display:block}
.ev2-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.ev2-card__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,20,.55) 0%,rgba(10,8,20,.05) 40%,rgba(10,8,20,.78) 78%);pointer-events:none}
.ev2-card__pill{position:absolute;top:16px;right:16px;z-index:2;font-family:var(--sk-os-bold);font-weight:700;font-size:14px;line-height:20px;padding:6px 14px;border-radius:100px;background:var(--sk-pink);color:#fff;white-space:nowrap}
.ev2-card__body{position:relative;z-index:2;width:100%;padding:18px 18px 20px;display:flex;flex-direction:column;gap:10px}
.ev2-card__day{margin:0;position:absolute;top:-9999px} /* repositioned below */
.ev2-card__day{position:static;display:flex;flex-direction:column;gap:0;color:#fff}
.ev2-card__day strong{font-family:var(--sk-oswald);font-weight:700;font-size:22px;line-height:26px;text-transform:uppercase}
.ev2-card__day span{font-family:var(--sk-os-bold);font-weight:700;font-size:15px;line-height:22px}
.ev2-card__title{margin:0;font-family:var(--sk-os-bold);font-weight:700;font-size:20px;line-height:27px;color:#fff}
.ev2-card__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:2px}
.ev2-btn{font-family:var(--sk-os-bold);font-weight:700;font-size:14px;line-height:20px;padding:10px 20px;border-radius:100px;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.ev2-btn--view{background:var(--sk-yellow);color:var(--sk-black)}
.ev2-btn--book{background:var(--sk-pink);color:#fff}
/* day badge pinned top-left like the mock */
.ev2-card__day{position:absolute;top:16px;left:18px}
.ev2-card__body{padding-top:64px}
/* the 13 category pill colours (dark fills white text, light fills charcoal) */
.ev2-pill--festival-quarter{background:#ef509d;color:#fff}
.ev2-pill--dining-events,.ev2-pill--dining{background:#4e154f;color:#fff}
.ev2-pill--drinks-events,.ev2-pill--drinks{background:#ff751f;color:#3d3935}
.ev2-pill--talks-tours-workshops{background:#1800ad;color:#fff}
.ev2-pill--savour-stage{background:#fdbf1e;color:#3d3935}
.ev2-pill--taste-stage{background:#70ab45;color:#3d3935}
.ev2-pill--family-kids{background:#f17857;color:#3d3935}
.ev2-pill--savour-the-night{background:#1d135d;color:#fff}
.ev2-pill--home-of-halloween{background:#7ed957;color:#3d3935}
.ev2-pill--savour-samhain,.ev2-pill--savour-samhain-spectacles{background:#e94792;color:#fff}
.ev2-pill--wellness{background:#52cfff;color:#3d3935}
.ev2-pill--savouring-art{background:#cb6ce6;color:#3d3935}
.ev2-pill--book-signing{background:#3d3935;color:#fff}
@media (max-width:1023px){
.ev2-grid{grid-template-columns:1fr;gap:16px}
.ev2-card{min-height:300px}
}
@media (min-width:600px) and (max-width:1023px){
.ev2-grid{grid-template-columns:1fr 1fr}
}
/* FAQ page (911): calmer scale — the default prose headings read massive against Q&A copy */
.page-id-911 .sk-prose h2{font-size:26px;line-height:32px;margin:44px 0 8px;color:var(--sk-pink-text)}
.page-id-911 .sk-prose h3{font-family:var(--sk-os-bold);font-weight:700;text-transform:none;font-size:18px;line-height:26px;margin:24px 0 4px;color:var(--sk-black)}
.page-id-911 .sk-prose p{font-size:16px;line-height:25px}
.page-id-911 .sk-prose ul{margin:8px 0 14px}
.page-id-911 .sk-prose li{font-size:16px;line-height:25px}
@media (max-width:1023px){
.page-id-911 .sk-prose h2{font-size:21px;line-height:27px;margin:34px 0 6px}
.page-id-911 .sk-prose h3{font-size:16.5px;line-height:24px;margin:20px 0 4px}
.page-id-911 .sk-prose p,.page-id-911 .sk-prose li{font-size:15.5px;line-height:24px}
}
/* ============ BATCH1 THEME (agent 2026-07-30) ============ */
/* Client final desktop review, theme lane. Tokens: pink #ef509d, yellow #fcbf05, cream #f4f4f0. */
/* B1.1 Inner-page hero: cream wave bottom edge (markup in template-parts/sections/page-hero.php).
* Absolutely positioned over the photo's bottom edge - zero layout height, scales with viewport,
* sits above the image/scrim but below the title overlay. */
.page-hero__wave{position:absolute;left:0;bottom:-1px;width:100%;height:clamp(26px,4.7vw,90px);z-index:1;pointer-events:none;line-height:0}
.page-hero__wave svg{display:block;width:100%;height:100%}
.page-hero__banner .page-hero__overlay{z-index:2} /* title stays above the wave */
/* B1.3 Home sponsors band: less white space (client "remove white space where possible") -
* paddings/gaps ~28% tighter - and the "Sponsorship opportunities..." line slightly bigger. */
.sponsors-band{padding:72px 0}
.sponsors-band__inner{gap:20px}
.sponsors-band__intro{font-size:22px;line-height:32px}
@media (max-width:900px){
.sponsors-band{padding:44px 24px}
}
/* B1.4a Newsletter: Subscribe button rounded (client: "round edges to unify"), size unchanged. */
.newsletter__submit{border-radius:100px}
/* B1.4b Yellow wave under the homepage sponsors band (markup in site-tail.php): same path as the
* hero wave, flipped, so the yellow band flows down into the white logos section below. */
.sk-wave-divider{width:100%;line-height:0;font-size:0}
.sk-wave-divider--sponsors{height:60px;background:var(--sk-white);margin-top:-1px} /* -1px kills the subpixel seam */
.sk-wave-divider--sponsors svg{display:block;width:100%;height:100%;transform:scaleY(-1)}
@media (max-width:900px){
.sk-wave-divider--sponsors{height:36px}
}
/* B1.6 Inner-page newsletter band (client: "Add Wave to subscribers at footer - take out pink and
* put the page colour"): the flat pink ABOVE the wave art's curve becomes the page cream, so the
* band meets the page with a real wave edge like the homepage. The wave art itself stays exactly
* as R5.4b left it (display:block + cover) - we only recolour the strip BEHIND its transparent
* top zone; never display:none the wave (see R5.4b). Strip height: the art's curve dips to
* 315/2560 (=12.3%) of the band width, so an aspect-ratio strip at 250/1920 (=13%) of the band
* width covers it at every width - and unlike vw units it is immune to the site's page zoom.
* Strip sits under the art (z0 < wave z1). */
.news-instagram:not(.news-instagram--overlap)::before{content:"";position:absolute;top:0;left:0;width:100%;height:auto;aspect-ratio:1920/250;background:var(--sk-cream);z-index:0;pointer-events:none}
/* ...and the white NEWSLETTER eyebrow must sit fully BELOW the curve (it straddled it): replace
* R5.4c's fixed 110px pull-up with a band-width-relative one (padding-top % resolves against the
* band width, so it tracks the art exactly, zoom included); .instagram keeps the compensating
* margin so the band's total height (and the gallery straddle) is unchanged at every width. */
@media (min-width:1024px){
.news-instagram:not(.news-instagram--overlap) .news-instagram__content{padding-top:calc(6% + 40px)}
.news-instagram:not(.news-instagram--overlap) .instagram{margin-top:calc(206px - 6%)}
}
/* Batch1 hand-offs (2026-07-30): testimonial photo in the shape slot + past-festival year covers */
.testimonials__shape--photo img{object-fit:cover;border-radius:26px}
.past-festivals__cover{display:block;width:100%;margin-bottom:14px}
.past-festivals__cover img{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 3px 12px rgba(0,0,0,.12)}
/* ============ BATCH2 (agent 2026-07-30) ============ */
/* Client final desktop review, batch 2: homepage hero rework + 20th-anniversary logo rollout
* (Asset 37 header/drawer/footer, Asset 38 sponsors roundel) + footer pink writing/icons.
* Pink system per the WCAG sweep above: #ef509d (--sk-pink) for surfaces, icons and LARGE text;
* --sk-pink-text (#cc0d76) for small text on cream/white. */
/* B2.1 HERO desktop rework (client: "Left Align Savour Kilkenny and Dates - Make Bigger - Put in
* White - Fill Gap"): wordmark 80px pink -> 130px WHITE, dates 32px -> 44px, and the badge/word-
* mark/dates/pills stack left-aligns on one x=210 line on the 1920 canvas, raised to fill the
* empty left zone of her screenshot #1. Desktop 1920-canvas only (>=1024px) - the stacked
* .sk-hero-mobile hero and its scrim/shadow WCAG fixes are untouched. The .hero__gradient scrim
* stays; strengthened text-shadows keep the white WCAG-large text legible over the video. */
@media (min-width:1024px){
.hero-overlay{top:170px}
.hero-badge{margin:44px 0 0 186px}
.hero-title{margin:122px 0 0 160px;width:auto;height:auto}
.hero-title__text{color:var(--sk-white);font-size:130px;width:auto}
.hero-title__line{line-height:136px;white-space:nowrap;text-shadow:0 3px 26px rgba(0,0,0,.5),0 1px 6px rgba(0,0,0,.35)}
.hero-dates{margin:452px 0 0 164px;color:var(--sk-white);font-size:44px;line-height:52px;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.hero-canvas{margin-bottom:14px} /* was -70px: keeps the pills clear of both the dates above and the lifted countdown below */
.hero-links__row{padding-left:160px} /* pills join the x=210 alignment line */
/* B2.2 Countdown up into the opening frame (client: "Move Countdown up slightly so in opening
* website frame"): the hero's countdown overlap deepens -64px -> -90px, putting the band's top
* edge ~810px down the 1920 canvas - inside the first 1080 frame, with clear air below the
* pills. Mobile keeps its own -46px pattern (sk-semantic WAVE block) - untouched. */
.hero__imgwrap{margin-bottom:-90px}
}
/* B2.3 Asset 37 logo slots. The old hexagon slot is 246x206 (ratio 1.19); Asset 37 is 656x590
* (ratio 1.11) - contain + left-anchor instead of the old stretch so nothing distorts. The
* scrolled-state pennant (.site-nav__logo-img--pennant) is a separate approved feature - untouched. */
.site-nav__logo-img--desktop{object-fit:contain;object-position:left top}
/* Drawer brand: kill the pennant-shaped forced ratio (342.92/100.42 !important above) for the
* squarer Asset 37, sized to the drawer head. */
@media (max-width:1023px){
.sk-menu-head__logo{width:132px!important;height:auto!important;aspect-ratio:auto!important;margin:14px 0 2px 16px}
}
/* Footer logo slot keeps width:160px/height:auto (sk-semantic) - no rule needed for Asset 37. */
/* B2.5 Footer "Colour the Primary Pink for Writing and Icons": nav links + Location/Follow Us
* headings are already --sk-pink (#ef509d, Oswald bold 20/22px = WCAG large on cream), and the
* social SVGs are recoloured to #ef509d at the file (brand-2026/soc-*-pink2026.svg). Remaining
* small WRITING goes text-pink #cc0d76 (4.9:1 on cream - #ef509d fails 4.5:1 at small sizes):
* the Location address line and the legal row. Copyright line stays charcoal - it sits on the
* YELLOW band where both pinks fail contrast. */
.footer-meta__text,.footer-meta__maplink{color:var(--sk-pink-text)}
.footer-meta__maplink:hover,.footer-meta__maplink:focus-visible{color:var(--sk-pink)}
.footer-legal__link{color:var(--sk-pink-text);opacity:1}
.footer-legal__link:hover,.footer-legal__link:focus-visible{color:var(--sk-pink)}
.footer-legal__sep{color:var(--sk-pink-text);opacity:.55}
/* ============ /BATCH2 ============ */
/* ============ BATCH3 (agent 2026-07-30) ============ */
/* Client final review, machinery batch: /events/ now renders the CHOSEN EV2 cards (shared
* partial template-parts/cards/card-event-v2.php - the /events-2/ preview is retired to draft),
* Box Office joins the category system, and the Home of Halloween page gets its own template. */
/* B3.1 Pill text colour audit (client: "All Tab Texts in White (remove all charcoal)").
* White only where white-on-fill reaches the 3:1 large-text line; the light fills KEEP charcoal
* because white on them is unreadable/fails. Computed contrast (white / charcoal vs fill):
* WHITE: festival-quarter #ef509d 3.33 | dining-events #4e154f 13.60 |
* talks-tours-workshops #1800ad 12.79 | savour-the-night #1d135d 16.11 |
* savour-samhain #e94792 3.63 | savouring-art #cb6ce6 3.08 | book-signing #3d3935 11.44
* CHARCOAL: drinks-events #ff751f (white 2.69, charcoal 4.26) | savour-stage #fdbf1e (1.66/6.89) |
* taste-stage #70ab45 (2.76/4.14) | family-kids #f17857 (2.78/4.12) |
* home-of-halloween #7ed957 (1.76/6.51) | wellness #52cfff (1.79/6.39)
* Only savouring-art flips vs the EV2 block above; every other pill already matched the audit. */
.ev2-pill--savouring-art{color:#fff}
/* ...and the pill text must be WCAG-LARGE for that 3:1 line to hold: on the festival-quarter
* (#ef509d) and savour-samhain (#e94792) fills NEITHER white NOR charcoal reaches the 4.5:1
* small-text bar, so 14px bold (small) had no passing colour at all. Same move as the countdown
* fix above (16px -> 19px): pill text 14 -> 19px bold (>= 14pt bold = large), line-height 24,
* padding trimmed so the pill keeps its 32px height. Axe re-run after: 0 violations. */
.ev2-card__pill{font-size:19px;line-height:24px;padding:4px 14px}
/* Book Now on the card: white on #ef509d is 3.33:1 (fails 4.5:1 at 14px). Keep the button size,
* swap the fill to the site's documented small-text pink --sk-pink-text #cc0d76 (white = 4.9:1)
* - the same system the footer uses (B2.5 above). */
.ev2-btn--book{background:var(--sk-pink-text)}
/* B3.2 Home of Halloween page (page-home-of-halloween.php): Helena's copy + the programme
* cover side by side on desktop, stacked on mobile; the HOH event grid (chosen cards) below. */
.hoh-body{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:56px;align-items:start;width:1510px;max-width:100%;margin:0 auto;padding:64px var(--sk-gutter) 24px}
.hoh-prose p{font-size:18px;line-height:30px;margin:0 0 20px;color:var(--sk-black)}
.hoh-prose a{color:var(--sk-pink-text);text-decoration:underline}
.hoh-prose a:hover,.hoh-prose a:focus-visible{color:var(--sk-pink)}
.hoh-cover{margin:0}
.hoh-cover img{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.hoh-events{width:1510px;max-width:100%;margin:0 auto;padding:16px var(--sk-gutter) 96px;align-items:flex-start}
.hoh-events__title{margin:0 0 28px;font-family:var(--sk-oswald);font-weight:700;font-size:34px;line-height:44px;text-transform:uppercase;color:var(--sk-black)}
.hoh-events .event-cards__empty{display:flex;align-items:center;gap:14px}
@media (max-width:1023px){
.hoh-body{grid-template-columns:1fr;gap:28px;padding:40px 24px 8px}
.hoh-prose p{font-size:16px;line-height:26px}
.hoh-cover{max-width:400px}
.hoh-events{padding:8px 24px 64px}
.hoh-events__title{font-size:26px;line-height:34px;margin-bottom:18px}
}
/* ============ /BATCH3 ============ */
/* ============ MOBILE-M1 (agent 2026-07-30) ============ */
/* Client final MOBILE review, batch M1 (Basecamp comments 10146971121 + 10146921859, 9 annotated
* screenshots). Everything here is scoped to <=1023px (or <=479px) - the signed-off desktop render
* is not touched. Tokens: pink #ef509d (--sk-pink), yellow #fcbf05, cream #f4f4f0.
*
* Read before editing: the R5.4/R5.4b/R5.4c wave-layering notes, the R4.2 sponsors crest, the
* <=479px countdown block and the two-pink WCAG system all still apply - each rule below says which
* of them it deliberately supersedes and why. */
/* M1.4 "Remove - Floating Savour Banner below main banner" (her IMG_7056/7057/7058: a small pink
* pennant pinned at x=0 just under the header bar, in every scrolled screenshot).
* Cause: the "Scrolled-header pennant" block above turns .site-nav__logo-img--pennant on at EVERY
* width once .sk-nav-fixed lands; its own comment scopes the feature to the desktop header. At
* <=1023 the nav bar is only 80px tall, so the 56px pennant overflowed BELOW the bar as a stray
* floating badge - and it was redundant, because the mobile bar already shows its own wordmark
* (.site-nav__logo-img--mobile). Desktop scrolled-state pennant is untouched. */
@media (max-width:1023px){
.site-nav.sk-nav-fixed .site-nav__logo .site-nav__logo-img--pennant{display:none!important}
}
/* M1.2 "Move up count down or can we put along one line?" - BOTH delivered.
* (a) ONE LINE. The <=479px block above went 2x2 because four 1fr columns could not hold
* MINUTES/SECONDS at the 19px bold WCAG-large minimum without mid-word wraps. That is true of
* EQUAL columns; it is not true of CONTENT-sized ones. Measured intrinsic label widths at 19px/700
* Open Sans: DAYS 49 + HOURS 67 + MINUTES 85 + SECONDS 87 = 288px of text. With repeat(4,auto) +
* space-between the columns size to their own text and the gaps absorb the remainder, so the labels
* can never wrap: at 390 there is 82px of slack (~27px per gap), at 360 40px, and it still fits at
* 320. Labels stay 19px bold (white-on-pink 3.33:1 = WCAG large) and keep the client's own words -
* no abbreviations. The colons stay hidden, as the 2x2 block left them.
* (b) UP. Mobile tucked the card over the hero by -46px; one line also removes a whole 78px row.
* Deepening to -86px puts the entire countdown inside the opening 390x844 frame with air below,
* and still clears the hero pills (which end ~310px, i.e. ~220px above the band). */
@media (max-width:1023px){
.countdown{margin-top:-86px}
}
/* Floor at 360px: measured, one line holds with room to spare at 360/375/390/414 (the widest label,
* SECONDS, renders its full 87px at each), but at 320 the four columns squeeze to 78px and
* MINUTES/SECONDS wrap mid-word again. Below 360 the 2x2 block above therefore still stands - the
* WCAG fix it was written for is preserved exactly where it is still needed. */
@media (min-width:360px) and (max-width:479px){
/* Claw back the side padding so the 288px of label text has room for real gaps: the card's own
* 14px inner padding + the band's 16px left only 312px of usable width at 360. */
.countdown{padding:0 6px}
.countdown__inner{padding-left:8px;padding-right:8px}
/* explicit column-gap, not space-between: with content-sized tracks the labels butted into one
* another ("DAYSHOURSMINUTESSECONDS"). min(4vw,22px) keeps a real gap that still leaves the
* 288px of label text room to sit unwrapped at 360 (288+43=331 of 340 available). */
.countdown__timer{grid-template-columns:repeat(4,auto);justify-content:center;max-width:100%}
/* The separation is a MARGIN on the tracks, not column-gap: the WAVE-1 block's
* ".countdown__timer > .countdown__group{...}" family keeps winning the gap shorthand, so the
* labels butted into one another ("DAYSHOURSMINUTESSECONDS"). A margin between adjacent groups
* is deterministic and still leaves the 288px of label text unwrapped at 360
* (288 + 3x14.4 = 331 of the 340 available). */
.countdown__timer > .countdown__group + .countdown__group{margin-left:min(3vw,20px)!important}
.countdown__group{width:auto;min-width:0}
.countdown__word{white-space:nowrap}
}
/* M1.5 Yellow SPONSORS AND FUNDERS band, "on Top: Add Straight Line and Fork Icon to Right (Similar
* to Desktop). Bottom: Wave". Desktop already IS that: .testimonials__sponsors
* (testimonials/sponsors-band.svg) sits directly above the band as a solid yellow bar - the
* "straight line" - with the brand fork/grass sprig rising out of it right of centre.
* Mobile had the opposite: the WAVE 1 block hides that sprig band at <=1023, and R4.2 (2026-07-22)
* put a masked wavy crest on TOP of the yellow instead. The client has now asked for the desktop
* treatment, so R4.2's crest is retired on mobile and the desktop sprig band is restored - it is
* already responsive (aspect-ratio 1920/206, static img), so it scales in proportion to desktop.
* "Bottom: Wave" was already delivered by B1.4b (.sk-wave-divider--sponsors) - unchanged. */
@media (max-width:1023px){
.sponsors-band{margin-top:0}
.sponsors-band::before{display:none} /* retires R4.2's top crest on mobile */
.testimonials__sponsors{display:block} /* restores the straight line + fork sprig */
}
/* M1.6 "Above Wave - match the colours to remove harsh line". Measured at 390: the funders/logos
* section above is #ffffff, but the newsletter band's own backdrop is the page cream #f4f4f0, and
* at mobile widths the wave art's transparent top-right corner exposes ~54px of that cream - a hard
* white->cream rule right above the wave. Desktop never shows it (there the art reaches the corner).
* Painting the OVERLAP band white makes whatever shows through the art's transparent zone match the
* white section above at every width - self-correcting, unlike a fixed-height strip. Everything
* below is opaque (the wave art, then M1.7's fill), so no white leaks anywhere else. */
@media (max-width:1023px){
.news-instagram--overlap{background:var(--sk-white)}
}
/* M1.7 "Continue Photo through Pink to remove Harsh Pink Line" (newsletter band, mobile).
* Mobile painted the photo for only the first 88vw (343px of a ~1478px band) and then ramped from
* #e04785 to the bright --sk-pink #ef509d over 80px; the eye reads that brightening ramp, plus the
* texture stopping dead, as a line across the band. Desktop has no line because the photo runs
* ~577px of its ~780px pink zone AND the flat colour that follows is #de4685 - the photo's own
* bottom-edge tone - so nothing brightens.
* Mobile now does the same two things: the art runs 150vw (=585px at 390, matching desktop's 577px
* reach) and the colour after it is #de4685 flat, with no ramp. object-position stays "left top"
* so the curve reads exactly as she has already seen it, just deeper.
* WCAG: #de4685 is DARKER than #ef509d, so white-on-pink improves from 3.33:1 to 3.95:1 - the
* band's large-text passes get better, none regress.
* Scoped to --overlap: R5.4b/B1.6's :not(--overlap) wave rules are untouched, and the box is never
* stretched to 100% (R5.4b's warning) - it stops at 150vw. */
@media (max-width:1023px){
.news-instagram--overlap .news-instagram__wave{height:150vw}
.news-instagram--overlap .news-instagram__wave img{object-fit:cover;object-position:left top}
.news-instagram--overlap .news-instagram__content{background:linear-gradient(#0000 0 150vw,#de4685 150vw,#de4685 100%)}
}
/* M1.9b Footer, "Add Fork Icon to Bottom Right on Yellow" (her Sketch.jpg draws the brand sprig at
* the bottom right, rising out of the yellow copyright band into the cream above it - the same
* motif the sponsors band uses in M1.5). It hangs off .site-footer, not off the copyright band:
* that band carries the angular clip-path (0 0, 100% 14px, ...) from the 2026-07-15 motif, which
* would clip a pseudo-element of its own away. Yellow sprig on the cream, base tucked into the
* yellow. Mobile only - the desktop footer was signed off without it. */
@media (max-width:1023px){
.site-footer{position:relative}
.site-footer::after{content:"";position:absolute;right:16px;bottom:40px;width:84px;height:49px;background:url(../images/savour/footer-sprig.svg) no-repeat center/contain;pointer-events:none;z-index:1}
}
/* M1.10 "Recipes can stay there on Mobile. Looks well - too crowded on Desktop." Batch 1 moved
* Recipes under About at BOTH widths; she wants it back as a top-level item on mobile only. The
* drawer and the desktop bar render the same WP menu (primary, id 8), so the extra top-level
* "Recipes" item carries the sk-mobile-only class (Appearance > Menus > CSS Classes) and is hidden
* from 1024px up - desktop keeps Recipes under About exactly as batch 1 left it. */
@media (min-width:1024px){
.sk-mobile-only{display:none!important}
}
/* ============ /MOBILE-M1 ============ */
/* ============ MOBILE-M3 (agent 2026-07-30) ============ */
/* Client final MOBILE review, batch M3 - Basecamp comments 10147089383 (PLAN YOUR VISIT, 7 shots),
* 10147100626 (SPONSORS), 10147106954 (NEWS), 10147125135 (RECIPES). Where her mobile note is the
* short form of a desktop-round ask, the desktop comment (10146597216 / 10146651415) is quoted too,
* because it is the one that says exactly what she means.
*
* Read before editing - none of these are touched or superseded here:
* R5.4 / R5.4b / R5.4c the non-overlap newsletter wave layering + content headroom
* B1.6 the cream strip behind the wave's transparent top zone (VERIFIED still
* correct at 390 - it is what already answers "match the pink behind wave
* to page colour", so M3 leaves the whole wave stack alone)
* R4.5 / R4.7 solid pink behind the non-overlap band (white heading legibility)
* M1.5 R4.2's mobile sponsors crest retired in favour of the desktop sprig band
* M1.6 / M1.7 the OVERLAP (front page) band's white backdrop + 150vw photo + #de4685
* the <=479px countdown block and the two-pink WCAG system (#ef509d surfaces / #cc0d76 small text)
* Everything below is <=1023px only, EXCEPT the two blocks that style markup M3 itself introduced
* (the moved sponsors strip and the ported Getting Here block), which are marked as such. */
/* M3.1 "Make Plan your Visit Clickable - or add a link where it starts at top of page."
* Her circled screenshot: the drawer's PLAN YOUR VISIT row is a pure accordion toggle, so the page
* itself is unreachable from the menu. initDropdowns (assets/js/savour.js) now lets the row follow its
* href on phones and toggles ONLY when the tap lands on the chevron - so the chevron has to be a real
* thumb target, not the 20px glyph box it was. 64x44 of tappable area, running out through the row's
* own right padding to the panel edge, chevron sitting visually where it always did.
* Measured, not assumed: the drawer row is 51px tall with 12px/16px padding (home.css wins the padding
* here, not sk-semantic's 17/20), so align-self:stretch alone only reaches the 27px line box - under the
* 44px touch minimum. The -9px cross-axis margins let the box grow to 44 WITHOUT growing the row.
* Applies to all three parent rows (What's On -> /events/, Plan Your Visit, About -> /about/), each of
* which already had a real destination in the markup that mobile was throwing away. */
@media (max-width:1023px){
.sk-primary-nav .sk-has-sub > .site-nav__link .site-nav__caret{align-self:center;width:64px;height:auto;min-height:44px;margin:-9px -16px -9px auto}
}
/* M3.2 "Tighten up white space under a photo" (her IMG_7062: hero photo -> big white gap -> VISIT
* KILKENNY). The intro's 60px top padding is the desktop rhythm scaled straight down; on a 390 phone
* it reads as a hole under the hero wave. 60 -> 30 above, and the block's tail 60 -> 40. The wave
* itself (B1.1) is untouched - it is the thing she liked.
* Also on this screenshot: "Updated Content Transfered from Desktop. Wave, Updated Image and Content
* Wording" - all three verified already live on mobile, nothing to do. */
@media (max-width:1023px){
.visit-intro__row{padding-top:30px}
.visit-intro{padding-bottom:40px}
}
/* M3.3 "Tighten Up Space - between heading and location" (her IMG_7063: BUTLER GALLERY, then ~126px of
* white, then the address row).
* Cause: home.css equalises card heights (".sk-hover-lift > div:last-child > div:last-child >
* div:last-child{flex:1 1 auto;justify-content:space-between}") - so on the tallest-card height the
* title is pinned to the top and the rows to the BOTTOM, and every one-line-title card gets the
* difference as a void in the middle. Desktop does not show it because its cards are near enough the
* same height. Pack the content to the top on phones instead (the equal card heights stay, so the
* slider does not jitter as you swipe) and tighten the internal rhythm.
* Desktop keeps space-between exactly as signed off.
* Specificity note (measured, twice): home.css's selector scores (0,4,3) - three :last-child
* pseudo-classes count in the CLASS column - so no sane class-based selector outranks it and
* justify-content needs !important. Nothing else in the rule does.
* Packing to the top alone just moves the slack from the middle of the card to the bottom (56-128px of
* white under the address, measured). So on phones the cards also stop being stretched to the tallest
* sibling and size to their own content - which is already the established treatment for place cards in
* the directory (".places-group__cards .place-card{align-self:start}" in sk-semantic). The slider is
* scroll-snapped one card at a time, so nothing reads as ragged.
* Same complaint, section level: each of the three card sections carried 60px of block padding AND a
* 60px header->slider gap on a 390 phone (measured), which is what turns the track's leftover height
* under a short card into a hole. 36/28 keeps the rhythm and takes ~56px out of each of the three.
* .plan-cards is used by page-plan-your-visit.php only - nothing else moves. */
@media (max-width:1023px){
.place-card .place-card__content{justify-content:flex-start!important;gap:14px;padding-bottom:26px}
.place-card .place-card__rows{gap:12px}
.plan-slider__track .place-card{align-self:flex-start}
.plan-cards{padding-top:36px;padding-bottom:36px;gap:28px}
}
/* M3.4 "Remove Savoue Image" (her IMG_7064 = the teal Ireland's Ancient East band). Desktop round,
* same band: "Add Wave frame to top and bottom of blue box if possible (similar to subscribe). Remove
* Savour Photo. Tighten Up blue space so Ireland isn't lost at sea!" - so the element is the Savour
* festival photo inside the partner band (.iae-band__figure, alt "Savour Kilkenny festival"), not the
* IAE logo or the map. Hidden on phones; with it gone the band also stops being a teal ocean, so the
* padding and the map's headroom come in to match ("Ireland isn't lost at sea").
* NOTE for the desktop lane: she asked for the same removal on DESKTOP and it is still there at
* 1440 - deliberately left alone here, this is the mobile batch. */
@media (max-width:1023px){
.iae-band__figure{display:none}
.iae-band{padding-top:44px;padding-bottom:44px;gap:12px}
.iae-band__map{margin-top:-8px}
}
/* M3.5 "From Desktop - Tighten up white space and remove phone numbers" (her IMG_7065 = the Places to
* Eat / Places to Stay cards; desktop round: "Tighten Up White Space - remove Phone numbers").
* The phone row is the place_phone meta output; card-place.php now stamps each row with a
* place-card__row--phone / --pin modifier, so this is one rule instead of a :has() guess.
* Desktop still shows the numbers (her desktop ask is the desktop lane's to land). */
@media (max-width:1023px){
.place-card__row--phone{display:none}
}
/* M3.6 "Add Contact Form Getting Here to Mobile - mentioned on Desktop Also" (her Sketch.jpg = the
* yellow travel band). The desktop round is the unambiguous version: image 6 is the CONTACT page's
* "How to get here" block and the note reads "Could we add this from contact to this page also
* underneath on getting here" - travel copy + quick-link buttons + map, NOT a contact form.
* template-parts/sections/getting-here.php now renders that block under #getting-here on the Plan
* page, reusing the .contact-location family so it inherits the Contact page's responsive behaviour.
* Only the seam is new: .contact-location ships with no top padding (on /contact/ it follows another
* block), and here it lands straight under the yellow band. Not width-scoped - the block itself is
* new markup at every width. */
.sk-getting-here{padding-top:64px}
@media (max-width:1023px){
.sk-getting-here{padding-top:36px;padding-bottom:40px;gap:28px}
.sk-getting-here .contact-location__col{gap:26px}
.sk-getting-here .contact-location__text{gap:20px}
.sk-getting-here .contact-location__copy{gap:18px;font-size:16px;line-height:26px}
.sk-getting-here .contact-heading{font-size:26px;line-height:34px}
.sk-getting-here .contact-travel{gap:10px}
.sk-getting-here .contact-map{height:300px}
}
/* M3.7 "Move Smaller Sponsors Footer currently on mobile above Newsletter for general footer.
* Match/Blend colours." (her IMG_7067). Desktop round said the same: "Add Home Page Sponsors Footer to
* the General Page Footer - Start of Footer - like Home Page". The strip moved in the markup
* (site-footer.php -> template-parts/sections/footer-sponsors.php, called at the TOP of site-tail.php),
* so it now opens the tail exactly where the front page puts its big sponsors band.
* Two things have to follow it: its -56px tuck (which used to pull it up over the footer's top edge and
* would now bite into the page content), and its colour. "Match/Blend" = the cream the page already
* uses - which is also the colour B1.6 paints behind the newsletter wave's transparent top, so the
* strip now runs seamlessly into the wave instead of stopping at a white slab.
* The band's own layering is untouched: no rule here goes near .news-instagram.
* Not width-scoped - the strip's new position is the same at every width. */
.footer-sponsors{margin-top:0;margin-bottom:0;background:var(--sk-cream);border-bottom:0;padding-top:34px;padding-bottom:30px}
@media (max-width:1023px){
.footer-sponsors{padding-top:24px;padding-bottom:22px}
}
/* M3.8 SPONSORS page, "Tighten up blank spaces" (her IMG_7069). Two separate causes:
* (a) the intro's own dead air - the client's edited copy comes out of ACF wrapped in
, and a
* inside a
is invalid, so the browser split it into [empty .sponsor-lead][the real text][empty
*
]: two zero-height flex children eating 24px of gap EACH. Fixed in page-sponsor.php by
* unwrapping the outer
(the guard site-tail.php already uses for sponsors_band_intro).
* (b) the section rhythm itself, which is still the desktop scale on a phone.
* Everything else she listed on this page - Avonmore replacing Anna, the hero wave, the new text, the
* new partners (Rive Gauche / Irish Media Agency (in-kind) / Lyrath Estate Hotel) - verified already
* live on mobile, so no rules for those.
* With (a) fixed the copy finally lands INSIDE .sponsor-lead and picks up its designed centred 20/30
* treatment (it had been an unstyled bare
) - which matches the centred eyebrow + heading above it,
* but 20px centred is a tall block on a 390 phone, so the lead comes down to 17/26 here only. */
@media (max-width:1023px){
.sponsor26{gap:24px;padding-top:30px;padding-bottom:40px}
.sponsor26 .sponsor-intro{gap:16px}
.sponsor26 .sponsor-lead{font-size:17px;line-height:26px}
.sponsor26 .logo-grids{gap:22px}
.sponsor26 .logo-grid__body{padding:16px 10px}
}
/* ============ /MOBILE-M3 ============ */
/* ============ MOBILE-M4a (2026-07-30) ============ */
/* Contact, "Move Map between HOW TO GET HERE and Text" (her CONTACT screenshot 3). The heading sits
* inside .contact-location__text while the map is a sibling of the column, so flex order alone can't
* interleave them: display:contents flattens both wrappers on mobile and lets the four parts order
* freely. Desktop (>=1024) keeps the signed-off two-column layout untouched. */
@media (max-width:1023px){
.contact-location{display:flex;flex-direction:column}
.contact-location__col,.contact-location__text{display:contents}
.contact-heading{order:1}
.contact-map{order:2;height:280px;width:100%;margin:14px 0 18px;border-radius:14px;overflow:hidden}
.contact-location__copy{order:3}
.contact-travel{order:4}
}
/* ============ /MOBILE-M4a ============ */
/* ============ MOBILE-M4b (agent) ============ */
/* Client final MOBILE review, batch M4 - Basecamp comment 10147146321 (ABOUT, 3 screenshots) plus the
* two CONTACT verifications from 10147158690. Where her mobile note is the short form of a desktop-round
* ask, the desktop comment (ABOUT 10146672453 / CONTACT 10146730902) is quoted, because that is the one
* that says what she means. Everything below is <=1023px only - the signed-off desktop render is not
* touched by a single rule in this block.
*
* Read before editing - none of these are superseded here:
* R5.4 / R5.4b / R5.4c the non-overlap newsletter wave layering + content headroom
* B1.6 the cream strip behind the wave art's transparent top zone. RE-VERIFIED at
* 390 on /about/: cream above the curve, pink below - which IS her item 5
* ("Pink behind the wave of subscribes to match the page"), already delivered,
* so this block adds NOTHING for it. Never display:none the wave (R5.4b).
* R4.5 / R4.7 solid pink behind the non-overlap band (white heading legibility)
* M1.6 / M1.7 the OVERLAP (front page) band's white backdrop + 150vw photo + #de4685
* M3.6 the ported Getting Here block on /plan-your-visit/ reuses the
* .contact-location family, so M4a's order rules (and M4b.4's repair) have to
* keep working there too - both are scoped so they do
* sk-semantic 809/2146 ".about-info__firefly{display:none}" then
* ".about-info__firefly.about-photo-styled{display:flex;...}" - the pair that
* hides then un-hides the About feature photo on phones. M4b.3 keeps the
* un-hide and only re-homes it, at matched (0,2,0) specificity.
*
* ABOUT item 1, "Updated Image Transferred over from desktop edits": VERIFIED live at 390 - the hero is
* the Festival-Quarter photo her desktop comment asked for ("This Photo to replace Anna with wave at
* bottom") and it carries B1.1's cream wave. Nothing to build, so no rule for it. */
/* M4b.2 "Push down that 2nd Photo between the gap - and over the line" (her ABOUT screenshot 1).
* The 2nd photo on the page = the Our Story photo (.about-story__media; the hero is the 1st). Her
* desktop note on this exact region is the unambiguous half: "Tighten Up White Blank Space", pointing at
* the same photo with dead white around it.
* Measured at 390 before: hero ends 356, then 60px of white, photo 416-640, 40px, story copy to 1374,
* then 42px of white + 46px of cream straddling the WHITE->CREAM section line at 1414 - the only real
* gap, and the only line, on that screen. So: the photo moves to the END of the story section (order:2,
* the flex gap gives it its 40px of air) and hangs 96px of its 224px past the section boundary, i.e. it
* sits IN the gap and OVER the line, exactly as asked - and the 60px hole under the hero goes with it,
* which is the desktop ask in the same move. Net page height at 390: -72px, so nothing grows.
* Layering: .about-story and .about-info-band are both position:relative/z-index:auto, so they paint in
* tree order and the later band's cream would cover the overhang; z-index:2 on the photo lifts it into
* paint step 9, above that background. Neither section creates a stacking context, so this holds.
* The band's top padding absorbs the overhang (96 + 28 of clearance) instead of the copy colliding. */
@media (max-width:1023px){
.about-story{padding-bottom:0}
.about-story__media{order:2;position:relative;z-index:2;margin-bottom:-96px}
.about-info-band{padding-top:124px}
}
/* M4b.3 "Put Photo of Castle between text and Brochure coming soon on the yellow box" (her ABOUT
* screenshot 2, which shows the castle photo sitting BELOW the yellow box). The castle photo is the one
* already on the page - .about-info__firefly.about-photo-styled, about-feature-market.jpg, the
* castle + market shot she signed off on 2026-07-21 - so this is a MOVE, not a new image.
* It cannot be moved in the markup: desktop needs it as a flex SIBLING of .about-info__card
* (flex:0 0 500px inside the yellow band, the 2026-07-22 "about info band v2" layout). So mobile
* flattens the card + inner wrappers with display:contents - the same technique M4a used for the
* contact map - which puts .about-info__head, .about-info__firefly and .about-info__actions on one flex
* line and lets order interleave them: copy (1), castle photo (2), buttons (3).
* With the card flattened its yellow surface goes with it, so the band moves up to .about-info itself
* (same fill, same 8px radius, same 60/24 padding it had) and the photo is INSIDE the yellow box, which
* is what she asked for. The 44px .about-info__inner gap is replaced by .about-info's own 30px - three
* children now, not two, and 44 twice was a tall stack on a 390 phone. */
@media (max-width:1023px){
.about-info{background:var(--sk-yellow);border-radius:8px;padding:60px 24px;gap:30px}
.about-info__card,.about-info__inner{display:contents}
.about-info__head{order:1}
.about-info__firefly.about-photo-styled{order:2;width:100%;margin:0;padding:0}
.about-info__actions{order:3}
}
/* M4b.4 CONTACT repair (found while verifying M4a, not a client note). M4a's ".contact-heading{order:1}"
* is unscoped, and .contact-heading is used FOUR times: Enquire Now, Get In Touch, How to get here, and
* the ported Getting Here block. .contact-form-card and .contact-getintouch__top are flex columns too,
* so at <=1023 "ENQUIRE NOW" dropped to the bottom of the form card (measured: top 1537 of a card
* ending 1613, under the SEND button) and "GET IN TOUCH" dropped below the address/email rows. Her own
* screenshot 1 shows ENQUIRE NOW at the TOP of the card, where it belongs.
* The order dance M4a needs only applies inside .contact-location, so: reset the global one (same
* (0,1,0) specificity, later in the file = wins) and re-assert it scoped (0,2,0). The map interleave
* M4a delivered is unchanged, on /contact/ and on the /plan-your-visit/ port alike. */
@media (max-width:1023px){
.contact-heading{order:0}
.contact-location .contact-heading{order:1}
}
/* ============ /MOBILE-M4b ============ */
/* ============ DESKTOP-SWEEP (agent) ============ */
/* Client final DESKTOP review — Basecamp message 10146249574 + its 10 page comments — re-walked item
* by item against the live 1440 render. This block carries ONLY what was still outstanding on
* desktop; everything her earlier batches already delivered was verified and left alone.
*
* Read before editing — none of these are superseded here:
* R5.4 / R5.4b / R5.4c the non-overlap newsletter wave layering + content headroom
* B1.1 / B1.4b / B1.6 the hero wave, the yellow sponsors divider, the cream strip behind the
* newsletter wave's transparent top. The IAE waves below are a THIRD use of
* that same art + technique, not a change to either of them.
* B2.x / B3.x hero rework, Asset 37/38 rollout, footer pink, EV2 cards + Box Office
* M1 / M3 / M4a / M4b the <=1023px lanes. Two mobile rules are deliberately PROMOTED to every
* width below (M3.4's figure, M3.5's phone row) because the desktop round
* asked for the same removal and M3.4/M3.5 said so in their own comments.
* Every rule here is either scoped to >=1024px or is an all-width removal she asked for twice.
* Tokens: pink #ef509d, yellow #fcbf05, cream #f4f4f0, teal #008299. */
/* DS.1 PLAN, item 2 "Left Align text - tighten up white spaces" (her Plan screenshot 1).
* .visit-intro__row carries justify-content:center, so the eyebrow + heading + first two paragraphs
* sat at x=441 while the two .visit-intro__note paragraphs below them sat at the page gutter x=154 —
* two different left edges in one block, which is what she is pointing at. flex-start puts the whole
* intro on the gutter line (measured after: 154 / 154). The 743px text column is unchanged, so the
* measure does not grow. Padding comes off the top and bottom of the same block for the second half
* of the ask (measured .visit-intro height 549 -> 492 at 1440). */
@media (min-width:1024px){
.visit-intro__row{justify-content:flex-start;padding-top:60px;padding-bottom:8px}
.visit-intro{padding-bottom:56px}
}
/* DS.2 PLAN, item 4 "Tighten up White Space - Maybe move View All over to the space right of the text
* to balance?" (her Plan screenshot 2 — heading left, copy centre, VIEW ALL stranded UNDER the copy
* with ~220px of empty page to its right).
* .plan-cards__body is a fixed 773px flex COLUMN, so the button could only ever stack under the copy.
* On desktop it becomes a row that fills the header: copy left, button pinned right and vertically
* centred against it. Measured after: copy 486..1101, button 1137..1286 — the button now ends on the
* same right edge as the section (1286), which is the balance she asked for.
* --fixed's flex:0 0 auto / width:773px scores the same (0,1,0) as .plan-cards__body, so ORDER decides
* it: this file loads after sk-frag-page-plan-your-visit.css, so these win without !important.
* Mobile keeps the stacked column (M3.3's .plan-cards rhythm is untouched). */
@media (min-width:1024px){
.plan-cards{padding-top:64px;padding-bottom:64px}
.plan-cards__body{flex:1 1 auto;width:auto;max-width:none;flex-direction:row;align-items:center;justify-content:space-between;gap:48px;padding-top:34px}
.plan-cards__copy{flex:1 1 auto;width:auto;min-width:0}
}
/* DS.3 PLAN, item 5 on the teal Ireland's Ancient East band. Three asks in one line:
* "Add Wave frame to top and bottom of blue box if possible (similar to subscribe).
* Remove Savour Photo. Tighten Up blue space so Ireland isn't lost at sea!"
*
* (a) Remove Savour Photo — M3.4 hid .iae-band__figure at <=1023px only and its own comment flags
* that the DESKTOP half was still outstanding. Promoted to every width; that mobile rule now just
* repeats this one harmlessly.
* (b) Wave frame — markup added in page-plan-your-visit.php: the SAME path as the page-hero wave,
* cream fill, absolutely positioned with zero layout height so the band's box is unchanged. The
* fill has to match the adjoining page colour on each edge and it does: sampled #f4f4f0 directly
* above (.plan-cards) and directly below (the next .plan-cards) the band. Top copy is flipped
* with scaleY(-1), the same trick .sk-wave-divider--sponsors uses. The band is already
* position:relative. -1px insets kill the subpixel seam.
* (c) Tighten the blue — with the photo gone the left column is short, so the band's height is set by
* the map. Padding 100 -> 64 and the map 564 -> 500 design px bring the band from 705px to 588px
* at 1440 (-117px) with the map still the hero of the composition: Ireland out of the sea.
* .iae-band__col has no position of its own, so it gets one here to sit above the wave art. */
.iae-band__figure{display:none}
.iae-band__wave{position:absolute;left:0;width:100%;height:clamp(18px,3vw,58px);z-index:1;pointer-events:none;line-height:0}
.iae-band__wave svg{display:block;width:100%;height:100%}
.iae-band__wave--top{top:-1px;transform:scaleY(-1)}
.iae-band__wave--bottom{bottom:-1px}
.iae-band__col{position:relative;z-index:2}
.iae-band__map{z-index:2}
@media (min-width:1024px){
.iae-band{padding-top:64px;padding-bottom:64px}
.iae-band__map{width:500px}
}
/* DS.4 PLAN, item 7 "Tighten Up/Remove White Space between Heading and location" (her Plan screenshot
* 4, the place cards).
* Cause is the one M3.3 documented for phones: home.css equalises the cards to the tallest sibling and
* pins the title to the top / the address rows to the bottom (justify-content:space-between), so a
* ONE-line title leaves the difference as a hole in the middle. Measured at 1440: 59px under a
* one-line title vs 25px under a two-line one.
* M3.3's phone fix (pack to the top, let cards size to content) is wrong for desktop — three cards sit
* side by side there and ragged heights would show. Instead the title reserves its second line, so
* every card's title box is the same height and space-between has nothing left to spread: measured
* after, EVERY card is 25px / 38px (title->rows / rows->card bottom) and the card height is unchanged
* at 441px, so the slider does not move. 92px = 2 x the 46px title line-height.
* Scoped to .plan-cards so the /directory/ archive's own place cards are untouched. */
@media (min-width:1024px){
.plan-cards .place-card__title{min-height:92px}
}
/* DS.5 PLAN, item 9 "Tighten Up White Space - remove Phone numbers" (her Plan screenshot 7).
* M3.5 hid .place-card__row--phone at <=1023px only and its comment says the desktop ask was still
* the desktop lane's to land. Promoted to every width. */
.place-card__row--phone{display:none}
/* DS.6 HOME, item 8 "Yellow Box - round edges" (her home screenshot 3). .info__content shipped with
* border-radius:0. 24px matches the rounded family the rest of the review asked for (the pill buttons,
* the 26px testimonial shape, the 18px HOH cover) without turning a full-bleed band into a card.
* Desktop only ON PURPOSE: at <=1023px sk-semantic gives the same box an angled top edge
* (clip-path:polygon(0 0,100% 20px,100% 100%,0 100%)) that she has already signed off on, and a
* radius under that clip only rounds the two BOTTOM corners — a change to the approved mobile render
* for an ask she made in the desktop round. Verified at 390 before/after: unchanged. */
@media (min-width:1024px){
.info__content{border-radius:24px}
}
/* DS.7 HOME, the knock-on from item 10 ("Remove William and James - Use Photo of Chef on Stilts").
* The swap landed, but the old artwork was a cut-out with transparent margins and the stiltwalker is a
* solid rectangular photo, so at 1440 it covered the end of "...welcoming 74,500 visitors in 2025."
* and the right edge of the BECOME A SPONSOR 2026 button (measured: photo left 1011, copy right 1084,
* button right 1052 — a 73px collision). Her own screenshot 3 shows the figures clearing the copy, so
* this is a regression against the render she approved, not a new ask.
* Fixing it by moving the photo (margin-right on .info__content) widens the flex row and pushes the
* page into horizontal overflow — measured scrollWidth 1441 -> 1497. The photo box therefore stays
* exactly where it is and the COPY column comes in instead: .info__stack is a fixed 1164px inside a
* 1139px content box, i.e. it already overhangs its own padding by 25px. 980px clears the photo by
* 28px (copy) and 28px (buttons) with scrollWidth unchanged at 1441, and the buttons still sit on one
* row. Text stays centred in the stack, so the yellow box reads as copy-left / photo-right — the
* composition in her screenshot. */
@media (min-width:1024px){
/* 2026-07-31: superseded — the stiltwalker is now a proper transparent CUTOUT (attachment 988,
* matching the William & James cutout it replaced), so the copy column no longer needs narrowing. */
/* .info__stack{width:980px} */
}
/* DS.8 WHAT'S ON, item 2 "Tighten up writing - remove excess space between photo and writing and
* filters". .event-intro carries 100px of block padding on the 1920 canvas at BOTH ends, which is the
* whole of the gap she is pointing at (hero ends 474, eyebrow starts 560, filter panel starts 882).
* 56/44 keeps the section's rhythm and takes ~75px out at 1440.
* NOT applied when the banner is off: ".page-hero--nobanner + .event-intro{padding-top:110px}" scores
* (0,2,0) and still wins, because that padding is header clearance, not decoration. */
@media (min-width:1024px){
.event-intro{padding-top:56px;padding-bottom:44px}
}
/* ============ /DESKTOP-SWEEP ============ */
/* ============ SEAM FIX (2026-07-31, client: harsh line under Subscribe Now) ============ */
/* sk-semantic 1516 painted the lower newsletter band with a HARD gradient stop
* (`#0000 0 762px, #de4685 762px ...`) in a slightly different pink to the wave art above it
* (#de4685 vs the art's ~#de4a8e). Result: a visible horizontal seam right under SUBSCRIBE NOW
* where the photo-textured wave met the flat fill, reading as two different backgrounds.
* Fix: match the art's tone exactly and soften the stop into a 150px fade so the photo texture
* dissolves into the flat colour instead of butting against it. Same intent as her mobile note
* "Continue Photo through Pink to remove Harsh Pink Line". Homepage overlap band only. */
/* v2: the fade was the bug. .news-instagram__content is z-index:10, i.e. ABOVE the wave art,
* so a semi-transparent fade painted OVER the photo and lightened it — that pale band WAS the
* "hard line". Correct fix: stay fully transparent until the art ends (770 design px, the art's
* own box height), then a hard stop in the art's EXACT bottom-row colour #dc488f, so the join
* is invisible instead of blended. */
@media (min-width:1024px){
.news-instagram--overlap .news-instagram__content{
/* v4: start the solid fill 30px BEFORE the art box ends (770) so the two layers OVERLAP.
* Without the overlap there is a ~10px band where the art has faded out, the fill has not
* begun and the cream strip beneath shows through as a hairline. */
background:linear-gradient(#0000 0 740px,#dc488f 740px 1050px,#0000 1050px);
}
}
@media (max-width:1023px){
/* same principle on phones: the art box is 88vw tall (sk-semantic 2335), so hold transparent
* to 88vw then hard-stop in the art's own colour. */
.news-instagram--overlap .news-instagram__content{
background:linear-gradient(#0000 0 84vw,#dc488f 84vw 100%);
}
}
/* ============ /SEAM FIX ============ */
/* ============ TIGHTEN-PASS (agent) ============ */
/* Client review round, "too much white space" + the ragged past-festival covers. Four pages:
* /events/ (both widths), /about/ (DESKTOP only - the mobile half already shipped in M4b),
* /past-festivals/ (uniform cover boxes), /plan-your-visit/ (place-card internals, both widths).
*
* MEASUREMENT NOTE, read this before touching a number below. At >=1024px the whole page is a
* fixed 1920 canvas that savour.js `zoom`s to the viewport (sk-semantic 44-48), so at 1440 the
* rendered pixels are 0.75x the CSS pixels written here. Every "before -> after" in these comments
* is in CSS px on the 1920 canvas; the screen deltas at 1440 are three quarters of them. Mobile is
* unzoomed, so <=1023px numbers are 1:1.
*
* Read before editing - none of these are superseded or touched here:
* R5.4 / R5.4b / R5.4c / B1.6 / SEAM FIX the newsletter wave layering. NOTHING in this block
* goes near .news-instagram* - deliberately.
* DS.4 ".plan-cards .place-card__title{min-height:92px}" reserves the title's 2nd line so the
* place cards keep equal heights. KEPT - the tightening below is padding/gaps only, so
* the anti-ragged fix still holds.
* M3.3 the <=1023px place-card packing (justify-content:flex-start!important + card sizing).
* Only its gap/padding values are tightened; the !important pack-to-top is untouched.
* DS.8 ".event-intro{padding:56px/44px}" - superseded by TP.1a, same (0,1,0) specificity so
* ".page-hero--nobanner + .event-intro{padding-top:110px}" (0,2,0) still wins when the
* What's On banner is switched off. That padding is header clearance, not decoration.
* M4b.2 / M4b.3 the <=1023px About re-flow (story photo over the section line, castle photo
* inside the yellow box). TP.2 is >=1024px only and does not reach them.
* BATCH2 "about info band v2" .about-info{padding:72px 64px} - TP.2 overrides only the VERTICAL
* padding, so the 64px sides and the copy-left / castle-photo-right composition are intact.
*/
/* ---- TP.1 /events/ : "the events listing has too much white space" ---- */
/* Measured at 1440 (screen px, so x4/3 for the CSS values): hero wave -> OUR EVENTS 42, intro copy
* -> first day pill 60, event-type select -> first card 67. That is 169px of dead cream in the
* 497px between the hero and the grid, on a page whose job is the grid.
* TP.1a intro block: 56/44 -> 38/28 of block padding (that is DS.8's own numbers taken a step
* further; the section still clears the hero wave).
* TP.1b heading -> body copy: the intro's inner gap is 38px at BOTH widths and it is the single
* biggest hole on the phone render (measured 38px there too, between the H1 and the lead).
* 26px keeps the head/body separation without the void. Not width-scoped on purpose.
* TP.1c the pink filter panel: 26px -> 20px of its own padding, and the 49px it sits above the
* grid -> 30px. The PILLS ARE NOT TOUCHED (52px min-height / 44px+ tap targets stay exactly
* as the SPF-style day bar and the WCAG rounds left them), and neither are the cards.
* After, at 1440: 42 -> 28, 60 -> 43, 67 -> 48 (-33% / -28% / -28%), page 75 CSS px shorter. */
.event-intro__inner{gap:26px}
@media (min-width:1024px){
.event-intro{padding-top:38px;padding-bottom:28px}
.event-filters__panel{padding:20px 22px}
.event-filters{gap:30px}
}
/* Phones: the intro block itself is already 16/18 (sk-semantic's mobile sweep), so the room is in
* the panel and the 49px above the grid. Measured 390 before: 52px intro->pill, 82px select->card. */
@media (max-width:1023px){
.event-intro{padding-bottom:10px}
.event-filters__panel{padding:13px 16px;gap:10px}
.event-filters{gap:32px}
}
/* ---- TP.2 /about/ : the same "tighten the white space" ask, now on DESKTOP ---- */
/* She asked for this on mobile first (delivered in M4b); this is the desktop half. Measured at
* 1440 in CSS px, the four holes between sections were:
* 117 hero wave -> Our Story photo = .about-story padding-top 100 (+ the photo's
* 17px centring slack, which is composition)
* 280 Our Story copy -> the text block = story pb 100 + band pt 100 + textblock pt 80
* 172 text block -> the yellow band = .about-info margin-top 100 + its padding-top 72
* 192 yellow band -> the video banner = its padding-bottom 72 + band pb 100 (+20 button slack)
* 761 CSS px of pure air on a page with four sections. Every reduction below is padding/margin on
* the SECTION boxes only: no type, no photo, no button, no width and no order changes, so the
* signed-off composition (yellow band with copy left + castle photo right, the Our Story photo on
* its pink shape, the video banner) renders exactly as approved, just closer together.
* After: 85 / 180 / 112 / 136 = -248 CSS px (-27% / -36% / -35% / -29%), page ~186 screen px shorter
* at 1440. Scoped >=1024px, so M4b's phone layout is untouched (its own numbers are 40-60px already). */
@media (min-width:1024px){
.about-story{padding-top:68px;padding-bottom:64px}
.about-info-band{padding-top:64px;padding-bottom:64px}
.about-textblock{padding-top:52px}
.about-info{margin-top:60px;padding-top:52px;padding-bottom:52px}
}
/* ---- TP.3 /past-festivals/ : "the year cover images are inconsistent sizes" ---- */
/* Cause: the covers rendered at their own natural aspect (width:100%;height:auto), and the 11
* source files are genuinely all over the place - measured naturals:
* 0.694-0.712 (A4 portrait, 1:root2) 2015 2016 2017 2018 2019 2023 <- six real brochure covers
* 1.000 2025 | 1.064 2024 | 1.394 2022 | 1.417 2014 | 2.048 2020 <- squarer/landscape artwork
* So the cards ran 256px to 390px tall in one row and the grid read ragged.
* Ratio chosen by measurement, not by taste: A4 portrait (1/1.414) is the exact native ratio of six
* of the eleven - they crop by 0-1% - and it is what a brochure cover IS. Least-total-crop across
* all 11 too: A4 229%, 3:4 246%, 4:5 264%.
* HOW THE ART FILLS THE BOX was decided by LOOKING at the render, twice, not by rule-of-thumb.
* Cover for all 11 shipped a uniform grid with three clipped wordmarks (2022 lost the left half of
* its SAVOUR KILKENNY badge, 2024 lost its dates, 2020's "GOES VIRTUAL" bar was cut at both ends);
* contain for all 11 left the near-A4 majority untouched but hung big cream voids on the square art.
* So the FILL follows the file, while the BOX - the thing she is actually complaining about - stays
* identical in every card: page-past-festivals.php reads each attachment's stored width/height and
* stamps --wide when the natural ratio is over 1.02 (a measured threshold: at 1.064 the 2024
* cover-crop already ate the festival dates). Result on today's archive: the six A4 covers + 2023 +
* the square 2025 fill the box edge to edge; 2024 / 2022 / 2014 / 2020 - poster and collage artwork,
* not brochure covers - are matted whole. A newly uploaded cover sorts itself, no per-year rules.
* The box carries the cream matte + radius + shadow, so it reads as a mount; the cell/card stretch so
* a coverless year - none today, but the list is client-editable - cannot go short and re-ragged. */
.past-festivals__cell{display:flex}
.past-festivals__card{height:100%;justify-content:flex-start}
.past-festivals__cover{aspect-ratio:1/1.414;overflow:hidden;border-radius:12px;background:var(--sk-cream);box-shadow:0 3px 12px rgba(0,0,0,.12)}
.past-festivals__cover img{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:0;box-shadow:none}
.past-festivals__cover--wide img{object-fit:contain}
/* ---- TP.4 /plan-your-visit/ : "tighten the boxes a little" ---- */
/* The place card's own internals, measured at 1440 in CSS px: 42px side padding, a 33px gap between
* the title and the address row, 29px between address rows and 50px of floor under the last one -
* which is why a one-line card reads as a title, a hole, an address, then more hole (her Butler
* Gallery screenshot). Moderate, not crushing: 34 / 20 / 20 / 32, i.e. the card loses 31 CSS px of
* padding (-5% of its height) and nothing else changes.
* NOT touched: DS.4's min-height:92px title box (that is what keeps the row of cards level), the
* card media, the wave edge, the slider snapping, and every card is still one big tap target.
* Scoped to .plan-cards so the /directory/ archive's own place cards are left alone. */
@media (min-width:1024px){
.plan-cards .place-card__content{padding:0 34px 32px;gap:20px}
.plan-cards .place-card__rows{gap:20px}
}
/* Phones: M3.3 already packed these to the top and brought them to 24/26/14. A light trim only -
* its justify-content:flex-start!important is deliberately left in place. */
@media (max-width:1023px){
.plan-cards .place-card__content{padding:0 20px 20px;gap:11px}
.plan-cards .place-card__rows{gap:10px}
}
/* ============ /TIGHTEN-PASS ============ */
/* ============ MOBILE-FIXES-2 (agent) ============ */
/* Client dev's real-device mobile review, four defects. Every cause below was MEASURED on the live
* site at 390 (and 360/414 where the brief asked), by sampling actual pixels - not inferred.
*
* Read before editing - nothing here supersedes any of them:
* R5.4 / R5.4b / R5.4c the non-overlap newsletter wave layering + content headroom. MF2.2 changes
* ONLY the height of B1.6's cream strip on phones; the wave art box, its
* object-fit and the content headroom are untouched. Never display:none the
* wave (R5.4b's standing warning).
* B1.6 the cream strip behind the wave art's transparent top zone. Its DESKTOP
* sizing (aspect-ratio 1920/250) is correct and is left exactly as it is -
* MF2.2 re-derives it for the <=1023px crop only, and says why below.
* B1.1 the inner-page hero wave (markup in template-parts/sections/page-hero.php).
* MF2.1 changes its FILL only; geometry, z-index and the -1px bleed stay.
* M1.6 / M1.7 / SEAM FIX the homepage OVERLAP band. NOT ONE RULE BELOW MATCHES
* .news-instagram--overlap - MF2.2 is :not(--overlap) scoped, as B1.6 is.
* M3.7 .footer-sponsors is cream and opens the tail on inner pages; that cream is
* the colour MF2.2's strip has to carry down to the wave's curve.
* sk-semantic 2335-2337 the <=1023px newsletter wave block (.news-instagram__wave{height:88vw} +
* the content gradient that starts at 88vw). MF2.2 depends on that 88vw and
* says so; if that number ever moves, move MF2.2's with it.
* M4a / M4b.4 the .contact-heading order dance. MF2.3 touches nav only.
* Tokens: pink surfaces #ef509d (--sk-pink), pink TEXT on white/cream #cc0d76 (--sk-pink-text),
* cream #f4f4f0 (--sk-cream), white #fff.
*
* NOT IN THIS FILE - defect 1 of the four, the thin black line on the mobile hero video, was NOT a
* CSS bug and has no rule here. The source file uploads/2026/07/savour-homepage-hero.mp4 was a
* 1920x1080 encode with LETTERBOX BARS BAKED INTO THE FRAMES: picture content only occupied rows
* 32-1047, i.e. 32px of pure #000 top and bottom of every frame (verified across 13 sampled frames).
* R5.6's "height:100%;object-fit:cover" was already doing its job - it was faithfully covering the
* box with a video whose own edges are black, so 32px x (620/1080) = 17.8px of black landed at the
* bottom of the 620px mobile hero (measured: solid rgb(0,0,0) from y=601.5 to 619.5 at 390). The top
* bar was hidden behind the nav bar, which is why only one line was ever reported.
* Fixed at source: the file was re-encoded cropped to 1920x1012 (crop=1920:1012:0:34, two-pass
* 1150k, PSNR 42.8dB vs the original - visually identical, 2.77MB -> 3.08MB) and replaced in place,
* so the URL and the ACF field are unchanged. The untouched original is kept alongside it as
* savour-homepage-hero.letterboxed-original.mp4. If a hero video ever shows a dark edge again, check
* the FILE first: no CSS can crop bars that are painted into the frames. */
/* ---- MF2.1 "Weird line just below the hero wave on /about/ - /contact/ is fine" ---- */
/* Measured at 390 on /about/: the hero wave paints cream #f4f4f0 down to y=355.5 and the section
* below starts #ffffff at y=356 - a hard cream->white step one pixel under the curve. Sampled on
* /contact/ at the same place: #f4f4f0 continues unbroken past the join, which is exactly why the
* client sees no line there. Same step at 1440 (cream 457-473, white from 474), so this is not a
* phone bug - it is width-independent and is fixed at every width.
* CAUSE, not symptom: B1.1's wave art is hard-filled with the PAGE cream (#f4f4f0 in the SVG's own
* fill attribute) on the assumption that every inner page opens on cream. Three do not - their first
* band is white by design: .about-story, .visit-intro (/plan-your-visit/) and .places-directory
* (/directory/), all "background:var(--sk-white)" in their own fragment CSS. So the wave has to carry
* the colour of the band it melts INTO, not a fixed cream.
* The fill becomes a variable (default cream = today's behaviour everywhere else, so no page moves)
* and the three white-opening pages set it to white. Primary selector is the structural :has() on the
* hero's next sibling, so a new white-opening section only has to be added to that one list; the
* body-class line is a no-:has() fallback for older mobile browsers and resolves to the same value.
* Scoped to .page-hero__wave: B1.4b's .sk-wave-divider--sponsors and DS.3's .iae-band__wave are
* different classes with their own fills and are NOT touched. */
.page-hero__wave svg path{fill:var(--sk-hero-wave-fill,#f4f4f0)}
.page-hero:has(+ .about-story),
.page-hero:has(+ .visit-intro),
.page-hero:has(+ .places-directory){--sk-hero-wave-fill:var(--sk-white)}
body.page-id-35,
body.page-id-37,
body.post-type-archive-places{--sk-hero-wave-fill:var(--sk-white)}
/* ---- MF2.2 "The wave above the newsletter reads wrong on several inner pages" ---- */
/* Measured at 390 on /sponsor/, /about/, /news/, /plan-your-visit/ and /contact/ - identical numbers
* on all five, because they all render the same non-overlap tail. Scanning the first non-cream pixel
* per column down the join: x=0 -> y+9, x=60 -> y+26, x=330 -> y+39 (the art's curve, textured pink),
* but x=130 and x=195 -> y+51 reading EXACTLY #ef509d - flat brand pink, not the art. So in the
* middle of the band a strip of flat pink is wedged between the cream and the art's curve, and it
* meets the photo-textured pink of the art along a dead-straight horizontal line. That ledge is what
* the client is pointing at: the curve looks clipped and doubled.
* CAUSE: B1.6 sized its cream strip for the DESKTOP crop. There the wave box keeps R5.4b's
* aspect-ratio 1920/770, the art cover-fits by WIDTH (scale 0.75) and its curve bottoms out at
* 231 CSS px = 12.0% of the band width - which 250/1920 (13.0%) covers, correctly.
* At <=1023px sk-semantic 2335 replaces that box with a flat height:88vw and the art then cover-fits
* by HEIGHT, magnifying it ~1.86x and showing only its middle 1376 of 2560 columns. Measured on the
* art file itself (news-wave-photo-2x.webp, 2560x1211, alpha scan of those exact 1376 columns): the
* deepest transparent point is 196px = 16.2% of the art height = 14.24% of the viewport width. The
* strip is 13.02%. The 1.2% shortfall = 4.8px at 390 - the measured ledge, to the pixel.
* FIX: on phones the strip stops being a fixed ratio and simply becomes as tall as the wave art's own
* box, so cream fills the transparent zone exactly and nothing else, self-correcting at every width -
* no magic number to re-derive if the art is ever re-cut. Verified safe on the file: across those
* 1376 visible columns there is not one semi-transparent pixel below the curve, so the strip can
* never leak cream through the art; and from 88vw down sk-semantic 2337's content gradient is opaque,
* so it cannot leak past the art's bottom edge either. Desktop keeps B1.6's 1920/250 untouched. */
@media (max-width:1023px){
.news-instagram:not(.news-instagram--overlap)::before{aspect-ratio:auto;height:88vw}
}
/* ---- MF2.3 "Mobile menu items have an ugly hover/tap state" ---- */
/* Client's ask, verbatim: no background highlight, just change the link colour to the brand pink on
* hover/active, keep a visible focus state.
* Measured in the open drawer at 390: the submenu children carry
* ".sk-primary-nav .sk-submenu a:hover{background:var(--black-5,#ef509d)!important;color:#fff!important}"
* (home.css, <=1023px) - and because those ship "padding:9px 20px 9px 0!important" with ZERO left
* padding inside a 58px-indented