/* ============================================
   Design Tokens (ported from index.css)
   ============================================ */
:root {
  --bg-primary: #f5f5f0;
  --bg-secondary: #eaeae5;
  --bg-dark: #1a1a1a;
  --bg-glass: rgba(245, 245, 240, 0.85);
  --text-primary: #1a1a1a;
  --text-secondary: #555555;
  --text-muted: #888888;
  --text-inverse: #f5f5f0;
  --accent: #c0392b;
  --accent-light: #e74c3c;
  /* accent for text on dark surfaces — #c0392b is only ~3:1 on #1a1a1a
     and falls below 3:1 inside the hero's red mesh glow */
  --accent-on-dark: #f0755e;
  --border: rgba(0, 0, 0, 0.08);
  --border-dark: rgba(255, 255, 255, 0.1);

  --font-serif: "Noto Serif TC", "Times New Roman", serif;
  --font-sans: "Noto Sans TC", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Noto Sans TC", monospace;

  --space-lg: 2rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;
  --container-max: 1200px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;
}

/* ============================================
   Reset & Base
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: auto; }

body {
  font-family: var(--font-sans);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; }

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

/* Page loader */
#page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg-primary);
  opacity: 1;
  transition: opacity 0.4s ease;
}
#page-loader.hidden { opacity: 0; pointer-events: none; }

/* Shared section title / eyebrow */
.section-title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.25;
  color: var(--text-primary);
  font-weight: 400;
}
.eyebrow {
  display: block;
  margin-bottom: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent);
}
.eyebrow-tight { letter-spacing: 0.15em; }

/* ============================================
   Header
   ============================================ */
#site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
#site-header.scrolled {
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.04);
}
/* Dark scrim behind the transparent header. It matches the hero background so it
   is invisible at rest, but masks hero content that scrolls up underneath so the
   text never visually overlaps the logo / nav. It fades out before reaching the
   hero tagline, and disappears once the header switches to its glass state. */
#site-header::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100px;
  background: linear-gradient(
    to bottom,
    rgba(26, 26, 26, 1) 0,
    rgba(26, 26, 26, 0.98) 60px,
    rgba(26, 26, 26, 0) 100px
  );
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
#site-header.scrolled::before { opacity: 0; }
.header-inner {
  /* container width + both gutters, so the logo / nav line up exactly with the
     content edge of every section (hero, articles, about, footer) */
  max-width: calc(var(--container-max) + var(--space-lg) * 2);
  margin: 0 auto;
  padding: 0 var(--space-lg);
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  --logo-mark-size: 1.65rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.13rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  font-family: var(--font-serif);
  color: var(--text-inverse);
  transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.logo::before {
  content: "";
  width: var(--logo-mark-size);
  height: var(--logo-mark-size);
  flex: 0 0 auto;
  background: center / contain no-repeat url("../images/circle-mark-light.svg");
}
#site-header.scrolled .logo { color: var(--text-primary); }
#site-header.scrolled .logo::before { background-image: url("../images/circle-mark-dark.svg"); }

.desktop-nav { display: none; align-items: center; gap: 1.5rem; }
.nav-link {
  position: relative;
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: var(--font-sans);
  color: var(--text-inverse);
  transition: color 0.25s;
}
#site-header.scrolled .nav-link { color: var(--text-primary); }
.nav-underline {
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 100%;
  background-color: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}
.nav-link:hover .nav-underline { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 1rem; }
.icon-btn {
  padding: 0.25rem;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-inverse);
  transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
}
#site-header.scrolled .icon-btn { color: var(--text-primary); }

/* Burger icon: the two lines slide to the middle and rotate into an X */
.menu-toggle .icon-burger path {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-toggle.open .icon-burger path:first-child { transform: translateY(4px) rotate(45deg); }
.menu-toggle.open .icon-burger path:last-child { transform: translateY(-4px) rotate(-45deg); }

.mobile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  padding: 1rem var(--space-lg);
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-12px);
  transition:
    opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 0.35s;
}
.mobile-menu.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}
.mobile-link {
  display: block;
  padding: 0.625rem 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-menu.open .mobile-link { opacity: 1; transform: translateY(0); }
.mobile-menu.open .mobile-link:nth-child(1) { transition-delay: 0.05s; }
.mobile-menu.open .mobile-link:nth-child(2) { transition-delay: 0.1s; }
.mobile-menu.open .mobile-link:nth-child(3) { transition-delay: 0.15s; }
.mobile-menu.open .mobile-link:nth-child(4) { transition-delay: 0.2s; }
.mobile-menu.open .mobile-link:nth-child(5) { transition-delay: 0.25s; }
.mobile-menu.open .mobile-link:nth-child(6) { transition-delay: 0.3s; }
.mobile-menu.open .mobile-link:nth-child(7) { transition-delay: 0.35s; }

@media (min-width: 1024px) {
  .desktop-nav { display: flex; }
  .menu-toggle { display: none; }
  .mobile-menu { display: none; }
}

/* ============================================
   Hero
   ============================================ */
.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  min-height: 100vh;
  background: #1a1a1a;
}
.hero-mesh {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 40%, rgba(192, 57, 43, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 60%, rgba(192, 57, 43, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse 50% 50% at 50% 20%, rgba(231, 76, 60, 0.1) 0%, transparent 50%);
  animation: meshShift 20s ease-in-out infinite alternate;
}
.hero-grid {
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 60px 60px;
}
.hero-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  /* container width + both gutters, so the padded inner edge lines up exactly with
     the sections / footer container (which sit at the container edge on wide screens) */
  max-width: calc(var(--container-max) + var(--space-lg) * 2);
  margin: 0 auto;
  /* top padding clears the fixed 4rem header; bottom padding keeps the CTA off the
     next section when the content is tall enough to fill the viewport */
  padding: 6rem var(--space-lg) var(--space-xl);
}
.hero-inner { max-width: 48rem; }
.hero-tagline {
  display: inline-block;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent-on-dark);
}
.hero-anim:nth-child(1) { margin-bottom: 1.5rem; }
.hero-heading {
  margin-bottom: 2rem;
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: 1.1;
  font-weight: 400;
  color: var(--text-inverse);
  text-wrap: balance;
}
.hero-heading .accent { color: var(--accent-on-dark); }
.hero-desc {
  max-width: 28rem;
  margin-bottom: 2.5rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-inverse);
  opacity: 0.6;
}
.hero-cta { display: flex; align-items: center; gap: 1rem; }

.btn-primary {
  display: inline-block;
  padding: 0.75rem 2rem;
  border-radius: var(--radius-full);
  font-weight: 500;
  font-size: 0.875rem;
  background: var(--accent);
  color: #fff;
  transition: all 0.3s;
}
.btn-primary:hover { background: var(--accent-light); transform: translateY(-2px); }

.btn-outline {
  display: inline-block;
  padding: 0.75rem 2rem;
  border-radius: var(--radius-full);
  font-weight: 500;
  font-size: 0.875rem;
  border: 1px solid rgba(245, 245, 240, 0.25);
  color: var(--text-inverse);
  background: transparent;
  transition: all 0.3s;
}
.btn-outline:hover { border-color: rgba(245, 245, 240, 0.5); }

.hero-vline {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 80px;
  background: linear-gradient(to bottom, transparent, rgba(192, 57, 43, 0.5));
}

/* Hero content keeps a consistent container gutter at every breakpoint so it
   stays aligned with the header, sections and footer. */

@keyframes meshShift {
  0%   { transform: scale(1) translate(0, 0); }
  33%  { transform: scale(1.05) translate(-2%, 1%); }
  66%  { transform: scale(1.03) translate(1%, -1%); }
  100% { transform: scale(1.08) translate(-1%, 2%); }
}

/* Scroll indicator */
.scroll-indicator {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  margin-top: -2.5rem;
}
.scroll-indicator a { color: var(--text-muted); display: flex; }

/* ============================================
   Featured Gallery
   ============================================ */
.featured {
  background: var(--bg-primary);
  padding: var(--space-2xl) var(--space-lg);
}
.featured-intro { text-align: center; margin-bottom: 3rem; }
.featured-wrap { margin: 0 auto; max-width: var(--container-max); }
.gallery-scroll {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  /* no side padding: the first card starts flush at the container edge,
     aligned with the content of every other section */
  padding: 0 0 1rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
/* Card width always divides the row into whole cards (1 → 4 per view),
   so a partially sliced card never shows; snap keeps scroll positions flush */
.gallery-card {
  display: block;
  flex-shrink: 0;
  width: 100%;
  scroll-snap-align: start;
  cursor: pointer;
}
@media (min-width: 600px) { .gallery-card { width: calc((100% - 1.25rem) / 2); } }
@media (min-width: 900px) { .gallery-card { width: calc((100% - 2 * 1.25rem) / 3); } }
@media (min-width: 1200px) { .gallery-card { width: calc((100% - 3 * 1.25rem) / 4); } }
.gallery-card-img {
  overflow: hidden;
  margin-bottom: 0.75rem;
  border-radius: var(--radius-md);
  aspect-ratio: 3 / 4;
}
.gallery-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.gallery-card:hover .gallery-card-img img { transform: scale(1.05); }
.gallery-card-title {
  margin-bottom: 0.25rem;
  font-weight: 500;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--text-primary);
  transition: color 0.25s;
}
.gallery-card:hover .gallery-card-title { color: var(--accent); }
.gallery-meta { display: flex; align-items: center; gap: 0.5rem; }
.gallery-cat { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--accent); }
.gallery-dot { color: var(--text-muted); font-size: 0.6875rem; }
.gallery-date { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--text-muted); }

/* ============================================
   Cinematic Text
   ============================================ */
.cinematic {
  background: var(--bg-dark);
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl) var(--space-lg);
}
.cinematic-text {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 4vw, 3rem);
  color: var(--text-inverse);
  text-align: center;
  line-height: 1.5;
  font-weight: 400;
}
.cinematic-text span { display: block; }

/* ============================================
   Article Grid
   ============================================ */
.articles {
  background: var(--bg-primary);
  padding: var(--space-3xl) var(--space-lg);
}
.articles-inner { margin: 0 auto; max-width: var(--container-max); }
.articles-header {
  display: flex;
  flex-direction: column;
  margin-bottom: 3rem;
  gap: 1rem;
}
.category-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cat-btn {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0.4rem 1rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.25s;
}
.cat-btn:hover:not(.active) { border-color: var(--accent); color: var(--accent); }
.cat-btn.active { border: 1px solid transparent; background: var(--accent); color: #fff; }

.article-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.article-card { display: block; cursor: pointer; transition: all 0.35s cubic-bezier(0.33, 1, 0.68, 1); }
.article-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08); }
.article-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
}
.article-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
}
.article-card:hover .article-img img { transform: scale(1.05); }
.article-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  background: var(--bg-primary);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  color: var(--text-primary);
}
.article-body { padding-top: 1rem; }
.article-title {
  margin-bottom: 0.25rem;
  font-family: var(--font-sans);
  font-size: 1.125rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-primary);
  transition: color 0.25s;
}
.article-card:hover .article-title { color: var(--accent); }
.article-date {
  margin-bottom: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
}
.article-excerpt {
  margin-top: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.view-more-wrap { text-align: center; margin-top: 3rem; }
.btn-viewmore {
  border: 1.5px solid var(--text-primary);
  background: transparent;
  color: var(--text-primary);
  border-radius: var(--radius-full);
  padding: 0.75rem 2.5rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
}
.btn-viewmore:hover { background: var(--text-primary); color: var(--bg-primary); }

@media (min-width: 768px) {
  .articles-header { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ============================================
   About imagery (used on the about-circle page)
   ============================================ */
.about-img-wrap {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}
.about-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.about-caption {
  margin-top: 1.5rem;
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--text-primary);
}

/* ============================================
   Footer
   ============================================ */
.footer {
  background: var(--bg-dark);
  border-top: 1px solid var(--border-dark);
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
}
.footer-inner { margin: 0 auto; max-width: var(--container-max); }

/* Top: brand + link columns spread evenly across the full width */
.footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
.footer-brand { max-width: 24rem; }
.footer-brand .logo {
  display: inline-flex;
  --logo-mark-size: 1.9rem;
  color: var(--text-inverse);
  font-size: 1.35rem;
}
.footer-brand .logo::before { background-image: url("../images/circle-mark-light.svg"); }
.footer-desc {
  margin-top: 1rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--text-inverse);
  opacity: 0.55;
}
.footer-copy {
  margin-top: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-inverse);
  opacity: 0.35;
}

/* Link columns */
.footer-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem 1.5rem;
}
.footer-col h4 {
  margin-bottom: 1rem;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-inverse);
  opacity: 0.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.footer-col ul { display: flex; flex-direction: column; gap: 0.7rem; }
.footer-col a {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--text-inverse);
  opacity: 0.65;
  transition: opacity 0.2s, color 0.2s;
}
.footer-col a:hover { opacity: 1; color: var(--accent-light); }

.footer-bottom {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-dark);
}
.footer-tagline {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-inverse);
  opacity: 0.3;
}
.footer-totop {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-inverse);
  opacity: 0.5;
  transition: opacity 0.2s;
}
.footer-totop:hover { opacity: 1; }

@media (min-width: 640px) {
  .footer-bottom { flex-direction: row; }
}
@media (min-width: 900px) {
  .footer-top {
    grid-template-columns: 1.3fr 2fr;
    gap: 4rem;
    align-items: start;
  }
}

/* Footer legal links (added to .footer-bottom on every page) */
.footer-legal { display: flex; align-items: center; gap: 0.75rem; }
.footer-legal a {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--text-inverse);
  opacity: 0.5;
  transition: opacity 0.2s, color 0.2s;
}
.footer-legal a:hover { opacity: 1; color: var(--accent-light); }
.footer-legal .footer-dot { color: var(--text-inverse); opacity: 0.25; }

/* ============================================
   Sub-pages (About / Contact / Terms / Privacy)
   Inner pages hard-code `class="scrolled"` on the header so it stays
   solid (glass + dark text) over the light page from the very top.
   ============================================ */
.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--bg-dark);
  /* top padding clears the fixed 4rem header with room to spare */
  padding: calc(4rem + var(--space-xl)) var(--space-lg) var(--space-xl);
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 80% at 78% 25%, rgba(192, 57, 43, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 55% 60% at 12% 85%, rgba(231, 76, 60, 0.10) 0%, transparent 55%);
  pointer-events: none;
}
.page-hero-inner {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  max-width: var(--container-max);
}
.page-hero .eyebrow { margin-bottom: 1rem; }
.page-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.15;
  font-weight: 400;
  color: var(--text-inverse);
}
.page-subtitle {
  max-width: 38rem;
  margin-top: 1.25rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-inverse);
  opacity: 0.6;
}

.page-section {
  background: var(--bg-primary);
  padding: var(--space-2xl) var(--space-lg);
}
.page-wrap { margin: 0 auto; max-width: var(--container-max); }
.page-wrap-wide { margin: 0 auto; max-width: var(--container-max); }

/* Long-form prose (About / Terms / Privacy) */
.page-meta {
  margin-bottom: 2.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.prose h2 {
  margin-top: 2.75rem;
  margin-bottom: 0.75rem;
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-primary);
}
.prose > h2:first-child { margin-top: 0; }
.prose p {
  margin-bottom: 1.25rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.9;
  color: var(--text-secondary);
}
.prose ul { margin: 0 0 1.25rem; padding-left: 1.25rem; list-style: disc; }
.prose li {
  margin-bottom: 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--text-secondary);
}
.prose a { color: var(--accent); border-bottom: 1px solid transparent; transition: border-color 0.25s; }
.prose a:hover { border-color: var(--accent); }
.prose strong { color: var(--text-primary); font-weight: 500; }

/* Article detail pages — hero and body inherit the site container width from
   .page-hero-inner / .page-wrap, so the logo, hero title, meta and content
   left edges all line up with the header on every page */
.article-hero .page-title {
  font-size: clamp(2rem, 4.6vw, 3.2rem);
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  margin-bottom: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
}
.article-meta span + span::before {
  content: "·";
  margin-right: 0.85rem;
  color: var(--text-muted);
}
.article-figure {
  margin: 0 0 2.5rem;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: #fff;
  border: 1px solid var(--border);
}
.article-figure img {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
}
.article-figure figcaption {
  padding: 0.75rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
}
.article-content img {
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 1rem auto;
  border-radius: var(--radius-md);
}
.article-content h3 {
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text-primary);
}
.article-content blockquote {
  margin: 1.5rem 0;
  padding-left: 1rem;
  border-left: 3px solid var(--accent);
}
.article-back {
  display: inline-flex;
  margin-top: 2.5rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent);
}

/* About — values grid + figure */
.values-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  margin-top: 2.5rem;
}
.value-card {
  padding: 1.75rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform 0.3s, box-shadow 0.3s;
}
.value-card:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.06); }
.value-num { font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent); }
.value-card h3 {
  margin: 0.75rem 0 0.5rem;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text-primary);
}
.value-card p { font-family: var(--font-sans); font-size: 0.9rem; line-height: 1.75; color: var(--text-secondary); }
.about-figure { margin-top: 3rem; }
.about-figure .about-caption { text-align: center; }
@media (min-width: 768px) { .values-grid { grid-template-columns: repeat(3, 1fr); } }

/* Contact — email only */
.contact-email-block {
  margin: 2.5rem 0 3rem;
  padding: 2rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.contact-email-block .label {
  display: block;
  margin-bottom: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.contact-email-link {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 4vw, 1.9rem);
  color: var(--text-primary);
  word-break: break-all;
  transition: color 0.25s;
}
.contact-email-link:hover { color: var(--accent); }
.contact-email-note {
  margin-top: 0.9rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ============================================
   Lite animations
   ============================================ */

/* Sub-page hero entrance: staggered fade-up (mirrors home hero) */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.subpage .page-hero-inner > * { opacity: 0; animation: riseIn 0.7s ease forwards; }
.subpage .page-hero-inner > *:nth-child(1) { animation-delay: 0.2s; }
.subpage .page-hero-inner > *:nth-child(2) { animation-delay: 0.32s; }
.subpage .page-hero-inner > *:nth-child(3) { animation-delay: 0.44s; }

/* Scroll reveal: js/page.js adds .reveal-ready to <html>, then .revealed
   per element as it enters the viewport. Without JS, content stays visible. */
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-ready [data-reveal].revealed { opacity: 1; transform: translateY(0); }
.reveal-ready [data-reveal-delay="1"] { transition-delay: 0.12s; }
.reveal-ready [data-reveal-delay="2"] { transition-delay: 0.24s; }

/* Scroll-down indicator: gentle nudge */
@keyframes nudgeDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}
.scroll-indicator a { animation: nudgeDown 2.2s ease-in-out infinite; }

/* Hover micro-interactions */
.btn-outline:hover { transform: translateY(-2px); }
.about-img-wrap img { transition: transform 0.6s ease; }
.about-img-wrap:hover img { transform: scale(1.03); }
.logo { transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s; }
.logo:hover { opacity: 0.75; }

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .subpage .page-hero-inner > * { animation: none; opacity: 1; }
  .reveal-ready [data-reveal] { opacity: 1; transform: none; transition: none; }
  .scroll-indicator a { animation: none; }
  .about-img-wrap:hover img { transform: none; }
}