:root {
  color-scheme: light;
  --paper: #f8f7f3;
  --limestone: #efede6;
  --ink: #2d2a24;
  --wine: #544238;
  --muted: #625a50;
  --line: #7c6f563d;
  --strong-line: #82715a;
  --heading: "Cormorant Garamond", Georgia, serif;
  --text: "DM Sans", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 15px/1.65 var(--text); }
button, a { color: inherit; }
button { font: inherit; }
a { text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-family: var(--heading); font-weight: 500; line-height: 1; letter-spacing: -.025em; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--wine); outline-offset: 5px; }
::selection { color: #fff9ee; background: var(--wine); }
.shell { width: min(100% - 112px, 1320px); margin-inline: auto; }
.skip { position: fixed; top: 8px; left: 8px; padding: 12px; background: var(--paper); transform: translateY(-180%); z-index: 5; }
.skip:focus { transform: none; }
.site-header { border-bottom: 1px solid var(--line); }
.header-inner { min-height: 79px; display: flex; align-items: center; justify-content: space-between; padding-block: 12px; gap: 20px; }
.brand { display: inline-flex; gap: 10px; align-items: center; width: max-content; }
.brand > span { font: 600 29px/.86 var(--heading); letter-spacing: .065em; }
.brand small { display: block; margin: 7px 0 0 2px; font: 600 9px/1 var(--text); letter-spacing: .35em; color: var(--wine); }
nav { display: flex; align-items: center; gap: 35px; color: var(--muted); font-size: 13px; }
nav a { display: inline-flex; align-items: center; min-height: 44px; }
nav a:hover, .text-link:hover { color: var(--wine); }
.hero { background: var(--paper); }
.hero-inner { display: grid; grid-template-columns: .82fr 1.18fr; align-items: stretch; padding-block: clamp(23px,3.05vw,44px) clamp(27px,3.4vw,49px); }
.hero-copy {
  position: relative;
  isolation: isolate;
  min-width: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 42px 24px 54px;
  text-align: center;
  color: #f9edda;
  background: #691f33;
}
.hero-copy::before, .hero-copy::after { content: ""; position: absolute; pointer-events: none; z-index: -1; }
.hero-copy::before { inset: 15px; border: 1px solid #c6a267a8; }
.hero-copy::after { inset: 20px; border: 1px solid #c6a26753; }
.hero-ornament { width: min(66%,270px); height: auto; margin-bottom: 5px; }
.hero h1 { font-size: clamp(45px,5.15vw,77px); line-height: .99; letter-spacing: -.037em; }
.hero p { max-width: 280px; margin-top: 15px; color: #f3e0bf; }
.hero .primary { border-color: #c6a267a8; color: #fff0d3; }
.hero .primary:hover { background: #f5e5c7; color: #522235; }
.hero .primary:focus-visible { outline-color: #f9e2ad; }
.primary { display: inline-flex; align-items: center; gap: 18px; min-height: 44px; margin-top: 23px; padding: 10px 16px; border: 1px solid var(--strong-line); color: var(--ink); background: transparent; font-size: 13px; font-weight: 600; transition: background .2s,color .2s; }
.primary:hover { color: #fff8eb; background: var(--wine); }
.primary span { font-size: 17px; font-weight: 400; line-height: 1; }
.hero-figure { min-width: 0; background: #d8d2c7; }
.hero-figure a { display: block; height: 100%; position: relative; }
.hero-figure img { width: 100%; height: 100%; min-height: 380px; aspect-ratio: 1.34; object-fit: cover; }
.hero-figure a > span { display: flex; gap: 18px; align-items: center; position: absolute; bottom: 18px; right: 18px; min-height: 44px; padding: 7px 14px; background: #f8f7f3; color: var(--ink); font: 500 23px/1 var(--heading); }
.hero-figure a > span span { font: 400 13px/1 var(--text); }
.hero-figure a:hover > span { background: #691f33; color: #fff0d3; }
.gallery {
  border-block: 1px solid var(--line);
  background: var(--limestone);
}
.gallery-inner { padding-block: 24px 45px; }
.section-heading { margin-bottom: 23px; }
.section-heading h2 { font-size: clamp(38px,4vw,59px); }
.rooms { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: clamp(17px,2.4vw,36px); align-items: start; }
.door { display: block; min-width: 0; }
.doorway { aspect-ratio: .82; position: relative; isolation: isolate; border-radius: 50% 50% 0 0 / 36.8% 36.8% 0 0; }
.door-art { position: absolute; inset: 5.4% 7.2% 1%; width: 85.6%; height: 93.6%; object-fit: cover; border-radius: inherit; background: #ddd6c8; }
.door-frame { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.door--blue .door-art { object-position: 49% 57%; }
.door--rose .door-art { object-position: 46% center; }
.door--gold .door-art { object-position: 57% center; }
.door--green .door-art { object-position: center 47%; }
.door-label { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 11px 1px 6px; }
.door-label h3 { font-size: clamp(27px,2.62vw,40px); }
.door-label small { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }
.door:hover .door-label h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .12em; }
.door-arrow { display: grid; place-items: center; flex: none; align-self: end; width: 25px; height: 27px; color: var(--wine); transition: transform .2s; }
.door:hover .door-arrow { transform: translate(2px,-2px); }
.atelier-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(38px,8vw,116px); align-items: center; padding-block: 72px; }
.atelier-image { padding: 7px; border: 1px solid var(--line); }
.atelier-image img { width: 100%; height: auto; aspect-ratio: 1.32; object-fit: cover; }
.atelier h2 { margin: 13px 0; font-size: clamp(46px,5.2vw,74px); }
.atelier p:not(.eyebrow) { color: var(--muted); max-width: 350px; }
.text-link { display: inline-block; padding-bottom: 3px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 13px; }
.site-footer { border-top: 1px solid var(--line); }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; gap: 26px; padding-block: 34px 42px; }
.contact h2 { font-size: 34px; }
.contact p { color: var(--muted); margin-top: 8px; }
.contact-number { white-space: nowrap; }
.contact-number:hover { text-decoration: underline; }
.contact .primary { margin-top: 10px; }

.room-view { background: var(--paper); }
.room-inner { padding-block: 26px 40px; }
.room-intro { display: grid; grid-template-columns: 1.18fr .82fr; align-items: center; gap: clamp(28px,7vw,100px); padding-block: 24px 46px; }
.room-art { border: 1px solid var(--line); background: var(--paper); padding: 6px; }
.room-art img { width: 100%; aspect-ratio: 1.23; object-fit: cover; }
.room-copy h1 { margin: 8px 0 16px; font-size: clamp(58px,7.2vw,108px); }
.room-copy > p:last-of-type { max-width: 338px; color: var(--muted); }
.eyebrow { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .13em; color: var(--wine); }
.room-copy .eyebrow { margin-top: 17px; }
.room-pieces { padding-block: 34px 54px; border-block: 1px solid var(--line); }
.room-pieces h2 { font-size: clamp(41px,5vw,67px); }
.product-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,224px),305px)); gap: 24px; margin-top: 20px; }
.product { padding: 0; text-align: left; border: 1px solid var(--line); background: var(--paper); cursor: pointer; }
.product:hover { border-color: var(--strong-line); }
.product img { width: 100%; height: 224px; object-fit: contain; background: #e7d7bd; border-bottom: 1px solid var(--line); }
.product img.is-model { object-fit: cover; }
.product > span { display: block; padding: 14px 16px 17px; }
.product strong { display: block; font: 500 30px/1 var(--heading); }
.product small { display: block; margin-top: 6px; color: var(--wine); }
.room-nav { display: flex; justify-content: space-between; margin-top: 22px; }
dialog { border: 1px solid var(--strong-line); background: var(--paper); color: var(--ink); padding: 0; width: min(930px,100% - 38px); max-height: calc(100% - 35px); position: fixed; overflow: auto; }
dialog[open] { display: grid; grid-template-columns: 1.1fr .9fr; }
dialog::backdrop { background: #33251bbe; }
body:has(dialog[open]) { overflow: hidden; }
.detail-art { display: grid; grid-template-rows: 1fr auto; min-height: 390px; background: #e7d8c3; }
.detail-art > img { align-self: center; width: 100%; max-height: 500px; object-fit: contain; }
.detail-art > img.is-model { min-height: 390px; height: 100%; object-fit: cover; }
.detail-copy { padding: 38px 32px 29px; }
.detail-copy h2 { font-size: clamp(38px,5vw,65px); margin: 9px 0 12px; }
.detail-copy p, .detail-copy dd { color: var(--muted); }
.detail-copy dl { margin: 18px 0 12px; }
.detail-copy dl div { border-top: 1px solid var(--line); padding-block: 8px; }
.detail-copy dt { color: var(--wine); font-size: 11px; }
.detail-copy dd { margin: 0; }
.detail-note { font-size: 12px; }
.close { position: absolute; z-index: 2; top: 9px; right: 9px; display: grid; place-content: center; width: 44px; height: 44px; border: 1px solid var(--line); background: var(--paper); cursor: pointer; font-size: 24px; line-height: 1; }
.detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.detail-actions .primary { margin-top: 0; }
.model-button { cursor: pointer; }
.ar-link { position: relative; }
.ar-link img { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ar-link::after { content: attr(aria-label); }
.model-zone { display: grid; grid-template-rows: minmax(335px,1fr) auto; }
model-viewer { width: 100%; min-height: 335px; height: 100%; background: #e6ded0; --poster-color: #e6ded0; }
.model-help { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; color: var(--muted); font-size: 12px; border-top: 1px solid var(--line); }
.model-help button { cursor: pointer; padding: 4px 8px; border: 1px solid var(--line); background: #f7edda; color: var(--wine); }
.model-status { margin-top: 8px; min-height: 1.4em; font-size: 12px; }

@media (max-width: 1010px) {
  .shell { width: calc(100% - 68px); }
}
@media (max-width: 880px) {
  .shell { width: calc(100% - 44px); }
  .rooms { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px 16px; }
  .door-label h3 { font-size: clamp(25px,5vw,38px); }
  .atelier-inner { gap: 28px; padding-block: 43px; }
}
@media (max-width: 650px) {
  .hero-inner { width: calc(100% - 36px); grid-template-columns: 1fr; padding-block: 15px 25px; }
  .hero-copy { padding: 26px 16px 30px; }
  .hero-copy::before { inset: 9px; }
  .hero-copy::after { inset: 13px; }
  .hero-ornament { width: 135px; margin-bottom: 7px; }
  .hero h1 { font-size: clamp(37px,10.8vw,56px); }
  .hero p { margin-top: 8px; font-size: 13px; }
  .hero .primary { margin-top: 12px; }
  .hero-figure img { height: auto; min-height: 0; aspect-ratio: 1.57; }
  .hero-figure a > span { bottom: 10px; right: 10px; }
}
@media (max-width: 550px) {
  .shell { width: calc(100% - 36px); }
  .header-inner { min-height: 66px; gap: 13px; }
  .brand { gap: 5px; }
  .brand img { width: 31px; height: 34px; }
  .brand > span { font-size: 23px; }
  .brand small { font-size: 7px; margin-top: 5px; }
  nav { gap: 13px; font-size: 13px; text-align: right; }
  .gallery-inner { padding-block: 20px 32px; }
  .section-heading { margin-bottom: 16px; }
  .section-heading h2 { font-size: 35px; }
  .door-label { align-items: start; gap: 3px; padding-top: 10px; }
  .door-label h3 { font-size: clamp(22px,6.2vw,31px); line-height: 1.05; }
  .door-label small { font-size: 13px; }
  .door-arrow { width: 16px; height: 22px; font-size: 14px; }
  .atelier-inner { grid-template-columns: 1fr; gap: 22px; }
  .room-intro { grid-template-columns: 1fr; gap: 20px; padding-block: 20px 29px; }
  .room-copy h1 { font-size: clamp(43px,11.4vw,65px); }
  .room-copy .eyebrow { margin-top: 10px; }
  .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .product img { height: 150px; }
  .product > span { padding: 10px; }
  .product strong { font-size: 24px; }
  dialog[open] { grid-template-columns: 1fr; }
  .detail-art { min-height: 0; }
  .detail-art > img, .detail-art > img.is-model { height: 210px; min-height: 0; }
  .detail-copy { padding: 20px 19px 24px; }
  .detail-copy h2 { font-size: clamp(34px,9vw,44px); }
  .detail-copy dt { font-size: 12px; }
  .detail-copy .primary { font-size: 13px; padding-inline: 12px; }
  .model-zone { grid-template-rows: minmax(240px,1fr) auto; }
  model-viewer { min-height: 240px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}