/* VIGIL — The Codex (brand guidelines) */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sable);color:var(--argent);font-family:var(--f-chron);font-optical-sizing:auto;font-size:18px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
em{font-style:italic}
.arm{font-family:var(--f-arm);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;line-height:1.5}
.seal-word{font-family:var(--f-seal);font-weight:400;text-transform:lowercase;letter-spacing:0}
.proc{font-family:var(--f-chron);font-stretch:62.5%;font-weight:500;text-transform:uppercase;line-height:.86;letter-spacing:-.005em}
::selection{background:var(--gules);color:var(--sable)}

/* grain */
.grain{position:fixed;inset:-50%;z-index:100;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,2%)}100%{transform:translate(0,0)}}

/* index */
.index{position:fixed;left:0;top:0;bottom:0;width:220px;padding:28px 22px;border-right:1px solid var(--iron-2);background:var(--sable);z-index:20;display:flex;flex-direction:column;gap:28px}
.index-home{display:block;width:92px;color:var(--argent)}
.index-home span,.index-home svg{display:block;width:100%;height:auto}
.index ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.index a{display:flex;gap:12px;align-items:baseline;text-decoration:none;font-family:var(--f-arm);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);padding:6px 0;transition:color .4s var(--settle)}
.index a b{font-family:var(--f-chron);font-stretch:62.5%;font-weight:500;font-size:17px;letter-spacing:0;width:34px;color:#45474c;transition:color .4s var(--settle)}
.index a:hover,.index a.on{color:var(--argent)}
.index a.on b{color:var(--gules)}
main{margin-left:220px}

/* cover */
.cover{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,3vh,28px);padding:72px var(--gutter);overflow:hidden;border-bottom:1px solid var(--iron-2)}
.cover .gouge{position:absolute;inset:0;width:100%;height:100%}
.cover::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 55% at 50% 45%,transparent,var(--sable) 85%);pointer-events:none}
.corner{position:absolute;font-family:var(--f-arm);font-size:11px;letter-spacing:.18em;color:var(--steel);z-index:2}
.tl{top:28px;left:var(--gutter)}.tr{top:28px;right:var(--gutter)}.bl{bottom:28px;left:var(--gutter)}.br{bottom:28px;right:var(--gutter)}
.cover-emblem{position:relative;z-index:2;width:min(540px,62vw,56vh * 1.16)}
.cover-word{position:relative;z-index:2;width:min(300px,46vw,14vh * 2.4);color:var(--argent)}
.cover-sub{position:relative;z-index:2;max-width:520px;text-align:center;color:var(--steel);font-style:italic;margin:0}
.cover .cover-emblem,.cover .cover-word,.cover .cover-sub{opacity:0;transform:translateY(30px);transition:opacity 1.4s var(--stroke),transform 1.4s var(--stroke)}
.cover.in .cover-emblem{opacity:1;transform:none}
.cover.in .cover-word{opacity:1;transform:none;transition-delay:.25s}
.cover.in .cover-sub{opacity:1;transform:none;transition-delay:.45s}

/* chapters */
.ch{position:relative;padding:140px var(--gutter) 140px;border-bottom:1px solid var(--iron-2)}
.ch.light{background:var(--argent);color:var(--sable);border-color:var(--bone)}
.ch.light .arm{color:#3d3e42}
.ch.blood{background:var(--gules);color:var(--sable);border-color:var(--sanguine)}
.ch-head{display:grid;grid-template-columns:auto 1fr;column-gap:36px;align-items:end;margin-bottom:64px;border-bottom:1px solid currentColor;padding-bottom:28px;border-color:color-mix(in srgb,currentColor 18%,transparent)}
.ch-head .num{grid-row:span 2;font-family:var(--f-chron);font-stretch:62.5%;font-size:clamp(90px,12vw,190px);line-height:.8;color:var(--gules);font-weight:500}
.ch.blood .ch-head .num{color:var(--sable)}
.ch-head h2{margin:0;font-family:var(--f-chron);font-stretch:62.5%;font-weight:500;font-size:clamp(48px,7vw,112px);line-height:.86;text-transform:uppercase;letter-spacing:-.005em}
.ch-head .kicker{margin:10px 0 0;font-family:var(--f-arm);font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.65}
.lede{font-size:clamp(22px,2.2vw,32px);line-height:1.3;max-width:980px;margin:0 0 70px}
.ch > *{opacity:0;transform:translateY(40px);transition:opacity 1.1s var(--stroke),transform 1.1s var(--stroke)}
.ch.in > *{opacity:1;transform:none}
.ch.in > *:nth-child(2){transition-delay:.08s}.ch.in > *:nth-child(3){transition-delay:.16s}.ch.in > *:nth-child(4){transition-delay:.24s}.ch.in > *:nth-child(5){transition-delay:.32s}

.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:70px}
.cols2{display:grid;grid-template-columns:repeat(2,1fr);gap:48px;margin-top:40px}
.cols3 h4,.cols2 h4{margin:0 0 12px}
.cols3 p{margin:0;font-size:17px;line-height:1.55}

/* I — registers */
.registers{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--iron-2);border:1px solid var(--iron-2)}
.reg{padding:0 0 32px;background:var(--sable)}
.reg-art{aspect-ratio:4/3;display:grid;place-items:center;margin-bottom:26px;overflow:hidden}
.reg-art > *{width:62%}
.reg-steel .reg-art{background:radial-gradient(70% 70% at 50% 40%,#202125,#050505)}
.reg-blood .reg-art{background:var(--gules)}
.reg-seal .reg-art{background:var(--bone)}
.reg-seal .reg-art img{width:52%;filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}
.reg h3{margin:0 26px 8px;font-family:var(--f-chron);font-weight:400;font-size:28px}
.reg h3 .seal-word{font-size:40px;color:var(--gules)}
.reg .arm{margin:0 26px 16px;color:var(--steel)}
.reg p:last-child{margin:0 26px;font-size:16px;line-height:1.55;color:#c9c7c1}
.takeleave{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:2px;background:var(--iron-2)}
.takeleave > div{background:var(--iron);padding:30px 26px}
.takeleave h4{margin:0 0 14px;color:var(--gules)}
.takeleave ul{margin:0;padding:0;list-style:none}
.takeleave li{padding:9px 0;border-top:1px solid var(--iron-2);font-size:17px}
.takeleave li::before{content:"◆";color:var(--gules);font-size:9px;margin-right:12px;vertical-align:2px}

/* II — essence */
.bigidea{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(260px,1fr);gap:20px 60px;align-items:end;margin-bottom:80px}
.bigidea .arm{grid-column:1/-1;color:var(--gules)}
.proclaim{margin:0;font-family:var(--f-chron);font-stretch:62.5%;font-weight:500;font-size:clamp(80px,13vw,220px);line-height:.84;text-transform:uppercase;letter-spacing:-.005em}
.proclaim.sm{font-size:clamp(54px,7vw,110px)}
.bigidea p:last-child{font-size:22px;line-height:1.4;max-width:520px;margin:0;color:#c9c7c1}
.platform{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0;border-top:1px solid var(--iron-2)}
.platform > div{padding:28px 28px 28px 0;border-bottom:1px solid var(--iron-2)}
.platform > div:not(:nth-child(3n)){border-right:1px solid var(--iron-2)}
.platform > div:not(:nth-child(3n+1)){padding-left:28px}
.platform dt{font-family:var(--f-arm);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gules);margin-bottom:10px}
.platform dd{margin:0;font-size:19px;line-height:1.45}
.traits{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;margin-top:70px}
.traits .seal-word{font-size:44px;display:block;margin-bottom:8px;line-height:1}
.traits p{margin:0;font-size:15px;color:var(--steel);line-height:1.5}

/* III — name */
.dict{max-width:900px;margin:0 auto 20px;text-align:center}
.dict-word{width:min(620px,80%);margin:0 auto 26px;color:var(--sable)}
.dict ol{text-align:left;margin:34px auto 0;padding-left:24px;font-size:22px;line-height:1.45;max-width:760px}
.dict li{margin-bottom:12px}

/* IV — myth */
.myth{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.myth-text p{font-size:21px;line-height:1.55;margin:0 0 22px;color:#d9d7d1}
.dropcap::first-letter{font-family:var(--f-chron);font-stretch:62.5%;font-weight:600;float:left;font-size:118px;line-height:.74;margin:10px 14px 0 0;color:var(--gules)}
.anatomy{position:relative;width:min(460px,90%);margin:0 auto 34px;color:var(--argent)}
.pin{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:22px;height:22px;border-radius:50%;background:var(--gules);color:var(--sable);font-family:var(--f-arm);font-size:10px;font-weight:700;display:grid;place-items:center;box-shadow:0 0 0 3px var(--sable)}
.myth-hound h4{margin:0 0 10px;color:var(--gules)}
.myth-hound p{margin:0 0 20px;font-size:17px;color:#c9c7c1}
.myth-hound{margin:0}
.anat{margin:0;padding:0;list-style:none;counter-reset:a;columns:2;column-gap:28px}
.anat li{counter-increment:a;break-inside:avoid;padding:9px 0;border-top:1px solid var(--iron-2);font-size:14px;color:var(--steel);line-height:1.4}
.anat li::before{content:counter(a);font-family:var(--f-arm);font-size:10px;color:var(--gules);margin-right:10px}
.anat b{display:block;color:var(--argent);font-weight:500;font-size:15px}

/* V — mark */
.marks{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--iron-2);border:1px solid var(--iron-2)}
.m{margin:0;background:var(--sable);display:flex;flex-direction:column}
.m.light{background:var(--argent);color:var(--sable)}
.m.red{background:var(--gules);color:var(--sable)}
.m-art{aspect-ratio:1;display:grid;place-items:center;padding:16%}
.m-art > *{max-height:100%;width:auto}
.m-emblem .m-art > *{width:84%}
.m-fav .m-art > *{width:36%}
.m-word .m-art > *,.m-horiz .m-art > *{width:100%}
.m-seal .m-art > *{width:82%}
.m-stack .m-art > *{width:66%}
.m figcaption{padding:20px 22px 24px;border-top:1px solid color-mix(in srgb,currentColor 14%,transparent)}
.m figcaption b{display:block;font-family:var(--f-arm);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;margin-bottom:6px}
.m figcaption span{font-size:15px;opacity:.75;line-height:1.45}
.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:60px}
.rule-card{border:1px solid var(--iron-2);padding:26px}
.rule-card h4{margin:0 0 20px;color:var(--gules)}
.rule-card p{margin:18px 0 0;font-size:15px;color:var(--steel)}
.clear{display:grid;place-items:center;padding:10px}
.clear-box{width:200px;padding:24px;outline:1px dashed var(--gules);outline-offset:0;background:repeating-linear-gradient(45deg,transparent 0 6px,rgba(225,37,27,.08) 6px 7px)}
.spec{width:100%;border-collapse:collapse;font-size:15px}
.spec td{padding:10px 0;border-top:1px solid color-mix(in srgb,currentColor 14%,transparent);vertical-align:top}
.spec td:first-child{font-family:var(--f-arm);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);width:42%;padding-right:16px}
.fills{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.fills span{padding:22px 12px;font-family:var(--f-arm);font-size:11px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--iron-2)}
.chrome-fill{background:var(--chrome);color:var(--sable)}
.misuse-h{margin:70px 0 18px;color:var(--gules)}
.misuse{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;background:var(--iron-2)}
.misuse figure{margin:0;background:var(--sable);padding:22px 18px 16px;position:relative}
.misuse figure::after{content:"";position:absolute;inset:10px;background:linear-gradient(to top right,transparent calc(50% - 1px),var(--gules) calc(50% - 1px),var(--gules) calc(50% + 1px),transparent calc(50% + 1px));opacity:.85;pointer-events:none}
.mu{width:60%;margin:0 auto 14px}
.mu-rainbow{color:#7cf}
.mu-rainbow svg rect{fill:#7cf}
.mu-busy{background:repeating-conic-gradient(#444 0 25%,#999 0 50%) 0 0/18px 18px;padding:6px}
.mu-cute svg{filter:drop-shadow(0 0 8px #ff7ad9) saturate(3)}
.mu-cute{color:#ff9ad5;border-radius:50%;background:#ffe3f3;padding:10px}
.misuse figcaption{font-family:var(--f-arm);font-size:10px;letter-spacing:.14em;text-transform:uppercase;text-align:center;color:var(--steel)}

/* VI — tinctures */
.swatches{display:grid;grid-template-columns:repeat(20,1fr);gap:2px;background:var(--iron-2);border:1px solid var(--iron-2)}
.sw{grid-column:span 5;background:var(--c);color:var(--t);min-height:300px;padding:24px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.sw b{font-family:var(--f-chron);font-stretch:62.5%;font-weight:500;font-size:52px;line-height:1;text-transform:uppercase}
.sw span{font-size:15px;opacity:.8}
.sw code{font-family:var(--f-arm);font-size:10.5px;letter-spacing:.06em;opacity:.8;margin-top:10px}
.sw-chrome{background:var(--chrome)}
.sw.sm{grid-column:span 4;min-height:140px}
.sw.sm b{font-size:30px}
.ratio{display:flex;height:64px;margin-top:2px;border:1px solid var(--iron-2)}
.ratio div{display:flex;align-items:center;padding:0 14px;font-family:var(--f-arm);font-size:11px;letter-spacing:.14em;text-transform:uppercase;min-width:0;overflow:hidden;white-space:nowrap}

/* VII — type */
.voices{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--iron-2);border:1px solid var(--iron-2)}
.voice{background:var(--sable);padding:30px 28px}
.voice .arm{color:var(--gules)}
.voice .sp{margin:34px 0 10px;line-height:.95}
.v-chron .sp{font-family:var(--f-chron);font-stretch:62.5%;font-weight:500;font-size:64px;text-transform:uppercase;letter-spacing:-.005em;line-height:.86}
.v-chron .sp-i{font-family:var(--f-chron);font-style:italic;font-size:26px;margin:0 0 20px;color:#c9c7c1}
.v-seal .sp{font-family:var(--f-seal);font-size:92px}
.v-arm .sp{font-family:var(--f-arm);font-size:14px;letter-spacing:.16em;line-height:1.9}
.voice p:last-child{font-size:15px;color:var(--steel);margin:20px 0 0}
.scale{width:100%;margin-top:60px;border-collapse:collapse}
.scale th{text-align:left;padding:0 0 14px;color:var(--steel);font-weight:500}
.scale td{padding:18px 16px 18px 0;border-top:1px solid var(--iron-2);vertical-align:middle;font-size:15px;color:var(--steel)}
.scale td:last-child{color:var(--argent)}
.t-chron-caps{font-family:var(--f-chron);font-stretch:62.5%;font-weight:500;font-size:56px !important;text-transform:uppercase;line-height:.86}
.t-seal{font-family:var(--f-seal);font-size:48px !important}
.t-chron{font-family:var(--f-chron);font-size:30px !important}
.t-prose{font-size:20px !important}

/* VIII — voice */
.laws{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:2px solid var(--sable)}
.laws > div{padding:26px 22px 26px 0}
.laws > div + div{padding-left:22px;border-left:1px solid var(--bone)}
.lnum{font-family:var(--f-chron);font-stretch:62.5%;font-weight:500;font-size:64px;line-height:1;color:var(--gules)}
.laws h4{font-family:var(--f-chron);font-stretch:62.5%;font-weight:600;font-size:30px;margin:14px 0 10px;line-height:.95;text-transform:uppercase}
.laws p{margin:0;font-size:15px;line-height:1.5;color:#3d3e42}
.lexicon{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin:70px 0}
.lexicon h4{margin:0 0 14px}
.words{font-size:28px;line-height:1.5;margin:0}
.struck{color:#8d8a83;text-decoration:line-through;text-decoration-color:var(--gules);text-decoration-thickness:2px}
.rewrites{width:100%;border-collapse:collapse}
.rewrites th{text-align:left;padding-bottom:14px}
.rewrites td{padding:18px 20px 18px 0;border-top:1px solid var(--bone);font-size:21px;vertical-align:top}
.rewrites td:first-child{color:#8d8a83;text-decoration:line-through;text-decoration-color:rgba(225,37,27,.6);width:45%}
.rewrites td:last-child{font-weight:500}

/* IX — systems */
.sys{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--iron-2);border:1px solid var(--iron-2)}
.sys-card{background:var(--sable);padding:26px}
.sys-art{height:180px;display:grid;place-items:center;margin-bottom:22px;background:var(--iron)}
.roman{font-family:var(--f-chron);font-stretch:62.5%;font-weight:500;font-size:130px;color:var(--argent)}
.loz{font-size:64px;color:var(--gules)}
.corners{position:relative;font-style:normal}
.corners i{position:absolute;font-style:normal;font-family:var(--f-arm);font-size:9px;letter-spacing:.14em;color:var(--steel)}
.corners i:nth-child(1){top:12px;left:12px}.corners i:nth-child(2){top:12px;right:12px}.corners i:nth-child(3){bottom:12px;left:12px}.corners i:nth-child(4){bottom:12px;right:12px;color:var(--gules)}
.eng > div{width:62%}
.sys-card h4{margin:0 0 10px;color:var(--gules)}
.sys-card p{margin:0;font-size:15px;color:var(--steel)}
.gouge-feature{position:relative;margin-top:2px;height:560px;border:1px solid var(--iron-2);overflow:hidden;background:#060606}
.gouge-feature canvas{position:absolute;inset:0;width:100%;height:100%}
.df-text{position:absolute;left:0;bottom:0;max-width:520px;padding:34px;background:linear-gradient(to top right,rgba(11,11,12,.96) 40%,rgba(11,11,12,0))}
.df-text h3{font-family:var(--f-seal);font-size:84px;margin:0 0 10px;line-height:1;text-transform:lowercase}
.df-text p{margin:0 0 22px;font-size:16px;color:#c9c7c1}
.btn-ghost{background:none;border:1px solid var(--argent);color:var(--argent);font-family:var(--f-arm);font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:14px 20px;cursor:pointer;transition:background .5s var(--settle),color .5s var(--settle)}
.btn-ghost:hover{background:var(--argent);color:var(--sable)}

/* X — motion */
.motion{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--iron-2);border:1px solid var(--iron-2)}
.mo-card{background:var(--sable);padding:26px}
.mo-card h4{margin:0 0 20px;color:var(--gules)}
.mo-card code{display:block;font-family:var(--f-arm);font-size:10.5px;color:var(--steel);margin:18px 0 10px}
.mo-card p{margin:0;font-size:15px;color:var(--steel)}
.track{height:140px;position:relative;background:var(--iron);border-left:1px solid var(--iron-2)}
.track::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--iron-2)}
.puck{position:absolute;top:50%;left:12px;width:22px;height:22px;margin-top:-11px;background:var(--argent);transform:rotate(45deg)}
.play .puck.stroke{animation:mv 2.4s var(--stroke) infinite alternate}
.play .puck.settle{animation:mv 2.4s var(--settle) infinite alternate}
@keyframes mv{0%,15%{left:12px}85%,100%{left:calc(100% - 34px)}}
.cut-demo{height:140px;position:relative;background:var(--argent);overflow:hidden;display:grid;place-items:center}
.cut-demo span{font-family:var(--f-seal);font-size:64px;color:var(--sable);text-transform:lowercase}
.cut-a,.cut-b{position:absolute;inset:-20%;background:var(--iron);z-index:2}
.cut-a{clip-path:polygon(0 0,100% 0,100% 21%,0 79%)}
.cut-b{clip-path:polygon(0 79%,100% 21%,100% 100%,0 100%)}
.play .cut-a{animation:cutA 3s var(--stroke) infinite}
.play .cut-b{animation:cutB 3s var(--stroke) infinite}
@keyframes cutA{0%,20%{transform:none}55%,85%{transform:translate(-30%,-52%)}100%{transform:none}}
@keyframes cutB{0%,20%{transform:none}55%,85%{transform:translate(30%,52%)}100%{transform:none}}
.embers-demo{height:140px;position:relative;background:radial-gradient(60% 80% at 50% 100%,#2a0805,#050505);overflow:hidden}
.embers-demo i{position:absolute;bottom:-6px;width:4px;height:4px;border-radius:50%;background:#ff7a3c;box-shadow:0 0 8px 2px rgba(225,37,27,.8);animation:rise 4s linear infinite}
.embers-demo i:nth-child(1){left:12%;animation-delay:-.5s}.embers-demo i:nth-child(2){left:26%;animation-delay:-2.1s;animation-duration:5s}.embers-demo i:nth-child(3){left:38%;animation-delay:-1.2s}.embers-demo i:nth-child(4){left:51%;animation-delay:-3.3s;animation-duration:3.4s}
.embers-demo i:nth-child(5){left:63%;animation-delay:-.2s;animation-duration:4.6s}.embers-demo i:nth-child(6){left:72%;animation-delay:-2.7s}.embers-demo i:nth-child(7){left:84%;animation-delay:-1.7s;animation-duration:5.4s}.embers-demo i:nth-child(8){left:92%;animation-delay:-3.9s}
@keyframes rise{0%{transform:translate(0,0);opacity:0}15%{opacity:1}50%{transform:translate(6px,-80px)}100%{transform:translate(-4px,-160px);opacity:0}}
.sounds{margin-top:60px}
.sounds h4{margin:0 0 18px;color:var(--gules)}
.snd-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.snd{text-align:left;background:var(--iron);border:1px solid var(--iron-2);color:var(--argent);padding:22px;cursor:pointer;font:inherit;transition:border-color .4s,background .4s}
.snd b{display:block;font-family:var(--f-seal);font-weight:400;font-size:34px;margin-bottom:6px;text-transform:lowercase}
.snd span{font-size:14px;color:var(--steel)}
.snd:hover{border-color:var(--argent)}
.snd.hit{animation:hit .6s var(--settle)}
.snd.on{border-color:var(--gules);background:#1c0907}
@keyframes hit{0%{background:var(--gules)}100%{background:var(--iron)}}

/* XI — product */
.arms-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:end;margin-bottom:70px}
.arms-hero .arm{color:var(--gules)}
.arms-hero p:last-child{font-size:19px;color:#c9c7c1;max-width:560px}
.spec.big td{font-size:17px;padding:13px 0}
.sub-h{margin:50px 0 16px;color:var(--gules)}
.mercy-table{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;background:var(--iron-2);border:1px solid var(--iron-2)}
.mercy-table > div{background:var(--sable);padding:22px 18px;display:flex;flex-direction:column;gap:8px}
.mercy-table b{font-family:var(--f-chron);font-stretch:62.5%;font-weight:500;font-size:46px;line-height:1;color:var(--steel)}
.mercy-table .seal-word{font-size:34px;line-height:1}
.mercy-table code{font-family:var(--f-arm);font-size:11px;color:var(--gules)}
.mercy-table p{margin:0;font-size:14px;color:var(--steel)}
.mercy-table .nq{background:var(--gules);color:var(--sable)}
.mercy-table .nq b,.mercy-table .nq code,.mercy-table .nq p{color:var(--sable)}

/* XII — doctrine */
.refusals{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid var(--sable)}
.refusals li{padding:26px 22px 34px;border-left:1px solid rgba(11,11,12,.25);border-bottom:1px solid rgba(11,11,12,.25)}
.refusals li:nth-child(4n+1){border-left:0;padding-left:0}
.refusals b{font-family:var(--f-chron);font-stretch:62.5%;font-weight:500;font-size:60px;line-height:1}
.refusals h4{font-family:var(--f-chron);font-stretch:62.5%;font-weight:600;font-size:28px;margin:16px 0 10px;line-height:.95;text-transform:uppercase}
.refusals p{margin:0;font-size:14px;line-height:1.45}
.commerce{margin-top:70px;max-width:900px}
.commerce h4{margin:0 0 12px}
.commerce p{font-size:24px;line-height:1.4;margin:0}

/* XIII — applications */
.apps{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--iron-2);border:1px solid var(--iron-2)}
.app{margin:0;background:var(--sable);display:flex;flex-direction:column}
.stage{aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden;background:#111214}
.tin-stage{background:radial-gradient(80% 80% at 50% 30%,#2a2b2f,#070707)}
.cert-stage{background:#141416}
.app figcaption{padding:22px;border-top:1px solid var(--iron-2)}
.app figcaption b{display:block;font-family:var(--f-arm);font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px}
.app figcaption span{font-size:15px;color:var(--steel)}
.tin-lid{width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#2c2d31,#0e0e10 70%);box-shadow:inset 0 0 0 6px #1b1c1f,inset 0 0 0 8px #3a3b40,inset 0 0 0 14px #121315,0 30px 60px rgba(0,0,0,.8),0 0 0 1px #2c2d31;display:grid;place-items:center;position:relative}
.tin-lid::after{content:"";position:absolute;right:-6%;bottom:4%;width:24%;aspect-ratio:1;border-radius:50%;background:url("../logo/vigil-seal.svg") center/cover;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6));transform:rotate(-14deg)}
.tin-lid > div{width:70%}
.post{height:86%;aspect-ratio:4/5;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3%;padding:7% 6%;container-type:size;box-shadow:0 30px 60px rgba(0,0,0,.6)}
.post.red{background:var(--gules);color:var(--sable)}
.post.black{background:#070707;color:var(--argent);border:1px solid var(--iron-2)}
.post-c{position:absolute;font-family:var(--f-arm);font-size:2.3cqh;letter-spacing:.16em}
.post-c.tl{top:4cqh;left:5cqw}.post-c.tr{top:4cqh;right:5cqw}.post-c.bl{bottom:4cqh;left:5cqw}.post-c.br{bottom:4cqh;right:5cqw}
.post > *{flex-shrink:0}
.post-art{width:58cqw}
.post-wm{width:28cqw}
.post-h{font-family:var(--f-chron);font-stretch:62.5%;font-weight:600;font-size:15cqh;text-transform:uppercase;line-height:.84;text-align:center;margin:0}
.post-seal{font-family:var(--f-seal);font-size:16cqh;margin:0;line-height:.95;text-align:center}
.post-small{font-family:var(--f-arm);font-size:2.6cqh;letter-spacing:.14em;text-transform:uppercase;color:var(--gules);margin:0}
.cert{width:76%;aspect-ratio:1.414;background:var(--bone);color:var(--sable);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:6%;position:relative;box-shadow:0 30px 60px rgba(0,0,0,.6);container-type:inline-size}
.cert::before{content:"";position:absolute;inset:4%;border:1px solid rgba(11,11,12,.4);outline:3px double rgba(11,11,12,.35);outline-offset:-8px;pointer-events:none}
.cert-seal{position:absolute;width:20%;right:4%;bottom:-6%;transform:rotate(-10deg);filter:drop-shadow(0 6px 10px rgba(0,0,0,.4))}
.cert .arm{font-size:1.9cqw;margin:0}
.cert-name{font-family:var(--f-seal);font-size:9cqw;margin:3cqw 0 2cqw;line-height:1}
.cert-line{font-size:2.6cqw;margin:0 0 3cqw;font-style:italic;line-height:1.4}

/* XIV — armoury */
.files{list-style:none;margin:0;padding:0;border-top:1px solid var(--iron-2)}
.files li{display:flex;flex-wrap:wrap;gap:10px 28px;padding:18px 0;border-bottom:1px solid var(--iron-2)}
.files a{font-family:var(--f-arm);font-size:12px;letter-spacing:.08em;color:var(--steel);text-decoration:none;transition:color .3s}
.files a::before{content:"↓ ";color:var(--gules)}
.files a:hover{color:var(--argent)}
.colophon{margin-top:120px;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.colo-word{width:min(360px,60%)}
.colophon .arm{color:var(--steel)}
.back{text-decoration:none;color:var(--gules) !important}

/* responsive */
@media (max-width:1100px){
  .registers,.voices,.marks{grid-template-columns:1fr 1fr}
  .registers > :last-child:nth-child(odd),.voices > :last-child:nth-child(odd){grid-column:1/-1}
  .bigidea{grid-template-columns:1fr}
  .platform{grid-template-columns:1fr 1fr}
  .platform > div{padding:22px 22px 22px 0 !important;border-right:0 !important}
  .traits{grid-template-columns:repeat(3,1fr)}
  .laws,.refusals{grid-template-columns:repeat(2,1fr)}
  .laws > div + div,.refusals li + li{border-left:0;padding-left:0}
  .sys,.motion{grid-template-columns:1fr 1fr}
  .misuse{grid-template-columns:repeat(3,1fr)}
  .mercy-table{grid-template-columns:repeat(4,1fr)}
  .myth,.arms-hero{grid-template-columns:1fr;gap:50px}
}
@media (max-width:860px){
  .index{position:sticky;top:0;width:auto;height:auto;bottom:auto;flex-direction:row;align-items:center;padding:10px 16px;gap:16px;border-right:0;border-bottom:1px solid var(--iron-2);overflow-x:auto}
  .index-home{width:24px;flex:none}
  .index ol{flex-direction:row;gap:16px}
  .index a{white-space:nowrap}
  .index a b{width:auto}
  main{margin-left:0}
  .ch{padding:90px 16px}
  .ch-head{grid-template-columns:1fr;row-gap:6px}
  .ch-head .num{grid-row:auto}
  .registers,.voices,.marks,.takeleave,.cols3,.cols2,.lexicon,.apps,.snd-row,.sys,.motion,.rules{grid-template-columns:1fr}
  .swatches{grid-template-columns:1fr 1fr}.sw,.sw.sm{grid-column:auto}.sw:not(.sm){grid-column:1/-1}
  .platform,.traits,.laws,.refusals,.mercy-table{grid-template-columns:1fr}
  .misuse{grid-template-columns:repeat(2,1fr)}
  .bigidea{grid-template-columns:1fr}
  .anat{columns:1}
  .scale{display:block;overflow-x:auto}
  .corner{font-size:9px}
  .rewrites td{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .ch > *,.cover .cover-emblem,.cover .cover-word,.cover .cover-sub{opacity:1;transform:none}
}

/* woodcut plates */
.plates-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin:10px 0 24px}
.plates-grid figure{margin:0}
.plates-grid .print-sheet{background:var(--bone);padding:12%;box-shadow:0 30px 60px rgba(0,0,0,.55);transform:rotate(-1.2deg)}
.plates-grid figure:nth-child(even) .print-sheet{transform:rotate(1.1deg)}
.plates-grid img{width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.plates-grid figcaption{margin-top:14px;color:var(--steel)}
.plates-note{max-width:820px;font-size:17px;color:#c9c7c1;margin:0 0 50px}
@media (max-width:860px){.plates-grid{grid-template-columns:1fr 1fr}}

/* no scrollbars, anywhere: the page still scrolls, the bar is never drawn */
html,body,*{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar,*::-webkit-scrollbar{display:none;width:0;height:0}