:root{--navy:#102a3b;--navy-soft:#1d3f4d;--paper:#f7f1e4;--paper-deep:#eadfc9;--gold:#e9aa2c;--gold-deep:#8a5f00;--gold-bright:#ffda80;--purple:#725079;--teal:#2e7775;--graphite:#273b42;--line:rgba(16,42,59,.2);font-family:-apple-system,BlinkMacSystemFont,"Avenir Next","Segoe UI",sans-serif;color:var(--navy);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:2rem}body{margin:0;font-size:1.0625rem;line-height:1.6;background:var(--paper)}a{color:inherit}img{display:block;max-width:100%;height:auto}h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-family:Georgia,Cambria,"Times New Roman",serif;line-height:1.03;letter-spacing:-.035em}a:focus-visible{outline:3px solid var(--gold);outline-offset:5px}::selection{background:var(--gold);color:var(--navy)}.skip-link{position:fixed;top:-100px;left:20px;background:var(--gold);padding:12px;z-index:20}.skip-link:focus{top:12px}.masthead{width:min(1320px,calc(100% - 72px));min-height:112px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:32px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:Georgia,Cambria,"Times New Roman",serif;font-size:1.7rem;font-weight:700}.brand img{width:56px;height:56px;object-fit:contain}.masthead nav{display:flex;gap:30px;font-size:.92rem}.masthead nav a{text-decoration:none;min-height:44px;display:inline-flex;align-items:center}.masthead nav a:hover{text-decoration:underline;text-underline-offset:6px}.hero{background:var(--navy);color:var(--paper);display:grid;grid-template-columns:minmax(340px,.85fr) minmax(520px,1.15fr);align-items:center;gap:clamp(44px,6vw,92px);padding:clamp(64px,7vw,104px) max(36px,calc((100vw - 1320px)/2));overflow:hidden;position:relative}.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 70%,rgba(114,80,121,.3),transparent 30%),radial-gradient(circle at 84% 20%,rgba(46,119,117,.24),transparent 34%);pointer-events:none}.hero>*{position:relative}.eyebrow{font-size:.82rem;line-height:1.3;font-weight:800;text-transform:uppercase;letter-spacing:.13em;color:var(--gold);margin-bottom:18px}.hero-copy{container-type:inline-size}.hero h1{font-size:clamp(4.1rem,min(7vw,19.5cqi),7rem)}.hero h1 em{font-style:italic;color:var(--gold)}.hero-intro{font-size:clamp(1.1rem,1.5vw,1.3rem);color:#dbe6e4;max-width:600px;margin-top:28px}.hero-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:32px}.button{display:inline-flex;align-items:center;justify-content:center;gap:22px;min-height:54px;padding:12px 22px;border:1px solid var(--gold);border-radius:8px;background:var(--gold);color:var(--navy);font-weight:800;text-decoration:none;transition:background-color 160ms}.button:hover{background:#f5c35c}.development-pill{border:1px solid rgba(247,241,228,.45);border-radius:999px;padding:5px 13px;font-size:.875rem;color:#dbe6e4}.hero-art{background:var(--paper);padding:11px 11px 0;border-radius:5px;color:var(--navy);box-shadow:0 24px 70px rgba(2,16,25,.5);transform:rotate(1.5deg)}.hero-art img{width:100%;aspect-ratio:3/2;object-fit:cover}.hero-art figcaption,.gallery figcaption{display:flex;justify-content:space-between;gap:18px;padding:13px 8px 15px;font-size:.83rem}.hero-art figcaption strong,.gallery figcaption strong{font-size:.95rem}.hero-art figcaption span,.gallery figcaption span{color:#5b6d72}.game{width:min(1240px,calc(100% - 80px));margin:auto;display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(50px,8vw,120px);padding-block:clamp(72px,9vw,128px)}.section-intro h2{font-size:clamp(2.9rem,5.3vw,5.4rem)}.game-copy>.lead{font-size:clamp(1.25rem,1.8vw,1.55rem);color:#354f57;max-width:720px}.game-notes{margin-top:48px;border-top:1px solid var(--line)}.game-notes article{display:grid;grid-template-columns:58px 190px 1fr;gap:22px;padding-block:24px;border-bottom:1px solid var(--line);align-items:start}.game-notes article>span{font-family:Georgia,Cambria,"Times New Roman",serif;font-size:1.6rem;color:var(--teal);font-weight:700}.game-notes h3{font-size:1.35rem}.game-notes p{color:#52666c}.heroes{background:var(--purple);color:var(--paper);padding:clamp(70px,8vw,112px) max(40px,calc((100vw - 1240px)/2))}.heroes-heading{display:grid;grid-template-columns:1fr .8fr;gap:50px;align-items:end}.heroes-heading h2{font-size:clamp(3rem,5vw,5rem)}.heroes-heading>p{color:#eadfdf;max-width:550px}.heroes-art{margin-top:44px;background:var(--paper);color:var(--navy);padding:10px 10px 0;box-shadow:0 18px 46px rgba(37,16,40,.32)}.heroes-art img{width:100%;aspect-ratio:3/2;object-fit:cover}.heroes-art figcaption{padding:10px 6px 13px;font-size:.83rem;color:#5b6d72}.hero-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:44px;background:rgba(247,241,228,.3);border:1px solid rgba(247,241,228,.3)}.hero-grid article{background:var(--purple);padding:28px}.hero-number{font-family:Georgia,Cambria,"Times New Roman",serif;font-size:1.5rem;color:var(--gold);font-weight:700}.hero-grid h3{font-size:2rem;margin-top:26px}.hero-grid .role{color:#f0ca76;font-size:.86rem;text-transform:uppercase;letter-spacing:.06em;font-weight:800;margin:8px 0 18px}.hero-grid article>p:not(.hero-number,.role,.power){color:#f0e9ea}.hero-grid .power{font-size:.88rem;border-top:1px solid rgba(247,241,228,.28);margin-top:22px;padding-top:16px;color:#efe6ea}.hero-grid .power span{font-weight:800}.world{padding:clamp(72px,9vw,128px) max(40px,calc((100vw - 1240px)/2));background:#e8f0ec}.world-heading{max-width:900px}.world-heading h2{font-size:clamp(3rem,5vw,5rem)}.world-heading>p:last-child{font-size:1.1rem;color:#496066;max-width:780px;margin-top:22px}.gallery{display:grid;grid-template-columns:.7fr 1.3fr;gap:28px;align-items:start;margin-top:48px}.gallery-wide{display:grid;gap:28px}.gallery figure{background:var(--paper);padding:10px 10px 0;border-radius:5px;box-shadow:0 14px 34px rgba(16,42,59,.12)}.gallery img{width:100%}.gallery-portrait img{aspect-ratio:2/3;object-fit:cover}.gallery-wide img{aspect-ratio:16/9;object-fit:cover}.studio{width:min(1240px,calc(100% - 80px));margin:auto;display:grid;grid-template-columns:130px minmax(0,1fr) auto;align-items:center;gap:36px;padding-block:64px}.studio>img{width:130px}.studio h2{font-size:clamp(2rem,3.2vw,3.4rem)}.studio div>p:last-child{max-width:650px;color:#4a6268;margin-top:14px}.button-outline{background:transparent;border-color:var(--navy);white-space:nowrap}.button-outline:hover{background:var(--paper-deep)}footer{background:var(--navy);color:#dbe6e4;padding:44px max(40px,calc((100vw - 1240px)/2)) 26px;display:grid;grid-template-columns:1fr auto;gap:30px}.footer-brand>a{font-family:Georgia,Cambria,"Times New Roman",serif;font-size:1.8rem;font-weight:700;text-decoration:none;color:var(--paper)}.footer-brand p{font-size:.9rem;margin-top:8px}.footer-links{display:flex;gap:24px}.footer-links a{text-underline-offset:5px}.footer-legal{grid-column:1/-1;border-top:1px solid #48616d;padding-top:20px;display:flex;justify-content:space-between;gap:30px;color:#aebfc4;font-size:.8rem}.footer-legal a{text-underline-offset:3px}
@media(max-width:980px){.hero{grid-template-columns:1fr;}.hero-copy{max-width:720px}.game{grid-template-columns:1fr}.heroes-heading{grid-template-columns:1fr}.hero-grid{grid-template-columns:1fr 1fr}.studio{grid-template-columns:100px 1fr}.studio .button{grid-column:2;justify-self:start}.studio>img{width:100px}}
@media(max-width:700px){.masthead{width:calc(100% - 40px);padding-block:16px;align-items:flex-start;flex-direction:column;gap:8px}.brand img{width:46px;height:46px}.brand{font-size:1.5rem}.masthead nav{gap:20px;font-size:.82rem}.hero{padding:48px 20px 58px;gap:40px}.hero h1{font-size:clamp(3.6rem,16vw,5rem)}.hero-art{transform:rotate(.5deg)}.game,.studio{width:calc(100% - 40px)}.game{padding-block:64px;gap:40px}.game-notes article{grid-template-columns:44px 1fr}.game-notes article p{grid-column:2}.heroes,.world{padding:60px 20px}.hero-grid{grid-template-columns:1fr}.hero-grid article{padding:26px}.gallery{grid-template-columns:1fr}.hero-art figcaption,.gallery figcaption{display:block}.hero-art figcaption span,.gallery figcaption span{display:block;margin-top:3px}.studio{grid-template-columns:72px 1fr;gap:20px;padding-block:46px}.studio>img{width:72px}.studio .button{grid-column:1/-1;width:100%}footer{padding:36px 20px 24px;grid-template-columns:1fr}.footer-links{flex-wrap:wrap}.footer-legal{display:block}.footer-legal p+p{margin-top:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Type and space carry the hierarchy; no decorative numbering or rules. */
.game-notes { border: 0; display: grid; gap: 32px; }
.game-notes article { border: 0; padding: 0; grid-template-columns: minmax(0,1fr); gap: 12px; }
.game-notes article p { grid-column: auto; }
.hero-grid { border: 0; background: transparent; gap: 36px; }
.hero-grid article { padding: 0; }
.hero-grid h3 { margin-top: 0; }
.hero-grid .power { border: 0; padding-top: 0; }
.eyebrow { font-size: .875rem; }
.section-intro .eyebrow, .world-heading .eyebrow, .studio .eyebrow {
  color: var(--gold-deep);
  background: transparent;
  width: fit-content;
  padding: 0;
  border: 0;
  border-radius: 0;
}
.heroes .eyebrow, .hero-grid .role {
  color: var(--gold-bright);
  background: transparent;
  width: fit-content;
  padding: 0;
  border: 0;
  border-radius: 0;
}

/* Playbook: plays marked in the open channel between the plan and the notes.
   Your routes are teal, what stands in the way is purple; the words stay navy. */
@media (min-width: 981px) {
  .game { position: relative; gap: clamp(170px, 17vw, 240px); }
  .playbook { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
  .playbook path, .playbook circle { fill: none; stroke-linecap: round; stroke-linejoin: round; filter: url(#rough); }
  .play-route { stroke: var(--teal); stroke-width: 3; opacity: 0.8; }
  .play-mark { stroke: var(--purple); stroke-width: 3.4; opacity: 0.75; }
}
@media (max-width: 980px) { .playbook { display: none; } }