/* chapters: the page alternates dark and light, one object runs through it */
.ch{position:relative;padding:110px 0}
.ch>.wrap{position:relative;z-index:2}
.ch.dark{background:#000;color:#fff}
.ch.light{background:#efefec;color:#0a0a0a}
.ch.flutebg:before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 2px,rgba(0,0,0,.06) 3px 16px,rgba(255,255,255,.035) 17px 19px,transparent 20px 26px),linear-gradient(180deg,rgba(255,255,255,.04),transparent 40%)}
.ch.light .mono{color:#555}
.ch.light .big{color:#0a0a0a}
.ch.light .lead2,.ch.light .intro{color:#333}
.ch .head-s{max-width:820px}
.ch .head-s .big{font-size:76px;line-height:.96;letter-spacing:-.055em;margin-top:14px}
.ch.light .roster .r{border-color:rgba(0,0,0,.14)}
.ch.light .roster .r:last-child{border-bottom-color:rgba(0,0,0,.14)}
.ch.light .whyl .num{-webkit-text-stroke:1.2px rgba(0,0,0,.35)}
.ch.light .whyl span.t{color:#333}
.ch.light .dia line,.ch.light .dia path{stroke:rgba(0,0,0,.4)}
.ch.light .dia circle{fill:rgba(0,0,0,.05);stroke:rgba(0,0,0,.5)}
.ch.light .dia circle.lit{fill:#0a0a0a;stroke:none}
.ch.light .dia text{fill:#0a0a0a}
.ch.light .dia text.m{fill:#555}

/* one certificate, one size, every state */
.cert.fx{width:min(600px,100%);aspect-ratio:600/570;overflow:hidden}
.cert.fx .in{height:100%;justify-content:space-between}
.cert{transition:background .5s ease,color .5s ease,box-shadow .5s ease}
.cert[data-state="notice"]{background:rgba(255,255,255,.95);color:#0a0a0a;text-shadow:none;box-shadow:inset 0 1.5px 0 #fff,inset 0 -14px 20px rgba(0,0,0,.1),0 40px 80px rgba(0,0,0,.55)}
.cert[data-state="declined"]{background:rgba(190,190,190,.95);color:#0a0a0a;text-shadow:none;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.8),inset 0 -14px 20px rgba(0,0,0,.14),0 40px 80px rgba(0,0,0,.55)}
.cert[data-state="notice"] .cert-logo,.cert[data-state="declined"] .cert-logo{filter:invert(1)}
.cert[data-state="notice"] .seal,.cert[data-state="declined"] .seal{box-shadow:inset 0 2px 1px rgba(255,255,255,.8),inset 0 -2px 3px rgba(0,0,0,.25),0 0 0 1px rgba(0,0,0,.4)}
.cert[data-state="notice"] .ex,.cert[data-state="declined"] .ex{color:#333}
.cert[data-state="notice"] .cert-title,.cert[data-state="declined"] .cert-title{text-shadow:none}
.cert[data-state="invalid"] .cv,.cert[data-state="invalid"] .cert-title{opacity:.3}
.seal.long{font-size:9.5px;letter-spacing:.1em;text-align:center;line-height:1.3;padding:0 8px}
.pin-stage .cert[data-state="notice"] [data-screen],.pin-stage .cert[data-state="declined"] [data-screen],.pin-stage .cert[data-state="notice"] .cgrid>div,.pin-stage .cert[data-state="declined"] .cgrid>div{opacity:1}

/* the dark stage a certificate sits on when the chapter is light */
.stage-dark{border-radius:44px;padding:64px 40px;display:flex;flex-direction:column;align-items:center;gap:22px;background:linear-gradient(160deg,#171717,#000 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 40px 80px rgba(0,0,0,.25);color:#fff}
.stage-dark .stagew{min-height:0;width:100%}
.two{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:72px;align-items:center}
.two .big{font-size:60px}
.tamper{margin-top:30px;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.tamper .btn2{height:52px;padding:0 26px;border-radius:999px;border:0;background:#0a0a0a;color:#fff;font:600 15px 'Geist',sans-serif;cursor:pointer}
.tamper .out{font:500 14px 'Geist Mono',monospace;color:#333;min-height:20px}
.tamper .refline{font:500 16px 'Geist Mono',monospace;letter-spacing:.04em;color:#0a0a0a}

/* closing chapter */
.ch .band{padding:60px 0 20px}
.ch.dark .tiles .tile{min-height:190px}

@media (max-width:980px){
  .ch{padding:64px 0}
  .ch .head-s .big{font-size:42px}
  .two{grid-template-columns:minmax(0,1fr);gap:36px}
  .two .big{font-size:38px}
  .cert.fx{aspect-ratio:auto}
  .stage-dark{padding:32px 16px;border-radius:30px}
}