/* HearMate portfolio - shared design system (A4 landscape, 1 css px = 1/96 in)
   Type follows the portfolio set (same families and sizes in all five portfolios); Nunito stays for the product UI only. */

:root{
  --ink:#141414; --text:#2b2b2b; --mute:#777775; --faint:#a6a6a3;
  --hair:#d9d9d5; --line:#bdbdb8; --panel:#f3f3f0; --panel2:#e9e9e5;
  --or:#f26b1d; --or-d:#cf540c; --or-t:#fbdcc7; --or-s:#fff1e7;
  --yel:#ffd447; --night:#0c0c0c;
  --f-wide:'Archivo','Arial',sans-serif;
  --f-disp:'Archivo','Arial',sans-serif;
  --f-text:'Archivo','Segoe UI',sans-serif;
  --f-mono:'JetBrains Mono',Consolas,monospace;
  --f-ui:'Nunito','Segoe UI',sans-serif;
  --f-voice:'Instrument Serif',Georgia,serif;
  --f-cn:'Noto Sans SC','Microsoft YaHei',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
@page{size:297mm 210mm;margin:0}
html,body{background:#7d7d7a}
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:#fff}
.page{position:relative;width:297mm;height:210mm;overflow:hidden;background:#fff;margin:0 auto 28px;
  break-after:page;page-break-after:always}
body.solo .page{margin:0}
@media print{html,body{background:#fff}.page{margin:0}}
svg{display:block;overflow:visible}
img{display:block}
.abs{position:absolute}
.cn{font-family:var(--f-cn);font-style:normal}

/* ---------- type roles (portfolio set) ---------- */
.kicker{font:500 6.8px/1.2 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.h-page{font:700 27px/1.02 var(--f-wide);font-stretch:112.5%;letter-spacing:-.018em;color:var(--ink)}
.h-blk{font:800 9.6px/1.1 var(--f-wide);font-stretch:125%;text-transform:uppercase;color:var(--ink);letter-spacing:.03em}
.h-blk small{display:block;font:600 6.8px/1.3 var(--f-mono);font-stretch:100%;letter-spacing:.1em;color:var(--or-d);margin-bottom:3px}
.h-sub{font:800 7.4px/1.2 var(--f-wide);font-stretch:125%;text-transform:uppercase;letter-spacing:.03em;color:var(--ink)}
.p{font:400 8.4px/1.48 var(--f-text);color:var(--text)}
.p b,.p strong{font-weight:600;color:var(--ink)}
.cap{font:400 7px/1.38 var(--f-text);color:var(--mute)}
.mono{font-family:var(--f-mono)}
.lbl{font:500 6.2px/1.25 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.voice{font-family:var(--f-voice);font-style:italic;font-weight:400;color:var(--ink)}
.or{color:var(--or)} .ink{color:var(--ink)} .mute{color:var(--mute)}
.num{font:700 26px/1 var(--f-wide);font-stretch:112.5%;color:var(--ink);letter-spacing:-.03em}

/* caption strip: the project's signature motif (live subtitles) - product UI, stays in Nunito */
.cc{display:inline;background:var(--night);color:#fff;font:700 9px/1.75 var(--f-ui);padding:1.5px 5px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.cc.or{background:var(--or);color:#fff}

/* tags / chips */
.tag{display:inline-block;font:600 5.8px/1 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;
  padding:3px 5px 2.6px;border:.7px solid var(--line);border-radius:2px;color:var(--text);white-space:nowrap}
.tag.f{background:var(--or);border-color:var(--or);color:#fff}
.tag.k{background:var(--ink);border-color:var(--ink);color:#fff}
.tag.t{background:var(--or-s);border-color:var(--or-t);color:var(--or-d)}

.dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--or);vertical-align:middle}
.rule{height:0;border-top:.75px solid var(--ink)}
.hair{height:0;border-top:.6px solid var(--hair)}
ul.ls{list-style:none}
ul.ls li{position:relative;padding-left:8px}
ul.ls li::before{content:'';position:absolute;left:0;top:.62em;width:3.5px;height:.75px;background:currentColor;opacity:.7}

/* running 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:#a3a3a0}
.folio b{color:var(--ink);font-weight:600}

/* page tab (top-left section marker) = the set kicker */
.tab{position:absolute;left:40px;top:28px;display:flex;align-items:baseline;gap:8px}
.tab .n{font:600 6.8px/1 var(--f-mono);letter-spacing:.16em;color:var(--or-d)}
.tab .t{font:500 6.8px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}

/* icons from sprite */
.ic{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* single-line block header: index + title + note */
.hline{display:flex;align-items:baseline;gap:7px;border-top:.75px solid var(--ink);padding-top:6px}
.hline .sn{font:800 9.6px/1.1 var(--f-wide);font-stretch:125%;color:var(--or);letter-spacing:.03em}
.hline .cap{font-size:7px;color:var(--mute)}

/* nested svg icons (no forced size) */
.ni{fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

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