/* The Three Kings Haddenham: one stylesheet, no build step.
   The old site's look, rebuilt without Bootstrap: charcoal and the pub's red, Oswald capitals for headings,
   Montserrat for words, the crowns and banner flourishes. Gentle animation (site.js adds the classes), switched off
   for people who have asked for less motion. */

:root {
    --red: #ED421C;
    --red-dark: #CD220C;
    --charcoal: #202020;
    --night: #141419;
    --ink: #000;
    --muted: #666;
    --alt: #FAFAFA;
    --white: #FFF;

    --heading: 'Oswald', 'Arial Narrow', Arial, sans-serif;
    --body: 'Montserrat', Arial, sans-serif;

    --wrap: 1280px;
    --gutter: clamp(16px, 4vw, 40px);
    --space: clamp(50px, 7vw, 80px);
    --header: 64px;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ------------------------------------------------------------------ basics */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--header); -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--white);
    color: var(--ink);
    font: 300 15px/1.6 var(--body);
}

/* the photos sliding in from the sides start just off the screen; this stops the page scrolling sideways to them
   (on the body alone, phones still let the page scroll; "clip" where it's supported, as it doesn't make the page a
   scrolling box of its own, which would break the sticky header and smooth scrolling) */
html, body { overflow-x: hidden; }
@supports (overflow: clip) {
    html, body { overflow-x: clip; }
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--red); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--red-dark); }

h1, h2, h3, h4, h5, p, ul, ol { margin: 0; }
p, ul, ol { margin-bottom: 1em; }
strong, b { font-weight: 700; }

:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
main:focus { outline: none; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
    position: absolute; left: 16px; top: -60px; z-index: 300;
    background: var(--red); color: var(--white); padding: 10px 16px;
}
.skip-link:focus { top: 16px; color: var(--white); }

/* the big Oswald capitals, and the red line above them */
.lrg, .red {
    font-family: var(--heading);
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1.1;
}

.lrg { color: #010101; font-size: clamp(34px, 4.4vw, 48px); margin-bottom: 0.4em; }
.red { color: var(--red); font-size: clamp(26px, 3.2vw, 36px); margin-bottom: 0.15em; }
.hl { color: var(--red); }

/* the banner flourish under a heading, and the crown at the end of a section: drawn out from the middle */
.flourish { margin: 0 0 30px; }
.flourish img { width: 50%; max-width: 290px; margin: 0 auto; transform-origin: 50% 50%; }
/* (beside a photo the words are on the left, and so is the flourish, as the old site) */
.row--split .flourish img { margin: 0; transform-origin: 0 50%; }
.crown-end { margin: 30px 0 0; }
.crown-end img { width: 60px; margin: 0 auto; }

.button {
    display: inline-block;
    background: var(--red);
    color: var(--white);
    font: 400 16px/1.2 var(--body);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 15px 40px;
    border: 0;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.button:hover { background: var(--red-dark); color: var(--white); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(237, 66, 28, 0.3); }
.button:disabled { opacity: 0.6; cursor: wait; transform: none; }

/* the old site's big "Book a table" with a double white border */
.button--double { font-size: 20px; padding: 26px 50px; border: 8px double var(--white); }
.button--double:hover { animation: pulse 1.6s infinite; }

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(237, 66, 28, 0.45); }
    70% { box-shadow: 0 0 0 16px rgba(237, 66, 28, 0); }
    100% { box-shadow: 0 0 0 0 rgba(237, 66, 28, 0); }
}

/* icons, drawn from the files in img/icons (on headings, links and list items written in the CMS) */
[class*="icon-"]::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 0.5em;
    vertical-align: -0.12em;
    background: var(--red);
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}
.icon-beer { --icon: url(/img/icons/beer.svg); }
.icon-utensils { --icon: url(/img/icons/utensils.svg); }
.icon-phone { --icon: url(/img/icons/phone.svg); }
.icon-email { --icon: url(/img/icons/email.svg); }
.icon-pin { --icon: url(/img/icons/pin.svg); }
.icon-users { --icon: url(/img/icons/users.svg); }
.icon-facebook { --icon: url(/img/icons/facebook.svg); }
.icon-instagram { --icon: url(/img/icons/instagram.svg); }
.icon-calendar { --icon: url(/img/icons/calendar.svg); }

/* ------------------------------------------------------------------ header */

.site-header { position: sticky; top: 0; z-index: 200; background: var(--charcoal); }

.site-header__bar { display: none; }

.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; }
.site-nav a {
    position: relative;
    display: block;
    padding: 20px 20px;
    margin-left: 20px;
    color: #CCC;
    font: 400 18px/1.2 var(--heading);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.site-nav li:first-child a { margin-left: 0; }
/* a bar drops in from the top on hover, and marks the part of the page you're in */
.site-nav a::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0;
    height: 4px;
    background: #999;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.25s var(--ease);
}
.site-nav a:hover { color: var(--red); }
.site-nav a:hover::before, .site-nav a[aria-current]::before { transform: scaleY(1); }
.site-nav a[aria-current] { color: var(--white); }
.site-nav li:last-child a { background: var(--red); color: var(--white); }
.site-nav li:last-child a::before { background: var(--white); }
.site-nav li:last-child a:hover { background: var(--red-dark); }

/* phones and tablets: a white bar with the crown and name, and the menu dropping down */
@media (max-width: 1199px) {
    .site-header { background: var(--white); box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }

    .site-header__bar { display: flex; align-items: center; justify-content: space-between; height: var(--header); padding: 0 8px 0 15px; }

    .logo {
        display: flex; align-items: center; gap: 10px;
        color: var(--ink);
        font: 500 26px/1 var(--heading);
        text-transform: uppercase;
    }
    .logo img { width: 40px; }
    .logo:hover { color: var(--ink); }

    .site-header__toggle {
        position: relative;
        width: 48px; height: 48px;
        border: 0; background: none; cursor: pointer;
    }
    .site-header__toggle-bars,
    .site-header__toggle-bars::before,
    .site-header__toggle-bars::after {
        position: absolute; left: 12px; width: 24px; height: 2px; background: var(--ink);
        transition: transform 0.3s var(--ease), background 0.3s;
    }
    .site-header__toggle-bars { top: 23px; }
    .site-header__toggle-bars::before { content: ""; left: 0; top: -7px; }
    .site-header__toggle-bars::after { content: ""; left: 0; top: 7px; }
    .site-header__toggle[aria-expanded="true"] .site-header__toggle-bars { background: transparent; }
    .site-header__toggle[aria-expanded="true"] .site-header__toggle-bars::before { transform: translateY(7px) rotate(45deg); }
    .site-header__toggle[aria-expanded="true"] .site-header__toggle-bars::after { transform: translateY(-7px) rotate(-45deg); }

    .site-nav {
        position: absolute; left: 0; right: 0; top: 100%;
        background: var(--white);
        box-shadow: 0 10px 14px rgba(0, 0, 0, 0.2);
        clip-path: inset(0 0 100% 0);
        visibility: hidden;
        transition: clip-path 0.35s var(--ease), visibility 0s 0.35s;
    }
    .site-nav.is-open { clip-path: inset(0 0 -20px 0); visibility: visible; transition: clip-path 0.35s var(--ease); }
    .site-nav ul { flex-direction: column; padding: 10px 0 20px; text-align: center; }
    .site-nav a {
        margin: 0; padding: 12px 20px;
        color: #777;
        font: 700 18px/1.2 var(--body);
        letter-spacing: 1px;
        opacity: 0; transform: translateY(-8px);
        transition: opacity 0.3s, transform 0.3s var(--ease), color 0.2s;
    }
    .site-nav.is-open a { opacity: 1; transform: none; }
    .site-nav.is-open li:nth-child(2) a { transition-delay: 0.04s; }
    .site-nav.is-open li:nth-child(3) a { transition-delay: 0.08s; }
    .site-nav.is-open li:nth-child(4) a { transition-delay: 0.12s; }
    .site-nav.is-open li:nth-child(5) a { transition-delay: 0.16s; }
    .site-nav.is-open li:nth-child(6) a { transition-delay: 0.2s; }
    .site-nav.is-open li:nth-child(7) a { transition-delay: 0.24s; }
    .site-nav a::before { display: none; }
    .site-nav a[aria-current] { color: var(--red); }
    .site-nav li:last-child a { margin: 10px 20px 0; }
}

/* without JavaScript the phone menu simply stays open */
html:not(.js) .site-nav { position: static; clip-path: none; visibility: visible; }
html:not(.js) .site-nav a { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ hero: the pub, with the three crowns */

.hero { position: relative; overflow: hidden; background: var(--charcoal); }
.hero__photo {
    width: 100%;
    aspect-ratio: 9 / 4;
    max-height: calc(100vh - var(--header));
    min-height: 420px;
    object-fit: cover;
}
.hero__panel {
    position: absolute;
    left: 50%; top: 50%;
    width: min(calc(100% - 2 * var(--gutter)), 840px);
    transform: translate(-50%, -50%);
    padding: clamp(24px, 4vw, 40px);
    border: 1px double var(--white);
    background: rgba(0, 0, 0, 0.5);
    color: var(--white);
    text-align: center;
}
/* (the middle crown bigger, their feet in line, centred over the name, as the old site) */
.hero__panel .hero__crowns { display: flex; justify-content: center; align-items: flex-end; gap: 2%; width: 60%; margin: 0 auto; }
.hero__crowns img { width: 30%; filter: brightness(1.6); }
.hero__crowns img:nth-child(2) { width: 40%; }
.hero__panel h1 {
    font: 600 clamp(34px, 6vw, 74px)/1.1 var(--heading);
    text-transform: uppercase;
    padding: 10px 0;
}
.hero__panel p { font: 400 clamp(18px, 2.2vw, 28px)/1.35 var(--heading); margin: 0; }

@media (max-width: 767px) {
    .hero__photo { aspect-ratio: 4 / 5; max-height: 640px; }
    .hero__crowns { width: 80%; }
}

/* ------------------------------------------------------------------ rows */

.row--alt { background: var(--alt); }

/* words beside a photo that runs to the edge of the screen */
.row--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 30px;
    padding: var(--space) 0;
}
.row--split .row__text { padding: 0 var(--gutter); }
.row--split.row--image-left .row__image { order: -1; }
.row--split .row__image { margin: 0; }
.row--split .row__image img { width: 100%; }
.row--split p, .row--split li { font-size: 15px; }
.row--split p.red { font-size: clamp(26px, 3.2vw, 36px); }

@media (min-width: 1481px) {
    .row--split .row__text { padding-left: calc(16.66% + 15px); }
    .row--split.row--image-left .row__text { padding-left: 15px; padding-right: calc(16.66% + 15px); }
}

@media (max-width: 767px) {
    .row--split { grid-template-columns: 1fr; }
    .row--split .row__image { order: 2; }
    .row--split.row--image-left .row__image { order: 2; }
}

/* the awards: red labels with a rosette */
h3.rosette {
    position: relative;
    margin: 0 0 10px;
    padding: 15px 20px 15px 46px;
    background: var(--red);
    color: var(--white);
    font: 400 18px/1.3 var(--body);
    text-transform: uppercase;
}
h3.rosette::before {
    content: "";
    position: absolute; left: 16px; top: 50%;
    width: 18px; height: 22px;
    transform: translateY(-50%);
    background: url(/img/rosette.svg) center / contain no-repeat;
}
h3.rosette + p { margin-bottom: 30px; }

/* centred words (the menu, the offers) */
.row--full { padding: var(--space) 0; text-align: center; }
.row--full .wrap > p, .row--full .intro p { max-width: 900px; margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------------------ photo panels (food, drinks, the fire) */

.panel {
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    min-height: clamp(380px, 46vw, 600px);
    padding: var(--space) var(--gutter);
    color: var(--white);
    text-align: center;
    background: var(--charcoal);
}
.panel__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* a parallax panel (Fresh Food, as the old site): the photo is taller than the panel and moves much more slowly
   than the page (site.js), so the panel seems to slide over it */
.panel--parallax .panel__bg {
    inset: -35% 0;
    height: 170%;
    will-change: transform;
}
.panel::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); }
.panel__text { position: relative; z-index: 1; max-width: 840px; }
.panel h2 { font: 500 clamp(34px, 4.4vw, 48px)/1.15 var(--heading); text-transform: uppercase; margin-bottom: 0.8em; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); }
.panel h2 .red { display: block; font-size: 0.75em; color: var(--red); }
.panel p { font-size: 18px; line-height: 1.75; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }

@media (max-width: 767px) {
    .panel p { font-size: 15px; }
}

/* ------------------------------------------------------------------ the daily offers */

.offers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    gap: 50px 60px;
    margin: 50px 0 0;
    text-align: left;
}
.offer { display: grid; grid-template-columns: 30% 1fr; gap: 5%; align-items: start; }
.offer__image { overflow: hidden; margin: 0; }
.offer__image img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.6s var(--ease); }
.offer:hover .offer__image img { transform: scale(1.06); }
.offer p { font-size: 14px; margin-bottom: 0.8em; }
.offer .offer__day { color: var(--red); font: 400 22px/1.2 var(--heading); }
.offer h3 { font-weight: 600; font-size: 16px; margin-bottom: 0.6em; }
.offer .offer__price { color: var(--red); font-weight: 600; font-size: 15px; }
.offers + .cta { margin: 70px 0 0; }

@media (max-width: 767px) {
    .offers { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; gap: 36px; }
}

/* ------------------------------------------------------------------ the menu, with a tab for each */

.menus { max-width: 1000px; margin: 0 auto; }
.menu-tab { padding: 20px 0 40px; }
.menu-tab h3 { font: 500 34px/1.2 var(--heading); text-transform: uppercase; margin-bottom: 10px; }
.menu-tab h4 { color: var(--red); font-weight: 600; font-size: 22px; text-transform: uppercase; margin: 0 0 15px; padding-top: 20px; }
.menu-tab p { margin-bottom: 0.9em; }

.menu-tabs__links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 40px; margin: 20px 0; }
.menu-tabs__links button {
    position: relative;
    padding: 6px 0;
    border: 0; background: none; cursor: pointer;
    color: var(--ink);
    font: 600 20px/1.2 var(--body);
    text-transform: uppercase;
}
.menu-tabs__links button::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--red); transform: scaleX(0); transition: transform 0.3s var(--ease);
}
.menu-tabs__links button:hover::after { transform: scaleX(0.5); }
.menu-tabs__links button[aria-selected="true"] { color: var(--red); }
.menu-tabs__links button[aria-selected="true"]::after { transform: scaleX(1); }
.js .menu-tab[hidden] { display: none; }
.menu-tab.is-showing { animation: fade-up 0.5s var(--ease); }

/* ------------------------------------------------------------------ booking a table */

.booking-panel { position: relative; overflow: hidden; background: var(--charcoal); color: var(--white); }
.booking-panel__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.booking-panel__form {
    position: relative; z-index: 1;
    width: min(100%, 640px);
    margin-left: max(0px, calc((100% - var(--wrap)) / 2));
    padding: 80px var(--gutter);
    background: rgba(0, 0, 0, 0.3);
    text-align: center;
}
.booking-panel h2 { font: 500 48px/1.1 var(--heading); text-transform: uppercase; margin-bottom: 0.25em; }

.booking { text-align: left; }
.booking__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 4px; }
.booking__row--3 { grid-template-columns: 1.3fr 1fr 0.8fr; }
.field { display: block; margin-bottom: 4px; }
.field span { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 10px 2px 4px; }
.field small { text-transform: none; font-weight: 300; }
.field input, .field textarea {
    width: 100%;
    padding: 16px 18px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: rgba(255, 255, 255, 0.95);
    color: var(--ink);
    font: 400 15px var(--body);
    transition: border-color 0.2s;
}
/* (date, time and number boxes have different heights of their own: all the same) */
.field input { height: 56px; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--red); }
.booking .button { display: block; margin: 20px auto 0; }
.booking__trap { position: absolute; left: -9999px; }
.booking__status { margin: 16px 0 0; text-align: center; font-weight: 600; }
.booking__status:empty { display: none; }
.booking__status--done { background: var(--red); padding: 14px; animation: fade-up 0.5s var(--ease); }
.booking__note { margin-top: 12px; text-align: center; }

@media (max-width: 767px) {
    .booking__row, .booking__row--3 { grid-template-columns: 1fr; }
    .booking-panel__form { padding: 50px var(--gutter); background: rgba(0, 0, 0, 0.55); }
    .booking-panel h2 { font-size: 36px; }
}

/* ------------------------------------------------------------------ the map */

.map { position: relative; }
.map__canvas { position: relative; z-index: 0; height: 500px; background: #E5E3DF; display: grid; place-items: center; }
.map__canvas.is-loaded { display: block; }
.map__fallback { color: var(--ink); text-decoration: underline; }
/* (softens the map's colours a little, as the old Google map's) */
.map__canvas .leaflet-tile-pane { filter: grayscale(0.3); }

/* the pin: the crown in a white bubble pointing at the pub, as the old site's map (Leaflet places it) */
.map__pin {
    display: grid; place-items: center;
    padding: 14px;
    background: var(--white);
    border-radius: 6px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
}
.map__pin::after {
    content: ""; position: absolute; left: 50%; bottom: -10px; margin-left: -10px;
    border: 10px solid transparent; border-bottom: 0; border-top-color: var(--white);
}
.map__canvas .map__pin img { width: 60px; height: 45px; max-width: 60px !important; filter: brightness(0.75); }
.map__directions { z-index: 500; }
.map__directions {
    position: absolute; right: 16px; bottom: 16px;
    background: var(--red); color: var(--white);
    padding: 12px 20px; font-weight: 600; text-transform: uppercase; font-size: 13px; letter-spacing: 0.05em;
}
.map__directions:hover { background: var(--red-dark); color: var(--white); }

/* ------------------------------------------------------------------ footer */

.site-footer { background: var(--night); color: var(--white); padding: 80px 0; }
.site-footer p, .site-footer li { font-size: 15px; line-height: 1.75; font-weight: 400; }
.site-footer a { color: var(--white); }
.site-footer a:hover { color: var(--red); }
.site-footer ul { list-style: none; padding: 0; }
.site-footer h2 { color: var(--red); font: 500 34px/1.2 var(--heading); text-transform: uppercase; margin: 0 0 0.4em; }
.site-footer h2::before { background: var(--red); font-size: 0.7em; }
.site-footer p[class*="icon-"]::before, .site-footer li[class*="icon-"]::before { font-size: 0.95em; }

.footer-cols { display: grid; grid-template-columns: 5fr 4fr 3fr; gap: 40px; }
@media (max-width: 767px) {
    .footer-cols { grid-template-columns: 1fr; }
    .site-footer { padding: 50px 0 20px; }
}

.credits { background: var(--night); color: var(--muted); font-size: 12px; padding: 15px 0; border-top: 1px solid #222; }
.credits__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; }
.credits p { margin: 0; }
.credits a { color: var(--muted); }
.credits a:hover { color: var(--red); }

/* ------------------------------------------------------------------ phones: the booking bar, and back to the top */

.mob-booking {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
    display: none;
    background: var(--red); color: var(--white);
    padding: 15px 0;
    text-align: center;
    font-size: 15px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
    border-top: 1px double var(--white);
    transition: transform 0.4s var(--ease);
}
.mob-booking::after {
    content: ""; display: inline-block; width: 1em; height: 1em; margin-left: 0.6em; vertical-align: -0.12em;
    background: currentColor; -webkit-mask: url(/img/icons/calendar.svg) center / contain no-repeat; mask: url(/img/icons/calendar.svg) center / contain no-repeat;
}
.mob-booking:hover { color: var(--white); background: var(--red-dark); }
.mob-booking.is-hidden { transform: translateY(110%); }

@media (max-width: 767px) {
    .mob-booking { display: block; }
    .credits { padding-bottom: 70px; }
}

.top-link {
    position: fixed; right: 20px; bottom: 20px; z-index: 140;
    width: 50px; height: 50px;
    border-radius: 50%;
    background: var(--red); color: var(--white);
    font-size: 12px; font-weight: 700; line-height: 50px; text-align: center; text-transform: uppercase;
    opacity: 0; transform: translateY(20px) scale(0.8); pointer-events: none;
    transition: opacity 0.3s, transform 0.3s var(--ease);
}
.top-link.is-showing { opacity: 0.7; transform: none; pointer-events: auto; }
.top-link:hover { opacity: 1; color: var(--white); animation: pulse 2s infinite; }
@media (max-width: 767px) {
    .top-link { bottom: 75px; }
}

/* ------------------------------------------------------------------ the 404 and error pages */

.error-page img { width: 96px; margin: 0 auto 20px; }
.error-page p { font-size: 16px; }

/* ------------------------------------------------------------------ animation (site.js adds .js and .is-in) */

@keyframes fade-up {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: none; }
}

/* the hero: the photo slowly closes in; the panel fades up; the three crowns drop in together, then the words */
.js .hero__photo { animation: hero-zoom 14s ease-out both; }
.js .hero__panel { animation: hero-panel 1s var(--ease) 0.2s both; }
.js .hero__panel h1 { animation: fade-up 0.8s var(--ease) 0.7s both; }
.js .hero__panel p { animation: fade-up 0.8s var(--ease) 0.9s both; }
.js .hero__panel .hero__crowns { animation: crown-drop 0.8s var(--ease) 0.4s both; }

@keyframes hero-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes hero-panel { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes crown-drop {
    0% { opacity: 0; transform: translateY(-24px); }
    70% { opacity: 1; transform: translateY(3px); }
    100% { opacity: 1; transform: none; }
}

/* things fade up as they scroll into view */
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: var(--delay, 0s); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* the banner flourishes draw out from the middle (from the left beside a photo) */
.js .flourish img { transform: scaleX(0); transition: transform 1.1s var(--ease) 0.3s; }
.js .is-in .flourish img, .js .flourish.is-in img { transform: scaleX(1); }

/* photos beside words come in from their side */
.js .row--split .row__image[data-reveal] { transform: translateX(40px); }
.js .row--split.row--image-left .row__image[data-reveal] { transform: translateX(-40px); }
.js .row--split .row__image[data-reveal].is-in { transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .js [data-reveal], .js .flourish img { opacity: 1 !important; transform: none !important; }
    .panel__bg { transform: none !important; }
}