:root {
  color-scheme: dark;
  --gold: #e9c587;
  --gold-bright: #ffdfa8;
  --gold-muted: #d2b07a;
  --green: #061b13;
  --ink: #03150e;
  --cream: #f1d9a9;
  font-family: Manrope, sans-serif;
  color: var(--cream);
  background: var(--ink);
}
* { box-sizing: border-box }
html { min-width: 320px }
body { margin: 0 }
button, a, input, textarea { font: inherit }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation }
button { border: 0; color: inherit; background: none; cursor: pointer }
button:disabled { cursor: not-allowed; opacity: .48 }
a { color: inherit; text-decoration: none }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold-bright); outline-offset: 5px;
}
[hidden] { display: none !important }

/* A single room remains the visual anchor. The photograph is never stretched. */
.stage {
  position: relative; isolation: isolate; width: 100%; min-height: 660px;
  height: 100svh; overflow: hidden; background: #03170e;
}
.scene {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 65% 50%; z-index: -3;
}
.stage::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(90deg, #00150be0 0%, #00150b78 32%, transparent 63%),
    linear-gradient(180deg, #0011087a 0%, transparent 23%, transparent 70%, #001309bf 100%);
}
.stage::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 37% 49% at 16% 49%, #346a401f, transparent 75%),
    radial-gradient(ellipse 48% 40% at 55% 102%, #03150e8f, transparent 78%);
}
.lamp-glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .75;
  background: radial-gradient(ellipse 14% 20% at 91% 22%, #ffca783a, transparent 76%),
    radial-gradient(ellipse 31% 47% at 88% 31%, #e2a25114, transparent 76%);
  mix-blend-mode: screen;
}
.hero-copy {
  position: absolute; top: 32%; left: max(6vw, calc((100vw - 1700px)/2 + 5vw));
  width: min(55vw, 880px); z-index: 1;
}
.main-title {
  margin: 0; font: 500 clamp(64px, 5.4vw, 110px)/.96 'Cormorant Garamond', serif;
  letter-spacing: -.031em; color: var(--gold);
  text-shadow: 0 2px 15px #00130dc7, 0 0 20px #e0b5761c;
}
.main-title em {
  display: block; margin-top: .1em; font: inherit; font-style: italic; letter-spacing: -.026em;
}
.title-word {
  display: inline-block; white-space: nowrap;
  background: linear-gradient(180deg, #ffe8b7 0%, #ebc784 43%, #dbb273 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-description {
  width: min(485px, 87%); margin: clamp(27px, 4vh, 43px) 0 0;
  font-size: clamp(16px, 1.15vw, 18px); line-height: 1.76;
  color: #f2d49f; letter-spacing: .005em;
  text-shadow: 0 2px 9px #00140edd;
}
.header {
  position: absolute; top: 29px; right: 4.5%; left: 4.5%; z-index: 2;
  display: flex; align-items: center; justify-content: flex-end; gap: clamp(27px, 3.7vw, 66px);
  color: var(--gold); font-size: 14px;
}
.header nav { display: flex; align-items: center; gap: clamp(22px, 2.5vw, 42px) }
.header nav button, .legal button {
  position: relative; padding: 13px 0; color: var(--gold);
  text-shadow: 0 1px 8px #000b; transition: color .28s ease;
}
.header nav button::after, .legal button::after {
  content: ""; position: absolute; width: 4px; height: 4px; bottom: 1px; left: 50%;
  background: currentColor; border-radius: 50%; opacity: 0; transform: translate(-50%, 5px) scale(.5);
  transition: opacity .28s ease, transform .28s ease;
}
.header nav button:hover, .legal button:hover { color: var(--gold-bright) }
.header nav button:hover::after, .header nav button:focus-visible::after,
.legal button:hover::after, .legal button:focus-visible::after {
  opacity: 1; transform: translate(-50%, 0) scale(1);
}
.menu-toggle { display: none }
.order-button {
  position: relative; isolation: isolate; white-space: nowrap;
  padding: 14px 24px; min-height: 48px; color: var(--gold-bright);
  border: 1px solid #f0cc9166; border-radius: 4px;
  background: linear-gradient(120deg, #ffe2ad1a, #c8a46405 56%, #f4cf8615);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px #fff5d21a, 0 6px 24px #0003;
  text-shadow: 0 1px 5px #00170bd9;
  transition: transform .32s cubic-bezier(.2,.7,.2,1), box-shadow .36s, background .36s;
}
.order-button::before {
  content: ""; position: absolute; inset: -1px; border: 1px solid transparent; border-radius: inherit;
  background: linear-gradient(110deg, transparent 20%, #ffe1a894 48%, transparent 78%) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; pointer-events: none;
}
.order-button:not(:disabled):hover, .order-button:not(:disabled):focus-visible {
  transform: translateY(-2px) scale(1.025);
  background: linear-gradient(120deg, #ffe2ad29, #c8a4640c 56%, #f4cf8625);
  box-shadow: inset 0 1px #fff5d236, 0 10px 28px #0008, 0 0 21px #d9aa5940;
}
.order-button:active { transform: translateY(0) scale(.995) }
.footer {
  position: absolute; bottom: 25px; right: 4.5%; left: 4.5%; min-height: 28px;
  display: flex; align-items: center; color: #e1bb7d; font-size: 12px;
}
.copyright {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px; font-weight: 500; letter-spacing: .045em; white-space: nowrap;
  text-shadow: 0 1px 7px #000b;
}
.legal {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center; gap: 14px;
  white-space: nowrap;
}
.legal button { padding: 8px 0; font-size: 12px; font-weight: 400 }
.legal > span { opacity: .58 }

/* The three chapters keep the room, with the people held in focus on the right. */
dialog {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: auto; overscroll-behavior: contain;
  color: var(--cream); background:
    linear-gradient(90deg, #02160ffa 0%, #021b13f5 37%, #03190fe0 55%, #02150ca4 78%, #02120b75 100%);
}
dialog::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: url("assets/canon-scene.png") center / cover no-repeat;
  background-position: 65% 50%; opacity: .72;
  -webkit-mask-image: linear-gradient(90deg, transparent 44%, #0009 75%, #000c 100%);
  mask-image: linear-gradient(90deg, transparent 44%, #0009 75%, #000c 100%);
}
dialog[data-panel="approach"]::before {
  opacity: .56; background-position: 70% 46%;
  -webkit-mask-image: linear-gradient(90deg, transparent 48%, #0008 78%, #000b);
  mask-image: linear-gradient(90deg, transparent 48%, #0008 78%, #000b);
}
dialog[data-panel="works"]::before { opacity: .51; background-position: 60% 54% }
dialog[data-panel="order"]::before { opacity: .47 }
dialog[data-panel="terms"]::before, dialog[data-panel="privacy"]::before, dialog[data-panel="contacts"]::before { opacity: .18 }
dialog::backdrop {
  background: #00100bc7; backdrop-filter: blur(14px) brightness(.48);
  -webkit-backdrop-filter: blur(14px) brightness(.48);
}
dialog .close {
  position: fixed; top: 28px; right: 4.5%; z-index: 4;
  width: 48px; height: 48px; display: grid; place-items: center;
  border: 1px solid #e0bd7c8a; border-radius: 50%; font: 300 32px/1 'Cormorant Garamond', serif;
  color: var(--gold-bright); background: #032015ab;
  backdrop-filter: blur(8px); transition: background .28s, transform .28s;
}
dialog .close:hover { background: #21543b; transform: rotate(90deg) }
#panel-content {
  position: relative; z-index: 2; width: min(810px, 61vw); min-height: 100%;
  margin-left: clamp(36px, 7.2vw, 146px);
  padding: clamp(75px, 9.5vh, 130px) 0 clamp(65px, 8vh, 100px);
  display: flex; flex-direction: column; justify-content: center;
}
.eyebrow {
  color: var(--gold-bright); text-transform: uppercase; letter-spacing: .18em;
  font-size: 12px !important; line-height: 1.6 !important; margin: 0 0 21px !important;
}
.section-count { color: #dab277; margin-right: 25px; letter-spacing: .13em }
#panel-content h2 {
  margin: 0 0 23px; font: 400 clamp(45px, 4.2vw, 73px)/1.01 'Cormorant Garamond', serif;
  letter-spacing: -.025em; color: #f2d9a7; text-shadow: 0 2px 11px #001208b0;
}
#panel-content h2 em { font-weight: 400; color: var(--gold) }
#panel-content h3 { margin: 21px 0 10px; font: 500 27px/1.2 'Cormorant Garamond', serif; color: var(--gold) }
#panel-content p {
  max-width: 640px; margin: 0 0 19px;
  color: #ecd09c; font-size: 16px; line-height: 1.78;
}
#panel-content .lead {
  max-width: 660px; margin-bottom: 27px;
  font: 400 clamp(23px, 2vw, 31px)/1.25 'Cormorant Garamond', serif;
  color: #f1daa9;
}
#panel-content .quiet { color: #d6b681; font-size: 14px; margin-top: 20px }
.principles {
  width: 100%; max-width: 780px; margin: 8px 0 0;
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 23px 36px;
}
.principles > div { padding-top: 15px; border-top: 1px solid #d9b77359 }
.principles dt {
  margin-bottom: 8px; color: var(--gold);
  font: 500 clamp(23px, 2vw, 29px)/1.14 'Cormorant Garamond', serif;
}
.principles dd { margin: 0; color: #e6cca0; font-size: 16px; line-height: 1.63 }
#panel-content .detail {
  max-width: 650px; margin: 15px 0 5px; padding-top: 18px;
  border-top: 1px solid #d9b77359;
  display: grid; grid-template-columns: 170px minmax(0,1fr); gap: 25px;
}
.detail > span { font: italic 400 31px/1.05 'Cormorant Garamond', serif; color: var(--gold) }
#panel-content .detail p { font-size: 15px; line-height: 1.7; margin-bottom: 0 }
.chapter-navigation {
  display: flex; align-items: center; gap: 27px;
  margin-top: 32px; color: var(--gold); font-size: 13px;
}
.chapter-navigation button { padding: 9px 0; transition: color .28s, transform .28s }
.chapter-navigation button:hover { color: var(--gold-bright); transform: translateX(2px) }
.chapter-navigation button:first-child:hover { transform: translateX(-2px) }
.chapter-navigation button:disabled { opacity: .42 }
.chapter-navigation .divider { opacity: .43 }
.notice {
  max-width: 620px; border-left: 1px solid #d6ae7280;
  padding: 6px 0 5px 19px; margin: 15px 0 22px;
}
.notice strong { font-weight: 500; color: #f2d59f }
#panel-content .notice p { font-size: 14px; margin: 8px 0 0; line-height: 1.65 }
#panel-content a:not(.order-choice) { color: var(--gold-bright); text-decoration: underline; text-decoration-color: #e9c5878f; text-underline-offset: 3px }
.consent-list { display: grid; gap: 17px; max-width: 630px; margin: 7px 0 22px }
.consent-line { display: grid; grid-template-columns: 19px 1fr; gap: 13px; align-items: start; line-height: 1.7; font-size: 15px; color: #f0d7a5 }
.consent-line input { width: 17px; height: 17px; margin: 4px 0 0; accent-color: var(--gold) }
#order-gate-continue { align-self: flex-start; min-width: 166px }
.order-choices { max-width: 540px; margin-top: 23px }
.order-choices > p { margin-bottom: 6px !important; font: 400 25px/1.3 'Cormorant Garamond', serif !important }
.order-choice { display: flex; justify-content: space-between; border-bottom: 1px solid #d9b77366; padding: 16px 0; font-size: 16px }
.order-choice:hover { color: var(--gold-bright) }

@media (min-aspect-ratio: 21/9) {
  .scene { object-position: center 34% }
  .hero-copy { top: 27% }
  .main-title { font-size: min(4.5vw, 11vh) }
  dialog::before { background-position: center 34% }
}
@media (max-width: 1150px) {
  .hero-copy { left: 5.5%; width: 54% }
  .main-title { font-size: clamp(50px, 5vw, 70px) }
  .header { gap: 24px }
  .header nav { gap: 21px }
  .footer { justify-content: space-between }
  .legal { position: static; transform: none; white-space: normal; flex-wrap: wrap; gap: 0 10px; margin-left: auto }
  #panel-content { width: min(720px, 66vw); margin-left: 6% }
}
@media (max-aspect-ratio: 6/5) {
  .stage { min-height: 740px }
  .scene { top: 23%; height: 70%; object-position: 82% center }
  .stage::before {
    background: linear-gradient(180deg, #041b12 0%, #041b12 22%, #041b12ac 34%, transparent 49%, transparent 71%, #03170f 94%);
  }
  .stage::after { background: linear-gradient(90deg, #02190f42, transparent 65%) }
  .lamp-glow { display: none }
  .hero-copy { top: 13%; left: 7%; width: 87% }
  .main-title { font-size: clamp(38px, 6.7vw, 72px) }
  .hero-description { max-width: 490px; width: 92%; margin-top: 23px; font-size: 15px; line-height: 1.6 }
  .footer { bottom: 14px; flex-direction: column; gap: 5px }
  .legal { justify-content: center; margin: 0; max-width: 100% }
  dialog::before { opacity: .32; background-position: 82% center; -webkit-mask-image: none; mask-image: none }
  dialog { background: linear-gradient(105deg, #02170ff9 0%, #031b13f0 76%, #03190ee8) }
  #panel-content { width: auto; margin: 0 7%; padding: 100px 0 78px; justify-content: flex-start }
}
@media (max-width: 760px) {
  .stage { min-height: 730px }
  .scene { top: 29%; height: 64%; object-position: 82% center }
  .header { top: 18px; left: 6%; right: 6%; justify-content: space-between; gap: 10px }
  .menu-toggle { display: inline-flex; align-items: center; gap: 12px; padding: 12px 0; color: var(--gold); font-size: 14px }
  .menu-toggle span { font-size: 23px; line-height: 16px; font-family: 'Cormorant Garamond', serif }
  .header nav {
    position: absolute; top: 58px; left: 0; z-index: 5; display: none;
    min-width: 235px; padding: 13px 22px;
    background: #041e15f5; border: 1px solid #c19d644f;
    box-shadow: 0 24px 50px #0009; backdrop-filter: blur(12px);
  }
  .header nav.is-open { display: flex; flex-direction: column; align-items: flex-start; gap: 0 }
  .header nav button { padding: 13px 0 }
  .header .order-button { padding: 10px 12px; font-size: 13px; min-height: 42px }
  .hero-copy { top: 12%; left: 6%; width: 88% }
  .main-title { font-size: clamp(37px, 9vw, 62px); line-height: 1.02 }
  .hero-description { max-width: 330px; font-size: 14px; line-height: 1.55; margin-top: 20px }
  .footer { left: 5%; right: 5%; gap: 3px }
  .copyright { font-size: 19px }
  .legal { line-height: 1.3; gap: 0 8px }
  .legal button { font-size: 11px; padding: 4px 0 }
  #panel-content { padding: 105px 0 60px }
  #panel-content h2 { font-size: clamp(41px, 10.7vw, 57px) }
  #panel-content .lead { font-size: 25px }
  .principles { grid-template-columns: 1fr; gap: 20px }
  .principles dt { font-size: 26px }
  .principles dd { font-size: 15px }
  #panel-content .detail { grid-template-columns: 1fr; gap: 7px }
  dialog .close { top: 22px; right: 6%; width: 43px; height: 43px }
  .section-count { margin-right: 12px }
}
@media (max-width: 390px) {
  .main-title { font-size: 37px }
  .hero-description { max-width: 290px }
  .header .order-button { font-size: 12px; padding: 10px 9px }
}
@media (max-height: 700px) and (min-width: 761px) {
  .hero-copy { top: 28% }
  .main-title { font-size: min(4.5vw, 11vh) }
  .hero-description { margin-top: 19px }
  .stage { min-height: 600px }
  #panel-content { justify-content: flex-start }
}
@media (prefers-reduced-motion: no-preference) {
  .scene { animation: scene-appear .85s cubic-bezier(.16,.7,.3,1) both }
  .lamp-glow { animation: lamp-appear 2.1s ease-out both }
  .title-word { animation: word-appear .78s cubic-bezier(.2,.72,.2,1) both; animation-delay: calc(.17s + var(--word-index) * .13s) }
  .hero-description { animation: gentle-appear .9s .77s both }
  .header, .footer { animation: gentle-appear .8s .3s both }
  dialog[open]::before { animation: chapter-appear .65s cubic-bezier(.15,.7,.2,1) both }
  dialog[open] #panel-content > * { animation: line-appear .56s ease-out both }
  dialog[open] #panel-content > :nth-child(1) { animation-delay: .03s }
  dialog[open] #panel-content > :nth-child(2) { animation-delay: .09s }
  dialog[open] #panel-content > :nth-child(3) { animation-delay: .15s }
  dialog[open] #panel-content > :nth-child(n+4) { animation-delay: .2s }
  .order-button:not(:disabled):hover::before, .order-button:not(:disabled):focus-visible::before { animation: edge-glint 1.1s ease-out }
  @keyframes scene-appear { from { opacity: .35; filter: blur(4px) } to { opacity: 1; filter: blur(0) } }
  @keyframes lamp-appear { from { opacity: 0 } to { opacity: .75 } }
  @keyframes word-appear { from { opacity: 0; transform: translateY(9px) } to { opacity: 1; transform: translateY(0) } }
  @keyframes gentle-appear { from { opacity: 0 } to { opacity: 1 } }
  @keyframes chapter-appear { from { filter: brightness(.42) blur(7px) } to { filter: brightness(1) blur(0) } }
  @keyframes line-appear { from { opacity: 0; transform: translateY(7px) } to { opacity: 1; transform: translateY(0) } }
  @keyframes edge-glint { 0% { opacity: 0; transform: translateX(-17%) } 45% { opacity: 1 } 100% { opacity: 0; transform: translateX(17%) } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important }
}

/* Keep the typography of the approved gold edition in the original room layout. */
@media (min-width: 1300px) {
  dialog[data-panel="memories"] .principles dt { font-size: 27px }
  dialog[data-panel="memories"] .principles dd { font-size: 15px; line-height: 1.58 }
}
@media (min-width: 761px) {
  dialog[data-panel="approach"] .principles dt { font-size: 25px }
  dialog[data-panel="approach"] .principles dd { font-size: 15px }
}