:root {
  --depth-shadow: 0 16px 38px rgba(54, 47, 29, .10);
  --depth-shadow-hover: 0 22px 42px rgba(54, 47, 29, .15);
  --tea-deep: #344b37;
  --tea-leaf: #738665;
}

body {
  background-image: radial-gradient(ellipse at 8% 12%, rgba(220, 213, 185, .20), transparent 32%),
                    radial-gradient(ellipse at 92% 48%, rgba(207, 218, 192, .18), transparent 30%);
}

.intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 30px 0 20px;
  padding: 48px 28px 40px;
  border: 1px solid rgba(112, 105, 79, .16);
  border-bottom: 1px solid rgba(112, 105, 79, .16);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255,255,252,.98), rgba(242,239,226,.96));
  box-shadow: var(--depth-shadow), inset 0 1px 0 rgba(255,255,255,.95);
}
.intro::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 380px;
  height: 220px;
  right: -70px;
  top: -105px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(220, 202, 139, .26), transparent 70%);
}

.hero {
  gap: 16px;
  margin-top: 24px;
}
.hero > article {
  min-width: 0;
  padding: 16px !important;
  overflow: hidden;
  border: 1px solid rgba(112, 105, 79, .14) !important;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(255,255,252,.96), rgba(245,242,232,.96));
  box-shadow: 0 12px 28px rgba(54, 47, 29, .08), inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform .25s ease, box-shadow .25s ease;
}
.hero > article:hover {
  transform: translateY(-4px);
  box-shadow: var(--depth-shadow-hover);
}
.hero > .panel {
  border-radius: 22px;
  box-shadow: 0 14px 30px rgba(25, 28, 20, .19), inset 0 1px 0 rgba(255,255,255,.08);
}

.ph {
  overflow: hidden;
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.23), 0 8px 18px rgba(42, 43, 33, .10);
}
.ph.tall { border-radius: 18px; }

h2.sec {
  position: relative;
  padding: 18px 20px 14px;
  border: 1px solid rgba(112, 105, 79, .13);
  border-top: 4px solid var(--tea-deep);
  border-radius: 14px;
  background: linear-gradient(110deg, rgba(255,255,251,.95), rgba(241,238,226,.92));
  box-shadow: 0 9px 22px rgba(54, 47, 29, .07), inset 0 1px 0 #fff;
}

.dark {
  position: relative;
  isolation: isolate;
  max-width: 1260px;
  margin: 58px auto;
  overflow: hidden;
  border-radius: 30px;
  background: radial-gradient(ellipse at 82% 12%, rgba(199, 174, 104, .18), transparent 28%),
              linear-gradient(145deg, #344536, #26352a 72%, #202d24);
  box-shadow: 0 22px 48px rgba(35, 47, 36, .19), inset 0 1px 0 rgba(255,255,255,.08);
}
.dark h2 {
  padding: 18px 18px 14px;
  border-top-color: #c9ae68;
  border-radius: 12px;
  background: linear-gradient(100deg, rgba(255,255,255,.07), rgba(255,255,255,.015));
}
.tl { gap: 14px; }
.tl > div {
  padding: 14px;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 18px;
  background: linear-gradient(155deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 12px 24px rgba(0,0,0,.10);
}

.steps { gap: 16px; }
.steps > div {
  padding: 14px;
  border: 1px solid rgba(112, 105, 79, .14) !important;
  border-radius: 18px;
  background: linear-gradient(150deg, rgba(255,255,252,.98), rgba(241,238,226,.94));
  box-shadow: 0 10px 24px rgba(54, 47, 29, .08), inset 0 1px 0 #fff;
  transition: transform .22s ease, box-shadow .22s ease;
}
.steps > div:hover { transform: translateY(-3px); box-shadow: var(--depth-shadow); }

.grid { gap: 18px; }
.grid > *, .grid > :nth-child(4n) {
  padding: 12px;
  border: 1px solid rgba(112, 105, 79, .13) !important;
  border-radius: 18px;
  background: linear-gradient(155deg, rgba(255,255,252,.98), rgba(243,240,230,.96));
  box-shadow: 0 9px 22px rgba(54, 47, 29, .07), inset 0 1px 0 #fff;
  transition: transform .22s ease, box-shadow .22s ease;
}
.grid > *:hover { transform: translateY(-4px); box-shadow: var(--depth-shadow-hover); }
.grid .ph { border-radius: 13px; }
.pi { transition: background .2s ease, transform .2s ease; }
.pi:hover { transform: translateX(3px); background: rgba(255,255,255,.055); }

.story-click { cursor: pointer; }
.story-click:focus-visible { outline: 3px solid #927b42; outline-offset: 4px; border-radius: 12px; }
.article-page {
  position: fixed;
  z-index: 80;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  color: var(--fg);
  background-image: radial-gradient(ellipse at 12% 0%, rgba(220,213,185,.28), transparent 34%),
                    radial-gradient(ellipse at 92% 45%, rgba(207,218,192,.20), transparent 32%);
}
.article-page[hidden] { display: none; }
.article-shell { width: min(100%, 920px); min-height: 100%; margin: 0 auto; padding: 0 34px 64px; }
.article-top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--soft); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px); }
.article-back { border: 1px solid rgba(112,105,79,.22); border-radius: 999px; background: rgba(255,255,251,.74); color: #344b37; padding: 10px 18px; font: inherit; cursor: pointer; }
.article-back:hover { background: #344b37; border-color: #344b37; color: #fff; }
.article-back span { padding-right: 7px; }
.article-brand { color: var(--mute); font-size: 14px; letter-spacing: .12em; }
.article-reading { max-width: 760px; margin: 56px auto 0; }
.article-kicker { color: #718261; font-size: 14px; letter-spacing: .12em; }
.article-kicker span, .article-byline span { padding: 0 8px; color: #b9a978; }
.article-reading h1 { margin: 14px 0 18px; font-size: clamp(32px, 5vw, 52px); line-height: 1.35; text-decoration: none; text-underline-offset: unset; }
.article-lead { margin: 0; color: var(--mute); font-size: 19px; line-height: 1.9; }
.article-byline { margin: 22px 0 28px; color: var(--mute); font-size: 13px; }
.article-cover { overflow: hidden; margin: 0 0 42px; border: 1px solid rgba(112,105,79,.14); border-radius: 24px; box-shadow: 0 20px 42px rgba(54,47,29,.13); }
.article-cover .ph { width: 100%; aspect-ratio: 16 / 8; border-radius: 0; box-shadow: none; font-size: 88px; }
.article-prose { font-size: 18px; line-height: 2.15; letter-spacing: .025em; }
.article-prose p { margin: 0 0 1.55em; text-indent: 2em; white-space: pre-line; }
.article-endmark { margin: 50px 0 30px; color: #8b805f; text-align: center; letter-spacing: .2em; font-size: 14px; }
.article-bottom-back { display: block; margin: 0 auto; }
body.article-open { overflow: hidden; }
@media(max-width:600px) {
  .article-shell { padding: 0 18px 38px; }
  .article-top { padding: 12px 0; }
  .article-back { padding: 8px 13px; font-size: 14px; }
  .article-brand { font-size: 12px; }
  .article-reading { margin-top: 36px; }
  .article-lead { font-size: 17px; }
  .article-cover { margin-bottom: 30px; border-radius: 17px; }
  .article-cover .ph { aspect-ratio: 4 / 3; }
  .article-prose { font-size: 16px; line-height: 2; }
}

.rv { gap: 14px; }
.rv > div {
  padding: 18px;
  border: 1px solid rgba(112, 105, 79, .13) !important;
  border-radius: 18px;
  background: linear-gradient(150deg, rgba(255,255,252,.98), rgba(242,239,228,.95));
  box-shadow: 0 10px 24px rgba(54, 47, 29, .07), inset 0 1px 0 #fff;
}

.cta2 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 48px 24px;
  border: 1px solid rgba(112, 105, 79, .12);
  border-radius: 28px;
  background: radial-gradient(ellipse at 50% 10%, rgba(255,255,255,.95), rgba(238,234,216,.40) 70%, transparent 100%);
}
.cta2::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: min(860px, 91%);
  height: calc(100% - 20px);
  transform: translate(-50%, -50%);
  border: 1px solid rgba(153, 132, 75, .18);
  border-radius: 48px;
  background: linear-gradient(135deg, #f7edcf 0%, #e9dfbd 54%, #d9c99b 100%);
  box-shadow: 0 18px 36px rgba(79, 66, 34, .16), inset 0 1px 0 rgba(255,255,255,.92);
}
.cta2 h2, .cta2 a { position: relative; z-index: 1; }
.cta2 a {
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(25, 28, 20, .18), inset 0 1px 0 rgba(255,255,255,.14);
  transition: transform .2s ease, box-shadow .2s ease;
}
.cta2 a:hover { transform: translateY(-2px); box-shadow: 0 12px 22px rgba(25,28,20,.22); }

.btn, .cta, .row button, .sub { transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.btn:hover, .cta:hover, .row button:hover, .sub:hover { transform: translateY(-2px); filter: brightness(1.03); }

@media (max-width: 860px) {
  .dark { margin: 42px 14px; border-radius: 24px; }
  .tl, .steps { gap: 12px; }
  .grid { gap: 14px; }
}
@media (max-width: 600px) {
  .intro { padding: 30px 18px 26px; border-radius: 20px; }
  .hero { gap: 12px; }
  .hero > article { padding: 14px !important; border-radius: 18px; }
  h2.sec { padding: 14px 14px 12px; border-radius: 12px; }
  .dark { margin: 36px 8px; border-radius: 20px; }
  .tl { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .grid > * { padding: 8px; border-radius: 14px; }
  .rv { gap: 10px; }
  .rv > div { padding: 14px; }
  .cta2 { padding: 34px 14px; border-radius: 20px; }
  .cta2::before { width: 94%; height: calc(100% - 12px); border-radius: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}