@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Jim+Nightshade&family=Orbitron:wght@500;600&display=swap');

:root { color-scheme: dark; --ink: #10100f; --cream: #e9e2d1; --gold: #a9874d; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overflow: hidden; }
body { background: #11110f; color: var(--cream); font-family: "DM Sans", sans-serif; }
button, a { color: inherit; font: inherit; }

.gallery { --art-glow:202,181,130; min-height: 100svh; position: relative; isolation: isolate; display: grid; padding: 10px 18px; background: radial-gradient(ellipse at 50% 48%, #343129 0%, #1a1a17 43%, #10100f 78%); }
.gallery::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.19; z-index:20; 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='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E"); mix-blend-mode:soft-light; }
.room-environment { position:absolute; z-index:-2; inset:0; overflow:hidden; pointer-events:none; }
.room-environment::before { content:""; position:absolute; z-index:1; left:0; right:0; top:75.8%; height:20%; background:linear-gradient(180deg,rgba(0,0,0,.94),rgba(0,0,0,.36) 26%,transparent 68%),radial-gradient(ellipse at 50% 0,rgba(var(--art-glow),.13),transparent 65%); }
.room-baseboard { position:absolute; z-index:3; left:0; right:0; top:75.2%; height:2.7%; border-top:1px solid rgba(163,111,61,.3); border-bottom:1px solid rgba(0,0,0,.96); background:linear-gradient(180deg,#291a10 0%,#140c08 35%,#080504 100%); box-shadow:0 -9px 24px rgba(0,0,0,.5),0 9px 18px rgba(0,0,0,.9),inset 0 1px rgba(224,166,101,.09),inset 0 -2px 3px #000; }
.floor-plane { position:absolute; z-index:0; left:-14%; right:-14%; top:75.4%; height:72%; transform-origin:50% 0; transform:perspective(780px) rotateX(58deg); image-rendering:auto; background-color:#120b07; background-image:radial-gradient(ellipse at 50% 66%,rgba(var(--art-glow),.2),transparent 43%),linear-gradient(90deg,rgba(0,0,0,.72),transparent 19% 81%,rgba(0,0,0,.72)),linear-gradient(180deg,rgba(0,0,0,.72),transparent 25% 70%,rgba(0,0,0,.34)),url("assets/textures/dark-oak-floor-hyperreal.png"); background-position:center,center,center,center top; background-size:100% 100%,100% 100%,100% 100%,clamp(1040px,78vw,1650px) auto; background-repeat:no-repeat,no-repeat,no-repeat,repeat; background-blend-mode:soft-light,multiply,multiply,normal; box-shadow:inset 0 24px 34px rgba(0,0,0,.9),inset 0 -24px 50px rgba(0,0,0,.18); filter:saturate(.82) contrast(1.13) brightness(.88); }
.ambient-glow { position:absolute; width:58vw; height:58vw; left:21vw; top:1vh; background:radial-gradient(circle, rgba(var(--art-glow),.16), transparent 68%); filter:blur(24px); z-index:-1; transition:background 1.8s ease; }
.art-stage { --frame-rail:clamp(38px,4.6vw,68px); min-height:0; display:grid; grid-template-columns:minmax(130px, 190px) minmax(0, 1fr) minmax(220px, 258px); align-items:center; justify-items:center; gap:clamp(12px,1.5vw,24px); }
.display-piece { position:relative; isolation:isolate; width:calc(100vw - 520px); max-width:calc(100vw - 520px); height:min(96vh, 1060px); display:grid; place-items:center; }
.artwork-frame { position:relative; z-index:2; margin:0; width:100%; height:82%; display:flex; transform:translateY(-.5%); filter:drop-shadow(0 18px 16px rgba(0,0,0,.46)) drop-shadow(0 35px 42px rgba(0,0,0,.58)); }
.frame-edge { position:relative; display:flex; width:100%; min-width:0; border:var(--frame-rail) solid transparent; border-image-source:url("assets/textures/ornate-gilded-frame.png"); border-image-slice:19% 13%; border-image-width:1; border-image-repeat:stretch; background:#070504; box-shadow:0 0 0 1px #251305, 0 0 0 3px rgba(113,72,24,.6), inset 0 0 18px 10px #000; }
.frame-edge::before,.frame-edge::after { content:""; position:absolute; pointer-events:none; }
.frame-edge::before { inset:calc(-1 * var(--frame-rail)); z-index:3; border:1px solid rgba(255,222,141,.32); box-shadow:inset 0 1px 1px rgba(255,241,198,.42), inset 0 -4px 9px rgba(37,15,2,.58), 0 1px 0 rgba(0,0,0,.9); }
.frame-edge::after { inset:calc(-1 * var(--frame-rail) + 5px); z-index:3; box-shadow:inset 0 0 12px rgba(42,17,2,.58), inset 0 0 2px 1px rgba(255,225,151,.24); }
.frame-inner { position:relative; display:flex; flex:1; min-width:0; overflow:hidden; background:#080706; padding:7px; box-shadow:0 0 0 2px #160b03, 0 0 0 5px rgba(92,55,17,.78), 0 0 0 7px rgba(21,10,2,.92), inset 0 0 18px 10px #000; }
.easel { position:absolute; z-index:0; inset:0; pointer-events:none; filter:drop-shadow(0 10px 7px rgba(0,0,0,.48)) drop-shadow(0 25px 20px rgba(0,0,0,.46)); }
.easel::before { content:""; position:absolute; z-index:-2; left:10%; right:10%; bottom:-1.4%; height:7%; transform:perspective(300px) rotateX(64deg); transform-origin:50% 100%; background:radial-gradient(ellipse at 50% 55%,rgba(0,0,0,.56),rgba(0,0,0,.24) 44%,transparent 74%); filter:blur(8px); opacity:.78; }
.easel::after { content:""; position:absolute; z-index:4; left:11%; right:11%; bottom:-1.1%; height:4.2%; background:radial-gradient(ellipse 13% 30% at 18% 42%,rgba(0,0,0,.94),rgba(0,0,0,.52) 46%,transparent 100%),radial-gradient(ellipse 11% 28% at 50% 46%,rgba(0,0,0,.9),rgba(0,0,0,.46) 48%,transparent 100%),radial-gradient(ellipse 13% 30% at 82% 42%,rgba(0,0,0,.94),rgba(0,0,0,.52) 46%,transparent 100%); filter:blur(4px); opacity:.88; }
.easel span { position:absolute; display:block; overflow:hidden; border:1px solid rgba(35,18,8,.92); border-radius:2px 2px 4px 4px; background-color:#70451f; background-image:linear-gradient(90deg,rgba(17,8,3,.68),rgba(255,222,167,.19) 12%,rgba(255,235,195,.045) 30% 61%,rgba(20,9,3,.57) 100%),linear-gradient(180deg,rgba(255,225,178,.13),transparent 13% 76%,rgba(21,9,3,.38)),url("assets/textures/aged-oak-easel-vertical.png"); background-position:center,center,var(--wood-position,center); background-size:100% 100%,100% 100%,cover; background-blend-mode:multiply,soft-light,normal; box-shadow:inset 2px 0 2px rgba(255,226,178,.22),inset -3px 0 4px rgba(25,11,4,.62),inset 0 1px 1px rgba(255,238,204,.22),inset 0 -3px 3px rgba(25,11,4,.52),0 5px 7px rgba(0,0,0,.58); filter:saturate(.74) contrast(1.15) brightness(.82); }
.easel-leg { top:-3%; bottom:-1%; width:7.4%; transform-origin:50% 7%; }
.easel-leg-left { --wood-position:32% center; left:23%; transform:rotate(4.1deg); clip-path:polygon(13% 0,87% 0,100% 100%,0 100%); }
.easel-leg-right { --wood-position:71% center; right:23%; transform:rotate(-4.1deg); clip-path:polygon(13% 0,87% 0,100% 100%,0 100%); filter:saturate(.68) brightness(.74) contrast(1.17)!important; }
.easel-leg-center { --wood-position:52% center; z-index:-1; left:46.8%; top:6%; width:6.4%; transform:rotate(.35deg); clip-path:polygon(8% 0,92% 0,100% 100%,0 100%); filter:saturate(.62) brightness(.59) contrast(1.16)!important; }
.easel-crossbar { left:18%; right:18%; top:6.2%; height:5.8%; background-image:linear-gradient(180deg,rgba(255,238,202,.2),transparent 18% 63%,rgba(24,10,3,.58)),linear-gradient(90deg,rgba(21,9,3,.4),transparent 13% 85%,rgba(21,9,3,.46)),url("assets/textures/aged-oak-easel-horizontal.png")!important; background-position:center,center,center 42%!important; background-size:100% 100%,100% 100%,cover!important; }
.easel-clamp { --wood-position:47% center; z-index:1; left:43%; top:4%; width:14%; height:8.2%; border-radius:4px!important; box-shadow:inset 2px 0 2px rgba(255,230,185,.16),inset -3px 0 3px rgba(38,19,8,.38),0 4px 7px rgba(0,0,0,.45)!important; }
.easel-clamp::before,.easel-clamp::after { content:""; position:absolute; top:37%; width:10px; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 38% 34%,#83715d 0 8%,#25211d 28%,#090908 63%,#554a3e 67%,#111 76%); box-shadow:0 1px 2px #000; }
.easel-clamp::before { left:18%; }.easel-clamp::after { right:18%; }
.easel-shelf { z-index:1; left:-2.2%; right:-2.2%; top:87.1%; height:4.7%; border-radius:2px 2px 6px 6px!important; background-image:linear-gradient(180deg,rgba(255,239,204,.24),transparent 20% 57%,rgba(22,9,3,.64)),linear-gradient(90deg,rgba(20,8,3,.46),transparent 10% 88%,rgba(20,8,3,.48)),url("assets/textures/aged-oak-easel-horizontal.png")!important; background-position:center,center,center 64%!important; background-size:100% 100%,100% 100%,cover!important; box-shadow:inset 0 2px rgba(255,235,197,.22),inset 0 -5px rgba(30,12,4,.67),0 4px 5px rgba(0,0,0,.48),0 11px 14px rgba(0,0,0,.56)!important; }
.artwork-layer { position:absolute; inset:7px; display:block; width:calc(100% - 14px); height:calc(100% - 14px); object-fit:contain; opacity:0; transform:scale(1.015); transition:opacity 1s ease, transform 1s cubic-bezier(.22,1,.36,1); will-change:opacity,transform; }
.artwork-layer.is-visible { opacity:1; transform:scale(1); }
.canvas-glaze { position:absolute; inset:7px; pointer-events:none; background:linear-gradient(115deg,rgba(255,255,255,.07),transparent 18%,transparent 78%,rgba(255,220,160,.03)), radial-gradient(ellipse at 50% 42%,transparent 58%,rgba(8,4,1,.12) 100%); mix-blend-mode:screen; box-shadow:inset 0 0 12px rgba(0,0,0,.35); }

.caption { width:100%; align-self:center; opacity:1; transform:translateY(0); transition:opacity .28s ease, transform .38s cubic-bezier(.22,1,.36,1); }
.caption.changing { opacity:0; transform:translateY(8px); }
.caption p { margin:0 0 5px; color:var(--gold); text-transform:uppercase; font-size:10px; font-weight:600; letter-spacing:.25em; }
.caption h1 { font:400 clamp(18px,2vw,28px)/1 "Jim Nightshade", cursive; margin:0 0 3px; }
.caption span { color:#7f7b72; font:500 26px "DM Sans",sans-serif; }

.info-panel { width:100%; }
.date-time { margin-bottom:14px; text-align:center; font-variant-numeric:tabular-nums; }
.date-time time { display:block; }
#current-date { color:#aaa397; font:500 clamp(19px,1.65vw,24px)/1.15 "Orbitron",sans-serif; text-transform:capitalize; letter-spacing:.04em; }
#current-time { margin-top:2px; color:#f1ead9; font:500 36px/1 "Orbitron",sans-serif; letter-spacing:.04em; }
.weather-card { width:100%; padding:22px 20px 18px; border:1px solid rgba(169,135,77,.26); background:linear-gradient(145deg,rgba(31,31,27,.88),rgba(12,12,11,.82)); box-shadow:0 20px 45px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.035); backdrop-filter:blur(14px); }
.weather-header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.weather-kicker,.forecast-label { margin:0; color:var(--gold); text-transform:uppercase; font-size:9px; font-weight:600; letter-spacing:.2em; }
.weather-header h2 { margin:3px 0 0; font:italic 500 24px/1 "Orbitron",sans-serif; }
.weather-status { max-width:78px; color:#77746c; font-size:8px; line-height:1.35; text-align:right; }
.weather-now { display:flex; align-items:center; gap:14px; margin:23px 0 20px; }
.weather-icon { width:48px; color:#d6bc82; font-size:37px; line-height:1; text-align:center; filter:grayscale(.2); }
.weather-now div { display:flex; flex-direction:column; }
.weather-now strong { color:#f1ead9; font:500 42px/.9 "Orbitron",sans-serif; letter-spacing:-.04em; }
.weather-now div > span { margin-top:7px; color:#908b80; font:500 12px "Orbitron",sans-serif; }
.weather-now .weather-wind { margin-top:4px; color:#b6a77f; font:600 10px "DM Sans",sans-serif; }
.weather-divider { height:1px; margin-bottom:16px; background:linear-gradient(90deg,rgba(169,135,77,.5),rgba(169,135,77,.04)); }
.forecast-label { margin-bottom:8px; color:#77746c; font-size:8px; }
.hourly-forecast { list-style:none; margin:0; padding:0; }
.hourly-forecast li { display:grid; grid-template-columns:1fr 30px 42px; align-items:center; min-height:38px; border-top:1px solid rgba(255,255,255,.045); }
.hourly-forecast li:first-child { border-top:0; }
.hourly-forecast time { color:#a7a297; font-size:11px; font-variant-numeric:tabular-nums; }
.hour-icon { color:#cdb47d; font-size:18px; text-align:center; }
.hourly-forecast strong { color:#e6dfcf; font:600 14px "DM Sans",sans-serif; text-align:right; }
.weather-error { margin:10px 0 0; color:#9d796d; font-size:9px; line-height:1.4; }
.sunset-card { width:100%; display:flex; align-items:center; justify-content:center; gap:14px; margin-top:12px; padding:15px 18px; border:1px solid rgba(169,135,77,.26); background:linear-gradient(145deg,rgba(31,31,27,.88),rgba(12,12,11,.82)); box-shadow:0 14px 32px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.035); backdrop-filter:blur(14px); }
.sunset-icon { color:#d6bc82; font-size:27px; line-height:1; }
.sunset-card p { margin:0 0 2px; color:var(--gold); text-transform:uppercase; font-size:8px; font-weight:600; letter-spacing:.18em; }
.sunset-card time { color:#f1ead9; font:500 27px/1 "Orbitron",sans-serif; font-variant-numeric:tabular-nums; }

@media (min-width:1400px) {
  .sunset-card p { font-size:11px; }
  .sunset-card time { font-size:34px; }
}

@media (max-width:1050px) {
  .art-stage { grid-template-columns:minmax(105px, 140px) minmax(0,1fr) minmax(190px, 220px); }
  .display-piece { width:calc(100vw - 410px); max-width:calc(100vw - 410px); }
  .weather-card { padding:18px 15px 14px; }
}

@media (max-width:700px) {
  .gallery { padding:6px; }
  .art-stage { --frame-rail:clamp(22px,5vw,34px); grid-template-columns:minmax(0,1fr) minmax(124px,34vw); gap:6px; }
  .caption { position:absolute; left:12px; bottom:12px; z-index:3; width:min(48vw,180px); padding:10px; background:rgba(10,10,9,.74); backdrop-filter:blur(8px); }
  .display-piece { width:calc(66vw - 12px); max-width:calc(66vw - 12px); height:min(96vh, 820px); }
  .artwork-frame { height:84%; }
  .easel-shelf { top:88%; }
  .caption h1 { max-width:none; }
  .caption span { font-size:26px; }
  .weather-card { padding:14px 10px 11px; }
  .date-time { margin-bottom:9px; }
  #current-date { font-size:16px; }
  #current-time { font-size:27px; }
  .weather-header { display:block; }
  .weather-status { display:block; max-width:none; margin-top:5px; text-align:left; }
  .weather-now { gap:5px; margin:17px 0 14px; }
  .weather-icon { width:34px; font-size:27px; }
  .weather-now strong { font-size:31px; }
  .weather-now div > span { font-size:10px; }
  .weather-now .weather-wind { font-size:9px; }
  .hourly-forecast li { grid-template-columns:1fr 24px 34px; }
  .sunset-card { gap:8px; margin-top:7px; padding:10px 8px; }
  .sunset-icon { font-size:22px; }
  .sunset-card p { font-size:7px; letter-spacing:.12em; }
  .sunset-card time { font-size:23px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
  .artwork-layer,.artwork-layer.is-visible,.caption,.caption.changing { transform:none!important; }
}