/* RESET */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* TOKENS */
:root {
  --bg:    #0d0d0d;
  --ink:   #ffffff;
  --muted: #777;
  --line:  #252525;
  --accent:#4f3fe8;
  --mono:  'Geist Mono', 'JetBrains Mono', 'Courier New', monospace;
  --nav-h: 56px;
  --pad:   60px;
}

/* BASE */
html, body { width:100%; height:100%; overflow:hidden; background:var(--bg); font-family:var(--mono); color:var(--ink); font-size:14px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }

/* NAV — hidden by default, shown on inner sections via :has() */
nav {
  position:fixed; top:0; left:0; right:0;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad);
  background:var(--bg);
  z-index:100;
  opacity:0; pointer-events:none;
  transition:opacity 0.2s;
}
.nav-brand { font-size:13px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; }

/* HAMBURGER MENU */
.nav-toggle { display:none; }
.nav-hamburger { display:none; width:24px; height:24px; cursor:pointer; flex-direction:column; justify-content:center; gap:5px; }
.nav-hamburger span { width:100%; height:2px; background:var(--ink); border-radius:1px; transition:all 0.3s ease; }

.nav-links { display:flex; align-items:center; gap:40px; }
.nav-links a { font-size:13px; font-weight:400; transition:color 0.15s; }
.nav-links a:hover { color:var(--muted); }

/* SECTIONS */
.page { position:fixed; top:0; left:0; right:0; bottom:0; opacity:0; pointer-events:none; transition:opacity 0.25s ease; overflow-y:auto; }
#home { opacity:1; pointer-events:all; }

body:has(#about:target)    #home,
body:has(#projects:target) #home,
body:has(#writings:target) #home,
body:has(#contact:target)  #home { opacity:0; pointer-events:none; }

.page:target { opacity:1; pointer-events:all; }

body:has(#about:target)    nav,
body:has(#projects:target) nav,
body:has(#writings:target) nav,
body:has(#contact:target)  nav { opacity:1; pointer-events:all; }

#about, #projects, #writings, #contact { top:var(--nav-h); }

body:has(#about:target)    nav .nav-links a[href="#about"],
body:has(#projects:target) nav .nav-links a[href="#projects"],
body:has(#writings:target) nav .nav-links a[href="#writings"],
body:has(#contact:target)  nav .nav-links a[href="#contact"] { color:var(--muted); pointer-events:none; cursor:default; }

/* HOME */
#home { display:grid; grid-template-rows:1fr auto; height:100vh; }
#home .page-inner { display:grid; grid-template-columns:1fr 1fr; padding:var(--pad); min-height:0; }
.home-left { display:flex; flex-direction:column; justify-content:center; padding-right:32px; }
.home-greeting { font-size:clamp(2.4rem,3.5vw,3.2rem); font-weight:400; line-height:1.15; }
.home-name { font-size:clamp(2.4rem,3.5vw,3.2rem); font-weight:400; line-height:1.15; margin-bottom:24px; }
.home-name span { color:var(--accent); }
.home-subtitle { font-size:14px; font-style:italic; font-weight:300; margin-bottom:40px; }
.home-meta { display:flex; flex-direction:column; gap:10px; }
.home-meta-row { display:flex; align-items:baseline; font-size:13px; }
.home-meta-label { min-width:200px; color:var(--muted); font-weight:300; }
.home-meta-arrow { color:var(--muted); margin:0 20px; }
.home-meta-val { font-weight:400; }
.home-right { display:flex; align-items:center; justify-content:flex-end; }
.home-page-links { display:flex; flex-direction:column; gap:10px; width:100%; }
.home-page-link { font-size:14px; font-weight:400; background:#1c1c1c; padding:20px 24px; text-align:center; display:block; cursor:pointer; transition:background 0.15s; letter-spacing:0.02em; flex:1; }
.home-page-link:hover { background:#252525; }

/* EMAIL FOOTER */
.email-footer { position:fixed; bottom:0; left:0; right:0; padding:14px var(--pad); font-size:13px; background:#161616; text-align:center; letter-spacing:0.02em; }

/* INNER SHARED */
.page-inner { padding:52px var(--pad) 80px; }
.page-label { font-size:clamp(1.8rem,2.5vw,2.4rem); font-weight:400; color:var(--accent); margin-bottom:48px; letter-spacing:-0.01em; }

/* ABOUT */
#about .page-inner { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto 1fr; column-gap:80px; }
#about .page-label { grid-column:1 / -1; }
.about-left { display:flex; flex-direction:column; }
.about-bio { font-size:14px; font-weight:300; line-height:1.9; }
.about-bio p { margin-bottom:16px; }
.about-bio p:last-child { margin-bottom:0; }
.resume-btn { display:inline-flex; align-items:center; gap:10px; margin-top:32px; margin-bottom: 32px; font-family:var(--mono); font-size:12px; font-weight:400; color:var(--ink); background:#1c1c1c; border:1px solid var(--line); padding:10px 18px; cursor:pointer; letter-spacing:0.06em; text-transform:lowercase; transition:background 0.15s, border-color 0.15s; }
.resume-btn:hover { background:#252525; border-color:#444; }
.about-sidebar { border-left:1px solid var(--line); padding-left:60px; display:flex; flex-direction:column; gap:36px; }
.sidebar-block-label { font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.sidebar-block-val { font-size:13px; font-weight:300; line-height:1.75; }

/* PROJECTS LIST */
#projects .page-inner { display:flex; flex-direction:column; height:calc(100vh - var(--nav-h)); }
.project-list { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; flex:1; min-height:0; }
.project-item { display:flex; flex-direction:column; background:#e8e8e8; border-top:3px solid #777; overflow:hidden; cursor:pointer; }
.project-item:hover { border-color:var(--accent); }
.project-thumb { background:#555; flex:1; min-height:140px; object-fit:cover; width:100%; display:block; }
.project-thumb:hover { filter: opacity(0.5);  }
.project-body { padding:18px 20px; }
.project-title { font-size:13px; font-weight:500; color:#111; margin-bottom:8px; transition:color 0.15s; }
.project-item:hover .project-title { color:#555; }
.project-desc { font-size:12px; color:#444; line-height:1.7; }
.project-tag { font-size:10px; color:#888; margin-top:10px; letter-spacing:0.06em; text-transform:uppercase; }

/* WRITINGS LIST */
#writings .page-inner { display:flex; flex-direction:column; }
.writing-list { display:flex; flex-direction:column; }
.writing-item { display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:40px; padding:26px 0; border-bottom:1px solid var(--line); cursor:pointer; transition:opacity 0.15s; }
.writing-item:first-child { border-top:1px solid var(--line); }
.writing-item:hover { opacity:0.5; border-left: solid var(--accent) 3px;}
.writing-title { font-size:14px; font-weight:400; line-height:1.55; padding-left: 20px;}
.writing-date { font-size:12px; font-weight:300; color:var(--muted); font-style:italic; white-space:nowrap; padding-right: 20px;}

/* CONTACT */
#contact .page-inner { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto 1fr; column-gap:80px; align-content:start; }
#contact .page-label { grid-column:1 / -1; }
.contact-list { display:flex; flex-direction:column; }
.contact-item { display:grid; grid-template-columns:120px auto 1fr; align-items:center; padding:28px 0; border-bottom:1px solid var(--line); }
.contact-item:first-child { border-top:1px solid var(--line); }
.contact-label { font-size:13px; color:var(--muted); font-weight:300; }
.contact-arrow { color:var(--muted); margin-right:20px; }
.contact-val { font-size:13px; font-weight:400; transition:color 0.15s; }
.contact-item a { display:contents; }
.contact-item a:hover .contact-val { color:var(--muted); }
.contact-aside { border-left:1px solid var(--line); padding-left:60px; display:flex; flex-direction:column; }
.contact-aside-text { font-size:13px; font-weight:300; color:var(--muted); line-height:1.85; }

/* SCROLLBAR */
.page::-webkit-scrollbar { width:3px; }
.page::-webkit-scrollbar-track { background:transparent; }
.page::-webkit-scrollbar-thumb { background:#333; }

/* ── SINGLE POST/PROJECT PAGE ─────────────────────────────────── */
html.single-page, html.single-page body { overflow:auto; height:auto; }

.single-nav {
  position:fixed; top:0; left:0; right:0;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad);
  background:var(--bg);
  border-bottom:1px solid var(--line);
  z-index:100;
}

.brand-grp { display:flex; align-items:center; gap:12px; }

.single-nav .brand-grp .nav-brand { font-size:13px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; }
.single-nav .back-link { font-size:13px; color:var(--muted); display:flex; align-items:center; gap:8px; transition:color 0.15s; }
.back-link span { font-size:22px; }
.single-nav .back-link:hover { color:var(--ink); }

.single-content {
  max-width:680px;
  margin:0 auto;
  padding:calc(var(--nav-h) + 60px) var(--pad) 100px;
}
.single-content .post-title { font-size:clamp(1.4rem,2.5vw,2rem); font-weight:400; color:var(--ink); line-height:1.3; margin-bottom:12px; }
.single-content .post-meta { font-size:12px; color:var(--muted); font-style:italic; margin-bottom:48px; }
.single-content .post-body { font-size:14px; font-weight:300; line-height:1.9; }
.single-content .post-body h1,
.single-content .post-body h2,
.single-content .post-body h3 { font-weight:500; color:var(--ink); margin:36px 0 16px; letter-spacing:-0.01em; }
.single-content .post-body h1 { font-size:1.4rem; }
.single-content .post-body h2 { font-size:1.2rem; }
.single-content .post-body h3 { font-size:1rem; color:var(--muted); }
.single-content .post-body p { margin-bottom:20px; }
.single-content .post-body a { color:var(--accent); border-bottom:1px solid transparent; transition:border-color 0.15s; }
.single-content .post-body a:hover { border-color:var(--accent); }
.single-content .post-body code { background:#1c1c1c; padding:2px 6px; font-size:13px; font-family:var(--mono); }
.single-content .post-body pre { background:#1c1c1c; padding:20px; margin:24px 0; overflow-x:auto; }
.single-content .post-body pre code { background:none; padding:0; }
.single-content .post-body blockquote { border-left:2px solid var(--accent); padding-left:20px; color:var(--muted); margin:24px 0; }
.single-content .post-body img { max-width:100%; margin:24px 0; display:block; }
.single-content .post-body ul, .single-content .post-body ol { padding-left:24px; margin-bottom:20px; }
.single-content .post-body li { margin-bottom:6px; }

/* project single hero image */
.project-hero { width:100%; max-height:320px; object-fit:cover; margin-bottom:40px; display:block; }

/* ── RESPONSIVE DESIGN ─────────────────────────────────── */

/* RESPONSIVE DESIGN: All mobile/tablet sizes below 1024px */
@media (max-width:1023px) {
  :root {
    --pad: 40px;
  }

  /* NAV & HAMBURGER - Show for ALL tablet/mobile */
  nav, .single-nav { padding:0 var(--pad); height:var(--nav-h); }
  .nav-hamburger { display:flex !important; }
  .nav-toggle:checked ~ .nav-hamburger span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-hamburger span:nth-child(2) { opacity:0; }
  .nav-toggle:checked ~ .nav-hamburger span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }
  .nav-links { display:none !important; position:absolute; top:var(--nav-h); left:0; right:0; flex-direction:column !important; gap:0 !important; background:#161616; border-bottom:1px solid var(--line); padding:16px var(--pad) !important; margin:0 !important; }
  .nav-toggle:checked ~ .nav-links { display:flex !important; }
  .nav-links a { font-size:13px; padding:12px 0; display:block; border-bottom:1px solid var(--line); }
  .nav-links a:last-child { border-bottom:none; }
  .nav-brand { font-size:12px; }

  /* Apply to both nav and single-nav */
  nav .nav-hamburger { display:flex !important; }
  nav .nav-toggle:checked ~ .nav-hamburger span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
  nav .nav-toggle:checked ~ .nav-hamburger span:nth-child(2) { opacity:0; }
  nav .nav-toggle:checked ~ .nav-hamburger span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }
  nav .nav-toggle:checked ~ .nav-links { display:flex !important; }
  nav .nav-links { display:none !important; }

  .single-nav .nav-hamburger { display:flex !important; }
  .single-nav .nav-toggle:checked ~ .nav-hamburger span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
  .single-nav .nav-toggle:checked ~ .nav-hamburger span:nth-child(2) { opacity:0; }
  .single-nav .nav-toggle:checked ~ .nav-hamburger span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }
  .single-nav .nav-toggle:checked ~ .nav-links { display:flex !important; }
  .single-nav .nav-links { display:none !important; }

  #home .page-inner { grid-template-columns:1fr; padding:var(--pad) 40px; }
  .home-left { padding-right:0; margin-bottom:32px; }
  .home-right { justify-content:flex-start; }

  .project-list { grid-template-columns:repeat(2,1fr); gap:12px; }

  #about .page-inner { grid-template-columns:1fr; column-gap:0; }
  .about-sidebar { border-left:none; border-top:1px solid var(--line); padding-left:0; padding-top:36px; margin-top:24px; }

  #contact .page-inner { grid-template-columns:1fr; column-gap:0; }
  .contact-aside { border-left:none; border-top:1px solid var(--line); padding-left:0; padding-top:36px; margin-top:24px; }

  .writing-item { grid-template-columns:1fr; gap:10px; }
  .writing-date { white-space:normal; }
}

/* MOBILE: up to 767px */
@media (max-width:767px) {
  :root {
    --pad: 20px;
    --nav-h: 48px;
  }

  /* BASE */
  html, body { font-size:13px; }

  /* NAV & HAMBURGER */
  nav { padding:0 var(--pad); height:var(--nav-h); }
  .nav-hamburger { display:flex; }
  .nav-toggle { display:none; }
  .nav-toggle:checked ~ .nav-hamburger span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-hamburger span:nth-child(2) { opacity:0; }
  .nav-toggle:checked ~ .nav-hamburger span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }
  .nav-toggle:checked ~ .nav-links { display:flex; }
  .nav-brand { font-size:12px; }
  .nav-links { display:none !important; position:absolute; top:var(--nav-h); left:0; right:0; flex-direction:column !important; gap:0 !important; background:#161616; border-bottom:1px solid var(--line); padding:16px var(--pad) !important; margin:0 !important; }
  .nav-links a { font-size:13px; padding:12px 0; display:block; border-bottom:1px solid var(--line); }
  .nav-links a:last-child { border-bottom:none; }

  /* BASE */
  html, body { font-size:13px; }

  /* HOME */
  #home { height:auto; min-height:100vh; }
  #home .page-inner { grid-template-columns:1fr; display:flex; flex-direction:column; padding:var(--pad); min-height:auto; }
  .home-left { padding-right:0; margin-bottom:16px; }
  .home-greeting { font-size:clamp(1.6rem, 5vw, 2.4rem); }
  .home-name { font-size:clamp(1.6rem, 5vw, 2.4rem); margin-bottom:16px; }
  .home-subtitle { font-size:13px; margin-bottom:32px; }
  .home-meta { display:flex; flex-direction:column; gap:16px; }
  .home-meta-row { flex-direction:column; align-items:flex-start; gap:4px; }
  .home-meta-label { min-width:auto; display:block; font-size:12px; }
  .home-meta-arrow { display:inline; margin:0; }
  .home-meta-val { display:inline; }
  .home-right { justify-content:flex-start; margin-top:24px; width:100%; }
  .home-page-links { width:100%; }
  .home-page-link { padding:16px 20px; font-size:13px; }

  /* EMAIL FOOTER */
  .email-footer { padding:12px var(--pad); font-size:12px; }

  /* INNER SHARED */
  .page-inner { padding:40px var(--pad) 60px; }
  .page-label { font-size:clamp(1.4rem, 4vw, 1.8rem); margin-bottom:32px; }

  /* ABOUT */
  #about .page-inner { grid-template-columns:1fr; }
  .about-bio { font-size:13px; line-height:1.7; }
  .about-sidebar { border-left:none; border-top:1px solid var(--line); padding-left:0; padding-top:32px; margin-top:32px; gap:24px; }
  .sidebar-block-label { font-size:10px; margin-bottom:8px; }
  .sidebar-block-val { font-size:12px; }
  .resume-btn { font-size:11px; padding:8px 14px; margin-top:24px; }

  /* PROJECTS LIST */
  #projects .page-inner { height:auto; }
  .project-list { grid-template-columns:1fr; gap:10px; }
  .project-item { margin-bottom:8px; }
  .project-thumb { min-height:120px; }
  .project-body { padding:14px 16px; }
  .project-title { font-size:12px; }
  .project-desc { font-size:11px; }

  /* WRITINGS LIST */
  .writing-list { }
  .writing-item { grid-template-columns:1fr; gap:8px; padding:16px 0; }
  .writing-title { font-size:13px; padding-left:0; }
  .writing-date { font-size:11px; padding-right:0; }

  /* CONTACT */
  #contact .page-inner { grid-template-columns:1fr; }
  .contact-list { }
  .contact-item { grid-template-columns:auto auto 1fr; gap:12px; padding:20px 0; }
  .contact-label { font-size:12px; min-width:auto; }
  .contact-arrow { margin-right:8px; }
  .contact-aside { border-left:none; border-top:1px solid var(--line); padding-left:0; padding-top:32px; margin-top:32px; }
  .contact-aside-text { font-size:12px; }

  /* SINGLE PAGE */
  .single-nav { padding:0 var(--pad); height:var(--nav-h); }
  .single-nav .nav-brand { font-size:12px; }
  .single-nav .back-link { font-size:12px; }
  .back-link span { font-size:18px; }
  .single-nav .nav-hamburger { display:flex; }
  .single-nav .nav-toggle { display:none; }
  .single-nav .nav-toggle:checked ~ .nav-hamburger span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
  .single-nav .nav-toggle:checked ~ .nav-hamburger span:nth-child(2) { opacity:0; }
  .single-nav .nav-toggle:checked ~ .nav-hamburger span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }
  .single-nav .nav-toggle:checked ~ .nav-links { display:flex; }
  .single-nav .nav-links { display:none !important; position:absolute; top:var(--nav-h); left:0; right:0; flex-direction:column !important; gap:0 !important; background:#161616; border-bottom:1px solid var(--line); padding:16px var(--pad) !important; margin:0 !important; }
  .single-nav .nav-links a { font-size:13px; padding:12px 0; display:block; border-bottom:1px solid var(--line); }
  .single-nav .nav-links a:last-child { border-bottom:none; }

  .single-content {
    max-width:100%;
    padding:calc(var(--nav-h) + 40px) var(--pad) 60px;
  }
  .single-content .post-title { font-size:clamp(1.2rem, 4vw, 1.6rem); margin-bottom:10px; }
  .single-content .post-meta { font-size:11px; margin-bottom:32px; }
  .single-content .post-body { font-size:13px; line-height:1.8; }
  .single-content .post-body h1 { font-size:1.2rem; }
  .single-content .post-body h2 { font-size:1.1rem; }
  .single-content .post-body h3 { font-size:0.95rem; }
  .single-content .post-body pre { padding:14px; margin:16px 0; }
  .single-content .post-body ul, .single-content .post-body ol { padding-left:20px; margin-bottom:16px; }
  .single-content .post-body li { margin-bottom:4px; }

  /* PROJECT HERO */
  .project-hero { max-height:240px; margin-bottom:24px; }

  /* SCROLLBAR */
  .page::-webkit-scrollbar { display:none; }
}

/* SMALL MOBILE: up to 480px */
@media (max-width:480px) {
  :root {
    --pad: 16px;
  }

  /* NAV & HAMBURGER */
  nav { padding:0 var(--pad); }
  .nav-hamburger { display:flex; }
  .nav-brand { font-size:11px; }
  .nav-links { display:none !important; }
  .nav-toggle:checked ~ .nav-links { display:flex !important; }
  .nav-toggle:checked ~ .nav-hamburger span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-hamburger span:nth-child(2) { opacity:0; }
  .nav-toggle:checked ~ .nav-hamburger span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }
  .nav-links a { font-size:13px; }

  html, body { font-size:12px; }

  .home-greeting { font-size:clamp(1.4rem, 6vw, 2rem); }
  .home-name { font-size:clamp(1.4rem, 6vw, 2rem); }
  .home-subtitle { font-size:12px; }
  .home-page-link { padding:14px 16px; font-size:12px; }
  .home-meta-row { flex-direction:column; gap:4px; }
  .home-meta-label { font-size:11px; }
  .home-meta-arrow { margin:0; display:inline; }

  .page-inner { padding:32px var(--pad) 48px; }
  .page-label { font-size:clamp(1.2rem, 5vw, 1.6rem); margin-bottom:24px; }

  #about .page-inner { padding:32px var(--pad) 48px; }
  .about-bio { font-size:12px; }
  .sidebar-block-val { font-size:11px; }
  .resume-btn { font-size:10px; padding:6px 12px; }

  .project-list { gap:8px; }
  .project-thumb { min-height:100px; }
  .project-item { margin-bottom:6px; }
  .project-body { padding:12px 14px; }
  .project-title { font-size:11px; }
  .project-desc { font-size:10px; }

  .writing-item { padding:12px 0; }
  .writing-title { font-size:12px; }
  .writing-date { font-size:10px; }

  .contact-item { grid-template-columns:auto auto 1fr; gap:8px; padding:16px 0; }
  .contact-label { font-size:11px; }
  .contact-aside-text { font-size:11px; }

  .single-nav { padding:0 var(--pad); }
  .single-nav .back-link { font-size:11px; }
  .back-link span { font-size:16px; }
  .single-nav .nav-hamburger { display:flex; }
  .single-nav .nav-toggle { display:none; }
  .single-nav .nav-toggle:checked ~ .nav-hamburger span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
  .single-nav .nav-toggle:checked ~ .nav-hamburger span:nth-child(2) { opacity:0; }
  .single-nav .nav-toggle:checked ~ .nav-hamburger span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }
  .single-nav .nav-toggle:checked ~ .nav-links { display:flex !important; }
  .single-nav .nav-links { display:none !important; }

  .single-content {
    padding:calc(var(--nav-h) + 32px) var(--pad) 48px;
  }
  .single-content .post-title { font-size:clamp(1rem, 4.5vw, 1.4rem); }
  .single-content .post-meta { font-size:10px; }
  .single-content .post-body { font-size:12px; line-height:1.7; }
  .single-content .post-body h1 { font-size:1.1rem; }
  .single-content .post-body h2 { font-size:1rem; }
  .single-content .post-body h3 { font-size:0.9rem; }
  .single-content .post-body pre { padding:10px; margin:12px 0; font-size:11px; }
  .single-content .post-body code { font-size:11px; padding:1px 4px; }

  .project-hero { max-height:180px; margin-bottom:16px; }
}