/* Canefrost Bold, the same system as the app (android/app/.../ui/Theme.kt):
   deep green canvas, cream text, paper cards, one yellow accent.
   Outfit (Google Fonts) for labels in CAPS, DM Serif Display for names; running text in sentence case. */
/* fonts: self-hosted (no third-party requests), swap so text shows at once */
@font-face { font-family: "Outfit"; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/outfit-400.woff2) format("woff2") }
@font-face { font-family: "Outfit"; font-weight: 500 600; font-style: normal; font-display: swap; src: url(/fonts/outfit-600.woff2) format("woff2") }
@font-face { font-family: "Outfit"; font-weight: 700 900; font-style: normal; font-display: swap; src: url(/fonts/outfit-900.woff2) format("woff2") }
@font-face { font-family: "DM Serif Display"; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/dmserif-400.woff2) format("woff2") }
:root { color-scheme: dark;
  --bg: #0C4A33; --bg2: #0A3F2B; --deep: #062A1C; --line: rgba(245,231,207,.16);
  --cream: #F5E7CF; --paper: #FBF4E6; --ink: #13281F; --ink-mute: #4C5A52;
  --yellow: #F5E866; --leaf: #127743;
  --t-blends: #F3DF7A; --t-fusion: #A9465A; --t-pops: #C9A158; --t-specials: #F4EAD2;
  --r: 18px; --pad: clamp(18px, 4vw, 56px);
}
* { box-sizing: border-box; margin: 0 }
html { scroll-behavior: smooth }
body { background: var(--bg); color: var(--cream); font-family: "Outfit", system-ui, sans-serif; font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased }
img, video { display: block; max-width: 100% }
a { color: inherit }
.serif { font-family: "DM Serif Display", serif; font-weight: 400 }
.label { font-weight: 900; text-transform: uppercase; letter-spacing: .04em; font-size: 13px }
.yellow { color: var(--yellow) }
.pad { padding-left: var(--pad); padding-right: var(--pad) }

/* header */
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px var(--pad); background: rgba(6,42,28,.86); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line) }
.top .logo img { height: 24px }
.top nav { display: flex; gap: 6px; padding: 5px; border-radius: 16px; background: var(--bg2) }
.top nav a { text-decoration: none; font-weight: 900; text-transform: uppercase; font-size: 13px; letter-spacing: .03em; padding: 10px 16px; border-radius: 12px }
.top nav a[aria-current="page"] { background: var(--yellow); color: var(--ink) }
.top nav a:hover:not([aria-current]) { background: rgba(245,231,207,.08) }
.menu-btn { display: none; background: none; border: 0; color: var(--cream); width: 44px; height: 44px; border-radius: 12px; cursor: pointer }
.menu-btn:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px }

/* buttons and tags */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border-radius: 14px; background: var(--yellow); color: var(--ink); font: 900 15px/1 "Outfit", sans-serif; text-transform: uppercase; letter-spacing: .03em; text-decoration: none; border: 1.5px solid var(--yellow); cursor: pointer }
.btn.ghost { background: none; color: var(--cream); border-color: rgba(245,231,207,.6) }
.btn.dark { background: var(--bg); color: var(--cream); border-color: var(--bg) }
.tag { display: inline-block; font-weight: 900; text-transform: uppercase; font-size: 12px; letter-spacing: .03em; padding: 4px 8px; border-radius: 6px; color: var(--ink) }
.tag.blends { background: var(--t-blends) } .tag.fusion { background: var(--t-fusion); color: var(--paper) } .tag.pops { background: var(--t-pops) } .tag.specials { background: var(--t-specials); color: #6E3A40 }
.row { display: flex; gap: 12px; flex-wrap: wrap }

/* page header for inner pages */
.pagehead { padding: clamp(48px, 8vw, 120px) var(--pad) clamp(32px, 5vw, 64px) }
.pagehead h1 { font-family: "DM Serif Display", serif; font-weight: 400; font-size: clamp(52px, 9vw, 140px); line-height: .95; letter-spacing: -.01em; max-width: 14ch }
.pagehead p { max-width: 52ch; font-size: 19px; margin-top: 22px }

/* paper card */
.paper { background: var(--paper); color: var(--ink); border-radius: var(--r) }
.paper .mute { color: var(--ink-mute) }

/* footer */
footer { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; padding: 40px var(--pad) 32px; border-top: 1px solid var(--line); background: var(--deep) }
footer img { height: 22px; margin-bottom: 12px }
footer .links { display: flex; flex-wrap: wrap; gap: 8px 22px }
footer a { text-decoration: none; font-weight: 900; text-transform: uppercase; font-size: 13px; letter-spacing: .03em; opacity: .9 }
footer a:hover { opacity: 1; text-decoration: underline }
footer small { display: block; opacity: .75; font-size: 14px; margin-top: 10px }

@media (max-width: 860px) {
  .menu-btn { display: inline-grid; place-items: center }
  .top nav { display: none; position: absolute; top: 100%; left: 12px; right: 12px; flex-direction: column; padding: 8px; box-shadow: 0 18px 40px rgba(0,0,0,.35) }
  .top nav.open { display: flex }
  .top nav a { padding: 14px 16px; font-size: 15px }
  .top .order { display: none }
  footer { grid-template-columns: 1fr }
}
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise .9s cubic-bezier(.2,.8,.2,1) both }
  @keyframes rise { from { opacity: 0; transform: translateY(18px) } }
}

/* trademark sign beside the logo */
footer .mark { display: inline-flex; align-items: flex-start }
footer .mark img { margin-bottom: 12px }