/* One horizontal layout shared by desktop and mobile. */
:root {
  --font-site:"Gotham","Arial",sans-serif;
  --lightbox-surface:#dce0dc;
  --lightbox-background:radial-gradient(ellipse at 50% 44%,rgba(255,255,255,.62) 0%,rgba(248,253,253,.28) 48%,transparent 85%),var(--lightbox-surface);
  --lightbox-ink:#293846;
}

/* v2: separate the facing lips, then slide the pouch off its folder. */
.intro {
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:transparent;
  touch-action:none;
  user-select:none;
}
.intro::before { content:""; position:absolute; inset:0; z-index:0; background:var(--lightbox-background); transition:opacity 1.05s .15s ease-out; }
.intro.is-unpacking::before { opacity:0; }
.intro-envelope {
  position:relative;
  width:min(600px,92vw,72vh);
  aspect-ratio: .77;
  cursor:pointer;
  color:#141414;
  --parcel-sealed-texture:url("../../assets/textures/intro-bubble-pouch-v2.webp");
  --parcel-texture:url("../../assets/textures/intro-bubble-pouch-v2-seamless.webp");
}
.parcel-body {
  position:absolute;
  inset:0;
  z-index:2;
  background:var(--parcel-texture) center / 100% 100% no-repeat;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.45));
  clip-path:inset(17.2% 0 0);
  transform-origin:center bottom;
}
.parcel-body::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.25;
  mix-blend-mode:soft-light;
  mask-image:var(--parcel-texture);
  mask-size:100% 100%;
  background:
    radial-gradient(ellipse at 9% 47%,rgba(20,26,23,.6),transparent 9%),
    radial-gradient(ellipse at 90% 79%,rgba(255,255,255,.9),transparent 12%),
    radial-gradient(ellipse at 15% 88%,rgba(20,26,23,.7),transparent 10%),
    repeating-linear-gradient(116deg,transparent 0 73px,rgba(255,255,255,.7) 73px 74px,transparent 74px 147px,rgba(22,28,24,.5) 147px 148px,transparent 148px 211px);
}
.parcel-top {
  position:absolute;
  top:7.5%;
  left:7.5%;
  width:85%;
  height:9.7%;
  z-index:2;
  transform-origin:center top;
  transform-style:preserve-3d;
}
.parcel-top::before,.parcel-top-back,.parcel-top-back span {
  content:"";
  position:absolute;
  inset:0;
  backface-visibility:hidden;
}
.parcel-top::before,.parcel-top-back span { background:var(--parcel-sealed-texture) center 8.306% / 117.647% 1030.928% no-repeat; }
.parcel-top-back { transform:rotateX(180deg); }
.parcel-top-back span { transform:scaleY(-1); backface-visibility:visible; }
.parcel-rear {
  position:absolute;
  inset:0;
  z-index:0;
  perspective:1000px;
  background:var(--parcel-texture) center / 100% 100% no-repeat;
}
.intro.is-opening .intro-envelope { pointer-events:none; }
.intro-envelope { z-index:2; }
.intro .intro-folder {
  position:fixed;
  z-index:1;
  transform-origin:center;
  pointer-events:none;
}
.parcel-label,.parcel-barcode-label {
  position:absolute;
  background:rgba(250,251,249,.92);
  border-radius:5px 7px 4px 6px;
  box-shadow:0 1px 1px rgba(20,24,26,.15),inset 0 0 0 1px rgba(255,255,255,.18);
  font-size:clamp(7px,.9vw,10px);
}
.parcel-label::after,.parcel-barcode-label::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:url("../../assets/textures/printed-paper.webp") center / 100% 100%;
  opacity:.07;
  mix-blend-mode:multiply;
}
.parcel-label { top:22%; left:19%; width:59%; padding:3%; transform:rotate(.5deg); }
.parcel-label header { display:flex; justify-content:space-between; gap:7px; font-size:1.1em; }
.parcel-label header strong { font-size:1.4em; line-height:1.15; }
.parcel-label small { font-size:.65em; }
.parcel-label p { margin:0; border-top:1px solid #555; padding:3% 0; line-height:1.45; }
.parcel-label .parcel-route { text-align:right; margin-top:4%; font-size:.7em; }
.parcel-label .parcel-recipient { padding:5% 0; }
.parcel-label .parcel-site { font-size:.8em; }
.parcel-label .parcel-reference { padding-bottom:0; font-size:.65em; }
.waybill-routing { display:grid; grid-template-columns:72% 28%; border:1px solid #777; }
.waybill-routing > div { padding:4%; }
.waybill-destination { border-left:1px solid #777; text-align:center; font-size:.7em; }
.waybill-destination strong { display:block; font-size:2.8em; line-height:1.1; }
.waybill-footer { padding:4% 2%; border:1px solid #777; border-top:0; font-size:.6em; line-height:1.4; }
.parcel-qr-sticker {
  position:absolute;
  right:24%;
  bottom:13.5%;
  width:24%;
  z-index:5;
  padding:0;
  mix-blend-mode:multiply;
  transform:rotate(-12deg);
}
.parcel-qr { display:block; width:100%; height:auto; opacity:.94; }
.parcel-recycle { position:absolute; right:15%; top:17%; font-size:clamp(24px,4vw,42px); }
.parcel-tag { position:absolute; left:19%; bottom:34%; padding:.6%; background:linear-gradient(rgba(0,200,255,.86),rgba(0,200,255,.86)),url("../../assets/textures/printed-paper.webp") center / 100% 100%; box-shadow:0 1px 2px rgba(20,20,15,.28),inset 0 0 3px rgba(0,47,75,.18); font-size:clamp(7px,.7vw,8px); line-height:1.2; font-weight:700; transform:rotate(-2deg); }
.parcel-tag small { display:block; margin-top:4px; font-size:.75em; letter-spacing:.08em; }
.parcel-barcode-label { left:18%; bottom:15%; width:40%; padding:1.5%; font-size:clamp(6px,.7vw,9px); transform:rotate(-.8deg); }
.parcel-courier { display:flex; align-items:center; gap:7px; margin-bottom:4%; }
.parcel-courier strong { color:#d8202c; font-size:1.8em; font-style:italic; letter-spacing:-.08em; line-height:1; }
.parcel-courier span { font-size:.85em; font-weight:700; line-height:1.2; }
.parcel-courier small { display:block; letter-spacing:.1em; }
.parcel-barcode-label .parcel-courier strong { display:grid; place-items:center; width:1.35em; height:1.35em; border:2px solid #222; border-radius:50%; color:#222; font-size:1.8em; }
.parcel-barcode-label header { display:flex; align-items:center; justify-content:space-between; padding-bottom:3%; }
.parcel-barcode-label small { font-size:.6em; }
.parcel-barcode-label .parcel-courier { margin:0; gap:4px; }
.parcel-barcode { display:block; width:100%; height:auto; margin:4% 0 2%; }
.parcel-tracking { display:block; text-align:center; font-size:.7em; letter-spacing:.18em; }
.intro-envelope:focus-visible { outline:1px solid #64798a; outline-offset:6px; }
.parcel-hint { position:absolute; top:100%; width:100%; text-align:center; color:#909090; font-size:9px; letter-spacing:1px; }
@media (prefers-reduced-motion:reduce) {
  .intro::before { transition:none; }
}

* {
  box-sizing:border-box;
}

html,body {
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:var(--lightbox-surface);
  border-radius:0;
  color:var(--lightbox-ink);
  font-family:var(--font-site);
}

body {
  background:var(--lightbox-background);
}



.scene {
  position:relative;
  z-index:var(--stack-layer,1);
  flex:0 0 300px;
  width:300px;
  height:380px;
  min-height:380px;
  margin:0;
  transform-style:preserve-3d;
  cursor:pointer;


  scroll-snap-align:center;
  scroll-snap-stop:normal;

}

/* Keep the snap target fixed; only its inner artwork moves. */
.folder-visual {
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  filter:none;
  transform:translateX(var(--focus-x,0px)) scale(var(--focus-scale,.72)) translateY(var(--focus-y,0px)) rotate(calc(var(--folder-angle,0deg) + var(--sway-z,0deg))) rotateX(var(--sway-x,0deg)) rotateY(var(--sway-y,0deg));
  transform-origin:center center;
  opacity:1;
}
.scene-about .folder-visual { filter:none; }

.cover,.back {
  position:absolute;
  inset:0;
  border-radius:10px;
  background:var(--paper-surface);
  background-size:300px 380px;
  transition:transform .8s cubic-bezier(.22,.75,.18,1);
  filter:brightness(var(--focus-brightness,1));
}

.back {
  z-index:1;
  box-shadow:2px 3px 6px rgba(35,42,40,.18);
}

.back:after {
  content:"";
  position:absolute;
  right:-20px;
  top:18px;
  width:32px;
  height:120px;
  border-radius:0 7px 7px 0;
  background:var(--paper-surface);
  background-size:300px 380px;
  background-position:right -18px;
}

.cover {
  z-index:8;
  transform-origin:left center;
  backface-visibility:hidden;
  box-shadow:inset 0 0 0 1px rgba(245,248,243,.20),1px 2px 5px rgba(35,42,40,.18);
}

.title {
  position:absolute;
  left:23px;
  right:20px;
  bottom:40px;
  font-size:14px;
  letter-spacing:.8px;
}

.photos {
  position:absolute;
  z-index:4;
  left:18px;
  top:18px;
  width:270px;
  height:345px;
  transform-origin:center;

  pointer-events:none;
  background:transparent;
}

.photo {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  background:transparent;
  border:0;
  opacity:0;
  visibility:hidden;
  transform:translateY(var(--photo-layout-y,0px)) rotateX(0) rotate(var(--photo-angle,0deg)) scale(var(--fitted-orientation-scale,var(--orientation-scale,1)));
  transform-origin:center bottom;
  transition:opacity .12s linear,transform .58s cubic-bezier(.2,.78,.18,1);
  -webkit-user-drag:none;
}

.photo-white-background {
  background:#fff;
}

.photo.active {
  opacity:1;
  visibility:visible;
  z-index:2;
}

.photo.incoming {
  opacity:1;
  visibility:visible;
  transform:translateY(calc(var(--photo-entry-y,110px) + var(--photo-layout-y,0px))) rotateX(-16deg) rotate(var(--photo-angle,0deg)) scale(calc(var(--fitted-orientation-scale,var(--orientation-scale,1)) * .96));
  z-index:4;
}

.photo.incoming.reveal {
  transform:translateY(var(--photo-layout-y,0px)) rotateX(0) rotate(var(--photo-angle,0deg)) scale(var(--fitted-orientation-scale,var(--orientation-scale,1)));
}

.photo.covered {
  opacity:1;
  visibility:visible;
  transform:translateY(calc(7px + var(--photo-layout-y,0px))) rotate(var(--photo-angle,0deg)) scale(calc(var(--fitted-orientation-scale,var(--orientation-scale,1)) * .992));
}


.scene.open .cover {
  transform:translateX(-25px) rotateY(-62deg);
}

/* Layer opened contents above the cover, including its tilted outline. */
.scene.open .folder-visual,.scene.closing .folder-visual {
  transform-style:flat;
}

.scene.open .back {
  transform:rotate(-1.5deg);
}

.scene:not(.open):not(.closing) .photos,
.scene:not(.open):not(.closing) .photo {
  visibility:hidden;
}

.scene.open .photos {
  visibility:visible;
  transform:translate(var(--photo-x,34px),-20px) scale(var(--photo-scale,1.5));
  animation:paper-extract .8s ease-in-out both;
  z-index:20;

  pointer-events:auto;
}

.scene.closing .photos {
  visibility:visible;
  pointer-events:none;

  animation:paper-extract .8s ease-in-out reverse both;
}

@keyframes paper-extract {
  0% { opacity:0; z-index:3; transform:translate(0,18px) scale(.85); }
  12% { opacity:1; z-index:3; transform:translate(12px,18px) scale(.85); }
  48% { opacity:1; z-index:20; transform:translate(var(--paper-extract-x,min(140px,20vw)),5px) scale(.9); }
  65% { opacity:1; z-index:20; transform:translate(var(--paper-extract-x,min(140px,20vw)),-26px) scale(1); }
  100% { opacity:1; z-index:20; transform:translate(var(--photo-x,34px),-20px) scale(var(--photo-scale,1.5)); }
}

@media (prefers-reduced-motion:reduce) {
  .scene.open .photos { animation:none; }
  .scene.closing .photos { animation:none; visibility:hidden; }
}


.scene.busy {
  pointer-events:none;
}

.scene.open,.scene.busy {
  z-index:30;
}



html,body,.scene,.scene *,img {
  -webkit-tap-highlight-color:transparent;
}

.scene,img,[role="button"] {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}

.scene:focus,.scene:focus-visible,img:focus,img:focus-visible,[role="button"]:focus,[role="button"]:focus-visible {
  outline:none;
  box-shadow:none;
}

.stage {
  border-radius:0;
  display:flex;
  flex-flow:row nowrap;
  align-items:center;
  justify-content:flex-start;
  width:100vw;
  height:100vh;
  height:100svh;
  padding:0 calc(50vw - 150px);
  gap:clamp(44.8px,7vw,126px);
  perspective:1300px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  overscroll-behavior-y:none;
  touch-action:pan-x;
  scrollbar-width:none;
}

.stage::-webkit-scrollbar {
  display:none;
}

@media (hover: hover) and (pointer: fine) {
  .scene:not(.open):hover .cover { filter: brightness(1.04); }
}


.identity,.beijing-clock {
  color:var(--lightbox-ink);
  position:fixed;
  top:28px;
  z-index:50;
  font-size:clamp(12px,1vw,14px);
  letter-spacing:.8px;
  pointer-events:none;
  line-height:1.5;
}

.identity { left:clamp(20px,3vw,44px); }

.beijing-clock {
  right:clamp(20px,3vw,44px);
  font-variant-numeric:tabular-nums;
  text-align:right;
}

@media (max-width: 680px) {
  .stage { --paper-extract-x:min(24px,4vw); --photo-entry-y:40px; }
  .beijing-clock { width:10ch; }
  .identity { max-width:calc(100% - 10ch - 60px); }
}

.project-year {
  position:absolute;
  bottom:21px;
  left:23px;
  z-index:1;
  font-size:12px;
  letter-spacing:1px;
}


.stage { cursor:grab; }
.stage.is-scrolling { scroll-snap-type:none; }
.stage.is-dragging,
.stage.is-dragging .scene { cursor:grabbing; }

/* Shared photographed kraft material on the cover, back, and tab. */
.scene {
  --paper-surface:url('../../assets/textures/kraft-aged.png');
}

/* Fine dark upper rim and a warm lower rim make the lettering read as recessed paper. */
.scene:not(.scene-about) .title,
.scene:not(.scene-about) .project-year {
  color:#392619;
  background-image:linear-gradient(rgba(47,29,16,.85),rgba(67,42,23,.88)),var(--paper-surface);
  background-size:100% 100%,300px 380px;
  background-blend-mode:multiply;
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:-.35px -.65px .35px rgba(24,13,5,.68),
    .35px .7px .4px rgba(239,207,151,.6),
    0 1.2px .8px rgba(221,184,126,.2);
}

.title { z-index:1; }

/* Each folder carries its own faint wear, below the live typography. */
.cover::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:var(--wear-pattern) center / 100% 100% no-repeat;
  pointer-events:none;
}

.scene[data-project="sudo-r1"] {
  --folder-angle:.9deg;
  --wear-pattern:url("../../assets/textures/wear-leapx-ar.svg");
}

.scene[data-project="galbot-s1"] {
  --folder-angle:-.9deg;
  --wear-pattern:none;
}

.scene[data-project="surgical-robot"] {
  --folder-angle:-1.4deg;
  --wear-pattern:url("../../assets/textures/wear-surgical-robot.svg");
}

.scene[data-project="pixboom"] {
  --folder-angle:1.1deg;
  --wear-pattern:url("../../assets/textures/wear-pixboom.svg");
}

.scene[data-project="poincare"] {
  --folder-angle:-0.8deg;
  --wear-pattern:url("../../assets/textures/wear-poincare.svg");
}

.scene[data-project="galois"] {
  --folder-angle:1.7deg;
  --wear-pattern:url("../../assets/textures/wear-galois.svg");
}

.scene[data-project="leapx-ar"] {
  --folder-angle:-1.2deg;
  --wear-pattern:url("../../assets/textures/wear-leapx-ar.svg");
}

.scene[data-project="narwal"] {
  --folder-angle:0.7deg;
  --wear-pattern:url("../../assets/textures/wear-narwal.svg");
}

.scene[data-project="about"] {
  --paper-surface:none;
  --folder-angle:-0.5deg;
  --wear-pattern:none;
  filter:none;
}

.scene-about .cover,.scene-about .back {
  background:transparent;
  border:1px solid #64798a;
  border-radius:8px;
  box-shadow:none;
}

.scene-about .back::after {
  background:var(--lightbox-surface);
  border:1px solid #64798a;
  border-left:0;
  box-sizing:border-box;
}

.scene-about .cover::after {
  display:none;
}

.previous-photo-button {
  position:fixed;
  left:50%;
  bottom:82px;
  transform:translateX(-50%);
  z-index:60;
  padding:12px 18px;
  border:0;
  background:transparent;
  color:var(--lightbox-ink);
  font:12px var(--font-site);
  letter-spacing:.5px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.previous-photo-button[hidden] { display:none; }
.folder-counter {
  position:fixed;
  left:50%;
  bottom:28px;
  transform:translateX(-50%);
  color:#667785;
  font-size:11px;
  letter-spacing:1px;
  font-variant-numeric:tabular-nums;
  pointer-events:none;
}
.folder-counter[hidden] { display:none; }
.copyright {
  position:fixed;
  bottom:9px;
  left:0;
  right:0;
  padding:0 16px;
  text-align:center;
  color:#74808b;
  font-size:9px;
  letter-spacing:.2px;
  pointer-events:none;
  z-index:50;
}
.previous-photo-button:disabled { cursor:default; }
.previous-photo-button:focus-visible { outline:1px solid #777; outline-offset:2px; }

/* While viewing a folder, custom gestures wait for closing before moving. */
.stage.has-open-folder { touch-action:none; }
.scene:not(.is-center) { cursor:pointer; }


.scene-about .title {
  color:var(--lightbox-ink);
  text-shadow:none;
}

/* Offset only the first folder slightly left of the viewport center. */
.scene:first-child { scroll-margin-right:calc(clamp(24px,5vw,64px) * 2); }

/* Live printed text keeps every description editable and uses the site font. */
.note-page {
  inset:auto;
  left:20px;
  top:0;
  width:230px;
  height:325.3px;
  padding:43px 18px 14px;
  overflow:hidden;
  color:#25251f;
  font-family:var(--font-site);
  font-size:5.8px;
  line-height:1.55;
  text-align:left;
  background-color:#f0eadb;
  background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 9.85px,rgba(94,145,177,.23) 10px,transparent 10.25px),radial-gradient(ellipse at 0 0,rgba(142,101,51,.14),transparent 30%),radial-gradient(ellipse at 100% 100%,rgba(142,101,51,.1),transparent 35%),url("../../assets/textures/printed-paper.webp");
  background-size:auto,auto,auto,100% 100%;
  box-shadow:inset 0 0 12px rgba(125,89,43,.12);
  border-radius:1px 2px 3px 1px;
}
.note-page::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(0deg,transparent 30%,rgba(114,92,59,.12) 30.2%,rgba(255,255,255,.65) 30.6%,transparent 31%);
}
.note-page[data-paper="1"]::after { background:linear-gradient(90deg,transparent 67%,rgba(114,92,59,.12) 67.3%,rgba(255,255,255,.6) 67.7%,transparent 68%); }
.note-page[data-paper="2"]::after { background:linear-gradient(0deg,transparent 23%,rgba(114,92,59,.12) 23.3%,rgba(255,255,255,.6) 23.8%,transparent 24%,transparent 72%,rgba(114,92,59,.1) 72.3%,transparent 73%); }
.note-page[data-paper="3"]::after { background:linear-gradient(35deg,transparent 12%,rgba(114,92,59,.12) 12.3%,rgba(255,255,255,.6) 12.8%,transparent 13%); }
.note-page[data-paper="4"]::after { background:linear-gradient(0deg,transparent 48%,rgba(114,92,59,.12) 48.3%,rgba(255,255,255,.6) 48.8%,transparent 49%); }
.note-page[data-paper="5"]::after { background:linear-gradient(90deg,transparent 49%,rgba(114,92,59,.12) 49.3%,rgba(255,255,255,.6) 49.8%,transparent 50%); }
.note-page[data-paper="6"]::after { background:linear-gradient(145deg,transparent 90%,rgba(114,92,59,.12) 90.3%,rgba(255,255,255,.6) 90.8%,transparent 91%); }
.note-page[data-paper="7"]::after { background:linear-gradient(0deg,transparent 69%,rgba(114,92,59,.12) 69.3%,rgba(255,255,255,.6) 69.8%,transparent 70%); }
.note-page h2 { margin:0 0 9px; font-size:7.6px; line-height:1.3; font-weight:700; letter-spacing:.12px; }
.note-page p { margin:0 0 9px; }
.note-page h3 { margin:0 0 4px; font-size:7px; line-height:1.4; font-weight:700; }
.note-credits { margin-top:14px; }
.note-credits p { margin-bottom:12px; }
.note-about {
  padding:25px 18px 12px;
  font-size:5.8px;
  line-height:1.55;
  background-color:#fafaf6;
  background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 9.85px,rgba(94,145,177,.18) 10px,transparent 10.25px),linear-gradient(rgba(250,250,247,.82),rgba(250,250,247,.82)),url("../../assets/textures/printed-paper.webp");
  background-size:auto,auto,100% 100%;
  box-shadow:inset 0 0 3px rgba(110,115,108,.06);
}
.note-about[data-paper]::after {
  background:linear-gradient(0deg,transparent 69%,rgba(105,110,104,.035) 69.3%,rgba(255,255,255,.25) 69.8%,transparent 70%);
}
.note-about h2 { font-size:11px; margin-bottom:12px; padding-right:52px; }
.note-about h3 { margin:6px 0 3px; }
.note-about p { margin-bottom:4px; }
.note-about .note-bio { margin-top:20px; margin-bottom:10px; }
.note-portrait { position:absolute; right:12px; top:5px; width:51px; height:51px; object-fit:contain; border:3px solid #faf9f4; transform:rotate(4deg); box-shadow:1px 2px 3px rgba(70,52,28,.2); }
.note-paperclip { position:absolute; z-index:2; top:-3px; right:15px; width:5px; height:18px; border:1px solid #92938f; border-radius:4px; transform:rotate(9deg); box-shadow:1px 1px 1px rgba(0,0,0,.2),inset 1px 0 #e3e3df; }

/* Cache moving layers; shadows belong to individual sheets, not the whole pile. */
.stage.is-scrolling .folder-visual,.scene.open.busy .photos,.scene.closing .photos,.photo.incoming { will-change:transform; }
.scene:is(.open,.closing) .photo:is(.active,.covered,.incoming) { filter:drop-shadow(2px 3px 3px rgba(35,42,40,.18)); }
.intro.is-opening .parcel-body,.intro.is-opening .parcel-rear,.intro.is-opening .intro-folder { will-change:transform; }


button.identity { pointer-events:auto; padding:0; border:0; background:none; color:var(--lightbox-ink); font-family:var(--font-site); text-align:left; cursor:pointer; }
button.identity:focus-visible { outline:1px solid currentColor; outline-offset:5px; }

/* Mobile reference: centered compact folder, smaller neighbors at the edges. */
@media (max-width:680px) {
  .scene:first-child { scroll-margin-right:0; }
}

/* Match the mobile references: wider landscape sheets raised above centered portraits. */
@media (max-width:680px) {
  .photo.is-landscape { --fitted-orientation-scale:1.32; --photo-layout-y:var(--landscape-lift,0px); }
}