@font-face{font-family:"Caveat Variable";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/caveat-variable.woff2) format("woff2-variations"),url(/assets/fonts/caveat-variable.woff2) format("woff2")}
@font-face{font-family:"Public Sans Variable";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/public-sans-variable.woff2) format("woff2-variations"),url(/assets/fonts/public-sans-variable.woff2) format("woff2")}
@font-face{font-family:"Courier Prime";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/courier-prime-400.woff2) format("woff2")}
@font-face{font-family:"Courier Prime";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/courier-prime-700.woff2) format("woff2")}

:root{
  --board:#0b0b0c;
  --chalk:#e6e3db;
  --dim:#97928a;
  --red:#c8362c;
  --fur:#cc9c6c;
  --paper:#efe9dd;
  --ink:#191713;
  --rule:#c3b9a6;
  --stamp:#a8342a;
  --ok:#33684a;
  --hand:"Caveat Variable","Segoe Script",cursive;
  --sans:"Public Sans Variable",system-ui,sans-serif;
  --mono:"Courier Prime",ui-monospace,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--board);
  color:var(--chalk);
  font-family:var(--sans);
  background-image:radial-gradient(120% 80% at 50% -10%,#17171a 0%,#0b0b0c00 60%),radial-gradient(90% 60% at 80% 110%,#131316 0%,#0b0b0c00 55%);
  margin:0;
  font-size:17px;
  font-weight:350;
  line-height:1.62;
  overflow-x:hidden;
}
a{color:var(--chalk);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--fur)}
b{font-weight:700}
img{max-width:100%;height:auto;display:block}
button{font:inherit}

/* hero */
.hero{padding:0 0 8px}
.plate{margin-bottom:4px;position:relative}
.plate img{
  width:100%;
  -webkit-mask-image:linear-gradient(90deg,#0000 0,#000 5% 95%,#0000 100%),linear-gradient(#000 80%,#0000 100%);
  mask-image:linear-gradient(90deg,#0000 0,#000 5% 95%,#0000 100%),linear-gradient(#000 80%,#0000 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
.gap{color:var(--chalk);font-family:var(--mono);text-decoration:none;position:absolute;top:58%;left:42.1%;transform:translate(-50%)}
.gap .lead{background:linear-gradient(#e6e3db0d,#e6e3dbbf);width:1px;height:clamp(18px,4vw,46px);margin:0 auto;display:block}
.gap .tag{
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim);text-align:center;white-space:nowrap;
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#080809d6;
  padding:5px 12px 6px;font-size:clamp(7.5px,1.05vw,11px);line-height:1.75;display:block;
  box-shadow:0 0 22px 14px #080809bd;
}
.gap .tag b{color:var(--chalk);letter-spacing:.1em;font-weight:400}
.gap:hover .tag b{color:var(--fur)}
h1{font-family:var(--hand);text-align:center;letter-spacing:.005em;text-shadow:0 0 14px #e6e3db21;margin:0;font-weight:600;line-height:.86}
h1 .l1{color:#cfcbc2;font-size:clamp(38px,9vw,96px);display:block}
h1 .l2{font-size:clamp(58px,15vw,168px);display:block;transform:rotate(-1.1deg)}
.tick{text-align:center;font-family:var(--mono);letter-spacing:.38em;color:var(--fur);text-indent:.38em;margin:6px 0 0;font-size:13px}
.lede{text-align:center;color:#d8d5cd;max-width:30ch;margin:22px auto 0;padding:0 20px;font-size:clamp(17px,2.3vw,21px);line-height:1.5}

main{padding:0 20px}
section,footer{max-width:660px;margin:0 auto}

/* board text sections */
.board-text{padding:54px 0 10px}
.board-text p{color:#c2beb6;margin:0 0 16px}
.board-text p b{color:var(--chalk);font-weight:600}
.cue{font-family:var(--mono);border-top:1px solid #22221f;padding-top:14px;font-size:13px;color:var(--dim)!important;margin-top:26px!important}
h2.chalk{font-family:var(--hand);color:var(--chalk);text-shadow:0 0 12px #e6e3db1a;margin:0 0 18px;font-size:clamp(34px,6.4vw,54px);font-weight:600;line-height:1}

/* comparison table */
.cov{border-collapse:collapse;width:100%;margin:26px 0 20px;font-size:14px}
.cov th{text-align:left;font-family:var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--dim);border-bottom:1px solid #2a2a26;width:50%;padding:0 10px 8px 0;font-size:10.5px;font-weight:400}
.cov td{vertical-align:top;color:#b6b2aa;border-bottom:1px solid #1a1a18;padding:7px 10px 7px 0}
.cov tr.c-none td:first-child{color:var(--fur)}
.cov .nofield{font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--red);font-size:11px}
.cov tr.c-part td:last-child:after{content:" (partly)";font-family:var(--mono);letter-spacing:.08em;color:var(--dim);font-size:10px}
.aside{border-left:2px solid #2c2c28;padding-left:18px;font-size:16px}

/* employment record memo */
.memo-wrap{max-width:660px;margin:0 auto;padding:60px 0 20px}
.memo{
  color:#211f1a;font-family:var(--mono);background:#e3ded1;padding:30px 26px 26px;
  font-size:13.5px;line-height:1.65;transform:rotate(-.35deg);box-shadow:0 24px 50px #0000008c;
}
.memo h2{letter-spacing:.16em;text-transform:uppercase;border-bottom:2px solid #211f1a;margin:0 0 20px;padding-bottom:8px;font-size:13px;font-weight:700}
.record{margin:0;padding:0;list-style:none}
.record li{border-bottom:1px dotted #a89f8c;grid-template-columns:122px 1fr;gap:14px;padding:9px 0;display:grid}
.record b{font-weight:700}
.memo-foot{color:#4a453b;margin:18px 0 0}

/* attachment security bars */
.attach{margin:30px 0 26px;padding:0;list-style:none;position:relative}
.axis{font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#5f5c56;border-top:1px solid #2a2a26;justify-content:space-between;margin:-14px 0 26px;padding-top:7px;font-size:9.5px;display:flex}
.attach li{border-bottom:1px solid #1c1c19;grid-template-columns:1fr auto;align-items:baseline;gap:2px 14px;padding:12px 0 14px;display:grid}
.attach .who{font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--chalk);font-size:11px}
.attach .pct{font-family:var(--mono);color:var(--fur);font-size:15px}
.attach .bar{height:7px;width:calc(var(--p) * 1%);background:repeating-linear-gradient(90deg,#e6e3dbeb 0 3px,#e6e3db9e 3px 5px);grid-column:1/-1;margin:7px 0 6px;box-shadow:0 0 10px #e6e3db2e}
.attach .note{color:var(--dim);grid-column:1/-1;font-size:13px}

/* footer / personnel file */
footer{padding:66px 0 70px}
footer h2{font-family:var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim);border-bottom:1px solid #232320;margin:0 0 14px;padding-bottom:10px;font-size:11px;font-weight:400}
.lines{font-family:var(--mono);margin:0;font-size:13px}
.lines>div{border-bottom:1px solid #171715;grid-template-columns:108px 1fr;gap:12px;padding:7px 0;display:grid}
.lines dt{color:var(--dim);letter-spacing:.1em;text-transform:uppercase;padding-top:2px;font-size:10.5px}
.lines dd{word-break:break-all;margin:0}
.lines .ca{color:var(--fur)}
.srcs{margin:26px 0 0;font-size:13px}
.srcs summary{font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);cursor:pointer;font-size:11px}
.srcs ol{color:var(--dim);padding-left:20px}
.srcs li{margin:9px 0;line-height:1.5}
.srcs a{color:var(--dim)}
.fine{color:#6d6961;margin:26px 0 0;font-size:12.5px;line-height:1.6}

@media (width>=760px){
  .lede{max-width:40ch}
  .board-text{padding:78px 0 10px}
  .memo{padding:40px 44px 34px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* questionnaire sheet */
.sheet-wrap{perspective:1400px;max-width:720px;margin:34px auto 0;padding:0 0 10px}
.sheet{
  background:var(--paper);color:var(--ink);transform-origin:50% 8%;
  transition:transform .21s var(--ease),opacity .21s var(--ease);
  background-image:radial-gradient(120% 90% at 20% 0,#fbf7ee 0%,#fbf7ee00 60%),repeating-linear-gradient(0deg,#19171305 0 1px,#19171300 1px 3px);
  padding:26px 20px 24px;box-shadow:0 30px 70px #0000009e,0 2px #ffffff0f;
}
.sheet.flipped{opacity:.25;transform:rotateX(78deg) scale(.985)}
.sheet-head{justify-content:space-between;align-items:flex-start;gap:18px;display:flex}
.sheet-head h2{letter-spacing:-.01em;margin:0;font-size:clamp(21px,5vw,27px);font-weight:800;line-height:1.05}
.sh-sub{color:#4d483e;max-width:30ch;margin:5px 0 0;font-size:13px;line-height:1.35}
.sh-cite{font-family:var(--mono);color:#6e6759;margin:7px 0 0;font-size:11px}
.mug{flex:none;width:74px;margin:0;position:relative}
.mug img{object-fit:cover;filter:grayscale(.18) contrast(1.04);border:1px solid #cfc6b3;width:74px;height:99px}
.mug:before{content:"";background:#c4b58a6b;width:42px;height:15px;position:absolute;top:-9px;left:50%;transform:translate(-50%) rotate(-2.5deg);box-shadow:inset 0 0 0 1px #ffffff40}
.mug figcaption{font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#6e6759;text-align:center;padding-top:4px;font-size:9px}
.sub{border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);font-family:var(--mono);grid-template-columns:1fr;gap:0;margin:20px 0 0;font-size:12px;display:grid}
.sub>div{grid-template-columns:78px 1fr;gap:10px;padding:6px 0;display:grid}
.sub dt{color:#6e6759;letter-spacing:.1em;text-transform:uppercase;padding-top:2px;font-size:10px}
.sub dd{margin:0}
.canary{font-weight:700}
.rows{counter-reset:q;margin:0;padding:0;list-style:none}
.row{border-bottom:1px solid var(--rule);padding:20px 0 18px}
.q{grid-template-columns:26px 1fr;align-items:start;gap:10px;display:grid}
.qn{font-family:var(--mono);color:#6e6759;border:1px solid var(--rule);place-items:center;width:22px;height:22px;margin-top:2px;font-size:12px;display:grid}
.qt{margin:0;font-size:16.5px;font-weight:500;line-height:1.42}
.meta{font-family:var(--mono);letter-spacing:.09em;text-transform:uppercase;color:#7d7566;flex-wrap:wrap;gap:4px 14px;margin:8px 0 0 36px;font-size:10px;display:flex}
.fac{color:var(--ink)}
.scale{grid-template-columns:repeat(5,1fr);gap:5px;margin:14px 0 0 36px;display:grid}
.anchor{
  appearance:none;border:1px solid var(--rule);color:var(--ink);font-family:var(--mono);cursor:pointer;
  text-align:center;transition:background .16s var(--ease),box-shadow .16s var(--ease),color .16s var(--ease);
  background:#ffffff59;border-radius:0;gap:1px;padding:7px 2px 6px;display:grid;
}
.anchor b{font-size:13px;font-weight:700;line-height:1}
.anchor span{letter-spacing:.04em;color:#6e6759;font-size:9.5px;line-height:1.2}
.anchor:hover{background:#fff}
.anchor.on{color:var(--stamp);box-shadow:0 0 0 2px var(--stamp),inset 0 0 0 1px var(--stamp);background:#fff}
.anchor.on span{color:var(--stamp)}
.verdict{border-left:3px solid var(--stamp);background:#1917130b;margin:16px 0 0 36px;padding:12px 132px 12px 14px;position:relative}
.verdict[hidden]{display:none}
.v-fits{border-left-color:var(--ok)}
.measured{color:#2c2822;margin:0;font-size:14.5px;line-height:1.5}
.src{font-family:var(--mono);color:#7d7566;margin:7px 0 0;font-size:10.5px}
.stamp{
  font-family:var(--mono);letter-spacing:.12em;color:var(--stamp);border:2px solid var(--stamp);opacity:.86;
  white-space:nowrap;padding:3px 7px;font-size:10.5px;font-weight:700;position:absolute;top:12px;right:10px;
  transform:rotate(-5deg);
}
.v-fits .stamp{color:var(--ok);border-color:var(--ok)}
.result{border-top:3px double var(--ink);margin:26px 0 0;padding:22px 0 0}
.big-stamp{
  font-family:var(--mono);letter-spacing:.05em;color:var(--stamp);border:3px solid var(--stamp);opacity:.9;
  margin:0 0 20px;padding:5px 13px;font-size:clamp(19px,5vw,29px);font-weight:700;display:inline-block;
  transform:rotate(-1.5deg);
}
.big-stamp.ok{color:var(--ok);border-color:var(--ok)}
.res-grid{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}
.res-grid div{text-align:center}
.res-grid b{font-family:var(--mono);font-size:30px;line-height:1;display:block}
.res-grid span{color:#6e6759;font-size:11px;line-height:1.3;font-family:var(--mono);margin-top:6px;display:block}
.res-line{margin:20px 0 0;font-size:16px;line-height:1.5}
.reroll{
  appearance:none;background:var(--ink);width:100%;color:var(--paper);font-family:var(--mono);
  letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background .16s var(--ease),transform .16s var(--ease);
  border:0;margin:20px 0 0;padding:15px 14px;font-size:12px;
}
.reroll:hover{background:var(--stamp)}
.reroll:active{transform:translateY(1px)}

@media (width<=699px){
  .scale,.verdict{margin-left:0}
  .verdict{padding:12px 14px 13px}
  .stamp{margin:0 0 9px;display:inline-block;position:static;transform:rotate(-1.6deg)}
}
@media (width>=700px){
  .sheet{padding:40px 42px 34px}
  .mug{width:96px}
  .mug img{width:96px;height:128px}
  .sub{grid-template-columns:repeat(3,1fr);gap:0 20px}
  .sub>div{grid-template-columns:1fr;gap:0;padding:9px 0}
  .qt{font-size:18px}
  .anchor span{font-size:10.5px}
}