/* Header and footer shared by every page of www.mixlio.app. No icons.
   The markup lives in web/tools/build-cocktails.py (site_header / site_footer); it writes it into
   the generated pages and between the <!-- site-header --> / <!-- site-footer --> markers of the
   hand-written ones. Each page keeps its own .wrap, tokens and body styles. */
:root {
  --paper: #FAF5ED; --paper-2: #EBE0D2; --card: #FEF9F0; --tint: #F2E4CC;
  --ink: #372C20; --ink-soft: #7A6852; --line: #E2D2BA; --tan: #BBA98E;
  --accent: #A75D3F; --amber: #E39A3A; --gold: #C29A63;
  --deep: #2A2118; --pour: #231B14; --shadow: #372C20; --on-deep: #FAF5ED; --on-deep-soft: #D9CCB7;
  --cta: #E39A3A; --cta-ink: #2A2118; --cta-hover: #F0AE52;
  --serif: "Newsreader", Georgia, serif;
  --sans: "Geist", -apple-system, system-ui, sans-serif;
}
.skip { position: absolute; left: -999px; } .skip:focus { left: 16px; top: 16px; z-index: 200; background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 8px; }

.site-nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); font-family: var(--sans); }
.site-nav .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; height: 72px; }
.site-nav .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font: 600 24px var(--serif); letter-spacing: -.01em; justify-self: start; }
.site-nav .brand img { width: 34px; height: 34px; border-radius: 9px; }
.site-links { display: flex; gap: 34px; align-items: center; font-size: 15.5px; }
.site-links > a, .dd-btn { all: unset; cursor: pointer; color: var(--ink-soft); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; padding: 8px 0; }
.site-links > a:hover, .dd:hover .dd-btn, .dd:focus-within .dd-btn, .site-links [aria-current="page"] { color: var(--ink); }
.site-links [aria-current="page"] { box-shadow: inset 0 -1.5px 0 var(--accent); }
.dd-btn i { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: 45deg; translate: 0 -2px; transition: rotate .2s; }
.dd:hover .dd-btn i, .dd:focus-within .dd-btn i { rotate: 225deg; translate: 0 1px; }
.site-cta { justify-self: end; display: inline-flex; align-items: center; background: var(--cta); color: var(--cta-ink) !important; text-decoration: none;
  padding: 12px 24px; border-radius: 999px; font: 600 15.5px var(--sans); transition: transform .2s, background .2s; }
.site-cta:hover { transform: translateY(-2px); background: var(--cta-hover); }
.site-nav a:focus-visible, .site-nav summary:focus-visible, .dd-btn:focus-visible, .site-foot a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* the grouped panels (Cocktails, Tools): open on hover, and on tap/keyboard focus, no script */
.dd { position: relative; }
.dd-panel { position: absolute; left: 50%; top: calc(100% + 10px); translate: -50% 6px; min-width: 330px; padding: 10px; display: grid; gap: 2px;
  background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--shadow) 45%, transparent);
  opacity: 0; visibility: hidden; transition: opacity .18s, translate .18s, visibility .18s; }
.dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* keeps the hover alive across the gap */
.dd:hover .dd-panel, .dd:focus-within .dd-panel { opacity: 1; visibility: visible; translate: -50% 0; }
.dd-panel a { display: block; text-decoration: none; padding: 10px 14px; border-radius: 12px; }
.dd-panel a:hover, .dd-panel a:focus-visible { background: var(--paper-2); outline: none; }
.dd-panel b { display: block; font: 400 18px/1.25 var(--serif); color: var(--ink); } .dd-panel span { display: block; font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.dd-panel:not(.split) a:first-child { border-bottom: 1px solid var(--line); border-radius: 12px 12px 4px 4px; padding-bottom: 12px; margin-bottom: 4px; }
/* a panel split into named groups (Tools & Guidance): side by side, a thin line between them */
.dd-panel.split { grid-template-columns: 1fr 1fr; gap: 0; min-width: 580px; padding: 14px 10px 10px; }
.dd-col { display: grid; align-content: start; gap: 2px; padding: 0 4px; } .dd-col + .dd-col { border-left: 1px solid var(--line); }
.dd-h { font: 600 11px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); padding: 0 14px 6px; }

/* phones: the links fold into a "Menu" panel (a native <details>, so it works without script) */
.site-menu { display: none; justify-self: end; }
.site-menu summary { list-style: none; cursor: pointer; font: 600 15px var(--sans); color: var(--ink); padding: 10px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--ink); }
.site-menu summary::-webkit-details-marker { display: none; }
.site-menu summary::before, .site-menu summary::after { content: none; } /* pages style their own <summary> (e.g. the home FAQ); keep it off the menu button */
.site-menu[open] summary { background: var(--ink); color: var(--paper); }
/* while the menu is open the page behind it stays still, so a swipe scrolls the menu (iOS Safari otherwise scrolls the page) */
html:has(.site-menu[open]) { overflow: hidden; }
/* hamburger: three lines that turn into an X when the menu is open */
.site-menu summary:has(.burger) { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 12px; }
.burger, .burger::before, .burger::after { display: block; width: 22px; height: 2px; border-radius: 2px; background: currentColor; transition: rotate .2s, translate .2s, background .2s; }
.burger { position: relative; } .burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { translate: 0 -7px; } .burger::after { translate: 0 7px; }
.site-menu[open] .burger { background: transparent; } .site-menu[open] .burger::before { translate: 0; rotate: 45deg; } .site-menu[open] .burger::after { translate: 0; rotate: -45deg; }
.site-menu nav { position: fixed; left: 0; right: 0; top: 72px; background: var(--paper); border-bottom: 1px solid var(--line); max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 8px 24px 24px; box-shadow: 0 30px 40px -30px color-mix(in srgb, var(--shadow) 40%, transparent); display: grid; }
/* tablets: the open menu is a card under the button instead of a full-width sheet */
@media (min-width: 700px) { .site-menu nav { left: auto; right: 24px; width: 380px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 22px 22px; max-height: calc(100vh - 90px); max-height: calc(100dvh - 90px); } }
.site-menu nav > a { text-decoration: none; color: var(--ink); font: 400 24px/1.2 var(--serif); padding: 14px 0; border-bottom: 1px solid var(--line); }
.site-menu .m-group { padding: 14px 0 8px; border-bottom: 1px solid var(--line); display: grid; }
.site-menu .m-h { font: 600 11px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.site-menu .m-group a { text-decoration: none; color: var(--ink); font: 400 20px/1.2 var(--serif); padding: 8px 0; }
.site-menu nav a[aria-current="page"] { color: var(--accent); }
.site-menu nav .site-cta { justify-self: stretch; margin-top: 18px; justify-content: center; border-bottom: 0; font: 600 16px var(--sans); padding: 15px 20px; }
/* Download buttons share the "Get free" wine pill (the plan-tab buttons and the black badges keep their own look). */
a.btn[href*="apps.apple.com"]:not(.line):not(.go) { background: var(--cta); color: var(--cta-ink) !important; box-shadow: none; }
a.btn[href*="apps.apple.com"]:not(.line):not(.go):hover { background: var(--cta-hover); }

/* The "Get free" QR popup: opens next to whichever Get free button was clicked (script under the header), closes on a second click, outside click or Esc. Desktop with a mouse only. */
.get { justify-self: end; position: relative; }
.get-pop { position: fixed; z-index: 90; width: 196px; padding: 16px 14px 14px; background: var(--card); border: 1px solid var(--line);
  border-radius: 20px; box-shadow: 0 30px 60px -26px color-mix(in srgb, var(--shadow) 50%, transparent); animation: pop .18s ease-out; }
.get-pop[hidden] { display: none; }
@keyframes pop { from { opacity: 0; translate: 0 -6px; } }
.get-pop > b { display: block; font: 400 21px/1.1 var(--serif); color: var(--ink); }
.get-pop > p { margin: 4px 0 12px; font: 13px/1.4 var(--sans); color: var(--ink-soft); }
.get-pop .qr-card { padding: 9px; border-radius: 14px; } .get-pop .qr-card img { width: 100%; height: auto; }
.get-pop .store-badge { display: flex; justify-content: center; margin-top: 10px; padding: 7px 14px; border-radius: 11px; gap: 8px; }
.get-pop .store-badge svg { width: 20px; height: 20px; } .get-pop .store-badge span { font-size: 17px; } .get-pop .store-badge small { font-size: 10.5px; margin-bottom: 1px; }
.get-pop .pop-near, .get-pop .pop-close { display: none; }
/* small and touch screens: the same popup as a bottom sheet over a dimmed page */
@media (max-width: 960px), (hover: none) {
  .get-pop { inset: auto 0 0 0; width: auto; display: grid; justify-items: center; text-align: center; padding: 26px 24px calc(20px + env(safe-area-inset-bottom));
    border-radius: 28px 28px 0 0; border-bottom: 0; box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--deep) 55%, transparent); animation: sheet .22s ease-out; }
  @keyframes sheet { from { translate: 0 40px; opacity: 0; } }
  .get-pop > b { font-size: 26px; } .get-pop .pop-far { display: none; } .get-pop .pop-near { display: block; max-width: 34ch; font-size: 14.5px; margin: 6px 0 16px; }
  .get-pop .qr-card img { width: 150px; }
  .get-pop .store-badge { margin-top: 16px; width: min(100%, 360px); padding: 12px 20px; }
  .get-pop .pop-close { display: block; margin-top: 10px; padding: 12px 20px; background: none; border: 0; font: 600 15px var(--sans); color: var(--ink-soft); cursor: pointer; }
}

/* QR card + black App Store badge (home hero QR, footer, Get free popup). */
.qr-card { flex: none; padding: 10px; background: #FEF9F0; border: 1.5px solid #E2D2BA; border-radius: 18px; }
.qr-card img { display: block; width: 150px; height: 150px; }
.store-badge { display: inline-flex; align-items: center; gap: 12px; padding: 11px 26px 11px 20px; background: #000; color: #fff !important; text-decoration: none;
  border-radius: 14px; box-shadow: inset 0 0 0 1.5px #3B3128; transition: transform .2s; }
.store-badge:hover { transform: translateY(-2px); } .store-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.store-badge svg { width: 30px; height: 30px; flex: none; translate: 0 -2px; }
.store-badge span { display: flex; flex-direction: column; font: 600 25px/1 var(--sans); letter-spacing: -.01em; white-space: nowrap; }
.store-badge span small { font: 500 13.5px/1.2 var(--sans); letter-spacing: 0; margin-bottom: 3px; color: inherit; }
.getapp { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.getapp .qr-card { padding: 7px; border-radius: 14px; } .getapp .qr-card img { width: 92px; height: 92px; }
.getapp .store-badge { padding: 8px 18px 8px 14px; border-radius: 11px; gap: 9px; } .getapp .store-badge svg { width: 22px; height: 22px; }
.getapp .store-badge span { font-size: 19px; } .getapp .store-badge small { font-size: 11px; margin-bottom: 2px; }
/* small screens: QR on top, the badge the same width under it */
@media (max-width: 960px) {
  .getapp { display: grid; width: max-content; gap: 10px; }
  .getapp .qr-card img { width: 150px; height: 150px; } .getapp .qr-card { padding: 10px; border-radius: 16px; }
  .getapp .store-badge { display: flex; justify-content: center; }
}
.qr-row { display: flex; align-items: center; gap: 16px; margin-top: 22px; } .qr-row .qr-card img { width: 112px; height: 112px; }

/* hamburger on small screens and on every touch screen (an iPad in landscape is wide, but its fingers can't hover the dropdowns) */
@media (max-width: 960px), (hover: none) {
  .site-nav .wrap { grid-template-columns: 1fr auto; }
  .site-links, .site-nav .wrap > .get > .site-cta { display: none; } .site-nav .wrap > .get { display: contents; } /* .get stays: it holds the popup */
  .site-menu { display: block; }
}

.site-foot { border-top: 1px solid var(--line); padding: 64px 0 50px; font: 15px/1.6 var(--sans); color: var(--ink-soft); }
.site-foot .fgrid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 36px; }
.site-foot .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font: 600 22px var(--serif); }
.site-foot .brand img { width: 34px; height: 34px; border-radius: 9px; }
.site-foot h4, .site-foot .fh { font: 600 12px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); margin: 0 0 14px; }
.site-foot ul { list-style: none; padding: 0; margin: 0; } .site-foot li { margin: 0 0 9px; }
.site-foot a { color: inherit; text-decoration: none; } .site-foot a:hover { color: var(--ink); }
.site-foot p { margin: 14px 0 0; max-width: 32ch; }
.site-foot .fl { display: flex; gap: 20px; flex-wrap: wrap; }
.site-foot .fbase { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-top: 1px solid var(--line); margin-top: 48px; padding-top: 24px; font-size: 13px; }
@media (max-width: 960px) { .site-foot .fgrid { grid-template-columns: repeat(4, 1fr); gap: 36px 24px; } .site-foot .fgrid > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 640px) { .site-foot .fgrid { grid-template-columns: 1fr 1fr; } }

/* "The pour": each taste profile's card holds its drink. Three ingredient colours sit in layers at the
   bottom like a cocktail in a glass (--a bottom, --b middle, --c top), with a wavy surface and a few bubbles.
   Used by the home page (Chapter II + III) and the /drinkers/ pages. The fill stays put on hover so text stays readable.
   Set --fill to change the resting level. */
[data-p="rich"]   { --a: #6B3A24; --b: #B9773F; --c: #EBCB9E; } /* cacao, espresso crema, cream */
[data-p="citrus"] { --a: #F1BE2B; --b: #86BE3E; --c: #F28A5B; } /* lemon zest, lime, grapefruit */
[data-p="smoky"]  { --a: #D9482B; --b: var(--ink-soft); --c: #A3201F; } /* ember, peat smoke, chili */
[data-p="sweet"]  { --a: #D6336C; --b: #F59F3A; --c: #F7C59F; } /* raspberry, passion fruit, peach */
[data-p="herbal"] { --a: #3F6B4A; --b: #B5C33A; --c: #8A6A3E; } /* rosemary, chartreuse, oak barrel */
[data-p="botan"]  { --a: #6FC1A9; --b: #EFE6B5; --c: #4F6D8A; } /* cucumber, elderflower, juniper */
.pour { background: var(--pour); color: var(--paper); border: 1px solid rgb(255 255 255 / .08); position: relative; overflow: hidden; isolation: isolate; }
.pour > * { position: relative; z-index: 2; }
.pour::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--fill, 36%); z-index: 0;
  background: linear-gradient(180deg, var(--c) 0%, var(--b) 45%, var(--a) 100%); transition: height .7s cubic-bezier(.2,.8,.2,1);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' preserveAspectRatio='none'><path d='M0 14 Q 50 0 100 14 T 200 14 T 300 14 T 400 14 V400 H0Z' fill='black'/></svg>") top / 100% 100%;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' preserveAspectRatio='none'><path d='M0 14 Q 50 0 100 14 T 200 14 T 300 14 T 400 14 V400 H0Z' fill='black'/></svg>") top / 100% 100%; }
.pour::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--fill, 36%); z-index: 1; pointer-events: none; transition: height .7s cubic-bezier(.2,.8,.2,1);
  background: radial-gradient(circle at 20% 70%, rgb(255 255 255 / .35) 0 2px, transparent 3px), radial-gradient(circle at 60% 40%, rgb(255 255 255 / .3) 0 1.5px, transparent 2.5px), radial-gradient(circle at 80% 80%, rgb(255 255 255 / .3) 0 2px, transparent 3px); }
.pour.pouring::before, .pour.pouring::after { animation: pourIn .9s cubic-bezier(.2,.8,.2,1); }
@keyframes pourIn { from { height: 0; } }
@media (prefers-reduced-motion: reduce) { .pour::before, .pour::after { transition: none; animation: none !important; } }

/* Plans: Free and Premium as two printed bar tabs (home Chapter V + /pricing). Markup and prices: plan_tabs()
   in web/tools/build-cocktails.py. */
.tabs2 { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: stretch; max-width: 940px; margin: 0 auto; }
.tab { background: var(--card); padding: 34px 34px 40px; position: relative; box-shadow: 0 30px 60px -36px color-mix(in srgb, var(--shadow) 50%, transparent); font-family: var(--serif);
  -webkit-mask: radial-gradient(circle 8px at 50% 100%, transparent 7.5px, #000 8px) bottom / 22px 100% repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat;
          mask: radial-gradient(circle 8px at 50% 100%, transparent 7.5px, #000 8px) bottom / 22px 100% repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - 8px) no-repeat; }
.tab { display: flex; flex-direction: column; } .tab .rows { flex: 1; }
.tab.pro { background: var(--ink); color: var(--paper); }
.tab .hd { text-align: center; border-bottom: 1.5px dashed currentColor; padding-bottom: 16px; margin-bottom: 14px; } .tab .hd b { font: 500 13px var(--sans); letter-spacing: .4em; display: block; }
.tab .hd h3 { font: italic 400 46px/1 var(--serif); margin: 10px 0 4px; } .tab.pro .hd h3 { color: var(--amber); } .tab .hd span { font-size: 15px; opacity: .75; }
.tab .ln { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 8px 0; font-size: 18px; border-bottom: 1px dotted color-mix(in srgb, var(--ink-soft) 40%, transparent); }
.tab .ln em { font: italic 400 16px var(--serif); color: var(--accent); } .tab.pro .ln em { color: var(--amber); } .tab.pro .ln { border-color: color-mix(in srgb, var(--on-deep) 20%, transparent); }
.tab .go { display: block; text-align: center; margin-top: 22px; }
.pb { margin-top: 18px; padding-top: 18px; border-top: 2px solid currentColor; }
.pb h4 { font: 500 30px/1.1 var(--serif); margin: 0; letter-spacing: -.01em; }
.pb b { display: block; font: 400 clamp(64px, 8vw, 96px)/1 var(--serif); letter-spacing: -.03em; margin: 12px 0 8px; color: var(--accent); }
.tab.pro .pb b { color: var(--amber); }
.pb p { margin: 0; font: 400 14.5px/1.5 var(--sans); opacity: .75; }
.tab.pro .btn { background: var(--amber); color: var(--ink) !important; }
@media (max-width: 800px) { .tabs2 { grid-template-columns: 1fr; } }
.tab .ln { list-style: none; }
.tab .btn.line { color: var(--ink) !important; box-shadow: inset 0 0 0 1.5px var(--ink); background: transparent; }
.tab .btn { font-family: var(--sans); }

/* "More from Mixlio": cards that link the recipe library and the two tools to each other */
.more-tools { padding: 20px 0 80px; }
.more-tools h2 { font: 350 clamp(32px, 4vw, 48px)/1.05 var(--serif); margin: 8px 0 26px; } .more-tools h2 em { color: var(--accent); }
.mt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.mt-card { display: block; text-decoration: none; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 24px 28px; transition: transform .25s, box-shadow .25s; }
.mt-card:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -28px color-mix(in srgb, var(--shadow) 55%, transparent); }
.mt-card small { font: 600 11px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.mt-card b { display: block; font: 400 26px/1.1 var(--serif); margin: 4px 0 6px; }
.mt-card span { font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; display: block; }
.mt-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 520px) { .mt-card { padding: 20px 22px; } .mt-card b { font-size: 22px; } }
.hw-end a.btn[href*="apps.apple.com"], .end2 a.btn[href*="apps.apple.com"] { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--on-deep) 28%, transparent); }

/* Espresso & Amber: the app's espresso ink as the header and dark bands, the app's amber for the buttons.
   .band-deep re-points the tokens inside a dark area, so everything in it (text, cards, lines) flips at once. */
.site-nav { background: var(--ink); border-bottom-color: var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-nav .brand { color: var(--on-deep); }
.site-links > a, .dd-btn { color: #CDBFA8; }
.site-links > a:hover, .dd:hover .dd-btn, .dd:focus-within .dd-btn, .site-links [aria-current="page"] { color: var(--on-deep); }
.site-links [aria-current="page"] { box-shadow: inset 0 -1.5px 0 var(--amber); }
.site-nav .wrap > .site-menu summary { color: var(--on-deep); box-shadow: none; }
.site-nav .wrap > .site-menu[open] summary { background: color-mix(in srgb, var(--on-deep) 12%, transparent); color: var(--on-deep); }
.band-deep, .site-foot { background: var(--deep); color: var(--ink);
  --paper: var(--deep); --paper-2: #3F372F; --card: #3C342C; --ink: #FAF5ED; --ink-soft: #BCB5AD; --line: #4F473E; --tan: #736B63; }
/* the soft grey text is a shade darker on the beige bands, so it keeps 4.5:1 contrast there */
.band-tint { background: var(--tint); --paper: var(--tint); --card: #F9F1E5; --ink-soft: #6E5C48; }
.band-alt { background: var(--paper-2); --paper: var(--paper-2); --ink-soft: #6E5C48; }
.profile, .hw-end, .end2, .a-help, .ticket, .tab.pro { background: var(--deep) !important; }