:root {
    --bg: #F6EFE2;
    --surface: #FFFFFF;
    --surface-2: #FBF6EC;
    --line: #E7DCC5;
    --ink: #2E2013;
    --ink-muted: #8A7864;
    --accent: #B5652D;
    --badge-bg: #3B2A1F;
    --badge-text: #F6EFE2;
    --tip-bg: #F1E7D3;
    --heart: #B5442E;
  }
  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  html, body { margin:0; padding:0; background:var(--bg); color:var(--ink); min-height:100dvh; font-family:'Work Sans', system-ui, sans-serif; -webkit-font-smoothing:antialiased; }
  body { display:flex; flex-direction:column; }

  header.app-header { display:flex; align-items:center; justify-content:space-between; padding: 18px 20px 8px; max-width: 480px; width:100%; margin:0 auto; }
  header.app-header .brand { font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-muted); font-weight:600; }
  header.app-header .brand b { color:var(--accent); }

  main { flex:1; width:100%; max-width:480px; margin:0 auto; padding: 6px 16px 100px; }

  .card { background:var(--surface); border:1px solid var(--line); border-radius:22px; overflow:hidden; box-shadow: 0 18px 40px -24px rgba(46,32,19,0.35); margin-bottom:16px; }

  .hero { position:relative; aspect-ratio: 4 / 3; background: linear-gradient(135deg, #EFDFC4, #DEBF95); display:flex; align-items:center; justify-content:center; }
  .hero img { width: 42%; max-width:170px; opacity:0.92; }
  .hero img.is-photo { width:100%; height:100%; max-width:none; object-fit:cover; opacity:1; }
  .badge { position:absolute; top:14px; left:14px; background:var(--badge-bg); color:var(--badge-text); font-size:10px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; padding:7px 12px; border-radius:999px; }
  .ai-badge { position:absolute; bottom:10px; right:10px; background:rgba(46,32,19,0.72); color:#F6EFE2; font-size:9.5px; font-weight:600; letter-spacing:0.03em; padding:5px 9px; border-radius:999px; display:flex; align-items:center; gap:4px; }

  .body { padding: 18px 20px 22px; }

  h1 { font-family:'Fraunces', Georgia, serif; font-weight:700; font-size:26px; line-height:1.1; margin: 0 0 6px; }
  .category { font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); margin:0 0 6px; }
  .alcohol-tag { display:inline-block; font-size:11px; font-weight:600; color:#8A3B1E; background:#F3DCC9; padding:4px 10px; border-radius:999px; margin: 0 0 14px; }
  .subtitle { font-size:13.5px; color:var(--ink-muted); margin: 0 0 16px; }

  .stats { display:flex; gap:18px; padding: 12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:18px; }
  .stat { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink); }
  .stat .e { font-size:14px; }

  .section-title { display:flex; align-items:center; gap:8px; font-family:'Fraunces', Georgia, serif; font-weight:700; font-size:15px; margin: 0 0 10px; letter-spacing:0.01em; }
  .section-title .e { font-size:16px; }

  .ingredients { list-style:none; margin:0 0 20px; padding:0; }
  .ingredients li { display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); font-size:14px; }
  .ingredients li:last-child { border-bottom:none; }
  .ingredients .amount { color:var(--ink-muted); font-weight:500; white-space:nowrap; }

  .steps { list-style:none; margin:0 0 20px; padding:0; counter-reset: step; }
  .steps li { display:flex; gap:12px; margin-bottom:12px; font-size:14px; line-height:1.5; }
  .steps li:last-child { margin-bottom:0; }
  .steps .num { flex-shrink:0; width:24px; height:24px; border-radius:50%; background:var(--badge-bg); color:var(--badge-text); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; }

  .tip-box { display:flex; gap:12px; background:var(--tip-bg); border-radius:14px; padding:14px 16px; margin-bottom:18px; }
  .tip-box .e { font-size:20px; line-height:1; }
  .tip-box .txt b { display:block; font-size:12px; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:4px; color:var(--ink); }
  .tip-box .txt p { margin:0; font-size:13.5px; color:var(--ink-muted); line-height:1.5; }

  .shop-link { display:flex; align-items:center; justify-content:space-between; gap:10px; text-decoration:none; border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:18px; }
  .shop-link .txt { font-size:13.5px; color:var(--ink); font-weight:500; }
  .shop-link small { display:block; color:var(--ink-muted); font-size:10px; letter-spacing:0.06em; text-transform:uppercase; margin-top:2px; font-weight:400; }
  .shop-link .arrow { color:var(--accent); font-size:16px; }

  .actions { display:flex; gap:10px; }
  .btn { flex:1; display:flex; align-items:center; justify-content:center; gap:7px; font-size:13px; font-weight:600; padding:12px 10px; border-radius:12px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink); cursor:pointer; }
  .btn:active { transform:scale(0.98); }
  .btn.fav.active { background: rgba(181,68,46,0.1); border-color:var(--heart); color:var(--heart); }

  .search-box { display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding: 11px 14px; margin-bottom:16px; }
  .search-box input { flex:1; background:transparent; border:none; outline:none; color:var(--ink); font-family:'Work Sans'; font-size:14px; }
  .search-box input::placeholder { color: var(--ink-muted); }

  .list-item { display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding: 10px 12px; margin-bottom:10px; cursor:pointer; }
  .list-item .thumb { width:48px; height:48px; border-radius:10px; background: linear-gradient(135deg, #EFDFC4, #DEBF95); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .list-item .thumb img { width:28px; height:28px; }
  .list-item .thumb img.is-photo { width:100%; height:100%; object-fit:cover; border-radius:10px; }
  .list-item .meta { flex:1; min-width:0; }
  .list-item .meta .name { font-family:'Fraunces', Georgia, serif; font-weight:700; font-size:15px; margin-bottom:2px; }
  .list-item .meta .method { font-size:11px; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-muted); }
  .list-item .heart { flex-shrink:0; background:none; border:none; font-size:18px; cursor:pointer; color: var(--ink-muted); }
  .list-item .heart.active { color: var(--heart); }

  .empty { text-align:center; color:var(--ink-muted); font-family:'Fraunces', Georgia, serif; font-style:italic; font-size:15px; padding: 40px 20px; }

  nav.tabbar { position:fixed; bottom:0; left:0; right:0; display:flex; justify-content:center; background: rgba(246,239,226,0.94); backdrop-filter: blur(10px); border-top:1px solid var(--line); padding: 8px max(12px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)); }
  nav.tabbar .inner { display:flex; width:100%; max-width:480px; justify-content:space-around; }
  nav.tabbar button { background:none; border:none; color:var(--ink-muted); font-size:10.5px; font-weight:600; letter-spacing:0.03em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px 14px; cursor:pointer; }
  nav.tabbar button .emoji { font-size:18px; }
  nav.tabbar button.active { color: var(--accent); }

  [hidden] { display:none !important; }
  .toast { position:fixed; left:50%; bottom:90px; transform:translateX(-50%) translateY(20px); background: var(--badge-bg); color:var(--badge-text); font-size:12px; font-weight:600; padding:10px 16px; border-radius:999px; opacity:0; transition: opacity 0.25s ease, transform 0.25s ease; pointer-events:none; z-index:20; }
  .toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* --- added for static recipe/archive pages --- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Work+Sans:wght@400;500;600;700&display=swap');

header.app-header .navlink { font-size:11px; color:var(--ink-muted); text-decoration:none; border:1px solid var(--line); border-radius:999px; padding:6px 12px; }
header.app-header a.brand { text-decoration:none; color:var(--ink-muted); }

.backlink { text-align:center; font-size:13px; margin: 4px 0 24px; }
.backlink a { color:var(--accent); text-decoration:none; }

a.list-item { text-decoration:none; color:inherit; }

.archive-main h1 { font-family:'Fraunces', Georgia, serif; font-weight:700; font-size:28px; margin: 10px 0 4px; }
.archive-main .subtitle { margin-bottom:20px; }
.archive-group { margin-bottom:26px; }
.archive-group h2 { font-family:'Fraunces', Georgia, serif; font-size:16px; font-weight:700; margin: 0 0 10px; padding-top: 6px; border-top: 1px solid var(--line); }
.archive-list { display:flex; flex-direction:column; gap:10px; }

/* --- added for Sirup-Guide page --- */
.hero-emoji { font-size:72px; line-height:1; }
.flavor-list { list-style:none; margin:0 0 20px; padding:0; }
.flavor-list li { padding:9px 0; border-bottom:1px solid var(--line); font-size:13.5px; line-height:1.5; color:var(--ink-muted); }
.flavor-list li:last-child { border-bottom:none; }
.flavor-list b { color:var(--ink); }
.tip-box .txt p a { color:var(--accent); font-weight:600; text-decoration:none; }