/* =========================================
   THEME TOKENS
   ========================================= */
:root,
:root[data-theme="dark"]{
  --bg: #000000;            /* page background: pure black */
  --panel: #161616;         /* base surfaces: sidebar, cards, accordions */
  --panel-elev: #1f1f1f;    /* slightly elevated: tiles, primary buttons, brand */
  --text: #e6e6e6;          /* primary text */
  --muted: #9aa0a6;         /* secondary text */
  --brand: #7c3aed;         /* accent hue (optional usage) */
  --accent: #22d3ee;        /* secondary accent */
  --border: rgba(255,255,255,0.08);
  --ring: 0 0 0 3px rgba(124,58,237,0.35);
}

:root[data-theme="light"]{
  --bg:#f8fafc;
  --panel:#ffffff;
  --panel-elev:#f3f4f6;
  --text:#0b1020;
  --muted:#475569;
  --brand:#7c3aed;
  --accent:#0ea5e9;
  --border: rgba(2,6,23,0.10);
  --ring: 0 0 0 3px rgba(124,58,237,0.25);
}
html, body { height: 100%; }         /* ensure full-height root */
body { overflow: hidden; } 

/* =========================================
   RESET / BASE
   ========================================= */
*{ box-sizing:border-box }
html,body,.app{ height:100% }
body{
  margin:0; background:var(--bg); color:var(--text);
  font: 16px/1.45 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, 'Helvetica Neue', Arial;
}
a{ color: var(--accent); text-decoration: none }
a:hover{ text-decoration: underline }

/* =========================================
   LAYOUT
   ========================================= */
.app{
  display:grid; grid-template-columns: 280px 1fr; height:100vh;
  transition: grid-template-columns .2s ease; /* smooth collapse/expand */
}
@media (max-width:900px){
  .app{ grid-template-columns: 1fr }
}

/* =========================================
   SIDEBAR
   ========================================= */
.sidebar{
  background: var(--panel);
  padding: 12px 12px 8px;
  border-right: 1px solid color-mix(in oklab, var(--text) 10%, transparent);

  /* Sticky / pinned behaviour */
  position: sticky;
  top: 0;
  height: 100vh;             /* lock to viewport height */
  flex-shrink: 0;
  overflow: hidden;          /* no scroll needed since content fits */
  display: flex;
  flex-direction: column;
}
@media (max-width: 900px){
  .sidebar{
    position: sticky;  /* keep top when in mobile stack */
    top: 0;
    height: auto;      /* allow to grow naturally on mobile */
    overflow: visible;
    z-index: 10;
  }
}
#sidebarTitle[data-theme="dark"] { color:#ffffff }
#sidebarTitle[data-theme="dark"] { color:#000000 }

/* Brand area */
.brand{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:10px; font-weight:700; letter-spacing:.2px;
  background: var(--panel-elev);
  border: 1px solid var(--border);
}
.brand img{ border-radius:8px }
:root[data-sidebar="collapsed"] .brand img {
  display: none;
}

/* Nav */
.nav{ display:flex; flex-direction:column; gap:6px; padding:12px 4px; }
.nav__item{
  all:unset; display:flex; gap:10px; align-items:center;
  padding:10px 12px; border-radius:10px; cursor:pointer; color:var(--text);
}
.nav__item:hover{ background: color-mix(in oklab, var(--text) 10%, transparent); }
.nav__item[aria-current="page"]{
  background: color-mix(in oklab, var(--text) 14%, transparent);
  outline: var(--ring);
}

/* Sidebar footer (theme button pinned to bottom) */
.sidebar__footer{
  margin-top:auto; display:flex; justify-content:space-between; padding:6px 4px;
}
.ghost{
  all:unset; padding:8px 10px; border-radius:10px; cursor:pointer; color:var(--muted);
}
.ghost:hover{ background: color-mix(in oklab, var(--text) 12%, transparent); color: var(--text) }

/* =========================================
   COLLAPSIBLE SIDEBAR (Step 2 mods)
   ========================================= */
/* desktop: shrink first column; mobile: brand-only row */
:root[data-sidebar="collapsed"] .app{
  grid-template-columns: 64px 1fr;
}

/* hide nav & footer when collapsed, keep brand visible */
:root[data-sidebar="collapsed"] .sidebar .nav,
:root[data-sidebar="collapsed"] .sidebar .sidebar__footer{
  display: none;
}

/* tighten brand when collapsed */
:root[data-sidebar="collapsed"] .brand{
  gap: 8px;
  padding: 8px;
  justify-content: center; /* center icon/button */
}

/* icon-only when collapsed */
:root[data-sidebar="collapsed"] #sidebarTitle{
  display: none;
}

/* Mobile: when collapsed, limit sidebar height to just brand row */
@media (max-width:900px){
  :root[data-sidebar="collapsed"] .sidebar{
    height: auto;
    overflow: visible;
    padding-bottom: 8px;
  }
}
@media (max-width: 900px) {
  :root:not(.menu-open) .sidebar .nav,
  :root:not(.menu-open) .sidebar .sidebar__footer {
    display: none;
  }
}
@media (max-width: 900px) {
  :root:not(.menu-open) .view {
    padding-top: 75px; /* adjust to match .brand height */
  }
}


/* =========================================
   MAIN VIEW
   ========================================= */
.view{
  padding:28px clamp(16px, 4vw, 40px);
  outline:none;
  height: 100vh;                     /* fill remaining column */
  overflow-y: auto;                  /* scroll here instead of page */
  -webkit-overflow-scrolling: touch;
}

/* =========================================
   HERO / HEADINGS / META
   ========================================= */
.hero{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:24px; align-items:center;
}
.hero h1{ font-size: clamp(28px, 4.2vw, 52px); margin:0 0 12px }
.hero p{ color:var(--muted); margin:0 0 24px }
@media (max-width:900px){
  .hero{ grid-template-columns: 1fr }
}

/* =========================================
   BUTTONS
   ========================================= */
.cta{ display:flex; gap:12px; flex-wrap:wrap }
.button{
  all:unset;
  background: var(--panel-elev);
  color: var(--text);
  padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:600;
  border:1px solid var(--border);
}
.button:hover{ filter: brightness(1.05); }
.button.secondary{
  background: var(--panel);
}
.button.brand{
  background: var(--brand); color:#fff; border-color: transparent;
}

/* =========================================
   CARDS / SECTIONS
   ========================================= */
.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px; padding:16px;
  box-shadow: 0 4px 10px rgba(0,0,0,.35);
}
.section{ margin-top:28px }
.section h2{ margin:0 0 8px; font-size:24px }
.section p{ margin:0 0 12px; color:var(--muted) }

/* =========================================
   GRID / TILES
   ========================================= */
.grid{
  display:grid; grid-template-columns: repeat(12, 1fr); gap:14px;
}
.tile{
  grid-column: span 4; min-height:160px; position:relative; overflow:hidden; border-radius:12px;
  background: var(--panel-elev);
  cursor:pointer; border:1px solid var(--border);
  box-shadow: 0 4px 10px rgba(0,0,0,.35);
  transition: transform .15s ease;
}
.tile:hover{ transform: translateY(-2px); }
.tile__body{ position:absolute; inset:0; padding:14px; display:flex; flex-direction:column; justify-content:space-between }
.tile__tag{ font-size:12px; color:var(--muted) }
.tile__title{ font-size:18px; font-weight:700 }
.tile__thumb{ position:absolute; right:-8px; bottom:-8px; max-width:40%; opacity:.25; max-height: 100%; filter:saturate(0) }
@media (max-width:1000px){ .tile{ grid-column: span 6 } }
@media (max-width:640px){ .tile{ grid-column: span 12 } }

/* =========================================
   TABS
   ========================================= */
.tabs{ display:flex; gap:6px; flex-wrap:wrap; margin:10px 0 18px }
.tab{
  all:unset; padding:8px 12px; border-radius:10px;
  background: color-mix(in oklab, var(--text) 10%, transparent); cursor:pointer;
}
.tab[aria-selected="true"]{ background: color-mix(in oklab, var(--text) 18%, transparent) }

/* =========================================
   PROJECT META
   ========================================= */
.proj__meta{ display:flex; gap:12px; color:var(--muted); font-size:14px; flex-wrap:wrap }
.proj__hero{ display:flex; flex-direction:column; gap:12px }
.proj__hero h3{ margin:0 }

/* =========================================
   KBD
   ========================================= */
kbd{
  background: #0b1020; color:#e2e6eb;
  border:1px solid #334155; border-bottom-width:2px;
  border-radius:6px; padding:0 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px;
}

/* =========================================
   RESUME ACCORDION (Bootstrap-like, dark surfaces)
   ========================================= */
.accordion{ display:grid; gap:14px; }
.accordion details{
  border:1px solid var(--border);
  background: var(--panel);
  border-radius:12px;
  box-shadow: 0 6px 14px rgba(0,0,0,.35);
  overflow: clip;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.accordion details[open]{
  border-color: color-mix(in oklab, var(--brand) 45%, transparent);
  box-shadow: 0 10px 22px rgba(0,0,0,.45);
}
.accordion summary{
  list-style:none;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:14px 16px; font-weight:700; cursor:pointer; user-select:none;
}
.accordion summary::-webkit-details-marker{ display:none }
.accordion summary:focus-visible{ outline:none; box-shadow: var(--ring); border-radius:10px; }
.accordion__chev{
  inline-size:1em; block-size:1em; display:inline-grid; place-items:center;
  transition: transform .2s ease;
}
details[open] .accordion__chev{ transform: rotate(90deg); }
.accordion__body{
  padding: 0 16px 14px 16px;
  overflow:hidden;
  height:0;                         /* JS animates 0 <-> auto */
  transition: height .25s ease;
}
@media (prefers-reduced-motion: reduce){
  .accordion__body{ transition:none; }
}
.accordion .card{ margin-top:12px }

/* =========================================
   ABOUT GALLERY PHOTOS
   ========================================= */
.gallery{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
}
.tile-photo{
  grid-column: span 4;
  position: relative;
  background: var(--panel-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,.35);
  cursor: zoom-in;
  outline: none;
}
.tile-photo img{
  width: 100%; height: 100%; object-fit: cover; display:block;
  transition: transform .2s ease;
}
.tile-photo:hover img,
.tile-photo:focus-visible img{ transform: scale(1.02); }
.tile-photo figcaption{
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 80%);
  color: #fff; padding: 24px 10px 10px; font-size: 12px;
}

/* width spans */
.tile-photo.w-3{ grid-column: span 3 }
.tile-photo.w-4{ grid-column: span 4 }
.tile-photo.w-6{ grid-column: span 6 }
.tile-photo.w-8{ grid-column: span 8 }
@media (max-width:1000px){
  .tile-photo.w-8{ grid-column: span 12 }
  .tile-photo.w-6{ grid-column: span 12 }
  .tile-photo.w-4{ grid-column: span 6 }
  .tile-photo.w-3{ grid-column: span 6 }
}
@media (max-width:640px){
  .tile-photo{ grid-column: span 12 }
}

/* aspect ratios */
.tile-photo.ar-1x1{ aspect-ratio: 1 / 1 }
.tile-photo.ar-4x3{ aspect-ratio: 4 / 3 }
.tile-photo.ar-3x2{ aspect-ratio: 3 / 2 }
.tile-photo.ar-4x5{ aspect-ratio: 4 / 5 }
tile-photo.ar-16x9{ aspect-ratio: 16 / 9 }
.tile-photo.ar-21x9{ aspect-ratio: 21 / 9 }

/* ===== LIGHTBOX ===== */
.lightbox{
  border: none; padding: 0; width: min(92vw, 1100px);
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 30px 60px rgba(0,0,0,.6);
}
.lightbox::backdrop{ background: rgba(0,0,0,.6) }
.lightbox img{
  display:block; width: 100%; height: auto; border-bottom: 1px solid var(--border);
}
.lightbox__caption{
  padding: 10px 12px; color: var(--muted); font-size: 14px;
}
.lightbox__close{
  all: unset; position:absolute; top:8px; right:10px;
  width: 36px; height: 36px; display:grid; place-items:center;
  border-radius: 8px; cursor: pointer; color: var(--text);
}
.lightbox__close:hover{ background: color-mix(in oklab, var(--text) 12%, transparent); }