:root{
  --bg: #ffffff;
  --text: #0b1220;
  --muted: #5b667a;
  --card: #f7f9fc;
  --border: #e5e9f2;
  --accent: #4b8cff;
  --accent-contrast: #ffffff;
  --maxw: 1152px;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(5, 22, 45, 0.06);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b0f17;
    --text: #eaf0ff;
    --muted: #a7b2c7;
    --card: #111827;
    --border: #1f2a3c;
    --accent: #6aa6ff;
    --accent-contrast: #0b0f17;
    --shadow: 0 10px 30px rgba(0,0,0,0.35);
  }
}
/* Manual theme override */
:root[data-theme="light"]{ color-scheme: light; }
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg: #0b0f17;
  --text: #eaf0ff;
  --muted: #a7b2c7;
  --card: #111827;
  --border: #1f2a3c;
  --accent: #6aa6ff;
  --accent-contrast: #0b0f17;
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, Noto Sans, Apple Color Emoji, Segoe UI Emoji;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--maxw); margin:0 auto; padding:0 1rem}
header.site-header{
  position:sticky; top:0; z-index:1000;
  backdrop-filter:saturate(180%) blur(8px);
  background:color-mix(in oklab, var(--bg), transparent 20%);
  border-bottom:1px solid var(--border);
}
.navbar{display:flex; align-items:center; justify-content:space-between; padding:0.8rem 0}
.brand{display:flex; align-items:center; gap:0.6rem; font-weight:700; letter-spacing:.2px}
.brand .logo{display:inline-flex; width:28px; height:28px; border-radius:8px; background:var(--accent); box-shadow:var(--shadow); align-items:center; justify-content:center; color:var(--accent-contrast); font-weight:800}
nav ul{display:flex; gap:1rem; list-style:none; margin:0; padding:0}
nav a{padding:.5rem .7rem; border-radius:10px}
nav a[aria-current="page"]{background:var(--card); text-decoration:none}
.actions{display:flex; gap:.6rem; align-items:center}
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--accent); color:var(--accent-contrast);
  padding:.6rem .9rem; border-radius:12px; border:0; box-shadow:var(--shadow);
  font-weight:600; cursor:pointer
}
.btn.secondary{ background:var(--card); color:var(--text); border:1px solid var(--border) }
.btn.ghost{ background:transparent; color:var(--text); border:1px solid var(--border) }
.btn:focus{ outline:3px solid color-mix(in oklab, var(--accent), white 65%) }

.hero{ padding:4rem 0 2rem; display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; align-items:center }
.hero .tag{display:inline-block; padding:.25rem .6rem; background:var(--card); border:1px solid var(--border); border-radius:999px; font-size:.85rem; color:var(--muted)}
h1{ font-size: clamp(2rem, 5vw, 3.3rem); line-height:1.1; margin:.4rem 0 1rem }
.lead{ font-size: clamp(1rem, 2.4vw, 1.2rem); color:var(--muted); max-width:70ch }
.hero .cta{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.3rem }

.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.grid{ display:grid; gap:1rem }
.grid.cards{ grid-template-columns: repeat(3, minmax(0,1fr)) }
.card .thumb{ aspect-ratio: 16 / 9; border-radius:calc(var(--radius) - 4px) calc(var(--radius) - 4px) 0 0; overflow:hidden; border-bottom:1px solid var(--border) }
.card .content{ padding:1rem }
.badge{
  display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .5rem; border-radius:999px;
  background:color-mix(in oklab, var(--accent), transparent 85%);
  font-size:.75rem; color:color-mix(in oklab, var(--accent), black 25%)
}

.section{ padding:2rem 0 }
.section h2{ font-size:1.6rem; margin:0 0 .8rem }
.footer{ border-top:1px solid var(--border); padding:2rem 0; color:var(--muted) }
.footer a{ color:inherit }

.controls{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin-bottom:.8rem }
.input{
  background:var(--card); border:1px solid var(--border); padding:.6rem .8rem; border-radius:12px;
  color:var(--text); outline:none; min-width:250px
}

.tag{ display:inline-flex; align-items:center; border:1px solid var(--border); border-radius:999px; padding:.25rem .6rem; background:var(--card); cursor:pointer; user-select:none }
.tag[aria-pressed="true"]{ background:color-mix(in oklab, var(--accent), transparent 88%); border-color:color-mix(in oklab, var(--accent), transparent 50%); }
.tag:focus{ outline:3px solid color-mix(in oklab, var(--accent), white 65%) }

/* Project page */
.proj-hero{ padding:2rem 0 1rem }
.proj-meta{ display:flex; gap:1rem; flex-wrap:wrap; color:var(--muted) }
.proj-body{ display:grid; grid-template-columns: 2fr 1fr; gap:2rem; padding:1rem 0 2rem }
.proj-body .sidebar{ position:sticky; top:5.5rem; align-self:start }
.proj-body .section-card{ padding:1rem; }

/* About page */
.about-grid{ display:grid; grid-template-columns: 1fr 2fr; gap:2rem; }
.timeline{ border-left:2px solid var(--border); padding-left:1rem; }
.timeline .item{ margin:0 0 1rem; }
.timeline .item h3{ margin:.1rem 0 }

/* Responsive */
@media (max-width: 980px){
  .hero{ grid-template-columns: 1fr; }
  .grid.cards{ grid-template-columns: 1fr 1fr; }
  .about-grid{ grid-template-columns: 1fr; }
  .proj-body{ grid-template-columns: 1fr; }
}

/* Mobile nav */
.menu-btn{ display:none }
@media (max-width: 720px){
  nav ul{ display:none; position:absolute; right:1rem; top:60px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:.5rem; box-shadow:var(--shadow); }
  nav ul.open{ display:flex; flex-direction:column }
  .menu-btn{ display:inline-flex }
}

hr{ border:0; height:1px; background:var(--border) }
.small{ font-size:.9rem; color:var(--muted) }


/* ===========================
   THEME SKINS (neutral palettes)
   Switch with: <html data-skin="turquoise-mist"> or data-skin="rose-dusk"
   =========================== */

/* --- Turquoise Mist (cool, soft) --- */
:root[data-skin="turquoise-mist"]{
  /* light */
  --bg:     #f8fbfa;
  --text:   #0e1413;
  --muted:  #5d6b69;
  --card:   #eef4f3;
  --border: #d8e4e1;
  --accent: #2e9788;      /* default accent for this skin */
  --accent-contrast: #ffffff;
}
@media (prefers-color-scheme: dark){
  :root[data-skin="turquoise-mist"]{
    /* dark (auto) */
    --bg:     #0c1211;
    --text:   #e6f1ee;
    --muted:  #9aa8a5;
    --card:   #121a19;
    --border: #1c2725;
    --accent: #54b7ab;
    --accent-contrast: #0b0f17;
  }
}
/* explicit manual overrides */
:root[data-skin="turquoise-mist"][data-theme="light"]{
  --bg:#f8fbfa; --text:#0e1413; --muted:#5d6b69; --card:#eef4f3; --border:#d8e4e1; --accent:#2e9788; --accent-contrast:#ffffff;
}
:root[data-skin="turquoise-mist"][data-theme="dark"]{
  --bg:#0c1211; --text:#e6f1ee; --muted:#9aa8a5; --card:#121a19; --border:#1c2725; --accent:#54b7ab; --accent-contrast:#0b0f17;
}

/* --- Rose Dusk (warm, muted) --- */
:root[data-skin="rose-dusk"]{
  /* light */
  --bg:     #fdf9fb;
  --text:   #1b1216;
  --muted:  #715d67;
  --card:   #faf1f4;
  --border: #ead5dc;
  --accent: #b85672;      /* default accent for this skin */
  --accent-contrast: #ffffff;
}
@media (prefers-color-scheme: dark){
  :root[data-skin="rose-dusk"]{
    /* dark (auto) */
    --bg:     #120e12;
    --text:   #f3eaf0;
    --muted:  #b8a6af;
    --card:   #191319;
    --border: #2a2026;
    --accent: #d47990;
    --accent-contrast: #0b0f17;
  }
}
/* explicit manual overrides */
:root[data-skin="rose-dusk"][data-theme="light"]{
  --bg:#fdf9fb; --text:#1b1216; --muted:#715d67; --card:#faf1f4; --border:#ead5dc; --accent:#b85672; --accent-contrast:#ffffff;
}
:root[data-skin="rose-dusk"][data-theme="dark"]{
  --bg:#120e12; --text:#f3eaf0; --muted:#b8a6af; --card:#191319; --border:#2a2026; --accent:#d47990; --accent-contrast:#0b0f17;
}

/* ===========================
   OPTIONAL: Accent override (keeps the skin’s neutrals, swaps accent)
   Switch with: <html data-accent="turquoise"> or data-accent="rose">
   =========================== */

:root[data-accent="turquoise"]{ --accent:#2e9788; --accent-contrast:#ffffff; }
@media (prefers-color-scheme: dark){
  :root[data-accent="turquoise"]{ --accent:#54b7ab; --accent-contrast:#0b0f17; }
}
:root[data-theme="dark"][data-accent="turquoise"]{ --accent:#54b7ab; --accent-contrast:#0b0f17; }
:root[data-theme="light"][data-accent="turquoise"]{ --accent:#2e9788; --accent-contrast:#ffffff; }

:root[data-accent="rose"]{ --accent:#b85672; --accent-contrast:#ffffff; }
@media (prefers-color-scheme: dark){
  :root[data-accent="rose"]{ --accent:#d47990; --accent-contrast:#0b0f17; }
}
:root[data-theme="dark"][data-accent="rose"]{ --accent:#d47990; --accent-contrast:#0b0f17; }
:root[data-theme="light"][data-accent="rose"]{ --accent:#b85672; --accent-contrast:#ffffff; }


/* Turquoise Mist — use the older deep-blue dark neutrals */
@media (prefers-color-scheme: dark){
  :root[data-skin="turquoise-mist"]{
    --bg: #0b0f17;        /* deep blue-black */
    --text: #eaf0ff;
    --muted: #a7b2c7;
    --card: #111827;
    --border: #1f2a3c;
    --accent: #54b7ab;    /* teal in dark */
    --accent-contrast: #0b0f17;
  }
}
/* Explicit manual dark override too */
:root[data-skin="turquoise-mist"][data-theme="dark"]{
  --bg: #0b0f17;
  --text: #eaf0ff;
  --muted: #a7b2c7;
  --card: #111827;
  --border: #1f2a3c;
  --accent: #54b7ab;
  --accent-contrast: #0b0f17;
}