/* Team Howe — shared site stylesheet. Built from DESIGN.md. Do not fork per page. */

@font-face {
  font-family: 'Raine & Horne';
  src: url('fonts/Raine-HorneRegular.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Raine & Horne Light';
  src: url('fonts/Raine-HorneLight.otf') format('opentype');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Light';
  src: url('fonts/Inter-Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
}

:root {
  /* Brand (locked) */
  --color-brand-amber: #ffb300;
  --color-brand-ink: #3d3935;

  /* Derived neutrals */
  --color-canvas: #1c1a18;
  --color-surface: #3d3935;
  --color-surface-raised: #4f4944;
  --color-foreground: #f5f1ec;
  --color-muted: #a39c94;
  --color-border: #5c554e;
  --color-amber-dim: #7a5200;

  /* Typography */
  --font-brand: 'Raine & Horne', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-brand-light: 'Raine & Horne Light', 'Inter Light', ui-sans-serif, system-ui, sans-serif;
  --text-caption: 12px;
  --text-body-sm: 14px;
  --text-body: 16px;
  --text-subheading: 20px;
  --text-heading-sm: 28px;
  --text-heading: 44px;
  --text-heading-lg: 64px;
  --text-display: 96px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-64: 64px;
  --spacing-96: 96px;
  --section-gap: 88px;
  --card-padding: 24px;

  /* Radius */
  --radius-card: 16px;
  --radius-button: 6px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-hero-glow: rgba(0, 0, 0, 0.8) 0px 0px 44px 0px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-brand);
  font-weight: 400;
  background: var(--color-canvas);
  color: var(--color-foreground);
  font-size: var(--text-body);
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.light { font-family: var(--font-brand-light); font-weight: 300; }

a { color: inherit; }

.max { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* ===== Type scale ===== */
.display   { font-size: clamp(48px, 7vw, var(--text-display)); line-height: 1.02; letter-spacing: -0.04em; font-weight: 400; }
.heading-lg{ font-size: clamp(36px, 5.5vw, var(--text-heading-lg)); line-height: 1.08; letter-spacing: -0.035em; font-weight: 400; }
.heading   { font-size: clamp(28px, 4vw, var(--text-heading)); line-height: 1.15; letter-spacing: -0.03em; font-weight: 400; }
.heading-sm{ font-size: var(--text-heading-sm); line-height: 1.25; letter-spacing: -0.02em; font-weight: 400; }
.subheading{ font-size: var(--text-subheading); line-height: 1.3; letter-spacing: -0.015em; color: var(--color-muted); font-weight: 400; }
.body-sm   { font-size: var(--text-body-sm); line-height: 1.5; letter-spacing: -0.01em; }
.caption   { font-size: var(--text-caption); line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.amber-word{ color: var(--color-brand-amber); }
p.muted, .muted { color: var(--color-muted); }

/* ===== Layout rhythm ===== */
section { padding: var(--section-gap) 0; }
section.canvas  { background: var(--color-canvas); }
section.surface { background: var(--color-surface); }

/* ===== Nav ===== */
nav.top {
  position: sticky; top: 0; z-index: 50;
  background: rgba(28, 26, 24, 0.88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}
nav.top .max {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: var(--spacing-16); padding-bottom: var(--spacing-16);
}
nav.top .wordmark { font-size: 18px; letter-spacing: -0.01em; color: var(--color-foreground); text-decoration: none; }
nav.top .wordmark span { color: var(--color-brand-amber); }
nav.top ul { list-style: none; display: flex; gap: var(--spacing-32); }
nav.top ul a { text-decoration: none; font-size: var(--text-body-sm); color: var(--color-muted); transition: color 0.15s; }
nav.top ul a:hover, nav.top ul a.active { color: var(--color-foreground); }
nav.top .nav-cta {
  background: var(--color-brand-amber); color: var(--color-canvas);
  padding: 10px 20px; border-radius: var(--radius-pill);
  font-size: var(--text-body-sm); font-weight: 500; text-decoration: none;
  white-space: nowrap;
}
.nav-toggle { display: none; }

/* ===== Buttons ===== */
.btn-primary {
  display: inline-block;
  background: var(--color-brand-amber); color: var(--color-canvas);
  padding: 10px 20px; border-radius: var(--radius-button);
  font-size: var(--text-body); font-weight: 500; text-decoration: none;
  border: none; cursor: pointer; font-family: var(--font-brand);
}
.btn-primary:hover { background: var(--color-amber-dim); color: var(--color-foreground); }
.btn-ghost {
  display: inline-block;
  background: transparent; color: var(--color-foreground);
  padding: 10px 20px; border-radius: var(--radius-button);
  border: 1px solid var(--color-border);
  font-size: var(--text-body); text-decoration: none;
  font-family: var(--font-brand);
}
.btn-ghost:hover { border-color: var(--color-foreground); }

/* ===== Cards ===== */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  padding: var(--card-padding);
}
.card-raised { background: var(--color-surface-raised); }

/* ===== Stat card ===== */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-24); }
.stat .v { font-size: 36px; line-height: 1; margin-bottom: var(--spacing-8); }
.stat .v.amber { color: var(--color-brand-amber); }
.stat .l { font-size: var(--text-caption); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-muted); }

/* ===== Hero ===== */
.hero { padding-top: 120px; padding-bottom: 100px; }
.hero h1 { max-width: 880px; margin-bottom: var(--spacing-24); }
.hero .sub { max-width: 620px; margin-bottom: var(--spacing-32); }
.hero-ctas { display: flex; gap: var(--spacing-24); align-items: center; flex-wrap: wrap; }
.hero-ctas .link { text-decoration: none; color: var(--color-muted); border-bottom: 1px solid var(--color-border); padding-bottom: 2px; font-size: var(--text-body-sm); }
.hero-ctas .link:hover { color: var(--color-foreground); border-color: var(--color-foreground); }

/* Photo hero — blurred photographic background, brand-ink scrim for legibility */
.hero-photo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero-photo .hero-bg {
  position: absolute;
  top: -88px;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: 80% auto;
  background-position: center top;
  background-repeat: no-repeat;
  background-color: var(--color-canvas);
  z-index: -2;
}
.hero-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28,26,24,0.78) 0%, rgba(28,26,24,0.6) 45%, rgba(28,26,24,0.88) 100%);
  z-index: -1;
}

/* ===== Section header ===== */
.section-head { max-width: 760px; margin-bottom: var(--spacing-64); }
.section-head .heading { margin-top: var(--spacing-8); }

/* ===== Grids ===== */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-32); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-64); align-items: start; }

/* ===== Image placeholder ===== */
.img-box {
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-card);
  aspect-ratio: 4/3;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-muted); font-size: var(--text-body-sm);
  text-align: center; padding: var(--spacing-24);
}

/* ===== Form ===== */
.form-row { display: flex; gap: var(--spacing-16); flex-wrap: wrap; }
input[type="text"], input[type="email"], input[type="tel"] {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  color: var(--color-foreground);
  padding: 12px 16px;
  font-family: var(--font-brand);
  font-size: var(--text-body);
  flex: 1;
  min-width: 180px;
}
input::placeholder { color: var(--color-muted); }
.signup-inline { display: flex; gap: var(--spacing-8); max-width: 420px; }
.signup-inline input { flex: 1; }

/* ===== Testimonial ===== */
blockquote { font-size: var(--text-subheading); color: var(--color-foreground); line-height: 1.4; margin-bottom: var(--spacing-16); }
blockquote::before { content: '\201C'; color: var(--color-brand-amber); }
blockquote::after { content: '\201D'; color: var(--color-brand-amber); }
cite { font-style: normal; font-size: var(--text-caption); color: var(--color-muted); letter-spacing: 0.1em; text-transform: uppercase; }

/* ===== Footer ===== */
footer { background: var(--color-canvas); border-top: 1px solid var(--color-border); padding: var(--spacing-64) 0 var(--spacing-32); }
.footer-signup { padding-bottom: var(--spacing-64); border-bottom: 1px solid var(--color-border); margin-bottom: var(--spacing-64); }
.footer-signup .heading-sm { margin-bottom: var(--spacing-16); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--spacing-64); margin-bottom: var(--spacing-64); }
.footer-col h5 { font-size: var(--text-caption); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--spacing-16); }
.footer-col a, .footer-col p { display: block; text-decoration: none; color: var(--color-foreground); font-size: var(--text-body-sm); margin-bottom: var(--spacing-8); line-height: 1.6; }
.footer-col a:hover { color: var(--color-brand-amber); }
.footer-bottom { display: flex; justify-content: space-between; padding-top: var(--spacing-32); border-top: 1px solid var(--color-border); font-size: var(--text-caption); color: var(--color-muted); flex-wrap: wrap; gap: var(--spacing-16); }

/* ===== Misc helpers ===== */
.divider { border-top: 1px solid var(--color-border); margin: var(--spacing-64) 0; }
.eyebrow { color: var(--color-brand-amber); font-size: var(--text-caption); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: var(--spacing-16); display: block; }
.feature-callout { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: var(--spacing-32) 0; }
.note { font-size: var(--text-body-sm); color: var(--color-muted); font-style: italic; }
.placeholder-tag { display: inline-block; background: var(--color-amber-dim); color: var(--color-foreground); font-size: var(--text-caption); padding: 2px 8px; border-radius: 4px; margin-bottom: var(--spacing-8); }

@media (max-width: 900px) {
  nav.top ul { display: none; }
  .grid-3, .grid-2, .stat-grid, .footer-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 100px; }
  /* backdrop-filter forces continuous recompositing on iOS Safari during scroll,
     which is the main cause of stuttery, stop-start scrolling on phones.
     Drop it on mobile and use a solid near-opaque background instead. */
  nav.top { backdrop-filter: none; background: rgba(28, 26, 24, 0.97); }
}

/* ============================================================
   Snapshot — Past Editions Carousel
   ============================================================ */
.edition-carousel { position: relative; }

.edition-track {
  display: flex;
  gap: var(--spacing-24);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--spacing-8);
  scrollbar-width: none;
}
.edition-track::-webkit-scrollbar { display: none; }

.edition-item {
  flex: 0 0 calc((100% - (var(--spacing-24) * 3)) / 4);
  scroll-snap-align: start;
  aspect-ratio: 3 / 4;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-card);
  border: 1px dashed var(--color-border);
  background: var(--color-surface);
}
.edition-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform .3s ease;
}
.edition-item:hover img { transform: scale(1.03); }

.edition-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-16);
  margin-top: var(--spacing-24);
}
.edition-arrow {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-foreground);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s, color .2s;
}
.edition-arrow:hover { border-color: var(--color-brand-amber); color: var(--color-brand-amber); }

.edition-dots { display: flex; gap: var(--spacing-8); align-items: center; }
.edition-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.edition-dot.active { background: var(--color-brand-amber); transform: scale(1.3); }

@media (max-width: 768px) {
  .edition-item { flex-basis: calc((100% - var(--spacing-24)) / 2); }
}

/* ============================================================
   Home continuous feed — section dividers + smooth scroll
   ============================================================ */
html { scroll-behavior: smooth; }
.feed-section { position: relative; }
.feed-section::before {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border) 20%, var(--color-border) 80%, transparent);
  opacity: .6;
}

/* ============================================================
   Bilingual testimonial (EN default, toggle to 中文)
   ============================================================ */
.testimonial-bilingual { position: relative; }
.testimonial-bilingual::before {
  content: '\201C';
  color: var(--color-brand-amber);
  font-size: 56px;
  line-height: 0.1;
  display: block;
  margin-bottom: var(--spacing-16);
}
.testimonial-bilingual p {
  color: var(--color-foreground);
  font-size: var(--text-body);
  line-height: 1.7;
  margin-bottom: var(--spacing-16);
}
.testimonial-bilingual p:last-child { margin-bottom: 0; }
.testimonial-bilingual [data-lang="zh"] p { line-height: 1.9; }
.testimonial-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  flex-wrap: wrap;
  margin-top: var(--spacing-24);
}
.lang-toggle {
  font-size: var(--text-body-sm);
  padding: 8px 18px;
  white-space: nowrap;
  cursor: pointer;
}