/* An opening contact sheet: three complete frames and a short introduction. */
.portfolio-page .highlights{position:relative;z-index:1;max-width:1440px;margin:0 auto;padding:166px 5vw 52px}
.highlights-heading-row{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:30px}
.highlights-kicker{font:500 10px/1.6 Montserrat,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#dda078;margin:0 0 10px}
.highlights-heading{font:400 clamp(25px,2.9vw,42px)/1.15 'Playfair Display',serif;letter-spacing:-.035em;margin:0;color:#f4f1ea}
.highlights-controls{display:flex;gap:8px;align-items:center;flex:none}
.highlights-controls button{min-width:44px;min-height:44px;border:1px solid #75675a;background:#10100e;color:#f4f1ea;border-radius:50%;font:400 11px Montserrat,sans-serif;cursor:pointer}
.highlights-controls [data-play]{border-radius:24px;padding-inline:16px}.highlights-controls button:hover{background:#e8743b;color:#17140f}
.highlights-count{color:#d6c8bc;font:400 10px Montserrat,sans-serif;letter-spacing:.1em;margin-left:8px}
.highlights-reel{display:grid;grid-template-columns:1fr 1.16fr 1fr;gap:24px;align-items:center}
.highlights-reel figure{margin:0;min-width:0}.highlights-photo{display:block;height:clamp(300px,43svh,470px);background:transparent;outline-offset:5px;position:relative;isolation:isolate}
.highlights-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;filter:none!important;pointer-events:none}
.highlights-reel figure:nth-child(2) .highlights-photo{height:clamp(330px,47svh,510px)}
.highlights figcaption{font:400 11px/1.5 Montserrat,sans-serif;color:#d1c8bf;margin-top:12px;letter-spacing:.025em;min-height:34px}
.highlights-skip{display:flex;align-items:center;width:fit-content;min-height:44px;margin-top:17px;color:#f4f1ea;font:400 11px Montserrat,sans-serif;letter-spacing:.07em;border-bottom:1px solid #e8743b99}
@media(max-width:700px){.portfolio-page .highlights{padding:122px 24px 25px}.highlights-heading-row{display:block;margin-bottom:23px}.highlights-heading{font-size:30px}.highlights-controls{margin-top:20px}.highlights-reel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 16px;margin-inline:-4px;scrollbar-color:#86634d #17140f;scrollbar-width:thin}.highlights-reel figure{flex:0 0 78%;scroll-snap-align:start}.highlights-photo,.highlights-reel figure:nth-child(2) .highlights-photo{height:clamp(280px,45svh,400px)}.highlights figcaption{font-size:10px;min-height:32px}.highlights-count{margin-left:14px}}
@media(max-height:550px) and (min-width:701px){.portfolio-page .highlights{padding-top:150px}.highlights-photo,.highlights-reel figure:nth-child(2) .highlights-photo{height:280px}}

/* Playback has a visible cadence; a pause control remains available throughout. */
.highlights-playback{flex:none;min-width:280px}
.highlights-controls [data-play]{min-width:138px;white-space:nowrap}
.highlights-playback-note{display:flex;align-items:center;gap:12px;min-height:25px;padding:7px 1px 0;color:#c8bbb0;font:400 10px/1.4 Montserrat,sans-serif}
.highlights-playback-note [data-state]{flex:1}
.highlights-progress{width:55px;height:2px;overflow:hidden;background:#6e6a634d;opacity:0}
.highlights-progress i{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:#e8743b}
.highlights[data-playing=true] .highlights-progress{opacity:1}
.highlights-photo{background:transparent}
@media(max-width:700px){.highlights-playback{min-width:0;width:100%;max-width:350px}.highlights-playback-note{font-size:10px}.highlights-controls{gap:6px}.highlights-controls [data-play]{min-width:120px;padding-inline:12px;font-size:10px}.highlights-count{margin-left:auto;font-size:9px}.highlights-heading-row{margin-bottom:18px}}

/* Captions belong to the centered full-frame print, not the outer grid cell. */
.portfolio-page .highlights figcaption{width:100%;text-align:center;padding-inline:4px}
.highlights-count{white-space:nowrap;flex-shrink:0}
@media(max-width:350px){.highlights-controls{gap:5px}.highlights-count{letter-spacing:0;margin-left:0}}

/* Let atmosphere pass behind the photographs and captions without rectangular plates. */
.portfolio-page .highlights figcaption{background:transparent!important}
@media(prefers-reduced-motion:reduce){.highlights-progress i{transform:scaleX(1)}}
.reduce-motion .highlights-progress i{transform:scaleX(1)}