:root { --ink:#191911; --cream:#f6f5ee; --olive:#858a70; --light:#eeebc9; --serif:'Italiana', Georgia, serif; --sans:'Jost', sans-serif; --mono:'Josefin Sans', sans-serif; }
.paused-overlay{position:fixed;inset:0;z-index:8;background:rgba(25,25,17,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.paused-overlay[hidden]{display:none}.paused-overlay span{color:var(--light);font:80px var(--serif)}.paused-overlay h2{font:clamp(38px,6vw,76px) var(--serif);margin:10px}.paused-overlay p{color:#cfccb4}
* { box-sizing:border-box; } body { min-height:100vh; margin:0; color:var(--cream); background:var(--ink); font-family:var(--sans); } .screen-shell { min-height:100vh; display:flex; flex-direction:column; padding:clamp(18px,3vw,42px); } header, footer { display:flex; align-items:center; justify-content:space-between; gap:20px; } header { min-height:64px; border-bottom:1px solid rgba(238,235,201,.25); padding-bottom:16px; } .brand img { width:115px; height:61px; object-fit:contain; display:block; } .event-title { text-align:center; display:flex; flex-direction:column; gap:4px; } .event-title span { font:600 clamp(13px,1.6vw,19px) var(--mono); letter-spacing:2px; } .event-title small { color:#d6d3bc; font:500 10px var(--mono); letter-spacing:1.5px; } .live-state { color:#eeebc9; font:600 11px var(--mono); letter-spacing:1.4px; } .live-state i, footer p i { display:inline-block; width:8px; height:8px; margin-right:7px; border-radius:50%; background:#a4bd87; box-shadow:0 0 0 4px rgba(164,189,135,.15); } main { flex:1; min-height:0; display:grid; grid-template-columns:1.07fr 1fr; gap:clamp(10px,1.6vw,22px); padding:clamp(20px,3vw,40px) 0; } .opening-card { position:relative; overflow:hidden; background:linear-gradient(145deg,#4e5041,#858a70 47%,#d5c883); min-height:480px; padding:clamp(32px,6vw,90px); display:flex; flex-direction:column; justify-content:center; } .opening-card:before,.opening-card:after { content:''; position:absolute; border:1px solid rgba(255,253,228,.35); width:62vw; height:62vw; border-radius:50%; left:-18vw; bottom:-40vw; } .opening-card:after { width:35vw; height:35vw; left:-4vw; bottom:-27vw; } .opening-card p { position:relative; margin:0 0 12px; font:500 12px var(--mono); letter-spacing:3px; text-transform:uppercase; } .opening-card h1 { position:relative; margin:0; font:clamp(56px,9vw,142px)/.82 var(--serif); letter-spacing:-5px; } .opening-card h1 em { color:var(--light); font-style:normal; } .opening-card > span { position:absolute; top:32px; right:38px; font:clamp(35px,5vw,72px) var(--serif); color:var(--light); } .gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:clamp(10px,1.6vw,22px); min-height:0; } .tile { position:relative; overflow:hidden; min-height:180px; background:linear-gradient(145deg,#3c493d,#af7459 55%,#e1bb87 56%); } .tile::after { content:'✦'; position:absolute; top:15px; right:18px; color:#fff2d5; font:24px var(--serif); opacity:.9; } .tile img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; animation:appear .6s ease both; } .tile:nth-child(2) { background:linear-gradient(145deg,#8b6857,#cf9564 57%,#3e4c3e 58%); }.tile:nth-child(3) { background:linear-gradient(145deg,#505a48,#d07a5d 53%,#e0b681 54%); }.tile:nth-child(4) { background:linear-gradient(145deg,#6e554f,#c58d68 48%,#3b4941 49%); }.tile::before { content:''; position:absolute; width:42%; height:64%; border-radius:48%; left:30%; top:27%; background:radial-gradient(circle at 50% 20%,#e5b28b 0 23%,#4b3730 24% 30%,#e5b28b 31% 42%,transparent 43%),linear-gradient(#4a352e 0 29%,#be765b 30%); } .tile .uploaded-label { position:absolute; z-index:2; left:16px; bottom:13px; padding:5px 7px; background:rgba(25,25,17,.7); color:#fffdf1; font:500 10px var(--mono); letter-spacing:1px; } footer { border-top:1px solid rgba(238,235,201,.25); padding-top:16px; } footer p { margin:0; color:#e7e4ca; font-size:13px; } footer button { min-height:44px; border:1px solid #eeebc9; padding:10px 15px; background:transparent; color:#eeebc9; font:600 12px var(--sans); cursor:pointer; } footer button:hover { background:#eeebc9; color:#191911; }.screen-toast { position:fixed; bottom:24px; left:50%; transform:translate(-50%,24px); opacity:0; padding:12px 16px; background:#eeebc9; color:#191911; font-size:12px; transition:.2s; }.screen-toast.show { transform:translate(-50%,0); opacity:1; } @keyframes appear { from { opacity:0; transform:scale(1.06); } to { opacity:1; transform:none; } } @media (max-width:700px) { .screen-shell { padding:16px; }.brand img { width:88px; height:49px; }.event-title span { font-size:11px; letter-spacing:1px; }.event-title small { font-size:8px; letter-spacing:.7px; }.live-state { font-size:9px; }.live-state i { width:6px; height:6px; margin-right:3px; } main { grid-template-columns:1fr; grid-template-rows:38vh 1fr; gap:12px; padding:15px 0; }.opening-card { min-height:0; padding:32px; }.opening-card h1 { font-size:62px; }.opening-card:before { width:130vw; height:130vw; left:-55vw; bottom:-105vw; }.opening-card:after { width:75vw; height:75vw; left:-20vw; bottom:-65vw; }.gallery { gap:12px; }.tile { min-height:130px; } footer { padding-top:12px; } footer p { font-size:12px; } footer button { min-height:42px; padding:9px 12px; font-size:11px; } }