/* deckhaus — method page: the machine, seen running. Paper-dominant, hairline, one accent gesture. */

#view-method .wrap{max-width:1480px;margin:0 auto;padding:0 clamp(20px,6vw,96px)}

/* ---------- hero ---------- */
.mhead{position:relative;overflow:hidden;background:#08080A;padding:clamp(124px,13.5vw,176px) 0 clamp(40px,4.6vw,68px);border-bottom:1px solid rgba(244,244,239,.1)}
.mhead::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(244,244,239,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(244,244,239,.045) 1px,transparent 1px);background-size:80px 80px;-webkit-mask-image:radial-gradient(90% 80% at 22% 22%,#000,transparent 78%);mask-image:radial-gradient(90% 80% at 22% 22%,#000,transparent 78%)}
.mhead>.wrap{position:relative;z-index:2}
.mhead h1{font-family:var(--font-display);font-weight:400;letter-spacing:0;font-size:clamp(40px,5.4vw,90px);line-height:1.04;color:var(--paper);margin:clamp(20px,2.2vw,30px) 0 0;max-width:19ch;text-wrap:balance}
.mhead h1 em{font-style:normal;color:var(--lime-500)}
.mhead .lead{font-size:clamp(17px,1.3vw,20px);line-height:1.6;color:var(--paper);max-width:56ch;margin:clamp(20px,2.2vw,28px) 0 0}
.mhead .facts{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,72px);margin-top:clamp(28px,3.2vw,48px);border-top:1px solid rgba(244,244,239,.16);padding-top:clamp(16px,1.8vw,24px)}
.mhead .facts b{display:block;font-family:var(--font-display);font-weight:400;font-size:clamp(24px,2.6vw,40px);line-height:1;color:var(--paper)}
.mhead .facts span{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--paper);margin-top:9px}

/* ---------- three moves: sticky spine ---------- */
.spine{position:relative;background:var(--bg-base);border-bottom:1px solid var(--border-subtle)}
.spine .in{max-width:1480px;margin:0 auto;padding:clamp(44px,5.4vw,88px) clamp(20px,6vw,96px);display:grid;grid-template-columns:minmax(230px,.28fr) minmax(0,.72fr);gap:clamp(28px,4.4vw,88px);align-items:start}
.spine .mrail{position:sticky;top:clamp(96px,11vh,132px);align-self:start}
.spine .mrail ol{list-style:none;margin:0;padding:0;display:grid;gap:clamp(14px,1.6vw,22px)}
.spine .mrail li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;opacity:.3;transition:opacity .5s ease}
.spine .mrail li.on{opacity:1}
.spine .mrail .n{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;color:var(--text-muted);transition:color .4s ease}
.spine .mrail li.on .n{color:var(--text-accent)}
.spine .mrail .t{font-family:var(--font-display);font-weight:400;letter-spacing:0;font-size:clamp(20px,2vw,30px);line-height:1.1;color:var(--text-primary)}
.spine .mrail .s{grid-column:2;font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);margin-top:4px}
.spine .prog{margin-top:clamp(20px,2.4vw,32px);height:2px;background:var(--border-subtle);position:relative;overflow:hidden}
.spine .prog i{position:absolute;inset:0;background:var(--lime-500);transform-origin:0 50%;transform:scaleX(0);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.spine .prog+.pk{display:block;margin-top:10px;font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted)}
.move{padding:clamp(24px,3vw,48px) 0;border-top:1px solid var(--border-subtle)}
.move:first-child{border-top:0;padding-top:0}
.move .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-accent)}
.move h3{font-family:var(--font-display);font-weight:400;letter-spacing:0;font-size:clamp(28px,3.6vw,56px);line-height:1.06;margin:14px 0 0;max-width:18ch;text-wrap:balance}
.move p{font-size:clamp(16px,1.2vw,17.5px);line-height:1.62;color:var(--text-secondary);max-width:52ch;margin:16px 0 0}
.move .meta{display:flex;gap:clamp(14px,2vw,28px);flex-wrap:wrap;margin-top:clamp(18px,2vw,26px);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)}
.move .plate{margin-top:clamp(20px,2.4vw,34px)}
@media (max-width:900px){.spine .in{grid-template-columns:1fr}.spine .mrail{position:static}.spine .mrail ol{grid-auto-flow:column;justify-content:start;gap:18px}.spine .mrail li{grid-template-columns:auto;opacity:1}.spine .mrail .s{display:none}.spine .mrail .t{font-size:17px}}

/* ---------- the sprint: scroll-scrubbed track ---------- */
.sprint{position:relative;background:#08080A;color:var(--paper)}
.sprint::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(90deg,rgba(244,244,239,.04) 1px,transparent 1px);background-size:calc(100%/5) 100%}
.sprint .stick{position:sticky;top:0;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:clamp(70px,8vw,110px) 0 clamp(40px,5vw,72px)}
.sprint .head{max-width:1480px;margin:0 auto;padding:0 clamp(20px,6vw,96px);width:100%;display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap}
.sprint .head h2{font-family:var(--font-display);font-weight:400;letter-spacing:0;font-size:clamp(26px,3vw,46px);margin:0;color:var(--paper);max-width:20ch}
.sprint .head .k{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#8E8E98}
.sprint .head .k b{font-weight:400;color:var(--lime-500)}
.track{display:flex;gap:clamp(18px,2.4vw,44px);padding:clamp(30px,4vw,62px) clamp(20px,6vw,96px);will-change:transform}
.pcardm{flex:none;width:clamp(290px,31vw,460px);border-top:1px solid rgba(244,244,239,.18);padding-top:clamp(16px,1.8vw,24px);opacity:.34;transition:opacity .5s ease}
.pcardm.on{opacity:1}
.pcardm .n{font-family:var(--font-display);font-weight:400;font-size:clamp(46px,6vw,104px);line-height:.92;color:rgba(244,244,239,.16);transition:color .5s ease}
.pcardm.on .n{color:var(--lime-500)}
.pcardm h3{font-family:var(--font-display);font-weight:400;letter-spacing:0;font-size:clamp(22px,2.3vw,36px);line-height:1.1;margin:clamp(12px,1.4vw,20px) 0 0;color:var(--paper)}
.pcardm p{font-size:clamp(15px,1.15vw,17px);line-height:1.6;color:#B4B4BE;margin:14px 0 0;max-width:38ch}
.pcardm .o{display:block;margin-top:clamp(16px,1.8vw,24px);font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#7C7C86}
.pcardm .o b{font-weight:400;color:var(--paper)}
.srail{max-width:1480px;margin:0 auto;padding:0 clamp(20px,6vw,96px);width:100%;display:flex;align-items:center;gap:18px}
.srail .bar{flex:1;height:2px;background:rgba(244,244,239,.16);position:relative;overflow:hidden}
.srail .bar i{position:absolute;inset:0;background:var(--lime-500);transform-origin:0 50%;transform:scaleX(0)}
.srail .c{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#8E8E98;white-space:nowrap}
.srail .c b{font-weight:400;color:var(--paper)}
@media (max-width:760px){.sprint .stick{position:static;min-height:0}.track{flex-direction:column;transform:none !important;padding-bottom:0}.pcardm{width:auto;opacity:1}.srail{display:none}}

/* ---------- proof band ---------- */
.proof{background:var(--surface-sand);border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}
.proof .in{max-width:1480px;margin:0 auto;padding:clamp(40px,5vw,80px) clamp(20px,6vw,96px);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,56px)}
.proof div{border-top:1px solid var(--border-subtle);padding-top:clamp(14px,1.6vw,20px);position:relative}
.proof div::before{content:"";position:absolute;top:-1px;left:0;width:34px;height:1px;background:var(--lime-500)}
.proof b{display:block;font-family:var(--font-display);font-weight:400;font-size:clamp(34px,4.6vw,76px);line-height:1;font-variant-numeric:tabular-nums}
.proof span{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);margin-top:12px;max-width:22ch}
@media (max-width:860px){.proof .in{grid-template-columns:repeat(2,1fr)}}

/* ---------- close ---------- */
.mclose{background:var(--bg-base)}
.mclose .in{max-width:1480px;margin:0 auto;padding:clamp(44px,5.4vw,88px) clamp(20px,6vw,96px);display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap}
.mclose p{font-family:var(--font-display);font-weight:400;letter-spacing:0;font-size:clamp(24px,3vw,46px);line-height:1.1;margin:0;max-width:22ch}
.mclose .acts{display:flex;gap:12px;flex-wrap:wrap}