@page { size: 210mm 297mm; margin: 0; }
:root{--paper:var(--cc-paper);--red:var(--cc-red);--blue:var(--cc-blue);--ink:var(--cc-ink);--mute:var(--cc-mute);
  --disp:var(--cc-font-display);--body:var(--cc-font-body);--mono:var(--cc-font-mono)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:794px;height:1123px;background:var(--paper)}
body{position:relative;overflow:hidden;font-family:var(--body);color:var(--ink);
  background:radial-gradient(1200px 700px at 10% 0%,var(--cc-paper-hi) 0%,transparent 60%),
   radial-gradient(900px 600px at 100% 100%,var(--cc-paper-lo) 0%,transparent 60%),var(--paper);}
::selection{background:var(--red);color:var(--cc-on-red)}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.2;mix-blend-mode:multiply;z-index:50;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 .25  0 0 0 0 .2  0 0 0 0 .15  0 0 0 .55 0'/></filter><rect width='300' height='300' filter='url(%23n)'/></svg>");}
.band-top{position:absolute;left:0;top:0;width:794px;height:32px;background:var(--red);color:var(--cc-on-red);
  font:700 10.5px/32px var(--mono);letter-spacing:.16em;text-transform:uppercase;padding:0 24px;display:flex;justify-content:space-between}
.band-top::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:3px;background:var(--blue)}
/* hero */
.logo{position:absolute;left:12px;top:46px;width:432px}
.logo img{width:100%;display:block}
.tag{position:absolute;left:22px;top:364px;width:422px;display:flex;align-items:center;gap:10px;
  font:700 10.5px var(--mono);letter-spacing:.2em;color:var(--blue);text-transform:uppercase;white-space:nowrap}
.tag i{flex:1;height:0;border-top:3px double var(--red)}
.tag b{color:var(--red);font-size:13px}
.hero-text{position:absolute;left:456px;top:50px;width:320px}
.kick{display:inline-block;font:700 9.4px/1.5 var(--mono);letter-spacing:.1em;color:var(--red);text-transform:uppercase;margin-bottom:9px;
  border:1.5px solid var(--red);border-radius:2px;padding:3px 7px;transform:rotate(-1.2deg);transform-origin:left center}
h1{text-transform:uppercase;letter-spacing:.01em}
h1 .a{display:block;font:400 var(--cc-fs-hero)/.92 var(--disp);color:var(--red)}
h1 .b{display:block;margin-top:8px;font:400 var(--cc-fs-hero-sub)/1 var(--disp);color:var(--blue)}
.what{margin-top:11px;padding:9px 12px;border-radius:var(--cc-radius);background:var(--blue);color:var(--cc-on-blue);
  font:500 11.2px/1.5 var(--body);box-shadow:var(--cc-shadow)}
.lead{margin-top:9px;font:400 11px/1.48 var(--body)}
.lead b{color:var(--red)}
.lead b.co{color:var(--blue)}
/* ID cards */
.stack{position:absolute;left:24px;right:24px;top:412px;bottom:63px;display:flex;flex-direction:column;justify-content:space-between}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.card{position:relative;background:var(--cc-paper-hi);border:2px solid var(--ink);border-radius:var(--cc-radius-lg);height:78px;overflow:hidden;box-shadow:var(--cc-shadow)}
.card header{height:22px;background:var(--blue);color:var(--cc-on-blue);font:700 9.4px/22px var(--mono);letter-spacing:.14em;padding:0 8px;display:flex;justify-content:space-between}
.photo{position:absolute;left:8px;top:28px;width:40px;height:42px;background:#d9e0f2;border:1.5px solid var(--ink);overflow:hidden}
.photo svg{width:100%;height:100%;display:block}
.fields{position:absolute;left:60px;right:8px;top:26px;font:500 8.8px/1.65 var(--mono);color:var(--ink)}
.fields span{display:block;white-space:nowrap;overflow:hidden}
.fields u{text-decoration:none;color:var(--mute);margin-right:4px}
.stamp{position:absolute;right:6px;bottom:4px;border:2.5px solid var(--red);color:var(--red);padding:2px 6px;border-radius:3px;
  font:400 13.5px/1 var(--disp);letter-spacing:.1em;transform:rotate(-5deg);background:rgba(251,247,234,.7)}
/* sections */
.h{font:400 var(--cc-fs-section)/.9 var(--disp);color:var(--red);letter-spacing:.03em;text-transform:uppercase;display:flex;align-items:center;gap:12px}
.h::after{content:"";flex:1;height:6px;border-top:3px solid var(--blue);border-bottom:1.5px solid var(--blue)}
.dgrid{margin-top:6px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.duty{display:grid;grid-template-columns:42px 1fr;gap:9px;align-items:start}
.num{width:42px;height:42px;border-radius:50%;background:var(--red);color:var(--cc-on-red);display:grid;place-items:center;
  font:400 28px/1 var(--disp);box-shadow:inset 0 0 0 3px var(--red),inset 0 0 0 5px var(--cc-on-red)}
.duty h3{font:400 var(--cc-fs-duty)/1 var(--disp);color:var(--blue);letter-spacing:.04em;text-transform:uppercase}
.duty p{margin-top:3px;font:400 10.4px/1.4 var(--body)}
.cgrid{margin-top:7px;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:12px}
.chair{border-radius:var(--cc-radius);padding:7px 14px 8px;color:var(--cc-on-red);box-shadow:var(--cc-shadow)}
.chair.red{background:var(--red)} .chair.blue{background:var(--blue);color:var(--cc-on-blue)}
.chair h4{font:400 var(--cc-fs-chair)/.95 var(--disp);letter-spacing:.04em;text-transform:uppercase;margin-bottom:5px}
.roles{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:5px}
.roles span{font:700 9.2px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;border:1.5px solid currentColor;border-radius:2px;padding:4px 6px}
.chair p{font:500 10.8px/1.4 var(--body)}
.modes{margin-top:6px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,.8fr) minmax(0,1.3fr);gap:10px}
.modes span{font:400 9.8px/1.38 var(--body);border-top:3px solid var(--ink);padding-top:4px}
.modes b{font:700 9.4px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--red);display:block;margin-bottom:2px}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.box h4{font:400 var(--cc-fs-box)/1 var(--disp);color:var(--blue);letter-spacing:.05em;text-transform:uppercase;margin-bottom:4px}
.box p{font:400 10.2px/1.38 var(--body)}
.box p b{color:var(--red)}
.field{border-top:var(--cc-rule-double) var(--red);padding-top:4px}
.field h5{font:700 9.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:5px}
.field ul{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.field li{font:500 9.1px/1.4 var(--mono);color:var(--ink)}
.field li b{color:var(--blue)}
.field li i{display:block;margin-top:2px;font-style:normal;color:var(--mute);font-size:8.6px}
.fair{border:2.5px solid var(--blue);background:rgba(251,247,234,.85);padding:5px 12px;border-radius:var(--cc-radius)}
.fair p{font:500 10.2px/1.4 var(--body)}
.fair p b{font:400 20px/1 var(--disp);color:var(--blue);letter-spacing:.06em;text-transform:uppercase;margin-right:6px}
.cta{background:var(--red);color:var(--cc-on-red);text-align:center;border-radius:var(--cc-radius);padding:6px 12px 5px;box-shadow:var(--cc-shadow);
  }
.cta p{font:400 var(--cc-fs-cta)/1 var(--disp);letter-spacing:.05em;text-transform:uppercase}
.cta p span{color:var(--cc-on-red);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px}
.foot{position:absolute;left:0;bottom:0;width:794px;height:52px;background:var(--blue);color:var(--cc-on-blue);
  display:flex;align-items:center;justify-content:space-between;padding:0 24px}
.foot .l{font:400 28px/1 var(--disp);letter-spacing:.06em;text-transform:uppercase}
.foot .l b{color:#ffd9d4;font-weight:400}
.foot .r{font:600 9.5px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-align:right}