/* shhp-composition-20261028.1; opt-in layout only. Load AFTER the unchanged night kit. */
.shp-night.shp-composition{--comp-pad:20px;--comp-header-y:16px;--comp-logo:80px;--comp-header-min:112px;--comp-clear:12px;--comp-title:32px;--comp-body:18px;--comp-target:56px;--comp-utility-max:124px;--comp-hero-brand:256px;--comp-frame-max:1920px;--comp-gap:24px;font-size:var(--comp-body)}
.shp-composition .shp-shell{min-block-size:0;min-height:0;max-inline-size:var(--comp-frame-max);margin-inline:auto}
.shp-composition .shp-comp-header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:var(--comp-clear);padding-block:var(--comp-header-y);padding-inline:max(var(--comp-pad),env(safe-area-inset-left)) max(var(--comp-pad),env(safe-area-inset-right));min-block-size:var(--comp-header-min);background:#1B552D}
.shp-composition .shp-comp-brand{display:flex;flex-direction:column;align-items:flex-start;gap:var(--comp-clear);min-inline-size:0}
.shp-composition .shp-comp-logo{display:block;block-size:var(--comp-logo);height:var(--comp-logo);inline-size:auto;width:auto;max-inline-size:100%;max-width:100%;object-fit:contain;flex:none;filter:none;transform:none}
.shp-composition .shp-comp-partner{font:700 16px/1.2 Roboto,sans-serif;color:#FFFFFF}
.shp-composition .shp-comp-utility{justify-self:end;max-inline-size:var(--comp-utility-max);min-block-size:var(--comp-target);white-space:normal;overflow-wrap:break-word;line-height:1.2;padding:12px 16px;font-size:16px}
.shp-composition .shp-comp-header-ornament{display:none;pointer-events:none}
.shp-composition .shp-comp-main,.shp-composition .shp-comp-footer{padding-inline:max(var(--comp-pad),env(safe-area-inset-left)) max(var(--comp-pad),env(safe-area-inset-right));min-inline-size:0}
.shp-composition .shp-comp-main{padding-block:var(--comp-gap);display:flex;flex-direction:column;gap:var(--comp-gap)}
.shp-composition .shp-comp-title{font:700 var(--comp-title)/1.12 Roboto,sans-serif;max-inline-size:38ch;text-align:start;text-wrap:balance;margin:0;overflow-wrap:break-word}
.shp-composition .shp-comp-copy{max-inline-size:68ch;margin:0}
.shp-composition .shp-comp-stage{min-inline-size:0;max-inline-size:100%}
.shp-composition .shp-comp-footer{padding-block:var(--comp-gap) max(var(--comp-gap),env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:16px;background:#1B552D}
.shp-composition .shp-comp-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.shp-composition .shp-comp-actions>.shp-button{min-block-size:var(--comp-target);white-space:normal;max-inline-size:100%}
.shp-composition .shp-comp-actions>.shp-button:only-child{margin-inline:auto}
.shp-composition[data-comp-screen=start] .shp-comp-actions,.shp-composition[data-comp-screen=result] .shp-comp-actions{justify-content:center}
.shp-composition .shp-comp-hero-brand{inline-size:min(100%,var(--comp-hero-brand));aspect-ratio:16/9;object-fit:contain;display:block;margin-inline:auto;border-radius:20px;pointer-events:none}
/* Original-brand rectangular viewport; the tiger silhouette remains whole. */
.shp-composition .shp-comp-header-ornament{background-image:url('./assets/brand-pattern.jpg');background-repeat:no-repeat;background-size:375% 397.058823529%;background-position:71.590909091% 49.504950495%;aspect-ratio:640/340;block-size:var(--comp-logo);inline-size:auto;border-radius:16px}
@media(max-width:359px){.shp-night.shp-composition{--comp-pad:16px;--comp-logo:72px;--comp-header-min:104px;--comp-title:30px;--comp-utility-max:112px;--comp-hero-brand:240px}}
@media(min-width:600px){.shp-night.shp-composition{--comp-pad:32px;--comp-header-y:24px;--comp-logo:80px;--comp-header-min:128px;--comp-clear:24px;--comp-title:48px;--comp-body:20px;--comp-target:64px;--comp-utility-max:240px;--comp-hero-brand:360px}.shp-composition .shp-comp-utility{font-size:20px;padding:12px 24px}.shp-composition .shp-comp-partner{font-size:20px}}
@media(min-width:600px) and (orientation:portrait){.shp-night.shp-composition{--comp-logo:96px;--comp-header-min:144px;--comp-title:44px;--comp-body:22px;--comp-hero-brand:480px}}
@media(min-width:900px) and (min-height:600px){.shp-composition .shp-comp-header{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}.shp-composition .shp-comp-header-ornament{display:block;justify-self:center}.shp-composition .shp-comp-utility{grid-column:3}}
@media(min-width:900px) and (orientation:landscape){.shp-composition .shp-comp-intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;align-items:center}.shp-composition .shp-comp-hero-brand{justify-self:end;margin-inline:0}}
@media(min-width:1600px) and (min-height:800px) and (orientation:landscape){.shp-night.shp-composition{--comp-pad:clamp(48px,2.5vw,96px);--comp-header-y:clamp(24px,1.25vw,48px);--comp-logo:clamp(96px,5vw,192px);--comp-header-min:clamp(144px,7.5vw,288px);--comp-clear:clamp(24px,1.25vw,48px);--comp-title:clamp(64px,3.333333333vw,128px);--comp-body:clamp(24px,1.25vw,48px);--comp-target:clamp(72px,3.75vw,144px);--comp-utility-max:clamp(240px,12.5vw,480px);--comp-hero-brand:clamp(480px,25vw,960px);--comp-frame-max:clamp(1920px,100vw,3840px);--comp-gap:clamp(32px,1.666666667vw,64px)}.shp-composition .shp-comp-utility{font-size:clamp(20px,1.041666667vw,40px)}.shp-composition .shp-comp-partner{font-size:clamp(20px,1.041666667vw,40px)}}
@media(orientation:landscape) and (max-height:599px){.shp-night.shp-composition{--comp-pad:20px;--comp-header-y:16px;--comp-logo:56px;--comp-header-min:88px;--comp-clear:12px;--comp-title:32px;--comp-body:18px;--comp-target:56px;--comp-utility-max:200px;--comp-hero-brand:200px}.shp-composition .shp-comp-header{grid-template-columns:minmax(0,1fr) auto}.shp-composition .shp-comp-header-ornament{display:none}.shp-composition .shp-comp-utility{grid-column:auto;font-size:16px}.shp-composition .shp-comp-intro{display:block}}
