:root {
  color-scheme: dark;
  --bg: #151715;
  --cream: #f3ede2;
  --muted: #a9a69b;
  --muted-light: #d3cbbb;
  --gold: #d5ae65;
  --line: rgba(217, 187, 129, .23);
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--cream); font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
.site-wrap { min-height: 100vh; min-height: 100svh; position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; padding: 28px clamp(24px, 5vw, 88px) 24px;
  background: radial-gradient(circle at 77% 42%, rgba(132, 109, 62, .17), transparent 35%), radial-gradient(circle at 15% 90%, rgba(62, 65, 49, .25), transparent 37%), linear-gradient(125deg, #171a17 0%, #101210 100%); }
.site-wrap::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .07; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E"); }
.ambient { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; filter: blur(72px); }
.ambient--one { width: 380px; height: 380px; background: rgba(169, 130, 60, .08); top: 17%; right: 8%; }
.ambient--two { width: 300px; height: 300px; background: rgba(108, 111, 77, .08); bottom: -170px; left: -150px; }
.site-header, .site-footer { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
.site-header { gap: 30px; }
.identity { display: flex; align-items: center; gap: 24px; }
.brand-logo { display: block; width: 105px; height: 70px; object-fit: contain; flex: none; }
.brand-divider { height: 36px; width: 1px; background: var(--line); }
.brand-wordmark { color: var(--cream); font-size: 11px; font-weight: 600; letter-spacing: .17em; line-height: 1.9; }
.brand-wordmark span { display: block; color: var(--gold); font-weight: 500; font-size: 10px; letter-spacing: .39em; }
.header-note { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: var(--muted); font-size: 10px; line-height: 1.5; letter-spacing: .19em; }
.note-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px rgba(213, 174, 101, .085); }
.hero { position: relative; flex: 1; width: min(1350px, 100%); margin: 0 auto; display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(20px, 5vw, 100px); align-items: center; padding: clamp(45px, 8vh, 105px) 0 clamp(40px, 7vh, 95px); }
.hero-copy { position: relative; z-index: 2; padding-bottom: 4px; animation: fade-up .85s both; }
.eyebrow { display: flex; align-items: center; gap: 14px; color: var(--gold); font-size: 11px; font-weight: 600; letter-spacing: .22em; line-height: 1.7; white-space: nowrap; }
.eyebrow-line { width: 32px; height: 1px; background: var(--gold); flex: none; }
h1 { margin: 27px 0 29px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(64px, 6.8vw, 122px); font-weight: 400; letter-spacing: -.055em; line-height: .98; }
h1 em { color: var(--gold); font-weight: 400; }
.hero-description { max-width: 530px; color: var(--muted-light); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.9; letter-spacing: .012em; margin: 0; }
.announcement { margin-top: 44px; padding: 25px 0 0; border-top: 1px solid var(--line); max-width: 460px; display: flex; gap: 17px; align-items: flex-start; }
.announcement-symbol { color: var(--gold); font-size: 25px; line-height: 1; margin-top: -1px; }
.announcement strong { display: block; font-size: 13px; line-height: 1.6; font-weight: 600; letter-spacing: .085em; text-transform: uppercase; margin-bottom: 5px; }
.announcement span { display: block; font-size: 14px; color: var(--muted); line-height: 1.75; }
.visual { min-width: 0; position: relative; display: flex; justify-content: center; align-items: center; animation: fade-in 1.5s both; }
.gallery-frame { position: relative; width: min(100%, 455px); padding: 12px; background: linear-gradient(135deg, #c7a66f, #5e4c31 24%, #d5b67c 51%, #59452d 82%, #aa8854); box-shadow: 0 33px 85px rgba(0,0,0,.45), 0 0 0 1px rgba(255,228,169,.18); transform: rotate(2.2deg); transition: transform .8s ease; }
.gallery-frame:hover { transform: rotate(.5deg) translateY(-6px); }
.gallery-mat { aspect-ratio: 4 / 5; padding: 20px; background: #ddd4bc; box-shadow: inset 0 0 18px rgba(41,25,10,.2); }
.gallery-canvas { width: 100%; height: 100%; overflow: hidden; position: relative; background: radial-gradient(ellipse at 73% 18%, #ecd5a6 0, #d8bd8e 23%, transparent 61%), radial-gradient(ellipse at 15% 70%, #59665a 0, #303f37 40%, transparent 72%), linear-gradient(130deg, #a9a88c 0%, #d4c092 47%, #ba986f 100%); box-shadow: inset 0 0 15px rgba(31,35,30,.13); }
.gallery-canvas::after { content: ''; inset: 0; position: absolute; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(249,243,209,.025) 0px, rgba(17,33,25,.02) 2px, transparent 4px); mix-blend-mode: multiply; }
.paint { position: absolute; pointer-events: none; }
.paint--halo { top: 11%; right: 8%; width: 71%; aspect-ratio: 1; border: 30px solid rgba(239,218,172,.8); border-radius: 50%; filter: blur(12px); opacity: .86; }
.paint--crescent { top: 25%; right: -34%; width: 115%; height: 76%; transform: rotate(-31deg); background: linear-gradient(125deg, rgba(34,51,42,.15), #31443c 46%, #142b2a 70%, #3d4a3f 100%); border-radius: 49% 20% 0 0; box-shadow: -22px -6px 45px rgba(248,227,164,.29); }
.paint--low { bottom: -27%; left: -29%; width: 125%; height: 75%; border-radius: 60% 60% 0 0; transform: rotate(16deg); background: linear-gradient(10deg, #a96c3d, #c79456 43%, #ddaf71 65%, #8a7b5f 95%); filter: blur(8px); }
.paint--mark { left: 21%; top: 4%; height: 72%; width: 4%; border-radius: 50%; transform: rotate(13deg); background: linear-gradient(#e8d4a8, #dec18a 50%, transparent); opacity: .5; filter: blur(10px); }
.paint--fleck { width: 41%; height: 12%; bottom: 17%; right: 15%; transform: rotate(-19deg); border-radius: 80%; background: rgba(236,202,143,.54); filter: blur(27px); }
.visual-caption { position: absolute; z-index: 2; color: var(--muted); font-size: 9px; letter-spacing: .31em; white-space: nowrap; }
.visual-caption--left { left: -58px; bottom: 30%; transform: rotate(-90deg); transform-origin: left center; }
.visual-caption--right { right: -83px; top: 36%; transform: rotate(90deg); transform-origin: right center; }
.tiny-star { position: absolute; top: 0; left: 7%; color: var(--gold); font-size: 28px; }
.site-footer { gap: 16px; padding-top: 20px; border-top: 1px solid var(--line); color: #85877f; font-size: 9px; font-weight: 600; letter-spacing: .19em; line-height: 1.7; }
.footer-divider { display: none; }
.footer-domain { color: #ac9978; margin-left: auto; }
@keyframes fade-up { from {opacity:0; transform:translateY(19px)} to {opacity:1; transform:translateY(0)} }
@keyframes fade-in { from {opacity:0} to {opacity:1} }
@media(max-width:1050px) {
  .site-wrap { padding-left: 36px; padding-right: 36px; }
  .hero { gap: 32px; }
  h1 { font-size: clamp(58px, 6.7vw, 92px); }
  .gallery-mat { padding: 14px; }
  .visual-caption { display: none; }
}
@media(max-width:760px) {
  .site-wrap { min-height: 100svh; padding: 16px 23px 25px; }
  .identity { gap: 13px; }
  .brand-logo { width: 80px; height: 54px; }
  .brand-divider { height: 27px; }
  .brand-wordmark { font-size: 9px; letter-spacing: .12em; }
  .brand-wordmark span { font-size: 9px; }
  .header-note { display: none; }
  .hero { padding: 42px 0 58px; display: flex; flex-direction: column; align-items: stretch; gap: 48px; }
  .hero-copy { text-align: center; }
  .eyebrow { justify-content: center; font-size: 9px; white-space: normal; }
  .eyebrow-line { width: 17px; }
  h1 { font-size: clamp(58px, 12vw, 84px); margin: 22px 0; }
  .hero-description { margin: 0 auto; max-width: 540px; font-size: 15px; line-height: 1.8; }
  .announcement { margin: 30px auto 0; padding-top: 20px; max-width: 460px; text-align: left; }
  .announcement span { font-size: 13px; }
  .visual { width: min(370px, 75%); margin: 0 auto; }
  .gallery-frame { padding: 9px; transform: rotate(2deg); }
  .gallery-mat { padding: 12px; }
  .tiny-star { left: -18%; top: 7%; }
  .site-footer { flex-wrap: wrap; justify-content: center; text-align: center; gap: 9px 18px; font-size: 8px; }
  .footer-domain { display: none; }
}
@media(max-width:380px) { .site-wrap { padding-left: 16px; padding-right: 16px; } .eyebrow { letter-spacing: .15em; } h1 { font-size: 55px; } }
@media(prefers-reduced-motion:reduce) { * { animation: none !important; transition: none !important; } }