/* ==========================================================================
   Grillhytta — design system
   Norsk bokmål / LTR / 个人爱好站
   设计令牌刻意与 helpmethai(墨绿+金) / kochethai(陶土+深绿) / crossstitchingguide(蓝绿+赭橙) 区分
   ========================================================================== */

:root{
  /* 颜色 —— 炭黑 + 余烬红 + 琥珀 */
  --coal:#1f1b17;          /* 页头/页脚/深色面 */
  --coal-2:#2b2521;
  --coal-3:#3a332c;
  --ink:#16130f;           /* 正文色 */
  --ink-soft:#4d453e;
  --muted:#726a62;
  --ember:#c1121f;         /* 主强调：余烬红 */
  --ember-dark:#8f0d17;
  --ember-tint:#fdeceb;
  --amber:#d99a2b;         /* 次强调 */
  --amber-tint:#fdf3e0;
  --bg:#ffffff;
  --bg-soft:#f5f2ee;
  --border:#e5e0d9;
  --border-strong:#d3cabf;

  /* 排版 */
  --font-heading:'Bitter',Georgia,'Times New Roman',serif;
  --font-body:'Source Sans 3','Segoe UI',Arial,sans-serif;

  /* 版式 */
  --wrap:1200px;
  --radius:2px;
  --shadow:0 1px 2px rgba(22,19,15,.06);
  --shadow-hover:0 8px 24px rgba(22,19,15,.13);
}

*,*::before,*::after{box-sizing:border-box;}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.68;
  font-weight:400;
}

img{max-width:100%;height:auto;display:block;}

a{color:var(--ember);text-decoration:none;}
a:hover{color:var(--ember-dark);text-decoration:underline;}

h1,h2,h3,h4{
  font-family:var(--font-heading);
  font-weight:700;
  line-height:1.22;
  margin:0 0 .6em;
  color:var(--ink);
  letter-spacing:-.005em;
}
h1{font-size:2.15rem;}
h2{font-size:1.5rem;margin-top:1.9em;}
h3{font-size:1.18rem;margin-top:1.5em;}
h4{font-size:1rem;}

p{margin:0 0 1.1em;}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px;}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--ember);color:#fff;padding:10px 16px;
}
.skip-link:focus{left:8px;top:8px;}

/* ==========================================================================
   页头 —— 深色双行：品牌居中 + 导航居中（与三个已有站均不同）
   ========================================================================== */

.site-header{
  position:sticky;top:0;z-index:100;   /* 独立层叠上下文：遮罩必须挂在其内部非上下文元素上 */
  background:var(--coal);
  border-bottom:3px solid var(--ember);
}

.header-inner{
  position:relative;                    /* 不设 z-index → 不创建层叠上下文 */
  z-index:auto;
  padding:16px 20px 12px;
}

.brand{text-align:center;}

.site-title{
  margin:0;
  font-family:var(--font-heading);
  font-size:1.72rem;
  font-weight:700;
  letter-spacing:.02em;
}
.site-title a{color:#fff;}
.site-title a:hover{color:var(--amber);text-decoration:none;}

.site-tagline{
  margin:.25em 0 0;
  color:#b9b0a6;
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.13em;
}

.nav-primary{margin-top:10px;}

.menu{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:2px;
}
.menu>li{margin:0;}
.menu a{
  display:block;padding:8px 13px;
  color:#e8e2da;font-size:.9rem;
  border-bottom:2px solid transparent;
}
.menu a:hover{color:#fff;background:var(--coal-2);text-decoration:none;}
.menu a.is-active{
  color:#fff;border-bottom-color:var(--ember);
}

/* 汉堡按钮：桌面隐藏 */
.menu-toggle{position:absolute;opacity:0;pointer-events:none;}
.menu-toggle-label{display:none;}

/* ==========================================================================
   主体
   ========================================================================== */

.site-inner{padding:36px 0 56px;}

.page-intro{
  font-size:1.08rem;
  color:var(--ink-soft);
  border-left:3px solid var(--ember);
  padding-left:16px;
  margin:0 0 1.8em;
}

.hero{margin:0 0 34px;}
.hero-figure{margin:0;}
.hero-figure img{
  width:100%;height: auto;
  border-radius:var(--radius);
  background:var(--bg-soft);
}
.hero-figure figcaption{
  font-size:.84rem;color:var(--muted);
  padding-top:8px;
}

/* 面包屑 */
.crumbs{
  font-size:.84rem;color:var(--muted);
  margin:0 0 14px;
}
.crumbs a{color:var(--muted);}
.crumbs a:hover{color:var(--ember);}

/* ==========================================================================
   卡片网格
   ========================================================================== */

.entry-grid{
  display:grid;gap:26px;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  margin:0 0 10px;
  padding:0;list-style:none;
}

.entry-card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  background:#fff;
  transition:box-shadow .18s ease,transform .18s ease;
}
.entry-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px);}

.entry-card img{
  width:100%;height: auto;
  background:var(--bg-soft);
}

.entry-card__body{padding:15px 17px 18px;}

.entry-card h3{
  margin:0 0 .4em;font-size:1.06rem;line-height:1.32;
}
.entry-card h3 a{color:var(--ink);}
.entry-card h3 a:hover{color:var(--ember);text-decoration:none;}

.entry-card p{
  margin:0;font-size:.92rem;color:var(--muted);line-height:1.55;
}

.entry-card__meta{
  display:block;margin-top:11px;
  font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ember);
}

/* 分类页顶部的双语标签 */
.kicker{
  display:inline-block;
  font-size:.76rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--ember);margin-bottom:.5em;
}

/* ==========================================================================
   文章页组件
   ========================================================================== */

.meta-row{
  display:flex;flex-wrap:wrap;gap:0;
  border:1px solid var(--border);
  border-radius:var(--radius);
  margin:0 0 26px;
  background:var(--bg-soft);
}
.meta-row__item{
  flex:1 1 140px;
  padding:12px 16px;
  border-right:1px solid var(--border);
}
.meta-row__item:last-child{border-right:0;}
.meta-row__label{
  display:block;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted);margin-bottom:3px;
}
.meta-row__value{
  font-family:var(--font-heading);font-weight:700;font-size:1.02rem;color:var(--ink);
}

.ingredient-list{
  list-style:none;margin:0 0 1.6em;padding:0;
  border-top:1px solid var(--border);
}
.ingredient-list li{
  padding:9px 2px 9px 20px;
  border-bottom:1px solid var(--border);
  position:relative;
}
.ingredient-list li::before{
  content:"";position:absolute;left:2px;top:1.02em;
  width:7px;height:7px;background:var(--ember);border-radius:1px;
}

.step-list{margin:0 0 1.6em;padding:0;list-style:none;counter-reset:step;}
.step-list li{
  counter-increment:step;
  position:relative;
  padding:0 0 18px 52px;
  margin:0;
}
.step-list li::before{
  content:counter(step);
  position:absolute;left:0;top:2px;
  width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-heading);font-weight:700;font-size:1rem;
  background:var(--coal);color:#fff;border-radius:var(--radius);
}

.note-box{
  background:var(--amber-tint);
  border-left:4px solid var(--amber);
  padding:15px 18px;
  margin:0 0 1.6em;
  border-radius:var(--radius);
  font-size:.96rem;
}
.note-box p:last-child{margin-bottom:0;}
.note-box--warn{
  background:var(--ember-tint);
  border-left-color:var(--ember);
}

.callout-num{
  font-family:var(--font-heading);font-weight:700;color:var(--ember);
  white-space:nowrap;
}

.related{margin-top:2.4em;border-top:1px solid var(--border);padding-top:22px;}
.related h2{font-size:1.16rem;margin-top:0;}
.related-list{list-style:none;margin:0;padding:0;}
.related-list li{
  padding:9px 0;border-bottom:1px dashed var(--border);
}
.related-list li:last-child{border-bottom:0;}

/* ==========================================================================
   合规页
   ========================================================================== */

.legal-page h2{font-size:1.28rem;margin-top:1.7em;}
.legal-page h3{font-size:1.05rem;}
.legal-page ul{padding-left:22px;}
.legal-page li{margin-bottom:.45em;}
.legal-page .updated{
  font-size:.85rem;color:var(--muted);
  border-top:1px solid var(--border);
  margin-top:2.4em;padding-top:14px;
}

/* 联系页：只给邮箱，不放表单 */
.contact-card{
  border:1px solid var(--border);
  border-left:4px solid var(--ember);
  border-radius:var(--radius);
  padding:22px 24px;
  background:var(--bg-soft);
  margin:0 0 1.6em;
}
.contact-card a{font-family:var(--font-heading);font-weight:700;font-size:1.12rem;}

/* ==========================================================================
   页脚
   ========================================================================== */

.site-footer{
  background:var(--coal);
  color:#b9b0a6;
  padding:40px 0 26px;
  margin-top:20px;
  font-size:.92rem;
}
.site-footer h4{
  color:#fff;font-size:.82rem;text-transform:uppercase;
  letter-spacing:.11em;margin:0 0 .9em;
}
.site-footer ul{list-style:none;margin:0;padding:0;}
.site-footer li{margin-bottom:.42em;}
.site-footer a{color:#cfc7bd;}
.site-footer a:hover{color:var(--amber);}

.footer-cols{
  display:grid;gap:30px;
  grid-template-columns:1.5fr 1fr 1fr;
  padding-bottom:24px;
  border-bottom:1px solid var(--coal-3);
}
.footer-legal{
  margin:18px 0 0;font-size:.83rem;color:#8e867d;
}

/* ==========================================================================
   响应式
   ========================================================================== */

@media (max-width:900px){
  :root{--wrap:100%;}
  body{font-size:16.5px;}
  h1{font-size:1.72rem;}
  h2{font-size:1.32rem;}

  .header-inner{padding:13px 18px 10px;}

  /* —— CSS-only 抽屉菜单（三条前提：checkbox 是 nav 的兄弟 / 遮罩不挂 nav / 遮罩不挂 body）—— */
  .menu-toggle-label{
    display:block;
    position:absolute;right:18px;top:50%;transform:translateY(-50%);
    width:44px;height:38px;
    cursor:pointer;
    z-index:120;                        /* 按钮最高：关闭时也可点 */
  }
  .menu-toggle-label span{
    display:block;height:2px;margin:7px 8px;
    background:#fff;transition:transform .2s ease,opacity .2s ease;
  }
  .menu-toggle:checked + .menu-toggle-label span:nth-child(1){transform:translateY(9px) rotate(45deg);}
  .menu-toggle:checked + .menu-toggle-label span:nth-child(2){opacity:0;}
  .menu-toggle:checked + .menu-toggle-label span:nth-child(3){transform:translateY(-9px) rotate(-45deg);}

  /* 遮罩：挂在 .header-inner（position:relative + z-index:auto，不创建层叠上下文）*/
  .header-inner:has(.menu-toggle:checked)::after{
    content:"";
    position:fixed;inset:0;
    background:rgba(12,10,8,.62);
    z-index:100;
  }

  .nav-primary{
    position:fixed;top:0;right:0;
    width:min(84vw,330px);height:100vh;
    margin:0;padding:74px 0 24px;
    background:var(--coal-2);
    transform:translateX(100%);
    transition:transform .24s ease;
    overflow-y:auto;
    z-index:110;                        /* 抽屉高于遮罩、低于按钮 */
  }
  .menu-toggle:checked ~ .nav-primary{transform:translateX(0);}

  .menu{display:block;padding:0 14px;}
  .menu a{
    padding:13px 10px;
    border-bottom:1px solid var(--coal-3);
    border-left:3px solid transparent;
  }
  .menu a.is-active{border-bottom-color:var(--coal-3);border-left-color:var(--ember);}

  .footer-cols{grid-template-columns:1fr;gap:24px;}

  .meta-row__item{flex:1 1 48%;border-bottom:1px solid var(--border);}
  .step-list li{padding-left:44px;}
  .step-list li::before{width:30px;height:30px;font-size:.94rem;}
}

@media (max-width:520px){
  .entry-grid{grid-template-columns:1fr;gap:20px;}
  .site-title{font-size:1.45rem;}
  .site-tagline{font-size:.72rem;letter-spacing:.09em;}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;scroll-behavior:auto !important;}
}

/* ═══ 移动端与等比补丁（全站通用） ═══ */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.credits-table { min-width: 660px; }
img { max-width: 100%; }
@media (max-width: 520px) {
  .meta-row { grid-template-columns: 1fr; }
  .crumbs { font-size: 12px; overflow-wrap: anywhere; }
  h1 { font-size: 24px; }
  .entry-card__body { padding: 12px 14px 14px; }
  .contact-card { padding: 14px 16px; }
  .footer-cols { gap: 20px; }
  .note-box { padding: 14px 16px; }
}

/* ═══ 布局变体：烟熏粗犷 ═══ */
.site-header { background: var(--ink); border-bottom: 4px solid var(--beet); }
.site-header .site-title a, .site-header .site-title { color: #fff; }
.site-header .site-tagline { color: rgba(255,255,255,.72); }
.site-header .menu a { color: rgba(255,255,255,.85); }
.site-header .menu a.is-active, .site-header .menu a[aria-current="page"] { color: var(--beet); }
.entry-card { border: 0; border-radius: 0; }
.entry-card img { border-radius: 0; }
.entry-card h3 { text-transform: uppercase; letter-spacing: .6px; font-size: 16px; }
.site-footer { border-top: 4px solid var(--beet); }