/* VIGIL — page sections */

/* the 3D steel: one fixed canvas per page, above section grounds, below copy */
.forge{position:fixed;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.front,.hero-copy,.dial-copy,.wrap{position:relative;z-index:3}

/* ================= HOME ================= */
.hero{position:relative;height:100vh;min-height:680px;overflow:hidden;background:radial-gradient(80% 70% at 66% 42%,#19171a 0%,var(--sable) 70%)}
.hero-art{position:absolute;z-index:1;right:-6vw;top:12vh;width:min(1180px,92vw);opacity:.95;will-change:transform}
.hero-art img{}
.hero-copy{position:absolute;left:var(--gutter);right:var(--gutter);bottom:var(--s-8);display:grid;gap:var(--s-6)}
.hero-h .ln{display:block;overflow:hidden;padding:.24em 0 .22em;margin:-.24em 0 -.22em;white-space:nowrap}
.hero-h .ln > span{display:block;transform:translateY(135%)}
.hero-h{font-size:clamp(58px,min(9.4vw,17vh),178px)}
.hero-foot{display:grid;grid-template-columns:minmax(0,420px) auto;grid-template-rows:auto auto;column-gap:var(--s-7);row-gap:var(--s-4);align-items:end;justify-content:start}
.hero-foot .hero-sub{grid-row:1/3}
.hero-foot .hero-trust{grid-column:2;align-self:start}
.hero-sub{margin:0;font-size:19px;line-height:1.5;color:#d3d0c9;opacity:0}
.hero-ctas{display:flex;gap:var(--s-3);flex-wrap:wrap;opacity:0}
.hero-drag{position:absolute;z-index:3;left:70%;top:calc(50% + 34vh);transform:translateX(-50%);display:flex;align-items:center;gap:var(--s-2);font-family:var(--f-label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(238,234,226,.55);margin:0;pointer-events:none;transition:opacity .6s}
.hero-drag svg{width:22px;height:10px;fill:none;stroke:currentColor;stroke-width:1.4}
.hero-drag.used{opacity:0}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;z-index:2;pointer-events:none;background:linear-gradient(0deg,rgba(12,12,13,.94) 0%,rgba(12,12,13,.72) 30%,rgba(12,12,13,.3) 65%,transparent 100%);-webkit-mask:linear-gradient(90deg,#000 55%,rgba(0,0,0,.55) 100%);mask:linear-gradient(90deg,#000 55%,rgba(0,0,0,.55) 100%)}
.hero{touch-action:pan-y}

.frieze{overflow-x:clip;overflow-y:visible;padding:var(--s-6) 0;position:relative;z-index:4}
.frieze .march{height:clamp(120px,15vw,220px)}

/* the hydra and the knight: why one blade */
.duel-stage{position:relative;height:100vh;min-height:620px;overflow:hidden;max-width:calc(var(--container) + var(--gutter) * 2);margin:0 auto;padding:calc(var(--s-9) + var(--s-2)) var(--gutter) var(--s-6);display:flex;flex-direction:column;justify-content:center;gap:var(--s-6)}
.duel-head{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:var(--s-6)}
.duel-head img{height:clamp(96px,17vh,200px);width:auto;max-width:100%;will-change:transform}
.duel-beast{justify-self:end}
.duel-knight{justify-self:start;scale:-1 1}
.duel-title{text-align:center}
.duel-lede{margin:var(--s-4) auto 0;max-width:46ch;font-size:17px;line-height:1.5;color:var(--ink-2)}
.duel-field{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-7);touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.duel-field.grabbing{cursor:grabbing}
.duel-side{margin:0;display:flex;flex-direction:column;min-width:0}
.duel-side figcaption{font-size:16px;line-height:1.45;color:var(--ink-2);min-height:3em;margin-bottom:var(--s-3);max-width:52ch}
.duel-side figcaption b{display:block;font-family:var(--f-display);font-stretch:62.5%;font-weight:600;font-size:26px;line-height:1.05;text-transform:uppercase;color:var(--ink);margin-bottom:var(--s-1)}
.duel-side.is-knight figcaption b{color:var(--gules)}
.duel-mini{display:none}
.duel-panel{color:var(--ink);border:2px solid var(--ink);background:#efe9dd;line-height:0}
.duel-svg{display:block;width:100%;height:auto;max-height:calc(100vh - 500px);min-height:150px}
.duel-out{margin:var(--s-3) 0 0;font-family:var(--f-label);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);min-height:1.4em}
.duel-out b{color:var(--ink);font-weight:700}
.duel-side:not(.is-knight) .duel-out b{color:var(--gules)}

/* the verdict ledger */
.verdict{padding-top:var(--s-8)}
.verdict-h{margin-bottom:var(--s-8)}
.vlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:3px solid var(--ink)}
.vlist li{padding:var(--s-6) var(--s-6) var(--s-2) 0}
.vlist li + li{padding-left:var(--s-6);border-left:1px solid var(--parchment-2)}
.vlist .h3{font-size:clamp(30px,2.5vw,42px);margin-bottom:var(--s-4)}
.vlist .count{color:var(--gules)}
.vlist p{margin:0;color:var(--ink-2);font-size:17px;line-height:1.55}

/* the dial: eight settings, one huge rolling numeral, a notched rail */
.dial{position:relative}
.dial-stage{position:relative;height:100vh;min-height:640px;padding:calc(var(--s-9) - var(--s-2)) var(--gutter) var(--s-6);display:flex;align-items:center;overflow:hidden}
.dial-glow{position:absolute;inset:0;background:radial-gradient(40% 58% at 70% 50%,rgba(215,38,28,.5),rgba(92,14,10,.22) 45%,transparent 72%);opacity:.08;transition:opacity .9s var(--settle)}
.dial{--heat:0}
.dial-copy{width:min(620px,48vw)}
.dial-glow{opacity:calc(.1 + var(--heat) * .9) !important}
.dial-now{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--s-6);margin:var(--s-2) 0 var(--s-6)}
/* the heat behind the numeral: an ember glow that grows with the setting, never clipped */
.dial-now::before{content:"";position:absolute;left:-6%;top:50%;width:min(300px,40%);aspect-ratio:1;transform:translateY(-50%) scale(calc(.6 + var(--heat) * .6));background:radial-gradient(closest-side,rgba(255,70,30,.45),rgba(215,38,28,.12) 60%,transparent);opacity:var(--heat);pointer-events:none;transition:transform .7s var(--settle),opacity .7s}
.dial-big{position:relative;height:1em;overflow:hidden;font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:clamp(170px,19vw,300px);line-height:1;padding:0 .04em}
.dial-reel{display:flex;flex-direction:column;will-change:transform}
.dial-reel span{display:block;height:1em;line-height:.98;text-align:center;color:color-mix(in srgb,var(--gules) calc(var(--heat) * 100%),var(--argent))}
.dial-say{min-width:0}
.dial-name{margin:0 0 var(--s-3);font-family:var(--f-seal);font-size:clamp(46px,4.4vw,72px);line-height:1;color:var(--argent);white-space:nowrap}
.dial-desc{margin:0 0 var(--s-4);font-size:18px;line-height:1.45;color:#c9c6bf;max-width:30ch;min-height:2.9em}
.dial-mm{display:flex;align-items:baseline;gap:var(--s-3);margin:0;font-family:var(--f-label);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
.dial-mm b{font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:30px;letter-spacing:0;color:var(--argent)}
.dial-rail{position:relative;display:grid;grid-template-columns:repeat(8,1fr);padding-top:22px}
.rail-groove{position:absolute;left:0;right:0;top:0;height:6px;background:rgba(238,234,226,.12);box-shadow:inset 0 1px 0 rgba(0,0,0,.6)}
.rail-fill{position:absolute;inset:0;transform:scaleX(.0625);transform-origin:0 50%;background:linear-gradient(90deg,#8f1611,var(--gules) 70%,#ff6a3a);box-shadow:0 0 12px rgba(215,38,28,.6)}
.rail-mark{position:absolute;left:0;top:-7px;width:20px;height:20px;margin-left:-10px;background:linear-gradient(135deg,#fbfbfa 0%,#c9cbcf 30%,#5d6066 52%,#f2f2f0 70%,#8d9095 100%);rotate:45deg;box-shadow:0 0 0 1px rgba(0,0,0,.6),0 6px 14px rgba(0,0,0,.5)}
.dial-rail button{position:relative;padding:14px 0 8px;text-align:center;font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:22px;line-height:1;color:rgba(238,234,226,.35);transition:color .35s}
.dial-rail button::before{content:"";position:absolute;left:50%;top:-16px;width:1px;height:10px;background:rgba(238,234,226,.35)}
.dial-rail button:hover{color:rgba(238,234,226,.8)}
.dial-rail button.past{color:rgba(238,234,226,.6)}
.dial-rail button.on{color:var(--argent)}
.dial-h{font-size:clamp(44px,4.6vw,84px)}
.dial-lede{margin:var(--s-4) 0 var(--s-6);color:#c9c6bf;font-size:18px;max-width:38ch}

/* the tourney: a fight poster. Gules ground, black woodcut fighters, the champion in the middle */
.bout{position:relative;padding:var(--section) var(--gutter) calc(var(--section) * .8);overflow-x:clip}
.bout::selection{background:var(--sable)}
.bout-head{text-align:center;margin-bottom:var(--s-7)}
.bout-h{margin:0;display:flex;flex-direction:column;align-items:center;font-family:var(--f-display);font-stretch:62.5%;font-weight:600;line-height:.86;text-transform:uppercase;color:var(--sable)}
.bout-l1{display:block;font-size:clamp(120px,19vw,300px);letter-spacing:.01em}
.bout-l2{display:block;font-size:clamp(54px,8vw,128px);letter-spacing:.02em}
.bout-vs{display:flex;align-items:center;gap:var(--s-4);width:min(100%,640px);margin:var(--s-3) 0 var(--s-4)}
.bout-vs i{flex:1;height:3px;background:var(--sable)}
.bout-vs b{display:grid;place-items:center;width:62px;height:62px;font-size:24px;letter-spacing:.04em;color:var(--argent);background:var(--sable);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.bout-lede{margin:var(--s-5) auto 0;max-width:46ch;font-size:19px;line-height:1.5;color:rgba(12,12,13,.82)}
.bout-card{display:grid;grid-template-columns:1fr 1.35fr 1fr;grid-template-rows:auto auto;align-items:end;gap:var(--s-5) var(--s-5);margin:0 auto var(--s-6);max-width:1120px}
.fighter{display:contents;margin:0;text-align:center}
.fighter:nth-child(1) > *{grid-column:1}.fighter:nth-child(2) > *{grid-column:2}.fighter:nth-child(3) > *{grid-column:3}
.fighter > .fighter-art{grid-row:1;align-self:end}
.fighter > figcaption{grid-row:2;align-self:start;text-align:center}
.fighter-art{display:flex;align-items:flex-end;justify-content:center;height:clamp(140px,16vw,230px);margin-bottom:var(--s-6)}
.f-champ .fighter-art{height:clamp(180px,22vw,320px)}
.fighter-art img{max-height:100%;width:auto;max-width:100%}
.f-side .fighter-art img{opacity:.92}
.fighter figcaption{display:flex;flex-direction:column;align-items:center}
.fighter-what{display:flex;flex-direction:column;align-items:center;gap:var(--s-3);font-family:var(--f-display);font-stretch:62.5%;font-weight:600;font-size:clamp(24px,2.1vw,32px);line-height:1;text-transform:uppercase;white-space:nowrap}
.f-champ .fighter-what{font-size:clamp(28px,2.6vw,40px)}
.f-champ .fighter-what .kind{color:var(--sable)}
.fighter-name{display:block;padding:6px 0}
.f-champ .fighter-name{padding:8px 16px;background:var(--sable);color:var(--argent)}
.kind{flex:none;display:block;width:clamp(28px,2.6vw,38px);height:clamp(28px,2.6vw,38px)}
.kind svg{display:block;width:100%;height:100%}
.fighter-note{display:block;margin:var(--s-3) auto 0;font-size:15px;line-height:1.4;color:rgba(12,12,13,.8);max-width:24ch}
/* the score: rides along the top while the rounds are read */
.score{position:sticky;top:var(--s-4);z-index:5;display:grid;grid-template-columns:1fr 1.35fr 1fr;max-width:1120px;margin:0 auto var(--s-5);background:var(--sable);color:var(--argent);font-family:var(--f-label);font-size:12px;letter-spacing:.16em;text-transform:uppercase;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px)}
.score span{display:flex;align-items:center;justify-content:center;gap:var(--s-3);padding:12px 0}
.score b{display:inline-block;min-width:1.2ch;font-family:var(--f-display);font-stretch:62.5%;font-weight:600;font-size:30px;letter-spacing:0;line-height:1}
.score-us{background:linear-gradient(180deg,#1c1b1c,#0c0c0d);color:var(--argent)}
.score-us b{color:var(--gules)}
.tape{list-style:none;margin:0 auto;padding:0;max-width:1120px;border-top:3px solid var(--sable)}
.tape-row{position:relative;display:grid;grid-template-columns:1fr 1.35fr 1fr;grid-template-rows:auto auto;column-gap:var(--s-5);align-items:center;padding:var(--s-5) 0;border-bottom:1px solid rgba(12,12,13,.3);text-align:center}
.tape-r{position:absolute;left:0;top:var(--s-5);font-family:var(--f-label);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.tape-r i{font-style:normal}
.tape-q{grid-column:2;grid-row:1;margin:0 0 var(--s-2);font-family:var(--f-label);font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.tape-c{grid-column:1;grid-row:2}.tape-v{grid-column:2;grid-row:2}.tape-e{grid-column:3;grid-row:2}
.tape-row p{margin:0;font-size:18px;line-height:1.3;color:rgba(12,12,13,.62);transition:color .4s}
.tape-row .tape-v{font-family:var(--f-display);font-stretch:62.5%;font-weight:600;font-size:clamp(26px,2.6vw,38px);line-height:1;text-transform:uppercase;color:rgba(12,12,13,.55)}
/* the winner of a round is inked black and struck with a lozenge */
.tape-row[data-win~="v"] .tape-v,.tape-row[data-win*="c"] .tape-c,.tape-row[data-win*="e"] .tape-e{color:var(--sable)}
.tape-row[data-win="v"] .tape-v{color:var(--sable)}
.tape-row .won{position:relative}
.tape-row .won::after{content:"";position:absolute;left:50%;top:-14px;width:8px;height:8px;margin-left:-4px;background:var(--sable);transform:rotate(45deg) scale(0);transition:transform .5s var(--settle) .2s}
.tape-row.struck .won::after,.no-motion .tape-row .won::after{transform:rotate(45deg) scale(1)}
.tape-row .tape-v.won::after{display:none}
.tape-row[data-win="v"]::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:calc(1.35 / 3.35 * (100% - 2 * var(--s-5)));transform:translateX(-50%) scaleY(0);transform-origin:50% 0;background:rgba(12,12,13,.09);z-index:-1;transition:transform .7s var(--settle)}
.tape-row[data-win="v"].struck::before,.no-motion .tape-row[data-win="v"]::before{transform:translateX(-50%) scaleY(1)}
.verdict-bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s-6);max-width:1120px;margin:var(--s-7) auto var(--s-4);padding:var(--s-5) var(--s-6);background:var(--sable);color:var(--argent);clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px)}
.verdict-word{margin:0;font-family:var(--f-seal);font-size:40px;line-height:1;color:var(--gules);text-transform:lowercase}
.verdict-line{margin:0;font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:clamp(28px,3vw,44px);line-height:1;text-transform:uppercase}
.verdict-line b{font-weight:700;color:var(--argent)}
.bout .verdict-bar .btn-primary{background:var(--gules);color:var(--argent)}
.bout .verdict-bar .btn-primary::before{background:var(--argent)}
.bout .verdict-bar .btn-primary:hover{color:var(--sable)}
.bout .cmp-note{max-width:1120px;margin:var(--s-4) auto 0;text-align:center;color:rgba(12,12,13,.72)}
.cmp-note{margin-top:var(--s-3);font-size:14px;color:var(--ink-2)}

/* story */
.story-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:var(--s-9);align-items:center}
.story-print{transform:rotate(-1.4deg);max-width:520px}
.story-copy .label{margin-bottom:var(--s-5)}
.story-copy .h2{margin-bottom:var(--s-6)}
.story-copy .lead{margin-bottom:var(--s-5);max-width:40ch}
.story-copy .muted{margin-bottom:var(--s-6)}

/* relics */
.relics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-5)}
.relic{--ground:#efe9dd;min-width:0;display:flex;flex-direction:column;background:#efe9dd;box-shadow:0 1px 0 var(--parchment-2);transition:transform .6s var(--settle),box-shadow .6s}
.relic:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 24px 40px rgba(60,45,25,.16)}
.relic-art{position:relative;display:block;aspect-ratio:1.1;cursor:grab}
.relic-art img{position:absolute;left:12%;top:12%;width:76%;height:76%;object-fit:contain;transition:transform .8s var(--settle)}
.relic:hover .relic-art img{transform:scale(1.04) rotate(-2deg)}
.relic-body{padding:var(--s-5);border-top:1px solid var(--parchment-2);display:flex;flex-direction:column;flex:1}
.relic-body .h3{margin-bottom:var(--s-2)}
.relic-body p{color:var(--ink-2);font-size:16px}
.relic .alias{font-size:22px;margin:0}
.relic-buy{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);margin-top:auto;padding-top:var(--s-5)}
.relic-price{font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:30px}
.relic-price s{font-size:20px;color:var(--ink-2);margin-left:var(--s-2)}
.relic-buy .btn{min-height:44px;padding:0 var(--s-5);font-size:12px}
.relic-kit{grid-column:1/-1;flex-direction:row;background:var(--ink);color:var(--parchment)}
.relic-kit .relic-art{flex:0 0 38%;aspect-ratio:auto;min-height:340px;background:#efe9dd}
.relic-kit .relic-body{border-top:0;padding:var(--s-8) var(--s-7);justify-content:center;gap:var(--s-2)}
.relic-kit .relic-body > p{max-width:36ch;margin:0}
.relic-kit .relic-buy{margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid rgba(238,234,226,.14);justify-content:flex-start;gap:var(--s-6)}
.relic-kit .relic-buy .btn{min-height:52px;padding:0 var(--s-6);font-size:13px}
.relic-kit .label{color:var(--gules);margin-bottom:var(--s-4)}
.relic-kit .h3{font-size:clamp(40px,4vw,72px)}
.relic-kit p{color:#c9c3b6;font-size:19px;max-width:36ch}
.relic-kit .relic-price{font-size:56px}
.relic-kit .relic-price s{color:#8d877b}
.relic-kit .btn-primary{background:var(--parchment);color:var(--ink)}
.relic-kit .btn-primary::before{background:var(--gules)}
.relic-kit .btn-primary:hover{color:var(--parchment)}
.relic.dragging{opacity:.4}
.drag-ghost{position:fixed;z-index:240;width:140px;pointer-events:none;transform:translate(-50%,-50%) rotate(-6deg);filter:drop-shadow(0 20px 30px rgba(0,0,0,.35))}
.chest-drop{position:fixed;right:var(--gutter);bottom:var(--s-6);z-index:230;width:200px;padding:var(--s-4);background:var(--parchment);color:var(--ink);box-shadow:0 24px 60px rgba(0,0,0,.4);text-align:center;transform:translateY(160%);transition:transform .6s var(--stroke)}
.chest-drop.on{transform:none}
.chest-drop.hot{outline:3px solid var(--gules)}
.chest-drop img{width:120px;margin:0 auto var(--s-2)}

/* sworn for life */
.sworn-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-9);align-items:center;position:relative}
.sworn-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--sable)}
.sworn-list li{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:var(--s-5);row-gap:var(--s-2);align-items:start;padding:var(--s-5) 0;border-bottom:1px solid rgba(12,12,13,.25)}
.sworn-list .oath-mark{grid-row:1/3;width:64px;height:64px;color:var(--sable)}
.sworn-list .oath-mark svg{width:100%;height:100%}
.sworn-list [data-oath] svg [fill="var(--gules)"]{fill:var(--argent)}
.sworn-list span{font-size:18px;color:rgba(12,12,13,.8);max-width:46ch}
.sworn-seal{position:absolute;right:0;bottom:calc(var(--s-9) * -1);width:150px;transform:rotate(-12deg);filter:drop-shadow(0 14px 18px rgba(60,0,0,.45))}

/* ================= THE RAZOR ================= */
.buy{position:relative;min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(400px,500px);align-items:center;gap:var(--s-8);padding:calc(var(--s-9) + var(--s-2)) var(--gutter) var(--s-7)}
.buy-glow{position:absolute;inset:0;background:radial-gradient(42% 60% at 30% 50%,rgba(215,38,28,.2),rgba(92,14,10,.08) 45%,transparent 70%);pointer-events:none}
.buy-drag{position:absolute;left:var(--gutter);bottom:var(--s-6);margin:0;font-family:var(--f-label);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
.buy-panel{grid-column:2;position:relative;z-index:3}
.buy-h{font-size:clamp(52px,5.4vw,96px)}
.buy-sub{margin:var(--s-4) 0 var(--s-6);font-size:18px;line-height:1.5;color:#c9c6bf;max-width:40ch}
.buy-step{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 var(--s-3);padding:0;font-family:var(--f-display);font-stretch:62.5%;font-weight:600;font-size:21px;text-transform:uppercase;letter-spacing:.02em;width:100%}
.buy-step span{color:var(--gules)}
.arms{border:0;margin:0;padding:0;display:grid;gap:var(--s-2);min-width:0}
.arm{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:var(--s-4);row-gap:2px;align-items:center;padding:var(--s-3) var(--s-4) var(--s-3) var(--s-3);border:1px solid rgba(238,234,226,.16);cursor:pointer;transition:border-color .4s var(--settle),background .4s var(--settle),box-shadow .4s var(--settle)}
.arm:hover{border-color:rgba(238,234,226,.42)}
.arm input{position:absolute;opacity:0;pointer-events:none}
.arm img{grid-row:1/3;width:52px;height:52px;object-fit:contain;background:var(--parchment);padding:6px}
.arm-name{font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:22px;line-height:1.05;text-transform:uppercase}
.arm-note{grid-column:2;font-size:14px;line-height:1.35;color:var(--ash)}
.arm-price{grid-column:3;grid-row:1/3;font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:30px}
.arm:has(input:checked){border-color:var(--argent);background:rgba(238,234,226,.06);box-shadow:inset 4px 0 0 var(--gules)}
.arm:has(input:focus-visible){outline:2px solid var(--gules);outline-offset:3px}
.buy-cta{width:100%;margin-top:var(--s-5);min-height:62px;font-size:14px}

/* anatomy: armour opened, steel turned to ink */
.anatomy{position:relative;background:var(--sable)}
/* the inked page tears into the night below it, like every other paper edge */
.anatomy::after{content:"";position:absolute;left:0;right:0;bottom:-23px;height:24px;z-index:1;background:inherit;pointer-events:none;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'1440' height%3D'24' preserveAspectRatio%3D'none'%3E%3Cpath d%3D'M0 0 L0 13.3 L3 11.8 L6 12.6 L9 12.0 L12 12.6 L15 11.8 L18 12.2 L21 12.2 L24 12.8 L27 12.0 L30 12.9 L33 14.0 L36 14.7 L39 14.0 L42 15.2 L45 14.4 L48 14.6 L51 14.3 L54 12.6 L57 13.4 L60 11.7 L63 12.4 L66 13.0 L69 13.6 L72 14.1 L75 12.8 L78 13.0 L81 11.8 L84 13.3 L87 13.1 L90 13.2 L93 14.5 L96 15.6 L99 15.4 L102 16.3 L105 15.8 L108 16.9 L111 15.8 L114 16.6 L117 16.7 L120 15.5 L123 15.5 L126 15.4 L129 13.6 L132 13.5 L135 13.6 L138 12.3 L141 12.7 L144 12.2 L147 12.4 L150 13.0 L153 15.1 L156 14.9 L159 15.1 L162 15.7 L165 15.9 L168 15.1 L171 13.8 L174 14.4 L177 14.1 L180 14.1 L183 15.0 L186 14.4 L189 15.3 L192 15.1 L195 14.6 L198 14.0 L201 15.0 L204 16.2 L207 15.4 L210 14.1 L213 12.7 L216 13.0 L219 12.2 L222 12.6 L225 13.6 L228 13.1 L231 11.5 L234 12.1 L237 11.1 L240 10.6 L243 10.5 L246 10.4 L249 9.2 L252 10.2 L255 10.3 L258 11.0 L261 10.1 L264 9.5 L267 9.1 L270 8.4 L273 8.9 L276 8.7 L279 9.3 L282 8.8 L285 9.3 L288 10.3 L291 9.3 L294 8.3 L297 7.5 L300 7.6 L303 8.8 L306 9.3 L309 9.6 L312 9.4 L315 10.0 L318 9.5 L321 9.4 L324 9.8 L327 9.4 L330 9.8 L333 8.9 L336 9.0 L339 9.0 L342 9.4 L345 8.6 L348 8.5 L351 8.6 L354 8.5 L357 8.8 L360 8.7 L363 8.4 L366 8.5 L369 9.4 L372 8.5 L375 7.7 L378 7.4 L381 8.3 L384 7.7 L387 8.2 L390 8.7 L393 7.4 L396 7.7 L399 8.3 L402 10.0 L405 9.9 L408 11.0 L411 11.8 L414 11.4 L417 11.0 L420 10.6 L423 10.8 L426 11.2 L429 11.9 L432 12.5 L435 13.0 L438 12.2 L441 11.8 L444 12.1 L447 14.0 L450 14.2 L453 14.9 L456 13.8 L459 12.3 L462 13.0 L465 13.4 L468 14.0 L471 13.8 L474 14.3 L477 13.2 L480 12.7 L483 12.5 L486 13.1 L489 12.1 L492 12.5 L495 13.2 L498 11.6 L501 12.1 L504 13.0 L507 11.9 L510 13.2 L513 12.3 L516 12.2 L519 11.9 L522 13.1 L525 12.2 L528 14.2 L531 13.8 L534 14.1 L537 14.4 L540 13.1 L543 13.3 L546 15.3 L549 15.4 L552 14.9 L555 14.5 L558 14.3 L561 13.1 L564 13.1 L567 12.2 L570 13.5 L573 12.5 L576 12.9 L579 13.4 L582 14.5 L585 14.1 L588 14.4 L591 14.0 L594 14.5 L597 13.8 L600 14.6 L603 16.1 L606 15.9 L609 14.6 L612 15.0 L615 15.7 L618 15.9 L621 15.6 L624 16.1 L627 15.4 L630 15.5 L633 15.0 L636 16.0 L639 16.0 L642 15.4 L645 17.4 L648 16.6 L651 16.8 L654 16.2 L657 16.0 L660 14.9 L663 15.4 L666 15.1 L669 13.8 L672 13.2 L675 11.6 L678 11.7 L681 11.8 L684 10.4 L687 11.6 L690 12.0 L693 11.7 L696 10.2 L699 10.1 L702 10.7 L705 10.4 L708 10.1 L711 9.5 L714 8.6 L717 9.3 L720 9.1 L723 9.0 L726 8.0 L729 8.6 L732 8.0 L735 8.6 L738 8.7 L741 7.9 L744 8.2 L747 8.0 L750 8.2 L753 8.8 L756 10.0 L759 8.9 L762 9.1 L765 9.0 L768 9.5 L771 9.1 L774 8.8 L777 8.0 L780 6.9 L783 6.9 L786 7.2 L789 6.2 L792 5.6 L795 5.9 L798 4.6 L801 5.2 L804 5.2 L807 7.0 L810 7.3 L813 7.5 L816 6.9 L819 6.7 L822 8.0 L825 7.7 L828 7.6 L831 7.1 L834 5.7 L837 5.3 L840 6.5 L843 5.3 L846 6.0 L849 5.9 L852 6.9 L855 7.6 L858 6.7 L861 6.6 L864 7.1 L867 7.4 L870 7.3 L873 7.1 L876 7.9 L879 8.6 L882 9.4 L885 9.0 L888 8.4 L891 7.6 L894 8.2 L897 10.4 L900 10.8 L903 10.9 L906 8.3 L909 9.3 L912 8.5 L915 9.8 L918 9.4 L921 10.7 L924 9.6 L927 10.1 L930 10.2 L933 11.1 L936 10.1 L939 11.7 L942 10.7 L945 10.7 L948 10.4 L951 10.4 L954 11.3 L957 9.9 L960 9.0 L963 8.5 L966 7.2 L969 7.7 L972 8.8 L975 7.9 L978 8.5 L981 8.8 L984 9.7 L987 10.7 L990 10.2 L993 10.9 L996 10.6 L999 9.7 L1002 10.3 L1005 11.1 L1008 10.5 L1011 11.7 L1014 11.2 L1017 10.3 L1020 11.2 L1023 12.2 L1026 13.9 L1029 14.0 L1032 14.6 L1035 15.4 L1038 15.6 L1041 15.4 L1044 15.4 L1047 15.1 L1050 15.2 L1053 15.7 L1056 14.8 L1059 13.9 L1062 14.6 L1065 13.9 L1068 14.8 L1071 15.3 L1074 15.5 L1077 15.0 L1080 14.3 L1083 15.3 L1086 13.9 L1089 14.1 L1092 15.2 L1095 15.3 L1098 16.6 L1101 16.8 L1104 17.1 L1107 17.2 L1110 16.5 L1113 16.9 L1116 16.9 L1119 16.5 L1122 15.2 L1125 14.3 L1128 13.8 L1131 14.3 L1134 12.8 L1137 12.9 L1140 13.4 L1143 13.8 L1146 14.2 L1149 13.6 L1152 12.6 L1155 12.1 L1158 13.3 L1161 12.9 L1164 13.4 L1167 13.8 L1170 13.9 L1173 13.6 L1176 15.6 L1179 16.5 L1182 16.4 L1185 17.0 L1188 15.9 L1191 15.0 L1194 15.1 L1197 14.9 L1200 13.6 L1203 14.6 L1206 14.9 L1209 15.7 L1212 15.5 L1215 15.3 L1218 14.6 L1221 14.8 L1224 14.9 L1227 14.8 L1230 15.6 L1233 15.6 L1236 14.4 L1239 13.9 L1242 14.1 L1245 13.3 L1248 12.6 L1251 12.4 L1254 13.6 L1257 13.1 L1260 13.8 L1263 14.1 L1266 13.7 L1269 15.4 L1272 15.0 L1275 13.3 L1278 13.3 L1281 13.5 L1284 15.5 L1287 15.7 L1290 15.8 L1293 14.0 L1296 14.2 L1299 13.8 L1302 13.8 L1305 14.1 L1308 14.8 L1311 15.5 L1314 15.1 L1317 15.3 L1320 14.6 L1323 14.4 L1326 13.1 L1329 12.4 L1332 12.2 L1335 11.8 L1338 11.4 L1341 12.1 L1344 11.6 L1347 11.2 L1350 12.1 L1353 12.2 L1356 13.1 L1359 12.1 L1362 13.0 L1365 11.8 L1368 12.9 L1371 11.9 L1374 12.2 L1377 12.5 L1380 12.4 L1383 13.2 L1386 13.9 L1389 12.6 L1392 11.3 L1395 11.2 L1398 10.7 L1401 10.2 L1404 10.1 L1407 11.1 L1410 11.2 L1413 12.2 L1416 12.8 L1419 12.5 L1422 13.5 L1425 11.7 L1428 10.6 L1431 11.1 L1434 11.6 L1437 13.0 L1440 13.3 L1440 0 Z'%2F%3E%3C%2Fsvg%3E") -300px 0/1440px 24px repeat-x;mask:url("data:image/svg+xml,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'1440' height%3D'24' preserveAspectRatio%3D'none'%3E%3Cpath d%3D'M0 0 L0 13.3 L3 11.8 L6 12.6 L9 12.0 L12 12.6 L15 11.8 L18 12.2 L21 12.2 L24 12.8 L27 12.0 L30 12.9 L33 14.0 L36 14.7 L39 14.0 L42 15.2 L45 14.4 L48 14.6 L51 14.3 L54 12.6 L57 13.4 L60 11.7 L63 12.4 L66 13.0 L69 13.6 L72 14.1 L75 12.8 L78 13.0 L81 11.8 L84 13.3 L87 13.1 L90 13.2 L93 14.5 L96 15.6 L99 15.4 L102 16.3 L105 15.8 L108 16.9 L111 15.8 L114 16.6 L117 16.7 L120 15.5 L123 15.5 L126 15.4 L129 13.6 L132 13.5 L135 13.6 L138 12.3 L141 12.7 L144 12.2 L147 12.4 L150 13.0 L153 15.1 L156 14.9 L159 15.1 L162 15.7 L165 15.9 L168 15.1 L171 13.8 L174 14.4 L177 14.1 L180 14.1 L183 15.0 L186 14.4 L189 15.3 L192 15.1 L195 14.6 L198 14.0 L201 15.0 L204 16.2 L207 15.4 L210 14.1 L213 12.7 L216 13.0 L219 12.2 L222 12.6 L225 13.6 L228 13.1 L231 11.5 L234 12.1 L237 11.1 L240 10.6 L243 10.5 L246 10.4 L249 9.2 L252 10.2 L255 10.3 L258 11.0 L261 10.1 L264 9.5 L267 9.1 L270 8.4 L273 8.9 L276 8.7 L279 9.3 L282 8.8 L285 9.3 L288 10.3 L291 9.3 L294 8.3 L297 7.5 L300 7.6 L303 8.8 L306 9.3 L309 9.6 L312 9.4 L315 10.0 L318 9.5 L321 9.4 L324 9.8 L327 9.4 L330 9.8 L333 8.9 L336 9.0 L339 9.0 L342 9.4 L345 8.6 L348 8.5 L351 8.6 L354 8.5 L357 8.8 L360 8.7 L363 8.4 L366 8.5 L369 9.4 L372 8.5 L375 7.7 L378 7.4 L381 8.3 L384 7.7 L387 8.2 L390 8.7 L393 7.4 L396 7.7 L399 8.3 L402 10.0 L405 9.9 L408 11.0 L411 11.8 L414 11.4 L417 11.0 L420 10.6 L423 10.8 L426 11.2 L429 11.9 L432 12.5 L435 13.0 L438 12.2 L441 11.8 L444 12.1 L447 14.0 L450 14.2 L453 14.9 L456 13.8 L459 12.3 L462 13.0 L465 13.4 L468 14.0 L471 13.8 L474 14.3 L477 13.2 L480 12.7 L483 12.5 L486 13.1 L489 12.1 L492 12.5 L495 13.2 L498 11.6 L501 12.1 L504 13.0 L507 11.9 L510 13.2 L513 12.3 L516 12.2 L519 11.9 L522 13.1 L525 12.2 L528 14.2 L531 13.8 L534 14.1 L537 14.4 L540 13.1 L543 13.3 L546 15.3 L549 15.4 L552 14.9 L555 14.5 L558 14.3 L561 13.1 L564 13.1 L567 12.2 L570 13.5 L573 12.5 L576 12.9 L579 13.4 L582 14.5 L585 14.1 L588 14.4 L591 14.0 L594 14.5 L597 13.8 L600 14.6 L603 16.1 L606 15.9 L609 14.6 L612 15.0 L615 15.7 L618 15.9 L621 15.6 L624 16.1 L627 15.4 L630 15.5 L633 15.0 L636 16.0 L639 16.0 L642 15.4 L645 17.4 L648 16.6 L651 16.8 L654 16.2 L657 16.0 L660 14.9 L663 15.4 L666 15.1 L669 13.8 L672 13.2 L675 11.6 L678 11.7 L681 11.8 L684 10.4 L687 11.6 L690 12.0 L693 11.7 L696 10.2 L699 10.1 L702 10.7 L705 10.4 L708 10.1 L711 9.5 L714 8.6 L717 9.3 L720 9.1 L723 9.0 L726 8.0 L729 8.6 L732 8.0 L735 8.6 L738 8.7 L741 7.9 L744 8.2 L747 8.0 L750 8.2 L753 8.8 L756 10.0 L759 8.9 L762 9.1 L765 9.0 L768 9.5 L771 9.1 L774 8.8 L777 8.0 L780 6.9 L783 6.9 L786 7.2 L789 6.2 L792 5.6 L795 5.9 L798 4.6 L801 5.2 L804 5.2 L807 7.0 L810 7.3 L813 7.5 L816 6.9 L819 6.7 L822 8.0 L825 7.7 L828 7.6 L831 7.1 L834 5.7 L837 5.3 L840 6.5 L843 5.3 L846 6.0 L849 5.9 L852 6.9 L855 7.6 L858 6.7 L861 6.6 L864 7.1 L867 7.4 L870 7.3 L873 7.1 L876 7.9 L879 8.6 L882 9.4 L885 9.0 L888 8.4 L891 7.6 L894 8.2 L897 10.4 L900 10.8 L903 10.9 L906 8.3 L909 9.3 L912 8.5 L915 9.8 L918 9.4 L921 10.7 L924 9.6 L927 10.1 L930 10.2 L933 11.1 L936 10.1 L939 11.7 L942 10.7 L945 10.7 L948 10.4 L951 10.4 L954 11.3 L957 9.9 L960 9.0 L963 8.5 L966 7.2 L969 7.7 L972 8.8 L975 7.9 L978 8.5 L981 8.8 L984 9.7 L987 10.7 L990 10.2 L993 10.9 L996 10.6 L999 9.7 L1002 10.3 L1005 11.1 L1008 10.5 L1011 11.7 L1014 11.2 L1017 10.3 L1020 11.2 L1023 12.2 L1026 13.9 L1029 14.0 L1032 14.6 L1035 15.4 L1038 15.6 L1041 15.4 L1044 15.4 L1047 15.1 L1050 15.2 L1053 15.7 L1056 14.8 L1059 13.9 L1062 14.6 L1065 13.9 L1068 14.8 L1071 15.3 L1074 15.5 L1077 15.0 L1080 14.3 L1083 15.3 L1086 13.9 L1089 14.1 L1092 15.2 L1095 15.3 L1098 16.6 L1101 16.8 L1104 17.1 L1107 17.2 L1110 16.5 L1113 16.9 L1116 16.9 L1119 16.5 L1122 15.2 L1125 14.3 L1128 13.8 L1131 14.3 L1134 12.8 L1137 12.9 L1140 13.4 L1143 13.8 L1146 14.2 L1149 13.6 L1152 12.6 L1155 12.1 L1158 13.3 L1161 12.9 L1164 13.4 L1167 13.8 L1170 13.9 L1173 13.6 L1176 15.6 L1179 16.5 L1182 16.4 L1185 17.0 L1188 15.9 L1191 15.0 L1194 15.1 L1197 14.9 L1200 13.6 L1203 14.6 L1206 14.9 L1209 15.7 L1212 15.5 L1215 15.3 L1218 14.6 L1221 14.8 L1224 14.9 L1227 14.8 L1230 15.6 L1233 15.6 L1236 14.4 L1239 13.9 L1242 14.1 L1245 13.3 L1248 12.6 L1251 12.4 L1254 13.6 L1257 13.1 L1260 13.8 L1263 14.1 L1266 13.7 L1269 15.4 L1272 15.0 L1275 13.3 L1278 13.3 L1281 13.5 L1284 15.5 L1287 15.7 L1290 15.8 L1293 14.0 L1296 14.2 L1299 13.8 L1302 13.8 L1305 14.1 L1308 14.8 L1311 15.5 L1314 15.1 L1317 15.3 L1320 14.6 L1323 14.4 L1326 13.1 L1329 12.4 L1332 12.2 L1335 11.8 L1338 11.4 L1341 12.1 L1344 11.6 L1347 11.2 L1350 12.1 L1353 12.2 L1356 13.1 L1359 12.1 L1362 13.0 L1365 11.8 L1368 12.9 L1371 11.9 L1374 12.2 L1377 12.5 L1380 12.4 L1383 13.2 L1386 13.9 L1389 12.6 L1392 11.3 L1395 11.2 L1398 10.7 L1401 10.2 L1404 10.1 L1407 11.1 L1410 11.2 L1413 12.2 L1416 12.8 L1419 12.5 L1422 13.5 L1425 11.7 L1428 10.6 L1431 11.1 L1434 11.6 L1437 13.0 L1440 13.3 L1440 0 Z'%2F%3E%3C%2Fsvg%3E") -300px 0/1440px 24px repeat-x}
.anatomy-stage{position:relative;height:100vh;overflow:hidden}
.anatomy-copy{position:absolute;z-index:3;left:var(--gutter);top:50%;transform:translateY(-50%);width:min(440px,32vw)}
.anatomy-copy p{margin-top:var(--s-5);font-size:18px;line-height:1.55;color:#c9c6bf;transition:color .6s}
.anatomy-lines{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible;color:var(--argent);transition:color .6s}
.anatomy-lines line{stroke:currentColor;stroke-width:1}
.anatomy-lines circle{fill:var(--gules)}
.anatomy-labels{list-style:none;margin:0;padding:0;position:absolute;inset:0;z-index:3;pointer-events:none}
.anatomy-labels li{position:absolute;left:0;top:0;width:290px;opacity:0;will-change:transform}
.anatomy-labels b{display:block;font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:26px;line-height:1;text-transform:uppercase}
.anatomy-labels i{display:block;font-style:normal;font-size:22px;line-height:1.1;color:var(--gules);margin:2px 0 var(--s-2)}
.anatomy-labels span{display:block;font-size:15px;line-height:1.45;color:#c9c6bf;transition:color .6s}
.anatomy.inked{color:var(--ink)}
.anatomy.inked .anatomy-copy p,.anatomy.inked .anatomy-labels span{color:var(--ink-2)}
.anatomy.inked .anatomy-lines{color:var(--ink)}

/* in the hand: the gauntlet comes out of the dark; the chainmail runs edge to edge and fades into it */
.inhand{position:relative;padding:var(--section) var(--gutter) 0;overflow-x:clip}
.inhand-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-8);align-items:center}
.inhand-a{position:relative;margin:0}
.inhand-a::before{content:"";position:absolute;inset:15% 10% 10%;background:radial-gradient(50% 50% at 60% 50%,rgba(215,38,28,.28),transparent 70%);filter:blur(30px)}
.inhand-a img{position:relative;width:100%;height:auto;mix-blend-mode:lighten;-webkit-mask:radial-gradient(closest-side at 50% 50%,#000 58%,transparent 98%);mask:radial-gradient(closest-side at 50% 50%,#000 58%,transparent 98%)}
.inhand-copy .lead{margin-top:var(--s-6);color:#c9c6bf;max-width:40ch}
.inhand-band{position:relative;margin:calc(var(--s-8) * -1) calc(var(--gutter) * -1) 0;height:clamp(420px,62vw,820px);overflow:hidden;-webkit-mask:linear-gradient(180deg,transparent 0,#000 24%,#000 76%,transparent 100%);mask:linear-gradient(180deg,transparent 0,#000 24%,#000 76%,transparent 100%)}
.inhand-band img{position:absolute;left:0;top:-10%;width:100%;height:120%;object-fit:cover;object-position:50% 45%;will-change:transform}
.inhand-band::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(55% 50% at 12% 82%,rgba(12,12,13,.88),rgba(12,12,13,.5) 45%,transparent 75%)}
.inhand-band figcaption{position:absolute;z-index:1;left:0;right:0;bottom:16%;padding:0 var(--gutter);display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-2)}
.inhand-band figcaption .tag-n{color:var(--argent);margin:0;text-shadow:0 1px 12px rgba(0,0,0,.9)}
.inhand-band figcaption b{max-width:22ch;font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:clamp(28px,3vw,44px);line-height:1;text-transform:uppercase;text-shadow:0 2px 30px rgba(0,0,0,.8)}


/* first week */

/* specifications */
.specs-grid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:var(--s-9);align-items:start}
.specs-art{width:min(300px,70%);margin-top:var(--s-8)}
.ledger-list{margin:0;border-top:2px solid var(--ink)}
.ledger-list div{display:grid;grid-template-columns:auto minmax(var(--s-6),1fr) auto;align-items:baseline;gap:var(--s-3);padding:var(--s-4) 0;border-bottom:1px solid var(--parchment-2)}
.ledger-list div::after{content:"";grid-column:2;grid-row:1;border-bottom:2px dotted rgba(20,19,19,.3);transform:translateY(-.3em)}
.ledger-list dt{font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:22px;text-transform:uppercase}
.ledger-list dd{grid-column:3;margin:0;font-size:17px;text-align:right;color:var(--ink-2)}

/* questions */
.ask-h{margin-bottom:var(--s-9)}

/* the buy bar */
.buybar{position:fixed;left:50%;bottom:var(--s-5);z-index:90;display:flex;align-items:center;gap:var(--s-4);width:min(620px,calc(100% - 32px));padding:var(--s-2) var(--s-2) var(--s-2) var(--s-4);background:rgba(12,12,13,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(238,234,226,.16);transform:translate(-50%,160%);transition:transform .6s var(--stroke)}
.buybar.on{transform:translate(-50%,0)}
.buybar img{width:40px;height:auto}
.buybar div{min-width:0}
.buybar b{display:block;font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:20px;line-height:1.05;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buybar div span{display:block;font-size:13px;color:var(--ash)}
.buybar .btn{margin-left:auto;min-height:48px;padding:0 var(--s-5);flex:none}

/* ================= THE SHAVE ================= */
.sv-hero{position:relative;height:92vh;min-height:620px;overflow:hidden;background:radial-gradient(70% 70% at 70% 45%,#19171a 0%,var(--sable) 70%)}
.sv-hero-art{position:absolute;right:4vw;top:12vh;height:72vh;opacity:.95}
.sv-hero-art img{height:100%;width:auto}
.sv-hero-copy{position:absolute;left:var(--gutter);right:var(--gutter);bottom:var(--s-8);z-index:2}
.sv-hero-copy .lead{margin-top:var(--s-6);color:#d3d0c9}
.sv-book{display:grid;grid-template-columns:280px minmax(0,1fr);gap:var(--s-9);max-width:calc(var(--container) + var(--gutter) * 2);margin:0 auto;padding:var(--section) var(--gutter) var(--s-9)}
.sv-index-h{margin:0 0 var(--s-4);font-family:var(--f-label);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
.sv-index ol{list-style:none;margin:0;padding:0}
.sv-index a{display:flex;align-items:baseline;gap:var(--s-3);padding:var(--s-2) 0;font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:20px;text-transform:uppercase;color:var(--ash);transition:color .35s}
.sv-index a i{flex:none;width:34px;font-style:normal;color:inherit}
.sv-index a:hover{color:var(--argent)}
.sv-index a.on{color:var(--argent)}
.sv-index a.on i{color:var(--gules)}
.sv-ch:first-child .trainer{margin:var(--s-7) 0}
.trainer-plate{background:#efe9dd;color:var(--ink);border:2px solid #efe9dd;line-height:0}
.trainer-plate svg{width:100%;height:auto;display:block}
.trainer-ctl{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--s-6);align-items:center;margin-top:var(--s-5);padding:var(--s-5) var(--s-5);background:linear-gradient(180deg,#151416,#0e0e0f);box-shadow:inset 0 0 0 1px rgba(238,234,226,.12)}
.trainer-read{display:flex;align-items:center;gap:var(--s-4);min-width:0}
.trainer-read b{flex:none;font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:64px;line-height:.9;min-width:2.1ch;transition:color .3s}
.trainer-read span{font-size:17px;line-height:1.4;color:#c9c6bf}
.trainer:not(.good) .trainer-read b{color:var(--gules)}
.trainer-scale{position:relative;padding-top:26px}
/* 22° to 38° on a 10°–60° scale, inset by half the lozenge */
.trainer-zone{position:absolute;top:0;bottom:22px;left:calc(10px + (100% - 20px) * .24);width:calc((100% - 20px) * .32);border-left:1px solid rgba(238,234,226,.45);border-right:1px solid rgba(238,234,226,.45);background:linear-gradient(180deg,rgba(238,234,226,.1),rgba(238,234,226,.02));pointer-events:none}
.trainer-zone span{position:absolute;left:0;right:0;top:4px;text-align:center;font-family:var(--f-label);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--argent);white-space:nowrap}
.trainer-scale input.steel{position:relative;--groove:rgba(238,234,226,.2)}
.trainer-scale input.steel::-webkit-slider-runnable-track{background:var(--groove)}
.trainer-ends{display:flex;justify-content:space-between;font-family:var(--f-label);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ash)}
.sv-cmp-h{margin-bottom:var(--s-8)}
/* the cartridge tax: three sliders, two bars, what you keep */
.cost-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-9);align-items:end;margin-bottom:var(--s-8)}
.cost-lede{margin:0;font-size:19px;line-height:1.55;color:#c9c6bf;max-width:44ch}
.cost-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-9);align-items:start}
.cost-in{display:flex;flex-direction:column;gap:var(--s-8);padding:var(--s-6) 0 0}
.cost-q{display:grid;grid-template-columns:1fr auto;align-items:baseline;row-gap:var(--s-2)}
.cost-q label{font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:24px;line-height:1.1;text-transform:uppercase}
.cost-q > b{font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:36px;line-height:1;color:var(--argent)}
.cost-q input{grid-column:1/3}
.cost-out{position:relative;padding:var(--s-7);background:linear-gradient(180deg,#151416,#0e0e0f);box-shadow:inset 0 0 0 1px rgba(238,234,226,.12)}
.cost-cap,.keep-cap{margin:0 0 var(--s-4);font-family:var(--f-label);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ash)}
.tally-row{display:grid;grid-template-columns:7.5rem minmax(0,1fr) 5.5rem;align-items:center;gap:var(--s-4);padding:var(--s-3) 0}
.tally-name{font-size:16px;color:#c9c6bf}
.tally-row b{justify-self:end;font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:34px;line-height:1;color:var(--gules)}
.tally-row.us b{color:var(--argent)}
.tally-bar{height:22px;background:rgba(238,234,226,.05)}
/* engraved bars: hatched like the woodcuts */
.tally-bar i{display:block;height:100%;width:0;background:repeating-linear-gradient(-55deg,rgba(0,0,0,.28) 0 2px,transparent 2px 6px),linear-gradient(180deg,#e2401f,#a3180f)}
.tally-row.us .tally-bar i{background:repeating-linear-gradient(-55deg,rgba(0,0,0,.22) 0 2px,transparent 2px 6px),linear-gradient(180deg,#fbfbfa,#9a9da3)}
.keep{margin-top:var(--s-7);padding-top:var(--s-6);border-top:1px solid rgba(238,234,226,.14)}
.keep-cap{margin-bottom:var(--s-2)}
.keep-sum{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--s-2) var(--s-4);margin:0}
.keep-sum b{font-family:var(--f-display);font-stretch:62.5%;font-weight:600;font-size:clamp(84px,9vw,140px);line-height:.82;color:var(--argent)}
.keep-sum span{font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:28px;text-transform:uppercase;color:#c9c6bf}
.keep-facts{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5);margin:var(--s-6) 0 0}
.keep-facts div{padding-top:var(--s-4);border-top:1px solid rgba(238,234,226,.14)}
.keep-facts dt{font-size:15px;color:#c9c6bf}
.keep-facts dd{margin:var(--s-2) 0 0;font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:32px;line-height:1;text-transform:uppercase;color:var(--argent)}
.sv-claim-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-8);align-items:center}
.sv-claim .lead{color:rgba(12,12,13,.85);max-width:34ch}
.sv-claim-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-6);margin-top:var(--s-6)}
.sv-claim .btn-primary{background:var(--sable);color:var(--argent)}
.sv-claim .btn-primary::before{background:var(--argent)}
.sv-claim .btn-primary:hover{color:var(--sable)}
@media (max-width:1100px){
  .sv-book{grid-template-columns:1fr;gap:0;padding-top:var(--s-8)}
  .sv-index{position:sticky;top:64px;z-index:10;margin:0 calc(var(--gutter) * -1) var(--s-7);padding:var(--s-3) var(--gutter);background:var(--sable);border:0;border-bottom:1px solid rgba(238,234,226,.16)}
  .sv-index-h{display:none}
  .sv-index li{display:none}
  .sv-index li:has(a.on),.sv-index.open li{display:block}
  .sv-index:not(.open) li:has(a.on) a::after{content:"";width:8px;height:8px;margin-left:auto;border-right:1.5px solid;border-bottom:1.5px solid;transform:translateY(-3px) rotate(45deg)}
  .cost-grid,.cost-head,.sv-claim-grid{grid-template-columns:1fr;gap:var(--s-7)}
}
@media (max-width:720px){
  .sv-hero-art{right:-20vw;top:10vh;height:56vh;opacity:.7}
  .sv-hero-copy{bottom:var(--s-6)}
          .trainer-ctl{grid-template-columns:1fr;gap:var(--s-3);padding:var(--s-4)}
  .trainer-read b{font-size:52px}
  .trainer-read span{font-size:15px}
  .cost-out{padding:var(--s-5)}
  }

/* ================= ACCESSORIES (the armoury) ================= */
/* accessories: hung on the armoury wall, one steel rod, four tags */
.ar-hero{position:relative;padding:calc(var(--s-10) + var(--s-6)) var(--gutter) var(--s-8)}
.ar-hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--s-8);align-items:end}
.ar-hero .lead{margin:0 0 var(--s-6);color:#d3d0c9;max-width:40ch}
.ar-index{list-style:none;margin:0;padding:0;border-top:1px solid rgba(238,234,226,.16)}
.ar-index a{display:flex;align-items:baseline;gap:var(--s-4);padding:var(--s-3) 0;border-bottom:1px solid rgba(238,234,226,.16);font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:22px;text-transform:uppercase;color:#c9c6bf;transition:color .35s,padding .5s var(--settle)}
.ar-index a i{font-style:normal;font-family:var(--f-label);font-size:12px;letter-spacing:.1em;color:var(--ash);width:2.4em}
.ar-index a:hover{color:var(--argent);padding-left:var(--s-3)}
.ar-index a:hover i{color:var(--gules)}
.ar-rack{padding:var(--s-6) var(--gutter) var(--section);overflow-x:clip}
.rack{--gap:clamp(16px,2vw,28px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-9) var(--gap);align-items:stretch;padding-top:34px}
.tag{position:relative;display:flex;flex-direction:column}
/* the rod does not move: each tag carries a length of it, and the lengths meet in the gaps into one bar */
.tag::before{content:"";position:absolute;z-index:2;left:calc(var(--gap) / -2 - 1px);right:calc(var(--gap) / -2 - 1px);top:-30px;height:9px;background:linear-gradient(180deg,#f2f3f5 0%,#b9bcc1 30%,#6d7076 60%,#2b2d31 100%);box-shadow:0 8px 10px -4px rgba(0,0,0,.6)}
.tag:first-child::before{left:-8px;border-radius:5px 0 0 5px}
.tag:last-child::before{right:-8px;border-radius:0 5px 5px 0}
/* the card hangs from two rings and swings on them */
.tag-card{position:relative;flex:1;display:flex;flex-direction:column;transform-origin:50% -26px;box-shadow:0 30px 60px rgba(0,0,0,.45)}
.tag-card::before,.tag-card::after{content:"";position:absolute;z-index:3;top:-33px;width:14px;height:42px;margin-left:-7px;border:2px solid #b9bcc1;border-radius:7px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.4)}
.tag-card::before{left:18%}.tag-card::after{left:82%}
.tag-plate{position:relative;aspect-ratio:1;background:var(--parchment);border-bottom:1px solid var(--parchment-2);overflow:hidden}
.tag-plate img{position:absolute;left:14%;top:14%;width:72%;height:72%;object-fit:contain;transition:transform 1s var(--settle)}
.tag-body{flex:1;display:flex;flex-direction:column;padding:var(--s-5);background:var(--parchment)}
.tag-n{margin:0 0 var(--s-3);font-family:var(--f-label);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.tag-name{margin:0;font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:clamp(26px,2.2vw,34px);line-height:1;text-transform:uppercase}
.tag-alias{margin:var(--s-2) 0 var(--s-4);font-family:var(--f-seal);font-size:24px;line-height:1;color:var(--gules)}
.tag-desc{margin:0 0 var(--s-5);font-size:16px;line-height:1.5;color:var(--ink-2)}
.tag-buy{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-top:auto;padding-top:var(--s-4);border-top:1px solid var(--parchment-2)}
.tag-price{font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:34px;line-height:1}
.tag .btn{min-height:46px;padding:0 var(--s-4);font-size:12px}
.tag:hover .tag-plate img{transform:scale(1.05) rotate(-2deg)}
@keyframes tagSwing{0%{transform:rotate(0)}25%{transform:rotate(1.4deg)}55%{transform:rotate(-.9deg)}80%{transform:rotate(.4deg)}100%{transform:rotate(0)}}
.tag-card.swing{animation:tagSwing 1.4s var(--settle)}
/* the kit */
.ar-kit{padding:var(--section) var(--gutter)}
.ar-kit-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-9);align-items:center}
.ar-kit-art{margin:0;display:grid;place-items:center;padding:var(--s-6);outline:1px solid rgba(20,19,19,.2);outline-offset:-14px}
.ar-kit-art img{width:100%;max-width:520px}
.ar-kit-copy .lead{margin:var(--s-5) 0 var(--s-6);color:var(--ink-2);max-width:38ch}
.ar-kit-list{list-style:none;margin:0 0 var(--s-6);padding:0;border-top:2px solid var(--ink)}
.ar-kit-list li{display:grid;grid-template-columns:auto minmax(var(--s-5),1fr) auto;align-items:baseline;gap:var(--s-3);padding:var(--s-3) 0;border-bottom:1px solid var(--parchment-2);font-size:17px}
.ar-kit-list li::after{content:"";grid-column:2;grid-row:1;border-bottom:2px dotted rgba(20,19,19,.3);transform:translateY(-.3em)}
.ar-kit-list s{grid-column:3;color:var(--ink-2)}
.ar-kit-buy{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);flex-wrap:wrap}
.ar-kit-price{display:flex;align-items:baseline;gap:var(--s-3);margin:0}
.ar-kit-price b{font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:56px;line-height:1}
.ar-kit-price span{font-size:16px;color:var(--ink-2)}
.ar-close-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--s-8);align-items:end}
.ar-close .lead{color:rgba(12,12,13,.85);margin-bottom:var(--s-5)}
@media (max-width:1100px){
  .rack{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:calc(var(--s-9) + 10px)}
  .tag:nth-child(odd)::before{left:-8px;border-radius:5px 0 0 5px}.tag:nth-child(even)::before{right:-8px;border-radius:0 5px 5px 0}
  .ar-hero-grid,.ar-kit-grid,.ar-close-grid{grid-template-columns:1fr;gap:var(--s-7)}
}
@media (max-width:720px){
  .ar-hero{padding:calc(var(--s-10) + var(--s-3)) var(--gutter) var(--s-6)}
  .rack{grid-template-columns:1fr;row-gap:calc(var(--s-8) + 30px)}
  .tag-plate{aspect-ratio:1.4}
  .tag::before,.tag:first-child::before,.tag:last-child::before{left:-8px;right:-8px;border-radius:5px}
  .ar-kit-price b{font-size:48px}
  .ar-kit-buy .btn{width:100%}
}

/* ================= OUR STORY (the order) ================= */
.or-hero{position:relative;height:100vh;min-height:640px;overflow:hidden;background:radial-gradient(70% 70% at 62% 40%,#1a1718 0%,var(--sable) 70%)}
.or-hero-art{position:absolute;margin:0;right:3vw;top:10vh;height:80vh;will-change:transform}
.or-hero-art img{height:100%;width:auto}
.or-hero-copy{position:absolute;left:var(--gutter);bottom:var(--s-8);z-index:2}
.or-story-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s-9);align-items:start}
.or-drop{margin:0;font-family:var(--f-display);font-weight:300;font-size:clamp(28px,2.7vw,44px);line-height:1.35;color:var(--argent)}
.or-drop::first-letter{float:left;margin:.06em .1em 0 0;font-family:var(--f-seal);font-size:3.4em;line-height:.8;color:var(--gules)}
.or-story-side .lead{margin-bottom:var(--s-6)}
.or-story-side p:not(.lead){color:#c9c6bf;max-width:46ch}
.or-creed{padding:calc(var(--section) * 1.1) var(--gutter)}
/* the creed: centred, caps and fraktur on the same line at the same height, an even measure between lines */
.creed{max-width:var(--container);margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1vw,16px);text-align:center}
.creed .crl{display:flex;justify-content:center;align-items:baseline;flex-wrap:wrap;gap:0 .3em;font-size:clamp(46px,7.2vw,124px);line-height:.95}
.creed span{display:inline-block}
.creed .big{font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:1em;text-transform:uppercase;line-height:.95}
.creed .fr{font-family:var(--f-seal);font-size:.92em;line-height:1;color:var(--gules)}
.creed-sign{display:flex;justify-content:center;align-items:baseline;gap:0 .3em;margin:clamp(28px,4vw,56px) auto 0;font-size:clamp(30px,3.4vw,54px);line-height:1}
.creed-sign .fr{font-family:var(--f-seal);font-size:.95em;color:var(--ink)}
.creed-sign .big{font-family:var(--f-display);font-stretch:62.5%;font-weight:600;text-transform:uppercase;color:var(--gules)}
.creed-sign i{align-self:center;flex:0 1 clamp(28px,8vw,120px);height:2px;margin:0 .5em;background:var(--ink)}
.creed-sign span{white-space:nowrap}
.or-ref-h{margin-bottom:var(--s-9)}
.refusals{list-style:none;margin:0;padding:0;border-top:1px solid rgba(238,234,226,.25)}
.refusals li{display:grid;grid-template-columns:minmax(80px,180px) minmax(0,1fr);gap:var(--s-7);align-items:baseline;padding:var(--s-6) 0;border-bottom:1px solid rgba(238,234,226,.14)}
.ref-n{font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:clamp(64px,7vw,120px);line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(238,234,226,.45);transition:color .5s,-webkit-text-stroke-color .5s}
.refusals li:hover .ref-n{color:var(--gules);-webkit-text-stroke-color:var(--gules)}
.refusals .h3{margin-bottom:var(--s-3)}
.refusals p{margin:0;color:#c9c6bf;font-size:18px;max-width:56ch}
.or-mark{position:relative;padding:var(--s-8) var(--gutter) var(--section);overflow-x:clip}
.or-mark-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--s-8);align-items:center}
/* the breastplate stands in the dark, not in a box: its edges fall away into the night, a gules glow behind it */
.or-plate{position:relative;margin:0 0 0 calc(var(--gutter) * -1)}
.or-plate::before{content:"";position:absolute;inset:8% 12%;background:radial-gradient(50% 50% at 55% 60%,rgba(215,38,28,.32),transparent 70%);filter:blur(30px);z-index:0}
.or-plate img{position:relative;z-index:1;width:100%;height:auto;mix-blend-mode:lighten;-webkit-mask:radial-gradient(closest-side at 50% 50%,#000 64%,transparent 98%);mask:radial-gradient(closest-side at 50% 50%,#000 64%,transparent 98%);will-change:transform}
.or-mark-copy .lead{margin:var(--s-6) 0 var(--s-5)}
.or-mark-copy p:not(.lead){color:#c9c6bf;max-width:46ch}
.or-oath-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-9);align-items:center}
.or-oath-seal{width:clamp(160px,18vw,260px);transform:rotate(-12deg);mix-blend-mode:multiply}
.or-oath-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-6);margin-top:var(--s-7)}
.or-oath .btn-primary{background:var(--sable);color:var(--argent)}
.or-oath .btn-primary::before{background:var(--argent)}
.or-oath .btn-primary:hover{color:var(--sable)}
@media (max-width:1100px){ .or-story-grid,.or-mark-grid{grid-template-columns:1fr;gap:var(--s-5)} .or-plate{margin:0 calc(var(--gutter) * -1)} }
@media (max-width:720px){
  .or-hero-art{right:-30vw;top:8vh;height:60vh;opacity:.75}
  .refusals li{grid-template-columns:56px minmax(0,1fr);gap:var(--s-4)}
  .or-oath-grid{grid-template-columns:1fr;gap:var(--s-6)}
}

/* ================= QUESTIONS ================= */
.qa-hero{position:relative;padding:calc(var(--s-10) + var(--s-6)) var(--gutter) var(--s-8);overflow:hidden}
.qa-hero .wrap{position:relative;z-index:2}
.qa-hero-art{position:absolute;right:6vw;bottom:0;height:88%;pointer-events:none}
.qa-hero-art img{height:100%;width:auto}
.qa-hero .lead{margin-top:var(--s-6);max-width:44ch;color:#d3d0c9}
.qa-book{display:grid;grid-template-columns:260px minmax(0,1fr);gap:var(--s-9);max-width:calc(var(--container) + var(--gutter) * 2);margin:0 auto;padding:var(--s-6) var(--gutter) var(--section)}
.qa-index{position:sticky;top:120px;align-self:start}
.qa-index ol{list-style:none;margin:0;padding:0;border-left:1px solid rgba(238,234,226,.2)}
.qa-index a{display:block;padding:var(--s-2) 0 var(--s-2) var(--s-5);margin-left:-1px;border-left:2px solid transparent;font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:21px;text-transform:uppercase;color:var(--ash);transition:color .35s,border-color .35s}
.qa-index a:hover{color:var(--argent)}
.qa-index a.on{color:var(--argent);border-left-color:var(--gules)}
.qa-group{padding:0 0 var(--s-9);margin-bottom:var(--s-8);border-bottom:1px solid rgba(238,234,226,.14)}
.qa-group:last-child{border-bottom:0;margin-bottom:0}
.qa-head{display:flex;align-items:center;gap:var(--s-6);margin-bottom:var(--s-6)}
.qa-head .h2{margin:0}
.qa-plate{position:relative;flex:none;width:clamp(110px,11vw,150px);aspect-ratio:1;margin:0;background:var(--parchment);box-shadow:0 20px 40px rgba(0,0,0,.4);outline:1px solid rgba(20,19,19,.18);outline-offset:-8px}
.qa-plate img{position:absolute;left:12%;top:12%;width:76%;height:76%;object-fit:contain}
.qa{margin:0;border-top:1px solid rgba(238,234,226,.18)}
.qa > div{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--s-6);padding:var(--s-5) 0;border-bottom:1px solid rgba(238,234,226,.1);transition:background .4s}
.qa > div:hover dt{color:var(--argent)}
.qa > div:hover dt::before{transform:rotate(45deg) scale(1)}
.qa dt{position:relative;padding-left:var(--s-5);font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:25px;line-height:1.08;text-transform:uppercase;color:#dcd9d2;transition:color .3s}
.qa dt::before{content:"";position:absolute;left:0;top:.42em;width:8px;height:8px;background:var(--gules);transform:rotate(45deg) scale(.55);transition:transform .4s var(--settle)}
.qa dd{margin:0;font-size:17px;line-height:1.6;color:#c9c6bf}
@media (max-width:1100px){
  .qa-book{grid-template-columns:1fr;gap:0}
  .qa-index{position:sticky;top:0;transition:top .5s var(--stroke);z-index:10;margin:0 calc(var(--gutter) * -1) var(--s-7);padding:var(--s-3) var(--gutter);background:var(--sable);border-bottom:1px solid rgba(238,234,226,.16);overflow-x:auto;scrollbar-width:none}
  .qa-index ol{display:flex;gap:var(--s-5);border:0;white-space:nowrap}
  .qa-index a{padding:var(--s-2) 0;border:0;border-bottom:2px solid transparent;margin:0;font-size:18px}
  .qa-index a.on{border-bottom-color:var(--gules)}
}
@media (max-width:720px){ .qa > div{grid-template-columns:1fr;gap:var(--s-2)} .qa dt{font-size:22px} .qa-hero{padding-bottom:var(--s-5)} .qa-hero-art{right:-18vw;height:70%;opacity:.45} .qa-plate{width:84px} .qa-head{gap:var(--s-4)} }
@media (max-width:1100px){ body:has(.hdr:not(.hide)) .qa-index{top:76px} }

/* ================= THE RITE (checkout) ================= */
.rite{min-height:100vh;background:var(--sable)}
.rite-top{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:auto auto;justify-content:space-between;align-items:center;gap:var(--s-5);height:76px;padding:0 var(--gutter);background:var(--sable);border-bottom:1px solid rgba(238,234,226,.1)}
.rite-mark{justify-self:start;display:flex;align-items:center;gap:var(--s-3);color:var(--argent)}
.rite-mark svg{width:100%;height:auto;display:block}
.rite-chest{justify-self:end;font-family:var(--f-label);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);border-bottom:1px solid currentColor;padding-bottom:2px}
.rite-chest:hover{color:var(--argent)}
.rite-fold{display:none}
.rite-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,440px);min-height:calc(100vh - 76px)}
.rite-stage{position:relative;display:flex;flex-direction:column;justify-content:flex-start;padding:var(--s-7) var(--gutter) var(--s-8);max-width:1040px}
/* the road: a knight rides from stop to stop */
.road{position:relative;height:92px;margin:0 var(--s-6) var(--s-9) var(--s-7)}
.road-track{position:absolute;left:0;right:0;top:56px;height:2px;background:repeating-linear-gradient(90deg,rgba(238,234,226,.35) 0 6px,transparent 6px 12px)}
.road-track i{position:absolute;left:0;top:-1px;height:4px;width:0;background:var(--gules);transition:width 1.1s var(--stroke)}
.road-stops{list-style:none;margin:0;padding:0}
.road-stops li{position:absolute;top:50px;left:calc(var(--at) * 100%);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:var(--s-3);color:var(--ash);transition:color .4s}
.road-pin{width:14px;height:14px;transform:rotate(45deg);border:1.5px solid currentColor;background:var(--sable);transition:background .4s,border-color .4s}
.road-stops b{font-family:var(--f-label);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.road-stops li.done{color:var(--argent);cursor:pointer}
.road-stops li.done .road-pin{background:var(--gules);border-color:var(--gules)}
.road-stops li.on{color:var(--argent)}
.road-stops li.on .road-pin{background:var(--argent);border-color:var(--argent)}
.road-rider{position:absolute;left:0;top:0;height:50px;width:auto;filter:invert(.92);transform:translateX(-58%);pointer-events:none}
.road-rider.riding{animation:gallop .28s ease-in-out infinite}
@keyframes gallop{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -4px;rotate:-2deg}}
/* the cut between steps */
.cut{position:absolute;left:0;right:0;top:46%;height:2px;background:linear-gradient(90deg,transparent,var(--gules) 20%,#ff6a4d 50%,var(--gules) 80%,transparent);transform-origin:left center;transform:scaleX(0) rotate(-8deg);opacity:0;pointer-events:none;z-index:5;box-shadow:0 0 18px rgba(215,38,28,.7)}
.rite-step{display:none}
.rite-step.on{display:block}
.rite-h{margin:0 0 var(--s-7);font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:clamp(56px,7vw,120px);line-height:.88;text-transform:uppercase}
.rite-h .q-new{color:var(--gules)}
.rite-sub{margin:calc(var(--s-5) * -1) 0 var(--s-7);max-width:52ch;font-size:19px;line-height:1.5;color:#c9c6bf}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6) var(--s-5);max-width:760px}
.fld{position:relative;display:flex;flex-direction:column;gap:var(--s-2)}
.fld::after{content:"";position:absolute;right:2px;bottom:19px;width:16px;height:16px;transform:rotate(45deg) scale(0);background:var(--gules) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.5l2.5 2 4.5-5' fill='none' stroke='%23eeeae2' stroke-width='1.8' transform='rotate(-45 8 8)'/%3E%3C/svg%3E") center/100%;transition:transform .45s var(--settle);pointer-events:none}
.fld:has(input:valid:not(:placeholder-shown))::after,.fld:has(select:valid)::after{transform:rotate(45deg) scale(1)}
.fld:has(select)::after{right:30px}
.fld input,.fld select{padding-right:var(--s-6) !important}
.fld-wide{grid-column:1/-1}
.fld > span{font-family:var(--f-label);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
.fld > span em{font-style:normal;letter-spacing:.06em;text-transform:none;color:rgba(158,153,145,.75);margin-left:var(--s-2)}
.fld input,.fld select{width:100%;height:56px;padding:0 var(--s-1);font-family:var(--f-display);font-weight:400;font-size:26px;color:var(--argent);background:transparent;border:0;border-bottom:1.5px solid rgba(238,234,226,.35);border-radius:0;transition:border-color .3s}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--argent)}
.fld .bad{border-color:var(--gules)}
.fld select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:var(--s-6);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0h12L6 8z' fill='%23d7261c'/%3E%3C/svg%3E") no-repeat right var(--s-2) center/12px}
.fld select option{color:#141313}
.letter{position:relative;max-width:660px;margin-top:var(--s-2);padding:var(--s-7) var(--s-7) var(--s-6);color:var(--ink);background:var(--parchment);box-shadow:0 30px 70px rgba(0,0,0,.5);transform:rotate(-.6deg);-webkit-mask:linear-gradient(#000,#000) center/100% calc(100% - 20px) no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='12' preserveAspectRatio='none'%3E%3Cpath d='M0 12V6L5 2 10 7 16 1 22 6 27 3 33 8 39 2 45 6 51 1 56 5 60 3V12Z'/%3E%3C/svg%3E") bottom/60px 12px repeat-x,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='12' preserveAspectRatio='none'%3E%3Cpath d='M0 0V6L6 10 11 5 17 11 23 6 28 9 34 4 40 10 46 6 52 11 57 7 60 9V0Z'/%3E%3C/svg%3E") top/60px 12px repeat-x;mask:linear-gradient(#000,#000) center/100% calc(100% - 20px) no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='12' preserveAspectRatio='none'%3E%3Cpath d='M0 12V6L5 2 10 7 16 1 22 6 27 3 33 8 39 2 45 6 51 1 56 5 60 3V12Z'/%3E%3C/svg%3E") bottom/60px 12px repeat-x,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='12' preserveAspectRatio='none'%3E%3Cpath d='M0 0V6L6 10 11 5 17 11 23 6 28 9 34 4 40 10 46 6 52 11 57 7 60 9V0Z'/%3E%3C/svg%3E") top/60px 12px repeat-x}
.letter-h{margin:0 0 var(--s-5);font-family:var(--f-display);font-style:italic;font-weight:300;font-size:22px;color:var(--ink-2)}
.letter .review{border-top-color:var(--ink)}
.letter .review div{border-bottom-color:rgba(20,19,19,.14)}
.letter .review dt{color:var(--ink-2)}
.letter .review dd{color:var(--ink)}
.letter .seal-wrap{margin:var(--s-6) auto 0}
.letter .seal-ring circle{stroke:rgba(20,19,19,.15)}
.letter .seal-hint{color:var(--ink-2)}
.letter-stamp{position:absolute;right:var(--s-7);bottom:var(--s-6);width:150px;opacity:0;pointer-events:none;filter:drop-shadow(0 8px 10px rgba(60,20,10,.35))}
.review{margin:0 0 var(--s-2);max-width:640px;border-top:1px solid rgba(238,234,226,.2)}
.review div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:var(--s-4);padding:var(--s-3) 0;border-bottom:1px solid rgba(238,234,226,.12)}
.review dt{font-family:var(--f-label);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);padding-top:5px}
.review dd{margin:0;font-size:19px;color:var(--argent)}
.review dd b{font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:30px}
.couriers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4);max-width:760px}
.courier{position:relative;display:flex;flex-direction:column;padding:var(--s-6);border:1px solid rgba(238,234,226,.18);cursor:pointer;transition:border-color .4s,background .4s,box-shadow .4s}
.courier:hover{border-color:rgba(238,234,226,.45)}
.courier:has(input:checked) img{animation:gallop .3s ease-in-out 4}
.courier input,.pay input{position:absolute;opacity:0;pointer-events:none}
.courier img{height:84px;width:auto;align-self:flex-start;margin-bottom:var(--s-5);filter:invert(.9)}
.courier-name{font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:34px;line-height:1;text-transform:uppercase}
.courier-what{margin-top:var(--s-2);font-size:15px;color:var(--ash)}
.courier-price{margin-top:var(--s-5);font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:30px}
.courier:has(input:checked),.pay:has(input:checked){border-color:var(--argent);background:rgba(238,234,226,.05);box-shadow:inset 0 4px 0 var(--gules)}
.courier:has(input:focus-visible),.pay:has(input:focus-visible){outline:2px solid var(--gules);outline-offset:3px}
.tribute{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.pay{position:relative;display:grid;place-items:center;min-height:60px;padding:0 var(--s-6);border:1px solid rgba(238,234,226,.18);cursor:pointer;font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:22px;text-transform:uppercase;transition:border-color .4s,background .4s,box-shadow .4s}
.pay:hover{border-color:rgba(238,234,226,.45)}
.pay-field{margin-top:var(--s-5);max-width:640px;padding:var(--s-5) var(--s-6);border:1px dashed rgba(238,234,226,.3)}
.pay-field p{margin:0;font-size:15px;line-height:1.5;color:var(--ash)}
.pay-field b{display:block;margin-bottom:var(--s-2);font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:20px;text-transform:uppercase;color:var(--argent)}
.seal-wrap{display:flex;flex-direction:column;align-items:center;gap:var(--s-4);width:fit-content;margin-top:var(--s-7)}
.seal-btn{position:relative;display:grid;place-items:center;width:200px;height:200px;border-radius:50%;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.seal-btn img{width:150px;filter:drop-shadow(0 14px 18px rgba(0,0,0,.5));transition:transform .35s var(--settle)}
.seal-btn.pressing img{transform:scale(.9) rotate(-4deg)}
.seal-btn.sealed img{transform:scale(1.06)}
.seal-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.seal-ring circle{fill:none;stroke:rgba(238,234,226,.16);stroke-width:2}
.seal-ring .seal-prog{stroke:var(--gules);stroke-width:4;stroke-dasharray:590.6;stroke-dashoffset:590.6}
.seal-hint{margin:0;font-family:var(--f-label);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
.rite-error{min-height:1.5em;margin:var(--s-5) 0 0;font-size:15px;color:#ff7465}
.rite-actions{display:flex;align-items:center;gap:var(--s-6);margin-top:var(--s-3)}
.rite-back{font-family:var(--f-label);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);border-bottom:1px solid currentColor;padding-bottom:2px}
.rite-back:hover{color:var(--argent)}
.rite-next{min-width:220px}
.ledger{position:sticky;top:76px;align-self:start;height:calc(100vh - 76px);overflow:auto;padding:var(--s-8) var(--s-7)}
.ledger-seal{width:110px;margin:var(--s-7) 0 0 auto;transform:rotate(-10deg);filter:drop-shadow(0 8px 10px rgba(60,20,10,.3))}
.ledger-h{margin:0 0 var(--s-6);font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:40px;line-height:1;text-transform:uppercase}
.ledger-lines{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.ledger-lines li{display:grid;grid-template-columns:auto minmax(var(--s-4),1fr) auto;align-items:baseline;gap:var(--s-2);padding:var(--s-4) 0;border-bottom:1px solid var(--parchment-2)}
.ledger-lines li::after{content:"";grid-column:2;grid-row:1;border-bottom:2px dotted rgba(20,19,19,.3);transform:translateY(-.3em)}
.lg-name{font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:21px;line-height:1.1;text-transform:uppercase}
.lg-name em{font-style:normal;color:var(--gules);margin-right:var(--s-2);white-space:nowrap}
.lg-price{grid-column:3;font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:22px}
.ledger-sums{margin:var(--s-5) 0 0}
.ledger-sums div{display:flex;justify-content:space-between;align-items:baseline;padding:var(--s-2) 0;font-size:17px}
.ledger-sums dt{color:var(--ink-2)}
.ledger-sums dd{margin:0}
.ledger-total{border-top:2px solid var(--ink);margin-top:var(--s-3);padding-top:var(--s-4) !important}
.ledger-total dt,.ledger-total dd{font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:34px;text-transform:uppercase;color:var(--ink) !important}
.ledger-note{margin:var(--s-6) 0 0;font-size:13px;line-height:1.5;color:var(--ink-2)}
.ledger-edit{display:none;margin-top:var(--s-4);font-family:var(--f-label);font-size:12px;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:2px}
.rite-empty{min-height:calc(100vh - 76px);display:grid;place-content:center;justify-items:center;gap:var(--s-4);padding:var(--gutter);text-align:center}
.rite-empty img{width:200px;filter:invert(.9);margin-bottom:var(--s-4)}
.rite-empty p{color:var(--ash)}
.rite.is-empty .rite-body,.rite.is-empty .rite-fold{display:none}
.rite.is-sworn .rite-body,.rite.is-sworn .rite-fold,.rite.is-sworn .rite-chest{display:none}
.accolade{position:relative;padding:var(--s-7) var(--gutter) var(--s-10);text-align:center}
.accolade > *:not(.embers-cv){position:relative;z-index:2}
.accolade-mark{position:relative;width:min(340px,70vw);aspect-ratio:1.2;margin:0 auto var(--s-4)}
.accolade-sub{max-width:44ch;margin:var(--s-5) auto var(--s-9);font-size:20px;line-height:1.5;color:#c9c6bf}
.accolade-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:var(--s-8);max-width:var(--container);margin:0 auto;text-align:left;align-items:center}
.cert{margin:0;transform:rotate(-1.2deg);box-shadow:0 30px 80px rgba(0,0,0,.55)}
.cert canvas{display:block;width:100%;height:auto}
.accolade-next ol{list-style:none;margin:0 0 var(--s-7);padding:0;border-top:1px solid rgba(238,234,226,.2)}
.accolade-next li{padding:var(--s-4) 0;border-bottom:1px solid rgba(238,234,226,.15);font-size:17px;color:#c9c6bf}
.accolade-next b{display:block;margin-bottom:var(--s-1);font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:22px;text-transform:uppercase;color:var(--argent)}
.accolade-ctas{display:flex;flex-wrap:wrap;gap:var(--s-3)}
@media (max-width:960px){
      .rite-fold{position:sticky;top:76px;z-index:15;display:flex;justify-content:space-between;align-items:center;width:100%;padding:var(--s-4) var(--gutter);background:var(--parchment);color:var(--ink);font-family:var(--f-label);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
  .rite-fold b{font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:22px;letter-spacing:0}
  .rite-fold::after{content:"";width:8px;height:8px;border-right:1.5px solid;border-bottom:1.5px solid;transform:rotate(45deg);margin-left:var(--s-3);transition:transform .3s}
  .rite-fold[aria-expanded="true"]::after{transform:rotate(225deg)}
  .rite-fold span{margin-right:auto}
  .rite-body{display:flex;flex-direction:column}
  .ledger{order:-1;position:static;height:auto;display:none;padding:var(--s-5) var(--gutter) var(--s-6)}
  .ledger.open{display:block}
  .ledger-h{display:none}
  .rite-stage{padding:var(--s-5) var(--gutter) var(--s-8);justify-content:flex-start}
  .road{height:84px;margin:0 var(--s-5) var(--s-7) 40px}
  .road-stops b{position:absolute;top:26px;left:50%;transform:translateX(-50%);opacity:0;transition:opacity .4s}
  .road-stops li.on b{opacity:1}
  .road-stops li:first-child b{left:-4px;transform:none}
  .road-stops li:last-child b{left:auto;right:-4px;transform:none}
  .road-rider{height:42px}
  .letter{padding:var(--s-6) var(--s-5) var(--s-6);transform:none}
  .letter-stamp{right:var(--s-4);width:110px}
  .rite-h{font-size:52px;margin-bottom:var(--s-5)}
  .rite-sub{margin-top:calc(var(--s-3) * -1);font-size:17px}
  .fields{grid-template-columns:1fr;gap:var(--s-5)}
  .fld input,.fld select{font-size:22px;height:50px}
  .review div{grid-template-columns:96px minmax(0,1fr);gap:var(--s-3)}
  .review dd{font-size:17px}
  .rite-chest{display:none}
  .ledger-edit{display:inline-block}
  .couriers{grid-template-columns:1fr}
  .courier{display:grid;grid-template-columns:auto 1fr;column-gap:var(--s-4);padding:var(--s-4)}
  .courier img{grid-row:1/4;height:56px;margin:0}
  .courier-name{font-size:26px}
  .courier-price{margin-top:var(--s-2);font-size:24px}
  .pay{flex:1 1 auto;padding:0 var(--s-4);font-size:19px}
  .seal-wrap{margin:var(--s-6) auto 0}
  .rite-actions{justify-content:space-between}
  .rite-next{min-width:0;flex:1}
  .accolade-grid{grid-template-columns:1fr;gap:var(--s-7)}
  .accolade-sub{margin-bottom:var(--s-7)}
}

/* ================= responsive ================= */
@media (max-width:1100px){
  .hero-foot{grid-template-columns:1fr}
  .hero-foot .hero-sub,.hero-foot .hero-trust{grid-row:auto;grid-column:auto}
  .vlist{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vlist li:nth-child(3){padding-left:0;border-left:0}
  .vlist li:nth-child(n+3){border-top:1px solid var(--parchment-2);margin-top:var(--s-5)}
  .relics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .story-grid,.sworn-grid{grid-template-columns:1fr;gap:var(--s-8)}
  .sworn-seal{display:none}
  .buy{grid-template-columns:minmax(0,1fr) minmax(360px,440px);gap:var(--s-6)}
  .specs-grid{grid-template-columns:1fr;gap:var(--s-8)}
}
@media (max-width:720px){
  .hero{min-height:640px}
  .hero-art{width:150vw;right:-40vw;top:16vh}
  .hero-copy{bottom:var(--s-6);gap:var(--s-5)}
  .hero-h{font-size:clamp(44px,13vw,84px)}
  .hero-sub{font-size:17px}
  .hero-ctas .btn{flex:1 1 auto}
  .hero-drag{display:none}
  .duel-stage{min-height:0;height:100svh;padding:var(--s-8) var(--gutter) var(--s-5);gap:var(--s-4);justify-content:flex-start}
  .duel-stage{gap:var(--s-3)}
  .duel-head{grid-template-columns:1fr}
  .duel-beast,.duel-knight{display:none}
  .duel-head .h2{font-size:34px}
  .duel-lede{font-size:15px;margin-top:var(--s-3)}
  .duel-field{grid-template-columns:1fr;gap:var(--s-3)}
  .duel-side figcaption{display:flex;align-items:center;gap:var(--s-3);min-height:0;margin-bottom:var(--s-2)}
  .duel-side figcaption b{font-size:21px;margin:0;white-space:nowrap}
  .duel-side figcaption span{display:none}
  .duel-mini{display:block;flex:none;height:34px;width:auto}
  .duel-svg{max-height:none;min-height:0}
  .duel-out{font-size:11px;letter-spacing:.03em;margin-top:var(--s-2)}
  .vlist{grid-template-columns:1fr}
  .vlist li,.vlist li + li{padding:var(--s-5) 0;border-left:0}
  .vlist li + li{border-top:1px solid var(--parchment-2)}
  .vlist li:nth-child(n+3){margin-top:0}
  .dial-stage{align-items:flex-end;padding-bottom:var(--s-7)}
  .dial-copy{width:100%}
  .dial-copy .h2,.dial-lede{display:none}
  .dial-now{gap:var(--s-4);margin:0 0 var(--s-5)}
  .dial-big{font-size:min(36vw,150px)}
  .dial-name{font-size:clamp(34px,10vw,46px)}
  .dial-desc{font-size:15px;min-height:4.4em;margin-bottom:var(--s-2)}
  .dial-mm b{font-size:24px}
  .dial-rail button{font-size:19px}
  .relics{grid-template-columns:minmax(0,1fr)}
  .relic-kit{flex-direction:column}
  .relic-kit .relic-art{flex:none;min-height:0;aspect-ratio:1.25}
  .relic-kit .relic-body{padding:var(--s-6) var(--s-5)}
  .relic-kit .relic-price{font-size:44px}
  .relic-kit .relic-buy{flex-wrap:wrap;gap:var(--s-4)}
  .relic-kit .relic-buy .btn{width:100%}
}
@media (max-width:720px) and (max-height:740px){ .duel-lede{display:none} }
@media (max-width:720px){
  .buy{display:block;padding:62vh var(--gutter) var(--s-8)}
  .buy-panel{background:var(--sable);margin:0 calc(var(--gutter) * -1);padding:var(--s-6) var(--gutter) 0;box-shadow:0 -60px 60px var(--sable)}
  .buy-drag{top:calc(62vh - var(--s-7));bottom:auto}
  .buy-h{font-size:56px}
  .buy-sub{font-size:17px;margin-bottom:var(--s-6)}
  .arm{grid-template-columns:44px minmax(0,1fr) auto;padding:var(--s-3)}
  .arm img{width:44px;height:44px}
  .arm-name{font-size:20px}
  .arm-price{font-size:26px}
  .anatomy-copy{top:var(--s-9);transform:none;width:auto;right:var(--gutter)}
  .anatomy-copy .h2{font-size:40px}
  .anatomy-copy p{display:none}
  .anatomy-labels li{width:132px}
  .anatomy-labels b{font-size:18px}
  .anatomy-labels i{font-size:17px;margin:0}
  .anatomy-labels span{display:none}
  .inhand-grid{grid-template-columns:1fr;gap:var(--s-4)}
  .inhand-a{margin:0 calc(var(--gutter) * -1)}
  .inhand-band{height:110vw;margin-top:0}
  .inhand-band figcaption{bottom:12%}
  .ledger-list dt{font-size:19px}
  .ledger-list dd{font-size:15px}
  .buybar{bottom:var(--s-3);gap:var(--s-3)}
  .buybar img,.buybar div span{display:none}
  .buybar b{font-size:16px;white-space:normal;line-height:1.05}
}

/* ================= revisions: tablet and phone ================= */
@media (max-width:1100px){
  .dial-copy{width:min(560px,56vw)}
}
@media (max-width:760px){
  /* hero: the razor up top, the knight a quiet watermark behind the words */
  .hero-art{width:160vw;right:-52vw;top:30vh;opacity:.5}
  .hero-h{font-size:clamp(46px,13.5vw,86px)}
  /* dial: steel above, readout below */
  .dial-stage{align-items:flex-end;padding:var(--s-8) var(--gutter) var(--s-5)}
  .dial-copy{width:100%;position:relative;z-index:3}
  .dial-stage{z-index:3}
  .dial-glow{display:none}
  .dial-copy::before{content:"";position:absolute;left:calc(var(--gutter) * -1);right:calc(var(--gutter) * -1);top:-90px;bottom:calc(var(--s-5) * -1);z-index:-1;background:linear-gradient(180deg,rgba(12,12,13,0),rgba(12,12,13,.92) 90px,var(--sable))}
  .dial-h,.dial-lede{display:none}
  /* tourney: the champion on top, the challengers beside each other; one card per round */
  .bout-card{grid-template-columns:1fr 1fr;gap:var(--s-5) var(--s-4);align-items:start}
  .bout-l1{display:block;font-size:clamp(120px,19vw,300px);letter-spacing:.01em}
  .bout-card{grid-template-rows:auto auto auto auto}
  .fighter:nth-child(2) > *{grid-column:1/3}.fighter:nth-child(2) > .fighter-art{grid-row:1}.fighter:nth-child(2) > figcaption{grid-row:2;margin-bottom:var(--s-5)}
  .fighter:nth-child(1) > *{grid-column:1}.fighter:nth-child(3) > *{grid-column:2}
  .fighter:nth-child(1) > .fighter-art,.fighter:nth-child(3) > .fighter-art{grid-row:3}
  .fighter:nth-child(1) > figcaption,.fighter:nth-child(3) > figcaption{grid-row:4}
  .fighter-what{white-space:normal}
  .fighter-art{height:110px}
  .f-champ .fighter-art{height:190px}
  .fighter-what{gap:var(--s-2);font-size:20px}
  .f-champ .fighter-what{font-size:26px}
  .kind{width:22px;height:22px}
      .fighter-note{font-size:13px}
  .score{grid-template-columns:1fr 1.2fr 1fr;font-size:11px;letter-spacing:.1em;top:var(--s-3)}
  .score span{gap:var(--s-2);padding:10px 0}
  .score b{font-size:24px}
  .tape-row{align-items:start;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;column-gap:var(--s-4);row-gap:var(--s-3);padding:var(--s-5) 0 var(--s-6)}
  .tape-r{position:static;grid-column:1/3;grid-row:1;justify-self:center;margin-bottom:-6px}
  .tape-q{grid-column:1/3;grid-row:2}
  .tape-v{grid-column:1/3;grid-row:3}
  .tape-c{grid-column:1;grid-row:4}.tape-e{grid-column:2;grid-row:4}
  .tape-row .tape-v{font-size:28px}
  .tape-row p{font-size:15px}
  .tape-c::before,.tape-e::before{content:attr(data-who);display:block;margin-bottom:4px;font-family:var(--f-label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
  .tape-row[data-win="v"]::before{width:100%}
  .tape-row .won::after{display:none}
  .tape-c.won::before,.tape-e.won::before{content:"\25C6\00a0" attr(data-who);opacity:1;color:var(--sable)}
  .verdict-bar{grid-template-columns:1fr;text-align:center;gap:var(--s-4);padding:var(--s-6) var(--s-5)}
}

/* ================= revisions: the shave guide ================= */
.sv-claim-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.sv-claim .display{font-size:clamp(56px,7.2vw,132px)}
@media (max-width:1100px){
  .sv-index{top:0;transition:top .5s var(--stroke)}
  body:has(.hdr:not(.hide)) .sv-index{top:76px}
}
@media (max-width:720px){
  .sv-hero-art{right:-14vw;top:8vh;height:48vh;opacity:.42}
  .sv-claim .display{font-size:clamp(52px,15vw,84px)}
  .sv-claim-grid{grid-template-columns:1fr;gap:var(--s-6)}
  .cost-out{padding:var(--s-6) var(--s-5)}
  .cost-head{margin-bottom:var(--s-6);gap:var(--s-4)}
  .cost-in{gap:var(--s-5)}
  .cost-q label{font-size:20px}
  .cost-q > b{font-size:30px}
  .tally-row{grid-template-columns:minmax(0,1fr) auto;row-gap:var(--s-2)}
  .tally-bar{grid-column:1/3;grid-row:2;height:18px}
  .tally-row b{font-size:30px}
  .keep-facts{grid-template-columns:1fr;gap:var(--s-3)}
}

/* ================= find your number: the dial and the drawn answers ================= */
.reading-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-8);align-items:end;margin-bottom:var(--s-8)}
.reading-lede{margin:0;font-size:19px;line-height:1.55;color:var(--ink-2);max-width:40ch}
.reading-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:var(--s-9);align-items:start}
.rd{position:sticky;top:110px;margin:0;color:var(--ink);max-width:540px;width:100%;justify-self:center}
.rd-svg{display:block;width:100%;height:auto;overflow:visible}
.rd-n{font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:44px;fill:var(--ink)}
.rd .on circle{fill:var(--ink)}
.rd .on .rd-n{fill:var(--parchment)}
.rd-out{position:absolute;left:50%;top:50%;width:46%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--parchment);pointer-events:none}
.rd-label{font-family:var(--f-label);font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.7}
.rd-num{font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:clamp(84px,9vw,132px);line-height:.9;margin-top:var(--s-1)}
.rd-name{font-family:var(--f-seal);font-size:clamp(26px,2.6vw,36px);line-height:1;color:#ff5a45;white-space:nowrap}
.reading-qs{display:flex;flex-direction:column;gap:var(--s-6)}
.rq-h{display:flex;align-items:center;gap:var(--s-3);margin:0 0 var(--s-3);font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:24px;text-transform:uppercase;line-height:1}
.rq-h i{display:grid;place-items:center;width:28px;height:28px;font-style:normal;font-size:16px;color:var(--parchment);background:var(--ink);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.rq-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}
.rq-opts.rq-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.rq-opts button{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:var(--s-3);padding:var(--s-4) var(--s-3) var(--s-4);color:var(--ink);background:rgba(20,19,19,.03);box-shadow:inset 0 0 0 1px rgba(20,19,19,.22);text-align:left;transition:background .35s var(--settle),color .35s var(--settle),box-shadow .35s var(--settle),transform .35s var(--settle)}
.rq-opts button:hover{box-shadow:inset 0 0 0 1px var(--ink);transform:translateY(-2px)}
.rq-opts button:focus{outline:none}
.rq-opts button:focus-visible{box-shadow:inset 0 0 0 2px var(--gules)}
.rq-opts button.on{background:var(--ink);color:var(--parchment);box-shadow:inset 0 0 0 1px var(--ink)}
.rq-opts button.on::after{content:"";position:absolute;right:10px;top:10px;width:8px;height:8px;background:var(--gules);transform:rotate(45deg)}
.rq-art svg{display:block;width:100%;height:auto}
.rq-t{font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:19px;line-height:1.05;text-transform:uppercase}
.rd-note{display:grid;grid-template-columns:230px minmax(0,1fr);gap:var(--s-5);align-items:center;margin-top:var(--s-2);padding-top:var(--s-5);border-top:2px solid var(--ink)}
.rd-gap{display:block;width:100%;height:auto;color:var(--ink);overflow:visible}
.rd-desc{margin:0 0 var(--s-2);font-size:17px;line-height:1.45;color:var(--ink)}
.rd-mm{margin:0;font-family:var(--f-label);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
@media (max-width:1100px){
  .reading-head,.reading-grid{grid-template-columns:1fr;gap:var(--s-6)}
  .rd{position:relative;top:0;max-width:440px}
}
@media (max-width:720px){
  .reading-head{margin-bottom:var(--s-6)}
  .rd{max-width:320px}
  .rd-n{font-size:48px}
  .rq-opts,.rq-opts.rq-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rq-opts:not(.rq-4){grid-template-columns:repeat(3,minmax(0,1fr))}
  .rq-opts button{padding:var(--s-2) var(--s-2) var(--s-3)}
  .rq-t{font-size:16px}
  .rd-note{grid-template-columns:120px minmax(0,1fr);gap:var(--s-4)}
  .rd-desc{font-size:15px}
}

/* ================= the first week: seven candles and a dawn ================= */
.vweek{position:relative;padding:var(--section) var(--gutter)}
.vweek-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-8);align-items:end;margin-bottom:var(--s-8)}
.vweek-lede{margin:0;font-size:19px;line-height:1.55;color:#c9c6bf;max-width:38ch}
.vweek-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr)) minmax(0,1.6fr);column-gap:clamp(6px,1.2vw,18px);row-gap:var(--s-6)}
.vweek-row{display:contents}
.vw-candle{display:flex;flex-direction:column;align-items:center;grid-row:1}
.vw-candle svg{display:block;width:100%;max-width:80px;height:auto;overflow:visible}
.vw-dawn svg{max-width:150px}
.vw-cap{margin:var(--s-3) 0 0;font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:28px;line-height:1;color:var(--ash);transition:color .5s}
.vw-light{opacity:0;transition:opacity .5s}
.vw-flame{transform:scale(.2);transition:transform .7s cubic-bezier(.3,1.6,.5,1)}
.vw-candle.on .vw-light{opacity:1}
.vw-candle.on .vw-flame{transform:scale(1);animation:flick 2.6s ease-in-out .8s infinite}
.vw-candle.on .vw-cap{color:var(--argent)}
@keyframes flick{0%,100%{transform:scale(1) skewX(0)}30%{transform:scale(1.04,.96) skewX(2deg)}60%{transform:scale(.97,1.05) skewX(-2deg)}}
.vw-dawn svg{opacity:.25;transform:translateY(16px);transition:opacity .9s,transform 1.2s var(--settle)}
.vw-dawn.on svg{opacity:1;transform:none}
.vweek-step{grid-row:2;padding-top:var(--s-4);border-top:2px solid rgba(238,234,226,.35);position:relative}
.vweek-step::before,.vweek-step::after{content:"";position:absolute;top:-8px;width:2px;height:14px;background:rgba(238,234,226,.35)}
.vweek-step::before{left:0}.vweek-step::after{right:0}
.vweek-a{grid-column:1/4}.vweek-b{grid-column:4/8}.vweek-c{grid-column:8/9;border-top-color:var(--gules)}
.vweek-c::before,.vweek-c::after{background:var(--gules)}
.vweek-when{margin:0 0 var(--s-2);font-family:var(--f-label);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gules)}
.vweek-t{margin:0 0 var(--s-2);font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:clamp(22px,2vw,30px);line-height:1.02;text-transform:uppercase}
.vweek-d{margin:0;font-size:16px;line-height:1.5;color:#c9c6bf;max-width:36ch}
@media (max-width:900px){
  .vweek-head{grid-template-columns:1fr;gap:var(--s-4);margin-bottom:var(--s-7)}
  .vweek-grid{grid-template-columns:repeat(7,minmax(0,1fr)) minmax(0,1.5fr);column-gap:4px;row-gap:var(--s-5)}
  .vweek-step{grid-column:1/-1 !important}
  .vweek-step:nth-of-type(2){grid-row:2}.vweek-step:nth-of-type(3){grid-row:3}.vweek-step:nth-of-type(4){grid-row:4}
  .vw-cap{font-size:20px}
}

/* ================= asked at the gate: the short answer first ================= */
.asks{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-auto-rows:auto;column-gap:var(--s-9);margin-bottom:var(--s-7)}
.ask-q{display:contents}
.ask-btn{grid-column:1;display:flex;align-items:baseline;gap:var(--s-4);width:100%;padding:var(--s-4) 0;text-align:left;border-bottom:1px solid rgba(238,234,226,.14);font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:clamp(24px,2.4vw,34px);line-height:1.05;text-transform:uppercase;color:rgba(238,234,226,.45);transition:color .35s,padding .5s var(--settle)}
.ask-btn i{flex:none;width:2.2em;font-style:normal;font-size:.6em;color:var(--ash);transition:color .35s}
.ask-btn:hover{color:rgba(238,234,226,.8)}
.ask-btn.on{color:var(--argent);padding-left:var(--s-3)}
.ask-btn.on i{color:var(--gules)}
.ask-q:first-child .ask-btn{border-top:1px solid rgba(238,234,226,.14)}
.ask-a{grid-column:2;grid-row:1/span 6;align-self:stretch;display:none;flex-direction:column;justify-content:center;padding:var(--s-7);color:var(--ink);background:var(--parchment);box-shadow:0 30px 60px rgba(0,0,0,.45)}
.ask-a.on{display:flex}
.ask-art{width:auto;height:clamp(120px,14vw,180px);max-width:60%;object-fit:contain;align-self:flex-start;margin-bottom:var(--s-6)}
.ask-short{margin:0 0 var(--s-4);font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:clamp(48px,5vw,84px);line-height:.92;text-transform:uppercase}
.ask-long{margin:0;font-size:18px;line-height:1.55;color:var(--ink-2);max-width:42ch}
@media (max-width:900px){
  .asks{display:block}
  .ask-q{display:block;padding:var(--s-5) 0;border-bottom:1px solid rgba(238,234,226,.14)}
  .ask-q:first-child{border-top:1px solid rgba(238,234,226,.14)}
  .ask-btn,.ask-q:first-child .ask-btn{padding:0 0 var(--s-3);border:0;color:var(--ash);font-size:15px;font-family:var(--f-label);letter-spacing:.08em;pointer-events:none}
  .ask-btn.on{padding-left:0;color:var(--ash)}
  .ask-btn i{width:auto;margin-right:var(--s-1);font-size:1em}
  .ask-a,.ask-a.on{display:grid;grid-template-columns:minmax(0,1fr) 72px;gap:var(--s-2) var(--s-4);padding:0;background:none;color:var(--argent);box-shadow:none}
  .ask-art{grid-column:2;grid-row:1/3;width:72px;height:72px;max-width:none;margin:0;filter:invert(.92)}
  .ask-short{grid-column:1;margin:0;font-size:36px}
  .ask-long{grid-column:1;font-size:16px;color:#c9c6bf}
}

/* ================= the shaving guide: every chapter a plate and a few short orders ================= */
.sv-index{position:sticky;top:120px;align-self:start;padding:0 0 0 var(--s-5);border-left:1px solid rgba(238,234,226,.16)}
.sv-index::before{content:"";position:absolute;left:-1px;top:0;width:2px;height:var(--prog,0%);background:var(--gules);transition:height .5s var(--settle)}
.sv-ch{position:relative;padding:var(--s-9) 0;border-top:1px solid rgba(238,234,226,.14)}
.sv-ch:first-child{border-top:0;padding-top:0}
.sv-ch-head{display:flex;align-items:flex-end;gap:var(--s-5);margin-bottom:var(--s-7)}
.sv-num{flex:none;font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:clamp(96px,10vw,160px);line-height:.74;color:transparent;-webkit-text-stroke:1.5px var(--gules)}
.sv-ch-head .h2{margin:0}
.sv-ch-lede{margin:0 0 var(--s-6);font-size:19px;line-height:1.55;color:#d3d0c9;max-width:46ch}
.sv-ch-body{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--s-7);align-items:center}
.sv-ch-body + .strokes,.sv-ch-body + .sv-note{margin-top:var(--s-8)}
.sv-plate{position:relative;margin:0;aspect-ratio:1;background:var(--parchment);box-shadow:0 30px 60px rgba(0,0,0,.4);outline:1px solid rgba(20,19,19,.18);outline-offset:-12px}
.sv-plate img{position:absolute;left:9%;top:9%;width:82%;height:82%;object-fit:contain}
.sv-do{list-style:none;margin:0;padding:0;counter-reset:do}
.sv-do li{counter-increment:do;position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:var(--s-4);padding:var(--s-4) 0;border-bottom:1px solid rgba(238,234,226,.12)}
.sv-do li:first-child{border-top:1px solid rgba(238,234,226,.12)}
.sv-do li::before{content:counter(do);grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;margin-top:2px;font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:20px;color:var(--sable);background:var(--argent);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.sv-do b{font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:clamp(24px,2.2vw,30px);line-height:1.05;text-transform:uppercase}
.sv-do span{margin-top:var(--s-1);font-size:17px;line-height:1.5;color:#c9c6bf}
.sv-do-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5)}
.sv-do-row li,.sv-do-row li:first-child{grid-template-columns:44px minmax(0,1fr);border:0;border-top:2px solid rgba(238,234,226,.3)}
.sv-do-row b{font-size:22px}
.sv-do-row span{font-size:15px}
/* the passes */
.strokes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5)}
.stroke-fig{margin:0 0 var(--s-4);box-shadow:0 24px 50px rgba(0,0,0,.4)}
.stroke-fig svg{display:block;width:100%;height:auto}
.strokes b{display:block;margin-bottom:var(--s-2);font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:26px;line-height:1;text-transform:uppercase}
.strokes span{font-size:16px;line-height:1.5;color:#c9c6bf}
.strokes li:last-child b{color:var(--gules)}
/* the settings as eight beards */
.growth{list-style:none;margin:0 0 var(--s-6);padding:var(--s-5) var(--s-4) var(--s-4);display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--s-2);background:var(--parchment);color:var(--ink);box-shadow:0 30px 60px rgba(0,0,0,.4)}
.growth li{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.growth svg{display:block;width:100%;max-width:80px;height:auto;margin-bottom:var(--s-3)}
.growth-n{font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:34px;line-height:1}
.growth-name{margin-top:var(--s-1);font-family:var(--f-seal);font-size:19px;line-height:1.1;color:var(--gules)}
.growth-mm{margin-top:var(--s-1);font-family:var(--f-label);font-size:11px;letter-spacing:.06em;color:var(--ink-2)}
/* aftercare */
.after{list-style:none;margin:0 0 var(--s-6);padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-5)}
.sv-plate-s{aspect-ratio:1;margin-bottom:var(--s-4)}
.sv-plate-s img{left:18%;top:18%;width:64%;height:64%}
.after b{display:block;margin-bottom:var(--s-1);font-family:var(--f-display);font-stretch:62.5%;font-weight:500;font-size:24px;line-height:1;text-transform:uppercase}
.after span{font-size:15px;line-height:1.5;color:#c9c6bf}
.sv-note{display:flex;align-items:center;gap:var(--s-4);margin:0;padding:var(--s-4) var(--s-5);border:1px solid rgba(238,234,226,.16);font-size:17px;color:#d3d0c9}
.sv-note img{flex:none;width:44px;height:auto;filter:invert(.92)}
.vweek-in{padding:0}
@media (max-width:1100px){
  .sv-index{top:0;padding:var(--s-3) var(--gutter);border-left:0;border-bottom:1px solid rgba(238,234,226,.16)}
  body:has(.hdr:not(.hide)) .sv-index{top:var(--hdr-h,72px)}
  .sv-index::before{display:none}
  .sv-ch-body{grid-template-columns:1fr;gap:var(--s-5)}
  .sv-plate{max-width:420px}
}
@media (max-width:720px){
  .sv-ch{padding:var(--s-8) 0}
  .sv-ch-head{gap:var(--s-3);margin-bottom:var(--s-5)}
  .sv-num{font-size:84px}
  .sv-do-row,.strokes{grid-template-columns:1fr;gap:var(--s-5)}
  .strokes li{display:grid;grid-template-columns:120px minmax(0,1fr);column-gap:var(--s-4);align-items:center}
  .stroke-fig{grid-row:1/3;margin:0}
  .growth{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:var(--s-5);margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1)}
  .after{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5) var(--s-4)}
}

body:has(.buybar.on) .ftr{padding-bottom:96px}
/* ================= phones: stages fit the visible screen, whatever the browser bars are doing ================= */
@media (max-width:760px){
  /* the hero on a phone is a column: a clear zone for the steel under the header, then the words in normal flow.
     The razor is drawn into that zone and scrolls away with the page, so it can never sit on the text. */
  .hero{height:auto;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--hdr-h,72px) + clamp(240px,40svh,340px)) 0 var(--s-6)}
  .hero-copy{position:relative;left:auto;right:auto;bottom:auto;padding:0 var(--gutter)}
  .hero::after{height:70%}
  .dial-stage{height:100svh;min-height:0}
  .anatomy-stage{height:100svh}
  .duel-stage{height:100svh}
  .buy{min-height:100svh}
}

/* ================= the comparison on a phone: three columns like the score bar, VIGIL's column banded ================= */
@media (max-width:720px){
  .bout{padding-left:var(--s-4);padding-right:var(--s-4)}
  .score{grid-template-columns:1fr 1.15fr 1fr;font-size:10px;letter-spacing:.1em;margin-bottom:0;top:calc(var(--hdr-h,72px) * 0 + 8px)}
  .score span{gap:6px;padding:10px 0}
  .score b{font-size:22px}
  .tape{position:relative;border-top:0}
  .tape::before{content:"";position:absolute;top:0;bottom:0;left:calc((100% - 12px) / 3.15 + 6px);width:calc((100% - 12px) * 1.15 / 3.15);background:rgba(12,12,13,.12);pointer-events:none}
  .tape-row,.tape-row[data-win]{display:grid;grid-template-columns:1fr 1.15fr 1fr;grid-template-rows:auto auto;column-gap:6px;row-gap:12px;align-items:start;padding:16px 0 20px;text-align:center;border-bottom:1px solid rgba(12,12,13,.22)}
  .tape-row::before,.tape-row[data-win="v"]::before{display:none}
  .tape-r{position:static;grid-column:1;grid-row:1;justify-self:start;margin:0;padding-left:4px;font-size:11px;letter-spacing:.12em}
  .tape-q{grid-column:2/4;grid-row:1;justify-self:end;margin:0;padding-right:4px;font-size:11px;letter-spacing:.12em;text-align:right}
  .tape-c,.tape-v,.tape-e{grid-row:2}
  .tape-c{grid-column:1}.tape-v{grid-column:2}.tape-e{grid-column:3}
  .tape-c::before,.tape-e::before,.tape-c.won::before,.tape-e.won::before{content:none}
  .tape-row p{font-size:14px;line-height:1.3;padding:0 2px}
  .tape-row .tape-v{font-size:19px;line-height:1.02}
  .tape-row .won::after{display:block;top:-9px}
  .tape-row .tape-v.won::after{display:none}
  .verdict-bar{margin-top:var(--s-6)}
  .bout .cmp-note{font-size:13px}
}

/* ================= the loupe over the blade edge ================= */
.loupe{position:fixed;left:0;top:0;z-index:5;width:clamp(240px,22vw,320px);margin:0;pointer-events:none;opacity:0;transform:translate3d(-999px,-999px,0);transition:opacity .45s var(--settle);will-change:transform;filter:drop-shadow(0 18px 30px rgba(0,0,0,.55))}
.loupe.on{opacity:1}
.loupe svg{display:block;width:100%;height:auto;overflow:visible}
@media (max-width:760px){ .loupe{width:170px} }