/* §05–§11 · join, leaders, initiation, clothing, meetings, arguments, before/after */

/* 05.1 how do I join */
#join .jn-q .sl { text-align: center !important; }
#join .jn-q { left: 96px; top: 190px; width: 1728px; text-align: center; font: 400 340px/.82 var(--f-display); text-transform: uppercase; color: var(--fg); }
#join .jn-mx { left: 720px; top: 800px; width: 480px; text-align: center; }
#join .jn-crt { position: relative; width: 480px; height: 200px; overflow: hidden; }
#join .jn-crt { background: #000; }
#join .jn-crt img { width: 100%; height: 100%; object-fit: contain; }
#join .jn-crt::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.32) 0 2px, transparent 2px 4px); mix-blend-mode: multiply; }

/* 05.2 traits */
#join-traits .jt-h { left: 96px; top: 188px; width: 1560px; }
#join-traits .jt-list { left: 96px; top: 470px; width: 1728px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 56px; }
#join-traits .jt-list li { white-space: nowrap; font: 400 128px/1 var(--f-display); text-transform: uppercase; color: var(--fg); }
#join-traits .jt-list .x::after { height: .07em; top: 50%; }
#join-traits .jt-foot { left: 96px; top: 920px; font-size: 52px; }

/* 05.3 application form */
#join-form .form-card { left: 96px; top: 140px; width: 1140px; padding: 44px 52px 48px; box-sizing: border-box; background: #f0f0f0; border: 2px solid #111111; box-shadow: 18px 18px 0 rgba(17,17,17,.12); }
#join-form .fc-head { display: flex; justify-content: space-between; font: 400 16px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); padding-bottom: 18px; border-bottom: 2px solid #111111; }
#join-form .fc-lead { margin-top: 28px; font-size: 44px; line-height: 1.1; }
#join-form .fc-row { display: grid; grid-template-columns: 76px 1fr; margin-top: 34px; align-items: start; }
#join-form .fc-box { width: 46px; height: 46px; border: 3px solid #111111; position: relative; margin-top: 6px; }
#join-form .fc-box i { position: absolute; left: 10px; top: -4px; width: 20px; height: 34px; border-right: 7px solid var(--acc); border-bottom: 7px solid var(--acc); transform: rotate(40deg); }
#join-form .fc-row .h3 { font-size: 50px; }
#join-form .fc-row .body { font-size: 32px; color: var(--fg2); }
#join-form .fc-side { left: 1330px; top: 300px; width: 494px; }

/* 05.4 paradox */
#join-paradox .jp-q { left: 96px; top: 180px; width: 1560px; }
#join-paradox .jp-split { left: 96px; top: 400px; width: 1728px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 96px; }
#join-paradox .jp-split .h1 { font-size: 250px; }
#join-paradox .jp-foot { left: 96px; top: 900px; width: 1600px; }

/* 06.1 leaders */
#leaders .ld-a { left: 900px; top: 700px; width: 924px; height: 300px; overflow: hidden; z-index: 1; }
#leaders .ld-a svg, #leaders .ld-b svg { display: block; width: 100%; height: 100%; }
#leaders .ld-b { left: 1400px; top: 110px; width: 424px; height: 430px; overflow: hidden; z-index: 3; }
#leaders .ld-h { left: 92px; top: 196px; z-index: 2; font-size: 250px; text-shadow: 0 10px 50px rgba(0,0,0,.6); }
#leaders .ld-cap { left: 96px; top: 980px; z-index: 4; }

/* 06.2 how decisions */
#leaders-how .lh-q { left: 96px; top: 188px; width: 1500px; font-size: 56px; line-height: 1.08; }
#leaders-how .lh-flow { left: 96px; top: 380px; width: 1728px; display: flex; align-items: center; gap: 18px; }
#leaders-how .lh-node { border: 2px solid var(--line2); padding: 22px 28px; min-width: 260px; }
#leaders-how .lh-node.on { border-color: var(--acc); }
#leaders-how .lh-node.on .h4 { color: var(--on-acc); background: var(--acc); display: inline-block; padding: 4px 10px 0; }
#leaders-how .lh-ex { left: 96px; top: 600px; width: 1728px; }
#leaders-how .lh-r { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; padding: 22px 0; border-top: 2px solid var(--line); }

/* 06.3 ladder -> circle */
#leaders-flat .lf-q { left: 96px; top: 178px; width: 1600px; }
#leaders-flat .lf-svg { left: 960px; top: 330px; }
#leaders-flat .lf-svg .nd { fill: var(--bg); stroke: var(--fg); stroke-width: 3; }
#leaders-flat .lf-svg .nd.top { fill: var(--acc); stroke: var(--acc); }
#leaders-flat .lf-svg .eg { stroke: var(--line2); stroke-width: 2; }
#leaders-flat .lf-l1, #leaders-flat .lf-l2, #leaders-flat .lf-l3 { left: 1700px; color: var(--muted); }
#leaders-flat .lf-l1 { top: 384px; } #leaders-flat .lf-l2 { top: 584px; } #leaders-flat .lf-l3 { top: 824px; }
#leaders-flat .lf-cap1 { left: 96px; top: 430px; width: 760px; }
#leaders-flat .lf-cap2 { left: 96px; top: 610px; width: 820px; }

/* 07 initiation */
#init .in-title, #fast .in-title { left: 66px; top: 150px; font: 400 300px/.82 var(--f-display); text-transform: none; color: var(--fg); letter-spacing: -.005em; }
.in-step { left: 96px; top: 520px; width: 1700px; display: grid; grid-template-columns: 150px 1fr; align-items: start; }
.in-num { font: 400 120px/.8 var(--f-display); color: var(--on-acc); background: var(--acc); width: max-content; padding: 10px 16px 0; }
.in-step .h2 { font-size: 76px; line-height: 1.02; }
#init .in-step2 { left: 246px; top: 770px; width: 1500px; font-size: 76px; line-height: 1.02; }
#vow .vw-card { left: 330px; top: 150px; width: 1260px; padding: 60px 72px 56px; box-sizing: border-box; background: #f1f1f1; border: 2px solid #111111; box-shadow: 22px 22px 0 rgba(17,17,17,.13); }
#vow .vw-top { padding-bottom: 18px; border-bottom: 2px solid #111111; }
#vow .vw-body { font-size: 46px; line-height: 1.5; color: #111111; }
#vow .vw-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 0 80px; align-items: end; }
#vow .vw-line { height: 2px; background: #111111; margin-top: 8px; }
#vow .vw-w { font-size: 34px; color: var(--on-acc); background: var(--acc); display: inline-block; padding: 2px 10px 0; }
#vow .vw-note { left: 330px; top: 980px; }
#fast .fa-grid { left: 96px; top: 474px; width: 1290px; height: 440px; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(5, 1fr); gap: 8px; }
#fast .fa-grid i { border: 2px solid var(--line2); position: relative; }
#fast .fa-grid i b { position: absolute; inset: 0; background: var(--acc); transform-origin: 0 100%; }
#fast .fa-grid i::after { content: attr(data-d); position: absolute; left: 8px; top: 6px; font: 400 14px var(--f-mono); color: var(--muted); }
#fast .fa-count { left: 1470px; top: 466px; }
#fast .fa-num { font: 400 280px/.8 var(--f-display); color: var(--fg); margin-top: 12px; }
#fast .fa-num .mut { font-size: 110px; }
#fast .ast { font: 400 .6em var(--f-mono); color: var(--on-acc); background: var(--acc); padding: 0 .1em; vertical-align: super; }
#fast .fa-foot { left: 96px; top: 980px; }
#then-join .tj-h { left: 92px; top: 470px; font-size: 280px; }

/* 08 clothing */
#fashion .fs-h { left: 66px; top: 196px; font: 400 290px/.84 var(--f-display); text-transform: uppercase; color: #0e0e0e; }
#fashion .fs-crop { font-size: 600px; line-height: .8; display: inline-block; }
#fashion .fs-crop { position: relative; color: var(--on-acc); }
#fashion .fs-crop::before { content: ''; position: absolute; left: -.05em; right: -.07em; top: -.04em; bottom: .01em; z-index: -1; background: var(--mkc, var(--acc)); transform: scaleX(var(--hk, 1)) rotate(-1deg); transform-origin: 0 50%; -webkit-mask: var(--marker) 0 0 / 100% 100% no-repeat; mask: var(--marker) 0 0 / 100% 100% no-repeat; }
#fashion-why .fw-def { left: 96px; top: 176px; width: 820px; }
#fashion-why .fw-chips { left: 1000px; top: 190px; width: 824px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px 48px; }
#fashion-why .fw-c { border-top: 4px solid #111111; padding-top: 18px; }
#fashion-why .fw-c .sm { margin-top: 8px; }
#fashion-why .fw-eq { left: 96px; top: 600px; width: 1728px; }
#fashion-why .fw-math { font: 400 150px/.9 var(--f-display); text-transform: uppercase; display: flex; gap: 34px; align-items: baseline; color: #111111; }
#fashion-why .fw-math b { font-weight: 400; color: #000; font-size: 110px; }
#fashion-why .fw-pres { color: var(--on-acc); background: var(--acc); padding: 0 .08em; }
#fashion-why .fw-code { left: 96px; top: 976px; }

/* 09 meetings dossier */
#meetings .ds-sheet { left: 210px; top: 120px; width: 1500px; height: 880px; padding: 54px 70px; box-sizing: border-box; background: #efefef; border: 1px solid rgba(17,17,17,.25); box-shadow: 0 30px 70px rgba(17,17,17,.25); transform: rotate(-.6deg); }
#meetings .ds-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 3px solid #111111; padding-bottom: 18px; }
#meetings .ds-stamp { font: 400 64px/1 var(--f-display); text-transform: uppercase; letter-spacing: .06em; color: var(--on-acc); background: var(--acc); border: 5px solid var(--on-acc); padding: 8px 16px 4px; transform: rotate(4deg); }
#meetings .ds-lead { font-family: var(--f-type); font-size: 40px; line-height: 1.35; color: #111111; }
#meetings .ds-table { width: 100%; border-collapse: collapse; }
#meetings .ds-table th { width: 260px; text-align: left; font: 400 17px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); padding: 14px 0; vertical-align: middle; }
#meetings .ds-table td { font: 400 34px/1.2 var(--f-type); color: #111111; padding: 12px 0; border-bottom: 1px dashed rgba(17,17,17,.25); }
#meetings .ds-final { left: 560px; top: 860px; z-index: 5; font: 400 60px/1 var(--f-type); color: #efefef; background: #111111; padding: 22px 34px 16px; transform: rotate(-1.4deg); }

/* 10 arguments board */
#args .ar-title { left: 96px; top: 176px; }
#args .ar-score { left: 1404px; top: 180px; width: 420px; text-align: right; }
#args .ar-board { display: flex; justify-content: flex-end; align-items: baseline; gap: 14px; font: 400 130px/.9 var(--f-display); color: var(--fg); }
#args .ar-board span { font: 400 18px var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
#args .ar-board i { font-style: normal; color: var(--muted); }
#args .ar-board .ar-bp { color: var(--on-acc); background: var(--acc); padding: 0 .1em; }
#args .ar-by { margin-top: 6px; }
#args .ar-log { left: 96px; top: 420px; width: 1728px; display: flex; flex-direction: column; gap: 14px; }
#args .ar-c { font: italic 400 50px/1.2 var(--f-serif); color: var(--fg2); }
#args .ar-b { text-align: right; }
#args .stamp.sm { font-size: 92px; padding: 14px 22px 6px; border-width: 7px; transform: rotate(-4deg); }
#args .ar-algo { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; color: var(--on-acc); background: var(--acc); }
#args .ar-tq { font: 700 58px/1.1 var(--f-head); text-transform: uppercase; color: var(--fg); margin-top: 6px; }
#args .ar-destroy { font: 400 46px/1.2 var(--f-body); text-transform: none; color: var(--fg); }
.ab-q { left: 96px; top: 180px; width: 1700px; font-size: 76px; }
.ab-grid { left: 96px; top: 360px; width: 1728px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px 96px; }
.ab-b { border-top: 2px solid var(--line2); padding-top: 22px; }
.ab-b .mono-s { display: flex; align-items: center; gap: 14px; }
.ab-also { border-top-color: var(--acc); }

/* 11 before / after */

/* 11.2 rock bottom: one before pic, huge, drained to grey, crushed */

/* 11.3 the ascension edit: ashes -> phoenix -> after */