/* The Threefold Cord — bespoke series page.
   Art direction from the series' own slides: a blue and pink three-strand rope on violet velvet,
   white distressed wide lettering. Grounds: violet velvet → hot magenta → night (the braid) →
   electric blue (Oneness) → hot pink (New Birth) → bone (Holiness) → velvet (get it) → night.
   Lime #b6ff00 is SMR's accent only (label ticks, focus, header). */
@view-transition{navigation:auto}
:root{
  --deep:#1d035f;--violet:#230284;--night:#10023a;--mag:#b10fd6;--glow:#d013fa;--hot:#fa30fe;
  --blue:#2f3cf0;--pink:#ff3f8e;--bone:#f4eefa;--ink:#1d035f;--plum:#7a12d6;
  --rope:#474cdc;--cyan:#a9f0ff;--blush:#ffd0ec;--white:#fff;--mute:#d9cff5;--lime:#b6ff00;
  --g:clamp(16px,4.45vw,64px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--deep);color:var(--white);font-family:Manrope,Arial,sans-serif;overflow-x:hidden}
a{color:inherit}
img{max-width:100%;display:block}
figure,blockquote{margin:0}
:focus-visible{outline:3px solid var(--lime);outline-offset:4px}
.skip{position:absolute;left:16px;top:-80px;z-index:60;background:var(--lime);color:#101111;padding:12px 18px;font-weight:800;text-decoration:none}
.skip:focus{top:12px}
.wide{font-family:Archivo,'Arial Black',Impact,sans-serif;font-stretch:125%;font-weight:900;text-transform:uppercase;letter-spacing:-.025em;line-height:.86;margin:0}
.ol{color:transparent;-webkit-text-stroke:.03em currentColor}
.ol{-webkit-text-stroke-color:var(--white)}
.label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;margin:0;display:flex;align-items:center;gap:12px;color:var(--mute)}
.label i{display:inline-block;width:10px;height:10px;background:var(--lime);flex:none}
.src{font-size:12px;line-height:1.6;opacity:.82;margin:18px 0 0}

/* buttons (the shared SMR set) */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:56px;padding:14px 26px;font:800 13px/1.4 Manrope,Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;transition:transform .12s,background .15s,color .15s,border-color .15s}
.btn:hover{transform:translateY(-2px)}
.btn.line{border:1px solid rgba(255,255,255,.7);color:#fff}.btn.line:hover{border-color:var(--lime);color:var(--lime)}
.btn.sm{min-height:44px;padding:10px 18px;font-size:11px}
.btn.soon{margin:0;border:0;color:#fff;cursor:default;background:rgba(255,255,255,.12)}
.btn.soon:hover{transform:none}
.note{margin:10px 0 0;font-size:13px;color:var(--mute)}

/* header */
.top{position:absolute;top:0;left:0;right:0;z-index:20;height:84px;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:0 var(--g);background:linear-gradient(rgba(16,2,58,.6),rgba(16,2,58,0))}
.nav{display:flex;gap:32px;margin-left:auto}
.nav a{text-decoration:none;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;min-height:44px;display:flex;align-items:center;color:#fff}
.nav a[aria-current]{box-shadow:inset 0 -3px 0 var(--lime)}
.nav a:hover{color:var(--lime)}
.brand{display:flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;color:#fff}
.brand-mark{height:40px;width:40px;display:block;flex:none}
.brand-name{font-size:11px;font-weight:800;letter-spacing:.16em;line-height:1.3;text-transform:uppercase;white-space:nowrap}
.brand-lg{gap:14px}.brand-lg .brand-mark{height:52px;width:52px}.brand-lg .brand-name{font-size:12px}

/* 1 · hero */
.hero{position:relative;z-index:3;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;background:var(--deep)}
.hero-art{position:absolute;left:0;right:0;top:0;bottom:15vh;overflow:hidden}
.hero-art picture,.hero-art img{width:100%;height:100%}
.hero-art img{object-fit:cover;object-position:50% 40%}
.hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(29,3,95,0) 0,rgba(29,3,95,0) 70%,rgba(29,3,95,.75) 88%,var(--deep) 100%)}
.crumbs{position:absolute;top:92px;left:var(--g);z-index:4}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;gap:10px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.crumbs li+li::before{content:"/";margin-right:10px;opacity:.6}
.crumbs a{text-decoration:none;display:inline-flex;min-height:44px;align-items:center}
.crumbs a:hover{color:var(--lime)}
.crumbs [aria-current]{display:inline-flex;min-height:44px;align-items:center;color:var(--mute)}
.hero-band{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto 300px;column-gap:56px;align-items:end;padding:0 var(--g) 46px}
.title{font-size:clamp(36px,3.7vw,60px);margin:14px 0 0;text-shadow:0 2px 30px rgba(16,2,58,.6)}
.tagline{margin:16px 0 0;max-width:620px;font-size:17px;line-height:1.6;color:#efe8ff}
.tagline .hl{color:var(--blush);font-weight:800}
.hero-act{padding-bottom:4px}
.price{margin:0 0 14px;font:900 14px/1 Manrope,Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase}
.price strong{font-family:Archivo,sans-serif;font-stretch:125%;font-size:44px;letter-spacing:-.02em;display:block}
.hero-cover{position:relative;align-self:end;margin-bottom:-170px;transform:rotate(4deg);transform-origin:50% 100%}
.hero-cover img{width:100%;height:auto;view-transition-name:cover-the-threefold-cord;box-shadow:0 40px 70px rgba(16,2,58,.65),0 0 90px rgba(250,48,254,.45);outline:1px solid rgba(255,255,255,.2)}

/* 2 · the verse */
.verse{position:relative;z-index:1;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden;
  background:radial-gradient(ellipse 70% 60% at 80% 100%,rgba(250,48,254,.55),transparent 70%),linear-gradient(var(--deep) 0,var(--mag) 220px,var(--mag) 100%)}
.verse-rope{position:absolute;top:0;bottom:0;right:-4vw;width:52vw;display:flex;flex-direction:column;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 36%);mask-image:linear-gradient(to right,transparent 0,#000 36%)}
.verse-rope img{position:absolute;right:0;width:100%;height:auto}
.verse-rope img:first-child{top:0;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.verse-rope img:last-child{bottom:0;-webkit-mask-image:linear-gradient(transparent,#000 45%);mask-image:linear-gradient(transparent,#000 45%)}
.verse-rope::before{content:"";position:absolute;inset:0 0 auto;height:200px;background:linear-gradient(var(--deep),rgba(29,3,95,0));z-index:1}
.verse-in{position:relative;z-index:2;padding:220px var(--g) 140px;width:100%}
.verse .label{color:#fff}
.verse-big{font-size:clamp(54px,9.4vw,170px);margin:26px 0 0;color:#fff;text-shadow:0 6px 40px rgba(29,3,95,.35)}
.verse-big span{display:inline}
.verse-big .ol{display:block;-webkit-text-stroke:.028em #fff}
.verse-q{margin:46px 0 0;max-width:640px}
.verse-q p{margin:0;font:700 clamp(22px,2.1vw,32px)/1.38 Manrope,Arial,sans-serif}
.verse-q em{font-style:normal;background:var(--white);color:var(--mag);padding:0 .18em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.verse-q footer{margin-top:16px;font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}

/* 3 · the braid (signature motion) */
.braid{position:relative;background:var(--night)}
.js .braid{height:300vh}
.braid-pin{position:relative;height:100vh;height:100svh;overflow:hidden;
  background:radial-gradient(ellipse 60% 50% at 50% 108%,rgba(250,48,254,.5),transparent 70%),radial-gradient(ellipse 50% 40% at 50% -6%,rgba(71,76,220,.55),transparent 70%),linear-gradient(rgba(16,2,58,.62),rgba(16,2,58,.62)),url(/assets/series/the-threefold-cord/velvet.webp) center/cover no-repeat,var(--deep)}
.js .braid-pin{position:sticky;top:0}
.braid-pin::before{content:"";position:absolute;inset:0 0 auto;height:160px;background:linear-gradient(var(--mag),rgba(177,15,214,0));z-index:0;opacity:var(--topfade,1)}
.braid-word{position:absolute;left:0;right:0;top:46%;transform:translateY(-50%);margin:0;text-align:center;font-family:Archivo,'Arial Black',sans-serif;font-stretch:125%;font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.84;font-size:clamp(64px,12.2vw,250px);color:#f3ecff;z-index:1;pointer-events:none}
.braid-word span{display:block;position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);transition:opacity .5s,transform .7s cubic-bezier(.2,.8,.2,1)}
.braid-word .w0{opacity:1}
.braid-word .w1{opacity:0;transform:translateY(-44%)}
.braid-pin.joined .braid-word .w0{opacity:0;transform:translateY(-56%)}
.braid-pin.joined .braid-word .w1{opacity:1;transform:translateY(-50%)}
.braid-word .w2{opacity:0;transform:translateY(-44%);color:transparent;-webkit-text-stroke:.025em #f3ecff}
.braid-pin.loose .braid-word .w0,.braid-pin.loose .braid-word .w1{opacity:0;transform:translateY(-56%)}
.braid-pin.loose .braid-word .w2{opacity:1;transform:translateY(-50%)}
.braid-pin::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(rgba(16,2,58,0),rgba(16,2,58,.8) 64%,var(--night));z-index:1;pointer-events:none}
.braid-cv{position:absolute;inset:0;width:100%;height:100%;z-index:2;cursor:pointer;-webkit-tap-highlight-color:transparent}
.no-js .braid-cv{display:none}
.braid-tags{position:absolute;inset:0;z-index:3;pointer-events:none}
.braid-tags span{position:absolute;left:0;top:0;white-space:nowrap;font:800 15px/1 'Barlow Condensed',Impact,sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:8px 12px;color:var(--ink);will-change:transform,opacity}
.braid-tags .t0{background:#8fd4ff}.braid-tags .t1{background:#ff8cbc}.braid-tags .t2{background:#f4eefa}
.no-js .braid-tags{display:none}
.braid-ui{position:absolute;left:0;right:0;bottom:0;z-index:4;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:48px;align-items:end;padding:120px var(--g) 36px;pointer-events:none}
.braid-ui>*{pointer-events:auto}
.braid-h{text-shadow:0 1px 10px rgba(16,2,58,.9);grid-column:1;margin:0;font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);max-width:520px;line-height:1.6}
.braid-cap{grid-column:1;margin:12px 0 0;max-width:min(640px,calc(var(--ax) - var(--half) - var(--g) - 24px));text-shadow:0 2px 18px rgba(16,2,58,.9),0 1px 3px rgba(16,2,58,.8);font:800 clamp(19px,1.9vw,28px)/1.3 Manrope,Arial,sans-serif;min-height:2.6em}
.braid-cap cite{font-style:normal;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--blush);white-space:nowrap}
.braid-btns{grid-column:2;grid-row:1/span 2;display:flex;gap:10px}
.sb{appearance:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 20px;border:2px solid var(--c);background:var(--c);color:var(--ink);font:800 20px/1 'Barlow Condensed',Impact,sans-serif;letter-spacing:.05em;text-transform:uppercase;transition:background .2s,color .2s,transform .12s}
.sb i{width:12px;height:12px;border-radius:50%;background:var(--ink);flex:none;transition:background .2s,box-shadow .2s}
.sb:hover{transform:translateY(-2px)}
.sb[aria-pressed="false"]{background:transparent;color:#fff;text-decoration:line-through;text-decoration-thickness:2px}
.sb[aria-pressed="false"] i{background:transparent;box-shadow:inset 0 0 0 2px var(--c)}
.sb.s0{--c:#8fd4ff}.sb.s1{--c:#ff8cbc}.sb.s2{--c:#f4eefa}
.no-js .braid-btns{display:none}
.braid-hint{text-shadow:0 1px 10px rgba(16,2,58,.9);grid-column:2;margin:12px 0 0;font-size:12px;color:var(--mute);max-width:420px;text-align:right;line-height:1.5}
.hint-touch{display:none}
@media (hover:none),(pointer:coarse){.hint-fine{display:none}.hint-touch{display:inline}}
.no-js .braid-hint{display:none}
.no-js .braid-pin{background:radial-gradient(ellipse 50% 60% at 50% 50%,rgba(16,2,58,0),rgba(16,2,58,.7)),url(/assets/series/the-threefold-cord/rope-bottom.webp) center/cover no-repeat,var(--deep)}

/* the cord: one rope from the braid to the cover. The canvases are drawn by the JS; content
   sits above it (z 2), section grounds below it. Lanes: --ax is the slide's rope centre;
   --half is half the rope plus its shadow; text keeps --gap clear of the rope. */
main{position:relative}
.cordway{position:absolute;left:0;top:0;width:100%;height:0;overflow:hidden;pointer-events:none;z-index:1}
.cordway canvas{position:absolute;display:block}
.cp{position:absolute;left:0;top:0;width:1px;height:1px;visibility:hidden;pointer-events:none}
.tc{--ax:49.26vw;--half:7.6vw;--gap:36px}
.wk>*:not(.cp),.get>*:not(.cp){position:relative;z-index:2}

/* week sections, shared */
.wk{position:relative;overflow:hidden}
.wk .label{color:inherit}
.wk-word{font-size:clamp(64px,14.8vw,280px);margin:18px 0 0}
.big-q p{margin:0;font-family:Archivo,'Arial Black',sans-serif;font-stretch:125%;font-weight:800;text-transform:uppercase;letter-spacing:-.015em;font-size:clamp(28px,3.1vw,50px);line-height:1}
.big-q em{font-style:normal}
.big-q footer{margin-top:14px;font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.wk-text p{font-size:17px;line-height:1.7;max-width:560px}
.wk-text>p:not(.src):not(.iam){margin:22px 0 0}
.sheet{position:relative}
.sheet img{width:100%;height:auto;background:#fff;box-shadow:0 30px 60px rgba(16,2,58,.45),0 2px 0 rgba(0,0,0,.1)}
.sheet figcaption{margin-top:12px;font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.wk-body{display:grid;align-items:start}

/* 4 · Oneness · electric blue. The slide is shown whole; its rope is the cord. Its alpha is
   baked: the velvet fades softly, the rope only over rows where the drawn cord is
   pixel-identical to the slide's own rope (week1-cord-*.webp). */
.wk1{background:linear-gradient(var(--night) 0,var(--blue) 46vw,var(--blue) 100%);padding-bottom:180px}
.wk1 .wk-art img{width:100%;height:auto;aspect-ratio:16/9}
.wk1 .cp-art,.wk1 .cp-out{top:56.25vw}
.wk1 .cp-end{top:auto;bottom:120px}
.wk1 .wk-head{margin-top:-15.5vw;padding:0 var(--g)}
.wk1 .wk-word{text-shadow:0 0 60px rgba(250,48,254,.35)}
.wk1 .wk-body{grid-template-columns:calc(var(--ax) - var(--half) - var(--gap) - var(--g)) calc(var(--half) * 2 + var(--gap) * 2) minmax(0,1fr);padding:56px 0 0 var(--g)}
.wk1 .wk-text{grid-column:1}
.wk1 .sheet{grid-column:3;margin:40px -9vw 0 0;transform:rotate(3deg)}
.wk1 .big-q em{color:var(--cyan)}
.iam{margin:40px 0 0;font-family:Archivo,'Arial Black',sans-serif;font-stretch:125%;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(30px,4.2vw,64px);line-height:.95;color:transparent;-webkit-text-stroke:1.5px #fff}
.wk1 .from{color:#eef0ff}
.wk1 .sheet figcaption{color:#fff}

/* 5 · New Birth · hot pink. Rope lane at 41vw: the page lies left of it, the text right. */
.wk2{--lx:41vw;background:linear-gradient(var(--blue) 0,var(--pink) 220px,var(--pink) 100%);color:var(--ink);padding:170px 0 300px}
.wk2 .cp-top{top:280px}.wk2 .cp-end{top:auto;bottom:320px}
.wk2 .wk-head{padding:0 var(--g)}
.wk2 .wk-word{font-size:clamp(60px,11.6vw,220px);color:#fff;text-shadow:0 6px 40px rgba(29,3,95,.25)}
.wk2 .wk-body{grid-template-columns:calc(var(--lx) - var(--half) - var(--gap) - var(--g)) calc(var(--half) * 2 + var(--gap) * 2) minmax(0,1fr);padding:64px var(--g) 0}
.wk2 .sheet{grid-column:1;grid-row:1;margin:20px 0 0 calc(-1 * var(--g) - 5vw);transform:rotate(-3deg)}
.wk2 .wk-col{grid-column:3;grid-row:1}
.triads{margin-top:0}
.tri-l{margin:0;font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.tri{margin:10px 0 28px;display:flex;flex-wrap:wrap;gap:6px 0;font-family:Archivo,'Arial Black',sans-serif;font-stretch:125%;font-weight:900;text-transform:uppercase;font-size:clamp(20px,2.2vw,36px);letter-spacing:-.02em;line-height:1}
.tri span{white-space:nowrap}
.tri span+span::before{content:"";display:inline-block;width:.9em;height:.16em;margin:0 .32em;vertical-align:.3em;background:repeating-linear-gradient(115deg,var(--ink) 0 3px,transparent 3px 6px)}
.tri:last-of-type span{color:#fff}
.acts{max-width:560px}
.acts p{margin:0;font:600 18px/1.6 Manrope,Arial,sans-serif}
.acts footer{margin-top:10px;font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.shout{margin:40px 0 0;font-family:Archivo,'Arial Black',sans-serif;font-stretch:125%;font-weight:900;text-transform:uppercase;font-size:clamp(28px,3vw,52px);line-height:.95;letter-spacing:-.02em;max-width:820px}
.shout em{font-style:normal;color:#fff}
.wk2 .src{color:var(--ink)}
.wk2 .sheet figcaption{color:var(--ink)}

/* 6 · Holiness · bone. Rope lane at 59vw: text left of it, the page right. */
.wk3{--lx:59vw;background:linear-gradient(var(--pink) 0,var(--bone) 220px,var(--bone) 100%);color:var(--ink);padding:200px 0 300px}
.wk3 .cp-top{top:420px}.wk3 .cp-end{top:auto;bottom:260px}
.wk3 .wk-head{padding:0 var(--g)}
.wk3 .wk-word{font-size:clamp(58px,13.8vw,260px);color:var(--ink)}
.wk-sub{margin:.06em 0 0;font-size:clamp(34px,6.6vw,120px);color:var(--plum)}
.wk3 .wk-body{grid-template-columns:calc(var(--lx) - var(--half) - var(--gap) - var(--g)) calc(var(--half) * 2 + var(--gap) * 2) minmax(0,1fr);padding:70px 0 0 var(--g)}
.wk3 .wk-text{grid-column:1}
.wk3 .sheet{grid-column:3;margin:30px -8vw 0 0;transform:rotate(4deg)}
.wk3 .big-q em{color:var(--plum)}
.wk3 .strand-q{font-weight:700;border-left:4px solid var(--plum);padding-left:18px}
.wk3 .src{color:var(--ink)}
.wk3 .sheet figcaption{color:var(--ink)}

/* 7 · get it: a calm close on velvet. The cord comes back to centre, runs behind the headline
   and ends behind the cover, which hangs on it. */
.get{position:relative;overflow:hidden;padding:150px var(--g) 150px;text-align:center;
  background:linear-gradient(var(--bone) 0,rgba(244,238,250,0) 260px),linear-gradient(to top,var(--deep) 0,rgba(29,3,95,0) 240px),linear-gradient(rgba(29,3,95,.6),rgba(29,3,95,.6)),url(/assets/series/the-threefold-cord/velvet.webp) center/cover no-repeat,var(--deep)}
.get .cp-top{top:260px}.get .cp-in{top:262px}
.get-head .label{justify-content:center;color:#fff;text-shadow:0 1px 3px rgba(16,2,58,.9),0 0 16px rgba(16,2,58,.9)}
.get-h{font-size:clamp(46px,6.4vw,118px);margin:22px 0 0;text-shadow:0 4px 30px rgba(16,2,58,.55)}
.get-h .ol{display:block}
.get-grid{display:grid;grid-template-columns:minmax(0,1fr) calc(14vw + 100px) minmax(0,1fr);column-gap:64px;align-items:start;margin-top:70px;text-align:left}
.get-cover{grid-column:2;grid-row:1}
.get-cover img{width:100%;height:auto;box-shadow:0 34px 70px rgba(10,1,40,.6),0 0 0 1px rgba(255,255,255,.14)}
.get-act{grid-column:1;grid-row:1;justify-self:end;width:100%;max-width:440px;padding-top:6px}
.get-kit{grid-column:3;grid-row:1;max-width:440px;padding-top:6px}
.facts{margin:44px 0 0}
.facts div{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:13px 0;border-top:1px solid rgba(255,255,255,.18)}
.facts div:last-child{border-bottom:1px solid rgba(255,255,255,.18)}
.facts dt{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);padding-top:3px}
.facts dd{margin:0;font-size:15px}
.kit-h{margin:0;font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.kit{list-style:none;margin:14px 0 0;padding:0}
.kit li{display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:center;padding:12px 0;border-top:1px solid rgba(255,255,255,.18)}
.kit li:last-child{border-bottom:1px solid rgba(255,255,255,.18)}
.kit b{font-family:Archivo,'Arial Black',sans-serif;font-stretch:125%;font-weight:900;font-size:50px;line-height:.9;color:var(--blush)}
.kit span{font-size:15px;line-height:1.55}

/* 8 · more series */
.more{background:linear-gradient(rgba(29,3,95,1),var(--night));padding:110px var(--g) 130px}
.more-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.more-head h2{font-size:clamp(36px,4.4vw,72px)}
.more-row{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.more-row a{display:block;text-decoration:none}
.more-row img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .3s}
.more-row a:hover img{transform:translateY(-6px) rotate(-1deg)}
.more-row .k{display:block;margin-top:16px;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.more-row .t{display:block;margin-top:6px;font:800 30px/1 'Barlow Condensed',Impact,sans-serif;text-transform:uppercase}

/* footer */
.foot{background:var(--night);padding:20px var(--g) 40px}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding:40px 0;border-top:1px solid rgba(255,255,255,.14)}
.fbrand p{margin:16px 0 0;font-size:14px;color:var(--mute)}
.fnav{display:flex;flex-direction:column}
.fnav a{text-decoration:none;min-height:44px;display:flex;align-items:center;font-size:14px;color:var(--mute)}
.fnav a:hover{color:var(--lime)}
.fline{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12px;color:var(--mute);padding-top:20px;border-top:1px solid rgba(255,255,255,.14)}

/* ≤1100: the cord runs down the right edge between the giant words, mostly off-canvas;
   text keeps --edge clear of it. It comes to centre for the slide and for the close. */
@media (max-width:1100px){
  .nav{gap:20px}
  .hero-band{grid-template-columns:minmax(0,1fr) 220px;row-gap:24px}
  .hero-act{grid-column:1;grid-row:2}
  .hero-cover{grid-column:2;grid-row:1/span 2;margin-bottom:-120px}
  .tc{--edge:84px}
  .wk1 .cp-out{top:calc(56.25vw + 520px)}
  .wk1 .cp-end{bottom:60px}
  .wk .wk-body{grid-template-columns:minmax(0,1fr);padding:48px var(--edge) 0 var(--g)}
  .wk .wk-body>*{grid-column:1;grid-row:auto}
  .wk1 .wk-body{padding-top:300px}
  .wk1 .sheet{width:84%;margin:64px 0 0 -6vw;transform:rotate(-3deg)}
  .wk2{padding-bottom:160px}
  .wk2 .cp-top{top:0}.wk2 .cp-end{bottom:0}
  .wk2 .wk-body{padding-top:56px}
  .wk2 .wk-col{order:-1}
  .wk2 .sheet{width:84%;margin:64px 0 0 -6vw}
  .wk3{padding-bottom:180px}
  .wk3 .cp-top{top:0}.wk3 .cp-end{bottom:0}
  .wk3 .sheet{width:84%;margin:64px 0 0 -6vw;transform:rotate(-4deg)}
  .wk-text p,.acts p{text-shadow:0 1px 14px rgba(16,2,58,.35)}
  .wk3 .wk-text p,.wk2 .acts p{text-shadow:none}
  .get{padding-top:330px}
  .get .cp-top{top:-60px}.get .cp-in{top:330px}
  .get-grid{grid-template-columns:minmax(0,1fr);row-gap:56px;margin-top:64px;justify-items:center}
  .get-cover{grid-column:1;grid-row:1;width:300px}
  .get-act,.get-kit{grid-column:1;grid-row:auto;justify-self:center;max-width:520px;width:100%}
}
@media (min-width:701px) and (max-aspect-ratio:1/1){
  .hero-cover,.crumbs{display:none}
  .hero-art img{view-transition-name:cover-the-threefold-cord;object-position:50% 42%}
  .hero-band{grid-template-columns:1fr}
  .hero-act{grid-column:1;grid-row:auto;margin-top:24px}
}
@media (max-width:900px){
  .nav{display:none}
  .more-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* phone */
@media (max-width:700px){
  .top{height:72px;gap:12px}
  .brand{gap:9px}.brand-mark{height:36px;width:36px}.brand-name{font-size:9.5px;letter-spacing:.13em}
  .crumbs{display:none}
  .hero{justify-content:flex-start}
  .hero-art{position:relative;bottom:auto}
  .hero-art img{height:auto;aspect-ratio:3/4;view-transition-name:cover-the-threefold-cord}
  .hero-art::after{background:linear-gradient(to bottom,rgba(29,3,95,.55) 0,rgba(29,3,95,0) 16%,rgba(29,3,95,0) 72%,var(--deep) 100%)}
  .hero-cover{display:none}
  .hero-band{display:block;margin-top:-18vw;padding-bottom:64px}
  .title{font-size:clamp(34px,10.4vw,52px);line-height:.9}
  .tagline{font-size:16px}
  .hero-act{margin-top:28px}
  .price strong{font-size:36px}
  .btn.soon{width:100%;justify-content:center;text-align:center}

  .verse{min-height:0;align-items:flex-start}
  .verse-rope{width:62vw;right:-14vw;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 45%);mask-image:linear-gradient(to right,transparent 0,#000 45%);opacity:.9}
  .verse-in{padding:150px var(--g) 110px}
  .verse-big{font-size:14.6vw}
  .verse-big span{display:block}
  .verse-q{margin-top:34px}
  .verse-q p{font-size:21px;text-shadow:0 1px 18px rgba(120,0,150,.6)}

  .js .braid{height:260vh}
  .braid-word{font-size:15vw;top:40%;z-index:3;text-shadow:0 4px 30px rgba(16,2,58,.55)}
  .braid-tags span{font-size:13px;padding:7px 9px}
  .braid-ui{grid-template-columns:1fr;padding:90px var(--g) 22px}
  .braid-btns{grid-column:1;grid-row:auto;margin-top:16px;gap:8px}
  .sb{flex:1 1 0;justify-content:center;padding:0 8px;font-size:17px;min-height:48px;gap:7px}
  .sb i{width:9px;height:9px}
  .braid-hint{grid-column:1;text-align:left;margin-top:10px}
  .braid-cap{font-size:18px;min-height:3.9em;max-width:none}

  .tc{--edge:62px}
  .wk-word{font-size:14.6vw}
  .wk1{background:linear-gradient(var(--night) 0,var(--blue) 120vw,var(--blue) 100%);padding-bottom:100px}
  .wk1 .wk-art img{aspect-ratio:3/4}
  .wk1 .cp-art{top:133.33vw}
  .wk1 .cp-out{top:calc(133.33vw + 400px)}
  .wk1 .wk-head{margin-top:-26vw}
  .wk1 .wk-body{padding-top:440px}
  .wk1 .sheet{width:112vw;margin:48px 0 0 -40vw}
  .iam{font-size:11vw}
  .wk-text p{font-size:16px}
  .wk2{padding-top:130px}
  .wk2 .wk-word{font-size:21vw}
  .tri{font-size:5.9vw}
  .wk2 .sheet{width:112vw;margin:44px 0 0 -40vw}
  .wk3{padding:150px 0 140px}
  .wk3 .wk-word{font-size:13.2vw}
  .wk-sub{font-size:9.6vw}
  .wk3 .sheet{width:112vw;margin:44px 0 0 -40vw}

  .get{padding:300px var(--g) 100px}
  .get .cp-top{top:-90px}.get .cp-in{top:290px}
  .get-h{font-size:13.4vw}
  .get-cover{width:62vw}
  .facts div{grid-template-columns:96px 1fr}
  .kit li{grid-template-columns:52px 1fr}
  .kit b{font-size:42px}
  .more{padding:90px var(--g) 100px}
  .more-row{gap:18px}
  .more-row .t{font-size:24px}
  .fgrid{grid-template-columns:1fr;gap:10px}
}
@media (max-width:380px){
  .top .btn.sm span{display:none}
  .brand-name{font-size:8.5px}
  .sb{font-size:15px}
}

@media (prefers-reduced-motion:reduce){
  .js .braid{height:auto}
  .js .braid-pin{position:relative}
  .braid-word span{transition:none}
  .btn,.sb,.more-row img{transition:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* Free-download button */
.btn.freecode{background:#b6ff00;color:#0b0a10;cursor:pointer}
.btn.freecode:hover{background:#fff;color:#0b0a10}
@media (max-width:700px){.btn.freecode{width:100%;justify-content:center;text-align:center}}