:root {
  --ink: #14181b;
  --ink-soft: #565f66;
  --bg: #f5f4f0;
  --card: #ffffff;
  --line: #e2e0d7;
  --accent: #2f5fed;
  --accent-ink: #ffffff;
  --accent-soft: #e8edfe;
  --mono-accent: #c8721f;
  --shadow: 0 1px 2px rgba(20,24,27,0.05), 0 8px 24px rgba(20,24,27,0.06);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #edf0f2;
    --ink-soft: #9aa4ab;
    --bg: #101214;
    --card: #17191c;
    --line: #272b2f;
    --accent: #6f92ff;
    --accent-ink: #0b1220;
    --accent-soft: #1c2436;
    --mono-accent: #e09a4e;
    --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 10px 28px rgba(0,0,0,0.4);
  }
}
:root[data-theme="dark"] {
  --ink: #edf0f2;
  --ink-soft: #9aa4ab;
  --bg: #101214;
  --card: #17191c;
  --line: #272b2f;
  --accent: #6f92ff;
  --accent-ink: #0b1220;
  --accent-soft: #1c2436;
  --mono-accent: #e09a4e;
  --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 10px 28px rgba(0,0,0,0.4);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}
h1, h2, h3 { font-family: "Newsreader", Georgia, serif; margin: 0; text-wrap: balance; }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; }
a { color: inherit; }
img { max-width: 100%; }
code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.9em;
  background: var(--accent-soft);
  color: var(--accent);
  padding: 0.1em 0.4em;
  border-radius: 4px;
}

.wrap {
  max-width: 980px;
  margin: 0 auto;
  padding-inline: 24px;
}

/* Nav */
header.site-nav {
  border-bottom: 1px solid var(--line);
  padding-block: 18px;
}
header.site-nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  font-family: "Newsreader", serif;
  font-size: 1.15rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.brand .dot { color: var(--accent); }
.back-link {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.82rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.back-link:hover { color: var(--accent); }

/* Hero */
.hero {
  padding-block: 64px 48px;
  border-bottom: 1px solid var(--line);
}
.hero .eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.8rem;
  color: var(--mono-accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
  display: block;
}
.hero h1 {
  font-size: clamp(2rem, 5vw, 3.1rem);
  font-weight: 600;
  max-width: 16ch;
}
.hero p.lede {
  margin-top: 16px;
  color: var(--ink-soft);
  font-size: 1.08rem;
  max-width: 56ch;
}

/* Section */
.section { padding-block: 48px; }
.section h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 6px;
}
.section .section-hint {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin-bottom: 28px;
  max-width: 56ch;
}

/* Screenshot */
.screenshot-frame {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.screenshot-frame img { display: block; width: 100%; }
.screenshot-caption {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin: 10px 0 0;
}

/* Screenshot gallery (phone screenshots, portrait) */
.screenshot-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.screenshot-gallery img {
  max-height: 560px;
  width: auto;
  max-width: 100%;
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

/* Project grid */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 340px));
  gap: 20px;
}
.project-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.project-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}
.project-card .kicker {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.project-card h3 { font-size: 1.25rem; font-weight: 600; }
.project-card p {
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin: 0;
}
.project-card .updated {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.72rem;
  color: var(--ink-soft);
  opacity: 0.75;
}
.project-card .go {
  margin-top: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.82rem;
  color: var(--accent);
}

/* Buttons */
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.btn {
  display: inline-block;
  font-family: "IBM Plex Sans", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 11px 22px;
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid var(--accent);
  /* .demo-trigger buttons use this class too (not just <a> tags) — reset native <button>
     chrome so they're pixel-identical to the link-styled ones. */
  appearance: none;
  cursor: pointer;
}
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.ghost { background: transparent; color: var(--accent); }
.btn.ghost:hover { background: var(--accent-soft); }

/* Steps */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.steps li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
}
.steps .num {
  font-family: "JetBrains Mono", monospace;
  color: var(--accent);
  font-weight: 600;
}
.steps .step-body h4 { margin: 0 0 4px; font-family: "IBM Plex Sans", sans-serif; font-size: 1rem; font-weight: 600; }
.steps .step-body p { margin: 0; color: var(--ink-soft); font-size: 0.92rem; }

/* Forms */
.field { margin-bottom: 14px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; }
}
.field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 5px;
}
.field input[type="text"],
.field input[type="email"],
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 11px;
}
.field textarea { resize: vertical; min-height: 90px; line-height: 1.45; }
.field input:focus, .field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.form-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--shadow);
  max-width: 620px;
}
.form-disclosure {
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink-soft);
  font-size: 0.88rem;
}
.form-disclosure a {
  color: var(--accent);
  text-underline-offset: 2px;
}
button.btn {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font: inherit;
}
.form-note {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.8rem;
  color: var(--accent);
  margin: 12px 0 0;
  min-height: 1.2em;
}

/* Footer */
footer.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 26px;
  color: var(--ink-soft);
  font-size: 0.85rem;
}
footer.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  justify-content: space-between;
}
.footer-contact { display: flex; gap: 4px 8px; flex-wrap: wrap; }
.footer-contact a {
  color: var(--ink-soft);
  text-decoration: none;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.8rem;
}
.footer-contact a:hover { color: var(--accent); }

@media (max-width: 560px) {
  .wrap { padding-inline: 16px; }
  .hero { padding-block: 44px 34px; }
}

/* "View demo" blank/mock choice modal — used on the resume-templates page, one shared modal
   for all style cards (see the inline script at the bottom of that page). */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}
/* The `hidden` attribute's default `display:none` (UA stylesheet) loses to the `display:flex`
   above (author styles always win over UA styles, regardless of specificity or source order) —
   without this override the modal stayed visible at all times, rendered in normal page flow at
   the very end of the HTML, which is why it showed up at the bottom of the page instead of as a
   centered overlay. This rule's higher specificity (class + attribute vs. class alone) restores
   the correct hide behavior. */
.modal-overlay[hidden] { display: none; }
.modal-box {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px;
  max-width: 380px;
  width: 100%;
  box-shadow: var(--shadow);
}
.modal-box h3 { margin: 0 0 8px; font-size: 1.15rem; }
.modal-box p { margin: 0 0 18px; color: var(--ink-soft); font-size: 0.92rem; }
.modal-box .btn-row { margin-top: 0; }
.modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 4px;
}
.modal-close:hover { color: var(--ink); }