.guide-page { background: #d5d6cf; }
.guide-header { position: relative; z-index: 10; height: 90px; padding: 16px clamp(20px,5vw,72px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: #efeee7; background: #18201c; border-bottom: 3px solid var(--orange); }
.guide-header > p { margin: 0; font-size: .57rem; font-weight: 600; letter-spacing: .23em; }
.back-link { justify-self: end; min-height: 44px; display: flex; align-items: center; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; text-underline-offset: 5px; transition: color .2s ease, transform .4s cubic-bezier(.16,1,.3,1); }
.back-link:hover, .back-link:focus-visible { color: #ff7544; transform: translateX(-4px); }
.guide-main { overflow: hidden; }
.guide-hero { position: relative; min-height: 720px; padding: 118px clamp(24px,9vw,150px) 92px; overflow: hidden; color: #efeee7; background: radial-gradient(circle at 75% 20%,rgba(230,186,103,.13),transparent 22%), linear-gradient(145deg,#35413c,#151b18 68%); }
.guide-hero::before { content: ''; position: absolute; inset: 0; opacity: .32; background: repeating-linear-gradient(90deg,transparent 0 12.4%,rgba(255,255,255,.045) 12.5% 12.58%); }
.guide-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg,var(--orange) 0 38%,rgba(255,255,255,.12) 38%); }
.guide-beam { position: absolute; top: -25%; left: 56%; width: 32%; height: 135%; transform: skewX(-18deg); background: linear-gradient(180deg,rgba(247,221,162,.38),rgba(231,190,108,.05) 63%,transparent 78%); filter: blur(5px); }
.guide-hero > p { position: relative; z-index: 2; margin: 0 0 42px; color: #ff6a35; font-size: .58rem; font-weight: 700; letter-spacing: .22em; }
.guide-hero h1 { position: relative; z-index: 2; width: 90%; margin: 0; font-family: var(--forum); font-weight: 400; font-size: clamp(5.6rem,10.6vw,10.2rem); line-height: .78; letter-spacing: -.045em; }
.guide-hero h1 em { display: block; margin-left: 12%; color: rgba(255,255,255,.055); -webkit-text-stroke: 1px rgba(255,255,255,.84); font-weight: 400; }
.guide-facts { position: absolute; z-index: 3; right: clamp(24px,6vw,90px); bottom: 58px; display: flex; gap: 30px; color: rgba(255,255,255,.7); font-size: .47rem; font-weight: 600; letter-spacing: .18em; }
.guide-facts span + span { padding-left: 30px; border-left: 1px solid rgba(255,255,255,.28); }
.guide-specimen { --specimen-opacity: .36; position: absolute; z-index: 1; right: -3%; bottom: 46px; width: min(49vw,700px); opacity: var(--specimen-opacity); filter: drop-shadow(0 24px 24px rgba(0,0,0,.5)); }
.guide-specimen svg { display: block; width: 100%; }
.spec-shadow { fill: rgba(0,0,0,.6); }
.spec-body { fill: var(--orange); }
.spec-cloth { fill: #d6d7d0; stroke: #89908c; }
.spec-fold { fill: none; stroke: #7d8580; stroke-width: 1.4; }
.guide-specimen span { display: block; margin-top: -4px; text-align: right; color: rgba(255,255,255,.6); font-size: .44rem; letter-spacing: .2em; }
.guide-header { animation: guideReveal .7s cubic-bezier(.16,1,.3,1) both; }
.guide-hero > p, .guide-hero h1, .guide-facts, .guide-specimen { opacity: 0; transform: translateY(24px); animation: guideReveal .9s cubic-bezier(.16,1,.3,1) both; }
.guide-hero h1 { animation-delay: .12s; }
.guide-specimen { animation-name: guideSpecimenReveal; animation-delay: .26s; }
.guide-facts { animation-delay: .38s; }
@keyframes guideReveal { to { opacity: 1; transform: none; } }
@keyframes guideSpecimenReveal { to { opacity: var(--specimen-opacity); transform: none; } }

.guide-article { position: relative; display: grid; grid-template-columns: 210px minmax(0,790px); gap: clamp(55px,9vw,140px); justify-content: center; padding: 140px clamp(24px,7vw,110px) 170px; background: linear-gradient(90deg,rgba(255,255,255,.18),transparent 26%,transparent 74%,rgba(29,36,33,.04)); }
.guide-article::before { content: 'PF–150–G / TECHNICAL CUSTODY COPY'; position: absolute; top: 42px; right: 6vw; color: rgba(29,36,33,.44); font-size: .44rem; letter-spacing: .2em; }
.guide-index { position: sticky; top: 35px; align-self: start; display: flex; flex-direction: column; padding-top: 10px; border-top: 1px solid var(--ink); }
.guide-index a { min-height: 44px; display: flex; align-items: center; color: var(--ink-soft); font-size: .5rem; font-weight: 600; letter-spacing: .17em; text-decoration: none; border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease, transform .35s cubic-bezier(.16,1,.3,1); }
.guide-index a:hover, .guide-index a:focus-visible { color: var(--orange); border-bottom-color: rgba(240,90,36,.4); }
.guide-index a:hover { transform: translateX(5px); }
.guide-copy section { position: relative; margin-bottom: 118px; scroll-margin-top: 40px; }
.guide-copy section:not(.reproduce)::before { content: ''; position: absolute; left: -30px; top: 5px; width: 9px; height: 9px; border: 1px solid rgba(29,36,33,.3); border-radius: 50%; }
.guide-number { margin: 0 0 20px; color: var(--orange); font-size: .54rem; font-weight: 800; letter-spacing: .21em; }
.guide-copy h2 { max-width: 700px; margin: 0 0 34px; font-family: var(--forum); font-size: clamp(2.9rem,4.1vw,4.55rem); font-weight: 400; line-height: .94; letter-spacing: -.02em; }
.guide-copy p:not(.guide-number) { margin: 0; color: #37413c; font-size: 1rem; line-height: 1.9; }
.guide-copy code { padding: .12em .32em; color: #1f2823; background: rgba(255,255,255,.5); border-bottom: 1px solid rgba(29,36,33,.2); font-family: var(--manrope); font-size: .81em; }
.tech-diagram { position: relative; height: 250px; margin-top: 48px; display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; overflow: hidden; background: #737b76; border: 1px solid #737b76; }
.tech-diagram > span { position: relative; z-index: 2; padding: 16px; color: #f1f0e9; background: rgba(31,39,35,.88); font-size: .45rem; font-weight: 700; letter-spacing: .16em; }
.tech-diagram > span:nth-child(2) { background: rgba(211,213,205,.9); color: #252e29; }
.tech-diagram > span:nth-child(3) { background: rgba(240,90,36,.9); }
.tech-diagram svg { position: absolute; z-index: 3; left: 3%; right: 3%; bottom: 20px; width: 94%; height: 160px; overflow: visible; }
.diagram-body { fill: var(--orange); stroke: #222b26; }
.diagram-cloth, .diagram-corner { fill: #dbdcd5; stroke: #6b746f; }
.diagram-corner { transform: translate(12px,-12px) rotate(5deg); transform-origin: 100% 100%; }
.diagram-fold { fill: none; stroke: #7a827d; }
.tech-diagram rect { fill: #17201b; }
.tech-diagram text { fill: #f1f0e9; font-family: var(--manrope); font-size: 9px; letter-spacing: 1px; }
.swatches { display: grid; grid-template-columns: 1.15fr 1.15fr 1fr 1fr 1fr; height: 128px; margin-top: 42px; box-shadow: 0 18px 34px rgba(29,36,33,.1); }
.swatches i { position: relative; background: #9fa49f; }
.swatches i:nth-child(2) { background: #eceae2; }
.swatches i:nth-child(3) { background: #f05a24; }
.swatches i:nth-child(4) { background: #e7b75e; }
.swatches i:nth-child(5) { background: #1d2421; }
.swatches b { position: absolute; left: 10px; bottom: 9px; color: #1d2421; font-size: .44rem; font-style: normal; letter-spacing: .14em; }
.swatches i:nth-child(5) b { color: #fff; }
.reproduce { padding: 60px 58px 76px; overflow: hidden; background: linear-gradient(130deg,#bdc3bd,#e7d19d 82%); border-left: 3px solid var(--orange); box-shadow: 0 24px 50px rgba(29,36,33,.09); }
.reproduce::before { content: ''; position: absolute; right: -10%; top: -50%; width: 46%; height: 190%; transform: skewX(-16deg); background: linear-gradient(180deg,rgba(255,246,211,.5),transparent); }
.reproduce::after { content: 'PF / 150'; position: absolute; right: 28px; bottom: 18px; color: rgba(240,90,36,.36); font-family: var(--forum); font-size: 2.5rem; transform: rotate(-8deg); }
.reproduce > * { position: relative; z-index: 1; }
.reproduce h2 { font-size: 3.25rem; }

@media (max-width:900px) and (min-width:761px) {
  .guide-hero { min-height: 650px; }
  .guide-hero h1 { width: 90%; }
  .guide-specimen { width: 58vw; }
  .guide-article { grid-template-columns: 150px minmax(0,1fr); gap: 48px; padding-left: 44px; padding-right: 44px; }
}

@media (max-width:760px) {
  .guide-header { height: 78px; padding: 12px 18px; grid-template-columns: 1fr auto; }
  .guide-header > p { display: none; }
  .back-link { font-size: .52rem; }
  .guide-hero { min-height: 680px; padding: 104px 20px 126px; }
  .guide-hero > p { max-width: 240px; line-height: 1.6; }
  .guide-hero h1 { width: 100%; font-size: clamp(4.45rem,22vw,6rem); line-height: .78; }
  .guide-hero h1 em { margin-left: 20px; }
  .guide-specimen { --specimen-opacity: .22; right: -19%; bottom: 64px; width: 100vw; }
  .guide-specimen span { display: none; }
  .guide-facts { left: 20px; right: 20px; bottom: 35px; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
  .guide-facts span { line-height: 1.5; }
  .guide-facts span + span { padding-left: 8px; }
  .guide-article { display: block; padding: 96px 20px 115px; }
  .guide-article::before { top: 28px; right: 20px; }
  .guide-index { position: static; display: grid; grid-template-columns: repeat(2,1fr); margin-bottom: 86px; }
  .guide-index a { border-bottom: 1px solid rgba(29,36,33,.17); }
  .guide-copy section { margin-bottom: 92px; scroll-margin-top: 20px; }
  .guide-copy section:not(.reproduce)::before { display: none; }
  .guide-copy h2 { font-size: 2.85rem; }
  .guide-copy p:not(.guide-number) { font-size: .96rem; line-height: 1.84; }
  .tech-diagram { height: 245px; }
  .tech-diagram > span { padding: 10px 8px; font-size: .38rem; }
  .tech-diagram svg { left: -8%; width: 116%; }
  .swatches { height: 112px; }
  .swatches b { writing-mode: vertical-rl; }
  .reproduce { padding: 38px 25px 78px; }
  .reproduce h2 { font-size: 2.6rem; }
}

@media (prefers-reduced-motion:reduce) {
  .guide-beam { filter: none; }
  .guide-header, .guide-hero > p, .guide-hero h1, .guide-facts { opacity: 1; transform: none; }
  .guide-specimen { opacity: var(--specimen-opacity); transform: none; }
}