@font-face { font-family: PCGSerif; src: url('/assets/PCGSerif-Regular.ttf') format('truetype'); font-display: swap; }
:root { color-scheme: light; --ink: #263b54; --muted: #596c81; --gold: #c99732; --gold-deep: #8b6427; --green: #16704e; --glass: rgb(255 255 255 / 62%); }
* { box-sizing: border-box; }
html { min-height: 100%; background: #eaf5ff; }
body { min-height: 100vh; margin: 0; color: var(--ink); background: linear-gradient(180deg, #f8fcff 0%, #e8f5ff 48%, #dceeff 100%); font-family: Avenir Next, Avenir, Helvetica Neue, Arial, sans-serif; overflow-x: hidden; }
.sky { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.sky i { position: absolute; width: 38rem; height: 15rem; border-radius: 50%; background: radial-gradient(circle at 28% 56%, #fff 0 25%, transparent 26%), radial-gradient(circle at 50% 43%, rgb(255 255 255 / 92%) 0 31%, transparent 32%), radial-gradient(circle at 73% 60%, rgb(255 255 255 / 88%) 0 27%, transparent 28%); filter: blur(15px); opacity: .55; }
.sky i:nth-child(1) { top: 8%; left: -16rem; }
.sky i:nth-child(2) { top: 31%; right: -18rem; transform: scale(1.2); }
.sky i:nth-child(3) { bottom: -7rem; left: 18%; transform: scale(1.4); }
.gold-frame { position: fixed; z-index: 5; inset: 10px; border: 2px solid rgb(201 151 50 / 62%); border-bottom: 0; border-radius: 48px 48px 0 0; box-shadow: inset 0 2px 0 rgb(255 255 255 / 72%), 0 0 34px rgb(224 183 90 / 25%); pointer-events: none; }
main { position: relative; z-index: 2; width: min(1120px, calc(100% - 48px)); min-height: 100vh; margin: 0 auto; padding: 58px 0 34px; }
.suite-header { max-width: 720px; margin-bottom: 38px; }
.brand-row { display: flex; align-items: center; gap: 13px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.medallion { display: grid; width: 66px; height: 66px; place-content: center; border: 4px solid rgb(201 151 50 / 82%); border-radius: 50%; background: rgb(255 255 255 / 74%); color: var(--gold-deep); box-shadow: inset 0 0 0 2px white, 0 10px 24px rgb(139 100 39 / 18%); font-size: 15px; font-weight: 900; letter-spacing: .04em; }
h1, h2 { margin: 0; font-family: PCGSerif, Georgia, serif; font-weight: 400; }
h1 { margin-top: 18px; font-size: clamp(56px, 8vw, 94px); line-height: .92; letter-spacing: -.045em; }
.intro { max-width: 620px; margin: 22px 0 0; color: #425b73; font-size: clamp(18px, 2vw, 23px); line-height: 1.45; }
.products { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; }
.product { min-height: 245px; padding: 30px; display: flex; flex-direction: column; justify-content: space-between; color: inherit; text-decoration: none; border: 1px solid rgb(255 255 255 / 90%); border-radius: 30px; background: var(--glass); box-shadow: inset 0 1px 0 white, 0 18px 42px rgb(73 106 141 / 12%); backdrop-filter: blur(25px) saturate(145%); transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; }
a.product:hover { transform: translateY(-3px); border-color: rgb(201 151 50 / 48%); box-shadow: inset 0 1px 0 white, 0 24px 50px rgb(73 106 141 / 18%); }
.product-primary { grid-row: span 2; min-height: 508px; background: linear-gradient(150deg, rgb(255 255 255 / 78%), rgb(232 248 241 / 64%)); border-color: rgb(22 112 78 / 20%); }
.type { color: var(--gold-deep); font-size: 12px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.product h2 { margin-top: 18px; font-size: clamp(34px, 5vw, 60px); line-height: 1; }
.product p { max-width: 530px; margin: 18px 0 0; color: #4a6178; font-size: 17px; line-height: 1.55; }
.open, .availability { align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 999px; font-weight: 800; }
.open { color: white; background: linear-gradient(180deg, #d6ad58, #a9772d); box-shadow: inset 0 1px 0 rgb(255 255 255 / 55%), 0 10px 24px rgb(139 100 39 / 18%); }
.open b { font-size: 20px; line-height: 1; }
.availability { color: var(--green); background: rgb(232 248 241 / 74%); border: 1px solid rgb(22 112 78 / 17%); }
footer { display: flex; justify-content: space-between; gap: 20px; padding: 34px 8px 0; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .03em; }
@media (max-width: 760px) {
  .gold-frame { inset: 5px; border-radius: 34px 34px 0 0; }
  main { width: min(100% - 30px, 600px); padding: calc(30px + env(safe-area-inset-top)) 0 25px; }
  .medallion { width: 56px; height: 56px; border-width: 3px; font-size: 13px; }
  .suite-header { margin-bottom: 25px; }
  h1 { margin-top: 16px; font-size: 58px; }
  .intro { margin-top: 16px; font-size: 17px; }
  .products { grid-template-columns: 1fr; gap: 14px; }
  .product, .product-primary { grid-row: auto; min-height: 230px; padding: 24px; border-radius: 25px; }
  .product-primary { min-height: 300px; }
  .product h2 { font-size: 40px; }
  .product p { font-size: 15px; }
  footer { flex-direction: column; gap: 5px; padding-top: 25px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }