@import url('./styles/pages/supplied-art.css');


/*
 * Orit Bakes shared foundation.
 * Page agents own scoped editorial modules in styles/pages/{page-kind}.css.
 * This file owns the contracts shared by every rendered page.
 */
:root {
  --ground: #F8F5EC;
  --paper: #FFFEFB;
  --cream: #FFFAF0;
  --wheat: #F5E6C8;
  --media: #EFE8D9;
  --envelope: rgba(237,231,212,.78);
  --card-veil: rgba(248,245,236,.94);
  --burgundy: #4E242D;
  --ink: #2F2723;
  --muted: #6B5F55;
  --muted-alt: #756B62;
  --brick: #A52525;
  --tag-blue: #6891B6;
  --line: #DED4BE;
  --line-on-dark: rgba(248,245,236,.27);
  --olive: #4A5940;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s6: 24px;
  --s8: 32px;
  --s10: 40px;
  --s12: 48px;
  --s14: 56px;
  --s16: 64px;
  --s24: 96px;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', Arial, sans-serif;
  --hand: 'Gaegu', cursive;
  --editorial-eyebrow-font: 400 18px/1.3 var(--hand);
  --editorial-title-font: 400 32px/1.2 var(--serif);
  --editorial-body-font: 400 18px/1.5 var(--sans);
  --editorial-meta-font: 400 16px/1.5 var(--sans);
  --editorial-caption-font: 400 18px/1.2 var(--hand);
  --ease: cubic-bezier(.23,1,.32,1);
  --page-max: 1100px;
  --page-gutter: 24px;
  /* Percentages use the available content area, without reserving a separate sidebar column. */
  --page-inset: max(var(--page-gutter), calc((100% - var(--page-max)) / 2));
  --page-width: min(var(--page-max), calc(100% - 2 * var(--page-gutter)));
}

* { box-sizing: border-box; }
html { color: var(--ink); background: var(--ground); scroll-padding-top: 96px; scrollbar-gutter: stable; }
body { margin: 0; background: var(--ground); font: 16px/1.55 var(--sans); }
body.modal-open { overflow: hidden; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
button, a, summary { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .6; }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--brick);
  outline-offset: 6px;
}
input:focus-visible { outline-offset: 2px; }
[hidden] { display: none !important; }
img { display: block; max-width: 100%; }
html{scrollbar-gutter:stable}
#main{position:relative;isolation:isolate}
#main>.georgian-motifs{z-index:-1}
.georgian-motifs { position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden; }
.georgian-motif { position:absolute;left:var(--motif-x);top:var(--motif-y);width:var(--motif-size);height:var(--motif-size);background:var(--brick);opacity:.045;transform:translateX(-50%);mask:var(--motif-image) center/contain no-repeat;-webkit-mask:var(--motif-image) center/contain no-repeat; }
@media(max-width:800px){.georgian-motif{width:calc(var(--motif-size)*.65);height:calc(var(--motif-size)*.65);opacity:.025}}
@media(prefers-reduced-motion:reduce){.georgian-motif{translate:none!important;will-change:auto}}
.discovery-mask-art {
  display: block;
  background-color: var(--burgundy);
  -webkit-mask: var(--discovery-art) center / contain no-repeat;
  mask: var(--discovery-art) center / contain no-repeat;
  pointer-events: none;
}
h1, h2, h3, h4, p, figure { margin: 0; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.2; }
h1 { font-size: 32px; max-width: 23ch; }
h2 { font-size: 28px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }
p + p { margin-top: 16px; }
em { color: var(--brick); font-style: normal; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.handwritten { font: 24px/1.15 var(--hand); letter-spacing: .02em; }
.eyebrow { color: var(--muted); font-size: 18px; margin-bottom: 24px; }
.small, small { color: var(--muted); font-size: 13px; }
.sr-only, .sr-on-focus {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.sr-on-focus:focus { position: static; width: auto; height: auto; clip: auto; }
.skip-link { position: fixed; top: -100px; left: 24px; z-index: 100; background: var(--ground); padding: 12px; }
.skip-link:focus { top: 12px; }

/* Shared first-visit brand opening. The overlay is out of document flow until
 * app.js explicitly adds .brand-opening, preserving the normal Home geometry. */
.brand-intro { display: none; position: fixed; inset: 0; z-index: 1000; pointer-events: none; }
.brand-opening .brand-intro { display: block; }
.brand-intro-paper { position: absolute; inset: 0; background: var(--ground); }
.brand-intro-name {
  position: fixed; display: inline-block; visibility: hidden; white-space: pre;
  transform-origin: 0 0; color: var(--ink); font-family: var(--hand);
  line-height: 1.1; letter-spacing: .04em;
}
.brand-intro-letter { display: inline-block; clip-path: inset(-10% 100% -10% 0); }
.brand-intro-hint {
  position: absolute; right: 0; bottom: 32px; left: 0; text-align: center;
  font: 16px var(--hand); color: var(--muted); letter-spacing: .04em;
}
.brand-intro-stamp { position: fixed; width: 48px; height: 48px; opacity: 0; transform-origin: 0 0; }
.brand-intro-stamp img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.brand-opening .site-header > .wordmark > span,
.brand-opening .site-header > .wordmark > img { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .brand-opening .brand-intro { display: none; }
  .brand-opening .site-header > .wordmark > span,
  .brand-opening .site-header > .wordmark > img { opacity: 1; }
}

/* Shared site shell. Header remains opaque while scrolling at every breakpoint. */
.site-header {
  position: fixed; top: 0; right: 0; left: 0; z-index: 10; display: flex; align-items: center; width: auto;
  justify-content: space-between; gap: 32px; height: 92px;
  padding: 22px var(--page-inset);
  background: var(--ground); border-bottom: 1px solid transparent;
}
.wordmark { display: flex; align-items: center; gap: 12px; font: 24px/1.1 var(--hand); letter-spacing: .04em; }
.wordmark img { width: 44px; height: 48px; object-fit: contain; mix-blend-mode: multiply; }
.desktop-nav { display: flex; align-items: center; gap: 28px; font: 16px/1.267 var(--serif); }
.desktop-nav a, .footer-directory a { position: relative; }
.desktop-nav a { padding: 12px 2px; white-space: nowrap; }
.units [aria-pressed='true']::after {
  content: ''; position: absolute; inset: 3px -6px; pointer-events: none;
  border: 1px solid var(--brick); border-radius: 50%; transform: rotate(-1deg);
}
.recipes-menu, .recipes-menu-heading { position: relative; }
.recipes-menu-heading { display: flex; align-items: center; gap: 12px; }
.recipes-menu-link { display: inline-flex; align-items: baseline; gap: 2px; }
.recipes-menu-link sup, .recipes-submenu sup { color: var(--muted); font: 18px/1 var(--hand); }
.recipes-menu-toggle, .menu-toggle { border: 0; background: transparent; }
.recipes-menu-toggle { width: 40px; height: 44px; padding: 4px 0 0; font: 20px var(--hand); }
.recipes-submenu {
  position: absolute; top: calc(100% + 8px); left: -12px; z-index: 12; min-width: 220px;
  display: grid; gap: 8px; padding: 16px 20px; background: var(--paper);
  border: 1px solid var(--line); box-shadow: 0 12px 28px rgba(47,39,35,.12);
}
.recipes-submenu a { padding: 4px 0; }
.menu-toggle { display: none; min-height: 44px; padding: 8px 12px; font-family: var(--serif); }
.site-content { max-width: none; margin: 0 auto; padding-top: 92px; }
.review-banner { border-block: 1px solid var(--line); color: var(--muted); font-size: 11px; letter-spacing: .015em; padding: 8px 24px; text-align: center; }
main { min-height: 55vh; }
main:focus, #cooking:focus { outline: none; }

/* Shared page rhythm and responsive type scale from Live Type scale. */
.section { padding: 56px var(--page-inset); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.section-heading h2 { font-size: 28px; }
.text-link { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.text-link:hover, .quiet:hover { color: var(--brick); }
.text-link { transition: color 160ms ease; }
.text-link :is(.ui-icon-arrow-up-right,.ui-icon-arrow-right) { transition: transform 180ms var(--ease); }
.text-link:focus-visible { color: var(--brick); }
@media (hover: hover) and (pointer: fine) {
  .text-link:hover .ui-icon-arrow-up-right { transform: translateY(-4px); }
  .text-link:hover .ui-icon-arrow-right { transform: translateY(-2px) rotate(-35deg); }
}
@media (prefers-reduced-motion: reduce) {
  .text-link :is(.ui-icon-arrow-up-right,.ui-icon-arrow-right) { transition: none; transform: none !important; }
}

/* Shared archive interaction states; specificity deliberately matches page styles. */
body[data-page-kind] :is(.home-archive,.archive-page) .archive-row { transition: background-color 180ms ease-out; }
body[data-page-kind] :is(.home-archive,.archive-page) .archive-row h3 { transition: color 180ms ease-out,transform 200ms var(--ease); }
body[data-page-kind] :is(.home-archive,.archive-page) a.archive-row-recipe { transition: color 160ms ease-out,text-decoration-color 160ms ease-out; }
body[data-page-kind] :is(.home-archive,.archive-page) a.archive-row-recipe:focus-visible { color:var(--brick); }
body[data-page-kind] :is(.home-archive,.archive-page) .archive-row:focus-within { background:var(--cream); }
@media (hover:hover) and (pointer:fine) {
  body[data-page-kind] :is(.home-archive,.archive-page) .archive-row:hover { background:var(--cream); }
  body[data-page-kind] :is(.home-archive,.archive-page) .archive-row:hover h3 { color:var(--brick); transform:translateX(4px); }
  body[data-page-kind] :is(.home-archive,.archive-page) a.archive-row-recipe:hover { color:var(--brick); }
  body[data-page-kind] :is(.home-archive,.archive-page) .archive-row:hover .ui-icon-arrow-right { transform:translateY(-2px) rotate(-35deg); }
}
@media (prefers-reduced-motion:reduce) {
  body[data-page-kind] :is(.home-archive,.archive-page) .archive-row,
  body[data-page-kind] :is(.home-archive,.archive-page) .archive-row h3 { transition:none;transform:none!important; }
}
.button, .quiet {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; flex-direction: row; flex-wrap: nowrap;
  min-height: 44px; padding: 10px 20px; border: 1px solid var(--line);
  border-radius: 999px; background: transparent; font-size: 14px;
}
.button { font: 19px/1.15 var(--hand); white-space: normal; }
.button.primary { min-height: 49px; border-color: var(--burgundy); background: var(--burgundy); color: #F2E1DA; font: 600 16px/1.313 var(--sans); letter-spacing: .063em; }
.button.search-pill { min-height: 53px; border-color: var(--paper); background: var(--paper); color: var(--ink); font: 600 16px/1.313 var(--sans); letter-spacing: .063em; text-transform: none; white-space: nowrap; }
.quiet { border-color: transparent; padding: 8px 12px; }
.site-header > .menu-toggle { display: none; }
.ui-icon { width: 24px; height: 24px; max-width: 48px; max-height: 48px; object-fit: contain; flex: 0 0 auto; }
.text-link .ui-icon, .button .ui-icon, .quiet .ui-icon { margin: 0; }
.primary .ui-icon, .button.primary .ui-icon { filter: brightness(0) saturate(100%) invert(91%) sepia(13%) saturate(285%) hue-rotate(318deg) brightness(104%) contrast(90%); mix-blend-mode: normal; }
.text-link,
.button,
.quiet,
.search-form button,
.contact-band-action,
.browse-all,
.category-browse-all,
.recipes-view-all,
.archive-row-recipe,
.envelope-browse {
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 4px;
}
.ui-icon--flip-x { transform: scaleX(-1); }
.recipes-menu-toggle .ui-icon, .menu-toggle .ui-icon, .search-form button .ui-icon { width: 18px; height: 18px; }
.search-form { display: flex; align-items: center; gap: 8px; min-height: 53px; margin-top: 32px; border-bottom: 1px solid var(--ink); }
.search-form input { flex: 1; min-width: 0; border: 0; background: var(--paper); padding: 12px 0; font: 16px/1.55 var(--serif); }
.search-form button { border: 0; background: transparent; padding: 12px; font: 600 16px/1.313 var(--sans); letter-spacing: .063em; }

/* Shared card contract. Page agents may set grid placement and image crop per page. */
.recipe-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 52px 24px; }
.recipe-card { position: relative; min-width: 0; }
.photo-link { display: block; }
.photo-stage { position: relative; aspect-ratio: 351 / 450; margin-bottom: 16px; padding: 0 0 16px; isolation: isolate; }
.food-photo { width: 100%; height: 100%; object-fit: cover; transform: rotate(-1deg); transition: transform 160ms var(--ease); }
.photo-stage::after { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; border-bottom: 1px solid var(--burgundy); content: ''; opacity: .55; transform: rotate(-.5deg); }
@media (hover: hover) and (pointer: fine) {
  .photo-link:hover .food-photo { transform: rotate(0); }
  .photo-link:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
}
.recipe-card h3 { font-size: 20px; line-height: 1.35; }
.recipe-card p { margin-top: 8px; color: var(--muted); font-size: 14px; }
.photo-pending { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; height: 100%; gap: 16px; padding: 32px; background: var(--wheat); }
.photo-pending .illustration { width: 52%; max-height: 240px; }
.photo-pending .handwritten { color: var(--muted); font-size: 18px; }

/* Forms, lists and common utility states. */
.filters { border-block: 1px solid var(--line); margin: 32px 0; padding: 16px 0; }
.filters form { display: flex; align-items: end; gap: 24px; margin-top: 16px; padding-bottom: 16px; }
.filters label { display: grid; flex: 1; gap: 8px; font-size: 13px; }
.filters select { max-width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 0; background: var(--ground); font-size: 16px; }
.empty-state { padding: 64px 24px; background: var(--wheat); text-align: center; }
main > .empty-state.section { padding-inline: var(--page-inset); }
.empty-state p { margin: 16px 0 24px; }
.ingredient-group { margin-top: 24px; padding: 24px; background: var(--wheat); }
.ingredient-group h3 { margin-bottom: 12px; font-size: 20px; }
.ingredient-group ul { margin: 0; padding: 0; list-style: none; }
.ingredient-group li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.ingredient-group li:last-child { border: 0; }
.ingredient-group label { display: grid; grid-template-columns: 20px minmax(48px,.6fr) 1fr; gap: 12px; align-items: start; width: 100%; cursor: pointer; }
.ingredient-group input { width: 18px; height: 18px; margin: 2px 0; accent-color: var(--burgundy); }
.ingredient-group input:checked ~ span { opacity: .55; text-decoration: line-through; }
.ingredient-group .amount { min-width: 60px; flex-shrink: 0; }
.ingredient-group small { display: block; margin-top: 4px; }
.units { display: flex; flex-wrap: wrap; gap: 16px; margin: 24px 0 16px; }
.units button { position: relative; font: 18px/1.15 var(--hand); }
.no-script { margin: 24px; padding: 24px; background: var(--wheat); }

/* Shared preview/video infrastructure remains functional on every page. */
dialog { width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh; margin: auto; padding: 0; border: 0; color: var(--ink); background: var(--ground); overscroll-behavior: contain; }
dialog::backdrop { background: rgba(47,39,35,.8); }
.preview-shell-header, .preview-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 32px; border-bottom: 1px solid var(--line); background: var(--ground); }
.preview-layout { display: grid; grid-template-columns: minmax(0,1fr) 400px; align-items: start; gap: 48px; max-width: 1500px; margin: auto; padding: 32px 48px; }
.preview-photo { position: sticky; top: 112px; display: flex; flex-direction: column; align-items: center; gap: 24px; min-width: 0; }
.preview-photo > .food-photo { width: auto; max-width: 100%; height: min(70dvh,720px); object-fit: contain; transform: none; }
.preview-details { padding: 32px; background: var(--wheat); }
.preview-details h1 { margin: 16px 0; font-size: 32px; }
.preview-details h2 { margin-top: 32px; font-size: 24px; }
.dialog-state { padding: 64px; text-align: center; }
.dialog-state h2 { margin-bottom: 24px; }
.dialog-state .button { margin: 24px 8px 0; }
.video-layout { display: grid; place-items: center; gap: 24px; padding: 32px; }
.video-layout iframe { width: min(100%,640px); height: 65dvh; border: 1px solid var(--line); }
.video-layout > p { max-width: 640px; font-size: 14px; text-align: center; }
.video-layout .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.connection-note { position: fixed; bottom: 24px; left: 50%; z-index: 20; max-width: 90vw; padding: 12px 24px; transform: translateX(-50%); background: var(--burgundy); color: var(--ground); font-size: 13px; }
.image-failed { background: var(--wheat); object-fit: contain; }

/* Footer contract matches the 1440/768/390 component variants. */
.site-footer { margin-top: 0; padding: 0 var(--page-inset); background: var(--burgundy); color: var(--ground); }
.site-footer .footer-inner { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: 48px; width: min(100%, var(--page-max)); margin: 0 auto; padding: 56px 0 32px; }
.footer-brand { color: var(--ground); font: 18px/1.15 var(--hand); letter-spacing: .055em; text-transform: uppercase; }
.footer-directory { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 48px; }
.footer-directory nav { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; font: 13px/1.5 var(--sans); }
.footer-directory a { min-height:24px;display:inline-flex;align-items:center;padding: 0; color: var(--ground); opacity: .92; }
.footer-directory a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.footer-directory .footer-instagram { gap: 9px; }
.footer-instagram img { width: 22px; height: 18px; object-fit: contain; filter: brightness(0) invert(1); }
.site-footer .footer-bottom { grid-column: 2; display: flex; align-items: center; justify-content: flex-end; gap: 24px; margin: 0; padding: 25px 0 0; border-top: 1px solid var(--line-on-dark); color: var(--ground); font: 11px/1.55 var(--sans); }
.site-footer .creator-credit { display: inline-flex; align-items: center; gap: 5px; color: inherit; white-space: nowrap; }
.site-footer .creator-credit:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }

/* Wide navigation floats in the outer margin; the document keeps its full width. */
@media (min-width: 1600px) {
  html { scroll-padding-top: 32px; }
  .site-header { position: fixed; inset: 36px auto auto 24px; width: 206px; height: auto; max-height: calc(100dvh - 72px); overflow-y: auto; padding: 0; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 24px; background: transparent; border: 0; }
  .site-header .desktop-nav { width: 100%; flex-direction: column; align-items: flex-start; gap: 4px; }
  .recipes-menu { width: 100%; }
  .recipes-submenu { position: static; width: 100%; min-width: 0; margin-top: 8px; border: 0; padding: 0 0 0 12px; box-shadow: none; }
  .site-content { width: 100%; max-width: none; margin-inline: 0; padding-top: 0; }
  .site-header .wordmark { font-size: 22px; }
  .site-header .recipes-submenu { background: transparent; }
}

/* Horizontal layout occupies 1001–1599 and centers a 1100px content measure. */
@media (min-width: 1001px) and (max-width: 1599px) {
  .site-header { height: 92px; }
}

/* Compact layout includes the 768px tablet used by the live build. */
@media (max-width: 1000px) {
  html { scroll-padding-top: 76px; }
  .site-header { height: 76px; padding-block: 16px; }
  .wordmark { gap: 10px; font-size: 24px; }
  .wordmark img { width: 34px; height: 40px; }
  .desktop-nav { display: none; }
  .site-header > .menu-toggle { display: inline-flex; }
  .site-header > .wordmark,
  .site-header > .menu-toggle { position: relative; z-index: 31; }
  .site-header #mobile-menu:not([hidden]) { position: fixed; inset: 0; z-index: 20; display: grid; align-content: start; gap: 12px; width: auto; height: 100dvh; max-height: none; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 92px 24px 32px; background: var(--ground); border-top: 1px solid var(--line); box-shadow: 0 12px 24px rgba(47,39,35,.1); }
  .site-header #mobile-menu[data-menu-state="closing"] { pointer-events: none; }
  .site-header #mobile-menu a { padding: 8px; font: 22px/1.267 var(--serif); }
  .site-header #mobile-menu > a,
  .site-header #mobile-menu .recipes-menu-link { position: relative; width: max-content; justify-self: start; }
  .site-header #mobile-menu [aria-current='page'] { color: var(--brick); text-decoration: underline; }
  .site-header #mobile-menu .recipes-submenu { position: static; inset: auto; z-index: auto; display: grid; width: 100%; min-width: 0; margin: 0; gap: 8px; padding: 8px 0 8px 12px; border: 0; background: transparent; box-shadow: none; }
  .review-banner { padding: 8px 24px; font-size: 10px; }
  .review-banner span { display: none; }
  .site-content { padding-top: 76px; }
  .recipe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters form { flex-direction: column; align-items: stretch; }
  .footer-directory { gap: 48px; }
}

@media (max-width: 700px) {
  .section { padding-block: 32px; }
  .section-heading { align-items: flex-start; gap: 16px; }
  .section-heading h2 { font-size: 24px; }
  h1 { font-size: 28px; }
  h2 { font-size: 24px; }
  h3 { font-size: 20px; }
  .recipe-card h3 { font-size: 18px; }
  .preview-shell-header, .preview-top { padding: 12px 16px; }
  .preview-layout { grid-template-columns: 1fr; gap: 32px; padding: 24px; }
  .preview-photo { position: static; }
  .preview-photo > .food-photo { width: 100%; height: auto; max-height: 60dvh; }
  .preview-details { padding: 24px; }
  .preview-details h1 { font-size: 28px; }
  .video-layout { padding: 24px; }
  .video-layout iframe { height: 55dvh; }
  .video-layout .actions { flex-direction: column; }
  .site-footer .footer-inner { display: flex; flex-direction: column; gap: 32px; padding: 42px 0 28px; }
  .footer-directory { grid-template-columns: 1fr; gap: 28px; }
  .site-footer .footer-bottom { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
}

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

/* Shared contact band. Page sheets may tune copy placement while this
   component keeps its measured card, stamp and action geometry. */
.contact-band { padding: 32px var(--page-inset); }
.contact-band-inner {
  position: relative; display: grid; grid-template-columns: 106px minmax(0,1fr) auto;
  align-items: start; gap: 32px; width: 100%; min-height: 330px;
  margin: 0 auto; padding: 40px; background: var(--wheat); overflow: hidden; isolation: isolate;
}
.contact-band-stamp, .contact-band-copy, .contact-band-action { z-index: 1; }
.contact-band-copy { position: relative; background: var(--wheat); }
.contact-band-stamp { width: 106.31px; height: 134.69px; object-fit: contain; transform: rotate(-1.45deg); mix-blend-mode: multiply; }
.contact-band-copy { padding-top: 8px; }
.contact-band-copy .eyebrow { position: relative; top: -7px; margin-bottom: 4px; font: 400 18px/1.3 var(--hand); letter-spacing: 1.818px; text-transform: uppercase; }
.contact-band-copy h2 { margin: 0 0 8px; font: 400 28px/1.2 var(--serif); }
.contact-band-copy p:not(.eyebrow) { color: var(--muted); font: 18px/1.5 var(--sans); }
.contact-band-action { position: absolute; top: 40px; right: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 49px; padding: 13px 19px; border: 1px solid var(--burgundy); border-radius: 999px; background: var(--burgundy); color: #F2E1DA; font: 600 16px/1.313 var(--sans); letter-spacing: .063em; white-space: nowrap; }
.contact-band-action:hover { background: var(--ink); border-color: var(--ink); }
.contact-band-rules { position: absolute; z-index: -1; top: 172px; right: 40px; left: 40px; display: grid; gap: 40px; pointer-events: none; }
.contact-band-rules span { display: block; height: 1px; background: var(--line); }
.has-drawn-circle::after { display: none !important; }

@media (max-width: 1000px) {
  .contact-band-inner { grid-template-columns: 76.355px minmax(0,1fr); gap: 22px; min-height: 330px; padding: 28px; }
  .contact-band-stamp { width: 76.355px; height: 95.842px; }
  .contact-band-copy h2 { font-size: 24px; }
  .contact-band-action { top: 203px; right: auto; left: 126.355px; }
  .contact-band-rules { top: 121px; }
}
@media (max-width: 700px) {
  .contact-band-inner { display: flex; flex-direction: column; min-height: 416.842px; gap: 22px; padding: 24px; }
  .contact-band-action { top: 343.842px; left: 24px; }
  .contact-band-rules { top: 172px; right: 40px; left: 40px; width: auto; margin: 0; }
  .footer-brand { font-size: 24px; letter-spacing: .02em; text-transform: none; }
}

/* Final motion polish: tactile control states and envelope fan-out. */
:is(.button, .quiet, .contact-band-action, .search-utility-tag, .search-form button, .recipes-menu-toggle, .menu-toggle, .recipe-box-tab) {
  transition-property: transform, color, background-color, border-color, opacity;
  transition-duration: 120ms, 160ms, 160ms, 160ms, 160ms;
  transition-timing-function: var(--ease), ease, ease, ease, ease;
}

:is(.button, .quiet, .contact-band-action, .search-utility-tag, .search-form button, .recipes-menu-toggle, .menu-toggle, .recipe-box-tab):not(:disabled):active {
  transform: scale(.98);
}

@media (hover: hover) and (pointer: fine) {
  :is(.button, .quiet, .contact-band-action, .search-utility-tag, .search-form button, .recipes-menu-toggle, .menu-toggle, .recipe-box-tab):not(:disabled):hover {
    transform: translateY(-1px);
  }

  :is(.button, .quiet, .contact-band-action, .search-utility-tag, .search-form button, .recipes-menu-toggle, .menu-toggle, .recipe-box-tab):not(:disabled):active {
    transform: scale(.98);
  }

  :is(.button, .quiet, .contact-band-action, .search-form button):not(:disabled):hover .ui-icon:not(.ui-icon--flip-x) {
    transform: translateX(2px);
  }
}

body[data-page-kind="home"] .collections .envelope .fan-stage {
  transform-origin: 50% 55%;
  transition: transform 220ms var(--ease);
}

body[data-page-kind="home"] .collections .envelope .fan-recipe {
  will-change: transform;
  transition: transform 260ms var(--ease), box-shadow 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  body[data-page-kind="home"] .collections .envelope-hit-area:hover .fan-stage,
  body[data-page-kind="home"] .collections .envelope-hit-area:focus-visible .fan-stage {
    transform: rotate(.5deg);
  }

  body[data-page-kind="home"] .collections .envelope-hit-area:hover .fan-recipe,
  body[data-page-kind="home"] .collections .envelope-hit-area:focus-visible .fan-recipe {
    box-shadow: 0 8px 14px rgba(47, 39, 35, .13);
  }

  body[data-page-kind="home"] .collections .envelope-hit-area:hover .fan-recipe:nth-child(1),
  body[data-page-kind="home"] .collections .envelope-hit-area:focus-visible .fan-recipe:nth-child(1) {
    transform: translate3d(calc(-50% - 10px), -10px, 0) rotate(-8deg);
  }

  body[data-page-kind="home"] .collections .envelope-hit-area:hover .fan-recipe:nth-child(2),
  body[data-page-kind="home"] .collections .envelope-hit-area:focus-visible .fan-recipe:nth-child(2) {
    transform: translate3d(-50%, -18px, 0) rotate(1deg);
  }

  body[data-page-kind="home"] .collections .envelope-hit-area:hover .fan-recipe:nth-child(3),
  body[data-page-kind="home"] .collections .envelope-hit-area:focus-visible .fan-recipe:nth-child(3) {
    transform: translate3d(calc(-50% + 10px), -10px, 0) rotate(8deg);
  }
}

body[data-page-kind="home"] .collections .envelope-hit-area:active .fan-stage {
  transform: scale(.995);
}

@media (prefers-reduced-motion: reduce) {
  :is(.button, .quiet, .contact-band-action, .search-utility-tag, .search-form button, .recipes-menu-toggle, .menu-toggle, .recipe-box-tab),
  body[data-page-kind="home"] .collections .envelope .fan-stage,
  body[data-page-kind="home"] .collections .envelope .fan-recipe {
    transition: none !important;
    transform: none !important;
    will-change: auto;
  }
}

@media print {
  body { background: white; color: black; font-size: 11pt; }
  .site-header, .review-banner, .site-footer, .recipe-actions, .video-action, .recipe-hero-image, .units, .quiet, .review-note, dialog, .skip-link { display: none !important; }
  .site-content { margin: 0; }
  .section { padding: 16px 0; }
  .recipe-hero { display: block; }
  .recipe-hero h1 { font-size: 24pt; }
  .recipe-hero .text-link, .recipe-hero .eyebrow { display: none; }
  .cooking-layout { display: block; }
  .ingredient-group { break-inside: avoid; padding: 0; background: none; }
  .ingredient-group input { appearance: none; border: 1px solid black; }
  .method li { break-inside: avoid; padding: 10px 0; }
  .method ol { margin: 0; }
  .before-note { padding: 0; background: none; }
  a { color: black; text-decoration: none; }
}

/* Keep the recipe disclosure recognizable in both states. */
.recipes-menu-toggle .menu-chevron{width:11px;height:20px;object-fit:contain;transform:rotate(90deg);transition:transform 180ms cubic-bezier(.23,1,.32,1)}
.recipes-menu-toggle[aria-expanded="true"] .menu-chevron{transform:rotate(270deg)}
.recipes-menu-toggle[data-animate="false"] .menu-chevron{transition:none}
.mobile-menu-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.site-header #mobile-menu .mobile-menu-actions .button{display:inline-flex;align-items:center;gap:10px;padding:14px 20px;font:600 16px/1.3 var(--sans)}
@media(hover:hover) and (pointer:fine){
 .recipes-menu-toggle:hover .menu-chevron{transform:translateY(2px) rotate(90deg)}
 .recipes-menu-toggle[aria-expanded="true"]:hover .menu-chevron{transform:translateY(-2px) rotate(270deg)}
 .recipes-menu-toggle:hover .menu-chevron{transition:transform 180ms cubic-bezier(.23,1,.32,1)}
}
@media(prefers-reduced-motion:reduce){.recipes-menu-toggle .menu-chevron{transition:none!important}}

/* Shared browse tile feedback across recipes, search and taxonomy pages. */
body[data-page-kind] :is(.recipes-browse-tile,.search-browse-tile,.category-browse-tile,.browse-overview-tile) {
  transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms var(--ease);
}
body[data-page-kind] :is(.recipes-browse-tile,.search-browse-tile,.category-browse-tile,.browse-overview-tile) > :is(.recipes-browse-tile-art,.search-browse-tile-art,.category-browse-art,.browse-tile-art) {
  transform-origin: center bottom;
  transition: transform 220ms var(--ease);
}
body[data-page-kind] :is(.recipes-browse-tile,.search-browse-tile,.category-browse-tile,.browse-overview-tile) > .ui-icon {
  transition: transform 200ms var(--ease);
}
body[data-page-kind] :is(.recipes-browse-tile,.search-browse-tile,.category-browse-tile,.browse-overview-tile):focus-visible {
  outline: 2px solid var(--brick); outline-offset: 4px; background: var(--wheat); transition: none;
}
@media (hover:hover) and (pointer:fine) {
  body[data-page-kind] :is(.recipes-browse-tile,.search-browse-tile,.category-browse-tile,.browse-overview-tile):hover {
    background: var(--wheat); box-shadow: 0 4px 12px rgba(78,36,45,.07);
  }
  body[data-page-kind] :is(.recipes-browse-tile,.search-browse-tile,.category-browse-tile,.browse-overview-tile):hover > :is(.recipes-browse-tile-art,.search-browse-tile-art,.category-browse-art,.browse-tile-art) {
    transform: translateY(-6px) rotate(-5deg) scale(1.08);
  }
  body[data-page-kind] :is(.recipes-browse-tile,.search-browse-tile,.category-browse-tile,.browse-overview-tile):hover > .ui-icon {
    transform: translate(3px,-3px);
  }
}
body[data-page-kind] :is(.recipes-browse-tile,.search-browse-tile,.category-browse-tile,.browse-overview-tile):active:not(:focus-visible) { transform: scale(.99); }
@media (prefers-reduced-motion:reduce) {
  body[data-page-kind] :is(.recipes-browse-tile,.search-browse-tile,.category-browse-tile,.browse-overview-tile),
  body[data-page-kind] :is(.recipes-browse-tile,.search-browse-tile,.category-browse-tile,.browse-overview-tile) > * { transition:none!important;transform:none!important; }
}

/* Shared interaction and icon contracts. */
.ui-icon { padding:2px; }
.handwritten.eyebrow { text-transform:uppercase;letter-spacing:.08em; }
.button { transition:background-color 160ms ease-out,border-color 160ms ease-out,color 160ms ease-out; }
.button:focus-visible { background:var(--wheat); }
.button.primary:focus-visible { background:#66333e; }
@media(hover:hover) and (pointer:fine) { .button:hover { background:var(--wheat);border-color:var(--muted); }.button.primary:hover { background:#66333e;border-color:#66333e; } }
.button.search-pill:is(:hover,:focus-visible) { border-color:var(--paper);background:var(--paper);color:var(--brick); }
.button:active { background:var(--line); }.button.primary:active { background:#371921;border-color:#371921; }
.recipes-menu-link { gap:10px; }
.recipes-menu-label { position:relative; }
.recipes-menu-heading { gap:16px; }

/* Shared editorial motion: never hides content before enhancement runs. */
.ink-word{display:inline-block;white-space:nowrap}.ink-letter{display:inline-block}
:is(#main,#preview-content) a:is(.recipe-tag,.recipe-card-tag,.search-utility-tag){transition:background-color 180ms,transform 150ms,text-decoration-color 180ms;transform-origin:center}
:is(#main,#preview-content) a:is(.recipe-tag,.recipe-card-tag,.search-utility-tag):focus-visible{outline:2px solid currentColor;outline-offset:3px}
:is(#main,#preview-content) a:is(.recipe-tag,.recipe-card-tag,.search-utility-tag):active{transform:scale(.97);background:color-mix(in srgb,currentColor 26%,var(--paper))}
.contact-band-action .ui-icon{filter:brightness(0) invert(1)}
.contact-band-stamp,.contact-band-action .ui-icon{transition:transform 180ms cubic-bezier(.23,1,.32,1)}
.contact-band-action:active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){
 :is(#main,#preview-content) a:is(.recipe-tag,.recipe-card-tag,.search-utility-tag):hover{background:color-mix(in srgb,currentColor 16%,var(--paper));text-decoration-line:underline;text-decoration-style:wavy;text-underline-offset:4px}
 .gallery-item .recipe-card{transition:transform 180ms cubic-bezier(.23,1,.32,1)}
 .gallery-item:hover{position:relative;z-index:2}.gallery-item:hover .recipe-card{transform:scale(1.035)}
 .contact-band-inner:hover .contact-band-stamp{transform:translateY(-3px) rotate(-3deg)}
 .contact-band-action:hover .ui-icon{transform:translateX(4px)}
}
@media(min-width:701px){
 body[data-page-kind] main .archive-entry{position:relative;overflow:visible}
 body[data-page-kind] main .archive-entry.is-photo-open{z-index:5}
 body[data-page-kind] main .archive-entry .archive-row{position:relative}
 body[data-page-kind] main .archive-entry .archive-photo-reveal{position:absolute;display:block;top:50%;right:140px;width:160px;height:200px;padding:0;visibility:hidden;opacity:0;transform:translateY(-50%) scale(.96);pointer-events:none;transition:opacity 180ms,transform 180ms cubic-bezier(.23,1,.32,1),visibility 180ms;z-index:4}
 body[data-page-kind] main .archive-entry.is-photo-open .archive-photo-reveal{visibility:visible;opacity:1;transform:translateY(-50%) scale(1);pointer-events:auto}
 body[data-page-kind] main .archive-entry .archive-photo-clip,body[data-page-kind] main .archive-entry .archive-photo-link{width:160px;height:200px}
 body[data-page-kind] main .archive-entry .archive-photo-clip figure{margin:0}
 body[data-page-kind] main .archive-entry .archive-photo-link .food-photo{width:160px;height:200px;object-fit:cover;box-shadow:0 8px 24px #30251b25}
 body[data-page-kind] main .archive-entry .archive-caption{display:none}
 body[data-page-kind] main .archive-entry .archive-row h3{padding-right:180px}
 body[data-page-kind] main .archive-entry .archive-photo-toggle{display:none}
}
@media(prefers-reduced-motion:reduce){
 .ink-letter,.gallery-item .recipe-card,.contact-band-stamp,.contact-band-action .ui-icon,:is(#main,#preview-content) a:is(.recipe-tag,.recipe-card-tag,.search-utility-tag){transform:none!important;transition:none!important}
 body[data-page-kind] main .archive-entry .archive-photo-reveal{transition:none}
}

@media(min-width:701px){body[data-page-kind] main .archive-entry .archive-photo-reveal{overflow:visible}body[data-page-kind] main .archive-entry .archive-photo-link{display:block}}
.gallery-item:has(:focus-visible) .recipe-card{transform:scale(1.035)}
@media(prefers-reduced-motion:reduce){.gallery-item:has(:focus-visible) .recipe-card{transform:none}}

.recipes-browse-tile-art,.recipes-browse-tile-art-discovery,.search-browse-tile img{transition:transform 180ms cubic-bezier(.23,1,.32,1)}
@media(hover:hover) and (pointer:fine){.recipes-browse-tile:hover :is(.recipes-browse-tile-art,.recipes-browse-tile-art-discovery),.search-browse-tile:hover img{transform:translateY(-3px) rotate(-3deg)}}
.recipes-browse-tile:focus-visible,.search-browse-tile:focus-visible{outline:2px solid var(--brick);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.recipes-browse-tile-art,.recipes-browse-tile-art-discovery,.search-browse-tile img{transform:none!important;transition:none!important}}
figcaption.handwritten,p.handwritten{text-transform:uppercase}

/* Small paper details, shared across page types without moving reading text. */
body[data-page-kind]:not([data-page-kind="about"]) .contact-band-inner{position:relative;border:0;border-radius:2px}
body[data-page-kind]:not([data-page-kind="about"]) .contact-band-inner::after{content:"";position:absolute;z-index:0;inset:0;background:url('/assets/menu-creased-paper.webp') center/135% 135% no-repeat;mix-blend-mode:multiply;opacity:.5;pointer-events:none}
body[data-page-kind]:not([data-page-kind="about"]) .contact-band-copy{background:transparent}
body[data-page-kind] .contact-band-action{position:relative;inset:auto;grid-column:2 / -1;justify-self:start;align-self:start;width:fit-content;max-width:100%;margin:0;border:0;z-index:1;text-decoration:none;white-space:normal}
@media(max-width:700px){body[data-page-kind] .contact-band-action{align-self:flex-start}}
body[data-page-kind] .category-art-stage{border:1px solid var(--line);background:var(--paper);border-radius:2px;box-shadow:0 4px 12px #35241808}
body[data-page-kind] .archive-postcard-heading{position:relative;padding-right:110px}
.archive-postmark{position:absolute;right:8px;top:0;width:72px;height:90px;object-fit:contain;rotate:8deg;pointer-events:none}
body[data-page-kind="archive"] .archive-collage-card>a{padding:9px;background:var(--paper);border:1px solid var(--line);box-shadow:0 4px 12px #35241808}
body[data-page-kind="recipe"] .kitchen-notes .recipe-note{position:relative;border:1px solid var(--line);border-top:2px solid var(--burgundy);padding:24px;background:var(--paper)}
body[data-page-kind="recipe"] .kitchen-notes .recipe-note-label{padding-bottom:10px;border-bottom:1px dashed var(--line)}
body[data-page-kind] .search-page-intro{position:relative}
@media(max-width:700px){body[data-page-kind] .archive-postcard-heading{padding-right:65px}.archive-postmark{width:44px;height:56px;right:0}}

body[data-page-kind="recipe"] .step-note{border:1px solid var(--line);border-left:2px solid var(--burgundy);background:var(--paper);padding:16px 18px}
body[data-page-kind="recipe"] .recipe-more .section-heading{padding-bottom:20px;border-bottom:1px dashed var(--line)}

/* Ink follows the label; its drawing never changes the link's hit area. */
.nav-label,.recipes-menu-label{position:relative;display:inline-block}
.nav-underline{position:absolute;left:0;bottom:-7px;width:100%;height:7px;overflow:visible;pointer-events:none;fill:none;stroke:var(--brick);stroke-width:1.6;stroke-linecap:round}
.nav-underline path{opacity:0;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 220ms ease-out,opacity 150ms ease-out}
a[aria-current] .nav-underline path,a:hover .nav-underline path,a:focus-visible .nav-underline path,.recipes-menu.is-open .nav-underline path{opacity:1;stroke-dashoffset:0}
.site-header :is(.desktop-nav,#mobile-menu) a:not(.button){transition:color 160ms ease-out}
.site-header :is(.desktop-nav,#mobile-menu) a:not(.button):is(:hover,:focus-visible,[aria-current='page']),
.site-header :is(.desktop-nav,#mobile-menu) .recipes-menu.is-open .recipes-menu-link{color:var(--brick)}
.site-header :is(.desktop-nav,#mobile-menu) a:not(.button):is(:hover,:focus-visible,[aria-current='page']) sup,
.site-header :is(.desktop-nav,#mobile-menu) .recipes-menu.is-open .recipes-menu-link sup{color:inherit}
.site-header #mobile-menu [aria-current='page']{text-decoration:none}
@media(max-width:1000px){
 .site-header #mobile-menu:not([hidden]){gap:8px;padding-top:100px}
 .site-header #mobile-menu>a,.site-header #mobile-menu .recipes-menu-link{padding:10px 0;font-size:26px;line-height:1.3}
 .site-header #mobile-menu .recipes-menu-heading{gap:10px}
 .site-header #mobile-menu .recipes-submenu{gap:4px;padding:12px 0 8px 16px}
 .site-header #mobile-menu .recipes-submenu a{font-size:18px;padding:8px 0}
 .mobile-menu-actions{margin-top:20px}
}

/* Recipes comes last, keeping an expanded category list below the main links. */
.recipes-menu-heading{gap:8px}
.recipes-submenu::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
@media(min-width:1600px){
 .site-header .desktop-nav>.recipes-menu{width:100%}
 .site-header .recipes-submenu{margin-top:4px;padding-left:12px}
 .site-header .recipes-submenu::before{display:none}
}

@media(min-width:1001px) and (max-width:1599px){.site-header .recipes-submenu{left:auto;right:0}}

/* Press feedback follows hover so it remains visible while the pointer is down. */
:is(#main,#preview-content) a:is(.recipe-tag,.recipe-card-tag,.search-utility-tag):active{background:color-mix(in srgb,currentColor 26%,var(--paper));transform:scale(.97)}
@media(prefers-reduced-motion:reduce){:is(#main,#preview-content) a:is(.recipe-tag,.recipe-card-tag,.search-utility-tag){transform:none!important;transition:none!important}}

/* The header owns the menu layer, above all animated page content. */
.site-header{z-index:1100}

/* Tiny approved occasion drawings make the recipe menu easier to scan. */
.site-header .recipes-submenu{min-width:270px}
.site-header .recipes-submenu>a:not(.archive-menu-link),.preview-menu .recipes-submenu>a:not(.archive-menu-link){display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:36px}
.recipes-submenu-art{display:block;width:20px;height:26px;object-fit:contain;transform-origin:center bottom;transition:transform 220ms var(--ease)}
.recipes-submenu a:is(:hover,:focus-visible) .recipes-submenu-art{transform:translateY(-2px) rotate(-7deg)}
@media(max-width:1000px){.site-header .recipes-submenu{min-width:0}.site-header #mobile-menu .recipes-submenu>a:not(.archive-menu-link){display:grid}}
@media(prefers-reduced-motion:reduce){.recipes-submenu-art{transition:none}}

.skip-link{z-index:1200}

/* Paper and photography keep their shape without decorative outlines. */
body[data-page-kind] :is(.food-photo,.photo-stage,.photo-pending,.recipe-card,.fan-recipe,.category-art-stage,.archive-collage-card>a,.kitchen-notes .recipe-note,.step-note){border:0}