:root {
  color-scheme: light;
  --paper: #eee9df;
  --ink: #354032;
  --muted: #6f7063;
  --accent: #93764e;
  --line: #d0c9b9;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
::selection { background: #cfc3a7; color: #354032; }
.skip-link { position: absolute; z-index: 10; left: 20px; top: -70px; padding: 12px 20px; background: var(--ink); color: white; }
.skip-link:focus { top: 15px; }
.page { position: relative; max-width: 1920px; margin: auto; height: 100vh; height: 100dvh; min-height: 0; display: flex; flex-direction: column; }
.header { position: absolute; z-index: 3; inset: 0 0 auto; height: clamp(70px, 13dvh, 125px); min-height: 0; padding: 12px 4%; display: grid; grid-template-columns: 180px 1fr auto; gap: 25px; align-items: center; }
.brand { display: block; width: clamp(85px, 13dvh, 130px); }
.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.brand img { display: block; width: 100%; height: auto; }
.header-caption { color: #f5efdf; font-size: 9px; letter-spacing: 2px; padding-left: 22px; border-left: 1px solid #f5efdf60; }
.status { display: flex; align-items: center; gap: 9px; font-size: 10px; color: var(--muted); letter-spacing: .3px; }
.status i { width: 5px; height: 5px; border-radius: 50%; background: #7d805f; }
main { flex: 1; min-height: 0; display: grid; grid-template-columns: 55% 45%; grid-template-rows: minmax(0, 1fr); }
.interior { position: relative; margin: 0; min-width: 0; overflow: hidden; background: #66553d; }
.interior-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 48% 58%; animation: photograph 1.5s ease-out both; }
.interior::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #161b146b, transparent 27%, transparent 63%, #181c157d); }
.image-rule { position: absolute; z-index: 1; top: 140px; left: 7.3%; width: 36px; height: 1px; background: #f3ebd999; }
.image-caption { position: absolute; z-index: 1; bottom: 64px; left: 7.3%; color: #fff8e9; }
.image-overline { font-size: 9px; letter-spacing: 2.5px; }
.image-caption p { font-family: 'Baskerville', Georgia, serif; font-size: clamp(28px, 2.6vw, 44px); font-weight: 400; line-height: 1.2; margin: 17px 0 0; }
figcaption { position: absolute; z-index: 1; bottom: 22px; left: 7.3%; color: #f1e9d9; font-size: 9px; letter-spacing: .3px; }
.intro { position: relative; min-height: 0; min-width: 0; padding: clamp(75px, 14dvh, 140px) clamp(30px, 5.5vw, 105px) clamp(12px, 3dvh, 35px); display: flex; align-items: center; background: radial-gradient(ellipse at 70% 10%, #faf7ef, transparent 70%); }
.intro::after { content: ''; position: absolute; inset: 22px 22px 22px auto; width: 1px; background: linear-gradient(transparent, #c6baa04d 15%, #c6baa04d 85%, transparent); pointer-events: none; }
.intro-content { width: 100%; animation: arrive 1s ease-out both; }
.studio-seal { position: absolute; z-index: 2; top: clamp(105px, 20dvh, 170px); left: -49px; width: 98px; height: 98px; background: var(--paper); border-radius: 50%; border: 1px solid #cfc7b8; box-shadow: 0 0 0 7px #eee9df35; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.studio-seal img { display: block; width: 76%; height: auto; }
.eyebrow { display: flex; align-items: center; gap: 11px; font-size: 8px; line-height: 1.7; letter-spacing: 1.5px; color: var(--accent); margin: 0 0 clamp(10px, 2.5dvh, 26px); }
.eyebrow > span { width: 24px; height: 1px; flex-shrink: 0; background: var(--accent); }
h1 { font-family: 'Baskerville', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif; font-size: clamp(42px, min(6.8vw, 10.5dvh), 108px); line-height: .98; letter-spacing: -3.4px; font-weight: 400; margin: 0; }
h1 em { font-weight: 400; color: #927c59; }
.description { margin: clamp(10px, 2.5dvh, 26px) 0 0; color: var(--muted); font-size: 12px; line-height: 1.9; letter-spacing: .15px; }
.launch { margin-top: clamp(12px, 3dvh, 32px); border-top: 1px solid var(--line); padding-top: clamp(10px, 2dvh, 20px); max-width: 325px; }
.launch-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 9px; }
.launch-label { font-size: 8px; letter-spacing: 2px; color: var(--accent); }
.launch-star { font-size: 23px; font-weight: 400; line-height: 1; color: var(--accent); }
h2 { font-family: 'Baskerville', Georgia, serif; font-size: 32px; font-weight: 400; letter-spacing: -.5px; margin: 0; }
h2 span { color: var(--accent); }
.launch > p { font-size: 11px; line-height: 1.8; color: var(--muted); margin: 10px 0 0; }
.material-note { margin-top: clamp(10px, 2.5dvh, 28px); display: flex; align-items: center; gap: 13px; }
.material-line { width: 3px; height: 30px; background: #b4a07a; }
.material-note p { font-size: 10px; line-height: 1.7; color: var(--muted); margin: 0; }
.material-note em { font-family: Georgia, serif; font-size: 12px; }
footer { flex: 0 0 clamp(35px, 7dvh, 70px); min-height: 0; padding: 8px 4%; display: flex; justify-content: space-between; align-items: center; gap: 24px; color: var(--muted); font-size: 9px; }
.footer-note { font-size: 8px; letter-spacing: 2px; }
.footer-signature { font-family: Georgia, serif; font-size: 17px; color: var(--accent); }
@keyframes arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes photograph { from { opacity: .6; transform: scale(1.025); } to { opacity: 1; transform: scale(1); } }

@media (max-width: 1100px) and (min-width: 801px) {
  .header { grid-template-columns: 125px 1fr auto; gap: 12px; }
  .header-caption { font-size: 7px; letter-spacing: 1px; padding-left: 12px; }
  .intro { padding-left: 43px; padding-right: 26px; }
  .studio-seal { width: 76px; height: 76px; left: -38px; }
  .eyebrow { letter-spacing: .8px; font-size: 7px; gap: 8px; }
  .eyebrow > span { width: 16px; } .intro::after { right: 12px; }
  .status { font-size: 9px; }
}
@media (max-height: 650px) and (min-width: 801px) {
  .material-note { display: none; }
  .description { font-size: 11px; line-height: 1.65; }
  .launch > p { line-height: 1.5; margin-top: 5px; }
  .launch-heading { margin-bottom: 4px; }
  h2 { font-size: 27px; }
  .studio-seal { width: 70px; height: 70px; left: -35px; }
}
@media (max-width: 800px) {
  .header { position: relative; flex: 0 0 clamp(62px, 10dvh, 90px); height: auto; padding: 10px 24px; display: flex; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); }
  .brand { width: clamp(72px, 10dvh, 102px); }
  .header-caption { display: none; } .status { font-size: 9px; }
  main { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1.65fr) minmax(0, 1fr); }
  .intro { order: -1; padding: 12px 26px; }
  .intro::after, .studio-seal { display: none; }
  .intro-content { max-width: 540px; margin: auto; }
  .eyebrow { font-size: 7px; margin-bottom: 10px; letter-spacing: 1px; }
  h1 { font-size: clamp(36px, min(11vw, 6.6dvh), 68px); line-height: .98; letter-spacing: -1.8px; }
  .description { font-size: 11px; line-height: 1.5; margin-top: 10px; }
  .launch { margin-top: 12px; max-width: 380px; padding-top: 10px; }
  .launch-heading { margin-bottom: 4px; }
  .launch-star { font-size: 17px; }
  h2 { font-size: clamp(24px, 3.6dvh, 30px); }
  .launch > p { font-size: 10px; line-height: 1.4; margin-top: 5px; }
  .launch > p br { display: none; }
  .material-note { display: none; }
  .interior { min-height: 0; }
  .interior-image { object-position: center 66%; }
  .image-rule, .image-overline { display: none; }
  .image-caption { left: 26px; bottom: 32px; }
  .image-caption p { font-size: clamp(19px, 3dvh, 27px); margin: 0; }
  figcaption { left: 26px; bottom: 12px; font-size: 8px; }
  footer { flex: 0 0 36px; padding: 8px 24px; gap: 12px; font-size: 8px; }
  .footer-note { display: none; }
  .footer-signature { font-size: 14px; }
}
@media (max-width: 800px) and (max-height: 680px) {
  main { grid-template-rows: minmax(0, 2fr) minmax(0, 1fr); }
  .intro { padding-top: 8px; padding-bottom: 8px; }
  .eyebrow { margin-bottom: 7px; }
  .description { margin-top: 7px; }
  .launch { margin-top: 9px; padding-top: 8px; }
  .launch > p { display: none; }
}
@media (max-width: 800px) and (max-height: 500px) {
  .header { flex-basis: 56px; padding: 6px 22px; }
  .brand { width: 70px; }
  main { grid-template-columns: 46% 54%; grid-template-rows: minmax(0, 1fr); }
  .intro { order: 0; padding: 9px 22px; }
  .eyebrow { font-size: 6px; letter-spacing: .5px; margin-bottom: 6px; }
  .eyebrow > span { display: none; }
  h1 { font-size: clamp(27px, 8.7dvh, 40px); letter-spacing: -1px; }
  .description { font-size: 10px; margin-top: 6px; }
  .description br { display: none; }
  .launch { margin-top: 7px; padding-top: 6px; }
  .launch-heading { margin-bottom: 2px; }
  .launch-label { font-size: 7px; }
  h2 { font-size: 24px; }
  .image-caption { left: 20px; }
  .image-caption p { font-size: 20px; }
  figcaption { left: 20px; font-size: 7px; }
  footer { flex-basis: 28px; padding: 5px 22px; }
}
@media (prefers-reduced-motion: reduce) { .intro-content, .interior-image { animation: none; } }
