.portfolio-edition[data-layout="lichtkoerper"] {
  --ed-bg:#eeeee8;
  --ed-ink:#131416;
  height:100vh;
  height:100dvh;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  overflow:hidden;
}
.portfolio-edition[data-layout="lichtkoerper"] > .portfolio-main {
  width:100%;
  max-width:none;
  min-height:0;
  margin:0;
  padding-inline:max(clamp(14px,4.6vw,92px), calc((100% - 1648px) / 2));
  overflow:auto;
  overscroll-behavior-y:contain;
}
.portfolio-edition[data-layout="lichtkoerper"] > .light-header { margin-inline:clamp(14px,4.6vw,92px); }
.top.light-header {
  --blue:#2823ce;
  --ink:#131416;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:12px 0;
  margin-bottom:8px;
  font:16px/1.45 Apercu,sans-serif;
  color:var(--ink);
}
.light-header .name { display:block; width:max-content; font-size:clamp(20px,4vw,44px); }
.light-header .name span { display:flex; gap:.03em; line-height:1; }
.light-header .name span+span { margin-top:.075em; }
.light-header .name b {
  display:inline-block;
  transform:translate(var(--land-x,0),var(--land-y,0)) rotate(var(--land-a,var(--rest-angle,3deg)));
  color:var(--land-color,currentColor);
}
.light-header .name b:nth-child(odd) { --rest-angle:-4deg; }
.light-header .name span:first-child b:is(:first-child,:last-child),
.light-header .name span:last-child b:nth-child(5) { color:var(--land-color,var(--blue)); }
.light-header .name svg { display:block; height:1em; width:var(--glyph-width); overflow:visible; }
.top.light-header nav.portfolio-categories {
  grid-column:2;
  grid-row:1;
  justify-self:stretch;
  justify-content:center;
  gap:clamp(7px,1.6vw,26px);
}
.light-header .portfolio-side {
  position:relative;
  grid-column:3;
  grid-row:1;
  flex-wrap:nowrap;
}
.light-header .portfolio-language { flex-wrap:nowrap; }
.light-header-utilities {
  position:absolute;
  inset-inline-start:100%;
  display:flex;
  align-items:center;
  gap:2px;
}
.light-header-utilities.light-stage-controls { inset-inline:auto calc(100% + 6px); }
.light-header :is(.motion-toggle,.interaction-toggle) {
  position:relative;
  display:grid;
  place-items:center;
  flex:none;
  width:40px;
  height:40px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:inherit;
}
.light-header :is(.motion-toggle,.interaction-toggle)[aria-pressed=true] { background:var(--ed-accent); color:white; }
.light-header :is(.motion-toggle,.interaction-toggle):focus-visible { outline-offset:2px; }
.light-home-link {
  position:relative;
  display:inline-grid;
  place-items:center;
  flex:none;
  width:44px;
  height:44px;
  color:inherit;
}
.light-header .light-home-link { width:40px; }
.light-home-link::before {
  position:absolute;
  inset:5px;
  border:1px solid currentColor;
  border-radius:10px;
  opacity:.24;
  content:"";
}
.light-home-link:hover,.light-home-link:focus-visible { color:var(--ed-accent,var(--blue,#2823ce)); }
.light-home-link:hover::before,.light-home-link:focus-visible::before { opacity:.68; }
@media(max-width:850px) {
  .top.light-header { grid-template-columns:minmax(0,1fr) auto; }
  .top.light-header nav.portfolio-categories { grid-column:1/-1; grid-row:2; justify-content:space-between; }
  .light-header .portfolio-categories a { display:flex; align-items:center; min-height:44px; }
  .light-header .portfolio-side { grid-column:2; }
  .light-header-utilities,.light-header-utilities.light-stage-controls {
    position:static;
    justify-content:flex-end;
    width:82px;
    height:44px;
  }
}
@media(max-width:460px) {
  .top.light-header { gap:7px; }
  .light-header .name { font-size:clamp(16px,4vw,20px); }
  .top.light-header nav.portfolio-categories { gap:5px; }
}

.portfolio-edition[data-layout="lichtkoerper"] > .light-profile-main {
  padding-block-start: clamp(6px, 1vw, 16px);
}
.light-profile-meta {
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 clamp(15px,2.5vw,34px);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.light-contact { max-width:1260px; margin:auto; }
.portfolio-edition .light-profile-layout {
  display: flow-root;
  font-size: clamp(1rem, .875rem + .55vw, 1.375rem);
}
.portfolio-edition .light-profile-layout h1 {
  margin: 0 0 clamp(12px, 2vw, 22px);
  font-size: clamp(2.125rem, 5.5vw, 4.75rem);
  line-height: .98;
  letter-spacing: -.065em;
  overflow-wrap: anywhere;
}
.portfolio-edition .light-profile-portrait {
  float: inline-start;
  width: min(58.52%, 562px);
  margin: 0 clamp(18px, 3vw, 36px) 14px 0;
  border-radius: clamp(12px, 1.6vw, 22px);
  overflow: hidden;
  background: #141322;
}
.portfolio-edition .light-profile-portrait img { display:block; width:100%; height:auto; filter:url(#light-portrait-grade); }
.portfolio-edition .light-profile-copy { line-height: 1.55; overflow-wrap: anywhere; }
.portfolio-edition .light-profile-copy p { margin-block: 0 .8em; }
@media (max-width: 720px) {
  .portfolio-edition .light-profile-portrait { float: none; width: 100%; margin: 0 0 18px; }
}
.portfolio-edition .light-profile-copy p:first-child { margin-top:0; }
.portfolio-edition .light-profile-copy p:last-child { margin-bottom:0; }
.portfolio-edition .light-portrait-filter { position:absolute; }
.portfolio-edition .light-profile-career { margin-top:clamp(32px,6vw,90px); }
.portfolio-edition .light-profile-career dl,.portfolio-edition .light-profile-career dd { margin:0; }
.portfolio-edition .light-profile-career dl > div { display:grid; grid-template-columns:minmax(90px,.28fr) minmax(0,1fr); gap:12px; padding:.65rem 0; }
.portfolio-edition .light-profile-career dl > div + div { border-top:1px solid #24203224; }
.portfolio-edition .light-profile-career dt { font-weight:700; color:var(--ed-accent); }

.light-contact {
  --light-ink:#1a1730;
  --light-line:#241b3e31;
  padding-bottom:clamp(32px,7vw,84px);
}
.light-contact-intro {
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  align-items:end;
  gap:clamp(10px,4vw,65px);
  margin-bottom:clamp(28px,5vw,66px);
}
.light-page-kicker { margin:0 0 .65rem; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.light-contact-intro h1 { margin:0; font-size:clamp(54px,11vw,166px); line-height:.81; letter-spacing:-.082em; }
.light-contact-lead { margin:0 0 .4rem; max-width:26ch; font-size:clamp(20px,2.4vw,36px); line-height:1.13; letter-spacing:-.035em; }
.light-contact-email { display:inline-flex; align-items:center; min-height:44px; max-width:100%; overflow-wrap:anywhere; text-underline-offset:.25em; }
.light-contact-email:hover { color:var(--ed-accent,var(--blue,#2823ce)); }
.light-contact-desk {
  padding:clamp(14px,3vw,40px);
  border-radius:clamp(13px,2vw,24px);
  color:#f8f4ff;
  background:radial-gradient(ellipse at 16% 80%,#2d2455 0,#1b192d 62%,#171626 100%);
}
.light-contact-desk h2 { margin:0 0 clamp(12px,2vw,24px); font-size:clamp(20px,3vw,38px); line-height:1.1; letter-spacing:-.044em; }
.light-contact-desk fieldset { min-inline-size:0; margin:0; padding:0; border:0; }
.light-brief-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(4px,1vw,10px); }
.light-page-visually-hidden,.light-brief-options > input {
  position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
.light-brief-options > label {
  display:flex;
  align-items:center;
  gap:clamp(5px,1.2vw,16px);
  min-height:46px;
  padding:clamp(7px,1.2vw,14px);
  border:1px solid #e5dbff50;
  border-radius:10px;
  cursor:pointer;
  font-size:clamp(11px,1.3vw,16px);
  font-weight:700;
  line-height:1.12;
  hyphens:auto;
}
.light-brief-options > label span { font-size:.78em; opacity:.74; }
.light-brief-options > label:hover { border-color:#e5dbff; }
.light-brief-options > input:checked + label { background:#ded5ff; border-color:#ded5ff; color:var(--light-ink); }
.light-brief-options > input:focus-visible + label { outline:2px solid #fff; outline-offset:2px; }
.light-brief-panels { grid-column:1/-1; }
.light-brief {
  display:none;
  grid-template-columns:clamp(42px,12vw,150px) minmax(0,1fr);
  align-items:center;
  gap:clamp(10px,3vw,46px);
  min-height:clamp(106px,16vw,175px);
  padding-block:clamp(10px,1.8vw,25px) 0;
}
#light-brief-image:checked ~ .light-brief-panels [data-brief="image"],
#light-brief-art:checked ~ .light-brief-panels [data-brief="art"],
#light-brief-web:checked ~ .light-brief-panels [data-brief="web"] { display:grid; }
.light-brief svg { display:block; width:100%; color:#d3bfff; }
.light-brief[data-brief="art"] svg { color:#ffbbaa; }
.light-brief[data-brief="web"] svg { color:#b2e9d8; }
.light-brief p { margin:0; max-width:37ch; font-size:clamp(17px,2.3vw,34px); line-height:1.15; }
.light-brief a { display:inline-flex; align-items:center; min-height:44px; color:#f8f4ff; font-size:clamp(12px,1.3vw,16px); font-weight:700; text-decoration:underline; text-underline-offset:.23em; }
.light-contact-desk a:focus-visible { outline:2px solid #fff; }
@media(prefers-reduced-motion:no-preference){
  .light-brief svg { animation:light-brief-in .32s ease-out both; }
  @keyframes light-brief-in { from { opacity:.3; transform:translateX(-6px) rotate(-6deg); } to { opacity:1; transform:none; } }
}
.light-contact-practice,.light-contact-clients,.portfolio-edition .light-profile-career {
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);
  align-items:start;
  gap:clamp(9px,3vw,38px);
  padding-top:clamp(15px,2.2vw,29px);
  border-top:1px solid var(--light-line,#241b3e31);
}
.light-contact-practice,.light-contact-clients { margin-top:clamp(28px,6vw,78px); }
.light-contact-practice h2,.light-contact-clients h2,.portfolio-edition .light-profile-career h2 {
  margin:0;
  font-size:clamp(20px,2.45vw,36px);
  line-height:1.03;
  letter-spacing:-.045em;
}
.light-contact-practice p,.light-contact-clients p { margin:0; max-width:53ch; font-size:clamp(16px,1.65vw,24px); line-height:1.39; }
.light-contact-clients img { grid-column:1/-1; display:block; width:100%; height:auto; mix-blend-mode:multiply; }
.light-contact-clients ul {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.46rem .8rem;
  margin:0;
  padding:0;
  list-style:none;
  font-size:clamp(13px,1.25vw,16px);
}
.light-contact-clients li { overflow-wrap:anywhere; }
@media(max-width:620px){
  .light-contact-intro,.light-contact-practice,.light-contact-clients,.portfolio-edition .light-profile-career { grid-template-columns:minmax(0,1fr); }
  .light-contact-intro h1 { line-height:.94; }
  .light-contact-clients ul { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:370px){
  .light-brief-options > label span { display:none; }
  .portfolio-edition[data-layout="lichtkoerper"] .portfolio-brand { max-width:8ch; }
}

.light-contact-clients li .light-client-logo { display:block; width:auto; height:32px; max-width:120px; object-fit:contain; object-position:left center; margin:0 0 8px; }

.light-web-index,.light-web-case { max-width:1500px; margin-inline:auto; }
.light-web-kicker { margin:0 0 10px; font:700 11px/1.4 Apercu,sans-serif; letter-spacing:.12em; text-transform:uppercase; }
.light-web-index-head,.light-web-case-head { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); align-items:end; gap:clamp(16px,5vw,85px); margin-bottom:clamp(24px,4vw,58px); }
.light-web-index-head h1,.light-web-case-head h1 { margin:0; font:700 clamp(45px,7.7vw,112px)/.92 Apercu,sans-serif; letter-spacing:-.068em; overflow-wrap:anywhere; }
.light-web-index-head > p { max-width:34ch; margin:0; font-size:clamp(16px,1.55vw,24px); line-height:1.34; }
.light-web-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,48px); }
.light-web-card { display:flex; flex-direction:column; min-width:0; text-decoration:none; }
.light-web-screen[data-tone="forest"],.light-web-diagram[data-tone="forest"] { --case-field:#dce4d4; --case-ink:#273c31; --case-glow:#aabd9d; }
.light-web-screen[data-tone="workshop"],.light-web-diagram[data-tone="workshop"] { --case-field:#eee0cb; --case-ink:#63391f; --case-glow:#dfb893; }
.light-web-screen[data-tone="word"],.light-web-diagram[data-tone="word"] { --case-field:#e5e3ef; --case-ink:#313c82; --case-glow:#c3c7e5; }
.light-web-screen { --case-field:#e2e2ec; --case-ink:#353249; --case-glow:#cecbdc; display:grid; place-items:center; background:radial-gradient(ellipse at 78% 20%,var(--case-field) 20%,var(--case-glow)); border-radius:clamp(12px,1.8vw,25px); padding:clamp(14px,2.6vw,48px); }
.light-web-card .light-web-screen { aspect-ratio:1.27; }
.light-web-screen-edge { width:100%; max-width:1080px; border:1px solid rgb(21 21 24 / .19); border-radius:clamp(6px,1vw,12px); overflow:hidden; background:#f6f5f1; box-shadow:0 12px 28px rgb(30 28 33 / .17); }
.light-web-screen-bar { height:clamp(12px,1.5vw,20px); background:#eeece8; border-bottom:1px solid #d6d2cd; display:flex; align-items:center; gap:3px; padding-inline:7px; }
.light-web-screen-bar span { width:4px; height:4px; border-radius:50%; background:#aaa69f; }
.light-web-screen img { display:block; width:100%; height:auto; object-fit:contain; }
.light-web-image-empty { display:block; aspect-ratio:16/10; background:#e5e3df; }
.light-web-card-meta { display:flex; justify-content:space-between; align-items:center; gap:8px; min-height:46px; margin-top:12px; border-top:1px solid #bcbbb4; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.light-web-card-meta svg { flex:none; }
.light-web-card h2 { margin:2px 0 0; font:700 clamp(23px,3vw,42px)/1.02 Apercu,sans-serif; letter-spacing:-.055em; overflow-wrap:anywhere; }
.light-web-card > p { margin:6px 0 14px; font-size:clamp(15px,1.25vw,18px); }
.light-web-card-cta { margin-top:auto; width:max-content; max-width:100%; font-size:14px; font-weight:700; text-decoration:underline; text-underline-offset:4px; }
.light-web-card:hover .light-web-card-cta,.light-web-card:focus-visible .light-web-card-cta { color:var(--ed-accent); }
.light-web-case-head { align-items:start; }
.light-web-case-head .portfolio-back { margin-bottom:clamp(16px,3vw,38px); }
.light-web-case-intro { align-self:end; max-width:52ch; }
.light-web-case-intro > p { margin:0 0 10px; }
.light-web-case-intro .light-web-statement { font-size:clamp(23px,3vw,44px); line-height:1.05; letter-spacing:-.045em; }
.light-web-credit,.light-web-access { font-size:13px; }
.light-web-links { display:flex; flex-wrap:wrap; gap:6px 14px; margin:14px 0 5px; }
.light-web-links a { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 15px; border-radius:100px; background:var(--ed-ink); color:var(--ed-bg); font-weight:700; text-decoration:none; }
.light-web-links a:hover,.light-web-links a:focus-visible { background:var(--ed-accent); }
.light-web-hero { margin:0; }
.light-web-hero .light-web-screen { padding:clamp(14px,5vw,72px); }
.light-web-hero figcaption,.light-web-gallery figcaption { margin:8px 0 0; font-size:13px; }
.light-web-diagram { display:grid; gap:20px; background:var(--case-field); color:var(--case-ink); border-radius:20px; margin:clamp(24px,5vw,72px) 0; padding:clamp(18px,4vw,52px); }
.light-web-diagram h2,.light-web-detail h2,.light-web-gallery h2 { margin:0; font-size:clamp(20px,2.7vw,36px); line-height:1.08; letter-spacing:-.045em; }
.light-web-diagram ol { display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0; list-style:none; }
.light-web-diagram li { display:flex; flex:1 1 130px; flex-direction:column; gap:4px; padding:14px 13px; background:rgb(255 255 255 / .39); border:1px solid rgb(0 0 0 / .13); border-radius:10px; }
.light-web-diagram li > span { font-size:11px; letter-spacing:.08em; }
.light-web-diagram li strong { font-size:clamp(14px,1.6vw,22px); line-height:1.12; }
.light-web-diagram li small { font-size:13px; line-height:1.35; }
.light-web-diagram[data-tone="forest"] li:last-child,.light-web-diagram[data-tone="word"] li:last-child { background:var(--case-ink); color:#fff; }
.light-web-detail { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,3vw,44px); }
.light-web-detail section,.light-web-related { padding-top:16px; border-top:1px solid #bcbbb4; }
.light-web-detail section > p:not(.light-web-kicker) { margin:10px 0 0; }
.light-web-gallery { margin-top:clamp(24px,4vw,58px); }
.light-web-gallery figure { margin:16px 0 0; }
.light-web-gallery img { display:block; width:100%; height:auto; }
.light-web-related { margin:clamp(24px,5vw,70px) 0 0; }
.light-web-related > div { display:flex; flex-wrap:wrap; gap:8px 24px; }
.light-web-related a { display:inline-flex; gap:7px; align-items:center; min-height:44px; font-weight:700; text-underline-offset:4px; }
@media(max-width:850px) {
 .light-web-index-head,.light-web-case-head { grid-template-columns:minmax(0,1fr); gap:14px; }
 .light-web-case-intro { max-width:61ch; }
 .light-web-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:560px) {
 .light-web-grid,.light-web-detail { grid-template-columns:minmax(0,1fr); }
 .light-web-grid { gap:30px; }
 .light-web-card .light-web-screen { aspect-ratio:1.42; }
 .light-web-card-meta { min-height:38px; }
 .light-web-diagram li { flex-basis:110px; }
}
.light-web-card .light-web-screen-edge { display:grid; grid-template-rows:auto minmax(0,1fr); height:100%; min-height:0; }
.light-web-card .light-web-screen img { height:100%; min-height:0; }
.light-web-case-head h1 { font-size:clamp(36px,7vw,112px); }

/* Reserve the same space for stage controls and the return link. */
@media (min-width:851px) {
  .top.light-header { padding-inline-end: 96px; }
  .light-header-utilities.light-stage-controls { inset-inline: 100% auto; }
}
.light-header-utilities { margin-inline-start: 8px; }
.light-home-link,
.light-header .light-home-link {
  display: inline-flex;
  justify-content: center;
  gap: 5px;
  width: max-content;
  min-width: 44px;
  padding-inline: 7px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.light-home-link::before { inset: 6px 0; opacity: .4; }
@media (max-width:850px) {
  .light-header-utilities,.light-header-utilities.light-stage-controls {
    width: 86px;
    margin-inline-start: 3px;
  }
}

.portfolio-stage .screening[open] .screening-close {
  visibility: visible;
  width: 50px;
  height: 50px;
  color: #131416;
  background: #eeeee8;
}
.portfolio-stage .screening-close:focus-visible { outline: 2px solid white; outline-offset: 3px; }

[data-light-film][open] summary { text-align: end; }
[data-light-film] .portfolio-play-close {
  min-height: 44px;
  background: var(--ed-ink);
  color: var(--ed-bg);
}

/* Full images on a blue field drawn from the stage's indigo lighting. */
.portfolio-edition[data-layout="lichtkoerper"] {
  --light-project-blue: #232859;
  --light-project-glow: #393f7f;
  --light-project-inset: clamp(10px, 2.6vw, 40px);
}

.portfolio-edition[data-layout="lichtkoerper"] .portfolio-project:not(.portfolio-copy) h1 {
  max-width: 19ch;
  margin-bottom: 0;
  font-size: clamp(36px, 6vw, 86px);
  line-height: 1;
}

.light-project-frame,
[data-light-film] .portfolio-film-poster,
[data-light-film] .portfolio-film,
.light-web-hero .light-web-screen {
  display: grid;
  place-items: center;
  padding: var(--light-project-inset);
  background: radial-gradient(ellipse at 58% 32%, var(--light-project-glow), var(--light-project-blue) 76%);
}

.light-project-frame + figcaption {
  margin: 8px 0 0;
  font-size: 13px;
}

[data-light-film] .portfolio-play-open {
  inset-inline-start: calc(var(--light-project-inset) + 6px);
  bottom: calc(var(--light-project-inset) + 6px);
}

[data-light-film] .portfolio-film iframe {
  display: block;
  aspect-ratio: 16 / 9;
  height: auto;
  background: #111322;
}

.light-project-frame,
[data-light-film] .portfolio-film-poster,
[data-light-film] .portfolio-film,
.light-web-hero .light-web-screen,
.light-web-card .light-web-screen {
  position: relative;
  aspect-ratio: 1;
  border-radius: 0;
}

.light-web-card .light-web-screen {
  background: radial-gradient(ellipse at 58% 32%, var(--light-project-glow), var(--light-project-blue) 76%);
}
.light-web-hero .light-web-screen-edge,
.light-web-card .light-web-screen-edge { display: contents; }
.light-web-hero .light-web-screen-bar,
.light-web-card .light-web-screen-bar { display: none; }

.light-project-frame img,
.portfolio-card .light-project-frame img,
[data-light-film] .portfolio-film-poster img,
.light-web-hero .light-web-screen img,
.light-web-card .light-web-screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  padding: var(--light-project-inset);
  border-radius: 0;
  background: transparent;
  object-fit: contain;
}
.portfolio-card .light-project-frame img,
.light-web-card .light-web-screen img { padding: clamp(7px, 1.5vw, 22px); }
.light-project-frame .portfolio-no-image { width: 100%; background: transparent; }

.portfolio-edition[data-layout="lichtkoerper"] .portfolio-gallery,
.light-web-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.65vw, 26px);
  align-items: start;
}

.light-web-gallery h2 { grid-column: 1 / -1; }
.light-web-gallery figure { margin: 0; }

.portfolio-gallery .light-project-frame img,
.light-web-gallery .light-project-frame img { padding: clamp(7px, 1.5vw, 22px); }

@media (max-width: 760px) {
  .portfolio-edition[data-layout="lichtkoerper"] .portfolio-gallery,
  .light-web-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 440px) {
  .portfolio-edition[data-layout="lichtkoerper"] .portfolio-gallery,
  .light-web-gallery { grid-template-columns: minmax(0, 1fr); }
}

.light-photo-open {
  width: 100%;
  border: 0;
  cursor: zoom-in;
}

.light-photo-viewer {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #101126f2;
}

.light-photo-viewer::backdrop { background: #101126; }

.light-photo-close {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: clamp(12px, 3vw, 48px);
  border: 0;
  background: transparent;
  cursor: zoom-out;
}

.light-photo-close img {
  display: block;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.light-photo-close span {
  position: absolute;
  inset-block-start: max(12px, env(safe-area-inset-top));
  inset-inline-end: max(12px, env(safe-area-inset-right));
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: #101126;
  color: white;
  font: 28px/1 Apercu, sans-serif;
}
.light-photo-close:focus-visible { outline-offset: -5px; }