:root {
  --architecture-night: #0b100e;
  --architecture-forest: #16211c;
  --architecture-gold: #d7b57a;
  --architecture-line: rgba(224, 193, 137, .34);
  --architecture-soft: rgba(255, 249, 238, .68);
  --architecture-serif: "Songti TC", "STSong", "Noto Serif TC", Georgia, serif;
}

.architecture-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
  padding: clamp(122px, 15vh, 170px) 0 clamp(72px, 11vh, 122px);
  background:
    radial-gradient(circle at 70% 38%, rgba(191, 143, 74, .11), transparent 31%),
    linear-gradient(142deg, #0a0f0d 0%, #17211d 51%, #0b100d 100%);
  color: #fffaf1;
}
.architecture-section::before {
 position: absolute;
 z-index: -2;
 inset: 0;
  background: url("/assets/manus-storage/gold-menu-footer_a71deb6a.png") center / cover no-repeat;
 content: "";
 opacity: .055;
 mix-blend-mode: screen;
}
.architecture-section::after {
  position: absolute;
  z-index: -1;
  top: 12%;
  right: -12vw;
  width: min(63vw, 920px);
  height: 80%;
  background-image: repeating-radial-gradient(ellipse at 83% 50%, transparent 0 28px, rgba(231, 202, 145, .1) 29px 30px, transparent 31px 56px);
  content: "";
  opacity: .24;
  mask-image: linear-gradient(90deg, transparent, #000 28%, #000 75%, transparent);
  pointer-events: none;
}
.architecture-aura {
  position: absolute;
  z-index: -1;
  top: 31%;
  left: -17vw;
  width: 54vw;
  height: 54vw;
  border: 1px solid rgba(224, 191, 130, .09);
  border-radius: 50%;
  box-shadow: 0 0 0 60px rgba(211, 171, 105, .018), 0 0 0 140px rgba(211, 171, 105, .012);
  pointer-events: none;
}

.architecture-inner {
  width: min(1440px, calc(100% - 12vw));
  margin: 0 auto;
}
.architecture-intro {
  max-width: 790px;
}
.architecture-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 23px;
  color: rgba(230, 199, 142, .9);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .23em;
}
.architecture-eyebrow span:first-child {
  display: inline-grid;
  width: 28px;
  height: 20px;
  place-items: center;
  border: 1px solid rgba(223, 189, 126, .62);
  font-size: 9px;
}
.architecture-title {
  max-width: 760px;
  margin: 0;
  font-family: var(--architecture-serif);
  font-size: clamp(44px, 5vw, 82px);
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1.12;
}
.architecture-title-line { display: block; overflow: hidden; padding-bottom: .08em; }
.architecture-title-line > span { display: block; opacity: 0; transform: translateY(112%); transition: transform 830ms cubic-bezier(.16, 1, .3, 1), opacity 460ms ease; }
.architecture-section.is-revealed .architecture-title-line > span { opacity: 1; transform: translateY(0); }
.architecture-section.is-revealed .architecture-title-line:nth-child(2) > span { transition-delay: 140ms; }
.architecture-intro-copy {
  max-width: 605px;
  margin: 25px 0 0;
  color: var(--architecture-soft);
  font-size: clamp(13px, 1.08vw, 16px);
  font-weight: 300;
  letter-spacing: .04em;
  line-height: 1.85;
}

.architecture-gallery { margin-top: clamp(33px, 5vh, 58px); }
.architecture-viewport {
  position: relative;
  height: clamp(400px, 45vw, 628px);
  overflow: hidden;
  outline: none;
  perspective: 1280px;
  touch-action: pan-y;
  user-select: none;
  cursor: grab;
}
.architecture-viewport:focus-visible { outline: 1px solid rgba(239, 211, 157, .85); outline-offset: 7px; }
.architecture-viewport.is-dragging { cursor: grabbing; }
.architecture-stage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.architecture-card {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: clamp(218px, 35vw, 495px);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(238, 211, 158, .55);
  border-radius: 13px;
  aspect-ratio: 1.4 / 1;
  background: #161714;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .36), inset 0 0 0 1px rgba(255, 252, 242, .08);
  cursor: zoom-in;
  transform-style: preserve-3d;
  transition: opacity 240ms ease, filter 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
  will-change: transform, opacity;
}
.architecture-card::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .03), rgba(3, 9, 7, .46));
  content: "";
  pointer-events: none;
  transition: opacity 500ms ease;
}
.architecture-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(.16, 1, .3, 1);
}
.architecture-card[data-gallery-index="0"] img { padding: 6px; background: #efefea; object-fit: contain; }
.architecture-card.is-active { border-color: rgba(250, 223, 168, .95); box-shadow: 0 35px 82px rgba(0, 0, 0, .48), 0 0 28px rgba(215, 177, 115, .12); cursor: zoom-in; }
.architecture-viewport.is-dragging .architecture-card { cursor: grabbing; }
.architecture-card.is-active::after { opacity: .16; }
.architecture-card.is-active:hover img { transform: scale(1.025); }
.architecture-card-number {
  position: absolute;
  z-index: 2;
  left: 17px;
  bottom: 14px;
  color: rgba(255, 248, 235, .9);
  font-size: 10px;
  letter-spacing: .18em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}
.architecture-card-zoom {
  position: absolute;
  z-index: 4;
  right: 13px;
  bottom: 11px;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(253, 231, 185, .95);
  border-radius: 50%;
  background: rgba(8, 13, 11, .7);
  color: #ffdf9d;
  box-shadow: 0 0 0 4px rgba(223, 185, 111, .13), 0 8px 22px rgba(0, 0, 0, .3);
  backdrop-filter: blur(7px);
  cursor: zoom-in;
  opacity: .95;
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.architecture-card-zoom:hover, .architecture-card-zoom:focus-visible {
  background: rgba(148, 105, 46, .78);
  box-shadow: 0 0 0 6px rgba(229, 191, 118, .17), 0 10px 25px rgba(0, 0, 0, .34);
  outline: 0;
  transform: scale(1.08);
}
.architecture-card-zoom svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.6; }

.architecture-active-caption {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 21px;
  width: min(760px, 100%);
  margin: -6px auto 0;
  padding: 23px 0 0;
  border-top: 1px solid var(--architecture-line);
}
.architecture-caption-index { margin: 3px 0 0; color: rgba(225, 192, 132, .86); font-size: 10px; letter-spacing: .18em; }
.architecture-caption-kicker { margin: 0 0 7px; color: rgba(224, 191, 130, .78); font-size: 9px; letter-spacing: .19em; }
.architecture-active-caption h3 { margin: 0; font-family: var(--architecture-serif); font-size: clamp(24px, 2.3vw, 34px); font-weight: 500; letter-spacing: .08em; }
.architecture-active-caption div > p:last-child { max-width: 480px; margin: 8px 0 0; color: rgba(255, 249, 238, .65); font-size: 13px; line-height: 1.72; }

.architecture-focus-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(45px, 7vh, 78px);
  border-top: 1px solid var(--architecture-line);
  border-left: 1px solid var(--architecture-line);
}
.architecture-focus {
  min-height: 172px;
  padding: 24px 28px 26px;
  border-right: 1px solid var(--architecture-line);
  border-bottom: 1px solid var(--architecture-line);
  background: rgba(255, 252, 245, .018);
  opacity: .46;
  transition: opacity 440ms ease, background 440ms ease;
}
.architecture-focus.is-active { background: rgba(209, 172, 103, .075); opacity: 1; }
.architecture-focus-number { margin: 0 0 19px; color: rgba(225, 190, 125, .8); font-size: 10px; letter-spacing: .16em; }
.architecture-focus h3 { margin: 0; color: #fff9ef; font-family: var(--architecture-serif); font-size: 23px; font-weight: 500; letter-spacing: .08em; }
.architecture-focus p:last-child { max-width: 330px; margin: 11px 0 0; color: rgba(255, 249, 239, .62); font-size: 12px; line-height: 1.75; }

.architecture-notes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 42px;
  margin-top: 25px;
  color: rgba(255, 250, 239, .64);
  font-size: 11px;
  letter-spacing: .035em;
  line-height: 1.72;
}
.architecture-notes > p { display: flex; align-items: center; gap: 14px; margin: 0; }
.architecture-notes > p:first-child > span:first-child { color: rgba(230, 199, 142, .91); font-size: 10px; letter-spacing: .16em; }
.architecture-reference { color: rgba(235, 211, 166, .67); font-size: 9px; letter-spacing: .13em; }

.architecture-reveal { opacity: 0; transform: translateY(22px); transition: opacity 680ms cubic-bezier(.16, 1, .3, 1) var(--architecture-delay, 0ms), transform 680ms cubic-bezier(.16, 1, .3, 1) var(--architecture-delay, 0ms); }
.architecture-section.is-revealed .architecture-reveal { opacity: 1; transform: translateY(0); }

.architecture-lightbox {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 6vw;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 300ms ease, visibility 300ms ease;
}
.architecture-lightbox.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.architecture-lightbox-backdrop { position: absolute; inset: 0; border: 0; background: rgba(4, 8, 7, .9); backdrop-filter: blur(13px); }
.architecture-lightbox-panel {
  position: relative;
  z-index: 1;
  width: min(1260px, 100%);
  max-height: 88svh;
  transform: translateY(14px) scale(.985);
  transition: transform 420ms cubic-bezier(.16, 1, .3, 1);
}
.architecture-lightbox.is-open .architecture-lightbox-panel { transform: translateY(0) scale(1); }
.architecture-lightbox-layout { display: grid; grid-template-columns: minmax(0, 1.46fr) minmax(270px, .54fr); overflow: hidden; border: 1px solid rgba(239, 212, 159, .62); background: linear-gradient(138deg, rgba(15, 22, 18, .98), rgba(8, 12, 10, .99)); box-shadow: 0 30px 90px rgba(0, 0, 0, .42); }
.architecture-lightbox-figure { display: grid; min-width: 0; margin: 0; }
.architecture-lightbox-media { display: grid; min-height: 0; background: #121611; }
.architecture-lightbox-figure img { display: block; width: 100%; max-height: calc(88svh - 54px); min-height: 0; object-fit: contain; }
.architecture-lightbox-figure figcaption { padding: 12px 16px; border-top: 1px solid rgba(239, 212, 159, .24); color: rgba(225, 190, 126, .88); font-size: 10px; letter-spacing: .17em; }
.architecture-lightbox-content { display: flex; flex-direction: column; justify-content: center; min-height: 0; padding: clamp(32px, 4vw, 68px) clamp(27px, 3.8vw, 56px); border-left: 1px solid rgba(239, 212, 159, .26); background: linear-gradient(160deg, rgba(210, 171, 103, .1), transparent 36%), repeating-radial-gradient(ellipse at 98% 8%, transparent 0 18px, rgba(220, 188, 128, .065) 19px 20px, transparent 21px 37px); }
.architecture-lightbox-kicker { margin: 0 0 16px; color: rgba(225, 190, 126, .86); font-size: 9px; font-weight: 600; letter-spacing: .2em; }
.architecture-lightbox-content h2 { margin: 0; color: #fffaf0; font-family: var(--architecture-serif); font-size: clamp(31px, 3.2vw, 54px); font-weight: 500; letter-spacing: .08em; line-height: 1.22; }
.architecture-lightbox-description { margin: 23px 0 0; color: rgba(255, 249, 238, .72); font-size: 14px; font-weight: 300; letter-spacing: .045em; line-height: 1.9; }
.architecture-lightbox-reference { display: flex; align-items: center; gap: 10px; margin: 33px 0 0; padding-top: 16px; border-top: 1px solid rgba(239, 212, 159, .27); color: rgba(235, 211, 166, .7); font-size: 8px; letter-spacing: .13em; line-height: 1.6; }
.architecture-lightbox-close {
  position: absolute;
  z-index: 2;
  top: 13px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid rgba(238, 211, 158, .56);
  background: rgba(10, 15, 12, .7);
  color: #fff9ef;
  font-size: 10px;
  letter-spacing: .12em;
  transition: color 180ms ease, background 180ms ease;
}
.architecture-lightbox-close:hover { background: rgba(91, 67, 34, .7); color: #ffe4ab; }
.architecture-lightbox-close span:last-child { font-size: 20px; font-weight: 300; line-height: .7; }
body.architecture-lightbox-open { overflow: hidden; }

@media (max-width: 800px) {
  .architecture-section { min-height: auto; padding: 114px 0 70px; }
  .architecture-inner { width: min(100% - 40px, 620px); }
  .architecture-eyebrow { margin-bottom: 16px; font-size: 9px; letter-spacing: .18em; }
  .architecture-title { font-size: clamp(38px, 12vw, 57px); }
  .architecture-intro-copy { margin-top: 20px; font-size: 13px; line-height: 1.8; }
  .architecture-gallery { margin-top: 32px; }
  .architecture-viewport { height: clamp(330px, 92vw, 480px); margin-inline: -20px; }
  .architecture-card { width: min(78vw, 420px); border-radius: 10px; }
  .architecture-card-number { left: 13px; bottom: 11px; }
  .architecture-card-zoom { right: 10px; bottom: 9px; width: 40px; height: 40px; }
  .architecture-active-caption { grid-template-columns: 52px minmax(0, 1fr); gap: 13px; margin-top: -1px; padding-top: 18px; }
  .architecture-active-caption h3 { font-size: 24px; }
  .architecture-active-caption div > p:last-child { margin-top: 7px; font-size: 12px; }
  .architecture-focus-list { grid-template-columns: 1fr; margin-top: 44px; }
  .architecture-focus { min-height: 0; padding: 20px 17px 19px; }
  .architecture-focus-number { margin-bottom: 11px; }
  .architecture-focus h3 { font-size: 21px; }
  .architecture-focus p:last-child { margin-top: 7px; }
  .architecture-notes { align-items: flex-start; margin-top: 20px; font-size: 10px; }
  .architecture-notes > p { align-items: flex-start; gap: 10px; }
  .architecture-reference { font-size: 8px; }
  .architecture-lightbox { padding: 20px; }
  .architecture-lightbox-panel { max-height: 90svh; overflow-y: auto; }
  .architecture-lightbox-layout { grid-template-columns: 1fr; }
  .architecture-lightbox-figure img { max-height: min(49svh, 510px); }
  .architecture-lightbox-figure figcaption { padding: 10px 13px; font-size: 9px; }
  .architecture-lightbox-content { padding: 27px 22px 25px; border-top: 1px solid rgba(239, 212, 159, .26); border-left: 0; }
  .architecture-lightbox-kicker { margin-bottom: 10px; }
  .architecture-lightbox-content h2 { font-size: 30px; }
  .architecture-lightbox-description { margin-top: 12px; font-size: 12px; line-height: 1.78; }
  .architecture-lightbox-reference { margin-top: 21px; padding-top: 12px; }
  .architecture-lightbox-close { top: 9px; right: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .architecture-reveal, .architecture-title-line > span { opacity: 1; transform: none; transition: none; }
  .architecture-card, .architecture-card img, .architecture-lightbox, .architecture-lightbox-panel { transition: none; }
}