:root {
  --ink: #252c27;
  --ink-soft: #344038;
  --paper: #f6f1e7;
  --white: #fffdf8;
  --gold: #a83d30;
  --gold-dark: #943428;
  --text: #292d27;
  --muted: #656b62;
  --line: #d8d0bf;
}

body {
  background-color: var(--paper);
  background-image: radial-gradient(rgba(64, 55, 39, .055) .55px, transparent .7px);
  background-size: 7px 7px;
}

::selection { background: #d7b9a2; color: var(--ink); }
.site-header { color: var(--ink); background: rgba(246, 241, 231, .91); border-bottom: 1px solid rgba(67, 61, 48, .17); backdrop-filter: blur(16px); }
.brand-mark { background: var(--gold); border: 1px solid var(--gold); color: #fff8ec; font: 500 24px/1 var(--serif); letter-spacing: 0; padding: 0; box-shadow: inset 0 0 0 3px var(--gold), inset 0 0 0 4px rgba(255, 248, 236, .7); }
.brand-cn { letter-spacing: .17em; }
.brand-en { color: #837f72; letter-spacing: .14em; }
.desktop-nav a { color: #495049; }
.desktop-nav a:hover, .desktop-nav a:focus-visible { color: var(--gold); }
.header-cta { color: var(--gold); border-color: var(--gold); }
.header-cta:hover, .header-cta:focus-visible { background: var(--gold); color: #fff; }
.menu-toggle { color: var(--ink); }

.hero { min-height: 790px; height: min(900px, 100svh); color: var(--ink); background: var(--paper); }
.hero::before { background: linear-gradient(90deg, #f6f1e7 0%, #f6f1e7 38%, rgba(246, 241, 231, .98) 47%, rgba(246, 241, 231, .72) 59%, rgba(246, 241, 231, .05) 81%); }
.hero-visual { inset: 116px 44px 82px 39%; background: #d4d1c6 url('hero-chinese.jpg') 68% center / cover no-repeat; filter: saturate(.63); box-shadow: 18px 18px 0 #e2dbcc; }
.hero-visual::after { background: linear-gradient(180deg, rgba(246, 241, 231, .08), transparent 55%, rgba(34, 42, 36, .12)); }
.hero-grid { display: none; }
.hero-side-note { position: absolute; z-index: 4; top: 154px; right: 70px; writing-mode: vertical-rl; letter-spacing: .5em; padding: 20px 12px 18px; background: rgba(246, 241, 231, .9); color: var(--gold); font: 500 14px/1.3 var(--serif); border-top: 2px solid var(--gold); }
.hero-content { padding-top: 103px; }
.eyebrow { color: var(--gold); letter-spacing: .15em; }
.eyebrow::before { width: 28px; height: 2px; }
.hero h1 { max-width: 780px; font-size: clamp(50px, 4.9vw, 70px); line-height: 1.46; letter-spacing: .045em; margin: 31px 0 24px; color: #252c27; }
.hero h1 em { color: var(--gold); }
.hero-desc { color: #545b52; font-size: 16px; max-width: 450px; line-height: 2.1; }
.primary-link { color: #fffdf8; background: var(--gold); box-shadow: 5px 5px 0 #d5c7b5; }
.primary-link:hover, .primary-link:focus-visible { color: #fff; background: #8e3026; }
.hero-bottom { color: #64695e; bottom: 31px; }
.hero-bottom-inner { border-top: 1px solid var(--line); padding-top: 18px; }
.hero-meta strong { color: var(--gold); }
.scroll-cue::after { background: var(--gold); height: 28px; }

.section { padding-top: 114px; padding-bottom: 116px; }
.section-kicker { color: var(--gold); font-family: var(--serif); font-size: 15px; font-weight: 500; letter-spacing: .3em; }
.section-title { letter-spacing: .08em; }
.section-head { border-bottom-color: #cfc5b3; }
.practice { min-height: 382px; }
.practice:hover { background: rgba(229, 220, 203, .6); }
.practice-num { color: var(--gold); font-family: var(--serif); font-size: 13px; }
.practice-icon { color: #454f47; }
.practice-tags span { border-color: #d2c7b4; color: #706e63; }

.about { background: #e8e0d1; }
.about-art { background: #c9c5b8; box-shadow: -17px 17px 0 #d2c7b4; }
.about-art::before { background: linear-gradient(180deg, transparent 55%, rgba(32, 39, 32, .36)), url('hero-chinese.jpg') 68% center / cover; filter: saturate(.55); }
.about-art::after { content: "明 理 慎 行"; font-family: var(--serif); font-size: 14px; letter-spacing: .4em; }
.about-seal { width: 108px; height: 108px; right: -28px; bottom: 38px; border: 7px solid #e8e0d1; border-radius: 0; color: #fff6e9; background: var(--gold); font-size: 23px; letter-spacing: .15em; box-shadow: inset 0 0 0 2px rgba(255, 246, 233, .85), inset 0 0 0 8px var(--gold); }
.about-quote { border-left: 2px solid var(--gold); padding-left: 24px; }
.text-link { border-bottom-color: var(--gold); }

.method { background: #f6f1e7; }
.method-item { border-top: 1px solid #b5aa97; }
.method-item .number { color: var(--gold); }
.method-item h3 { letter-spacing: .06em; }
.contact { background: #252c27; }
.contact::before { content: "法"; right: -55px; bottom: -170px; color: rgba(246, 241, 231, .035); font-size: 520px; }
.contact .section-kicker, .contact-row span { color: #d48b75; }
.contact h2 em { color: #d48b75; }
.contact-intro { color: #d2d6ca; }
.contact-note { color: #a9b1a7; }
.footer { background: #1b211d; }
.footer a:hover { color: #d48b75; }
:focus-visible { outline-color: var(--gold); }

@media (max-width: 900px) {
  .hero-visual { left: 35%; right: 24px; }
  .hero::before { background: linear-gradient(90deg, #f6f1e7 0%, rgba(246, 241, 231, .98) 42%, rgba(246, 241, 231, .65) 68%, rgba(246, 241, 231, .08) 100%); }
  .hero-side-note { right: 45px; }
}
@media (max-width: 680px) {
  .site-header { border-bottom-color: rgba(67, 61, 48, .17); }
  .desktop-nav { background: #f6f1e7; border-bottom-color: var(--line); }
  .desktop-nav a { color: var(--ink); }
  .hero { min-height: 795px; height: 100svh; max-height: 900px; }
  .hero-visual { inset: 92px 20px 325px 20px; opacity: .88; background-position: 71% center; box-shadow: 9px 9px 0 #e2dbcc; }
  .hero::before { z-index: 1; background: linear-gradient(180deg, rgba(246, 241, 231, .08) 12%, rgba(246, 241, 231, .14) 29%, #f6f1e7 58%, #f6f1e7 100%); }
  .hero-side-note { top: 113px; right: 36px; font-size: 12px; padding: 12px 8px; }
  .hero-content { justify-content: flex-end; padding-top: 76px; padding-bottom: 135px; }
  .eyebrow { font-size: 11px; letter-spacing: .07em; }
  .hero h1 { font-size: clamp(39px, 10.5vw, 57px); line-height: 1.42; margin: 20px 0 12px; }
  .hero-desc { color: #596057; line-height: 1.85; font-size: 15px; margin-bottom: 22px; }
  .hero-bottom { bottom: 17px; }
  .hero-meta { color: #64695e; }
  .section { padding-top: 80px; padding-bottom: 78px; }
  .practice { min-height: 0; }
  .about { padding-top: 72px; }
  .about-art { box-shadow: -10px 10px 0 #d2c7b4; }
  .about-seal { right: -17px; bottom: 18px; width: 86px; height: 86px; font-size: 19px; }
  .about-quote { padding-left: 16px; }
  .contact::before { font-size: 310px; right: -10px; bottom: -70px; }
}