/* /coffee/ — Little Loom Coffee palette + page extras (steam, menu). Shared layout lives in /assets/css/demo.css. */
@font-face { font-family: "Young Serif"; src: url(/assets/fonts/young-serif.woff2) format("woff2"); font-weight: 400; font-display: swap; }
.cf-page {
  --pg-bg: #f7f1ea; --pg-ink: #2a1a12; --bg: #efe6da; --ink: #2a1a12;
  --bar-bg: #2a1a12; --bar-fg: #f7ecdf; --tag: #e7a77f;
  --btn-bg: #b4563a; --btn-fg: #fff7ef; --accent: #b4563a;
  --giant: rgba(255, 255, 255, .35); --spot: rgba(255, 236, 214, .3);
  --order-bg: #2a1a12; --order-fg: #f7ecdf;
  --f-display: "Young Serif", Georgia, serif; --h-weight: 400; --giant-weight: 400;
}
.cf-page h1, .cf-page h2, .cf-page h3 { letter-spacing: -.02em; line-height: 1.02; }
.cf-page .dm-bar__name { font-weight: 400; font-size: 1.2rem; }
.cf-page .dm-bar .dm-btn { --btn-bg: #e7a77f; --btn-fg: #2a1a12; }
.cf-page .dm-kicker, .cf-page .dm-eyebrow { color: #b4563a; }
.dm-on .cf-page .dm-stage .dm-kicker { color: color-mix(in srgb, var(--ink) 60%, #b4563a); }

/* Soft floor shadow under the saucer */
.dm-on .cf-page .dm-obj::after {
  content: ""; position: absolute; left: 22%; right: 22%; bottom: 12%; height: 9%; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(40, 20, 8, .28), transparent); filter: blur(6px);
}

/* Steam over the finished cup */
.cf-steam svg { position: absolute; left: 50%; top: 2svh; width: min(16vw, 150px); height: 34svh; translate: -50% 0; overflow: visible; }
.cf-steam path { fill: none; stroke: rgba(255, 246, 236, .55); stroke-width: 7; stroke-linecap: round; filter: blur(5px);
  stroke-dasharray: 60 240; animation: cf-steam 3.6s linear infinite; }
.cf-steam path:nth-child(2) { animation-delay: -1.2s; animation-duration: 4.2s; }
.cf-steam path:nth-child(3) { animation-delay: -2.4s; animation-duration: 3.9s; }
@keyframes cf-steam { from { stroke-dashoffset: 300; opacity: 0; } 20% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 0; } }
@media (max-width: 800px) { .cf-steam svg { top: calc(var(--bar-h) + 1svh); height: 22svh; } }
@media (prefers-reduced-motion: reduce) { .cf-steam path { animation: none; } }

/* Menu */
.cf-menu { background: #f7f1ea; }
.cf-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; }
.cf-cols h3 { font-size: 1.8rem; margin-bottom: 1rem; }
.cf-list { margin: 0; }
.cf-list div { display: flex; align-items: baseline; gap: .8rem; padding: .7rem 0; border-bottom: 1px dashed rgba(42, 26, 18, .25); font-size: 1.1rem; }
.cf-list dt { font-weight: 600; }
.cf-list div::after { content: none; }
.cf-list dd { margin: 0 0 0 auto; font-family: var(--f-mono); }
.cf-small { margin: 1.6rem 0 0; font-size: .9rem; opacity: .75; }
.cf-visit { background: #efe6da; padding-top: 0; }
.cf-page .dm-order .dm-btn { --btn-bg: #e7a77f; --btn-fg: #2a1a12; }
@media (max-width: 800px) { .cf-cols { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }
.cf-page .dm-giant { font-size: clamp(5rem, 12vw, 12rem); }