/* 1u = 0.9mm on the printed card. Type stays the same size in both orientations. */
@font-face{font-family:'Barlow Condensed';src:url('assets/fonts/barlow-condensed-bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Barlow Semi Condensed';src:url('assets/fonts/barlow-semi-condensed-bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Inter;src:url('assets/fonts/inter-variable.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:'TangFeng Li';src:url('assets/fonts/tangfeng-li-w5.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Noto Sans SC';src:url('assets/fonts/noto-sans-sc-variable.ttf') format('truetype');font-weight:100 900;font-display:swap}

.card {
  --info-font:Inter,'Noto Sans SC',sans-serif;
  font-family:var(--info-font);
  --mm:calc(var(--u) / .9);
  --pt:calc(var(--u) * .3919753086);
  --text-small:calc(var(--pt) * 8);
  --text-body:calc(var(--pt) * 8.5);
  --text-title:calc(var(--pt) * 14);
  --text-display:calc(var(--pt) * 16);
  --group-gap:calc(var(--mm) * var(--gap) * .5);
  font-size:var(--text-body);
  line-height:1.28;
}
.technology .wordmark{font-family:'Barlow Semi Condensed',sans-serif;font-weight:700;letter-spacing:0}
.technology .message h2,.technology .identity h2{font-family:'Barlow Condensed','Noto Sans SC',sans-serif;font-weight:700}
.card.restaurant{--info-font:'TangFeng Li',Inter,'Noto Sans SC',sans-serif;font-family:var(--info-font)}
.restaurant .message h2,.restaurant .identity h2{font-weight:400}
.restaurant .identity h2{font-size:calc(var(--pt) * 15)}
.restaurant .message h2{font-size:calc(var(--pt) * 17)}

.card .front-layout,.card .back-layout{inset:calc(var(--mm) * 4)}
.card .front-layout{gap:var(--group-gap)}
.card .front-hero{gap:var(--group-gap);padding-bottom:0}
.card .logo-slot{width:calc(var(--mm) * 34);height:calc(var(--mm) * 18)}
.card .logo-slot.seal{width:calc(var(--mm) * 19);height:calc(var(--mm) * 19)}
.card .wordmark{font-size:calc(var(--pt) * 34)}
.card .message h2{font-size:var(--text-display);line-height:1.08;letter-spacing:0}
.card.restaurant .message h2{font-size:calc(var(--pt) * 17)}
.card .message p{font-size:calc(var(--pt) * 9);line-height:1.25;letter-spacing:0;margin:calc(var(--mm) * 1) 0 0;overflow-wrap:anywhere}
.card .front-footer{font-size:var(--text-small);letter-spacing:0;line-height:1.2;padding-top:calc(var(--mm) * 1.2);gap:calc(var(--mm) * 2)}
.card .brand-service,.card .brand-web{overflow-wrap:anywhere}
.card .brand-web:empty,.card .brand-service:empty{display:none}

.card .back-layout{grid-template-columns:minmax(0,1fr) calc(var(--mm) * 22);grid-template-rows:calc(var(--mm) * 11) minmax(0,1fr) auto;column-gap:calc(var(--mm) * 3);row-gap:var(--group-gap)}
.card .brand-header{padding-bottom:calc(var(--mm) * 1);gap:calc(var(--mm) * 2)}
.card .brand-header .logo-slot{width:calc(var(--mm) * 26);height:calc(var(--mm) * 10)}
.card .brand-header .logo-slot.seal{width:calc(var(--mm) * 10);height:calc(var(--mm) * 10)}
.card .brand-header .wordmark{font-size:calc(var(--pt) * 24)}
.card .brand-descriptor{font-size:var(--text-small);letter-spacing:0;line-height:1.2}
.card .identity h2{font-size:var(--text-title);font-weight:600;line-height:1.12;letter-spacing:0}
.card.technology .identity h2{font-weight:700}
.card.restaurant .identity h2{font-size:calc(var(--pt) * 15);font-weight:400}
.card .identity p{font-size:var(--text-small);margin:calc(var(--mm) * .8) 0 0;line-height:1.25;opacity:1}
.card .identity p:empty,.card .message p:empty{display:none}
.card .contacts{font-size:var(--text-body);line-height:1.24;gap:calc(var(--mm) * .7)}
.card .contact-row{grid-template-columns:calc(var(--mm) * 2.5) minmax(0,1fr);gap:calc(var(--mm) * .8)}
.card .contact-row b{opacity:1;font-family:var(--info-font);font-size:var(--text-small)}
.card.restaurant .contact-row b{font-family:Inter,sans-serif}
.card.restaurant .contacts{font-family:Inter,'Microsoft YaHei',sans-serif}
.card .action{gap:calc(var(--mm) * 1.2)}
.card .qr-slot{width:calc(var(--mm) * 22);height:calc(var(--mm) * 22)}
.card .qr-slot img{padding:calc(var(--mm) * 1)}
.card .qr-caption{font-size:var(--text-small);line-height:1.25}
.card .qr-placeholder{font-family:Inter,Arial,sans-serif;font-size:calc(var(--pt) * 16);color:#666}
.card .qr-placeholder small{font-family:Inter,Arial,sans-serif;font-size:var(--text-small)}
.card.no-qr .identity,.card.no-qr .contacts{grid-column:1/-1}

.portrait .card .front-hero{gap:calc(var(--mm) * 8)}
.portrait .card .front-footer{gap:calc(var(--mm) * 2)}
.portrait .card .back-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:calc(var(--mm) * 15) minmax(0,1fr) auto auto}
.portrait .card .brand-header{gap:calc(var(--mm) * 1)}
.portrait .card .brand-header .logo-slot{height:calc(var(--mm) * 10)}
.portrait .card .brand-header .logo-slot.seal{width:calc(var(--mm) * 10);height:calc(var(--mm) * 10)}
.portrait .card .brand-descriptor{font-size:var(--text-small)}
.portrait .card .action{gap:calc(var(--mm) * 3);padding-top:calc(var(--mm) * 1.5)}
.portrait .card .qr-caption{max-width:none;flex:1;line-height:1.4}
.portrait .card.no-qr .back-layout{grid-template-rows:calc(var(--mm) * 15) minmax(0,1fr) auto}

.type-spec{padding:12px 24px;border-top:1px solid #d9ddce;background:#f8f8f1;color:#707967;font-size:11px;line-height:1.7}
.type-spec strong{font-weight:500;color:#414d3b;margin-right:12px}
@media print{.type-spec{display:none!important}}

/* An uninterrupted header; the material edge provides the detail. */
.card .brand-header{border:0;padding:0;position:relative;justify-content:flex-start}
.card .back-layout{grid-template-rows:calc(var(--mm) * 12) minmax(0,1fr) auto}
.card .brand-header .logo-slot{width:calc(var(--mm) * 30);height:calc(var(--mm) * 12)}
.card .brand-header .logo-slot.seal{width:calc(var(--mm) * 11);height:calc(var(--mm) * 11)}
.card .identity{align-self:start;padding-top:calc(var(--mm) * .6)}
.portrait .card .back-layout{grid-template-rows:calc(var(--mm) * 12) minmax(0,1fr) auto auto}
.portrait .card.no-qr .back-layout{grid-template-rows:calc(var(--mm) * 12) minmax(0,1fr) auto}
.portrait .card .brand-header .logo-slot{height:calc(var(--mm) * 12)}
.portrait .card .brand-header .logo-slot.seal{width:calc(var(--mm) * 11);height:calc(var(--mm) * 11)}
.portrait .card .action{border:0;padding-top:calc(var(--mm) * 1)}
.card .qr-slot{overflow:visible}
.card .qr-slot.circle,.card .qr-slot.circle .qr-placeholder{border-radius:50%}
.card .qr-slot img{border-radius:0;clip-path:none;object-fit:contain}
.card.restaurant .qr-slot{background:transparent}

/* PrintShop: quieter type, a stronger original logo and a small CMYK signature. */
.card.print{font-family:var(--info-font)}
.card.print .identity h2{font-size:calc(var(--pt) * 13);font-weight:500;line-height:1.2}
.card.print .identity p{font-size:calc(var(--pt) * 8.5);margin-top:calc(var(--mm) * 1)}
.card.print .message h2{font-weight:600;letter-spacing:calc(var(--mm) * .1)}
.card.print .message p{font-size:calc(var(--pt) * 8);letter-spacing:calc(var(--mm) * .25)}
.card.print .front-hero>.logo-slot{width:calc(var(--mm) * 36);height:calc(var(--mm) * 20)}
.card.print .brand-header:after{content:'';position:absolute;right:0;top:calc(var(--mm) * 1);width:calc(var(--mm) * 11);height:calc(var(--mm) * 1.4);background:linear-gradient(90deg,#00a6d7 0 21%,transparent 21% 26%,#e5007e 26% 47%,transparent 47% 52%,#f7d800 52% 73%,transparent 73% 78%,#252525 78%)}

.card.die-shaped,.card.die-shaped.round,.card.die-shaped.cut{border-radius:0;clip-path:none;mask-image:var(--die-mask);mask-size:100% 100%;mask-repeat:no-repeat;mask-mode:alpha;-webkit-mask-image:var(--die-mask);-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat}
.cut-actions{display:flex;gap:7px;margin-top:12px}
.cut-actions button{flex:1;background:#eef0e7;border:1px solid #d2d8c8;border-radius:4px;padding:10px 6px;color:#48543c;font-size:10px}
.cut-actions button:disabled{opacity:.5;cursor:wait}
.brand-character{max-width:60%;line-height:1.6}

/* TRGS: original website compass geometry, blue/violet/gold orbit language. */
.card.technology .message{width:max-content;max-width:100%}
.card.technology .message h2{font-family:Inter,Arial,sans-serif;font-size:calc(var(--pt) * 14);font-weight:600;line-height:1.25;letter-spacing:-.025em;text-align:left;word-spacing:normal}
.card.technology .message .trgs-claim{white-space:normal}
.trgs-claim-line{display:block;min-height:1lh}
.card.technology .message p{font-size:calc(var(--pt) * 8);line-height:1.25;margin-top:calc(var(--mm) * 1.5)}
.card.technology .message .trgs-pillars{display:flex;flex-direction:column;white-space:normal;text-align:left;font-weight:400;line-height:1.5}
.card.technology .message .trgs-pillars:empty{display:none}
.card.technology .trgs-pillar strong{font-weight:700}
.brand-preview:not(.portrait) .card.technology .front-hero>.logo-slot{height:calc(var(--mm) * 14)}
.card.technology .front-footer{border:0;padding-top:0;justify-content:flex-start}
.card.technology .brand-web{text-align:left}
.card.technology .decoration{right:calc(var(--mm) * -22);top:calc(var(--mm) * -10);width:calc(var(--mm) * 76);height:calc(var(--mm) * 76);background:url('assets/trgs-orbit-dark.svg') center/contain no-repeat;border:0;border-radius:0;transform:none;opacity:.8}
.card.technology.back .decoration{background-image:url('assets/trgs-orbit-light.svg');opacity:.12}
.portrait .card.technology .decoration{right:calc(var(--mm) * -33);top:calc(var(--mm) * 17);width:calc(var(--mm) * 80);height:calc(var(--mm) * 80)}
.show-structure .card.technology .decoration{opacity:.07}
@media print{.card.technology .decoration{opacity:.8!important}.card.technology.back .decoration{opacity:.12!important}}

/* Three Woks voucher reference: a large cropped seal, keeping its own gold arcs. */
.card.restaurant .decoration{width:calc(var(--mm) * 76);height:calc(var(--mm) * 76);right:calc(var(--mm) * -43);top:calc(var(--mm) * -11);background:url('assets/three-woks.svg') center/contain no-repeat;border:0;border-radius:0;transform:none;opacity:.12}
.card.restaurant.back .decoration{opacity:.06}
.portrait .card.restaurant .decoration{width:calc(var(--mm) * 90);height:calc(var(--mm) * 90);right:calc(var(--mm) * -61);top:calc(var(--mm) * 8)}
.show-structure .card.restaurant .decoration{opacity:.04}
@media print{.card.restaurant .decoration{opacity:.12!important}.card.restaurant.back .decoration{opacity:.06!important}}

/* Three Woks: scale both radii together, with a left/right bottom anchor. */
.card.restaurant.has-paper-bias,#paper-bias-swatch.has-paper-bias{background-color:var(--paper);background-image:radial-gradient(ellipse calc(var(--paper-bias-size,80%) * .9) var(--paper-bias-size,80%) at var(--paper-bias-x,100%) 100%,hsl(var(--paper-bias-hue) 44% 65% / var(--paper-bias-strength)) 0%,hsl(var(--paper-bias-hue) 44% 65% / calc(var(--paper-bias-strength) * .45)) 45%,hsl(var(--paper-bias-hue) 44% 65% / 0%) 100%)}
.paper-bias-preview{display:flex;align-items:center;gap:9px;margin-top:12px;font-size:11px;color:#59644e}
#paper-bias-swatch{width:36px;height:28px;border:1px solid #d2d8c8;border-radius:4px;background-color:var(--paper)}
.paper-bias-preview button{margin-left:auto;padding:6px 8px;border:1px solid #d2d8c8;border-radius:4px;background:#f3eef7;color:#715489;font-size:11px;cursor:pointer}
#woks-paper-bias-controls input[type=range]{accent-color:#9272aa}
#woks-paper-bias-controls input:disabled,#woks-paper-bias-controls button:disabled{opacity:.4}
.cut-presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:8px}
.cut-preset-heading{grid-column:1/-1;font-size:10px;color:#707b65;margin:8px 0 2px}
.cut-presets button{min-width:0;padding:5px;border:1px solid #d5d9cc;background:#f7f7ef;color:#42473d;cursor:pointer}
.cut-presets button svg{display:block;width:100%;height:64px;background:#e4e7dc}
.cut-presets button span{display:block;margin-top:5px;font-size:10px;white-space:nowrap}
.cut-presets button[aria-pressed=true]{border-color:#697c55;box-shadow:inset 0 0 0 1px #697c55;background:#eef1e5}
.cut-presets button:focus-visible{outline:2px solid #697c55;outline-offset:2px}