*{box-sizing:border-box}
:root{color-scheme:light;background:#df3224;font-family:Arial,Helvetica,sans-serif;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0}
#experience{position:relative;isolation:isolate;width:100%;height:100vh;height:100dvh;min-height:280px;overflow:hidden}
#art{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.identity{position:absolute;inset:20% 18%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#f5f3e9;text-align:center;pointer-events:none}
h1{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;font-size:clamp(5rem,min(11vw,15vh),12rem);letter-spacing:-.065em;line-height:.8;margin:0}
h1 span{display:block}
.identity p{font-size:.875rem;letter-spacing:.12em;line-height:1.5;margin:clamp(28px,5vh,54px) 0 0}
.contact{position:absolute;right:max(32px,env(safe-area-inset-right));bottom:max(30px,env(safe-area-inset-bottom));font-size:1rem;line-height:1.5;color:#fff;mix-blend-mode:difference;text-decoration:none;padding:12px 4px;min-height:48px;min-width:64px;text-align:center;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
@media(hover:hover){.contact:hover{text-decoration:underline;text-underline-offset:5px}}
.contact:focus-visible{outline:2px solid #fff;outline-offset:5px}
@media(max-width:600px){
  .identity{inset:20% 10%}
  h1{font-size:min(23vw,18svh)}
  .identity p{font-size:.875rem;margin-top:clamp(22px,4svh,32px)}
  .contact{right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));padding:12px 8px}
}
@media(max-height:500px) and (orientation:landscape){
  .identity{inset:19% 18%}
  h1{font-size:min(14vw,17svh)}
  .identity p{font-size:.875rem;margin-top:clamp(12px,3svh,20px)}
  .contact{right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(8px + env(safe-area-inset-bottom,0px));padding:12px 8px}
}