/* ============================================================
   BASE RESET
   Strip browser defaults. Border-box means padding and border
   are included in element width — no surprise overflows.
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ============================================================
   DESIGN TOKENS
   Change colors, fonts, or page width here only.
   Everything else references these variables.
   ============================================================ */
:root {
  --ink: #1a1a1a;           /* primary text */
  --ink-muted: #888;        /* dates, labels, footer */
  --ink-faint: #ddd;        /* divider lines */
  --bg: #ffffff;            /* white background */
  --accent: #2b96c0;        /* blue accent for nav links */
  --serif: 'EB Garamond', Georgia, serif;
  --mono: 'DM Mono', monospace;
  --max: 1000px;            /* max page width */
}

/* ============================================================
   ROOT + BODY
   Serif body, centered column, white background.
   ============================================================ */
html {
  font-size: 21px;
  background: var(--bg);
  color: var(--ink);
}

body {
  font-family: var(--serif);
  line-height: 1.95;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 4rem;
}

/* ============================================================
   NAVIGATION
   Name: large, serif, normal weight — left side.
   Links: accent color — right side.
   ============================================================ */
nav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 3rem 0 3.25rem;
}

.nav-name {
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 400;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.nav-links {
  display: flex;
  gap: 2rem;
}

.nav-links a {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 400;
  color: var(--accent);
  text-decoration: none;
  transition: opacity 0.15s;
}

.nav-links a:hover {
  opacity: 0.7;
}

.nav-links a.active {
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
}

/* ============================================================
   DIVIDER
   Thin hairline rule between sections
   ============================================================ */
hr {
  border: none;
  border-top: 1px solid var(--ink-faint);
  margin: 3.25rem 0;
}

/* ============================================================
   SECTION LABELS
   Small mono uppercase label above each section
   ============================================================ */
.label {
  display: block;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 1.1rem;
}

/* ============================================================
   PAGE TITLE
   Used on inner pages (About, Writing, Gallery)
   ============================================================ */
.page-title {
  font-family: var(--serif);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 2.5rem;
}

/* ============================================================
   PROSE
   Flowing text on inner pages — paragraphs with breathing room
   ============================================================ */
.prose p {
  font-size: 1rem;
  margin-bottom: 1.4rem;
}

.prose p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   HOMEPAGE INTRO
   Photo floats right, text wraps around it naturally.
   ============================================================ */
.intro {
  margin-bottom: 0.5rem;
}

.portrait {
  float: right;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  margin: 0 0 2rem 3rem;
}

.intro p {
  font-size: 1rem;
  margin-bottom: 1.4rem;
}

/* Clear float so hr sits below */
.intro::after {
  content: '';
  display: table;
  clear: both;
}

/* ============================================================
   POSTS LIST
   Each row: date (fixed width, left) + title (right).
   ============================================================ */
.posts {
  list-style: none;
}

.posts li {
  display: flex;
  gap: 1.75rem;
  align-items: baseline;
  padding: 0.75rem 0;
  border-bottom: 1px solid #efefef;
}

.posts li:last-child {
  border-bottom: none;
}

.date {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 300;
  color: var(--ink-muted);
  min-width: 72px;
  flex-shrink: 0;
  padding-top: 0.18rem;
}

.posts a {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink);
  text-decoration: none;
}

.posts a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* "All writing →" link */
.all-posts {
  display: inline-block;
  margin-top: 1.1rem;
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 300;
  letter-spacing: 0.03em;
  color: var(--ink-muted);
  text-decoration: none;
}

.all-posts:hover {
  color: var(--ink);
}

/* ============================================================
   ELSEWHERE / CONTACT
   ============================================================ */
.elsewhere p {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.02em;
}

.elsewhere a {
  color: var(--ink);
  text-decoration: none;
}

.elsewhere a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ============================================================
   GALLERY GRID
   Album cards in a responsive grid.
   Each card is a placeholder for a photo album.
   ============================================================ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 2rem;
  margin-top: 0.5rem;
}

.album-card {
  text-decoration: none;
  color: var(--ink);
  display: block;
}

/* Album thumbnail placeholder — replace with real <img> when ready */
.album-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #f0f0f0;
  border: 1px solid var(--ink-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.album-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Placeholder text shown when no image is set */
.album-thumb-placeholder {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--ink-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.album-name {
  font-family: var(--serif);
  font-size: 1rem;
  margin-bottom: 0.2rem;
}

.album-meta {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 300;
  color: var(--ink-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.album-card:hover .album-name {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  padding: 3rem 0 2.5rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}

/* ============================================================
   SECTION HEADING
   Used on about.html for Education, Career etc — serif h2
   ============================================================ */
.section-heading {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 1.5rem;
}

/* ============================================================
   CAREER BLOCK
   Used on about.html — role, period, company, description
   ============================================================ */
.career-item {
  margin-bottom: 2rem;
}

.career-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.career-role {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink);
}

.career-period {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 300;
  color: var(--ink-muted);
  white-space: nowrap;
}

.career-company {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 300;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  margin-top: 0.15rem;
  margin-bottom: 0.5rem;
}

.career-desc {
  font-family: var(--serif);
  font-size: 0.9rem;
  color: var(--ink);
  line-height: 1.8;
}

/* ============================================================
   RESUME DOWNLOAD LINK
   ============================================================ */
.resume-link {
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 2rem;
}

.resume-link:hover {
  color: var(--ink);
}

/* ============================================================
   EDUCATION BLOCK
   Used on about.html — school name + degree/year on two lines
   ============================================================ */
.edu-item {
  margin-bottom: 1.5rem;
}

.edu-school {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink);
}

.edu-detail {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 300;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  margin-top: 0.2rem;
}

/* ============================================================
   TEXT SELECTION
   Black highlight when user selects text.
   ============================================================ */
::selection {
  background: var(--ink);
  color: #ffffff;
}

/* ============================================================
   TABLET — max-width: 768px
   Reduce spacing, shrink nav name slightly
   ============================================================ */
@media (max-width: 768px) {
  html {
    font-size: 19px;
  }

  body {
    padding: 0 2.5rem;
  }

  nav {
    padding: 2.25rem 0 2.5rem;
  }

  .nav-name {
    font-size: 2rem;
  }

  .portrait {
    width: 180px;
    height: 180px;
    margin: 0 0 1.5rem 2rem;
  }

  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
  }

  hr {
    margin: 2.5rem 0;
  }
}

/* ============================================================
   MOBILE — max-width: 480px
   Stack nav, float portrait above text, single column gallery
   ============================================================ */
@media (max-width: 480px) {
  html {
    font-size: 17px;
  }

  body {
    padding: 0 1.25rem;
  }

  /* Stack nav: name on top, links below */
  nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.75rem 0 2rem;
  }

  .nav-name {
    font-size: 1.6rem;
  }

  /* Tighten nav link gap on small screens */
  .nav-links {
    gap: 1rem;
    flex-wrap: wrap;  /* wrap if needed on very small screens */
  }

  .nav-links a {
    font-size: 0.9rem;
  }

  /* Portrait unstacks — sits above text, centered */
  .portrait {
    float: none;
    display: block;
    margin: 0 auto 1.5rem;
    width: 110px;
    height: 110px;
  }

  /* Reduce page title on mobile */
  .page-title {
    font-size: 1.4rem;
    margin-bottom: 1.75rem;
  }

  .section-heading {
    font-size: 1.2rem;
  }

  /* Tighten dividers */
  hr {
    margin: 2rem 0;
  }

  /* Career header: stack role and date on mobile */
  .career-header {
    flex-direction: column;
    gap: 0.2rem;
  }

  /* Gallery: two columns on mobile, one on very small */
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
  }

  /* Posts: hide date on very small screens to give title room */
  .date {
    display: none;
  }

  .posts li {
    gap: 0;
  }
}

/* ============================================================
   VERY SMALL — max-width: 360px
   Single column gallery, hide dates
   ============================================================ */
@media (max-width: 360px) {
  body {
    padding: 0 1rem;
  }

  .nav-links {
    gap: 0.75rem;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
  }
}