:root {
  --bg: #090909;
  --surface: #111;
  --surface-2: #171717;
  --text: #f5f5f5;
  --muted: #9b9b9b;
  --line: #2a2a2a;
  --accent: #f5f5f5;
  --shadow: 0 20px 60px rgba(0,0,0,.28);
}

html[data-theme="light"] {
  --bg: #f4f4f1;
  --surface: #fff;
  --surface-2: #ebebe7;
  --text: #111;
  --muted: #666;
  --line: #d6d6d0;
  --accent: #111;
  --shadow: 0 18px 50px rgba(0,0,0,.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:Inter,system-ui,sans-serif; }
a { color:inherit; text-decoration:none; }
button, input, textarea { font:inherit; }
button { color:inherit; }

.site-header { position:fixed; inset:0 0 auto 0; z-index:30; display:flex; justify-content:space-between; align-items:center; padding:18px clamp(20px,4vw,64px); background:color-mix(in srgb, var(--bg) 78%, transparent); border-bottom:1px solid color-mix(in srgb, var(--text) 12%, transparent); backdrop-filter:blur(18px) saturate(120%); box-shadow:0 10px 30px color-mix(in srgb, var(--bg) 14%, transparent); }
.brand { display:inline-flex; align-items:center; justify-content:center; height:54px; }
.brand img { display:block; height:100%; width:auto; max-width:170px; object-fit:contain; }
.site-nav { display:flex; align-items:center; gap:24px; font-family:"IBM Plex Mono",monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; }
.site-nav a { opacity:.72; }
.site-nav a:hover { opacity:1; }
.theme-toggle,.menu-toggle { border:1px solid var(--line); background:var(--surface); border-radius:999px; width:36px; height:36px; cursor:pointer; }
.menu-toggle { display:none; }

.section-shell { width:min(1180px,calc(100% - 32px)); margin-inline:auto; }
.hero { min-height:calc(100vh - 32px); margin-top:16px; padding:clamp(28px,5vw,70px); position:relative; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); background:var(--surface); }
.hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.78fr); gap:clamp(32px,8vw,120px); align-items:center; min-height:calc(100vh - 210px); }
.hero-content { position:relative; z-index:2; max-width:650px; }
.hero h1, .content-section h2 { font-family:"Archivo Black",sans-serif; margin:0; letter-spacing:-.04em; }
.hero h1 { font-size:clamp(4rem,9vw,9rem); line-height:.82; }
.hero h1 em { font-family:Inter,system-ui,sans-serif; font-size:.58em; font-weight:400; letter-spacing:-.06em; }
.eyebrow { font-family:"IBM Plex Mono",monospace; text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; color:var(--muted); }
.hero-subtitle { max-width:430px; margin:28px 0 34px; font-family:"IBM Plex Mono",monospace; text-transform:uppercase; letter-spacing:.08em; line-height:1.6; color:var(--muted); }
.hero-notes { align-self:end; max-width:390px; padding-bottom:clamp(8px,3vw,36px); border-top:1px solid var(--line); }
.hero-notes > p:not(.eyebrow):not(.hero-signoff) { color:var(--muted); line-height:1.65; }
.hero-lead { margin:20px 0 18px; color:var(--text) !important; font-size:clamp(1.25rem,2.2vw,1.8rem); line-height:1.2 !important; letter-spacing:-.02em; }
.hero-signoff { margin-top:44px; font-family:"IBM Plex Mono",monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; }
.scribble { font-family:"IBM Plex Mono",monospace; font-style:italic; transform:rotate(-5deg); }
.scribble-hero { position:absolute; right:5%; bottom:8%; z-index:2; font-size:1rem; }

.content-section { padding:120px 0 40px; }
.section-heading { display:flex; justify-content:space-between; gap:30px; align-items:flex-start; margin-bottom:34px; }
.section-heading h2 { font-size:clamp(2.5rem,6vw,5.5rem); }
.section-heading p:not(.eyebrow) { max-width:620px; color:var(--muted); }
.section-index { font-family:"IBM Plex Mono",monospace; color:var(--muted); font-size:1.1rem; }
.filter-row { display:flex; gap:12px; margin-bottom:22px; overflow:auto; }
.filter-row button { border:0; border-bottom:1px solid transparent; background:none; padding:8px 0; margin-right:14px; cursor:pointer; font-family:"IBM Plex Mono",monospace; text-transform:uppercase; font-size:.72rem; color:var(--muted); }
.filter-row button.is-active { color:var(--text); border-color:var(--text); }

.gallery { display:grid; gap:12px; }
.masonry-grid { grid-template-columns:repeat(3,1fr); grid-auto-rows:240px; }
.fashion-grid { grid-template-columns:repeat(3,1fr); grid-auto-rows:300px; }
.card { margin:0; position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--line); }
.card.tall { grid-row:span 2; }
.card.wide { grid-column:span 2; }
.card .placeholder-image,.card .art-media { width:100%; height:100%; transition:transform .35s ease; }
.card .art-media { display:block; object-fit:cover; background:var(--surface-2); }
.card video.art-media { object-fit:contain; }
.card:hover .placeholder-image,.card:hover .art-media { transform:scale(1.025); }
.card figcaption { position:absolute; left:12px; bottom:10px; font-family:"IBM Plex Mono",monospace; font-size:.66rem; text-transform:uppercase; background:color-mix(in srgb, var(--bg) 78%, transparent); padding:5px 7px; }
.card { cursor:pointer; }

@media (min-width: 761px) {
  .card .art-media { object-fit:contain; }
}

.art-viewer { width:100vw; max-width:none; height:100dvh; max-height:none; overflow:hidden; padding:clamp(44px,6vw,72px) clamp(48px,8vw,100px) 36px; border:1px solid var(--line); background:color-mix(in srgb, var(--bg) 94%, transparent); color:var(--text); }
.art-viewer::backdrop { background:rgba(0,0,0,.84); backdrop-filter:blur(8px); }
.viewer-stage { display:grid; place-items:center; width:100%; height:calc(100dvh - 130px); min-height:0; overflow:hidden; }
.viewer-stage > div { display:grid; place-items:center; width:100%; height:100%; min-height:0; }
.viewer-art-media { display:block; width:auto; height:auto; max-width:calc(100vw - 200px); max-height:calc(100dvh - 130px); object-fit:contain; }
.viewer-caption { position:absolute; right:36px; bottom:18px; left:36px; margin:0; color:var(--muted); text-align:center; font: .68rem "IBM Plex Mono",monospace; text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.viewer-close,.viewer-arrow { position:absolute; z-index:1; border:1px solid var(--line); background:var(--surface); color:var(--text); cursor:pointer; }
.viewer-close { top:16px; right:18px; width:38px; height:38px; font-size:1.5rem; line-height:1; }
.viewer-arrow { top:50%; width:42px; height:52px; transform:translateY(-50%); font-size:1.4rem; }
.viewer-previous { left:16px; }
.viewer-next { right:16px; }
.viewer-close:focus-visible,.viewer-arrow:focus-visible { outline:2px solid var(--text); outline-offset:3px; }

.placeholder-image { background:
linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,0)),
repeating-linear-gradient(90deg,transparent 0 39px,rgba(255,255,255,.035) 40px),
linear-gradient(145deg,#151515,#454545); }
html[data-theme="light"] .placeholder-image { background:linear-gradient(145deg,#ecece8,#b8b8b2); }
.p2,.f2 { background:linear-gradient(145deg,#1d1d1d,#6d6d6d); }
.p3,.f4 { background:linear-gradient(145deg,#090909,#333); }
.p4,.f5 { background:linear-gradient(145deg,#2f2f2f,#0d0d0d); }

.music-layout { display:grid; grid-template-columns:minmax(260px,.8fr) 1.2fr; gap:18px; align-items:stretch; }
.album-art { width:100%; aspect-ratio:1 / 1; min-height:0; border:1px solid var(--line); }
.player-panel { background:var(--surface); border:1px solid var(--line); padding:30px; min-height:100%; }
.track-meta { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.track-info { display:flex; flex-direction:column; gap:4px; min-width:0; }
.title-row { display:flex; align-items:baseline; gap:10px; min-height:1.8rem; }
.track-meta h3 { margin:0; font-size:1.8rem; min-height:1.5em; }
.track-duration { font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--muted); letter-spacing:.04em; }
.play-button { border:1px solid var(--line); background:var(--text); color:var(--bg); width:58px; height:58px; border-radius:50%; cursor:pointer; }
.progress-meta { display:flex; justify-content:space-between; margin-top:28px; color:var(--muted); font: .68rem "IBM Plex Mono",monospace; }
.progress-wrap { height:10px; margin:8px 0 24px; padding:3px 0; background:transparent; cursor:pointer; touch-action:none; }
.progress-wrap::before { content:""; display:block; height:4px; background:var(--line); }
.progress-wrap span { display:block; position:relative; height:4px; width:0; margin-top:-4px; background:var(--text); }
.progress-wrap span::after { content:""; position:absolute; top:50%; right:-5px; width:10px; height:10px; border-radius:50%; background:var(--text); transform:translateY(-50%); }
.progress-wrap:focus-visible { outline:2px solid var(--text); outline-offset:5px; }
.track-list { display:grid; }
.track-list button { display:grid; grid-template-columns:38px 1fr auto; text-align:left; gap:8px; padding:15px 0; border:0; border-bottom:1px solid var(--line); background:none; cursor:pointer; }
.track-list small { color:var(--muted); }
.pullquote { text-align:right; font-family:"IBM Plex Mono",monospace; font-style:italic; margin-top:24px; color:var(--muted); }

.contact-grid { display:grid; grid-template-columns:1fr; gap:28px; }
.contact-form { display:grid; gap:15px; }
.contact-form label { display:grid; gap:8px; font-family:"IBM Plex Mono",monospace; text-transform:uppercase; font-size:.68rem; }
.contact-form input,.contact-form textarea { width:100%; border:1px solid var(--line); background:var(--surface); color:var(--text); padding:14px; outline:none; }
.contact-form input:focus,.contact-form textarea:focus { border-color:var(--text); }
.cta { justify-self:start; border:1px solid var(--text); background:var(--text); color:var(--bg); padding:12px 22px; cursor:pointer; font-family:"IBM Plex Mono",monospace; text-transform:uppercase; }
.contact-note { display:flex; flex-direction:column; justify-content:space-between; border:1px solid var(--line); background:var(--surface); padding:28px; }
.contact-note .scribble { font-size:clamp(1.8rem,4vw,4rem); line-height:1.05; }
.contact-note p:not(.scribble) { color:var(--muted); line-height:1.6; }
.socials { display:flex; gap:14px; flex-wrap:wrap; font-family:"IBM Plex Mono",monospace; font-size:.72rem; text-transform:uppercase; }

.site-footer { padding:80px 0 32px; display:flex; justify-content:center; align-items:center; gap:20px; color:var(--muted); font-family:"IBM Plex Mono",monospace; font-size:.72rem; }
.footer-brand { display:inline-flex; align-items:center; }
.footer-brand img { display:block; width:auto; height:32px; max-width:110px; object-fit:contain; }

@media (max-width: 760px) {
  .site-header { padding:14px 16px; }
  .menu-toggle { display:grid; place-items:center; }
  .site-nav { position:absolute; top:62px; left:16px; right:16px; display:none; flex-direction:column; align-items:stretch; gap:0; padding:12px; background:var(--surface); border:1px solid var(--line); }
  .site-nav.is-open { display:flex; }
  .site-nav a,.theme-toggle { padding:14px 8px; }
  .theme-toggle { width:100%; height:auto; border-radius:0; }
  .hero { min-height:auto; margin-top:90px; padding:24px 20px 20px; }
  .hero-grid { grid-template-columns:1fr; gap:42px; min-height:0; }
  .hero h1 { font-size:clamp(3.4rem,18vw,6rem); }
  .hero-subtitle { margin:22px 0 28px; font-size:.7rem; }
  .hero-notes { max-width:none; padding-bottom:0; }
  .hero-lead { margin-top:18px; }
  .hero-signoff { margin-top:32px; }
  .scribble-hero { right:18px; bottom:22px; font-size:.78rem; }
  .content-section { padding-top:88px; }
  .section-heading { align-items:flex-end; }
  .masonry-grid,.fashion-grid { grid-template-columns:repeat(2,1fr); grid-auto-rows:220px; }
  .card.wide { grid-column:span 2; }
  .music-layout,.contact-grid { grid-template-columns:1fr; }
  .album-art, .player-panel { width:100%; aspect-ratio:1 / 1; min-height:0; }
  .player-panel { padding:22px; }
  .site-footer { flex-direction:column; }
  .art-viewer { width:100%; height:100%; padding:56px 44px 42px; border:0; }
  .viewer-stage { height:calc(100dvh - 110px); }
  .viewer-art-media { max-width:calc(100vw - 88px); max-height:calc(100dvh - 110px); }
  .viewer-close { top:12px; right:12px; }
  .viewer-previous { left:8px; }
  .viewer-next { right:8px; }
}