/*
Theme Name: Know to Start
Theme URI: https://know.uminecomarin.com
Author: UMINECO BASE
Description: 知る、はじめる。｜KNOW TO START ― 初心者向け株式・暗号資産メディア用テーマ
Version: 1.0
Text Domain: know-to-start
*/

:root{
  --paper:#F5F1E6;
  --paper-2:#EFE9DA;
  --ink:#1B2A2E;
  --navy:#14313B;
  --navy-2:#0E262E;
  --brass:#A97C3F;
  --brass-deep:#7C5A2E;
  --line:#D9D1BC;
  --data:#3D6E68;
  --text-soft: rgba(27,42,46,0.68);
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Noto Sans JP', sans-serif;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
img{ max-width:100%; display:block; }
.serif{ font-family:'Noto Serif JP', serif; }
.mono{ font-family:'JetBrains Mono', monospace; }
.wrap{ max-width:1080px; margin:0 auto; padding:0 32px; }

/* NAV */
header.site-header{ border-bottom:1px solid var(--line); padding:22px 0; }
header.site-header .wrap{ display:flex; justify-content:space-between; align-items:center; }
.logo{ display:flex; align-items:center; gap:10px; font-family:'Noto Serif JP',serif; font-weight:600; font-size:18px; letter-spacing:0.04em; text-decoration:none; color:var(--ink); }
.logo .en{ font-size:12px; color:var(--text-soft); font-family:'JetBrains Mono',monospace; margin-left:2px; }
nav.main-nav ul{ display:flex; gap:36px; list-style:none; }
nav.main-nav a{ color:var(--ink); text-decoration:none; font-size:14px; letter-spacing:0.02em; }
nav.main-nav a:hover{ color:var(--brass-deep); }

/* HERO */
.hero{ padding:96px 0 60px; }
.eyebrow{ font-size:13px; letter-spacing:0.12em; color:var(--brass-deep); margin-bottom:22px; display:flex; align-items:center; gap:10px; }
.eyebrow::before{ content:""; width:28px; height:1px; background:var(--brass-deep); display:inline-block; }
h1{ font-size:clamp(36px, 5.4vw, 58px); font-weight:600; line-height:1.35; letter-spacing:0.01em; margin-bottom:28px; }
.hero-sub{ max-width:520px; font-size:16px; color:var(--text-soft); margin-bottom:44px; }
.cta-row{ display:flex; gap:16px; align-items:center; margin-bottom:80px; }
.btn-primary{ background:var(--navy); color:var(--paper); padding:14px 30px; border-radius:2px; text-decoration:none; font-size:14px; letter-spacing:0.03em; transition:background 0.2s; display:inline-block; }
.btn-primary:hover{ background:var(--navy-2); }
.btn-ghost{ color:var(--ink); text-decoration:none; font-size:14px; border-bottom:1px solid var(--ink); padding-bottom:2px; }

/* ROUTE - signature element */
.route{ position:relative; padding:40px 0 10px; }
.route-line{ position:relative; height:1px; background:var(--line); }
.route-line::before{ content:""; position:absolute; left:0; top:0; height:1px; width:100%; background:var(--brass); transform-origin:left; animation:draw 1.4s ease-out forwards; }
@keyframes draw{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.route-points{ display:flex; justify-content:space-between; margin-top:-6px; }
.route-point{ text-align:center; position:relative; }
.route-point .dot{ width:11px; height:11px; border-radius:50%; background:var(--paper); border:2px solid var(--brass); margin:0 auto 14px; }
.route-point:first-child{ text-align:left; }
.route-point:first-child .dot{ margin-left:0; }
.route-point:last-child{ text-align:right; }
.route-point:last-child .dot{ margin-right:0; margin-left:auto; }
.route-point .label{ font-family:'Noto Serif JP', serif; font-size:15px; font-weight:500; }
.route-point .sub{ font-size:12px; color:var(--text-soft); margin-top:4px; }

/* WHY */
.why{ padding:90px 0; border-top:1px solid var(--line); }
.why-grid{ display:grid; grid-template-columns:1fr 1.4fr; gap:60px; }
.why h2{ font-family:'Noto Serif JP',serif; font-size:26px; font-weight:600; line-height:1.6; }
.why p{ color:var(--text-soft); font-size:15px; max-width:480px; }

/* CARDS */
.entry{ padding:20px 0 90px; }
.section-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:40px; }
.section-head h3{ font-family:'Noto Serif JP',serif; font-size:22px; font-weight:600; }
.section-head span{ font-size:13px; color:var(--text-soft); }
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.card{ background:var(--paper); padding:34px 28px; }
.card .tag{ font-size:12px; color:var(--brass-deep); letter-spacing:0.06em; margin-bottom:16px; display:block; }
.card h4{ font-family:'Noto Serif JP',serif; font-size:19px; font-weight:500; line-height:1.5; margin-bottom:14px; }
.card p{ font-size:14px; color:var(--text-soft); margin-bottom:20px; }
.card a{ font-size:13px; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--ink); padding-bottom:2px; }

/* DATA BAND */
.data-band{ background:var(--navy); color:var(--paper); padding:80px 0; }
.data-band .section-head h3{ color:var(--paper); }
.data-band .section-head span{ color:rgba(245,241,230,0.55); }
.ticker{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(245,241,230,0.12); border:1px solid rgba(245,241,230,0.12); margin-bottom:28px; }
.ticker-item{ background:var(--navy-2); padding:24px 22px; }
.ticker-item .name{ font-size:13px; color:rgba(245,241,230,0.6); margin-bottom:10px; }
.ticker-item .price{ font-family:'JetBrains Mono',monospace; font-size:22px; font-weight:500; margin-bottom:6px; }
.ticker-item .delta{ font-family:'JetBrains Mono',monospace; font-size:13px; color:#8FBFA8; }
.ticker-item .delta.down{ color:#D69B8C; }
.data-note{ font-size:12px; color:rgba(245,241,230,0.5); max-width:560px; }

/* COMPARE / PR */
.compare{ padding:90px 0; }
.pr-badge{ font-size:11px; letter-spacing:0.08em; color:var(--brass-deep); border:1px solid var(--brass); padding:3px 10px; border-radius:2px; }
.compare-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:36px; }
.compare-card{ border:1px solid var(--line); padding:32px 26px; background:var(--paper-2); }
.compare-card .kind{ font-size:12px; color:var(--text-soft); margin-bottom:10px; }
.compare-card h4{ font-family:'Noto Serif JP',serif; font-size:20px; font-weight:600; margin-bottom:18px; }
.compare-card ul{ list-style:none; font-size:13px; color:var(--text-soft); margin-bottom:24px; }
.compare-card li{ padding:6px 0; border-bottom:1px dashed var(--line); }
.compare-btn{ display:block; text-align:center; background:var(--brass); color:var(--paper); padding:12px; text-decoration:none; font-size:13px; border-radius:2px; }
.compare-btn:hover{ background:var(--brass-deep); }

/* BLOG LIST / SINGLE */
.post-list{ padding:60px 0 100px; }
.post-row{ display:grid; grid-template-columns:140px 1fr; gap:28px; padding:28px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.post-row .date{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text-soft); }
.post-row h2{ font-family:'Noto Serif JP',serif; font-size:20px; font-weight:500; margin-bottom:8px; }
.post-row .excerpt{ font-size:14px; color:var(--text-soft); }
.post-row a{ text-decoration:none; color:var(--ink); }

.single-article{ padding:70px 0 100px; max-width:760px; margin:0 auto; }
.single-article .cat{ font-size:12px; color:var(--brass-deep); letter-spacing:0.08em; margin-bottom:16px; }
.single-article h1{ font-size:clamp(28px,4vw,40px); }
.single-article .meta{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text-soft); margin-bottom:44px; }
.single-article .content{ font-size:16px; }
.single-article .content p{ margin-bottom:1.6em; }
.single-article .content h2{ font-family:'Noto Serif JP',serif; font-size:22px; margin:2.2em 0 0.8em; }
.single-article .content h3{ font-family:'Noto Serif JP',serif; font-size:18px; margin:1.8em 0 0.6em; }
.pr-notice{ border:1px solid var(--brass); background:var(--paper-2); padding:16px 20px; font-size:13px; color:var(--brass-deep); margin:40px 0; }

/* FOOTER */
footer.site-footer{ border-top:1px solid var(--line); padding:48px 0; }
.footer-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:40px; }
.footer-links{ display:flex; gap:28px; list-style:none; font-size:13px; }
.footer-links a{ text-decoration:none; }
.disclaimer{ max-width:520px; font-size:12px; color:var(--text-soft); line-height:1.8; }
.back-brand{ font-size:12px; color:var(--text-soft); margin-top:18px; }
.back-brand a{ color:var(--brass-deep); text-decoration:none; }

@media (max-width:840px){
  .why-grid{ grid-template-columns:1fr; gap:24px; }
  .card-grid{ grid-template-columns:1fr; }
  .ticker{ grid-template-columns:1fr 1fr; }
  .compare-grid{ grid-template-columns:1fr; }
  nav.main-nav{ display:none; }
  .footer-row{ flex-direction:column; }
  .route-points{ display:none; }
  .post-row{ grid-template-columns:1fr; gap:8px; }
}