@import url('https://fonts.googleapis.com/css2?family=Calistoga:ital@0;1&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --yellow:#FFC93C;
  --ink:#17181C;
  --orange:#E8543F;
  --paper:#FFFCF0;
  --soft:#FBEfD2;
  --muted:#54555D;
  --radius:28px;
  --display:"Calistoga","Inter",system-ui,sans-serif;
  --body:"Inter",system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
  --head-h:78px;
  --bar-h:52px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
}
body.is-locked{overflow:hidden}
img{max-width:100%;height:auto}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.14;letter-spacing:.005em;margin:0}
p{margin:0 0 18px}
a{color:inherit}
section[id]{scroll-margin-top:calc(var(--head-h) + var(--bar-h) + 16px)}

.ticker{
  background:var(--yellow);
  border-bottom:2px solid var(--ink);
  padding:7px 16px;
}
.ticker__text{
  margin:0;
  text-align:center;
  font-size:14px;
  font-weight:600;
  letter-spacing:.1em;
}

.masthead{
  position:sticky;
  top:0;
  z-index:40;
  background:var(--ink);
  color:var(--paper);
  border-bottom:2px solid var(--ink);
}
.masthead__bar{
  max-width:1320px;
  margin:0 auto;
  min-height:var(--head-h);
  padding:0 20px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
}
.mast-nav{display:flex;align-items:center;gap:2px}
.mast-nav--right{justify-content:flex-end}
.mast-link{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 12px;
  color:var(--paper);
  text-decoration:none;
  font-size:15px;
  font-weight:500;
  letter-spacing:.02em;
  border-radius:999px;
  transition:color 160ms ease,background-color 160ms ease;
}
.mast-link:hover{color:var(--ink);background:var(--yellow)}

.brand{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:46px;
  padding:0 10px;
  text-decoration:none;
  color:var(--yellow);
  justify-self:center;
}
.brand__word{font-family:var(--display);font-size:23px;letter-spacing:.04em;white-space:nowrap}
.brand__mark{width:34px;height:34px;border-radius:8px;object-fit:cover;display:block}
.brand__mark--dot{
  width:16px;height:16px;
  border-radius:50%;
  background:var(--orange);
  display:block;
}

.burger{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:48px;
  min-width:48px;
  margin-left:8px;
  padding:0 14px;
  background:transparent;
  color:var(--yellow);
  border:2px solid var(--yellow);
  border-radius:999px;
  font-family:var(--body);
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  transition:background-color 160ms ease,color 160ms ease;
}
.burger:hover{background:var(--yellow);color:var(--ink)}
.burger__bars{width:18px;height:10px;display:block;border-top:2px solid currentColor;border-bottom:2px solid currentColor}

.sheet{
  position:fixed;
  inset:0;
  z-index:60;
  background:var(--ink);
  color:var(--paper);
  padding:22px 22px 34px;
  display:flex;
  flex-direction:column;
  gap:20px;
  visibility:hidden;
  transform:translateY(-102%);
  transition:transform 200ms ease,visibility 200ms ease;
  overflow-y:auto;
}
.sheet.is-open{transform:none;visibility:visible}
.sheet__close{
  align-self:flex-end;
  min-height:44px;
  padding:0 18px;
  background:transparent;
  border:2px solid var(--yellow);
  color:var(--yellow);
  border-radius:999px;
  font-family:var(--body);
  font-size:15px;
  font-weight:600;
  cursor:pointer;
}
.sheet__close:hover{background:var(--yellow);color:var(--ink)}
.sheet__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;max-width:760px}
.sheet-link{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:54px;
  padding:8px 4px;
  text-decoration:none;
  color:var(--paper);
  font-family:var(--display);
  font-size:clamp(22px,4.2vw,34px);
  border-bottom:1px solid rgba(255,252,240,.18);
  transition:color 160ms ease;
}
.sheet-link:hover{color:var(--yellow)}
.sheet-no{font-family:var(--mono);font-size:13px;color:var(--orange);min-width:26px}
.sheet__note{margin:6px 0 0;font-size:14px;color:rgba(255,252,240,.62)}

.anchorbar{
  position:sticky;
  top:var(--head-h);
  z-index:35;
  background:var(--paper);
  border-bottom:2px solid var(--ink);
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}
.anchorbar__list{
  list-style:none;
  margin:0 auto;
  padding:0 8px;
  display:flex;
  max-width:1320px;
  gap:2px;
}
.bar-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:var(--bar-h);
  padding:0 14px;
  font-size:15px;
  color:var(--ink);
  text-decoration:none;
  white-space:nowrap;
  border-bottom:3px solid transparent;
  transition:background-color 160ms ease,border-color 160ms ease;
}
.bar-link:hover{background:var(--soft)}
.bar-link.is-active{background:var(--yellow);border-bottom-color:var(--orange);font-weight:600}
.bar-no{font-family:var(--mono);font-size:12px;color:var(--orange)}

.hero{
  background:var(--yellow);
  padding:34px 0 0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  gap:26px;
}
.hero__top{
  width:100%;
  max-width:1080px;
  margin:0 auto;
  padding-inline:clamp(20px,5vw,64px);
}
.hero__eyebrow{
  display:inline-block;
  margin:0 0 18px;
  padding:6px 14px;
  background:var(--ink);
  color:var(--yellow);
  border-radius:999px;
  font-size:14px;
  font-weight:600;
  letter-spacing:.12em;
}
.hero__title{
  font-size:clamp(34px,7.2vw,78px);
  margin:0 0 18px;
  max-width:20ch;
}
.hero__lede{font-size:clamp(17px,2vw,20px);max-width:38ch;color:#26272D}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 0}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:0 26px;
  border-radius:999px;
  border:2px solid var(--ink);
  font-family:var(--body);
  font-size:16px;
  font-weight:600;
  text-decoration:none;
  transition:background-color 160ms ease,color 160ms ease,border-color 160ms ease;
}
.btn--ink{background:var(--ink);color:var(--paper)}
.btn--ink:hover{background:var(--orange);border-color:var(--orange);color:var(--paper)}
.btn--line{background:transparent;color:var(--ink)}
.btn--line:hover{background:var(--ink);color:var(--paper)}

.hero__media{
  width:100%;
  max-width:1160px;
  margin:auto auto 0;
  padding-inline:clamp(20px,5vw,64px);
}
.hero__img{
  display:block;
  width:100%;
  height:auto;
  border:3px solid var(--ink);
  border-bottom:0;
  border-radius:var(--radius) var(--radius) 0 0;
}
.hero__deco{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  grid-template-rows:78px 78px;
  gap:10px;
  border:3px solid var(--ink);
  border-bottom:0;
  border-radius:var(--radius) var(--radius) 0 0;
  padding:10px;
  background:var(--paper);
}
.deco{display:block;border-radius:16px}
.deco--tall{grid-row:1 / span 2;background:var(--ink)}
.deco--wide{background:var(--orange)}
.deco--dot{background:var(--yellow);border:2px solid var(--ink)}
.deco--bar{grid-column:2 / span 2;background:var(--soft);border:2px solid var(--ink)}
.hero__slash{
  height:54px;
  background:var(--ink);
  clip-path:polygon(0 100%,100% 0,100% 100%);
}

.shell{
  max-width:1200px;
  margin:0 auto;
  padding:56px 24px 88px;
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  gap:48px;
  align-items:start;
}

.rail{
  position:sticky;
  top:calc(var(--head-h) + var(--bar-h) + 20px);
  border:2px solid var(--ink);
  border-radius:var(--radius);
  padding:22px 20px 20px;
  background:#fff;
  box-shadow:0 14px 34px rgba(23,24,28,.09);
}
.rail__title{font-size:22px;margin:0 0 10px}
.rule{border:0;border-top:3px solid var(--ink);width:56px;margin:0 0 18px}
.rail__list{list-style:none;margin:0 0 20px;padding:0;counter-reset:rail}
.rail__list li{margin:0}
.rail__list a{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:42px;
  padding:4px 0;
  font-size:15px;
  text-decoration:none;
  border-bottom:1px solid #E7DFC6;
  transition:color 150ms ease,transform 150ms ease;
}
.rail__list a:hover{color:var(--orange);transform:translateX(3px)}
.rail-no{font-family:var(--mono);font-size:12px;color:var(--orange)}
.rail__card{
  border-radius:20px;
  background:var(--soft);
  padding:14px 16px;
}
.rail__k{margin:0 0 6px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--orange);text-transform:none}
.rail__p{margin:0;font-size:14px;line-height:1.6;color:#3A3B41}

.doc{min-width:0}
.doc > section{
  border-top:2px solid var(--ink);
  padding-block:40px;
}
.doc > section:first-child{border-top:0;padding-top:0}
.doc .lead{font-size:clamp(18px,2.1vw,21px);line-height:1.7}
.doc h2{font-size:clamp(26px,3.6vw,38px);margin:0 0 12px;max-width:24ch}
.doc h3{font-size:clamp(21px,2.4vw,26px);margin:30px 0 10px}
.doc hr{margin:0 0 24px}
.doc p{max-width:62ch}
.doc ul,.doc ol{margin:0 0 22px;padding-left:24px;max-width:62ch}
.doc li{margin:0 0 9px}
.doc li::marker{color:var(--orange);font-weight:700}
.doc a{
  text-decoration:underline;
  text-decoration-color:var(--orange);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}
.doc a:hover{background:var(--yellow)}
.doc strong{background:var(--yellow);padding:0 3px}
.doc blockquote{
  margin:0 0 22px;
  padding:6px 0 6px 18px;
  border-left:4px solid var(--orange);
  color:var(--muted);
}
.doc blockquote p:last-child{margin:0}
.doc table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:16px}
.doc th,.doc td{border:2px solid var(--ink);padding:10px 12px;text-align:left}
.doc th{background:var(--soft)}
.eyebrow{
  margin:0 0 12px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  color:var(--orange);
}
.doc__end .btn{margin-top:4px}

.foot{
  background:var(--ink);
  color:var(--paper);
  padding:56px 24px 0;
}
.foot__cta{
  max-width:1200px;
  margin:0 auto 52px;
  background:var(--yellow);
  color:var(--ink);
  border-radius:var(--radius);
  padding:32px clamp(20px,4vw,44px) 36px;
}
.foot__ctaTitle{font-size:clamp(26px,4vw,42px);margin:0 0 12px}
.rule--onYellow{border-top-color:var(--ink)}
.foot__ctaText{max-width:52ch;font-size:17px}
.foot__grid{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:32px;
  padding-bottom:34px;
  border-bottom:2px solid rgba(255,252,240,.22);
}
.foot__addr{font-style:normal;display:flex;flex-direction:column;gap:8px}
.foot__brand{font-family:var(--display);font-size:24px;color:var(--yellow)}
.foot__line{font-size:15px;color:rgba(255,252,240,.74);max-width:32ch;line-height:1.6}
.foot__dl{margin:0}
.foot__dl dt{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  color:var(--orange);
  margin-bottom:8px;
}
.foot__dl dd{margin:0}
.foot__nav a,
.foot__links a{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:4px 0;
  font-size:15px;
  text-decoration:none;
  color:var(--paper);
  border-bottom:2px solid transparent;
  transition:color 150ms ease,border-color 150ms ease;
}
.foot__nav a:hover,
.foot__links a:hover{color:var(--yellow);border-bottom-color:var(--yellow)}
.foot__links{list-style:none;margin:0;padding:0}
.foot__base{
  max-width:1200px;
  margin:0 auto;
  padding:18px 0 22px;
  display:flex;
  flex-wrap:wrap;
  gap:10px 20px;
  align-items:center;
  justify-content:space-between;
  font-size:14px;
  color:rgba(255,252,240,.7);
}
.foot__copy{margin:0}
.foot__totop{color:var(--yellow);text-decoration:none;min-height:40px;display:inline-flex;align-items:center}

.js .stagger > *{opacity:0}
@media (prefers-reduced-motion: no-preference){
  .js .stagger.is-in > *{animation:rise 520ms cubic-bezier(.2,.7,.3,1) forwards}
  .js .stagger.is-in > *:nth-child(2){animation-delay:60ms}
  .js .stagger.is-in > *:nth-child(3){animation-delay:120ms}
  .js .stagger.is-in > *:nth-child(4){animation-delay:180ms}
  .js .stagger.is-in > *:nth-child(5){animation-delay:240ms}
  .js .stagger.is-in > *:nth-child(6){animation-delay:300ms}
  .js .stagger.is-in > *:nth-child(7){animation-delay:360ms}
}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .js .stagger > *{opacity:1}
  *{transition-duration:1ms !important}
}

@media (max-width:1120px){
  .mast-nav{display:none}
  .masthead__bar{grid-template-columns:1fr auto 1fr}
  .brand{justify-self:start;grid-column:1 / span 2}
  .mast-nav--right{display:flex;justify-self:end;grid-column:3}
  .shell{grid-template-columns:1fr;gap:34px;padding-top:36px}
  .rail{position:static}
  .rail__list{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
}
@media (max-width:720px){
  :root{--head-h:66px;--bar-h:50px}
  body{font-size:16px}
  .ticker__text{font-size:13px;letter-spacing:.06em}
  .brand__word{font-size:20px}
  .hero{min-height:calc(100vh - var(--head-h))}
  .hero__deco{grid-template-rows:64px 64px}
  .hero__slash{height:38px}
  .doc > section{padding-block:32px}
  .foot__grid{grid-template-columns:1fr;gap:24px}
  .foot__cta{margin-bottom:36px}
  .rail__list{grid-template-columns:1fr}
}
@media (max-width:400px){
  .burger__label{display:none}
  .hero__actions .btn{width:100%}
}

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