/* Sugar Hollow Donuts. A 1960s donut shop sign come to life: glaze pink, chocolate lettering
   with a cream drop shade, a sprinkle field, and a pink bakery box you fill one donut at a time. */

:root {
  --pink: #F6B3CB;
  --pink-soft: #FBD6E3;
  --pink-deep: #EE9CBA;
  --choc: #3B1D12;
  --choc-2: #5B3426;
  --choc-ink: #6B4433;
  --cream: #FFF4E6;
  --paper: #FFFCF8;
  --mint: #7FD1B9;
  --yellow: #F9D24B;
  --dawn-1: #3B1D12;
  --dawn-2: #5E2C2B;
  --dawn-3: #9C4F66;
  --dawn-4: #F6B3CB;
  --display: 'Bagel Fat One', 'Figtree', system-ui, sans-serif;
  --body: 'Figtree', system-ui, sans-serif;
  --gutter: 16px;
  --shade: 8px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--choc);
  color: var(--choc);
  font: 400 18px/1.5 var(--body);
  font-feature-settings: 'tnum' 0;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--choc); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 50; background: var(--cream); color: var(--choc); padding: 12px 18px; border-radius: 10px; font-weight: 800; }
.skip:focus { top: 12px; }

/* Buttons: flat fills, sign-panel corners. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 24px;
  border: 3px solid var(--choc); border-radius: 14px;
  font: 800 18px/1 var(--body); letter-spacing: 0.005em; text-decoration: none;
  cursor: pointer; transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-choc { background: var(--choc); color: var(--cream); }
.btn-choc:hover { background: var(--choc-2); }
.btn-pink { background: var(--pink); color: var(--choc); }
.btn-pink:hover { background: var(--pink-soft); }
.chip span { -webkit-mask: radial-gradient(circle at 0 50%, transparent 7px, #000 7.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 7px, #000 7.5px) right / 51% 100% no-repeat; mask: radial-gradient(circle at 0 50%, transparent 7px, #000 7.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 7px, #000 7.5px) right / 51% 100% no-repeat; }

/* Header: the chocolate strip across the top of the sign. */
.top { position: sticky; top: 0; z-index: 20; background: var(--choc); color: var(--cream); }
.top :focus-visible { outline-color: var(--cream); }
.top-in { display: flex; align-items: center; gap: 12px; max-width: 1400px; margin: 0 auto; padding: 8px var(--gutter); min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-height: 48px; margin-right: auto; }
.nav { display: none; }
.top-call, .top-cta { display: none; }
.burger {
  width: 48px; height: 48px; flex: none; display: grid; place-content: center; gap: 6px;
  background: transparent; border: 2px solid rgba(255, 244, 230, .35); border-radius: 12px; color: var(--cream);
}
.burger span { display: block; width: 24px; height: 3px; border-radius: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
.menu {
  position: absolute; left: 0; right: 0; top: 100%; height: calc(100dvh - 100%); overflow-y: auto;
  display: flex; flex-direction: column; background: var(--choc); border-top: 2px solid rgba(255, 244, 230, .18); padding: 8px var(--gutter) 30px;
}
.menu > * { position: relative; z-index: 1; }
.scrim { position: fixed; inset: 0; z-index: 19; background: rgba(59, 29, 18, .55); }
.menu nav { display: grid; }
.menu nav a { display: flex; align-items: center; min-height: 54px; font: 800 21px/1.1 var(--body); text-decoration: none; border-bottom: 2px solid rgba(255, 244, 230, .12); }
.menu nav a:first-child { color: var(--pink); }
.menu-cta { width: 100%; margin-top: 16px; min-height: 54px; font-size: 19px; border-color: var(--pink); }
.menu-call { display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 4px; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
.menu-photo { flex: 1 1 0; min-height: 0; max-height: 220px; margin: 22px 0 0; overflow: hidden; border-radius: 14px; border: 3px solid var(--pink); }
.menu-photo img { width: 100%; height: 100%; object-fit: cover; }
.menu-photo + .menu-foot { margin-top: 0; padding-top: 14px; }
@media (max-height: 700px) { .menu-photo { display: none; } .menu-photo + .menu-foot { margin-top: auto; } }
.menu-foot { margin-top: auto; padding-top: 24px; display: grid; gap: 2px; font-size: 17px; color: var(--pink); }

/* Hero: the sign on a glaze pink field with sprinkles. */
.hero { position: relative; background: var(--pink); isolation: isolate; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url(img/sprinkles.svg) -40px -30px / 560px 560px;
  -webkit-mask-image: radial-gradient(70% 75% at 24% 42%, rgba(0,0,0,.3) 0 45%, #000 80%);
  mask-image: radial-gradient(70% 75% at 24% 42%, rgba(0,0,0,.3) 0 45%, #000 80%);
}
.hero-in { max-width: 1400px; margin: 0 auto; padding: 22px var(--gutter) 48px; display: grid; gap: 34px; }

.sign { container-type: inline-size; min-width: 0; }
.sign-words {
  font-family: var(--display); font-size: clamp(40px, 14.3cqi, 112px); line-height: .95; letter-spacing: -0.012em;
  color: var(--choc); text-shadow: .05em .05em 0 var(--cream);
}
.sign-words .ln { display: block; }
.sign-words .ln2 { margin-left: .02em; }

.sign-row { display: grid; gap: 22px; margin-top: 18px; }
.disc { position: relative; width: min(300px, 80vw); aspect-ratio: 1; margin: 0 0 0 auto; }
.disc-photo { position: absolute; left: 17%; top: 17%; width: 66%; height: 66%; border-radius: 50%; object-fit: cover; }
.disc-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ring-outer { fill: none; stroke: var(--choc); stroke-width: 28; }
.ring-band { fill: none; stroke: var(--cream); stroke-width: 52; }
.ring-edge { fill: none; stroke: var(--choc); stroke-width: 6; }
.ring-text { font-family: var(--body); font-weight: 800; font-size: 32px; letter-spacing: .055em; fill: var(--choc); }
.bulb { fill: url(#bulbLit); stroke: var(--choc); stroke-width: 2; }

.sign-copy { display: grid; gap: 16px; align-content: start; }
@media (max-width: 599px) {
  .disc { width: min(236px, 64vw); }
  .sign-actions { display: grid; gap: 10px; }
  .sign-actions .btn, .sign-actions .sign-call { width: 100%; }
  .sign-words { line-height: 1; }
  .sign-row { margin-top: 16px; gap: 18px; }
}
@media (min-width: 600px) and (max-width: 1179px) {
  .sign-row { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 30px; }
  .disc { width: 300px; margin: 0; }
}
.lede { font-size: 19px; line-height: 1.45; max-width: 34ch; font-weight: 600; }
.status, .visit-status {
  justify-self: start; display: inline-flex; align-items: center; gap: 11px; min-height: 32px;
  color: var(--choc); font: 800 19px/1.2 var(--body);
}
.sign-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.sign-call { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 20px; border: 3px solid var(--choc); border-radius: 14px; font: 800 18px/1 var(--body); text-decoration: none; transition: background-color .15s ease; }
.sign-call:hover { background: var(--pink-soft); }
.sign-call svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* The order module: a pink bakery box on top of a cream order slip. */
.order { position: relative; }
.box {
  position: relative; z-index: 2;
  background: var(--pink); border: 3px solid var(--choc); border-radius: 18px; overflow: clip;
  box-shadow: var(--shade) var(--shade) 0 var(--choc);
  padding-bottom: 12px;
}
.lid {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 14px 16px 16px;
  background: linear-gradient(to bottom, var(--pink-soft) 0 calc(100% - 9px), #EBA4BF calc(100% - 9px) calc(100% - 4px), #D98FAC calc(100% - 4px));
}
.order-title { font-family: var(--display); font-size: 40px; line-height: 1; margin-right: auto; }
.order-count { font: 800 19px/1 var(--body); padding: 8px 12px; background: var(--cream); border: 2px solid var(--choc); border-radius: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.order-count.is-full { background: var(--choc); color: var(--cream); }
.box.is-closed .lid-clear { display: none; }
.box.is-closed .order-count { background: var(--choc); color: var(--cream); }
.lid-clear { min-height: 44px; padding: 0 4px; background: none; border: 0; font: 700 17px/1 var(--body); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.tray {
  list-style: none; margin: 12px 12px 0; padding: 12px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  background: var(--paper); border: 3px solid var(--choc); border-radius: 12px;
  background-image: linear-gradient(transparent 49.5%, rgba(59, 29, 18, .06) 49.5% 50.5%, transparent 50.5%);
}
.slot { position: relative; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, transparent 0 21%, #F2E2D2 22% 66%, transparent 67%); }
.slot-empty::after { content: ""; position: absolute; inset: 9%; border-radius: 50%; border: 2px dashed rgba(59, 29, 18, .22); }
.slot button { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 50%; background: none; }
.slot img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 3px 0 rgba(59, 29, 18, .28); transition: transform .15s ease; }
.slot button:hover img { transform: scale(.94); }
.slot button::after {
  content: ""; position: absolute; right: -2px; top: -2px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--choc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M7 7l8 8M15 7l-8 8' stroke='%23FFF4E6' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 22px no-repeat;
  opacity: 0; transform: scale(.6); transition: opacity .15s ease, transform .15s ease;
}
.slot button:hover::after, .slot button:focus-visible::after { opacity: 1; transform: none; }
.slot.is-new img { animation: drop-in .32s cubic-bezier(.16, 1, .3, 1) backwards; }
@keyframes drop-in { from { transform: translateY(-14px) scale(.7); opacity: 0; } }
.tray-note { margin: 10px 16px 0; font-size: 17px; font-weight: 600; line-height: 1.35; }

.lid-cover {
  position: absolute; left: 12px; right: 12px; top: 68px; bottom: 12px; z-index: 3;
  display: grid; place-content: center; text-align: center; gap: 4px;
  background: linear-gradient(rgba(251, 214, 227, .55), rgba(251, 214, 227, .55)), url(img/sprinkles.svg) 30px 10px / 440px 440px, var(--pink-soft);
  border: 3px solid var(--choc); border-radius: 12px;
  transform-origin: top center; transform: scaleY(0); visibility: hidden;
  transition: transform .45s cubic-bezier(.5, 0, .2, 1), visibility 0s .45s;
}
.lid-cover-name { font-family: var(--display); font-size: 44px; line-height: 1; }
.lid-cover-for { font: 800 19px/1.2 var(--body); }
.box.is-closed .lid-cover { transform: none; visibility: visible; transition: transform .45s cubic-bezier(.5, 0, .2, 1); }

.slip {
  position: relative; z-index: 1; margin: -10px 0 0; padding: 30px 16px 18px;
  background: var(--cream); border: 3px solid var(--choc); border-radius: 0 0 16px 16px;
  box-shadow: var(--shade) var(--shade) 0 var(--choc);
  display: grid; gap: 16px;
}
.slip fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.slip legend, .people-label, .field > span, .field legend, .name-field > span { font: 800 17px/1.2 var(--body); padding: 0; margin-bottom: 8px; }
.flavor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 22px; }
.flavor {
  position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 12px;
  min-height: 64px; padding: 6px 8px 6px 6px; text-align: left;
  background: transparent; border: 0; border-radius: 10px;
  transition: background-color .15s ease, transform .1s ease;
}
.flavor::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: -6px; border-bottom: 2px dashed rgba(59, 29, 18, .22); }
.flavor img { justify-self: center; }
.flavor-meta b { margin-right: 6px; }
.flavor:hover { background: var(--pink-soft); }
.flavor:active { transform: translateY(1px); }
.flavor img { position: relative; width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.flavor::before { content: ""; position: absolute; left: 8px; top: 50%; width: 48px; height: 48px; margin-top: -24px; border-radius: 2px; transform: rotate(-5deg); background: linear-gradient(135deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 50%), #EBD6BC; }
.flavor:nth-child(even)::before { transform: rotate(4deg); }
.flavor-name { display: block; font: 800 17px/1.12 var(--body); }
.flavor-meta { display: block; margin-top: 3px; font: 600 15px/1.25 var(--body); color: var(--choc-ink); }
.flavor-meta b { color: var(--choc); font-weight: 800; }
.flavor-n {
  position: absolute; left: 40px; top: calc(50% + 2px); z-index: 1; min-width: 26px; height: 26px; padding: 0 7px; box-shadow: 0 0 0 2px var(--cream);
  display: grid; place-content: center; border-radius: 14px;
  background: var(--choc); color: var(--cream); font: 800 15px/1 var(--body); font-variant-numeric: tabular-nums;
}
.flavor.is-low .flavor-meta { color: var(--choc); font-weight: 800; }
.flavor:disabled { cursor: not-allowed; background: transparent; }
.flavor:disabled img { filter: grayscale(1) contrast(.85); opacity: .7; }
.flavor:disabled .flavor-meta { color: var(--choc); font-weight: 800; }
.flavor.is-full-box:not(:disabled) { cursor: not-allowed; }

.chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.chip { position: relative; display: block; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 14px;
  background: radial-gradient(circle at 0 50%, var(--choc) 0 9px, transparent 9.5px), radial-gradient(circle at 100% 50%, var(--choc) 0 9px, transparent 9.5px), #fff;
  background-origin: border-box; border: 2px solid var(--choc); border-radius: 8px;
  font: 800 17px/1 var(--body); font-variant-numeric: tabular-nums; transition: background-color .15s ease;
}
.chip input:hover + span { background: radial-gradient(circle at 0 50%, var(--choc) 0 9px, transparent 9.5px), radial-gradient(circle at 100% 50%, var(--choc) 0 9px, transparent 9.5px), var(--pink-soft); background-origin: border-box; }
.chip input:checked + span { background: var(--choc); color: var(--cream); }
.chip input:focus-visible + span { outline: 3px solid var(--choc); outline-offset: 3px; }
.chip-full input { cursor: not-allowed; }
.chip-full span { background: radial-gradient(circle at 0 50%, var(--choc) 0 9px, transparent 9.5px), radial-gradient(circle at 100% 50%, var(--choc) 0 9px, transparent 9.5px), #F4ECE3; background-origin: border-box; color: var(--choc-ink); text-decoration: line-through; text-decoration-thickness: 2px; }
.chip-full em {
  position: absolute; right: -6px; top: -11px; text-decoration: none;
  font-style: normal; font-weight: 800; padding: 4px 8px; border-radius: 8px; background: var(--choc); color: var(--cream); font-size: 15px; line-height: 1;
}
.chip-full input:hover + span { background: radial-gradient(circle at 0 50%, var(--choc) 0 9px, transparent 9.5px), radial-gradient(circle at 100% 50%, var(--choc) 0 9px, transparent 9.5px), #F4ECE3; background-origin: border-box; }

.slip-foot { display: grid; gap: 12px; align-items: end; }
.name-field { display: grid; }
.name-field input, .field input, .field select {
  width: 100%; min-height: 52px; padding: 0 14px;
  background: #fff; border: 2px solid var(--choc); border-radius: 12px; font-size: 18px; font-weight: 600;
}
.name-field input::placeholder { color: #8A6A5C; }
.name-field input:focus-visible, .field input:focus-visible, .field select:focus-visible { outline: 3px solid var(--choc); outline-offset: 2px; }
.name-field input[aria-invalid="true"] { border-color: #A3283D; background: #FFF0F2; }
.total { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
.total-label { font: 800 17px/1 var(--body); }
.total-num { font-family: var(--display); font-size: 42px; line-height: 1; font-variant-numeric: tabular-nums; }
.total-note { flex-basis: 100%; font-size: 15px; font-weight: 700; color: var(--choc-ink); max-width: 22ch; line-height: 1.3; }
.reserve { width: 100%; min-height: 56px; font-size: 19px; white-space: nowrap; }
.slip-msg { font-weight: 700; font-size: 17px; min-height: 0; }
.slip-msg:empty { display: none; }

.ticket {
  position: relative; z-index: 1; margin-top: -10px; padding: 34px 22px 24px;
  background: var(--cream); border: 3px solid var(--choc); border-radius: 0 0 16px 16px;
  box-shadow: var(--shade) var(--shade) 0 var(--choc);
  display: grid; gap: 8px; outline: none;
}
.ticket-head { font-family: var(--display); font-size: 52px; line-height: 1; }
.ticket-name { font: 800 24px/1.2 var(--body); }
.ticket-line { font-size: 18px; font-weight: 600; }
.ticket .btn { justify-self: start; margin-top: 10px; }

/* Today's Case: two shelves behind glass. */
.case { position: relative; background: var(--choc); color: var(--cream); overflow: clip; }
.case::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 22%, rgba(255, 244, 230, .045) 22% 30%, transparent 30% 58%, rgba(255, 244, 230, .035) 58% 61%, transparent 61%),
    radial-gradient(70% 60% at 50% 0%, rgba(246, 179, 203, .12), transparent 70%);
}
.case :focus-visible { outline-color: var(--cream); }
.case-in { position: relative; max-width: 1240px; margin: 0 auto; padding: 72px var(--gutter) 84px; }
.case-head { display: grid; gap: 12px; margin-bottom: 40px; }
.case-title { font-family: var(--display); font-size: clamp(48px, 9vw, 92px); line-height: .95; color: var(--pink); }
.case-sub { font-size: 19px; max-width: 46ch; }
.shelf { list-style: none; margin: 0; padding: 0; display: grid; gap: 48px; position: relative; }
.tel { white-space: nowrap; }
.item { position: relative; display: grid; justify-items: start; }
.item { --size: min(240px, 66vw); --turn: -4deg; }
.item:nth-child(2) { --turn: 3deg; }
.item:nth-child(3) { --turn: -1.5deg; }
.item::before {
  content: ""; position: absolute; left: calc(var(--size) * -.07); top: calc(var(--size) * -.07);
  width: calc(var(--size) * 1.14); aspect-ratio: 1; border-radius: 3px; transform: rotate(var(--turn));
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 45%),
    linear-gradient(28deg, rgba(120, 80, 50, .07) 0 49.6%, rgba(120, 80, 50, 0) 50%),
    #F4E7D6;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .3);
}
.item img { position: relative; width: var(--size); aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.item .tag {
  position: relative; margin: -30px 0 0 calc(var(--size) * .5); padding: 8px 16px 10px 30px; z-index: 1;
  font-family: var(--display); font-size: 40px; line-height: 1; color: var(--choc);
  background: var(--pink); border: 3px solid var(--choc); border-radius: 12px; transform: rotate(-4deg);
  font-variant-numeric: tabular-nums;
}
.item .tag::before { content: ""; position: absolute; left: 11px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--choc); }
.item:nth-child(2) .tag { transform: rotate(3deg); }
.item:nth-child(3) .tag { transform: rotate(-2deg); }
.item .tag .cur { font: 800 22px/1 var(--body); vertical-align: 13px; margin-right: 2px; }
.item h3 { margin-top: 18px; font: 800 24px/1.15 var(--body); }
.item p:not(.tag) { margin-top: 6px; font-size: 18px; line-height: 1.45; max-width: 30ch; color: #F7E6D8; }

/* How Order Ahead Works: night to morning in four steps. */
.how { background: var(--dawn-1); color: var(--cream); }
.how-head { max-width: 1240px; margin: 0 auto; padding: 72px var(--gutter) 36px; display: grid; gap: 12px; }
.how-title { font-family: var(--display); font-size: clamp(44px, 8vw, 84px); line-height: .95; color: var(--cream); }
.how-sub { font-size: 19px; max-width: 44ch; }
.night { list-style: none; margin: 0; padding: 0; display: grid; }
.step { position: relative; padding: 34px var(--gutter) 40px; display: flex; flex-direction: column; gap: 8px; }
.step .step-photo { order: 9; margin: 18px 0 0; }
.step-1 { background: var(--dawn-1); }
.step-2 { background: var(--dawn-2); }
.step-3 { background: var(--dawn-3); }
.step-4 { background: var(--dawn-4); color: var(--choc); }
.step :focus-visible { outline-color: currentColor; }
.step-time { font-family: var(--display); font-size: 56px; line-height: 1; }
.step-1 .step-time { color: var(--pink); }
.step h3 { font: 800 24px/1.2 var(--body); }
.step p:not(.step-time) { font-size: 18px; max-width: 34ch; }
.step-photo { margin: 0 0 14px; }
.step-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px; border: 3px solid var(--choc); }
.step-2 .step-photo img { filter: saturate(.85) contrast(1.05); }

/* Office Orders */
.office { background: var(--cream); position: relative; }
.office::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: url(img/sprinkles.svg) 140px 60px / 560px 560px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0 45%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0 45%, #000 100%);
}
.office-in { position: relative; max-width: 1240px; margin: 0 auto; padding: 72px var(--gutter) 84px; display: grid; gap: 34px; }
.office-photo { margin: 0; }
.office-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 40%; border-radius: 22px; border: 3px solid var(--choc); box-shadow: var(--shade) var(--shade) 0 var(--choc); }
.office-copy { display: grid; gap: 18px; align-content: start; }
.office-title { font-family: var(--display); font-size: clamp(48px, 8vw, 84px); line-height: .95; }
.office-copy > p { font-size: 19px; max-width: 48ch; }
.cater { display: grid; gap: 20px; padding: 22px 18px; background: #fff; border: 3px solid var(--choc); border-radius: 18px; }
.people { display: grid; gap: 4px; }
.stepper { display: flex; align-items: center; gap: 18px; }
.step-btn { width: 52px; height: 52px; display: grid; place-content: center; border-radius: 50%; border: 3px solid var(--choc); background: var(--pink); }
.step-btn:hover { background: var(--pink-soft); }
.step-btn svg { width: 22px; height: 22px; fill: none; stroke: var(--choc); stroke-width: 3; stroke-linecap: round; }
.people-num { font-family: var(--display); font-size: 56px; line-height: 1; min-width: 2.2ch; text-align: center; font-variant-numeric: tabular-nums; }
.people-say { font-size: 18px; font-weight: 600; }
.cater-fields { display: grid; gap: 14px; }
.field { display: grid; border: 0; margin: 0; padding: 0; min-width: 0; }
.field select { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%233B1D12' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") right 14px center / 20px no-repeat; padding-right: 44px; cursor: pointer; }
.drop { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.drop legend { grid-column: 1 / -1; }
.mini-chip { position: relative; }
.mini-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mini-chip span { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 10px; border: 2px solid var(--choc); border-radius: 12px; font: 800 17px/1.1 var(--body); text-align: center; background: #fff; }
.mini-chip input:checked + span { background: var(--choc); color: var(--cream); }
.mini-chip input:focus-visible + span { outline: 3px solid var(--choc); outline-offset: 3px; }
.cater .btn { justify-self: start; }
.cater-msg { font-weight: 700; font-size: 18px; }
.cater-msg:empty { display: none; }
.cater-msg.is-done { padding: 14px 16px; background: var(--pink-soft); border: 2px solid var(--choc); border-radius: 12px; }

/* Hours and Location */
.visit { position: relative; background: var(--pink); overflow: clip; isolation: isolate; }
.visit::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url(img/sprinkles.svg) 60px 40px / 560px 560px; }
.visit-in { max-width: 1240px; margin: 0 auto; padding: 72px var(--gutter) 84px; display: grid; gap: 34px; }
.visit-copy { display: grid; gap: 18px; align-content: start; padding: 26px 20px; background: var(--cream); border: 3px solid var(--choc); border-radius: 22px; box-shadow: var(--shade) var(--shade) 0 var(--choc); }
.visit-title { font-family: var(--display); font-size: clamp(44px, 7.4vw, 76px); line-height: .95; }
.hours { width: 100%; border-collapse: collapse; font-size: 18px; }
.hours th, .hours td { text-align: left; padding: 12px 8px; border-bottom: 2px dashed rgba(59, 29, 18, .25); font-variant-numeric: tabular-nums; }
.hours td { white-space: nowrap; }
.hours th { font-weight: 800; }
.hours td { text-align: right; font-weight: 600; }
.hours tr.is-today th, .hours tr.is-today td { background: var(--pink-soft); }
.hours tr.is-today th::after { content: "Today"; margin-left: 10px; padding: 3px 8px; border-radius: 6px; background: var(--choc); color: var(--cream); font-size: 15px; font-weight: 800; vertical-align: 2px; }
.visit-note, .visit-park { font-size: 18px; }
.addr { font-style: normal; display: grid; gap: 2px; font-size: 20px; font-weight: 700; }
.addr-street { font-weight: 800; }
.addr a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; text-underline-offset: 4px; text-decoration-thickness: 2px; justify-self: start; }
.visit-photo { margin: 0; }
.visit-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 200px 200px 22px 22px; border: 3px solid var(--choc); box-shadow: var(--shade) var(--shade) 0 var(--choc); }

/* Footer */
.foot { background: var(--choc); color: var(--cream); }
.foot :focus-visible { outline-color: var(--cream); }
.foot-in { max-width: 1240px; margin: 0 auto; padding: 44px var(--gutter) 56px; display: grid; gap: 8px; font-size: 17px; }
.foot-brand { font-family: var(--display); font-size: 40px; line-height: 1.05; color: var(--pink); margin-bottom: 6px; }
.foot a { font-weight: 800; text-underline-offset: 3px; }
.foot-demo { margin-top: 14px; padding-top: 16px; border-top: 2px solid rgba(255, 244, 230, .18); color: #F3DCCB; }

/* Load moment: the sign switches on. The disc turns once, the bulbs chase around and stay lit,
   the drop shade steps out behind the letters, and the morning mix drops into the box. */
@media (prefers-reduced-motion: no-preference) {
  .disc { animation: disc-turn 1.25s cubic-bezier(.2, .75, .25, 1) .15s backwards; }
  .bulb { animation: bulb-on .5s steps(1, end) backwards; animation-delay: calc(.55s + var(--i) * 32ms); }
  .sign-words .ln { animation: shade-out .5s cubic-bezier(.16, 1, .3, 1) backwards; }
  .sign-words .ln2 { animation-delay: .1s; }
  .sign-words .ln3 { animation-delay: .2s; }
  .tray.is-loading .slot img { animation: drop-in .36s cubic-bezier(.16, 1, .3, 1) backwards; animation-delay: calc(1s + var(--d, 0) * 70ms); }
}
@keyframes disc-turn { from { transform: rotate(-150deg) scale(.82); } to { transform: none; } }
@keyframes bulb-on { 0%, 99% { fill: var(--pink-deep); } 100% { fill: url(#bulbLit); } }
@keyframes shade-out { from { text-shadow: 0 0 0 var(--cream); } to { text-shadow: .05em .05em 0 var(--cream); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Phones: Today's Case reads like a menu list. */
@media (max-width: 599px) {
  .shelf { gap: 36px; }
  .item { --size: 112px; grid-template-columns: var(--size) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 24px; align-items: start; }
  .item img { grid-row: 1 / span 3; }
  .item .tag { grid-column: 2; margin: 0; font-size: 30px; padding: 6px 12px 8px 24px; }
  .item .tag .cur { font-size: 18px; vertical-align: 9px; }
  .item .tag::before { left: 9px; width: 8px; height: 8px; margin-top: -4px; }
  .item h3 { grid-column: 2; margin-top: 10px; font-size: 21px; }
  .item p:not(.tag) { grid-column: 2; font-size: 17px; }
}

/* 600 and up */
@media (min-width: 600px) {
  :root { --gutter: 28px; }
  .tray { grid-template-columns: repeat(6, 1fr); }
  .tray { background-image: none; }
  .chips { grid-template-columns: repeat(4, 1fr); }
  .shelf { grid-template-columns: repeat(3, 1fr); gap: 64px 28px; }
  .item { --size: min(240px, 84%); }
  .slip-foot { grid-template-columns: 1fr auto; }
  .slip-foot .reserve { grid-column: 1 / -1; }
  .cater-fields { grid-template-columns: 1fr 1fr; }
  .night { grid-template-columns: 1fr 1fr; }
}

/* 900 and up */
@media (min-width: 900px) {
  :root { --gutter: 36px; }
  .nav { display: flex; gap: 4px; margin: 0 8px; }
  .nav a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px; border-radius: 10px; font: 700 17px/1 var(--body); text-decoration: none; }
  .nav a:hover { background: rgba(255, 244, 230, .1); }
  .nav a[aria-current="true"] { color: var(--pink); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 3px; }
  .top-cta { display: inline-flex; min-height: 48px; }
  .burger { display: none; }
  .menu, .scrim { display: none !important; }
  .top-in { min-height: 76px; }
  .night { grid-template-columns: 1fr 1.35fr 1fr 1.35fr; }
  .step { padding: 40px 30px 44px; }
  .step .step-photo { margin-top: auto; padding-top: 22px; }
  .office-in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; gap: 56px; }
  .visit-in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 56px; }
  .visit-copy { padding: 34px 34px; }
  .office-photo { position: sticky; top: 110px; }
}

@media (min-width: 1100px) {
  .top-call { display: inline-flex; align-items: center; min-height: 48px; padding: 0 6px; font: 800 18px/1 var(--body); text-decoration: none; font-variant-numeric: tabular-nums; }
}

/* The menu board: sign on the left, the box on the right. */
@media (min-width: 1180px) {
  .hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, 600px); gap: 40px; padding-top: 28px; padding-bottom: 40px; align-items: start; }
  .sign-row { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 30px; margin-top: 26px; }
  .disc { width: clamp(280px, 25vw, 360px); margin: 0; }
  .lid { padding: 10px 16px 14px; }
  .order-title { font-size: 40px; }
  .tray { margin: 10px 12px 0; padding: 8px 10px; gap: 10px; }
  .tray-note { margin-top: 7px; }
  .slip { padding: 24px 16px 16px; gap: 12px; }
  .flavor { min-height: 58px; }
  .flavor-grid { gap: 8px 22px; }
  .slip legend { margin-bottom: 6px; }
  .slip-foot { grid-template-columns: minmax(150px, 1fr) minmax(0, auto) auto; gap: 14px; }
  .slip-foot .reserve { grid-column: auto; width: auto; padding: 0 22px; }
  .total { flex-direction: column; align-items: flex-start; gap: 0; }
  .total-label { display: none; }
  .total-note { flex-basis: auto; }
}

/* Example views for runwaypages.com. The script in the head sets data-priority, data-change and the embed class
   on the html element from ?priority=craft|welcome|occasions|pickup, ?change=holiday and ?embed=1. Every rule below
   is scoped to those, or styles elements that only show for them, so with no parameters the page is as reviewed. */
html:not([data-priority="craft"]) .vx-craft,
html:not([data-priority="welcome"]) .vx-welcome,
html:not([data-priority="occasions"]) .vx-occasions,
html:not([data-priority="pickup"]) .vx-pickup,
html:not([data-priority]) .vx-any,
html:not([data-change="holiday"]) .cx-holiday,
html[data-priority] .vd { display: none !important; }

/* Embedded examples show the finished state at once. */
.embed .disc, .embed .bulb, .embed .sign-words .ln, .embed .tray.is-loading .slot img { animation: none !important; }

/* The lead photograph, framed like a marquee sign with the same lit bulbs as the disc. */
.lead {
  position: relative; margin: 0; padding: 20px; border-radius: 18px;
  background: radial-gradient(circle, #FFFFFF 0 1.4px, #FFF4E6 2.2px 3.4px, #F3D9B6 3.9px 4.6px, transparent 5.2px) 0 0 / 20px 20px space, var(--choc);
}
.lead img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.lead-craft img { object-position: 46% 50%; filter: sepia(.14) saturate(.92); }
.lead-welcome img { object-position: 50% 100%; }
.lead-occasions img { object-position: 50% 42%; }
.lead-pickup img { object-position: 72% 50%; }
.lead-tag {
  position: absolute; left: 34px; bottom: 34px; max-width: calc(100% - 68px);
  padding: 6px 12px 7px; border: 2px solid var(--choc); border-radius: 8px; transform: rotate(-2deg);
  background: var(--pink); color: var(--choc); font: 800 17px/1.2 var(--body);
}

/* The question a customer asks, answered in the shop's words. */
.qa { padding: 16px 18px 18px; background: var(--cream); border: 3px solid var(--choc); border-radius: 14px; box-shadow: 6px 6px 0 var(--choc); }
.qa-q { font: 800 22px/1.25 var(--body); }
.qa-a { margin-top: 8px; font-size: 18px; line-height: 1.45; font-weight: 600; }

/* Craft: this morning's case as a menu board. */
.board { padding: 22px 22px 16px; border-radius: 18px; background: var(--choc); color: var(--cream); box-shadow: inset 0 0 0 7px var(--choc), inset 0 0 0 9px rgba(246, 179, 203, .5); }
.board :focus-visible { outline-color: var(--cream); }
.board-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 4px 6px 14px; }
.board-title { font-family: var(--display); font-size: 44px; line-height: 1; color: var(--pink); }
.board-date { font: 700 17px/1.3 var(--body); color: #F7E6D8; }
.board-list { list-style: none; margin: 0; padding: 0 6px; }
.board-list li { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 0; background: linear-gradient(90deg, rgba(255, 244, 230, .2) 50%, transparent 0) 0 0 / 10px 2px repeat-x; }
.board-list img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; }
.b-text { display: grid; gap: 2px; min-width: 0; }
.b-name { font: 800 20px/1.15 var(--body); }
.b-out { font: 600 17px/1.2 var(--body); color: #F7E6D8; font-variant-numeric: tabular-nums; }
.b-left { padding: 6px 12px; border-radius: 999px; background: var(--cream); color: var(--choc); font: 800 15px/1.1 var(--body); white-space: nowrap; }
.b-last { background: var(--pink); }
.b-gone img { filter: grayscale(1) contrast(.9); opacity: .6; }
.b-gone .b-left { background: transparent; color: #F7E6D8; text-decoration: line-through; box-shadow: inset 0 0 0 2px rgba(255, 244, 230, .4); }
.board-foot { margin-top: 10px; padding: 0 6px; font-size: 17px; color: #F7E6D8; }
.board-foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--pink); font-weight: 800; text-underline-offset: 4px; text-decoration-thickness: 2px; }

/* Welcome: the shop itself. */
.stay, .party { background: var(--cream); border: 3px solid var(--choc); border-radius: 18px; box-shadow: var(--shade) var(--shade) 0 var(--choc); overflow: clip; }
.stay-head, .party-lid {
  padding: 16px 22px 20px;
  background: linear-gradient(to bottom, var(--pink-soft) 0 calc(100% - 9px), #EBA4BF calc(100% - 9px) calc(100% - 4px), #D98FAC calc(100% - 4px));
}
.stay-title, .party-title { font-family: var(--display); font-size: 44px; line-height: 1; }
.stay-lede, .party-lede { margin-top: 6px; font: 600 18px/1.4 var(--body); }
.stay-body { padding: 16px 22px 20px; display: grid; gap: 16px; }
.stay-block h3 { margin-bottom: 6px; font: 800 19px/1.2 var(--body); }
.stay-block p, .stay-foot { font-size: 17px; line-height: 1.45; }
.price-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.price-list li, .made-list li { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; font-size: 17px; }
.price-list li::before, .made-list li::before { content: ""; order: 1; flex: 1 1 auto; min-width: 16px; border-bottom: 3px dotted rgba(59, 29, 18, .32); transform: translateY(-5px); }
.price-list li span:last-child, .made-list li span:last-child { order: 2; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-list .stay-holiday { padding: 3px 8px; border-radius: 6px; background: var(--choc); color: var(--cream); font-weight: 800; }
.price-list .stay-holiday::before { border-color: rgba(255, 244, 230, .4); }

/* Occasions: party boxes ordered by date. */
.party-form { padding: 16px 20px 18px; display: grid; gap: 14px; }
.party-set { border: 0; margin: 0; padding: 0; min-width: 0; }
.party-set legend { padding: 0; margin-bottom: 8px; font: 800 17px/1.2 var(--body); }
.date-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.size-grid { display: grid; gap: 8px; }
.date-chip, .size { position: relative; display: block; }
.date-chip input, .size input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.date-chip > span, .size > span { display: grid; gap: 2px; min-height: 56px; padding: 8px 12px; background: #fff; border: 2px solid var(--choc); border-radius: 10px; transition: background-color .15s ease; }
.date-day { font: 800 17px/1.15 var(--body); }
.date-left { font: 700 15px/1.2 var(--body); color: var(--choc-ink); }
.size > span { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 10px; }
.size-name { font: 800 17px/1.15 var(--body); }
.size-price { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-family: var(--display); font-size: 30px; line-height: 1; }
.size-serves { font: 600 15px/1.2 var(--body); color: var(--choc-ink); }
.date-chip input:hover + span, .size input:hover + span { background: var(--pink-soft); }
.date-chip input:checked + span, .size input:checked + span { background: var(--choc); color: var(--cream); }
.date-chip input:checked + span .date-left, .size input:checked + span .size-serves { color: var(--pink-soft); }
.date-chip input:focus-visible + span, .size input:focus-visible + span { outline: 3px solid var(--choc); outline-offset: 3px; }
.date-chip input:disabled { cursor: not-allowed; }
.date-chip input:disabled + span { background: #F4ECE3; color: var(--choc-ink); }
.date-chip input:disabled + span .date-day { text-decoration: line-through; text-decoration-thickness: 2px; }
.party-pair { display: grid; gap: 12px; }
.party-form .field input { min-height: 50px; }
.party-form .field input::placeholder { color: #8A6A5C; }
.party-form .field input[aria-invalid="true"] { border-color: #A3283D; background: #FFF0F2; }
.party-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.party-total { display: grid; }
.party-total .js-party-total { font-family: var(--display); font-size: 42px; line-height: 1; font-variant-numeric: tabular-nums; }
.party-note { font: 700 15px/1.25 var(--body); color: var(--choc-ink); }
.party-msg { font-size: 17px; font-weight: 700; }
.party-msg:empty { display: none; }
.party-done { padding: 22px; display: grid; gap: 8px; outline: none; }
.party-done-head { font-family: var(--display); font-size: 52px; line-height: 1; }
.party-done-line { font-size: 18px; font-weight: 600; }
.party-done-line:empty { display: none; }
.party-done .btn { justify-self: start; margin-top: 8px; }

/* Every view: how it is made and what is on the menu, within the first two screens. */
.made { container-type: inline-size; min-width: 0; }
.made-in { display: grid; gap: 28px; align-items: start; }
.made-title { font-family: var(--display); font-size: clamp(44px, 8cqi, 64px); line-height: .95; }
.made-photo { margin: 16px 0 0; }
.made-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 60%; border-radius: 18px; border: 3px solid var(--choc); box-shadow: var(--shade) var(--shade) 0 var(--choc); }
.made-story p { margin-top: 14px; font-size: 19px; line-height: 1.5; font-weight: 600; max-width: 48ch; }
.made-menu { padding: 22px 22px 20px; background: var(--cream); border: 3px solid var(--choc); border-radius: 18px; box-shadow: var(--shade) var(--shade) 0 var(--choc); }
.made-menu-title { font-family: var(--display); font-size: 40px; line-height: 1; }
.made-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; }
.made-list li { font-size: 18px; font-weight: 700; }
.made-list .made-big { font-weight: 800; }
.made-list li:not(.made-big) + .made-big { margin-top: 8px; }
.made-office { margin-top: 14px; font-size: 17px; line-height: 1.45; }
.made-office a { font-weight: 800; text-underline-offset: 3px; text-decoration-thickness: 2px; white-space: nowrap; }
@container (min-width: 680px) { .made-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; } .made-menu { padding: 20px 20px 18px; } }

/* The labeled example change: closed for Thanksgiving. */
.notice { background: var(--cream); color: var(--choc); }
.notice-in { max-width: 1400px; margin: 0 auto; padding: 12px var(--gutter); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.notice-icon { width: 30px; height: 30px; flex: none; fill: none; stroke: var(--choc); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.notice-text { flex: 1 1 280px; font-size: 18px; line-height: 1.4; }
.notice-text strong { font-weight: 800; }
.notice-tag { padding: 5px 10px; border-radius: 8px; background: var(--choc); color: var(--cream); font: 800 15px/1.2 var(--body); white-space: nowrap; }
.hours tr.holiday-row th, .hours tr.holiday-row td { background: var(--choc); color: var(--cream); white-space: normal; }

/* Pickup: tomorrow's times come first in the order box. */
html[data-priority="pickup"] .slip .times { order: -1; }

@media (max-width: 1179px) {
  html[data-priority] .sign { order: 1; }
  html[data-priority] .made { order: 2; }
  html[data-priority] .feature { order: 3; }
  html[data-priority] .order { order: 4; }
}
@media (min-width: 600px) {
  .date-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .party-pair { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 600px) and (max-width: 1179px) {
  html[data-priority] .sign-row { grid-template-columns: 300px minmax(0, 1fr); align-items: start; }
  .lead img { aspect-ratio: 1; }
}
@media (min-width: 1180px) {
  html[data-priority] .hero-in { grid-template-areas: "sign feature" "made order"; row-gap: 120px; }
  html[data-priority="pickup"] .hero-in { grid-template-areas: "sign order" "made made"; }
  html[data-priority] .sign { grid-area: sign; }
  html[data-priority] .order { grid-area: order; }
  html[data-priority] .feature { grid-area: feature; }
  html[data-priority] .made { grid-area: made; }
  html[data-priority] .sign-row { grid-template-columns: 380px minmax(0, 1fr); align-items: start; gap: 26px; }
  .lead img { aspect-ratio: 1; }
  .size-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .size > span { grid-template-columns: 1fr; }
  .size-price { grid-row: auto; grid-column: auto; font-size: 28px; }
}

/* Logo: lockups and favicon. Inline SVG sized in em, 100 viewBox units to 1em of the wordmark. */
/* Header: the donut beside the name. The brand's font-size is the Bagel Fat One size; Donuts is 0.6em of it. */
.brand { font-size: 31px; }
.brand svg { display: block; flex: none; width: auto; }
.brand .lk-primary { height: 1.456em; }
/* Footer: the stacked lockup, the donut over the name, at display size. */
.foot-brand { font-size: 44px; line-height: 1; margin-bottom: 14px; }
.foot-brand .lk-stack { display: block; height: 2.7em; width: auto; max-width: 100%; }
@media (max-width: 359px) {
  .brand { font-size: 30px; }
}
/* End Logo */