/* TWIST — portafolio (diseño claro). Colores de marca vigentes; cambiar solo estas variables al actualizar el branding. */
:root {
  --bg: #F3EFE7;          /* blanco hueso */
  --surface: #FAF8F3;     /* tarjetas */
  --ink: #0E0E0E;         /* negro cine */
  --ink-2: #161616;
  --muted: rgba(14, 14, 14, .56);
  --line: rgba(14, 14, 14, .12);
  --bone: #F3EFE7;
  --bone-dim: rgba(243, 239, 231, .62);
  --bone-faint: rgba(243, 239, 231, .16);
  --rec: #FF0000;         /* rojo REC: el punto */
  --font: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gutter: clamp(16px, 3.4vw, 52px);
  --radius: clamp(14px, 1.6vw, 24px);
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body.is-loading { overflow: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
::selection { background: var(--ink); color: var(--bg); }
.center { text-align: center; }
.mask { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.mask > span { display: block; will-change: transform; }
.eyebrow { margin: 0 0 16px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.h2 { margin: 0; font: 500 clamp(38px, 5vw, 80px)/1.02 var(--font); letter-spacing: -.045em; }
.sec-head { padding: 0 var(--gutter); margin-bottom: clamp(36px, 5vw, 64px); }
.center-head { text-align: center; }
.center-head .h2 .mask > span { display: block; }
.sec-sub { margin: 16px auto 0; max-width: 520px; color: var(--muted); font-size: 17px; }
.pill { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 8px 14px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line);
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--rec); animation: blink 1.6s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.btn { display: inline-flex; align-items: center; padding: 16px 28px; border-radius: 99px; background: var(--ink); color: var(--bg);
  font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; transition: transform .3s var(--ease); }
.btn span { display: inline-block; }

/* ---------- cursor ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: var(--ink); display: grid; place-items: center; transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease); }
.cursor.big { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: var(--ink); }
.cursor-label { font: 600 11px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--bg); opacity: 0; transition: opacity .2s; }
.cursor.big .cursor-label { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor { display: none !important; } }

/* ---------- intro ---------- */
.intro { position: fixed; inset: 0; z-index: 100; background: #fff; display: grid; place-items: center; } /* mismo blanco que el video de la firma */
.intro video { width: 100%; height: 100%; object-fit: contain; }
.intro-skip { position: absolute; right: var(--gutter); bottom: 26px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

/* ---------- nav ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; padding: 18px var(--gutter);
  transition: background .3s, backdrop-filter .3s; }
.nav.solid { background: rgba(243, 239, 231, .82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.nav-logo img { width: clamp(88px, 7.6vw, 112px); height: auto; }
.nav-links { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px); font-size: 14px; font-weight: 500; }
.nav-links a:not(.nav-cta) { opacity: .7; transition: opacity .2s; }
.nav-links a:not(.nav-cta):hover { opacity: 1; }
.nav-cta { padding: 10px 18px; border-radius: 99px; background: var(--ink); color: var(--bg); }
.nav-cta span { display: inline-block; }
@media (max-width: 640px) { .nav-links a:not(.nav-cta) { display: none; } }

/* ---------- portada ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding-top: clamp(96px, 13vh, 130px); }
.hero-grid { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: calc((100% - 2 * var(--gutter)) / 6) 120px; background-position: var(--gutter) 0;
  mask-image: linear-gradient(transparent, #000 15%, #000 60%, transparent); -webkit-mask-image: linear-gradient(transparent, #000 15%, #000 60%, transparent); opacity: .55; }
.hero-top { position: relative; z-index: 3; text-align: center; padding: 0 var(--gutter); }
.hero-title { margin: 22px 0 0; font: 500 clamp(40px, 5.8vw, 92px)/1 var(--font); letter-spacing: -.05em; }
.hero-title .line { display: block; overflow: hidden; padding-bottom: .08em; }
.hero-title .line > span { display: inline-block; }
.hero-title .giro { display: inline-block; font-style: normal; transform-origin: 50% 55%; }
.hero-band { position: absolute; left: 0; right: 0; bottom: 2vh; z-index: 1; overflow: hidden; pointer-events: none; }
.hero-band-in { display: flex; width: max-content; will-change: transform; }
.hero-band-in span { font: 500 clamp(96px, min(15vw, 24vh), 260px)/.95 var(--font); letter-spacing: -.06em; white-space: nowrap; padding-right: .35em; }
/* el mazo se ajusta a la altura de la pantalla para no tapar el titular */
.deck-wrap { position: absolute; z-index: 2; left: 50%; bottom: clamp(30px, 6vh, 70px); height: clamp(250px, calc(100svh - 480px), 470px); aspect-ratio: 4 / 5; transform: translateX(-50%); }
.deck { position: absolute; inset: 0; touch-action: pan-y; }
.deck-card { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; background: var(--ink-2); box-shadow: 0 30px 70px rgba(14,14,14,.28), 0 2px 0 rgba(255,255,255,.4) inset;
  transform: var(--t); z-index: var(--z); transition: transform .75s var(--ease), opacity .6s var(--ease), filter .5s; filter: brightness(var(--b, 1));
  cursor: pointer; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.deck-card video { opacity: 0; transition: opacity .5s; }
.deck-card.live video { opacity: 1; }
/* abanico al pasar el mouse: cada carta se puede elegir */
.deck.fan .deck-card { filter: brightness(.9); }
.deck.fan .deck-card.hot { filter: none; box-shadow: 0 40px 90px rgba(14,14,14,.38); }
.deck.fan .deck-card .dc-cap { opacity: 0; }
.deck.fan .deck-card.hot .dc-cap { opacity: 1; }
.deck-nav { position: absolute; top: 50%; z-index: 20; width: 46px; height: 46px; margin-top: -23px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(14,14,14,.12); transition: background .25s, transform .25s, opacity .3s; }
.deck-nav svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.deck-nav:hover { background: var(--ink); transform: scale(1.06); }
.deck-nav:hover svg { stroke: var(--bg); }
.deck-prev { left: -78px; } .deck-next { right: -78px; }
.deck-wrap.fanning .deck-nav { opacity: 0; pointer-events: none; }
@media (max-width: 760px) { .deck-prev { left: -54px; } .deck-next { right: -54px; } .deck-nav { width: 40px; height: 40px; margin-top: -20px; } }

/* ---------- fondo vivo ---------- */
.bgvid { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .7s var(--ease); }
.bgvid video { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); }
.bgvid.on { opacity: .16; }
main, .foot { position: relative; z-index: 1; }
.deck-card video, .deck-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.deck-card .dc-cap { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; display: flex; justify-content: space-between; align-items: end; gap: 8px; color: #fff;
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-shadow: 0 1px 8px rgba(0,0,0,.6); opacity: 0; transition: opacity .4s; }
.deck-card.top .dc-cap { opacity: 1; }
.deck-card.out { transform: translate(-130%, -6%) rotate(-24deg) !important; opacity: 0; }
.hero-side { position: absolute; z-index: 3; bottom: clamp(150px, 26vh, 300px); margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1.5; }
.hero-left { left: var(--gutter); }
.hero-right { right: var(--gutter); border-bottom: 1px solid currentColor; }
@media (max-width: 760px) {
  .hero { min-height: 680px; }
  .hero-side { display: none; }
  .deck-wrap { height: min(clamp(250px, calc(100svh - 480px), 470px), 72vw); }
}

/* ---------- nosotros + cifras ---------- */
.about { padding: clamp(110px, 14vw, 200px) var(--gutter) clamp(80px, 10vw, 140px); }
.about-text { margin: 0 auto; max-width: 1100px; text-align: center; font: 500 clamp(26px, 3.4vw, 52px)/1.12 var(--font); letter-spacing: -.035em; }
.about-text .w { display: inline-block; opacity: .18; }
.proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1180px; margin: clamp(60px, 8vw, 110px) auto 0; }
.proof-item { padding: 28px 28px 26px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.proof-num { margin: 0; font: 500 clamp(56px, 6.4vw, 104px)/.9 var(--font); letter-spacing: -.06em; }
.proof-word { font-size: clamp(44px, 4.6vw, 78px); padding-top: .12em; }
.proof-label { margin: 18px 0 0; font-size: 14px; color: var(--muted); }
.proof-map { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; margin-top: 16px; max-width: 220px; }
.proof-map i { aspect-ratio: 1; border-radius: 3px; border: 1px solid var(--line); }
.proof-map i.on { background: var(--ink); border-color: var(--ink); }
@media (max-width: 760px) { .proof { grid-template-columns: 1fr; } }

/* ---------- servicios ---------- */
.services { padding: clamp(60px, 8vw, 120px) 0 clamp(80px, 10vw, 140px); }
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 0 var(--gutter); }
.svc { position: relative; display: flex; flex-direction: column; min-height: clamp(320px, 34vw, 460px); padding: 28px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line);
  overflow: hidden; transition: background .4s var(--ease), color .4s var(--ease), transform .5s var(--ease); }
.svc h3 { margin: 0; max-width: 16ch; font: 500 clamp(22px, 2vw, 30px)/1.12 var(--font); letter-spacing: -.03em; }
.svc p { margin: 14px 0 0; max-width: 30ch; color: var(--muted); font-size: 15px; transition: color .4s; }
.svc-num { margin-top: auto; font: 300 clamp(96px, 11vw, 180px)/.8 var(--font); letter-spacing: -.07em; color: rgba(14,14,14,.18); transition: color .4s, transform .6s var(--ease); transform-origin: left bottom; }
.svc:hover { background: var(--ink); color: var(--bg); transform: translateY(-6px); }
.svc:hover p { color: var(--bone-dim); }
.svc:hover .svc-num { color: var(--rec); transform: rotate(-4deg); }
.services .center { margin-top: clamp(36px, 5vw, 56px); }
@media (max-width: 860px) { .svc-grid { grid-template-columns: 1fr; } .svc { min-height: 260px; } }

/* ---------- trabajo / bodas: galería dentro de un panel ---------- */
.work-sec { padding: clamp(70px, 9vw, 130px) 0 0; }
.gallery {
  position: relative; margin: 0 var(--gutter); height: min(82vh, 780px); min-height: 560px; overflow: hidden; border-radius: calc(var(--radius) + 6px);
  background: #050505; color: var(--bone); isolation: isolate; --W: 800px; --mid: 55%;
}
.g-bg { position: absolute; inset: -80px; z-index: -1; }
.g-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(46px) brightness(.55) saturate(1.2); transform: scale(1.12); opacity: 0; transition: opacity 1.1s var(--ease); }
.g-bg img.on { opacity: 1; }
.g-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(5,5,5,.5), transparent 30%, transparent 70%, rgba(5,5,5,.65)); }
.g-head { position: absolute; top: clamp(20px, 3vw, 34px); left: clamp(20px, 3vw, 36px); right: clamp(20px, 3vw, 36px); z-index: 20; display: flex; justify-content: space-between; align-items: flex-end; gap: 14px 24px; flex-wrap: wrap; }
.g-title { margin: 0; overflow: hidden; font: 500 clamp(28px, 3.2vw, 52px)/1.04 var(--font); letter-spacing: -.045em; }
.g-title-in { display: block; }
.g-meta { margin: 6px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-dim); }
.g-meta b { color: var(--bone); font-weight: 600; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filters button { padding: 8px 14px; border-radius: 99px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--bone-dim); border: 1px solid var(--bone-faint);
  background: rgba(14,14,14,.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: color .25s, background .25s, border-color .25s; }
.filters button:hover { color: var(--bone); border-color: var(--bone-dim); }
.filters button[aria-selected="true"] { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.g-stage { position: absolute; left: 0; right: 0; top: var(--g-top, 150px); bottom: 58px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.g-stage.no-anim .g-card { transition: none !important; }
.g-card { position: absolute; left: 50%; top: 50%; width: var(--w); height: var(--h); z-index: var(--z); opacity: var(--o); transform: translate(-50%, -50%) translateX(var(--x));
  border-radius: 10px; overflow: hidden; background: #111; box-shadow: 0 30px 90px rgba(0,0,0,.55); cursor: pointer; padding: 0;
  transition: width .9s var(--ease), height .9s var(--ease), transform .9s var(--ease), opacity .6s var(--ease); }
.g-card img, .g-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.g-card video { opacity: 0; transition: opacity .7s var(--ease); }
.g-card.live video { opacity: 1; }
.g-card::after { content: ""; position: absolute; inset: 0; background: #000; opacity: var(--shade, 0); transition: opacity .9s var(--ease); pointer-events: none; }
.g-watch { position: absolute; left: 50%; top: 50%; z-index: 2; display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 99px;
  background: rgba(243,239,231,.16); border: 1px solid rgba(243,239,231,.28); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff;
  font: 600 12px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; transform: translate(-50%, -50%) scale(.88); opacity: 0; transition: opacity .35s, transform .45s var(--ease); pointer-events: none; }
.g-watch i { width: 8px; height: 8px; border-radius: 50%; background: var(--rec); }
.g-card.center:hover .g-watch, .g-card.center:focus-visible .g-watch { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (hover: none) { .g-card.center .g-watch { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.g-tag { position: absolute; left: 14px; bottom: 12px; z-index: 2; font: 600 10px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: #fff; border: 1px solid rgba(255,255,255,.6); padding: 5px 7px; opacity: 0; transition: opacity .4s; }
.g-card.center .g-tag { opacity: .85; }
.g-arrow { position: absolute; top: var(--mid); z-index: 15; width: 50px; height: 50px; margin-top: -25px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(14,14,14,.6); border: 1px solid var(--bone-faint); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .25s, transform .25s; }
.g-arrow svg { width: 20px; height: 20px; fill: none; stroke: var(--bone); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.g-arrow:hover { background: var(--bone); transform: scale(1.06); }
.g-arrow:hover svg { stroke: var(--ink); }
.g-prev { left: max(10px, calc(50% - var(--W) * .56 - 25px)); }
.g-next { right: max(10px, calc(50% - var(--W) * .56 - 25px)); }
.g-foot { position: absolute; left: clamp(20px, 3vw, 36px); right: clamp(20px, 3vw, 36px); bottom: 20px; z-index: 20; display: flex; align-items: center; gap: 16px;
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-dim); }
.g-count { color: var(--bone); font-variant-numeric: tabular-nums; min-width: 4.5em; }
.g-bar { position: relative; flex: 1; height: 1px; background: var(--bone-faint); }
.g-bar i { position: absolute; left: 0; top: 0; height: 100%; width: var(--p, 0%); background: var(--bone); transition: width .7s var(--ease); }
.gallery.single .g-arrow, .gallery.single .g-hint { display: none; }
@media (max-width: 700px) {
  .gallery { margin: 0 10px; height: 76vh; min-height: 520px; }
  .g-arrow { width: 42px; height: 42px; margin-top: -21px; }
  .g-hint { display: none; }
}

/* ---------- marcas ---------- */
.brands { padding: clamp(100px, 12vw, 170px) var(--gutter) 0; }
.brand-grid { list-style: none; margin: 28px auto 0; padding: 0; max-width: 1100px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.brand-grid li { display: grid; place-items: center; min-height: 110px; padding: 20px; text-align: center; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font: 600 clamp(17px, 1.6vw, 24px)/1.1 var(--font); letter-spacing: -.03em; color: rgba(14,14,14,.62); transition: color .3s, background .3s; }
.brand-grid li:hover { color: var(--ink); background: var(--surface); }
@media (max-width: 760px) { .brand-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- manifiesto ---------- */
.manifesto { margin: clamp(100px, 12vw, 170px) var(--gutter) 0; padding: clamp(60px, 9vw, 130px) clamp(22px, 5vw, 80px); border-radius: calc(var(--radius) + 6px); background: var(--ink); color: var(--bg); }
.manifesto .eyebrow { color: var(--bone-dim); }
.m-text { margin: 0; max-width: 1200px; font: 500 clamp(28px, 3.8vw, 62px)/1.08 var(--font); letter-spacing: -.04em; }
.m-text .w { display: inline-block; opacity: .18; margin-right: .22em; }
.m-big { margin: clamp(56px, 8vw, 110px) 0 0; font: 500 clamp(44px, 7.6vw, 136px)/.95 var(--font); letter-spacing: -.055em; }
.flip { display: inline-block; font-style: normal; color: var(--bg); transform: rotate(180deg); transform-origin: 50% 58%; }

/* ---------- contacto ---------- */
.contact { padding: clamp(110px, 14vw, 200px) var(--gutter); text-align: center; }
.h-contact { margin: 22px 0 0; font: 500 clamp(46px, 8vw, 140px)/.98 var(--font); letter-spacing: -.055em; }
.contact-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(36px, 5vw, 60px); }
.pill-link { position: relative; display: inline-flex; align-items: center; overflow: hidden; padding: 18px 28px; border-radius: 99px; border: 1px solid var(--ink);
  font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.pill-link::before { content: ""; position: absolute; inset: 0; background: var(--ink); transform: translateY(101%); transition: transform .45s var(--ease); border-radius: inherit; }
.pill-link span { position: relative; transition: color .3s; }
.pill-link:hover::before { transform: none; }
.pill-link:hover span { color: var(--bg); }
.pill-link.solid { background: var(--ink); color: var(--bg); }
.pill-link.solid::before { background: var(--rec); }
.contact-note { color: var(--muted); }

/* ---------- pie ---------- */
.foot { padding: 0 var(--gutter) 26px; overflow: hidden; }
.foot-logo { perspective: 900px; }
.foot-logo img { width: 100%; height: auto; transform-origin: 50% 50%; }
.foot-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.foot-row p { margin: 0; }
.foot-row a:hover { color: var(--ink); }

/* ---------- reproductor ---------- */
.player { position: fixed; inset: 0; z-index: 95; background: #060606; color: var(--bone); display: grid; grid-template-rows: 1fr auto; padding: 56px var(--gutter) 22px; }
.player[hidden] { display: none; }
.p-stage { min-height: 0; display: grid; place-items: center; }
.p-stage video { max-width: 100%; max-height: 100%; width: auto; height: 100%; background: #000; }
.p-info { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; padding-top: 16px; }
.p-client { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-dim); }
.p-title { margin: 4px 0 2px; font: 500 clamp(24px, 2.8vw, 40px)/1.05 var(--font); letter-spacing: -.04em; }
.p-meta { margin: 0; font-size: 13px; color: var(--bone-dim); }
.p-variants { display: flex; gap: 6px; }
.p-variants button { padding: 8px 14px; border-radius: 99px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-dim); border: 1px solid var(--bone-faint); }
.p-variants button[aria-pressed="true"] { color: var(--ink); background: var(--bone); border-color: var(--bone); }
.p-close { position: absolute; top: 8px; right: calc(var(--gutter) - 10px); font-size: 38px; line-height: 1; padding: 4px 12px; color: var(--bone-dim); }
.p-nav { position: absolute; top: 50%; transform: translateY(-50%); font-size: 48px; padding: 10px; color: var(--bone-dim); }
.p-close:hover, .p-nav:hover { color: var(--bone); }
.p-prev { left: 4px; } .p-next { right: 4px; }
@media (max-width: 700px) { .p-nav { top: auto; bottom: 12px; transform: none; font-size: 34px; } .p-info { padding-right: 96px; } .p-prev { left: auto; right: 48px; } }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }