:root {
  --ink: #090b0b;
  --ink-soft: #111413;
  --paper: #e9e7df;
  --paper-bright: #f4f2eb;
  --white: #f2f3ef;
  --muted: #92958f;
  --champagne: #b29460;
  --line-dark: rgba(242, 243, 239, 0.14);
  --line-light: rgba(15, 18, 17, 0.16);
  --shell: min(1200px, calc(100vw - 96px));
  --shell-wide: min(1512px, calc(100vw - 64px));
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--ink);
}

body {
  margin: 0;
  color: var(--white);
  background: var(--ink);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button,
a { font: inherit; }

button { color: inherit; }

a { color: inherit; text-decoration: none; }

img { display: block; max-width: 100%; }

.shell { width: var(--shell); margin-inline: auto; }
.shell-wide { width: var(--shell-wide); margin-inline: auto; }

.topbar {
  position: fixed;
  top: 16px;
  left: 50%;
  z-index: 30;
  display: grid;
  width: min(1120px, calc(100vw - 40px));
  min-height: 58px;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 7px 9px 7px 18px;
  border: 1px solid rgba(231, 232, 226, 0.15);
  border-radius: 32px;
  background: rgba(8, 10, 10, 0.88);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(18px);
  transform: translateX(-50%);
}

.brand {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  width: max-content;
  font-family: "Syne", sans-serif;
  font-size: 12px;
  font-weight: 600;
}

.brand img { width: 20px; height: 20px; }

.topnav { display: flex; align-items: center; gap: 28px; }

.topnav a {
  position: relative;
  display: grid;
  min-height: 44px;
  align-items: center;
  color: rgba(242, 243, 239, 0.54);
  font-size: 10px;
  transition: color 180ms ease-out;
}

.topnav a::after {
  position: absolute;
  right: 0;
  bottom: 6px;
  left: 0;
  height: 1px;
  background: var(--champagne);
  content: "";
  transform: scaleX(0);
  transition: transform 220ms var(--ease);
}

.topnav a:hover,
.topnav a:focus-visible,
.topnav a.is-active { color: var(--white); }

.topnav a.is-active::after { transform: scaleX(1); }

.return-link,
.back-button {
  display: inline-grid;
  min-height: 44px;
  align-items: center;
  justify-self: end;
  padding: 0 20px;
  border: 1px solid rgba(242, 243, 239, 0.82);
  border-radius: 24px;
  color: var(--ink);
  background: var(--white);
  font-size: 10px;
  font-weight: 600;
  transition: color 180ms ease-out, background-color 180ms ease-out;
}

.return-link:hover,
.return-link:focus-visible,
.back-button:hover,
.back-button:focus-visible {
  color: var(--white);
  background: transparent;
  outline: none;
}

.hero {
  position: relative;
  display: grid;
  min-height: 100svh;
  overflow: hidden;
  align-items: end;
}

.hero-image,
.hero-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-image { object-fit: cover; object-position: 50% 54%; }

.hero-scrim {
  background:
    linear-gradient(180deg, rgba(6, 8, 8, 0.2) 0%, rgba(6, 8, 8, 0.03) 30%, rgba(6, 8, 8, 0.88) 100%),
    linear-gradient(90deg, rgba(6, 8, 8, 0.72) 0%, rgba(6, 8, 8, 0.08) 58%, rgba(6, 8, 8, 0.18) 100%);
}

.hero-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(360px, 0.6fr);
  gap: 8vw;
  align-items: end;
  padding-bottom: clamp(74px, 9vh, 120px);
}

.archive-id,
.measured-label,
.hero-en,
.hero-facts dt,
.model-facts dt,
.model-meta,
.facade-readout > span,
.model-hint,
.closing p {
  font-family: "DM Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.archive-id,
.measured-label {
  margin: 0 0 22px;
  color: var(--champagne);
  font-size: 10px;
}

.hero h1,
.section-head h2,
.model-copy h2,
.archive-summary h2 {
  margin: 0;
  font-family: "Syne", "Noto Sans SC", sans-serif;
  font-weight: 600;
  letter-spacing: -0.035em;
}

.section-head h2 { max-width: 820px; }

.hero h1 {
  max-width: 880px;
  font-size: clamp(42px, 6.3vw, 104px);
  line-height: 0.92;
}

.hero h1 span { display: block; }

.hero-en {
  margin: 22px 0 0;
  color: rgba(242, 243, 239, 0.62);
  font-size: 10px;
}

.hero-facts,
.model-facts { margin: 0; }

.hero-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
}

.hero-facts div {
  min-height: 80px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line-dark);
}

.hero-facts div:nth-child(odd):not(.hero-fact--wide) {
  padding-right: 20px;
  border-right: 1px solid var(--line-dark);
}

.hero-facts div:nth-child(even) { padding-left: 20px; }
.hero-facts .hero-fact--wide { grid-column: 1 / -1; }

.hero-facts dt,
.model-facts dt { color: rgba(242, 243, 239, 0.42); font-size: 8px; }
.hero-facts dd,
.model-facts dd { margin: 8px 0 0; font-size: 13px; }

.hero-scroll {
  position: absolute;
  right: 32px;
  bottom: 24px;
  z-index: 3;
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 14px;
  color: rgba(242, 243, 239, 0.62);
  font-size: 9px;
}

.hero-scroll i { width: 42px; height: 1px; background: var(--champagne); }

.arrival-section,
.facade-section,
.detail-section,
.drawings-section { padding: clamp(100px, 12vw, 180px) 0; }

.arrival-section,
.facade-section { background: var(--ink); }
.detail-section { color: var(--white); background: var(--ink); }

.section-head {
  margin-bottom: clamp(50px, 7vw, 96px);
}

.section-head h2,
.model-copy h2,
.archive-summary h2 {
  font-size: clamp(38px, 5.1vw, 76px);
  line-height: 1.02;
}

.model-copy-inner > p,
.archive-summary p {
  margin: 0;
  color: rgba(242, 243, 239, 0.6);
  font-size: 14px;
  line-height: 1.9;
}

.accordion-panel {
  position: relative;
  overflow: hidden;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: #151817;
  cursor: zoom-in;
  flex: 1 1 0;
  transition: flex 650ms var(--ease);
}

.accordion-panel::after {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  content: "";
  pointer-events: none;
}

.accordion-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 800ms var(--ease), filter 400ms ease-out;
}

.accordion-panel:focus-visible { outline: 2px solid var(--champagne); outline-offset: 4px; }

.case-accordion {
  display: flex;
  height: clamp(460px, 64vw, 760px);
  gap: 8px;
}

.accordion-panel.is-active { flex: 4.8 1 0; }
.accordion-panel:not(.is-active) img { filter: saturate(0.42) brightness(0.56); }
.accordion-panel.is-active img,
.accordion-panel:hover img,
.accordion-panel:focus-visible img { filter: saturate(1) brightness(1); transform: scale(1.012); }
.accordion-panel .panel-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 8, 8, 0.02), rgba(6, 8, 8, 0.6));
  transition: background 300ms ease-out;
}
.accordion-panel:not(.is-active) .panel-shade { background: linear-gradient(180deg, rgba(6, 8, 8, 0.32), rgba(6, 8, 8, 0.82)); }
.accordion-panel:hover .panel-shade,
.accordion-panel:focus-visible .panel-shade { background: linear-gradient(180deg, rgba(6, 8, 8, 0.02), rgba(6, 8, 8, 0.6)); }

.panel-index,
.panel-title {
  position: absolute;
  bottom: 18px;
  z-index: 2;
  white-space: nowrap;
}

.panel-index {
  left: 16px;
  color: var(--champagne);
  font-family: "DM Mono", monospace;
  font-size: 9px;
}

.panel-title {
  right: 18px;
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 260ms ease-out, transform 260ms var(--ease);
}

.accordion-panel.is-active .panel-title,
.accordion-panel:hover .panel-title,
.accordion-panel:focus-visible .panel-title { opacity: 1; transform: translateY(0); }

.facade-section { padding-top: 30px; }

.facade-readout {
  display: grid;
  grid-template-columns: 90px minmax(200px, 0.45fr) minmax(300px, 0.55fr);
  gap: 24px;
  align-items: start;
  padding-top: 24px;
  border-bottom: 1px solid var(--line-dark);
  padding-bottom: 24px;
}

.facade-readout > span { color: var(--champagne); font-size: 9px; }
.facade-readout strong { font-size: 18px; font-weight: 500; }
.facade-readout p { margin: 0; color: rgba(242, 243, 239, 0.54); font-size: 12px; line-height: 1.75; }

.film-section {
  padding: clamp(100px, 12vw, 180px) 0;
  color: var(--white);
  background: var(--ink-soft);
}

.film-section-head {
  display: flex;
  align-items: start;
  margin-bottom: clamp(40px, 5vw, 70px);
}

.film-section h2 {
  margin: 0;
  font-family: "Syne", "Noto Sans SC", sans-serif;
  font-size: clamp(38px, 5.1vw, 76px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.film-player {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #080a0a;
  border: 1px solid rgba(242, 243, 239, 0.16);
}

.film-player iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.film-external-link {
  width: max-content;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  margin-top: 18px;
  border-bottom: 1px solid var(--champagne);
  color: rgba(242, 243, 239, 0.66);
  font-size: 11px;
  transition: color 220ms ease-out;
}

.film-external-link:hover,
.film-external-link:focus-visible { color: var(--champagne); }

.model-section {
  display: grid;
  min-height: 100svh;
  grid-template-columns: minmax(340px, 0.36fr) minmax(0, 0.64fr);
  background: var(--paper-bright);
}

.model-copy {
  display: grid;
  align-items: center;
  padding: 112px max(48px, 5vw);
  color: var(--white);
  background: var(--ink-soft);
}

.model-copy-inner { max-width: 520px; }
.model-copy-inner > p { margin-top: 34px; }
.model-technical { margin-top: 34px; }
.model-technical summary { width: fit-content; padding: 12px 0; color: var(--white); font-size: 13px; cursor: pointer; }
.model-technical summary:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.model-technical .model-facts { margin-top: 12px; }

.model-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 52px;
  border-top: 1px solid var(--line-dark);
}

.model-facts div { padding: 16px 0; border-bottom: 1px solid var(--line-dark); }
.model-facts div:nth-child(odd) { padding-right: 18px; border-right: 1px solid var(--line-dark); }
.model-facts div:nth-child(even) { padding-left: 18px; }

.model-viewer { position: relative; min-width: 0; min-height: 760px; overflow: hidden; background: #efede5; }
.model-viewer::before {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(40, 43, 40, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40, 43, 40, 0.055) 1px, transparent 1px);
  background-size: 132px 132px;
  content: "";
  pointer-events: none;
}

.model-poster,
.model-viewer canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.model-poster { object-fit: cover; transition: opacity 500ms ease-out; }
.model-viewer canvas { z-index: 1; touch-action: none; opacity: 0; transition: opacity 500ms ease-out; }
.model-viewer.is-ready canvas { opacity: 1; }
.model-viewer.is-ready .model-poster { opacity: 0; pointer-events: none; }

.model-status {
  position: absolute;
  top: 96px;
  left: 28px;
  z-index: 4;
  display: grid;
  min-width: 230px;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(10, 12, 11, 0.15);
  color: var(--ink);
  background: rgba(244, 242, 235, 0.88);
  font-size: 10px;
  backdrop-filter: blur(12px);
}

.model-status[hidden] { display: none; }
.model-status-progress { display: block; width: var(--progress, 4%); height: 2px; background: var(--champagne); transition: width 160ms ease-out; }
.model-status button,
.model-toolbar button {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(10, 12, 11, 0.18);
  border-radius: 24px;
  color: var(--ink);
  background: rgba(244, 242, 235, 0.86);
  font-size: 10px;
  cursor: pointer;
}

.model-status button { width: max-content; color: var(--white); background: var(--ink); }
.model-toolbar { position: absolute; top: 96px; right: 28px; z-index: 3; display: flex; gap: 8px; }
.model-toolbar button:disabled { cursor: wait; opacity: 0.45; }
.model-toolbar button:hover:not(:disabled),
.model-toolbar button:focus-visible { color: var(--white); background: var(--ink); outline: none; }
.model-hint { position: absolute; right: 28px; bottom: 26px; z-index: 3; margin: 0; color: rgba(9, 11, 11, 0.54); font-size: 8px; }
.model-meta { position: absolute; bottom: 22px; left: 28px; z-index: 3; display: grid; gap: 7px; color: rgba(9, 11, 11, 0.54); font-size: 8px; }
.model-meta strong { color: var(--ink); font-size: 10px; font-weight: 500; }

.detail-section .measured-label { color: var(--champagne); }

.drawings-section { background: var(--ink-soft); }

.drawing-browser {
  display: grid;
  grid-template-columns: minmax(224px, 0.27fr) minmax(0, 0.73fr);
  gap: clamp(32px, 5vw, 84px);
  align-items: start;
}

.drawing-list { border-top: 1px solid var(--line-dark); }

.drawing-list button {
  display: grid;
  width: 100%;
  min-height: 66px;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 3px 10px;
  align-content: center;
  padding: 12px 4px;
  border: 0;
  border-bottom: 1px solid var(--line-dark);
  color: rgba(242, 243, 239, 0.5);
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: color 180ms ease-out, background 180ms ease-out;
}

.drawing-list button span,
.drawing-preview-meta span {
  color: var(--champagne);
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
}

.drawing-list button strong { font-size: 13px; font-weight: 500; }
.drawing-list button em { grid-column: 2; font-family: "DM Mono", monospace; font-size: 8px; font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; }
.drawing-list button:hover,
.drawing-list button:focus-visible,
.drawing-list button.is-active { color: var(--white); background: rgba(242, 243, 239, 0.055); outline: none; }
.drawing-list button:focus-visible { box-shadow: inset 2px 0 0 var(--champagne); }

.drawing-preview { min-width: 0; }

.drawing-sheet {
  display: grid;
  width: 100%;
  min-height: min(58vw, 760px);
  place-items: center;
  padding: clamp(18px, 3vw, 48px);
  border: 0;
  background: var(--paper-bright);
  cursor: zoom-in;
}

.drawing-sheet img { width: 100%; height: 100%; max-height: 680px; object-fit: contain; }
.drawing-sheet:focus-visible { outline: 2px solid var(--champagne); outline-offset: 4px; }

.drawing-preview-meta {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 18px;
  align-items: center;
  padding-top: 20px;
  border-bottom: 1px solid var(--line-dark);
  padding-bottom: 20px;
}

.drawing-preview-meta strong { font-size: 16px; font-weight: 500; }
.drawing-preview-meta a,
.project-source-link { color: var(--white); font-size: 11px; }
.drawing-preview-meta a:hover,
.drawing-preview-meta a:focus-visible,
.project-source-link:hover,
.project-source-link:focus-visible { color: var(--champagne); }

.archive-summary { padding: clamp(110px, 14vw, 200px) 0; background: var(--ink-soft); }
.archive-summary-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr); gap: 10vw; align-items: end; }
.archive-summary-content { display: grid; gap: 32px; }

.project-records { margin: 0; border-top: 1px solid var(--line-dark); }
.project-records div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line-dark); }
.project-records dt { color: rgba(242, 243, 239, 0.44); font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: 0.08em; }
.project-records dd { margin: 0; font-size: 13px; line-height: 1.55; }
.project-source-link { width: max-content; min-height: 44px; display: inline-flex; align-items: center; border-bottom: 1px solid var(--champagne); }
.project-external-links { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }

.closing {
  display: flex;
  min-height: 148px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.closing p { margin: 0; color: rgba(242, 243, 239, 0.48); font-size: 9px; }

dialog#viewer {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
}

dialog#viewer .viewer-zoom {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  right: max(78px, calc(env(safe-area-inset-right) + 78px));
  z-index: 4;
  min-width: 48px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(231, 234, 232, 0.16);
  border-radius: 24px;
  color: #e7eae8;
  background: rgba(16, 18, 18, 0.88);
  font-family: "DM Mono", monospace;
  font-size: 9px;
  cursor: pointer;
}

dialog#viewer.is-zoomed .viewer-stage { overflow: auto !important; place-items: center !important; }
dialog#viewer.is-zoomed .viewer-stage img {
  width: auto !important;
  max-width: min(100%, calc(100vw - 192px)) !important;
  height: auto !important;
  max-height: calc(100dvh - 208px) !important;
  cursor: zoom-out;
}

/* Drawing zoom changes the layout size so every enlarged edge remains reachable by panning. */
dialog#viewer.is-drawing.is-zoomed .viewer-stage {
  display: grid !important;
  place-items: start center !important;
  padding: 96px 7vw 120px !important;
}
dialog#viewer.is-drawing.is-zoomed .viewer-stage img {
  width: min(6144px, calc((100vw - 192px) * var(--viewer-scale, 1))) !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  margin: auto !important;
  transform: none !important;
}

@media (max-width: 1100px) {
  :root { --shell: min(920px, calc(100vw - 48px)); --shell-wide: calc(100vw - 32px); }
  .topnav { gap: 16px; }
  .hero-layout { grid-template-columns: 1.2fr 0.8fr; gap: 5vw; }
  .model-section { grid-template-columns: 0.42fr 0.58fr; }
  .model-copy { padding-inline: 36px; }
}

@media (max-width: 820px) {
  :root { --shell: calc(100vw - 36px); --shell-wide: calc(100vw - 24px); }
  .topbar { grid-template-columns: 1fr auto; }
  .topnav { display: none; }
  .hero-layout,
  .archive-summary-grid,
  .drawing-browser { grid-template-columns: 1fr; }
  .hero-layout { gap: 46px; }
  .hero-facts { max-width: 560px; }
  .case-accordion { height: 600px; }
  .facade-readout { grid-template-columns: 70px 1fr; }
  .facade-readout p { grid-column: 2; }
  .model-section { grid-template-columns: 1fr; }
  .model-copy { min-height: 600px; }
  .model-viewer { min-height: 72svh; }
  .drawing-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .drawing-list button { min-height: 72px; border-top: 0; }
  .drawing-sheet { min-height: 72vw; }
}

@media (max-width: 620px) {
  .topbar { top: 10px; width: calc(100vw - 20px); padding-left: 13px; }
  .brand { font-size: 11px; }
  .return-link { padding: 0 14px; }
  .hero { min-height: 880px; }
  .hero-image { object-position: 58% 50%; }
  .hero-layout { padding-bottom: 72px; }
  .hero h1 { font-size: clamp(40px, 12vw, 62px); }
  .hero-facts { grid-template-columns: 1fr; }
  .hero-facts div,
  .hero-facts div:nth-child(odd):not(.hero-fact--wide),
  .hero-facts div:nth-child(even) { padding: 14px 0; border-right: 0; }
  .hero-facts .hero-fact--wide { grid-column: auto; }
  .hero-scroll { display: none; }
  .section-head { margin-bottom: 42px; }
  .section-head h2,
  .model-copy h2,
  .archive-summary h2 { font-size: clamp(35px, 10.5vw, 54px); }
  .case-accordion { display: grid; height: auto; gap: 8px; }
  .film-section { padding-block: 92px; }
  .film-section-head { margin-bottom: 32px; }
  .accordion-panel { height: 92px; transition: height 520ms var(--ease); }
  .accordion-panel.is-active { height: min(72vw, 430px); }
  .accordion-panel .panel-title { opacity: 1; transform: none; }
  .facade-readout { grid-template-columns: 58px 1fr; }
  .model-copy { min-height: auto; padding: 112px 20px 80px; }
  .model-facts { margin-top: 38px; }
  .drawing-list { grid-template-columns: 1fr; }
  .drawing-preview-meta { grid-template-columns: 1fr; gap: 8px; }
  .drawing-preview-meta a { margin-top: 10px; }
  .project-records div { grid-template-columns: 1fr; gap: 7px; }
  .model-viewer { min-height: 70svh; }
  .model-toolbar { top: 18px; right: 14px; }
  .model-status { top: 76px; left: 14px; min-width: 200px; }
  .model-hint { right: 14px; bottom: 16px; }
  .model-meta { left: 14px; bottom: 16px; }
  .closing { align-items: flex-start; flex-direction: column; justify-content: center; }
}

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