/* ===== Design tokens — near-black "night mode" look, fixed theme, no hard dividers ===== */
:root{
  /* layout: fixed top bar (logo band + nav band), left rail of category filters, content grid on the right */
  /* separation between elements comes from background-shade steps, not border lines */
  --bg: #060608;
  --bg-elevated: #0d0e12;
  --surface: #15161c;
  --border: #1d1f27;
  --fg: #e9e9f0;
  --fg-dim: #83869b;
  --accent: #6476ff;
  --accent-fg: #ffffff;
  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  color-scheme: dark;
}

*{box-sizing:border-box}
body{
  margin:0;
  background-image:linear-gradient(160deg, rgba(13,14,18,0.55) 0%, rgba(6,6,8,0.88) 60%), url('nebula-bg.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
  min-height:100vh;
  color:var(--fg);
  font-family:var(--font-body);
  padding-left:max(0px, env(safe-area-inset-left, 0px));
  padding-right:max(0px, env(safe-area-inset-right, 0px));
}
/* the Work page uses a 14px base; other pages use the browser default (16px) */
.work-page{font-size:14px}

a{color:inherit;text-decoration:none}
img, video{max-width:100%;display:block}

/* ===== Top bar ===== */
.topbar{
  background:transparent;
}
.logo-row{
  padding:18px max(20px, env(safe-area-inset-left,0px)) 14px;
  display:flex;
  align-items:center;
}
.logo{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.5rem;
  letter-spacing:-0.02em;
}
.logo .dot{color:var(--accent)}

nav.mainnav{
  display:flex;
  gap:0;
  padding:0 max(20px, env(safe-area-inset-left,0px));
  overflow-x:auto;
}
nav.mainnav a{
  padding:14px 18px;
  font-family:var(--font-display);
  font-size:0.92rem;
  font-weight:600;
  letter-spacing:0.02em;
  color:var(--fg-dim);
  border-bottom:2px solid transparent;
  white-space:nowrap;
  transition:color .15s ease, border-color .15s ease;
}
nav.mainnav a:hover{color:var(--fg)}
nav.mainnav a.active{
  color:var(--fg);
  border-bottom-color:var(--accent);
}

/* ===== Page shell: rail that expands in place, pushing content over ===== */
.shell{
  display:flex;
  align-items:stretch;
  min-height:calc(100vh - 110px);
}

.sidebar{
  /* pinned while the page scrolls: sticky only works if the rail is shorter than
     the page, so it is one screen tall instead of stretching to the page height */
  position:sticky;
  top:0;
  align-self:flex-start;
  height:100vh;
  z-index:20;
  flex-shrink:0;
  width:52px;
  padding:20px 10px;
  background:transparent;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  overflow:hidden;
  transition:width .4s cubic-bezier(.4,0,.2,1);
}
.sidebar.open{width:190px}

.sidebar .cat{
  width:100%;
  font-family:var(--font-display);
  font-size:0.95rem;
  font-weight:700;
  padding:9px 8px;
  border-radius:6px;
  color:var(--fg-dim);
  white-space:nowrap;
}
.sidebar .cat.active{
  color:var(--fg);
  background:var(--surface);
}
.sidebar .cat .label{display:inline-block}

.content{
  flex:1;
  min-width:0;
  overflow:hidden;
  padding:0;
}

/* ===== Category panels: only the active one is shown ===== */
.cat-panel:not(.active){display:none}
.cat-panel{
  padding:32px max(24px, env(safe-area-inset-right,0px)) 56px 32px;
  transition:padding .45s cubic-bezier(.4,0,.2,1);
}
.panel-title{
  font-family:var(--font-display);
  font-size:1.6rem;
  margin:0 0 16px;
  letter-spacing:-0.01em;
  transition:opacity .3s ease;
}

/* ===== Peek carousel (one per category panel) =====
   .display      fixed frame; clips everything outside it
   .slide-track  row of slides, moved with translateX by work.js
   .slide-view   one piece; work.js sets its width so the next piece peeks in from the right
   Each slide carries its own caption (.slide-meta) so the caption moves with the picture. */
.display{
  position:relative;
  max-width:760px;
  overflow:hidden; /* clip here, on the stationary frame, never on the moving track */
  transition:max-width .45s cubic-bezier(.4,0,.2,1);
}
.slide-track{
  display:flex;
  aspect-ratio:16/10;
  width:100%;
  border-radius:12px;
  transition:transform .4s cubic-bezier(.4,0,.2,1), aspect-ratio .45s cubic-bezier(.4,0,.2,1), height .45s cubic-bezier(.4,0,.2,1), border-radius .45s cubic-bezier(.4,0,.2,1);
}
.slide-view{
  position:relative; /* anchors the caption */
  flex:0 0 auto;
  height:100%;
  border-radius:10px;
  overflow:hidden;
  background:var(--bg-elevated);
  cursor:pointer;   /* neighbors are clickable */
  opacity:0.5;      /* neighbors are dimmed */
  /* no width transition on purpose: work.js measures widths right after setting them */
  transition:opacity .3s ease, border-radius .45s cubic-bezier(.4,0,.2,1);
}
.slide-view.current{opacity:1;cursor:default}

/* .thumb is the picture frame: it holds the image (or placeholder text) and the caption */
.slide-view .thumb{
  position:relative; /* anchors the caption */
  width:100%;
  height:100%;
  overflow:hidden;
  /* placeholder card look (used when a slide has no image yet) */
  background:linear-gradient(135deg, var(--surface), var(--border));
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--fg-dim);
  font-family:var(--font-mono);
  font-size:0.8rem;
}

/* slides with a real image or video: inset "framed print" look instead of the placeholder card */
.slide-view:has(img, video){
  background:transparent;
  padding:28px 0 44px; /* breathing room from top bar / bottom edge */
}
.slide-view:has(img, video) .thumb{
  background:transparent;
  border-radius:14px;
  outline:1px solid rgba(255,255,255,.08); /* hairline edge */
  outline-offset:-1px;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.75), 0 4px 12px rgba(0,0,0,.4);
}
/* work.js gives the frame the image's exact shape, so "cover" never crops anything */
.slide-view .thumb :is(img, video){
  width:100%;
  height:100%;
  object-fit:cover;
}

/* caption: overlaid at the bottom of the frame */
.slide-view .slide-meta{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:60px 28px 22px;
  background:linear-gradient(to top, rgba(10,11,16,0.82), rgba(10,11,16,0));
  pointer-events:none; /* clicks pass through to the slide */
  /* undo the placeholder text style the caption would otherwise inherit from .thumb */
  font-family:var(--font-body);
  font-size:14px;
}
.slide-view .slide-meta h2{margin:0 0 6px;color:#fff;font-size:1.35rem}
.slide-view .slide-meta p{margin:0;color:rgba(255,255,255,.78);line-height:1.6;max-width:60ch}
.slide-view .slide-meta .tags{display:none} /* tags kept in markup for later use */

/* ===== Menu-closed mode (default): carousel fills the content area ===== */
.shell:not(.rail-open) .cat-panel{padding:0}
.shell:not(.rail-open) .panel-title{
  opacity:0;
  height:0;
  margin:0;
  pointer-events:none;
  overflow:hidden;
}
.shell:not(.rail-open) .display{
  max-width:none;
  width:100%;
}
.shell:not(.rail-open) .slide-track{
  aspect-ratio:auto;
  height:calc(100vh - 110px); /* 110px = top bar height */
  border-radius:0;
}
.shell:not(.rail-open) .slide-view{border-radius:0}
/* the framed image is centered in its slide; work.js sizes it to fit without cropping */
.shell:not(.rail-open) .slide-view:has(img, video){
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ===== Menu-open mode: the box takes the image's own shape, so nothing is cropped =====
   (the image keeps its natural aspect ratio; slides without an image use 16:9) */
.shell.rail-open .slide-track{
  aspect-ratio:auto;
  height:auto;
  align-items:flex-start;
}
.shell.rail-open .slide-view,
.shell.rail-open .slide-view .thumb{height:auto}
.shell.rail-open .slide-view .thumb :is(img, video){height:auto}
.shell.rail-open .slide-view:not(:has(img, video)) .thumb{aspect-ratio:16/9}

/* ===== Tags ===== */
.tags{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.tag{
  font-family:var(--font-mono);
  font-size:0.68rem;
  padding:3px 8px;
  border-radius:20px;
  background:var(--surface);
  color:var(--fg-dim);
}

/* ===== Hero (gamedev) ===== */
.hero{
  padding:48px max(24px, env(safe-area-inset-right,0px)) 40px 32px;
}
.hero h1{
  font-family:var(--font-display);
  font-size:2rem;
  margin:0 0 10px;
  letter-spacing:-0.02em;
  text-wrap:balance;
}
.hero p{
  color:var(--fg-dim);
  max-width:60ch;
  line-height:1.6;
  margin:0;
}
.devlog{
  padding:32px max(24px, env(safe-area-inset-right,0px)) 56px 32px;
}
.devlog h2{
  font-family:var(--font-display);
  font-size:1.2rem;
  margin:0 0 18px;
}
.log-entry{
  display:flex;
  gap:18px;
  padding:16px 18px;
  border-radius:10px;
}
.log-entry:nth-of-type(odd){background:var(--bg-elevated)}
.log-entry .date{
  font-family:var(--font-mono);
  font-size:0.75rem;
  color:var(--accent);
  flex-shrink:0;
  width:90px;
  padding-top:2px;
}
.log-entry .body h4{
  margin:0 0 4px;
  font-family:var(--font-display);
  font-size:0.95rem;
}
.log-entry .body p{
  margin:0;
  color:var(--fg-dim);
  font-size:0.88rem;
  line-height:1.6;
}

/* ===== Contact ===== */
.contact-wrap{
  max-width:560px;
  margin:0 auto;
  padding:56px max(20px, env(safe-area-inset-right,0px)) 72px;
}
.contact-wrap h1{
  font-family:var(--font-display);
  font-size:1.8rem;
  margin:0 0 8px;
}
.contact-wrap > p{color:var(--fg-dim);margin:0 0 32px;line-height:1.6}
.field{margin-bottom:18px;display:flex;flex-direction:column;gap:6px}
.field label{
  font-family:var(--font-mono);
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--fg-dim);
}
.field input, .field textarea{
  font-family:var(--font-body);
  font-size:0.95rem;
  padding:11px 13px;
  border-radius:7px;
  border:none;
  background:var(--surface);
  color:var(--fg);
}
.field input:focus, .field textarea:focus{
  outline:2px solid var(--accent);
  outline-offset:1px;
}
.field textarea{resize:vertical;min-height:120px;font-family:var(--font-body)}
.submit-btn{
  font-family:var(--font-display);
  font-weight:700;
  font-size:0.95rem;
  padding:12px 22px;
  border-radius:8px;
  border:none;
  background:var(--accent);
  color:var(--accent-fg);
  cursor:pointer;
}
.submit-btn:hover{filter:brightness(1.08)}
.toast{
  margin-top:14px;
  font-size:0.85rem;
  color:var(--accent);
  font-family:var(--font-mono);
}
.links-row{
  display:flex;
  gap:10px;
  margin-top:36px;
  flex-wrap:wrap;
}
.links-row a{
  font-family:var(--font-mono);
  font-size:0.82rem;
  padding:9px 14px;
  border-radius:7px;
  background:var(--surface);
  color:var(--fg-dim);
  transition:background .15s ease, color .15s ease;
}
.links-row a:hover{color:var(--fg);background:var(--bg-elevated)}

@media (max-width:640px){
  .cat-panel{padding:24px 16px 48px}
  .hero{padding:36px 16px 28px}
  .devlog{padding:24px 16px 48px}
  .sidebar.open{width:150px}
}