/* ============================================================
   LiteBlog — Wikipedia-inspired light theme
   No framework. Pure CSS. ~5KB.
   ============================================================ */

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

:root {
  --bg:           #fcfcfa;   /* off-white — easier on eyes than pure #fff */
  --surface:      #f4f4f2;   /* slightly warmer surface for sidebars/cards */
  --border:       #c8ccd1;
  --border-light: #e8e8e4;
  --text:         #1a1a1a;   /* deep charcoal — not pure black, less harsh */
  --muted:        #5a5f66;
  --accent:       #3366cc;
  --accent-dark:  #2a4b8d;
  --link-visited: #6b4516;
  --danger:       #c0392b;
  --success:      #27ae60;
  --parchment:    #fbfbfa;

  /* ── Typography ───────────────────────────────────────────────
     Display/UI: sharp, modern system sans-serif for headings,
                 navigation, labels, buttons — everything structural.
     Body: Georgia serif for long-form reading — comfortable,
           traditional, pairs well with the sans-serif display font.
     Mono: code blocks only.
  ────────────────────────────────────────────────────────────── */
  --font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    Georgia, 'Linux Libertine', 'Times New Roman', serif;
  --font-mono:    'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Courier New', monospace;

  /* Keep old aliases so existing rules still work */
  --font-sans:    var(--font-display);
  --font-serif:   var(--font-body);

  --max-w:        1200px;
  --sidebar-w:    260px;
  --content-w:    700px;
  --transition:   0.18s ease;
}

/* ---- Base ---- */
html {
  font-size: 16px;
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.75;
  /* Flex column: topbar is fixed at top, .page-content takes the rest.
     Scroll happens only inside .page-content, so the scrollbar track
     never overlaps the topbar. */
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* The topbar must never shrink or scroll away */
.topbar { flex-shrink: 0; }

/* All page content below the topbar lives here.
   This is the only element that scrolls, so the scrollbar
   appears only in this zone — below the topbar. */
.page-content {
  flex: 1;
  overflow-y: scroll;
  scrollbar-gutter: stable;   /* reserves space even when bar is hidden */
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover         { text-decoration: none; color: var(--accent-dark); }
a:visited       { color: var(--link-visited); }

/* ---- Top bar ---- */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid #3366cc47;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  font-family: var(--font-sans);
  font-size: 0.85rem;
}
.topbar .site-name {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
  letter-spacing: -0.3px;
}
.topbar .site-name:hover { text-decoration: none; color: var(--accent); }

/* Small topbar logo — sits left of site name */
.topbar-logo {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}
.main-nav a           { color: var(--muted); margin-left: 1.25rem; font-size: 0.85rem; font-family: var(--font-display); transition: color var(--transition); }
.main-nav a:hover     { color: var(--accent); text-decoration: none; }
.main-nav a:visited   { color: var(--muted); }
.main-nav a.active    { color: var(--text); font-weight: 600; }
.main-nav a.active:visited { color: var(--text); }

/* ⚜ Fleur-de-lis — centered in topbar, invisible at rest */
@keyframes fleur-breathe {
  0%, 100% { color: #c8962a; opacity: 0.25; }
  50%       { color: #f0c050; opacity: 0.9;  }
}

.topbar { position: relative; }

.nav-fleur,
.nav-fleur:visited,
.nav-fleur:active {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: transparent;
  font-size: 0.9rem;
  line-height: 44px;   /* match topbar height so it sits centred vertically */
  user-select: none;
  text-decoration: none;
  pointer-events: auto;
  transition: color 0.4s ease;
}
.nav-fleur:hover {
  animation: fleur-breathe 1.6s ease-in-out infinite;
  text-decoration: none;
}

/* ---- Page wrapper ---- */
.page-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 2rem 1.5rem;
  display: grid;
  grid-template-columns: 1fr var(--sidebar-w);
  grid-template-areas: "main sidebar";
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 820px) {
  .page-wrap {
    grid-template-columns: 1fr;
    grid-template-areas: "sidebar" "main";
  }
}

/* ---- Sidebar ---- */
.sidebar { grid-area: sidebar; }

.sidebar-card {
  border: none;                  /* no box — whitespace does the separation */
  background: transparent;
  padding: 0;
  margin-bottom: 2rem;
  font-family: var(--font-display);
  font-size: 0.88rem;
}

.profile-pic {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  margin-bottom: 0.75rem;
  border: 1px solid var(--border);
}

/* placeholder box when no profile pic is set */
.profile-pic-placeholder {
  width: 100%;
  aspect-ratio: 1;
  background: var(--border-light);
  border: 1px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.8rem;
  margin-bottom: 0.75rem;
}

.sidebar-card h3 {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 0.4rem;
  margin-bottom: 0.75rem;
  /* Align with .page-title which has margin-bottom:1.5rem + font-size:1.85rem + padding */
  padding-top: 0.5rem;
}

.about-text {
  color: var(--text);
  line-height: 1.55;
}

/* Category list in sidebar */
.cat-list     { list-style: none; }
.cat-list li  { border-bottom: 1px solid var(--border-light); }
.cat-list li:last-child { border-bottom: none; }
.cat-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.35rem 0;
  color: var(--accent);
  font-size: 0.88rem;
}
.cat-list a:visited { color: var(--link-visited); }
.cat-list .cat-count {
  font-size: 0.78rem;
  color: var(--muted);
  background: var(--border-light);
  border-radius: 9px;
  padding: 0 0.45rem;
}

/* ---- Main column ---- */
.main-col { grid-area: main; }

.page-title {
  font-family: var(--font-sans);
  font-size: 1.85rem;
  font-weight: normal;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.35rem;
  margin-bottom: 1.5rem;
  color: var(--text);
}

/* Category filter — plain text, no boxes */
.cat-filter {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 1.75rem;
  line-height: 2;
}
.cat-filter span { margin-right: 0.35rem; }
.cat-filter a { color: var(--accent); }
.cat-filter a:visited { color: var(--link-visited); }
.cat-filter a:hover { text-decoration: underline; }

/* Year grouping */
.year-group   { margin-bottom: 0.5rem; }
.year-label   {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 1.5rem 0 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.year-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-light);
}

/* Post list */
.post-list          { list-style: none; }
.post-list li       {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.97rem;
}
.post-list li:last-child { border-bottom: none; }
.post-list .p-title { flex: 1; }
.post-list .p-title a {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.95rem;
  transition: color var(--transition), transform var(--transition);
  display: inline-block;
}
.post-list .p-title a:hover   { color: var(--accent); transform: translateX(2px); text-decoration: none; }
.post-list .p-title a:visited { color: var(--muted); }

.post-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.2rem; }
.post-tag  {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
  background: none;
  padding: 0;
}
/* Prepend # symbol via CSS — IDE/hashtag feel */
.post-tag::before { content: '#'; opacity: 0.5; }
.post-tag:hover   { color: var(--accent); text-decoration: none; }
.post-tag:visited { color: var(--muted); }

.post-date {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
}

.empty-state {
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 0.92rem;
  padding: 1.5rem 0;
}

/* ---- Single post page ---- */
.post-page {
  max-width: 720px;           /* ~65–70ch — the optimal reading line length */
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

.post-page-title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.5px;
  color: var(--text);
  margin-bottom: 0.6rem;
}
.post-page-meta {
  font-family: var(--font-display);
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 2.5rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 1.25rem;
}

/* Back link — more tactile, slides left on hover */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 2rem;
  padding: 0.3rem 0;
  transition: color var(--transition), transform var(--transition);
}
.back-link:hover   { color: var(--accent); transform: translateX(-4px); text-decoration: none; }
.back-link:visited { color: var(--muted); }

/* ── Markdown body ───────────────────────────────────────── */
.post-body {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.8;              /* generous leading for dense technical writing */
  color: var(--text);
}

.post-body h1, .post-body h2, .post-body h3,
.post-body h4, .post-body h5, .post-body h6 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 2.25rem 0 0.65rem;
  line-height: 1.3;
  color: var(--text);
}
/* H2 gets a short 2rem underline instead of a full-width rule — intentional, not accidental */
.post-body h1 { font-size: 1.75rem; }
.post-body h2 {
  font-size: 1.35rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--accent);
  display: inline-block;        /* border only as wide as the text */
  margin-bottom: 0.9rem;
}
.post-body h3 { font-size: 1.1rem; }

.post-body p        { margin-bottom: 1.1rem; }
.post-body ul,
.post-body ol       { margin: 0 0 1.1rem 1.6rem; }
.post-body li       { margin-bottom: 0.35rem; }

/* Bold — distinctly darker than body text so it stands out in technical content */
.post-body strong, .post-body b {
  font-weight: 700;
  color: #0f0f0f;
}

/* Inline code — distinct monospace pill. Signals "this is a technical term." */
.post-body code {
  font-family: var(--font-mono);
  font-size: 0.84em;
  background: #f0f0ed;
  border: 1px solid #ddddd8;
  color: #c0392b;               /* muted red — IDE-style distinction */
  padding: 0.15em 0.4em;
  border-radius: 3px;
  white-space: nowrap;
}

/* Code blocks — darker surface, full-width, left-aligned */
.post-body pre {
  background: #f7f7f4;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);   /* accent stripe on left — IDE feel */
  padding: 1.1rem 1.25rem;
  overflow-x: auto;
  margin: 1.25rem 0 1.5rem;
  border-radius: 0;
}
.post-body pre code {
  background: none;
  border: none;
  padding: 0;
  color: var(--text);
  font-size: 0.87rem;
  line-height: 1.65;
  white-space: pre;
}

.post-body blockquote {
  border-left: 3px solid var(--accent);
  padding: 0.5rem 1.1rem;
  margin: 1.25rem 0;
  color: var(--muted);
  background: var(--surface);
  font-style: italic;
}

.post-body hr { border: none; border-top: 1px solid var(--border-light); margin: 2rem 0; }

.post-body table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
  font-family: var(--font-display);
}
.post-body th, .post-body td { border: 1px solid var(--border); padding: 0.45rem 0.7rem; text-align: left; }
.post-body th { background: var(--surface); font-weight: 600; }

/* ---- Category page ---- */
.cat-page-header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.35rem;
}
.cat-page-header h1 {
  font-family: var(--font-sans);
  font-size: 1.85rem;
  font-weight: normal;
}
.cat-page-header .cat-label {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--muted);
}

/* ============================================================
   Admin styles
   ============================================================ */
.admin-body { font-family: var(--font-sans); background: var(--surface); min-height: 100vh; }

.admin-topbar {
  background: #24292f;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  height: 44px;
  font-size: 0.88rem;
  flex-shrink: 0;   /* never scroll with content */
}
.admin-topbar .brand { font-weight: 700; color: #fff; }
.admin-topbar nav a  { color: #adbac7; margin-left: 1rem; }
.admin-topbar nav a:hover { color: #fff; text-decoration: none; }
.admin-topbar nav a:visited { color: #adbac7; }

.admin-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 800px) { .admin-wrap { grid-template-columns: 1fr; } }

.admin-card {
  background: var(--bg);
  border: 1px solid var(--border-light);
  padding: 1.5rem;
}
.admin-card h2 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-light);
  color: var(--text);
}

/* Form controls */
.form-group        { margin-bottom: 1rem; }
.form-group label  {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 0.3rem;
}
.form-group input[type="text"],
.form-group input[type="password"],
.form-group textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 0.97rem;
  padding: 0.45rem 0.65rem;
  border-radius: 2px;
  outline: none;
}
.form-group input:focus,
.form-group textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(51,102,204,0.15); }
.form-group textarea {
  min-height: 60vh;
  resize: vertical;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.55;
  background: #fafaf8;
  border-color: var(--border-light);
}

/* Tag checkboxes — CSS grid pill toggles */
.tag-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0.35rem 0;
}
.tag-checkbox-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: var(--font-mono);
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--muted);
  cursor: pointer;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--border-light);
  border-radius: 2px;
  background: var(--surface);
  text-align: center;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  user-select: none;
  white-space: nowrap;
}
/* Hide the raw checkbox square */
.tag-checkbox-label input[type="checkbox"] { display: none; }
/* Checked state: fill with accent color */
.tag-checkbox-label:has(input:checked) {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent-dark);
}
.tag-checkbox-label:hover { border-color: var(--accent); color: var(--accent); }
.tag-checkbox-label:has(input:checked):hover { background: var(--accent-dark); color: #fff; border-color: var(--accent-dark); }

/* Buttons */
.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.45rem 1.1rem;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  text-decoration: none;
}
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent-dark); }
.btn-primary:hover { background: var(--accent-dark); color: #fff; text-decoration: none; }
/* .btn-edit and .btn-danger are still used on the edit page Cancel/Save buttons */
.btn-danger { background: var(--bg); color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; text-decoration: none; }
.btn-edit   { background: var(--bg); color: var(--accent); border-color: var(--border); }
.btn-edit:hover { background: var(--accent); color: #fff; border-color: var(--accent); text-decoration: none; }
.btn-edit:visited { color: var(--accent); }

/* Alerts */
.alert         { padding: 0.6rem 1rem; border-radius: 2px; font-size: 0.88rem; margin-bottom: 1.25rem; border: 1px solid; }
.alert-error   { background: #fdf3f3; border-color: #e99; color: var(--danger); }
.alert-success { background: #f3fdf6; border-color: #9c9; color: var(--success); }

/* Admin post list — 2-row layout so titles never truncate */
.admin-post-list { list-style: none; }
.admin-post-list li {
  display: block;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border-light);
}
.admin-post-list li:last-child { border-bottom: none; }

/* Top row: title + icon actions */
.admin-post-list .p-top {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin-bottom: 0.15rem;
}
.admin-post-list .p-title {
  flex: 1;
  font-size: 0.88rem;
  font-family: var(--font-display);
  color: var(--text);
  line-height: 1.35;
  word-break: break-word;
}
.admin-post-list .p-title:hover { color: var(--accent); text-decoration: none; }
.admin-post-list .p-title:visited { color: var(--muted); }

/* Bottom row: tags + date */
.admin-post-list .p-bottom {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.admin-post-list .p-date {
  margin-left: auto;
  color: var(--border);
  font-size: 0.7rem;
  white-space: nowrap;
  font-family: var(--font-mono);
}

/* Icon action buttons */
.admin-post-list .p-actions {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  flex-shrink: 0;
}
.admin-post-list .p-actions form { display: contents; }

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.88rem;
  background: transparent;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  color: var(--border);
  text-decoration: none;
  transition: color var(--transition), background var(--transition);
  line-height: 1;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
}
.btn-icon-edit:hover  { color: var(--accent); background: rgba(51,102,204,0.08); }
.btn-icon-delete:hover { color: var(--danger); background: rgba(192,57,43,0.08); }
.btn-icon:visited { color: var(--border); }

/* ============================================================
   Login — Old French Baroque
   ============================================================ */

/* Deep burgundy-brown page background, like aged velvet drape */
.login-body {
  background: #1e0f08;
  min-height: 100vh;
  font-family: var(--font-body);
}

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Subtle aged texture via radial gradient */
  background:
    radial-gradient(ellipse at 30% 20%, rgba(180,120,60,0.07) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(120,60,20,0.09) 0%, transparent 55%);
}

.login-card {
  width: 380px;
  background: #faf3e4;           /* aged parchment */
  border: 1px solid #8b6228;
  /* Double-border effect via outline */
  outline: 3px solid #5a3d10;
  outline-offset: 5px;
  padding: 2.5rem 2.25rem 2rem;
  box-shadow:
    0 0 0 8px #1e0f08,           /* gap between inner and outer borders */
    0 20px 60px rgba(0,0,0,0.7);
  text-align: center;
}

/* Fleur-de-lis ornament */
.login-ornament {
  font-size: 2rem;
  color: #8b6228;
  line-height: 1;
  margin-bottom: 0.5rem;
  opacity: 0.9;
}

.login-title {
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: normal;
  color: #2a1505;
  letter-spacing: 0.04em;
  margin-bottom: 0.2rem;
}

.login-sub {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: #8b6228;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  font-style: italic;
}

/* Ornamental divider */
.login-rule {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  color: #b8892a;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
}
.login-rule::before,
.login-rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, #8b6228, transparent);
}
.login-rule span { flex-shrink: 0; }

/* Labels — left-aligned, small, sepia */
.login-card .form-group {
  text-align: left;
  margin-bottom: 1rem;
}
.login-card .form-group label {
  color: #6b4520;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-style: italic;
}

/* All inputs inside the login card */
.login-card .form-group input {
  width: 100%;
  background: #fdf9f0;
  border: 1px solid #c8a060;
  border-radius: 0;
  color: #2a1505;
  font-family: var(--font-body);
  font-size: 0.92rem;
  padding: 0.45rem 0.65rem;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.login-card .form-group input:focus {
  border-color: #8b6228;
  box-shadow: 0 0 0 2px rgba(139,98,40,0.2);
}

/* Submit button — deep burgundy with gold text */
.login-submit {
  width: 100%;
  background: #3d1a08;
  color: #f0d898;
  border: 1px solid #8b6228;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.65rem 1rem;
  border-radius: 0;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.login-submit:hover {
  background: #8b6228;
  color: #fdf9f0;
  border-color: #8b6228;
  text-decoration: none;
}

/* Locked state */
.login-locked {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: #8b6228;
  font-style: italic;
  line-height: 1.7;
  margin-top: 0.5rem;
}

/* Footer stamp */
.login-footer {
  margin-top: 1.5rem;
  font-size: 0.68rem;
  color: #a07840;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-style: italic;
  opacity: 0.7;
}

/* Alerts inside login card */
.login-card .alert {
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-style: italic;
  border-radius: 0;
}
.login-card .alert-error   { background: #fdf0e8; border-color: #a05030; color: #7a2010; }
.login-card .alert-success { background: #f0f8f0; border-color: #507040; color: #305020; }

/* ============================================================
   Static pages (about, projects, contact)
   ============================================================ */
.static-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}
/* Give the about/projects/contact body the same generous line-height as posts */
.static-page .post-body {
  font-size: 1.05rem;
  line-height: 1.8;
}

/* ---- About page ---- */
.about-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 600px) {
  .about-layout { grid-template-columns: 1fr; }
}
.about-profile { text-align: center; }
.about-photo {
  width: 100%;
  max-width: 200px;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  margin: 0 auto 0.75rem;
  border: 1px solid var(--border);
}
.about-photo-placeholder {
  width: 100%;
  max-width: 200px;
  aspect-ratio: 1;
  background: var(--border-light);
  border: 1px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
  margin: 0 auto 0.75rem;
}
.about-name {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.6rem;
}
.about-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.82rem;
}
.about-links a { color: var(--accent); }

/* ---- Hero (home page) ---- */
.home-hero {
  border-bottom: 1px solid var(--border-light);
  background: var(--surface);
  background-color: var(--parchment);
  padding: 4rem 1.5rem 3.5rem;
  text-align: center;
}
.home-hero-inner { max-width: 600px; margin: 0 auto; }

/* Hero emblem — sits above the title as a centred badge */
.hero-logo {
  width: 88px;
  height: 88px;
  object-fit: contain;
  display: block;
  margin: 0 auto 1.25rem;
  opacity: 0.92;
}

.hero-title {
  font-family: var(--font-display);  /* sharp sans for the big heading */
  font-size: 3.2rem;
  font-weight: 300;
  color: var(--text);
  margin-bottom: 0.75rem;
  letter-spacing: -1.5px;
}
.hero-sub {
  font-family: var(--font-body);     /* Georgia for the subtitle — warm, readable */
  font-size: 1.05rem;
  color: var(--muted);
  margin-bottom: 2.25rem;
  line-height: 1.65;
  font-style: italic;
}

.hero-sub-one {
  font-family: var(--font-body);     /* Georgia for the subtitle — warm, readable */
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 2.25rem;
  line-height: 1.65;
  font-style: italic;

}
.hero-links { display: flex; justify-content: center; gap: 0.85rem; flex-wrap: wrap; }

/* Both hero buttons are ghost-style: transparent bg, solid 2px border, fill on hover */
.hero-btn-primary,
.hero-btn-ghost {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.6rem 1.5rem;
  border: 2px solid currentColor;
  border-radius: 0;            /* sharp corners — no rounding */
  background: transparent;
  transition: background var(--transition), color var(--transition);
}
.hero-btn-primary                  { color: var(--accent); }
.hero-btn-primary:hover,
.hero-btn-primary:visited:hover    { background: var(--accent); color: #fff; text-decoration: none; }
.hero-btn-primary:visited          { color: var(--accent); }

.hero-btn-ghost           { color: var(--muted); }
.hero-btn-ghost:hover     { background: var(--text); color: #fff; border-color: var(--text); text-decoration: none; }
.hero-btn-ghost:visited   { color: var(--muted); }

/* ---- Home page ---- */
.home-content       { max-width: 640px; margin: 0 auto; padding: 3rem 1.5rem; }
.home-section-title {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.home-section-title::after { content: ''; flex: 1; height: 1px; background: var(--border-light); }

.home-post-list    { list-style: none; margin-bottom: 1.25rem; }
.home-post-list li {
  display: flex;
  align-items: baseline;
  gap: 0;
  padding: 0.55rem 0;
  /* border-bottom: 1px solid var(--border-light); */
}
.home-post-list li:last-child { border-bottom: none; }

/* Title: slides right on hover */
.home-post-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--transition), transform var(--transition);
  display: inline-block;
}
.home-post-title:hover  { color: var(--accent); transform: translateX(3px); text-decoration: none; }
.home-post-title:visited { color: var(--muted); }

/* Leader dots: flex-grow fills space between title and date */
.home-post-dots {
  flex: 1;
  min-width: 1rem;
  margin: 0 0.5rem;
  border-bottom: 1px dotted var(--border);
  align-self: center;
  height: 0;
}

.home-post-list .post-date {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.home-more-link {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.02em;
  transition: color var(--transition);
}
.home-more-link:hover { color: var(--accent-dark); text-decoration: none; }