@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Yomogi&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&family=Noto+Serif+JP:wght@400;600;700&display=swap');
:root { color-scheme: light; --ink:#29281f; --muted:#625f52; --paper:#f4ecd9; --cream:#fbf7ec; --navy:#192f36; --deep:#10262d; --gold:#b88a43; --rust:#9f5138; --line:#c9bda4; --body:'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,system-ui,sans-serif; --display:'Yomogi', 'Noto Serif JP','Hiragino Mincho ProN','Yu Mincho',serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font:400 16px/1.7 var(--body); }
a { color:inherit; }
a:focus-visible { outline:3px solid #b47427; outline-offset:4px; }
.skip-link { position:absolute; left:-9999px; top:1rem; z-index:20; background:white; padding:.5rem 1rem; }
.skip-link:focus { left:1rem; }
.container { width:min(90vw,calc(100% - 3rem)); margin-inline:auto; }
.topbar { background:#11282e; border-bottom:1px solid #597075; color:#fbf0db; }
.topbar-inner { min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.brand { display:flex; align-items:center; gap:.7rem; text-decoration:none; font-family: "IBM Plex Sans", sans-serif; font-size: 1.6rem; font-optical-sizing: auto;  font-style: normal; font-variation-settings: "wdth" 100; letter-spacing:.005em; white-space:nowrap; }
.brand-mark { display:inline-grid; place-items:center; width:30px; height:30px; border:1px solid #d4ad6b; border-radius:50%; color:#e0be82; font:1.3rem Georgia,serif; }
.topnav { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:clamp(.7rem,2vw,2rem); }
.topnav a { font-size:.88rem; font-weight:600; text-decoration:none; color:#e8deca; }
.topnav a:hover { color:#ffdca2; }
.topnav .nav-cta { border:1px solid #bfa278; border-radius:3px; padding:.53rem .9rem; color:#ffe2a8; }
.hero { position:relative; overflow:hidden; background:radial-gradient(circle at 75% 40%,#eadfcb,transparent 52%),linear-gradient(120deg,#fcf7eb,#e6d7b9); border-bottom:1px solid var(--line); }
.hero::before { content:''; position:absolute; inset:0; opacity:.16; pointer-events:none; background-image:repeating-linear-gradient(0deg,transparent 0 34px,#8b7b5f 35px),repeating-linear-gradient(90deg,transparent 0 34px,#8b7b5f 35px); mask-image:linear-gradient(90deg,transparent 23%,black); }
.hero-inner { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.96fr); align-items:center; min-height:640px; gap:2rem; padding-block:6rem; position:relative; }
.eyebrow,.section-kicker { color:#8b4e38; font:.8rem/1.5 var(--body); font-weight:700; letter-spacing:.08em; }
h1,h2,h3 { font-family:var(--display); font-weight:400; line-height:1.1; letter-spacing:-.012em; }
h1 { margin:1.1rem 0 1.3rem; font-size:clamp(2.6rem,4.2vw,5.2rem); line-height:1.38; letter-spacing:.015em; }
.hero-highlight { color:var(--rust); }
.hero-text { max-width:35rem; color:#4b4b40; font-size:clamp(1.05rem,1.6vw,1.25rem); line-height:1.72; }
.actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.2rem; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:.8rem; min-height:50px; padding:.75rem 1.35rem; text-decoration:none; font-weight:700; border-radius:3px; transition:background .2s,transform .2s; }
.button:hover { transform:translateY(-2px); }
.button-primary { background:#93452e; color:#fff8ed; }
.button-primary:hover { background:#763622; }
.button-secondary { border:1px solid #8c7859; color:#3e3a2d; }
.button-secondary:hover { background:#e6d5b5; }
.hero-note { color:#736d5c; margin-top:1.6rem; font-size:.86rem; }
.chart { position:relative; width:min(100%,400px); aspect-ratio:1/1.05; justify-self:center; filter:drop-shadow(0 18px 24px #42362226); transform:rotate(2deg); }
.chart svg { width:100%; height:100%; display:block; }
.section { padding-block:clamp(5rem,9vw,8rem); }
.section-header { max-width:740px; margin-bottom:3rem; }
.section-kicker { margin:0 0 1rem; }
h2 { font-size:clamp(2.1rem,3.9vw,3.5rem); line-height:1.42; margin:0 0 1rem; }
.section-lead { max-width:660px; font-size:1.1rem; color:var(--muted); margin:0; }
.cream { background:var(--cream); }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.feature { background:#f7f0df; border:1px solid #d9c9aa; padding:2.1rem 1.8rem; }
.feature .num { color:#94583d; font-size:.73rem; letter-spacing:.04em; font-weight:700; }
.feature h3 { font-size:1.58rem; line-height:1.45; margin:1.6rem 0 .9rem; }
.feature p { color:#58594e; margin:0; }
.author-section { background:#16333b; color:#f8edda; position:relative; }
.author-section::before { content:''; position:absolute; inset:0; opacity:.07; pointer-events:none; background-image:repeating-linear-gradient(20deg,transparent 0 48px,#e0c391 49px); }
.author-section .section-kicker { color:#e8bb79; }
.author-layout { position:relative; display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(2rem,6vw,6rem); align-items:center; }
.author-layout h2 .accent { color:#e3b477; }
.author-copy p:not(.section-kicker) { color:#e1dfd4; font-size:1.09rem; }
.author-copy .small { color:#bbc8c3; font-size:.94rem!important; }
.item-card { background:#f0e1c2; color:#342f25; border:8px solid #bca57c; outline:1px solid #705b3e; box-shadow:12px 18px 0 #071d2470,0 24px 60px #071b2266; transform:rotate(1deg); }
.item-card-inner { padding:clamp(1.4rem,3.5vw,2.7rem); }
.item-card-head { display:flex; gap:1rem; align-items:center; justify-content:space-between; border-bottom:1px solid #b9a27a; padding-bottom:.7rem; font-size:.82rem; color:#725536; }
.item-card-head strong { font:normal 1.5rem/1 Georgia,serif; }
.item-art { display:grid; place-items:center; margin:1.8rem auto 1rem; width:168px; height:158px; }
.item-art svg { width:100%; height:100%; }
.item-card h3 { font-size:2.05rem; margin:.4rem 0 .6rem; }
.item-lore { color:#65563e; font:normal 1rem/1.9 var(--body); margin:0 0 1.5rem; }
.recipe { border-top:1px solid #bca782; padding-top:1.35rem; }
.recipe strong { display:block; color:#75502c; font-size:.79rem; text-transform:uppercase; letter-spacing:.03em; margin-bottom:.8rem; }
.ingredients { display:flex; gap:.5rem; flex-wrap:wrap; }
.ingredient { padding:.3rem .65rem; border:1px solid #ab946e; background:#fcf3dd; font-size:.85rem; }
.production-note { border-top:1px solid #bca782; margin-top:1.2rem; padding-top:1rem; font-size:.89rem; color:#5e5440; line-height:1.6; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; counter-reset:steps; }
.step { border-top:2px solid #b8a076; padding:1.7rem .7rem 0 0; }
.step::before { counter-increment:steps; content:'0' counter(steps); color:#a65d3b; font-weight:700; display:block; margin-bottom:1rem; }
.step h3 { font-size:1.55rem; line-height:1.5; margin:0 0 .75rem; }
.step p { margin:0; color:#57584e; }
.step a { color:#8d432c; }
.callout { margin-top:3.2rem; display:flex; justify-content:space-between; align-items:center; gap:1.5rem; padding:2rem; background:#e5d6b9; border:1px solid #cdb68c; }
.callout h3 { font-size:1.75rem; margin:0; }
.callout p { margin:.3rem 0 0; color:#615847; }
.difference { background:#d6d9c4; }
.difference-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; }
.difference-grid p { margin-top:0; color:#46534c; font-size:1.06rem; }
.text-link { color:#733f2d; font-weight:700; text-underline-offset:4px; }
.site-footer { background:#10262d; color:#f4e9d6; padding:3rem 0; }
.footer-row { display:flex; justify-content:space-between; align-items:center; gap:2rem; flex-wrap:wrap; }
.footer-title { font:normal 1.8rem Georgia,serif; }
.footer-subtitle { margin:.35rem 0 0; color:#c1c8be; font-size:.85rem; }
.footer-links { display:flex; flex-wrap:wrap; gap:1.4rem; }
.footer-links a { color:#e3d7c3; font-size:.9rem; text-underline-offset:4px; }
@media(max-width:900px) { .hero-inner { grid-template-columns:1fr; padding-block:4.5rem; } .chart { width:min(85%,480px); } .author-layout { grid-template-columns:1fr; } .item-card { max-width:560px; margin:auto; } .feature-grid { grid-template-columns:1fr; } }
@media(max-width:680px) { .container { width:min(100% - 2rem,1140px); } .topbar-inner { padding-block:1rem; align-items:flex-start; flex-direction:column; } .topnav { justify-content:flex-start; gap:.7rem 1rem; } .topnav a { font-size:.8rem; } .hero-inner { padding-top:4rem; } .chart { width:100%; } .steps,.difference-grid { grid-template-columns:1fr; gap:2rem; } .callout { flex-direction:column; align-items:flex-start; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button { transition:none; } .button:hover { transform:none; } }
  /* Japanese typesetting */
body { line-height:1.85; }
h1,h2,h3 { overflow-wrap:anywhere; }
.hero-inner { grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr); }
.feature p,.step p,.production-note { line-height:1.9; }
.hero-note { line-height:1.7; }
.item-card-head { letter-spacing:0; }
@media(max-width:900px) { .hero-inner { grid-template-columns:1fr; } }