/* ══════════════════════════════════════════════════════════════════════════
   Jorge Simão Photography / Simon Says Studio

   A portfolio, not a website with sections. There is no menu — the work is the
   navigation. The type comes from the existing studio logotype (Montserrat:
   JORGE SIMÃO light and open over PHOTOGRAPHY extrabold and tight), so the
   personal mark and the studio mark read as one brand.

   Monochrome throughout — cream, white, warm black. The single colour is the
   chinagraph mark, the grease-pencil ellipse an editor draws on a contact
   sheet to select a frame. Twenty-two years at the Expresso earned it.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --cream:  #EFECE4;
  --white:  #FFFFFF;
  --ink:    #0D0D0D;
  --ash:    #171717;
  --mark:   #C8471F;

  /* One family for the whole site. Weight and tracking do the work that a
     second and third typeface used to do. */
  --brand: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --body:  var(--brand);
  --mono:  var(--brand);

  --gut: clamp(1.25rem, 4vw, 5rem);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --swift: cubic-bezier(.16, 1, .3, 1);

  --bg:   var(--cream);
  --fg:   var(--ink);
  --dim:  #6E6A62;
  --line: rgba(13, 13, 13, .16);
  --sink: rgba(13, 13, 13, .05);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  color-scheme: light;
  -webkit-tap-highlight-color: rgba(200, 71, 31, .25);
}

button, a, summary { touch-action: manipulation; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--brand);
  font-weight: 400;
  font-size: clamp(.9375rem, .9rem + .2vw, 1rem);
  line-height: 1.65;
  letter-spacing: .002em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 800; }
p { margin: 0; }

::selection { background: var(--mark); color: var(--white); }
:focus-visible { outline: 2px solid var(--mark); outline-offset: 3px; }

.skip {
  position: fixed; top: .5rem; left: .5rem; z-index: 200;
  transform: translateY(-200%);
  background: var(--mark); color: var(--white);
  padding: .6rem 1rem; font: 600 .75rem/1 var(--mono); letter-spacing: .08em;
  text-transform: uppercase; text-decoration: none;
}
.skip:focus { transform: none; }

.mono { font-family: var(--mono); font-size: .6875rem; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }

/* Section headings stay quiet and small — on a portfolio the photograph is the
   headline, and a display-sized title would be competing with it. */
.quiet-title {
  font-family: var(--brand); font-weight: 800;
  font-size: clamp(1.35rem, 1rem + 1.5vw, 2.25rem);
  letter-spacing: -.025em; text-transform: uppercase; line-height: 1.05;
  max-width: 18ch;
}
.quiet-note { margin-top: 1rem; max-width: 46ch; color: var(--dim); }

/* Emphasis is carried by weight, not colour. It must never name a colour of its
   own: the dark bands don't reset --fg, so a token here turned words like
   "Expresso" black on a black background. Inheriting always lands right. */
em { font-style: normal; font-weight: 700; color: inherit; }

/* ── reveals ─────────────────────────────────────────────────────────── */

.rise {
  clip-path: inset(0 0 105% 0);
  transform: translateY(.3em);
  transition: clip-path .95s var(--swift), transform .95s var(--swift);
}
.rise.is-in { clip-path: inset(0 0 -25% 0); transform: none; }

.fade {
  opacity: 0; transform: translateY(18px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
}
.fade.is-in { opacity: 1; transform: none; }

/* the frame opens from a mask, the way a print comes up in the developer */
.plate-in { clip-path: inset(0 0 100% 0); transition: clip-path 1.15s var(--swift); }
.plate-in img { transform: scale(1.12); transition: transform 1.5s var(--swift); }
.plate-in.is-in { clip-path: inset(0 0 0 0); }
.plate-in.is-in img { transform: none; }

/* ── bar: the mark and the language, nothing else ────────────────────── */

.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; gap: 1.5rem;
  padding: 1rem max(var(--gut), env(safe-area-inset-right)) 1rem max(var(--gut), env(safe-area-inset-left));
  color: var(--cream);
  transition: color .5s, background-color .5s, backdrop-filter .5s;
}
.bar.is-solid {
  color: var(--ink);
  background: color-mix(in srgb, var(--cream) 90%, transparent);
  backdrop-filter: blur(16px) saturate(115%);
  border-bottom: 1px solid rgba(13, 13, 13, .1);
}

.bar__mark {
  display: flex; align-items: center; gap: 1rem;
  text-decoration: none; margin-right: auto; min-width: 0;
}
.bar__stack { display: grid; line-height: 1; }
.bar__l1 {
  font-family: var(--brand); font-weight: 300; font-size: .625rem;
  letter-spacing: .34em; text-transform: uppercase;
}
.bar__l2 {
  font-family: var(--brand); font-weight: 800; font-size: .9375rem;
  letter-spacing: -.005em; text-transform: uppercase; margin-top: .1rem;
}
.bar__studio {
  font-family: var(--mono); font-size: .5625rem; letter-spacing: .2em;
  text-transform: uppercase; opacity: .6;
  padding-left: 1rem; border-left: 1px solid currentColor;
  white-space: nowrap;
}
@media (max-width: 620px) { .bar__studio { display: none; } }

.bar__lang {
  display: flex; gap: .3rem; flex: none;
  background: none; border: 0; cursor: pointer; padding: .3rem 0;
  color: inherit;
  font-family: var(--brand); font-weight: 600; font-size: .625rem; letter-spacing: .14em;
  opacity: .6;
}
.bar__lang .is-on { opacity: 1; color: var(--mark); }

/* ── hero: his own film, full bleed ──────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid; align-content: center;
  padding: 6rem max(var(--gut), env(safe-area-inset-left)) 5.5rem;
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
  isolation: isolate;
}

.hero__film { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--ink); }
/* a 16:9 film cropped to whatever shape the window is */
.hero__film iframe,
.hero__film video,
.hero__film img {
  position: absolute; top: 50%; left: 50%;
  width: 100vw; height: 56.25vw;
  min-height: 100svh; min-width: 177.78svh;
  transform: translate(-50%, -50%);
  border: 0; pointer-events: none; object-fit: cover;
}
.hero__film img { opacity: 1; transition: opacity 1.2s var(--ease); }
.hero__film.has-film img { opacity: 0; }

.hero__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(13,13,13,.66) 0%, rgba(13,13,13,.40) 30%, rgba(13,13,13,.46) 62%, rgba(13,13,13,.84) 100%);
}

.lockup { display: grid; gap: clamp(.2rem, .6vw, .6rem); justify-items: start; }
.lockup__line1 {
  font-family: var(--brand); font-weight: 200;
  font-size: clamp(1.05rem, .3rem + 3.35vw, 4.3rem);
  letter-spacing: .055em; text-transform: uppercase; line-height: 1;
  white-space: nowrap;
}
.lockup__line2 {
  font-family: var(--brand); font-weight: 800;
  font-size: clamp(2.1rem, .2rem + 8.55vw, 11rem);
  letter-spacing: -.028em; text-transform: uppercase; line-height: .82;
  white-space: nowrap;
}

.hero__foot {
  position: absolute; left: var(--gut); right: var(--gut);
  bottom: max(2rem, env(safe-area-inset-bottom));
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem 2rem; flex-wrap: wrap;
  padding-top: 1rem;
  border-top: 1px solid rgba(239, 236, 228, .28);
}
.hero__where {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .18em;
  text-transform: uppercase; opacity: .72;
}
.hero__cue {
  font-family: var(--brand); font-weight: 600; font-size: .625rem;
  letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
  padding-bottom: .3rem; border-bottom: 1px solid var(--mark);
}

/* ── the work: rails that move with the page ───────────────────────────
   Four subjects — three of stills, one of film — kept apart so photography
   and video never sit in the same row. Each rail is a strip of frames with
   no caption: the page shows the picture, and the story only appears when
   you open one.

   The strip travels sideways as you scroll down past it, so there is nothing
   to click and nothing to drag. Frames run light to dark, so each subject
   opens bright and settles. */

.work { padding: clamp(3rem, 6vw, 6rem) 0 clamp(2rem, 4vw, 4rem); }

.rails { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(3.5rem, 7vw, 7rem); }
.rail { min-width: 0; }

/* The strip is dragged, not scrolled into: a plain horizontal scroller that
   takes a finger swipe, a trackpad swipe, or a click-and-drag with the mouse. */
.rail__scroll { position: relative; }
.rail__stage {
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
}
.rail__stage::-webkit-scrollbar { display: none; }
.rail__stage.is-dragging { cursor: grabbing; scroll-behavior: auto; }
/* while dragging, the pointer must not start an image drag or select text */
.rail__stage.is-dragging * { user-select: none; -webkit-user-drag: none; pointer-events: none; }

.rail__title {
  padding: 0 var(--gut);
  margin-bottom: clamp(1.25rem, 3vw, 2.25rem);
  font-weight: 800;
  font-size: clamp(1.15rem, .9rem + 1.1vw, 1.85rem);
  letter-spacing: -.025em; text-transform: uppercase; line-height: 1;
}

.rail__track {
  display: flex; gap: clamp(.5rem, 1vw, 1rem);
  padding-inline: var(--gut);
  will-change: transform;
}

.shot { flex: 0 0 auto; margin: 0; }

.shot__plate {
  position: relative; display: block; overflow: hidden;
  height: clamp(240px, 62vh, 620px);
  padding: 0; border: 0; background: var(--sink);
  cursor: pointer; color: inherit;
}
.shot__plate img {
  height: 100%; width: auto; max-width: none;
  transition: transform 1s var(--swift);
}
.shot__plate:hover img,
.shot__plate:focus-visible img { transform: scale(1.04); }

/* the signature: the grease-pencil select mark an editor draws to pick a frame */
.shot__mark { position: absolute; inset: 6%; width: 88%; height: 88%; pointer-events: none; overflow: visible; }
.shot__mark ellipse {
  fill: none; stroke: var(--mark); stroke-width: 2.5; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 320; stroke-dashoffset: 320; opacity: 0;
  transition: stroke-dashoffset .8s var(--swift), opacity .2s;
}
.shot__plate:hover .shot__mark ellipse,
.shot__plate:focus-visible .shot__mark ellipse { stroke-dashoffset: 0; opacity: .95; }

/* A film still is worth marking as a film — otherwise the video rail looks
   like more photographs. */
.shot__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  pointer-events: none;
}
.shot__play svg {
  width: 54px; height: 54px;
  fill: rgba(13, 13, 13, .55); stroke: var(--cream); stroke-width: 1.25;
  transition: fill .3s, transform .5s var(--swift);
}
.shot__plate:hover .shot__play svg { fill: var(--mark); transform: scale(1.08); }

@media (max-width: 780px) {
  .shot__plate { height: clamp(200px, 42vh, 360px); }
}

/* ── path: four chapters, each with a frame of its own ───────────────── */

.path { background: var(--ink); color: var(--cream); --line: rgba(239,236,228,.18); --dim: #8C877E; }

.chapter {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  padding: clamp(3.5rem, 8vw, 8rem) var(--gut);
  border-top: 1px solid var(--line);
}
.chapter:first-child { border-top: 0; }
.chapter--flip .chapter__plate { order: 2; }

.chapter__plate { overflow: hidden; background: var(--ash); aspect-ratio: 4 / 3; }
.chapter__plate img { width: 100%; height: 100%; object-fit: cover; }

.chapter__year {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .1em;
  color: var(--mark); margin-bottom: 1rem;
}
.chapter__year span { color: var(--dim); padding: 0 .1em; }
.chapter__what {
  font-family: var(--brand); font-weight: 800;
  font-size: clamp(1.5rem, 1rem + 2.2vw, 3rem);
  letter-spacing: -.03em; text-transform: uppercase; line-height: 1;
}
.chapter__body { margin-top: 1.25rem; color: var(--dim); max-width: 46ch; }
/* the emphasised names lift out of the grey, in the band's own light */
.chapter__body em { color: var(--cream); }

@media (max-width: 780px) {
  .chapter { grid-template-columns: 1fr; gap: 2rem; }
  .chapter--flip .chapter__plate { order: 0; }
  .chapter__plate { aspect-ratio: 3 / 2; }
}

/* ── books: staggered, not a grid ────────────────────────────────────── */

.books { padding: clamp(5rem, 11vw, 10rem) var(--gut); }
.books__head { margin-bottom: clamp(3rem, 6vw, 5rem); }

.stagger {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 3rem);
  align-items: start;
}
/* each column sits at a different height, so the row never reads as a shelf */
.stagger > *:nth-child(4n+1) { margin-top: 0; }
.stagger > *:nth-child(4n+2) { margin-top: clamp(2rem, 6vw, 6rem); }
.stagger > *:nth-child(4n+3) { margin-top: clamp(1rem, 3vw, 3rem); }
.stagger > *:nth-child(4n+4) { margin-top: clamp(3rem, 9vw, 9rem); }

@media (max-width: 900px) {
  .stagger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stagger > *:nth-child(2n+1) { margin-top: 0; }
  .stagger > *:nth-child(2n+2) { margin-top: clamp(2rem, 8vw, 5rem); }
}

.card {
  display: block; text-align: left;
  background: none; border: 0; padding: 0; margin: 0;
  color: inherit; cursor: pointer;
  opacity: 0; transform: translateY(18px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.card.is-in { opacity: 1; transform: none; }
.card[hidden] { display: none; }
.card__plate { overflow: hidden; background: var(--sink); }
.card__plate img { width: 100%; transition: transform .9s var(--swift); }
.card:hover .card__plate img,
.card:focus-visible .card__plate img { transform: scale(1.04); }
.card__title {
  margin-top: .85rem;
  font-family: var(--brand); font-weight: 600; font-size: .75rem;
  line-height: 1.4; letter-spacing: .01em;
}

.more { display: flex; justify-content: center; padding: clamp(3rem, 7vw, 6rem) var(--gut) 0; }

.btn {
  display: inline-flex; align-items: center; gap: .75rem;
  cursor: pointer;
  background: none; color: inherit;
  border: 1px solid var(--line); border-radius: 999px;
  padding: .95rem 1.75rem;
  font-family: var(--brand); font-weight: 600; font-size: .6875rem;
  letter-spacing: .18em; text-transform: uppercase;
  transition: background-color .3s, color .3s, border-color .3s;
}
.btn:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn__n { font-family: var(--mono); font-size: .625rem; letter-spacing: .06em; opacity: .55; }

/* ── brands: one continuous banner ───────────────────────────────────── */

.brands {
  background: var(--white);
  padding: clamp(3.5rem, 7vw, 6.5rem) 0;
  overflow: hidden;
}

.brands__title {
  padding: 0 var(--gut);
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  font-weight: 800;
  font-size: clamp(1.15rem, .9rem + 1.1vw, 1.85rem);
  letter-spacing: -.025em; text-transform: uppercase; line-height: 1;
}

/* The list is duplicated in the markup, so the track can loop seamlessly:
   when the first copy has passed, the second is already in its place. */
.banner {
  position: relative;
  display: flex;
  /* the ends fade rather than cut, so the loop has no visible seam */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.banner__run {
  display: flex; align-items: center; flex: 0 0 auto;
  gap: clamp(2.5rem, 6vw, 6rem);
  padding-right: clamp(2.5rem, 6vw, 6rem);
  animation: banner-roll 46s linear infinite;
}
.banner:hover .banner__run { animation-play-state: paused; }

@keyframes banner-roll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

.banner__mark { flex: 0 0 auto; display: flex; align-items: center; height: 4.5rem; }
/* A percentage max-height resolves against an indefinite height here and is
   simply ignored, so set the height outright and let the width follow. */
.banner__mark img {
  height: 100%; width: auto; max-width: none;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: grayscale(1);
  opacity: .55;
  transition: opacity .35s, filter .35s;
}
.banner__mark:hover img { opacity: 1; filter: none; }

@media (prefers-reduced-motion: reduce) {
  .banner {
    overflow-x: auto;
    -webkit-mask-image: none; mask-image: none;
  }
  .banner__run { animation: none; }
}

/* ── studio ──────────────────────────────────────────────────────────── */

.studio {
  background: var(--ink); color: var(--cream);
  --line: rgba(239,236,228,.18); --dim: #8C877E;
  padding: clamp(4.5rem, 10vw, 9rem) var(--gut);
  display: grid; gap: clamp(2.5rem, 6vw, 5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 860px) { .studio { grid-template-columns: 1fr; } }

.studio__title {
  font-family: var(--brand); font-weight: 800;
  font-size: clamp(1.75rem, 1.1rem + 3vw, 4rem);
  letter-spacing: -.035em; text-transform: uppercase; line-height: .98;
  max-width: 14ch;
}

.studio__mail {
  display: inline-block; margin-top: 2.25rem;
  font-family: var(--brand); font-weight: 800;
  font-size: clamp(1.05rem, .7rem + 1.6vw, 2.25rem);
  letter-spacing: -.02em; text-transform: uppercase; text-decoration: none;
  background-image: linear-gradient(var(--mark), var(--mark));
  background-size: 100% 2px; background-position: 0 100%; background-repeat: no-repeat;
  padding-bottom: .12em;
  transition: color .3s;
}
.studio__mail:hover { color: var(--mark); }

.studio__who {
  margin-top: 1.5rem; max-width: 34ch;
  font-family: var(--brand); font-weight: 500; font-size: .8125rem;
  letter-spacing: .04em; color: var(--dim);
}

/* The contact list carries the same voice as the headline beside it —
   brand-face labels, not small print. */
.studio__facts { display: grid; margin: 0; }
.studio__facts > div { padding: 1.5rem 0; border-top: 1px solid var(--line); }
.studio__facts > div:last-child { border-bottom: 1px solid var(--line); }

.studio__facts dt {
  font-family: var(--brand); font-weight: 800;
  font-size: .75rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--dim);
  margin-bottom: .7rem;
}
.studio__facts dd {
  margin: 0;
  font-family: var(--brand); font-weight: 600;
  font-size: clamp(.9375rem, .85rem + .35vw, 1.25rem);
  letter-spacing: -.005em; line-height: 1.45;
}
.studio__facts dd + dd { margin-top: .9rem; }
.studio__facts a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: color .25s, background-image .25s;
}
.studio__facts a:hover { color: var(--mark); }

.studio__fine {
  display: block; margin-top: .3rem;
  font-family: var(--mono); font-weight: 400;
  font-size: .5625rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim);
}
.studio__social { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }

/* ── foot ────────────────────────────────────────────────────────────── */

.foot {
  background: var(--ink); color: var(--cream);
  --line: rgba(239,236,228,.18); --dim: #8C877E;
  padding: 2.5rem var(--gut);
  border-top: 1px solid var(--line);
}

/* Three columns with the badge in the middle one, so it stays centred on the
   page however long the two side notes are — the same arrangement as the
   Mr. Burger footer this label comes from. */
.foot__row {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 1.5rem 2rem;
  max-width: 1320px; margin: 0 auto;
}
.foot__brand, .foot__rights {
  font-weight: 500; font-size: .625rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim);
}
.foot__rights { text-align: right; }

@media (max-width: 800px) {
  .foot__row { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .foot__rights { text-align: center; }
}

/* The MA Webs label, as it is on mrburger.pt: a printed paper tag with a
   dashed inner rule. */
.etiqueta-mawebs {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 24px;
  border-radius: 2px;
  background-color: #ded9cb;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.055) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.055) 0 1px, transparent 1px 2px);
  color: #1a1a1c;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 8px 20px -14px rgba(0,0,0,.9);
  transition: background-color 260ms cubic-bezier(.32,.72,0,1), box-shadow 260ms cubic-bezier(.32,.72,0,1);
}
.etiqueta-mawebs::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px dashed rgba(0,0,0,.3);
  border-radius: 1px;
  pointer-events: none;
}
.etiqueta-mawebs__nome {
  font: 800 12px/1.5 Arial, Helvetica, "Helvetica Neue", sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.etiqueta-mawebs__local {
  font: 400 8.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(0,0,0,.5);
}
.etiqueta-mawebs:hover {
  background-color: #eae6db;
  box-shadow: 0 6px 16px -12px rgba(0,0,0,.95);
}
.etiqueta-mawebs:focus-visible {
  outline: 2px solid #ded9cb;
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) { .etiqueta-mawebs { transition: none; } }

/* ── lightbox ────────────────────────────────────────────────────────── */

.lb {
  position: fixed; inset: 0; z-index: 300;
  display: grid; grid-template-rows: minmax(0, 1fr);
  background: rgba(8, 8, 8, .97);
  color: var(--cream);
  --line: rgba(239, 236, 228, .22); --dim: #8C877E;
  padding: clamp(3rem, 7vh, 5rem) clamp(1rem, 6vw, 5rem);
  animation: lb-in .32s var(--ease);
}
.lb[hidden] { display: none; }
@keyframes lb-in { from { opacity: 0; } }

.lb__stage { margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 1.5rem; min-height: 0; }
.lb__frame { display: grid; place-items: center; min-height: 0; min-width: 0; overflow: hidden; }
.lb__frame img { max-width: 100%; max-height: 100%; width: auto; height: auto; min-height: 0; object-fit: contain; }
.lb__frame iframe { width: min(100%, 1200px); aspect-ratio: 16/9; border: 0; }

.lb__meta { text-align: center; max-width: 64ch; margin-inline: auto; }
.lb__n { color: var(--mark); }
.lb__title {
  font-family: var(--brand); font-weight: 800;
  font-size: clamp(1.05rem, .9rem + .8vw, 1.6rem);
  letter-spacing: -.015em; text-transform: uppercase; margin-top: .45rem;
}
.lb__caption { margin-top: .6rem; font-size: .875rem; color: var(--dim); }
.lb__out { display: inline-block; margin-top: .5rem; color: var(--cream); }

.lb__close, .lb__nav {
  position: absolute; z-index: 2;
  background: none; border: 1px solid var(--line); cursor: pointer;
  color: var(--cream);
  display: grid; place-items: center;
  transition: border-color .25s, color .25s, background-color .25s;
}
.lb__close:hover, .lb__nav:hover { border-color: var(--mark); background: var(--mark); color: var(--white); }
.lb__close svg, .lb__nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; }
.lb__close { top: 1rem; right: 1rem; width: 44px; height: 44px; }
.lb__nav { top: 50%; transform: translateY(-50%); width: 44px; height: 64px; }
.lb__nav--prev { left: .5rem; }
.lb__nav--next { right: .5rem; }

@media (max-width: 640px) {
  .lb { padding: 3.5rem .75rem 1rem; }
  .lb__nav { top: auto; bottom: .75rem; transform: none; height: 44px; }
}

/* ── quality floor ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .shot, .card, .pill, .fade { opacity: 1; transform: none; }
  .rise { clip-path: none; transform: none; }
  .plate-in { clip-path: none; }
  .plate-in img { transform: none; }
}