.guide-page { background: var(--paper); }
.guide-page::before { background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(39,64,107,.03) 3px 4px), var(--paper); }
.guide-hero { width: var(--page); min-height: 610px; margin: 0 auto; padding: 95px 0 80px; display: grid; grid-template-columns: 1fr 420px; align-items: center; gap: 9vw; position: relative; }
.guide-hero::after { content: 'CARD / CODE / CLOTH'; position: absolute; left: -62px; bottom: 74px; color: rgba(39,64,107,.35); font-family: var(--mono); font-size: .48rem; font-weight: 700; letter-spacing: .22em; writing-mode: vertical-rl; transform: rotate(180deg); }
.guide-hero h1 { margin: 0; color: var(--indigo-deep); font-size: clamp(5rem, 9vw, 8.2rem); font-weight: 600; letter-spacing: -.07em; line-height: .78; }
.guide-hero h1 em { color: var(--madder); font-weight: 400; }
.guide-deck { width: min(480px, 82%); margin: 42px 0 0 12%; padding-left: 20px; border-left: 2px solid var(--madder); font-size: 1rem; line-height: 1.55; }
.guide-card { min-height: 390px; padding: 35px; color: var(--ink); background: linear-gradient(115deg, #dec896, var(--manila) 58%, #c9aa72); box-shadow: 24px 30px 0 rgba(62,40,29,.1), 34px 42px 36px rgba(62,40,29,.12); transform: rotate(3deg); position: relative; }
.guide-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5; background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(84,50,27,.045) 4px 5px); }
.guide-card::after { content: ''; position: absolute; top: -1px; left: 44%; width: 50px; height: 25px; border-radius: 0 0 30px 30px; background: var(--paper); }
.guide-card > * { position: relative; z-index: 1; }
.guide-card > span { font-family: var(--mono); font-size: .58rem; font-weight: 700; letter-spacing: .15em; }
.guide-holes { display: grid; grid-template-columns: repeat(4, 38px); gap: 18px 22px; justify-content: center; margin: 48px 0; }
.guide-holes i { height: auto; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 38%, #203a65, var(--indigo-deep) 64%, #080d17); box-shadow: inset 3px 3px 6px #050b14, 1px 2px 0 rgba(255,255,255,.2); }
.guide-card p { margin: 0; padding-top: 16px; border-top: 1px solid rgba(62,40,29,.35); font-family: var(--mono); font-size: .56rem; font-weight: 700; letter-spacing: .08em; line-height: 1.8; text-transform: uppercase; }
.guide-sheet { background: var(--ivory); border-top: 8px solid var(--indigo); }
.guide-sheet > section { padding: 100px max(40px, calc((100vw - 1240px)/2)); display: grid; grid-template-columns: 230px minmax(0, 760px); gap: 70px; justify-content: start; border-bottom: 1px solid var(--hairline); }
.guide-sheet > section:nth-child(even) { color: var(--ivory); background: var(--indigo-deep); }
.guide-section-no { padding-top: 9px; color: var(--madder); font-family: var(--mono); font-size: .62rem; font-weight: 700; letter-spacing: .13em; }
.guide-sheet > section:nth-child(even) .guide-section-no { color: #e98b7c; }
.guide-prose h2 { margin: 0 0 32px; color: var(--indigo-deep); font-size: clamp(2.6rem, 5vw, 4.2rem); font-weight: 500; letter-spacing: -.045em; line-height: .9; }
.guide-sheet > section:nth-child(even) h2 { color: var(--ivory); }
.guide-sheet > section:nth-child(even) h3 { color: #e98b7c; }
.guide-prose h3 { margin: 35px 0 7px; color: var(--madder); font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.guide-prose p { margin: 0 0 1.2em; font-size: 1.04rem; line-height: 1.7; }
.guide-prose code { padding: 2px 5px; color: var(--madder-dark); background: var(--manila); font-family: var(--mono); font-size: .72em; font-weight: 700; }
.signal-path { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 50px; padding: 0; border-top: 1px solid rgba(239,232,216,.3); border-bottom: 1px solid rgba(239,232,216,.3); list-style: none; }
.signal-path li { min-width: 0; padding: 18px 13px 20px; border-right: 1px solid rgba(239,232,216,.2); }
.signal-path li:last-child { border-right: 0; }
.signal-path b { display: block; margin-bottom: 16px; color: #e98b7c; font-family: var(--mono); font-size: .5rem; letter-spacing: .12em; }
.signal-path span { display: block; margin-bottom: 5px; font-size: 1.1rem; font-weight: 600; }
.signal-path code { display: inline-block; max-width: 100%; overflow-wrap: anywhere; font-size: .55rem; }
.token-row { display: grid; grid-template-columns: repeat(5, 1fr); margin-bottom: 36px; border: 1px solid var(--hairline); }
.token-row span { min-height: 150px; padding: 76px 12px 12px; background: linear-gradient(var(--swatch) 0 66px, transparent 66px); border-right: 1px solid var(--hairline); font-family: var(--mono); font-size: .49rem; line-height: 1.5; text-transform: uppercase; }
.token-row span:last-child { border-right: 0; }
.token-row b { font-weight: 400; opacity: .7; }

@media (max-width: 900px) {
  .guide-hero { min-height: auto; padding-top: 115px; padding-bottom: 105px; grid-template-columns: 1fr 300px; gap: 50px; }
  .guide-card { min-height: 330px; padding: 26px; }
  .guide-holes { grid-template-columns: repeat(4, 30px); gap: 15px; }
  .guide-sheet > section { grid-template-columns: 150px minmax(0, 1fr); gap: 45px; }
}

@media (max-width: 700px) {
  .guide-hero { min-height: auto; padding: 75px 0 85px; grid-template-columns: 1fr; }
  .guide-hero h1 { font-size: clamp(4.6rem, 22vw, 6rem); }
  .guide-hero::after { display: none; }
  .guide-deck { width: 89%; margin: 32px 0 0 11%; font-size: .95rem; }
  .guide-card { width: 82%; min-height: 280px; padding: 24px; justify-self: end; }
  .guide-holes { grid-template-columns: repeat(4, 28px); gap: 14px; margin: 34px 0; }
  .guide-sheet > section { padding: 78px 16px; grid-template-columns: 1fr; gap: 18px; }
  .guide-prose h2 { margin-bottom: 25px; font-size: 3rem; }
  .guide-prose p { font-size: 1rem; }
  .signal-path { grid-template-columns: 1fr 1fr; }
  .signal-path li:nth-child(2) { border-right: 0; }
  .signal-path li:nth-child(-n+2) { border-bottom: 1px solid rgba(239,232,216,.2); }
  .token-row { grid-template-columns: 1fr; }
  .token-row span { min-height: 75px; padding: 16px 12px 12px 42%; background: linear-gradient(90deg, var(--swatch) 0 38%, transparent 38%); border-right: 0; border-bottom: 1px solid var(--hairline); }
  .token-row span:last-child { border-bottom: 0; }
}