:root {
  color-scheme: dark;
  --fg: #ececec;
  --bg: #0a0a0c;
  --muted: #8b8b92;
  --accent: #6d8bff;
  --accent-soft: rgba(109, 139, 255, 0.16);
  --accent-2: #ff9f43;
  --accent-2-soft: rgba(255, 159, 67, 0.16);
  --border: #2c2c34;
  --panel: #121214;
  --error: #ff8a80;
  --success: #8affb0;
}

* { box-sizing: border-box; }

::selection { background: var(--accent); color: #10131f; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--fg);
  background: var(--bg);
  line-height: 1.6;
}

a { color: var(--accent); }

.site-header {
  flex-shrink: 0;
  max-width: 720px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 0;
}

.brand {
  text-decoration: none;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

/* main fills the space between header and footer exactly (a standard
   sticky-footer flex layout), so the desktop two-pane grid below can size
   itself to that real remaining height instead of guessing with vh math. */
main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  max-width: 720px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 2rem;
}

.layout { flex: 1 1 auto; min-height: 0; }

/* Identity block */
.identity-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
  flex-shrink: 0;
  display: block;
}

.avatar-placeholder {
  background: var(--panel);
}

.name {
  font-family: "Fraunces", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 2.4rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.1;
  background: linear-gradient(100deg, var(--accent) 20%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.headline {
  margin: 0.5rem 0 0;
  color: var(--accent);
  font-size: 0.95rem;
}

/* Bordered panels (resume, post previews) */
.panel {
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: 10px;
  background: var(--panel);
  margin-bottom: 1rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-top-color 0.15s ease;
}

.post-preview:hover {
  transform: translateY(-2px);
  border-top-color: var(--accent-2);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

details.panel { padding: 0; }

details.panel summary {
  padding: 0.9rem 1.1rem;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

details.panel summary::-webkit-details-marker { display: none; }

details.panel summary::before {
  content: "\203A";
  display: inline-block;
  margin-right: 0.6rem;
  transition: transform 0.15s ease;
  color: var(--accent-2);
  font-weight: 700;
}

details.panel[open] summary::before { transform: rotate(90deg); }

.resume-body {
  padding: 0 1.1rem 1.1rem;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

.resume-body h1, .resume-body h2, .resume-body h3 { margin-top: 1.2rem; }
.resume-body h1:first-child, .resume-body h2:first-child { margin-top: 0; }

.resume-body h2 {
  border-left: 3px solid var(--accent);
  padding-left: 0.6rem;
}

.resume-body li::marker, .post-body li::marker { color: var(--accent-2); }

.resume-desktop { display: none; }

.pane-title {
  display: none;
  margin: 0;
  padding: 0.9rem 1.1rem;
  font-size: 1rem;
  border-bottom: 1px solid var(--border);
}

/* Posts */
.posts { margin-top: 0.5rem; }

.post-preview {
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.post-preview h2 { margin: 0; font-size: 1.15rem; }
.post-preview h2 a { text-decoration: none; color: var(--fg); }
.post-preview h2 a:hover { color: var(--accent); }

.excerpt { margin: 0; color: var(--muted); font-size: 0.92rem; }

.read-more {
  align-self: flex-end;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  color: #10131f;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: var(--accent-2);
  transition: filter 0.15s ease, transform 0.15s ease;
}

.read-more:hover { filter: brightness(1.12); transform: translateX(2px); }

.muted { color: var(--muted); }

/* Individual post page */
.back-link {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--muted);
}

.back-link:hover { color: var(--accent); }

.post h1 {
  margin-bottom: 0.25rem;
  border-left: 3px solid var(--accent);
  padding-left: 0.7rem;
}

.post time {
  display: block;
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 1.25rem;
}

.post-body img { border-radius: 8px; margin: 1rem 0; }
.post-body pre {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  overflow-x: auto;
}
.post-body code { font-size: 0.9em; }

/* Footer */
.site-footer {
  flex-shrink: 0;
  max-width: 720px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
  margin-top: 2rem;
  font-size: 0.85rem;
}

.site-footer a { color: inherit; transition: color 0.15s ease; }
.site-footer a:hover { color: var(--accent); }
.sep { margin: 0 0.4em; }

/* Desktop: two-pane layout — identity + resume stacked in a left column,
   posts in a right column that spans the same total height (so the
   identity block sits at its natural width instead of stretching across
   the whole page), each pane scrolling independently instead of the whole
   page scrolling. */
@media (min-width: 900px) {
  /* Cap body to exactly the viewport height so main's flex:1 (and the grid
     rows inside .layout) are a real, bounded size instead of just growing
     to fit content — that bound is what makes overflow-y:auto below
     actually have something to scroll, instead of the pane just being as
     tall as its content. Mobile is left unbounded (normal page scroll). */
  body { height: 100vh; }

  .site-header, main, .site-footer { max-width: 1300px; }

  .layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 1.5rem;
  }

  .pane-title { display: block; }

  .identity { grid-column: 1; grid-row: 1; }
  .resume-desktop { grid-column: 1; grid-row: 2; margin-bottom: 0; min-height: 0; }
  .posts {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0;
    margin-bottom: 0;
    min-height: 0;
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-top: 3px solid var(--accent);
    border-radius: 10px;
    background: var(--panel);
  }

  /* Bleed the title to the pane's edges (cancelling .posts's own padding)
     so its border-bottom spans full width, matching the resume pane's
     title exactly. */
  .posts .pane-title { margin: -0.5rem -0.5rem 0.5rem; }

  .resume-mobile { display: none; }
  .resume-desktop { display: block; }

  .resume-desktop, .posts { overflow-y: auto; }
  .posts { display: flex; flex-direction: column; }
}

/* Thin, muted scrollbars for the scrollable panes instead of the browser
   default — Firefox via scrollbar-width/color, WebKit via the pseudo-els. */
.resume-desktop, .posts {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.resume-desktop::-webkit-scrollbar, .posts::-webkit-scrollbar { width: 8px; }
.resume-desktop::-webkit-scrollbar-track, .posts::-webkit-scrollbar-track { background: transparent; }
.resume-desktop::-webkit-scrollbar-thumb, .posts::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 999px;
}
.resume-desktop::-webkit-scrollbar-thumb:hover, .posts::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

/* Admin */
.admin-form, .admin-dashboard { max-width: 720px; }

.admin-form label {
  display: block;
  margin: 1rem 0 0.35rem;
  font-weight: 600;
}

.admin-form .hint {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.85rem;
  margin: -0.15rem 0 0.4rem;
}

.admin-form input, .admin-form textarea {
  width: 100%;
  padding: 0.6rem;
  font: inherit;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg);
}

.admin-form input[type="url"], .admin-form input[type="text"] { font-family: inherit; }

.admin-form textarea { font-family: "SFMono-Regular", Consolas, monospace; }

.admin-form button, .admin-dashboard button {
  margin-top: 1rem;
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: #10131f;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.admin-form a { margin-left: 1rem; color: var(--muted); }

.error { color: var(--error); }
.success { color: var(--success); }

.admin-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.admin-bar a { margin-right: 1rem; }

.admin-dashboard table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

.admin-dashboard th, .admin-dashboard td {
  text-align: left;
  padding: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.admin-dashboard button {
  margin-top: 0;
  background: transparent;
  color: var(--error);
  padding: 0.2rem 0.5rem;
  font-weight: 400;
}