/* Page sections */

.section { padding: var(--s-900) 0; }
.section-head { max-width: 680px; margin-bottom: var(--s-600); }
.section-head .heading-3 { margin-top: var(--s-100); }
.section-head p { margin-top: var(--s-200); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-75);
  color: var(--olive);
}
.eyebrow::before {
  content: "";
  width: 16px;
  height: 2px;
  border-radius: var(--r-full);
  background: var(--brass);
}

/* ---------- Hero ---------- */
.hero { position: relative; padding: calc(var(--s-900) + var(--s-600)) 0 var(--s-900); overflow: hidden; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: var(--s-700);
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-75);
  padding: var(--s-50) var(--s-100) var(--s-50) var(--s-75);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--ink-2);
}
.hero-badge .dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: var(--maple);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse { 50% { opacity: 0.35; } }

.hero h1 { max-width: 680px; margin-top: var(--s-300); }
.hero .lede { max-width: 680px; margin-top: var(--s-300); font-size: 18px; line-height: 28px; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-300);
  margin-top: var(--s-500);
}
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-75) var(--s-300);
  margin-top: var(--s-500);
  padding-top: var(--s-300);
  border-top: 1px solid var(--line);
  max-width: 560px;
}
.hero-proof li { display: flex; align-items: baseline; gap: var(--s-75); }
.hero-proof strong { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--ink); }

/* Portrait: a framed photo on a walnut shelf, like the reference cover */
.portrait { position: relative; justify-self: center; width: 100%; max-width: 440px; }
.portrait-frame {
  position: relative;
  padding: var(--s-100);
  border: 1px solid var(--brass);
  border-radius: var(--r-3xl);
  background: var(--surface);
  transform: rotate(1.5deg);
  transition: transform var(--d-base) var(--ease);
}
.portrait:hover .portrait-frame { transform: rotate(0deg) translateY(-4px); }
.portrait-frame img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-xl); }
.portrait-plate {
  position: absolute;
  left: 50%;
  bottom: calc(var(--s-300) * -1);
  display: inline-flex;
  align-items: center;
  gap: var(--s-75);
  padding: var(--s-75) var(--s-300);
  border: 1px solid var(--brass);
  border-radius: var(--r-full);
  background: var(--brass-soft);
  color: var(--walnut);
  transform: translateX(-50%) rotate(-1deg);
  white-space: nowrap;
}
:root[data-theme="dark"] .portrait-plate { color: var(--brass); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .portrait-plate { color: var(--brass); } }

.portrait-note {
  position: absolute;
  top: var(--s-500);
  left: calc(var(--s-600) * -1);
  display: flex;
  align-items: center;
  gap: var(--s-75);
  padding: var(--s-75) var(--s-100);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  transform: rotate(-4deg);
  animation: bob 6s var(--ease) infinite;
}
.portrait-note i { font-size: 20px; color: var(--maple); }
@keyframes bob { 50% { transform: rotate(-4deg) translateY(-8px); } }

/* Drifting maple leaves */
.leaves { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.leaf {
  position: absolute;
  top: -40px;
  width: 24px;
  height: 24px;
  color: var(--maple);
  opacity: 0;
  animation: fall var(--dur, 14s) var(--ease) var(--delay, 0s) infinite;
}
.leaf svg { width: 100%; height: 100%; }
@keyframes fall {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  10% { opacity: 0.8; }
  85% { opacity: 0.6; }
  100% { opacity: 0; transform: translate(var(--drift, -80px), 760px) rotate(var(--spin, 300deg)); }
}

/* ---------- Featured writing ---------- */
.writing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-300);
}
.card {
  border: 1px solid var(--line);
  border-radius: var(--r-3xl);
  background: var(--surface);
  transition: transform var(--d-base) var(--ease), border-color var(--d-fast) var(--ease);
}
a.card:hover { transform: translateY(-4px); border-color: var(--brass); }
a.card:active { transform: scale(0.98); }

.post-featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--s-400);
  align-items: center;
  padding: var(--s-100);
}
.post-featured .cover {
  overflow: hidden;
  border-radius: var(--r-xl); /* 24 outer − 12 gap */
}
.post-featured .cover img { width: 100%; aspect-ratio: 2.5 / 1; object-fit: cover; transition: transform var(--d-base) var(--ease); }
.post-featured:hover .cover img { transform: scale(1.03); }
.post-featured .post-body { padding: var(--s-300) var(--s-300) var(--s-300) 0; }

.post { display: flex; flex-direction: column; gap: var(--s-200); padding: var(--s-400); }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-75); color: var(--ink-3); }
.tag {
  display: inline-flex;
  padding: var(--s-25) var(--s-75);
  border-radius: var(--r-full);
  background: var(--brass-soft);
  color: var(--walnut);
}
:root[data-theme="dark"] .tag { color: var(--brass); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tag { color: var(--brass); } }
.post .link-arrow, .post-body .link-arrow { margin-top: auto; }
.post-body { display: flex; flex-direction: column; gap: var(--s-200); }
.post-stat { display: inline-flex; align-items: center; gap: var(--s-50); }

/* ---------- Topics ---------- */
.topic-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-300);
}
.topic { display: flex; flex-direction: column; gap: var(--s-100); padding: var(--s-300); }
.topic-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--s-100);
  border-radius: var(--r-2xl);
  background: var(--surface-2);
  color: var(--forest);
  font-size: 24px;
}
.topic ul { display: flex; flex-wrap: wrap; gap: var(--s-75); margin-top: var(--s-100); }
.topic li {
  padding: var(--s-25) var(--s-75);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  color: var(--ink-2);
}

/* ---------- Tagline reveal (B11) ---------- */
.tagline {
  padding: calc(var(--s-900) + var(--s-700)) 0;
  background: var(--band);
  color: var(--band-ink);
}
.tagline-text { max-width: 680px; margin: 0 auto; text-align: center; }
.tagline-text .w {
  color: var(--band-ink);
  opacity: 0.3;
  transition: opacity var(--d-base) var(--ease), color var(--d-base) var(--ease);
}
.tagline-text .w.on { opacity: 1; }
.tagline-text .w.accent.on { color: var(--brass); }
.tagline-sign { margin-top: var(--s-500); text-align: center; color: rgba(246, 238, 221, 0.6); }

/* ---------- Services ---------- */
.service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-300);
}
.service { display: flex; flex-direction: column; gap: var(--s-200); padding: var(--s-400); }
.service-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-200); }
.service .topic-icon { margin: 0; }
.service ul { display: grid; gap: var(--s-75); }
.service li { display: flex; gap: var(--s-75); color: var(--ink-2); }
.service li i { flex: none; margin-top: var(--s-25); color: var(--olive); font-size: 18px; }
.service .link-arrow { margin-top: auto; padding-top: var(--s-100); }
.service-highlight { background: var(--surface-2); }

/* ---------- Steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-300);
  counter-reset: step;
}
.step { position: relative; padding: var(--s-400) var(--s-300) var(--s-300); border-top: 2px solid var(--line); }
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  display: block;
  margin-bottom: var(--s-200);
  color: var(--brass);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  font-family: "Geist Mono", ui-monospace, Menlo, monospace;
}
.step p { margin-top: var(--s-75); }

/* ---------- About ---------- */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-700);
  align-items: start;
}
.about-copy { display: grid; gap: var(--s-200); }
.quote {
  padding: var(--s-400);
  border-radius: var(--r-3xl);
  background: var(--surface-2);
}
.quote blockquote { color: var(--ink); }
.quote figcaption { display: flex; align-items: center; gap: var(--s-100); margin-top: var(--s-300); }
.quote figcaption img { width: 40px; height: 40px; border-radius: var(--r-full); }
.stack { display: flex; flex-wrap: wrap; gap: var(--s-75); margin-top: var(--s-100); }
.stack li {
  padding: var(--s-50) var(--s-100);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface);
}

/* ---------- FAQ ---------- */
.faq { max-width: 800px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-200);
  padding: var(--s-300) 0;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { flex: none; font-size: 20px; color: var(--ink-3); transition: transform var(--d-base) var(--ease); }
.faq details[open] summary i { transform: rotate(45deg); }
.faq .answer { padding: 0 var(--s-600) var(--s-300) 0; }
.faq details[open] .answer { animation: answer-in var(--d-base) var(--ease); }
@keyframes answer-in { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- Final CTA ---------- */
.cta-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-500);
  align-items: center;
  padding: var(--s-600);
  border: 1px solid var(--brass);
  border-radius: var(--r-3xl);
  background: var(--surface);
}
.cta-card img { width: 128px; height: 128px; border-radius: var(--r-full); border: 1px solid var(--brass); }
.cta-card p { margin-top: var(--s-100); }
.cta-card .hero-actions { margin-top: var(--s-300); }

/* ---------- Footer ---------- */
.footer { padding: var(--s-600) 0; border-top: 1px solid var(--line); }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-200); }
.footer nav { display: flex; flex-wrap: wrap; gap: var(--s-300); }
.footer nav a { color: var(--ink-2); transition: color var(--d-fast) var(--ease); }
.footer nav a:hover { color: var(--ink); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-grid { gap: var(--s-500); }
  .portrait-note { left: calc(var(--s-200) * -1); }
}

@media (max-width: 860px) {
  .hero { padding-top: calc(var(--s-900) + var(--s-300)); }
  .hero-grid, .about-grid, .post-featured { grid-template-columns: 1fr; }
  .portrait { max-width: 360px; order: -1; margin-bottom: var(--s-300); }
  .post-featured .post-body { padding: var(--s-100) var(--s-200) var(--s-200); }
  .service-grid, .steps { grid-template-columns: 1fr; }
  .heading-1 { font-size: 48px; line-height: 48px; }
  .heading-2 { font-size: 36px; line-height: 40px; }
  .heading-3 { font-size: 30px; line-height: 36px; }
  .section { padding: var(--s-800) 0; }
  .tagline { padding: var(--s-900) 0; }
  .cta-card { grid-template-columns: 1fr; padding: var(--s-400); gap: var(--s-300); }
  .cta-card img { width: 80px; height: 80px; }
}

@media (max-width: 560px) {
  .container { padding: 0 var(--s-200); }
  .writing-grid, .topic-grid { grid-template-columns: 1fr; }
  .heading-1 { font-size: 36px; line-height: 40px; }
  .heading-2 { font-size: 30px; line-height: 36px; }
  .heading-3 { font-size: 24px; line-height: 32px; }
  .hero .lede { font-size: 16px; line-height: 24px; }
  .hero-actions { gap: var(--s-200); }
  .hero-actions .btn { width: 100%; }
  .portrait { max-width: 280px; }
  .portrait-note { display: none; }
  .post, .service { padding: var(--s-300); }
  .faq .answer { padding-right: 0; }
}

.section-flush { padding-top: 0; }
.inline-link { color: var(--forest); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--brass); }

/* ---------- Simple pages (404, legal) ---------- */
.page { min-height: 100vh; display: flex; flex-direction: column; }
.page main { flex: 1; padding: calc(var(--s-900) + var(--s-600)) 0 var(--s-900); }
.notfound { display: grid; justify-items: center; gap: var(--s-300); text-align: center; }
.notfound img { width: 160px; height: 160px; border-radius: var(--r-full); border: 1px solid var(--brass); }
.notfound .code { color: var(--brass); }
.prose { max-width: 720px; display: grid; gap: var(--s-200); }
.prose h1 { margin-bottom: var(--s-200); }
.prose h2 { margin-top: var(--s-400); }
.prose ul { list-style: disc; padding-left: var(--s-300); display: grid; gap: var(--s-75); }

/* ---------- WeChat copy: feedback appears right under the button ---------- */
.copy-wrap { position: relative; display: inline-flex; }
.copy-icons { position: relative; display: inline-grid; width: 18px; height: 18px; }
.copy-icons i { grid-area: 1 / 1; transition: opacity var(--d-fast) var(--ease), transform var(--d-fast) var(--ease); }
.copy-icon { color: var(--ink-3); }
.done-icon { color: var(--olive); opacity: 0; transform: scale(0.6); }
.wechat-copy:hover .copy-icon { color: var(--forest); }
.wechat-copy.is-copied { border-color: var(--olive); }
.wechat-copy.is-copied .copy-icon { opacity: 0; transform: scale(0.6); }
.wechat-copy.is-copied .done-icon { opacity: 1; transform: scale(1); }

.copy-tip {
  position: absolute;
  top: calc(100% + var(--s-75));
  left: 50%;
  z-index: 2;
  padding: var(--s-50) var(--s-100);
  border-radius: var(--r-lg);
  background: var(--ink);
  color: var(--bg);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(var(--s-50) * -1));
  transition: opacity var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
.copy-tip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  border: 6px solid transparent;
  border-bottom-color: var(--ink);
  transform: translateX(-50%);
}
.copy-tip.is-show { opacity: 1; transform: translate(-50%, 0); }
.copy-tip.is-error { background: var(--maple); color: #fffdf8; }
.copy-tip.is-error::before { border-bottom-color: var(--maple); }

@media (max-width: 560px) {
  .cta-card .hero-actions .btn, .copy-wrap { width: 100%; }
  .cta-card { padding-bottom: var(--s-700); } /* room for the copy tip */
}

/* ---------- Sites directory ---------- */
.site-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-300);
}
.site-grid > li { display: flex; }
.site { display: flex; flex: 1; flex-direction: column; gap: var(--s-100); padding: var(--s-400); }
.site-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-200); margin-bottom: var(--s-100); }
.site .topic-icon { margin: 0; }
.site-status {
  display: inline-flex;
  align-items: center;
  gap: var(--s-50);
  padding: var(--s-25) var(--s-75);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  color: var(--ink-2);
}
.site-dot { width: 6px; height: 6px; border-radius: var(--r-full); background: var(--ink-3); }
.site-status.is-live .site-dot { background: var(--olive); animation: pulse 2.4s var(--ease) infinite; }
.site-status.is-building .site-dot { background: var(--brass); }
.site-url {
  display: inline-flex;
  align-items: center;
  gap: var(--s-50);
  margin-top: auto;
  padding-top: var(--s-200);
  color: var(--ink-2);
  transition: color var(--d-fast) var(--ease);
}
.site-url i { transition: transform var(--d-fast) var(--ease); }
a.site:hover .site-url, a.site-url:hover { color: var(--forest); }
a.site:hover .site-url i, a.site-url:hover i { transform: translate(2px, -2px); }
.site-upcoming { border-style: dashed; background: transparent; }
.site.is-pending { background: var(--surface-2); }

@media (max-width: 1024px) { .site-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .site-grid { grid-template-columns: 1fr; } .site { padding: var(--s-300); } }