:root {
  color-scheme: light;
  /* Edit these colors to update the website palette. */
  --ink: #202124;
  --paper: #feeff4;
  --accent: #d83379;
  --brand: #fb97b6;
  --surface: #ffffff;
  --soft: #feeff4;
  --muted: #65535e;
  --accent-hover: #f782a7;
  --line: #dfa5bc;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--paper);
}
* { box-sizing: border-box; }
body { margin: 0; font-size: 1rem; line-height: 1.6; }
main, header, footer { width: min(100% - 2rem, 72rem); margin-inline: auto; }
header { padding-block: 2rem; background-color: #ffe9f1; border-bottom: 1px solid var(--line); }
h1 { font-family: Georgia, serif; font-size: clamp(2.5rem, 8vw, 5rem); line-height: 1.1; font-weight: 400; overflow-wrap: anywhere; }
h2 { font-family: Georgia, serif; font-size: 2rem; line-height: 1.2; }
section { padding-block: 2rem; }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
figure { margin: 0; }
figure img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; border-radius: .75rem; }
figcaption { padding-top: .6rem; }
.links { display: flex; flex-wrap: wrap; gap: .75rem; }
.links a { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .75rem 1.5rem; border-radius: 2rem; background: var(--brand); color: var(--ink); text-decoration: none; font-weight: 600; overflow-wrap: anywhere; }
.links a:hover { background: var(--accent-hover); }
a:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.header-logo { display: block; width: clamp(10rem, 22vw, 16.125rem); max-width: 100%; height: auto; }
.preview-label { font-size: .875rem; border: 1px solid var(--line); border-radius: 2rem; padding: .25rem .75rem; }
.intro { padding-block: clamp(3rem, 8vw, 6rem) 2rem; }
.eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .875rem; color: var(--accent); font-weight: bold; }
h1 { margin: 1rem 0; }
.intro-note { color: var(--muted); }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.section-heading > span { font-size: .875rem; color: var(--muted); }
.photo-placeholder { aspect-ratio: 4 / 5; background: var(--soft); border: 1px dashed var(--accent); border-radius: .75rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; color: var(--ink); }
.photo-number { font-family: Georgia, serif; font-size: 4rem; line-height: 1; }
.shade-two { background: var(--brand); border-color: var(--accent); color: var(--ink); }
.shade-three { background: var(--surface); border-color: var(--accent); color: var(--ink); }
.link-section { padding-bottom: 4rem; }
.link-placeholder { background: var(--surface); flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: .5rem; font-weight: bold; }
.link-placeholder small { font-size: .875rem; font-weight: normal; color: var(--muted); }
footer { padding-block: 1.5rem; border-top: 1px solid var(--line); }
@media (max-width: 45rem) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 30rem) { .gallery { grid-template-columns: 1fr; } .links { flex-direction: column; } }

/* Storefront theme: shared by the home and product pages. */
:root { --accent: #a92357; --line: #e8c6d3; }
header { width:100%; padding: .8rem max(1rem, calc((100% - 72rem)/2)); gap:1.5rem; }
.header-logo { width:clamp(8rem,15vw,11rem); }
header .links a { background:transparent; padding:.6rem 1rem; }
header .links a[aria-current=page] { background:#fff8fb; box-shadow:inset 0 -2px var(--accent); }
main { padding-bottom:2rem; }
h1 { letter-spacing:-.045em; font-size:clamp(2.7rem,6vw,4.9rem); }
h2 { font-weight:400; letter-spacing:-.025em; }
a { color:var(--accent); text-underline-offset:4px; }
.intro { display:grid; grid-template-columns:1.5fr 1fr; align-items:center; gap:3rem; padding-block:4rem; }
.intro-note { max-width:35rem; font-size:1.1rem; }
.intro .links { margin-top:1.7rem; }
.small-note { font-size:.875rem; color:var(--muted); }
.hero-note { background:#ffe9f1; border:1px solid var(--line); border-radius:50% 50% 1rem 1rem; padding:4rem 2rem 2rem; text-align:center; }
.hero-note p { font:clamp(1.8rem,3vw,2.7rem)/1.3 Georgia,serif; }
.hero-note em { color:var(--accent); }
.section-heading h2 { margin:.4rem 0 1.5rem; }
.featured-products { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; }
.featured-product { padding:2rem; background:white; border:1px solid var(--line); border-radius:1rem; }
.featured-product h3 { font:1.8rem Georgia,serif; margin:0 0 .8rem; }
.featured-product p { color:var(--muted); }
.featured-product img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:.75rem; margin-bottom:1rem; }
.how-to { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; margin:2rem 0; border-block:1px solid var(--line); }
.how-to span { color:var(--accent); font:1.6rem Georgia,serif; }
.how-to h3 { font-size:1.35rem; margin:.7rem 0; }
.how-to p { color:var(--muted); margin:0; }
.photo-placeholder { aspect-ratio:4/3; border-color:var(--line); background:#ffe9f1; }
.photo-number { color:var(--accent); font-size:2.7rem; }
.shade-two { background:#fbd6e4; }
.shade-three { background:#fff; }
footer { color:var(--muted); }
@media(max-width:45rem) { .intro { grid-template-columns:1fr; gap:1.5rem; padding-block:2rem; } .hero-note { border-radius:1rem; padding:1.5rem; } .hero-note p { margin:1rem 0; } .how-to { grid-template-columns:1fr; gap:1.5rem; } .featured-products { grid-template-columns:1fr; } }
@media(max-width:30rem) { header .links { flex-direction:row; gap:0; } header { gap:.5rem; } .link-placeholder { flex-wrap:wrap; } }
/* Wide supplied header artwork, with its original proportions preserved. */
header > a { display:block; width:min(100%,34rem); }
.header-logo { width:100%; height:auto; }
@media(max-width:45rem) { header { justify-content:center; } header > a { width:min(100%,30rem); } header .links { justify-content:center; } }
/* Compact header: crop the artwork's empty margins without altering the image. */
header { flex-wrap:nowrap; padding-block:.6rem; gap:1rem; }
header > a { width:clamp(15rem,40vw,28rem); flex-shrink:1; min-width:0; overflow:hidden; }
.header-logo { width:100%; height:clamp(5rem,12vw,8rem); object-fit:cover; object-position:center; }
header .links { flex-shrink:0; flex-direction:row; justify-content:flex-end; gap:.25rem; }
header .links a { padding:.6rem .8rem; white-space:nowrap; }
@media(max-width:36rem) {
  header { flex-wrap:wrap; justify-content:center; gap:.25rem; }
  header > a { width:min(100%,25rem); flex-shrink:0; }
  .header-logo { height:7rem; }
  header .links { justify-content:center; flex-wrap:wrap; }
}
.facebook-feed { width:100%; max-width:500px; margin-inline:auto; }
.facebook-feed iframe { display:block; width:100%; max-width:100%; height:650px; border:0; border-radius:.75rem; background:white; }

.section-heading.menu-heading { flex-direction:column; align-items:center; text-align:center; gap:.75rem; }
.featured-product h3 { margin:0; }

.section-heading.menu-heading { margin-bottom:3rem; }
.menu-heading > a { display:inline-flex; align-items:center; justify-content:center; min-height:3.25rem; padding:.85rem 2rem; border-radius:2rem; background:var(--brand); color:var(--ink); font-size:1.15rem; font-weight:600; text-decoration:none; }
.menu-heading > a:hover { background:var(--accent-hover); }

.menu-heading #menu-title { font-family:Arial,Helvetica,sans-serif; font-size:clamp(1.5rem,4vw,2rem); font-weight:700; }

.menu-cta { display:flex; justify-content:center; margin:0 0 3rem; }

.hero-logo { display:flex; align-items:center; justify-content:center; background:transparent; padding:0; }
.hero-logo img { display:block; width:100%; max-width:34rem; height:auto; }

@media (min-width:45.01rem) {
  .intro { grid-template-columns:1.15fr 1fr; gap:2rem; }
  .hero-logo { position:relative; align-self:stretch; min-width:0; }
  .hero-logo img { position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:contain; }
}

.homemade-notice { width:100%; margin:.5rem 0 0; padding:.75rem 0; border:0; background:transparent; color:#d83379; font:700 1.1rem/1.5 Arial,Helvetica,sans-serif; letter-spacing:.16em; text-transform:uppercase; text-align:center; }

header { display:grid; grid-template-columns:minmax(0,1fr) auto; row-gap:0; }
header .homemade-notice { grid-column:1 / -1; margin-top:0; padding-top:0; }
@media(max-width:40rem) { header { grid-template-columns:minmax(0,1fr); justify-items:center; } header > a { max-width:100%; } header .links { justify-content:center; } }