:root {
  color-scheme: light;
  --paper: #f6f0e5;
  --paper-deep: #ecdfc9;
  --ink: #32271f;
  --muted: #75665a;
  --orange: #b85c28;
  --orange-deep: #8e3f1c;
  --green: #5e7258;
  --line: rgba(72, 52, 39, .14);
  --white: #fffdf8;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 8%, rgba(197, 113, 56, .12), transparent 25rem),
    linear-gradient(180deg, var(--paper) 0%, #fbf7ef 55%, var(--paper) 100%);
  font-family: "Songti SC", "STSong", "Noto Serif SC", "PingFang SC", serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.hero {
  position: relative;
  min-height: 430px;
  padding: 82px 24px 96px;
  overflow: hidden;
  text-align: center;
  border-bottom: 1px solid var(--line);
}

.hero::before,
.hero::after {
  position: absolute;
  width: 260px;
  height: 260px;
  content: "";
  border: 1px solid rgba(136, 67, 29, .16);
  border-radius: 50%;
}

.hero::before { top: -145px; left: -115px; }
.hero::after { right: -135px; bottom: -150px; }

.hero__eyebrow,
.section-heading p {
  margin: 0 0 18px;
  color: var(--orange);
  font: 600 11px/1.2 -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  letter-spacing: .22em;
}

h1 {
  margin: 0;
  font-size: clamp(38px, 8vw, 68px);
  font-weight: 600;
  letter-spacing: .08em;
}

h1 span { color: var(--orange); font-weight: 400; }

.hero__title {
  margin: 14px 0 0;
  color: var(--orange-deep);
  font-size: clamp(24px, 5vw, 36px);
  letter-spacing: .32em;
  text-indent: .32em;
}

.hero__intro {
  max-width: 560px;
  margin: 30px auto 0;
  color: var(--muted);
  font: 400 16px/1.9 -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
}

.peel { position: relative; width: 84px; height: 44px; margin: 30px auto 0; }
.peel i { position: absolute; display: block; width: 38px; height: 28px; background: linear-gradient(145deg, #d98742, #9e431d); border-radius: 75% 18% 70% 24%; box-shadow: inset 0 0 0 1px rgba(75, 31, 13, .22), 0 7px 12px rgba(85, 44, 22, .1); transform: rotate(-20deg); }
.peel i:nth-child(2) { left: 26px; top: 5px; transform: rotate(23deg); }
.peel i:nth-child(3) { right: 0; top: -3px; transform: rotate(62deg); }

main { padding: 68px 22px 88px; }
.guide { width: min(1120px, 100%); margin: 0 auto; }
.section-heading { margin-bottom: 34px; text-align: center; }
.section-heading h2 { margin: 0; font-size: clamp(28px, 5vw, 42px); font-weight: 600; letter-spacing: .08em; }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.card { overflow: hidden; background: rgba(255, 253, 248, .92); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 18px 42px rgba(70, 48, 32, .08); transition: transform .22s ease, box-shadow .22s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(70, 48, 32, .13); }
.card__cover { position: relative; display: block; height: 310px; overflow: hidden; background: var(--paper-deep); }
.card__cover::after { position: absolute; inset: auto 0 0; height: 32%; content: ""; background: linear-gradient(transparent, rgba(34, 23, 16, .3)); pointer-events: none; }
.card__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.card:hover .card__cover img { transform: scale(1.025); }
.card:nth-child(2) .card__cover img { object-fit: contain; }
.card:nth-child(3) .card__cover img,
.card:nth-child(4) .card__cover img { object-position: top; }
.card__number { position: absolute; z-index: 1; right: 18px; bottom: 16px; color: white; font: 500 15px/1 -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: .14em; }
.card__body { padding: 26px 28px 28px; }
.card__label { margin: 0 0 9px; color: var(--orange); font: 600 12px/1.2 -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; letter-spacing: .18em; }
.card h3 { margin: 0; font-size: 27px; font-weight: 600; }
.card__body > p:not(.card__label) { min-height: 54px; margin: 14px 0 20px; color: var(--muted); font: 400 15px/1.8 -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; }
.card__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; padding: 0 18px; border-radius: 999px; font: 600 14px/1 -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; text-decoration: none; }
.button--primary { color: white; background: var(--orange-deep); box-shadow: 0 6px 16px rgba(142, 63, 28, .18); }
.button--primary::after { margin-left: 9px; content: "↗"; font-size: 15px; }
.button--text { color: var(--orange-deep); border: 1px solid rgba(142, 63, 28, .28); }
.button:focus-visible, .card__cover:focus-visible { outline: 3px solid rgba(184, 92, 40, .36); outline-offset: 3px; }

footer { padding: 45px 20px 54px; text-align: center; border-top: 1px solid var(--line); color: var(--muted); font: 400 13px/1.8 -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; }
footer p { margin: 2px 0; }
.footer__brand { color: var(--ink); font-family: "Songti SC", "STSong", serif; font-size: 19px; letter-spacing: .12em; }
.footer__note { margin-top: 12px; color: #968679; font-size: 12px; }

@media (max-width: 700px) {
  .hero { min-height: 360px; padding: 62px 22px 70px; }
  .hero__eyebrow { letter-spacing: .12em; }
  main { padding: 48px 15px 64px; }
  .grid { grid-template-columns: 1fr; gap: 18px; }
  .card { border-radius: 18px; }
  .card__cover { height: 255px; }
  .card__body { padding: 22px 22px 24px; }
  .card h3 { font-size: 24px; }
  .card__body > p:not(.card__label) { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

.article-hero { max-width: 980px; margin: 0 auto; padding: 38px 24px 30px; border-bottom: 1px solid var(--line); }
.back { color: var(--orange-deep); font: 600 14px/1.2 -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; text-decoration: none; }
.article-hero p { margin: 38px 0 9px; color: var(--orange); font: 600 12px/1.2 -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; letter-spacing: .18em; }
.article-hero h1 { font-size: clamp(32px, 6vw, 52px); letter-spacing: .06em; }
.article-actions { margin-top: 20px; }
.article-actions a { display: inline-flex; min-height: 38px; align-items: center; padding: 0 15px; color: var(--orange-deep); border: 1px solid rgba(142, 63, 28, .28); border-radius: 999px; font: 600 13px/1 -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; text-decoration: none; }
.article { width: min(900px, calc(100% - 32px)); margin: 0 auto; padding: 38px 0 80px; }
.article-intro { margin: 0 0 30px; padding: 18px 20px; color: var(--muted); background: rgba(255,253,248,.75); border-left: 3px solid var(--orange); font: 400 15px/1.8 -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; }
.source-text { color: #4a3b31; font: 400 16px/1.9 -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; }
.source-text p { margin: 0 0 13px; }
.source-text .article-section-title { margin: 50px 0 17px; padding-top: 22px; color: var(--orange-deep); border-top: 1px solid var(--line); font-family: "Songti SC", "STSong", serif; font-size: 25px; font-weight: 700; line-height: 1.45; }
.source-text .article-lead { padding: 15px 18px; background: #fffaf0; border-radius: 8px; }
.gallery { margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--line); }
.gallery h2 { margin: 0 0 20px; font-size: 28px; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gallery-grid a { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px; background: var(--paper-deep); }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
.gallery-grid a:hover img { transform: scale(1.04); }
.page-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.page-stack--single { max-width: 880px; margin: 0 auto; }
.page-stack img, .single-image img { display: block; width: 100%; height: auto; background: white; box-shadow: 0 10px 28px rgba(68, 47, 31, .1); }
.single-image { overflow: hidden; border-radius: 10px; }
@media (max-width: 620px) { .article-hero { padding: 27px 20px 25px; }.article-hero p { margin-top: 30px; }.article { width: min(100% - 24px, 900px); padding-top: 25px; }.gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }.source-text { font-size: 15px; }.source-text .article-section-title { font-size: 22px; margin-top: 38px; } }