/* Sprout brand guidelines v5 — A4 landscape, HK Land-style editorial system.
   One type scale: h1 40pt (openers) · h2 22pt · intro 12.5pt · body 11pt · caption/nav 9.5pt. */
@font-face{font-family:Univers;src:url(img/UniversLight.woff2) format("woff2");font-weight:300}
@font-face{font-family:Univers;src:url(img/UniversRegular.woff2) format("woff2");font-weight:400}
@font-face{font-family:Univers;src:url(img/UniversBold.woff2) format("woff2");font-weight:700}
:root{
  --red:#DA2928;--yellow:#FFF45F;--green:#38984E;--light:#B9D989;
  --cream:#F9F0DC;--paper:#FCFAF5;--stone:#F2EBDC;--ink:#1F2A1B;--deep:#2A6B3A;--mute:#5A6455;--line:#DCD5C4;
}
@page{size:297mm 210mm;margin:0}
*{box-sizing:border-box}
html{background:#cfcabd}
body{margin:0;font-family:Univers,"Noto Sans HK","Noto Sans CJK HK",sans-serif;font-weight:300;color:var(--ink);
  font-size:11pt;line-height:1.55;-webkit-print-color-adjust:exact;print-color-adjust:exact}
img{display:block;max-width:100%}
figure{margin:0}
p{margin:0 0 2mm}
b,strong{font-weight:400}
.lang{position:fixed;top:10px;right:14px;z-index:9;display:flex;gap:8px}
.lang a{background:var(--ink);color:#fff;text-decoration:none;font-size:13px;padding:6px 12px;border-radius:99px}
@media print{.lang{display:none}}

/* page shell */
.pg{width:297mm;height:210mm;margin:0 auto 5mm;background:var(--paper);position:relative;overflow:hidden;
  display:grid;grid-template-columns:52mm 1fr;padding:13mm 14mm 17mm 0;break-after:page}
@media print{.pg{margin:0}}
.pg.cream{background:var(--cream)}
.side{padding:0 6mm 0 12mm;display:flex;flex-direction:column;font-size:9.5pt;line-height:1.35}
.sb{color:var(--mute);margin-bottom:6mm}
.nav{list-style:none;margin:0;padding:0;color:var(--mute)}
.nav>li{padding:.45mm 0}
.nav>li.cur{color:var(--ink);font-weight:400}
.nav .subs ul{list-style:none;margin:.5mm 0 1.5mm;padding:0 0 0 3mm;font-size:9pt;color:var(--mute)}
.nav .subs li{padding:.2mm 0}.nav .subs li.on{color:var(--deep);font-weight:400}
.sm{width:9mm;margin-top:auto}
.main{display:flex;flex-direction:column;min-width:0;min-height:0}
.kick{font-size:10pt;color:var(--deep);letter-spacing:.04em}
h2{font-size:22pt;font-weight:400;line-height:1.2;margin:.5mm 0 3mm}
.intro{font-size:12.5pt;line-height:1.5;max-width:165mm;margin-bottom:5mm}
.intro p{margin:0 0 1.5mm}
.body{flex:1;min-height:0}
.folio{position:absolute;left:12mm;right:14mm;bottom:7mm;display:flex;justify-content:space-between;font-size:9.5pt;color:var(--mute)}
.folio.light{color:rgba(255,255,255,.85)}

/* openers */
.opener{display:block;padding:0;background-size:cover;background-color:var(--deep)}
.op{position:absolute;left:22mm;bottom:28mm;max-width:150mm;color:#fff}
.op span{font-size:14pt;opacity:.85}
.op h1{font-size:44pt;font-weight:300;line-height:1.1;margin:2mm 0 4mm}
.op p{font-size:14pt;line-height:1.5;margin:0}

/* cover + contents */
.cover{display:block;background:var(--cream);padding:20mm 22mm}
.cover .lk{width:150mm}
.cover .ct{position:absolute;left:22mm;bottom:30mm}
.cover .ct div{font-size:44pt;font-weight:300;line-height:1.08}
.cover .ct span{display:block;font-size:15pt;color:var(--mute);margin-top:4mm}
.cover .cm{position:absolute;right:22mm;bottom:30mm;text-align:right;font-size:11pt;color:var(--mute)}
.cover .bar{position:absolute;left:0;right:0;bottom:0;height:8mm;display:flex}.cover .bar i{flex:1}
.cover .pt{position:absolute;right:0;top:0;width:118mm;height:150mm;background:url(img/pat-cream.svg) center/cover}
.toc{display:grid;grid-template-columns:repeat(3,1fr);gap:3mm 8mm}
.toc div{border-top:.3mm solid var(--ink);padding-top:2mm;display:flex;gap:4mm;font-size:12pt}
.toc em{font-style:normal;color:var(--deep);min-width:8mm}

/* grids */
.g2,.g3,.g4,.g5,.g6,.split,.split2,.split3{display:grid;gap:6mm}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr);gap:5mm}
.g5{grid-template-columns:repeat(5,1fr);gap:4mm}.g6{grid-template-columns:repeat(6,1fr);gap:3.5mm}
.split{grid-template-columns:1fr 1.6fr}.split2{grid-template-columns:1.6fr 1fr}.split3{grid-template-columns:1fr 1fr 1fr}
.span2{grid-column:span 2}.span3{grid-column:span 3}.full{grid-column:1/-1}
.mt{margin-top:5mm}.mt2{margin-top:3mm}

/* components */
.panel{display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.ph{background-size:cover;background-repeat:no-repeat}
figcaption,.cap{font-size:9.5pt;color:var(--mute);line-height:1.45;margin-top:1.8mm}
figcaption b,.cap b{color:var(--ink)}
.small{font-size:9.5pt;color:var(--mute);line-height:1.45}
.tag{display:inline-block;font-size:8.5pt;padding:.3mm 2mm;border-radius:1mm;background:#FCE3DF;color:#9C1F1E;vertical-align:middle;margin-left:1.5mm}
.tag.ok{background:#E3F0DA;color:var(--deep)}
h3{font-size:12.5pt;font-weight:400;margin:0 0 1.5mm}
ul.rules{margin:0 0 3mm;padding:0;list-style:none;display:grid;gap:1.4mm}
ul.rules li{padding-left:5mm;position:relative}
ul.rules li::before{content:"";position:absolute;left:0;top:.72em;width:2.6mm;height:.35mm;background:var(--green)}
table{border-collapse:collapse;width:100%;font-size:10.5pt}
th{font-weight:400;text-align:left;color:var(--mute);font-size:9.5pt;border-bottom:.3mm solid var(--ink);padding:1.4mm 3mm 1.4mm 0}
td{border-bottom:.2mm solid var(--line);padding:1.6mm 3mm 1.6mm 0;vertical-align:top}
.num{font-variant-numeric:tabular-nums}
.no{position:relative}
.no::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top right,transparent calc(50% - .35mm),var(--red) calc(50% - .35mm),var(--red) calc(50% + .35mm),transparent calc(50% + .35mm))}
.card{background:var(--stone);padding:5mm;display:flex;flex-direction:column}
.card .big{margin-top:auto;font-size:26pt;line-height:1.1}
.badge{display:inline-block;width:7.5mm;height:7.5mm;border-radius:50%;background:var(--green);color:#fff;text-align:center;line-height:7.5mm;font-size:10.5pt;margin-bottom:2mm}
.sw{padding:4mm;display:flex;flex-direction:column;justify-content:flex-end;font-size:9.5pt;line-height:1.5}
.sw b{font-size:13pt;margin-bottom:1mm}
.chip{display:inline-block;padding:1mm 2.6mm}
.dash{outline:.3mm dashed var(--green);outline-offset:0}

/* mock documents */
.doc{background:#fff;box-shadow:0 .6mm 2.5mm rgba(31,42,27,.18);position:relative;overflow:hidden}
.doc .ln{height:1.1mm;background:#ebe6db;margin-bottom:2mm}
.slide{aspect-ratio:16/9;background:var(--paper);position:relative;overflow:hidden;box-shadow:0 .5mm 2mm rgba(0,0,0,.15)}
.post{aspect-ratio:1/1;position:relative;overflow:hidden;background-size:cover;background-position:center}

@media screen and (max-width:900px){
  html{background:var(--paper)}
  .pg{width:auto;height:auto;display:block;padding:20px 16px 48px;margin:0}
  .side{display:none}.opener{min-height:70vh}
  .g3,.g4,.g5,.g6,.split,.split2,.split3,.toc{grid-template-columns:1fr 1fr}
  table{display:block;overflow-x:auto}
}