/*
    style.css — all styles for hannaalissa.com

    Look: Hanna's inspiration (a pilates studio site). Deep burgundy panels,
    blush and warm-cream cards with rounded corners, big chunky uppercase
    headlines, and a small script word tucked into some headlines
    ("Turn up *the* heat").

    Sections, in order:
      1. Theme (colors, fonts, sizes)  <- change the look here
      2. Base page styles and shared bits (buttons, script accent, eyebrow)
      3. Landing page: the HannaH wordmark and its icon links
      4. Subpage layout: bands, top bar, page header, footer
      5. Charcuterie page: the full list
      6. Cheese quiz
      7. Paintings page and lightbox
      8. Reduced motion
      9. Forms (contact form, sticky-note form) and the Contact page
     10. Paintings: the work-in-progress section (the board itself is in css/board.css)
     11. Charcuterie: "Boards I've made", the three-part list, "Build your board"

    Mobile first: the base rules are for phones, and @media (min-width: ...)
    blocks add the wider layouts.
*/


/* ==========================================================================
   1. Theme
   Change colors and fonts here and the whole site follows.
   ========================================================================== */

:root {
    /* Burgundy family: the big panels, dark text and buttons. */
    --color-oxblood: #5A1E26;
    --color-oxblood-deep: #2B1012;
    --color-wine: #74303A;
    --color-oxblood-glow: #6E2832;

    /* Blush family: headlines on burgundy, cards and highlights. */
    --color-blush: #E8C3CB;
    --color-blush-soft: #F1DCDC;
    --color-blush-line: #E2C3C3;

    /* Cream family: page background and light cards. */
    --color-cream: #F3EAE0;
    --color-cream-light: #FBF6F0;

    /* Body text on light backgrounds, and a softer version for small print. */
    --color-ink: #2B1012;
    --color-muted: #7B5458;

    /* Fonts: Rubik for chunky headlines, Pinyon Script for the small accent
       words, DM Sans for everything you read. */
    --font-display: "Rubik", "Arial Black", system-ui, sans-serif;
    --font-script: "Pinyon Script", "Brush Script MT", cursive;
    --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Shared shapes and motion. */
    --radius-card: 22px;
    --radius-small: 14px;
    --radius-pill: 999px;
    --shadow-soft: 0 14px 34px rgba(43, 16, 18, 0.12);
    --shadow-deep: 0 22px 50px rgba(20, 6, 8, 0.35);
    --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
    --page-width: 1180px;
}


/* ==========================================================================
   2. Base page styles and shared bits
   ========================================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    background-color: var(--color-cream);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.55;
}

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

a {
    color: var(--color-oxblood);
}

/* The quiz hides screens with the hidden attribute; make sure no display rule overrides it. */
[hidden] {
    display: none !important;
}

/* Clear focus ring for keyboard users only, so mouse clicks don't show it. */
:focus-visible {
    outline: 3px solid var(--color-blush);
    outline-offset: 3px;
}

/* On light backgrounds the blush ring would vanish, so use burgundy there. */
.band-cream :focus-visible,
.quiz-card :focus-visible {
    outline-color: var(--color-oxblood);
}

/* Headings the script moves focus to don't need a ring; the content change is the cue. */
[tabindex="-1"]:focus {
    outline: none;
}

/* Hidden on screen but still read aloud by screen readers. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/*
    The little script word inside a chunky headline ("Find *your* cheese").
    It's set smaller and lowered a touch so it tucks in between the
    capitals like in the inspiration, and never gets uppercased.
*/
.script-accent {
    display: inline-block;
    padding: 0 0.08em;
    font-family: var(--font-script);
    font-size: 0.72em;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1;
    text-transform: none;
    vertical-align: 0.02em;
}

/* Small uppercase label above a headline. */
.eyebrow {
    margin: 0 0 0.6rem;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-blush);
}

.eyebrow-dark {
    color: var(--color-wine);
}

/* Rounded pill buttons, in a few color versions. */
.pill-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 48px;
    padding: 0.7rem 1.5rem;
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.pill-button:hover {
    transform: translateY(-2px);
}

.pill-button-blush {
    background-color: var(--color-blush);
    color: var(--color-oxblood-deep);
}

.pill-button-blush:hover {
    background-color: var(--color-cream);
}

.pill-button-outline {
    border-color: var(--color-blush);
    color: var(--color-blush);
}

.pill-button-outline:hover {
    background-color: var(--color-blush);
    color: var(--color-oxblood-deep);
}

.pill-button-dark {
    background-color: var(--color-oxblood);
    color: var(--color-cream);
}

.pill-button-dark:hover {
    background-color: var(--color-wine);
}

.pill-button-outline-dark {
    border-color: var(--color-oxblood);
    color: var(--color-oxblood);
}

.pill-button-outline-dark:hover {
    background-color: var(--color-oxblood);
    color: var(--color-cream);
}

/* A plain-looking button, for quieter actions like "Back". */
.text-button {
    padding: 0.5rem 0;
    border: 0;
    background: none;
    color: var(--color-wine);
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

.text-button:hover {
    color: var(--color-oxblood-deep);
}

/* Star ratings, shared by the list cards and the quiz results. */
.star-rating {
    margin: 0.3rem 0 0.5rem;
    font-size: 1.05rem;
    letter-spacing: 0.08em;
    color: var(--color-oxblood);
}

.star-empty {
    color: var(--color-blush-line);
}

/* ==========================================================================
   3. Landing page: the HannaH wordmark
   "Hanna" and the last "H" sit together. When open, each slides out by
   --slide-distance, and the icon list fades in centered in the gap.
   Because both halves move the same distance, the word stays centered.
   ========================================================================== */

.landing-page {
    /* overflow-x: hidden is a safety net so the slide can never cause sideways scrolling. */
    overflow-x: hidden;
    background-color: var(--color-oxblood);
    /* A soft lighter glow behind the word, so the burgundy doesn't feel flat. */
    background-image: radial-gradient(ellipse at 50% 46%, var(--color-oxblood-glow) 0%, var(--color-oxblood) 58%, var(--color-oxblood-deep) 130%);
    color: var(--color-cream);
}

.landing {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    /* Clips the invisible hover area (below) so it can't widen the page on small phones. */
    overflow-x: clip;
}

.wordmark {
    /* Phones: icons sit in a 2 x 2 cluster so the open word still fits 390px. */
    --icon-size: 46px;
    --icon-gap: 18px;
    --icon-row-gap: 28px;
    --icon-columns: 2;
    --gap-padding: 12px;
    --icon-row-width: calc(var(--icon-columns) * var(--icon-size) + (var(--icon-columns) - 1) * var(--icon-gap));
    --slide-distance: calc(var(--icon-row-width) / 2 + var(--gap-padding));

    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    font-family: var(--font-display);
    font-size: clamp(3.2rem, 14vw, 11rem);
    font-weight: 900;
    letter-spacing: -0.015em;
    line-height: 1;
    color: var(--color-blush);
    cursor: default;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/*
    On phones the 2 x 2 icon cluster is taller than the word, so reserve
    that height above and below. Otherwise the open icons would cover the
    tagline. One row of icons on wider screens doesn't need it.
*/
@media (max-width: 699px) {
    .wordmark {
        margin: 2.8rem 0 3.4rem;
    }
}

/* Wider screens have room for all icons in one row. */
@media (min-width: 700px) {
    .wordmark {
        --icon-size: 66px;
        --icon-gap: 18px;
        --icon-columns: 4;
        --gap-padding: 30px;
    }
}

/*
    Invisible hover area that covers the space the word opens into.
    Without it, moving the mouse from a letter to an icon crosses empty
    space, the hover ends, and the word snaps shut.
*/
.wordmark::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -0.35em;
    bottom: -0.35em;
    left: calc(-1 * var(--slide-distance) - 1rem);
    right: calc(-1 * var(--slide-distance) - 1rem);
}

.wordmark-left,
.wordmark-right {
    display: inline-block;
    transition: transform 0.75s var(--ease-smooth);
}

/* The closing H is cream instead of blush, so the name reads as an H...H monogram. */
.wordmark-right {
    color: var(--color-cream);
}

/* The nav takes no width, so closed, the two halves touch: "HannaH". */
.icon-links {
    position: relative;
    width: 0;
    align-self: stretch;
}

.icon-list {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    grid-template-columns: repeat(var(--icon-columns), var(--icon-size));
    column-gap: var(--icon-gap);
    row-gap: var(--icon-row-gap);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 1rem;
    letter-spacing: normal;
}

/* Closed: icons are invisible and can't be clicked, but can still be tabbed to. */
.icon-item {
    opacity: 0;
    transform: translateY(8px) scale(0.85);
    pointer-events: none;
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.icon-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size);
    height: var(--icon-size);
    border-radius: 50%;
    background-color: var(--color-cream);
    color: var(--color-oxblood);
    text-decoration: none;
    box-shadow: var(--shadow-deep);
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.icon-link:hover,
.icon-link:focus-visible {
    background-color: var(--color-blush);
    color: var(--color-oxblood-deep);
    transform: translateY(-3px);
}

.icon {
    width: 46%;
    height: 46%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-dot {
    fill: currentColor;
}

/* Label under each icon: a tooltip on desktop, always shown on phones (see below). */
/* Phones: small lowercase labels, because uppercase ones are too wide for the tight 2 x 2 cluster. */
.icon-label {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
    color: var(--color-blush);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

/* Desktop tooltips have room for the uppercase style used on the rest of the site. */
@media (min-width: 700px) {
    .icon-label {
        top: calc(100% + 8px);
        font-family: var(--font-display);
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }
}

.icon-link:hover .icon-label,
.icon-link:focus-visible .icon-label {
    opacity: 1;
}

/* --- Open state ---------------------------------------------------------
   Opens on: hover (mouse only), keyboard focus inside, or the .is-open
   class that js/landing.js adds for taps and the automatic mobile reveal.
   ------------------------------------------------------------------------ */

.wordmark.is-open .wordmark-left,
.wordmark:focus-within .wordmark-left {
    transform: translateX(calc(-1 * var(--slide-distance)));
}

.wordmark.is-open .wordmark-right,
.wordmark:focus-within .wordmark-right {
    transform: translateX(var(--slide-distance));
}

.wordmark.is-open .icon-item,
.wordmark:focus-within .icon-item {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    /* Stagger: each icon waits a little longer than the one before it. */
    transition:
        opacity 0.45s ease calc(0.25s + var(--item-index) * 0.08s),
        transform 0.55s var(--ease-smooth) calc(0.25s + var(--item-index) * 0.08s);
}

/* Only real mouse devices open on hover; on phones a tap would "stick" as hover. */
@media (hover: hover) {
    .wordmark:hover .wordmark-left {
        transform: translateX(calc(-1 * var(--slide-distance)));
    }

    .wordmark:hover .wordmark-right {
        transform: translateX(var(--slide-distance));
    }

    .wordmark:hover .icon-item {
        opacity: 1;
        transform: none;
        pointer-events: auto;
        transition:
            opacity 0.45s ease calc(0.25s + var(--item-index) * 0.08s),
            transform 0.55s var(--ease-smooth) calc(0.25s + var(--item-index) * 0.08s);
    }
}

/* Touch screens can't hover for a tooltip, so show the labels whenever it's open. */
@media (hover: none) {
    .wordmark .icon-label {
        opacity: 1;
    }
}

/* --- Tagline and hint under the wordmark -------------------------------- */

.landing-tagline {
    margin: 1.1rem 0 0;
    font-family: var(--font-script);
    font-size: clamp(1.7rem, 6vw, 2.6rem);
    line-height: 1.2;
    color: var(--color-blush);
}

.landing-hint {
    margin: 1.6rem 0 0;
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--color-blush);
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.hint-touch {
    display: none;
}

@media (hover: none) {
    .hint-hover {
        display: none;
    }

    .hint-touch {
        display: inline;
    }
}

/* "~" rather than "+" because the tagline sits between the word and the hint. */
.wordmark.is-open ~ .landing-hint,
.wordmark:focus-within ~ .landing-hint {
    opacity: 0;
}

@media (hover: hover) {
    .wordmark:hover ~ .landing-hint {
        opacity: 0;
    }
}


/* ==========================================================================
   4. Subpage layout (Charcuterie, Paintings)
   Pages are stacked "bands": full-width colored stripes, each with a
   centered .band-inner holding the content, like the inspiration's panels.
   ========================================================================== */

.subpage-body {
    overflow-x: hidden;
}

.band-inner {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 0 1.1rem;
}

@media (min-width: 700px) {
    .band-inner {
        padding: 0 2rem;
    }
}

.band-header {
    padding: 1.1rem 0 2.75rem;
    background-color: var(--color-oxblood);
    background-image: radial-gradient(ellipse at 85% 0%, var(--color-oxblood-glow) 0%, var(--color-oxblood) 55%);
    color: var(--color-cream);
}

.band-cream {
    padding: 3.25rem 0 4.5rem;
    background-color: var(--color-cream);
}

/* --- Top bar: HannaH home link plus the page links ---------------------- */

.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(232, 195, 203, 0.22);
}

.brand-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--color-blush);
    text-decoration: none;
}

.brand-arrow {
    font-size: 1.1rem;
    transition: transform 0.2s ease;
}

.brand-link:hover .brand-arrow {
    transform: translateX(-3px);
}

.brand-mark,
.footer-mark {
    font-family: var(--font-display);
    font-weight: 900;
    letter-spacing: -0.01em;
    color: var(--color-blush);
}

.brand-mark {
    font-size: 1.45rem;
    line-height: 1;
}

/* Same H...H monogram coloring as the landing wordmark. */
.brand-mark-h {
    color: var(--color-cream);
}

.top-links {
    display: flex;
    gap: 1.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.top-links a {
    padding: 0.3rem 0;
    border-bottom: 2px solid transparent;
    font-family: var(--font-display);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-cream);
}

.top-links a:hover,
.top-links a[aria-current="page"] {
    border-bottom-color: var(--color-blush);
    color: var(--color-blush);
}

/* Three page links have to fit next to the HannaH mark on a 390px phone. */
@media (max-width: 699px) {
    .top-links {
        gap: 0.75rem;
    }

    .top-links a {
        font-size: 0.66rem;
        letter-spacing: 0.08em;
    }

    .brand-mark {
        font-size: 1.2rem;
    }
}

/* Narrow phones (many Androids are 360px wide or less): the links wrap under the mark
   instead of pushing the page wider than the screen (which made the browser zoom out). */
@media (max-width: 379px) {
    .top-bar {
        flex-wrap: wrap;
        row-gap: 0.4rem;
    }

    .top-links {
        gap: 0.9rem;
    }
}

@media (min-width: 700px) {
    .top-links {
        gap: 2rem;
    }

    .top-links a {
        font-size: 0.8rem;
    }
}

/* --- Page header: eyebrow, giant title, intro, buttons ------------------- */

.page-header {
    position: relative;
    padding-top: 2.6rem;
}

/* Round "sticker" on the right of wide headers. Purely decorative, so it's hidden on phones. */
.header-badge {
    display: none;
}

@media (min-width: 900px) {
    .header-badge {
        position: absolute;
        top: 50%;
        right: 2%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 230px;
        height: 230px;
        border-radius: 50%;
        background-color: var(--color-blush);
        color: var(--color-oxblood);
        box-shadow: var(--shadow-deep);
        transform: translateY(-38%) rotate(-9deg);
    }

    /* Keep the title clear of the badge; long titles wrap to two lines instead. */
    .page-title {
        max-width: calc(100% - 290px);
    }

    /* Dashed inner ring, like a stamp. */
    .header-badge::before {
        content: "";
        position: absolute;
        inset: 12px;
        border: 2px dashed rgba(90, 30, 38, 0.45);
        border-radius: 50%;
    }
}

.header-badge-big {
    font-family: var(--font-display);
    font-size: 2.6rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.header-badge-script {
    margin-top: -0.15rem;
    font-family: var(--font-script);
    font-size: 2.4rem;
    line-height: 1.1;
    color: var(--color-wine);
}

.header-badge-small {
    margin-top: 0.2rem;
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.page-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(3rem, 13.5vw, 8.5rem);
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 0.92;
    text-transform: uppercase;
    color: var(--color-blush);
}

.page-title .script-accent {
    color: var(--color-cream);
}

.page-intro {
    max-width: 34rem;
    margin: 1.1rem 0 0;
    font-size: 1.05rem;
    color: var(--color-cream);
}

.page-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.6rem;
}

@media (min-width: 700px) {
    .page-header {
        padding-top: 3.5rem;
    }

    .band-header {
        padding-bottom: 3.5rem;
    }
}

/* --- Section headings inside the cream bands ---------------------------- */

.section-heading-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem 2rem;
    margin-bottom: 1.75rem;
}

.section-heading {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.3rem, 9vw, 4rem);
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 0.95;
    text-transform: uppercase;
    color: var(--color-oxblood);
}

.section-heading .script-accent {
    color: var(--color-wine);
}

/* --- Footer --------------------------------------------------------------- */

.site-footer {
    padding: 2.75rem 0 3rem;
    background-color: var(--color-oxblood);
}

.site-footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.footer-mark {
    font-size: 2.8rem;
    line-height: 1;
    text-decoration: none;
}

.footer-script {
    margin: 0.35rem 0 0;
    font-family: var(--font-script);
    font-size: 1.7rem;
    color: var(--color-blush);
}

.footer-links {
    margin: 1rem 0 0;
    font-size: 0.82rem;
}

.footer-links a {
    color: var(--color-blush);
    text-underline-offset: 3px;
}

.footer-links a:hover,
.footer-links a:focus-visible {
    color: var(--color-cream);
}

/* Landing page: a small Privacy link at the bottom of the screen. */
.landing-legal {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1rem;
    margin: 0;
    text-align: center;
    font-size: 0.78rem;
}

.landing-legal a {
    color: var(--color-blush);
    opacity: 0.75;
    text-underline-offset: 3px;
}

.landing-legal a:hover,
.landing-legal a:focus-visible {
    opacity: 1;
}

/* Privacy page: plain reading text in a soft card. */
.prose-card {
    max-width: 46rem;
    margin: 0 auto;
}

.prose-card p,
.prose-card li {
    line-height: 1.6;
}

.prose-card a {
    color: var(--color-oxblood);
}

.prose-updated {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    color: var(--color-muted);
}

.prose-heading {
    margin: 1.8rem 0 0.5rem;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--color-oxblood);
}

.prose-card .prose-heading:first-of-type {
    margin-top: 1rem;
}

.prose-list {
    margin: 0.4rem 0 0.8rem;
    padding-left: 1.2rem;
}

.prose-list li + li {
    margin-top: 0.4rem;
}


/* ==========================================================================
   5. Charcuterie page: the full list
   ========================================================================== */

.board-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
}

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.chip {
    min-height: 40px;
    padding: 0.45rem 1.1rem;
    border: 2px solid var(--color-oxblood);
    border-radius: var(--radius-pill);
    background-color: transparent;
    color: var(--color-oxblood);
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
}

.chip:hover {
    background-color: var(--color-blush-soft);
}

/* aria-pressed="true" marks the chip that's currently selected. */
.chip[aria-pressed="true"] {
    background-color: var(--color-oxblood);
    color: var(--color-cream);
}

.sort-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.sort-select {
    min-height: 40px;
    padding: 0.4rem 0.9rem;
    border: 2px solid var(--color-oxblood);
    border-radius: var(--radius-pill);
    background-color: var(--color-cream-light);
    color: var(--color-oxblood-deep);
    font-family: var(--font-body);
    font-size: 0.9rem;
}

.board-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 620px) {
    .board-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 980px) {
    .board-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* The photo sits inset in a blush card, like the class cards in the inspiration. */
.board-card {
    padding: 10px;
    border-radius: var(--radius-card);
    background-color: var(--color-blush-soft);
}

.board-card-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-small);
}

.board-card-body {
    padding: 1rem 0.6rem 0.7rem;
}

/*
    Phones: a compact row (small square photo beside the text) so the full
    list stays easy to scroll instead of one tall photo per screen.
*/
@media (max-width: 619px) {
    .board-card {
        display: grid;
        grid-template-columns: 104px minmax(0, 1fr);
        align-items: start;
        gap: 0.9rem;
    }

    .board-card-photo {
        aspect-ratio: 1 / 1;
    }

    .board-card-body {
        padding: 0.2rem 0.3rem 0.3rem 0;
    }

    .board-card-name {
        font-size: 1.1rem;
        overflow-wrap: anywhere;   /* "Castelvetrano" alone is wider than a 320px phone's column */
    }

    .board-card-note {
        font-size: 0.9rem;
    }
}

.board-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}

.tag {
    padding: 0.18rem 0.65rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tag-cheese {
    background-color: var(--color-cream-light);
    color: var(--color-oxblood);
}

.tag-meat {
    background-color: var(--color-oxblood);
    color: var(--color-blush);
}

.tag-sample {
    border: 1px dashed var(--color-muted);
    color: var(--color-muted);
}

.board-card-name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--color-oxblood-deep);
}

.board-card-found {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--color-muted);
}

.board-card-note {
    margin: 0.55rem 0 0;
    font-size: 0.95rem;
}

.board-empty {
    color: var(--color-muted);
}


/* ==========================================================================
   6. Cheese quiz
   One blush card on the burgundy band. Inside it, three screens take
   turns (start, question, results); js/quiz.js shows one at a time.
   ========================================================================== */

.band-quiz {
    padding: 0 0 4rem;
    background-color: var(--color-oxblood);
    /* Lets the "Find your cheese" link land with a little breathing room. */
    scroll-margin-top: 1rem;
}

.quiz-card {
    padding: 2.25rem 1.25rem 2rem;
    border-radius: 28px;
    background-color: var(--color-blush);
    color: var(--color-oxblood-deep);
    box-shadow: var(--shadow-deep);
}

@media (min-width: 700px) {
    .quiz-card {
        padding: 3.25rem 3rem 3rem;
    }
}

.quiz-heading {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 10vw, 4.6rem);
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 0.95;
    text-transform: uppercase;
    color: var(--color-oxblood);
}

.quiz-heading .script-accent {
    color: var(--color-wine);
}

/* --- Start screen ----------------------------------------------------- */

.quiz-start {
    text-align: center;
}

.quiz-lede {
    max-width: 32rem;
    margin: 1rem auto 1.6rem;
    font-size: 1.02rem;
}

/* The five steps as numbered pills, a quick preview of what's coming. */
.quiz-steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: quiz-step;
}

.quiz-steps li {
    padding: 0.3rem 0.8rem 0.3rem 0.35rem;
    border-radius: var(--radius-pill);
    background-color: var(--color-blush-soft);
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-oxblood);
    counter-increment: quiz-step;
}

.quiz-steps li::before {
    content: counter(quiz-step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.45rem;
    border-radius: 50%;
    background-color: var(--color-oxblood);
    color: var(--color-cream);
    letter-spacing: 0;
}

/* --- Question screen -------------------------------------------------- */

.quiz-question {
    max-width: 860px;
    margin: 0 auto;
}

.quiz-progress-text {
    margin: 0 0 0.5rem;
    font-family: var(--font-display);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-wine);
}

.quiz-progress-track {
    height: 6px;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background-color: rgba(90, 30, 38, 0.16);
}

.quiz-progress-fill {
    width: 20%;
    height: 100%;
    border-radius: var(--radius-pill);
    background-color: var(--color-oxblood);
    transition: width 0.4s var(--ease-smooth);
}

.quiz-question-title {
    margin: 1.6rem 0 0.3rem;
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 7.5vw, 3.2rem);
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--color-oxblood);
}

.quiz-question-hint {
    margin: 0 0 1.4rem;
    color: var(--color-muted);
}

/* Phones: one big tap target per row. Desktop: all options side by side. */
.quiz-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
    margin: 0 0 1.1rem;
    padding: 0;
    list-style: none;
}

@media (min-width: 760px) {
    .quiz-options {
        grid-template-columns: repeat(var(--option-count, 4), 1fr);
        gap: 0.9rem;
    }
}

.quiz-option {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.15rem;
    width: 100%;
    height: 100%;
    min-height: 74px;
    padding: 0.9rem 1.2rem;
    border: 2px solid transparent;
    border-radius: 18px;
    background-color: var(--color-cream-light);
    color: var(--color-oxblood-deep);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

@media (min-width: 760px) {
    .quiz-option {
        min-height: 132px;
        align-items: center;
        padding: 1.2rem 1rem;
        text-align: center;
    }
}

.quiz-option:hover {
    border-color: var(--color-oxblood);
    transform: translateY(-2px);
}

.quiz-option:disabled {
    cursor: default;
}

.quiz-option-label {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--color-oxblood);
}

.quiz-option-detail {
    font-size: 0.88rem;
    color: var(--color-muted);
}

/* The chosen answer flips to burgundy for a beat before the next question. */
.quiz-option[aria-pressed="true"] {
    border-color: var(--color-oxblood);
    background-color: var(--color-oxblood);
}

.quiz-option[aria-pressed="true"] .quiz-option-label {
    color: var(--color-cream);
}

.quiz-option[aria-pressed="true"] .quiz-option-detail {
    color: var(--color-blush);
}

/* --- Results screen --------------------------------------------------- */

.quiz-results {
    text-align: center;
}

.quiz-results-summary {
    margin: 0.8rem 0 0;
    font-family: var(--font-display);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-wine);
}

.quiz-results-note {
    max-width: 40rem;
    margin: 1.1rem auto 0;
    padding: 0.75rem 1.1rem;
    border-radius: var(--radius-small);
    background-color: var(--color-blush-soft);
    font-size: 0.92rem;
}

.result-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

@media (min-width: 760px) {
    .result-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
    }
}

.result-card {
    display: flex;
    flex-direction: column;
    padding: 10px;
    border-radius: var(--radius-card);
    background-color: var(--color-cream-light);
}

.result-card-photo-wrap {
    position: relative;
}

.result-card-photo {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-small);
}

@media (min-width: 760px) {
    .result-card-photo {
        aspect-ratio: 4 / 3;
    }
}

.result-card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-pill);
    background-color: var(--color-oxblood);
    font-family: var(--font-display);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-cream);
}

.result-card-body {
    padding: 0.9rem 0.6rem 0.5rem;
}

.result-card-name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--color-oxblood-deep);
}

.result-card-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0 0 0.7rem;
    padding: 0;
    list-style: none;
}

.result-card-reasons li {
    padding: 0.2rem 0.65rem;
    border-radius: var(--radius-pill);
    background-color: var(--color-blush-soft);
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--color-oxblood);
}

.result-card-why {
    margin: 0 0 0.7rem;
    font-size: 0.95rem;
}

.result-card-pairing {
    margin: 0;
    padding-top: 0.7rem;
    border-top: 1px solid var(--color-blush-line);
    font-size: 0.9rem;
}

.result-card-pairing strong {
    display: block;
    margin-bottom: 0.1rem;
    font-family: var(--font-display);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-wine);
}

.result-card-check {
    margin: 0.6rem 0 0;
    font-size: 0.8rem;
    font-style: italic;
    color: var(--color-muted);
}

.quiz-results-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.75rem;
}


/* ==========================================================================
   7. Paintings page and lightbox
   Masonry uses CSS columns: each painting keeps its own shape and the
   columns fill top to bottom.
   ========================================================================== */

.painting-gallery {
    columns: 2;
    column-gap: 0.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 760px) {
    .painting-gallery {
        columns: 3;
        column-gap: 1.4rem;
    }
}

@media (min-width: 1100px) {
    .painting-gallery {
        columns: 4;
    }
}

.painting-item {
    /* Keeps a painting and its caption from being split across two columns. */
    break-inside: avoid;
    margin-bottom: 1.1rem;
}

@media (min-width: 760px) {
    .painting-item {
        margin-bottom: 1.6rem;
    }
}

.painting-button {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: zoom-in;
}

/* A blush mat around each painting, like a print in a frame shop. */
.painting-image {
    width: 100%;
    padding: 8px;
    border-radius: 18px;
    background-color: var(--color-blush-soft);
    transition: transform 0.3s var(--ease-smooth);
}

.painting-button:hover .painting-image {
    transform: translateY(-3px);
}

.painting-caption {
    display: block;
    margin-top: 0.55rem;
    padding: 0 0.2rem;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-oxblood);
}

.painting-date {
    display: block;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-muted);
}

/* --- Lightbox (a native <dialog>, so Esc and focus trapping come free) --- */

.lightbox {
    width: min(92vw, 1000px);
    max-height: 94vh;
    padding: 0;
    border: 0;
    border-radius: 26px;
    background-color: var(--color-cream-light);
    color: var(--color-ink);
}

.lightbox::backdrop {
    background-color: rgba(43, 16, 18, 0.88);
}

.lightbox-figure {
    margin: 0;
}

.lightbox-image {
    width: 100%;
    max-height: 72vh;
    object-fit: contain;
    /* A shade darker than any placeholder background, so the painting's edges stay visible. */
    background-color: #E6CFCD;
}

.lightbox-caption {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    padding: 1rem 1.25rem 0.4rem;
}

.lightbox-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--color-oxblood);
}

.lightbox-date {
    font-size: 0.88rem;
    color: var(--color-muted);
}

.lightbox-controls {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem 1.25rem;
}

.lightbox-button {
    min-height: 42px;
    padding: 0.45rem 1.1rem;
    border: 2px solid var(--color-oxblood);
    border-radius: var(--radius-pill);
    background-color: transparent;
    color: var(--color-oxblood);
    font-family: var(--font-display);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
}

.lightbox-button:hover {
    background-color: var(--color-oxblood);
    color: var(--color-cream);
}

.lightbox :focus-visible {
    outline-color: var(--color-oxblood);
}

/* Previous / Next: thin chevron in a round outline (the lightboxes and the quiz's back button). */
.arrow-button {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1.5px solid var(--color-oxblood);
    border-radius: 50%;
    background-color: transparent;
    color: var(--color-oxblood);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.arrow-icon {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.arrow-button:hover:not(:disabled) {
    background-color: var(--color-oxblood);
    color: var(--color-cream);
}

.arrow-button:active:not(:disabled) {
    transform: scale(0.94);
}

.arrow-button:focus-visible {
    outline: 3px solid var(--color-oxblood);
    outline-offset: 3px;
}

.arrow-button:disabled {
    opacity: 0.35;
    cursor: default;
}

/* The quiz's back button sits under the answers: same look, a little quieter. */
.arrow-button-small {
    margin-top: 0.75rem;
}

.lightbox-controls {
    align-items: center;
}


/* ==========================================================================
   8. Reduced motion
   People who turn off animations in their device settings get a still
   page: the full "HannaH" with the icons simply shown underneath it, and
   no slides or smooth scrolling anywhere else.
   ========================================================================== */

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

    html {
        scroll-behavior: auto;
    }

    .wordmark {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Put the icons on their own row under the word instead of in a gap. */
    .icon-links {
        order: 3;
        width: 100%;
        margin-top: 0.35em;
    }

    .icon-list {
        position: static;
        transform: none;
        justify-content: center;
        grid-template-columns: repeat(4, var(--icon-size));
        padding-bottom: 1.5rem;
    }

    .icon-item,
    .wordmark .wordmark-left,
    .wordmark .wordmark-right {
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto;
    }

    .icon-label {
        opacity: 1;
    }

    .wordmark::before,
    .landing-hint {
        display: none;
    }
}


/* ==========================================================================
   Admin-managed extras: store links, meat pairings, "Available" paintings
   ========================================================================== */

.board-card-found a {
    color: var(--color-oxblood);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.board-card-pairs {
    margin: 0.55rem 0 0;
    font-size: 0.88rem;
    color: var(--color-muted);
}

.board-card-pairs strong {
    color: var(--color-oxblood);
}

.painting-available,
.lightbox-available {
    display: inline-block;
    margin-top: 0.3rem;
    padding: 0.12rem 0.6rem;
    border-radius: var(--radius-pill);
    background-color: var(--color-oxblood);
    color: var(--color-blush);
    font-family: var(--font-display);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.lightbox-available {
    margin-top: 0;
}

.lightbox-description {
    flex-basis: 100%;
    margin: 0.3rem 0 0;
    font-size: 0.95rem;
    white-space: pre-line;
}

.board-card-note {
    white-space: pre-line;
}


/* ==========================================================================
   9. Forms (contact form, sticky-note form) and the Contact page
   ========================================================================== */

.contact-grid {
    display: grid;
    gap: 1.25rem;
    align-items: start;
}

@media (min-width: 900px) {
    .contact-grid {
        grid-template-columns: 1.5fr 1fr;
        gap: 2rem;
    }
}

.soft-card {
    padding: 1.6rem 1.25rem;
    border-radius: 28px;
    background: var(--color-cream-light);
    box-shadow: var(--shadow-soft);
}

@media (min-width: 700px) {
    .soft-card {
        padding: 2.2rem;
    }
}

.soft-card-blush {
    background: var(--color-blush);
}

.card-heading {
    margin: 0 0 0.4rem;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 6vw, 2.2rem);
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    color: var(--color-oxblood);
}

/* Card headings are smaller than page titles, so the script word needs to be full size to read. */
.card-heading .script-accent {
    font-size: 1.05em;
    color: var(--color-wine);
}

.card-lede {
    margin: 0 0 1.2rem;
    color: var(--color-muted);
}

.site-form {
    display: grid;
    gap: 1rem;
}

.form-row {
    display: grid;
    gap: 1rem;
}

@media (min-width: 620px) {
    .form-row {
        grid-template-columns: 1fr 1fr;
    }
}

.form-field {
    display: grid;
    gap: 0.35rem;
}

.form-label {
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-oxblood);
}

.form-label small {
    font-family: var(--font-body);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-muted);
}

.site-form input[type="text"],
.site-form input[type="email"],
.site-form textarea {
    width: 100%;
    min-height: 48px;
    padding: 0.65rem 0.9rem;
    border: 2px solid var(--color-blush-line);
    border-radius: 14px;
    background: #FFFFFF;
    color: var(--color-ink);
    font: inherit;
    /* 16px stops iPhones from zooming in on the field. */
    font-size: 16px;
}

.site-form textarea {
    min-height: 120px;
    resize: vertical;
}

.site-form input:focus,
.site-form textarea:focus {
    outline: none;
    border-color: var(--color-oxblood);
}

/* Choice chips built on real radio buttons. */
.choice-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.choice-chips legend {
    margin-bottom: 0.45rem;
    padding: 0;
}

.choice-chip {
    position: relative;
}

.choice-chip input {
    position: absolute;
    opacity: 0;
}

.choice-chip span {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0.4rem 1rem;
    border: 2px solid var(--color-blush-line);
    border-radius: var(--radius-pill);
    background: #FFFFFF;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-oxblood-deep);
    cursor: pointer;
}

.choice-chip input:checked + span {
    border-color: var(--color-oxblood);
    background: var(--color-oxblood);
    color: var(--color-cream);
}

.choice-chip input:focus-visible + span {
    outline: 3px solid var(--color-wine);
    outline-offset: 2px;
}

/* The honeypot: a field people never see but spam bots fill in. Off screen rather than
   display:none, because some bots skip hidden fields. */
.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-error {
    margin: 0;
    padding: 0.6rem 0.9rem;
    border-radius: 12px;
    background: #F8DDE2;
    color: #8A1F2C;
    font-size: 0.9rem;
    font-weight: 500;
}

.form-fineprint {
    margin: 0;
    font-size: 0.8rem;
    color: var(--color-muted);
}

.form-sent {
    padding: 1.5rem 0 0.5rem;
    text-align: center;
}

.form-sent-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 0.8rem;
    border-radius: 50%;
    background: var(--color-oxblood);
    color: var(--color-cream);
    font-size: 1.8rem;
}

.email-big {
    display: block;
    margin: 0.3rem 0 1rem;
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 4.6vw, 1.5rem);
    font-weight: 800;
    color: var(--color-oxblood-deep);
    overflow-wrap: anywhere;
}


/* ==========================================================================
   10. Paintings: the work-in-progress section
   The cork board, notes and drawing pad are in css/board.css (shared with the admin).
   ========================================================================== */

.band-wip {
    padding: 3rem 0 3.5rem;
    background: var(--color-cream-light);
}

.band-wip .section-heading-row {
    align-items: center;
    margin-bottom: 0.4rem;
}

.wip-ask {
    margin: 0;
    font-family: var(--font-script);
    font-size: 1.9rem;
    line-height: 1.1;
    color: var(--color-wine);
}

/* Floats at the bottom of the screen while a visitor drags their new note into place. */
.place-bar {
    position: sticky;
    bottom: 1rem;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem 0.8rem;
    width: fit-content;
    max-width: 100%;
    margin: 1rem auto 0;
    padding: 0.6rem 0.7rem 0.6rem 1.2rem;
    border-radius: 999px;
    background: var(--color-oxblood-deep);
    color: var(--color-cream);
    box-shadow: var(--shadow-deep);
    font-weight: 500;
}

.place-bar .pill-button {
    min-height: 40px;
    padding: 0.45rem 1.1rem;
}

.place-bar .pill-button-outline-dark {
    border-color: var(--color-blush);
    color: var(--color-blush);
}

.place-bar .pill-button-dark {
    background: var(--color-blush);
    color: var(--color-oxblood-deep);
}

.note-dialog {
    width: min(94vw, 460px);
    max-height: 94vh;
    padding: 0;
    border: 0;
    border-radius: 28px;
    background: var(--color-blush);
    color: var(--color-oxblood-deep);
    box-shadow: var(--shadow-deep);
}

.note-dialog::backdrop {
    background: rgba(43, 16, 18, 0.6);
}

.note-form {
    padding: 1.4rem 1.3rem 1.3rem;
}

.note-form .card-heading {
    text-align: center;
}

.note-form input[type="text"] {
    border-color: #FFFFFF;
}

.dialog-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: flex-end;
}

.toast {
    position: fixed;
    left: 50%;
    bottom: 1.2rem;
    z-index: 60;
    width: min(92vw, 460px);
    padding: 0.9rem 1.1rem;
    border-radius: 18px;
    background: var(--color-oxblood-deep);
    color: var(--color-cream);
    box-shadow: var(--shadow-deep);
    font-size: 0.9rem;
    transform: translateX(-50%);
}

.toast strong {
    color: var(--color-blush);
}


/* ==========================================================================
   11. Charcuterie: "Boards I've made", the three-part list, "Build your board"
   ========================================================================== */

/* --- Boards I've made --- */
.band-boards {
    padding: 3.25rem 0 3.5rem;
    background: var(--color-cream-light);
}

.made-grid {
    display: grid;
    gap: 1.1rem;
    margin: 1.6rem 0 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 620px) {
    .made-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 980px) {
    .made-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.made-card {
    padding: 10px 10px 1rem;
    border-radius: var(--radius-card);
    background: var(--color-blush-soft);
}

.made-hint {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
    color: var(--color-muted);
}

.made-card {
    position: relative;
}

.made-card.is-clickable {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.made-card.is-clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(90, 30, 38, 0.15);
}

/* The title is a real button (keyboard, screen readers); its ::after stretches over the whole card. */
.made-card-open {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    text-transform: inherit;
    cursor: pointer;
}

.made-card-open::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-card);
}

.made-card-open:focus-visible {
    outline: none;
}

.made-card-open:focus-visible::after {
    outline: 3px solid var(--color-oxblood);
    outline-offset: 2px;
}

.lightbox-on-it {
    flex-basis: 100%;
    margin-top: 0.5rem;
}

.lightbox-on-it li {
    border: 1px solid var(--color-blush-line);
    background: var(--color-blush-soft);
    font-size: 0.82rem;
}

/* Boards have a list of what's on them, so the photo gets a bit less height than on the paintings page. */
.board-lightbox {
    overflow-y: auto;
}

.board-lightbox .lightbox-image {
    max-height: 56vh;
}

.made-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 16px;
}

.made-card-body {
    padding: 0.8rem 0.4rem 0;
}

.made-card-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--color-oxblood-deep);
}

.made-card-date {
    margin: 0.15rem 0 0.4rem;
    font-size: 0.8rem;
    color: var(--color-muted);
}

.made-card-note {
    margin: 0 0 0.6rem;
    font-size: 0.9rem;
}

.on-it {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.on-it li {
    padding: 0.15rem 0.55rem;
    border-radius: var(--radius-pill);
    background: var(--color-cream-light);
    font-size: 0.74rem;
    color: var(--color-oxblood);
}

/* --- The full list in three parts --- */
.list-group + .list-group {
    margin-top: 2.4rem;
}

.list-group-heading {
    margin: 0 0 1rem;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--color-oxblood);
}

.list-group-heading .script-accent {
    font-size: 1.3em;
    color: var(--color-wine);
}

.show-all {
    margin-top: 1.1rem;
    text-align: center;
}

.tag-extra {
    background: #EEEBD6;
    color: #4F5030;
}

/* --- Build your board --- */
.band-build {
    padding: 3.25rem 0 3.5rem;
    background: var(--color-blush-soft);
}

.build-lede {
    margin: 0.6rem 0 1.4rem;
    color: var(--color-muted);
}

.builder {
    display: grid;
    gap: 1.2rem;
}

@media (min-width: 900px) {
    .builder {
        grid-template-columns: 1fr 1.35fr;
        align-items: center;
    }
}

.builder-tray {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 900px) {
    .builder-tray {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.6rem;
    }
}

.tray-piece,
.board-piece,
.piece-ghost {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.35rem 0.2rem 0.45rem;
    border: 0;
    background: transparent;
    color: var(--color-oxblood-deep);
    font: inherit;
    line-height: 1.1;
    text-align: center;
    /* Lets a finger drag a piece instead of scrolling the page. */
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    cursor: grab;
}

/* The drawings inside a piece never catch the finger themselves (no image drag on long-press). */
.tray-piece *,
.board-piece * {
    pointer-events: none;
}

.tray-piece {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    background: var(--color-cream-light);
    box-shadow: 0 3px 8px rgba(43, 16, 18, 0.08);
}

.tray-piece:hover {
    background: #FFFFFF;
}

.tray-piece.is-on-board {
    opacity: 0.4;
}

.tray-piece:focus-visible,
.board-piece:focus-visible {
    outline: 3px solid var(--color-wine);
    outline-offset: 2px;
}

.piece-shape {
    width: 44px;
    height: 44px;
    flex: none;
}

.piece-label {
    font-size: 0.72rem;
    font-weight: 700;
}

.builder-board {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: 48px;
    background:
        linear-gradient(100deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.06)),
        repeating-linear-gradient(92deg, #C79A6B 0 18px, #BF9161 18px 31px, #C99C6D 31px 52px);
    box-shadow: inset 0 0 0 8px rgba(90, 50, 20, 0.18), var(--shadow-soft);
}

.builder-board.is-drop-target {
    outline: 4px dashed var(--color-oxblood);
    outline-offset: 5px;
}

.builder-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    margin: 0;
    font-family: var(--font-script);
    font-size: clamp(1.8rem, 6vw, 2.6rem);
    color: rgba(255, 250, 240, 0.9);
    pointer-events: none;
}

.board-piece {
    position: absolute;
    width: 96px;
    padding: 0.4rem 0.3rem;
    border-radius: 18px;
    background: rgba(251, 246, 240, 0.92);
    box-shadow: 0 6px 14px rgba(40, 20, 5, 0.3);
    transform: translate(-50%, -50%);
}

@media (max-width: 699px) {
    .board-piece {
        width: 76px;
    }

    .board-piece .piece-shape {
        width: 32px;
        height: 32px;
    }

    .board-piece .piece-label {
        font-size: 0.64rem;
    }
}

.board-piece.is-lifted {
    opacity: 0.35;
}

.piece-ghost {
    position: fixed;
    z-index: 80;
    width: 96px;
    border-radius: 18px;
    background: #FFFFFF;
    box-shadow: var(--shadow-deep);
    pointer-events: none;
    transform: translate(-50%, -50%) rotate(-4deg);
}

.builder-results {
    margin-top: 1.6rem;
}

.builder-results-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.8rem;
}

.builder-results-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--color-oxblood);
}

.builder-results-title .script-accent {
    font-size: 1.3em;
    color: var(--color-wine);
}

.suggestion-grid {
    display: grid;
    gap: 0.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 700px) {
    .suggestion-grid {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }
}

.suggestion-card {
    padding: 1rem 1.1rem 1.1rem;
    border-radius: 20px;
    background: var(--color-cream-light);
}

.suggestion-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-oxblood);
}

.suggestion-title .piece-shape {
    width: 30px;
    height: 30px;
}

.suggestion-list {
    display: grid;
    gap: 0.3rem;
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.92rem;
}

.suggestion-mine {
    margin: 0.7rem 0 0;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--color-blush-line);
    font-size: 0.88rem;
    color: var(--color-muted);
}

.suggestion-mine strong {
    color: var(--color-oxblood);
}


/* Footer "Photo credits" (charcuterie page): small, quiet, opens in place. */
.photo-credits {
    margin-top: 1.4rem;
    max-width: 46rem;
    font-size: 0.78rem;
    color: rgba(232, 195, 203, 0.85);
}

.photo-credits[hidden] {
    display: none;
}

.photo-credits summary {
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.photo-credits a {
    color: inherit;
}

.photo-credits-list {
    margin: 0.8rem 0 0;
    padding: 0;
    list-style: none;
    line-height: 1.55;
    text-align: left;
}

.photo-credits-note {
    margin: 0.6rem 0 0;
    text-align: left;
}


/* "Where to find it" line: a small pin, then e.g. "Usually at Trader Joe's or Sprouts". */
.where-line {
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
}

.where-pin {
    flex: none;
    width: 0.85rem;
    height: 0.85rem;
    margin-top: 0.15em;
    color: var(--color-oxblood);
    opacity: 0.75;
}

/* Build your board: "From my list" picks with where-to-find lines. */
.suggestion-mine-label {
    margin: 0 0 0.35rem;
    font-weight: 800;
    color: var(--color-oxblood);
}

.suggestion-picks {
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.suggestion-picks strong {
    color: var(--color-ink, inherit);
}

.suggestion-where {
    margin: 0.1rem 0 0;
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--color-muted);
}

.suggestion-where a {
    color: var(--color-oxblood);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* "Email me my list" (after desert520's "Email me" box): email + button, then small Share / Copy. */
.byb-send {
    display: grid;
    gap: 0.45rem;
    max-width: 34rem;
    margin: 1.4rem 0 0;
    padding: 1.1rem 1.2rem;
    border-radius: 20px;
    background: var(--color-cream-light);
    border: 1px dashed var(--color-blush-line);
}

.byb-send p {
    margin: 0;
}

.byb-send-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-oxblood);
}

.byb-send-label {
    font-size: 0.85rem;
    color: var(--color-muted);
}

.byb-send-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.byb-send-row input {
    flex: 1 1 12rem;
    min-width: 0;
    font: inherit;
    font-size: 1rem;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--color-blush-line);
    border-radius: 999px;
    background: #fff;
}

.byb-send-status {
    font-size: 0.9rem;
    font-weight: 700;
    color: #3f6b3a;
}

.byb-send-status.is-error {
    color: var(--color-oxblood);
}

.byb-send-alt {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    font-size: 0.88rem;
}

.byb-send-alt:not(:has(button:not([hidden]))) {
    display: none;
}

.byb-send-note {
    font-size: 0.78rem;
    color: var(--color-muted);
}


/* Build your board: Hanna's matching items as small photo cards (whole card links to the item). */
.pick-cards {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pick-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    padding: 0.45rem 0.6rem 0.45rem 0.45rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--color-blush-line);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.pick-card:hover,
.pick-card:focus-visible {
    border-color: var(--color-oxblood);
    box-shadow: 0 4px 14px rgba(90, 28, 38, 0.12);
}

.pick-card:focus-visible {
    outline: 2px solid var(--color-oxblood);
    outline-offset: 2px;
}

.pick-card-photo {
    width: 64px;
    height: 56px;
    border-radius: 10px;
    object-fit: cover;
    background: var(--color-cream-light);
}

.pick-card-body {
    display: grid;
    gap: 0.05rem;
    min-width: 0;
}

.pick-card-name {
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1.2;
    color: var(--color-oxblood);
}

.pick-card .pick-card-stars {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.2;
}

.pick-card-where {
    margin: 0.1rem 0 0;
    font-size: 0.76rem;
    line-height: 1.3;
    color: var(--color-muted);
}

.pick-card-arrow {
    font-size: 1.05rem;
    color: var(--color-oxblood);
    transition: transform 0.15s ease;
}

.pick-card:hover .pick-card-arrow,
.pick-card:focus-visible .pick-card-arrow {
    transform: translateX(3px);
}

.suggestion-more {
    margin-top: 0.6rem;
    font-size: 0.85rem;
    color: var(--color-muted);
}

.suggestion-more summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--color-wine);
}

.suggestion-more .suggestion-list {
    margin-top: 0.4rem;
    font-size: 0.85rem;
}

.suggestion-none {
    margin: 0 0 0.45rem;
    font-size: 0.85rem;
    color: var(--color-muted);
}

/* An item opened from a Build your board card glows for a moment. */
.board-card.is-highlighted {
    animation: item-highlight 2.2s ease-out;
}

.board-card:focus {
    outline: none;
}

@keyframes item-highlight {
    0%, 35% { box-shadow: 0 0 0 4px var(--color-oxblood); }
    100% { box-shadow: 0 0 0 4px transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .board-card.is-highlighted {
        animation: none;
        box-shadow: 0 0 0 4px var(--color-oxblood);
    }
}


/* Build your board, curated: tray groups, diet-rule pieces, one board of photo cards, gap notes. */
.tray-group-label {
    grid-column: 1 / -1;
    margin: 0.35rem 0 -0.1rem;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-oxblood);
}

.tray-group-label:first-child {
    margin-top: 0;
}

.tray-group-label span {
    font-family: inherit;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-muted);
}

.tray-piece.is-rule {
    background: #fff;
    box-shadow: inset 0 0 0 2px var(--color-blush-line), 0 3px 8px rgba(43, 16, 18, 0.08);
}

.piece-badge {
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--color-oxblood);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.builder-summary {
    margin: 0 0 0.7rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-muted);
}

.curated-grid {
    gap: 0.6rem;
}

@media (min-width: 700px) {
    .curated-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .curated-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.pick-card-slot {
    justify-self: start;
    margin-bottom: 0.1rem;
    padding: 0.02rem 0.45rem;
    border-radius: 999px;
    background: var(--color-cream-light);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-wine);
}

.builder-notes {
    display: grid;
    gap: 0.4rem;
    max-width: 46rem;
    margin: 0.9rem 0 0;
    padding: 0;
    list-style: none;
}

.builder-notes li {
    padding: 0.55rem 0.8rem;
    border-left: 3px solid var(--color-oxblood);
    border-radius: 0 12px 12px 0;
    background: var(--color-cream-light);
    font-size: 0.88rem;
    line-height: 1.4;
}

.builder-ideas-list {
    display: grid;
    gap: 0.35rem;
    margin: 0.45rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.85rem;
}

.builder-ideas-list strong {
    color: var(--color-oxblood);
}

/* Suggested starter items: a small label where Hanna's stars would be (no invented ratings). */
.suggested-label {
    display: inline-block;
    margin: 0.35rem 0 0.5rem;
    padding: 0.1rem 0.55rem;
    border: 1px solid #C9A36A;
    border-radius: 999px;
    background: #FBF6F0;
    color: #7A5A22;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pick-card .suggested-label.pick-card-stars {
    justify-self: start;
    margin: 0.1rem 0;
    font-size: 0.62rem;
}