:root{--cream:#f3ece0;--paper:#fbf6ec;--sand:#d9c4a3;--terra:#c4633f;--ink:#2b211a;--muted:#6b5646;--gutter:clamp(22px,5vw,100px)}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:Arial,sans-serif;background-image:radial-gradient(ellipse at 15% 0%,rgba(217,196,163,.28),transparent 60%)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--terra);outline-offset:5px}a{color:inherit}header{padding:10px var(--gutter);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--sand)}.brand{width:200px}.brand img{width:100%;display:block}.lang{display:flex;padding:4px;border:1px solid var(--sand);border-radius:999px;background:var(--paper)}.lang button{border:0;background:transparent;color:var(--ink);border-radius:999px;padding:10px 17px;font-size:12px}.lang button[aria-pressed=true]{background:var(--terra);color:var(--paper)}h1,h2{font-family:Georgia,serif;font-weight:400;letter-spacing:-.04em;margin:0}.intro{padding:65px var(--gutter) 50px}.eyebrow{font-size:11px;letter-spacing:.23em;text-transform:uppercase;color:var(--muted)}h1{font-size:clamp(65px,9vw,145px);line-height:1.05;margin:20px 0}.rule{height:3px;width:95px;background:var(--terra)}.motto{font:italic clamp(20px,2vw,29px)/1.5 Georgia,serif;margin:24px 0 0;color:var(--muted)}.gallery{padding:20px var(--gutter) 75px}.gallery-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:40px}h2{font-size:clamp(32px,3vw,48px)}.gallery-head p{font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}.cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px;align-items:start}.card{display:block;width:100%;padding:12px;background:var(--paper);border:0;border-radius:10px;box-shadow:0 12px 26px rgba(43,33,26,.12);color:var(--ink);text-align:left;transition:box-shadow .5s,background .5s;position:relative}.card:nth-child(2){margin-top:40px;transform:rotate(.8deg)}.card:nth-child(3){margin-top:14px;transform:rotate(-.6deg)}.card:nth-child(4){margin-top:60px;transform:rotate(1deg)}.card:nth-child(5){margin-top:28px;transform:rotate(-.8deg)}.card img{display:block;width:100%;height:auto;border-radius:4px}.card-label{display:flex;justify-content:space-between;gap:10px;margin:17px 3px 5px;font-size:11px;letter-spacing:.06em;color:var(--muted)}.card:hover,.card:focus-visible{animation:cardGlow 3.2s ease-in-out infinite}.card:hover img,.card:focus-visible img{animation:glow 4s ease-in-out infinite}.card::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:10px;opacity:0;filter:blur(7px);mix-blend-mode:multiply;background:radial-gradient(ellipse 70px 26px at 22% 18%,rgba(43,33,26,.16),transparent 70%),radial-gradient(ellipse 60px 22px at 70% 34%,rgba(43,33,26,.13),transparent 70%)}.card:hover::after{opacity:1;animation:drift 10s ease-in-out infinite}.more-wrap{display:flex;justify-content:center;margin-top:65px}.more{display:flex;gap:16px;align-items:center;padding:16px 30px;border:1px solid var(--terra);border-radius:999px;background:transparent;color:var(--ink)}.more>span:first-child{font-size:24px;color:var(--terra)}button:disabled{opacity:.55;cursor:wait}#message{text-align:center;color:var(--muted);line-height:1.6}footer{margin:0 var(--gutter);padding:28px 0;border-top:1px solid var(--sand);display:flex;justify-content:space-between;gap:15px;font-size:12px;color:var(--muted)}
dialog{width:fit-content;max-width:80vw;max-height:85vh;padding:14px 18px;border:1px solid var(--sand);border-radius:12px;background:var(--paper);color:var(--ink);box-shadow:0 25px 75px rgba(43,33,26,.3);overflow:auto}dialog::backdrop{background:rgba(43,33,26,.38);backdrop-filter:blur(3px)}.viewer-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:12px;margin-bottom:10px}#close{background:transparent;color:var(--ink);border:0;font-size:28px;width:40px;height:40px}#large-image{display:block;width:auto;height:auto;max-width:calc(80vw - 38px);max-height:calc(85vh - 115px);object-fit:contain;margin:auto;border-radius:4px}.viewer-hint{font-size:11px;color:var(--muted);text-align:center;margin:14px 0 2px}body.viewer-open{overflow:hidden}
@keyframes cardGlow{0%,100%{background:#ebd6b2;box-shadow:0 14px 34px rgba(196,99,63,.3),0 0 26px 2px rgba(224,149,111,.4)}50%{background:#f4d5a4;box-shadow:0 18px 52px rgba(196,99,63,.45),0 0 50px 10px rgba(244,176,112,.65)}}@keyframes glow{0%,100%{box-shadow:0 0 10px 2px rgba(255,205,160,.5)}50%{box-shadow:0 0 20px 9px rgba(255,190,130,.8)}}@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(10px,6px)}}
@media(max-width:1100px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}.card:nth-child(n){margin-top:0;transform:none}}@media(max-width:650px){.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.gallery-head{display:block}.brand{width:165px}.intro{padding-top:40px}.card{padding:9px}.card-label{font-size:10px}.gallery-head p{line-height:1.8}footer{flex-wrap:wrap}dialog{max-width:90vw}#large-image{max-width:calc(90vw - 38px)}}@media(prefers-reduced-motion:reduce){*,*::after{animation:none!important;transition:none!important}}

/* Looser, scattered-paper composition without cropping or overlapping images. */
.cards{gap:32px;padding:18px 8px 25px}
.card:nth-child(1){margin-top:22px;transform:translateX(-6px) rotate(-4deg)}
.card:nth-child(2){margin-top:82px;transform:translateX(4px) rotate(3.5deg)}
.card:nth-child(3){margin-top:0;transform:translateX(-3px) rotate(-2.8deg)}
.card:nth-child(4){margin-top:65px;transform:translateX(5px) rotate(4.5deg)}
.card:nth-child(5){margin-top:38px;transform:translateX(3px) rotate(-4.8deg)}
@media(max-width:1100px){.cards{gap:32px 26px}.card:nth-child(1){margin-top:15px}.card:nth-child(2){margin-top:48px}.card:nth-child(3){margin-top:0}.card:nth-child(4){margin-top:20px}.card:nth-child(5){margin-top:50px}}
@media(max-width:650px){.cards{gap:28px 22px;padding:12px 4px}.card:nth-child(odd){margin-top:8px;transform:rotate(-2.5deg)}.card:nth-child(even){margin-top:36px;transform:rotate(2.8deg)}}


/* Soft floral backdrop and borderless artwork with a caption strip. */
body{min-height:100vh;position:relative;isolation:isolate}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(110deg,rgba(243,236,224,.94),rgba(251,246,236,.88)),url('img/orelexa_yellow_flowers_in_the_sky_with_clouds_high-resolution_18a03e5b-80cd-49cf-b6d6-460555f5d994_1.png');background-size:cover;background-position:center}
.card{padding:0;overflow:hidden}
.card-image-viewport{display:block;overflow:hidden;border-radius:10px 10px 0 0}
.card img{border-radius:0;transform:scale(1);transition:transform .5s ease}
.card-label{margin:0;padding:17px 15px 18px}
.card:hover img,.card:focus-visible img{transform:scale(1.025)}
@media(prefers-reduced-motion:reduce){.card img{transition:none}}
/* Fit the desktop gallery to the available screen without clipping controls. */
@media(min-width:900px) and (min-height:600px){
body{height:100dvh;min-height:0;display:flex;flex-direction:column}
header{flex-shrink:0;padding:8px var(--gutter)}.brand{width:170px}
main{flex:1;min-height:0;display:flex;flex-direction:column}
.intro{flex-shrink:0;padding:clamp(14px,3vh,30px) var(--gutter) 18px}
h1{font-size:clamp(52px,9vh,90px);margin:8px 0}.motto{font-size:clamp(18px,2.5vh,24px);margin-top:12px}
.gallery{flex:1;min-height:0;display:flex;flex-direction:column;padding:8px var(--gutter) 16px}
.gallery-head{flex-shrink:0;margin-bottom:12px}h2{font-size:clamp(28px,4vh,38px)}.gallery-head p{margin:0}
.cards{flex:1;min-height:0;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px;padding:12px 8px 20px;align-items:center}
.card:nth-child(n){margin-top:0}.card:nth-child(2),.card:nth-child(4){margin-top:24px}
.card img{height:clamp(110px,calc(100dvh - 425px),390px);object-fit:cover}
.card-label{padding:12px 14px 14px}
.more-wrap{flex-shrink:0;margin-top:12px}.more{padding:10px 25px}
#message{margin:0}footer{flex-shrink:0;padding:14px 0}
}
/* Reserve the status line so loading cannot move the cards. */
#message{min-height:1.6em;flex-shrink:0}

.intro-bottom{display:flex;align-items:baseline;justify-content:space-between;gap:20px}.gallery-subtitle{font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);margin:0}#message:empty{visibility:hidden}@media(max-width:650px){.intro-bottom{display:block}.gallery-subtitle{margin-top:14px}}

/* Smaller cards centered in the space between the heading and the button. */
@media(min-width:900px) and (min-height:600px){
.cards{grid-template-rows:minmax(0,1fr);align-items:center;padding:22px 8px;}
.cards .card:nth-child(n){width:75%;justify-self:center;align-self:center;margin-top:0;}
.cards .card img{height:clamp(82.5px,calc((100dvh - 425px)*.75),292.5px);}
.cards .card-label{padding:9px 10.5px 10.5px;}
}