/* Explicit, bounded size choices. Presets remain untouched until a size is changed. */
.size-controls{display:grid;gap:16px;margin-top:18px;min-width:0}.size-control{min-width:0}.size-control-heading{display:flex;align-items:center;gap:8px;margin-bottom:9px}.size-control-heading>label{flex:1;min-width:0;margin:0;font:700 12px/1.4 Chivo,Arial,sans-serif;color:var(--ink,#f4f1e6)}.size-control-heading>output{font:11px/1.4 Chivo,Arial,sans-serif;color:var(--muted,#b6b2c4);white-space:nowrap}.size-control-heading .size-reset{border:1px solid var(--line,#35313f);border-radius:5px;padding:4px 7px;background:transparent;color:var(--ink,#f4f1e6);font:11px/1.3 Chivo,Arial,sans-serif;cursor:pointer}.size-control-fields{display:grid;grid-template-columns:minmax(0,1fr) 62px 20px;align-items:center;gap:9px;min-width:0}.size-control-fields>input[type=range]{width:100%;min-width:0;padding:0;margin:0;accent-color:var(--accent,#f3eb36);background:transparent}.size-control-fields>.size-number{width:100%;min-width:0;box-sizing:border-box;margin:0;padding:7px 5px;border:1px solid var(--line,#35313f);border-radius:5px;background:var(--bg,#0c0b12);color:var(--ink,#f4f1e6);font:12px/1.4 Chivo,Arial,sans-serif}.size-control-fields>span{font:11px Chivo,Arial,sans-serif;color:var(--muted,#b6b2c4)}.size-error{display:block;color:#ffbdb2;font:11px/1.4 Chivo,Arial,sans-serif;margin-top:6px}.size-error:empty{display:none}.size-number[aria-invalid=true]{border-color:#ffbdb2}.header-art-slot>.size-controls{grid-column:1/-1;margin:2px 0 0;padding-top:10px;border-top:1px solid var(--line,#35313f)}.header-art-slot .size-control-heading{flex-wrap:wrap}.demo-type-settings{border-top:1px solid #35313f;padding-top:18px;margin-top:20px}.demo-type-settings>summary{cursor:pointer;font:700 16px Chivo,Arial,sans-serif;color:#f4f1e6}.demo-type-settings>p{font:12px/1.6 Chivo,Arial,sans-serif;color:#b6b2c4}.demo-header-settings>.size-controls{margin-bottom:20px}

/* Typography caps use the viewport on the directory and the preview container
   on personal pages, so a large desktop choice cannot escape a phone card. */
body:not(.personal-page)[data-size-title] .hero-copy h1{font-size:min(var(--lp-title-size),calc(8vw + 8px))!important;line-height:1.1;overflow-wrap:anywhere}
.personal-page[data-size-title] .personal-title{font-size:min(var(--lp-title-size),calc(8cqi + 8px))!important;line-height:1.1;overflow-wrap:anywhere}
:is(body,.personal-page)[data-size-title] :is(.hero-copy h1,.personal-title)>span{font-size:inherit!important;letter-spacing:inherit}
body:not(.personal-page)[data-size-links] :is(.destination-label strong,.composition-heading,.resource-link strong){font-size:min(var(--lp-links-size),calc(2.5vw + 14px))!important;line-height:1.2;white-space:normal;overflow-wrap:anywhere}
.personal-page[data-size-links] :is(.personal-link-title,.composition-heading){font-size:min(var(--lp-links-size),calc(2.5cqi + 14px))!important;line-height:1.2;white-space:normal;overflow-wrap:anywhere}
body:not(.personal-page)[data-size-body] :is(.destination-label small,.card-long-description,.dialog-description,.resource-link small,.dialog-note,.hub-footer){font-size:min(var(--lp-body-size),calc(.9vw + 14px))!important;line-height:1.45;white-space:normal;overflow-wrap:anywhere}
.personal-page[data-size-body] :is(.personal-bio,.personal-link-subtitle,.personal-credit){font-size:min(var(--lp-body-size),calc(.9cqi + 14px))!important;line-height:1.45;white-space:normal;overflow-wrap:anywhere}

/* Relative widths share a fixed available row. Heights are capped on phones;
   changing any one image redistributes space instead of adding overflow. */
:is(body,.personal-page)[data-size-header] :is(.hub-hero,.personal-profile){flex-wrap:wrap}
:is(body,.personal-page)[data-size-header] :is(.hero-copy,.personal-identity){min-width:0}
:is(body,.personal-page)[data-size-header] :is(.art-strip,.personal-gallery){position:relative!important;inset:auto!important;display:flex!important;flex-flow:row nowrap;align-items:center;height:auto!important;min-height:0;max-height:none;max-width:100%;min-width:0;gap:clamp(4px,.8vw,12px);transform:none!important;mask-image:none;box-sizing:border-box;overflow:hidden}
:is(body,.personal-page)[data-size-header] :is(.art-strip,.personal-gallery)>:is(.art-tile,img){--lp-image-scale:1;flex:var(--lp-image-scale) 1 0!important;min-width:0!important;width:0!important;max-width:100%;height:clamp(32px,calc(var(--lp-header-height) * var(--lp-image-scale)),240px)!important;aspect-ratio:auto!important;align-self:center;object-fit:cover;box-sizing:border-box;transform:none!important;margin:0!important}
:is(body,.personal-page)[data-size-header] :is(.art-strip,.personal-gallery)>[data-header-index="1"]{--lp-image-scale:var(--lp-image-1-scale)}
:is(body,.personal-page)[data-size-header] :is(.art-strip,.personal-gallery)>[data-header-index="2"]{--lp-image-scale:var(--lp-image-2-scale)}
:is(body,.personal-page)[data-size-header] :is(.art-strip,.personal-gallery)>[data-header-index="3"]{--lp-image-scale:var(--lp-image-3-scale)}
:is(body,.personal-page)[data-size-header] :is(.art-strip,.personal-gallery)>[data-header-index="4"]{--lp-image-scale:var(--lp-image-4-scale)}
body:not(.personal-page)[data-size-header] .art-strip>.art-tile{max-height:min(240px,calc(20vw + 32px))}
.personal-page[data-size-header] .personal-gallery>img{max-height:min(240px,calc(20cqi + 32px))}
:is(body,.personal-page)[data-size-header] .art-tile>img{display:block;width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
@media(max-width:620px){body:not(.personal-page)[data-size-header] .art-strip{flex-basis:100%;max-width:100%}.size-control-heading{gap:6px}.size-control-heading>output{font-size:10px}}
@supports not(font-size:1cqi){.personal-page[data-size-title] .personal-title{font-size:min(var(--lp-title-size),calc(8vw + 8px))!important}.personal-page[data-size-links] :is(.personal-link-title,.composition-heading){font-size:min(var(--lp-links-size),calc(2.5vw + 14px))!important}.personal-page[data-size-body] :is(.personal-bio,.personal-link-subtitle,.personal-credit){font-size:min(var(--lp-body-size),calc(.9vw + 14px))!important}.personal-page[data-size-header] .personal-gallery>img{max-height:min(240px,calc(20vw + 32px))}}