#dozo{--cream:#eae0c7;--ink:#2e211b;font-family:system-ui,sans-serif}
#dozo *{box-sizing:border-box}
#dozo .shot{position:relative;isolation:isolate;min-height:490px;overflow:hidden;background:#241a17}
#dozo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 53%;z-index:-3;background:url("/assets/poster.jpg") center 53%/cover}
#dozo .grain{position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:.72;mix-blend-mode:overlay;background-size:190px 190px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.63' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E")}
#dozo .shot::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#2e211b80,transparent 85%),linear-gradient(0deg,#2e211bc9,transparent 54%,#2e211b57)}
#dozo header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:22px 6%}
#dozo .mark{width:76px;height:119px;background:url("/assets/dozo.webp") center/82% auto no-repeat;filter:drop-shadow(0 0 1.25px #fff7)}
#dozo nav{display:flex;gap:clamp(10px,2.2vw,25px);font-size:15px;letter-spacing:.055em}
#dozo nav button{border:0;background:transparent;color:var(--cream);font:inherit;letter-spacing:inherit;padding:8px 0;cursor:pointer}
#dozo nav button[aria-expanded=true]{text-decoration:underline;text-underline-offset:5px}
#dozo .content{position:absolute;right:6%;bottom:24px;width:min(72%,270px);font-size:17px;color:var(--ink)}
#dozo h2{font:400 28px/1.12 Georgia,serif;margin:0 0 6px}
#dozo p{margin:0 0 6px;line-height:1.35}
#dozo .music{color:var(--cream)}
#dozo .music h2{color:var(--cream);text-shadow:inherit}
#dozo .stream-links{display:grid;justify-items:start;gap:0;line-height:1.3}
#dozo .stream-links a{color:inherit;text-decoration:none}
#dozo .stream-links a:hover{text-decoration:underline;text-underline-offset:3px}
#dozo .ink-line{background:var(--cream);padding:2px 5px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
#dozo form,#dozo label{display:grid;gap:6px}
#dozo label span,#dozo form button{justify-self:start}
#dozo input,#dozo textarea,#dozo form button{font:inherit;color:var(--ink);background:var(--cream);border:0;border-bottom:1px solid var(--ink);padding:4px 6px}
#dozo output:not(:empty){background:var(--cream)}

#dozo .shot,
#dozo .shot button,
#dozo .shot input,
#dozo .shot textarea{text-shadow:0 0 4px #eae0c764}
#dozo .ink-line,
#dozo .shot form button,
#dozo .shot form input,
#dozo .shot form textarea,
#dozo .shot form output{text-shadow:0 0 3px #2e211b48}
#dozo .about{color:var(--cream)}
#dozo .about h2{color:inherit;text-shadow:inherit}
#dozo .about a{color:inherit;text-underline-offset:3px}
#dozo .about .profiles{font-size:12px;line-height:1.4}

#dozo .contact-note{color:var(--cream)}
#dozo .contact-note p{font-size:16px;margin-bottom:9px}
#dozo .contact-note form{gap:8px}
#dozo .contact-note label{font-size:14px;gap:2px}
#dozo .contact-note form input,
#dozo .contact-note form textarea,
#dozo .contact-note form button,
#dozo .contact-note form output{background:transparent;color:var(--cream);text-shadow:0 0 4px #eae0c764}
#dozo .contact-note input,
#dozo .contact-note textarea{width:100%;padding:4px 0;border-radius:0;border-bottom:1px solid #eae0c79c;font-size:16px}
#dozo .contact-note textarea{resize:none}
#dozo .contact-note form button{padding:2px 0;border-bottom:0;text-decoration:underline;text-decoration-color:#eae0c79c;text-underline-offset:1px;cursor:pointer}
#dozo .contact-note output{font-size:12px}
#dozo .contact-note output:empty{display:none}
#dozo .contact-note :focus-visible{outline:1px solid var(--cream);outline-offset:3px}

#dozo .contact-actions{display:flex;align-items:center;gap:16px}

#dozo .contact-note textarea{line-height:1.15;padding-block:2px}
#dozo .content{left:50%;right:auto;bottom:34px;transform:translateX(-50%);text-align:center}
#dozo .stream-links{justify-items:center}
#dozo .contact-note label span{justify-self:center}
#dozo .contact-actions{justify-content:center}
html,body{margin:0;background:#241a17}
#dozo .shot{min-height:max(420px,100svh)}
#dozo .content{bottom:max(34px,env(safe-area-inset-bottom))}
#dozo .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#dozo nav button:focus-visible{outline:1px solid var(--cream);outline-offset:3px}
#dozo input,#dozo textarea{min-width:0}
#dozo .contact-actions button:disabled{opacity:.65}
/* Keep the same alignment across phone, tablet, and desktop. */
#dozo header{padding:clamp(14px,3vw,28px) clamp(16px,4vw,48px)}
#dozo .mark{flex:none;width:clamp(68px,10vw,86px);height:auto;aspect-ratio:76 / 119}
#dozo nav{gap:clamp(12px,2.2vw,24px);font-size:clamp(13px,1.9vw,16px)}
#dozo nav button{min-height:44px}
#dozo .content{
  width:clamp(260px,70vw,320px);
  max-width:calc(100% - 32px);
  bottom:max(clamp(28px,4svh,46px),calc(env(safe-area-inset-bottom) + 12px));
  font-size:clamp(16px,2.2vw,18px)
}
#dozo h2{font-size:clamp(25px,3.6vw,30px)}
#dozo .contact-note p{font-size:clamp(14px,2vw,16px)}
#dozo .contact-note input,#dozo .contact-note textarea{text-align:center}
@media(orientation:portrait){
  #dozo video{object-position:center}
  #dozo .shot::after{background:linear-gradient(0deg,#2e211bc9,transparent 65%,#2e211b57)}
}
@media(max-height:460px){#dozo .shot:has(.contact-note:not([hidden])){min-height:500px}}