@import url('https://fonts.googleapis.com/css2?family=Newsreader:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');

:root{
  --ink:#12263A;
  --gold:#F4D35E;
  --flame:#EE6C4D;
  --paper:#FBF7EF;
  --pale:#FBE7DE;
  --edge:#0A1725;
  --bar:46px;
  --rail:214px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  padding-top:var(--bar);
  background:var(--ink);
  color:var(--paper);
  font-family:Roboto,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:17px;
  line-height:1.7;
  -webkit-text-size-adjust:100%;
}

h1,h2,h3{
  font-family:Newsreader,Georgia,"Songti SC",serif;
  font-weight:700;
  line-height:1.18;
  letter-spacing:.005em;
  margin:0 0 .5em;
}

p{margin:0 0 1em}

:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

.topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:var(--bar);
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 14px;
  background:var(--gold);
  color:var(--ink);
  border-bottom:3px solid var(--ink);
  z-index:60;
}

.mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  flex:0 0 auto;
  background:var(--ink);
  color:var(--gold);
  border-radius:4px;
  overflow:hidden;
  text-decoration:none;
}

.mark__img{display:block;width:100%;height:100%;object-fit:cover}
.mark__box{font-family:Newsreader,Georgia,serif;font-size:19px;font-weight:700;line-height:1}
.topbar__brand{font-size:16px;font-weight:700;letter-spacing:.22em}

.rail{
  position:sticky;
  top:var(--bar);
  z-index:40;
  background:var(--ink);
  border-bottom:2px solid rgba(244,211,94,.32);
  overflow-x:auto;
  scrollbar-width:none;
}

.rail::-webkit-scrollbar{display:none}

.rail__list{
  display:flex;
  gap:8px;
  margin:0;
  padding:10px 14px;
  list-style:none;
  min-width:max-content;
}

.rail__list a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:9px 16px;
  border:2px solid rgba(251,247,239,.28);
  border-radius:999px;
  color:var(--paper);
  font-size:16px;
  font-weight:500;
  text-decoration:none;
  white-space:nowrap;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}

.rail__list a:hover,
.rail__list a:focus-visible{background:var(--gold);border-color:var(--gold);color:var(--ink)}

.rail__list a[aria-current="page"]{background:var(--flame);border-color:var(--flame);color:var(--ink);font-weight:700}

.stage{min-height:60vh}

main{padding:0 0 20px}

.hero{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:45vh;
  padding:54px 20px 74px;
  overflow:hidden;
  text-align:center;
  color:var(--paper);
  background-color:var(--ink);
  background-image:radial-gradient(rgba(244,211,94,.55) 1.6px,transparent 1.6px);
  background-size:18px 18px;
  clip-path:polygon(0 0,100% 0,100% 86%,0 100%);
}

.hero__img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.38;
}

.hero__in{position:relative;max-width:780px}

.hero h1{
  margin:0 0 .38em;
  font-size:clamp(2rem,6vw,3.5rem);
  color:var(--paper);
}

.hero__desc{
  margin:0 auto;
  max-width:42em;
  font-size:clamp(1rem,2vw,1.14rem);
  color:rgba(251,247,239,.86);
}

section{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  max-width:1180px;
  margin:0 auto;
  padding:26px 16px 0;
}

section > div{
  background:var(--paper);
  color:var(--ink);
  border-radius:28px;
  border-bottom:8px solid var(--flame);
  padding:26px 22px 30px;
  overflow-wrap:break-word;
  scroll-margin-top:calc(var(--bar) + 76px);
}

section > div:nth-child(3n+2){background:var(--gold);border-bottom-color:var(--ink)}
section > div:nth-child(3n+3){background:var(--pale);border-bottom-color:var(--gold)}

section div h2{
  font-size:clamp(1.4rem,2.6vw,2rem);
  margin:0 0 .7em;
}

section div h3{
  font-size:clamp(1.15rem,2vw,1.35rem);
  margin:1.2em 0 .5em;
}

h2 span,h3 span{position:relative;display:inline-block}

h2 span::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-3px;
  height:5px;
  background:var(--flame);
}

section div p{font-size:17px}

section div a{color:#BC4023;text-decoration:underline;text-underline-offset:2px}
section div a:hover{color:var(--ink)}

section div ul,
section div ol{margin:0 0 1em;padding-left:1.3em}
section div li{margin:0 0 .35em}

section div strong{font-weight:700}

aside{align-self:start;padding:0 0 4px}

.side__t{
  margin:0 0 12px;
  font-family:Roboto,Arial,sans-serif;
  font-size:16px;
  font-weight:700;
  letter-spacing:.2em;
  color:var(--gold);
}

.side__list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}

.side__list a{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:7px 14px;
  border:2px solid rgba(244,211,94,.42);
  border-radius:999px;
  color:var(--paper);
  font-size:16px;
  text-decoration:none;
  transition:background-color .18s ease,color .18s ease;
}

.side__list a:hover,
.side__list a:focus-visible{background:var(--gold);color:var(--ink)}

.foot{
  margin-top:44px;
  padding:34px 16px 22px;
  background:var(--edge);
  border-top:6px solid var(--gold);
}

.foot__top{
  display:grid;
  grid-template-columns:1fr;
  gap:26px;
  max-width:1120px;
  margin:0 auto;
}

.foot__h{font-size:1.5rem;color:var(--gold);margin:0 0 .4em}
.foot__h span::after{background:var(--gold)}
.foot__desc{margin:0 0 16px;font-size:16px;color:rgba(251,247,239,.8)}

.sub{max-width:340px}

.sub__lb{
  display:block;
  margin-bottom:8px;
  font-size:16px;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--gold);
}

.sub__row{display:flex;gap:8px}

.sub__in{
  flex:1 1 auto;
  min-width:0;
  min-height:44px;
  padding:10px 14px;
  border:2px solid rgba(251,247,239,.3);
  border-radius:999px;
  background:transparent;
  color:var(--paper);
  font:inherit;
}

.sub__in::placeholder{color:rgba(251,247,239,.55)}

.sub__bt{
  min-height:44px;
  padding:10px 22px;
  border:0;
  border-radius:999px;
  background:var(--gold);
  color:var(--ink);
  font:inherit;
  font-weight:700;
  cursor:pointer;
  transition:background-color .18s ease;
}

.sub__bt:hover{background:var(--flame)}

.foot__cols{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}

.foot__dl{margin:0}
.foot__dl dt{
  margin-bottom:8px;
  font-size:16px;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--gold);
}

.foot__dl dd{margin:0;font-size:16px;color:rgba(251,247,239,.82)}

.foot__dl a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  color:rgba(251,247,239,.82);
  text-decoration:none;
}

.foot__dl a:hover,
.foot__dl a:focus-visible{color:var(--gold);text-decoration:underline}

.foot__copy{
  max-width:1120px;
  margin:26px auto 0;
  padding-top:16px;
  border-top:2px solid rgba(244,211,94,.25);
  font-size:16px;
  color:rgba(251,247,239,.6);
}

.rv{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
.rv.in{opacity:1;transform:none}

@media (min-width:600px){
  .foot__cols{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (min-width:960px){
  section > div{padding:34px 34px 38px}
}

@media (min-width:1040px){
  .rail{
    position:fixed;
    left:0;
    top:var(--bar);
    bottom:0;
    width:var(--rail);
    overflow-x:hidden;
    overflow-y:auto;
    border-bottom:0;
    border-right:2px solid rgba(244,211,94,.22);
  }
  .rail__list{flex-direction:column;min-width:0;gap:10px;padding:26px 18px}
  .rail__list a{width:100%;justify-content:flex-start;padding:10px 20px}
  .stage{padding-left:var(--rail)}
  section{
    grid-template-columns:200px minmax(0,1fr);
    gap:26px 30px;
    padding:36px 30px 0;
  }
  aside{grid-column:1;grid-row:1 / span 99;position:sticky;top:calc(var(--bar) + 18px)}
  section > div{grid-column:2}
  .side__list{flex-direction:column;flex-wrap:nowrap}
  .side__list a{width:100%}
  .foot__top{grid-template-columns:1fr 1.5fr;gap:40px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .rail__list a,.side__list a,.sub__bt{transition:none}
}

button[aria-expanded]{min-width:44px;min-height:44px}