.works-page { padding-block: 64px 88px; }
.works-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 40px; }
.works-heading h1 { font-size: clamp(38px,5vw,66px); line-height: 1.2; margin: 12px 0 18px; color: var(--accent); }
.works-heading p:last-child { color: var(--muted); line-height: 1.8; }
.works-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px 24px; }
.work-card { min-width: 0; margin: 0; padding: 0; background: #faf8f2; border: 1px solid #b59654; box-shadow: 0 8px 22px -15px #49391880; }
.work-photo { display: block; position: relative; }
.work-photo img,.work-card video { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position:center; background: #eee9e1; }

.enlarge-hint { position: absolute; bottom: 12px; left: 12px; background: #faf8f2eb; color: #493918; padding: 6px 12px; font-size: 13px; border: 1px solid #b59654; }
.work-photo:focus-visible { outline: 3px solid #624c2d; outline-offset: 4px; }
.photo-viewer { width: min(96vw,1100px); max-width: 96vw; max-height: 94vh; max-height: 94dvh; padding: 16px; border: 1px solid #b59654; background: #faf8f2; color: #493918; }
.photo-viewer::backdrop { background: #191611db; }
.photo-viewer form { display: flex; justify-content: flex-start; margin-bottom: 12px; }
.photo-viewer button { font: inherit; color: inherit; min-height: 44px; padding: 8px 20px; border: 1px solid #b59654; background: transparent; cursor: pointer; }
.photo-viewer img { display: block; width: 100%; height: min(72vh,1000px); height: min(72dvh,1000px); object-fit: contain; }
.viewer-caption { margin: 10px 0 0; text-align: center; }
body:has(.photo-viewer[open]) { overflow: hidden; }
@media(max-width:1000px) { .works-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .works-page { padding-block: 36px 50px; } .works-heading { flex-direction: column; align-items: start; gap: 16px; margin-bottom: 28px; } .works-grid { grid-template-columns: 1fr; gap: 24px; } .photo-viewer { padding: 12px; } }
/* Square tiles fill the gold frames edge to edge. */
.work-photo img, .work-card video { aspect-ratio: 1; }
@media(max-width:600px) { .works-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 12px; }  .enlarge-hint { left: 6px; bottom: 6px; padding: 5px 8px; font-size: 12px; } }
@media(max-width:360px) { .works-grid { grid-template-columns: 1fr; } }

/* Physical picture frame: bevelled rails meet at natural 45-degree mitres. */
.work-card {
 position: relative;
 padding: 0;
 border: 6px solid;
 border-color: #e1c98f #a78950 #8e713e #cfb475;
 border-radius: 0;
 background: linear-gradient(135deg, #fffdf8, #f1ece2);
 box-shadow: 0 1px 2px #49391830, 3px 9px 15px -6px #49391845,
 inset 0 0 0 1px #83693870, inset 2px 3px 5px #49391820;
}
.work-card::before {
 content: ""; position: absolute; inset: -6px;
 border: 1px solid #b49a65; pointer-events: none;
 box-shadow: inset 1px 1px 0 #fff9e3a0, inset -1px -1px 0 #614f3230;
}
.work-photo, .work-card video {
 box-shadow: 0 0 0 1px #cabfa9, 0 0 0 2px #fffdf5;
}
.work-photo img, .work-card video { background: #eee9e1; }
@media(max-width:600px) { .work-card { padding: 0; } }

.gallery-categories { display:flex; justify-content:center; gap:0; margin:0 0 40px; border-block:1px solid #c6ad7860; padding:12px 0; }
.gallery-categories button { position:relative; font:inherit; font-size:22px; letter-spacing:.04em; min-width:140px; min-height:52px; border:0; background:transparent; color:#766b5d; cursor:pointer; }
.gallery-categories button+button { border-inline-start:1px solid #c6ad7880; }
.gallery-categories button[aria-selected="true"] { color:#765925; background:linear-gradient(90deg,transparent,#d6bf8840,transparent); }
.gallery-categories button[aria-selected="true"]::after { content:""; position:absolute; bottom:0; left:28%; right:28%; height:2px; background:#a38445; }
.gallery-categories button:focus-visible, [role="tabpanel"]:focus-visible { outline:2px solid #85652e; outline-offset:5px; }
[role="tabpanel"][hidden] { display:none; }
.gallery-empty { text-align:center; padding:70px 24px; background:linear-gradient(135deg,#fffdf5b0,#eee5d670); border:1px solid #c6ad7880; }
.empty-ornament { display:block; font-size:38px; color:#ac8d50; }
.gallery-empty h2 { font-size:32px; color:#765925; margin:14px 0; }
.gallery-empty p { color:var(--muted); margin:0 0 30px; line-height:1.8; }
@media(max-width:600px) { .gallery-categories { margin-bottom:28px; } .gallery-categories button { min-width:120px; font-size:20px; } .gallery-empty { padding:48px 18px; } }

.media-group-title { display:flex; align-items:center; gap:20px; margin:0 0 24px; color:#806531; font-size:23px; font-weight:400; letter-spacing:0; }
.media-group-title::after { content:""; flex:1; height:1px; background:linear-gradient(to left,#b89b6260,transparent); }
.videos-title { margin-top:54px; }
.work-photo { cursor:zoom-in; }

/* Fine line portraits keep both gallery categories easy to distinguish. */
.gallery-categories button { display:flex; align-items:center; justify-content:center; gap:14px; padding:10px 26px 14px; }
.category-portrait { width:38px; height:44px; flex-shrink:0; }
.gallery-booking { display:flex; justify-content:center; margin-top:64px; padding-top:32px; border-top:1px solid #c6ad7860; }
.gallery-empty p { margin-bottom:0; }
@media(max-width:600px) { .gallery-categories button { padding-inline:20px; gap:10px; } .category-portrait { width:32px; height:38px; } .gallery-booking { margin-top:48px; } }

.works-heading h1{font-size:clamp(42px,5.4vw,72px);font-weight:500;letter-spacing:0;line-height:1.25}

/* Portrait videos retain the complete frame, including in fullscreen. */
.work-card:has(video){align-self:start}
.work-card video{aspect-ratio:9 / 16;object-fit:contain;background:#eee9e1;max-height:75vh;max-height:75dvh}
.work-card video:fullscreen{width:100%;height:100%;max-height:none;object-fit:contain;background:#000}
/* Light catches each gold frame on hover, keyboard focus or a touch. */
.work-card{transition:transform .25s ease,box-shadow .25s ease}
.work-card::before{z-index:2;background:linear-gradient(115deg,transparent 42%,#fff6dc88 50%,transparent 58%) 150% 0/300% 100%}
.work-card.is-touched,.work-card:focus-within{transform:translateY(-2px);box-shadow:0 8px 22px #a582414d,0 0 0 1px #e3c985}
.work-card.is-touched::before,.work-card:focus-within::before{animation:frame-glint .85s ease-out}
@media(hover:hover){.work-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px #a582414d,0 0 0 1px #e3c985}.work-card:hover::before{animation:frame-glint .85s ease-out}}
@keyframes frame-glint{from{background-position:150% 0}to{background-position:-50% 0}}
@media(prefers-reduced-motion:reduce){.work-card{transition:none}.work-card::before{animation:none!important}}

.video-open{position:absolute;inset:0;border:0;cursor:pointer;background:transparent;color:#fff;display:grid;place-items:center;width:100%;height:100%;z-index:1}
.video-open svg{width:52px;height:52px;padding:12px;border-radius:50%;background:#29231b66;box-shadow:0 0 0 1px #fff9;filter:drop-shadow(0 2px 3px #0004)}
.video-open:focus-visible{outline:3px solid #94784d;outline-offset:3px}
.video-viewer{width:min(94vw,620px);max-width:94vw;max-height:94vh;max-height:94dvh;padding:14px;border:1px solid #b59654;background:#faf8f2;color:#493918}
.video-viewer::backdrop{background:#191611db}
.video-viewer form{display:flex;margin-bottom:10px}
.video-viewer form button{font:inherit;color:inherit;min-height:44px;padding:8px 20px;border:1px solid #b59654;background:transparent;cursor:pointer}
.video-viewer .viewer-media{width:fit-content;margin:auto;max-width:100%}
.video-viewer video{display:block;width:auto;max-width:100%;height:min(74vh,900px);height:min(74dvh,900px);object-fit:contain;background:#eee9e1}
.video-viewer .viewer-media::after{bottom:58px}
body:has(.video-viewer[open]){overflow:hidden}

/* The watermark follows the visible media, never the surrounding dialog. */
.photo-viewer .viewer-media{width:fit-content;max-width:100%;margin:auto}
.photo-viewer .viewer-media img{width:auto;height:auto;max-width:100%;max-height:72vh;max-height:72dvh;object-fit:contain}
.video-viewer .viewer-media{width:min(100%,calc(74vh * 9 / 16));width:min(100%,calc(74dvh * 9 / 16))}
.video-viewer .viewer-media video{width:100%;height:auto;aspect-ratio:9 / 16;max-height:74vh;max-height:74dvh;object-fit:contain}

/* Use almost the full viewport while keeping complete media in view. */
.photo-viewer,.video-viewer{width:98vw;max-width:98vw;height:98dvh;max-height:98dvh;padding:4px;overflow:hidden;background:transparent;border:0;box-shadow:none}
.photo-viewer form,.video-viewer form{position:absolute;top:5px;right:5px;z-index:10;margin:0}
.photo-viewer form button,.video-viewer form button{background:#faf8f2eb;border-radius:24px}
.photo-viewer .viewer-media,.video-viewer .viewer-media{width:min(96vw,calc(96dvh * var(--media-ratio,.5625)));height:auto;max-width:100%;margin:1dvh auto}
.photo-viewer .viewer-media img,.video-viewer .viewer-media video{width:100%;height:auto;max-height:96dvh;aspect-ratio:var(--media-ratio,.5625);object-fit:contain}