:root {
  --paper: #e9e0d2;
  --paper-light: #f3ecdf;
  --ink: #17130f;
  --muted: #736b61;
  --red: #c43b1c;
  --orange: #f16a37;
  --hair: rgba(23, 19, 15, .24);
  --header-h: 72px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { color: inherit; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 16px; top: -80px; z-index: 1000;
  background: var(--paper-light); padding: 10px 14px; border: 1px solid var(--ink);
}
.skip-link:focus { top: 12px; }

.site-header {
  position: fixed; inset: 0 0 auto; height: var(--header-h); z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(20px, 4vw, 72px);
  background: rgba(233, 224, 210, .94);
  border-bottom: 1px solid var(--hair);
  backdrop-filter: blur(12px);
}
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark { display: block; width: 38px; height: 38px; flex: 0 0 auto; overflow: visible; }
.brand-mark__tile, .brand-mark__layer { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
.brand-mark__fire { fill: var(--red); }
.brand b { display: block; font-size: 16px; letter-spacing: .08em; }
.brand small { display: block; color: var(--muted); font: 10px/1.4 ui-monospace, Consolas, monospace; letter-spacing: .09em; }
.site-nav { display: flex; align-items: center; gap: clamp(18px, 2.7vw, 46px); font-size: 13px; }
.site-nav a { position: relative; padding: 24px 0; }
.site-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 18px; height: 2px; background: var(--red); transition: right .25s ease; }
.site-nav a:hover::after, .site-nav a:focus-visible::after { right: 0; }
.menu-toggle { display: none; width: 42px; height: 42px; padding: 11px 7px; border: 0; background: transparent; }
.menu-toggle span:not(.sr-only) { display: block; height: 1px; margin: 6px 0; background: currentColor; transition: transform .2s ease; }

main { overflow: clip; }
section { position: relative; scroll-margin-top: var(--header-h); }
.section-paper { background: var(--paper); }
.section-dark { color: var(--paper-light); background: var(--ink); }
.section-ink { color: var(--paper-light); background: #100e0c; }
.section-index { margin: 0 0 22px; font: 11px/1.2 ui-monospace, Consolas, monospace; letter-spacing: .2em; text-transform: uppercase; }
.section-index.red { color: var(--red); }
.section-index.orange { color: var(--orange); }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { letter-spacing: -.055em; line-height: .95; }
h2 { font-size: clamp(48px, 7vw, 112px); margin-bottom: 28px; }
em { font-family: "STSong", "Songti SC", serif; font-weight: 400; }
.media-frame { position: relative; margin: 0; overflow: hidden; }
.text-link { display: inline-flex; align-items: center; gap: 14px; padding: 9px 0; border-bottom: 1px solid currentColor; font-size: 13px; }
.text-link span { transition: transform .2s ease; }
.text-link:hover span, .text-link:focus-visible span { transform: translate(3px, 3px); }
.text-link.light { color: var(--paper-light); }

.hero { min-height: 900px; height: max(100vh, 900px); padding-top: var(--header-h); }
.hero-visual { position: absolute; inset: var(--header-h) 0 0 34%; }
.hero-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(23,19,15,.94) 0%, rgba(23,19,15,.48) 35%, transparent 70%); }
.hero-copy { position: relative; z-index: 4; width: min(660px, 59vw); padding: clamp(90px, 12vh, 150px) 0 0 clamp(28px, 6vw, 92px); }
.hero h1 { margin: 0 0 36px; font-size: clamp(70px, 9.8vw, 154px); font-weight: 900; }
.hero h1::after { content: ""; display: block; width: 90px; height: 5px; margin-top: 30px; background: var(--red); transform: skewX(-24deg); }
.hero-lead { width: min(520px, 100%); font-family: "STSong", "Songti SC", serif; font-size: clamp(17px, 1.55vw, 23px); color: rgba(243,236,223,.8); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px 34px; margin: 36px 0; }
.scroll-cue { position: absolute; z-index: 5; left: 22px; bottom: 32px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.scroll-cue span { font: 9px/1 ui-monospace, Consolas, monospace; letter-spacing: .25em; writing-mode: vertical-rl; }
.scroll-cue i { display: block; width: 1px; height: 58px; background: var(--orange); }

.material { min-height: 980px; padding: 110px clamp(24px, 6vw, 90px) 100px; }
.vertical-title { position: absolute; z-index: 4; left: clamp(20px, 3vw, 46px); top: 110px; display: flex; flex-direction: column; align-items: center; }
.vertical-title span { color: var(--red); font: 36px/1 ui-monospace, Consolas, monospace; }
.vertical-title h2 { margin: 18px 0 0; font: 700 clamp(24px, 2.2vw, 36px)/1.1 "STSong", "Songti SC", serif; writing-mode: vertical-rl; letter-spacing: .16em; }
.material-visual { width: min(980px, 76vw); height: 660px; margin: 0 auto; }
.material-notes { position: absolute; z-index: 5; right: clamp(28px, 5vw, 80px); top: 240px; width: min(300px, 25vw); }
.material-notes div { padding: 18px 0; border-top: 1px solid var(--red); }
.material-notes b { font-family: "STSong", "Songti SC", serif; font-size: 18px; }
.material-notes p { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.material-statement { max-width: 780px; margin: 60px auto 0; font: 400 clamp(30px, 4.3vw, 66px)/1.18 "STSong", "Songti SC", serif; }
.material-statement em { color: var(--red); }

.products { padding: 110px 0 0; }
.inline-heading { display: grid; grid-template-columns: 1fr 2.2fr 1fr; gap: 4vw; align-items: end; padding: 0 clamp(24px, 6vw, 90px) 74px; }
.inline-heading h2 { margin: 0; }
.inline-heading > p:last-child { color: var(--muted); font-size: 13px; }
.surface-ribbon { height: clamp(480px, 58vw, 800px); }
.direction-list { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; background: var(--ink); color: var(--paper-light); }
.direction-list li { min-height: 180px; padding: 28px clamp(18px, 3vw, 44px); border-right: 1px solid rgba(233,224,210,.22); }
.direction-list span { display: block; color: var(--orange); font: 12px/1 ui-monospace, Consolas, monospace; }
.direction-list b { display: block; margin: 42px 0 6px; font: 400 clamp(22px, 2.2vw, 34px)/1.1 "STSong", "Songti SC", serif; }
.direction-list small { color: rgba(243,236,223,.55); }

.space { min-height: 820px; }
.space-visual { height: min(78vw, 900px); min-height: 720px; }
.space-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(23,19,15,.78), transparent 55%); }
.space-copy { position: absolute; z-index: 4; left: clamp(28px, 7vw, 110px); top: 50%; transform: translateY(-50%); width: min(650px, 52vw); }
.space-copy h2 { font-size: clamp(54px, 7vw, 106px); }
.space-copy p { width: min(460px, 100%); color: rgba(243,236,223,.74); }
.space-copy em { color: var(--orange); }

.process { padding: 120px 0 0; }
.process-head { display: grid; grid-template-columns: .8fr 2fr 1fr; gap: 5vw; align-items: end; padding: 0 clamp(24px, 6vw, 90px) 70px; }
.process-head h2 { margin: 0; }
.process-head > p:last-child { color: var(--muted); font-size: 13px; }
.process-line { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0 clamp(24px, 6vw, 90px); list-style: none; border-top: 1px solid var(--hair); }
.process-line li { padding: 22px 14px 24px 0; border-right: 1px solid var(--hair); font-weight: 700; }
.process-line span { margin-right: 12px; color: var(--red); font: 11px ui-monospace, Consolas, monospace; }
.process-panorama { height: clamp(420px, 50vw, 720px); }
.process-split { display: grid; grid-template-columns: .7fr 1.7fr; min-height: 640px; background: var(--ink); color: var(--paper-light); }
.process-callout { position: relative; overflow: hidden; padding: 70px clamp(24px, 5vw, 74px); }
.process-callout .giant-word { position: absolute; top: 20px; left: -8px; color: rgba(241,106,55,.18); font-size: clamp(80px, 12vw, 190px); font-weight: 900; letter-spacing: -.08em; writing-mode: vertical-rl; }
.process-callout p { position: absolute; left: clamp(24px, 5vw, 74px); bottom: 60px; max-width: 320px; color: rgba(243,236,223,.68); }
.finishing-visual { min-height: 640px; }

.green { display: grid; grid-template-columns: .78fr .9fr 1.5fr; min-height: 760px; }
.green-number { display: flex; flex-direction: column; justify-content: center; padding: 80px clamp(24px, 5vw, 80px); border-right: 1px solid rgba(233,224,210,.2); }
.green-number > span { color: var(--orange); font: 11px ui-monospace, Consolas, monospace; letter-spacing: .2em; }
.green-number strong { color: var(--orange); font-size: clamp(94px, 13vw, 205px); line-height: .9; letter-spacing: -.09em; }
.green-number small { margin-top: 26px; color: rgba(243,236,223,.58); }
.green-copy { display: flex; flex-direction: column; justify-content: center; padding: 80px clamp(24px, 4vw, 64px); }
.green-copy h2 { font-size: clamp(48px, 5.6vw, 84px); }
.green-copy > p:not(.section-index) { color: rgba(243,236,223,.68); }
.inspection-visual { min-height: 760px; }

.development { padding: 120px clamp(24px, 6vw, 90px); }
.development-head { display: grid; grid-template-columns: .8fr 2.5fr; gap: 4vw; align-items: end; margin-bottom: 70px; }
.development-head h2 { margin: 0; }
.origin-visual { width: 72%; height: min(50vw, 700px); }
.record-line { position: relative; width: 58%; margin: -180px 0 0 auto; padding: 0; list-style: none; background: var(--paper-light); border-top: 4px solid var(--red); }
.record-line li { display: grid; grid-template-columns: 130px 1fr; gap: 26px; padding: 28px; border-bottom: 1px solid var(--hair); }
.record-line time { color: var(--red); font: 13px ui-monospace, Consolas, monospace; }
.record-line b { font-family: "STSong", "Songti SC", serif; font-size: 22px; }
.record-line p { margin: 7px 0 0; color: var(--muted); font-size: 13px; }

.contact { padding: 130px clamp(24px, 6vw, 90px) 110px; display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; }
.contact-intro h2 { font-size: clamp(60px, 8vw, 122px); }
.contact-intro > p:not(.section-index) { max-width: 600px; color: var(--muted); }
.company-facts { margin: 48px 0 0; border-top: 1px solid var(--ink); }
.company-facts div { display: grid; grid-template-columns: 110px 1fr; padding: 16px 0; border-bottom: 1px solid var(--hair); }
.company-facts dt { color: var(--red); font-size: 12px; }
.company-facts dd { margin: 0; font-size: 13px; }
.inquiry-form { align-self: end; display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; padding: 34px 0; border-top: 4px solid var(--red); border-bottom: 1px solid var(--ink); }
.form-kicker { grid-column: 1 / -1; margin: 0 0 24px; color: var(--red); font: 11px ui-monospace, Consolas, monospace; letter-spacing: .14em; }
.inquiry-form label { display: grid; gap: 7px; padding: 10px 0; font-size: 12px; }
.inquiry-form label.wide { grid-column: 1 / -1; }
.inquiry-form input, .inquiry-form textarea { width: 100%; border: 0; border-bottom: 1px solid var(--ink); background: transparent; padding: 10px 2px; outline: 0; border-radius: 0; }
.inquiry-form input:focus, .inquiry-form textarea:focus { border-color: var(--red); box-shadow: 0 2px 0 var(--red); }
.inquiry-form textarea { resize: vertical; }
.inquiry-form button { grid-column: 1 / -1; display: flex; justify-content: space-between; margin-top: 18px; padding: 18px 0; border: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: transparent; cursor: pointer; font-weight: 700; }
.inquiry-form button:hover, .inquiry-form button:focus-visible { color: var(--red); }
.form-result { grid-column: 1 / -1; min-height: 24px; margin: 14px 0 0; color: var(--red); font-size: 12px; }
.site-footer { display: grid; grid-template-columns: 1fr auto auto; gap: 30px; align-items: center; padding: 32px clamp(24px, 6vw, 90px); color: var(--paper-light); background: #080706; border-top: 1px solid rgba(233,224,210,.16); }
.site-footer p { margin: 0; color: rgba(243,236,223,.5); font-size: 10px; }
.back-top { font-size: 11px; }

@media (max-width: 1040px) {
  .material-notes { position: relative; top: auto; right: auto; width: auto; max-width: 760px; margin: 20px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .material { min-height: auto; }
  .material-visual { width: 86vw; }
  .green { grid-template-columns: .7fr 1.3fr; }
  .inspection-visual { grid-column: 1 / -1; min-height: 560px; height: 65vw; }
  .contact { gap: 5vw; }
  .site-footer { grid-template-columns: 1fr auto; }
  .site-footer p { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 760px) {
  :root { --header-h: 64px; }
  .site-header { padding: 0 18px; }
  .brand small { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .menu-toggle { display: block; }
  .site-nav { position: fixed; inset: var(--header-h) 0 auto; display: grid; gap: 0; padding: 10px 22px 24px; background: var(--paper-light); border-bottom: 1px solid var(--ink); transform: translateY(-120%); opacity: 0; pointer-events: none; transition: transform .24s ease, opacity .24s ease; }
  .site-nav a { padding: 14px 0; border-bottom: 1px solid var(--hair); font-size: 16px; }
  .site-nav a::after { display: none; }
  .site-header.is-open .site-nav { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .site-header.is-open .menu-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .site-header.is-open .menu-toggle span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
  h2 { font-size: clamp(44px, 15vw, 72px); }
  .hero { min-height: 900px; height: 100svh; }
  .hero-visual { inset: var(--header-h) 0 0; }
  .hero-visual img { object-position: 66% center; }
  .hero-visual::after { background: linear-gradient(180deg, rgba(23,19,15,.42), rgba(23,19,15,.98) 76%); }
  .hero-copy { position: absolute; left: 0; bottom: 72px; width: 100%; padding: 28px 22px; }
  .hero h1 { font-size: clamp(58px, 17.5vw, 86px); }
  .hero-lead { font-size: 15px; }
  .hero-actions { margin: 24px 0 18px; }
  .scroll-cue { display: none; }
  .material { padding: 86px 18px 72px; }
  .vertical-title { position: static; flex-direction: row; gap: 12px; align-items: baseline; margin-bottom: 22px; }
  .vertical-title span { font-size: 28px; }
  .vertical-title h2 { writing-mode: horizontal-tb; font-size: 24px; letter-spacing: .08em; }
  .material-visual { width: 100%; height: 70vw; min-height: 360px; }
  .material-notes { grid-template-columns: 1fr; gap: 0; }
  .material-statement { margin-top: 38px; font-size: 32px; }
  .products { padding-top: 82px; }
  .inline-heading, .process-head, .development-head { grid-template-columns: 1fr; padding-left: 18px; padding-right: 18px; }
  .inline-heading { padding-bottom: 42px; }
  .surface-ribbon { height: 118vw; }
  .surface-ribbon img { object-position: center; }
  .direction-list { grid-template-columns: 1fr 1fr; }
  .direction-list li { min-height: 145px; border-bottom: 1px solid rgba(233,224,210,.22); }
  .direction-list b { margin-top: 24px; }
  .space { min-height: 780px; }
  .space-visual { min-height: 780px; height: 100%; }
  .space-visual img { object-position: 63% center; }
  .space-visual::after { background: linear-gradient(180deg, transparent 22%, rgba(23,19,15,.95) 82%); }
  .space-copy { left: 22px; right: 22px; top: auto; bottom: 48px; width: auto; transform: none; }
  .space-copy h2 { font-size: 50px; }
  .process { padding-top: 84px; }
  .process-head { padding-bottom: 42px; }
  .process-line { grid-template-columns: 1fr; padding: 0 18px; }
  .process-line li { padding: 12px 0; border-right: 0; border-bottom: 1px solid var(--hair); }
  .process-panorama { height: 72vw; min-height: 340px; }
  .process-panorama img { object-position: 58% center; }
  .process-split { grid-template-columns: 1fr; }
  .process-callout { min-height: 330px; }
  .process-callout .giant-word { writing-mode: horizontal-tb; }
  .process-callout p { bottom: 34px; }
  .finishing-visual { min-height: 440px; }
  .green { grid-template-columns: 1fr; }
  .green-number { min-height: 420px; border-right: 0; border-bottom: 1px solid rgba(233,224,210,.2); }
  .green-number strong { font-size: 30vw; }
  .green-copy { padding-top: 70px; padding-bottom: 70px; }
  .inspection-visual { grid-column: auto; min-height: 460px; height: 90vw; }
  .inspection-visual img { object-position: 58% center; }
  .development { padding: 86px 18px; }
  .origin-visual { width: 100%; height: 76vw; min-height: 400px; }
  .record-line { width: 94%; margin: -40px 0 0 auto; }
  .record-line li { grid-template-columns: 84px 1fr; padding: 20px; }
  .contact { grid-template-columns: 1fr; padding: 90px 18px 80px; }
  .contact-intro h2 { font-size: 18vw; }
  .inquiry-form { grid-template-columns: 1fr; }
  .inquiry-form label.wide, .inquiry-form button, .form-result, .form-kicker { grid-column: 1; }
  .site-footer { grid-template-columns: 1fr auto; padding: 26px 18px; }
  .footer-brand small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}