:root{--accent:#315F63;--ink:#263D3B;--muted:#546761;--rule:#D8E1DC;--danger:#B3261E;}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);background:#fff;line-height:1.9;overflow-wrap:anywhere}
a{color:var(--accent);text-underline-offset:.25em}
a:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
header{padding-block:1.4rem}
.brand{display:flex;align-items:flex-start;gap:.4em;font-size:1.7777777778rem;font-weight:750;text-decoration:none;line-height:1.5}
nav{display:flex;flex-wrap:wrap;gap:.5rem 1.3rem;margin-top:1.2rem;padding-block:.65rem;border-block:1px solid var(--rule)}
nav a{font-size:.9rem;text-decoration:none;min-width:0}
nav a[aria-current]{font-weight:700;text-decoration:underline}
main{padding-block:1.5rem 3rem}
h1{font-size:1.5555555556rem;line-height:1.65;margin:0 0 1rem;font-weight:750}
h2{font-size:1.45rem;line-height:1.65;margin:2.1rem 0 .8rem;font-weight:700}
p{margin:.8rem 0 1.25rem}
.utility-title{font-size:1.45rem}
.lead{color:var(--muted)}
.hero{padding-block:1.2rem 1.5rem;margin-bottom:2rem}
.hero.with-image{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem;align-items:start}
.hero-copy,.article-image{min-width:0}
.article-catch{font-weight:650}
figure{margin:0}
figure img{display:block;width:100%;height:auto;border-radius:0}
figcaption{font-size:10px;line-height:1.5;margin-top:4px}
.comic{max-width:480px;margin:0 auto 1.5rem}
.comic figcaption{text-align:center}
.comic-caption{color:var(--muted)}
.catch{margin-block:1.2rem;line-height:1.65}
.top-lead{margin:0 0 2rem}
.article section:last-of-type{margin-bottom:2rem}
.preview-ad{margin-block:1.7rem;text-align:center}
.preview-ad-short,.ad-box{padding:1rem;background:var(--accent);color:#fff;line-height:1.8}
.pr-label{font-size:.65em;white-space:nowrap;margin-right:.25em}
.ad-material{font-weight:700;text-decoration:underline;text-underline-offset:.2em}
.preview-ad-short a,.ad-box a{color:inherit}
.ad-box p{margin:0}
.ad-guide{line-height:1.65;margin:0 0 .8rem}
.red{color:var(--danger)}
.toc{border-block:1px solid var(--rule);padding-block:.4rem 1rem;margin-block:1.5rem 2rem}
.toc h2{font-size:1.1rem;margin:.6rem 0}
.toc ul{padding-left:1.4rem}
.toc li{margin:.35rem 0}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1rem}
.card{border:1px solid var(--rule);padding:1.1rem;text-decoration:none;font-weight:650;line-height:1.7}
.related{border-top:1px solid var(--rule);margin-top:2.5rem;padding-top:.6rem}
footer{border-top:1px solid var(--rule);padding-block:1.4rem;font-size:.8rem}
footer .links{display:flex;flex-wrap:wrap;gap:1rem}
.back{display:inline-block;margin-block:1rem}
.skip{position:absolute;top:-5rem;left:1rem}
.skip:focus{top:1rem;background:#fff;padding:.5rem;z-index:1}
.site-mark{flex:none;margin-block-start:calc(.75em - 16px);width:32px;height:32px}
@media(max-width:680px){
  .hero.with-image,.cards{grid-template-columns:minmax(0,1fr)}
  main{padding-top:.75rem}
  h1{font-size:1.3333333333rem}
  h2,.utility-title{font-size:1.25rem}
  nav{gap:.5rem .9rem}
  .hero{padding-top:.8rem}
}

/* One page-wide shell: header, main and footer share its edges. */
:root {
  --content-width: 780px;
  --page-gutter: clamp(18px, 4vw, 36px);
  --font-gothic: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}
html { font-size: 18px; }
body, h1, h2 { font-family: var(--font-gothic); }
.site-shell {
  width: calc(100% - var(--page-gutter) - var(--page-gutter));
  max-width: var(--content-width);
  margin-inline: auto;
}

/* Regional targeting line: optional common content configuration. */
.region{font-weight:700;color:var(--accent)}

.pr-space{display:grid;place-items:center;border:1px dashed var(--muted);padding:1rem;min-height:4rem;margin-block:1.7rem;text-align:center;color:var(--muted);background:#fff}

.breadcrumbs{border:0;gap:.5rem;margin:0 0 1rem;padding:0;font-size:.85rem}.breadcrumbs span{min-width:0}.content-dates{font-size:.8rem;color:var(--muted)}

/* Optional shared site subtitle: title and subtitle form one text column. */
.brand-text{min-width:0}
.brand-text>.site-name{display:block}
.site-subtitle{display:block;margin-top:.3rem;font-size:1rem;font-weight:500;line-height:1.65;color:var(--ink)}