:root{--paper:#f7f5ef;--ink:#292d28;--muted:#566052;--line:#c9cec1;--accent:#bb3f1f;--soft:#eceee3;--mono:'Courier New',monospace}
*{box-sizing:border-box}
html{scroll-padding-top:24px}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.8 Arial,sans-serif}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:4px}
a:hover{text-decoration-thickness:2px}
a:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
.skip-link{position:absolute;top:12px;left:20px;z-index:2;transform:translateY(-180%);background:var(--paper);padding:8px 14px;border:2px solid var(--accent)}
.skip-link:focus{transform:none}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1200px;margin:auto;padding:26px 40px;border-bottom:1px solid var(--line)}
.site-header nav{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:14px}
.site-header nav a,.site-header nav span{color:var(--muted)}
.site-header .play-link{font-size:14px;white-space:nowrap;padding:9px 16px}
main{max-width:1040px;margin:auto;padding:64px 40px 0}
article>section{margin:76px 0;scroll-margin-top:32px}
article>section>p,.guide-intro>p{max-width:74ch}
.eyebrow{font:13px/1.6 var(--mono);letter-spacing:1.5px;color:var(--muted);margin:0 0 18px}
h1,h2,h3{line-height:1.14;letter-spacing:-.045em;font-weight:500}
h1{font-size:clamp(44px,7vw,82px);margin:0 0 30px;max-width:800px}
h2{font-size:clamp(30px,4vw,45px);margin:0 0 26px;max-width:760px}
h3{font-size:23px;margin:0 0 15px;letter-spacing:-.02em}
p{margin:0 0 22px}
.lead{font-size:22px;line-height:1.65}
.guide-intro>p:not(.lead):not(.eyebrow){color:var(--muted)}
.play-link{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;background:var(--accent);color:#fff8ed;padding:13px 23px;border-radius:3px;text-decoration:none;font-size:17px;line-height:1.5}
.play-link:hover{background:#9e341a;text-decoration:underline}
.city-image{margin:50px 0 0}
.city-image img{display:block;width:100%;height:auto;border:1px solid var(--line)}
.city-image figcaption{font-size:14px;color:var(--muted);padding:10px 0}
.contents{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px 24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0;margin:30px 0;font-size:16px}
.architecture-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:30px 0}
.architecture-grid section{border-top:3px solid var(--ink);padding:24px 0 0}
.architecture-grid p{font-size:16px;line-height:1.8}
.language-mark{display:block;width:36px;height:42px;margin:0 0 23px}
.concrete{background:repeating-linear-gradient(0deg,#a4aa98 0 8px,#606c5b 8px 11px);transform:skewY(-10deg)}
.deco{background:repeating-linear-gradient(90deg,#b89a6d 0 7px,#ead7ad 7px 10px);clip-path:polygon(0 100%,0 40%,20% 40%,20% 20%,40% 20%,40% 0,60% 0,60% 20%,80% 20%,80% 40%,100% 40%,100% 100%)}
.timber{background:repeating-linear-gradient(90deg,#9f734d 0 7px,#c49c70 7px 10px);clip-path:polygon(0 40%,50% 0,100% 40%,100% 100%,0 100%)}
.note{background:var(--soft);border-left:4px solid var(--muted);padding:28px 32px;margin:34px 0}
.note h3{font-size:22px;line-height:1.35}
.note p{margin:0}
.closing{border-top:1px solid var(--line);padding-top:45px}
footer{display:flex;justify-content:space-between;gap:20px;max-width:1200px;margin:auto;padding:28px 40px 36px;border-top:1px solid var(--line);font-size:15px}
@media(max-width:640px){body{font-size:17px;line-height:1.8}.site-header{padding:20px;align-items:flex-start;flex-direction:column;gap:18px}.site-header nav{font-size:13px;gap:6px 10px}.site-header .play-link{min-height:44px}main{padding:42px 22px 0}article>section{margin:58px 0}h1{font-size:clamp(40px,10vw,60px);margin-bottom:24px}.lead{font-size:20px}.eyebrow{font-size:12px;letter-spacing:1px}.city-image{margin-top:32px}.contents{grid-template-columns:1fr 1fr;gap:14px 20px;font-size:15px}.architecture-grid{grid-template-columns:1fr;gap:24px}.architecture-grid section{padding:24px 0 0}.architecture-grid p{font-size:17px}.language-mark{float:right;width:32px;height:37px;margin:0 8px 15px 20px}.note{padding:23px 20px}.note h3{font-size:21px}footer{padding:24px 22px;flex-direction:column;gap:12px}}
@media(max-width:360px){.contents{grid-template-columns:1fr}.site-header nav{gap:6px 8px}}
@media print{body{background:#fff;color:#000;font-size:12pt}main{max-width:none;padding:0}.site-header,.contents,.play-link,.skip-link,footer{display:none}.guide-intro h1{font-size:32pt}.lead{font-size:14pt}.city-image{max-width:600px}article>section{margin:32px 0}.architecture-grid{gap:20px}.note{break-inside:avoid}a{color:inherit}.eyebrow{font-size:10pt}}