@property --work-caption-start {
  syntax:"<color>"; inherits:true; initial-value:#1688c7;
}
@property --work-caption-end {
  syntax:"<color>"; inherits:true; initial-value:#4b62d8;
}
.gallery-panel-preview {
  max-width:1600px;
  width:calc(100% - clamp(10px,2.2vw,32px)*2);
  margin:70px auto 0;
  scroll-margin-top:105px;
}
.gallery-panel-preview .gallery-option { width:100%; margin:0; }
.gallery-panel-switch { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 13px; }
.gallery-panel-switch a {
  padding:10px 17px; border:1px solid #e3e8ee; border-radius:13px;
  color:#586674; background:white; font-size:13px; font-weight:600; text-decoration:none;
}
.gallery-panel-switch a[aria-current] { color:white; background:#1f2936; border-color:#1f2936; }
.gallery-panel-note { margin:0 0 22px; color:#77828d; font-size:13px; line-height:1.6; }
.gallery-option.gallery-panel {
  box-sizing:border-box; padding:15px; border-radius:38px;
  background:#eef3f7; color:#1f2936;
}
.gallery-panel .accordion-heading {
  display:flex; justify-content:center; align-items:center; gap:20px;
  min-height:88px; padding:10px 17px 25px; margin:0;
  background:none; border-radius:0;
}
.gallery-panel .accordion-heading h2 { color:inherit; font-size:clamp(24px,2.4vw,36px); }
.gallery-panel .accordion-stage { overflow:visible; height:clamp(320px,34vw,530px); }
.gallery-panel[data-variant="accordion"] .gallery-slide {
  border-radius:24px;
  box-shadow:0 3px 5px #182d3b06,0 9px 16px -8px #182d3b24;
}
.gallery-panel .accordion-toolbar { min-height:56px; margin-top:17px; padding:0 13px 2px; }
.gallery-panel .accordion-choices button { background:#ffffff85; }
.gallery-panel .accordion-choices button[aria-current] { background:#1f2936; color:white; }
.gallery-panel .work-control { background:#ffffffb3; }
.gallery-panel .gallery-play { margin-right:0; }
.gallery-panel .work-controls { gap:6px; }
.gallery-panel .gallery-caption h3 { font-size:14px; }

/* Selected light treatment: wider breathing room and a faint upper edge. */
.gallery-option.gallery-panel[data-panel="soft"] { padding:30px; }
.gallery-panel[data-panel="soft"] .accordion-heading { min-height:0; padding:8px 0 16px; }
.gallery-panel[data-panel="soft"] .gallery-slide {
  box-shadow:0 -3px 10px -4px #182d3b14,0 3px 5px #182d3b07,0 9px 16px -8px #182d3b26;
}
.gallery-panel[data-panel="soft"] .accordion-toolbar {
  display:flex; justify-content:space-between; gap:24px; min-height:44px;
  margin:0 0 18px; padding:0;
}
.gallery-panel[data-panel="soft"] .gallery-caption { min-width:0; margin:0 auto 0 0; }
.gallery-panel[data-panel="soft"] .gallery-caption h3 {
  position:relative; isolation:isolate; line-height:1.5; overflow-wrap:anywhere;
  transition:--work-caption-start 480ms ease,--work-caption-end 480ms ease;
}
.gallery-panel[data-panel="soft"] .gallery-caption h3::before {
  content:""; position:absolute; inset:-7px -12px; z-index:-1; pointer-events:none;
  border:2px solid transparent; border-radius:12px;
  background:linear-gradient(#eef3f7,#eef3f7) padding-box,
    linear-gradient(135deg,var(--work-caption-start,#1688c7),var(--work-caption-end,#4b62d8)) border-box;
}
.gallery-panel[data-panel="soft"] .work-controls { display:flex; flex:none; gap:3px; }
.gallery-panel[data-panel="soft"] .work-control {
  flex:0 0 44px; width:44px; height:44px; background:transparent;
  border:0; border-radius:14px; color:#304252;
}
.gallery-panel[data-panel="soft"] .work-control svg { width:21px; height:21px; }
@media(min-width:901px) {
  .gallery-panel[data-panel="soft"] .accordion-toolbar { margin-bottom:15.3px; }
  .gallery-panel[data-panel="soft"] .gallery-caption {
    --caption-inset:24px;
    max-width:calc(100% - var(--active-photo-x,0px) - var(--caption-inset) - 115px);
    transform:translate3d(calc(var(--active-photo-x,0px) + var(--caption-inset)),0,0);
    transition:transform 820ms var(--accordion-ease),max-width 820ms var(--accordion-ease);
  }
  .gallery-panel[data-panel="soft"] .gallery-caption h3 { line-height:1.4; }
  .gallery-panel[data-panel="soft"].is-resizing .gallery-caption { transition:none; }
}
@media(hover:hover) and (pointer:fine) {
  .gallery-panel[data-panel="soft"] .work-control:hover { background:#e2eaf1; }
}

/* An album: quiet paper, a left-aligned title and controls on the top edge. */
.gallery-panel[data-panel="paper"] {
  background:#f5f2ee; border-radius:30px;
  box-shadow:inset 0 0 0 1px #d8cfc42e;
}
[data-panel="paper"] .accordion-heading { justify-content:space-between; padding:9px 15px 23px; }
[data-panel="paper"] .accordion-heading h2 { text-transform:none; font-weight:600; letter-spacing:-.03em; }
.gallery-panel[data-panel="paper"] .gallery-slide { border-radius:19px; box-shadow:0 10px 17px -10px #5f4a343d,0 2px 4px #5f4a3407; }
[data-panel="paper"] .accordion-toolbar { justify-content:space-between; }
[data-panel="paper"] .accordion-toolbar .gallery-caption { order:-1; }
[data-panel="paper"] .accordion-choices button { background:transparent; color:#8b8278; }
[data-panel="paper"] .accordion-choices button[aria-current] { background:white; color:#1f2936; box-shadow:0 2px 5px #5f4a340d; }
[data-panel="paper"] .work-control { background:white; }

/* A graphite frame gives the pale photographs a continuous, gallery-like surround. */
.gallery-panel[data-panel="graphite"] { background:#26323e; color:#f3f6f9; }
[data-panel="graphite"] .accordion-heading h2 { font-weight:600; text-transform:none; letter-spacing:-.025em; }
.gallery-panel[data-panel="graphite"] .gallery-slide { box-shadow:0 9px 17px -8px #0005,0 2px 4px #0002; }
[data-panel="graphite"] .accordion-choices button { background:#ffffff09; color:#b8c2cc; }
[data-panel="graphite"] .accordion-choices button[aria-current] { background:#edf3f8; color:#26323e; }
[data-panel="graphite"] .work-control { background:#ffffff0d; color:#f3f6f9; }
[data-panel="graphite"] .gallery-caption { color:#e3e9ef; }

@media(hover:hover) and (pointer:fine) {
  .gallery-panel-switch a:not([aria-current]):hover { background:#f2f5f8; color:#1f2936; }
  [data-panel="graphite"] .work-control:hover { background:#ffffff20; }
}
@media(max-width:900px) {
  .gallery-panel-preview { margin-top:46px; scroll-margin-top:110px; }
  .gallery-panel-switch { gap:5px; }
  .gallery-panel-switch a { padding:9px 11px; font-size:12px; }
  .gallery-option.gallery-panel { border-radius:30px; }
  .gallery-panel .accordion-heading { min-height:75px; padding:8px 5px 23px; }
  .gallery-panel .accordion-heading h2 { font-size:clamp(22px,4.2vw,32px); }
  .gallery-panel .accordion-stage { height:clamp(680px,130vw,840px); }
  .gallery-panel[data-variant="accordion"] .gallery-slide { border-radius:14px; }
  .gallery-panel[data-variant="accordion"] .gallery-slide[data-active] { border-radius:20px; }
  .gallery-panel .accordion-toolbar { padding:0 2px 3px; gap:15px 7px; }
  .gallery-panel .accordion-choices { gap:3px; }
  .gallery-panel .accordion-choices button { width:30px; height:38px; }
  .gallery-panel .work-controls { gap:2px; }
  .gallery-panel .gallery-caption h3 { font-size:13px; line-height:1.5; }
  [data-panel="paper"] .accordion-heading { padding-right:2px; padding-left:2px; }
  [data-panel="paper"] .accordion-heading h2 { max-width:55%; text-align:left; }
  [data-panel="paper"] .accordion-heading .work-control { width:31px; height:38px; }
  [data-panel="paper"] .accordion-toolbar .gallery-caption { grid-column:1/-1; justify-content:center; margin:0; }
}
@media(max-width:350px) {
  .gallery-panel-switch { gap:5px; }
  .gallery-panel-switch a { padding:9px 11px; font-size:12px; }
  .gallery-panel .accordion-choices { gap:2px; }
  .gallery-panel .accordion-choices button { width:27px; }
  .gallery-panel .accordion-toolbar .work-control { width:29px; }
}