/* Theme: dark is the default, white is set with data-theme="light" on <html>. Loaded after site.css. */
:root{--bg:#0C0C0D;--ink:#F1E9D9;--muted:#9C978D;--line:#2B2B2F;--accent:#F25C6C;--accent-dark:#FF8090;--blue:#8FA3DE;color-scheme:dark}
html[data-theme="light"]{--bg:#FFFFFF;--ink:#151515;--muted:#666666;--line:#E2E2E6;--accent:#D93A52;--accent-dark:#B82C43;--blue:#4F68B8;color-scheme:light}
body{background:radial-gradient(60% 40% at 85% 0%,rgba(242,92,108,.16),transparent 70%),radial-gradient(45% 35% at 30% 0%,rgba(118,140,205,.16),transparent 70%),var(--bg);background-repeat:no-repeat}
html[data-theme="light"] body{background:radial-gradient(60% 40% at 88% 0%,rgba(240,80,98,.10),transparent 70%),radial-gradient(45% 35% at 28% 0%,rgba(96,120,196,.10),transparent 70%),var(--bg);background-repeat:no-repeat}
.top,.rule{border-color:var(--line)}
.wordmark{gap:14px}
.mark{display:block;flex:0 0 auto;overflow:visible}
a:hover{color:var(--blue)}
.set-when,.tile-tag{color:var(--blue)}
.noimg{background:#17171A;color:var(--ink)}
.tile:hover .noimg{background:#202025}
html[data-theme="light"] .noimg{background:#F1F1F4}
html[data-theme="light"] .tile:hover .noimg{background:#E6E6EC}
.btn,button.btn{color:#0C0C0D}
.btn:hover,button.btn:hover{color:#0C0C0D;background:var(--accent-dark)}
html[data-theme="light"] .btn,html[data-theme="light"] button.btn,html[data-theme="light"] .btn:hover,html[data-theme="light"] button.btn:hover{color:#FFFFFF}
.field input:not([type=checkbox]):not([type=radio]),.field select,.field textarea{background:#151518;border-color:var(--line);color:var(--ink)}
html[data-theme="light"] .field input:not([type=checkbox]):not([type=radio]),html[data-theme="light"] .field select,html[data-theme="light"] .field textarea{background:#FFFFFF;border-color:#BDBDC6}
.check input{accent-color:var(--accent)}
.err{color:var(--accent-dark)}
.back{color:var(--ink)}

/* dark / white switch */
.mode{font:inherit;color:var(--ink);background:none;border:1px solid var(--line);border-radius:999px;padding:3px 12px;cursor:pointer;line-height:1.6}
.mode:hover{border-color:var(--blue);color:var(--blue)}
.mode:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* animated logo */
@keyframes cf-wave{0%,100%{opacity:.25;transform:translateX(-1.5px)}50%{opacity:1;transform:translateX(1.5px)}}
.mark polygon{animation:cf-wave 3.4s ease-in-out infinite}
.mark polygon:nth-child(1){animation-delay:0.00s}
.mark polygon:nth-child(2){animation-delay:0.18s}
.mark polygon:nth-child(3){animation-delay:0.36s}
.mark polygon:nth-child(4){animation-delay:0.54s}
.mark polygon:nth-child(5){animation-delay:0.72s}
.mark polygon:nth-child(6){animation-delay:0.90s}
.mark polygon:nth-child(7){animation-delay:1.08s}
@media (prefers-reduced-motion:reduce){.mark polygon{animation:none}}

/* switch icon */
.mode{width:34px;height:34px;padding:0;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
.mode svg{display:block}

/* button states */
.btn,button.btn{gap:12px;cursor:pointer;text-decoration:none;transition:background-color .18s ease,color .18s ease,transform .12s ease}
.btn::after{content:"\2192";display:inline-block;transition:transform .18s ease}
.btn:hover,button.btn:hover,html[data-theme="light"] .btn:hover,html[data-theme="light"] button.btn:hover{background:var(--ink);color:var(--bg)}
.btn:hover::after{transform:translateX(5px)}
.btn:active{transform:scale(.98)}
.btn:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
button.btn[disabled],button.btn[disabled]:hover,html[data-theme="light"] button.btn[disabled]:hover{background:var(--accent);color:#0C0C0D;cursor:default;transform:none}
html[data-theme="light"] button.btn[disabled],html[data-theme="light"] button.btn[disabled]:hover{color:#FFFFFF}
button.btn[disabled]::after{display:none}
@media (prefers-reduced-motion:reduce){.btn,.btn::after{transition:none}}

/* switch on the right */
.top .wordmark{order:1}
.top .mode{order:2;margin-left:auto;flex:0 0 auto}
.top nav{order:3;flex:1 0 100%}
@media (min-width:600px){.top nav{order:2;flex:0 1 auto;margin-left:auto}.top .mode{order:3;margin-left:0}}

/* phone menu */
@media (max-width:599px){
.top{padding-bottom:0;row-gap:18px;align-items:center}
.top nav{display:flex;flex-wrap:nowrap;gap:0;border-top:1px solid var(--line)}
.top nav a{flex:1 1 0;text-align:center;padding:13px 0;min-height:44px;display:flex;align-items:center;justify-content:center}
.top nav a+a{border-left:1px solid var(--line)}
}

/* chosen artist */
.picked{font-family:"Unica One",sans-serif;font-size:22px;line-height:1.3;color:var(--muted);margin:0 0 28px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.picked strong{color:var(--accent);font-weight:400}

/* artist picker */
.pick{border:0;padding:0 0 28px;margin:0 0 32px;border-bottom:1px solid var(--line);min-width:0}
.pick legend{padding:0;margin-bottom:16px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{font-family:"Unica One",sans-serif;font-size:18px;line-height:1.2;color:var(--ink);background:none;border:1px solid var(--line);border-radius:999px;padding:9px 18px;min-height:44px;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.chip:hover{border-color:var(--blue);color:var(--blue)}
.chip[aria-pressed="true"],.chip[aria-pressed="true"]:hover{background:var(--accent);border-color:var(--accent);color:#0C0C0D}
html[data-theme="light"] .chip[aria-pressed="true"],html[data-theme="light"] .chip[aria-pressed="true"]:hover{color:#FFFFFF}
.chip:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* about */
.about{text-align:center}
.about .label{margin-bottom:36px}
.about p{font-family:"Inter",sans-serif;font-weight:500;font-size:clamp(22px,3.6vw,40px);line-height:1.3;letter-spacing:-.01em;color:var(--blue);max-width:22em;margin:0 auto}
.about p+p{margin-top:1.1em}

/* footer link */
.foot{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center}
.foot-link{text-decoration:underline;text-underline-offset:4px}

/* footer menu */
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 28px}
.foot-nav a{text-decoration:none}
.foot-nav a:hover{color:var(--blue)}
@media (max-width:599px){.foot{flex-direction:column;align-items:flex-start;gap:18px}}

/* about font */
.about p{font-family:"Baumans","Inter",sans-serif;font-weight:400;letter-spacing:0;line-height:1.28}

/* phone menu button */
.top .menu-btn{display:none}
@media (max-width:599px){
.top{column-gap:10px;padding-bottom:20px}
.top.open{padding-bottom:0}
.top .menu-btn{display:inline-flex;order:2;margin-left:auto}
.top .mode:not(.menu-btn){order:3;margin-left:0}
.top nav{display:none;order:4}
.top.open nav{display:flex;flex-direction:column;flex-wrap:nowrap;gap:0;border-top:1px solid var(--line)}
.top nav a{flex:none;justify-content:flex-end;text-align:right;font-family:"Unica One",sans-serif;font-size:22px;padding:14px 0;min-height:52px}
.top nav a+a{border-left:0;border-top:1px solid var(--line)}
}

/* no header line */
.top{border-bottom:0}
@media (max-width:599px){.top.open nav{border-top:0}.top.open{padding-bottom:8px}}

/* screen-reader only */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* intro in about style */
.about p{color:var(--ink)}
#artist .lead{font-family:"Baumans","Inter",sans-serif;font-weight:400;letter-spacing:0;line-height:1.28}

/* Baumans replaces Inter */
.cred p,.cred-big,.cred-small,.lead,.thanks,.state,.set,.list-link,.about p{font-family:"Baumans",sans-serif;font-weight:400;letter-spacing:0}

/* film look */
.tile-img,.hero-img{filter:saturate(.82) contrast(.98) brightness(1.02) sepia(.12)}
.tile,.hero-media{position:relative}
.tile::before,.hero-media::before,.tile::after,.hero-media::after{content:"";position:absolute;top:0;left:0;width:100%;aspect-ratio:1/1;pointer-events:none;z-index:1}
.tile::before,.hero-media::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:240px 240px;mix-blend-mode:overlay;opacity:.5}
.tile::after,.hero-media::after{background:radial-gradient(90% 90% at 50% 45%,#261d16 0%,#120e0b 100%);mix-blend-mode:screen}

/* centred photo frame */
.ph{display:block;position:relative;overflow:hidden;width:100%;aspect-ratio:1/1}
.ph img.ph-img{position:absolute;max-width:none;height:auto;aspect-ratio:auto;object-fit:fill}

/* body text in Inter */
body{font-family:"Inter",system-ui,sans-serif;font-size:16px;line-height:1.7}
.bio,.note p{font-family:"Inter",system-ui,sans-serif;font-size:17px;line-height:1.7;font-weight:400}
.help,.err{font-family:"Inter",system-ui,sans-serif;font-size:15px;line-height:1.6}