@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=IBM+Plex+Sans+JP:wght@400;500;600;700&family=Shippori+Mincho:wght@500;600;700&display=swap');

:root {
  --ink: #142420;
  --ink-soft: #4d5c56;
  --paper: #f5f1e8;
  --paper-deep: #ebe5d8;
  --white: #fffdf8;
  --line: #d9d4c8;
  --line-dark: #b8b8aa;
  --accent: #e7654d;
  --accent-deep: #a74434;
  --sage: #b7c7b4;
  --sage-deep: #426252;
  --yellow: #eadb9a;
  --mono: 'DM Mono', ui-monospace, monospace;
  --sans: 'IBM Plex Sans JP', -apple-system, BlinkMacSystemFont, 'Noto Sans JP', sans-serif;
  --serif: 'Shippori Mincho', serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); line-height: 1.72; }
a { color: inherit; text-decoration: none; }
.site-shell { min-height: 100vh; }
.topbar { height: 74px; border-bottom: 1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding: 0 42px; position: sticky; top: 0; z-index: 20; background: rgba(245,241,232,.94); backdrop-filter: blur(12px); }
.wordmark { display:flex; align-items:center; gap: 12px; letter-spacing: .04em; }
.wordmark strong { display:block; font-family: var(--mono); font-size: 12px; letter-spacing: .13em; line-height: 1.2; }
.wordmark em { display:block; font-style:normal; font-family: var(--mono); font-size: 8px; letter-spacing: .18em; color: var(--ink-soft); line-height: 1.2; margin-top: 3px; }
.wordmark-mark { width: 30px; height: 26px; display:flex; align-items:flex-end; gap:3px; }
.wordmark-mark span { display:block; width: 8px; background: var(--accent); transform: skew(-17deg); }
.wordmark-mark span:nth-child(1) { height: 13px; opacity: .54; }
.wordmark-mark span:nth-child(2) { height: 20px; opacity: .78; }
.wordmark-mark span:nth-child(3) { height: 26px; }
.topbar-meta { display:flex; align-items:center; gap: 10px; color: var(--ink-soft); font-family: var(--mono); text-transform: uppercase; font-size: 10px; letter-spacing: .08em; }
.status-dot, .live-dot { width: 7px; height: 7px; border-radius:50%; display:inline-block; background: var(--accent); box-shadow: 0 0 0 4px rgba(231,101,77,.14); }
.topbar-divider { width: 1px; height: 16px; background: var(--line); margin: 0 5px; }
.menu-toggle { display:none; border:0; background:transparent; width: 38px; padding: 8px 0; }
.menu-toggle span { display:block; height:1px; background:var(--ink); margin: 5px 0; }
.layout { display:grid; grid-template-columns: 224px 1fr; max-width: 1600px; margin: 0 auto; }
.sidebar { border-right: 1px solid var(--line); min-height: calc(100vh - 74px); padding: 52px 26px 30px 36px; position: sticky; top:74px; height: calc(100vh - 74px); display:flex; flex-direction:column; }
.sidebar-kicker, .eyebrow, .category-label, .formula-label { font-family: var(--mono); text-transform: uppercase; font-size: 10px; letter-spacing: .14em; color: var(--ink-soft); }
.sidebar-kicker { margin-bottom: 30px; color: var(--accent-deep); }
.sidebar nav { display:flex; flex-direction:column; gap: 2px; }
.nav-link { font-family: var(--mono); font-size: 11px; padding: 10px 0; border-bottom: 1px solid transparent; color: var(--ink-soft); transition:.2s ease; display:flex; gap: 14px; align-items:center; }
.nav-link span { color: var(--line-dark); font-size: 9px; }
.nav-link:hover, .nav-link.active { color: var(--ink); border-color: var(--accent); }
.nav-link.active span { color: var(--accent); }
.sidebar-note { margin-top:auto; font-family: var(--serif); font-size: 12px; color: var(--ink-soft); line-height: 1.75; display:flex; gap: 12px; }
.note-line { width: 2px; background:var(--accent); display:block; min-height: 42px; }
.sidebar-note p { margin:0; }
.main-content { min-width:0; }
.section-pad { padding: 88px clamp(28px, 6vw, 96px); border-bottom: 1px solid var(--line); }
.hero { min-height: 555px; display:grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 9vw; align-items:center; padding-top: 92px; padding-bottom: 92px; position:relative; overflow:hidden; }
.hero:after { content:'JP / 01'; position:absolute; right: 32px; top: 26px; font-family:var(--mono); font-size: 9px; color: var(--line-dark); letter-spacing:.12em; }
.eyebrow { margin:0 0 18px; color: var(--accent-deep); }
.eyebrow span { color: var(--line-dark); margin: 0 6px; }
h1, h2, h3, p { margin-top:0; }
h1 { font-family: var(--serif); font-weight:600; font-size: clamp(42px, 5.3vw, 78px); line-height:1.19; letter-spacing: -.05em; margin-bottom: 24px; }
h1 span { color: var(--accent-deep); }
.hero-lead { max-width: 590px; font-family:var(--serif); font-size: 16px; color: var(--ink-soft); line-height: 2; margin-bottom: 31px; }
.hero-actions { display:flex; align-items:center; gap: 28px; }
.button { display:inline-flex; align-items:center; gap: 22px; padding: 12px 18px; font-family:var(--mono); font-size: 10px; letter-spacing:.08em; transition:.2s ease; }
.button-primary { background:var(--ink); color:var(--white); border:1px solid var(--ink); }
.button-primary:hover { background:var(--accent); border-color:var(--accent); transform:translateY(-2px); }
.text-link { font-family:var(--mono); font-size:10px; color:var(--ink-soft); border-bottom:1px solid var(--line-dark); padding-bottom: 3px; }
.text-link:hover { color:var(--accent-deep); border-color:var(--accent); }
.verdict-panel { background:var(--ink); color:var(--white); padding: 32px 34px 28px; min-height: 298px; position:relative; box-shadow: 12px 12px 0 var(--sage); }
.verdict-panel:before { content:''; position:absolute; inset: 10px; border:1px solid rgba(255,255,255,.12); pointer-events:none; }
.panel-label { position:relative; font-family:var(--mono); font-size:9px; letter-spacing:.1em; display:flex; gap:9px; align-items:center; color: #bec9c0; }
.verdict-region { position:relative; font-family:var(--serif); font-size: 64px; line-height:1; margin-top: 38px; letter-spacing:-.08em; }
.verdict-title { position:relative; margin-top: 8px; color:#bdc8c0; font-family:var(--mono); font-size:10px; letter-spacing:.09em; }
.verdict-rule { position:relative; height:1px; background: rgba(255,255,255,.18); margin: 24px 0 18px; }
.verdict-product { position:relative; font-family:var(--serif); font-size:13px; line-height:1.7; color:#d7dfd7; }
.verdict-product strong { color:var(--white); font-size:18px; }
.verdict-foot { position:relative; display:flex; align-items:center; gap:8px; margin-top:24px; color:#aebbb1; font-family:var(--mono); font-size:8px; }
.badge { display:inline-block; border-radius: 2px; font-family:var(--mono); font-size:8px; line-height: 1; letter-spacing:.07em; padding: 5px 7px 4px; white-space:nowrap; }
.badge-fact { background:var(--sage); color:var(--sage-deep); }
.badge-hypothesis { background:var(--yellow); color:#665b31; }
.section-heading { margin-bottom: 40px; display:flex; justify-content:space-between; align-items:end; gap:20px; }
.section-heading h2, .unknowns h2 { font-family:var(--serif); font-size: clamp(27px, 3vw, 40px); letter-spacing:-.045em; line-height:1.35; margin:0; }
.section-caption { color:var(--ink-soft); font-family:var(--serif); font-size:13px; margin:0 0 5px; }
.rationale-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap: 1px; background:var(--line); border: 1px solid var(--line); }
.rationale-card { background:var(--white); padding: 28px 26px 25px; min-height: 218px; display:grid; grid-template-columns: 32px 1fr; gap: 18px; }
.card-index { color:var(--accent); font-family:var(--mono); font-size:12px; padding-top: 3px; }
.rationale-card h3 { font-family:var(--serif); font-size:18px; margin-bottom:10px; letter-spacing:-.03em; }
.rationale-card p { font-size:12px; line-height:1.9; color:var(--ink-soft); margin-bottom:14px; }
.rationale-card a { font-family:var(--mono); font-size:9px; color:var(--accent-deep); border-bottom:1px solid var(--accent); }
.fact-note { display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:9px; color:var(--ink-soft); }
.fact-note i { width:8px; height:8px; display:block; background:var(--yellow); }
.section-heading-row { align-items:end; }
.legend { display:flex; gap:16px; font-family:var(--mono); font-size:9px; color:var(--ink-soft); margin-bottom:5px; }
.legend-item { display:flex; gap:6px; align-items:center; }
.legend-dot { width:8px; height:8px; display:inline-block; border-radius:50%; }
.legend-dot.fact { background:var(--sage-deep); }
.legend-dot.hypothesis { background:#c6ad4d; }
.comparison-table { border-top:1px solid var(--ink); }
.table-grid { display:grid; grid-template-columns: 1.05fr 2.25fr 1.1fr 1.55fr; gap: 24px; }
.table-head { padding: 12px 14px; font-family:var(--mono); font-size:8px; color:var(--ink-soft); letter-spacing:.1em; }
.region-row { padding:26px 14px; border-top:1px solid var(--line); align-items:start; min-height: 160px; }
.region-row.taiwan { background:rgba(183,199,180,.16); border-left:3px solid var(--sage-deep); }
.region-row.china, .region-row.indonesia { background:rgba(255,253,248,.42); }
.region-name { display:flex; flex-direction:column; }
.region-no { font-family:var(--mono); font-size:9px; color:var(--accent); margin-bottom:11px; }
.region-name strong { font-family:var(--serif); font-size:24px; line-height:1.15; letter-spacing:-.06em; }
.region-name small { margin-top:5px; font-family:var(--mono); font-size:8px; color:var(--ink-soft); letter-spacing:.12em; }
.region-facts p { font-size:11px; line-height:1.85; margin:0 0 9px; color:var(--ink-soft); }
.region-facts p:last-child { margin-bottom:0; }
.decision { display:flex; flex-direction:column; gap: 8px; }
.decision-chip { display:inline-block; width:max-content; border:1px solid var(--line-dark); border-radius: 2px; padding: 6px 8px 5px; font-family:var(--mono); font-size:9px; letter-spacing:.05em; }
.decision-chip.pass { border-color:var(--sage-deep); color:var(--sage-deep); background:rgba(183,199,180,.3); }
.decision-chip.hold { border-color:#b7a97e; color:#796d43; background:rgba(234,219,154,.22); }
.decision small, .recheck { font-size:10px; color:var(--ink-soft); line-height:1.7; }
.recheck { padding-left:13px; border-left:1px solid var(--line-dark); }
.table-footnote { font-family:var(--mono); font-size:9px; color:var(--ink-soft); margin:17px 0 0; }
.category-layout { display:grid; grid-template-columns: 1fr 1fr; border:1px solid var(--line); }
.category-keep, .category-drop { padding: 34px 34px 32px; min-height: 300px; }
.category-keep { background:var(--ink); color:var(--white); }
.category-drop { background:var(--white); border-left:1px solid var(--line); }
.category-label { display:flex; align-items:center; gap:9px; margin-bottom:26px; color:#a9b4aa; }
.category-drop .category-label { color:var(--ink-soft); }
.keep-mark, .drop-mark { width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:12px; }
.keep-mark { color:var(--white); background:var(--accent); }
.drop-mark { color:var(--accent-deep); background:var(--paper-deep); }
.category-keep h3 { font-family:var(--serif); font-size:28px; line-height:1.4; letter-spacing:-.06em; margin-bottom:12px; }
.category-keep p { color:#c2cdc3; font-family:var(--serif); font-size:13px; line-height:1.9; max-width:360px; }
.product-tags { display:flex; gap:7px; flex-wrap:wrap; margin-top:25px; }
.product-tags span { border:1px solid rgba(255,255,255,.25); color:#d5dfd5; padding:6px 9px; font-family:var(--mono); font-size:9px; }
.hold-list { border-top:1px solid var(--line); }
.hold-list div { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:11px 0; border-bottom:1px solid var(--line); }
.hold-list strong { font-family:var(--serif); font-size:14px; font-weight:600; }
.hold-list span { font-family:var(--mono); color:var(--ink-soft); font-size:8px; }
.caution-strip { margin-top:18px; display:flex; gap:12px; align-items:center; background:var(--yellow); padding:13px 17px; }
.caution-icon { width:21px; height:21px; border:1px solid #8d7e3d; color:#7d6e32; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:11px; flex:none; }
.caution-strip p { margin:0; font-size:11px; color:#655b35; line-height:1.7; }
.economics { background:var(--paper-deep); }
.economics-grid { display:grid; grid-template-columns: 1.5fr 1fr; gap: 24px; align-items:stretch; }
.formula-card { background:var(--white); padding: 27px 28px; border:1px solid var(--line); }
.formula-label { color:var(--accent-deep); margin-bottom:20px; }
.formula-main { display:flex; gap:9px; align-items:center; flex-wrap:wrap; font-family:var(--serif); font-size:18px; line-height:1.8; }
.formula-main b { font-family:var(--mono); color:var(--accent); font-size:12px; }
.formula-result { border-top:1px solid var(--line); margin-top:22px; padding-top:17px; font-family:var(--mono); font-size:12px; color:var(--accent-deep); }
.formula-result strong { font-family:var(--serif); font-size:20px; letter-spacing:-.05em; }
.cost-list { border-left:1px solid var(--line-dark); padding:7px 0 7px 27px; display:flex; flex-direction:column; justify-content:space-around; }
.cost-list > div { display:flex; gap:12px; align-items:center; }
.cost-list strong { display:block; font-family:var(--mono); font-size:10px; }
.cost-list small { display:block; font-size:10px; color:var(--ink-soft); margin-top:2px; }
.cost-bar { width:12px; height:12px; display:block; }
.cost-bar.confirmed { background:var(--sage-deep); }
.cost-bar.estimate { background:#c5ae52; }
.cost-bar.unknown { background:var(--accent); }
.economics-note { display:flex; gap:14px; align-items:center; padding-top: 23px; }
.economics-note p { margin:0; font-family:var(--serif); font-size:13px; color:var(--ink-soft); }
.roadmap .section-heading { display:block; }
.roadmap .section-heading .section-caption { margin-top:6px; }
.roadmap-list { border-top:1px solid var(--ink); }
.roadmap-item { display:grid; grid-template-columns: 80px 1fr; gap:26px; border-bottom:1px solid var(--line); padding: 25px 0; }
.roadmap-item.active { background:linear-gradient(90deg, rgba(183,199,180,.24), transparent); margin-left:-18px; padding-left:18px; }
.roadmap-no { font-family:var(--mono); font-size:18px; color:var(--accent); padding-top: 5px; }
.roadmap-top { display:flex; align-items:center; gap:10px; }
.phase-status { border:1px solid var(--line-dark); font-family:var(--mono); font-size:8px; padding:4px 6px; letter-spacing:.08em; color:var(--ink-soft); }
.phase-status.now { color:var(--sage-deep); border-color:var(--sage-deep); background:var(--sage); }
.phase-meta { font-family:var(--mono); color:var(--ink-soft); font-size:9px; letter-spacing:.07em; }
.roadmap-body h3 { font-family:var(--serif); font-size:20px; letter-spacing:-.04em; margin:11px 0 4px; }
.roadmap-body p { color:var(--ink-soft); font-size:12px; margin:0; max-width: 690px; }
.gate { margin-top:12px; color:var(--ink-soft); font-family:var(--mono); font-size:9px; }
.gate span { color:var(--accent-deep); margin-right:8px; }
.unknowns { background:var(--ink); color:var(--white); display:grid; grid-template-columns: 1fr 1.4fr; gap: 7vw; }
.unknowns .eyebrow { color:#e98873; }
.unknowns h2 { color:var(--white); }
.unknowns-head > p { color:#adbbb0; font-family:var(--serif); font-size:13px; margin: 18px 0 0; max-width:270px; }
.unknowns-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap: 1px; background: rgba(255,255,255,.16); align-self:start; border:1px solid rgba(255,255,255,.16); }
.unknown-card { min-height:104px; padding: 18px 17px; background: var(--ink); }
.unknown-card span { font-family:var(--mono); color:#e98873; font-size:9px; }
.unknown-card p { color:#d2dcd3; font-family:var(--serif); font-size:12px; line-height:1.7; margin: 12px 0 0; }
.sources { background:var(--white); }
.source-list { display:grid; grid-template-columns:repeat(2, 1fr); border-top:1px solid var(--ink); }
.source-list a { display:grid; grid-template-columns:42px 1fr 24px; align-items:center; gap:10px; padding:17px 0; margin-right:26px; border-bottom:1px solid var(--line); transition:.2s; }
.source-list a:hover { color:var(--accent-deep); transform:translateX(4px); }
.source-list a > span { font-family:var(--mono); color:var(--accent); font-size:9px; }
.source-list strong { display:block; font-family:var(--serif); font-size:13px; }
.source-list small { display:block; color:var(--ink-soft); font-size:10px; }
.source-list b { font-family:var(--mono); font-size:14px; font-weight:400; text-align:right; }
.footer { padding: 36px clamp(28px, 6vw, 96px) 46px; display:grid; grid-template-columns:1fr 1.5fr auto; align-items:end; gap:30px; }
.footer-brand { display:flex; align-items:center; gap:10px; }
.footer-brand strong, .footer-brand small { display:block; font-family:var(--mono); }
.footer-brand strong { font-size:11px; letter-spacing:.12em; }
.footer-brand small { color:var(--ink-soft); font-size:7px; letter-spacing:.14em; }
.footer p { margin:0; color:var(--ink-soft); font-size:10px; line-height:1.8; max-width:450px; }
.footer-date { color:var(--ink-soft); font-family:var(--mono); font-size:8px; white-space:nowrap; }
@media (max-width: 1050px) {
  .layout { grid-template-columns: 184px 1fr; }
  .sidebar { padding-left:24px; padding-right:18px; }
  .table-grid { grid-template-columns: .85fr 2fr 1fr 1.4fr; gap:15px; }
  .region-name strong { font-size:20px; }
}
@media (max-width: 760px) {
  .topbar { height:64px; padding:0 20px; }
  .topbar-meta { font-size:8px; }
  .topbar-meta .topbar-divider, .topbar-meta span:last-child { display:none; }
  .menu-toggle { display:block; }
  .layout { display:block; }
  .sidebar { position:fixed; z-index:19; top:64px; left:0; right:0; height:auto; min-height:0; padding:15px 20px 17px; background:var(--paper); border-right:0; border-bottom:1px solid var(--line); transform:translateY(-120%); transition:.3s ease; box-shadow:0 12px 25px rgba(20,36,32,.08); }
  .sidebar.open { transform:translateY(0); }
  .sidebar-kicker { display:none; }
  .sidebar nav { display:grid; grid-template-columns:repeat(3,1fr); gap:0 16px; }
  .nav-link { font-size:9px; padding:8px 0; }
  .sidebar-note { display:none; }
  .section-pad { padding:61px 20px; }
  .hero { display:block; min-height:0; padding-top:70px; }
  .hero:after { right:20px; top:22px; }
  h1 { font-size:43px; }
  .hero-lead { font-size:14px; }
  .verdict-panel { margin: 48px 14px 12px 0; padding:27px; min-height:260px; }
  .verdict-region { font-size:56px; margin-top:31px; }
  .section-heading, .section-heading-row { display:block; margin-bottom:27px; }
  .section-caption { margin-top:8px; font-size:12px; }
  .rationale-grid, .category-layout, .economics-grid { display:block; }
  .rationale-card { min-height:0; padding:24px 20px; }
  .legend { margin-top:18px; flex-wrap:wrap; }
  .comparison-table { overflow:hidden; border:1px solid var(--line); border-top:1px solid var(--ink); }
  .table-head { display:none; }
  .region-row { display:block; padding:24px 19px 25px; }
  .region-name { display:grid; grid-template-columns:36px auto; grid-template-rows:auto auto; column-gap:10px; margin-bottom:15px; }
  .region-no { grid-row:1 / 3; margin:4px 0 0; }
  .region-name strong { font-size:23px; }
  .region-name small { margin-top:0; }
  .region-facts { padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .decision { display:inline-flex; margin-top:15px; margin-right:15px; vertical-align:top; }
  .recheck { display:inline-block; vertical-align:top; margin-top:15px; max-width:calc(100% - 160px); }
  .category-keep, .category-drop { min-height:0; padding:27px 22px; }
  .category-drop { border-left:0; border-top:1px solid var(--line); }
  .category-keep h3 { font-size:25px; }
  .caution-strip { align-items:flex-start; }
  .formula-main { font-size:16px; gap:7px; }
  .cost-list { border-left:0; border-top:1px solid var(--line-dark); padding:23px 0 0; gap:17px; margin-top:22px; }
  .economics-note { align-items:flex-start; flex-direction:column; gap:10px; }
  .roadmap-item { grid-template-columns:45px 1fr; gap:13px; padding:22px 0; }
  .roadmap-item.active { margin-left:-10px; padding-left:10px; }
  .roadmap-body h3 { font-size:18px; }
  .unknowns { display:block; }
  .unknowns-grid { margin-top:30px; }
  .unknown-card { min-height:120px; }
  .source-list { display:block; }
  .source-list a { margin-right:0; grid-template-columns:36px 1fr 20px; }
  .footer { display:block; padding-top:32px; }
  .footer p { margin:24px 0; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *, *:before, *:after { transition:none !important; } }


/* --- Visual polish: editorial field notes --- */
:root {
  --shadow-soft: 0 18px 45px rgba(20, 36, 32, .08);
  --shadow-tight: 0 9px 22px rgba(20, 36, 32, .12);
}

body {
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(20, 36, 32, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 36, 32, .025) 1px, transparent 1px);
  background-size: 28px 28px;
}

.site-shell {
  background: rgba(245, 241, 232, .82);
  box-shadow: 0 0 0 1px rgba(20, 36, 32, .035), 0 24px 80px rgba(20, 36, 32, .08);
}

.topbar {
  box-shadow: 0 5px 20px rgba(20, 36, 32, .045);
}

.wordmark,
.button,
.text-link,
.nav-link,
.source-list a,
.rationale-card,
.region-row,
.unknown-card {
  -webkit-tap-highlight-color: transparent;
}

.wordmark-mark {
  transition: transform .25s ease;
}

.wordmark:hover .wordmark-mark {
  transform: translateY(-2px) rotate(-2deg);
}

.nav-link {
  position: relative;
  padding-left: 0;
  transition: color .2s ease, background .2s ease, padding-left .2s ease;
}

.nav-link::before {
  content: '';
  width: 3px;
  height: 0;
  background: var(--accent);
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  transition: height .2s ease;
}

.nav-link:hover,
.nav-link.active {
  padding-left: 8px;
  background: linear-gradient(90deg, rgba(231, 101, 77, .09), transparent 88%);
}

.nav-link:hover::before,
.nav-link.active::before {
  height: 18px;
}

.hero {
  background:
    radial-gradient(circle at 88% 19%, rgba(183, 199, 180, .36) 0 13%, transparent 13.2%),
    radial-gradient(circle at 86% 18%, rgba(183, 199, 180, .13) 0 24%, transparent 24.2%),
    linear-gradient(135deg, rgba(255, 253, 248, .5), transparent 57%);
}

.hero::before {
  content: 'FIELD NOTE / 001';
  position: absolute;
  right: 30px;
  bottom: 29px;
  color: rgba(20, 36, 32, .24);
  font: 9px var(--mono);
  letter-spacing: .13em;
  transform: rotate(-90deg) translateX(100%);
  transform-origin: right bottom;
}

.hero-copy {
  position: relative;
  z-index: 1;
}

.hero-lead {
  text-wrap: pretty;
}

.button-primary {
  box-shadow: 5px 5px 0 var(--sage);
}

.button-primary:hover {
  box-shadow: 3px 3px 0 var(--sage-deep);
}

.verdict-panel {
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 12px 12px 0 var(--sage), var(--shadow-tight);
  transition: transform .25s ease, box-shadow .25s ease;
}

.verdict-panel:hover {
  transform: translate(-3px, -3px);
  box-shadow: 15px 15px 0 var(--sage), var(--shadow-tight);
}

.section-pad {
  position: relative;
}

.section-heading h2 {
  text-wrap: balance;
}

.rationale-card {
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.rationale-card::after {
  content: '';
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}

.rationale-card:hover {
  z-index: 1;
  transform: translateY(-5px);
  background: #fffefa;
  box-shadow: var(--shadow-tight);
}

.rationale-card:hover::after {
  transform: scaleX(1);
}

.table-head {
  background: rgba(235, 229, 216, .6);
  border-bottom: 1px solid var(--line);
}

.region-row {
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.region-row:hover {
  position: relative;
  z-index: 1;
  transform: translateX(4px);
  box-shadow: -4px 0 0 var(--accent), var(--shadow-soft);
}

.region-row.taiwan:hover {
  box-shadow: -4px 0 0 var(--sage-deep), var(--shadow-soft);
}

.decision-chip {
  transition: background .2s ease, transform .2s ease;
}

.decision-chip:hover {
  transform: translateY(-1px);
}

.category-layout,
.formula-card,
.comparison-table {
  box-shadow: var(--shadow-soft);
}

.category-layout {
  overflow: hidden;
}

.category-keep {
  background:
    radial-gradient(circle at 100% 0, rgba(183, 199, 180, .22), transparent 36%),
    var(--ink);
}

.product-tags span {
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.product-tags span:hover {
  background: rgba(255, 255, 255, .13);
  border-color: rgba(255, 255, 255, .55);
  color: var(--white);
}

.hold-list div {
  transition: padding-left .2s ease, background .2s ease;
}

.hold-list div:hover {
  padding-left: 8px;
  background: rgba(234, 219, 154, .16);
}

.caution-strip {
  box-shadow: 5px 5px 0 rgba(141, 126, 61, .18);
}

.formula-card {
  border-left: 3px solid var(--accent);
}

.cost-list > div {
  transition: transform .2s ease;
}

.cost-list > div:hover {
  transform: translateX(4px);
}

.roadmap-item {
  position: relative;
  transition: background .2s ease, padding-left .2s ease;
}

.roadmap-item:not(.active):hover {
  background: rgba(255, 253, 248, .72);
  padding-left: 12px;
}

.roadmap-item.active {
  box-shadow: inset 3px 0 0 var(--sage-deep);
}

.phase-status,
.badge,
.decision-chip {
  text-transform: uppercase;
}

.unknowns {
  background:
    radial-gradient(circle at 90% 0, rgba(66, 98, 82, .34), transparent 30%),
    var(--ink);
}

.unknown-card {
  transition: background .2s ease, transform .2s ease;
}

.unknown-card:hover {
  position: relative;
  z-index: 1;
  background: #1c302b;
  transform: translateY(-2px);
}

.source-list a {
  padding-left: 12px;
  padding-right: 12px;
  margin-right: 0;
  transition: color .2s ease, background .2s ease, padding-left .2s ease;
}

.source-list a:hover {
  padding-left: 18px;
  background: rgba(183, 199, 180, .16);
  transform: none;
}

.footer {
  border-top: 1px solid rgba(20, 36, 32, .08);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

@media (max-width: 760px) {
  body {
    background-size: 22px 22px;
  }

  .topbar {
    box-shadow: 0 5px 16px rgba(20, 36, 32, .08);
  }

  .nav-link::before {
    left: -6px;
  }

  .nav-link:hover,
  .nav-link.active {
    padding-left: 5px;
  }

  .hero {
    background:
      radial-gradient(circle at 92% 10%, rgba(183, 199, 180, .32) 0 16%, transparent 16.2%),
      linear-gradient(135deg, rgba(255, 253, 248, .52), transparent 65%);
  }

  .hero::before {
    display: none;
  }

  .verdict-panel:hover {
    transform: none;
  }

  .rationale-card:hover,
  .region-row:hover,
  .unknown-card:hover {
    transform: none;
  }

  .rationale-card::after {
    left: 20px;
    right: 20px;
  }

  .source-list a:hover {
    padding-left: 16px;
  }
}