:root{--font-display:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,'Times New Roman',serif;--font-body:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;--bg:#14151A;--surface:#1B1D24;--surface-2:#22242C;--text:#F1EEE7;--text-muted:#9A9DAA;--accent:#E8A33D;--accent-2:#4FA8A0;--border:#2C2F39;--radius:8px;--radius-sm:4px;}*,*::before,*::after{ box-sizing:border-box; }html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;}h1,h2,h3{ font-family:var(--font-display); font-weight:600; line-height:1.1; margin:0; }p{ margin:0; }a{ color:inherit; }img{ max-width:100%; display:block; }:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }.container{ max-width:1100px; margin-inline:auto; padding-inline:clamp(20px,5vw,64px); }section{ padding-block:clamp(32px,5vw,64px); scroll-margin-top:96px; }header{position:sticky; top:0; z-index:10;background:rgba(20,21,26,0.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);}.nav{ display:flex; align-items:center; justify-content:space-between; padding-block:18px; }.brand{ display:flex; flex-direction:column; text-decoration:none; line-height:1.15; }.brand-name{ font-family:var(--font-display); font-weight:600; font-size:1.25rem; }.brand-role{ font-size:0.72rem; color:var(--accent-2); letter-spacing:0.04em; margin-top:2px; }.nav-links{ display:flex; gap:clamp(16px,3vw,32px); list-style:none; margin:0; padding:0; flex-wrap:wrap; }.nav-links a{ text-decoration:none; font-size:0.95rem; color:var(--text-muted); transition:color .15s ease; }.nav-links a:hover{ color:var(--accent); }.hero{ padding-block:clamp(28px,6vw,72px) clamp(12px,2.5vw,24px); }.hero h1{ font-size:clamp(2.75rem,7vw,5rem); }.hero-subrole{ margin-top:10px; font-size:0.85rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); }.hero-tagline{ margin-top:22px; font-family:var(--font-display); font-weight:500; font-style:italic; font-size:clamp(1.5rem,3.6vw,2.3rem); color:var(--accent); line-height:1.15; }.hero-lead{ margin-top:20px; max-width:52ch; font-size:clamp(1.05rem,1.6vw,1.2rem); color:var(--text-muted); }.hero-ctas{ display:flex; gap:12px; margin-top:24px; flex-wrap:wrap; }.btn{ display:inline-flex; align-items:center; padding:13px 24px; border-radius:var(--radius-sm); font-weight:600; font-size:0.95rem; text-decoration:none; transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease; }.btn-primary{ background:var(--accent); color:#161217; }.btn-primary:hover{ transform:translateY(-1px); background:#f0b458; }.btn-secondary{ border:1px solid var(--border); color:var(--text); }.btn-secondary:hover{ border-color:var(--accent); color:var(--accent); }@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }.section-head{ max-width:60ch; margin-bottom:clamp(18px,3vw,28px); }.section-head h1,.section-head h2{ font-size:clamp(1.75rem,3.2vw,2.5rem); }.section-head p{ margin-top:14px; color:var(--text-muted); font-size:1.05rem; }.chain{ display:flex; gap:32px; border-top:1px solid var(--border); padding-top:36px; flex-wrap:wrap; }.chain-item{ flex:1 1 200px; position:relative; }.chain-item::before{ content:''; position:absolute; top:-45px; left:0; width:11px; height:11px; border-radius:50%; background:var(--accent); }.group-label{ font-size:0.95rem; font-weight:600; color:var(--accent); margin:0 0 22px; }.chain + .group-label{ margin-top:30px; }.chain.plain{ padding-top:24px; }.chain.plain .chain-item::before{ display:none; }.chain-item h3{ font-size:1.1rem; font-weight:600; margin-bottom:10px; }.chain-item p{ color:var(--text-muted); font-size:0.95rem; }@media (max-width:720px){.chain{ flex-direction:column; border-top:none; border-left:1px solid var(--border); padding-top:0; padding-left:26px; margin-left:5px; gap:30px; }.chain-item::before{ top:5px; left:-31px; }.chain.plain{ border-left:none; padding-left:0; margin-left:0; gap:22px; }.nav{ flex-direction:column; align-items:flex-start; gap:6px; padding-block:10px; }.nav-links{ flex-wrap:nowrap; overflow-x:auto; width:100%; gap:16px; scrollbar-width:none; }.nav-links::-webkit-scrollbar{ display:none; }.nav-links a{ font-size:0.85rem; white-space:nowrap; display:inline-block; padding-block:6px; }.stream-badge{ padding:8px 12px; }}.video-wrap{ position:relative; width:100%; padding-bottom:56.25%; height:0; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); background:var(--surface); }.video-wrap iframe{ position:absolute; top:0; left:0; width:100%; height:100%; border:0; }.work-note{ margin-top:20px; color:var(--text-muted); font-size:0.9rem; }.video-loading{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:0.95rem; text-align:center; padding:0 20px; }.thumb-row{ display:flex; gap:12px; overflow-x:auto; margin-top:16px; padding-bottom:10px; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }.thumb-row::-webkit-scrollbar{ height:6px; }.thumb-row::-webkit-scrollbar-thumb{ background:var(--border); border-radius:3px; }.thumb{ flex:0 0 auto; width:150px; aspect-ratio:16/9; border-radius:var(--radius-sm); overflow:hidden; border:2px solid transparent; cursor:pointer; background:var(--surface); padding:0; opacity:0.75; transition:opacity .15s ease, border-color .15s ease; }.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }.thumb:hover{ opacity:1; border-color:var(--accent-2); }.thumb.active{ opacity:1; border-color:var(--accent); }.project-block{ padding-top:26px; margin-top:26px; border-top:1px solid var(--border); }.section-head + .project-block{ padding-top:0; margin-top:0; border-top:none; }.project-head{ margin-bottom:18px; }.project-head h3{ font-size:1.3rem; }.project-meta{ margin-top:8px; display:flex; gap:16px; flex-wrap:wrap; font-size:0.9rem; }.project-artist{ color:var(--text-muted); }.project-role{ color:var(--accent); }.soundcloud-wrap{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); background:var(--surface); }.soundcloud-wrap iframe{ display:block; }.stream-badges{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px; }.stream-label{ font-size:0.85rem; color:var(--text-muted); }.stream-badge{ padding:8px 16px; border:1px solid var(--border); border-radius:999px; font-size:0.85rem; text-decoration:none; color:var(--text); transition:border-color .15s ease, color .15s ease; }.stream-badge{ display:inline-flex; align-items:center; gap:8px; }.stream-badge svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }.stream-badge:hover{ border-color:var(--accent); color:var(--accent); }.about-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(20px,4vw,48px); }.about-grid p{ font-size:1.05rem; color:var(--text-muted); }.about-grid p + p{ margin-top:16px; }.facts{ list-style:none; margin:0; padding:0; border-top:1px solid var(--border); }.facts li{ padding-block:14px; border-bottom:1px solid var(--border); font-size:0.95rem; display:flex; justify-content:space-between; gap:16px; }.facts li span:first-child{ color:var(--text-muted); }.facts li span:last-child{ text-align:right; }@media (max-width:800px){ .about-grid{ grid-template-columns:1fr; } }.contact-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(20px,4vw,48px); align-items:start; }.contact-lead{ font-size:clamp(1.5rem,3vw,2rem); font-family:var(--font-display); font-weight:600; max-width:16ch; }.contact-detail{ margin-top:24px; display:flex; flex-direction:column; gap:10px; }.contact-detail a{ text-decoration:none; font-size:1.05rem; }.contact-detail a:hover{ color:var(--accent); }@media (max-width:800px){ .contact-grid{ grid-template-columns:1fr; } }.social-icons{ list-style:none; margin:28px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }.social-icons a{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid var(--border); border-radius:50%; color:var(--text); transition:border-color .15s ease, color .15s ease; }.social-icons a:hover{ border-color:var(--accent); color:var(--accent); }.social-icons svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }footer{ border-top:1px solid var(--border); padding-block:32px; }.footer-row{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; color:var(--text-muted); font-size:0.85rem; }.nav-links a[aria-current="page"]{ color:var(--accent); }.page-cta{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:32px; padding-top:22px; border-top:1px solid var(--border); }.page-cta p{ color:var(--text-muted); }.contact-sub{ margin-top:14px; color:var(--text-muted); }.contact-form{ display:flex; flex-direction:column; gap:14px; }.contact-form label{ display:flex; flex-direction:column; gap:6px; font-size:0.9rem; color:var(--text-muted); }.contact-form input,.contact-form select,.contact-form textarea{ font:inherit; font-size:16px; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px 14px; min-height:46px; width:100%; color-scheme:dark; }.contact-form textarea{ min-height:120px; resize:vertical; }.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{ border-color:var(--accent); }.contact-form .btn{ font-family:inherit; cursor:pointer; border:none; align-self:flex-start; }.hp{ display:none; }html{ background:var(--bg); }.brand img{ height:36px; width:auto; display:block; }.project-block{ content-visibility:auto; contain-intrinsic-size:auto 420px; }.video-poster{ position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; background:#000; cursor:pointer; }.video-poster img{ width:100%; height:100%; object-fit:cover; display:block; opacity:.9; }.video-poster .play{ position:absolute; left:50%; top:50%; width:68px; height:68px; margin:-34px 0 0 -34px; border-radius:50%; background:rgba(20,21,26,.78); border:2px solid var(--accent); }.video-poster .play::after{ content:''; position:absolute; left:26px; top:19px; border-left:19px solid var(--accent); border-top:13px solid transparent; border-bottom:13px solid transparent; }.dock{ position:fixed; z-index:20; left:50%; transform:translateX(-50%); bottom:calc(12px + env(safe-area-inset-bottom,0px)); display:flex; gap:8px; padding:6px; border-radius:999px; background:rgba(27,29,36,.94); border:1px solid var(--border); }.dock a{ width:44px; height:44px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:50%; color:var(--text); transition:color .15s ease, background .15s ease, width .2s ease, height .2s ease, margin .2s ease, opacity .2s ease; }.dock a:hover{ color:var(--accent); background:var(--surface-2); }.dock svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }.dock .to-top{ width:0; margin-right:-8px; opacity:0; visibility:hidden; overflow:hidden; }.dock .to-top.show{ width:44px; margin-right:0; opacity:1; visibility:visible; }@media (min-width:721px){.dock{ left:auto; transform:none; right:calc(12px + env(safe-area-inset-right,0px)); bottom:calc(16px + env(safe-area-inset-bottom,0px)); flex-direction:column; border-radius:28px; }.dock .to-top{ width:44px; height:0; margin:0 0 -8px; }.dock .to-top.show{ height:44px; margin:0; }.footer-row{ padding-right:64px; }}@media (max-width:720px){ footer{ padding-bottom:88px; } }.footer-nav{ display:flex; flex-wrap:wrap; gap:2px 18px; margin-bottom:12px; }.footer-nav a{ color:var(--text-muted); font-size:.85rem; text-decoration:none; padding-block:8px; }.footer-nav a:hover{ color:var(--accent); }.about-grid strong{ font-weight:600; }.facts + .group-label,.steps + .group-label,.faq + .group-label{ margin-top:30px; }.who li{ gap:4px 16px; flex-wrap:wrap; }.who li span:first-child{ color:var(--text); font-weight:600; }@media (max-width:640px){ .who li{ flex-direction:column; } .who li span:last-child{ text-align:left; } }.steps{ margin:0; padding-left:20px; color:var(--text-muted); display:grid; gap:8px; }.steps strong{ color:var(--text); font-weight:600; }.faq details{ border-bottom:1px solid var(--border); }.faq details:first-child{ border-top:1px solid var(--border); }.faq summary{ cursor:pointer; padding:14px 0; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:12px; }.faq summary::-webkit-details-marker{ display:none; }.faq summary::after{ content:'+'; color:var(--accent); }.faq details[open] summary::after{ content:'-'; }.faq p{ color:var(--text-muted); padding:0 0 14px; max-width:60ch; }