@import url('../polish.css');
:root{--wine:#173f30;--deep:#0d2b21;--paper:#fbf7ec;--ink:#26352e;--line:#d6c7a7;--gold:#c9a45c;--gold-light:#e2c680}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:3px solid #cc9335;outline-offset:5px}
.notice{background:var(--wine);color:var(--paper);text-align:center;padding:8px 20px;font-size:.75rem;letter-spacing:.1em}
.notice span{margin-left:18px;letter-spacing:.03em}
.header{height:108px;display:flex;align-items:center;justify-content:space-between;padding:0 6%;background:var(--paper)}
.logo{font-family:Georgia,'Times New Roman',serif;font-size:2.1rem;font-weight:700;letter-spacing:-.065em;white-space:nowrap}
.logo span{font-style:italic;margin:0 .07em;font-weight:400}
.logo small{display:block;font-family:Arial,Meiryo,sans-serif;font-size:.63rem;letter-spacing:.2em;font-weight:400;margin-top:8px}
.header nav{display:flex;gap:30px;font-size:.875rem}
.header nav a:last-child{border-bottom:1px solid var(--wine);padding-bottom:8px}
.journal-hero{padding:105px 8% 90px;background:var(--deep);color:var(--paper);display:grid;grid-template-columns:.8fr 1.2fr;gap:8%;align-items:end}
.eyebrow{font:600 .75rem Arial,sans-serif;letter-spacing:.18em;line-height:1.6;color:#dfb895}
.journal-hero h1{font:500 clamp(4rem,8vw,8rem)/1 Georgia,serif;letter-spacing:-.04em;margin:25px 0 0}
.journal-hero h2{font:500 clamp(2rem,3.2vw,3.2rem)/1.6 'Yu Mincho',serif;letter-spacing:.05em;margin:0 0 22px}
.journal-hero p{line-height:2;margin:0}
.categories{padding:58px 8%;display:grid;grid-template-columns:repeat(3,1fr);gap:30px;border-bottom:1px solid var(--line)}
.category{padding-top:18px;border-top:2px solid var(--wine)}
.category strong{display:block;font:600 .75rem Arial,sans-serif;letter-spacing:.12em;color:var(--wine);margin-bottom:12px}
.category p{font-size:.9rem;line-height:1.85;margin:0}
.article-grid{padding:85px 8% 110px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.card{background:#f5eddf;display:block}
.card img{width:100%;display:block;aspect-ratio:3/2;object-fit:cover;filter:saturate(.82)}
.card div{padding:27px}
.card .meta{font:600 .7rem Arial,sans-serif;letter-spacing:.11em;color:var(--wine)}
.card h2{font:500 1.5rem/1.7 'Yu Mincho',serif;margin:16px 0}
.card .summary{font-size:.9rem;line-height:1.9;color:#5f504a}
.card .read{display:inline-block;font-size:.8rem;border-bottom:1px solid var(--wine);padding-bottom:6px;color:var(--wine)}
footer{background:var(--deep);color:var(--paper);padding:48px 7%;display:flex;justify-content:space-between;gap:30px}
.article-hero{max-width:1100px;margin:auto;padding:80px 7% 45px}
.article-hero .eyebrow{color:var(--wine)}
.article-hero h1{font:500 clamp(2.2rem,4.5vw,4.3rem)/1.55 'Yu Mincho',serif;letter-spacing:.04em;margin:20px 0}
.article-date{font-size:.8rem;color:#7a6960}
.article-image{width:100%;max-width:1200px;display:block;aspect-ratio:3/2;object-fit:cover;margin:0 auto}
.article-body{max-width:760px;margin:0 auto;padding:70px 7% 100px}
.article-body p{font-size:1.05rem;line-height:2.2;margin:0 0 28px}
.article-body .lead{font:500 1.35rem/2 'Yu Mincho',serif}
.article-body strong{color:var(--wine)}
.article-note{border-top:1px solid var(--line);padding-top:22px;color:#75645c;font-size:.85rem!important}
.back{display:inline-block;color:var(--wine);font-size:.9rem;border-bottom:1px solid var(--wine);padding-bottom:7px;margin-top:20px}
@media(max-width:800px){.journal-hero{grid-template-columns:1fr;gap:45px;padding:70px 7%}
.journal-hero h1{font-size:4rem}
.categories,.article-grid{grid-template-columns:1fr}
.categories{padding:45px 7%}
.article-grid{padding:55px 7% 80px}
.header{height:auto;min-height:100px;padding:20px 6%;align-items:flex-start}
.header nav{flex-direction:column;align-items:flex-end;gap:9px;font-size:.75rem}
.notice{font-size:.65rem}
.notice span{margin-left:8px}
footer{flex-direction:column}
.article-hero{padding-top:60px}
.article-body{padding-top:50px}
.article-body p{font-size:1rem}
}