:root{
  --paper: #F1ECDE;
  --paper-raised: #E7DFC8;
  --ink: #23281F;
  --ink-soft: #5B5E4C;
  --moss: #3F5A3B;
  --moss-tint: #E1E7D8;
  --amber: #A66A16;
  --line: rgba(35,40,31,0.16);
  --line-strong: rgba(35,40,31,0.32);
  --ring: #E7DFC8;
  --shadow: 0 24px 48px -28px rgba(35,40,31,0.35);
}
@media (prefers-color-scheme: dark){
  :root{
    --paper: #14170E;
    --paper-raised: #1D2116;
    --ink: #ECE7D4;
    --ink-soft: #A9AC96;
    --moss: #8FB37F;
    --moss-tint: #202A1B;
    --amber: #E3A94A;
    --line: rgba(236,231,212,0.18);
    --line-strong: rgba(236,231,212,0.34);
    --ring: #1D2116;
    --shadow: 0 24px 48px -28px rgba(0,0,0,0.6);
  }
}
:root[data-theme="dark"]{
  --paper: #14170E;
  --paper-raised: #1D2116;
  --ink: #ECE7D4;
  --ink-soft: #A9AC96;
  --moss: #8FB37F;
  --moss-tint: #202A1B;
  --amber: #E3A94A;
  --line: rgba(236,231,212,0.18);
  --line-strong: rgba(236,231,212,0.34);
  --ring: #1D2116;
  --shadow: 0 24px 48px -28px rgba(0,0,0,0.6);
}
:root[data-theme="light"]{
  --paper: #F1ECDE;
  --paper-raised: #E7DFC8;
  --ink: #23281F;
  --ink-soft: #5B5E4C;
  --moss: #3F5A3B;
  --moss-tint: #E1E7D8;
  --amber: #A66A16;
  --line: rgba(35,40,31,0.16);
  --line-strong: rgba(35,40,31,0.32);
  --ring: #E7DFC8;
  --shadow: 0 24px 48px -28px rgba(35,40,31,0.35);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Be Vietnam Pro', system-ui, sans-serif;
  font-size:1.05rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

::selection{ background:var(--moss); color:var(--paper); }

.wrap{ max-width:1180px; margin:0 auto; padding:0 clamp(1.25rem, 4vw, 3rem); }

h1,h2,h3{ font-family:'Bitter', Georgia, serif; text-wrap:balance; margin:0; }

.eyebrow{
  font-family:'Be Vietnam Pro', sans-serif;
  font-weight:600;
  font-size:0.76rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--moss);
}

/* ---------- HERO ---------- */
.hero{
  padding:clamp(3rem,8vw,5.5rem) 0 clamp(2.5rem,6vw,4rem);
  position:relative;
}
.hero .wrap{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(280px, 380px);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
.hero-text{ order:1; }
.hero-photo-col{ order:2; display:flex; justify-content:center; }
.hero .eyebrow{ margin-bottom:1.1rem; opacity:0; animation:riseIn .7s ease-out .05s forwards; }
.hero h1{
  font-size:clamp(2.7rem,7vw,4.7rem);
  font-weight:700;
  line-height:0.98;
  letter-spacing:-0.01em;
  opacity:0;
  animation:riseIn .8s ease-out .16s forwards;
}
.hero-lede{
  margin-top:1.4rem;
  max-width:34rem;
  font-size:clamp(1.05rem,1.7vw,1.28rem);
  color:var(--ink-soft);
  font-family:'Bitter', serif;
  font-style:italic;
  font-weight:400;
  line-height:1.55;
  opacity:0;
  animation:riseIn .8s ease-out .3s forwards;
}
.hero-meta{
  margin-top:2rem;
  display:flex;
  gap:1.75rem;
  flex-wrap:wrap;
  opacity:0;
  animation:riseIn .8s ease-out .44s forwards;
}
.meta-item{ display:flex; flex-direction:column; gap:0.15rem; }
.meta-num{ font-family:'IBM Plex Mono', monospace; font-weight:500; font-size:1.5rem; color:var(--ink); font-variant-numeric:tabular-nums; }
.meta-label{ font-size:0.74rem; letter-spacing:0.06em; color:var(--ink-soft); }

.photo-frame{
  position:relative;
  width:100%;
  max-width:340px;
  aspect-ratio: 660/770;
  border-radius:2px;
  overflow:hidden;
  box-shadow:var(--shadow);
  outline:1px solid var(--line);
  outline-offset:8px;
  opacity:0;
  animation:photoIn 1s cubic-bezier(.2,.7,.2,1) .12s forwards;
}
.photo-frame img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(0.94) contrast(1.02);
}
@keyframes riseIn{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:translateY(0);} }
@keyframes photoIn{ from{ opacity:0; transform:translateY(10px) scale(0.985);} to{ opacity:1; transform:translateY(0) scale(1);} }

/* coastline divider */
.coastline{
  width:100%; height:34px;
  color:var(--line-strong);
}
.coastline svg{ width:100%; height:100%; display:block; }

/* ---------- MANIFESTO STRIP ---------- */
.strap{
  padding:clamp(2rem,5vw,3rem) 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.strap p{
  margin:0;
  max-width:46rem;
  font-size:clamp(1.05rem,1.6vw,1.2rem);
  color:var(--ink-soft);
}
.strap strong{ color:var(--ink); font-weight:600; }

/* ---------- TIMELINE / GROWTH CHART ---------- */
.timeline-section{ padding:clamp(3.5rem,7vw,6rem) 0; }
.timeline-head{ max-width:38rem; margin-bottom:clamp(2.5rem,6vw,4rem); }
.timeline-head .eyebrow{ margin-bottom:0.9rem; }
.timeline-head h2{
  font-size:clamp(1.9rem,3.6vw,2.6rem);
  font-weight:700;
  line-height:1.15;
}

.chart{
  position:relative;
  display:grid;
  grid-template-columns: 84px 1fr;
  column-gap:clamp(1rem,3vw,2.25rem);
}
.chart-rail{
  position:relative;
  grid-column:1;
}
.chart-rail-line{
  position:absolute;
  left:50%;
  top:0.6rem;
  bottom:0.6rem;
  width:2px;
  background:var(--line-strong);
  transform:translateX(-50%);
  transform-origin:top;
  transform:translateX(-50%) scaleY(0);
  animation:growLine 1.6s cubic-bezier(.2,.7,.2,1) .3s forwards;
}
@keyframes growLine{ to{ transform:translateX(-50%) scaleY(1); } }

.stages{ grid-column:2; display:flex; flex-direction:column; gap:clamp(2.5rem,6vw,3.75rem); }

.stage{ position:relative; }
.stage-tick{
  position:absolute;
  left:calc(-1 * (clamp(1rem,3vw,2.25rem) + 84px/2) - 1px);
  top:0.35rem;
  display:flex; align-items:center; gap:0.6rem;
  width:calc(84px/2 + clamp(1rem,3vw,2.25rem));
  justify-content:flex-end;
}
.stage-tick .mark{
  width:18px; height:2px; background:var(--moss); flex:none;
}
.stage-age{
  font-family:'IBM Plex Mono', monospace;
  font-weight:500;
  font-size:0.78rem;
  color:var(--moss);
  white-space:nowrap;
  letter-spacing:0.02em;
}
.stage-dot{
  position:absolute;
  left:calc(-1 * (clamp(1rem,3vw,2.25rem) + 84px/2) - 5px);
  top:0.28rem;
  width:10px; height:10px; border-radius:50%;
  background:var(--paper);
  border:2px solid var(--moss);
}
.stage-title{
  font-family:'Be Vietnam Pro', sans-serif;
  font-weight:600;
  font-size:0.82rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink);
  margin-bottom:0.6rem;
}
.stage-body{ max-width:42rem; color:var(--ink-soft); }
.stage-body p{ margin:0 0 0.85rem; }
.stage-body p:last-child{ margin-bottom:0; }
.stage-body em{ color:var(--ink); font-style:normal; font-weight:600; }

/* ---------- QUOTE / WHY ---------- */
.why{
  padding:clamp(3.5rem,8vw,6rem) 0;
  background:var(--paper-raised);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.why .wrap{ display:grid; grid-template-columns: 1fr; gap:1.5rem; }
.why-mark{
  font-family:'Bitter', serif;
  font-size:4.5rem;
  line-height:0.6;
  color:var(--amber);
  font-weight:700;
}
.why blockquote{
  margin:0;
  max-width:44rem;
  font-family:'Bitter', serif;
  font-style:italic;
  font-weight:600;
  font-size:clamp(1.5rem,3.4vw,2.15rem);
  line-height:1.32;
  color:var(--ink);
}
.why cite{
  display:block;
  margin-top:1.5rem;
  font-family:'Be Vietnam Pro', sans-serif;
  font-style:normal;
  font-weight:500;
  font-size:0.85rem;
  letter-spacing:0.04em;
  color:var(--ink-soft);
}

/* ---------- MISSION / CLOSE ---------- */
.mission{ padding:clamp(3.5rem,7vw,6rem) 0; }
.mission-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:clamp(2rem,5vw,3.5rem);
}
.mission-card .eyebrow{ margin-bottom:0.8rem; }
.mission-card p{ color:var(--ink-soft); max-width:30rem; }
.mission-card p strong{ color:var(--ink); font-weight:600; }

.close{
  margin-top:clamp(3rem,6vw,4.5rem);
  padding-top:clamp(2.5rem,5vw,3.5rem);
  border-top:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:flex-end;
  gap:1.5rem;
}
.close-statement{
  max-width:34rem;
  font-family:'Bitter', serif;
  font-size:clamp(1.2rem,2.2vw,1.55rem);
  line-height:1.42;
  color:var(--ink);
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:0.55rem;
  padding:0.55rem 0.9rem;
  border:1px solid var(--line-strong);
  font-family:'IBM Plex Mono', monospace;
  font-size:0.74rem;
  letter-spacing:0.03em;
  color:var(--ink-soft);
  white-space:nowrap;
}
.badge .dot{ width:7px; height:7px; border-radius:50%; background:var(--moss); flex:none; }

.close-side{ display:flex; flex-direction:column; align-items:flex-end; gap:0.9rem; }
.fb-link{
  display:inline-flex;
  align-items:baseline;
  gap:0.4rem;
  font-family:'Be Vietnam Pro', sans-serif;
  font-weight:600;
  font-size:0.85rem;
  letter-spacing:0.02em;
  color:var(--amber);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .18s ease, opacity .18s ease;
}
.fb-link:hover, .fb-link:focus-visible{ border-color:var(--amber); }
.fb-link:focus-visible{ outline:2px solid var(--amber); outline-offset:4px; border-radius:1px; }
.fb-link .arrow{ transition:transform .18s ease; }
.fb-link:hover .arrow{ transform:translateX(3px); }

footer{
  padding:2.5rem 0 3rem;
  font-size:0.78rem;
  color:var(--ink-soft);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:760px){
  .hero .wrap{ grid-template-columns:1fr; }
  .hero-photo-col{ order:0; }
  .photo-frame{ max-width:280px; }
  .chart{ grid-template-columns: 40px 1fr; column-gap:1rem; }
  .stage-tick{ display:none; }
  .stage-dot{ left:-25px; }
  .stage-age{ display:block; margin-bottom:0.3rem; }
  .mission-grid{ grid-template-columns:1fr; }
}

/* ---------- CHỨNG NHẬN ---------- */
.creds{ padding:clamp(3.5rem,7vw,6rem) 0; border-top:1px solid var(--line); }
.creds-head{ max-width:42rem; margin-bottom:clamp(2rem,5vw,3rem); }
.creds-head .eyebrow{ margin-bottom:0.9rem; }
.creds-head h2{ font-size:clamp(1.9rem,3.6vw,2.6rem); font-weight:700; line-height:1.15; }
.creds-head p{ margin:1rem 0 0; color:var(--ink-soft); max-width:44rem; }
.creds-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.25rem,3vw,2rem); }
.cred-card{ margin:0; background:var(--paper-raised); border:1px solid var(--line); border-radius:2px; overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; }
.cred-card img{ width:100%; height:auto; display:block; border-bottom:1px solid var(--line); cursor:zoom-in; filter:saturate(0.96); }
.cred-meta{ padding:1rem 1.15rem 1.2rem; }
.cred-meta .k{ margin:0; font-family:'Be Vietnam Pro',sans-serif; font-weight:600; font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--moss); }
.cred-meta h3{ font-family:'Bitter',serif; font-size:1.02rem; line-height:1.32; margin:0.4rem 0 0.45rem; color:var(--ink); }
.cred-meta .src{ margin:0; font-size:0.82rem; color:var(--ink-soft); }
.cred-meta .cred-date{ margin:0.5rem 0 0; font-family:'IBM Plex Mono',monospace; font-size:0.74rem; color:var(--ink-soft); }
@media (max-width:900px){ .creds-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .creds-grid{ grid-template-columns:1fr; } }
.cred-lightbox{ position:fixed; inset:0; background:rgba(20,23,14,0.9); display:none; align-items:center; justify-content:center; padding:4vw; z-index:99; cursor:zoom-out; }
.cred-lightbox.on{ display:flex; }
.cred-lightbox img{ max-width:100%; max-height:92vh; box-shadow:0 30px 80px rgba(0,0,0,0.55); }


html{ scroll-behavior:smooth; scroll-padding-top:72px; }
.topnav{ position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:64px; }
.brand{ font-family:'Bitter',serif; font-weight:700; font-size:1.15rem; color:var(--ink); text-decoration:none; display:flex; flex-direction:column; line-height:1.15; }
.brand span{ font-family:'Be Vietnam Pro',sans-serif; font-weight:500; font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--moss); }
.nav-links{ display:flex; gap:1.4rem; align-items:center; }
.nav-links a{ color:var(--ink-soft); text-decoration:none; font-size:0.9rem; font-weight:500; }
.nav-links a:hover{ color:var(--ink); }
.nav-links .nav-cta{ color:var(--paper); background:var(--moss); padding:0.45rem 0.95rem; border-radius:2px; }
.nav-links .nav-cta:hover{ color:var(--paper); opacity:0.9; }
@media (max-width:760px){ .nav-links a:not(.nav-cta){ display:none; } }
.hero-actions{ margin-top:2rem; display:flex; gap:0.9rem; flex-wrap:wrap; opacity:0; animation:riseIn .8s ease-out .56s forwards; }
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:0.8rem 1.35rem; border-radius:2px; font-weight:600; font-size:0.95rem; text-decoration:none; transition:opacity .18s ease, transform .18s ease; }
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--moss); color:var(--paper); }
.btn-ghost{ border:1px solid var(--line-strong); color:var(--ink); }
.btn:focus-visible, .nav-links a:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; }
.serve{ padding:clamp(3.5rem,7vw,6rem) 0; border-top:1px solid var(--line); }
.serve-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.25rem,3vw,2rem); }
.serve-card{ background:var(--paper-raised); border:1px solid var(--line); padding:1.6rem 1.5rem 1.7rem; border-radius:2px; }
.serve-no{ font-family:'IBM Plex Mono',monospace; font-size:0.8rem; color:var(--amber); }
.serve-card h3{ font-size:1.2rem; line-height:1.3; margin:0.6rem 0 0.7rem; }
.serve-card p{ margin:0; color:var(--ink-soft); font-size:0.98rem; }
.steps{ list-style:none; padding:0; margin:clamp(2.5rem,5vw,3.5rem) 0 0; display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; counter-reset:s; }
.steps li{ border-top:2px solid var(--moss); padding-top:0.9rem; color:var(--ink-soft); font-size:0.95rem; counter-increment:s; }
.steps li span{ display:block; font-weight:600; color:var(--ink); margin-bottom:0.3rem; }
.steps li span::before{ content:counter(s) ". "; font-family:'IBM Plex Mono',monospace; color:var(--moss); }
.note{ margin:2rem 0 0; font-size:0.82rem; color:var(--ink-soft); font-style:italic; }
@media (max-width:900px){ .serve-grid{ grid-template-columns:1fr; } .steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .steps{ grid-template-columns:1fr; } }
.contact{ padding:clamp(3.5rem,7vw,6rem) 0; background:var(--moss-tint); border-top:1px solid var(--line); }
.contact-inner{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:2rem; align-items:end; }
.contact h2{ font-size:clamp(1.5rem,3vw,2.1rem); line-height:1.3; margin-top:0.8rem; }
.contact-actions{ display:flex; flex-direction:column; gap:0.8rem; align-items:flex-start; }
@media (max-width:760px){ .contact-inner{ grid-template-columns:1fr; } }
.foot{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.foot a{ color:var(--ink-soft); }

/* nhãn mốc thời gian: đặt trên tiêu đề thay vì đè lên trục */
.stage-tick{ display:flex; position:static; width:auto; justify-content:flex-start; margin-bottom:0.35rem; }
.stage-tick .mark{ display:none; }
.chart{ grid-template-columns: 24px 1fr; }
.stage-dot{ left:calc(-1 * (clamp(1rem,3vw,2.25rem) + 12px) - 5px); top:0.45rem; }
.hero-meta{ gap:1.25rem 2rem; }
/* ---- multi-page ---- */
.chips{ display:flex; flex-wrap:wrap; gap:0.6rem; justify-content:center; margin:0 auto; }
.chip{ display:inline-block; padding:0.5rem 1.05rem; border:1px solid var(--line-strong); border-radius:999px; background:var(--paper); color:var(--ink); text-decoration:none; font-size:0.92rem; font-weight:500; transition:background .15s ease, color .15s ease; }
.chip:hover, .chip.on{ background:var(--moss); color:var(--paper); border-color:var(--moss); }
.home-hero{ padding:clamp(2.5rem,6vw,4rem) 0 clamp(1.5rem,4vw,2.5rem); text-align:center; }
.home-hero .avatar{ width:150px; height:150px; border-radius:50%; object-fit:cover; object-position:top; border:4px solid var(--paper-raised); box-shadow:var(--shadow); margin:1.8rem auto 1.2rem; display:block; }
.home-hero h1{ font-size:clamp(2.2rem,5vw,3.4rem); line-height:1.05; }
.home-hero .sub{ margin:0.7rem auto 0; max-width:40rem; color:var(--ink-soft); font-size:1.08rem; }
.home-hero .hero-actions{ justify-content:center; opacity:1; animation:none; }
.posts{ padding:clamp(2rem,5vw,3.5rem) 0 clamp(3rem,6vw,5rem); border-top:1px solid var(--line); }
.posts h2.sec{ font-size:clamp(1.6rem,3vw,2.1rem); margin-bottom:1.6rem; }
.post-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.1rem,2.5vw,1.6rem); }
.post-card{ display:flex; flex-direction:column; background:var(--paper-raised); border:1px solid var(--line); border-radius:4px; padding:1.4rem 1.35rem 1.3rem; text-decoration:none; color:var(--ink); transition:transform .18s ease, box-shadow .18s ease; }
.post-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.post-tag{ font-size:0.7rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--moss); }
.post-card h3{ font-size:1.12rem; line-height:1.35; margin:0.55rem 0 0.6rem; }
.post-card p{ margin:0; color:var(--ink-soft); font-size:0.93rem; flex:1; }
.post-more{ margin-top:0.9rem; font-weight:600; font-size:0.88rem; color:var(--amber); }
@media (max-width:900px){ .post-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .post-grid{ grid-template-columns:1fr; } }
.about-strip{ padding:clamp(2.5rem,6vw,4rem) 0; background:var(--paper-raised); border-top:1px solid var(--line); }
.about-strip .wrap{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2rem; align-items:center; }
.about-strip p{ margin:0.6rem 0 0; color:var(--ink-soft); max-width:44rem; }
@media (max-width:760px){ .about-strip .wrap{ grid-template-columns:1fr; } }
.article{ padding:clamp(2rem,5vw,3.5rem) 0 clamp(2.5rem,6vw,4rem); }
.article .inner{ max-width:44rem; margin:0 auto; }
.crumb{ font-size:0.85rem; color:var(--ink-soft); margin-bottom:1.2rem; }
.crumb a{ color:var(--ink-soft); }
.article h1{ font-size:clamp(1.9rem,4vw,2.7rem); line-height:1.2; margin:0.6rem 0 0.9rem; }
.article .lead{ font-family:'Bitter',serif; font-style:italic; font-size:1.15rem; color:var(--ink-soft); margin:0 0 1rem; }
.article .meta{ font-family:'IBM Plex Mono',monospace; font-size:0.78rem; color:var(--ink-soft); padding-bottom:1.3rem; border-bottom:1px solid var(--line); margin-bottom:1.6rem; }
.prose h2{ font-size:1.45rem; margin:2.1rem 0 0.7rem; line-height:1.3; }
.prose p{ margin:0 0 1rem; }
.prose em{ font-family:'Bitter',serif; }
.prose ul, .prose ol{ padding-left:1.3rem; margin:0 0 1.1rem; }
.prose li{ margin-bottom:0.35rem; }
.prose strong{ color:var(--ink); }
.prose blockquote{ margin:1.5rem 0; padding:1rem 1.3rem; border-left:3px solid var(--amber); background:var(--paper-raised); font-family:'Bitter',serif; font-style:italic; font-size:1.08rem; }
.prose table{ width:100%; border-collapse:collapse; margin:1rem 0 1.4rem; font-size:0.95rem; }
.prose th, .prose td{ border:1px solid var(--line-strong); padding:0.55rem 0.7rem; text-align:left; vertical-align:top; }
.prose th{ background:var(--moss-tint); }
.prose .tip{ font-size:0.92rem; background:var(--moss-tint); padding:0.8rem 1rem; border-radius:3px; }
.author{ display:flex; gap:1rem; align-items:center; margin-top:2.5rem; padding:1.2rem; border:1px solid var(--line); background:var(--paper-raised); border-radius:4px; }
.author img{ width:64px; height:64px; border-radius:50%; object-fit:cover; object-position:top; flex:none; }
.author b{ display:block; font-family:'Bitter',serif; }
.author span{ font-size:0.9rem; color:var(--ink-soft); }
.disclaimer{ margin-top:1.5rem; font-size:0.84rem; color:var(--ink-soft); font-style:italic; }
.related{ max-width:72rem; margin:clamp(2.5rem,5vw,3.5rem) auto 0; }
.post-fig{ margin:-1.4rem -1.35rem 1rem; border-bottom:1px solid var(--line); line-height:0; }
.post-fig svg{ width:100%; height:auto; display:block; border-radius:4px 4px 0 0; }
.hero-fig{ margin:0 0 1.8rem; }
.hero-fig svg{ width:100%; height:auto; display:block; border-radius:12px; box-shadow:var(--shadow); }
.mh text{ font-family:"Be Vietnam Pro", system-ui, sans-serif; }
.ref{ margin-top:2rem; padding:1rem 1.2rem; border-left:3px solid var(--moss); background:var(--moss-tint); border-radius:3px; font-size:0.95rem; }
.ref ul{ margin:0.4rem 0 0; padding-left:1.2rem; }
.ref a{ color:var(--moss); }
.slogan{ margin-top:1.2rem; font-family:'Bitter',serif; font-weight:700; font-size:clamp(1.1rem,2vw,1.35rem); color:var(--amber); opacity:0; animation:riseIn .8s ease-out .38s forwards; }
.home-hero .slogan{ opacity:1; animation:none; margin:0.9rem 0 0; }
.vision, .myths, .diff, .who{ padding:clamp(3rem,6vw,5rem) 0; border-top:1px solid var(--line); }
.myths, .who{ background:var(--paper-raised); }
.vm-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.vm-card{ border-top:3px solid var(--moss); padding-top:1rem; }
.vm-card p{ margin:0.4rem 0 0; color:var(--ink-soft); }
.values{ list-style:none; padding:0; margin:2.2rem 0 0; display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; }
.values li{ background:var(--paper-raised); border:1px solid var(--line); padding:1rem; border-radius:4px; font-size:0.9rem; color:var(--ink-soft); }
.values b{ display:block; font-family:'Bitter',serif; font-size:1.2rem; color:var(--amber); margin-bottom:0.3rem; }
.myth-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.myth{ background:var(--paper); border:1px solid var(--line); border-radius:4px; padding:1.2rem 1.3rem; }
.myth .m-x{ margin:0 0 0.5rem; font-family:'Bitter',serif; font-weight:700; color:var(--ink); text-decoration:line-through; text-decoration-color:var(--amber); text-decoration-thickness:2px; }
.myth p{ margin:0; color:var(--ink-soft); font-size:0.95rem; }
.diff-grid, .who-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.diff-grid div, .who-grid div{ background:var(--paper); border:1px solid var(--line); border-radius:4px; padding:1.1rem 1.2rem; }
.diff-grid b, .who-grid b{ display:block; font-family:'Bitter',serif; font-size:1.08rem; margin-bottom:0.35rem; }
.diff-grid span, .who-grid span{ color:var(--ink-soft); font-size:0.94rem; }
.who-grid span{ font-style:italic; }
@media (max-width:900px){ .vm-grid, .myth-grid, .diff-grid, .who-grid{ grid-template-columns:1fr 1fr; } .values{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .vm-grid, .myth-grid, .diff-grid, .who-grid, .values{ grid-template-columns:1fr; } }
.addr{ margin:0 0 0.4rem; font-size:0.95rem; color:var(--ink-soft); line-height:1.6; }
.addr b{ display:block; color:var(--ink); }
.related h2{ font-size:1.4rem; margin-bottom:1.1rem; }