:root{
  --ink:#241812;
  --ink-2:#2f2119;
  --ink-3:#4a3628;
  --orange:#e96f1b;
  --orange-d:#c4451c;
  --gold:#f6c761;
  --cream:#fefaf4;
  --milk:#f5e8da;
  --tan:#b08a63;
  --line:#e4d9cc;
  --muted:#7d6e63;
  --shadow:5px 5px 0 var(--ink);
  --radius:8px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
}

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

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.78;
  color:var(--ink-2);
  background:var(--cream);
}

img{max-width:100%;height:auto;display:block}
a{color:var(--orange-d);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{color:var(--ink);line-height:1.3;margin:0}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}
table{border-collapse:collapse}

.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 26px;
  font-size:16px;
  font-weight:700;
  color:#fff;
  background:var(--orange);
  border:2px solid var(--ink);
  border-radius:var(--radius);
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
  white-space:nowrap;
}
.btn:hover,.btn:focus-visible{
  color:#fff;
  background:var(--orange-d);
  text-decoration:none;
  transform:translate(-2px,-2px);
  box-shadow:5px 5px 0 var(--ink);
}
.btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.btn--ghost{color:var(--ink);background:var(--cream)}
.btn--ghost:hover,.btn--ghost:focus-visible{color:var(--ink);background:var(--gold)}

.top{
  position:sticky;
  top:0;
  z-index:60;
  background:var(--cream);
  border-bottom:2px solid var(--ink);
}
.top__in{display:flex;align-items:center;gap:16px;min-height:70px}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;color:var(--ink);font-size:21px;font-weight:800;letter-spacing:.5px}
.brand:hover{text-decoration:none}
.brand img{width:40px;height:40px;border-radius:9px;border:2px solid var(--ink)}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto;flex-wrap:wrap}
.nav a{
  display:block;
  padding:8px 14px;
  font-size:15px;
  font-weight:600;
  color:var(--ink-3);
  border:2px solid transparent;
  border-radius:6px;
}
.nav a:hover,.nav a:focus-visible{color:var(--orange-d);border-color:var(--line);text-decoration:none;background:var(--milk)}
.nav a[aria-current="page"]{color:#fff;background:var(--orange);border-color:var(--ink)}
.top .btn{padding:10px 18px;font-size:15px;color:#fff}
.top .btn:hover,.top .btn:focus-visible{color:#fff}
.navtoggle{
  display:none;
  margin-left:auto;
  padding:8px 12px;
  font:inherit;
  font-size:14px;
  font-weight:700;
  color:var(--ink);
  background:var(--cream);
  border:2px solid var(--ink);
  border-radius:6px;
  cursor:pointer;
}

.hero{background:linear-gradient(180deg,var(--cream) 0%,var(--milk) 100%);border-bottom:2px dashed var(--line);padding:54px 0 56px}
.hero__in{display:grid;grid-template-columns:1.06fr .94fr;gap:48px;align-items:center}
.kicker{
  display:inline-block;
  margin-bottom:16px;
  padding:4px 12px;
  font-size:13px;
  font-weight:700;
  letter-spacing:1px;
  color:var(--orange-d);
  background:var(--gold);
  border:2px solid var(--ink);
  border-radius:4px;
}
.hero h1{font-size:44px;letter-spacing:1px}
.lead{margin-top:18px;font-size:17px;color:var(--ink-3)}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.hero__meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.hero__meta li{
  padding:5px 12px;
  font-size:13px;
  font-weight:600;
  color:var(--ink-3);
  background:var(--cream);
  border:2px solid var(--line);
  border-radius:20px;
}
.hero__shot{position:relative;max-width:320px;justify-self:center;width:100%}
.hero__shot::after{
  content:"";
  position:absolute;
  left:18px;
  top:18px;
  right:-14px;
  bottom:-14px;
  background:var(--ink);
  border-radius:12px;
  z-index:0;
}
.hero__shot img{position:relative;z-index:1;width:100%;height:auto;border:2px solid var(--ink);border-radius:10px}

.facts{background:var(--ink);color:var(--cream);padding:0}
.facts__in{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.facts li{padding:22px 18px;text-align:center;border-right:1px dashed rgba(246,199,97,.3)}
.facts li:last-child{border-right:0}
.facts b{display:block;font-size:24px;color:var(--gold);line-height:1.2}
.facts span{font-size:14px;color:#d9cbbb}

.sec{padding:66px 0}
.sec--alt{background:var(--milk);border-top:2px dashed var(--line);border-bottom:2px dashed var(--line)}
.sec__head{display:flex;align-items:flex-start;gap:16px;margin-bottom:34px}
.sec__no{
  flex:0 0 auto;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:17px;
  font-weight:800;
  color:#fff;
  background:var(--orange);
  border:2px solid var(--ink);
  border-radius:6px;
  box-shadow:3px 3px 0 var(--ink);
}
.sec h2{font-size:29px}
.sub{margin-top:8px;font-size:16px;color:var(--muted);max-width:760px}

.grid{display:grid;gap:22px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}

.card{
  background:var(--cream);
  border:2px solid var(--ink);
  border-radius:var(--radius);
  padding:24px 22px;
  box-shadow:var(--shadow);
  transition:transform .18s ease,box-shadow .18s ease;
}
.card:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink)}
.card h3{font-size:19px;margin-bottom:10px}
.card p{font-size:15px;color:var(--ink-3)}
.card__tag{
  display:inline-block;
  margin-bottom:12px;
  padding:2px 10px;
  font-size:12px;
  font-weight:700;
  color:var(--orange-d);
  background:var(--milk);
  border:1px solid var(--line);
  border-radius:4px;
}

.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.shot{
  background:var(--cream);
  border:2px solid var(--ink);
  border-radius:var(--radius);
  padding:14px;
  box-shadow:var(--shadow);
}
.shot img{width:100%;height:auto;border:2px solid var(--line);border-radius:6px}
.shot figcaption{margin-top:12px;font-size:14px;color:var(--ink-3)}
.shot figcaption b{display:block;font-size:15px;color:var(--ink);margin-bottom:4px}

.band{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;padding:26px 0}
.band+.band{border-top:2px dashed var(--line)}
.band h3{font-size:22px;margin-bottom:12px}
.band p{font-size:16px;color:var(--ink-3)}
.band__list{margin-top:16px;display:grid;gap:8px}
.band__list li{position:relative;padding-left:20px;font-size:15px;color:var(--ink-3)}
.band__list li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:8px;background:var(--orange);border-radius:2px}
.band__fig{max-width:290px;justify-self:center;width:100%}
.band__fig img{width:100%;height:auto;border:2px solid var(--ink);border-radius:10px;box-shadow:var(--shadow)}
.band--flip .band__text{order:2}

.rev{background:var(--cream);border:2px solid var(--ink);border-radius:var(--radius);padding:24px 22px;box-shadow:var(--shadow)}
.rev__head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.rev__ava{width:42px;height:42px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;background:var(--orange);border:2px solid var(--ink);border-radius:8px}
.rev__who{font-size:15px;font-weight:700;color:var(--ink)}
.rev__who small{display:block;font-weight:400;font-size:13px;color:var(--muted)}
.rev p{font-size:15px;color:var(--ink-3)}
.rev__stars{margin-top:12px;font-size:14px;color:var(--orange-d);font-weight:700}

.qa{display:grid;gap:14px}
.qa details{background:var(--cream);border:2px solid var(--ink);border-radius:var(--radius);box-shadow:4px 4px 0 var(--ink)}
.qa summary{cursor:pointer;padding:16px 20px;font-size:17px;font-weight:700;color:var(--ink);list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";float:right;font-weight:800;color:var(--orange)}
.qa details[open] summary::after{content:"–"}
.qa details[open] summary{border-bottom:2px dashed var(--line)}
.qa__body{padding:16px 20px 20px;font-size:15px;color:var(--ink-3)}

.steps{display:grid;gap:18px;counter-reset:st}
.steps li{
  position:relative;
  padding:20px 22px 20px 76px;
  background:var(--cream);
  border:2px solid var(--ink);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.steps li::before{
  counter-increment:st;
  content:counter(st,decimal-leading-zero);
  position:absolute;
  left:20px;
  top:20px;
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  font-weight:800;
  color:#fff;
  background:var(--orange);
  border:2px solid var(--ink);
  border-radius:6px;
}
.steps h3{font-size:18px;margin-bottom:8px}
.steps p{font-size:15px;color:var(--ink-3)}

.entry{display:block;padding:24px 22px;background:var(--cream);border:2px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease}
.entry:hover{text-decoration:none;transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink)}
.entry b{display:block;font-size:18px;color:var(--ink);margin-bottom:8px}
.entry span{font-size:15px;color:var(--ink-3)}
.entry i{display:inline-block;margin-top:12px;font-style:normal;font-weight:700;font-size:14px;color:var(--orange-d)}

.prose{max-width:860px}
.prose h2{margin-top:44px}
.prose h3{font-size:19px;margin-top:28px}
.prose p{margin-top:14px;font-size:16px;color:var(--ink-3)}
.prose ul{margin-top:14px;display:grid;gap:8px}
.prose ul li{position:relative;padding-left:20px;font-size:16px;color:var(--ink-3)}
.prose ul li::before{content:"";position:absolute;left:0;top:12px;width:8px;height:8px;background:var(--orange);border-radius:2px}
.prose table{width:100%;margin-top:20px;font-size:15px;border:2px solid var(--ink);border-radius:var(--radius);overflow:hidden}
.prose th,.prose td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}
.prose th{background:var(--milk);color:var(--ink);font-size:15px}
.prose tr:last-child td{border-bottom:0}

.cta{background:var(--ink);color:var(--cream);padding:58px 0;border-top:2px dashed rgba(246,199,97,.3)}
.cta h2{color:var(--cream);font-size:28px}
.cta p{margin-top:12px;color:#d9cbbb;max-width:640px}
.cta .btn{margin-top:26px}
.cta .btn--ghost{color:var(--ink);background:var(--cream)}
.cta .btn--ghost:hover{color:var(--ink);background:var(--gold)}
.cta-note{margin-top:16px;font-size:14px;color:#a8988a}

.page-hero{background:linear-gradient(180deg,var(--cream) 0%,var(--milk) 100%);border-bottom:2px dashed var(--line);padding:46px 0 40px}
.crumb{font-size:14px;color:var(--muted);margin-bottom:14px}
.page-hero h1{font-size:36px}
.page-hero .lead{margin-top:16px;max-width:840px}

.foot{background:var(--ink-3);color:#e2d5c8;padding:46px 0 30px;font-size:15px}
.foot__in{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px}
.foot h3{color:var(--cream);font-size:17px;margin-bottom:14px}
.foot__brand{display:flex;align-items:center;gap:10px;margin-bottom:14px;color:var(--cream);font-size:19px;font-weight:800}
.foot__brand img{width:34px;height:34px;border-radius:8px;border:2px solid var(--orange)}
.foot p{color:#c8b8a8}
.foot ul{display:grid;gap:9px}
.foot ul a{color:#e2d5c8}
.foot ul a:hover{color:var(--gold)}
.foot__disc{margin-top:30px;padding-top:20px;border-top:1px dashed rgba(246,199,97,.3);font-size:14px;color:#bfae9d}
.foot__bar{margin-top:14px;font-size:13px;color:#a8988a}

@keyframes panelin{
  from{opacity:0;transform:translate(12px,18px) rotate(-1.2deg)}
  to{opacity:1;transform:none}
}
.pin{animation:panelin .6s cubic-bezier(.2,.7,.3,1) both}
.pin.d1{animation-delay:.08s}
.pin.d2{animation-delay:.16s}
.pin.d3{animation-delay:.24s}
.pin.d4{animation-delay:.32s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .pin{animation:none;opacity:1;transform:none}
  .card,.entry,.btn{transition:none}
}

@media (max-width:980px){
  .hero{padding:40px 0 44px}
  .hero__in{grid-template-columns:1fr;gap:36px}
  .hero h1{font-size:36px}
  .hero__shot{max-width:310px}
  .grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}
  .shots{grid-template-columns:repeat(3,1fr)}
  .facts__in{grid-template-columns:repeat(2,1fr)}
  .facts li:nth-child(2){border-right:0}
  .facts li:nth-child(1),.facts li:nth-child(2){border-bottom:1px dashed rgba(246,199,97,.3)}
  .band{grid-template-columns:1fr;gap:26px}
  .band--flip .band__text{order:0}
  .foot__in{grid-template-columns:1fr 1fr}
}

@media (max-width:620px){
  body{font-size:15px}
  .wrap{padding:0 18px}
  .top__in{min-height:62px;gap:10px}
  .brand{font-size:18px}
  .brand img{width:34px;height:34px}
  .navtoggle{display:block}
  .nav{
    position:absolute;
    left:0;
    right:0;
    top:100%;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:8px 18px 16px;
    background:var(--cream);
    border-bottom:2px solid var(--ink);
  }
  .nav[data-open="true"]{display:flex}
  .nav a{padding:11px 12px}
  .top .btn{padding:9px 14px;font-size:14px}
  .hero{padding:32px 0 38px}
  .hero h1{font-size:29px}
  .lead{font-size:16px}
  .hero__cta .btn{width:100%}
  .hero__shot{max-width:270px}
  .hero__shot::after{right:-8px;bottom:-8px;left:10px;top:10px}
  .sec{padding:48px 0}
  .sec h2{font-size:23px}
  .sec__head{gap:12px;margin-bottom:26px}
  .sec__no{width:38px;height:38px;font-size:15px}
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .shots{grid-template-columns:repeat(2,1fr);gap:16px}
  .facts__in{grid-template-columns:1fr}
  .facts li{border-right:0;border-bottom:1px dashed rgba(246,199,97,.3)}
  .facts li:last-child{border-bottom:0}
  .page-hero h1{font-size:27px}
  .prose h2{margin-top:34px}
  .steps li{padding:18px 16px 18px 16px}
  .steps li::before{position:static;display:inline-flex;margin-bottom:10px}
  .cta h2{font-size:22px}
  .foot__in{grid-template-columns:1fr;gap:24px}
}