:root{
  --cream:#F5EDDE;
  --card:#FFFCF5;
  --card-alt:#FBF4E6;
  --line:#E3D5BC;
  --line-dash:#C7AD87;
  --ink:#4A3320;
  --ink-soft:#8A6D4E;
  --ink-faint:#A98C66;
  --cocoa:#6B4A2F;
  --cocoa-ink:#F9EFDC;
  --caramel:#B0743A;
  --chip:#EFE3CD;
  --tan:#D9C4A3;
  --success-bg:#EAF0DC;
  --success:#4C6323;
  --warn-bg:#F5E6D2;
  --warn:#8A5A22;
  --safety-bg:#EDF1E0;
  --safety-line:#C9D4A9;
  --safety-ink:#3A4D1B;
  --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Nunito',system-ui,sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
  font-size:16px;
}
img{max-width:100%;display:block}
a{color:var(--cocoa);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible{outline:3px solid var(--caramel);outline-offset:2px;border-radius:6px}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}

/* Header */
.site-header{border-bottom:1px solid var(--line);background:var(--cream);position:sticky;top:0;z-index:10}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand:hover{text-decoration:none}
.brand-mark{width:44px;height:44px;border-radius:50%;background:var(--cocoa);color:var(--cocoa-ink);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.brand-name{font-family:'Pacifico',cursive;font-size:1.45rem;color:var(--ink);line-height:1.2}
.brand-tag{font-size:.72rem;color:var(--ink-soft)}
.site-nav{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.site-nav a{font-size:.92rem;color:var(--cocoa);font-weight:600;padding:4px 2px;border-bottom:2px solid transparent}
.site-nav a:hover{text-decoration:none;border-bottom-color:var(--tan)}
.site-nav a.active{border-bottom-color:var(--caramel)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--tan);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700}

/* Buttons & chips */
.btn{display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;font-family:inherit;font-size:.92rem;font-weight:700;padding:10px 20px;border-radius:999px;transition:transform .12s ease,opacity .12s ease}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--cocoa);color:var(--cocoa-ink)}
.btn-soft{background:var(--chip);color:var(--cocoa)}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:.75rem;font-weight:700;padding:4px 12px;border-radius:999px;background:var(--chip);color:var(--cocoa)}
.chip-success{background:var(--success-bg);color:var(--success)}
.chip-warn{background:var(--warn-bg);color:var(--warn)}

/* Sections */
.section{padding:34px 0}
.section-title{display:flex;align-items:baseline;gap:10px;font-size:1.15rem;font-weight:800;margin-bottom:16px}
.section-title .muted{font-size:.78rem;font-weight:600;color:var(--ink-faint)}
.section-title .emoji{font-size:1.1rem}

/* Hero */
.hero{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:34px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:28px}
.hero h1{font-size:1.7rem;font-weight:800;line-height:1.3;margin-bottom:8px}
.hero p{color:var(--ink-soft);max-width:46ch}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}

/* Search */
.search{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:12px 20px;margin-top:22px}
.search input{border:none;background:transparent;font-family:inherit;font-size:.95rem;color:var(--ink);flex:1;outline:none}
.search input::placeholder{color:var(--ink-faint)}

/* Cards */
.grid{display:grid;gap:16px}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.card-img{height:120px;display:flex;align-items:center;justify-content:center;font-size:2.6rem}
.card-body{padding:16px 18px}
.card-title{font-size:1rem;font-weight:800;margin-bottom:2px}
.card-title a{color:var(--ink)}
.card-meta{font-size:.8rem;color:var(--ink-faint);margin-bottom:10px}
.card-note{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--ink-faint);margin-top:10px}

/* Journal cards */
.journal-card{background:var(--card-alt);border:1.5px dashed var(--line-dash);border-radius:var(--radius);padding:18px}
.journal-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.journal-head h3{font-size:1rem;font-weight:800}
.journal-card p{font-size:.85rem;color:var(--ink-soft);margin-bottom:10px}
.journal-link{font-size:.85rem;font-weight:700;color:var(--cocoa)}

/* Panels */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.panel h3{font-size:1rem;font-weight:800;margin-bottom:8px}
.panel p{font-size:.88rem;color:var(--ink-soft)}

/* Top 10 list */
.ranked{list-style:none}
.ranked li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--chip);font-size:.9rem}
.ranked li:last-child{border-bottom:none}
.ranked .rank{color:var(--caramel);font-weight:800;margin-right:6px}
.ranked .stat{color:var(--success);font-weight:700;white-space:nowrap}

/* Module tiles */
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;display:block;color:var(--ink)}
.tile:hover{text-decoration:none;border-color:var(--line-dash)}
.tile .tile-emoji{font-size:1.6rem}
.tile h3{font-size:.95rem;font-weight:800;margin:8px 0 2px}
.tile p{font-size:.78rem;color:var(--ink-soft);margin-bottom:6px}
.tile .tile-count{font-size:.75rem;color:var(--ink-faint)}

/* Safety banner */
.safety{background:var(--safety-bg);border:1px solid var(--safety-line);border-radius:var(--radius);padding:18px 20px;display:flex;gap:14px;align-items:flex-start}
.safety .safety-emoji{font-size:1.4rem}
.safety h3{font-size:.92rem;font-weight:800;color:var(--safety-ink);margin-bottom:4px}
.safety p{font-size:.85rem;color:var(--success);line-height:1.7}

/* Attempt log (recipe page) */
.attempt{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--chip)}
.attempt:last-child{border-bottom:none}
.attempt-photo{width:64px;height:64px;border-radius:12px;background:var(--tan);display:flex;align-items:center;justify-content:center;font-size:1.6rem;flex-shrink:0}
.attempt-body h4{font-size:.9rem;font-weight:800}
.attempt-body p{font-size:.85rem;color:var(--ink-soft)}
.attempt-body .when{font-size:.75rem;color:var(--ink-faint)}

/* Steps */
.steps{list-style:none;counter-reset:step}
.steps li{counter-increment:step;display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--chip);font-size:.92rem}
.steps li:last-child{border-bottom:none}
.steps li::before{content:counter(step);flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--chip);color:var(--cocoa);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:.85rem}

/* Footer */
.site-footer{border-top:1px solid var(--line);margin-top:40px;padding:26px 0;font-size:.82rem;color:var(--ink-faint);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

@media (max-width:640px){
  .hero{padding:24px}
  .hero h1{font-size:1.4rem}
  .header-inner{justify-content:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn{transition:none}
}