:root { --ink:#2d2924; --paper:rgba(249,246,239,.93); --gold:#a97728; --muted:#71685c; --line:#d6c9b5; }
* { box-sizing:border-box; }
body { min-height:100vh; margin:0; color:var(--ink); font-family:'Noto Sans JP',sans-serif; background:#e9e1d5 url('../images/bg.png') center / cover fixed; background-image:image-set(url('../images/bg.webp') type('image/webp'), url('../images/bg.png') type('image/png')); }
body::before { content:''; position:fixed; inset:0; z-index:-1; background:rgba(239,233,221,.78); }
.reading-shell { width:min(100% - 2rem, 780px); margin:0 auto; padding:clamp(2.25rem,8vw,5.5rem) 0 3.5rem; }
.site-link { display:inline-block; margin-bottom:clamp(2rem,6vw,4.2rem); color:#70501f; font-family:'Zen Old Mincho',serif; font-size:.82rem; letter-spacing:.12em; text-decoration:none; }
.site-link:hover { text-decoration:underline; }
article { padding:clamp(1.5rem,5vw,3rem); border-top:4px solid var(--gold); background:var(--paper); box-shadow:0 16px 45px rgba(60,45,26,.16); }
.reading-label { margin:0 0 1.15rem; color:var(--gold); font-size:.75rem; letter-spacing:.14em; }
.reading-label a { color:inherit; text-decoration:none; }
h1 { margin:0; font-family:'Zen Old Mincho',serif; font-size:clamp(1.75rem,7vw,3rem); line-height:1.45; letter-spacing:.03em; }
h2 { margin:2.4rem 0 .8rem; font-family:'Zen Old Mincho',serif; font-size:1.45rem; line-height:1.65; }
p { margin:1.25rem 0 0; font-size:clamp(.94rem,2.7vw,1.05rem); line-height:2.05; }
.bottle-en { margin-top:.4rem; color:var(--muted); font-size:.9rem; line-height:1.6; }
.bottle-cat { margin-top:1rem; color:#51483c; font-size:.85rem; line-height:1.8; }
.lead { margin:2rem 0 0; padding-top:1.5rem; border-top:1px solid rgba(112,80,31,.22); color:#51483c; font-size:clamp(1rem,3vw,1.14rem); font-weight:700; line-height:2; }
.flavor { width:100%; margin-top:1.3rem; border-collapse:collapse; font-size:.9rem; }
.flavor caption { margin-bottom:.6rem; color:var(--muted); font-size:.8rem; text-align:left; }
.flavor th { width:7.5em; padding:.45rem .5rem .45rem 0; font-weight:400; text-align:left; white-space:nowrap; }
.flavor td { display:flex; align-items:center; gap:.6rem; padding:.45rem 0; }
.flavor .meter { display:flex; gap:.3rem; }
.flavor .meter i { width:2.2rem; height:.55rem; border-radius:999px; background:rgba(169,119,40,.16); }
.flavor .meter-0 i:nth-child(-n+1), .flavor .meter-1 i:nth-child(-n+2), .flavor .meter-2 i { background:var(--gold); }
.flavor .value { color:#51483c; font-size:.85rem; }
.similar-list { margin:1.2rem 0 0; padding-left:1.4rem; }
.similar-list li { margin-top:1.1rem; line-height:1.7; }
.similar-list a { font-weight:700; }
.similar-meta { display:block; color:var(--muted); font-size:.78rem; }
.similar-list p { margin-top:.2rem; font-size:.9rem; line-height:1.8; }
.bottle-group h2 { font-size:1.2rem; }
.bottle-index { display:grid; grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr)); gap:.2rem 1.2rem; margin:0; padding:0; list-style:none; }
.bottle-index li { padding:.45rem 0; border-bottom:1px solid var(--line); line-height:1.5; }
.bottle-index span { display:block; color:var(--muted); font-size:.75rem; }
article a:not(.diagnosis-cta a) { color:#70501f; text-underline-offset:.2em; }
.diagnosis-cta { margin-top:2.6rem; padding:1.4rem; border:1px solid rgba(169,119,40,.43); background:rgba(169,119,40,.08); }
.diagnosis-cta p { margin:0 0 1rem; color:#51483c; font-size:.88rem; line-height:1.7; }
.diagnosis-cta a { display:block; padding:1rem 1.1rem; background:#332b22; color:#fffaf1; font-weight:700; line-height:1.55; text-align:center; text-decoration:none; transition:transform .16s ease, background .16s ease; }
.diagnosis-cta a:hover, .diagnosis-cta a:focus-visible { background:#6c491b; transform:translateY(-1px); outline:2px solid #6c491b; outline-offset:3px; }
.source-note, .article-meta { color:var(--muted); font-size:.8rem; line-height:1.8; }
.reading-links { margin-top:2rem; padding-top:1rem; border-top:1px solid var(--line); }
.reading-footer { margin-top:1.5rem; color:var(--muted); font-size:.72rem; line-height:1.7; text-align:center; }
@media (max-width:560px) { .reading-shell { width:min(100% - 1.25rem, 780px); padding-top:1.5rem; } article { padding:1.4rem 1.25rem; } .diagnosis-cta { padding:1rem; } }