:root{--paper:#FBFAF7;--dots:#DFDCCE;--ink:#15181C;--mute:#6B7178;--vio:#5B34E8;--amb:#FF9E1B;--card:#FFFFFF;--edge:clamp(1rem,4vw,3rem);--gap:clamp(1.6rem,3.4vw,2.8rem);--rad:20px}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden}
body{background-color:var(--paper);background-image:radial-gradient(var(--dots) 1.5px,transparent 1.5px);background-size:22px 22px;background-position:0 0;color:var(--ink);font-family:"Newsreader",Georgia,serif;font-size:1.08rem;line-height:1.62}
h1,h2,h3,.name-marker,.link-pellet,.note-ribbon,.knob-toggle,.name-pellet,.open-signal,.head-fillet{font-family:"Syne","Segoe UI",sans-serif}
h1{font-weight:800;font-size:clamp(2.1rem,6vw,4rem);line-height:1.03;letter-spacing:-.02em;margin:0 0 .6rem}
h2{font-weight:800;font-size:clamp(1.5rem,3.4vw,2.2rem);line-height:1.08;margin:0 0 .5rem}
p{margin:0 0 1rem;max-width:66ch}
a{color:var(--vio)}
a:focus-visible,button:focus-visible{outline:3px solid var(--amb);outline-offset:3px}
.page-holder{width:100%;max-width:78rem;margin-left:auto;margin-right:auto;padding-left:var(--edge);padding-right:var(--edge);padding-top:2.4rem;padding-bottom:3.4rem}
.card-packet{background:var(--card);border:2px solid var(--ink);border-radius:var(--rad);padding:clamp(1.2rem,3vw,2.4rem);margin-bottom:var(--gap)}
.menu-bundle{display:grid;grid-template-columns:1fr;row-gap:.5rem;margin-bottom:var(--gap)}
.menu-bundle[data-open="false"]{display:none}
.link-pellet{display:block;border:2px solid var(--ink);border-radius:999px;padding:.5rem 1rem;text-decoration:none;font-weight:700;font-size:.95rem;background:var(--card)}
.knob-toggle{display:none;border:2px solid var(--ink);border-radius:999px;background:var(--amb);color:var(--ink);font-weight:700;font-size:1rem;padding:.55rem 1.2rem;margin-bottom:1rem}
.text-column{display:grid;grid-template-columns:1fr;grid-template-areas:"ribbon" "column";row-gap:.3rem;margin-bottom:1.4rem}
.note-ribbon{grid-area:ribbon;color:var(--vio);font-weight:700;font-size:.86rem;letter-spacing:.01em;margin:0}
.text-column p:not(.note-ribbon){grid-area:column;margin-bottom:0}
.shot-insert{margin:0 0 1.4rem}
.shot-insert img{display:block;width:100%;height:auto;aspect-ratio:12/7;object-fit:cover;border-radius:12px}
.hero-banner{margin:0 0 var(--gap);border-radius:var(--rad);overflow:hidden;background:#0B0D12}
.hero-banner img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center}
.hero-stage{display:flex;flex-direction:column;align-items:center;gap:1.1rem;margin:0 0 var(--gap);padding:clamp(1.2rem,3vw,1.8rem);background:var(--card);border:2px solid var(--ink);border-radius:var(--rad)}
.hero-stage img{display:block;width:8rem;height:8rem;margin:0;object-fit:cover;border-radius:16px;border:2px solid var(--ink);flex-shrink:0}
.hero-copy{padding:0;text-align:center}
.hero-copy h1{color:var(--ink);margin:0 0 .35rem;font-size:clamp(1.8rem,5vw,2.8rem)}
.hero-copy .lead-phrase{color:var(--mute);margin:0;max-width:34ch}
.dots-border{height:22px;background-image:radial-gradient(var(--dots) 1.5px,transparent 1.5px);background-size:22px 22px;margin:2rem 0}
.skip-linker{display:block;width:1px;height:1px;overflow:hidden;padding:0;margin:0;color:var(--ink)}
.skip-linker:focus-visible{width:auto;height:auto;padding:.6rem 1rem;background:var(--amb);text-decoration:none}
.link-pellet[aria-current="page"]{background:var(--amb)}
.lead-phrase{font-size:clamp(1.15rem,2.4vw,1.5rem);line-height:1.35;margin:0 0 1.6rem;max-width:44ch}
.head-fillet{background:var(--vio);color:var(--card);border-radius:12px;padding:1rem 1.2rem;margin:0 0 1.2rem}
.head-fillet h2{margin:0 0 .3rem}
.head-fillet p{margin:0;max-width:52ch;font-family:"Newsreader",Georgia,serif;font-size:1rem}
.pill-parade{line-height:2.6;margin:0 0 .4rem;max-width:none}
.name-pellet{border:2px solid var(--vio);border-radius:999px;padding:.35rem .8rem;text-decoration:none;font-weight:700;font-size:.9rem;background:var(--card);color:var(--vio)}
.open-signal{border:2px solid var(--ink);border-radius:999px;padding:.35rem .8rem;text-decoration:none;font-weight:700;font-size:.9rem;background:var(--amb);color:var(--ink)}
.unit-record{margin:0}
.unit-record .name-marker{margin:0}
.unit-record h3{font-weight:800;font-size:clamp(1.5rem,3.4vw,2.2rem);line-height:1.08;margin:0 0 .2rem}
.name-marker{font-weight:800;font-size:clamp(2.4rem,6vw,4.2rem);line-height:1;color:var(--vio)}
.city-legend{color:var(--mute);margin:0 0 1.4rem}
.foot-region p{margin:0;max-width:none;color:var(--mute)}
html[data-js="on"] .knob-toggle{display:inline-block}
@media (min-width:900px){
.menu-bundle{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:.6rem}
.menu-bundle[data-open="false"]{display:grid}
.knob-toggle{display:none}
html[data-js="on"] .knob-toggle{display:none}
.text-column{grid-template-columns:minmax(0,1fr) 13rem;grid-template-areas:"column ribbon";column-gap:2rem}
.note-ribbon{padding-top:.35rem}
.hero-stage{flex-direction:row;align-items:center;gap:1.8rem;padding:1.5rem 2rem}
.hero-stage img{width:9.5rem;height:9.5rem}
.hero-copy{text-align:left}
}
@media (min-width:1200px){
.menu-bundle{grid-template-columns:repeat(7,minmax(0,1fr))}
.text-column{grid-template-columns:minmax(0,1fr) 16rem;column-gap:3rem}
}