/* ============================================================
Tatsam Atelier — design tokens
============================================================ */
:root{
--maroon-950: #220503;
--maroon-900: #360806;
--maroon-800: #4a0d0a;
--maroon-700: #5e130f;
--maroon-600: #7a1d17;
--maroon-ink: #260603; /* footer address heading, rule and emblem (assets/logo-icon-dark.webp is filled with this same colour) */
/* The red plaster texture behind the page title bands, reused on cards
and panels. Both variants are anchored right of centre: the image's
left third is a bright gold patch that washes out gold text on top of
it. A maroon veil calms the grain so card type stays legible.
--maroon-texture is for wide cards carrying paragraphs: scaled up so
they crop into the quiet middle, with a heavier veil.
--maroon-texture-sm is for pills, buttons and the mobile menu: natural
size so a small box still catches some grain, with a lighter veil. */
--maroon-texture:
linear-gradient(rgba(34,5,3,0.45), rgba(34,5,3,0.45)),
url("assets/bottom-bg.webp") 72% 45% / max(100%, 2200px) auto no-repeat
var(--maroon-800);
--maroon-texture-sm:
linear-gradient(rgba(34,5,3,0.25), rgba(34,5,3,0.25)),
url("assets/bottom-bg.webp") 68% 45% / max(100%, 1384px) auto no-repeat
var(--maroon-800);
--near-black: #0c0705;
/* The tan sections' fine grain as a background layer, for ochre elements
whose ::before is already taken (the buttons' hover sheen). Same noise
at the same 12%, baked into the SVG instead of set on an overlay. */
--ochre-grain: url("data:image/svg+xml;utf8,");
--gold-100: #98561c;
--gold-200: #98561c;
--gold-300: #98561c;
--gold-400: #98561c;
--gold-500: #98561c;
--gold-600: #98561c;
--tan-bg: #98561c;
--tan-bg-dark: #98561c;
--cream: #faf6ee;
--ink: #1c1109;
--font-display: 'Homes Royale', Georgia, serif;
--font-sans: 'Poppins', 'Segoe UI', sans-serif;
--body-size: 1.1rem; /* every body paragraph (not CTA lead, footer or labels) */
--display-stroke: 0.018em; /* emulates a 500 weight on Homes Royale */
--container: 1240px;
--radius: 6px;
/* ---- motion ----
One vocabulary for the whole site. --ease-out-expo is the house curve:
it leaves fast and settles for a long time, which is what makes the
gold curtain on the Process images read as "drawn back" rather than
"slid". Everything else hangs off it. */
--ease-out-expo: cubic-bezier(.16,1,.3,1);
--ease-in-out-quart: cubic-bezier(.76,0,.24,1);
--ease-out-soft: cubic-bezier(.25,.46,.45,.94);
/* Even in, even out, no long tail — for the few transitions that move a
box's geometry rather than its transform (the Process image slot). Expo's
near-instant departure reads as a snap when the browser has to reflow
behind it. */
--ease-smooth: cubic-bezier(.4,0,.2,1);
--dur-fast: .35s;
--dur-mid: .7s;
--dur-slow: 1.1s;
--dur-veil: 1.3s;
}
/* `block`, not `swap`. Homes Royale carries every heading, and `swap` would
paint them in Georgia first, then reflow when the real face lands. The file
is preloaded in every page's and under 32KB, so it wins the race in
practice; holding the text invisible for those few milliseconds is cheaper
than painting it wrong. Only the 400 upright face exists, and browsers only fake bold
from 600 up, so every Homes Royale rule asks for 500 and thickens the
strokes itself with a hairline outline (--display-stroke) to read as a
medium. body sets font-synthesis:none so nothing else gets faked. */
@font-face{
font-family:'Homes Royale';
src:url('assets/fonts/HomesRoyale.woff2') format('woff2'),
url('assets/fonts/HomesRoyale.woff') format('woff');
font-weight:400;
font-style:normal;
font-display:block;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
margin:0;
background:var(--maroon-900);
color:var(--cream);
font-family:var(--font-sans);
font-weight:300;
line-height:1.6;
font-synthesis:none;
-webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; margin:0; padding:0; }
h1,h2,h3{ margin:0; font-family:var(--font-display); font-weight:500; -webkit-text-stroke:var(--display-stroke) currentColor; }
p{ margin:0; }
.section-title{
font-family:var(--font-display);
font-size:clamp(2.2rem,4vw,3rem);
font-weight:500; -webkit-text-stroke:var(--display-stroke) currentColor;
text-align:center;
color:var(--maroon-900);
}
.section-title.light{ color:var(--gold-200); }
/* subtle focus visibility for a11y */
a:focus-visible, button:focus-visible{
outline:2px solid var(--gold-200);
outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){
*{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}
/* ============================================================
Textured maroon backgrounds
============================================================ */
.texture-maroon{
position:relative;
background:var(--maroon-texture);
}
.texture-maroon::before{
content:"";
position:absolute; inset:0;
background-image:url("data:image/svg+xml;utf8,");
mix-blend-mode:overlay;
pointer-events:none;
}
/* ============================================================
Buttons
============================================================ */
.btn{
display:inline-flex; align-items:center; justify-content:center;
padding:0.85em 2em;
border-radius:999px;
font-family:var(--font-sans);
font-size:0.92rem;
font-weight:500;
letter-spacing:0.02em;
cursor:pointer;
transition:transform var(--dur-fast) var(--ease-out-expo),
box-shadow var(--dur-fast) var(--ease-out-soft),
background var(--dur-fast) var(--ease-out-soft),
color var(--dur-fast) var(--ease-out-soft);
border:1px solid transparent;
white-space:nowrap;
position:relative;
overflow:hidden;
isolation:isolate;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); transition-duration:.08s; }
.btn-outline-gold{
background:transparent;
border-color:var(--gold-400);
color:var(--gold-100);
}
.btn-outline-gold:hover{ background:var(--ochre-grain), var(--gold-400); color:var(--maroon-900); }
.btn-gold{
background:var(--ochre-grain), #98561c;
color:var(--maroon-900);
font-weight:600;
box-shadow:0 8px 20px rgba(0,0,0,0.35);
}
.btn-gold:hover{ box-shadow:0 12px 26px rgba(0,0,0,0.45); }
/* ============================================================
Header
============================================================ */
.site-header{
position:fixed; top:0; left:0; right:0; z-index:100;
padding:12px 4vw;
display:flex;
/* No bar at the top of the page: the logo and links sit straight on the
hero. The textured bar only appears once scrolled (.scrolled below). */
background:transparent;
transition:background .35s ease, padding .35s ease;
}
.site-header.scrolled,
/* The portfolio page opens on tan rather than a dark hero or title band, so
a see-through bar would leave the gold logo and button unreadable: there
the bar is present from the start. */
body:has(.pf-page) .site-header{
/* The maroon texture, cropped for a full-width 80px strip: scaled to 3000px
so the bar only spans the image's quiet middle. At the shared variants'
sizes the bright gold patch on the image's left edge sat behind the
logo and washed it out. */
background:
linear-gradient(rgba(34,5,3,0.3), rgba(34,5,3,0.3)),
url("assets/bottom-bg.webp") 75% 40% / max(100%, 3000px) auto no-repeat
var(--maroon-800);
/* Deliberately no `backdrop-filter:blur()`. The bar is fixed and the
content beneath it moves every frame, so the blurred backdrop can
never be cached — it was a full-width multi-pass GPU blur on every
scroll frame, for the whole page. The bar is opaque now anyway. */
padding:9px 4vw;
box-shadow:0 6px 24px rgba(0,0,0,0.35);
}
.header-inner{
width:100%;
max-width:1400px;
margin:0 auto;
display:grid;
/* Equal side tracks so the middle one — and therefore the nav — is centred
on the bar. With `auto 1fr auto` the wider CTA column shoved the nav ~60px
left of centre. minmax(0,1fr) lets the sides shrink instead of overflowing
on narrower desktops. */
grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
align-items:center;
gap:32px;
}
.logo{ display:flex; align-items:center; gap:10px; margin-left:128px; justify-self:start; }
.logo-img{ height:82px; width:auto; }
/* Sits a touch left of dead centre — optical balance against the wider
CTA button on the right. The mobile drawer resets `right` below. */
.main-nav{
display:flex; align-items:center; justify-content:center; gap:26px;
position:relative; right:20px;
}
/* Only shown inside the mobile drawer, where .header-cta is hidden. */
.nav-cta{ display:none; }
.nav-scrim{ display:none; }
.nav-link{
font-size:0.85rem; font-weight:400; color:var(--cream); opacity:0.9;
position:relative; padding-bottom:4px;
}
.nav-link.active{ color:var(--gold-200); opacity:1; }
.nav-link::after{
content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
background:var(--gold-300); transition:width .25s ease;
}
.nav-link:hover::after{ width:100%; }
.header-cta{
justify-self:end;
margin-left:20px;
margin-right:96px;
padding:0.72em 1.75em;
font-size:0.82rem;
font-weight:600;
background:var(--ochre-grain), #98561c;
color:var(--maroon-900);
box-shadow:none;
border:none;
}
.header-cta:hover{
background:var(--ochre-grain), #98561c;
color:var(--maroon-900);
box-shadow:0 6px 16px rgba(0,0,0,0.25);
}
.menu-toggle{
display:none; flex-direction:column; gap:5px;
background:none; border:none; cursor:pointer; padding:6px;
}
.menu-toggle span{ width:24px; height:1.5px; background:var(--gold-200); }
/* side vertical tab + whatsapp */
.side-tab-stack{
position:fixed; right:0; top:58%;
transform:translateY(-50%);
z-index:90;
display:flex; flex-direction:column;
box-shadow:-2px 0 10px rgba(0,0,0,0.25);
}
.side-tab{
transform:rotate(180deg);
writing-mode:vertical-rl;
background:var(--cream);
color:var(--maroon-800);
font-size:0.72rem; font-weight:600; letter-spacing:0.08em;
padding:14px 8px;
text-decoration:none;
display:flex; align-items:center; justify-content:center;
}
.side-tab-whatsapp{
background:var(--gold-400);
color:#fff;
padding:10px 0;
text-decoration:none;
display:flex; align-items:center; justify-content:center;
}
.side-tab-whatsapp svg{ width:20px; height:20px; }
/* ============================================================
Hero
============================================================ */
.hero{
position:relative;
background:var(--maroon-900);
}
/* The whole photo, never cropped: the hero takes the image's own aspect
ratio rather than a viewport height, so nothing is cut off on any screen
(the old full-viewport, object-fit:cover layers trimmed it and scaled the
rest up soft). Phones crop the sides — see the max-width:600px block below. */
.hero-img{ display:block; width:100%; height:auto; }
.hero-scrim{
position:absolute; inset:0;
background:
linear-gradient(180deg, rgba(10,4,2,0.55) 0%, rgba(10,4,2,0.15) 30%, rgba(10,4,2,0.35) 75%, rgba(10,4,2,0.75) 100%);
}
/* Sized and placed in percentages of the image, so it always sits on the
wall in the same spot: centred, wholly clear of the sofa (whose crest is at
~54% of the image height) and of the chandelier to its right. 12% of the
width is 21.3% of the 16:9 height, so 30.5% + 21.3% puts its foot at ~52%.
No shadow or opacity on it anywhere: the file itself is one flat #98561c,
and either would blend it into a second tone. */
.hero-emblem{
position:absolute; z-index:1;
left:50%; top:30.5%;
width:12%; height:auto;
transform:translateX(-50%);
}
/* Phones are the one exception to "never cropped": at 16:9 the hero was a
~220px strip, a quarter of the first screen, with the fixed header over a
third of it. Here the zoom comes from a tall 4:7 box: cover scales the
photo to the box's height, so the full height — wall to rug — is always
kept and only the sides are trimmed, to the middle 32% (34%–66%) of the
image. That frames the emblem with the sofa's back and cushions below it.
(Zooming with transform:scale instead also cut off the top and bottom.)
To zoom further or less, change the ratio's second number, then the
emblem: nothing is trimmed vertically, so its top:30.5% always holds, and
its 12% of the image width is 12% × 16/9 × 7/4 ≈ 37.3% of the box's width.
The source is only 1200px wide, so it softens as the zoom goes up.
The crop also brings the top of the photo under the logo and menu toggle,
so the scrim is darker across the header. */
@media (max-width:600px){
.hero{ aspect-ratio:4 / 7; overflow:hidden; }
.hero-img{ height:100%; object-fit:cover; object-position:50% 50%; }
.hero-emblem{ width:37.3%; }
.hero-scrim{
background:
linear-gradient(180deg, rgba(10,4,2,0.85) 0%, rgba(10,4,2,0.55) 16%, rgba(10,4,2,0.15) 32%, rgba(10,4,2,0.35) 75%, rgba(10,4,2,0.75) 100%);
}
}
/* ============================================================
About
============================================================ */
.about{
background:url("assets/about-lobby.webp") center/cover no-repeat;
background-blend-mode:normal;
padding:120px 6vw 100px;
}
.about-inner{
max-width:var(--container);
margin:0 auto;
display:grid;
grid-template-columns:0.9fr 1.1fr;
gap:70px;
align-items:center;
}
/* This block used to carry `transform:translate(220px,-240px)`, but it never
took effect: .about-copy was in the old scroll-reveal list, and both
`.reveal` and `.reveal.in` set their own transform, which overrode it from
first paint onwards. Restoring it now that the reveal no longer touches
this element pushed the heading up out of the section and gave the page a
7px horizontal scrollbar, so it is gone for good rather than resurrected. */
.about-image{ position:relative; }
.about-image img{ width:100%; border-radius:2px; box-shadow:0 30px 60px rgba(0,0,0,0.45); }
.about-badge{
position:absolute; right:-60px; top:90px;
animation:spin 18s linear infinite;
filter:drop-shadow(0 3px 8px rgba(0,0,0,0.3));
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.about-copy h1{
font-family:var(--font-display); font-weight:500; -webkit-text-stroke:var(--display-stroke) currentColor;
font-size:clamp(2.3rem,3.9vw,3.2rem);
color:var(--gold-400);
margin-bottom:28px;
line-height:1.2;
}
.about-copy p{
color:rgba(250,246,238,0.92);
font-size:var(--body-size);
font-weight:300;
max-width:52ch;
}
/* ============================================================
Spaces that inspire
============================================================ */
.spaces{
background:var(--tan-bg);
padding:100px 6vw 110px;
text-align:center;
}
.spaces .section-title{ margin-bottom:36px; font-family:var(--font-display); font-weight:500; -webkit-text-stroke:var(--display-stroke) currentColor; color:var(--maroon-900); }
.tabs{
display:inline-flex;
/* background:var(--near-black); */
border-radius:999px;
padding:6px;
margin-bottom:56px;
gap:4px;
}
.tab{
border:none; background:transparent; color:var(--gold-100);
font-family:var(--font-sans); font-size:0.92rem; font-weight:400;
padding:0.75em 2em; border-radius:999px; cursor:pointer;
transition:background .25s ease, color .25s ease;
}
.tab.active{ background:var(--maroon-700); color:var(--gold-100); }
.spaces-grid{
max-width:var(--container);
margin:0 auto;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:26px;
}
.space-card{
position:relative;
margin:0;
border-radius:4px;
overflow:hidden;
aspect-ratio:3/4;
box-shadow:0 20px 40px rgba(0,0,0,0.25);
}
.space-card img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.space-card:hover img{ transform:scale(1.06); }
.space-card figcaption{
/* Overshoots the frame by a pixel on all three edges rather than sitting flush
at bottom:0. The card's aspect-ratio height is fractional and the hover
translate puts it on its own layer, so a flush scrim rounds to a hairline of
bare image along the bottom. .space-card clips the overshoot. */
position:absolute; left:-1px; right:-1px; bottom:-1px;
padding:22px 22px 21px;
background:linear-gradient(180deg, transparent, rgba(0,0,0,0.75));
display:flex; flex-direction:column; align-items:flex-start;
text-align:left;
}
.cap-title{ font-family:var(--font-display); font-weight:500; -webkit-text-stroke:var(--display-stroke) currentColor; font-size:1.4rem; color:var(--gold-100); }
.cap-sub{ font-size:0.8rem; color:rgba(255,255,255,0.85); }
/* Stretched over the card so the image and its caption are both the link. */
.space-link{ position:absolute; inset:0; z-index:2; }
.space-card:focus-within{ outline:2px solid var(--gold-200); outline-offset:4px; }
.spaces-more{
max-width:var(--container);
margin:34px auto 0;
padding-top:16px;
text-align:center;
}
.spaces-more a{
font-size:1rem; font-weight:500; letter-spacing:0.12em; text-transform:uppercase;
color:var(--maroon-900);
border-bottom:1px solid rgba(0,0,0,0.45);
padding-bottom:4px;
}
.spaces-more a:hover{ color:var(--maroon-600); border-bottom-color:var(--maroon-600); }
/* ============================================================
Process
============================================================ */
.process{
background:url("assets/our-process-bg.webp") center/cover no-repeat;
padding:120px 6vw;
}
.process-inner{
max-width:var(--container);
margin:0 auto;
display:grid;
grid-template-columns:0.9fr 1.1fr;
gap:60px;
}
/* Grid items default to min-width:auto, so the 486px step image would force
the track wider than the viewport and give the whole page a sideways scroll. */
.process-inner > *{ min-width:0; }
.process-intro{
/* Keep the section title in view while its companion timeline is read.
Sticky is deliberately scoped to the desktop two-column composition; once
the layout stacks, the title returns to the natural reading order below. */
position:sticky;
top:108px;
align-self:start;
}
.eyebrow{
display:block;
font-family:var(--font-sans);
font-weight:600;
font-size:0.95rem;
color:var(--gold-400);
margin-bottom:18px;
}
.process-intro h2{
font-size:clamp(2.2rem,3.6vw,3rem);
color:var(--gold-100);
line-height:1.18;
}
.timeline{ position:relative; padding-left:34px; }
.timeline::before{
content:""; position:absolute; left:5px; top:10px; bottom:10px; width:1px;
background:linear-gradient(#A09C9C, rgba(160,156,156,0.15));
}
.timeline-step{ position:relative; padding-bottom:52px; }
.timeline-step:last-child{ padding-bottom:0; }
.step-num{
display:block;
font-family:var(--font-sans); font-weight:600; font-size:0.9rem;
color:var(--gold-500); letter-spacing:0.1em; margin-bottom:8px;
}
.step-dot{
position:absolute; left:-34px; top:26px;
width:11px; height:11px; border-radius:50%;
background:#98561c;
box-shadow:0 0 0 4px rgba(152,86,28,0.15);
}
.step-body h3{
/* Same display face and gold as the hero headline. */
font-family:var(--font-display);
font-size:clamp(1.8rem,2vw,2.15rem); color:var(--gold-400); margin-bottom:10px; font-weight:500; -webkit-text-stroke:var(--display-stroke) currentColor;
letter-spacing:0.01em;
}
.step-body p{ color:rgba(250,246,238,0.85); font-size:var(--body-size); max-width:42ch; }
.step-image-wrap{
position:relative;
overflow:hidden;
margin-top:20px;
width:486px; height:254px;
max-width:100%;
border-radius:3px;
box-shadow:0 20px 40px rgba(0,0,0,0.35);
}
/* The curtain-wipe that used to live here is now the shared [data-anim="settle"]
reveal at the foot of this file — .step-image-wrap just opts into it. Note
the base image is un-zoomed: with JS off the photo simply shows, where the
old rule left it stuck at scale(1.3). */
.step-image{
display:block;
width:100%; height:100%;
object-fit:cover;
}
/* On wide screens the process reads as a sequence of chapters: the card
closest to the viewport centre expands and is the sole photograph in view.
Inactive frames collapse so the timeline stays compact; the photo wipes
in and settles rather than snapping, which is what the scroll loop's
class toggle is for. */
@media (min-width:1081px){
.step-body{
transform-origin:left center;
transition:transform var(--dur-mid) var(--ease-smooth),
filter var(--dur-mid) var(--ease-out-soft);
}
/* Opening the slot is the one thing here that touches layout, so height is
the only property animated on the frame itself — evenly eased, and with
`contain` keeping the reflow inside the frame rather than letting it walk
the rest of the timeline on every frame. The frame no longer scales or
animates a clip-path: both forced the composited layer (image included)
to be re-rasterised each frame, which is what read as gritty rather than
soft. The reveal itself is now just the photograph fading in below — pure
opacity, which the compositor runs without repainting anything. */
.step-image-wrap{
max-height:0;
margin-top:0;
contain:layout paint;
transition:max-height var(--dur-mid) var(--ease-smooth),
margin-top var(--dur-mid) var(--ease-smooth);
}
/* No zoom on the photograph: a scaled image is resampled on every frame of
the transition, and that is what read as soft. It fades in at its natural
size instead, so what the browser paints is pixel-for-pixel the same image
throughout — the only thing animating is opacity, which the compositor
handles without touching the bitmap. */
.step-image{
opacity:0;
backface-visibility:hidden;
will-change:opacity;
transition:opacity var(--dur-mid) var(--ease-out-soft);
}
.timeline-step.is-process-active .step-body{
transform:scale(1.055);
filter:drop-shadow(0 18px 26px rgba(0,0,0,.2));
}
.timeline-step.is-process-active .step-image-wrap{
max-height:254px;
margin-top:20px;
}
/* The photograph trails the opening slot by 80ms so it arrives into a frame
that is already unfolding instead of appearing with the height change. */
.timeline-step.is-process-active .step-image{
opacity:1;
transition-delay:80ms;
}
}
/* ============================================================
Categories
============================================================ */
.categories{
background:var(--tan-bg);
padding:160px 6vw;
}
.categories .section-title{ margin-bottom:56px; }
.categories-grid{
max-width:var(--container);
margin:0 auto;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;
}
.cat-card{
margin:0; position:relative;
border-radius:4px; overflow:hidden;
aspect-ratio:3/4;
box-shadow:0 16px 30px rgba(0,0,0,0.2);
}
.cat-card img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.cat-card:hover img{ transform:scale(1.06); }
.cat-card figcaption{
position:absolute; left:18px; bottom:16px;
font-family:var(--font-display); font-weight:500; -webkit-text-stroke:var(--display-stroke) currentColor;
font-size:2rem; letter-spacing:0.3px; color:var(--gold-100);
text-shadow:0 2px 14px rgba(0,0,0,0.7);
}
/* Wallpaper collection — auto-scrolling carousel (pauses on hover) */
.wallpaper-carousel{
position:relative;
overflow:hidden;
/* room for the card shadow and the hover lift, which overflow:hidden
would otherwise clip against the section */
padding:52px 0 64px;
/* fade the edges so cards slide in/out softly */
-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
mask-image:linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.wp-track{
display:flex;
width:max-content;
animation:wp-scroll 110s linear infinite;
will-change:transform;
}
.wallpaper-carousel:hover .wp-track,
.wallpaper-carousel:focus-within .wp-track{ animation-play-state:paused; }
@keyframes wp-scroll{
from{ transform:translateX(0); }
to{ transform:translateX(-50%); }
}
.wp-card{
flex:0 0 auto;
width:300px;
margin:0 30px 0 0; position:relative;
border-radius:4px; overflow:hidden;
aspect-ratio:3/4;
box-shadow:0 16px 30px rgba(0,0,0,0.2);
}
.wp-card img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.wp-card::after{
/* inset:-1px, not 0 — same reason as .space-card figcaption. The marquee
animates .wp-track by a fractional translateX every frame, so a scrim flush
with the card's rounded clip rounds to a hairline of bare image along the
edges. .wp-card clips the overshoot. */
content:""; position:absolute; inset:-1px; pointer-events:none;
background:linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.12) 32%, rgba(0,0,0,0) 55%);
transition:opacity .35s ease;
}
.wp-card:hover img{ transform:scale(1.06); }
.wp-card figcaption{
position:absolute; left:0; right:0; bottom:16px;
z-index:1; text-align:center;
font-family:var(--font-display); font-weight:500; -webkit-text-stroke:var(--display-stroke) currentColor;
font-size:1.25rem; letter-spacing:2.5px; color:var(--gold-100);
text-shadow:0 2px 14px rgba(0,0,0,0.8);
}
.wp-card{ cursor:zoom-in; }
.wp-card:focus-visible{ outline:2px solid var(--maroon-900); outline-offset:4px; }
/* Wallpaper lightbox — the