.guide-page { background:linear-gradient(90deg,#100c09,#1c1510 52%,#100c09) }
.guide-page::after { content:""; position:fixed; z-index:-1; inset:0; background:repeating-linear-gradient(90deg,transparent 0 calc(25vw - 1px),rgba(235,195,130,.025) 25vw) }
.guide-header { height:92px; display:flex; align-items:center; justify-content:space-between; padding:0 4vw; border-bottom:1px solid #604d36; background:#120e0b }
.guide-header>p { margin:0; color:#b6a182; font-size:9px; letter-spacing:.23em }
.guide-hero { min-height:760px; position:relative; overflow:hidden; padding:135px 8vw 90px; background:radial-gradient(ellipse at 71% 27%,rgba(232,165,61,.2),transparent 29%),linear-gradient(105deg,#21170f,#382719 58%,#1a120d) }
.guide-hero::after { content:""; position:absolute; inset:auto 0 0; height:120px; background:linear-gradient(transparent,#100c09) }
.guide-hero .section-number { position:relative; z-index:3; margin-left:1.2vw }
.guide-hero h1 { position:relative; z-index:3; max-width:780px; margin:48px 0 0; font:400 clamp(102px,11.8vw,172px)/.7 var(--display); letter-spacing:-.058em }
.guide-hero h1 em { margin-left:.28em; color:var(--work); font-weight:400 }
.guide-lede { position:absolute; z-index:4; left:46%; bottom:116px; max-width:520px; color:#ddc9a8; font-size:21px; line-height:1.55; font-style:italic }
.guide-stamp { position:absolute; z-index:4; right:8vw; top:120px; width:116px; height:116px; display:grid; place-items:center; border:1px solid var(--amber); border-radius:50%; color:var(--amber); font-size:9px; line-height:1.55; letter-spacing:.2em; text-align:center; transform:rotate(10deg) }
.guide-strings i { position:absolute; top:-4%; width:1px; height:640px; opacity:.27; background:linear-gradient(var(--string),transparent); transform:rotate(var(--r)); transform-origin:top }.guide-strings i:nth-child(1){left:14%;--r:8deg}.guide-strings i:nth-child(2){left:33%;--r:-5deg}.guide-strings i:nth-child(3){left:52%;--r:11deg}.guide-strings i:nth-child(4){left:71%;--r:-8deg}.guide-strings i:nth-child(5){left:90%;--r:4deg}
.guide-rig { position:absolute; z-index:2; right:16vw; top:235px; width:210px; height:330px; opacity:.55 }
.guide-rig>b { position:absolute; top:0; left:0; width:210px; height:11px; background:linear-gradient(#dbb172,#815630); box-shadow:0 5px 8px #090604 }.guide-rig>b::after { content:""; position:absolute; left:100px; top:-38px; width:11px; height:84px; background:#a87c4b }
.guide-rig>i { position:absolute; top:8px; width:1px; height:235px; background:#efe2cd; transform-origin:top }.guide-rig>i:nth-of-type(1){left:35px;transform:rotate(-7deg)}.guide-rig>i:nth-of-type(2){right:35px;transform:rotate(7deg)}
.guide-rig span { position:absolute; left:56px; top:165px; width:98px; height:124px; border-radius:45% 45% 39% 40%; background:linear-gradient(100deg,#73251f,#b84335); clip-path:polygon(22% 0,78% 0,100% 100%,0 100%) }.guide-rig span::before { content:""; position:absolute; left:27px; top:-54px; width:44px; height:53px; border-radius:48%; background:#c79363 }.guide-rig u { position:absolute; top:13px; width:15px; height:112px; border-radius:20px; background:#8d2d25 }.guide-rig u:nth-child(1){left:-17px;transform:rotate(18deg)}.guide-rig u:nth-child(2){right:-17px;transform:rotate(-18deg)}.guide-rig u:nth-child(3){left:41px;top:94px;height:83px;box-shadow:33px 0 #8d2d25}
.guide-coordinate { position:absolute; right:5vw; bottom:42px; color:#78654e; font-size:8px; line-height:1.7; letter-spacing:.18em; text-align:right }

.guide-index { max-width:1180px; display:grid; grid-template-columns:repeat(5,1fr); margin:-1px auto 0; border:1px solid #594633; border-width:1px 0; background:#15100c }
.guide-index a { min-height:80px; display:flex; align-items:center; gap:15px; padding:18px 22px; border-right:1px solid #594633; color:var(--amber); font:400 25px var(--display); transition:background .3s ease,color .3s ease,box-shadow .4s cubic-bezier(.16,1,.3,1) }.guide-index a:last-child { border-right:0 }.guide-index span { color:#c6b496; font:500 9px var(--body); letter-spacing:.16em; text-transform:uppercase }.guide-index a:hover,.guide-index a:focus-visible { background:#211810; color:var(--work); box-shadow:inset 0 -3px #b47927 }

.guide-copy { max-width:1180px; position:relative; margin:auto; padding:95px 5vw 130px }
.guide-copy::before { content:""; position:absolute; top:0; bottom:110px; left:117px; width:1px; background:linear-gradient(transparent,#715a3e 5%,#715a3e 95%,transparent) }
.guide-copy section { position:relative; display:grid; grid-template-columns:120px 1fr; gap:45px; padding:67px 0; border-top:1px solid #604c36 }
.guide-copy section:nth-child(even)>div { max-width:820px; margin-left:7vw }.guide-copy section:last-child { border-bottom:1px solid #604c36 }
.guide-copy section::after { content:""; position:absolute; top:-5px; left:113px; width:9px; height:9px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 5px #18110d }
.guide-num { position:relative; z-index:2; color:var(--amber); font:400 64px/1 var(--display) }
.guide-copy h2 { margin:0 0 24px; color:var(--string); font-size:50px }
.guide-copy p { max-width:780px; margin-bottom:17px; color:#d0bea0; font-size:17px; line-height:1.68; text-wrap:pretty }
.guide-copy code { padding:1px 5px; background:#382919; color:var(--work); font-family:var(--body) }
.token-row { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin:31px 0 }
.token-row i { height:120px; position:relative; display:flex; align-items:flex-end; padding:13px; overflow:hidden; border:1px solid rgba(255,255,255,.25); background:var(--c); color:#fff; font-size:8px; letter-spacing:.15em; text-transform:uppercase; text-shadow:0 1px 4px #000; box-shadow:inset 0 -28px 40px rgba(0,0,0,.19); clip-path:polygon(2% 0,100% 3%,98% 100%,0 97%) }
.token-row i::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(7deg,transparent 0 16px,rgba(255,255,255,.055) 17px 18px) }.token-row i:nth-child(2n) { transform:translateY(-7px) rotate(.8deg) }.token-row i:nth-child(3) { color:#281d13; text-shadow:none }

@media(max-width:900px) {
  .guide-hero { min-height:730px; padding:130px 7vw 80px }.guide-hero h1 { font-size:clamp(95px,15vw,132px) }.guide-lede { left:43%; bottom:110px; max-width:420px; font-size:19px }.guide-rig { right:8vw; transform:scale(.85); transform-origin:top right }
  .guide-index a { padding:15px; justify-content:center }.guide-index span { display:none }
  .guide-copy section:nth-child(even)>div { margin-left:2vw }
}

@media(max-width:560px) {
  .guide-header { height:76px; padding:0 16px }.guide-header>p { width:140px; font-size:7px; line-height:1.5; text-align:right }
  .guide-hero { min-height:680px; padding:100px 20px 70px }.guide-hero .section-number { width:230px; margin:0; font-size:8px; line-height:1.6 }.guide-hero h1 { margin-top:53px; font-size:73px; line-height:.72 }.guide-hero h1 em { margin-left:0 }.guide-lede { left:74px; right:24px; bottom:112px; font-size:17px; line-height:1.55 }.guide-stamp { top:95px; right:18px; width:82px; height:82px; font-size:7px }.guide-rig { right:-15px; top:277px; transform:scale(.56); opacity:.38 }.guide-coordinate { right:18px; bottom:28px; font-size:6px }
  .guide-index { grid-template-columns:repeat(5,1fr); margin:0 }.guide-index a { min-height:58px; padding:9px; font-size:21px }
  .guide-copy { padding:58px 20px 90px }.guide-copy::before { left:43px; bottom:80px }.guide-copy section,.guide-copy section:nth-child(even) { grid-template-columns:50px 1fr; gap:15px; padding:47px 0 }.guide-copy section:nth-child(even)>div { margin:0 }.guide-copy section::after { left:39px }.guide-num { font-size:36px }.guide-copy h2 { margin-bottom:20px; font-size:38px }.guide-copy p { font-size:15.5px; line-height:1.62 }
  .token-row { grid-template-columns:repeat(2,1fr) }.token-row i { height:82px }.token-row i:last-child { grid-column:2 }
}