:root { color-scheme: dark; --bg:#100e0d; --text:#f1e8db; --muted:#b8a99e; --accent:#ff8956; --line:#544037; }
:root[data-theme="light"] { color-scheme:light; --bg:#f3ebdf; --text:#281b17; --muted:#69564b; --accent:#a23514; --line:#bfa797; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:Arial,Helvetica,sans-serif; isolation:isolate; }
.smoke { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:-1; }
.smoke::before,.smoke::after { content:""; position:absolute; inset:-35%; background:url('smoke.svg') center / cover no-repeat; opacity:.28; transform-origin:62% 58%; will-change:transform; animation:smoke-drift 42s ease-in-out infinite alternate; }
.smoke::after { inset:-45%; opacity:.14; transform-origin:38% 46%; animation:smoke-return 57s ease-in-out infinite alternate; }
:root[data-theme="light"] .smoke { filter:invert(1); opacity:.35; }
@keyframes smoke-drift { 0% { transform:translate(4%,6%) rotate(-9deg) scale(1.04); } 50% { transform:translate(-1%,-2%) rotate(2deg) scale(1.12); } 100% { transform:translate(-4%,-5%) rotate(12deg) scale(1.06); } }
@keyframes smoke-return { 0% { transform:translate(-4%,-3%) rotate(172deg) scale(1.12); } 50% { transform:translate(2%,1%) rotate(159deg) scale(1.03); } 100% { transform:translate(4%,6%) rotate(148deg) scale(1.1); } }
.embers { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:-1; }
.embers>span { --rise:78vh; --flight:calc(var(--duration) * .8); position:absolute; left:var(--x); top:100%; animation:ember-rise var(--flight) linear var(--delay) infinite,ember-fade var(--flight) linear var(--delay) infinite; }
.embers>span:nth-child(3n) { --rise:66vh; animation-name:ember-rise,ember-fade-short; }
.embers>span:nth-child(5n) { --rise:102vh; animation-name:ember-rise,ember-fade-high; }
.embers i { display:block; width:var(--size); height:calc(var(--size) * 1.6); border-radius:60% 40% 55% 45%; background:#ffc17b; box-shadow:0 0 5px 1px #ff7928a0,0 0 15px 3px #e34a192b; animation:ember-sway 5s ease-in-out var(--delay) infinite alternate; }
:root[data-theme="light"] .embers { opacity:.65; }
:root[data-theme="light"] .embers i { background:#a23c0c; box-shadow:0 0 5px #dc661f70; }
@keyframes ember-rise { from { transform:translateY(6px) scale(1); } to { transform:translateY(calc(var(--rise) * -1)) scale(.3); } }
@keyframes ember-fade { 0% { opacity:0; } 8%,65% { opacity:.85; } 90% { opacity:.25; } 100% { opacity:0; } }
@keyframes ember-fade-short { 0% { opacity:0; } 8%,76% { opacity:.85; } 92% { opacity:.25; } 100% { opacity:0; } }
@keyframes ember-fade-high { 0% { opacity:0; } 8%,50% { opacity:.85; } 92% { opacity:.25; } 100% { opacity:0; } }
@keyframes ember-sway { from { transform:translateX(calc(var(--sway) * -.5)) rotate(-25deg); } to { transform:translateX(var(--sway)) rotate(30deg); } }
body::before { content:""; position:fixed; z-index:-1; inset:0; background:radial-gradient(ellipse at 92% 53%,#b42e1019,transparent 58%); pointer-events:none; }
.shell { max-width:1600px; min-height:100dvh; margin:auto; padding:clamp(12px,3.55dvh,32px) 6vw clamp(12px,2.89dvh,26px); display:flex; flex-direction:column; }
header,footer { display:flex; justify-content:space-between; align-items:center; gap:24px; }
header { min-height:44px; justify-content:flex-end; }
.address { font-size:12px; letter-spacing:.12em; color:var(--muted); }
button { font:inherit; font-size:12px; min-height:44px; padding:10px 0 10px 16px; border:0; background:none; color:var(--muted); cursor:pointer; }
button span { margin-left:8px; }
main { padding:clamp(12px,7.1dvh,64px) 0 clamp(12px,6.89dvh,62px); flex:1; }
.eyebrow { display:flex; align-items:center; gap:12px; margin:0 0 clamp(12px,3.55dvh,32px); font-size:11px; letter-spacing:.19em; text-transform:uppercase; color:var(--accent); }
.ember { width:6px; height:6px; flex-shrink:0; background:var(--accent); border-radius:50%; box-shadow:0 0 18px #ff653b60; }
h1 { font-family:Georgia,'Times New Roman',serif; font-weight:normal; font-size:clamp(44px,min(11vw,17.55dvh),158px); letter-spacing:-.065em; line-height:.83; margin:0; }
h1>span { display:block; }
h1 .middle { font-size:.34em; font-style:italic; letter-spacing:-.035em; color:var(--accent); padding:clamp(6px,1.89dvh,17px) 0 clamp(8px,2.44dvh,22px) 5px; }
.period { color:var(--accent); }
.tagline { font-family:Georgia,'Times New Roman',serif; font-size:clamp(22px,2.5vw,30px); margin:clamp(12px,3.55dvh,32px) 0 0; }
.arrival { display:flex; align-items:center; gap:18px; margin-top:clamp(12px,4.22dvh,38px); }
.rule { width:44px; height:1px; background:var(--accent); }
.arrival p { font-size:12px; text-transform:uppercase; letter-spacing:.19em; color:var(--muted); margin:0; }
footer { border-top:1px solid var(--line); padding-top:clamp(8px,2.11dvh,19px); color:var(--muted); font-size:12px; }
footer p { margin:0; line-height:1.6; }
a { color:var(--text); text-decoration:none; min-height:44px; display:inline-flex; gap:16px; align-items:center; overflow-wrap:anywhere; }
a:hover { color:var(--accent); text-decoration:underline; text-underline-offset:5px; }
:focus-visible { outline:2px solid var(--accent); outline-offset:6px; border-radius:2px; }
@media(min-width:1100px) { main { padding-left:8vw; } }
@media(max-width:600px) { .shell { padding:clamp(12px,2.37dvh,20px) 24px; } .address { font-size:10px; letter-spacing:.06em; } main { padding:clamp(12px,6dvh,60px) 0 clamp(12px,4dvh,48px); } h1 { font-size:clamp(44px,min(19vw,16dvh),112px); } .eyebrow { font-size:10px; letter-spacing:.12em; } footer { flex-direction:column; align-items:flex-start; gap:8px; } }
@media(max-height:480px) and (min-width:601px) { .shell { padding-top:8px; padding-bottom:8px; } main { padding-top:8px; padding-bottom:8px; } h1>span { display:inline; } h1 .middle { padding:0 .15em; font-size:.55em; } .eyebrow { margin-bottom:12px; } .tagline { margin-top:12px; } .arrival { margin-top:12px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; } .smoke::before,.smoke::after { animation:none; will-change:auto; } .embers { display:none; } .embers>span,.embers i { animation:none; } }