:root {
  --orange: #ff4d00;
  --black: #000000;
  --white: #ffffff;
  --gray: #b8b8b8;
  --dark-gray: #181818;
  --display: Impact, "Arial Black", "Microsoft YaHei", sans-serif;
  --body: Inter, "Segoe UI", "Microsoft YaHei", sans-serif;
  --mono: "Cascadia Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
body { margin: 0; color: var(--white); background: var(--black); font-family: var(--body); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }

.site-header {
  position: fixed; z-index: 30; top: 16px; left: 50%; width: min(1220px, calc(100% - 92px)); height: 62px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 13px 0 20px;
  border: 1px solid #4e4e4e; border-radius: 999px; background: rgba(0,0,0,.94);
  box-shadow: 0 10px 0 rgba(255,77,0,.2); transform: translateX(-50%);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-block { width: 12px; height: 32px; background: var(--orange); transform: skewX(-12deg); }
.brand b, .brand small { display: block; }
.brand b { font: 800 14px/1.2 var(--body); letter-spacing: .04em; }
.brand small { margin-top: 3px; color: #8b8b8b; font: 7px var(--mono); letter-spacing: .16em; }
.site-header > nav { display: flex; gap: 28px; font: 700 10px var(--mono); text-transform: uppercase; }
.site-header > nav a { border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.site-header > nav a:hover { color: var(--orange); border-color: var(--orange); }
.nav-cta, .button, .text-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; }
.nav-cta { padding: 11px 16px; border-radius: 999px; color: var(--black); background: var(--orange); font: 800 10px var(--mono); }
.nav-cta svg, .button svg, .text-button svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
.mobile-nav { display: none; position: relative; }
.mobile-nav summary { padding: 10px 14px; border-radius: 999px; color: var(--black); background: var(--orange); font: 800 10px var(--mono); cursor: pointer; list-style: none; }
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav nav { position: absolute; top: calc(100% + 12px); right: 0; width: 184px; display: grid; padding: 10px 16px; border: 2px solid var(--white); background: rgba(0,0,0,.98); }
.mobile-nav nav a { padding: 12px 0; border-bottom: 1px solid #3b3b3b; color: var(--white); font: 700 10px var(--mono); text-transform: uppercase; }
.mobile-nav nav a:last-child { border-bottom: 0; }

.page-index {
  position: fixed; z-index: 22; left: 16px; top: 50%; display: grid; justify-items: center; gap: 12px; transform: translateY(-50%);
}
.page-index > span, .page-index > i { color: #777; font: 7px var(--mono); font-style: normal; letter-spacing: .18em; writing-mode: vertical-rl; }
.page-index nav { display: grid; border: 1px solid #333; background: var(--black); }
.page-index a { display: grid; width: 28px; height: 27px; place-items: center; border-bottom: 1px solid #333; color: #777; font: 8px var(--mono); transition: color .2s, background .2s; }
.page-index a:last-child { border-bottom: 0; }
.page-index a:hover { color: var(--black); background: var(--orange); }

section { position: relative; min-height: 820px; padding: 126px max(7vw, 88px) 92px; overflow: clip; scroll-margin-top: 0; }
.black { color: var(--white); background: var(--black); }
.white { color: var(--black); background: var(--white); }
.orange { color: var(--black); background: var(--orange); }
.section-code { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 28px; }
.section-code b { color: var(--orange); font: italic 900 48px/.82 var(--display); letter-spacing: -.05em; transform: skewX(-7deg); }
.orange .section-code b { color: var(--black); }
.section-code span { padding-top: 7px; font: 700 8px var(--mono); letter-spacing: .16em; text-transform: uppercase; }
h1, h2 { margin: 0; font-family: var(--display); font-weight: 900; letter-spacing: -.055em; line-height: .9; text-transform: uppercase; transform: skewX(-5deg); transform-origin: left; }
h1 { font-size: clamp(70px, 7.8vw, 124px); }
h2 { font-size: clamp(56px, 6vw, 92px); }
h1 em, h2 em { color: var(--orange); font-style: normal; }
.orange h2 em { color: var(--white); }
p { line-height: 1.85; }
.button { min-width: 220px; padding: 15px 18px; border-radius: 999px; color: var(--black); background: var(--orange); font: 800 11px var(--mono); transition: transform .2s; }
.button:hover, .text-button:hover { transform: translateX(8px); }
.button.inverse { color: var(--white); background: var(--black); }
.actions { display: flex; align-items: center; gap: 28px; margin-top: 30px; }
.line-link { padding: 8px 0; border-bottom: 2px solid var(--white); font: 700 10px var(--mono); }

.media { position: relative; z-index: 2; margin: 0; border: 1px solid currentColor; overflow: hidden; }
.media img { height: 100%; object-fit: cover; transition: transform .55s; }
.media:hover img { transform: scale(1.025); }

.hero { min-height: 960px; display: grid; grid-template-columns: .92fr 1.18fr; align-items: center; gap: 4vw; padding-top: 142px; }
.hero::before { position: absolute; right: -10vw; top: 0; width: 26vw; height: 130%; content: ""; background: var(--orange); transform: skewX(-20deg); transform-origin: top; }
.hero-copy { position: relative; z-index: 3; }
.hero-copy > p { max-width: 650px; color: #aaa; font-size: 13px; }
.hero-media { height: 620px; color: #333; }
.record-stamp { position: absolute; z-index: 4; right: 7vw; bottom: 48px; width: 340px; padding: 20px; border: 1px solid var(--white); color: var(--white); background: var(--black); }
.record-stamp small, .record-stamp strong, .record-stamp span { display: block; }
.record-stamp small { color: var(--orange); font: 8px var(--mono); letter-spacing: .13em; }
.record-stamp strong { margin: 10px 0 7px; font: 800 20px var(--display); }
.record-stamp span { color: #999; font-size: 10px; line-height: 1.7; }

.material { display: grid; grid-template-columns: .78fr 1.22fr; gap: 6vw; align-items: center; }
.material::after { position: absolute; left: 48%; bottom: -90px; width: 90px; height: 360px; content: ""; background: var(--orange); transform: rotate(35deg); }
.section-heading { position: relative; z-index: 3; }
.section-heading p { max-width: 550px; color: #555; font-size: 13px; }
.material h2 em { color: var(--orange); }
.text-button { margin-top: 17px; padding: 13px 18px; border: 2px solid var(--black); border-radius: 999px; color: var(--black); font: 800 10px var(--mono); transition: transform .2s; }
.material-media { height: 590px; color: var(--black); }

.family { display: grid; grid-template-columns: .92fr 1.08fr; gap: 6vw; align-items: center; }
.family-copy { position: relative; z-index: 3; }
.family-copy > p { max-width: 600px; color: #9a9a9a; font-size: 12px; }
.family-media { height: 650px; color: #333; }
.fact-list { margin-top: 28px; border-top: 1px solid #444; }
.fact-list article { display: grid; grid-template-columns: 38px 1fr auto; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid #444; }
.fact-list article > span { color: var(--orange); font: 800 15px var(--mono); }
.fact-list h3 { margin: 0 0 5px; font: 800 17px var(--display); text-transform: uppercase; }
.fact-list p { margin: 0; color: #767676; font-size: 9px; }
.fact-list article > b { color: #777; font: 8px var(--mono); }

.context { display: grid; grid-template-columns: .78fr 1.22fr; gap: 5vw; align-items: center; }
.context::before { position: absolute; left: -150px; bottom: -150px; width: 360px; height: 360px; border: 42px solid var(--black); content: ""; transform: rotate(25deg); }
.context-copy { position: relative; z-index: 3; }
.context-copy > p { max-width: 560px; font-size: 13px; }
.pending-grid { display: grid; gap: 8px; margin-top: 26px; }
.pending-grid span { padding: 13px 15px; border: 2px solid var(--black); font: 800 9px var(--mono); }
.context-media { height: 610px; color: var(--black); }

.process { display: grid; grid-template-columns: 1.16fr .84fr; gap: 6vw; align-items: center; }
.process-media { height: 650px; color: #333; }
.process-copy { position: relative; z-index: 3; }
.process-copy > p { color: #8c8c8c; font-size: 11px; }
blockquote { margin: 22px 0; padding: 17px 18px; border-left: 5px solid var(--orange); color: var(--white); background: var(--dark-gray); font: 800 17px/1.65 var(--display); }
.project-row { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid #444; }
.project-row div { padding: 14px; border-right: 1px solid #444; }
.project-row div:last-child { border-right: 0; }
.project-row small, .project-row strong { display: block; }
.project-row small { margin-bottom: 7px; color: #777; font: 8px var(--mono); }
.project-row strong { font: 800 12px var(--body); }
.caution { padding-left: 13px; border-left: 2px solid var(--orange); }

.records { min-height: 980px; display: grid; grid-template-columns: .82fr 1.18fr; grid-template-rows: auto 1fr; gap: 32px 6vw; }
.records-title { grid-column: 1 / -1; }
.records-title h2 em { color: var(--orange); }
.records-media { height: 570px; color: var(--black); }
.record-list { align-self: center; border-top: 2px solid var(--black); }
.record-list article { display: grid; grid-template-columns: 132px 1fr 34px; gap: 14px; align-items: center; padding: 20px 0; border-bottom: 2px solid var(--black); }
.record-list span { color: var(--orange); font: 800 8px var(--mono); }
.record-list strong { font: 800 14px var(--body); }
.record-list i { font: 800 8px var(--mono); font-style: normal; }

.about { display: grid; grid-template-columns: .88fr 1.12fr; gap: 6vw; align-items: center; }
.about-copy { position: relative; z-index: 3; }
.about-copy > p { max-width: 610px; color: #999; font-size: 12px; }
.about-media { height: 650px; color: #333; }
.boundary-list { display: grid; grid-template-columns: 1fr 1fr; margin-top: 28px; border-top: 1px solid #444; border-left: 1px solid #444; }
.boundary-list span { min-height: 82px; padding: 15px; border-right: 1px solid #444; border-bottom: 1px solid #444; color: #b0b0b0; font-size: 10px; line-height: 1.7; }
.boundary-list b { display: block; margin-bottom: 7px; color: var(--orange); font: 800 8px var(--mono); }

.contact { min-height: 980px; display: grid; grid-template-columns: 1.08fr .92fr; gap: 6vw; align-items: center; padding-bottom: 150px; }
.contact-media { height: 650px; color: var(--black); }
.contact-copy { position: relative; z-index: 3; }
.contact-copy > p { max-width: 590px; font-size: 12px; }
.contact footer { position: absolute; right: max(7vw,88px); bottom: 35px; left: max(7vw,88px); display: flex; justify-content: space-between; padding-top: 15px; border-top: 2px solid var(--black); font: 8px var(--mono); letter-spacing: .06em; }

@media (max-width: 1050px) {
  .site-header { width: calc(100% - 36px); }
  .site-header > nav, .page-index, .nav-cta { display: none; }
  .mobile-nav { display: block; }
  .mobile-nav nav { display: grid; }
  section { padding-right: 5vw; padding-left: 5vw; }
  .hero { grid-template-columns: 1fr; }
  .hero-media { height: 490px; }
  .record-stamp { right: 5vw; }
  .material, .family, .context, .process, .about, .contact { gap: 4vw; }
  .contact footer { right: 5vw; left: 5vw; }
}

@media (max-width: 720px) {
  .site-header { top: 9px; height: 56px; padding: 0 10px 0 14px; }
  .brand small { display: none; }
  .nav-cta { padding: 10px 12px; }
  section { min-height: auto; padding: 96px 20px 74px; }
  h1 { font-size: 54px; }
  h2 { font-size: 46px; }
  .section-code { margin-bottom: 20px; }
  .section-code b { font-size: 36px; }
  .hero { display: flex; min-height: 940px; flex-direction: column; align-items: stretch; gap: 28px; padding-top: 112px; }
  .hero::before { right: -40vw; width: 75vw; }
  .hero-copy > p { font-size: 12px; }
  .actions { align-items: flex-start; flex-direction: column; gap: 16px; }
  .hero-media { height: 370px; }
  .record-stamp { position: relative; right: auto; bottom: auto; width: 100%; }
  .material, .family, .context, .process, .records, .about, .contact { display: flex; flex-direction: column; gap: 28px; }
  .material::after { display: none; }
  .material-media, .family-media, .context-media, .process-media, .records-media, .about-media, .contact-media { width: 100%; height: 350px; }
  .fact-list article { grid-template-columns: 30px 1fr; }
  .fact-list article > b { grid-column: 2; }
  .context-media { order: 2; }
  .process-media { order: 2; }
  .project-row { grid-template-columns: 1fr; }
  .project-row div { border-right: 0; border-bottom: 1px solid #444; }
  .project-row div:last-child { border-bottom: 0; }
  .records-title { order: 1; }
  .records-media { order: 2; }
  .record-list { order: 3; width: 100%; }
  .record-list article { grid-template-columns: 1fr auto; gap: 8px; }
  .record-list span { grid-column: 1 / -1; }
  .record-list strong { font-size: 12px; }
  .boundary-list { grid-template-columns: 1fr; }
  .about-media { order: 2; }
  .contact { padding-bottom: 145px; }
  .contact-copy { order: 1; }
  .contact-media { order: 2; }
  .contact footer { right: 20px; bottom: 28px; left: 20px; flex-direction: column; gap: 8px; line-height: 1.5; }
}

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