/*
Theme Name: Hello From Japan (GeneratePress Child)
Template: generatepress
Description: Hello From Japan の独自ブランドデザイン子テーマ。gizmodo.jp の構造（ホーム・記事レイアウト）を参考にしつつ、配色はオリジナル（Vermillion #D14D28）。
Version: 1.0
Author: Ren
*/

:root{
  --bg:#0f0f0f;
  --ink:#000;
  --paper:#fff;
  --accent:#D14D28;
  --gray1:#737373;
  --gray2:#bfbfbf;
  --gray3:#e5e5e5;
  --gray4:#f5f5f5;
}

/* ---------- Base ---------- */
body{
  font-family:'Public Sans', system-ui, -apple-system, sans-serif;
  font-size:16px;
  line-height:2;
  color:#111;
  background:var(--paper);
}

.display,
.site-title,
.site-title a,
h1, h2, h3,
.entry-title,
.entry-title a{
  font-family:'Special Gothic Expanded One', Impact, sans-serif;
  letter-spacing:.01em;
}

a{ color:#000; }
a:hover{ color:var(--accent); }

/* ---------- Header ---------- */
#site-header,
.inside-header{
  border-bottom:3px solid var(--ink);
  background:var(--paper);
}
.site-title a{
  font-size:24px;
  font-weight:900;
}
.main-navigation .main-nav ul li a{
  font-size:13px;
  font-weight:700;
  text-transform:none;
  color:var(--ink);
}
.main-navigation .main-nav ul li a:hover{
  color:var(--accent);
}

/* ---------- Category / eyebrow labels ---------- */
.entry-meta,
.entry-meta a,
.taxonomy-category,
.cat-links a{
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gray1);
}

/* ---------- Homepage cards ---------- */
.gb-query-loop-item,
article.post{
  border-bottom:1px solid var(--gray3);
}
.gb-query-loop-item .entry-title,
article.post .entry-title{
  font-size:20px;
  line-height:1.4;
  font-weight:800;
}

/* ---------- Single article ---------- */
.single .entry-header{
  max-width:760px;
  margin:0 auto;
  padding:32px 20px 24px;
}
.single .entry-title{
  font-size:32px;
  line-height:1.4;
  font-weight:800;
  margin:0 0 18px;
}
.single .entry-meta{
  font-size:13px;
  color:var(--gray1);
}
.single .entry-content{
  max-width:760px;
  margin:0 auto;
  padding:0 20px 40px;
  font-size:16px;
  line-height:2;
  color:#111;
}
.single .entry-content h2{
  font-size:22px;
  font-weight:800;
  margin:36px 0 14px;
  line-height:1.5;
}
.single .entry-content p{
  margin:0 0 26px;
}
.single .entry-content a{
  text-decoration:underline;
  text-decoration-color:var(--accent);
  text-decoration-thickness:3px;
  text-underline-offset:2px;
}

/* ---------- Related / column card ---------- */
.related-card{
  max-width:760px;
  margin:8px auto 0;
  border:1px solid var(--ink);
  padding:18px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.related-card .rc-label{
  font-size:10px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gray1);
  margin-bottom:6px;
}
.related-card .rc-title{
  font-size:16px;
  font-weight:700;
  line-height:1.4;
}
.related-card .rc-arrow{
  font-size:22px;
  font-weight:900;
  color:var(--accent);
  background:var(--ink);
  width:36px;
  height:36px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
}