/* Layout: one calm column — name + showreel in a letterboxed frame, film grid, sound rows with waveforms, about/services split, contact. */
:root{
  --bg:#f6f7f8; --surface:#ffffff; --fg:#14171c; --muted:#5d6470; --line:#dfe2e7;
  --accent:#2340c9; --accent-ink:#ffffff; --rec:#e0352b; --frame:#0d0f12; --wave:#c3c8d1;
  --ok:#1d7a4a;
  --f-display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --f-body:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gutter:clamp(16px,4vw,48px); --max:1180px; --r:6px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0f1114; --surface:#171a1f; --fg:#eceef1; --muted:#9aa1ad; --line:#2a2f37;
  --accent:#8fa3ff; --accent-ink:#0f1114; --rec:#ff5a4f; --frame:#050607; --wave:#3a404b; --ok:#5fcf93; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f1114; --surface:#171a1f; --fg:#eceef1; --muted:#9aa1ad; --line:#2a2f37;
  --accent:#8fa3ff; --accent-ink:#0f1114; --rec:#ff5a4f; --frame:#050607; --wave:#3a404b; --ok:#5fcf93; color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
h1,h2,h3{font-family:var(--f-display);font-weight:600;line-height:1.08;margin:0;text-wrap:balance;letter-spacing:-.01em}
.label{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* header */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.brand{font-family:var(--f-display);font-weight:600;font-size:18px;text-decoration:none;white-space:nowrap}
nav{display:flex;gap:clamp(12px,2.5vw,28px);flex-wrap:wrap;justify-content:flex-end}
nav a{text-decoration:none;font-size:14px;color:var(--muted)}
nav a:hover{color:var(--fg)}

/* hero */
.hero{padding-block:clamp(40px,7vw,88px) 28px;display:grid;gap:18px}
.hero h1{font-size:clamp(44px,8.5vw,112px);font-weight:600;letter-spacing:-.035em}
.hero h1 .role{display:block;color:var(--muted);font-weight:400}
.hero p.tag{max-width:58ch;font-size:clamp(17px,1.6vw,20px);color:var(--muted);margin:0}
.reel{margin-block:12px clamp(56px,8vw,104px)}
.reel-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.rec{display:inline-flex;align-items:center;gap:8px}
.rec::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--rec)}
.frame{background:var(--frame);border-radius:var(--r);overflow:hidden;aspect-ratio:16/9;max-width:100%;display:grid;place-items:center;position:relative}
.frame video{width:100%;height:100%;display:block;object-fit:contain;background:var(--frame)}
.frame .empty{color:#9aa1ad;text-align:center;padding:24px;display:grid;gap:12px;justify-items:center}
.frame .empty .mono{color:#6b7280;font-size:12px}

/* sections */
section.block{padding-block:clamp(48px,7vw,88px);border-top:1px solid var(--line)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.sec-head h2{font-size:clamp(30px,4.4vw,52px)}
.sec-head p{margin:6px 0 0;color:var(--muted);max-width:52ch}

/* film grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:36px 24px}
.card{display:grid;gap:12px;min-width:0}
.thumb{position:relative;aspect-ratio:16/9;max-width:100%;border-radius:var(--r);overflow:hidden;background:var(--frame);border:0;padding:0;cursor:pointer;display:block;width:100%}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease,opacity .3s}
.thumb:hover img{transform:scale(1.03)}
.thumb .noimg{position:absolute;inset:0;display:grid;place-items:center;color:#9aa1ad;font-family:var(--f-display);font-size:22px;padding:16px;text-align:center}
.thumb .tc{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.62);color:#fff;font-family:var(--f-mono);font-size:11px;padding:3px 7px;border-radius:3px}
.thumb .play{position:absolute;left:12px;bottom:10px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;opacity:0;transition:opacity .2s}
.thumb:hover .play,.thumb:focus-visible .play{opacity:1}
.card h3{font-size:22px}
.meta{color:var(--muted);font-size:14px;display:flex;flex-wrap:wrap;gap:4px 12px}
.card p.desc{margin:0;font-size:15px;color:var(--muted)}
.specs{font-family:var(--f-mono);font-size:11.5px;color:var(--muted);letter-spacing:.02em}
.linkout{font-size:14px;color:var(--accent);text-decoration:none;font-weight:500}
.linkout:hover{text-decoration:underline}
.pill{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line);border-radius:99px;padding:2px 8px;color:var(--muted)}

/* sound rows */
.sounds{display:grid;border-top:1px solid var(--line)}
.srow{display:grid;grid-template-columns:52px minmax(0,1fr);gap:18px;padding-block:22px;border-bottom:1px solid var(--line);align-items:start}
.pbtn{width:52px;height:52px;border-radius:50%;border:1px solid var(--fg);background:transparent;cursor:pointer;display:grid;place-items:center}
.pbtn[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.pbtn svg{width:18px;height:18px;fill:currentColor}
.sbody{display:grid;gap:10px;min-width:0}
.stitle{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline}
.stitle h3{font-size:22px}
.wave{width:100%;height:56px;display:block;cursor:pointer}
.wave-line{display:flex;align-items:center;gap:12px}
.wave-line .mono{font-size:12px;color:var(--muted);white-space:nowrap}
.ab{display:inline-flex;border:1px solid var(--line);border-radius:99px;overflow:hidden}
.ab button{border:0;background:transparent;padding:4px 12px;font-size:12px;font-family:var(--f-mono);cursor:pointer;color:var(--muted)}
.ab button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.srow-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.textbtn{background:none;border:0;padding:0;color:var(--accent);font-size:14px;font-weight:500;cursor:pointer}

/* about */
.about{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,6vw,80px)}
.about .bio{font-size:clamp(18px,1.8vw,22px);line-height:1.55;max-width:60ch;white-space:pre-line}
.services{display:grid;gap:0;border-top:1px solid var(--line)}
.svc{padding-block:16px;border-bottom:1px solid var(--line);display:grid;gap:4px}
.svc strong{font-family:var(--f-display);font-weight:600;font-size:19px}
.svc span{color:var(--muted);font-size:15px}
.tools{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,6vw,80px)}
.contact h2{font-size:clamp(34px,5.4vw,68px)}
.lines{display:grid;gap:14px;margin-top:28px}
.cline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cline .v{font-size:18px;user-select:all;word-break:break-all}
.copy{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:3px 10px;font-size:12px;cursor:pointer;color:var(--muted)}
.socials{display:flex;gap:18px;flex-wrap:wrap;margin-top:8px}
form.inq{display:grid;gap:14px}
.field{display:grid;gap:6px}
.field label{font-size:13px;color:var(--muted)}
input[type=text],input[type=email],input[type=url],input[type=number],textarea,select{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:11px 12px}
textarea{min-height:120px;resize:vertical}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--fg);color:var(--bg);border:0;border-radius:99px;padding:11px 20px;font-weight:600;cursor:pointer;font-size:15px}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--line)}
.btn.accent{background:var(--accent);color:var(--accent-ink)}
.btn.danger{background:transparent;color:var(--rec);border:1px solid var(--rec)}
.btn:disabled{opacity:.5;cursor:default}
.note{font-size:14px;color:var(--muted);margin:0}
.note.ok{color:var(--ok)}
.note.err{color:var(--rec)}

footer{padding-block:32px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
footer .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

.emptybox{border:1px dashed var(--line);border-radius:var(--r);padding:36px 24px;text-align:center;color:var(--muted);display:grid;gap:12px;justify-items:center}

/* edit mode */
.editbar{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));background:var(--fg);color:var(--bg);display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:center}
.editbar .btn{background:var(--bg);color:var(--fg);padding:8px 14px;font-size:14px}
.editbar .btn.ghost{background:transparent;color:var(--bg);border-color:color-mix(in srgb,var(--bg) 35%,transparent)}
.editbar .lbl{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-right:6px;opacity:.75}
.adminlink{background:none;border:0;padding:0;color:var(--muted);font-size:13px;cursor:pointer;text-decoration:underline}
/* admin dashboard */
.admin{position:fixed;inset:0;z-index:40;background:var(--bg);overflow:auto;padding-top:env(safe-area-inset-top,0px)}
.admin-top{position:sticky;top:0;z-index:2;background:var(--fg);color:var(--bg)}
.admin-top .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-block:14px}
.admin-top h1{font-size:20px}
.admin-top .acts{display:flex;gap:8px;flex-wrap:wrap}
.admin-top .btn{background:var(--bg);color:var(--fg);padding:7px 14px;font-size:14px}
.admin-top .btn.ghost{background:transparent;color:var(--bg);border-color:color-mix(in srgb,var(--bg) 35%,transparent)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-block:20px 24px;overflow-x:auto}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:10px 14px;cursor:pointer;color:var(--muted);font-weight:500;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--accent)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:12px;margin-bottom:28px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:grid;gap:4px}
.stat b{font-family:var(--f-display);font-size:34px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.meter{height:6px;background:var(--line);border-radius:3px;overflow:hidden;margin-top:6px}
.meter i{display:block;height:100%;background:var(--accent)}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
.tbl th,.tbl td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl th{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500}
.tbl tr:last-child td{border-bottom:0}
.tbl .acts{display:flex;gap:12px}
.tbl .acts button{background:none;border:0;padding:0;cursor:pointer;color:var(--accent);font-size:13px}
.tbl .acts button.del{color:var(--rec)}
.tbl img{width:64px;aspect-ratio:16/9;object-fit:cover;border-radius:3px;display:block;background:var(--frame)}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.panel-head h2{font-size:24px}
.kv{display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);gap:8px 16px;font-size:14px;margin-bottom:18px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;word-break:break-word;white-space:pre-line}
body.editing{padding-bottom:84px}
.owner-tools{display:none;gap:12px}
body.editing .owner-tools{display:flex}
.owner-tools button{background:none;border:0;padding:0;font-size:13px;cursor:pointer;color:var(--muted);text-decoration:underline}
.owner-tools button.del{color:var(--rec)}

/* dialog */
dialog{border:0;border-radius:10px;padding:0;background:var(--surface);color:var(--fg);width:min(640px,calc(100vw - 32px));max-height:calc(100dvh - 32px)}
dialog::backdrop{background:rgba(8,10,14,.66)}
dialog .dbody{padding:24px;display:grid;gap:16px;overflow:auto;max-height:calc(100dvh - 32px)}
dialog .dhead{display:flex;justify-content:space-between;align-items:center;gap:12px}
dialog .dhead h2{font-size:26px}
.x{background:none;border:0;font-size:26px;line-height:1;cursor:pointer;color:var(--muted);padding:4px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hint{font-size:12.5px;color:var(--muted)}
dialog.player{width:min(1100px,calc(100vw - 32px));background:var(--frame);color:#eee}
dialog.player .dbody{padding:12px}
dialog.player video{width:100%;max-height:75dvh;display:block;background:#000;border-radius:4px}
dialog.player .x{color:#bbb}
.inbox-item{border-top:1px solid var(--line);padding-top:12px;display:grid;gap:4px}
.inbox-item p{margin:0;white-space:pre-wrap}

@media (max-width:760px){
  .about,.contact{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
  nav a.hide-sm{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---- additions for the Cloudflare build ---- */
html{-webkit-text-size-adjust:100%}
body{margin:0}
.top-right{display:flex;align-items:center;gap:clamp(12px,2.5vw,28px)}
.theme-btn{background:none;border:1px solid var(--line);border-radius:99px;width:32px;height:32px;display:grid;place-items:center;cursor:pointer;color:var(--muted);padding:0;flex:none}
.theme-btn:hover{color:var(--fg)}
.theme-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
a.adminlink{text-decoration:underline}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.progress{display:grid;gap:6px}
.progress[hidden]{display:none}
.progress .bar{height:6px;background:var(--line);border-radius:3px;overflow:hidden}
.progress .bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}
.progress .mono{font-size:12px;color:var(--muted)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:6px;vertical-align:middle}
.inbox-item{position:relative}
.inbox-item .acts{display:flex;gap:14px;margin-top:4px}
.inbox-item .acts button{background:none;border:0;padding:0;cursor:pointer;color:var(--accent);font-size:13px}
.inbox-item .acts button.del{color:var(--rec)}
.tbl .acts button.pin{color:var(--muted)}
.login-wrap{min-height:100dvh;display:grid;place-items:center;padding:24px var(--gutter)}
.login-card{width:min(420px,100%);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:28px;display:grid;gap:16px}
.login-card h1{font-size:28px}
.admin.page{position:static;min-height:100dvh;overflow:visible}