:root{--ink:#382019;--brown:#2a1714;--shadow:#4a2419;--paper:#f8e8b7;--cream:#f4e1a6;--mustard:#e6ad21;--teal:#36726e;color:var(--paper);background:var(--brown);font-synthesis:none;font-family:system-ui,sans-serif}*{box-sizing:border-box}html,body,#app{min-height:100%;margin:0}body{background-color:var(--brown);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M32 0v64M0 32h64' fill='none' stroke='%23f8e8b7' stroke-opacity='.055'/%3E%3Ccircle cx='32' cy='32' r='1' fill='%23f8e8b7' fill-opacity='.09'/%3E%3C/svg%3E")}.sheet{min-height:100dvh;padding:max(1.5rem, env(safe-area-inset-top)) max(1.5rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1.5rem, env(safe-area-inset-left));place-items:center;display:grid}.card{isolation:isolate;border:.35rem solid var(--ink);width:min(100%,75rem);color:var(--ink);background:var(--paper);box-shadow:.75rem .75rem 0 var(--shadow);border-radius:1rem;padding:clamp(1.5rem,4vw,3rem);position:relative;overflow:hidden}.card:before{aspect-ratio:1;content:"";background:var(--teal);z-index:0;width:clamp(5rem,13vw,10rem);position:absolute;top:0;right:0}.content{z-index:1;grid-template-columns:minmax(0,1fr) minmax(15rem,.78fr);align-items:center;gap:clamp(2rem,7vw,7rem);display:grid;position:relative}h1{letter-spacing:.02em;text-transform:uppercase;max-width:8ch;margin:0;font-family:Arial Black,Impact,system-ui,sans-serif;font-size:clamp(3rem,9vw,7.5rem);line-height:.82}.credentials{border:.22rem solid var(--ink);width:min(100%,20rem);color:var(--brown);background:var(--mustard);box-shadow:.38rem .38rem 0 var(--shadow);margin:clamp(1.5rem,4vw,3rem) 0 0;padding:.7rem 1rem;list-style:none;display:inline-grid}.credentials li{letter-spacing:.1em;text-align:center;text-transform:uppercase;font-family:Arial Black,Impact,system-ui,sans-serif;font-size:clamp(.72rem,1.3vw,.9rem);line-height:1.35}.portrait{border:.25rem solid var(--ink);background:var(--cream);box-shadow:.55rem .55rem 0 var(--teal);margin:0;padding:clamp(.6rem,1.5vw,1rem)}.portrait img{aspect-ratio:.9;object-fit:cover;object-position:53% center;width:100%;display:block}@media (width<=42rem){.content{grid-template-columns:1fr}.portrait{max-width:26rem}}@media (width<=28rem){.card{padding:1.5rem}}