/* --- FONT FACE --- */
@font-face {
  font-family: "TeX Gyre Schola";
  src: url("/assets/fonts/schola-mikes-bi.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* --- READING TEXT SIZE --- */
@font-face { font-family: 'EB Garamond Big'; font-style: normal; font-weight: 400 600; font-display: swap; size-adjust: 112%; src: url(https://fonts.gstatic.com/s/ebgaramond/v33/SlGUmQSNjdsmc35JDF1K5GR1SDk_YAPI.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'EB Garamond Big'; font-style: normal; font-weight: 400 600; font-display: swap; size-adjust: 112%; src: url(https://fonts.gstatic.com/s/ebgaramond/v33/SlGUmQSNjdsmc35JDF1K5GR7SDk_YAPIlWk.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'EB Garamond Big'; font-style: italic; font-weight: 400 600; font-display: swap; size-adjust: 112%; src: url(https://fonts.gstatic.com/s/ebgaramond/v33/SlGWmQSNjdsmc35JDF1K5GRweDs1ZyHKpWg.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'EB Garamond Big'; font-style: italic; font-weight: 400 600; font-display: swap; size-adjust: 112%; src: url(https://fonts.gstatic.com/s/ebgaramond/v33/SlGWmQSNjdsmc35JDF1K5GRweDU1ZyHKpWiGIg.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* --- TOKENS --- */
:root {
  --white:   #FFFFFF;
  --black:   #121110;
  --soft:    #4A4643;
  --hair:    #D8D4CE;
  --red:     #A81F17;
  --red-dim: #7E1710;

  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-fall:   cubic-bezier(0.5, 0, 0.75, 0.3);
  --ease-plunk:  cubic-bezier(0.4, 0, 0.7, 0.4);
  --ease-slide:  cubic-bezier(0.4, 0, 0.6, 1);
  --ease-arrive: cubic-bezier(0.3, 0.8, 0.4, 1);
  --ease-spring: cubic-bezier(0.3, 0.9, 0.4, 1.2);
  --ease-fly:    cubic-bezier(0.2, 0.8, 0.3, 1);
  --ease-give:   ease-out;
  --ease-fill:   cubic-bezier(0.25, 0.6, 0.35, 1);
  --ease-tip:    cubic-bezier(0.45, 0, 0.8, 0.5);
  --ease-splat:  cubic-bezier(0.2, 0.9, 0.3, 1.25);
  --ease-roll:   cubic-bezier(0.15, 0.6, 0.3, 1);
  --press:       transform 160ms var(--ease-out);

  --swash:  "Playfair Display", Georgia, serif;
  --slab:   "Alfa Slab One", Georgia, serif;
  --west:   "Rye", Georgia, serif;
  --neon:   "TeX Gyre Schola", Georgia, serif;
  --body:   "EB Garamond Big", "EB Garamond", Georgia, serif;

  --page:   1220px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.75rem;
  --s4: 3rem;
  --s5: 4.5rem;
  --s6: 6.5rem;
}

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

body, h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; }

button, input {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}
button { cursor: pointer; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

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

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: var(--s2); top: var(--s2); z-index: 60;
  background: var(--black); color: var(--white);
  padding: 0.6rem 1rem;
}

/* --- TYPE --- */
body {
  font-family: var(--body);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--black);
  background: var(--white);
  text-align: center;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.head {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.05;
  margin-bottom: var(--s2);
}
.head--slab   { font-family: var(--slab); font-weight: 400; letter-spacing: -0.01em; }
.head--western{ font-family: var(--west); font-weight: 400; }
.head--script {
  font-family: var(--swash);
  font-style: italic;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.lede {
  max-width: 56ch;
  margin: 0 auto;
  color: var(--soft);
}

.foot {
  max-width: 56ch;
  margin: var(--s3) auto 0;
  font-size: 1rem;
  font-style: italic;
  color: var(--soft);
}

/* --- RULES --- */
.doublerule {
  max-width: var(--page);
  margin: 0 auto;
  height: 9px;
  border-top: 5px solid var(--black);
  border-bottom: 2px solid var(--black);
}

/* --- ANNOUNCEMENT --- */
.announce {
  position: relative;
  background: #F3F2EF;
  padding: 0.7rem 3rem;
  font-size: 1rem;
  font-style: italic;
}
.announce a { color: var(--red); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.announce[hidden] { display: none; }

.announce__close {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--soft);
}

.notice {
  background: var(--red);
  color: var(--white);
  padding: 0.7rem var(--gutter);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
}
.notice + .notice { border-top: 1px solid rgba(255, 255, 255, 0.35); }

/* --- MASTHEAD --- */
.masthead { padding-top: var(--s3); }

.masthead__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--gutter) 0.5rem;
}

.masthead__since {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8em;
  white-space: nowrap;
  margin: 0 auto;
  padding: 0 var(--gutter) var(--s3);
  font-family: var(--body);
  font-size: clamp(0.75rem, 1.2vw, 1rem);
  line-height: 1.2;
  letter-spacing: clamp(0.12em, 0.5vw, 0.2em);
  text-transform: uppercase;
  color: var(--black);
}
.masthead__since::before,
.masthead__since::after {
  content: "";
  width: clamp(1.25rem, 5vw, 4rem);
  border-top: 1px solid var(--black);
}

.iconbtn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.iconbtn--ghost { visibility: hidden; }
.menuicon { width: 28px; height: 28px; overflow: visible; }
.menuicon__line {
  fill: none;
  stroke: var(--black);
  stroke-width: 3.4;
  stroke-linecap: square;
  transform-box: view-box;
  transition: transform 260ms var(--ease-in-out), opacity 160ms var(--ease-out), stroke 260ms var(--ease-in-out);
}
.menuicon__top { transform-origin: 24px 12px; }
.menuicon__mid { transform-origin: 24px 24px; }
.menuicon__bot { transform-origin: 24px 36px; }
.iconbtn[aria-expanded="true"] .menuicon__line { stroke: var(--red); }
.iconbtn[aria-expanded="true"] .menuicon__top { transform: translateY(12px) rotate(45deg); }
.iconbtn[aria-expanded="true"] .menuicon__mid { opacity: 0; transform: scaleX(0.2); }
.iconbtn[aria-expanded="true"] .menuicon__bot { transform: translateY(-12px) rotate(-45deg); }

.wordmark {
  --mark: clamp(3rem, 10vw, 8.25rem);
  text-decoration: none;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(0.6rem, 2vw, 1.4rem);
  min-width: 0;
}
.wordmark__glass {
  width: auto;
  height: calc(var(--mark) * 1.3);
  position: relative;
  top: calc(var(--mark) * 0.25);
  flex: 0 0 auto;
}
@media (max-width: 349px) { .wordmark { --mark: 2.6rem; } }
.wordmark__name {
  font-family: var(--neon);
  font-weight: 700;
  font-style: italic;
  font-size: calc(var(--mark) / 0.92);
  line-height: 1;
  color: var(--red);
}

.nav {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows 200ms var(--ease-out), opacity 150ms var(--ease-out), visibility 0s linear 200ms;
}
.nav.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition: grid-template-rows 250ms var(--ease-out), opacity 200ms var(--ease-out), visibility 0s;
}
.nav ul { min-height: 0; overflow: hidden; }
.nav li:last-child { margin-bottom: var(--s3); }
.nav li { border-top: 1px solid var(--hair); max-width: 22rem; margin: 0 auto; }
.nav a {
  display: block;
  padding: 0.7rem 0;
  text-decoration: none;
  font-size: 1.0625rem;
  letter-spacing: 0.08em;
}
.nav a:hover,
.nav a[aria-current="page"] { color: var(--red); }

.band {
  border-top: 5px solid var(--black);
  border-bottom: 5px solid var(--black);
  display: flex;
  justify-content: space-between;
  gap: var(--s2);
  max-width: var(--page);
  margin: 0 auto;
  padding: 0.55rem var(--gutter);
  color: var(--red);
  font-size: clamp(0.95rem, 1.6vw, 1.25rem);
  letter-spacing: 0.01em;
}
.band a {
  text-decoration: none;
  transition: color 0.15s ease;
}
.band a:hover { color: var(--black); }
.band p { margin: 0; }
.band { align-items: center; }
.band__hours { text-align: right; }
.band__br { display: none; }

.centerpiece:not(.centerpiece--page) { padding-top: 0.75rem; }

/* --- CENTERPIECE --- */
.centerpiece {
  max-width: var(--page);
  margin: 0 auto;
  padding: var(--s4) var(--gutter) var(--s3);
}
.centerpiece__rule {
  height: 2px;
  background: var(--black);
  max-width: 12rem;
  margin: 0.75rem auto;
}
.centerpiece__over {
  font-family: var(--west);
  font-size: clamp(1rem, 2.2vw, 1.4rem);
  color: var(--red);
}
.centerpiece__big {
  font-family: var(--neon);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(2.6rem, 9vw, 5.5rem);
  line-height: 1.05;
  letter-spacing: 0;
  margin: 0.4rem 0;
}
.centerpiece--page .centerpiece__big { font-size: clamp(2.2rem, 6vw, 3.75rem); }
.centerpiece + .doublerule + .section { padding-top: var(--s4); }
.centerpiece__under {
  font-family: var(--swash);
  font-style: italic;
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--soft);
  line-height: 1.4;
}

/* --- TILE GRID --- */
.tilegrid {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--gutter) var(--s5);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s3) var(--s5);
  align-items: stretch;
}

/* --- TILES --- */
.tile--wide { grid-column: 1 / -1; }
.tile__words { display: block; }
.tile.tile--art { align-items: center; gap: 0.35rem; }
.tile__art { display: block; width: 66px; height: 69px; flex: 0 0 auto; }
.tile.tile--art.tile--wide { flex-direction: row; justify-content: center; gap: 0.9rem; text-align: left; }
@media (min-width: 681px) {
  .tile.tile--art { flex-direction: row; justify-content: flex-start; gap: 1.1rem; text-align: left; }
  .tile--art .tile__art { width: 92px; height: 96px; }
  .tile.tile--art.tile--wide { justify-content: center; }
}
.tile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-decoration: none;
  padding: var(--s3) var(--s2);
  background: var(--white);
  transition: color 0.15s ease, border-color 0.15s ease;
}
@media (hover: hover) and (pointer: fine) { a.tile:hover { color: var(--red); } }

.tile__display { display: block; line-height: 1.1; }
.tile__display--slab   { font-family: var(--slab);  font-size: clamp(1.4rem, 3.4vw, 2.3rem); }
.tile__display--western{ font-family: var(--west);  font-size: clamp(1.25rem, 3vw, 2rem); }
.tile__display--script {
  font-family: var(--swash);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(1.9rem, 5vw, 3.2rem);
}
.tile__sub {
  display: block;
  margin-top: 0.6rem;
  font-size: 1rem;
  font-style: italic;
  color: var(--soft);
}

.tile--dotted  { border: 7px dotted var(--black); }
.tile--dashed  { border: 3px dashed var(--black); }
.tile--double  { border: 6px double var(--black); }
.tile--hatched {
  border: 2px solid var(--black);
  box-shadow: inset 0 0 0 4px var(--white), inset 0 0 0 6px var(--black);
}
.tile--rule {
  border: 2px solid var(--black);
  border-left-width: 10px;
  border-right-width: 10px;
}

/* --- FORM FIELDS --- */

.field {
  display: block;
  width: 100%;
  padding: 0.7rem 0.75rem;
  margin-bottom: 0.6rem;
  border: 1px solid var(--hair);
  text-align: center;
  font-size: 1rem;
}
.field::placeholder { color: var(--soft); font-style: italic; }

/* --- SECTIONS --- */
.section {
  max-width: var(--page);
  margin: 0 auto;
  padding: var(--s5) var(--gutter);
}
.section--narrow { max-width: 46rem; }

.pullquote {
  font-family: var(--swash);
  font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  max-width: 40ch;
  margin: var(--s3) auto 0;
  padding-top: var(--s3);
  border-top: 2px solid var(--black);
  color: var(--red);
}

/* --- FLAVORS --- */
.section--board { padding-top: var(--s4); }

.subhead {
  font-family: var(--west);
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--red);
  margin: var(--s3) 0 var(--s3);
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 0 var(--s4);
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.35rem 1rem;
  border: 1px solid var(--black);
  font-size: 0.9375rem;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, var(--press);
}
@media (hover: hover) and (pointer: fine) { .tab:hover { background: #F3F2EF; } }
.tab[aria-current="page"] { background: var(--red); border-color: var(--red); color: var(--white); }
.tab__n { font-size: 0.8125rem; opacity: 0.75; }

.flavors {
  --cols: 4;
  --gap: var(--s3);
  max-width: 60rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s3) var(--gap);
}
.flavor {
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pages {
  position: relative;
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  touch-action: pan-x pan-y;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.pages::-webkit-scrollbar { display: none; }
.pages { margin-inline: calc(-1 * var(--gutter)); }
.pages__page {
  flex: 0 0 100%;
  min-width: 0;
  padding-inline: var(--gutter);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: var(--s3);
}
.pager > * + * { margin-left: -1px; }
.pager__num,
.pager__step {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.6rem;
  border: 1px solid var(--black);
  text-decoration: none;
  font-size: 1rem;
}
.pager__step { padding: 0; font-size: 1.6rem; line-height: 1; }
.pager__num, .pager__step { transition: var(--press); }
@media (hover: hover) and (pointer: fine) {
  .pager__num:hover,
  .pager__step:hover { background: #F3F2EF; }
}
.pager__num[aria-current="page"] { background: var(--black); color: var(--white); }
.pager__step { background: var(--white); color: var(--black); cursor: pointer; }
.pager__step:disabled { border-color: var(--hair); color: var(--hair); cursor: default; background: var(--white); }
.pager__step[hidden] { display: none; }

.swipehint { display: none; }
@media (pointer: coarse) {
  .swipehint {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.875rem;
    font-style: italic;
    color: var(--soft);
  }
  .swipehint::after { content: " \2192"; }
}

.more { margin-top: var(--s4); }
.btn-line {
  display: inline-grid;
  place-items: center;
  min-height: 48px;
  padding: 0.5rem 1.75rem;
  border: 7px dotted var(--black);
  font-family: var(--slab);
  font-size: 1.05rem;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, var(--press);
}
@media (hover: hover) and (pointer: fine) { .btn-line:hover { background: var(--black); color: var(--white); } }

.flavor__frame {
  width: 100%;
  padding: 6px;
  border: 2px solid var(--black);
  background: var(--white);
}
.flavor__frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: #E8E6E2;
}

.flavor {
  --name-size: clamp(1rem, 1.7vw, 1.25rem);
}
.flavor__cap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: calc(0.9rem + (2 * 1.15 + 0.3) * var(--name-size) + 0.35rem + 1.3 * 0.8125rem);
}
.flavor__name {
  margin-top: 0.9rem;
  padding-block: 0.15em;
  font-family: var(--slab);
  font-size: var(--name-size);
  line-height: 1.15;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.mark {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--west);
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.3;
  letter-spacing: 0.08em;
  color: var(--red);
}

.flavor__cap {
  align-items: flex-start;
  text-align: left;
  height: calc(0.7rem + (2 * 1.15 + 0.3) * var(--name-size) + 0.3rem + 0.35rem + 3 * 1.3 * 1rem + 0.3rem + 1.3 * 0.8125rem);
}
.flavor__cap .flavor__name {
  margin-top: 0.7rem;
  display: flex;
  align-items: flex-end;
  width: 100%;
  min-height: calc(2 * 1.15 * var(--name-size) + 0.3em);
  padding-block: 0;
  overflow: visible;
}
.flavor__name > span {
  padding-block: 0.15em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.flavor__desc {
  order: 2;
  width: 100%;
  margin-top: 0.3rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--hair);
  font-size: 1rem;
  line-height: 1.3;
  color: var(--soft);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.flavor__desc:empty { border-top-color: transparent; }
.flavor__cap .mark { order: 3; margin-top: 0.3rem; }

/* --- BILL OF FARE --- */
.bill {
  margin-top: var(--s4);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4) var(--s5);
  text-align: left;
}
.bill h3 {
  font-family: var(--slab);
  font-weight: 400;
  font-size: 1.3rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--black);
}
.bill p { margin-top: 0.6rem; font-size: 1rem; color: var(--soft); }

/* --- VISIT --- */
.visit {
  margin-top: var(--s4);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
}
.visit__label {
  font-family: var(--west);
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--red);
  margin-bottom: 0.6rem;
}
.visit__block p { margin-bottom: 0.4rem; }
.visit__block a { text-decoration: underline; text-decoration-color: var(--hair); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.visit__block a:hover { text-decoration-color: var(--red); color: var(--red); }

.hours { font-size: 1.0625rem; max-width: 20rem; margin: 0 auto; }
.hours div {
  display: flex;
  justify-content: space-between;
  gap: var(--s2);
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--hair);
}
.hours dt { color: var(--soft); }
.hours dd { margin: 0; }
.hours div.is-today dt,
.hours div.is-today dd { color: var(--red); font-weight: 600; }

.hours__season {
  margin-top: 0.75rem;
  font-size: 1rem;
  font-style: italic;
  color: var(--soft);
}

.status { font-style: italic; color: var(--soft); }
.status[data-status="open"] { color: var(--red); font-style: normal; }

.mapframe {
  position: relative;
  margin-top: var(--s4);
  height: clamp(240px, 38vw, 420px);
  border: 2px solid var(--black);
}
.mapframe iframe { width: 100%; height: 100%; border: 0; display: block; }

/* --- CONTACT AND FORMS --- */
.callbar { display: grid; justify-items: center; gap: 0.75rem; }
.section.callbar { padding-block: var(--s2) var(--s4); }
.btn-line--big { width: 100%; max-width: 22rem; min-height: 56px; font-size: 1.2rem; }

.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cform { max-width: 34rem; margin: var(--s3) auto 0; text-align: left; }
.cform__label { display: block; font-weight: 600; margin: 1.25rem 0 0.35rem; padding: 0; }
.cform__hint { font-weight: 400; font-style: italic; font-size: 1rem; color: var(--soft); }
.cform .field { text-align: left; margin-bottom: 0; font-size: 1rem; border-color: var(--soft); }
.cform textarea.field { min-height: 9.5rem; resize: vertical; font: inherit; font-size: 1rem; line-height: 1.5; color: inherit; background: var(--white); }
.cform .field:focus-visible { outline-offset: 1px; }
.cform .field[aria-invalid="true"] { border: 2px solid var(--red); }
.cform__err { margin-top: 0.35rem; font-size: 0.9375rem; color: var(--red); }
.cform__alert { margin-bottom: 0.5rem; padding: 0.75rem 1rem; border: 2px solid var(--red); color: var(--red); }
.cform__send { width: 100%; margin-top: var(--s3); background: var(--white); }
.cform__fine { margin-top: 0.75rem; font-size: 0.9375rem; color: var(--soft); text-align: center; }

.choices { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.choices legend { grid-column: 1 / -1; float: left; width: 100%; margin-top: 0; }
.choice { position: relative; display: block; }
.choice input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.choice span {
  display: grid; place-items: center;
  min-height: 48px; height: 100%;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--black);
  text-align: center; line-height: 1.25;
  font-size: 1rem;
}
.choice input:checked + span { background: var(--black); color: var(--white); }
.choice input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.choices[aria-describedby] .choice span { border-color: var(--red); }

.contactgrid { display: grid; gap: var(--s4); }
.contactgrid__rule { width: calc(100% + 2 * var(--gutter)); margin-inline: calc(-1 * var(--gutter)); }
@media (min-width: 900px) {
  .contactgrid { max-width: 64rem; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 0; align-items: start; }
  .contactgrid__rule { display: none; }
  .contactgrid__form { padding-right: var(--s4); }
  .contactgrid__hours { position: sticky; top: var(--s3); padding-left: var(--s4); border-left: 2px solid var(--black); }
  .contactgrid .cform, .contactgrid .thanks { max-width: none; }
}

.thanks { max-width: 34rem; margin: var(--s3) auto 0; padding: var(--s3) var(--s2); border: 6px double var(--black); }
.thanks p + p { margin-top: 0.75rem; }
.thanks__big { font-family: var(--swash); font-style: italic; font-weight: 800; font-size: 2rem; color: var(--red); }

/* --- JOB APPLICATION --- */
.jletter { max-width: 34rem; margin: 0 auto; font-size: 1.0625rem; }
.jletter p + p { margin-top: 0.6rem; }
.jletter__sig { font-family: var(--swash); font-style: italic; color: var(--soft); }
.jletter__pdf a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 4px; }

.jform .jstep { border: 0; margin: 0 0 var(--s4); padding: 0; min-width: 0; }
.jform.is-stepped .jstep { margin-bottom: 0; }
.jstep__title {
  float: left; width: 100%;
  margin: var(--s3) 0 0.25rem; padding: 0;
  font-family: var(--swash); font-style: italic; font-weight: 800; font-size: 1.75rem; line-height: 1.15;
}
.jstep__title:focus { outline: none; }
.jstep__title + * { clear: both; }
.jstep__num {
  display: block; margin-bottom: 0.2rem;
  font-family: var(--body); font-style: normal; font-weight: 600;
  font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red);
}
.jform.is-stepped .jstep__num { display: none; }

.jprogress { margin: var(--s3) 0 0; }
.jprogress[hidden] { display: none; }
.jprogress__text { font-weight: 600; font-size: 0.9375rem; color: var(--red); margin-bottom: 0.35rem; }
.jprogress progress {
  display: block; width: 100%; height: 8px;
  appearance: none; -webkit-appearance: none;
  border: 0; border-radius: 4px; background: var(--hair); color: var(--red);
}
.jprogress progress::-webkit-progress-bar { background: var(--hair); border-radius: 4px; }
.jprogress progress::-webkit-progress-value { background: var(--red); border-radius: 4px; }
.jprogress progress::-moz-progress-bar { background: var(--red); border-radius: 4px; }

.jgroup { margin: var(--s3) 0 0; font-family: var(--west); font-weight: 400; font-size: 1.1rem; color: var(--red); }
.jgroup + .cform__hint { margin-top: 0.2rem; }
.jhint { margin: -0.15rem 0 0.35rem; }
.jday { display: grid; grid-template-columns: 6.75rem minmax(0, 1fr); align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.jday .cform__label { margin: 0; font-weight: 400; }

.choices--stack { grid-template-columns: 1fr; }
.jform .choices { margin-top: 1.25rem; }
.jform .choices legend { margin-top: 0; }

.jcheck { display: flex; align-items: flex-start; gap: 0.75rem; margin-top: var(--s3); font-weight: 600; cursor: pointer; }
.jcheck input { flex: 0 0 auto; width: 1.4rem; height: 1.4rem; margin: 0.2rem 0 0; accent-color: var(--red); }

.jnav { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: var(--s3); }
.jnav[hidden] { display: none; }
.jnav .btn-line { width: 100%; }
.jnav__back { background: var(--white); }
.jnav__next { background: var(--black); color: var(--white); border-style: solid; }
@media (hover: hover) and (pointer: fine) { .jnav__next:hover { background: var(--red); border-color: var(--red); } }
.jeeo { margin-top: var(--s3); font-size: 0.875rem; line-height: 1.5; color: var(--soft); }

/* --- STAY --- */
.stayphotos { max-width: 56rem; margin: 0 auto; padding: 0 var(--gutter); }
.stayphoto { display: block; width: 100%; height: auto; border: 2px solid var(--black); }
.stayphoto--view { max-width: 46rem; margin: 0 auto var(--s3); }
.photorow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); max-width: 46rem; margin: var(--s3) auto 0; }
.lede + .lede { margin-top: 0.8rem; }
.walks { max-width: 24rem; }
.walks__note { margin-top: var(--s2); }

/* --- FOOTER --- */
.footer { position: relative; text-align: left; }

.footer__strip {
  position: relative;
  overflow: hidden;
  height: clamp(180px, 26vw, 340px);
  background: #E8E6E2;
}
.footer__photo {
  position: absolute;
  left: 0;
  top: -15%;
  width: 100%;
  height: 130%;
  object-fit: cover;
  object-position: 34% 55%;
  display: block;
  max-width: none;
}

.footer__inner { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter) var(--s5); }
.footer__rule { border: 0; border-top: 2px solid var(--black); margin: var(--s4) 0 var(--s4); }

.footer__cols {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--s4);
  align-items: start;
}
.footer__col p { line-height: 1.75; }
.footer__col a { text-decoration: underline; text-decoration-color: var(--hair); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.footer__col a:hover { color: var(--red); text-decoration-color: var(--red); }
.footer__col--right { text-align: right; }

.footer__social { display: flex; gap: var(--s3); }

.footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--s3); margin-top: var(--s4); }
.footer__links a {
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: underline; text-decoration-color: var(--hair); text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.footer__links a:hover { color: var(--red); text-decoration-color: var(--red); }
.footer__social a { display: grid; place-items: center; width: 44px; height: 44px; }
.footer__social svg { width: 30px; height: 30px; fill: var(--black); display: block; }
@media (hover: hover) and (pointer: fine) { .footer__social a:hover svg { fill: var(--red); } }

.footer__fine {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--s3);
  margin-top: var(--s4);
  font-size: 0.9375rem;
}

.maker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  color: var(--soft);
  font-size: 0.875rem;
  text-decoration: none;
}
.maker__mark {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  transition: transform 0.3s var(--ease-arrive);
}
.maker:focus-visible .maker__mark { transform: rotate(5deg) scale(1.1); }
@media (hover: hover) and (pointer: fine) {
  .maker:hover .maker__mark { transform: rotate(5deg) scale(1.1); }
}

.totop {
  position: absolute;
  right: 0; bottom: var(--s5);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: #E8E6E2;
}
.totop svg { width: 22px; height: 22px; fill: var(--black); }
.totop { transition: var(--press); }
@media (hover: hover) and (pointer: fine) {
  .totop:hover { background: var(--black); }
  .totop:hover svg { fill: var(--white); }
}

/* --- PRESS FEEDBACK --- */
.iconbtn, .announce__close, .dock__bar { transition: var(--press); }
a.tile { transition: color 0.15s ease, border-color 0.15s ease, var(--press); }
.btn-line:active, .tab:active, .pager__num:active, .pager__step:active,
.iconbtn:active, .totop:active, .dock__bar:active, a.tile:active { transform: scale(0.97); }
.announce__close:active { transform: translateY(-50%) scale(0.97); }

/* --- TAP TARGETS --- */
@media (max-width: 680px), (pointer: coarse) {
  .visit__block a,
  .footer__col a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .visit__block p { margin-bottom: 0; }
  .announce a,
  .band a,
  .lede a,
  .foot a { padding-block: 0.7rem; }
}

/* --- RESPONSIVE --- */
@media (max-width: 1000px) {
  .tilegrid { gap: var(--s3) var(--s4); }
  .bill,
  .visit { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
  .tilegrid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s2);
    padding-bottom: var(--s4);
  }
  .tile { padding: var(--s2) 0.6rem; }
  .tile__display--slab    { font-size: 1.2rem; }
  .tile__display--western { font-size: 1.05rem; }
  .tile__display--script  { font-size: 1.6rem; }
  .tile__sub { font-size: 0.875rem; line-height: 1.35; margin-top: 0.4rem; }
  .tile--hatched { box-shadow: inset 0 0 0 3px var(--white), inset 0 0 0 5px var(--black); }
  .tile--rule { border-left-width: 6px; border-right-width: 6px; }

  .band { display: grid; grid-template-columns: auto auto; justify-content: space-between; column-gap: 0.75rem; row-gap: 0.15rem; padding-block: 0.45rem; font-size: 0.875rem; line-height: 1.35; }
  .band__addr { text-align: left; }
  .band__hours { white-space: nowrap; }
  .band__sep { display: none; }
  .band__br { display: inline; }

  .flavors { --cols: 2; --gap: var(--s2); row-gap: var(--s3); }
  .flavor__frame { padding: 4px; }
  .section--board { padding-top: var(--s3); }
  .tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: var(--s3);
  }
  .tab { justify-content: center; padding: 0.35rem 0.5rem; }

  .bill,
  .visit { grid-template-columns: 1fr; }
  .bill { gap: var(--s3); }
  .visit { gap: var(--s3); }
  .section { padding-block: var(--s3); }
  .centerpiece { padding: var(--s2) var(--gutter) var(--s2); }
  .centerpiece:not(.centerpiece--page) { padding-top: 0.25rem; }
  .centerpiece + .doublerule + .section { padding-top: var(--s3); }
  .mapframe { margin-top: var(--s3); }
  .footer__cols { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .footer__col--right { text-align: center; }
  .footer { text-align: center; }
  .footer__fine { justify-content: center; }
  .totop { position: static; margin: var(--s3) auto 0; }
}

/* --- APARTMENT FEATURE (homepage) --- */
.stayfeature { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter) var(--s5); }
.stayfeature__in { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; max-width: 46rem; margin: 0 auto; padding: var(--s3) var(--s2); border: 6px double var(--black); text-align: center; }
.stayfeature__art { display: block; width: 120px; height: 125px; flex: 0 0 auto; }
.stayfeature__over { font-family: var(--west); color: var(--red); font-size: 1rem; }
.stayfeature__title { font-family: var(--swash); font-style: italic; font-weight: 900; font-size: clamp(1.6rem, 5vw, 2.4rem); line-height: 1.1; margin: 0.2rem 0 0.5rem; text-wrap: balance; }
.stayfeature__facts { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; margin: 0 0 0.9rem; font-family: var(--slab); font-size: 1rem; }
@media (min-width: 681px) {
  .stayfeature__in { flex-direction: row; gap: var(--s4); padding: var(--s3) var(--s4); text-align: left; }
  .stayfeature__art { width: 160px; height: 166px; }
  .stayfeature__facts { flex-direction: row; flex-wrap: wrap; align-items: baseline; }
  .stayfeature__facts li + li::before { content: "\00B7"; margin: 0 0.5rem; color: var(--soft); }
}

/* --- MENU PAGES --- */
.menu { text-align: center; }
.menu__art { display: block; width: 110px; height: 115px; margin: 0 auto 0.5rem; }
.menu__art--more { margin-top: var(--s4); }
.menu__art--more + .menu__head { margin-top: 0.5rem; }
.menu__head { font-family: var(--slab); font-weight: 400; font-size: clamp(1.4rem, 4vw, 1.9rem); margin: var(--s3) 0 0.5rem; }
.menu__head:first-of-type { margin-top: 0.5rem; }
.menu__sizes { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin: 0 0 var(--s2); }
.menu__sizes li { border: 1px solid var(--black); padding: 0.2rem 0.6rem; font-size: 0.9rem; }
.menu__sizes b { font-family: var(--slab); font-weight: 400; color: var(--red); margin-right: 0.3rem; }
.menu__list { margin: 0 auto; max-width: 40rem; columns: 2; column-gap: var(--s4); text-align: left; }
.menu__list li { break-inside: avoid; padding: 0.4rem 0; border-bottom: 1px solid var(--hair); font-size: 1.05rem; line-height: 1.3; }
.menu__list li span { display: block; font-size: 0.85rem; font-style: italic; color: var(--soft); }
.menu__list--one { columns: 1; max-width: 20rem; text-align: center; }
.menu__any { max-width: 40rem; margin: var(--s2) auto 0; text-align: left; display: grid; gap: 0.7rem; }
.menu__any div { padding-top: 0.6rem; border-top: 1px solid var(--hair); }
.menu__any dt { font-family: var(--slab); font-size: 1rem; }
.menu__any dd { margin: 0.1rem 0 0; color: var(--soft); font-size: 0.98rem; }
.menu__note { margin-top: var(--s3); font-style: italic; color: var(--soft); }
.menu__line { max-width: 34rem; margin: var(--s2) auto 0; font-family: var(--slab); font-size: 1rem; }
@media (max-width: 680px) { .menu__list { column-gap: var(--s2); } .menu__list li { font-size: 0.95rem; } }

/* --- FLAVOR TABS FADE --- */
@view-transition { navigation: auto; }
:root { view-transition-name: none; }
#board { view-transition-name: flavor-board; }
::view-transition-group(flavor-board) { animation-duration: 0.22s; }
::view-transition-old(flavor-board),
::view-transition-new(flavor-board) { animation-duration: 0.22s; }
/* --- SECTION BAR (the menu pages) --- */
.dock {
  position: sticky;
  bottom: 0;
  z-index: 30;
  margin-top: var(--s4);
  background: var(--white);
  border-top: 2px solid var(--black);
}
.dock__bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0 var(--gutter);
  cursor: pointer;
  list-style: none;
}
.dock__bar::-webkit-details-marker { display: none; }
.dock__label { font-family: var(--slab); font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; }
.dock__now { margin-left: auto; font-style: italic; color: var(--soft); }
.dock__label + .dock__chev { margin-left: auto; }
.dock__chev { width: 18px; height: 18px; fill: var(--black); transition: transform 250ms var(--ease-in-out); }
.dock[open] .dock__chev { transform: rotate(180deg); }
.dock[open] .dock__label { color: var(--red); }
.dock__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--s3);
  padding: 0 var(--gutter) 0.8rem;
}
.dock__list a {
  display: block;
  min-height: 44px;
  padding: 0.65rem 0;
  border-top: 1px solid var(--hair);
  text-decoration: none;
}
.dock__list a:hover,
.dock__list a[aria-current="page"] { color: var(--red); }
@supports selector(::details-content) {
  .dock::details-content { block-size: 0; overflow: hidden; transition: block-size 250ms var(--ease-out), content-visibility 250ms allow-discrete; }
  .dock[open]::details-content { block-size: auto; }
}
@media (min-width: 681px) {
  .dock__bar,
  .dock__list { max-width: var(--page); margin: 0 auto; }
  .dock__list { grid-template-columns: repeat(6, 1fr); gap: 0 var(--s4); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* --- PRIVACY --- */
.privacy { text-align: left; max-width: 40rem; }
.privacy__short { padding: var(--s2) var(--s3); border: 2px solid var(--black); margin-bottom: var(--s2); }
.privacy h2 { font-family: var(--slab); font-weight: 400; font-size: 1.15rem; letter-spacing: 0.02em; margin: var(--s3) 0 0.35rem; }
.privacy p + p { margin-top: 0.6rem; }
.privacy a { text-decoration: underline; text-underline-offset: 3px; }
.privacy a:hover { color: var(--red); }
.privacy__date { margin-top: var(--s3); color: var(--soft); font-size: 0.9375rem; font-style: italic; }
.cform__fine a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* --- 404 DROPPED CONE --- */
.nf { text-align: center; padding-block: var(--s4) var(--s5); overflow: hidden; }
.nf__art { width: min(80vw, 320px); margin: 0 auto var(--s3); }
.nf__title { font-family: var(--swash); font-style: italic; font-weight: 700; font-size: clamp(2rem, 8vw, 2.8rem); line-height: 1.1; margin-bottom: var(--s2); }
.nf .lede { max-width: 30rem; margin: 0 auto; }
.nf__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: var(--s3); }
.nf__call { margin-top: var(--s3); font-size: 0.9375rem; color: var(--soft); }
.nf__call a { color: inherit; }

.nfcone { display: block; width: 100%; height: auto; overflow: visible; }
.nfcone .conebody, .nfcone .scoop, .nfcone .splash { fill: var(--white); }
.nfcone .coneline, .nfcone .scoop, .nfcone .ground, .nfcone .stem, .nfcone .splash { stroke: var(--black); stroke-width: 3; stroke-linecap: square; stroke-linejoin: miter; }
.nfcone .coneline, .nfcone .ground, .nfcone .stem { fill: none; }
.nfcone .waffle path { stroke: var(--black); stroke-width: 1.5; }
.nfcone .stem { stroke-width: 2.5; }
.nfcone .splash { stroke-width: 2.5; }
.nfcone .cherry { fill: var(--red); }

.nfcone .a-cone, .nfcone .a-cone-in, .nfcone .a-scoop { transform-box: view-box; }
.nfcone .a-cone { transform-origin: 110px 191px; animation: nf-fall 0.6s 0.25s var(--ease-tip) both; }
.nfcone .a-cone-in { transform-origin: 110px 232px; animation: nf-land 0.6s 0.85s ease-out both; }
.nfcone .a-scoop { transform-origin: 110px 232px; animation: nf-squash 0.14s 0.82s ease-in both; }
.nfcone .a-splat, .nfcone .a-dot, .nfcone .a-cherry, .nfcone .a-blob { transform-box: fill-box; }
.nfcone .a-splat { transform-origin: 50% 100%; animation: nf-splat 0.45s 0.85s var(--ease-splat) both; }
.nfcone .a-dot { transform-origin: 50% 50%; animation: nf-dot 0.5s 0.87s var(--ease-fly) both; }
.nfcone .a-dot:nth-of-type(1) { --dx: 14px; --dy: 16px; }
.nfcone .a-dot:nth-of-type(2) { --dx: 10px; --dy: 22px; }
.nfcone .a-dot:nth-of-type(3) { --dx: -10px; --dy: 22px; }
.nfcone .a-dot:nth-of-type(4) { --dx: -14px; --dy: 16px; }
.nfcone .a-cherry { transform-origin: 50% 50%; animation: nf-roll 0.9s 0.9s var(--ease-roll) both; }
.nfcone .a-blob { transform-origin: 50% 100%; opacity: 0; animation: nf-blob 0.5s 0.62s var(--ease-tip) both; }
@keyframes nf-fall { from { transform: translateY(-48px) rotate(180deg); opacity: 0; } 12% { opacity: 1; } to { transform: none; } }
@keyframes nf-land { 0% { transform: scale(1.06, 0.86); } 30% { transform: rotate(-7deg); } 55% { transform: rotate(4deg); } 78% { transform: rotate(-1.5deg); } 100% { transform: none; } }
@keyframes nf-squash { to { transform: scale(1.25, 0.2); opacity: 0; } }
@keyframes nf-splat { from { transform: scale(0.15, 0.1); opacity: 0; } 30% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes nf-dot { from { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; } 40% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes nf-roll { from { transform: translateX(-104px) rotate(-340deg); opacity: 0; } 15% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes nf-blob { from { transform: translate(12px, -150px) rotate(120deg); opacity: 1; } 78% { transform: translate(0, 20px) rotate(0); opacity: 1; } to { transform: translate(0, 26px) scale(1.7, 0.3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .nfcone * { animation: none !important; }
  .nfcone .a-scoop, .nfcone .a-blob { opacity: 0; }
}

/* --- THE DRAWINGS COMING TOGETHER (menu pages) --- */
.artdrop { overflow: visible; --fall: 120px; --squash: 0.74; --bounce: 8px; }

/* --- the cone --- */
.artdrop .c-all { --fall: 80px; --squash: 0.84; --bounce: 5px; }
.artdrop .c-all,
.artdrop .c-scoop,
.artdrop .c-left-in,
.artdrop .c-right-in,
.artdrop .c-cherry,
.artdrop .c-cherry-in,
.artdrop .c-drop { transform-box: view-box; }
.artdrop.is-in .c-left-in { transform-origin: 41px 60px; animation: cd-squish 0.5s 1.08s var(--ease-give) both; }
.artdrop.is-in .c-right-in { transform-origin: 59px 60px; animation: cd-squish 0.5s 1.12s var(--ease-give) both; }
.artdrop.is-in .c-left { transform-origin: 41px 60px; animation: cd-drop 0.5s 0.15s var(--ease-fall) both; }
.artdrop.is-in .c-right { transform-origin: 59px 60px; animation: cd-drop 0.5s 0.5s var(--ease-fall) both; }
.artdrop.is-in .c-top { transform-origin: 45px 45px; animation: cd-drop 0.5s 0.85s var(--ease-fall) both, cd-splat 0.45s 1.5s ease-out; }
.artdrop.is-in .c-cherry { transform-origin: 45px 21px; animation: cd-plop 0.6s 1.2s var(--ease-fall) both; }
.artdrop.is-in .c-lip { animation: cd-show 0.08s 1.52s both; }
.artdrop.is-in .c-splash { animation: cd-splash 0.7s 1.5s both; }
.artdrop.is-in .c-drop { transform-origin: 45.4px 19px; animation: cd-fly 0.7s 1.5s var(--ease-fly) both; }
.artdrop.is-in .c-drop1 { --dx: -12px; --dy: -5px; }
.artdrop.is-in .c-drop2 { --dx: -7px; --dy: -11px; }
.artdrop.is-in .c-drop3 { --dx: 1px; --dy: -13px; }
.artdrop.is-in .c-drop4 { --dx: 8px; --dy: -10px; }
.artdrop.is-in .c-drop5 { --dx: 13px; --dy: -4px; }
.artdrop.is-in .c-cherry-in { transform-origin: 45px 21px; animation: cd-wiggle 7s 3s infinite both; }

@keyframes cd-drop {
  0%   { transform: translateY(calc(var(--fall) * -1)); opacity: 0; }
  10%  { opacity: 1; }
  58%  { transform: translateY(0); animation-timing-function: ease-out; }
  70%  { transform: scale(calc(2 - var(--squash)), var(--squash)); }
  85%  { transform: scale(calc(1 + (1 - var(--squash)) * 0.15), calc(1 - (1 - var(--squash)) * 0.15)); }
  100% { transform: none; }
}
@keyframes cd-cherry {
  0%   { transform: translateY(calc(var(--fall) * -1.1)); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translateY(0); animation-timing-function: ease-out; }
  62%  { transform: translateY(calc(var(--bounce) * -1)) scale(1.04, 0.96); }
  74%  { transform: translateY(0); }
  84%  { transform: translateY(calc(var(--bounce) * -0.35)); }
  100% { transform: none; }
}
@keyframes cd-plop {
  0%   { transform: translateY(calc(var(--fall) * -1.1)); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translateY(0); animation-timing-function: ease-out; }
  62%  { transform: translateY(3.2px) scale(1.05, 0.95); }
  80%  { transform: translateY(2.2px); }
  100% { transform: translateY(2.5px); }
}
@keyframes cd-splat {
  0%   { transform: none; }
  25%  { transform: scale(1.1, 0.9); }
  60%  { transform: scale(0.98, 1.02); }
  100% { transform: none; }
}
@keyframes cd-show {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes cd-wiggle {
  0%        { transform: none; }
  2%        { transform: rotate(-7deg); }
  5%        { transform: rotate(5deg); }
  8%        { transform: rotate(-3deg); }
  11%       { transform: rotate(1.5deg); }
  14%, 100% { transform: none; }
}

/* --- the sundae --- */
.artdrop .s-all, .artdrop .s-scoops, .artdrop .s-left, .artdrop .s-right,
.artdrop .s-fudge, .artdrop .s-cherry, .artdrop .s-cherry-in,
.artdrop .s-splash, .artdrop .s-drop { transform-box: view-box; }
.artdrop.is-in .s-scoops { transform-origin: 50px 58px; animation: cd-squish 0.5s 1s var(--ease-give) both; }
.artdrop.is-in .s-right { transform-origin: 64px 58px; animation: cd-drop 0.5s 0.15s var(--ease-fall) both; }
.artdrop.is-in .s-left { transform-origin: 36px 58px; animation: cd-drop 0.5s 0.45s var(--ease-fall) both; }
.artdrop.is-in .s-fudge { animation: cd-fudge-a 1.2s 0.9s linear both; }
.artdrop.is-in .s-cherry { transform-origin: 50px 24px; animation: cd-cherry 0.6s 1.35s var(--ease-fall) both; }
.artdrop.is-in .s-cherry-in { transform-origin: 50px 24px; animation: cd-wiggle 7s 3.2s infinite both; }
.artdrop.is-in .s-splash { animation: cd-splash 0.55s 1.62s both; }
.artdrop.is-in .s-drop { transform-origin: 50px 20px; animation: cd-fly 0.55s 1.62s var(--ease-fly) both; }
.artdrop.is-in .s-drop1 { --dx: -9px; --dy: -4px; }
.artdrop.is-in .s-drop2 { --dx: -5px; --dy: -9px; }
.artdrop.is-in .s-drop3 { --dx: 5px; --dy: -9px; }
.artdrop.is-in .s-drop4 { --dx: 9px; --dy: -3px; }
.artdrop.is-in .s-drop5 { --dx: 0px; --dy: -12px; }

/* --- the shake --- */
.artdrop .k-all, .artdrop .k-cream-in, .artdrop .k-ring, .artdrop .k-peak,
.artdrop .k-straw, .artdrop .k-cherry, .artdrop .k-cherry-in,
.artdrop .k-drop { transform-box: view-box; }
.artdrop.is-in .k-all { transform-origin: 50px 95px; --tilt: -6deg; animation: cd-tilt 1.3s var(--ease-arrive) both; }
.artdrop.is-in .k-lay,
.artdrop.is-in .k-edge { stroke-dasharray: 100 101; animation: cd-lay 0.36s var(--ease-in-out) both, cd-show 0.4s var(--ease-out) both; }
.artdrop.is-in .k-edge-soft { stroke-dasharray: 6 200; animation: cd-tip 0.36s var(--ease-in-out) both, cd-ghost 0.36s linear both; }
.artdrop.is-in .k-shade { animation: cd-show 0.25s both; }
.artdrop.is-in .k-ring1 :is(.k-lay, .k-edge, .k-edge-soft) { animation-delay: 0.3s; }
.artdrop.is-in .k-ring2 :is(.k-lay, .k-edge, .k-edge-soft) { animation-delay: 0.72s; }
.artdrop.is-in .k-ring3 :is(.k-lay, .k-edge, .k-edge-soft) { animation-delay: 1.12s; }
.artdrop.is-in .k-ring1 .k-shade { animation-delay: 0.59s; }
.artdrop.is-in .k-ring2 .k-shade { animation-delay: 1.01s; }
.artdrop.is-in .k-ring3 .k-shade { animation-delay: 1.41s; }
.artdrop.is-in .k-ring1 { transform-origin: 50px 41.1px; animation: cd-squish 0.45s 1.02s var(--ease-give) both; }
.artdrop.is-in .k-ring2 { transform-origin: 49.3px 33.95px; animation: cd-squish 0.45s 1.42s var(--ease-give) both; }
.artdrop.is-in .k-peak { transform-origin: 50.5px 21.9px; animation: cd-puff 0.4s 1.5s var(--ease-spring) both, cd-splat 0.45s 2.4s ease-out; }
.artdrop.is-in .k-straw { transform-origin: 70px 10px; animation: cd-slide 0.45s 1.75s var(--ease-slide) both; }
.artdrop.is-in .k-cream-in { transform-origin: 50px 41.1px; animation: cd-squish 0.5s 2s var(--ease-give) both; }
.artdrop.is-in .k-cherry { transform-origin: 50px 8.4px; animation: cd-plop 0.6s 2.1s var(--ease-fall) both; }
.artdrop.is-in .k-lip { animation: cd-show 0.08s 2.42s both; }
.artdrop.is-in .k-splash { animation: cd-splash 0.7s 2.4s both; }
.artdrop.is-in .k-drop { transform-origin: 50px 11.8px; animation: cd-fly 0.7s 2.4s var(--ease-fly) both; }
.artdrop.is-in .k-drop1 { --dx: -12px; --dy: -5px; }
.artdrop.is-in .k-drop2 { --dx: -7px; --dy: -11px; }
.artdrop.is-in .k-drop3 { --dx: 1px; --dy: -13px; }
.artdrop.is-in .k-drop4 { --dx: 8px; --dy: -10px; }
.artdrop.is-in .k-drop5 { --dx: 13px; --dy: -4px; }
.artdrop.is-in .k-cherry-in { transform-origin: 50px 8.4px; animation: cd-wiggle 7s 3.9s infinite both; }
@keyframes cd-lay {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}
@keyframes cd-tip {
  from { stroke-dashoffset: 6; }
  to   { stroke-dashoffset: -94; }
}
@keyframes cd-ghost {
  0%   { opacity: 0; }
  15%  { opacity: 0.8; }
  70%  { opacity: 0.8; }
  100% { opacity: 0; }
}

/* --- the soda --- */
.artdrop .b-liquid, .artdrop .b-shine, .artdrop .b-froth, .artdrop .b-pf, .artdrop .b-foam-in,
.artdrop .b-straw, .artdrop .b-bubble { transform-box: view-box; }
.artdrop.is-in .b-liquid,
.artdrop.is-in .b-shine { animation: cd-fillup 1s 0.2s var(--ease-fill) both; }
.artdrop.is-in .b-froth { transform-origin: 50px 30px; animation: cd-froth 0.3s 0.83s var(--ease-out) both; }
.artdrop.is-in .b-pf1 { transform-origin: 50px 27px; animation: cd-pilerise 0.55s 1.05s var(--ease-out) both; }
.artdrop.is-in .b-pf2 { transform-origin: 49.5px 27px; animation: cd-pile 0.38s 1.12s var(--ease-out) both; }
.artdrop.is-in .b-pf3 { transform-origin: 40px 27px; animation: cd-pile 0.38s 1.19s var(--ease-out) both; }
.artdrop.is-in .b-pf4 { transform-origin: 60px 27px; animation: cd-pile 0.38s 1.26s var(--ease-out) both; }
.artdrop.is-in .b-pf5 { transform-origin: 44.5px 27px; animation: cd-pile 0.38s 1.33s var(--ease-out) both; }
.artdrop.is-in .b-pf6 { transform-origin: 58.3px 27px; animation: cd-pile 0.38s 1.40s var(--ease-out) both; }
.artdrop.is-in .b-pf7 { transform-origin: 31.5px 27px; animation: cd-pile 0.38s 1.47s var(--ease-out) both; }
.artdrop.is-in .b-pf8 { transform-origin: 69.8px 27px; animation: cd-pile 0.38s 1.54s var(--ease-out) both; }
.artdrop .b-dt > * { transform-box: fill-box; transform-origin: center; }
.artdrop.is-in .b-dt > * { animation: cd-mark 0.3s var(--ease-out) both; }
.artdrop.is-in .b-dt1 > * { animation-delay: 1.45s; }
.artdrop.is-in .b-dt1 > :nth-child(2n) { animation-delay: 1.50s; }
.artdrop.is-in .b-dt2 > * { animation-delay: 1.57s; }
.artdrop.is-in .b-dt2 > :nth-child(2n) { animation-delay: 1.62s; }
.artdrop.is-in .b-dt3 > * { animation-delay: 1.69s; }
.artdrop.is-in .b-dt3 > :nth-child(2n) { animation-delay: 1.74s; }
.artdrop.is-in .b-dt4 > * { animation-delay: 1.81s; }
.artdrop.is-in .b-dt4 > :nth-child(2n) { animation-delay: 1.86s; }
.artdrop.is-in .b-dt5 > * { animation-delay: 1.93s; }
.artdrop.is-in .b-dt5 > :nth-child(2n) { animation-delay: 1.98s; }
.artdrop.is-in .b-straw { transform-origin: 66px 10px; animation: cd-slide 0.45s 1.92s var(--ease-slide) both; }
.artdrop .b-sp { transform-box: view-box; transform-origin: 63px 12px; }
.artdrop.is-in .b-sip { animation: cd-show 0.05s 2.19s both; }
.artdrop.is-in .b-sp { animation: cd-arc 0.95s 2.19s both, cd-dropfade 0.95s 2.19s linear both; }
.artdrop.is-in .b-sp2, .artdrop.is-in .b-sp4 { animation-delay: 2.23s, 2.23s; }
.artdrop.is-in .b-sp1 { --dx: -8px; --dy: -6px; }
.artdrop.is-in .b-sp2 { --dx: -4px; --dy: -10px; }
.artdrop.is-in .b-sp3 { --dx: 1px; --dy: -12px; }
.artdrop.is-in .b-sp4 { --dx: 6px; --dy: -9px; }
.artdrop.is-in .b-sp5 { --dx: 9px; --dy: -4px; }
.artdrop.is-in .b-foam-in { transform-origin: 50px 29.5px; animation: cd-squish 0.5s 2.2s var(--ease-give) both; }
.artdrop.is-in .b-lip { animation: cd-show 0.12s 2.3s both; }
.artdrop.is-in .b-bubble { animation: cd-rise 6s infinite both; }
.artdrop .b-scoop, .artdrop .b-wet, .artdrop .b-scooper, .artdrop .b-foam-pop, .artdrop .b-fs { transform-box: view-box; }
.artdrop.is-plop .b-scoop,
.artdrop.is-plop .b-wet { transform-origin: 49px 54px; animation: cd-floatdrop 6.3s both, cd-floatfade 6.3s linear both; }
.artdrop.is-plop .b-scooper { transform-origin: 49px 54px; animation: cd-scooper 1.2s both, cd-scooperfade 1.2s linear both; }
.artdrop.is-plop .b-foam-pop { transform-origin: 50px 29.5px; animation: cd-squish 0.5s 0.98s var(--ease-give) both; }
.artdrop.is-plop .b-fsplash { animation: cd-show 0.05s 0.98s both; }
.artdrop.is-plop .b-fs { transform-origin: 49px 12px; animation: cd-arc 0.95s 0.98s both, cd-dropfade 0.95s 0.98s linear both; }
.artdrop.is-plop .b-fs2, .artdrop.is-plop .b-fs4 { animation-delay: 1.02s, 1.02s; }
.artdrop.is-plop .b-fs1 { --dx: -9px; --dy: -6px; }
.artdrop.is-plop .b-fs2 { --dx: -4px; --dy: -11px; }
.artdrop.is-plop .b-fs3 { --dx: 1px; --dy: -13px; }
.artdrop.is-plop .b-fs4 { --dx: 5px; --dy: -10px; }
.artdrop.is-plop .b-fs5 { --dx: 9px; --dy: -5px; }
.artdrop.is-fizz .b-bubble { display: none; }
.artdrop.is-in .b-bubble1 { animation-delay: 1.7s; }
.artdrop.is-in .b-bubble2 { animation-delay: 3.2s; }
.artdrop.is-in .b-bubble3 { animation-delay: 4.7s; }
.artdrop.is-in .b-bubble4 { animation-delay: 6.2s; }

@keyframes cd-squish {
  0%      { transform: none; }
  35%     { transform: scale(1.05, 0.9); }
  70%     { transform: scale(0.99, 1.02); }
  100%    { transform: none; }
}
@keyframes cd-splash {
  0%      { opacity: 0; }
  15%     { opacity: 1; }
  70%     { opacity: 1; }
  100%    { opacity: 0; }
}
@keyframes cd-fly {
  0%      { transform: scale(0.25); }
  65%     { transform: translate(var(--dx), var(--dy)) scale(1); }
  100%    { transform: translate(calc(var(--dx) * 1.3), calc(var(--dy) * 0.5)) scale(0.85); }
}
@keyframes cd-tilt {
  0%, 45% { transform: rotate(var(--tilt)); }
  78%     { transform: rotate(calc(var(--tilt) * -0.12)); }
  100%    { transform: none; }
}
@keyframes cd-fudge-a {
  0% { clip-path: polygon(0% 0%, 100% 0%, 100.0% 0.0%, 97.5% 0.0%, 95.0% 0.0%, 92.5% 0.0%, 90.0% 0.0%, 87.5% 0.0%, 85.0% 0.0%, 82.5% 0.0%, 80.0% 0.0%, 77.5% 0.0%, 75.0% 0.0%, 72.5% 0.0%, 70.0% 0.0%, 67.5% 0.0%, 65.0% 0.0%, 62.5% 0.0%, 60.0% 0.0%, 57.5% 0.0%, 55.0% 0.0%, 52.5% 0.0%, 50.0% 0.0%, 47.5% 0.0%, 45.0% 0.0%, 42.5% 0.0%, 40.0% 0.0%, 37.5% 0.0%, 35.0% 0.0%, 32.5% 0.0%, 30.0% 0.0%, 27.5% 0.0%, 25.0% 0.0%, 22.5% 0.0%, 20.0% 0.0%, 17.5% 0.0%, 15.0% 0.0%, 12.5% 0.0%, 10.0% 0.0%, 7.5% 0.0%, 5.0% 0.0%, 2.5% 0.0%, 0.0% 0.0%); }
  10% { clip-path: polygon(0% 0%, 100% 0%, 100.0% 28.1%, 97.5% 25.3%, 95.0% 23.8%, 92.5% 25.2%, 90.0% 27.3%, 87.5% 27.8%, 85.0% 27.6%, 82.5% 28.6%, 80.0% 29.8%, 77.5% 28.7%, 75.0% 25.8%, 72.5% 24.2%, 70.0% 25.2%, 67.5% 26.7%, 65.0% 26.8%, 62.5% 27.0%, 60.0% 28.7%, 57.5% 30.3%, 55.0% 29.2%, 52.5% 26.3%, 50.0% 24.8%, 47.5% 25.5%, 45.0% 26.2%, 42.5% 25.8%, 40.0% 26.2%, 37.5% 28.5%, 35.0% 30.4%, 32.5% 29.4%, 30.0% 26.9%, 27.5% 25.7%, 25.0% 26.1%, 22.5% 25.9%, 20.0% 25.0%, 17.5% 25.5%, 15.0% 28.2%, 12.5% 30.2%, 10.0% 29.5%, 7.5% 27.4%, 5.0% 26.6%, 2.5% 26.8%, 0.0% 25.9%); }
  20% { clip-path: polygon(0% 0%, 100% 0%, 100.0% 54.2%, 97.5% 51.8%, 95.0% 50.4%, 92.5% 51.6%, 90.0% 53.5%, 87.5% 53.9%, 85.0% 53.8%, 82.5% 54.7%, 80.0% 55.8%, 77.5% 54.8%, 75.0% 52.1%, 72.5% 50.8%, 70.0% 51.7%, 67.5% 53.0%, 65.0% 53.1%, 62.5% 53.2%, 60.0% 54.8%, 57.5% 56.1%, 55.0% 55.2%, 52.5% 52.6%, 50.0% 51.3%, 47.5% 52.0%, 45.0% 52.6%, 42.5% 52.2%, 40.0% 52.6%, 37.5% 54.6%, 35.0% 56.3%, 32.5% 55.4%, 30.0% 53.1%, 27.5% 52.1%, 25.0% 52.4%, 22.5% 52.3%, 20.0% 51.5%, 17.5% 51.9%, 15.0% 54.3%, 12.5% 56.1%, 10.0% 55.5%, 7.5% 53.6%, 5.0% 52.9%, 2.5% 53.0%, 0.0% 52.3%); }
  30% { clip-path: polygon(0% 0%, 100% 0%, 100.0% 73.8%, 97.5% 71.7%, 95.0% 70.5%, 92.5% 71.6%, 90.0% 73.2%, 87.5% 73.6%, 85.0% 73.5%, 82.5% 74.3%, 80.0% 75.2%, 77.5% 74.3%, 75.0% 72.0%, 72.5% 70.8%, 70.0% 71.6%, 67.5% 72.7%, 65.0% 72.8%, 62.5% 72.9%, 60.0% 74.3%, 57.5% 75.5%, 55.0% 74.7%, 52.5% 72.4%, 50.0% 71.3%, 47.5% 71.8%, 45.0% 72.4%, 42.5% 72.1%, 40.0% 72.4%, 37.5% 74.2%, 35.0% 75.6%, 32.5% 74.9%, 30.0% 72.9%, 27.5% 71.9%, 25.0% 72.3%, 22.5% 72.2%, 20.0% 71.4%, 17.5% 71.8%, 15.0% 73.9%, 12.5% 75.5%, 10.0% 74.9%, 7.5% 73.3%, 5.0% 72.7%, 2.5% 72.8%, 0.0% 72.1%); }
  40% { clip-path: polygon(0% 0%, 100% 0%, 100.0% 87.9%, 97.5% 86.0%, 95.0% 85.0%, 92.5% 85.9%, 90.0% 87.3%, 87.5% 87.6%, 85.0% 87.5%, 82.5% 88.2%, 80.0% 89.0%, 77.5% 88.2%, 75.0% 86.3%, 72.5% 85.2%, 70.0% 85.9%, 67.5% 86.9%, 65.0% 87.0%, 62.5% 87.1%, 60.0% 88.2%, 57.5% 89.3%, 55.0% 88.6%, 52.5% 86.6%, 50.0% 85.7%, 47.5% 86.1%, 45.0% 86.6%, 42.5% 86.3%, 40.0% 86.6%, 37.5% 88.1%, 35.0% 89.4%, 32.5% 88.7%, 30.0% 87.0%, 27.5% 86.2%, 25.0% 86.5%, 22.5% 86.4%, 20.0% 85.8%, 17.5% 86.1%, 15.0% 87.9%, 12.5% 89.3%, 10.0% 88.8%, 7.5% 87.4%, 5.0% 86.8%, 2.5% 87.0%, 0.0% 86.4%); }
  50% { clip-path: polygon(0% 0%, 100% 0%, 100.0% 97.2%, 97.5% 95.7%, 95.0% 94.8%, 92.5% 95.6%, 90.0% 96.7%, 87.5% 97.0%, 85.0% 96.9%, 82.5% 97.5%, 80.0% 98.2%, 77.5% 97.5%, 75.0% 95.9%, 72.5% 95.0%, 70.0% 95.6%, 67.5% 96.4%, 65.0% 96.5%, 62.5% 96.6%, 60.0% 97.5%, 57.5% 98.4%, 55.0% 97.8%, 52.5% 96.2%, 50.0% 95.4%, 47.5% 95.8%, 45.0% 96.2%, 42.5% 95.9%, 40.0% 96.2%, 37.5% 97.4%, 35.0% 98.5%, 32.5% 98.0%, 30.0% 96.5%, 27.5% 95.9%, 25.0% 96.1%, 22.5% 96.0%, 20.0% 95.5%, 17.5% 95.8%, 15.0% 97.3%, 12.5% 98.4%, 10.0% 98.0%, 7.5% 96.8%, 5.0% 96.4%, 2.5% 96.5%, 0.0% 96.0%); }
  60% { clip-path: polygon(0% 0%, 100% 0%, 100.0% 100.0%, 97.5% 100.0%, 95.0% 100.0%, 92.5% 100.0%, 90.0% 100.0%, 87.5% 100.0%, 85.0% 100.0%, 82.5% 100.0%, 80.0% 100.0%, 77.5% 100.0%, 75.0% 100.0%, 72.5% 100.0%, 70.0% 100.0%, 67.5% 100.0%, 65.0% 100.0%, 62.5% 100.0%, 60.0% 100.0%, 57.5% 100.0%, 55.0% 100.0%, 52.5% 100.0%, 50.0% 100.0%, 47.5% 100.0%, 45.0% 100.0%, 42.5% 100.0%, 40.0% 100.0%, 37.5% 100.0%, 35.0% 100.0%, 32.5% 100.0%, 30.0% 100.0%, 27.5% 100.0%, 25.0% 100.0%, 22.5% 100.0%, 20.0% 100.0%, 17.5% 100.0%, 15.0% 100.0%, 12.5% 100.0%, 10.0% 100.0%, 7.5% 100.0%, 5.0% 100.0%, 2.5% 100.0%, 0.0% 100.0%); }
  70% { clip-path: polygon(0% 0%, 100% 0%, 100.0% 100.0%, 97.5% 100.0%, 95.0% 100.0%, 92.5% 100.0%, 90.0% 100.0%, 87.5% 100.0%, 85.0% 100.0%, 82.5% 100.0%, 80.0% 100.0%, 77.5% 100.0%, 75.0% 100.0%, 72.5% 100.0%, 70.0% 100.0%, 67.5% 100.0%, 65.0% 100.0%, 62.5% 100.0%, 60.0% 100.0%, 57.5% 100.0%, 55.0% 100.0%, 52.5% 100.0%, 50.0% 100.0%, 47.5% 100.0%, 45.0% 100.0%, 42.5% 100.0%, 40.0% 100.0%, 37.5% 100.0%, 35.0% 100.0%, 32.5% 100.0%, 30.0% 100.0%, 27.5% 100.0%, 25.0% 100.0%, 22.5% 100.0%, 20.0% 100.0%, 17.5% 100.0%, 15.0% 100.0%, 12.5% 100.0%, 10.0% 100.0%, 7.5% 100.0%, 5.0% 100.0%, 2.5% 100.0%, 0.0% 100.0%); }
  80% { clip-path: polygon(0% 0%, 100% 0%, 100.0% 100.0%, 97.5% 100.0%, 95.0% 100.0%, 92.5% 100.0%, 90.0% 100.0%, 87.5% 100.0%, 85.0% 100.0%, 82.5% 100.0%, 80.0% 100.0%, 77.5% 100.0%, 75.0% 100.0%, 72.5% 100.0%, 70.0% 100.0%, 67.5% 100.0%, 65.0% 100.0%, 62.5% 100.0%, 60.0% 100.0%, 57.5% 100.0%, 55.0% 100.0%, 52.5% 100.0%, 50.0% 100.0%, 47.5% 100.0%, 45.0% 100.0%, 42.5% 100.0%, 40.0% 100.0%, 37.5% 100.0%, 35.0% 100.0%, 32.5% 100.0%, 30.0% 100.0%, 27.5% 100.0%, 25.0% 100.0%, 22.5% 100.0%, 20.0% 100.0%, 17.5% 100.0%, 15.0% 100.0%, 12.5% 100.0%, 10.0% 100.0%, 7.5% 100.0%, 5.0% 100.0%, 2.5% 100.0%, 0.0% 100.0%); }
  90% { clip-path: polygon(0% 0%, 100% 0%, 100.0% 100.0%, 97.5% 100.0%, 95.0% 100.0%, 92.5% 100.0%, 90.0% 100.0%, 87.5% 100.0%, 85.0% 100.0%, 82.5% 100.0%, 80.0% 100.0%, 77.5% 100.0%, 75.0% 100.0%, 72.5% 100.0%, 70.0% 100.0%, 67.5% 100.0%, 65.0% 100.0%, 62.5% 100.0%, 60.0% 100.0%, 57.5% 100.0%, 55.0% 100.0%, 52.5% 100.0%, 50.0% 100.0%, 47.5% 100.0%, 45.0% 100.0%, 42.5% 100.0%, 40.0% 100.0%, 37.5% 100.0%, 35.0% 100.0%, 32.5% 100.0%, 30.0% 100.0%, 27.5% 100.0%, 25.0% 100.0%, 22.5% 100.0%, 20.0% 100.0%, 17.5% 100.0%, 15.0% 100.0%, 12.5% 100.0%, 10.0% 100.0%, 7.5% 100.0%, 5.0% 100.0%, 2.5% 100.0%, 0.0% 100.0%); }
  100% { clip-path: polygon(0% 0%, 100% 0%, 100.0% 100.0%, 97.5% 100.0%, 95.0% 100.0%, 92.5% 100.0%, 90.0% 100.0%, 87.5% 100.0%, 85.0% 100.0%, 82.5% 100.0%, 80.0% 100.0%, 77.5% 100.0%, 75.0% 100.0%, 72.5% 100.0%, 70.0% 100.0%, 67.5% 100.0%, 65.0% 100.0%, 62.5% 100.0%, 60.0% 100.0%, 57.5% 100.0%, 55.0% 100.0%, 52.5% 100.0%, 50.0% 100.0%, 47.5% 100.0%, 45.0% 100.0%, 42.5% 100.0%, 40.0% 100.0%, 37.5% 100.0%, 35.0% 100.0%, 32.5% 100.0%, 30.0% 100.0%, 27.5% 100.0%, 25.0% 100.0%, 22.5% 100.0%, 20.0% 100.0%, 17.5% 100.0%, 15.0% 100.0%, 12.5% 100.0%, 10.0% 100.0%, 7.5% 100.0%, 5.0% 100.0%, 2.5% 100.0%, 0.0% 100.0%); }
}
@keyframes cd-puff {
  0%   { transform: scale(0.35, 0.15); opacity: 0; }
  15%  { opacity: 1; }
  70%  { transform: scale(1.06, 1.08); }
  100% { transform: none; }
}
@keyframes cd-fillup {
  from { transform: translateY(66px); }
  to   { transform: none; }
}
@keyframes cd-froth {
  from { transform: scaleY(0.2); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes cd-pile {
  from { transform: scale(0.45, 0.35); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes cd-arc {
  0%   { transform: scale(0.35); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
  38%  { transform: translate(calc(var(--dx) * 0.6), var(--dy)); animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0.3); }
  100% { transform: translate(calc(var(--dx) * 1.4), calc(var(--dy) * -0.3 + 8px)) scale(0.8); }
}
@keyframes cd-dropfade {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  60%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes cd-floatdrop {
  0%     { transform: translate(-58px, -60px); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);  }
  7.14% { transform: translate(-16px, -60px); animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); }
  8.89% { transform: translate(-10px, -65px) rotate(-12deg); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);  }
  10.48% { transform: translate(-5px, -64px) rotate(-6deg); animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0.3);  }
  19.37% { transform: translateY(6px) rotate(3deg); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
  26.03% { transform: translateY(-3px); animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  32.38% { transform: translateY(1.5px); animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  37.94% { transform: translateY(-0.8px); animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  42.86% { transform: none; animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  100%   { transform: translateY(18px); }
}
@keyframes cd-floatfade {
  0%     { opacity: 0; }
  2.38% { opacity: 1; }
  52.38% { opacity: 1; }
  100%   { opacity: 0; }
}
@keyframes cd-scooper {
  0%     { transform: translate(-58px, -60px); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
  37.5%  { transform: translate(-16px, -60px); animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); }
  46.7%  { transform: translate(-10px, -65px) rotate(-12deg); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
  53.3%  { transform: translate(-22px, -74px) rotate(-24deg); animation-timing-function: cubic-bezier(0.45, 0, 0.8, 0.5);  }
  100%   { transform: translate(-66px, -80px) rotate(-10deg); }
}
@keyframes cd-scooperfade {
  0%     { opacity: 0; }
  12%    { opacity: 1; }
  80%    { opacity: 1; }
  100%   { opacity: 0; }
}
@keyframes cd-mark {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes cd-pilerise {
  from { transform: translateY(4px) scale(0.3, 0.55); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes cd-fill {
  0%   { transform: scaleY(0); }
  100% { transform: none; }
}
@keyframes cd-slide {
  0%   { transform: translate(9px, -30px); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: none; }
}
@keyframes cd-rise {
  0%   { transform: none; opacity: 0; }
  8%   { opacity: 1; }
  70%  { transform: translateY(-22px); opacity: 1; }
  86%  { transform: translateY(-28px); opacity: 0; }
  100% { transform: none; opacity: 0; }
}

/* --- the coffee --- */
.artdrop .f-all, .artdrop .f-cup, .artdrop .f-mug, .artdrop .f-steam { transform-box: view-box; }
.artdrop.is-in .f-cup { transform-origin: 28px 82px; animation: cd-settle 0.5s 0.15s var(--ease-arrive) both; }
.artdrop.is-in .f-mug { transform-origin: 74px 82px; animation: cd-settle 0.5s 0.35s var(--ease-arrive) both; }
.artdrop.is-in .f-steam { animation: cd-steam 5.2s infinite both; }
.artdrop.is-in .f-steam path { animation: cd-wisp 5.2s infinite both; }
.artdrop.is-in .f-steam1,
.artdrop.is-in .f-steam1 path { animation-delay: 0.9s; }
.artdrop.is-in .f-steam2,
.artdrop.is-in .f-steam2 path { animation-delay: 2.5s; animation-duration: 6.4s; }
.artdrop.is-in .f-steam3,
.artdrop.is-in .f-steam3 path { animation-delay: 1.7s; animation-duration: 5.8s; }

.artdrop .f-pour, .artdrop .f-stream, .artdrop .f-splash,
.artdrop .f-sdrop { transform-box: view-box; }
.artdrop.is-in .f-pour { animation: cd-pour 20s 2s infinite both; }
.artdrop.is-in .f-stream { animation: cd-pourin 20s 2s infinite both; }
.artdrop.is-in .f-splash { animation: cd-crown 20s 2s infinite both; }
.artdrop.is-in .f-sdrop { animation: cd-splashout 20s 2s var(--ease-fly) infinite both; }

.artdrop .f-pour--mug .f-stream { --o-top: 104px 13px; --o-land: 74.8px 46px; }
.artdrop .f-pour--cup .f-stream { --o-top: -4px 17px; --o-land: 28.5px 50px; }
.artdrop .f-pour--mug .f-splash,
.artdrop .f-pour--mug .f-sdrop { transform-origin: 76.5px 40px; }
.artdrop .f-pour--cup .f-splash,
.artdrop .f-pour--cup .f-sdrop { transform-origin: 28.3px 46px; }

.artdrop.is-in .f-pour--cup,
.artdrop.is-in .f-pour--cup .f-stream,
.artdrop.is-in .f-pour--cup .f-splash,
.artdrop.is-in .f-pour--cup .f-sdrop { animation-delay: 12s; }

.artdrop.is-in .f-sdrop1 { --dx: -7px; --dy: -7px; }
.artdrop.is-in .f-sdrop2 { --dx: 7px;  --dy: -6px; }
.artdrop.is-in .f-sdrop3 { --dx: -3px; --dy: -10px; }
.artdrop.is-in .f-sdrop4 { --dx: 4px;  --dy: -9px; }

@keyframes cd-settle {
  0%   { transform: translateY(10px); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: none; opacity: 1; }
}
@keyframes cd-steam {
  0%   { transform: translateY(4px) scaleY(0.9); opacity: 0; }
  18%  { opacity: 0.9; }
  65%  { opacity: 0.55; }
  100% { transform: translateY(-11px) scaleY(1.2); opacity: 0; }
}
@keyframes cd-wisp {
  0%   { stroke-dasharray: 100 100; stroke-dashoffset: 100; stroke-width: 2; }
  30%  { stroke-dasharray: 100 100; stroke-dashoffset: 0; stroke-width: 1.7; }
  55%  { stroke-dasharray: 100 100; stroke-dashoffset: 0; stroke-width: 1.3; }
  100% { stroke-dasharray: 100 100; stroke-dashoffset: -100; stroke-width: 0.6; }
}
@keyframes cd-pour {
  0%, 1%       { opacity: 0; }
  1.01%, 15%   { opacity: 1; }
  15.01%, 100% { opacity: 0; }
}
@keyframes cd-pourin {
  0%, 1%    { transform-origin: var(--o-top); transform: scale(0);
              animation-timing-function: var(--ease-fall); }
  4.5%      { transform-origin: var(--o-top); transform: scale(1); }
  5%        { transform-origin: var(--o-land); transform: scale(1);
              animation-timing-function: var(--ease-tip); }
  11%       { transform-origin: var(--o-land); transform: scale(1); }
  15%, 100% { transform-origin: var(--o-land); transform: scale(0); }
}
@keyframes cd-splashout {
  0%, 4.5%  { transform: none; opacity: 0; }
  5.5%      { opacity: 1; }
  9%        { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 1; }
  11.5%     { transform: translate(calc(var(--dx) * 1.25), calc(var(--dy) * 0.4)) scale(0.8); opacity: 0; }
  12%, 100% { transform: none; opacity: 0; }
}
@keyframes cd-crown {
  0%, 4.5%  { transform: scale(0.2, 0.1); opacity: 0; }
  6%        { transform: scale(1.05, 1.1); opacity: 1; }
  8%        { transform: none; opacity: 1; }
  13%       { transform: scale(0.95, 0.85); opacity: 0.9; }
  15%, 100% { transform: scale(0.2, 0.1); opacity: 0; }
}

/* --- the iced coffee --- */
.artdrop .i-all, .artdrop .i-liquid, .artdrop .i-shine, .artdrop .i-ice,
.artdrop .i-cream, .artdrop .i-cream-in, .artdrop .i-straw, .artdrop .i-drop { transform-box: view-box; }
.artdrop.is-in .i-all { transform-origin: 50px 96px; --tilt: -6deg; animation: cd-tilt 1.6s var(--ease-arrive) both; }
.artdrop.is-in .i-liquid,
.artdrop.is-in .i-shine { transform-origin: 50px 96px; animation: cd-fill 0.7s 0.15s var(--ease-arrive) both; }
.artdrop.is-in .i-ice { animation: cd-plunk 0.45s var(--ease-plunk) both; }
.artdrop.is-in .i-ice1 { transform-origin: 34px 40px; animation-delay: 0.75s; }
.artdrop.is-in .i-ice2 { transform-origin: 48px 37px; animation-delay: 0.95s; }
.artdrop.is-in .i-ice3 { transform-origin: 41px 52px; animation-delay: 1.15s; }
.artdrop.is-in .i-cream { transform-origin: 50px 33px; animation: cd-puff 0.5s 1.35s var(--ease-spring) both; }
.artdrop.is-in .i-straw { transform-origin: 66px 8px; animation: cd-slide 0.45s 1.7s var(--ease-slide) both; }
.artdrop.is-in .i-cream-in { transform-origin: 50px 33px; animation: cd-squish 0.5s 1.9s var(--ease-give) both; }
.artdrop.is-in .i-drop { animation: cd-sweat 8s infinite both; }
.artdrop.is-in .i-drop1 { animation-delay: 2.6s; }
.artdrop.is-in .i-drop2 { animation-delay: 4.6s; }
.artdrop.is-in .i-drop3 { animation-delay: 6.6s; }
.artdrop.is-in .i-drop4 { animation-delay: 3.6s; }

@keyframes cd-plunk {
  0%   { transform: translateY(-34px) rotate(-16deg); opacity: 0; }
  15%  { opacity: 1; }
  70%  { transform: translateY(0) rotate(4deg); }
  100% { transform: none; }
}
@keyframes cd-sweat {
  0%, 10%   { transform: none; opacity: 1; }
  30%       { transform: translateY(6px); opacity: 1; }
  38%       { transform: translateY(9px); opacity: 0; }
  46%       { transform: none; opacity: 0; }
  54%, 100% { transform: none; opacity: 1; }
}

/* --- the affogato --- */
.artdrop .a-all { --fall: 90px; --squash: 0.86; }
.artdrop .a-scoop, .artdrop .a-shot, .artdrop .a-pour, .artdrop .a-pool { transform-box: view-box; }
.artdrop.is-in .a-scoop { transform-origin: 50px 93px; animation: cd-drop 0.55s 0.15s var(--ease-fall) both; }
.artdrop.is-in .a-shot { transform-origin: 61px 12px; animation: aff-tipin 0.6s 0.75s var(--ease-arrive) both, aff-nudge 7s 3.4s infinite; }
.artdrop.is-in .a-pour { transform-origin: 57.2px 24.3px; animation: aff-grow 0.35s 1.3s var(--ease-out) both; }
.artdrop.is-in .a-flow { animation: cd-fudge-a 1.1s 1.55s linear both; }
.artdrop.is-in .a-pool { animation: aff-rise 1.3s 1.6s var(--ease-fill) both; }
.artdrop .a-linein { transform-box: view-box; }
.artdrop.is-in .a-wetin { animation: aff-wetfill 1.3s 1.6s var(--ease-fill) both; }
.artdrop.is-in .a-deepin { animation: aff-deepfill 1.3s 1.6s var(--ease-fill) both; }
.artdrop.is-in .a-linein { animation: aff-rise 1.3s 1.6s var(--ease-fill) both; }
@keyframes aff-tipin {
  from { transform: rotate(38deg); opacity: 0; }
  30%  { opacity: 1; }
  to   { transform: none; opacity: 1; }
}
@keyframes aff-grow {
  from { transform: scale(0); }
  to   { transform: none; }
}
@keyframes aff-rise {
  from { transform: translateY(26px); }
  to   { transform: none; }
}
@keyframes aff-wetfill {
  from { clip-path: polygon(0% 111.1%, 100% 111.1%, 100% 130%, 0% 130%); }
  to   { clip-path: polygon(0% 50.9%, 100% 50.9%, 100% 130%, 0% 130%); }
}
@keyframes aff-deepfill {
  from { clip-path: polygon(0% 156.4%, 100% 156.4%, 100% 170%, 0% 170%); }
  to   { clip-path: polygon(0% 74.1%, 100% 74.1%, 100% 170%, 0% 170%); }
}
@keyframes aff-nudge {
  0%        { transform: none; }
  3%        { transform: rotate(-4deg); }
  6%        { transform: rotate(2deg); }
  9%, 100%  { transform: none; }
}

.artdrop.is-away,
.artdrop.is-away * { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .artdrop.is-in .c-cherry-in,
  .artdrop.is-in .s-cherry-in,
  .artdrop.is-in .k-cherry-in,
  .artdrop.is-in .b-bubble,
  .artdrop.is-in .f-steam,
  .artdrop.is-in .f-steam path,
  .artdrop.is-in .f-pour,
  .artdrop.is-in .f-stream,
  .artdrop.is-in .f-splash,
  .artdrop.is-in .f-sdrop,
  .artdrop.is-in .i-drop,
  .artdrop.is-in .a-shot { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* --- DESKTOP DENSITY --- */
@media (min-width: 900px) {
  :root { --s4: 2rem; --s5: 2.5rem; --s6: 4rem; }
  .masthead { padding-top: 0.9rem; }
  .masthead__since { padding-bottom: 0.9rem; font-size: 0.85rem; }
  .band { padding-block: 0.35rem; font-size: 1.05rem; }
  .wordmark { --mark: 5rem; }
  .centerpiece { padding: var(--s3) var(--gutter) var(--s2); }
  .centerpiece__rule { margin: 0.5rem auto; }
  .centerpiece__big { font-size: 3.6rem; }
  .centerpiece__over { font-size: 1.15rem; }
  .centerpiece__under { font-size: 1.1rem; }
  .footer__rule { margin: var(--s3) 0; }
}
@media (min-width: 1001px) {
  .tilegrid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
  .tile { padding: var(--s2) 0.9rem; }
  .tile.tile--art { flex-direction: column; justify-content: center; text-align: center; gap: 0.5rem; }
  .tile--art .tile__art { width: 72px; height: 75px; }
  .tile__display--slab    { font-size: 1.55rem; }
  .tile__display--western { font-size: 1.35rem; }
  .tile__display--script  { font-size: 2.1rem; }
  .tilegrid > .tile:nth-child(7) { border: 2px solid var(--black); box-shadow: inset 0 0 0 4px var(--white), inset 0 0 0 6px var(--black); }
  .tilegrid > .tile:nth-child(8) { border: 2px solid var(--black); border-left-width: 10px; border-right-width: 10px; box-shadow: none; }
  .section .subhead + .flavors { --cols: 8; --gap: 1rem; }
  .section .subhead + .flavors .flavor { --name-size: 0.95rem; }
  .section .subhead + .flavors .flavor__desc { font-size: 0.9375rem; }
  .mapframe { height: 260px; margin-top: var(--s3); }
}

/* --- PHONE FOOTER --- */
@media (max-width: 680px) {
  .footer { text-align: left; }
  .footer__inner { position: relative; padding-bottom: var(--s3); }
  .footer__rule { margin: var(--s2) 0; }
  .footer__cols { grid-template-columns: 1fr auto; justify-items: stretch; text-align: left; gap: var(--s2); }
  .footer__col { grid-column: 1; grid-row: 1; }
  .footer__col p { line-height: 1.5; }
  .footer__social { grid-column: 2; grid-row: 1; flex-direction: column; gap: 0; margin-right: -10px; }
  .footer__col--right { grid-column: 1 / -1; grid-row: 2; text-align: left; border-top: 1px solid var(--hair); padding-top: var(--s2); }
  .footer__links { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 0 0.8rem; margin-top: var(--s2); border-top: 1px solid var(--hair); font-size: 0.9375rem; }
  .footer__fine { flex-direction: column; align-items: flex-start; justify-content: flex-start; margin-top: 0; }
  .totop { position: absolute; margin: 0; right: var(--gutter); bottom: var(--s3); }
}
@media (max-width: 340px) {
  .footer__links { gap: 0 0.6rem; font-size: 0.875rem; }
}

/* --- DESKTOP MENU --- */
@media (min-width: 900px) {
  #navtoggle, .iconbtn--ghost { display: none; }
  .masthead__top { justify-content: center; }
  .masthead__since { padding-bottom: 0.2rem; }
  .masthead {
    position: sticky;
    top: var(--stick, -132px);
    z-index: 20;
    background: var(--white);
  }
  .nav, .nav.is-open { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition: none; padding-bottom: 0.3rem; }
  .nav ul { display: flex; justify-content: center; align-items: center; gap: 0 1.6rem; overflow: visible; max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }
  .nav li, .nav li:last-child { border: 0; margin: 0; max-width: none; }
  .nav a { position: relative; display: flex; align-items: center; min-height: 44px; padding: 0; font-size: 0.9rem; letter-spacing: 0.16em; text-transform: uppercase; }
  .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; border-top: 2px solid var(--red); transform: scaleX(0); transition: transform 200ms var(--ease-out); }
  .nav a[aria-current="page"]::after { transform: none; }
  .masthead--home::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 100%;
    max-width: var(--page);
    margin: 0 auto;
    height: 9px;
    border-top: 5px solid var(--black);
    border-bottom: 2px solid var(--black);
    background: var(--white);
    opacity: 0;
    transition: opacity 150ms var(--ease-out);
    pointer-events: none;
  }
  .masthead--home.is-stuck::after { opacity: 1; }
  :root { --pinned: 3.75rem; }
  html { scroll-padding-top: calc(var(--pinned) + 0.75rem); }
  .contactgrid__hours { top: calc(var(--pinned) + var(--s2)); }
  .dock { display: none; }
}
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .nav a:hover::after { transform: none; }
}

/* --- PHONE POPULAR ROW --- */
@media (max-width: 680px) {
  .section .subhead + .flavors {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    max-width: none;
    margin-inline: calc(-1 * var(--gutter));
    padding: 2px var(--gutter) 4px;
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pan-x pan-y;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .section .subhead + .flavors::-webkit-scrollbar { display: none; }
  .section .subhead + .flavors .flavor { flex: 0 0 42%; scroll-snap-align: start; }
}

/* --- HEADING ART --- */
.headart { display: block; width: auto; height: 88px; margin: 0 auto 0.4rem; }
@media (min-width: 681px) { .headart { height: 118px; margin-bottom: 0.6rem; } }

/* --- CHERRY DROP --- */
.drop {
  --hw: min(240px, 62vw);
  --u: calc(var(--hw) / 722);
  --cw: calc(90 * var(--u));
  --ch: calc(178.5 * var(--u));
  --F: calc(200 * var(--u));
  position: relative;
  display: inline-block;
  z-index: 3;
}
@media (min-width: 681px) { .drop { --hw: 300px; } }
.drop .btn-line { position: relative; }
.drop__fall {
  position: absolute;
  left: calc(55% - var(--cw) * 0.696);
  top: calc(-1 * var(--ch) + 3px);
  width: var(--cw);
  height: var(--ch);
  transform-origin: 69.6% 0.8%;
  pointer-events: none;
}
.drop__cherry { display: block; width: 100%; height: 100%; transform-origin: 50% 100%; }
.drop__hand {
  position: absolute;
  left: calc(55% - 40 * var(--u));
  top: calc(-1 * (var(--F) + var(--ch) * 0.992 + 282 * var(--u)));
  width: var(--hw);
  aspect-ratio: 722 / 354;
  pointer-events: none;
}
.drop__hand img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.drop__fall { filter: drop-shadow(2px 4px 4px rgba(18, 17, 16, 0.28)); }
.drop__hand { filter: drop-shadow(3px 6px 6px rgba(18, 17, 16, 0.22)); }
.drop__finger { transform-origin: 31.44% 30.51%; }
.drop__thumb { transform-origin: 59.28% 67.8%; }
.has-drop { overflow-x: clip; }

/* --- TILE MOSAIC --- */
.tilegrid { gap: 12px; grid-auto-flow: dense; }
.tile.tile--art { flex-direction: column; justify-content: flex-start; text-align: center; gap: 0.5rem; padding: 14px 10px 16px; }
.tile--art .tile__art { width: auto; height: 130px; max-width: 100%; object-fit: contain; }
.tilegrid > .tile:nth-child(1), .tilegrid > .tile:nth-child(3) { grid-column: 1 / -1; flex-direction: row; justify-content: center; text-align: left; gap: 1rem; }
.tilegrid > .tile:nth-child(1) .tile__art, .tilegrid > .tile:nth-child(3) .tile__art { height: 210px; }
.tilegrid > .tile:nth-child(1) .tile__display, .tilegrid > .tile:nth-child(3) .tile__display { font-size: clamp(2rem, 8vw, 3.4rem); }
@media (max-width: 599px) {
  .tilegrid > .tile:nth-child(3) .tile__display { font-size: clamp(1.2rem, min(calc(15.7vw - 30.6px), calc(8vw - 0.5px)), 3.4rem); }
}
@media (min-width: 681px) {
  .tile.tile--art { flex-direction: column; justify-content: flex-start; text-align: center; }
  .tile--art .tile__art { height: 150px; }
}
@media (min-width: 900px) {
  .tilegrid { grid-template-columns: repeat(4, 1fr); }
  .tilegrid > .tile:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; flex-direction: column; text-align: center; }
  .tilegrid > .tile:nth-child(1) .tile__art { height: 330px; }
  .tilegrid > .tile:nth-child(3) { grid-column: 4; grid-row: 1 / 3; flex-direction: column; text-align: center; }
  .tilegrid > .tile:nth-child(3) .tile__art { height: 300px; }
  .tilegrid > .tile:nth-child(3) .tile__display { font-size: clamp(1.6rem, 2.4vw, 2.3rem); }
  .tile--art .tile__art { height: 170px; }
}
.stayfeature__art--engraved { width: auto; height: 125px; }
@media (min-width: 681px) { .stayfeature__art--engraved { width: auto; height: 166px; } }

.tile--art .tile__art.tile__art--latte { width: 100%; box-sizing: border-box; padding: 7% 10%; object-fit: contain; }

/* --- CONTACT BUTTONS --- */
.helpgrid { max-width: var(--page); margin: 0 auto; padding: var(--s3) var(--gutter) var(--s4); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.helpgrid .tile { text-align: center; padding: var(--s3) var(--s2); }
@media (min-width: 900px) { .helpgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 680px) { .helpgrid .tile { padding: var(--s3) 0.6rem; } }
@media (max-width: 359px) { .helpgrid .tile__display--script { font-size: 1.4rem; } .helpgrid .tile__display--western { font-size: 0.95rem; } }
#form { scroll-margin-top: 1rem; }
.callbar + .helpgrid { padding-top: 0; }

.flavor__name > span.name--long { font-size: 0.85em; }
.flavor__name > span.name--xlong { font-size: 0.75em; }

/* --- PRESS PAGE --- */
.pr { max-width: 46rem; margin: 0 auto; }
.pr-intro { text-align: left; color: var(--soft); margin: 0 0 var(--s3); }
.pr-list { display: grid; text-align: left; border-top: 2px solid var(--black); }
.pr-row { position: relative; display: grid; gap: 0.15rem; padding: 0.75rem 2rem 0.75rem 0; border-bottom: 1px solid var(--hair); color: var(--black); text-decoration: none; }
.pr-row::after { content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; margin-top: -5px; border-right: 2px solid var(--red); border-bottom: 2px solid var(--red); transform: rotate(-45deg); }
.pr-out { font-family: var(--slab); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); }
.pr-out em { font-family: var(--body); font-style: italic; text-transform: none; letter-spacing: 0; color: var(--soft); font-size: 0.95rem; margin-left: 0.3rem; }
.pr-row b { font-weight: 400; font-size: 1.05rem; line-height: 1.35; }
@media (hover: hover) and (pointer: fine) { .pr-row:hover b, .pr-more:hover { color: var(--red); } }
.pr-row:active { background: var(--paper, #f4f2ee); }
.pr-lead { display: grid; text-align: left; }
.pr-lead > .pr-clip + .pr-clip { margin-top: var(--s4); }
.pr-lead__rule { border-top: 6px double var(--black); margin: var(--s4) 0 var(--s3); }
.pr-quote { margin: 0; display: grid; gap: 1rem; justify-items: center; text-align: center; }
.pr-quote blockquote { margin: 0; }
.pr-quote blockquote p { margin: 0; font-family: var(--swash); font-style: italic; font-weight: 700; font-size: clamp(1.75rem, 7vw, 2.75rem); line-height: 1.15; text-wrap: balance; }
.pr-quote blockquote p::before { content: "\201C"; color: var(--red); }
.pr-quote blockquote p::after { content: "\201D"; color: var(--red); }
.pr-quote figcaption { display: grid; gap: 0.3rem; justify-items: center; }
.pr-quote .pr-more { justify-self: center; }
.pr-lead > .head { text-align: center; }
.pr-clip { display: grid; grid-template-columns: 40% 1fr; gap: var(--s2); align-items: start; margin: 0; }
.pr-clip--big { grid-template-columns: 1fr; }
.pr-clip__img { display: block; margin: 6px; border: 2px solid var(--black); padding: 4px; background: #fff; box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--black); }
.pr-clip__img img { width: 100%; height: auto; }
.pr-clip figcaption { display: grid; gap: 0.3rem; align-content: start; }
.pr-clip b { font-family: var(--slab); font-weight: 400; font-size: 1.35rem; line-height: 1.15; }
.pr-said { color: var(--soft); line-height: 1.45; }
.pr-more { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; color: var(--black); }
@media (min-width: 681px) {
  .pr-clip { grid-template-columns: 34% 1fr; }
  .pr-clip.pr-clip--big { grid-template-columns: 58% 1fr; }
}
@media (min-width: 900px) {
  .pr-lead { grid-template-columns: 3fr 2fr; grid-template-rows: repeat(4, auto) 1fr; column-gap: var(--s4); align-items: start; }
  .pr-lead > * { grid-column: 1; }
  .pr-lead > .pr-clip:not(.pr-clip--big) { grid-column: 2; grid-row: 1 / -1; margin-top: 0; }
  .pr-quote blockquote p { font-size: 2.25rem; }
  .pr-clip, .pr-clip.pr-clip--big { grid-template-columns: 1fr; }
}

/* --- IN THE PRESS (homepage) --- */
.inpress__names { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 1.4rem; margin: 0 auto var(--s2); max-width: 36rem; }
.inpress__names span { font-family: var(--slab); font-size: 0.95rem; letter-spacing: 0.05em; text-transform: uppercase; }
.clipbtn { display: inline-grid; justify-items: center; gap: 0.1rem; padding: 0.55rem 1.3rem 0.6rem; background: var(--white); border: 1px solid var(--black); box-shadow: 3px 4px 0 rgba(18, 17, 16, 0.18); transform: rotate(-2deg); color: var(--black); text-decoration: none; transition: transform 0.2s var(--ease-out); }
.clipbtn__extra { font-family: var(--slab); font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); border-bottom: 1px solid var(--black); padding-bottom: 0.15rem; }
.clipbtn__read { font-family: var(--swash); font-style: italic; font-weight: 700; font-size: 1.3rem; }
.clipbtn:active { transform: rotate(-2deg) scale(0.97); }
@media (hover: hover) and (pointer: fine) { .clipbtn:hover { transform: rotate(0deg); } }

/* --- HALFTONE CARDS --- */
.flavors--halftone .flavor__frame--cut {
  background:
    url("/assets/img/card-dots.webp?v=1") center / cover no-repeat,
    url("/assets/img/card-grain.webp?v=1") 0 0 / 128px 128px,
    #ECE6D8;
}
.flavors--halftone .flavor__frame--cut img {
  background: transparent;
  filter: drop-shadow(3px 8px 6px rgba(40, 30, 20, 0.32));
}

/* --- TOP PAGE NUMBERS --- */
#board:has(.pager--top) .tabs { margin-bottom: var(--s3); }
.pager--top { margin: 0 0 var(--s3); scroll-margin-top: 1rem; }

/* --- HOME REEL --- */
.reel { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter) var(--s4); display: flex; justify-content: center; }
.reel__frame { position: relative; width: min(100%, 28rem); aspect-ratio: 4 / 5; }
@media (min-width: 900px) { .reel__frame { width: min(28rem, 45vh); } }
.reel__video { position: absolute; left: 20%; top: 20%; width: 60%; height: 60%; object-fit: cover; display: block; background: #1B1A19; }
.reel__deco { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@media (max-width: 680px) { .reel { padding-inline: 0.5rem; } }

/* --- PRESS NAMES --- */
.pr-clip .pr-name { font-family: var(--slab); font-size: 2rem; line-height: 1.05; color: var(--black); }
.pr-clip:not(.pr-clip--big) .pr-name { font-size: 1.45rem; }
.pr-kind { font-family: var(--slab); font-size: 0.95rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); vertical-align: 0.3em; white-space: nowrap; display: inline-block; line-height: 1; border: 1.5px solid var(--red); padding: 0.18em 0.45em 0.1em; margin-left: 0.15em; }
.pr-when { font-style: italic; color: var(--soft); }
.pr-clip b { font-family: var(--swash); font-style: italic; font-weight: 400; font-size: 1.2rem; line-height: 1.25; margin-top: 0.4rem; }
.pr-row .pr-out { font-size: 1.1rem; letter-spacing: 0.02em; text-transform: none; color: var(--black); }
.pr-row .pr-out .pr-kind { font-size: 0.85rem; vertical-align: 0.15em; }
.pr-row b { font-size: 0.98rem; color: var(--soft); }

/* --- MENU LIST ROWS --- */
@supports selector(:has(*)) {
  .menu__list:not(.menu__list--one) { display: grid; columns: auto; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 1), auto); }
  .menu__list:has(> li:nth-child(3)) { --rows: 2; }
  .menu__list:has(> li:nth-child(5)) { --rows: 3; }
  .menu__list:has(> li:nth-child(7)) { --rows: 4; }
  .menu__list:has(> li:nth-child(9)) { --rows: 5; }
  .menu__list:has(> li:nth-child(11)) { --rows: 6; }
  .menu__list:has(> li:nth-child(13)) { --rows: 7; }
  .menu__list:has(> li:nth-child(15)) { --rows: 8; }
  .menu__list:has(> li:nth-child(17)) { --rows: 9; }
  .menu__list:has(> li:nth-child(19)) { --rows: 10; }
  .menu__list:has(> li:nth-child(21)) { --rows: 11; }
  .menu__list:has(> li:nth-child(23)) { --rows: 12; }
  .menu__list:has(> li:nth-child(25)) { --rows: 13; }
  .menu__list:has(> li:nth-child(27)) { --rows: 14; }
  .menu__list:has(> li:nth-child(29)) { --rows: 15; }
  .menu__list:has(> li:nth-child(31)) { --rows: 16; }
  .menu__list:has(> li:nth-child(33)) { --rows: 17; }
  .menu__list:has(> li:nth-child(35)) { --rows: 18; }
  .menu__list:has(> li:nth-child(37)) { --rows: 19; }
  .menu__list:has(> li:nth-child(39)) { --rows: 20; }
}

/* --- BIG SCREENS --- */
@media (min-width: 2200px) { html { zoom: 1.35; } }
@media (min-width: 3200px) { html { zoom: 1.8; } }

/* --- GREEN CARDS --- */
.flavors--green .flavor__frame--cut { background: radial-gradient(circle at 50% 46%, #7C9B75 0%, #4A6C47 52%, #36522F 100%); }
.flavors--green .flavor__frame--cut img { background: transparent; filter: drop-shadow(3px 8px 6px rgba(8, 22, 8, 0.55)); }

/* --- REEL FRAMES --- */
.reel--two { align-items: flex-end; gap: 0.75rem; }
.reel__frame--carved { aspect-ratio: 1100 / 1316; --l: 10.8%; --t: 8.87%; --w: 78.99%; --h: 82.54%; }
.reel__frame--gilt { aspect-ratio: 1100 / 1241; --l: 19%; --t: 17.25%; --w: 61.83%; --h: 65.95%; }
.reel--two .reel__video, .reel__photo { position: absolute; left: var(--l); top: var(--t); width: var(--w); height: var(--h); object-fit: cover; display: block; }
.reel--two .reel__frame { width: calc(50% - 0.375rem); }
@media (min-width: 900px) {
  .reel--two { gap: var(--s3); }
  .reel--two .reel__frame { width: min(24rem, 40vh); }
}

/* --- REEL DEPTH --- */
.reel--two .reel__video, .reel--two .reel__photo { z-index: 0; }
.reel--two .reel__frame > picture { position: absolute; z-index: 2; inset: -0.75rem -0.5rem -2rem; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)) drop-shadow(0 8px 14px rgba(0,0,0,.24)); }
.reel--two .reel__deco { top: 0.75rem; left: 0.5rem; width: calc(100% - 1rem); height: calc(100% - 2.75rem); }
.reel--two .reel__frame::before { content: ""; position: absolute; left: var(--l); top: var(--t); width: var(--w); height: var(--h); z-index: 1; pointer-events: none;
  box-shadow: inset 0 1.1rem 1.1rem -0.5rem rgba(0,0,0,.75), inset 0.7rem 0 0.9rem -0.45rem rgba(0,0,0,.5), inset -0.4rem 0 0.7rem -0.4rem rgba(0,0,0,.35), inset 0 -0.3rem 0.5rem -0.3rem rgba(0,0,0,.3); }

/* --- REEL TAP --- */
.reel__tap { position: absolute; z-index: 3; left: var(--l); top: var(--t); width: var(--w); height: var(--h); padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.reel__tap[hidden] { display: none; }
.reel__tap:focus-visible { outline: 2px solid var(--red); outline-offset: -6px; }
.reel__glyph { position: absolute; left: 50%; top: 50%; width: 3rem; height: 3rem; margin: -1.5rem 0 0 -1.5rem; display: grid; place-items: center; color: #FFFFFF; opacity: 0; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(0,0,0,.35)); }
.reel__glyph svg { display: block; width: 2.5rem; height: 2.5rem; fill: currentColor; }
.reel__tap[data-state="playing"] .reel__icon-pause, .reel__tap[data-state="paused"] .reel__icon-play { display: none; }
.reel__tap.is-flash .reel__glyph { animation: reel-flash 700ms var(--ease-out) both; }
@keyframes reel-flash {
  0%   { opacity: 0; transform: scale(0.9); }
  15%  { opacity: 1; transform: scale(1); }
  70%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .reel__tap.is-flash .reel__glyph { animation: none; } }

/* --- HAPPY CUSTOMERS --- */
.snapcb { list-style: none; margin: var(--s3) calc(-1 * var(--gutter)) 0; padding: 1rem var(--gutter) 1.6rem; display: grid; grid-template-rows: repeat(3, 29vw); grid-auto-flow: column; grid-auto-columns: 29vw; gap: 14px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); }
.snapcb__cell { position: relative; box-sizing: border-box; scroll-snap-align: start; }
.snapcb__cell--cust { padding: 5px; background: var(--white); box-shadow: 0 2px 10px rgba(18,17,16,.18); }
.snapcb__cell--cust:nth-child(4n+1) { transform: rotate(-1.5deg); }
.snapcb__cell--cust:nth-child(4n+3) { transform: rotate(1.5deg); }
.snapcb__cell img { display: block; width: 100%; height: 100%; }
.snapcb__cell--cust img { object-fit: cover; object-position: 50% 40%; }
.snapcb__cell--prod img { box-sizing: border-box; object-fit: contain; padding: 2% 4% 20%; filter: drop-shadow(0 4px 6px rgba(0,0,0,.22)); }
.snapcb__face { position: absolute; inset: 0; transition: opacity 700ms var(--ease-in-out); }
.snapcb__face.is-new { opacity: 0; }
.snapcb__tag { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); margin: 0; font-family: var(--body); font-style: italic; font-size: 0.85rem; line-height: 1.15; color: var(--soft); text-align: center; width: max-content; max-width: 86%; }
@media (prefers-reduced-motion: reduce) { .snapcb__face { transition: none; } }
@media (min-width: 900px) {
  .snapcb { margin-inline: 0; padding-inline: 0; grid-template-rows: none; grid-auto-flow: row; grid-template-columns: repeat(7, 1fr); grid-auto-columns: auto; overflow: visible; gap: 22px; }
  .snapcb__cell { aspect-ratio: 1; }
  .snapcb__tag { font-size: 0.95rem; }
}

/* --- REEL SLIDES --- */
.reel__slides { position: absolute; z-index: 0; left: var(--l); top: var(--t); width: var(--w); height: var(--h); overflow: hidden; }
.reel__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 700ms var(--ease-in-out); }
.reel__slide.is-on { opacity: 1; }
.reel__slide--dolly { background: #FDB9D4; }
.reel__slide--latte-white-choc { background: #89663C; }
.reel__slide--latte-pumpkin { background: #C39041; }
.reel__slide--latte-candy-apple { background: #AB912D; }
.reel__slide--hot-chocolate { background: #74422F; }
.reel__next { position: absolute; z-index: 3; left: var(--l); top: var(--t); width: var(--w); height: var(--h); padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.reel__next[hidden], .reel__dots[hidden] { display: none; }
.reel__next:focus-visible { outline: 2px solid var(--red); outline-offset: -6px; }
.reel__dots { position: absolute; z-index: 4; left: 0; right: 0; bottom: -2.25rem; display: flex; justify-content: center; }
.reel--two { margin-bottom: 0.75rem; }
.reel__dots button { width: 32px; height: 32px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.reel__dots button::after { content: ""; width: 8px; height: 8px; background: var(--hair); transition: background 200ms var(--ease-out); }
.reel__dots button[aria-current="true"]::after { background: var(--red); }
.reel__dots button:focus-visible { outline: 2px solid var(--red); outline-offset: -4px; }
@media (prefers-reduced-motion: reduce) { .reel__slide { transition: none; } }