:root {
  --ink: #0c0f11;
  --ink-2: #15191b;
  --paper: #efede6;
  --paper-2: #d9d6cd;
  --white: #f5f2e9;
  --amber: #e6a54c;
  --ice: #92bfce;
  --muted: #aaa79e;
  --line-dark: rgba(245, 242, 233, .18);
  --line-light: rgba(12, 15, 17, .2);
  --page: min(100% - 48px, 1320px);
  --reading: 68ch;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .24em; }
a:hover { color: var(--amber); }
a:focus-visible { outline: 2px solid var(--ice); outline-offset: 5px; }
.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 10px 14px; color: var(--ink); background: var(--white); transform: translateY(-160%); }
.skip-link:focus { transform: none; }

.site-header {
  width: var(--page);
  min-height: 76px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  color: var(--white);
  border-bottom: 1px solid var(--line-dark);
}
.brand { text-decoration: none; font-size: .9rem; font-weight: 800; letter-spacing: .18em; white-space: nowrap; }
.brand span { color: var(--amber); margin-left: .25em; }
.site-nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 44px); }
.site-nav a { position: relative; padding: 25px 0 23px; color: #cbc8c0; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--white); }
.site-nav a[aria-current="page"]::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--amber); }

.hero { position: relative; overflow: hidden; width: var(--page); min-height: 650px; margin: 0 auto; color: var(--white); border-left: 1px solid var(--line-dark); border-right: 1px solid var(--line-dark); }
.hero::before { content: ""; position: absolute; top: 38px; left: 38px; width: 22px; height: 22px; border-top: 1px solid var(--ice); border-left: 1px solid var(--ice); opacity: .65; }
.hero::after { content: "+"; position: absolute; right: 30px; bottom: 24px; color: var(--ice); font: 300 22px/1 monospace; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(340px, .82fr); grid-template-rows: 1fr auto; column-gap: clamp(40px, 7vw, 110px); padding: 82px clamp(30px, 5vw, 74px) 66px; }
.hero-copy { align-self: end; max-width: 760px; padding-bottom: 38px; }
.micro { margin: 0 0 20px; font-size: .68rem; font-weight: 800; letter-spacing: .18em; line-height: 1.4; text-transform: uppercase; }
.amber { color: var(--amber); }
.ice { color: var(--ice); }
h1, h2 { margin: 0; font-weight: 650; letter-spacing: -.045em; line-height: .97; text-wrap: balance; }
.hero h1 { max-width: 760px; font-size: clamp(4rem, 8.2vw, 8.2rem); text-transform: uppercase; }
.hero-deck { max-width: 62ch; margin: 32px 0 0; padding-left: 22px; color: #c9c6bd; border-left: 1px solid var(--amber); font-size: clamp(1rem, 1.3vw, 1.22rem); line-height: 1.55; }
.hero-image { align-self: center; width: min(100%, 520px); margin: 0; }
.technical-frame { position: relative; }
.technical-frame::before { content: ""; position: absolute; z-index: 2; inset: -9px auto auto -9px; width: 30px; height: 30px; border-top: 1px solid var(--ice); border-left: 1px solid var(--ice); pointer-events: none; }
.technical-frame img { width: 100%; aspect-ratio: 11 / 7; object-fit: cover; filter: saturate(.72) contrast(1.06); }
.technical-frame figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 9px; color: #9b9b96; font: 700 .58rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; }
.technical-frame figcaption a { color: inherit; }
.coordinate { position: absolute; margin: 0; color: var(--ice); font: 600 .57rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .12em; opacity: .68; writing-mode: vertical-rl; }
.coordinate-a { top: 90px; right: 9px; }
.coordinate-b { bottom: 20px; left: 9px; }

.section { position: relative; padding: clamp(84px, 11vw, 150px) max(24px, calc((100% - 1320px) / 2)); }
.section-paper { background: var(--paper); }
.section-ink { background: var(--ink-2); color: var(--white); }
.section-heading h2 { font-size: clamp(2.6rem, 5vw, 5.7rem); }
.section-paper .section-heading h2 { color: #16191a; }
.prose { max-width: var(--reading); }
.prose p { margin: 0 0 1.35em; font-size: clamp(1rem, 1.15vw, 1.12rem); }
.prose p:last-child { margin-bottom: 0; }
.prose-light { color: #c9c7c0; }
.number-mark { color: var(--amber); font: 300 clamp(4rem, 8vw, 8.5rem)/.7 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: -.08em; }
.margin-note, .rail-note { font: 600 .7rem/1.65 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .035em; text-transform: uppercase; }
.margin-note { padding-left: 16px; border-left: 1px solid var(--ice); }
.margin-note span { display: block; margin-bottom: 9px; color: #526d77; }

.intro-grid { display: grid; grid-template-columns: 130px minmax(290px, .9fr) minmax(300px, .95fr) 190px; gap: clamp(26px, 4vw, 68px); align-items: start; }
.intro-grid .margin-note { margin-top: 135px; }
.camera-grid { display: grid; grid-template-columns: minmax(320px, .95fr) minmax(300px, .7fr) 220px; gap: clamp(32px, 5vw, 80px); }
.camera-grid .section-heading { grid-row: 1 / span 2; }
.signal-list { grid-column: 2 / 4; margin: 50px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line-dark); }
.signal-list li { display: grid; grid-template-columns: 54px 130px 1fr; gap: 20px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line-dark); }
.signal-list span { color: var(--amber); font: 600 .65rem/1 monospace; }
.signal-list strong { letter-spacing: .03em; }
.signal-list em { color: #9d9e99; font-size: .86rem; font-style: normal; }
.rail-note { padding: 18px 0 0 18px; color: #a8aaa6; border-left: 1px solid var(--ice); }
.rail-note b { display: block; margin-bottom: 12px; color: var(--ice); }

.light-grid { display: grid; grid-template-columns: 120px minmax(310px, 1fr) minmax(320px, .75fr); gap: clamp(30px, 5vw, 82px); }
.light-grid .prose { grid-column: 2; }
.tech-facts { grid-column: 3; grid-row: 1 / span 2; border-top: 1px solid var(--line-light); }
.tech-facts p { display: grid; grid-template-columns: 34px 100px 1fr; gap: 14px; margin: 0; padding: 22px 0; border-bottom: 1px solid var(--line-light); font-size: .88rem; }
.tech-facts span { color: #52717d; font: 700 .7rem/1.7 monospace; }

.sound-grid { display: grid; grid-template-columns: minmax(300px, .78fr) minmax(360px, 1.12fr); gap: clamp(45px, 8vw, 130px); align-items: start; }
.detail-image { grid-row: 1 / span 3; margin: 80px 0 0; }
.sound-grid .section-heading h2 { max-width: 860px; }
blockquote { margin: 42px 0 0; padding: 22px 0 0 28px; color: var(--amber); border-top: 1px solid var(--line-dark); border-left: 1px solid var(--amber); font-size: clamp(1.2rem, 2vw, 1.8rem); line-height: 1.35; }

.cable-grid { display: grid; grid-template-columns: 120px minmax(310px, .9fr) minmax(330px, .8fr) 180px; gap: clamp(24px, 4vw, 66px); }
.cable-grid .margin-note { margin-top: 150px; }
.coordination-grid { display: grid; grid-template-columns: minmax(330px, 1fr) minmax(330px, .82fr); gap: clamp(42px, 8vw, 130px); }
.sequence { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; margin-top: 56px; color: var(--ice); font: 700 .65rem/1.3 monospace; letter-spacing: .1em; }
.sequence i { flex: 1; height: 1px; background: var(--line-dark); }

.checklist-grid { display: grid; grid-template-columns: minmax(290px, .72fr) minmax(400px, 1fr); gap: clamp(50px, 10vw, 160px); }
.section-lead { max-width: 42ch; margin: 34px 0 0; color: #555957; }
.checklist { border-top: 1px solid var(--line-light); }
.checklist > div { display: grid; grid-template-columns: 56px 1fr; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line-light); }
.checklist span { padding-top: 5px; color: #557681; font: 700 .7rem/1 monospace; }
.checklist p { margin: 0; }
.checklist b { display: block; margin-bottom: 3px; color: #151719; }

.final-check { position: relative; overflow: hidden; padding: clamp(90px, 13vw, 180px) max(24px, calc((100% - 1100px) / 2)); color: var(--white); background: #111517; border-top: 1px solid rgba(146,191,206,.35); }
.final-check::after { content: "08"; position: absolute; right: -2vw; bottom: -6vw; color: rgba(146,191,206,.055); font: 300 clamp(14rem, 34vw, 34rem)/.75 monospace; letter-spacing: -.12em; pointer-events: none; }
.final-check h2 { position: relative; z-index: 1; max-width: 960px; font-size: clamp(3.2rem, 7.4vw, 7.8rem); }
.final-check > p:not(.micro):not(.status-line) { position: relative; z-index: 1; max-width: 70ch; margin: 44px 0 0 auto; color: #c6c5bf; font-size: 1.05rem; }
.status-line { position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; max-width: 70ch; margin: 34px 0 0 auto; color: var(--amber); font: 700 .72rem/1.5 monospace; letter-spacing: .06em; text-transform: uppercase; }
.status-line span { flex: 0 0 9px; width: 9px; height: 9px; background: var(--amber); box-shadow: 0 0 0 5px rgba(230,165,76,.12); }
.project-note { display: grid; grid-template-columns: minmax(190px, .35fr) minmax(300px, .8fr); gap: 40px; padding: 58px max(24px, calc((100% - 1100px) / 2)); color: #2e3232; background: var(--paper-2); }
.project-note p { margin: 0; }
.project-note a { font-weight: 700; }

.site-footer { width: 100%; display: grid; grid-template-columns: 1.15fr .8fr .65fr; color: var(--white); background: #090b0c; border-top: 1px solid var(--line-dark); }
.site-footer > * { min-height: 128px; padding: 30px clamp(24px, 4vw, 60px); border-right: 1px solid var(--line-dark); }
.site-footer > *:last-child { border-right: 0; }
.site-footer div { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 16px; }
.site-footer small { color: #777b79; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
.site-footer .micro { margin: 0; color: #777b79; }
.site-footer div > a:not(.brand) { color: var(--amber); font-size: .9rem; }
.site-footer nav { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; }
.site-footer nav a { color: #aaa9a4; font-size: .78rem; }

.legal-page { color: var(--white); background: var(--ink); }
.article-shell { width: var(--page); margin: 0 auto; border-right: 1px solid var(--line-dark); border-left: 1px solid var(--line-dark); }
.article-head { position: relative; min-height: 450px; display: flex; flex-direction: column; justify-content: flex-end; padding: 80px clamp(26px, 7vw, 95px) 70px; border-bottom: 1px solid var(--line-dark); }
.article-head::before { content: "+ 50°04'31\""; position: absolute; top: 34px; right: 34px; color: var(--ice); font: 600 .58rem/1 monospace; letter-spacing: .12em; opacity: .75; }
.article-head h1 { font-size: clamp(4rem, 9vw, 9rem); text-transform: uppercase; }
.article-head > p:last-child { max-width: 56ch; margin: 28px 0 0; color: #aaa9a4; font-size: 1.08rem; }
.article-body { color: var(--ink); background: var(--paper); }
.article-body section { display: grid; grid-template-columns: 190px minmax(280px, 430px) minmax(320px, 680px); gap: clamp(24px, 4vw, 62px); padding: 72px clamp(26px, 7vw, 95px); border-bottom: 1px solid var(--line-light); }
.article-body section .micro { color: #557681; }
.article-body h2 { font-size: clamp(2.25rem, 4vw, 4.6rem); }
.article-body section > p:not(.micro) { grid-column: 3; margin: 0 0 1.2em; font-size: 1.05rem; }
.article-body section > p:not(.micro) + p { grid-column: 3; }
.article-body .contact-block { background: var(--paper-2); }
.contact-block address { grid-column: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; font-style: normal; }
.contact-block address a { color: #395a66; font-weight: 700; }

@media (max-width: 1050px) {
  .hero-grid { grid-template-columns: 1fr minmax(300px, .7fr); min-height: 590px; }
  .intro-grid, .cable-grid { grid-template-columns: 90px 1fr 1fr; }
  .intro-grid .margin-note, .cable-grid .margin-note { grid-column: 2 / 4; margin-top: 10px; max-width: 560px; }
  .camera-grid { grid-template-columns: 1fr 1fr; }
  .camera-grid .section-heading { grid-row: auto; }
  .camera-grid .rail-note { grid-column: 2; }
  .signal-list { grid-column: 1 / -1; }
  .light-grid { grid-template-columns: 90px 1fr; }
  .tech-facts { grid-column: 2; grid-row: auto; margin-top: 30px; }
  .article-body section { grid-template-columns: 120px minmax(260px, .7fr) minmax(300px, 1fr); }
}

@media (max-width: 760px) {
  :root { --page: min(100% - 28px, 1320px); }
  .site-header { min-height: 92px; align-items: flex-start; flex-direction: column; gap: 5px; padding: 18px 0 0; }
  .site-nav { width: 100%; gap: 0; justify-content: space-between; overflow-x: auto; }
  .site-nav a { padding: 13px 0 15px; font-size: .62rem; }
  .hero-grid { display: flex; min-height: auto; flex-direction: column; padding: 70px 22px 52px; }
  .hero-copy { order: 2; padding: 54px 0 0; }
  .hero h1 { font-size: clamp(3.35rem, 15vw, 5.4rem); }
  .hero-image { order: 1; width: 78%; margin-left: auto; }
  .coordinate-b { display: none; }
  .section { padding: 80px 24px; }
  .intro-grid, .camera-grid, .light-grid, .sound-grid, .cable-grid, .coordination-grid, .checklist-grid { display: block; }
  .number-mark { margin-bottom: 42px; }
  .section-heading { margin-bottom: 38px; }
  .section-heading h2 { font-size: clamp(2.65rem, 12vw, 4.2rem); }
  .intro-grid .margin-note, .cable-grid .margin-note, .rail-note { margin-top: 40px; }
  .signal-list { margin-top: 44px; }
  .signal-list li { grid-template-columns: 38px 1fr; }
  .signal-list em { grid-column: 2; }
  .tech-facts { margin-top: 44px; }
  .tech-facts p { grid-template-columns: 28px 86px 1fr; }
  .detail-image { width: 82%; margin: 0 0 62px auto; }
  blockquote { margin-bottom: 0; }
  .sequence { overflow-x: auto; margin-top: 50px; padding-bottom: 10px; }
  .sequence i { flex-basis: 44px; min-width: 44px; }
  .checklist { margin-top: 50px; }
  .final-check { padding: 95px 24px; }
  .final-check h2 { font-size: clamp(3.15rem, 14vw, 5rem); }
  .project-note { grid-template-columns: 1fr; }
  .site-footer { grid-template-columns: 1fr; }
  .site-footer > * { min-height: auto; border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .site-footer > *:last-child { border-bottom: 0; }
  .article-head { min-height: 380px; padding: 68px 24px 52px; }
  .article-head h1 { font-size: clamp(3.6rem, 17vw, 6rem); }
  .article-body section { display: block; padding: 64px 24px; }
  .article-body h2 { margin-bottom: 34px; }
  .article-body section > p:not(.micro) { margin-bottom: 1.3em; }
  .contact-block address { margin-top: 30px; }
}

@media (max-width: 390px) {
  .site-nav { gap: 15px; justify-content: flex-start; }
  .hero h1 { font-size: 3.25rem; }
  .hero-image, .detail-image { width: 90%; }
  .technical-frame figcaption { flex-direction: column; }
  .tech-facts p { grid-template-columns: 24px 1fr; }
  .tech-facts p:last-child { grid-template-columns: 24px 1fr; }
  .tech-facts p b { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}