* {
    box-sizing: border-box;
    margin: 0;
}

/* Global design tokens shared across the oven header, paper trays, and notebook contact card. */
:root {
    --paper: #f8f6f0;
    --paper-shadow: rgba(32, 22, 16, 0.32);
    --ink: #2f2218;
    --rust: #8f5f3d;
    --rust-dark: #6f472d;
    --tray-edge: #8b8f95;
    --tray-face: #c7ccd2;
    --wood-1: #2a1d15;
    --wood-2: #1f140f;
    --display-font: "DynaPuff", "Trebuchet MS", "Segoe UI", sans-serif;
    --body-font: "Alegreya", "Georgia", "Times New Roman", serif;
    --menu-display-font: "Alegreya", "Georgia", "Times New Roman", serif;
    --menu-body-font: "Alegreya", "Georgia", "Times New Roman", serif;
    --menu-title-font: "DM Serif Display", "Times New Roman", serif;
    --handwriting-font: "Patrick Hand", "Comic Sans MS", "Segoe Print", cursive;
    --tray-max-width: 1220px;
    --contact-gap: 24rem;
    --contact-collapsed-width: min(calc(var(--tray-max-width) * 0.5), 100%);
    --contact-expanded-width: min(var(--tray-max-width), 100%);
    --contact-open-height: clamp(430px, 48vw, 620px);
    --contact-center-gap: clamp(0.95rem, 1.4vw, 1.4rem);
    --contact-center-ring-width: clamp(0.95rem, 1.15vw, 1.2rem);
    --notepad-motion-time: 560ms;
    --notepad-motion-ease: cubic-bezier(0.22, 0.74, 0.16, 1);
    --tray-stack-gap: 12rem;
    --oven-height: 286px;
    --oven-mouth-width: 1512px;
    --oven-mouth-height: 160px;
    --tray-entry-overlap: 95px;
    --oven-door-height: 370px;
    --oven-cavity-inset: 12px;
    --oven-controls-height: 120px;
    --oven-controls-overhang: 44px;
    --oven-window-top: calc(var(--oven-controls-height) + clamp(3.5rem, 10vh, 7rem));
    --knob-size: 2.84rem;
    --dial-spacing: 1.2rem;
    --dial-timer-gap: 192px;
    --steel-1: #e4e9ef;
    --steel-2: #c8d0d8;
    --steel-3: #a4adb8;
    --steel-4: #7f8894;
    --steel-dark: #5e6772;
    --steel-ink: #2b323a;
    --glass-dark: #111821;
    --glass-mid: #293847;
    --notebook-cover-1: #ffd3e1;
    --notebook-cover-2: #f3b9d0;
    --notebook-cover-3: #dcc6ff;
    --notebook-spine: #f597b7;
    --notebook-ring: #d7dee8;
    --notebook-ring-shadow: #8f98a6;
    --notebook-paper: #fffbf4;
    --notebook-paper-shadow: #f2e8d8;
    --notebook-rule: rgba(133, 165, 206, 0.32);
    --notebook-margin-line: rgba(227, 132, 154, 0.36);
    --notebook-sticker: #fff2a8;
    --notebook-sticker-ink: #6a4b2a;
    --notebook-band-right: 6rem;
    --notebook-band-width: clamp(2rem, 2.4vw, 2.6rem);
    --notebook-band-top: 0.56rem;
    --notebook-band-bottom: 0.56rem;
    --notebook-band-wrap-extend: 0.72rem;
    --notebook-band-base-1: #e0c39a;
    --notebook-band-base-2: #c7a377;
    --notebook-band-ink: rgba(78, 49, 26, 0.52);
    --notebook-band-mahogany: rgba(111, 60, 42, 0.5);
    --notebook-band-flower-size: clamp(1.2rem, 1.7vw, 1.6rem);
    --map-card-paper: #fffaf1;
    --map-card-paper-shadow: #f3e5cf;
    --map-card-border: rgba(164, 130, 111, 0.48);
    --map-card-inner-border: rgba(120, 95, 79, 0.28);
    --map-card-shadow: rgba(58, 38, 29, 0.24);
    --map-card-tilt: -1.2deg;
    --map-card-pad-x: 0.52rem;
    --map-card-pad-top: 0.52rem;
    --map-card-pad-bottom: 1.12rem;
}

html,
body {
    min-height: 100%;
    overflow-x: hidden;
}

body {
    font-family: var(--body-font);
    color: var(--ink);
    background-color: var(--wood-2);
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(20, 14, 10, 0.24)),
        radial-gradient(circle at 14% 24%, rgba(255, 246, 236, 0.22) 0 7%, transparent 8%),
        radial-gradient(circle at 86% 66%, rgba(255, 244, 232, 0.18) 0 6%, transparent 7%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 2px, rgba(0, 0, 0, 0.02) 2px 8px),
        url("./assets/Website Background.png");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    line-height: 1.55;
}

a {
    color: inherit;
    text-decoration: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

#hero,
#menu,
#story,
#faq,
#contact {
    scroll-margin-top: var(--oven-window-top);
}


/* Fixed oven layers: the decorative shell sits behind the interactive controls layer. */
.site-oven {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 6;
    height: var(--oven-height);
    padding: 0 0.5rem 0;
    pointer-events: none;
}

.site-oven-controls-layer {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 50;
    padding: 0 0.5rem;
    pointer-events: none;
}

.oven-frame {
    width: min(1728px, 100%);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.oven-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.4rem 0.95rem;
    min-height: var(--oven-controls-height);
    width: min(calc(var(--oven-mouth-width) - (var(--oven-cavity-inset) * 2) + var(--oven-controls-overhang)), calc(100% - 0.8rem));
    margin: 0 auto;
    border-radius: 22px 22px 14px 14px;
    border: 1px solid rgba(104, 113, 124, 0.72);
    color: var(--steel-ink);
    background:
        radial-gradient(120% 120% at 50% -15%, rgba(255, 255, 255, 0.45), transparent 54%),
        linear-gradient(180deg, var(--steel-1) 0%, var(--steel-2) 48%, var(--steel-3) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        inset 0 -10px 18px rgba(70, 80, 92, 0.24),
        0 16px 26px rgba(0, 0, 0, 0.34);
    transition: box-shadow 0.22s ease-in-out, transform 0.22s ease-in-out;
    pointer-events: auto;
    position: relative;
    z-index: 52;
}

.site-oven.scrolled + .site-oven-controls-layer .oven-controls {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -12px 20px rgba(64, 74, 86, 0.3),
        0 18px 32px rgba(0, 0, 0, 0.42);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    white-space: nowrap;
    justify-self: center;
    line-height: 1;
    border-radius: 999px;
}

.magnet-word {
    display: inline-flex;
    align-items: center;
    gap: 0.02rem;
    transform-origin: center 72%;
}

.magnet-word:nth-child(1) {
    transform: rotate(-7deg) translateY(1px);
}

.magnet-word:nth-child(2) {
    transform: rotate(4deg) translateY(-1px);
}

.magnet-word:nth-child(3) {
    transform: rotate(-4deg) translateY(2px);
}

.magnet-letter {
    display: inline-block;
    font-family: var(--display-font);
    font-size: clamp(1.25rem, 0.7vw + 1.01rem, 1.7rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 0.9;
    -webkit-text-stroke: 1px #2f3b46;
    paint-order: stroke fill;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.34),
        0 2px 2px rgba(26, 20, 15, 0.33);
    transform-origin: center 72%;
}

.magnet-letter:nth-child(odd) {
    transform: rotate(-6deg);
}

.magnet-letter:nth-child(even) {
    transform: rotate(5deg);
}

.magnet-word:nth-child(1) .magnet-letter:nth-child(odd) {
    color: #f28939;
}

.magnet-word:nth-child(1) .magnet-letter:nth-child(even) {
    color: #e7bd54;
}

.magnet-word:nth-child(2) .magnet-letter:nth-child(odd) {
    color: #4eaea2;
}

.magnet-word:nth-child(2) .magnet-letter:nth-child(even) {
    color: #96ae66;
}

.magnet-word:nth-child(3) .magnet-letter:nth-child(odd) {
    color: #dd7046;
}

.magnet-word:nth-child(3) .magnet-letter:nth-child(even) {
    color: #d8a23e;
}

.oven-dial-nav {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: var(--dial-timer-gap);
    width: 100%;
}

.dial-side {
    display: flex;
    align-items: flex-end;
    gap: var(--dial-spacing);
}

.dial-unit {
    position: relative;
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    width: calc(var(--knob-size) + 0.3rem);
    height: calc(var(--knob-size) + 1.5rem);
}

.dial-unit::before {
    content: "";
    position: absolute;
    top: 0.15rem;
    left: 50%;
    width: calc(var(--knob-size) + 0.8rem);
    height: 1rem;
    transform: translateX(-50%);
    border: 1px solid rgba(95, 106, 119, 0.52);
    border-bottom: none;
    border-radius: 999px 999px 0 0;
}

.dial-link {
    position: absolute;
    top: -0.15rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--display-font);
    font-size: 1.09rem;
    letter-spacing: 0.02em;
    line-height: 1;
    color: #33414f;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    white-space: nowrap;
}

.dial-unit:hover .dial-link {
    color: #111c28;
    border-color: rgba(17, 28, 40, 0.72);
}

.brand:focus-visible,
.dial-unit:focus-visible,
.button:focus-visible {
    outline: 3px solid rgba(102, 143, 217, 0.82);
    outline-offset: 4px;
}

.brand:focus-visible .magnet-letter,
.dial-unit:focus-visible .dial-link {
    color: #111c28;
    border-color: rgba(17, 28, 40, 0.72);
}

.oven-timer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.18rem;
    min-width: clamp(176px, 19vw, 280px);
    padding: 0.34rem 0.72rem 0.45rem;
    border-radius: 8px;
    border: 1px solid rgba(74, 89, 80, 0.92);
    background:
        radial-gradient(120% 90% at 50% -45%, rgba(136, 172, 151, 0.22), transparent 52%),
        linear-gradient(180deg, #313b36 0%, #1f2722 48%, #151b17 100%);
    box-shadow:
        inset 0 1px 0 rgba(198, 212, 202, 0.2),
        inset 0 -10px 14px rgba(0, 0, 0, 0.52),
        0 3px 8px rgba(0, 0, 0, 0.35),
        0 0 14px rgba(91, 209, 122, 0.12);
    position: relative;
    overflow: hidden;
}

.oven-timer::before {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    top: 4px;
    height: 38%;
    border-radius: 6px 6px 14px 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.oven-timer-label {
    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #a4c7ad;
    line-height: 1;
}

.oven-timer-display {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(142px, 16vw, 228px);
    padding: 0.23rem 0.56rem;
    border-radius: 4px;
    border: 1px solid rgba(106, 228, 141, 0.52);
    background:
        repeating-linear-gradient(
            180deg,
            rgba(134, 255, 164, 0.08) 0 2px,
            rgba(6, 20, 10, 0.08) 2px 4px
        ),
        linear-gradient(180deg, #0f1e14 0%, #08110b 100%);
    box-shadow:
        inset 0 1px 1px rgba(201, 255, 220, 0.22),
        inset 0 -2px 6px rgba(0, 0, 0, 0.72),
        0 0 8px rgba(123, 247, 156, 0.2);
    color: #93ff9d;
    font-family: "Courier New", Consolas, monospace;
    font-weight: 700;
    font-size: clamp(0.74rem, 0.2vw + 0.68rem, 0.92rem);
    letter-spacing: 0.14em;
    line-height: 1.15;
    text-shadow:
        0 0 6px rgba(102, 255, 145, 0.6),
        0 0 12px rgba(102, 255, 145, 0.24);
    animation: timerGlowPulse 2.2s ease-in-out infinite;
}

@keyframes timerGlowPulse {
    0%,
    100% {
        filter: brightness(1);
        box-shadow:
            inset 0 1px 1px rgba(201, 255, 220, 0.22),
            inset 0 -2px 6px rgba(0, 0, 0, 0.72),
            0 0 8px rgba(123, 247, 156, 0.2);
    }
    50% {
        filter: brightness(1.08);
        box-shadow:
            inset 0 1px 1px rgba(208, 255, 225, 0.3),
            inset 0 -2px 6px rgba(0, 0, 0, 0.72),
            0 0 14px rgba(123, 247, 156, 0.36);
    }
}

.knob {
    width: var(--knob-size);
    height: var(--knob-size);
    border-radius: 50%;
    border: 1px solid rgba(72, 81, 93, 0.78);
    background:
        radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.24) 40%, transparent 45%),
        linear-gradient(150deg, #eef1f5 0%, #bdc5ce 58%, #949ea9 100%);
    box-shadow:
        inset -2px -2px 5px rgba(73, 80, 88, 0.45),
        inset 2px 2px 4px rgba(255, 255, 255, 0.62);
    position: relative;
    margin-top: auto;
}

.knob::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 50%;
    width: 2px;
    height: 8px;
    border-radius: 999px;
    transform: translateX(-50%);
    background: rgba(62, 72, 86, 0.82);
}

.oven-mouth-wrap {
    display: flex;
    justify-content: center;
    perspective: 1280px;
    padding: 0;
    padding-top: calc(var(--oven-controls-height) - 6px);
    pointer-events: none;
    position: relative;
    z-index: 1;
}

.oven-mouth {
    position: relative;
    width: min(var(--oven-mouth-width), calc(100% - 0.4rem));
    height: var(--oven-mouth-height);
    border-radius: 0 0 30px 30px;
    overflow: visible;
    border: 1px solid rgba(104, 113, 124, 0.78);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(123, 132, 143, 0.08)),
        linear-gradient(180deg, #d6dde4 0%, #b1bac4 58%, #909aa6 100%);
    box-shadow:
        inset 0 -12px 24px rgba(88, 97, 108, 0.36),
        0 16px 28px rgba(0, 0, 0, 0.3);
}

.oven-mouth::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 0;
    right: 0;
    height: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.oven-cavity {
    position: absolute;
    left: var(--oven-cavity-inset);
    right: var(--oven-cavity-inset);
    top: 8px;
    height: clamp(98px, calc(var(--oven-mouth-height) - 26px), 170px);
    border-radius: 12px;
    border: 3px solid rgba(214, 224, 235, 0.72);
    background:
        repeating-linear-gradient(
            180deg,
            rgba(245, 248, 251, 0.88) 0 1px,
            rgba(170, 182, 195, 0.72) 1px 2px,
            rgba(232, 238, 244, 0.08) 2px 12px
        );
    box-shadow:
        inset 0 0 0 2px rgba(88, 100, 112, 0.3),
        inset 0 -10px 18px rgba(10, 12, 14, 0.08),
        inset 0 2px 10px rgba(255, 255, 255, 0.22);
    overflow: hidden;
    transition: filter 0.22s ease-in-out;
    z-index: 2;
}

.oven-cavity::before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 10px;
    border: 1px solid rgba(236, 242, 247, 0.38);
    box-shadow:
        inset 0 0 0 1px rgba(110, 122, 134, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
    opacity: 0.82;
    pointer-events: none;
}

.oven-cavity::after {
    content: none;
}

.oven-door {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: var(--oven-door-height);
    transform: translateZ(0) rotateX(5deg);
    transform-origin: top center;
    border-radius: 0 0 30px 30px;
    border: none;
    background: transparent;
    box-shadow:
        0 20px 24px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.62);
    transition: box-shadow 0.22s ease-in-out, transform 0.22s ease-in-out;
    z-index: 1;
    overflow: hidden;
}

.oven-door-svg {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.site-oven[data-scroll-state="entered"] .oven-cavity {
    filter: brightness(0.78) saturate(1.08);
}

.site-oven[data-scroll-state="entered"] .oven-door {
    box-shadow:
        0 24px 28px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
    transform: translateZ(0) rotateX(7deg);
}

.page-main {
    padding: calc(var(--oven-height) - var(--tray-entry-overlap)) 1.3rem 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--tray-stack-gap);
}

.baking-tray {
    width: min(var(--tray-max-width), 100%);
    padding: 1.2rem;
    border-radius: 20px;
    border: 1px solid rgba(55, 60, 66, 0.5);
    background: linear-gradient(160deg, var(--tray-face) 0%, var(--tray-edge) 100%);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
    position: relative;
    z-index: 12;
}

.baking-tray-primary {
    width: min(var(--tray-max-width), 100%);
}

.baking-tray-faq {
    width: min(var(--tray-max-width), 100%);
}

.baking-tray::before {
    content: "";
    position: absolute;
    top: 0;
    left: 1.25rem;
    right: 1.25rem;
    height: 24px;
    border-radius: 0 0 12px 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.baking-sheet {
    position: relative;
    isolation: isolate;
    border-radius: 12px;
    min-height: calc(100vh - 8rem);
    padding: clamp(1.8rem, 2.4vw + 0.9rem, 3.6rem);
    background: var(--paper);
    box-shadow:
        inset 0 0 0 1px rgba(131, 108, 88, 0.2),
        0 10px 20px var(--paper-shadow);
}

.baking-sheet-faq {
    min-height: auto;
}

.baking-sheet-faq .faq-board {
    margin-bottom: 0;
}

.baking-sheet-faq .menu-item {
    grid-template-columns: 1fr;
}

.baking-sheet-faq .menu-copy p {
    max-width: none;
}

.baking-sheet::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        radial-gradient(140% 100% at 0 0, rgba(255, 255, 255, 0.65), transparent 58%),
        radial-gradient(130% 95% at 100% 100%, rgba(61, 42, 30, 0.09), transparent 66%),
        repeating-linear-gradient(11deg, rgba(102, 80, 64, 0.045) 0 2px, transparent 2px 28px),
        repeating-linear-gradient(-9deg, rgba(255, 255, 255, 0.33) 0 2px, transparent 2px 22px);
    opacity: 0.88;
    z-index: -1;
}

.hero,
.split,
.highlights,
.menu-board,
.cta {
    margin-bottom: 2.6rem;
}

.hero-license-wrap {
    display: grid;
    gap: 0.45rem;
    justify-items: start;
    margin-bottom: 0.9rem;
}

.permit-card {
    position: relative;
    width: fit-content;
    max-width: min(100%, 23rem);
    padding: 0.58rem 0.84rem 0.66rem;
    border-radius: 7px;
    border: 1px solid rgba(137, 103, 68, 0.42);
    background:
        linear-gradient(180deg, rgba(250, 236, 194, 0.98), rgba(233, 212, 160, 0.96)),
        repeating-linear-gradient(0deg, rgba(126, 93, 57, 0.04) 0 1px, transparent 1px 18px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 6px 14px rgba(69, 48, 31, 0.12);
    transform: rotate(-1deg);
}

.permit-card-title,
.permit-card-meta,
.hero-license-note {
    margin: 0;
}

.permit-card-title {
    color: #5a3d2a;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.2;
}

.permit-card-meta {
    color: #684d34;
    font-size: 0.72rem;
    line-height: 1.32;
}

.permit-note {
    margin-top: 1.1rem;
    width: min(100%, 90%);
}

.permit-card--pinned {
    padding: 0.9rem 1.1rem 0.95rem;
    border-radius: 10px 10px 14px 14px;
    border: 1px solid rgba(128, 95, 63, 0.45);
    background:
        linear-gradient(180deg, rgba(255, 245, 216, 0.98), rgba(243, 224, 176, 0.96));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 10px 18px rgba(60, 41, 27, 0.16);
    transform: rotate(-1.8deg);
}

.permit-card--pinned::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 26px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #f7f0e2 0 30%, #d9c6a6 55%, #9a7c59 100%);
    box-shadow:
        0 3px 6px rgba(40, 26, 16, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.permit-card-meta--caps {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    margin-top: 0.25rem;
}

.hero-license-note {
    color: rgba(95, 63, 40, 0.84);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.72rem;
    font-weight: 700;
}

h1 {
    font-family: var(--display-font);
    font-size: clamp(2.4rem, 2.8vw + 1.4rem, 3.9rem);
    line-height: 1.16;
    margin-bottom: 1rem;
}

h2 {
    font-family: var(--display-font);
    font-size: clamp(1.7rem, 1.5vw + 1.15rem, 2.6rem);
    line-height: 1.2;
    margin-bottom: 0.75rem;
}

h3 {
    font-family: var(--display-font);
    margin-bottom: 0.5rem;
    font-size: 1.35rem;
}

p {
    max-width: 68ch;
}

.lede {
    color: #4d3a2c;
    margin-bottom: 1.3rem;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.logo-lockup {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 2rem;
    align-items: center;
}

.logo-placeholder {
    width: 210px;
    height: 210px;
    border-radius: 18px;
    border: 1px dashed rgba(111, 71, 45, 0.5);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.8), rgba(235, 219, 197, 0.9)),
        repeating-linear-gradient(45deg, rgba(120, 90, 70, 0.18) 0 8px, transparent 8px 16px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-feature-image {
    width: 210px;
    height: 210px;
    object-fit: cover;
    border-radius: 18px;
    border: 1px solid rgba(111, 71, 45, 0.42);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.28),
        0 7px 16px rgba(34, 23, 16, 0.24);
}

.menu-board {
    padding: 2rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(122, 92, 69, 0.26);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.menu-header {
    text-align: center;
    margin-bottom: 2rem;
}

.menu-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 1.2rem;
    border-radius: 999px;
    background: rgba(111, 71, 45, 0.18);
    color: var(--rust-dark);
    font-family: var(--display-font);
    font-size: 0.9rem;
    margin-bottom: 0.9rem;
}

.menu-grid {
    display: grid;
    gap: 1.8rem;
}

.menu-item {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 2rem;
    align-items: center;
    padding: 1.3rem 1.6rem;
    border-radius: 12px;
    background: rgba(248, 246, 240, 0.92);
    border: 1px solid rgba(122, 92, 69, 0.22);
}

.menu-copy p {
    margin-bottom: 0.6rem;
}

.price-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-weight: 600;
    color: var(--rust-dark);
}

.photo-frame {
    min-height: 210px;
    border-radius: 12px;
    border: 1px dashed rgba(111, 71, 45, 0.42);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.55), rgba(235, 219, 197, 0.8)),
        repeating-linear-gradient(35deg, rgba(255, 255, 255, 0.35) 0 8px, rgba(248, 237, 222, 0.75) 8px 16px);
    overflow: hidden;
}

.menu-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#menu {
    position: relative;
    overflow: hidden;
    padding: clamp(1.55rem, 2vw + 0.85rem, 2.7rem);
    border: 1px solid rgba(118, 95, 74, 0.2);
    background:
        radial-gradient(120% 115% at 50% -14%, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0) 55%),
        linear-gradient(180deg, rgba(250, 245, 233, 0.86), rgba(241, 232, 213, 0.72));
}

#menu::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        repeating-linear-gradient(12deg, rgba(102, 80, 64, 0.034) 0 2px, transparent 2px 30px),
        repeating-linear-gradient(-8deg, rgba(255, 255, 255, 0.18) 0 2px, transparent 2px 22px);
    opacity: 0.7;
}

#menu .menu-header {
    position: relative;
    z-index: 1;
    margin-bottom: 1.7rem;
    display: grid;
    justify-items: center;
    gap: 0.98rem;
    text-align: center;
}

#menu .menu-title-row {
    width: min(100%, 940px);
    display: grid;
    grid-template-columns: minmax(88px, 1fr) auto minmax(88px, 1fr);
    align-items: center;
    gap: clamp(0.8rem, 1.8vw, 1.4rem);
}

#menu .menu-title-dots {
    display: block;
    width: 100%;
    height: 15px;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.24));
}

#menu .menu-title-card {
    position: relative;
    width: min(100%, 520px);
    padding: clamp(0.92rem, 1vw + 0.72rem, 1.22rem) clamp(1.25rem, 3.2vw, 2.3rem) clamp(0.95rem, 1.1vw + 0.76rem, 1.28rem);
    border-radius: 24px;
    border: 1px solid rgba(132, 103, 74, 0.34);
    background:
        radial-gradient(120% 135% at 50% -30%, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0) 46%),
        linear-gradient(180deg, rgba(255, 250, 242, 0.98), rgba(243, 232, 212, 0.92));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.88),
        inset 0 -10px 18px rgba(128, 101, 72, 0.12),
        0 10px 20px rgba(61, 41, 29, 0.12);
}

#menu .menu-title-card::before {
    content: "";
    position: absolute;
    inset: 0.46rem;
    border-radius: 19px;
    border: 1px solid rgba(174, 139, 102, 0.34);
    pointer-events: none;
}

#menu .menu-title-card::after {
    content: "";
    position: absolute;
    top: 0.72rem;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg, rgba(180, 151, 109, 0), rgba(180, 151, 109, 0.64) 20%, rgba(238, 226, 204, 0.92) 50%, rgba(180, 151, 109, 0.64) 80%, rgba(180, 151, 109, 0));
    pointer-events: none;
}

#menu .menu-title-kicker {
    margin: 0 0 0.28rem;
    font-family: var(--menu-body-font);
    font-size: 0.68rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(108, 75, 52, 0.82);
}

#menu .menu-title-display {
    margin: 0;
    max-width: none;
    font-family: var(--menu-title-font);
    font-size: clamp(2rem, 1.5vw + 1.38rem, 3.08rem);
    line-height: 0.96;
    letter-spacing: 0.015em;
    color: #6c432a;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.38);
}

#menu .menu-title-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.78rem;
    width: min(100%, 310px);
    margin: 0.55rem auto 0;
    color: rgba(168, 128, 76, 0.9);
    position: relative;
    background:
        radial-gradient(circle at 50% 50%, rgba(184, 148, 96, 0.94) 0 18%, transparent 19%) center / 0.62rem 0.62rem no-repeat;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.32));
}

#menu .menu-title-ornament::before,
#menu .menu-title-ornament::after {
    content: "";
    position: relative;
    top: 0;
    min-width: 64px;
    height: 1px;
    flex: 1 1 auto;
    background: linear-gradient(90deg, rgba(168, 128, 76, 0), rgba(168, 128, 76, 0.85));
    box-shadow: 0 0 0 0.5px rgba(255, 246, 229, 0.34);
}

#menu .menu-title-ornament::before {
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
}

#menu .menu-title-ornament::after {
    background: linear-gradient(90deg, rgba(168, 128, 76, 0.85), rgba(168, 128, 76, 0));
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
}

#menu .menu-header .lede {
    margin: 0 auto;
    max-width: 56ch;
    font-family: var(--menu-body-font);
    font-size: 1.01rem;
    line-height: 1.5;
    color: #4b4034;
}

#menu .menu-grid {
    position: relative;
    z-index: 1;
    gap: 0.52rem;
}

#menu .menu-item {
    grid-template-columns: minmax(0, 1fr) 188px;
    gap: 1.25rem;
    align-items: center;
    padding: 0.08rem 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

#menu .menu-item-title {
    display: block;
    margin-bottom: 0.12rem;
}

#menu .menu-copy h3 {
    margin: 0;
    font-family: var(--menu-display-font);
    font-size: clamp(2.02rem, 0.85vw + 1.52rem, 2.5rem);
    line-height: 1.04;
    letter-spacing: 0.01em;
}

#menu .menu-item--crispy h3 {
    color: #943124;
}

#menu .menu-item--granny h3 {
    color: #266936;
}

#menu .menu-item--simply h3 {
    color: #2f3b76;
}

#menu .menu-item--strawberry h3 {
    color: #9b2d45;
}

#menu .menu-copy p {
    margin: 0.22rem 0 0.5rem;
    max-width: 34ch;
    font-family: var(--menu-body-font);
    font-size: 1.08rem;
    line-height: 1.35;
    color: #2e2923;
}

#menu .price-list {
    list-style: disc;
    margin: 0;
    padding-left: 1.3rem;
    font-family: var(--menu-body-font);
    font-size: 1.08rem;
    font-weight: 500;
    line-height: 1.3;
    color: #2d2a26;
}

#menu .price-list li + li {
    margin-top: 0.08rem;
}

#menu .photo-frame {
    position: relative;
    min-height: 170px;
    aspect-ratio: 4 / 5;
    border-radius: 16px;
    border: 1px solid rgba(126, 103, 80, 0.52);
    background:
        radial-gradient(130% 100% at 25% 8%, rgba(255, 255, 255, 0.7), rgba(245, 237, 221, 0.55) 44%, rgba(217, 198, 170, 0.64)),
        linear-gradient(160deg, rgba(201, 184, 155, 0.55), rgba(142, 120, 93, 0.46));
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.48),
        inset 0 -24px 42px rgba(56, 43, 30, 0.22),
        0 8px 14px rgba(33, 23, 15, 0.2);
    padding: 0;
}

#menu .menu-photo-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.16rem 0.62rem;
    border-radius: 999px;
    border: 1px solid rgba(132, 111, 89, 0.5);
    background: rgba(248, 244, 235, 0.86);
    font-family: var(--menu-body-font);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6a5744;
}

#menu .menu-item-divider {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.24rem 0 0.32rem;
}

#menu .menu-item-divider .menu-dot-row {
    width: min(100%, 286px);
    height: 16px;
}

.button {
    font-family: var(--display-font);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.45rem;
    border-radius: 999px;
    font-weight: 600;
    border: 1px solid transparent;
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.button.primary {
    color: #fff;
    background: var(--rust);
}

.button.primary:hover {
    background: #7b4f33;
}

.button.secondary {
    color: var(--rust-dark);
    border-color: rgba(111, 71, 45, 0.5);
    background: rgba(255, 255, 255, 0.6);
}

.button.secondary:hover {
    background: rgba(255, 255, 255, 0.95);
}

.split,
.story-row,
.story-subsection--milestone {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 1.8rem;
    align-items: center;
}

.story-section {
    display: grid;
    gap: 0;
    padding: clamp(1rem, 1.1vw + 0.72rem, 1.45rem);
    border-radius: 18px;
    border: 1px solid rgba(140, 108, 82, 0.22);
    background: linear-gradient(180deg, rgba(255, 252, 247, 0.82), rgba(246, 238, 226, 0.6));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 10px 20px rgba(58, 39, 28, 0.08);
    margin-bottom: 2.6rem;
}

.story-copy {
    display: grid;
    gap: 1rem;
    width: min(100%, 90%);
    justify-self: start;
}

.story-market-copy,
.story-side-copy {
    display: grid;
    gap: 1rem;
    align-content: start;
    width: min(100%, 90%);
    justify-self: start;
}

.story-copy p {
    margin: 0;
    font-size: clamp(1.1rem, 0.42vw + 1rem, 1.26rem);
    line-height: 1.66;
    font-weight: 500;
    color: #433124;
}

.story-market-copy p,
.story-side-copy p {
    margin: 0;
    font-size: clamp(1.02rem, 0.34vw + 0.96rem, 1.16rem);
    line-height: 1.64;
    font-weight: 500;
    color: #4a3729;
}

.story-milestone-column {
    display: grid;
    gap: 2rem;
    align-content: start;
}

.story-side-image {
    display: block;
    width: min(100%, 90%);
    height: auto;
    justify-self: start;
    border-radius: 10px;
    border: 1px solid rgba(109, 78, 56, 0.42);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.2),
        0 10px 22px rgba(36, 24, 16, 0.16);
}

.story-subsection {
    align-content: start;
}

.story-subsection--milestone {
    padding-top: 2rem;
    align-items: start;
}

.story-feature-image,
.story-shelf-image {
    display: block;
    width: 100%;
    height: 280px;
    object-fit: cover;
    object-position: center 42%;
    border-radius: 10px;
    border: 1px solid rgba(109, 78, 56, 0.42);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.2),
        0 10px 22px rgba(36, 24, 16, 0.16);
}

.story-shelf-image {
    width: min(100%, 90%);
    height: 332px;
    justify-self: start;
    object-position: center 30%;
}

.highlights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
}

.card {
    background: rgba(255, 255, 255, 0.68);
    border: 1px solid rgba(122, 92, 69, 0.26);
    border-radius: 10px;
    padding: 1.3rem;
}

.cta {
    border-top: 1px dashed rgba(99, 74, 56, 0.4);
    padding-top: 1.3rem;
    margin-bottom: 0;
}

/* Contact notebook component. `data-open` on `.contact-notepad` drives both the closed cover and open spread states. */
.contact-notepad-lane {
    position: relative;
    z-index: 12;
    width: min(var(--tray-max-width), 100%);
    margin-top: max(0px, calc(var(--contact-gap) - var(--tray-stack-gap)));
    perspective: 2200px;
}

.contact-notepad {
    position: relative;
    width: var(--contact-collapsed-width);
    min-height: var(--contact-open-height);
    overflow: visible;
    border-radius: 26px;
    border: 1px solid rgba(143, 101, 122, 0.42);
    background: linear-gradient(180deg, rgba(255, 248, 252, 0.74), rgba(246, 238, 228, 0.74));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        0 16px 34px rgba(39, 25, 31, 0.3);
    margin-right: 0;
    margin-left: auto;
    transform-style: preserve-3d;
    isolation: isolate;
    transition:
        width var(--notepad-motion-time) var(--notepad-motion-ease),
        min-height var(--notepad-motion-time) var(--notepad-motion-ease),
        margin var(--notepad-motion-time) var(--notepad-motion-ease),
        box-shadow var(--notepad-motion-time) var(--notepad-motion-ease);
}

/* Left-edge binder details used while the notebook is closed. */
.contact-notepad::before {
    content: "";
    position: absolute;
    top: 0.7rem;
    bottom: 0.7rem;
    left: 0.34rem;
    width: 1.2rem;
    border-radius: 999px;
    z-index: 7;
    background:
        radial-gradient(circle at 50% 12px, var(--notebook-ring) 0 4px, var(--notebook-ring-shadow) 5px, transparent 6px) center top / 100% 26px repeat-y,
        linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(178, 189, 204, 0.75));
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.45),
        2px 0 6px rgba(61, 50, 66, 0.22);
    pointer-events: none;
    transition: opacity calc(var(--notepad-motion-time) * 0.5) ease;
}

.contact-notepad::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 1.2rem;
    width: 1px;
    z-index: 6;
    background: linear-gradient(180deg, rgba(122, 89, 103, 0), rgba(122, 89, 103, 0.34) 10%, rgba(122, 89, 103, 0.34) 90%, rgba(122, 89, 103, 0));
    pointer-events: none;
    transition: opacity calc(var(--notepad-motion-time) * 0.5) ease;
}

.contact-notepad[data-open="true"] {
    width: var(--contact-expanded-width);
    overflow: hidden;
    margin-right: auto;
    box-shadow: 0 16px 28px rgba(33, 19, 24, 0.22);
}

.contact-notepad-toggle {
    position: absolute;
    inset: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 10;
    color: inherit;
    font: inherit;
    padding: 0;
}

.contact-notepad-toggle:focus-visible {
    outline: 3px solid rgba(102, 143, 217, 0.7);
    outline-offset: 4px;
    border-radius: 26px;
}

.contact-notepad-toggle-text {
    position: absolute;
    right: 0.9rem;
    bottom: 0.88rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.78rem;
    border-radius: 999px;
    border: 1px solid rgba(150, 107, 127, 0.55);
    background: rgba(255, 250, 243, 0.94);
    color: #6a4358;
    font-family: var(--display-font);
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    box-shadow: 0 4px 9px rgba(59, 39, 47, 0.18);
    pointer-events: none;
}

.contact-notepad[data-open="true"] .contact-notepad-toggle {
    inset: 0.78rem 0.76rem auto auto;
    width: auto;
    height: auto;
    z-index: 12;
}

.contact-notepad[data-open="true"] .contact-notepad-toggle:focus-visible {
    outline-offset: 3px;
    border-radius: 999px;
}

.notebook-cover {
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: 24px;
    padding: clamp(1.2rem, 2.2vw, 1.85rem) clamp(1.2rem, 2.8vw, 2.1rem) clamp(1.3rem, 2.3vw, 1.9rem) clamp(2.2rem, 3.8vw, 2.9rem);
    display: grid;
    place-items: center;
    background:
        radial-gradient(130% 85% at 15% 0%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 58%),
        radial-gradient(85% 140% at 100% 100%, rgba(219, 198, 255, 0.5), rgba(219, 198, 255, 0) 58%),
        linear-gradient(145deg, var(--notebook-cover-1) 0%, var(--notebook-cover-2) 55%, var(--notebook-cover-3) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.38),
        inset -20px -14px 22px rgba(139, 84, 115, 0.2),
        0 14px 28px rgba(37, 23, 32, 0.2);
    transform-origin: left center;
    transform: rotateY(0deg) translateX(0);
    backface-visibility: hidden;
    transition:
        transform var(--notepad-motion-time) var(--notepad-motion-ease),
        opacity calc(var(--notepad-motion-time) * 0.72) ease,
        box-shadow var(--notepad-motion-time) var(--notepad-motion-ease);
}

.notebook-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        repeating-linear-gradient(35deg, rgba(255, 255, 255, 0.18) 0 11px, transparent 11px 23px),
        radial-gradient(circle at 82% 28%, rgba(255, 255, 255, 0.25) 0 12%, transparent 13%);
    opacity: 0.75;
    pointer-events: none;
}

.notebook-cover::after {
    content: "";
    position: absolute;
    inset: 0.44rem;
    border-radius: 20px;
    border: 1px dashed rgba(133, 90, 112, 0.35);
    pointer-events: none;
}

.notebook-cover-spine {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: clamp(1.8rem, 3.1vw, 2.4rem);
    border-right: 1px solid rgba(126, 78, 101, 0.4);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)),
        repeating-linear-gradient(180deg, rgba(164, 97, 128, 0.22) 0 15px, rgba(150, 87, 117, 0.38) 15px 30px),
        linear-gradient(180deg, var(--notebook-spine), #df7fa3);
    box-shadow: inset -5px 0 10px rgba(83, 43, 62, 0.22);
}

.notebook-cover-band {
    position: absolute;
    top: calc(var(--notebook-band-top) - var(--notebook-band-wrap-extend));
    bottom: calc(var(--notebook-band-bottom) - var(--notebook-band-wrap-extend));
    right: var(--notebook-band-right);
    width: var(--notebook-band-width);
    border-radius: 14px;
    z-index: 3;
    pointer-events: none;
    border: 1px solid rgba(102, 66, 38, 0.42);
    background:
        radial-gradient(140% 80% at 20% 8%, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 60%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 0L6 3L3 6L0 3Z M9 6L12 9L9 12L6 9Z' fill='%234e311a' fill-opacity='.34'/%3E%3Cpath d='M9 0L12 3L9 6L6 3Z M3 6L6 9L3 12L0 9Z' fill='%236f3c2a' fill-opacity='.34'/%3E%3C/svg%3E"),
        repeating-linear-gradient(45deg, transparent 0 5px, var(--notebook-band-ink) 5px 5.8px, transparent 5.8px 12px),
        repeating-linear-gradient(-45deg, transparent 0 5px, var(--notebook-band-mahogany) 5px 5.8px, transparent 5.8px 12px),
        linear-gradient(180deg, var(--notebook-band-base-1), var(--notebook-band-base-2));
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.28),
        0 2px 6px rgba(73, 44, 61, 0.18),
        0 0 0 1px rgba(87, 56, 33, 0.14);
}

.notebook-cover-band::before,
.notebook-cover-band::after {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    height: clamp(0.22rem, 0.5vw, 0.34rem);
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(85, 52, 31, 0.55), rgba(52, 32, 20, 0.34));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
    pointer-events: none;
}

.notebook-cover-band::before {
    top: calc(var(--notebook-band-wrap-extend) - var(--notebook-band-top) - 0.12rem);
}

.notebook-cover-band::after {
    bottom: calc(var(--notebook-band-wrap-extend) - var(--notebook-band-bottom) - 0.12rem);
}

.notebook-cover-band-flower {
    position: absolute;
    left: 50%;
    top: 33%;
    width: calc(var(--notebook-band-flower-size) * 4);
    aspect-ratio: 1;
    transform: translate(-50%, calc(-50% - 3.5rem));
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23ffffff' fill-opacity='.96'%3E%3Cellipse cx='32' cy='17' rx='9.8' ry='13'/%3E%3Cellipse cx='19' cy='26' rx='9.2' ry='12.4' transform='rotate(-42 19 26)'/%3E%3Cellipse cx='45' cy='26' rx='9.2' ry='12.4' transform='rotate(42 45 26)'/%3E%3Cellipse cx='24' cy='43' rx='9.2' ry='12.4' transform='rotate(-144 24 43)'/%3E%3Cellipse cx='40' cy='43' rx='9.2' ry='12.4' transform='rotate(144 40 43)'/%3E%3C/g%3E%3Ccircle cx='32' cy='32' r='4.3' fill='%23f8edd2'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    filter: drop-shadow(0 1px 1px rgba(74, 49, 63, 0.28));
}

.notebook-cover-logo-wrap {
    position: relative;
    z-index: 2;
    width: min(64%, clamp(282px, 35vw, 422px));
    max-width: 100%;
    transform: rotate(-2deg);
    pointer-events: none;
}

.notebook-cover-logo {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0.62;
    mix-blend-mode: multiply;
    filter: saturate(1.05) contrast(1.2);
}

/* Desktop opening motion. Smaller breakpoints flatten this effect to avoid clipping. */
.contact-notepad[data-open="true"] .notebook-cover {
    transform: rotateY(-104deg) translateX(-6%);
    opacity: 0.16;
    box-shadow: none;
    pointer-events: none;
}

/* The inner spread stays hidden until `data-open="true"` is applied by `main.js`. */
.contact-notepad-spread {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: inherit;
    border-radius: 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
    padding: 0.95rem 0.95rem 0.95rem 1.75rem;
    background:
        linear-gradient(180deg, rgba(255, 252, 248, 0.93), rgba(245, 232, 216, 0.85)),
        radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0) 56%);
    box-shadow:
        inset 0 0 0 1px rgba(165, 129, 145, 0.32),
        0 10px 22px rgba(46, 28, 36, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.985);
    pointer-events: none;
    transition:
        opacity calc(var(--notepad-motion-time) * 0.66) ease,
        transform calc(var(--notepad-motion-time) * 0.66) var(--notepad-motion-ease),
        visibility 0s linear calc(var(--notepad-motion-time) * 0.66);
}

.contact-notepad-spread::before {
    content: "";
    position: absolute;
    top: 0.74rem;
    bottom: 0.74rem;
    left: 50%;
    width: 1px;
    background: linear-gradient(180deg, rgba(177, 136, 154, 0), rgba(177, 136, 154, 0.45) 12%, rgba(177, 136, 154, 0.45) 88%, rgba(177, 136, 154, 0));
    pointer-events: none;
}

.contact-notepad[data-open="true"] .contact-notepad-spread {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition-delay: 0s;
}

@media (min-width: 861px) {
    .contact-notepad[data-open="true"]::before,
    .contact-notepad[data-open="true"]::after {
        opacity: 0;
    }

    .contact-notepad[data-open="true"] .contact-notepad-spread {
        --contact-binder-channel: calc(var(--contact-center-gap) + (var(--contact-center-ring-width) * 2) + 0.35rem);
        row-gap: 0.9rem;
        column-gap: var(--contact-binder-channel);
        padding-left: 1rem;
        padding-right: 1rem;
        background:
            repeating-radial-gradient(ellipse 78% 38% at 50% 12px, rgba(255, 255, 255, 0) 0 4px, rgba(219, 228, 239, 0.96) 4.2px 6.4px, rgba(141, 153, 169, 0.84) 6.5px 7.2px, transparent 7.3px 24px) center top / var(--contact-binder-channel) 24px repeat-y,
            linear-gradient(180deg, rgba(243, 236, 225, 0.96), rgba(231, 219, 201, 0.88)) center top / var(--contact-center-gap) 100% no-repeat,
            linear-gradient(180deg, rgba(255, 252, 248, 0.93), rgba(245, 232, 216, 0.85)) left top / calc((100% - var(--contact-binder-channel)) / 2) 100% no-repeat,
            radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0) 56%) left top / calc((100% - var(--contact-binder-channel)) / 2) 100% no-repeat,
            linear-gradient(180deg, rgba(255, 252, 248, 0.93), rgba(245, 232, 216, 0.85)) right top / calc((100% - var(--contact-binder-channel)) / 2) 100% no-repeat,
            radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0) 56%) right top / calc((100% - var(--contact-binder-channel)) / 2) 100% no-repeat;
    }

    .contact-notepad[data-open="true"] .contact-notepad-spread::before {
        content: "";
        position: absolute;
        top: 0.74rem;
        bottom: 0.74rem;
        left: calc(50% - (var(--contact-center-gap) / 2) - var(--contact-center-ring-width));
        width: var(--contact-center-ring-width);
        border-radius: 999px;
        background:
            radial-gradient(circle at 50% 11px, var(--notebook-ring) 0 4px, var(--notebook-ring-shadow) 5px, transparent 6px) center top / 100% 24px repeat-y,
            linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(209, 217, 229, 0.78));
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.48),
            0 0 0 1px rgba(123, 95, 109, 0.2);
        pointer-events: none;
        z-index: 3;
    }

    .contact-notepad[data-open="true"] .contact-notepad-spread::after {
        content: "";
        position: absolute;
        top: 0.72rem;
        bottom: 0.72rem;
        left: calc(50% + (var(--contact-center-gap) / 2));
        width: var(--contact-center-ring-width);
        border-radius: 999px;
        background:
            radial-gradient(circle at 50% 11px, var(--notebook-ring) 0 4px, var(--notebook-ring-shadow) 5px, transparent 6px) center top / 100% 24px repeat-y,
            linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(209, 217, 229, 0.78));
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.48),
            0 0 0 1px rgba(123, 95, 109, 0.2);
        pointer-events: none;
        z-index: 3;
    }

    .contact-notepad[data-open="true"] .notepad-page {
        max-width: 100%;
        padding: 0.92rem 0.84rem;
        z-index: 2;
    }
}

.contact-notepad[data-open="true"] .contact-notepad-toggle-text {
    position: static;
}

.notepad-page {
    position: relative;
    border-radius: 16px;
    border: 1px solid rgba(171, 136, 151, 0.33);
    padding: 1rem 1.05rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 250, 241, 0.9)),
        linear-gradient(90deg, transparent 0 2rem, var(--notebook-margin-line) 2rem 2.08rem, transparent 2.08rem),
        repeating-linear-gradient(180deg, transparent 0 24px, var(--notebook-rule) 24px 25px),
        linear-gradient(180deg, var(--notebook-paper), var(--notebook-paper-shadow));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.84),
        0 8px 14px rgba(66, 41, 53, 0.12);
}

.notepad-page::before,
.notepad-page::after {
    content: "";
    position: absolute;
    top: -0.36rem;
    width: 2.5rem;
    height: 0.8rem;
    border-radius: 4px;
    border: 1px solid rgba(181, 158, 113, 0.35);
    background: linear-gradient(180deg, rgba(255, 252, 213, 0.86), rgba(246, 227, 164, 0.72));
    box-shadow: 0 2px 4px rgba(114, 93, 55, 0.12);
}

.notepad-page::before {
    left: 0.9rem;
    transform: rotate(-8deg);
}

.notepad-page::after {
    right: 0.9rem;
    transform: rotate(7deg);
}

.notepad-page h3 {
    margin: 0 0 0.6rem;
    font-family: var(--handwriting-font);
    font-size: 1.35rem;
    letter-spacing: 0.01em;
    color: #6e445d;
}

.location-list {
    margin: 0 0 0.85rem;
    padding-left: 1.2rem;
    color: #49313f;
    font-family: var(--body-font);
    font-size: 1rem;
    line-height: 1.55;
}

.location-list li + li {
    margin-top: 0.3rem;
}

.notepad-page--right {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 250, 241, 0.92)),
        linear-gradient(90deg, transparent 0 1.78rem, rgba(227, 132, 154, 0.34) 1.78rem 1.84rem, transparent 1.84rem),
        repeating-linear-gradient(180deg, transparent 0 20px, rgba(133, 165, 206, 0.32) 20px 21px),
        linear-gradient(180deg, var(--notebook-paper), var(--notebook-paper-shadow));
}

.contact-notebook-fields {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.2rem;
}

.contact-notebook-field {
    padding: 0.05rem 0 0.38rem;
    border-bottom: 1px dashed rgba(178, 145, 159, 0.55);
}

.contact-notebook-field:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.contact-notebook-label {
    margin: 0 0 0.08rem;
    color: #72495f;
    font-family: var(--handwriting-font);
    font-size: 1rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.contact-notebook-value {
    margin: 0;
    padding: 0 0 0.16rem;
    border-bottom: 1px solid rgba(141, 170, 208, 0.45);
    color: #4a3140;
    font-family: var(--handwriting-font);
    font-size: 1.22rem;
    line-height: 1.2;
}

.contact-notebook-field--social {
    padding-bottom: 0.5rem;
}

.contact-notebook-field--notes {
    padding-top: 0.05rem;
}

.contact-notebook-notes {
    min-height: 88px;
    border-radius: 10px;
    border: 1px dashed rgba(165, 130, 146, 0.44);
    background:
        repeating-linear-gradient(180deg, transparent 0 20px, rgba(133, 165, 206, 0.35) 20px 21px),
        linear-gradient(180deg, rgba(255, 253, 248, 0.78), rgba(249, 240, 227, 0.74));
}

.notepad-map-wrap {
    position: relative;
    display: block;
    padding: var(--map-card-pad-top) var(--map-card-pad-x) var(--map-card-pad-bottom);
    border-radius: 8px;
    border: 1px solid var(--map-card-border);
    background: linear-gradient(180deg, var(--map-card-paper), var(--map-card-paper-shadow));
    box-shadow: 0 8px 14px var(--map-card-shadow);
    transform: rotate(var(--map-card-tilt));
    overflow: hidden;
}

.notepad-map-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(130% 90% at 18% 12%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 54%),
        repeating-linear-gradient(125deg, rgba(132, 106, 90, 0.045) 0 2px, rgba(255, 255, 255, 0) 2px 8px);
    pointer-events: none;
    z-index: 1;
}

.notepad-map-wrap iframe {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    min-height: 220px;
    border: 1px solid var(--map-card-inner-border);
    border-radius: 3px;
    filter: saturate(0.96) contrast(0.97);
}

.contact-social-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.56rem;
    margin-top: 0.35rem;
}

.contact-social {
    width: 2.42rem;
    height: 2.42rem;
    border-radius: 42% 58% 51% 49% / 47% 43% 57% 53%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(137, 98, 118, 0.58);
    background: linear-gradient(180deg, #fffdf4, #f1decd);
    color: #6d4660;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        0 4px 8px rgba(66, 41, 53, 0.18);
    transform: rotate(-4deg);
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        background 180ms ease;
}

.contact-social:nth-child(2) {
    transform: rotate(3deg);
}

.contact-social:nth-child(3) {
    transform: rotate(-2deg);
}

.social-logo {
    width: 1.22rem;
    height: 1.22rem;
    display: block;
    color: currentColor;
}

.social-logo--ig rect,
.social-logo--ig circle:first-of-type {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
}

.social-logo--ig circle:last-of-type {
    fill: currentColor;
}

.social-logo--fb path,
.social-logo--yp path {
    fill: currentColor;
}

.contact-social--ig {
    background:
        radial-gradient(circle at 24% 20%, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0) 48%),
        linear-gradient(155deg, #ffd989, #f3799e 46%, #9f5ce8);
    border-color: rgba(142, 74, 124, 0.62);
    color: #ffffff;
}

.contact-social--fb {
    background:
        radial-gradient(circle at 24% 20%, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0) 48%),
        linear-gradient(150deg, #8cc8ff, #4d7be8);
    border-color: rgba(51, 83, 161, 0.62);
    color: #f8fbff;
}

.contact-social--yp {
    background:
        radial-gradient(circle at 24% 20%, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0) 48%),
        linear-gradient(150deg, #ffc7c2, #ff6b5e);
    border-color: rgba(152, 67, 64, 0.58);
    color: #fff8f8;
}

.contact-social:hover {
    transform: translateY(-1px) rotate(0deg);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.88),
        0 6px 10px rgba(66, 41, 53, 0.2);
}

.contact-social:focus-visible {
    outline: 2px solid rgba(102, 143, 217, 0.7);
    outline-offset: 2px;
}

/* Tablet sizing adjustments. */
@media (max-width: 1024px) {
    body {
        background-attachment: scroll;
    }

    :root {
        --oven-height: 260px;
        --oven-mouth-width: 1212px;
        --oven-mouth-height: 146px;
        --tray-entry-overlap: 83px;
        --oven-door-height: 348px;
        --oven-cavity-inset: 10px;
        --oven-controls-height: 112px;
        --oven-controls-overhang: 38px;
        --knob-size: 2.6rem;
        --dial-spacing: 1.04rem;
        --dial-timer-gap: 148px;
    }

    .oven-controls {
        padding: 0.62rem 1.15rem 0.88rem;
    }

    #menu .menu-item {
        grid-template-columns: minmax(0, 1fr) 170px;
        gap: 1rem;
    }

    #menu .menu-copy h3 {
        font-size: clamp(1.8rem, 1.1vw + 1.15rem, 2.2rem);
    }

    #menu .menu-copy p,
    #menu .price-list {
        font-size: 1rem;
    }
}

/* Small-tablet layout: stack the notebook pages and simplify the opening effect. */
@media (max-width: 860px) {
    :root {
        --oven-height: 238px;
        --oven-mouth-width: 1008px;
        --oven-mouth-height: 131px;
        --tray-entry-overlap: 75px;
        --tray-stack-gap: clamp(2rem, 6vw, 4rem);
        --contact-gap: clamp(2rem, 7vw, 3rem);
        --contact-collapsed-width: min(calc(var(--tray-max-width) * 0.68), 100%);
        --contact-open-height: 560px;
        --oven-door-height: 320px;
        --oven-cavity-inset: 9px;
        --oven-controls-height: 104px;
        --oven-controls-overhang: 32px;
        --knob-size: 2.35rem;
        --dial-spacing: 0.92rem;
        --dial-timer-gap: 96px;
        --notebook-band-right: 4.1rem;
        --notebook-band-width: clamp(1.7rem, 2.7vw, 2.15rem);
        --notebook-band-flower-size: clamp(1.02rem, 1.8vw, 1.28rem);
    }

    .oven-controls {
        gap: 0.42rem;
    }

    .oven-timer {
        min-width: 162px;
        padding: 0.3rem 0.52rem 0.38rem;
    }

    .oven-timer-label {
        font-size: 0.58rem;
    }

    .oven-timer-display {
        min-width: 128px;
        font-size: 0.74rem;
    }

    .dial-link {
        font-size: 0.98rem;
    }

    .dial-unit::before {
        height: 0.9rem;
    }

    .split,
    .story-row,
    .story-subsection--milestone {
        grid-template-columns: 1fr;
    }

    .story-feature-image,
    .story-shelf-image {
        height: 200px;
    }

    .story-copy,
    .story-market-copy,
    .story-side-copy,
    .story-shelf-image,
    .story-side-image {
        width: min(100%, 92%);
    }

    .story-shelf-image {
        height: 236px;
    }

    .logo-lockup {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .hero-license-wrap {
        justify-items: center;
    }

    .permit-card {
        transform: none;
    }

    #menu .menu-title-row {
        width: min(100%, 680px);
        grid-template-columns: minmax(60px, 1fr) auto minmax(60px, 1fr);
        gap: 0.72rem;
    }

    #menu .menu-title-dots {
        height: 12px;
    }

    #menu .menu-title-card {
        width: min(100%, 430px);
        padding: 0.88rem 1rem 1rem;
    }

    #menu .menu-title-kicker {
        font-size: 0.62rem;
        letter-spacing: 0.2em;
    }

    #menu .menu-title-display {
        font-size: clamp(1.72rem, 1.05vw + 1.3rem, 2.34rem);
    }

    #menu .menu-title-ornament {
        width: min(100%, 212px);
        gap: 0.5rem;
        margin-top: 0.34rem;
    }

    .menu-item {
        grid-template-columns: 1fr;
    }

    #menu .menu-header {
        gap: 0.82rem;
        margin-bottom: 1.45rem;
    }

    #menu .menu-item {
        grid-template-columns: minmax(0, 1fr) 150px;
        gap: 0.92rem;
    }

    #menu .photo-frame {
        min-height: 142px;
    }

    #menu .menu-item-divider .menu-dot-row {
        width: min(100%, 250px);
    }

    .contact-notepad-lane {
        perspective: none;
    }

    .contact-notepad {
        transform-style: flat;
    }

    .contact-notepad-spread {
        grid-template-columns: 1fr;
        padding-left: 1.45rem;
    }

    .contact-notepad-spread::before {
        display: none;
    }

    .contact-notebook-fields {
        gap: 0.42rem;
    }

    .contact-notebook-value {
        font-size: 1.14rem;
    }

    .contact-social {
        width: 2.26rem;
        height: 2.26rem;
    }

    .social-logo {
        width: 1.08rem;
        height: 1.08rem;
    }

    .notepad-map-wrap {
        transform: rotate(-0.55deg);
        padding-bottom: 0.98rem;
    }

    .notebook-cover-logo-wrap {
        width: min(66%, clamp(240px, 40vw, 336px));
    }

    .contact-notepad[data-open="true"] .notebook-cover {
        transform: translateY(-12%) scale(0.97);
        opacity: 0;
    }
}

/* Mobile layout: reduce header density and keep the notebook full-width. */
@media (max-width: 620px) {
    :root {
        --oven-height: 209px;
        --oven-mouth-width: 840px;
        --oven-mouth-height: 112px;
        --tray-entry-overlap: 63px;
        --tray-stack-gap: clamp(1.4rem, 5vw, 2.4rem);
        --contact-gap: clamp(1.4rem, 5.3vw, 2.25rem);
        --contact-collapsed-width: min(100%, 420px);
        --oven-door-height: 246px;
        --oven-cavity-inset: 8px;
        --oven-controls-height: 96px;
        --oven-controls-overhang: 24px;
        --knob-size: 2.02rem;
        --dial-spacing: 0.76rem;
        --dial-timer-gap: 52px;
        --notebook-band-right: 2.75rem;
        --notebook-band-width: clamp(1.44rem, 3.8vw, 1.82rem);
        --notebook-band-flower-size: clamp(0.9rem, 4.2vw, 1.12rem);
    }

    .site-oven {
        padding: 0 0.2rem 0;
    }

    .site-oven-controls-layer {
        padding: 0 0.2rem;
    }

    .oven-controls {
        align-items: center;
        gap: 0.4rem;
        padding: 0.75rem 0.85rem;
        border-radius: 16px 16px 10px 10px;
        justify-items: center;
    }

    .brand {
        gap: 0.24rem;
    }

    .magnet-letter {
        font-size: clamp(1.08rem, 3.24vw, 1.34rem);
        -webkit-text-stroke: 0.8px #2f3b46;
    }

    .oven-timer {
        min-width: min(232px, 90%);
    }

    .oven-timer-label {
        font-size: 0.54rem;
    }

    .oven-timer-display {
        min-width: 136px;
        font-size: 0.72rem;
    }

    .oven-dial-nav {
        gap: 1.8rem;
        align-items: center;
        flex-direction: column;
    }

    .dial-side {
        gap: 1.44rem;
    }

    .dial-link {
        font-size: 0.95rem;
    }

    .oven-mouth {
        border-radius: 0 0 16px 16px;
    }

    .oven-door {
        height: var(--oven-door-height);
        transform: translateZ(0) rotateX(4deg);
    }

    .page-main {
        padding: calc(var(--oven-height) - var(--tray-entry-overlap)) 0.7rem 2rem;
    }

    .baking-tray {
        padding: 0.65rem;
    }

    #menu .menu-header {
        gap: 0.72rem;
        margin-bottom: 1.28rem;
    }

    #menu .menu-title-row {
        width: min(100%, 100%);
        grid-template-columns: minmax(34px, 1fr) auto minmax(34px, 1fr);
        gap: 0.42rem;
    }

    #menu .menu-title-dots {
        height: 10px;
    }

    #menu .menu-title-card {
        width: min(100%, 100%);
        padding: 0.82rem 0.74rem 0.9rem;
        border-radius: 20px;
    }

    #menu .menu-title-card::before {
        inset: 0.34rem;
        border-radius: 16px;
    }

    #menu .menu-title-kicker {
        font-size: 0.56rem;
        letter-spacing: 0.18em;
    }

    #menu .menu-title-display {
        font-size: clamp(1.38rem, 4.2vw, 1.8rem);
    }

    #menu .menu-title-ornament {
        width: min(100%, 150px);
        gap: 0.28rem;
        margin-top: 0.26rem;
    }

    #menu .menu-header .lede {
        font-size: 0.96rem;
    }

    #menu .menu-item {
        grid-template-columns: 1fr;
        gap: 0.7rem;
    }

    #menu .menu-copy p {
        max-width: none;
    }

    #menu .photo-frame {
        min-height: 176px;
        max-width: 240px;
    }

    #menu .menu-item-divider {
        justify-content: center;
    }

    #menu .menu-item-divider .menu-dot-row {
        width: min(100%, 228px);
    }

    .contact-notepad,
    .contact-notepad[data-open="true"] {
        width: 100%;
        min-height: auto;
    }

    .contact-notepad::before {
        top: 0.56rem;
        bottom: 0.56rem;
        left: 0.18rem;
        width: 0.98rem;
        background:
            radial-gradient(circle at 50% 10px, var(--notebook-ring) 0 3px, var(--notebook-ring-shadow) 4px, transparent 5px) center top / 100% 22px repeat-y,
            linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(178, 189, 204, 0.75));
    }

    .contact-notepad::after {
        left: 1rem;
    }

    .notebook-cover {
        padding: 1rem 1.05rem 1.12rem 1.72rem;
    }

    .notebook-cover-logo-wrap {
        width: min(69%, clamp(176px, 54vw, 256px));
    }

    .contact-notepad[data-open="true"] .notebook-cover {
        transform: translateY(-18%) scale(0.95);
        opacity: 0;
    }

    .contact-notepad-spread {
        padding: 0.72rem 0.72rem 0.72rem 1.2rem;
    }

    .contact-notepad-spread::before {
        display: none;
    }

    .notepad-page {
        padding: 0.82rem 0.88rem;
    }

    .contact-notebook-label {
        font-size: 0.9rem;
    }

    .contact-notebook-value {
        font-size: 1.04rem;
    }

    .contact-notebook-notes {
        min-height: 72px;
    }

    .contact-social {
        width: 2.12rem;
        height: 2.12rem;
    }

    .social-logo {
        width: 1rem;
        height: 1rem;
    }

    .notepad-map-wrap {
        transform: none;
        padding: 0.44rem 0.44rem 0.82rem;
    }

    .notepad-map-wrap iframe {
        min-height: 188px;
    }
}

/* Respect reduced-motion preferences across the animated header and notebook. */
@media (prefers-reduced-motion: reduce) {
    .site-oven *,
    .baking-tray,
    .button,
    .contact-notepad,
    .contact-notepad * {
        transition: none !important;
        animation: none !important;
    }
}