/* Juno Halloran: layout. Every value comes from assets/tokens.css (--s-*).
 * Mobile first. @media cannot read custom properties, so the queries below are
 * written as their token values: 767px = --s-mq-phone, 768px = --s-mq-wide,
 * (min-width:1024px) and (min-height:640px) = --s-mq-pin.
 * Modes set by site.js on <html>: jh-js (script ran), jh-motion (motion allowed),
 * jh-pin (the letter pins: motion + a desktop-sized screen). Without them the page
 * is its complete static composition: letter fully inked with plates, book open.
 */

@font-face {
    font-family: "Young Serif";
    src: url("fonts/young-serif-latin-400-normal.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Source Serif 4";
    src: url("fonts/source-serif-4-latin-wght-normal.woff2") format("woff2");
    font-weight: 200 900; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Source Serif 4";
    src: url("fonts/source-serif-4-latin-wght-italic.woff2") format("woff2");
    font-weight: 200 900; font-style: italic; font-display: swap;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--s-nav-h); }
body {
    margin: 0; background: var(--s-bg); color: var(--s-text);
    font: var(--s-weight-text) var(--s-step-body)/var(--s-leading-body) var(--s-font-text);
    -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
picture { display: block; }
a { color: inherit; }
p, h1, h2, h3, h4, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: var(--s-focus-w) solid var(--s-focus); outline-offset: var(--s-focus-offset); }
.jh-suppers :focus-visible { outline-color: var(--s-focus-on-dark); }

h1, h2, h3, .jh-display {
    font-family: var(--s-font-display); font-weight: var(--s-weight-display);
    font-synthesis: var(--s-font-synthesis); letter-spacing: var(--s-track-display);
    text-wrap: balance;
}
.jh-course__name { text-wrap: balance; }
.jh-vh {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.jh-skip {
    position: absolute; left: var(--s-gutter); top: 0; z-index: var(--s-z-sheet);
    padding: var(--s-gap-xs) var(--s-gap-s); background: var(--s-espresso); color: var(--s-butter);
    transform: translateY(-120%);
}
.jh-skip:focus { transform: none; }

.jh-label {
    display: block;
    font: var(--s-weight-label) var(--s-step-label)/var(--s-leading-label) var(--s-font-text);
    letter-spacing: var(--s-track-label); color: var(--s-bay);
}
.jh-label--dark { color: var(--s-label-on-dark); }
.jh-note {
    font-style: italic; font-size: var(--s-step-small); line-height: var(--s-leading-tight);
    color: var(--s-text-muted);
}
.jh-note--dark { color: var(--s-text-on-dark-soft); }
.jh-link {
    display: inline-flex; align-items: center; min-height: var(--s-tap);
    color: var(--s-link); font-style: italic; text-decoration: underline;
    text-decoration-thickness: var(--s-hairline); text-underline-offset: var(--s-gap-2xs);
    background: none; border: 0; padding: 0;
    transition: color var(--s-dur-ui) var(--s-ease-settle);
}
.jh-link:hover { color: var(--s-paprika-deep); text-decoration-thickness: var(--s-rule); }

/* THE ELLIPSE: a true ellipse (radius 50% of each side), ≥2.4× as wide as tall.
   The outline follows the curve and sits outside it, so the focus ring is never clipped. */
.jh-ellipse {
    display: inline-flex; align-items: center; justify-content: center; text-align: center;
    min-height: var(--s-btn-h); min-width: var(--s-btn-min-w); padding: 0 var(--s-btn-pad-x);
    border: 0; border-radius: var(--s-btn-radius);
    background: var(--s-btn-bg); color: var(--s-btn-text); text-decoration: none;
    font: var(--s-weight-label) var(--s-step-small)/var(--s-leading-label) var(--s-font-text);
    transition: background-color var(--s-dur-ui) var(--s-ease-settle);
}
.jh-ellipse:hover { background: var(--s-btn-bg-hover); }
.jh-ellipse:focus-visible { outline: var(--s-focus-w) solid var(--s-focus); outline-offset: var(--s-focus-offset); }

/* ---------- nav ---------- */
.jh-nav {
    position: sticky; top: 0; z-index: var(--s-z-nav);
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-gap-m);
    height: var(--s-nav-h-p); padding: 0 var(--s-gutter);
    background: var(--s-butter); border-bottom: var(--s-hairline) solid var(--s-rule-light);
}
.jh-name {
    display: inline-flex; align-items: center; min-height: var(--s-tap);
    font: var(--s-weight-display) var(--s-step-logo)/var(--s-leading-tight) var(--s-font-display);
    font-synthesis: var(--s-font-synthesis); text-decoration: none; color: var(--s-espresso);
}
.jh-name__mono { display: none; }
@media (max-width: 767px) {
    /* one name per screen: the card says "Juno Halloran"; the phone bar signs "J." like the letters */
    .jh-nav .jh-name__full { display: none; }
    .jh-nav .jh-name__mono { display: inline; min-width: var(--s-tap); }
}
.jh-nav__links ul { display: flex; gap: var(--s-nav-gap); }
.jh-nav__links a {
    display: inline-flex; align-items: center; min-height: var(--s-tap); text-decoration: none;
    font: var(--s-weight-label) var(--s-step-nav)/var(--s-leading-label) var(--s-font-text);
    letter-spacing: var(--s-track-label); color: var(--s-espresso);
    background: linear-gradient(var(--s-paprika), var(--s-paprika)) left calc(100% - var(--s-gap-xs)) no-repeat;
    background-size: 0 var(--s-rule);
    transition: background-size var(--s-dur-ui) var(--s-ease-settle);
}
.jh-nav__links a:hover { background-size: 100% var(--s-rule); }
.jh-nav__menu {
    display: none; min-height: var(--s-tap); padding: 0 var(--s-gap-s);
    border: var(--s-hairline) solid var(--s-espresso); border-radius: var(--s-btn-radius); background: none;
    font: var(--s-weight-label) var(--s-step-nav)/var(--s-leading-label) var(--s-font-text); letter-spacing: var(--s-track-label);
}
@media (max-width: 767px) {
    /* without script the links scroll sideways; with it, a sheet reaches every section */
    .jh-nav__links { overflow-x: auto; scrollbar-width: none; }
    .jh-nav__links ul { gap: var(--s-gap-s); white-space: nowrap; }
    .jh-js .jh-nav__links { display: none; }
    .jh-js .jh-nav__menu { display: inline-flex; align-items: center; }
}
@media (min-width: 768px) {
    .jh-nav { height: var(--s-nav-h); }
}

.jh-sheet {
    width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: var(--s-gap-s) var(--s-gutter) var(--s-gap-xl);
    border: 0; background: var(--s-butter); color: var(--s-espresso);
}
.jh-sheet::backdrop { background: var(--s-espresso); }
.jh-sheet__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-gap-l); }
.jh-sheet__close {
    min-height: var(--s-tap); padding: 0 var(--s-gap-s); background: none;
    border: var(--s-hairline) solid var(--s-espresso); border-radius: var(--s-btn-radius);
    font: var(--s-weight-label) var(--s-step-nav)/var(--s-leading-label) var(--s-font-text);
}
.jh-sheet__list li { border-top: var(--s-hairline) solid var(--s-rule-light); }
.jh-sheet__list a {
    display: flex; align-items: center; min-height: var(--s-supper-row-min); text-decoration: none;
    font: var(--s-weight-display) var(--s-step-h2)/var(--s-leading-heading) var(--s-font-display);
    font-synthesis: var(--s-font-synthesis);
}

/* ---------- 1. arrival: the place card set at the table ---------- */
.jh-arrival { position: relative; }
.jh-arrival__photo { height: var(--s-hero-photo-h-p); overflow: hidden; }
.jh-arrival__photo picture { height: 100%; }
.jh-arrival__photo img {
    width: 100%; height: 100%; object-fit: cover; object-position: var(--s-hero-pos-p);
    transform: scale(var(--s-photo-scale-to));
}
.jh-card {
    position: relative; z-index: 1;
    width: var(--s-card-w-p); margin: calc(-1 * var(--s-card-overlap-p)) 0 0 var(--s-card-x-p);
    padding: var(--s-card-pad-p); background: var(--s-paper); border-radius: var(--s-radius-paper);
    box-shadow: var(--s-card-shadow-settled); transform: rotate(var(--s-card-rot-p));
}
.jh-card__name {
    text-wrap: balance; font-size: var(--s-step-card-name); line-height: var(--s-leading-display); color: var(--s-espresso);
}
.jh-card__role {
    margin-top: var(--s-gap-xs); font-style: italic; font-size: var(--s-step-role);
    line-height: var(--s-leading-tight); color: var(--s-bay);
}
.jh-card__line { margin-top: var(--s-gap-s); max-width: var(--s-measure-card-line); text-wrap: pretty; font-size: var(--s-step-card-line); line-height: var(--s-leading-tight); }
.jh-card__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-gap-xs) var(--s-gap-m); margin-top: var(--s-gap-m); }
.jh-tonight { display: none; }

@media (max-width: 767px) {
    .jh-card .jh-ellipse { padding: 0 var(--s-btn-pad-x-p); }
}
@media (min-width: 768px) {
    .jh-arrival {
        height: calc(100svh - var(--s-ribbon-h) - var(--s-nav-h)); min-height: var(--s-hero-min);
    }
    .jh-arrival__photo { position: absolute; inset: 0 0 auto; height: var(--s-hero-photo-h); }
    .jh-arrival__photo img { object-position: var(--s-hero-pos); }
    .jh-card {
        position: absolute; left: var(--s-card-left); top: var(--s-card-top); margin: 0;
        width: var(--s-card-w); padding: var(--s-card-pad); transform: rotate(var(--s-card-rot));
    }
    .jh-card__name { white-space: nowrap; }
    /* Tonight's set menu: a second printed card on the table, turned the other way to the
       place card, riding up onto the linen like it. A double rule frames it as a printed menu. */
    .jh-tonight {
        display: block; position: absolute; z-index: 1; left: var(--s-gutter);
        top: calc(var(--s-hero-photo-h) - var(--s-tonight-overlap)); width: var(--s-tonight-w);
        padding: var(--s-tonight-pad); background: var(--s-paper); border-radius: var(--s-radius-paper);
        box-shadow: var(--s-card-shadow-settled); transform: rotate(var(--s-tonight-rot));
        outline: var(--s-hairline) solid var(--s-rule-light); outline-offset: calc(-1 * var(--s-tonight-inset));
    }
    .jh-tonight__label { margin-bottom: var(--s-gap-s); text-align: center; color: var(--s-bay); }
    .jh-tonight__menu { counter-reset: jh-tonight; display: grid; gap: var(--s-tonight-gap); text-align: center; }
    .jh-tonight__menu li {
        counter-increment: jh-tonight; text-wrap: balance;
        font-family: var(--s-font-display); font-size: var(--s-step-tonight); line-height: var(--s-leading-tight); color: var(--s-espresso);
    }
    .jh-tonight__menu li::before {
        content: counter(jh-tonight, lower-roman) ". "; font-family: var(--s-font-text); font-style: italic;
        font-size: var(--s-step-small); color: var(--s-paprika);
    }
}
/* below a laptop the place card needs the width: tonight's menu waits for the letter further down */
@media (min-width: 768px) and (max-width: 1099px) { .jh-tonight { display: none; } }
/* the card settles once: a small drop as its shadow tightens; the photo eases in */
.jh-motion .jh-card { animation: jh-settle-p var(--s-dur-settle) var(--s-ease-settle) var(--s-delay-card) both; }
.jh-motion .jh-arrival__photo img { animation: jh-photo var(--s-dur-photo) var(--s-ease-settle) both; }
@media (min-width: 768px) {
    .jh-motion .jh-card { animation-name: jh-settle; }
}
@keyframes jh-settle {
    from { transform: translateY(calc(-1 * var(--s-card-drop))) rotate(var(--s-card-rot)); box-shadow: var(--s-card-shadow); }
    to { transform: rotate(var(--s-card-rot)); box-shadow: var(--s-card-shadow-settled); }
}
@keyframes jh-settle-p {
    from { transform: translateY(calc(-1 * var(--s-card-drop))) rotate(var(--s-card-rot-p)); box-shadow: var(--s-card-shadow); }
    to { transform: rotate(var(--s-card-rot-p)); box-shadow: var(--s-card-shadow-settled); }
}
@keyframes jh-photo {
    from { transform: scale(var(--s-photo-scale-from)); }
    to { transform: scale(var(--s-photo-scale-to)); }
}

/* ---------- 2. point of view: one sentence with ingredients inside it ---------- */
.jh-pov { max-width: var(--s-max); margin: 0 auto; padding: var(--s-section-tight) var(--s-gutter) var(--s-section); }
.jh-manifesto {
    font: var(--s-weight-display) var(--s-step-manifesto)/var(--s-leading-manifesto) var(--s-font-display);
    font-synthesis: var(--s-font-synthesis); letter-spacing: var(--s-track-display); text-wrap: pretty;
}
.jh-inl { white-space: nowrap; }
.jh-inl__ph {
    display: inline-block; position: relative; top: var(--s-inline-lift);
    width: var(--s-inline-w); height: var(--s-inline-h); margin-right: var(--s-inline-gap);
    border-radius: var(--s-inline-radius); overflow: hidden; clip-path: var(--s-inline-clip-to);
    vertical-align: baseline;
}
.jh-inl__ph picture, .jh-inl__ph img { width: 100%; height: 100%; }
.jh-inl__ph img { object-fit: cover; }
.jh-pov__cols { display: grid; gap: var(--s-gap-m); margin-top: var(--s-gap-xl); max-width: var(--s-max-text); font-size: var(--s-step-letter); line-height: var(--s-leading-letter); }
.jh-pov__cols p:first-child { font-style: italic; font-size: var(--s-step-pov-lede); line-height: var(--s-leading-tight); padding-top: var(--s-gap-s); border-top: var(--s-rule) solid var(--s-paprika); }
@media (min-width: 768px) {
    .jh-pov__cols {
        grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--s-gap-xl);
        max-width: none; align-items: start;
    }
}

/* ---------- 3. tonight's menu ---------- */
/* static composition (phone, reduced motion, no script): the letter fully inked */
.jh-menu { position: relative; padding: var(--s-section-tight) 0; }
.jh-menu__evening { display: none; }
.jh-letter__numeral { display: none; }
.jh-letter__head { font-size: var(--s-step-h2); line-height: var(--s-leading-heading); }
.jh-letter__opening {
    margin-top: var(--s-gap-s); font-style: italic; font-size: var(--s-step-letter); line-height: var(--s-leading-letter);
}
.jh-courses { margin-top: var(--s-gap-l); display: grid; gap: var(--s-gap-l); }
.jh-course__text { font-size: var(--s-step-letter); line-height: var(--s-leading-letter); }
.jh-course__n {
    display: block; color: var(--s-paprika);
    font: var(--s-weight-display) var(--s-step-numeral)/var(--s-leading-display) var(--s-font-display);
    font-synthesis: var(--s-font-synthesis);
}
.jh-course__name {
    font-family: var(--s-font-display); font-weight: var(--s-weight-display); font-synthesis: var(--s-font-synthesis);
    font-size: var(--s-step-course); line-height: var(--s-leading-tight);
}
.jh-course__body { font-style: italic; }
.jh-course__plate img { width: 100%; height: auto; }
.jh-letter__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-gap-s) var(--s-gap-m); margin-top: var(--s-gap-l); }
.jh-signoff {
    font: var(--s-weight-display) var(--s-step-signoff)/var(--s-leading-display) var(--s-font-display);
    font-synthesis: var(--s-font-synthesis); color: var(--s-espresso);
}
.jh-letter__foot .jh-note { flex-basis: 100%; }
.jh-course-line { display: none; }

@media (max-width: 767px) {
    .jh-letter { padding: 0 var(--s-gutter); }
    .jh-course__plate { margin: 0 calc(-1 * var(--s-gutter)) var(--s-gap-s); }
    .jh-course__plate img { aspect-ratio: var(--s-plate-ratio); object-fit: cover; }
    .jh-course__n { margin-bottom: var(--s-gap-2xs); }
    /* the course you are on, held under the nav */
    .jh-course-line {
        display: flex; align-items: center; position: sticky; top: var(--s-nav-h-p); z-index: 2;
        height: var(--s-sticky-course-h); margin: 0 0 var(--s-gap-m); padding: 0 var(--s-gutter);
        background: var(--s-butter); border-bottom: var(--s-hairline) solid var(--s-rule-light);
        font: var(--s-weight-label) var(--s-step-label)/var(--s-leading-label) var(--s-font-text);
        letter-spacing: var(--s-track-label); color: var(--s-paprika);
    }
    .jh-menu__stage { position: static; }
    .jh-menu { padding-top: 0; }
    .jh-letter__head { padding-top: var(--s-gap-s); }
}
@media (min-width: 768px) {
    .jh-letter {
        width: min(100% - 2 * var(--s-gutter), var(--s-letter-w) + var(--s-plate-w) + var(--s-gap-l));
        margin: 0 auto; padding: var(--s-letter-pad); background: var(--s-paper);
        border-radius: var(--s-radius-paper); box-shadow: var(--s-paper-shadow);
    }
    .jh-course { display: grid; grid-template-columns: var(--s-plate-w) minmax(0, 1fr); gap: var(--s-gap-l); align-items: start; }
    .jh-course__plate img { aspect-ratio: var(--s-plate-ratio); object-fit: cover; border-radius: var(--s-radius-paper); }
    .jh-letter__foot { padding-left: calc(var(--s-plate-w) + var(--s-gap-l)); }
    .jh-course__n { float: left; margin: 0 var(--s-gap-s) 0 0; }
}

/* pinned: the letter is a fixed sheet over the evening; courses ink in one by one */
@media (min-width: 1024px) and (min-height: 640px) {
    .jh-pin .jh-menu { padding: 0; }
    .jh-pin .jh-menu__stage {
        position: sticky; top: var(--s-nav-h); height: calc(100svh - var(--s-nav-h));
        display: grid; place-items: center; overflow: hidden; background: var(--s-menu-dim);
    }
    .jh-pin .jh-menu__evening { display: block; position: absolute; inset: 0; }
    .jh-pin .jh-menu__frame {
        position: absolute; inset: 0; opacity: var(--s-o-hidden);
        transition: opacity var(--s-dur-dim) var(--s-ease-ink);
    }
    .jh-pin .jh-menu__frame.is-on { opacity: 1; }
    .jh-pin .jh-menu__frame picture, .jh-pin .jh-menu__frame img { width: 100%; height: 100%; }
    .jh-pin .jh-menu__frame img { object-fit: cover; }
    .jh-pin .jh-letter {
        position: relative; z-index: 1; display: grid; grid-template-columns: var(--s-letter-margin) minmax(0, 1fr);
        width: var(--s-letter-w); height: var(--s-letter-window-h); padding: 0;
        transition: height var(--s-dur-ink) var(--s-ease-ink);
    }
    .jh-pin .jh-letter__numeral {
        display: block; padding-top: var(--s-letter-pad); text-align: center; color: var(--s-paprika);
        font: var(--s-weight-display) var(--s-step-numeral)/var(--s-leading-display) var(--s-font-display);
        font-synthesis: var(--s-font-synthesis);
    }
    .jh-pin .jh-letter__window { overflow: hidden; height: 100%; -webkit-mask-image: var(--s-letter-mask); mask-image: var(--s-letter-mask); }
    .jh-pin .jh-letter__body {
        padding: var(--s-letter-pad) var(--s-letter-pad) var(--s-letter-pad) 0;
        transition: transform var(--s-dur-ink) var(--s-ease-ink);
    }
    .jh-pin .jh-courses { gap: var(--s-letter-gap); margin-top: var(--s-gap-m); }
    .jh-pin .jh-course { display: block; }
    .jh-pin .jh-course__plate, .jh-pin .jh-course__n { display: none; }
    .jh-pin .jh-course__ink {
        display: block; clip-path: var(--s-ink-from); color: var(--s-espresso);
        transition: clip-path var(--s-dur-ink) var(--s-ease-ink), color var(--s-dur-ink) var(--s-ease-ink);
    }
    .jh-pin .jh-course.is-active .jh-course__ink { clip-path: var(--s-ink-to); }
    .jh-pin .jh-course.is-past .jh-course__ink { clip-path: var(--s-ink-to); color: var(--s-past-ink); }
    .jh-pin .jh-letter__foot {
        padding-left: 0; clip-path: var(--s-ink-from);
        transition: clip-path var(--s-dur-ink) var(--s-ease-ink);
    }
    .jh-pin .jh-letter.is-done .jh-letter__foot { clip-path: var(--s-ink-to); }
}

/* ---------- 4. private dinners ---------- */
.jh-dinners { padding-bottom: var(--s-section-tight); }
.jh-dinners__pano img { width: 100%; aspect-ratio: var(--s-panorama-ratio-p); object-fit: cover; }
/* the bill rail: one solid espresso object laid over the panorama's lower edge (never text on photo) */
.jh-dinners__rail {
    position: relative; z-index: var(--s-z-rail); display: grid; gap: var(--s-gap-m);
    max-width: var(--s-rail-max); margin: calc(-1 * var(--s-rail-overlap-p)) var(--s-gutter) 0;
    padding: var(--s-rail-pad-y) var(--s-rail-pad-x); border-radius: var(--s-radius-paper);
    background: var(--s-espresso); color: var(--s-butter); box-shadow: var(--s-paper-shadow);
}
.jh-dinners__head {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-gap-2xs) var(--s-gap-m);
    padding-bottom: var(--s-gap-s); border-bottom: var(--s-hairline) solid var(--s-rule-dark);
}
.jh-dinners__title { font-size: var(--s-step-rail-title); line-height: var(--s-leading-heading); color: var(--s-butter); text-wrap: balance; }
.jh-facts { display: grid; grid-template-columns: repeat(var(--s-facts-cols-p), minmax(0, 1fr)); gap: var(--s-gap-m) var(--s-gap-m); }
.jh-fact {
    display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: var(--s-gap-2xs);
}
.jh-fact__figure {
    grid-row: 1; align-self: end; color: var(--s-butter);
    font: var(--s-weight-display) var(--s-step-figure)/var(--s-leading-display) var(--s-font-display);
    font-synthesis: var(--s-font-synthesis);
}
.jh-fact__label { grid-row: 2; font-size: var(--s-step-small); line-height: var(--s-leading-tight); color: var(--s-text-on-dark-soft); }
.jh-how { max-width: var(--s-max); margin: 0 auto; padding: var(--s-gap-l) var(--s-gutter) 0; }
/* three steps as three columns under the rail; the numerals answer the rail's figures in paprika */
.jh-how__steps { display: grid; gap: var(--s-gap-m); margin-top: var(--s-gap-m); counter-reset: jh-how; }
.jh-how__s {
    counter-increment: jh-how; display: grid; grid-template-columns: var(--s-how-num-w) minmax(0, 1fr);
    align-items: baseline; column-gap: var(--s-gap-s);
    padding-top: var(--s-gap-s); border-top: var(--s-hairline) solid var(--s-rule-light);
    font-size: var(--s-step-how); line-height: var(--s-leading-letter); text-wrap: pretty;
}
.jh-how__s::before {
    content: counter(jh-how, lower-roman) "."; color: var(--s-paprika);
    font: var(--s-weight-display) var(--s-step-figure)/var(--s-leading-display) var(--s-font-display);
    font-synthesis: var(--s-font-synthesis);
}
@media (min-width: 768px) {
    .jh-dinners__pano img { aspect-ratio: var(--s-panorama-ratio); }
    .jh-dinners__rail { margin: calc(-1 * var(--s-rail-overlap)) auto 0; width: calc(100% - 2 * var(--s-gutter)); }
    .jh-how { padding-inline: calc(var(--s-gutter) + var(--s-rail-pad-x)); }
    .jh-how__steps { grid-template-columns: repeat(var(--s-how-cols), minmax(0, 1fr)); column-gap: var(--s-gap-xl); }
    .jh-how__s { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-gap-s); align-items: start; align-content: start; }
    .jh-facts { grid-template-columns: repeat(var(--s-facts-cols), minmax(0, 1fr)); column-gap: 0; }
    .jh-fact { padding-inline: var(--s-gap-m); border-left: var(--s-hairline) solid var(--s-rule-dark); }
    .jh-fact:first-child { padding-left: 0; border-left: 0; }
}

/* ---------- 5. the book ---------- */
/* the book changes its own layout on open/close; never let the browser anchor the page's
   scroll to something inside it (that pulled #book deep links 81px off) */
.jh-book {
    overflow-anchor: none;
    display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-gap-l); max-width: var(--s-max); margin: 0 auto;
    padding: 0 var(--s-gutter) var(--s-section-tight);
}
.jh-book__cover {
    position: relative; display: block; width: min(100%, var(--s-book-w)); margin: 0 auto; padding: 0;
    border: 0; background: none; text-align: left; cursor: default;
}
.jh-book__face {
    position: relative; display: block; aspect-ratio: var(--s-book-ratio); overflow: hidden;
    border-radius: var(--s-radius-paper); box-shadow: var(--s-paper-shadow);
    border-left: var(--s-book-spine) solid var(--s-espresso);
}
.jh-book__face picture, .jh-book__face img { width: 100%; height: 100%; }
.jh-book__face img { object-fit: cover; }
.jh-book__band {
    position: absolute; inset: 0 0 auto; display: grid; gap: var(--s-gap-2xs);
    padding: var(--s-gap-m) var(--s-gap-m) var(--s-gap-s); background: var(--s-paper);
}
.jh-book__title {
    font: var(--s-weight-display) var(--s-step-book-title)/var(--s-leading-display) var(--s-font-display);
    font-synthesis: var(--s-font-synthesis); color: var(--s-espresso);
}
.jh-book__sub { font-style: italic; font-size: var(--s-step-small); line-height: var(--s-leading-tight); color: var(--s-ink-soft); }
.jh-book__author { margin-top: var(--s-gap-xs); font: var(--s-weight-label) var(--s-step-label)/var(--s-leading-label) var(--s-font-text); letter-spacing: var(--s-track-label); color: var(--s-bay); }
.jh-book__cue { display: none; }

.jh-spread__pages {
    display: flex; gap: var(--s-gap-s); overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: var(--s-gap-s); margin: 0 calc(-1 * var(--s-gutter)); padding-inline: var(--s-gutter);
    scroll-padding-inline: var(--s-gutter);
}
.jh-page {
    flex: 0 0 var(--s-page-w-p); scroll-snap-align: start; position: relative;
    padding: var(--s-spread-page-pad) var(--s-spread-page-pad) calc(var(--s-spread-page-pad) + var(--s-gap-l));
    background: var(--s-page-gutter); box-shadow: var(--s-paper-shadow); border-radius: var(--s-radius-paper);
    font-size: var(--s-step-recipe); line-height: var(--s-leading-body);
}
.jh-page--r { background: var(--s-page-gutter-r); }
.jh-page__title { margin: var(--s-gap-xs) 0 var(--s-gap-s); font-size: var(--s-step-book-title); line-height: var(--s-leading-heading); }
.jh-page__headnote { font-style: italic; margin-bottom: var(--s-gap-m); }
.jh-page__list { margin-top: var(--s-gap-xs); }
.jh-page__list li { padding: var(--s-gap-2xs) 0; border-bottom: var(--s-hairline) solid var(--s-rule-light); }
.jh-page__method { margin-top: var(--s-gap-xs); counter-reset: jh-step; display: grid; gap: var(--s-gap-s); }
.jh-page__method li { counter-increment: jh-step; display: grid; grid-template-columns: var(--s-gap-l) minmax(0, 1fr); }
.jh-page__method li::before {
    content: counter(jh-step); color: var(--s-paprika);
    font: var(--s-weight-display) var(--s-step-course)/var(--s-leading-display) var(--s-font-display);
    font-synthesis: var(--s-font-synthesis);
}
.jh-page__margin {
    margin-top: var(--s-gap-m); padding-left: var(--s-gap-s); border-left: var(--s-rule) solid var(--s-paprika);
    font-style: italic; font-size: var(--s-step-small); line-height: var(--s-leading-tight); color: var(--s-bay);
}
.jh-page__folio {
    position: absolute; left: 0; right: 0; bottom: var(--s-gap-s); text-align: center;
    font-size: var(--s-step-label); color: var(--s-text-muted);
}
.jh-spread__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-gap-m); margin-top: var(--s-gap-xs); }
.jh-spread__hint { font-style: italic; font-size: var(--s-step-small); color: var(--s-text-muted); }
.jh-spread__hint::after { content: " \2192"; color: var(--s-paprika); }
.jh-spread { min-width: 0; }
.jh-spread:focus { outline: none; }
.jh-nw { white-space: nowrap; }
.jh-spread:focus-visible { outline: var(--s-focus-w) solid var(--s-focus); outline-offset: var(--s-focus-offset); }

.jh-book__info { display: grid; gap: var(--s-gap-m); max-width: var(--s-max-text); }
.jh-book__intro { font-style: italic; font-size: var(--s-step-letter); line-height: var(--s-leading-letter); }
.jh-book__details { display: flex; flex-wrap: wrap; gap: var(--s-gap-m) var(--s-gap-l); }
.jh-book__details dd { font: var(--s-weight-display) var(--s-step-course)/var(--s-leading-tight) var(--s-font-display); font-synthesis: var(--s-font-synthesis); }
.jh-notify__row { display: flex; flex-wrap: wrap; gap: var(--s-gap-s); align-items: center; }

@media (min-width: 768px) {
    .jh-spread__pages {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; overflow: visible;
        margin: 0; padding: 0; aspect-ratio: var(--s-spread-ratio);
    }
    .jh-page { border-radius: 0; }
    .jh-spread__hint { display: none; }
    /* static (no script / reduced motion): the spread lies open, the cover beside it */
    .jh-book { grid-template-columns: var(--s-book-w) minmax(0, 1fr); column-gap: var(--s-gap-xl); align-items: start; }
    .jh-book__stage { display: contents; }
    .jh-book__cover { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
    .jh-spread { grid-column: 2; }
    .jh-book__info { grid-column: 2; }
}

/* live book (script): closed until opened; the cover hinges open from the spine */
.jh-book--live .jh-book__cover { cursor: pointer; }
.jh-book--live .jh-book__cue {
    display: inline-flex; align-items: center; min-height: var(--s-tap); margin-top: var(--s-gap-s);
    color: var(--s-link); font-style: italic; text-decoration: underline; text-underline-offset: var(--s-gap-2xs);
}
.jh-book--live .jh-spread__close { display: inline-flex; }
@media (max-width: 767px) {
    .jh-book--live:not(.is-open) .jh-spread { display: none; }
    .jh-book--live.is-open .jh-book__cover { display: none; }
    .jh-motion .jh-book--live.is-open .jh-spread { animation: jh-fade var(--s-dur-hinge) var(--s-ease-settle) both; }
}
@keyframes jh-fade { from { opacity: var(--s-o-hidden); } to { opacity: 1; } }
@media (min-width: 768px) {
    .jh-book--live { grid-template-columns: minmax(0, 1fr); justify-items: center; }
    .jh-book--live .jh-book__stage {
        display: block; position: relative; width: var(--s-spread-w); perspective: var(--s-book-perspective);
        transition: transform var(--s-dur-hinge) var(--s-ease-hinge);
    }
    .jh-book--live:not(.is-open) .jh-book__stage { transform: translateX(var(--s-book-shift)); }
    .jh-book--live .jh-spread { grid-column: auto; }
    .jh-book--live .jh-book__info { grid-column: auto; justify-self: center; text-align: center; justify-items: center; }
    .jh-book--live .jh-book__details { justify-content: center; }
    .jh-book--live .jh-book__cover {
        position: absolute; z-index: 2; left: 50%; top: 0; width: 50%; height: calc(100% - var(--s-tap) - var(--s-gap-xs));
        transform-origin: left center; transform-style: preserve-3d; transform: rotateY(var(--s-book-tilt));
        transition: transform var(--s-dur-hinge) var(--s-ease-hinge);
    }
    .jh-book--live .jh-book__face { height: 100%; aspect-ratio: auto; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
    .jh-book--live .jh-book__cue { position: absolute; left: 0; right: 0; top: 100%; justify-content: center; }
    .jh-book--live .jh-page--l {
        transform-origin: right center; transition: transform var(--s-dur-hinge) var(--s-ease-hinge) calc(var(--s-dur-hinge) / 2),
            opacity var(--s-dur-hinge) var(--s-ease-hinge) calc(var(--s-dur-hinge) / 2);
    }
    .jh-book--live:not(.is-open) .jh-page--l { transform: rotateY(var(--s-hinge-half)); opacity: var(--s-o-hidden); }
    .jh-book--live:not(.is-open) .jh-spread { visibility: hidden; transition: visibility 0s linear var(--s-dur-hinge); }
    .jh-book--live:not(.is-open) .jh-spread__foot { opacity: var(--s-o-hidden); }
    .jh-book--live.is-open .jh-book__cover { transform: rotateY(var(--s-book-open-angle)); pointer-events: none; }
    .jh-book--live.is-open .jh-book__cue { visibility: hidden; }
    .jh-book--live .jh-spread__foot { justify-content: flex-end; }
}
/* desktop, closed: a composed two-column object like the reduced-motion spread: the cover at left
   (the stage slides half a spread), intro + figures + notify in the right half where the pages will
   lie. Opening slides the book to centre while the text steps down below the open spread. */
@media (min-width: 1024px) {
    .jh-book--live { position: relative; }
    .jh-book--live:not(.is-open) .jh-book__stage { transform: translateX(var(--s-book-shift-wide)); }
    .jh-book--live:not(.is-open) .jh-book__info {
        position: absolute; top: 0; bottom: var(--s-section); left: 50%;
        width: calc(var(--s-spread-w) / 2); padding-left: var(--s-gap-xl);
        align-content: center; justify-items: start; text-align: left;
    }
    .jh-book--live:not(.is-open) .jh-book__details { justify-content: flex-start; }
    /* a different keyframe name per state restarts the fade on every open and close */
    .jh-motion .jh-book--live:not(.is-open) .jh-book__info { animation: jh-fade var(--s-dur-hinge) var(--s-ease-settle) both; }
    .jh-motion .jh-book--live.is-open .jh-book__info { animation: jh-fade-b var(--s-dur-hinge) var(--s-ease-settle) both; }
}
@keyframes jh-fade-b { from { opacity: var(--s-o-hidden); } to { opacity: 1; } }

/* ---------- 6. supper series ---------- */
.jh-suppers { background: var(--s-band-bg); color: var(--s-band-text); padding: var(--s-section-tight) var(--s-gutter); }
.jh-suppers > * { max-width: var(--s-max); margin-inline: auto; }
.jh-suppers__head { display: grid; gap: var(--s-gap-s); margin-bottom: var(--s-gap-xl); }
.jh-suppers__title { font-size: var(--s-step-h2); line-height: var(--s-leading-heading); color: var(--s-butter); }
.jh-suppers__intro { max-width: var(--s-measure-col); font-style: italic; font-size: var(--s-step-letter); line-height: var(--s-leading-letter); color: var(--s-text-on-dark-soft); }
.jh-seasons { border-top: var(--s-hairline) solid var(--s-rule-dark); }
.jh-season {
    position: relative; display: grid; align-items: center;
    grid-template-columns: var(--s-macro-w) minmax(0, 1fr); column-gap: var(--s-gap-m); row-gap: var(--s-gap-2xs);
    min-height: var(--s-supper-row-min); padding: var(--s-gap-m) 0; border-bottom: var(--s-hairline) solid var(--s-rule-dark);
}
.jh-season__macro { grid-row: 1 / span 4; align-self: start; }
.jh-season__macro img {
    width: 100%; aspect-ratio: var(--s-macro-ratio); object-fit: cover; border-radius: var(--s-radius-input);
    opacity: var(--s-macro-dim);
    transition: opacity var(--s-dur-lift) var(--s-ease-settle), transform var(--s-dur-lift) var(--s-ease-settle);
}
.jh-season__name { font-size: var(--s-step-season); line-height: var(--s-leading-display); color: var(--s-butter); }
.jh-season__when { display: grid; gap: var(--s-gap-2xs); }
.jh-season__date { font: var(--s-weight-label) var(--s-step-label)/var(--s-leading-label) var(--s-font-text); letter-spacing: var(--s-track-label); color: var(--s-label-on-dark); }
.jh-season__menu { font-style: italic; color: var(--s-text-on-dark-soft); }
.jh-season__seats { display: flex; align-items: baseline; gap: var(--s-gap-xs); }
.jh-season__figure {
    font: var(--s-weight-display) var(--s-step-figure)/var(--s-leading-display) var(--s-font-display);
    font-synthesis: var(--s-font-synthesis); color: var(--s-band-accent);
}
.jh-season__seats-label { font-size: var(--s-step-small); color: var(--s-text-on-dark-soft); }
.jh-season__ask {
    justify-self: start; display: inline-flex; align-items: center; min-height: var(--s-tap);
    color: var(--s-band-accent); font-style: italic; text-decoration: underline; text-underline-offset: var(--s-gap-2xs);
}
.jh-season__ask::after { content: ""; position: absolute; inset: 0; }
.jh-season__ask:focus-visible { outline: none; }
.jh-season:has(.jh-season__ask:focus-visible) { outline: var(--s-focus-w) solid var(--s-focus-on-dark); outline-offset: var(--s-focus-offset); }
.jh-season:hover .jh-season__macro img,
.jh-season:focus-within .jh-season__macro img { opacity: 1; }
.jh-motion .jh-season:hover .jh-season__macro img,
.jh-motion .jh-season:focus-within .jh-season__macro img { transform: translateY(var(--s-macro-lift)); }
.jh-suppers__note { margin-top: var(--s-gap-s); }
@media (min-width: 768px) {
    .jh-suppers__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; column-gap: var(--s-gap-xl); }
    /* label and title stacked on the left, the intro beside them: no empty corner above the title */
    .jh-suppers__head .jh-label { grid-column: 1; grid-row: 1; }
    .jh-suppers__title { grid-column: 1; grid-row: 2; }
    .jh-suppers__intro { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
    .jh-season {
        grid-template-columns: var(--s-macro-w) minmax(0, 4fr) minmax(0, 5fr) minmax(0, 2fr) auto;
        column-gap: var(--s-gap-l); padding: var(--s-gap-s) 0;
    }
    .jh-season__macro { grid-row: auto; align-self: center; }
    .jh-season__ask { justify-self: end; }
}

/* ---------- 7. write to Juno: the letter you complete ---------- */
.jh-write { padding: var(--s-section-tight) var(--s-gutter) var(--s-section); }
.jh-letterform {
    position: relative; max-width: var(--s-sheet-w); margin: 0 auto;
    padding: var(--s-letter-pad); background: var(--s-paper); border-radius: var(--s-radius-paper);
    box-shadow: var(--s-paper-shadow);
    font-size: var(--s-step-letter); line-height: var(--s-leading-form);
}
.jh-write__summary {
    margin-bottom: var(--s-gap-m); padding-left: var(--s-gap-s); border-left: var(--s-rule) solid var(--s-error);
    color: var(--s-error); line-height: var(--s-leading-body);
}
.jh-write__dear { font: var(--s-weight-display) var(--s-step-h2)/var(--s-leading-heading) var(--s-font-display); font-synthesis: var(--s-font-synthesis); margin-bottom: var(--s-gap-m); }
.jh-write__p, .jh-write__dear, .jh-course__text, .jh-letter__opening { text-wrap: pretty; }
.jh-write__p + .jh-write__p { margin-top: var(--s-gap-s); }
.jh-write__table { line-height: var(--s-leading-letter); }
.jh-field {
    min-height: var(--s-field-h); padding: 0 var(--s-gap-2xs); max-width: 100%;
    border: 0; border-bottom: var(--s-field-line) solid var(--s-espresso); border-radius: 0;
    background: transparent; color: var(--s-espresso);
    font: var(--s-weight-text) var(--s-step-input)/var(--s-leading-tight) var(--s-font-text); vertical-align: baseline;
}
.jh-field:focus { background: var(--s-butter); }
.jh-field--note, .jh-field--box { background: var(--s-butter); }
.jh-field::placeholder { color: var(--s-ink-soft); font-style: italic; opacity: 1; }
.jh-field[aria-invalid="true"] { border-bottom-color: var(--s-error); background: var(--s-paper-edge); }
.jh-field--num { width: var(--s-field-w-num); text-align: center; -moz-appearance: textfield; appearance: textfield; }
.jh-field--num::-webkit-inner-spin-button, .jh-field--num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.jh-field--town { width: var(--s-field-w-town); }
.jh-field--name { width: var(--s-field-w-name); }
.jh-field--email { width: var(--s-field-w-email); }
.jh-field--note {
    display: block; width: 100%; min-height: var(--s-note-h); margin-top: var(--s-gap-xs); padding: var(--s-gap-xs);
    line-height: var(--s-leading-body); resize: vertical;
}
.jh-field--box { flex: 1 1 var(--s-btn-min-w); border: var(--s-hairline) solid var(--s-espresso); border-bottom-width: var(--s-field-line); padding: 0 var(--s-gap-s); }
.jh-select { position: relative; display: inline-block; }
/* phone: "I'd like to" keeps the purpose field on its line; the field takes what is left */
@media (max-width: 767px) {
    .jh-write__lead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-gap-2xs); }
    .jh-write__lead .jh-select--purpose { flex: 1 1 var(--s-field-w-purpose-p); }
    .jh-write__lead .jh-select--purpose select { width: 100%; padding-left: 0; padding-right: var(--s-select-room-p); }
    .jh-write__lead .jh-select--purpose::after { right: var(--s-gap-2xs); }
}
.jh-select select { -webkit-appearance: none; appearance: none; padding-right: var(--s-gap-l); cursor: pointer; }
.jh-select::after {
    content: ""; position: absolute; right: var(--s-gap-s); top: 50%; width: var(--s-chevron); height: var(--s-chevron);
    border-right: var(--s-field-line) solid var(--s-espresso); border-bottom: var(--s-field-line) solid var(--s-espresso);
    transform: translateY(-75%) rotate(var(--s-chevron-turn)); pointer-events: none;
}
.jh-errors { margin-top: var(--s-gap-s); display: grid; gap: var(--s-gap-2xs); }
.jh-error { color: var(--s-error); font-style: italic; font-size: var(--s-step-small); line-height: var(--s-leading-tight); }
.jh-write__send { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-gap-s) var(--s-gap-l); margin-top: var(--s-gap-l); line-height: var(--s-leading-body); }
.jh-reply { flex: 1 1 var(--s-measure-col); }
.jh-reply__text { font-style: italic; color: var(--s-espresso); }
.jh-write__j { display: flex; align-items: flex-end; justify-content: flex-end; gap: var(--s-gap-xs); margin-top: var(--s-gap-m); color: var(--s-paprika); }
.jh-write__j .jh-signoff { color: var(--s-espresso); }
.jh-flourish { width: var(--s-flourish-w); height: var(--s-flourish-h); }
.jh-write__other {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 var(--s-gap-m);
    max-width: var(--s-sheet-w); margin: var(--s-gap-l) auto 0;
}
.jh-write__other .jh-label { flex-basis: 100%; text-align: center; }
.jh-status { margin-top: var(--s-gap-xs); font-style: italic; }
.jh-notify .jh-error { margin-top: var(--s-gap-xs); }
@media (min-width: 768px) {
    .jh-letterform { padding: var(--s-letter-pad) calc(var(--s-letter-pad) + var(--s-gap-l)); }
}

/* ---------- footer: the evening ends on espresso, signed ---------- */
.jh-foot { background: var(--s-espresso); color: var(--s-butter); padding: var(--s-section-tight) var(--s-gutter) var(--s-gap-l); }
.jh-foot :focus-visible { outline-color: var(--s-focus-on-dark); }
.jh-foot__close {
    position: relative; max-width: var(--s-max); margin: 0 auto var(--s-gap-xl);
    padding-bottom: var(--s-gap-xl); border-bottom: var(--s-hairline) solid var(--s-rule-dark);
}
.jh-foot__closing {
    max-width: var(--s-measure-closing);
    font: var(--s-weight-display) var(--s-step-closing)/var(--s-leading-manifesto) var(--s-font-display);
    font-synthesis: var(--s-font-synthesis); letter-spacing: var(--s-track-display); text-wrap: balance;
}
.jh-foot__sub { margin-top: var(--s-gap-m); max-width: var(--s-measure-col); font-style: italic; font-size: var(--s-step-letter); line-height: var(--s-leading-letter); color: var(--s-text-on-dark-soft); }
.jh-foot__sign {
    margin-top: var(--s-gap-m); color: var(--s-band-accent);
    font: var(--s-weight-display) var(--s-step-foot-sign)/var(--s-leading-display) var(--s-font-display); font-synthesis: var(--s-font-synthesis);
}
.jh-foot .jh-name { color: var(--s-butter); }
.jh-foot__grid { display: grid; gap: var(--s-gap-l); align-items: start; max-width: var(--s-max); margin: 0 auto; }
.jh-foot__list { display: flex; flex-wrap: wrap; gap: 0 var(--s-gap-m); }
.jh-foot__list a {
    display: inline-flex; align-items: center; min-height: var(--s-tap); color: var(--s-butter);
    text-decoration-color: var(--s-band-accent); text-underline-offset: var(--s-gap-2xs);
}
.jh-foot__list a:hover { color: var(--s-candle); }
.jh-foot__credits summary {
    display: inline-flex; align-items: center; min-height: var(--s-tap); cursor: pointer;
    font-style: italic; color: var(--s-band-accent); text-decoration: underline; text-underline-offset: var(--s-gap-2xs);
}
.jh-foot__small, .jh-credits { font-size: var(--s-step-small); line-height: var(--s-leading-tight); color: var(--s-text-on-dark-soft); }
.jh-foot__small { margin: var(--s-gap-xs) 0; }
.jh-credits { display: grid; gap: var(--s-gap-2xs); }
.jh-credits__use { display: block; }
.jh-credits a { display: inline-block; padding: var(--s-gap-2xs) 0; color: var(--s-butter); }
.jh-foot__line { max-width: var(--s-max); margin: var(--s-gap-l) auto 0; font-size: var(--s-step-small); color: var(--s-text-on-dark-soft); }
@media (min-width: 768px) {
    .jh-foot__close { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-gap-xl); align-items: end; }
    .jh-foot__closing, .jh-foot__sub { grid-column: 1; }
    .jh-foot__sign { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
    .jh-foot__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}