:root {
  --paper:#f0e8d7; --paper-deep:#e6dbc6; --ink:#30251e; --muted:#76685c;
  --night:#241813; --night-deep:#19110e; --red:#963b2c; --gold:#c9a566;
  --gold-light:#f0d9a5; --line:rgba(115,80,47,.22);
  --serif:'Noto Serif',Georgia,serif; --sans:'Be Vietnam Pro',sans-serif;
  --gutter:clamp(24px,6vw,100px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:25px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1rem/1.8 var(--sans)}
body:has(dialog[open]){overflow:hidden}
h1,h2,h3,p,figure{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
img{display:block;max-width:100%}
em{font-style:normal;color:var(--red)}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid #c58139;outline-offset:5px}
::selection{background:var(--red);color:#fff}
[hidden]{display:none!important}
.skip-link{position:fixed;z-index:30;top:12px;left:12px;padding:10px 20px;background:var(--paper);color:var(--ink);transform:translateY(-180%)}
.skip-link:focus{transform:translateY(0)}
.site-header{min-height:100px;background:var(--night-deep);color:#cfc0a8;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:15px var(--gutter);border-bottom:1px solid #a9824838;position:relative;z-index:5}
.brand{display:inline-flex;align-items:center;gap:12px;font:700 1.18rem/1.4 var(--serif);color:var(--gold-light);flex-shrink:0}
.brand-seal{font:1rem/1.1 var(--serif);border:1px solid #bd8155;color:#ebc999;padding:5px 7px;background:#79372b}
.brand small{display:block;font:500 .75rem/1.3 var(--sans);text-align:center;letter-spacing:3px;margin-top:4px}
.desktop-nav{display:flex;gap:clamp(18px,2.4vw,40px);align-items:center}
.desktop-nav a{font-size:.875rem;transition:color .2s;position:relative}
.desktop-nav a:hover,.desktop-nav a.active{color:var(--gold-light)}
.desktop-nav a.active:after{content:'';position:absolute;left:0;right:0;bottom:-12px;height:1px;background:var(--gold)}
.header-cta{border:1px solid #b389505c;background:transparent;padding:10px 17px;color:var(--gold-light);font-size:.875rem;white-space:nowrap}
.header-cta span{margin-left:17px;font-size:1.1rem}
.menu-toggle,.mobile-nav{display:none}
.hero{background:radial-gradient(ellipse at 74% 40%,#64352166,transparent 58%),var(--night);color:var(--paper);overflow:hidden}
.hero-inner{max-width:1600px;padding:65px var(--gutter) 78px;margin:auto;display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:55px;min-height:730px}
.eyebrow{font-size:.75rem;letter-spacing:2.4px;line-height:1.8;font-weight:600;color:var(--red)}
.hero .eyebrow{color:#c6a271;letter-spacing:1.6px;max-width:390px}
.hero .eyebrow span{display:inline-block;width:22px;height:1px;background:var(--gold);vertical-align:middle;margin-right:8px}
.hero h1{font:800 clamp(66px,6.4vw,101px)/1.04 var(--serif);color:var(--gold-light);letter-spacing:1px;margin-top:25px;text-shadow:0 4px 0 #68462666}
.brand-word{display:flex;gap:20px;align-items:center;max-width:340px;margin-top:19px;color:var(--gold);font-size:.875rem;font-weight:600;letter-spacing:4px}
.brand-word span{height:1px;background:#bb945455;flex:1}
.hero h2{font:400 clamp(23px,2vw,31px)/1.55 var(--serif);margin-top:27px}
.hero-description{color:#bdb09f;font-size:1rem;max-width:410px;margin-top:17px;line-height:1.9}
.button{display:inline-flex;align-items:center;justify-content:center;gap:30px;min-height:55px;padding:14px 24px;font-size:.875rem;font-weight:600;border:1px solid transparent;transition:background .2s,transform .2s}
.button:hover{transform:translateY(-2px)}
.button-red{color:#fff0d0;background:var(--red);border-color:#c982505e;box-shadow:inset 0 0 0 4px #ecbb7710}
.button-red:hover{background:#af4c37}
.button span{font-size:1.25rem}
.hero .button{margin-top:27px}
.hero-note{display:block;font-size:.75rem;letter-spacing:.7px;color:#a3927e;margin-top:20px}
.hero-portraits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;position:relative;padding:35px 0 60px}
.portrait{min-width:0;background:#211306;border:1px solid #b58a465c;position:relative;transition:transform .3s,border-color .3s;box-shadow:0 16px 30px #08030150}
.portrait:before,.portrait:after{content:'';position:absolute;top:-5px;left:-5px;width:23px;height:23px;border-top:1px solid var(--gold);border-left:1px solid var(--gold);pointer-events:none;z-index:1}
.portrait:after{top:auto;left:auto;bottom:-5px;right:-5px;transform:rotate(180deg)}
.portrait-di{transform:translateY(-32px)}
.portrait-giap{transform:translateY(25px)}
.portrait:hover{border-color:var(--gold);transform:translateY(-8px)}
.portrait-di:hover{transform:translateY(-40px)}
.portrait-giap:hover{transform:translateY(17px)}
.portrait-top{position:relative;display:flex;justify-content:space-between;gap:6px;padding:13px;font-size:.75rem;color:#a89170;border-bottom:1px solid #ad83332a}
.portrait-top>span:first-child{color:var(--gold);font-family:var(--serif)}
.portrait-art{height:clamp(290px,26vw,405px);overflow:hidden;position:relative}
.portrait-art img{width:100%;height:100%;object-fit:cover;object-position:67% center}
.portrait-di .portrait-art img{object-position:24% center}
.portrait-giap .portrait-art img{object-position:38% center}
.portrait-art:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#211306,transparent 24%)}
.portrait-caption{padding:4px 14px 22px;position:relative}
.portrait-caption small{font-size:.75rem;color:#a68f70;letter-spacing:1px}
.portrait-caption h3{font:500 clamp(19px,1.7vw,27px)/1.5 var(--serif);color:var(--gold-light);margin-top:5px;white-space:nowrap}
.portrait-arrow{color:#b59c72;position:absolute;right:12px;top:2px;font-size:1.1rem}
.portraits-footnote{position:absolute;bottom:-8px;width:100%;text-align:center;font-size:.75rem;color:#9b856b;letter-spacing:1.7px}
.hero-ribbon{padding:22px var(--gutter);border-top:1px solid #bb945433;border-bottom:1px solid #bb945433;background:#17100c55;display:flex;justify-content:center;align-items:center;gap:clamp(20px,5vw,85px);font-size:.75rem;letter-spacing:2px;color:#c3ae8d}
.hero-ribbon i{font-size:7px;font-style:normal;color:#97764a}
.section-pad{padding:90px var(--gutter)}
.classes{background:radial-gradient(ellipse at 10% 80%,#fff7e355,transparent 65%),var(--paper)}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:35px;margin-bottom:38px}
.section-heading h2{font:500 clamp(31px,3vw,47px)/1.45 var(--serif);letter-spacing:-1px;margin-top:14px}
.section-heading>p{color:var(--muted);font-size:1rem;max-width:400px;padding-bottom:4px}
.class-tabs{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);margin-top:36px}
.class-tabs button{display:flex;align-items:center;gap:17px;background:transparent;border:0;padding:21px 24px;font:500 1.35rem/1.4 var(--serif);text-align:left;transition:background .2s}
.class-tabs button+button{border-left:1px solid var(--line)}
.class-tabs button>span{font:italic .875rem var(--serif);color:#a48b6e}
.class-tabs button>small{font:400 .75rem var(--sans);margin-left:auto;color:var(--muted)}
.class-tabs button[aria-selected=true]{color:#f8e5bd;background:var(--night)}
.class-tabs button[aria-selected=true]>small{color:#cdbb9a}
.class-panel{display:grid;grid-template-columns:1.1fr 1fr;gap:55px;align-items:center;padding-top:40px}
.class-visual{border:1px solid #a383514d;padding:8px;background:#e3d5b7}
.class-visual>img{width:100%;height:auto;aspect-ratio:669/493;background:#261403}
.class-visual figcaption{padding:10px 5px 3px;font-size:.75rem;color:#806f59}
.class-story{min-width:0}
.class-story h3{font:600 clamp(36px,4vw,62px)/1.3 var(--serif);color:var(--red);margin-top:10px}
.class-tagline{font:500 1.17rem/1.7 var(--serif);margin-top:13px}
#class-description{font-size:1rem;color:#776657;margin-top:13px;line-height:1.85}
.class-facts{display:grid;gap:9px;font-size:.875rem;padding:18px 0;margin:23px 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.class-facts>div{display:grid;grid-template-columns:114px 1fr;gap:15px}
.class-facts dt{color:#86745e}
.class-facts dd{margin:0;color:#4c3d2d}
.class-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.class-tags span{font-size:.75rem;padding:3px 10px;border:1px solid var(--line);color:#72573a}
.source-link{display:inline-flex;align-items:center;gap:20px;font-size:.875rem;color:var(--red);border-bottom:1px solid #91382445;padding-bottom:3px;margin-top:21px}
.source-link:hover{color:#c05735}
.section-note{color:#8b7965;font-size:.75rem;border-top:1px solid var(--line);padding-top:19px;margin-top:36px}
.memories{background:#2d2018;color:#ebddc3}
.memories .eyebrow{color:#b79761}
.memories em{color:#d9b77a}
.memories .section-heading>p{color:#b3a28e}
.hometown-row{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #a5814c44;border-bottom:1px solid #a5814c44;margin-top:44px;padding:28px 0;gap:33px}
.hometown-row>div+div{border-left:1px solid #a5814c33;padding-left:33px}
.hometown-row span{color:#c2a170;font-size:.75rem;letter-spacing:1.5px}
.hometown-row h3{font:500 1.35rem/1.5 var(--serif);margin-top:9px}
.hometown-row p{font-size:1rem;color:#af9f89;margin-top:12px}
.memory-activities{margin-top:44px;display:grid;grid-template-columns:1fr 1fr;gap:50px}
.article-number{font-size:.75rem;color:#b8945b;letter-spacing:1.6px}
.memory-feature{background:linear-gradient(135deg,#763b26,#482a1d 75%);border:1px solid #bc92554d;padding:35px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;position:relative}
.memory-feature h3{font:500 clamp(30px,3vw,44px)/1.4 var(--serif);color:#ebd0a3;margin-top:25px}
.memory-feature p{color:#d0b99a;font-size:1rem;margin-top:25px;max-width:490px}
.memories .source-link{color:#d7b783;border-color:#bb94545c}
.memory-side{display:grid;gap:30px}
.memory-side>article+article{border-top:1px solid #a5814c33;padding-top:30px}
.memory-side h3{font:500 1.6rem/1.6 var(--serif);margin-top:12px}
.memory-side p{color:#b9a58d;font-size:1rem;margin-top:15px}
.memories .section-note{border-color:#a5814c33;color:#b09b7b}
.launch{text-align:center;background:radial-gradient(ellipse at center,#fff8e4aa,transparent 70%),var(--paper-deep)}
.launch-ornament{display:flex;gap:23px;align-items:center;justify-content:center;color:#a18358;font-size:.75rem;margin-bottom:36px}
.launch-ornament span{width:120px;height:1px;background:linear-gradient(90deg,transparent,#9b733959)}
.launch-ornament span:last-child{transform:rotate(180deg)}
.launch h2{font:500 clamp(35px,4vw,60px)/1.5 var(--serif);margin-top:15px}
.launch>p:not(.eyebrow){color:var(--muted);font-size:1rem;margin-top:22px}
.launch .button{margin-top:27px}
.launch-note{display:block;font-size:.875rem;color:#85735d;margin-top:19px}
.site-footer{padding:35px var(--gutter);background:var(--night-deep);color:#a99780}
.footer-top{display:flex;align-items:center;justify-content:space-between;gap:25px;padding-bottom:27px}
.back-top{font-size:.875rem;display:inline-flex;gap:20px;align-items:center}
.back-top span{font-size:1.3rem;color:var(--gold)}
.footer-bottom{display:flex;justify-content:space-between;gap:30px;border-top:1px solid #a5814c33;padding-top:22px}
.footer-bottom p{font-size:.75rem;color:#ac997f;line-height:1.9}
.footer-bottom a{color:#d4b98c;text-decoration:underline;text-underline-offset:3px}
dialog{color:var(--ink);background:var(--paper);border:1px solid #ac8852;padding:47px 35px 35px;width:min(490px,calc(100% - 32px));max-height:calc(100svh - 32px);overflow:auto;text-align:center;box-shadow:0 20px 100px #10060088}
dialog::backdrop{background:#1a0e08c9;backdrop-filter:blur(5px)}
.dialog-close{position:absolute;right:9px;top:5px;font-size:1.75rem;background:transparent;border:0;width:42px;height:42px;color:#816344}
dialog h2{font:500 1.8rem/1.5 var(--serif);margin:20px 0}
dialog>p:not(.eyebrow){font-size:1rem;color:var(--muted)}
.dialog-classes{display:flex;justify-content:center;flex-wrap:wrap;gap:19px;padding:18px 0;margin:23px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font:500 1rem var(--serif);color:var(--red)}
dialog .dialog-note{font-size:.875rem!important}
dialog .button{width:100%;margin-top:24px}
@media(min-width:1600px){.hero-inner{min-height:820px}}
@media(max-width:1150px){
  :root{--gutter:40px}
  .site-header{gap:20px}.brand{font-size:1rem}.desktop-nav{gap:22px}.desktop-nav a{font-size:.75rem}.header-cta{font-size:.75rem}
  .hero-inner{gap:35px;grid-template-columns:.85fr 1.15fr}.hero h1{font-size:78px}
  .hero-portraits{gap:12px}.portrait-top{flex-direction:column;gap:0;padding:9px 12px}.portrait-art{height:320px}
  .portrait-caption{padding-left:12px;padding-right:8px}.portrait-caption h3{font-size:21px}.portrait-arrow{display:none}
  .class-panel{gap:35px}.class-tabs button{padding:20px;gap:13px}.class-tabs button>small{display:none}
  .hometown-row{gap:24px}.hometown-row>div+div{padding-left:24px}.hometown-row h3{font-size:1.2rem}
}
@media(max-width:900px){
  :root{--gutter:32px}
  .site-header{min-height:86px}.desktop-nav{display:none}.header-cta{margin-left:auto;font-size:.875rem}
  .menu-toggle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:42px;height:42px;border:1px solid #a5814c66;background:transparent;flex-shrink:0}
  .menu-toggle span{width:18px;height:1px;background:var(--gold-light);transition:transform .2s}
  .menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}
  .menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
  .mobile-nav{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;padding:18px var(--gutter);background:var(--night-deep);border-bottom:1px solid #a5814c66;box-shadow:0 15px 25px #10060050}
  .mobile-nav a{padding:12px 0;font-size:1rem}
  .hero-inner{grid-template-columns:1fr 1.15fr;gap:28px;padding-top:58px;padding-bottom:58px;min-height:700px}
  .hero h1{font-size:65px}.hero h2{font-size:23px}.hero .eyebrow{letter-spacing:1px}.hero-description{font-size:1rem}
  .portrait-caption h3{font-size:17px}.portrait-top{font-size:.75rem;padding:9px}.portrait-art{height:275px}
  .portrait-caption{padding:8px 8px 15px}.portrait-caption small{font-size:.75rem;letter-spacing:0}.hero-portraits{gap:10px}
  .portraits-footnote{letter-spacing:.5px}.hero-ribbon{gap:25px;letter-spacing:.8px}
  .section-pad{padding:70px var(--gutter)}.section-heading>p{max-width:290px}.section-heading>p br{display:none}
  .class-panel{grid-template-columns:1fr}.class-visual{max-width:669px;margin:0 auto;width:100%}
  .class-story{max-width:669px;width:100%;margin:auto}.class-story h3{font-size:48px}
  .hometown-row{grid-template-columns:1fr;gap:23px}
  .hometown-row>div+div{border-left:0;border-top:1px solid #a5814c33;padding-left:0;padding-top:23px}
  .hometown-row h3{font-size:1.4rem}.memory-activities{gap:30px}.memory-feature{padding:27px}.memory-side h3{font-size:1.35rem}
}
@media(max-width:650px){
  :root{--gutter:22px}
  .site-header{min-height:82px;gap:14px;padding-top:14px;padding-bottom:14px}
  .brand{font-size:.94rem;gap:9px}.brand-seal{font-size:.875rem;padding:5px 6px}.brand small{font-size:.75rem;letter-spacing:2px}
  .header-cta{border:0;padding:0;font-size:.75rem}.header-cta span{display:none}.menu-toggle{width:38px;height:38px}
  .hero-inner{grid-template-columns:1fr;gap:28px;padding-top:39px;padding-bottom:36px}
  .hero-copy{text-align:center}.hero .eyebrow{font-size:.75rem;letter-spacing:1px;max-width:none}.hero .eyebrow span{display:none}
  .hero h1{font-size:clamp(33px,9.5vw,60px);line-height:1.5;letter-spacing:-1px;margin-top:14px}.hero h1 br{display:none}
  .brand-word{margin:0 auto;max-width:240px;font-size:.75rem;letter-spacing:3px}
  .hero h2{font-size:24px;margin-top:22px}.hero-description{font-size:1rem;max-width:425px;margin:16px auto 0}
  .hero .button{margin-top:22px}.hero-note{font-size:.75rem;letter-spacing:0;margin-top:18px}
  .hero-portraits{padding:22px 3px 44px;gap:12px}
  .portrait-top{flex-direction:row;font-size:.75rem;gap:5px;padding:8px}
  .portrait-top>span:first-child{display:none}.portrait-top>span:last-child{font-size:.75rem;white-space:nowrap}
  .portrait-di{transform:translateY(-13px)}.portrait-giap{transform:translateY(0)}
  .portrait:hover,.portrait-giap:hover{transform:translateY(-5px)}.portrait-di:hover{transform:translateY(-18px)}
  .portrait-art{height:clamp(155px,44vw,260px)}.portrait-caption{padding:4px 8px 12px}
  .portrait-caption small{font-size:.75rem}.portrait-caption h3{font-size:clamp(15px,4.3vw,23px);margin-top:3px}
  .portraits-footnote{bottom:0;font-size:.75rem;letter-spacing:.5px}
  .hero-ribbon{padding:17px var(--gutter);gap:13px;letter-spacing:0;flex-wrap:wrap;font-size:.75rem}
  .hero-ribbon>span:last-child,.hero-ribbon>i:last-of-type{display:none}
  .section-pad{padding:58px var(--gutter)}.section-heading{display:block;margin-bottom:27px}
  .section-heading h2{font-size:30px;letter-spacing:-.7px}.section-heading>p{font-size:1rem;margin-top:19px;max-width:none}
  .class-tabs{margin-top:28px}.class-tabs button{padding:15px 8px;justify-content:center;font-size:1.1rem;gap:0}.class-tabs button>span{display:none}
  .class-panel{padding-top:24px;gap:27px}.class-visual{padding:5px}.class-visual figcaption{font-size:.75rem;line-height:1.6}
  .class-story h3{font-size:43px}.class-tagline{font-size:1.2rem}
  .class-facts>div{grid-template-columns:100px 1fr;gap:10px}.class-facts{gap:12px}.class-tags{gap:7px}
  .section-note{margin-top:29px;font-size:.75rem}
  .hometown-row{margin-top:29px;padding:25px 0}.hometown-row p{margin-top:8px}
  .memory-activities{margin-top:30px;grid-template-columns:1fr;gap:32px}.memory-feature{padding:28px 24px}
  .memory-feature h3{font-size:34px;margin-top:20px}.memory-feature p{margin-top:20px}.memory-side h3{font-size:1.45rem}
  .launch h2{font-size:36px}.launch .eyebrow{font-size:.75rem;letter-spacing:1.5px}
  .launch-ornament{margin-bottom:27px}.launch .button{width:100%;max-width:330px;gap:22px}
  .site-footer{padding:28px var(--gutter)}.footer-top{gap:15px}.back-top{font-size:.75rem;gap:10px}.footer-bottom{flex-direction:column;gap:19px}
  dialog{padding:43px 24px 27px}dialog h2{font-size:1.65rem}
}
@media(max-width:370px){
  .header-cta{display:none}.menu-toggle{margin-left:auto}.portrait-top{padding:7px 5px}
  .portrait-caption{padding-left:5px;padding-right:5px}.portrait-caption small{font-size:.75rem}.hero-portraits{gap:9px}
  .hero-ribbon{gap:9px;font-size:.75rem}.class-tabs button{font-size:1rem}.section-heading h2{font-size:28px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* Original game maps are shown in full, including original labels and marks. */
.hometown-map{margin-bottom:22px;background:#1d150f;border:1px solid #a5814c44}
.hometown-map img{width:100%;aspect-ratio:1.75;height:auto;object-fit:contain;background:#1d150f}
.hometown-map figcaption{font-size:.75rem;color:#b39a75;letter-spacing:1px;padding:7px 10px}
.hero-copy{min-width:0}
@media(min-width:651px) and (max-width:900px){.hero h1{font-size:clamp(48px,7vw,65px)}}
@media(min-width:651px) and (max-width:900px){.hometown-map{max-width:463px}.hometown-row>div{display:grid;grid-template-columns:minmax(220px,.85fr) 1fr;column-gap:25px}.hometown-map{grid-row:span 4;margin:0}.hometown-row p{margin-top:5px}.hometown-row .source-link{justify-self:start;margin-top:10px}}
@media(max-width:650px){.hometown-map{margin-bottom:19px}.hometown-row>div+div{padding-top:28px}.hometown-row{gap:28px}}

.site-domain { color: var(--gold); font-size: 15px; letter-spacing: .1em; line-height: 2.2; }