/* TRUST HAS A TEMPO - portfolio design system (A4 landscape, 1 css px = 1/96 in, page 1123 x 794) */
:root{
  --paper:#f4f2ed; --paper2:#ebe8e1; --paper3:#e2ded5;
  --ink:#1d1d21; --text:#34343a; --mute:#6f6a62; --faint:#9a958d;
  --hair:#d9d5cc; --line:#bdb7ad;
  --teal:#1497a6; --teal-d:#0d7a86; --teal-l:#d3ebee;   /* OPEN - also the page accent */
  --amber:#e39a1f; --amber-d:#a86a0c; --amber-l:#f6e4c4; /* GLOW */
  --violet:#7051d8; --violet-d:#5a3fc4; --violet-l:#e4ddf8; /* RETREAT */
  --close:#26262b; --rest:#c9c4ba;
  --f-wide:'Archivo','Arial',sans-serif;
  --f-text:'Archivo','Segoe UI',sans-serif;
  --f-mono:'JetBrains Mono',Consolas,monospace;
  --f-disp:'Instrument Serif',Georgia,serif;     /* quotes only */
  --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:#5a5853}
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;
  -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}
p{margin:0}
p+p{margin-top:.6em}
b,strong{font-weight:600;color:var(--ink)}
i,em{font-style:italic}

/* ---------- type roles ---------- */
.kick{font:500 6.8px/1.2 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.kick b{font-weight:600;color:var(--teal-d)}
.kick i{font-style:normal;color:var(--ink)}
.h1{font:700 27px/1.02 var(--f-wide);font-stretch:112.5%;letter-spacing:-.018em;color:var(--ink)}
.h1 em{font-style:normal}
.h1 .soft{color:var(--faint)}
.deck{font:400 10.4px/1.47 var(--f-text);color:var(--text);letter-spacing:-.003em}
.deck b{font-weight:600}
.sec{display:flex;align-items:baseline;gap:6px;font:800 9.6px/1.1 var(--f-wide);font-stretch:125%;letter-spacing:.03em;
  text-transform:uppercase;color:var(--ink);padding-bottom:3.2px;border-bottom:.8px solid var(--ink)}
.sec .l{color:var(--teal)}
.sec small{margin-left:auto;font:400 7px/1.2 var(--f-text);font-stretch:100%;letter-spacing:0;text-transform:none;color:var(--mute)}
.sec.lite{border-bottom-color:var(--line)}
.body{font-size:8.4px;line-height:1.48;color:var(--text)}
.small{font-size:7.6px;line-height:1.42;color:var(--text)}
.cap{font-size:7px;line-height:1.38;color:var(--mute)}
.cap 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)}
.lab b{color:var(--ink);font-weight:600}
.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);letter-spacing:.04em;margin-left:3px;color:var(--mute)}
.q{font:italic 400 13px/1.22 var(--f-disp);color:var(--ink);letter-spacing:-.005em}
.tab{font-variant-numeric:tabular-nums}
.rule{height:0;border-top:.8px solid var(--ink)}
.hair{height:0;border-top:.6px solid var(--line)}
.sw{display:inline-block;width:7px;height:7px;vertical-align:-.5px;margin-right:4px}
.dotc{display:inline-block;width:6px;height:6px;border-radius:50%;vertical-align:.2px;margin-right:4px}

/* ---------- photos ---------- */
.ph{position:absolute;overflow:hidden;background:var(--paper3)}
.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;text-transform:uppercase}
.pcap.lt{color:rgba(255,255,255,.82)}
.pcap.lt b{color:#fff}
.fig{font:600 6.2px/1 var(--f-mono);letter-spacing:.1em;color:var(--ink);text-transform:uppercase}
/* label sitting on a photo */
.ptag{position:absolute;background:rgba(244,242,237,.93);padding:3.2px 5px 3px;font:600 6.2px/1.15 var(--f-mono);
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.ptag small{display:block;font:400 6.6px/1.28 var(--f-text);letter-spacing:0;text-transform:none;color:var(--mute);margin-top:1.5px}
.ptag.dk{background:rgba(29,29,33,.86);color:#fff}
.ptag.dk small{color:rgba(255,255,255,.72)}
.lead{position:absolute;height:0;border-top:.7px solid var(--ink);transform-origin:0 0}
.lead.lt{border-top-color:#fff}

/* numbered pins */
.pin{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--teal-d);color:#fff;
  font:600 6.4px/12px var(--f-mono);text-align:center;box-shadow:0 0 0 1.2px rgba(255,255,255,.95)}
.pin.k{background:var(--ink)}
.pinl{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--teal-d);color:#fff;
  font:600 6px/11px var(--f-mono);text-align:center;margin-right:5px;vertical-align:.3px;flex:none}
.pinl.k{background:var(--ink)}

/* lists + tables */
.ol{list-style:none}
.ol li{display:flex;gap:7px;padding:3.4px 0;border-top:.6px solid var(--hair)}
.ol li:first-child{border-top:0}
.ol li .k{flex:none;font:600 6.2px/1.5 var(--f-mono);color:var(--teal-d);width:13px}
table.t{border-collapse:collapse;width:100%}
table.t th{font:500 6px/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);
  text-align:left;padding:0 6px 4px 0;border-bottom:.8px solid var(--ink);vertical-align:bottom}
table.t td{font-size:7.2px;line-height:1.32;padding:3.6px 6px 3.6px 0;border-bottom:.6px solid var(--hair);vertical-align:top;color:var(--text)}
table.t td.l{font-weight:600;color:var(--ink)}
table.t td.m{font:500 6.6px/1.32 var(--f-mono);color:var(--text)}
table.t td.r,table.t th.r{text-align:right}
table.t td.c,table.t th.c{text-align:center}
table.t tr.tot td{border-bottom:0;border-top:.8px solid var(--ink);font-weight:600;color:var(--ink)}

/* chips */
.tag{display:inline-block;font:600 5.8px/1 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;
  padding:2.4px 4px 2.2px;border:.7px solid var(--ink);color:var(--ink)}
.tag.f{background:var(--ink);color:var(--paper)}
.tag.g{border-color:var(--line);color:var(--mute)}
.tag.t{border-color:var(--teal);color:var(--teal-d)}
.state{display:inline-flex;align-items:center;gap:4px;font:600 6.2px/1 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink)}
.state i{display:inline-block;width:7px;height:7px;border-radius:50%}

/* svg text roles (set fill per text - css beats a parent's fill) */
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-monos{font:500 5.6px var(--f-mono);fill:var(--mute)}
.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-hb{font:800 7.4px var(--f-wide);font-stretch:125%;letter-spacing:.03em;fill:var(--ink);text-transform:uppercase}
.t-num{font:700 12px var(--f-wide);font-stretch:112.5%;fill:var(--ink);letter-spacing:-.02em}
.t-q{font:italic 400 8.6px var(--f-disp);fill:var(--ink)}
.t-pin{font:600 6.1px var(--f-mono);fill:#fff}
.t-cn{font:400 6.4px var(--f-cn);fill:var(--mute)}
.t-w{fill:#fff}

/* ---------- folio ---------- */
.folio{position:absolute;left:34px;right:34px;bottom:13px;display:flex;justify-content:space-between;align-items:baseline;
  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 .cn{letter-spacing:.24em;font-weight:500;margin-left:6px;color:var(--mute)}
.folio .pg b{color:var(--teal-d)}
.folio.light{color:rgba(255,255,255,.72)}
.folio.light b,.folio.light .pg b{color:#fff}
.folio.light .cn{color:rgba(255,255,255,.8)}

/* ---------- 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}