/* PKR typography lab – one proportional logo/e/type system.
   The JS sets pixel dimensions from the LAST "e" glyph in the original SVG;
   ratios are illustrative until approved as an actual digital typography rule. */
.typolab{margin-top:48px;background:#fff;border:1px solid var(--hair);border-radius:12px;min-width:0;max-width:100%;overflow:hidden}
.typolab *{box-sizing:border-box}
.typolab-heading{padding:30px 30px 22px;display:flex;align-items:flex-start;justify-content:space-between;gap:25px}
.typolab-heading h3{font-family:var(--pkr-font,Arial,sans-serif);font-size:clamp(29px,3.3vw,43px);font-weight:700;line-height:1.1;letter-spacing:-.035em;color:var(--blue);margin:10px 0 12px}
.typolab-heading h3 span{font-weight:400}
.typolab-heading p{font-size:14px;line-height:1.65;color:#627985;max-width:700px;margin:0}
.typolab-draft{flex-shrink:0;font-size:11px;line-height:1.55;white-space:nowrap;color:#82949e;text-align:right;margin-top:5px}
.typolab-layout{padding:16px 29px 25px;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(245px,.8fr);gap:21px;align-items:start}
.typolab-stage{min-width:0;padding:25px;background:#f4f8fb;border:1px solid #d6e4ec;border-radius:10px;overflow:hidden}
.typolab-stage-top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:#648196;font-size:10px;line-height:1.55;font-weight:700;letter-spacing:.035em}
.typolab-stage-top strong{color:var(--blue);font-weight:700}
.typolab-canvas{width:100%;min-width:0;max-width:100%;padding:28px 0 21px;--tl-logo-width:323px;--tl-axis:24.75px;--tl-logo-gap:36px;--tl-half:9px;--tl-gap:18px;--tl-h-size:53.3px;--tl-h-line:53.3px;--tl-sub:16px;--tl-copy:13.33px;--tl-copy-line:18.67px;--tl-button:20px;--tl-eyebrow:16px}
.typolab-logo{display:block;width:var(--tl-logo-width);max-width:100%;height:auto;overflow:visible;object-fit:contain}
.typolab-aligned{margin-left:var(--tl-axis);min-width:0;max-width:calc(100% - var(--tl-axis));overflow-wrap:break-word}
.typolab-unit-bridge{font-size:11px;line-height:1.55;color:#6b8594;border-left:2px solid #e60073;padding-left:9px;margin:13px 0 0}
.typolab-logo-gap{height:var(--tl-logo-gap)}
.typolab-gap{height:var(--tl-gap);border-left:2px solid #e60073;position:relative;margin-left:-12px}
.typolab-gap-half{height:var(--tl-half)}
.typolab-gap:after{content:"";position:absolute;top:50%;left:-5px;width:10px;border-top:1px solid #e60073}
.typolab-eyebrow{display:block;width:auto;max-width:100%;font-family:var(--pkr-font,Arial,sans-serif);color:#373e42;background:transparent;font-size:var(--tl-eyebrow);line-height:1.25;font-weight:700;margin:0;padding:0;border-radius:0}
.typolab-headline{font-family:var(--pkr-font,Arial,sans-serif);color:var(--blue);font-size:var(--tl-h-size);line-height:var(--tl-h-line);font-weight:400;letter-spacing:-.038em;margin:0;overflow-wrap:break-word}
.typolab-headline strong{display:block;font-weight:700}
.typolab-headline span{display:block;font-weight:400}
.typolab-subline{font-family:var(--pkr-font,Arial,sans-serif);font-size:var(--tl-sub);line-height:1.3;font-weight:700;color:var(--blue);margin:0}
.typolab-bodycopy{font-family:var(--pkr-font,Arial,sans-serif);font-size:var(--tl-copy);line-height:var(--tl-copy-line);font-weight:400;color:var(--ink);margin:0;max-width:100%}
.typolab-cta{display:inline-block;max-width:100%;font-family:var(--pkr-font,Arial,sans-serif);font-size:var(--tl-button);line-height:1.2;font-weight:700;border:0;border-radius:var(--tl-half);padding:var(--tl-half) var(--tl-gap);background:var(--yellow);color:var(--ink);text-align:center}
.typolab-stage-bottom{border-top:1px solid #d5e4eb;padding-top:14px;color:#77909d;font-size:11px;line-height:1.6}
.typolab-controls{border:1px solid var(--hair);border-radius:10px;min-width:0;padding:24px 20px;background:#fff}
.typolab-controls-title{font-size:15px;font-weight:700;color:var(--blue);margin:0 0 23px;line-height:1.35}
.typolab-control{display:block;margin:0 0 20px}
.typolab-control>span{display:flex;align-items:baseline;justify-content:space-between;gap:9px;font-size:12px;font-weight:700;color:#526b7b;line-height:1.5}
.typolab-control output{font-size:14px;font-weight:700;white-space:nowrap;color:var(--blue)}
.typolab-control input[type="range"]{display:block;width:100%;min-height:30px;margin:12px 0 0;accent-color:var(--blue);cursor:pointer}
.typolab-measures{display:grid;gap:0;margin:0 0 18px;border-top:1px solid var(--hair)}
.typolab-measures>div{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:3px 12px;padding:11px 0;border-bottom:1px solid var(--hair)}
.typolab-measures span{font-size:12px;line-height:1.35;color:#667985}
.typolab-measures strong{font-size:12px;white-space:nowrap;color:var(--blue);font-weight:700;text-align:right} 
.typolab-measures small{grid-column:2;text-align:right;font-size:10px;color:#778b97;white-space:normal;line-height:1.35}
.typolab-reset{font-family:var(--pkr-font,Arial,sans-serif);font-size:12px;font-weight:700;border:1px solid #d1e2ec;border-radius:8px;background:#eff5f8;color:var(--blue);width:100%;min-height:40px;padding:11px 12px;cursor:pointer}
.typolab-reset:hover{background:#daeaf3}
.typolab-controls-note{font-size:11px;line-height:1.55;color:#8295a0;margin:15px 0 0}
.typolab-source{padding:0 29px 27px;margin:0;color:#778c98;font-size:12px;line-height:1.7}
.typolab-source strong{color:#506c7d}
@media(max-width:1150px){.typolab-layout{grid-template-columns:1fr}.typolab-controls{width:100%}}
@media(max-width:680px){
 .typolab{margin-top:34px}
 .typolab-heading{padding:23px 18px 19px;display:block}
 .typolab-heading h3{font-size:clamp(26px,7vw,37px)}
 .typolab-heading p{font-size:13px}
 .typolab-draft{margin-top:12px;text-align:left;white-space:normal}
 .typolab-layout{padding:0 13px 19px;gap:13px}
 .typolab-stage{padding:17px 15px}
 .typolab-stage-top{font-size:9px}
 .typolab-canvas{padding-top:20px}
 .typolab-unit-bridge{font-size:10px}
 .typolab-controls{padding:19px 15px}
 .typolab-source{padding:0 17px 23px;font-size:11px}
}

/* Optional elements: hide their following spacer together with the element. */
.typolab-optional[hidden],.typolab-measures>div[hidden]{display:none!important}
.typolab-switches{display:flex;align-items:center;flex-wrap:wrap;gap:13px 22px;margin:1px 0 23px;border-top:1px solid var(--hair);padding-top:15px}
.typolab-switch{display:inline-flex;align-items:center;gap:9px;cursor:pointer;color:#526b7b;font-size:12px;font-weight:700;line-height:1.35}
.typolab-switch input{margin:0;width:17px;height:17px;accent-color:var(--blue);flex:none;cursor:pointer}
.typolab-controls-note strong{display:block;color:#536f7f;margin-bottom:6px}
@media(max-width:680px){.typolab-switches{gap:12px 15px}.typolab-switch{font-size:12px}}