:root{--bg:#0f1512;--paper:#f3f1ea;--ink:#f3f1ea;--ink2:#c9cbc2;--ink3:#8d948c;--line:#273129;--amber:#e0892b;--amber-ink:#1a0f03;--moss:#7fc38a;
--display:"Bricolage Grotesque","Avenir Next",system-ui,sans-serif;--body:Figtree,"Helvetica Neue",Arial,sans-serif;--spring:cubic-bezier(.16,1,.3,1);color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-text-size-adjust:100%}
img{max-width:100%;display:block}a{color:inherit}
.concept{font:500 11px/1.3 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);padding:9px 16px;border-bottom:1px solid var(--line);background:#0b100d}
.top{position:absolute;z-index:5;left:0;right:0;top:34px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 16px}
.mark{font:800 15px var(--display);letter-spacing:.04em;text-transform:uppercase;text-decoration:none}
.top nav{display:none}
.top nav a{font:500 12px var(--body);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;margin-left:22px;opacity:.9;position:relative}
.top nav a i{font-style:normal;font-size:8px;opacity:.7;margin-right:5px}
.top nav a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:#fff;transform:scaleX(0);transform-origin:right;transition:transform .35s var(--spring)}
.top nav a:hover::after{transform:scaleX(1);transform-origin:left}
.where{font:500 12px var(--body);letter-spacing:.05em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px var(--amber);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.45;transform:scale(1.45)}}
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.scenes,.scene,.shade{position:absolute;inset:0}
.scene{background-size:cover;background-position:center;opacity:0;transition:opacity 1.4s ease;transform:scale(1.02)}
.scene.on{opacity:1;animation:kb 12s ease-out forwards}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.13)}}
.shade{background:linear-gradient(180deg,rgba(8,12,10,.55) 0%,rgba(8,12,10,.1) 35%,rgba(8,12,10,.75) 100%)}
.hero-in{position:relative;z-index:2;padding:130px 16px 44px;max-width:1340px;width:100%;margin:0 auto}
.switch{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-bottom:26px}
.sw{background:none;border:0;color:#fff;font:600 13px var(--body);letter-spacing:.08em;padding:6px 0;cursor:pointer;opacity:.55;transition:opacity .3s,transform .3s}
.sw i{font-style:normal;opacity:.7;margin-right:4px}.sw:hover{opacity:.8;transform:translateX(4px)}.sw.on{opacity:1}
.sw:focus-visible,.btn:focus-visible,.rail:focus-visible{outline:2px solid #fff;outline-offset:3px}
.name{margin:0;font:800 clamp(52px,17.5vw,200px)/.84 var(--display);letter-spacing:-.04em;text-transform:uppercase}
.name em{font-style:normal;color:var(--amber)}
.blurb{margin-top:26px;max-width:460px}.blurb p{margin:0 0 18px;font-weight:500;font-size:17px;color:#fff}
.btn{display:inline-block;background:var(--amber);color:var(--amber-ink);font:700 14px var(--body);letter-spacing:.04em;text-decoration:none;padding:14px 24px;border-radius:999px;transition:transform .3s var(--spring),box-shadow .3s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(224,137,43,.35)}.btn-o{background:none;color:var(--ink);border:1.5px solid var(--ink)}
.btn-o:hover{background:var(--amber);color:var(--amber-ink);border-color:var(--amber)}
.ticker{overflow:hidden;border-block:1px solid var(--line);background:#0b100d}
.tk{display:flex;gap:44px;white-space:nowrap;padding:14px 0;width:max-content;animation:tk 38s linear infinite;font:800 14px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.tk span::after{content:"•";margin-left:44px;color:var(--amber)}
@keyframes tk{to{transform:translateX(-50%)}}
section{padding:72px 16px}.paths,.shop,.watch,.behind{max-width:1180px;margin:0 auto}
.eyebrow{font:600 12px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin:0 0 10px}
h2{font:800 clamp(30px,6vw,56px)/1.05 var(--display);letter-spacing:-.02em;margin:0 0 30px}
.cards{display:grid;gap:16px}
.card{position:relative;display:block;border-radius:18px;overflow:hidden;background:#151d18;text-decoration:none;border:1px solid var(--line);transition:transform .45s var(--spring),border-color .3s}
.card:hover{transform:translateY(-6px);border-color:var(--amber)}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .8s var(--spring)}.card:hover img{transform:scale(1.06)}
.cb{padding:18px 20px 22px}.cb i{font:500 12px var(--body);color:var(--amber);font-style:normal;letter-spacing:.1em}
.cb h3{font:800 22px/1.15 var(--display);margin:4px 0 6px}.cb p{margin:0 0 12px;color:var(--ink2);font-size:15px}.go{font:700 13px var(--body);letter-spacing:.04em;color:var(--amber)}
.rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 18px;margin:0 -16px;padding-inline:16px;-webkit-overflow-scrolling:touch}
.rail figure{margin:0;flex:0 0 72%;max-width:340px;scroll-snap-align:start}
.rail img{width:100%;height:380px;object-fit:cover;border-radius:16px}
.rail figcaption{font:600 12px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-top:8px}
.watch{display:grid;gap:28px;align-items:center}.watch p{color:var(--ink2);max-width:520px}
.soc{margin:18px 0 0;font-size:15px}.soc a{color:var(--amber);text-decoration:none;font-weight:600;border-bottom:1px solid transparent}.soc a:hover{border-color:var(--amber)}
.slot{border:1.5px dashed var(--ink3);border-radius:18px;aspect-ratio:16/10;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--ink3);text-align:center;gap:6px}
.slot span{font:800 20px var(--display);color:var(--ink2)}
.behind{background:linear-gradient(180deg,#121b16,#0d130f);border:1px solid var(--line);border-radius:22px;padding:44px 22px;margin-bottom:60px}
.steps{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:14px}
.steps li{display:flex;gap:14px;align-items:flex-start;font-size:17px}
.steps b{flex:0 0 34px;height:34px;border-radius:50%;background:var(--amber);color:var(--amber-ink);display:grid;place-items:center;font:800 16px var(--display)}
.disc{font-size:13px;color:var(--ink3);margin:16px 0 0;max-width:520px}.todo{color:var(--amber)}
footer{border-top:1px solid var(--line);padding:30px 16px 40px;display:grid;gap:10px;font-size:14px;color:var(--ink2)}
.fl{display:grid;gap:2px}.note{font-size:12px;color:var(--ink3);margin:6px 0 0}
.credit{font-size:11px;color:#6b726b;text-decoration:none;margin-top:6px}
.rv,.r{opacity:0;transform:translateY(40px);transition:opacity .9s var(--spring),transform .9s var(--spring)}
.r{animation:up .9s var(--spring) .15s forwards;transform:translateY(80px)}.r.d1{animation-delay:.3s}.r.d2{animation-delay:.45s}
@keyframes up{to{opacity:1;transform:none}}
.rv.in{opacity:1;transform:none}.d1{transition-delay:.08s}.d2{transition-delay:.16s}
@media(min-width:760px){.top nav{display:block}.top{padding:22px 34px}.hero-in{padding:150px 34px 60px;display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"sw sw" "name blurb";gap:0 40px;align-items:end}
.switch{grid-area:sw;margin-bottom:60px}.name{grid-area:name}.blurb{grid-area:blurb;margin:0 0 8px}
.cards{grid-template-columns:repeat(3,1fr)}.rail figure{flex-basis:300px}.watch{grid-template-columns:1fr 1fr}section{padding:100px 34px}.behind{padding:60px 50px}
.steps{grid-template-columns:repeat(3,1fr)}footer{grid-template-columns:1fr 1.4fr auto;align-items:end;padding:36px 34px 50px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv,.r{opacity:1;transform:none}.scene.on{transform:none}}

.feather{max-width:1180px;margin:0 auto;display:grid;gap:28px}
.feather p{color:var(--ink2);max-width:520px}
.nm{display:block;font:600 12px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin:22px 0 8px}
.nm-in{width:100%;max-width:420px;background:#121b16;border:1.5px solid var(--line);border-radius:12px;color:var(--ink);font:800 20px var(--display);letter-spacing:.06em;text-transform:uppercase;padding:14px 16px;margin-bottom:18px}
.nm-in:focus{outline:2px solid var(--amber);outline-offset:2px;border-color:var(--amber)}
.fv{background:linear-gradient(160deg,#18221c,#0d130f);border:1px solid var(--line);border-radius:20px;padding:22px}
.fv svg{width:100%;height:auto;display:block}.cap{margin:8px 0 0;font-size:13px;color:var(--ink3)}
.eg{display:grid;grid-template-columns:1fr 1fr;gap:12px}.eg figure{margin:0}
.eg img{width:100%;height:340px;object-fit:cover;border-radius:16px}.eg figcaption{font:600 12px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-top:8px}
@media(min-width:760px){.feather{grid-template-columns:1fr 1fr;align-items:center}.eg{grid-column:1/-1}.eg img{height:420px}.escrub{grid-column:1/-1}}
.escrub{margin-top:28px;display:flex;flex-direction:column;gap:12px}
.escrub canvas{width:100%;aspect-ratio:16/9;max-width:100%;background:#151c18;border-radius:18px;box-shadow:0 30px 70px -30px rgba(0,0,0,.7);cursor:ew-resize;touch-action:pan-y;display:block}
.escrub .sc-lab{font:800 clamp(18px,2.4vw,26px)/1.1 var(--display);color:var(--ink)}
.escrub input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;background:linear-gradient(90deg,var(--amber),#9aa4ab);outline:none;cursor:pointer}
.escrub input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:var(--amber);border:3px solid var(--paper);box-shadow:0 6px 18px rgba(0,0,0,.5)}
.escrub input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--amber);border:3px solid var(--paper)}
.escrub .sc-ends{display:flex;justify-content:space-between;font:600 12px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}

.again{max-width:820px;margin:0 auto;text-align:left}.again p{color:var(--ink2);max-width:640px;font-size:18px}

.top.solid{position:sticky;top:0;background:rgba(15,21,18,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.where.back{text-decoration:none;color:var(--ink)}
.pgm{min-height:60vh}
.phero{position:relative;min-height:70svh;background-size:cover;background-position:center;display:flex;align-items:flex-end}
.pshade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,12,10,.5),rgba(8,12,10,.2) 35%,rgba(8,12,10,.85))}
.pin{position:relative;z-index:2;padding:120px 16px 44px;max-width:1180px;margin:0 auto;width:100%}
.ph{font:800 clamp(40px,9vw,92px)/.95 var(--display);letter-spacing:-.03em;margin:0 0 16px;text-transform:uppercase}
.pl{max-width:560px;color:#fff;font-size:18px;margin:0 0 22px}
.pgsec{max-width:1180px;margin:0 auto;padding:60px 16px}
.two{display:grid;gap:24px;margin:20px 0}.list{margin:0;padding-left:20px;color:var(--ink2);font-size:17px}.list li{margin:6px 0}
.rimg{width:100%;border-radius:16px;aspect-ratio:4/3;object-fit:cover}
.mosaic{display:grid;gap:12px;grid-template-columns:1fr 1fr}.mosaic figure{margin:0}.mosaic img{width:100%;height:220px;object-fit:cover;border-radius:14px}
.mosaic figcaption{font:600 12px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-top:6px}
@media(min-width:760px){.pin{padding:150px 34px 60px}.two{grid-template-columns:1fr 1fr;align-items:center}.pgsec{padding:90px 34px}.mosaic{grid-template-columns:repeat(3,1fr)}.mosaic img{height:280px}}

/* 3D hero: tall scroll runway with a sticky stage (only when WebGL runs; otherwise the photo hero stays as is) */
.hero #gl{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:none;pointer-events:none}
.herowrap.gl{height:300vh;position:relative}
.herowrap.gl .hero{position:sticky;top:0;height:100svh;min-height:0}
.herowrap.gl .hero #gl{display:block}
.herowrap.gl .scenes{opacity:0}
.herowrap.gl .hero{background:radial-gradient(120% 90% at 70% 40%,#2a1a0f 0,#0f1512 62%)}
.herowrap.gl .shade{background:linear-gradient(180deg,rgba(8,12,10,.55) 0,rgba(8,12,10,0) 30%,rgba(8,12,10,.65) 100%)}
.hero-in{z-index:3}.shade{z-index:2}
.cap3d{display:none}
.herowrap.gl .cap3d{display:block;position:absolute;z-index:3;left:16px;right:16px;top:120px;pointer-events:none}
.cap3d span{display:block;position:absolute;left:0;font:800 clamp(22px,4.4vw,44px)/1.05 var(--display);letter-spacing:.02em;text-transform:uppercase;opacity:0;transform:translateY(16px);transition:opacity .6s,transform .6s}
.cap3d span.on{opacity:1;transform:none}
@media(min-width:760px){.herowrap.gl .cap3d{left:34px;top:150px}}
/* slab carousel */
.slabs{max-width:none;padding-left:0;padding-right:0;overflow:hidden}
.slabs .eyebrow,.slabs h2,.rhint{max-width:1180px;margin-left:auto;margin-right:auto;padding:0 16px}
.ribbon{--cw:clamp(150px,24vw,210px);position:relative;height:calc(var(--cw)*4/3*1.18 + 30px);margin-top:30px;perspective:1000px;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ribbon.drag{cursor:grabbing}
.rcard{position:absolute;left:50%;top:50%;width:var(--cw);aspect-ratio:3/4;margin:calc(var(--cw)*-2/3) 0 0 calc(var(--cw)/-2);border-radius:14px;overflow:hidden;background:#111;box-shadow:0 16px 34px rgba(0,0,0,.5);will-change:transform;backface-visibility:hidden}
.rcard img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.rhint{margin-top:14px;font:600 12px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);text-align:center}
.pbox{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:rgba(6,9,7,.9);opacity:0;pointer-events:none;transition:opacity .3s;padding:16px}
.pbox.open{opacity:1;pointer-events:auto}
.pin2{max-width:min(92vw,900px);text-align:center}.pin2 img{max-height:72vh;max-width:100%;border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.pcap{font:800 22px var(--display);margin:14px 0}.pbox button{position:absolute;top:16px;right:16px;width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font:700 24px/1 var(--display);cursor:pointer}
.herowrap.gl .r{animation:none;opacity:1;transform:none}

/* the eagle: scroll runway with a sticky stage (WebGL only; otherwise the typed-name preview below stays) */
.eaglewrap{display:none}
.eaglewrap.gl{display:block;height:340vh;position:relative}
.eaglestage{position:sticky;top:0;height:100svh;overflow:hidden;background:radial-gradient(110% 80% at 62% 45%,#262016 0,#0f1512 65%)}
.eaglestage canvas{position:absolute;inset:0;width:100%;height:100%}
.ecap{position:absolute;left:16px;right:16px;top:70px;z-index:3;pointer-events:none}
.ecap span{display:block;position:absolute;left:0;font:800 clamp(24px,5vw,56px)/1.02 var(--display);text-transform:uppercase;opacity:0;transform:translateY(16px);transition:opacity .6s,transform .6s}
.ecap span.on{opacity:1;transform:none}
.enamepanel{position:absolute;z-index:4;left:16px;right:16px;bottom:26px;max-width:420px;opacity:0;transform:translateY(20px);pointer-events:none;transition:opacity .5s,transform .5s;background:rgba(15,21,18,.78);border:1px solid var(--line);border-radius:16px;padding:16px;backdrop-filter:blur(6px)}
.enamepanel.on{opacity:1;transform:none;pointer-events:auto}
@media(min-width:760px){.ecap{left:34px;top:120px}.enamepanel{left:34px;bottom:44px}}

.fnames{min-width:0}.fn-row{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}.fn-row figure{margin:0;flex:0 0 min(78%,320px);scroll-snap-align:start}.fn-row img{width:100%;height:220px;object-fit:cover;border-radius:14px}.fn-row figcaption{font:600 12px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-top:8px}
@media(min-width:760px){.fnames{grid-column:1/-1}}

.fanwall{max-width:1180px;margin:0 auto;padding:72px max(20px,env(safe-area-inset-left)) 24px;display:flex;flex-direction:column;gap:16px}.fanwall h2{margin:0;font:800 clamp(30px,5.4vw,64px)/.95 var(--display);letter-spacing:-.03em}.fanwall canvas{width:100%;height:min(66vh,560px);min-height:320px;display:block;background:radial-gradient(120% 100% at 50% 100%,#1a211c,#0f1512);border-radius:22px;box-shadow:0 30px 70px -30px rgba(0,0,0,.75);touch-action:manipulation}.fw-row{display:flex;gap:10px;flex-wrap:wrap}.fw-row input{flex:1 1 220px;min-width:0;background:#151c18;border:1px solid var(--line);color:var(--ink);font:700 16px var(--body);letter-spacing:.06em;text-transform:uppercase;padding:14px 16px;border-radius:14px}.fw-row .btn{border:0;cursor:pointer}

.todo{display:none!important}
.prices{padding:70px 16px;max-width:1100px;margin:0 auto}
.prices h2{font:800 clamp(28px,5vw,44px)/1.05 var(--display);margin:6px 0 26px}
.pr-row{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.pr{border:1px solid var(--line);border-radius:18px;padding:22px;background:#131b16;display:flex;flex-direction:column;gap:6px}
.pr b{font:800 clamp(24px,4vw,32px) var(--display);color:var(--amber)}
.pr span{color:var(--ink2)}
a.slot{text-decoration:none;border-style:solid;border-color:var(--line);background:#131b16}
a.slot small{color:var(--ink2);max-width:260px}
.fl a+a{display:block}
/* Rerun v3: real workbench wood, warm shop light, film grain. Texture is cut from Mitchell's own bench photos. */
body::before{content:"";position:fixed;inset:0;z-index:-2;background:radial-gradient(90% 70% at 50% 0%,#5a4430 0,#3b2d20 55%,#2a2018 100%)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
 radial-gradient(70% 55% at 85% 8%,rgba(255,150,60,.20),transparent 70%),
 radial-gradient(60% 50% at 6% 96%,rgba(255,120,40,.13),transparent 70%),
 radial-gradient(120% 100% at 50% 45%,rgba(10,8,6,0) 0,rgba(6,5,4,.42) 100%),
 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .9  0 0 0 0 .8  0 0 0 .55 0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='.5'/></svg>");mix-blend-mode:normal}
.herowrap.gl .hero{background:radial-gradient(110% 90% at 70% 42%,rgba(150,80,28,.35) 0,rgba(10,8,6,.6) 70%),url(../img/bench-tile.webp) 0 0/1600px 760px repeat}
.eaglestage{background:radial-gradient(100% 80% at 62% 45%,rgba(140,80,30,.30) 0,rgba(8,7,5,.55) 72%),url(../img/bench-tile.webp) 0 0/1600px 760px repeat}
.fanwall canvas{background:radial-gradient(120% 100% at 50% 100%,rgba(150,85,30,.28),rgba(10,8,6,.55)),url(../img/bench-tile.webp) 0 0/1600px 760px repeat;box-shadow:0 30px 70px -30px rgba(0,0,0,.85),inset 0 0 90px rgba(0,0,0,.6)}
.card,.pr,.fv,.behind,a.slot{background-color:rgba(14,12,9,.72);backdrop-filter:blur(6px)}
.ticker{background:rgba(10,8,6,.8)}
.paths,.shop,.again,.prices,.watch,.feather{position:relative}
h2{text-shadow:0 2px 24px rgba(0,0,0,.55)}
/* Rerun v4: the eagle is Mitchell's real steel eagle, scrubbed by scroll */
.eaglewrap.gl{height:300vh}
.eaglestage{background:#0b0907}
.eaglestage::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(8,6,4,.7) 0,transparent 30%),linear-gradient(0deg,rgba(8,6,4,.55) 0,transparent 25%),radial-gradient(120% 100% at 50% 50%,transparent 55%,rgba(6,5,4,.55) 100%)}
.ecap{text-shadow:0 3px 30px rgba(0,0,0,.8)}

/* Rerun v5: no repeating backdrop. Lighter warm base; each section carries one of Mitchell's real photos, faded in and out. */
.paths,.slabs,.shop,.prices,.again,.feather,.behind{position:relative;isolation:isolate}
.paths::before,.slabs::before,.shop::before,.prices::before,.again::before,.feather::before,.behind::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--sb) center/cover no-repeat;opacity:.42;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%)}
.paths{--sb:url(../img/scene-mill.webp)}.slabs{--sb:url(../img/slabs-mill.webp)}.shop{--sb:url(../img/slab-shop.webp)}.prices{--sb:url(../img/table-live.webp)}.again{--sb:url(../img/scene-run.webp)}.feather{--sb:url(../img/mantel.webp)}.behind{--sb:url(../img/scene-build.webp)}
.paths::after,.slabs::after,.shop::after,.prices::after,.again::after,.feather::after,.behind::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,14,9,.35),rgba(20,14,9,.5));pointer-events:none}

/* Rerun v6: ONE continuous light-pine plank behind the whole page (seamless loop, grain runs down the page). Cards, pills and photos are thick smoked glass with a warm light under the edge. */
:root{--ink:#2a1a0e;--ink2:#46321f;--ink3:#6a5440;--line:rgba(120,70,20,.28);color-scheme:light}
body{background:#ecd9bb url(../img/pine-long-2.webp) 50% 0/max(100%,1100px) auto repeat-y;color:var(--ink)}
body::before,body::after{content:none!important;display:none!important}
.paths::before,.slabs::before,.shop::before,.prices::before,.again::before,.feather::before,.behind::before,.paths::after,.slabs::after,.shop::after,.prices::after,.again::after,.feather::after,.behind::after{content:none!important;display:none!important}
h2,.ecap{text-shadow:none}
.herowrap.gl .hero,.herowrap.gl .shade{background:none}
.scenes,.shade{display:none}
/* glass: smoked, thick, light glowing from under the rim */
.card,.pr,.fv,.behind,a.slot,.enamepanel,.nm-in,.top.solid,.ticker,.pill,.btn-o{
 --ink:#fbf3e6;--ink2:#e6d6bf;--ink3:#c9b499;color:var(--ink);
 background:linear-gradient(160deg,rgba(255,226,180,.20) 0,rgba(52,32,16,.58) 38%,rgba(34,20,10,.68) 100%)!important;
 backdrop-filter:blur(14px) saturate(1.25);-webkit-backdrop-filter:blur(14px) saturate(1.25);
 border:1px solid rgba(255,214,160,.55)!important;
 box-shadow:inset 0 1px 0 rgba(255,236,205,.75),inset 0 0 0 1px rgba(255,170,80,.22),inset 0 -8px 16px -8px rgba(255,150,60,.34),0 0 12px rgba(255,150,50,.14),0 22px 44px -24px rgba(58,28,8,.6)}
.top{background:linear-gradient(180deg,rgba(40,24,12,.55),rgba(40,24,12,.25))!important;backdrop-filter:blur(12px);--ink:#fbf3e6;color:#fbf3e6;box-shadow:0 10px 30px -18px rgba(58,28,8,.6),inset 0 -1px 0 rgba(255,190,110,.45)}
.top nav a,.top .mark,.top .where{color:#fbf3e6}
.ticker{border-radius:999px;border-block:0!important;margin:0 16px}
.card img,.rail figure,figure img,.rcard,.pin2 img{border-radius:18px}
.card,.rail figure,figure.rv{position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,214,160,.6),inset 0 -10px 20px -10px rgba(255,150,60,.36),0 0 12px rgba(255,150,50,.14),0 24px 48px -24px rgba(58,28,8,.65)}
.rcard{box-shadow:inset 0 0 0 1px rgba(255,214,160,.65),0 0 10px rgba(255,150,50,.16),0 16px 34px rgba(58,28,8,.55)}
.btn{box-shadow:inset 0 1px 0 rgba(255,236,205,.7),0 0 10px rgba(255,150,50,.22),0 12px 26px -12px rgba(58,28,8,.6)}
.btn-o{color:#fbf3e6;border:1px solid rgba(255,214,160,.55)}
.eyebrow,.sc-lab,.sc-ends,.rhint{color:var(--ink2)}
.eaglestage{background:none}.eaglestage::after{display:none}
.eaglestage .ecap,.enamepanel{--ink:#fbf3e6;color:#fbf3e6}
.fanwall canvas{background:linear-gradient(160deg,rgba(255,226,180,.18),rgba(34,20,10,.66));border:1px solid rgba(255,214,160,.55);box-shadow:inset 0 0 0 1px rgba(255,170,80,.22),inset 0 -10px 24px -10px rgba(255,150,60,.34),0 0 12px rgba(255,150,50,.14),0 28px 56px -28px rgba(58,28,8,.65)}
.hero p,.hero .sub,.hero .lede{color:#3a2615!important;text-shadow:none}
.sw{opacity:.95}.sw:not(.on){opacity:.75}.sw i{opacity:.9}
.pr b{color:#ffb766}
a.slot,.soc a{color:#ffb766}
/* v7: darker pine is in the image; the name heats like a branding iron near the cursor */
.name .ch{display:inline-block;will-change:transform,color;transition:none}
.name .r{display:inline-block;white-space:nowrap}

/* v8: the three choices are routed wooden signs, the way Mitchell makes them: real stained pine, carved letters, brass screws */
.switch{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.sw{position:relative;opacity:1!important;cursor:pointer;color:#1a0b02!important;font:800 17px/1 var(--display)!important;letter-spacing:.14em;text-transform:uppercase;padding:14px 34px 13px;border-radius:7px;border:0;
 background:linear-gradient(180deg,rgba(196,128,56,.40),rgba(120,64,22,.50)),url(../img/grain.webp) var(--gx,30%) var(--gy,40%)/260% auto;
 box-shadow:inset 0 1px 0 rgba(255,236,200,.55),inset 0 -3px 5px rgba(40,16,4,.45),0 0 0 2px #4a2d16,0 0 0 3px rgba(255,214,160,.25),0 12px 18px -10px rgba(40,18,6,.75);
 text-shadow:0 1px 0 rgba(255,230,190,.55),0 -1px 1px rgba(30,12,2,.55);transition:transform .35s var(--spring),filter .3s}
.sw:nth-of-type(1){--gx:10%;--gy:20%}.sw:nth-of-type(2){--gx:70%;--gy:55%}.sw:nth-of-type(3){--gx:35%;--gy:85%}
.sw i{font-style:normal;opacity:.75;margin-right:6px}
.sw::before,.sw::after{content:"";position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe9b8,#a87a2e 55%,#4a3210);box-shadow:0 1px 1px rgba(0,0,0,.55)}
.sw::before{left:12px}.sw::after{right:12px}
.sw:hover{transform:translateY(-3px) rotate(-.6deg);filter:brightness(1.08)}
.sw.on,.sw[aria-selected=true]{color:#e8742a!important;-webkit-text-stroke:.6px #3a1604;filter:brightness(1.12) saturate(1.1);transform:translateX(8px);text-shadow:0 1px 0 rgba(255,225,170,.7),0 -1px 1px rgba(60,20,0,.7),0 0 8px rgba(255,150,50,.35)}

.herowrap .switch{margin-top:92px}
@media(max-width:760px){.herowrap .switch{margin-top:28px}.sw{font-size:15px!important;padding:12px 26px 11px}}

/* v10: the whole page is the face of one giant tree (bark runs the full length, no seams); text turns cream on the darker wood */
:root{--ink:#fbf1de;--ink2:#e8d6b8;--ink3:#c9b08c;--line:rgba(255,214,160,.28)}
body{background:#4a3524 url(../img/bark-bg-1.webp) 50% 0/max(100%,1100px) auto repeat-y;color:var(--ink)}
.hero p,.hero .sub,.hero .lede{color:#fbf1de!important;text-shadow:0 2px 12px rgba(0,0,0,.6)}
h1,h2,.eyebrow,.cap3d span,.ecap{text-shadow:0 2px 16px rgba(0,0,0,.55)}
.name .ch,.name .r{color:#fbf1de}
.top{background:linear-gradient(180deg,rgba(30,18,9,.7),rgba(30,18,9,.35))!important}
.name{white-space:nowrap}.name em.r{color:var(--amber)!important}
.herowrap .switch{position:relative;top:30px}

/* v11: no repeat in the bark (second layer drifts at its own speed); every pill is a routed wooden sign; everything floats, nothing is attached */
html{--py:0px}
body::before{content:""!important;display:block!important;position:fixed;inset:0;z-index:-1;pointer-events:none;background:url(../img/bark-bg-2.webp) 50% var(--py)/max(100%,900px) auto repeat-y;mix-blend-mode:soft-light;opacity:.75}
@keyframes drift{0%,100%{translate:0 0;rotate:var(--r0,-.5deg)}50%{translate:var(--dx,4px) -10px;rotate:var(--r1,.6deg)}}
.card,.pr,a.slot,.btn,.btn-o,.soc a,.sw,.ticker,.fv,.enamepanel{animation:drift 7.5s ease-in-out infinite}
.card:nth-child(2n),.pr:nth-child(2n),.sw:nth-of-type(2){animation-duration:9s;animation-delay:-2.4s;--dx:-5px;--r0:.4deg;--r1:-.6deg}
.card:nth-child(3n),.pr:nth-child(3n),.sw:nth-of-type(3){animation-duration:8.2s;animation-delay:-4.7s;--dx:3px;--r0:-.3deg;--r1:.5deg}
.btn,.btn-o,.soc a{animation-duration:6.4s;animation-delay:-1.3s}
.ticker{animation-duration:11s}
@media(prefers-reduced-motion:reduce){.card,.pr,a.slot,.btn,.btn-o,.soc a,.sw,.ticker,.fv,.enamepanel{animation:none}}
html body .pr,html body a.slot,html body .btn,html body .btn-o,html body .soc a{
 --ink:#1a0b02;--ink2:#3a1d0a;--ink3:#5a3414;color:#1a0b02!important;text-decoration:none;border:0!important;border-radius:9px!important;backdrop-filter:none!important;
 background:linear-gradient(180deg,rgba(196,128,56,.40),rgba(120,64,22,.50)),url(../img/grain.webp) var(--gx,40%) var(--gy,50%)/230% auto!important;
 box-shadow:inset 0 1px 0 rgba(255,236,200,.55),inset 0 -3px 5px rgba(40,16,4,.45),0 0 0 2px #4a2d16,0 0 0 3px rgba(255,214,160,.25),0 18px 24px -12px rgba(0,0,0,.7)!important;
 text-shadow:0 1px 0 rgba(255,230,190,.5),0 -1px 1px rgba(30,12,2,.5);font-weight:800}
html body .pr b,html body .pr span,html body a.slot small{color:#2a1306!important}
html body .pr b{color:#8a3a08!important}
.pr:nth-child(2){--gx:10%;--gy:20%}.pr:nth-child(3){--gx:75%;--gy:60%}.pr:nth-child(4){--gx:30%;--gy:90%}.pr:nth-child(5){--gx:60%;--gy:10%}
.btn{--gx:70%;--gy:30%;color:#7a2d05!important}.btn-o{--gx:20%;--gy:75%}.soc a{--gx:50%;--gy:50%}
html body .pr b{color:#1d0b02!important;text-shadow:0 1px 0 rgba(255,225,180,.6)}
html body .pr span{color:#1d0b02!important}

/* v12: floating sign tabs beside the parted slabs (Build, Mill, Run, Feather) */
.slabnav{position:absolute;inset:0;z-index:6;pointer-events:none}
.slabtab{position:absolute;left:0;top:0;opacity:0;white-space:nowrap;text-decoration:none;color:#1a0b02;font:800 15px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;padding:13px 22px 12px 20px;border-radius:8px;
 background:linear-gradient(180deg,rgba(196,128,56,.40),rgba(120,64,22,.50)),url(../img/grain.webp) var(--gx,30%) var(--gy,40%)/260% auto;
 box-shadow:inset 0 1px 0 rgba(255,236,200,.55),inset 0 -3px 5px rgba(40,16,4,.45),0 0 0 2px #4a2d16,0 0 0 3px rgba(255,214,160,.25),0 16px 22px -12px rgba(0,0,0,.75);
 text-shadow:0 1px 0 rgba(255,230,190,.55),0 -1px 1px rgba(30,12,2,.55);animation:drift 7s ease-in-out infinite}
.slabtab:nth-child(2){--gx:70%;--gy:55%;animation-delay:-2s}.slabtab:nth-child(3){--gx:35%;--gy:85%;animation-delay:-4s}.slabtab:nth-child(4){--gx:55%;--gy:15%;animation-delay:-5.5s}
.slabtab i{font-style:normal;opacity:.7;margin-right:6px}.slabtab b{display:inline-block;margin-left:8px;color:#a8480c;font-size:17px;transition:transform .3s var(--spring)}
.slabtab:hover b,.slabtab:focus-visible b{transform:translateX(6px)}.slabtab:focus-visible{outline:2px solid #ffd9a0;outline-offset:3px}
@media(max-width:760px){.slabtab{font-size:13px;padding:11px 16px 10px 14px}}
@media(prefers-reduced-motion:reduce){.slabtab{animation:none}}
/* v13: the trunk is farther back, lit by low daylight from the left with shadows in the cracks */
body{background:#3a2a1c url(../img/bark-bg-3.webp) 50% 0/max(100%,1100px) auto repeat-y}
body::before{background:url(../img/bark-bg-4.webp) 50% var(--py)/max(100%,900px) auto repeat-y;opacity:.6}

/* v14: sun on the right at about 35 degrees: every object floats and throws its shadow to the left. Bark sits behind, slightly out of focus, so the log reads as standing well in front of the tree. */
html body{position:relative;background:#46331f}
body::after{content:""!important;display:block!important;position:absolute;inset:0;z-index:-2;pointer-events:none;background:url(../img/bark-bg-5.webp) 50% 0/max(100%,1100px) auto repeat-y;filter:blur(1.25px)}
body::before{background:url(../img/bark-bg-6.webp) 50% var(--py)/max(100%,900px) auto repeat-y!important;filter:blur(1.25px);opacity:.5}
@keyframes drift{0%,100%{translate:0 0;rotate:calc(var(--r0,-.5deg) + var(--wob,0deg))}50%{translate:var(--dx,4px) -10px;rotate:calc(var(--r1,.6deg) + var(--wob,0deg))}}
html body .sw,html body .slabtab,html body .pr,html body a.slot,html body .btn,html body .btn-o,html body .soc a{
 box-shadow:inset 0 1px 0 rgba(255,238,205,.75),inset -2px 0 3px rgba(255,236,200,.35),inset 2px -3px 5px rgba(40,16,4,.45),0 0 0 2px #4a2d16,0 0 0 3px rgba(255,214,160,.25),-16px 20px 24px -10px rgba(0,0,0,.68)!important}
html body .card,html body figure.rv,html body .rail figure,html body .fv,html body .enamepanel,html body .ticker{
 box-shadow:inset 0 0 0 1px rgba(255,214,160,.6),inset -10px 0 20px -12px rgba(255,170,80,.4),-22px 28px 46px -18px rgba(0,0,0,.7)!important}
h1,h2,.eyebrow,.cap3d span,.ecap{text-shadow:-4px 5px 14px rgba(0,0,0,.62)}
.hero p,.hero .sub{text-shadow:-2px 3px 10px rgba(0,0,0,.65)!important}
/* the name: polished, high gloss: a bright edge on the sun side, a soft mirror below, a gleam that sweeps across */
.name{-webkit-box-reflect:below -6px linear-gradient(transparent 52%,rgba(255,255,255,.2))}
.name{filter:drop-shadow(-10px 14px 12px rgba(0,0,0,.5)) drop-shadow(1px -1px 0 rgba(255,255,255,.35))}
.name .ch{position:relative;text-shadow:none}
.name .ch::after{content:attr(data-c);position:absolute;left:0;top:0;color:transparent;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.95) 50%,transparent 60%) 140% 0/260% 100% no-repeat;-webkit-background-clip:text;background-clip:text;animation:gleam 7s ease-in-out infinite;animation-delay:calc(var(--i,0)*-.35s)}
@keyframes gleam{0%,50%{background-position:140% 0}80%,100%{background-position:-40% 0}}
/* the eagle is a floating photo, pulled back */
.eaglestage canvas{inset:auto!important;left:50%;top:58%;width:min(74vw,1060px)!important;height:auto!important;aspect-ratio:16/9;transform:translate(-50%,-50%) rotate(-.8deg);border-radius:22px;
 box-shadow:inset 0 0 0 2px rgba(255,214,160,.55),-28px 36px 60px -16px rgba(0,0,0,.75),0 0 0 6px rgba(52,30,14,.85),0 0 0 8px rgba(255,214,160,.25)}
@media(max-aspect-ratio:1/1){.eaglestage canvas{width:90vw!important;aspect-ratio:4/5;top:56%}}
/* fire and trees */
#again h2{overflow:visible}.fw{display:inline-block}.tw{position:relative;display:inline-block}
.tsvg{position:absolute;left:50%;bottom:74%;width:150px;height:175px;margin-left:-75px;pointer-events:none;overflow:visible;transform-origin:50% 100%}
.tsvg path{fill:none;stroke:#8a6238;stroke-width:2;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1s cubic-bezier(.3,.7,.2,1)}
.tsvg .tk{stroke-width:7;stroke:#6e4a28}
.tsvg .nd path{stroke:#2f5a2c;stroke-width:5.2;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
.tsvg .nd path:nth-child(odd){stroke:#46783a}.tsvg .nd path:nth-child(3n){stroke:#264d28}
.tsvg .nd .top{stroke-width:3.4}
.tsvg .tr{transform-box:fill-box;transform-origin:50% 100%;transition:transform 1.1s cubic-bezier(.5,0,.8,.4),opacity .5s ease 1s}
.tsvg .lg{opacity:0;transform-box:fill-box;transform-origin:50% 100%;transition:opacity .6s ease .9s}
.tsvg .lb{fill:#6b4527;stroke:#3a2412;stroke-width:1.5;stroke-dasharray:none;stroke-dashoffset:0}
.tsvg .le{fill:#d9b27a;stroke:#3a2412;stroke-width:1.5}.tsvg .lr{fill:none;stroke:#9a6e3a;stroke-width:1;stroke-dasharray:none;stroke-dashoffset:0}
.tsvg .lc{stroke:#3a2412;stroke-width:1.4;stroke-dasharray:none;stroke-dashoffset:0;opacity:.7}
#again h2.lit .tsvg path{stroke-dashoffset:0}
#again h2.lit .tsvg{animation:sway 4.5s ease-in-out 2.4s infinite}
#again h2.felled .tsvg{animation:none}
#again h2.felled .tsvg .tr{transform:rotate(86deg) scale(.55);opacity:0}
#again h2.felled .tsvg .lg{opacity:1;animation:birl 1.7s ease-in-out 1.1s infinite}
@keyframes sway{0%,100%{rotate:-1.2deg}50%{rotate:1.2deg}}
@keyframes birl{0%,100%{rotate:-7deg;translate:0 0}25%{translate:3px -1px}50%{rotate:7deg;translate:0 0}75%{translate:-3px -1px}}
.fw{position:relative}
.fsvg{position:absolute;left:50%;bottom:62%;width:.9em;height:1.2em;margin-left:-.3em;overflow:visible;pointer-events:none;opacity:0;transition:opacity .35s;filter:drop-shadow(0 0 10px rgba(255,120,20,.85))}
.fsvg path{transform-box:fill-box;transform-origin:50% 100%}
.fsvg .em circle{fill:#ffcf5a;opacity:0}
#again h2.lit .fsvg{opacity:1}
#again h2.lit .f1{animation:lick1 .7s ease-in-out infinite alternate}
#again h2.lit .f2{animation:lick2 .55s ease-in-out infinite alternate}
#again h2.lit .f3{animation:lick3 .45s ease-in-out infinite alternate}
#again h2.lit .em circle{animation:spark 1.4s ease-out infinite}#again h2.lit .em circle:nth-child(2){animation-delay:.35s}#again h2.lit .em circle:nth-child(3){animation-delay:.7s}#again h2.lit .em circle:nth-child(4){animation-delay:1s}
@keyframes lick1{from{transform:scale(.94,.9) skewX(-4deg)}to{transform:scale(1.04,1.1) skewX(5deg)}}
@keyframes lick2{from{transform:scale(1,.85) skewX(6deg)}to{transform:scale(.9,1.15) skewX(-5deg)}}
@keyframes lick3{from{transform:scale(.9,.92)}to{transform:scale(1.06,1.08) skewX(3deg)}}
@keyframes spark{0%{opacity:.9;transform:translateY(0)}100%{opacity:0;transform:translateY(-26px)}}
#again h2.lit .fw{color:#ffb25a;text-shadow:-4px 5px 10px rgba(0,0,0,.6),0 0 14px rgba(255,120,30,.8)}
@media(prefers-reduced-motion:reduce){.name .ch::after,.tsvg,.fw,.fsvg *,.lg{animation:none!important}}

.herowrap.gl .gl{z-index:1}.herowrap .name,.herowrap .blurb,.herowrap .switch,.herowrap .cap3d{position:relative;z-index:3}

/* perf: depth of field is baked into the image; no live blur on a page-tall layer */
body::after{background:url(../img/bark-bg-7.webp) 50% 0/max(100%,1100px) auto repeat-y;filter:none}
body::before{background:url(../img/bark-bg-8.webp) 50% var(--py)/max(100%,900px) auto repeat-y!important;filter:none}
.tsvg{left:calc(100% + 18px);bottom:-4px;width:200px;height:233px;margin-left:0}
@media(max-width:760px){.tsvg{width:130px;height:152px;left:calc(100% + 6px)}}
.prices>p,.prices .note{color:#f0e2c8}
#again h2{position:relative}.tw{position:static}
.tsvg{left:calc(100% + 6px);bottom:-8px;width:210px;height:245px}
@media(max-width:1280px){.tsvg{display:none}}
main p:not(.eyebrow){text-shadow:-2px 3px 10px rgba(0,0,0,.85),0 0 16px rgba(0,0,0,.55)}
.hero p{font-weight:500}
.eaglestage{display:grid;place-items:center}
.eaglestage canvas{position:relative!important;inset:auto!important;left:auto!important;top:auto!important;transform:rotate(-.8deg)!important;margin:0!important;width:min(74vw,1060px)!important;max-height:78svh}
@media(max-aspect-ratio:1/1){.eaglestage canvas{width:90vw!important}}

/* v16: farther again, brighter sun */
body::after{background:linear-gradient(rgba(255,206,140,.06),rgba(255,206,140,.06)),url(../img/bark-bg-7.webp) 50% 0/max(48%,560px) auto repeat;filter:brightness(1.07)}
body::before{background:linear-gradient(rgba(255,206,140,.05),rgba(255,206,140,.05)),url(../img/bark-bg-8.webp) 50% var(--py)/max(44%,520px) auto repeat!important;filter:brightness(1.05)}
.tsvg{width:190px!important;height:222px!important;bottom:-6px!important}

.name .ch::after{text-shadow:none!important}

/* the outro on a phone (interim phone frame until the locked TFH Phone render swap) */
.outro{display:grid;place-items:center;padding:90px max(16px,env(safe-area-inset-left)) 70px;position:relative;z-index:2}
.phonewrap{display:grid;gap:22px;justify-items:center;perspective:1200px}
.tphone{position:relative;width:min(290px,76vw);aspect-ratio:9/19.3;border-radius:46px;padding:11px;background:linear-gradient(145deg,#6b7078,#2a2d33 40%,#14161a 70%,#4a4f57);box-shadow:-26px 34px 60px -14px rgba(0,0,0,.75),inset 0 0 0 2px rgba(255,255,255,.25),inset 0 0 0 5px #0b0c0e;transition:transform .25s ease-out;transform-style:preserve-3d}
.tphone video{width:100%;height:100%;object-fit:cover;border-radius:36px;display:block;background:#1b130c}
.tphone .isl{position:absolute;z-index:3;top:20px;left:50%;width:30%;height:22px;margin-left:-15%;background:#050506;border-radius:14px}
.tphone .snd{position:absolute;z-index:4;left:50%;bottom:26px;transform:translateX(-50%);border:0;border-radius:99px;padding:10px 16px;font:700 13px var(--body,system-ui);color:#2b1a0b;background:rgba(255,240,215,.92);box-shadow:0 8px 20px rgba(0,0,0,.5);cursor:pointer}
.outro .cap{margin:0;font:800 clamp(24px,4vw,40px)/1.1 var(--display,system-ui);color:#fbf1de;letter-spacing:-.02em;text-shadow:-3px 4px 12px rgba(0,0,0,.7)}
@media(prefers-reduced-motion:reduce){.tphone{transition:none}}

/* floating thick-block name */
.name .r{perspective:900px;perspective-origin:50% 40%;transform-style:flat}
.name .ch{transform-style:preserve-3d;position:relative;display:inline-block;will-change:rotate,translate;text-shadow:none!important}
.name .ch .sl{position:absolute;left:0;top:0;font-style:normal;pointer-events:none;text-shadow:none}
.name em .ch{color:var(--amber)}
.name .ch::after{transform:translateZ(.004em)}