/* nursinemaslan.xyz — dark, minimal, lowercase. Colors and fonts live in :root. */
:root{
  --bg:#0d0e0c; --surface:#151613; --line:#2c2e29; --fg:#ecebe3; --muted:#8f918a; --accent:#d9a93b;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --max:1180px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.55}
img{max-width:100%;display:block}
a{color:inherit;text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;background:var(--fg);color:var(--bg);padding:6px 10px;z-index:10}
.meta,.small{font-family:var(--mono);font-size:12px;color:var(--muted);margin:0}
.soft{color:var(--muted)}

/* header */
header.top{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;flex-wrap:wrap;padding-top:22px;padding-bottom:22px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:14px}
.logo{text-decoration:none}.logo span{color:var(--muted)}
header.top nav{display:flex;gap:6px 18px;flex-wrap:wrap;color:var(--muted)}
header.top nav a{text-decoration:none}
header.top nav a:hover,header.top nav a[aria-current="page"]{color:var(--fg)}
header.top nav .lang{border:1px solid var(--line);border-radius:3px;padding:0 6px}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;padding:44px 0 36px;align-items:start}
.intro{display:flex;flex-direction:column;gap:16px;min-width:0}
h1{font-weight:500;font-size:clamp(30px,3.4vw,42px);line-height:1.05;letter-spacing:-.01em;margin:0}
h1 span{color:var(--muted);font-weight:400}
.roles{font-family:var(--mono);font-size:13px;color:var(--accent);margin:-6px 0 0}
.bio{margin:0;max-width:52ch;color:var(--muted);font-size:15px;line-height:1.65}
.more{font-family:var(--mono);font-size:13px;color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line);align-self:flex-start}
.more:hover{color:var(--fg)}
.links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-family:var(--mono);font-size:13px;color:var(--muted)}
.links a{text-decoration:none}.links a:hover{color:var(--fg)}
.sound{align-self:flex-start;font-family:var(--mono);font-size:13px;background:var(--accent);color:var(--bg);border:0;border-radius:999px;padding:9px 18px;cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.sound[aria-pressed="true"]{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.sound .dot{width:8px;height:8px;border-radius:50%;background:currentColor}
.sound[aria-pressed="true"] .dot{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
.instrument{display:flex;flex-direction:column;gap:10px;min-width:0}
.stage{position:relative;height:clamp(420px,42vw,540px)}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:manipulation;display:block}
.caption{font-family:var(--mono);font-size:12px;color:var(--muted);display:flex;justify-content:space-between;gap:6px 12px;flex-wrap:wrap}
.caption b{color:var(--fg);font-weight:500}
.caption a{text-decoration:none}.caption a:hover{color:var(--fg)}
@media (max-width:820px){.hero{grid-template-columns:1fr;gap:28px;padding:28px 0}}

/* now / next */
.now{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 40px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.now h2{font-family:var(--mono);font-weight:500;font-size:13px;margin:0 0 10px;color:var(--accent)}
.now ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:15px}
.now li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px}
.now small{font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap}
@media (max-width:640px){.now{grid-template-columns:1fr}.now li{grid-template-columns:1fr;gap:2px}.now small{white-space:normal}}

/* projects */
.projects{padding:36px 0;display:flex;flex-direction:column;gap:18px}
.projects>h2,footer h2,.page h2{font-weight:500;font-size:clamp(24px,2.6vw,30px);margin:0}
.filters{display:flex;flex-direction:column;gap:8px}
.frow{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.frow .lbl{font-family:var(--mono);font-size:11px;color:var(--muted);width:44px}
.chip{font-family:var(--mono);font-size:13px;background:transparent;color:var(--fg);border:1px solid var(--line);border-radius:4px;padding:5px 11px;cursor:pointer}
.chip:hover{border-color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.count{font-family:var(--mono);font-size:11px;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 20px}
.card{display:flex;flex-direction:column;gap:8px;text-decoration:none;min-width:0}
.card[hidden]{display:none}
.card .img{aspect-ratio:16/9;overflow:hidden;border-radius:2px;background:var(--surface)}
.card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,filter .5s ease;filter:grayscale(.3)}
.card:hover img,.card:focus-visible img{transform:scale(1.03);filter:none}
.ttl{font-size:15px;font-weight:500;line-height:1.35}
.noimg{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:16px 18px;background:repeating-linear-gradient(135deg,var(--surface) 0 10px,#131411 10px 20px)}
.noimg .nt{font-size:clamp(20px,2.2vw,28px);font-weight:500;line-height:1.1;color:var(--fg);opacity:.85;text-wrap:balance}
.noimg .ns{font-family:var(--mono);font-size:11px;color:var(--muted)}
.empty{font-family:var(--mono);color:var(--muted);font-size:13px}
@media (max-width:860px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.grid{grid-template-columns:1fr}}

/* project page */
.project,.page{padding:32px 0 48px;display:flex;flex-direction:column;gap:22px}
.back{font-family:var(--mono);font-size:13px;color:var(--muted);text-decoration:none;align-self:flex-start}
.back:hover{color:var(--fg)}
.phead{display:flex;flex-direction:column;gap:6px}
.phead h1{margin-bottom:6px;text-wrap:balance}
.tags{font-family:var(--mono);font-size:12px;color:var(--accent);margin:4px 0 0}
.video{position:relative;aspect-ratio:16/9;background:var(--surface);border-radius:2px;overflow:hidden;max-width:960px}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--surface)}
.text{max-width:68ch;font-size:16px}
.text p{margin:0 0 1em}
.text h2.sub{font-family:var(--mono);font-weight:500;font-size:13px;color:var(--accent);margin:1.6em 0 .6em}
.text h2.sub:first-child{margin-top:0}
.files a{font-family:var(--mono);font-size:13px;color:var(--muted)}
.gallery{columns:2 320px;column-gap:12px}
.gallery .g{display:block;margin:0 0 12px;break-inside:avoid;cursor:zoom-in}
.gallery img{width:100%;height:auto;border-radius:2px}
.pn{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding-top:18px;font-family:var(--mono);font-size:13px}
.pn a{text-decoration:none;color:var(--muted)}.pn a:hover{color:var(--fg)}
.lightbox{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh}
.lightbox::backdrop{background:rgba(8,9,8,.94)}
.lightbox[open]{display:flex;align-items:center;justify-content:center}
.lightbox img{max-width:calc(100vw - 120px);max-height:calc(100vh - 60px);object-fit:contain}
.lightbox button{position:absolute;background:transparent;border:0;color:var(--fg);font:400 28px var(--mono);cursor:pointer;padding:12px}
.lb-close{top:10px;right:14px}.lb-prev{left:8px;top:50%;transform:translateY(-50%)}.lb-next{right:8px;top:50%;transform:translateY(-50%)}
@media (max-width:640px){.lightbox img{max-width:100vw}.lb-prev,.lb-next{top:auto;bottom:10px;transform:none}}

/* about / cv / sound design */
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:40px;align-items:start}
.about-grid:not(:has(.portrait)){grid-template-columns:minmax(0,1fr)}
.portrait{width:100%;border-radius:2px}
@media (max-width:760px){.about-grid{grid-template-columns:1fr}}
.cv section{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.cv h2,.sd h2{font-family:var(--mono);font-weight:500;font-size:13px;color:var(--accent)}
.entries{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.entries li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;padding:10px 0;border-bottom:1px solid var(--line)}
.entries .yr{font-family:var(--mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:2px}
.entries .et{font-size:15px}
.entries .ed{font-size:14px;color:var(--muted)}
@media (max-width:560px){.entries li{grid-template-columns:1fr;gap:2px}}
.patchbox{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:18px}
.patchbox .bar{display:flex;justify-content:space-between;align-items:center;gap:12px}
.patchbox .stage{height:clamp(420px,46vw,560px);border:1px solid var(--line);border-radius:2px}

/* contact footer */
footer.contact{border-top:1px solid var(--line);padding-top:32px;padding-bottom:40px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:end;margin-top:12px}
footer h2{margin:0 0 8px}
footer p{margin:0 0 14px;color:var(--muted);max-width:54ch;font-size:15px}
.mail{font-family:var(--mono);font-size:15px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mail a{text-decoration:none}
.copy{font-family:var(--mono);font-size:12px;background:transparent;color:var(--fg);border:1px solid var(--line);border-radius:4px;padding:5px 10px;cursor:pointer}
footer .small{grid-column:1/-1}
@media (max-width:640px){footer.contact{grid-template-columns:1fr}}