/* ============================================
   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);
  /* Refined card treatment: crisper hairline border + soft layered shadow */
  --card-border: rgba(20, 20, 20, 0.12);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
  --card-shadow-hover: 0 4px 10px rgba(0, 0, 0, 0.06), 0 16px 40px rgba(0, 0, 0, 0.10);

  --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) {
  /* burger is hidden on desktop, so its wrapper collapses to 0 width; push the
     nav to the right edge instead of letting space-between float it in the middle,
     so the header content spans the same width as the footer / article grid */
  .desktop-nav { display: flex; margin-left: auto; }
  .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);
}
/* Keep the section title aligned to the same container as the content below */
.featured-intro { text-align: left; margin: 0 auto 2.5rem; max-width: var(--container-max); }
.featured-wrap { margin: 0 auto; max-width: var(--container-max); }

/* Editorial: one large hero feature + a bordered side list, equal height */
.featured-editorial {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 900px) {
  .featured-editorial { grid-template-columns: 1.35fr 1fr; gap: 1.5rem; align-items: stretch; }
  /* Left hero and right list share one row height and both fill it */
  .feature-hero, .feature-list { min-height: 460px; }
  .feature-hero { display: flex; flex-direction: column; }
  .feature-hero-img { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; }
  .feature-item { flex: 1 1 0; }
}
.gallery-dot { color: var(--text-muted); font-size: 0.6875rem; }

/* Hero feature */
.feature-hero {
  display: block;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-primary);
  box-shadow: var(--card-shadow);
  transition: border-color 0.3s, transform 0.35s cubic-bezier(0.33, 1, 0.68, 1), box-shadow 0.35s;
}
.feature-hero:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: var(--card-shadow-hover); }
.feature-hero-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.feature-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
}
.feature-hero:hover .feature-hero-img img { transform: scale(1.04); }
.feature-hero-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  background: var(--accent);
  color: #fff;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
}
.feature-hero-body { padding: 1.25rem 1.5rem 1.5rem; }
.feature-hero-meta { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
.feature-hero-cat { font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent); }
.feature-hero-date { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); }
.feature-hero-title {
  font-family: var(--font-sans);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.35;
  font-weight: 600;
  color: var(--text-primary);
  transition: color 0.25s;
}
.feature-hero:hover .feature-hero-title { color: var(--accent); }

/* Side list */
.feature-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-primary);
  box-shadow: var(--card-shadow);
}
.feature-item {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid var(--border);
  transition: background 0.25s;
}
.feature-item:last-child { border-bottom: 0; }
.feature-item:hover { background: var(--bg-secondary); }
.feature-item-img {
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  overflow: hidden;
  border-radius: var(--radius-md);
}
.feature-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.feature-item:hover .feature-item-img img { transform: scale(1.05); }
.feature-item-body { min-width: 0; }
.feature-item-title {
  margin-bottom: 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-primary);
  transition: color 0.25s;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.feature-item:hover .feature-item-title { color: var(--accent); }
.feature-item-meta { display: flex; align-items: center; gap: 0.5rem; }
.feature-item-cat { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--accent); }
.feature-item-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; border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: 0.75rem; background: var(--bg-primary); box-shadow: var(--card-shadow); transition: border-color 0.35s, transform 0.35s cubic-bezier(0.33, 1, 0.68, 1), box-shadow 0.35s; }
.article-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: var(--card-shadow-hover); }

/* Wide featured first card: spans the full row, image beside text on wider screens */
.article-card--featured { grid-column: 1 / -1; }
@media (min-width: 720px) {
  .article-card--featured { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.5rem; align-items: center; padding: 1rem; }
  .article-card--featured .article-img { aspect-ratio: 16 / 9; height: 100%; }
  .article-card--featured .article-body { padding-top: 0; }
  .article-card--featured .article-title { font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 600; }
  .article-card--featured .article-excerpt { font-size: 1rem; -webkit-line-clamp: 3; }
}
.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; }
}