/* Minutes Before - portfolio design system (A4 landscape, 1 css px = 1/96 in) */
:root{
  --paper:#f1eee7; --paper2:#e8e3d9; --paper3:#dcd6ca;
  --ink:#151412; --text:#3a3733; --mute:#6e6a62; --faint:#8f8a80;
  --hair:#d6d0c4; --line:#b7b0a3;
  --stage:#0f0e0d; --stage2:#1b1a18; --stage3:#2b2926;
  --cream:#ede7dc; --cream2:#c2bbaf; --cream3:#8d877c;
  --neon:#ff4a26; --red:#bf3917; --red-t:#f2d4c7;
  --blue:#2e48e6; --blue-t:#d6dbf7;
  /* the four layers, near -> deep: ordinal ramp, validated on --paper */
  --l1:#e8957a; --l2:#dc6440; --l3:#bf3917; --l4:#7c2711;
  --f-wide:'Archivo','Arial',sans-serif;
  --f-disp:'Microsoft YaHei',sans-serif;     /* quotes only */
  --f-text:'Archivo','Segoe UI',sans-serif;
  --f-mono:'JetBrains Mono',Consolas,monospace;
  --f-cn:'Noto Sans SC','Microsoft YaHei',sans-serif;
  --f-cns:'Noto Sans SC','Microsoft YaHei',sans-serif;  /* the set uses one Chinese face */
}
*{box-sizing:border-box;margin:0;padding:0}
@page{size:297mm 210mm;margin:0}
html,body{background:#6f6c66}
body{font-family:var(--f-text);font-size:8.6px;line-height:1.46;color:var(--text);
  -webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;
  font-kerning:normal;font-feature-settings:"kern" 1;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
body.solo{background:var(--paper)}
.page{position:relative;width:297mm;height:210mm;overflow:hidden;background:var(--paper);
  margin:0 auto 28px;break-after:page;page-break-after:always}
#p2,#p3,#p4,#p5,#p6{--paper:#ffffff;background:#ffffff}
body.solo .page{margin:0}
@media print{html,body{background:var(--paper)}.page{margin:0}}
svg{display:block;overflow:visible}
img{display:block}
.abs{position:absolute}
.cn{font-family:var(--f-cn);font-style:normal}
.cns{font-family:var(--f-cns);font-style:normal}

/* ---------- type roles ---------- */
.kicker{font:500 6.8px/1.2 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.kicker b{color:var(--red);font-weight:600}
.h1{font:700 27px/1.02 var(--f-wide);font-stretch:112.5%;letter-spacing:-.018em;color:var(--ink)}
.h1 i{font-style:normal;color:var(--faint)}
.h2{font:800 9.6px/1.1 var(--f-wide);font-stretch:125%;letter-spacing:.03em;text-transform:uppercase;color:var(--ink)}
.h3{font:600 8.6px/1.25 var(--f-text);color:var(--ink)}
.deck{font:400 10.4px/1.47 var(--f-text);color:var(--text);letter-spacing:-.003em}
.lead{font-size:10.4px;line-height:1.47;color:var(--text);letter-spacing:-.003em}
p{margin:0}
p+p{margin-top:.6em}
.body{font-size:8.4px;line-height:1.48;color:var(--text)}
.cap{font-size:7px;line-height:1.38;color:var(--mute)}
.cap b,.body b,.lead b{color:var(--ink);font-weight:600}
.lab{font:500 6.2px/1.25 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.mono{font-family:var(--f-mono)}
.num{font:700 26px/1 var(--f-wide);font-stretch:112.5%;letter-spacing:-.03em;color:var(--ink)}
.num small{font:500 .38em var(--f-mono);font-stretch:100%;letter-spacing:.04em;margin-left:3px;color:var(--mute)}
.q{font:normal 400 13px/1.22 var(--f-disp);color:var(--ink);letter-spacing:-.005em}
/* section head row: index + head + note */
.fh .fig{font:800 9.6px/1.1 var(--f-wide);font-stretch:125%;letter-spacing:.03em;color:var(--red)}
.fh .cap{font-size:7px;color:var(--mute)}
.tab{font-variant-numeric:tabular-nums}
.rule{height:0;border-top:1px solid var(--ink)}
.hair{height:0;border-top:.6px solid var(--line)}
.fig{font:600 6.2px/1 var(--f-mono);letter-spacing:.1em;color:var(--ink)}

/* layer chips: identity mark beside text, never coloured text */
.chip{display:inline-block;width:7px;height:7px;border-radius:1.5px;vertical-align:-.5px;margin-right:4px}
.k1{background:var(--l1)}.k2{background:var(--l2)}.k3{background:var(--l3)}.k4{background:var(--l4)}

/* photo frames */
.ph{position:absolute;overflow:hidden;background:var(--stage)}
.ph img{width:100%;height:100%;object-fit:cover}
.pcap{position:absolute;font-size:6.8px;line-height:1.35;color:var(--mute)}
.pcap b{font:600 6.2px/1 var(--f-mono);letter-spacing:.08em;color:var(--ink);margin-right:4px}

/* svg text roles */
svg text{font-family:var(--f-text);fill:var(--text)}
.t-lab{font:500 5.9px var(--f-mono);letter-spacing:.07em;fill:var(--mute);text-transform:uppercase}
.t-labk{font:600 5.9px var(--f-mono);letter-spacing:.07em;fill:var(--ink);text-transform:uppercase}
.t-mono{font:500 6.2px var(--f-mono);fill:var(--text)}
.t-cap{font:400 6.8px var(--f-text);fill:var(--mute)}
.t-txt{font:400 7.4px var(--f-text);fill:var(--text)}
.t-h{font:600 7.8px var(--f-text);fill:var(--ink)}
.t-num{font:700 12px var(--f-wide);font-stretch:112.5%;fill:var(--ink);letter-spacing:-.02em}
.t-cn{font:500 7.6px var(--f-cn);fill:var(--ink)}
.t-disp{font:normal 400 15px var(--f-disp);fill:var(--ink)}
.lm{font:500 4.2px var(--f-mono);fill:var(--mute)}

/* ---------- folio ---------- */
.folio{position:absolute;left:40px;right:40px;bottom:15px;display:flex;justify-content:space-between;
  font:500 5.9px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.folio b{color:var(--ink);font-weight:600}
.folio i.cn{letter-spacing:.24em;font-weight:500;margin-left:6px}

/* ---------- dark page ---------- */
.page.dark{background:var(--stage);color:var(--cream2)}
.dark .h1,.dark .deck,.dark .h2,.dark .h3,.dark .num{color:var(--cream)}
.dark .kicker,.dark .lab,.dark .cap{color:var(--cream3)}
.dark .kicker b,.dark .cap b{color:var(--cream)}
.dark .body,.dark .lead{color:var(--cream2)}
.dark .folio{color:var(--cream3)}
.dark .folio b{color:var(--cream)}
.dark svg text{fill:var(--cream2)}
.dark .t-lab{fill:var(--cream3)}

/* 7-segment readouts */
.seg{display:inline-block;vertical-align:middle}
.glow{filter:drop-shadow(0 0 2.2px rgba(255,74,38,.55)) drop-shadow(0 0 7px rgba(255,74,38,.22))}

/* ---------- cover stack: identical in all five portfolios (centred on x = 321) ---------- */
.cv-no{position:absolute;left:221px;top:230px;width:200px;text-align:center;font:300 42px/1 'Archivo',sans-serif;font-stretch:125%;letter-spacing:-.02em}
.cv-t1{position:absolute;left:121px;top:294px;width:400px;text-align:center;font:800 24px/1 'Archivo',sans-serif;font-stretch:125%;letter-spacing:.02em;padding-left:.02em;text-transform:uppercase}
.cv-t2{position:absolute;left:121px;top:324px;width:400px;text-align:center;font:700 17px/1.2 'Noto Sans SC','Microsoft YaHei',sans-serif;letter-spacing:.3em;padding-left:.3em}
.cv-sub{position:absolute;left:121px;top:350px;width:400px;text-align:center;font:300 10.5px/1.55 'Archivo',sans-serif;font-stretch:125%;letter-spacing:.04em;padding-left:.04em;text-transform:uppercase}
.cv-ico{position:absolute;left:296px;top:389px;width:50px;height:50px}
.cv-body{position:absolute;left:123px;top:452px;width:396px;text-align:center;font:400 9.6px/1.7 'Archivo',sans-serif}
.cv-body b{font-weight:600}