:root {
  color-scheme: light;
  --wine: #721d32;
  --wine-dark: #3d111f;
  --rose: #b54d68;
  --cream: #f4f0e7;
  --sand: #dfd4c2;
  --ink: #151515;
  --muted: #66635f;
  --white: #fff;
  --line: rgba(21, 21, 21, .18);
  --max: 1520px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 142px;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: "Helvetica Neue", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  line-height: 1.75;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  color: #fff;
  background: var(--wine);
  transform: translateY(-180%);
}

.skip-link:focus { transform: translateY(0); }

.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  color: var(--ink);
  background: rgba(244, 240, 231, .97);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.brand-bar {
  width: min(var(--max), calc(100% - 64px));
  min-height: 90px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 15px;
}

.brand-lockup img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.brand-lockup strong {
  display: block;
  font-family: Georgia, "Songti SC", "STSong", serif;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: .06em;
}

.brand-lockup span,
.header-note span {
  display: block;
  color: var(--wine);
  font-size: 9px;
  font-weight: 720;
  letter-spacing: .2em;
}

.header-note { text-align: right; }
.header-note p { margin-top: 3px; color: var(--muted); font-size: 12px; }

.main-nav {
  min-height: 50px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--line);
}

.main-nav a {
  display: grid;
  place-items: center;
  padding: 11px 14px;
  color: #45433f;
  border-right: 1px solid var(--line);
  text-align: center;
  text-decoration: none;
  font-size: 13px;
  transition: color .2s ease, background .2s ease;
}

.main-nav a:last-child { border-right: 0; }

.main-nav a:hover,
.main-nav a:focus-visible {
  color: #fff;
  background: var(--wine);
}

.main-nav a:focus-visible {
  outline: 2px solid var(--wine-dark);
  outline-offset: -4px;
}

.hero {
  width: min(var(--max), calc(100% - 64px));
  margin: 34px auto 0;
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  min-height: 690px;
  border-bottom: 1px solid var(--line);
}

.hero-copy {
  padding: clamp(46px, 7vw, 100px) clamp(30px, 5vw, 80px) clamp(46px, 6vw, 86px) 0;
  display: flex;
  flex-direction: column;
}

.section-code,
.entry-number {
  color: var(--wine);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.breadcrumb {
  margin-bottom: 18px;
  color: #77716a;
  font-size: 11px;
  letter-spacing: .08em;
}

.hero h1 {
  margin-top: 28px;
  font-family: Georgia, "Songti SC", "STSong", serif;
  font-size: clamp(48px, 6.6vw, 104px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.055em;
}

.hero-intro {
  max-width: 650px;
  margin-top: 34px;
  color: #57544f;
  font-size: clamp(16px, 1.3vw, 20px);
}

.scope-line {
  margin-top: auto;
  padding-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  border-top: 1px solid var(--line);
}

.scope-line span {
  position: relative;
  color: var(--muted);
  font-size: 11px;
}

.scope-line span:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -14px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--wine);
}

.hero-image {
  position: relative;
  min-height: 690px;
  overflow: hidden;
  background: #191313;
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(35, 8, 17, .76));
  pointer-events: none;
}

.hero-image figcaption {
  position: absolute;
  z-index: 1;
  right: 34px;
  bottom: 30px;
  left: 34px;
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: end;
  color: #fff;
}

.hero-image figcaption span { color: rgba(255,255,255,.58); font-size: 10px; letter-spacing: .18em; }
.hero-image figcaption strong { max-width: 360px; text-align: right; font: 500 20px/1.45 Georgia, "Songti SC", serif; }

.overview {
  width: min(var(--max), calc(100% - 64px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-left: 1px solid var(--line);
}

.overview article {
  min-height: 240px;
  padding: clamp(28px, 4vw, 54px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.overview article > span { color: var(--rose); font: 500 26px/1 Georgia, serif; }
.overview h2 { margin-top: 36px; font: 500 clamp(24px, 2.2vw, 34px)/1.3 Georgia, "Songti SC", serif; }
.overview p { margin-top: 10px; color: var(--muted); font-size: 14px; }

.editorial-section,
.guide-section,
.service-section,
.download-section,
.brand-record {
  padding: clamp(80px, 10vw, 150px) max(32px, calc((100vw - var(--max)) / 2 + 32px));
}

.section-heading { max-width: 1000px; }

.section-heading h2,
.feature-copy h2,
.service-heading h2,
.app-copy h2,
.download-title-block h2,
.brand-record h2 {
  margin-top: 22px;
  font: 500 clamp(38px, 5.4vw, 78px)/1.12 Georgia, "Songti SC", "STSong", serif;
  letter-spacing: -.04em;
}

.section-heading > p:last-child,
.service-heading > p:last-child {
  max-width: 760px;
  margin-top: 26px;
  color: var(--muted);
}

.editorial-section { background: #fff; }

.editorial-stream {
  margin-top: 82px;
  border-top: 1px solid var(--line);
}

.stream-entry {
  min-height: 520px;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  border-bottom: 1px solid var(--line);
}

.stream-entry.image-right { grid-template-columns: .8fr 1.2fr; }
.stream-entry.compact-entry { grid-template-columns: .86fr 1.14fr; }

.stream-entry figure { overflow: hidden; }
.stream-entry figure img { width: 100%; height: 100%; object-fit: cover; }

.entry-copy {
  padding: clamp(38px, 6vw, 90px);
  align-self: center;
}

.entry-copy h3 {
  margin-top: 20px;
  font: 500 clamp(28px, 3.3vw, 50px)/1.25 Georgia, "Songti SC", serif;
  letter-spacing: -.025em;
}

.entry-copy > p:last-child { margin-top: 20px; color: var(--muted); }

.feature-story {
  min-height: 880px;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  color: #fff;
  background: var(--wine-dark);
}

.feature-story > figure { min-height: 880px; }
.feature-story > figure img { width: 100%; height: 100%; object-fit: cover; }

.feature-copy {
  padding: clamp(62px, 8vw, 120px) clamp(40px, 6vw, 90px);
  align-self: center;
}

.feature-copy .section-code { color: #e6aabb; }
.feature-copy > p:not(.section-code) { margin-top: 28px; color: rgba(255,255,255,.65); }

.feature-copy dl {
  margin-top: 48px;
  border-top: 1px solid rgba(255,255,255,.22);
}

.feature-copy dl div {
  padding: 15px 0;
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 18px;
  border-bottom: 1px solid rgba(255,255,255,.22);
}

.feature-copy dt { color: rgba(255,255,255,.44); font-size: 11px; }
.feature-copy dd { color: rgba(255,255,255,.78); font-size: 13px; }

.guide-section { background: #e8dfd1; }

.horizontal-heading {
  max-width: none;
  display: grid;
  grid-template-columns: 1fr .7fr;
  gap: clamp(40px, 8vw, 130px);
  align-items: end;
}

.horizontal-heading > p:last-child { margin-top: 0; }

.terminal-layout {
  margin-top: 70px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(42px, 7vw, 110px);
  align-items: center;
}

.terminal-image img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.terminal-image figcaption { padding: 13px 0; color: var(--muted); font-size: 12px; border-bottom: 1px solid var(--line); }

.terminal-notes { border-top: 1px solid var(--line); }
.terminal-notes article { padding: 25px 0; border-bottom: 1px solid var(--line); }
.terminal-notes h3 { margin-top: 6px; font-size: 19px; }
.terminal-notes article > p:last-child { margin-top: 8px; color: var(--muted); font-size: 14px; }

.service-section { color: #fff; background: #171719; }
.service-heading { max-width: 920px; }
.service-heading .section-code { color: #e4a6b7; }
.service-heading > p:last-child { color: rgba(255,255,255,.58); }

.qa-list {
  margin-top: 62px;
  border-top: 1px solid rgba(255,255,255,.2);
}

.qa-list article {
  padding: 34px 0;
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 34px;
  border-bottom: 1px solid rgba(255,255,255,.2);
}

.qa-list article > span { color: #e6aabb; font: 500 25px/1 Georgia, serif; }
.qa-list h3 { font: 500 clamp(23px, 2.6vw, 38px)/1.3 Georgia, "Songti SC", serif; }
.qa-list p { margin-top: 10px; color: rgba(255,255,255,.58); }

.app-section {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  background: #fff;
}

.app-visual {
  position: relative;
  min-height: 860px;
  background: var(--wine-dark);
}

.app-visual figure { height: 100%; }
.app-visual img { width: 100%; height: 100%; object-fit: cover; }

.app-visual-label {
  position: absolute;
  right: 20px;
  bottom: 20px;
  padding: 14px 16px;
  color: #fff;
  background: rgba(61,17,31,.82);
  font-size: 9px;
  letter-spacing: .14em;
}

.app-copy {
  padding: clamp(72px, 9vw, 138px) clamp(40px, 8vw, 126px);
  align-self: center;
}

.app-copy > p:not(.section-code) { margin-top: 28px; color: var(--muted); }

.compare-table {
  margin-top: 48px;
  border-top: 1px solid var(--line);
}

.compare-table > div {
  padding: 17px 0;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 20px;
  border-bottom: 1px solid var(--line);
}

.compare-table span { color: var(--muted); font-size: 12px; }
.compare-table strong { font-size: 13px; font-weight: 620; }

.download-section {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(50px, 9vw, 150px);
  background: var(--sand);
}

.download-copy { border-top: 1px solid var(--line); }
.download-copy article { padding: 26px 0; border-bottom: 1px solid var(--line); }
.download-copy h3 { font: 500 clamp(22px, 2.4vw, 34px)/1.35 Georgia, "Songti SC", serif; }
.download-copy p { margin-top: 9px; color: var(--muted); }

.brand-record {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(50px, 9vw, 150px);
  align-items: end;
  color: #fff;
  background: var(--wine);
}

.brand-record .section-code { color: #f0b9c7; }
.brand-record > p { color: rgba(255,255,255,.68); font-size: 16px; }

.site-footer {
  padding: 44px max(32px, calc((100vw - var(--max)) / 2 + 32px));
  color: rgba(255,255,255,.55);
  background: #0c0c0d;
  display: grid;
  grid-template-columns: 1.2fr 1fr auto;
  gap: 20px 60px;
  align-items: end;
  font-size: 12px;
}

.footer-brand strong { display: block; color: #fff; font: 600 22px/1.2 Georgia, "Songti SC", serif; }
.footer-brand span { display: block; margin-top: 5px; font-size: 9px; letter-spacing: .18em; }
.footer-note { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); }

@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy { min-height: 610px; padding-right: 0; }
  .hero-image { min-height: 62vw; }
  .stream-entry,
  .stream-entry.image-right,
  .stream-entry.compact-entry,
  .feature-story,
  .terminal-layout,
  .app-section,
  .download-section,
  .brand-record { grid-template-columns: 1fr; }
  .stream-entry.image-right .entry-copy { order: 2; }
  .stream-entry.image-right figure { order: 1; }
  .stream-entry figure { min-height: 58vw; }
  .feature-story > figure { min-height: 66vw; }
  .app-visual { min-height: 92vw; max-height: 960px; }
  .horizontal-heading { grid-template-columns: 1fr; }
  .site-footer { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 126px; }
  .brand-bar { width: calc(100% - 32px); min-height: 72px; }
  .brand-lockup img { width: 42px; height: 42px; }
  .brand-lockup strong { font-size: 20px; }
  .brand-lockup span { display: none; }
  .header-note { display: none; }

  .main-nav {
    padding: 10px 16px;
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .main-nav::-webkit-scrollbar { display: none; }
  .main-nav a { flex: 0 0 auto; padding: 4px 0; border-right: 0; font-size: 12px; }
  .main-nav a:hover, .main-nav a:focus-visible { color: var(--wine); background: transparent; }

  .hero,
  .overview { width: calc(100% - 32px); }
  .hero { margin-top: 16px; }
  .hero-copy { min-height: 560px; }
  .hero-image { min-height: 78vw; }
  .hero-image figcaption { right: 18px; bottom: 16px; left: 18px; }
  .hero-image figcaption strong { font-size: 14px; }

  .overview { grid-template-columns: 1fr; }
  .overview article { min-height: 0; }

  .editorial-section,
  .guide-section,
  .service-section,
  .download-section,
  .brand-record { padding: 72px 20px; }

  .editorial-stream { margin-top: 48px; }
  .stream-entry figure { min-height: 72vw; }
  .entry-copy { padding: 42px 8px; }
  .feature-copy { padding: 64px 24px; }
  .feature-copy dl div { grid-template-columns: 76px 1fr; }
  .terminal-layout { margin-top: 46px; }
  .qa-list article { grid-template-columns: 44px 1fr; gap: 14px; }
  .app-copy { padding: 72px 22px; }
  .compare-table > div { grid-template-columns: 90px 1fr; }
  .site-footer { grid-template-columns: 1fr; padding: 34px 20px; }
  .footer-note { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .main-nav a { transition: none; }
}