/* 謄本 — the report's dress: a government transcript. Shared by the preview page (screen) and the PDF (print).
   Tokens come from theme.css (cool grey, cobalt, Cabinet Grotesk + Noto Sans TC). */
:root{--paper:#fff;--rule:rgba(11,12,14,.18);--mid:#cfc6b5;--mid-ink:#141311}
.tp{font-feature-settings:"tnum";--step-small:1rem}
.tp .sheet{background:var(--paper);margin:0 auto;max-width:1120px;padding:0 0 4rem}
/* cover: counter object on a dark field, the address as a wide low wordmark */
.cover{background:var(--dark);color:var(--dark-ink);padding:2rem calc(50vw - 50% + var(--pad)) 2.5rem;margin:0 calc(50% - 50vw);position:relative;min-height:92svh;display:grid;grid-template-rows:auto 1fr auto auto;gap:2rem}
.cover .top{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--step-small)}
.cover .top a{color:var(--dark-ink);text-decoration:none}
.cover .obj{justify-self:center;align-self:end;width:min(31vw,340px);aspect-ratio:4/5;object-fit:cover;filter:brightness(.92)}
.cover .obj.aer{aspect-ratio:1}
.cover .mark{text-align:center}
.cover .addr{display:block;margin:0;font-family:var(--font-display);font-weight:800;font-size:clamp(1.6rem,1rem + 2.6vw,3rem);letter-spacing:.14em;line-height:1.05;white-space:nowrap}
.cover .sent{margin:1.2rem auto 0;max-width:40ch;font-size:var(--step-lead);line-height:1.45;text-wrap:pretty}
.cover .row{display:flex;justify-content:center;align-items:center;gap:3rem;margin-top:2rem;font-size:var(--step-small);flex-wrap:wrap}
.cover .row .button{background:var(--paper);color:var(--ink);padding:.8em 1.4em;font-size:var(--step-body)}
.cover .row .button:hover{background:#ece6da}
.cover .cnote{font-size:var(--step-small);color:#d9d2c3;max-width:60ch;margin:0;justify-self:center;text-align:center}
/* header block: the transcript's own register (a real table) */
.reg{margin:0;padding:2.5rem var(--pad) 0}
.reg{display:grid;grid-template-columns:1fr 1fr;gap:0 8px}.reg table{width:100%;border-collapse:collapse;font-size:var(--step-small);align-self:start}
.reg th,.reg td{border:1px solid var(--rule);padding:.55em .8em;text-align:left;vertical-align:top}
.reg th{width:11em;font-weight:500;color:var(--muted);background:var(--bg)}
.reg .serial{font-family:var(--font-display);font-weight:800;letter-spacing:.06em}
/* parts */
.part{padding:3rem var(--pad) 0}
.part .no{display:block;font-family:var(--font-display);font-weight:800;color:var(--accent);font-size:var(--step-small);letter-spacing:.12em;margin-bottom:.2em}
.part h2{margin:0 0 .8rem;font-size:var(--step-head)}
.part p{max-width:62ch}
.part .lead{font-size:var(--step-lead);line-height:1.4;max-width:46ch}
.part h3{font-size:var(--step-lead);margin:1.8rem 0 .4rem}
.ledger{width:100%;border-collapse:collapse;margin:1rem 0;font-size:var(--step-small)}
.ledger th{text-align:left;font-weight:500;color:var(--muted);padding:.5em .6em;border-bottom:1px solid var(--ink)}
.ledger td{padding:.55em .6em;border-top:1px solid var(--rule);vertical-align:top}
/* stepped figure tiles (stats) */
.tiles{display:grid;grid-template-columns:repeat(12,1fr);gap:8px;margin:1.5rem 0 0;align-items:start}
.tiles .t{position:relative;padding:28px;display:flex;flex-direction:column;justify-content:space-between}
.tiles .t strong{font-family:var(--font-display);font-weight:800;font-size:clamp(3rem,1.8rem + 4vw,5.6rem);line-height:.95;letter-spacing:-.03em}
.tiles .t span{font-size:var(--step-body);margin-top:1.2rem;max-width:22ch}
.tiles .t1{grid-column:1/7;min-height:52vh;background:var(--accent);color:var(--accent-ink)}
.tiles .t2{grid-column:7/10;margin-top:14vh;min-height:34vh;background:var(--dark);color:var(--dark-ink)}
.tiles .t3{grid-column:10/13;margin-top:26vh;min-height:26vh;background:var(--mid);color:var(--mid-ink)}
.tiles .t small{display:block;font-size:var(--step-small);opacity:.8;margin-top:.4rem}
/* line-up at one size: the table of contents */
.toc{width:100%;table-layout:fixed;border-collapse:collapse;margin:1rem 0 0;font-size:var(--step-lead)}
.toc td{padding:.35em .9em .35em 0;border:0;vertical-align:baseline;line-height:1.5}.toc td:last-child{padding-right:0}
.toc td:nth-child(1){width:7%;font-family:var(--font-display);font-weight:800;color:var(--accent)}
.toc td:nth-child(2){width:26%}.toc td:nth-child(3){width:40%;font-size:var(--step-body)}
.toc td:nth-child(4){width:27%;text-align:right;font-size:var(--step-body)}.toc .cnt{display:block}.toc .st{display:block;font-size:var(--step-small);color:var(--muted)}
.toc .free td:nth-child(4){color:var(--accent);font-weight:500}
/* bands: the warnings, a quiet list (owner 2026-10-30: not a showpiece) */
.bands{margin-top:2.5rem;padding:0 var(--pad)}
.band{display:grid;grid-template-columns:minmax(8em,13em) 1fr;gap:.2rem 1.4rem;padding:.75rem 0;border-top:1px solid var(--rule)}
.band h3{font-size:1rem;font-weight:700;margin:0;line-height:1.6}
.band p{margin:0;font-size:.95rem;line-height:1.65;color:var(--muted)}
.band.head{display:block;border-top:0;padding:0 0 .5rem}
.band.head h2{font-size:var(--step-lead);margin:0}
/* the order slip: clip-out coupon */
.slipwrap{padding:5rem var(--pad)}
.coupon{position:relative;display:grid;grid-template-columns:1fr 1fr;background:var(--accent);color:var(--accent-ink);min-height:300px;
  -webkit-mask:radial-gradient(14px at 46% 0,transparent 98%,#000) top/100% 51% no-repeat,radial-gradient(14px at 46% 100%,transparent 98%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(14px at 46% 0,transparent 98%,#000) top/100% 51% no-repeat,radial-gradient(14px at 46% 100%,transparent 98%,#000) bottom/100% 51% no-repeat}
.coupon>div{padding:48px}
.coupon .l{display:flex;flex-direction:column;justify-content:space-between;gap:2rem}
.coupon .l h2{font-size:var(--step-head);line-height:1.05}
.coupon .l p{font-size:var(--step-body);max-width:40ch}
.coupon .r{border-left:5px dotted var(--bg);display:flex;flex-direction:column;gap:10px;justify-content:center}
.coupon .plan{background:rgba(255,255,255,.14);padding:.9em 1.1em;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;text-decoration:none;color:inherit;font-size:1.05rem}
.coupon .plan b{font-family:var(--font-display);font-weight:800;font-size:var(--step-lead)}
.coupon .plan:hover{background:rgba(255,255,255,.24)}
.coupon .go{background:var(--dark);color:var(--dark-ink);text-align:center;padding:1em;text-decoration:none;font-weight:500;margin-top:6px}
.coupon .ask{text-align:center;color:inherit;font-size:var(--step-small);margin-top:.4rem}
/* live thing: where your rent sits */
.gauge{margin:1.5rem 0;max-width:620px}
.gauge label{display:block;font-size:var(--step-small);color:var(--muted);margin-bottom:.4rem}
.gauge .in{display:flex;gap:.6rem;align-items:center}
.gauge input{font:inherit;font-size:var(--step-body);padding:.6em .8em;border:1px solid var(--rule);background:var(--bg);width:11em}
.gauge .bar{position:relative;height:14px;background:var(--surface);margin:1.2rem 0 .4rem}
.gauge .bar i{position:absolute;top:0;bottom:0;background:var(--accent);opacity:.35}
.gauge .bar b{position:absolute;top:-6px;width:4px;height:26px;background:var(--ink);margin-left:-2px}
.gauge .bar em{position:absolute;top:-6px;width:4px;height:26px;background:var(--accent);margin-left:-2px;display:none}
.gauge .ticks{display:flex;justify-content:space-between;font-size:var(--step-small);color:var(--muted)}
.gauge output{display:block;margin-top:.8rem;font-size:var(--step-body)}
/* aerial */
.aer3{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:1rem 0}
.aer3 figure{margin:0}.aer3 img{width:100%;aspect-ratio:1;object-fit:cover}.aer3 figcaption{font-size:var(--step-small);color:var(--muted);margin-top:.3rem}
.locked{position:relative;padding:2rem;background:var(--bg);color:var(--muted);font-size:var(--step-small);max-width:none!important}
.locked b{display:block;color:var(--ink);font-size:var(--step-body);font-weight:500;margin-bottom:.3rem}
/* partners */
.partner{display:grid;grid-template-columns:9em 1fr;gap:1rem 2rem;padding:1.6rem 0;border-top:1px solid var(--rule)}
.partner .kind{color:var(--muted);font-size:var(--step-small)}
.partner h3{margin:0 0 .3rem}
.partner p{margin:0;font-size:var(--step-body)}.partner p+p{margin-top:.5em}
.partner .meta{color:var(--muted);font-size:var(--step-small)}
.sample-mark{display:inline-block;background:#ffe8a3;color:#5a4400;font-size:.875rem;padding:.1em .5em;margin-left:.5em;vertical-align:middle}
@media(max-width:900px){
  .cover{min-height:auto}.cover .obj{width:70vw}.cover .addr{white-space:normal;font-size:1.6rem;letter-spacing:.08em}.cover .row{flex-direction:column;gap:.8rem}.cover .row .button{width:100%;text-align:center}.cover .cnote{position:static;margin-top:1rem}
  .tiles .t1{grid-column:1/13;min-height:56vw}.tiles .t2{grid-column:1/7;margin-top:0;min-height:40vw}.tiles .t3{grid-column:7/13;margin-top:32px;min-height:40vw}.tiles .t strong{font-size:14vw}.tiles .t2 strong,.tiles .t3 strong{font-size:11vw}.tiles .t{padding:18px}
  .toc,.toc tbody{display:block}.toc tr{display:grid;grid-template-columns:2em 1fr;gap:0 .6rem;padding:.6rem 0}.toc td{display:block;width:auto!important;padding:0}.toc td:nth-child(3){grid-column:2;font-size:var(--step-small);color:var(--muted)}.toc td:nth-child(4){grid-column:2;text-align:left;font-size:var(--step-small);white-space:normal}.reg{grid-template-columns:1fr}
  .band{grid-template-columns:1fr}
  .coupon{grid-template-columns:1fr;-webkit-mask:radial-gradient(14px at 0 46%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(14px at 100% 46%,transparent 98%,#000) right/51% 100% no-repeat;mask:radial-gradient(14px at 0 46%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(14px at 100% 46%,transparent 98%,#000) right/51% 100% no-repeat}
  .coupon>div{padding:28px 20px}.coupon .r{border-left:0;border-top:5px dotted var(--bg)}
  .partner{grid-template-columns:1fr}.reg th{width:7em}
}
/* print: A4 transcript */
@media print{
  h2,h3{break-inside:avoid;break-after:avoid}.part .no{break-after:avoid}table{break-inside:auto}tr{break-inside:avoid}
  @page{size:A4;margin:16mm 14mm 18mm}
  html,body{background:#fff}.tp .sheet{max-width:none;padding:0}
  .cover{margin:0;padding:12mm 12mm 10mm;min-height:250mm;height:auto;page-break-after:always;-webkit-print-color-adjust:exact;print-color-adjust:exact;display:grid;grid-template-rows:auto 1fr auto auto;gap:8mm}
  .cover .obj{width:92mm}.cover .cnote{color:#d9d2c3}
  .reg{padding:0;grid-template-columns:1fr 1fr;gap:0 4mm}.reg th,.reg td{padding:.35em .6em;font-size:9.5pt}
  .part{padding:10mm 0 0;break-inside:auto}.part h2{page-break-after:avoid;break-after:avoid}.part h3{break-after:avoid}
  .ledger{font-size:9pt}.ledger tr{page-break-inside:avoid}.ledger th,.ledger td{padding:.4em .5em}
  .tiles{align-items:stretch;gap:3mm;margin-top:4mm}.tiles .t1,.tiles .t2,.tiles .t3{min-height:34mm;margin-top:0;padding:5mm}.tiles .t strong{font-size:30pt}.tiles .t span{font-size:10.5pt;margin-top:3mm}
  .band{padding:2mm 0}
  .pb{page-break-before:always;break-before:page}.noprint{display:none!important}
  .aer3 img{width:100%}.partner{break-inside:avoid}
  a{color:inherit;text-decoration:none}
}
/* preview teaser: the paid answer is a fixed placeholder, blurred */
.blurx{display:inline-block;filter:blur(5px);user-select:none;-webkit-user-select:none;background:var(--mid);color:var(--ink);padding:0 .15em;font-weight:800}