/* Big Boom — one type system, one motion language, the whole archive. */
:root {
  --ease-boom:cubic-bezier(.22,.68,0,1);
  --type-display:560;
  --type-tracking:-.055em;
}
h1,h2,h3 { text-wrap:balance; }
.studio-heading h2 em,.about-hero h1 em,.editorial-heading h2 em,
.purpose-top h2 em,.about-method h2 em,.about-bombi h2 em,
.development-heading h2 em,.project-index-intro h2 em {
  font-family:var(--font); font-style:normal; font-weight:inherit;
}
.concept-annotation { font-family:var(--font); font-style:normal; transform:none; letter-spacing:-.025em; font-size:1.4rem; border:0; margin-left:0; }
.hero-kinetic h1 { font-weight:480; letter-spacing:-.065em; }
.hero-kinetic h1 strong { font-weight:850; }
.boom-word > span { animation:none !important; transform:none !important; }
.hero-kinetic .hero-bottom { padding-top:.8rem; }
.section-eyebrow { font-size:.8125rem; letter-spacing:.025em; line-height:1.5; font-weight:500; }
.desktop-nav :is(a,button):after { transition:transform .5s var(--ease-boom); }
.project-index { transition:opacity .4s ease,transform .65s var(--ease-boom); }
.index-project { transition:color .4s ease,padding .5s var(--ease-boom),background .4s ease; }
.index-project:before { transition:transform .5s var(--ease-boom); }
.index-preview img { transition:opacity .5s ease,transform .8s var(--ease-boom); }
.index-preview { box-shadow:none; transform:none; }
.project-index-intro h2 { line-height:1.03; letter-spacing:-.05em; }

/* A single horizontal exhibition. Every project is an equal entry point. */
.home-page .work-selector {
  padding:2.2rem 0 3rem;
  margin:0;
  border-top:1px solid var(--ink);
  overflow:hidden;
}
.work-selector-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:2rem;
  padding:0 var(--gutter) 2rem;
}
.work-selector h2 {
  font-size:clamp(2.8rem,5.5vw,5.8rem);
  line-height:1.02;
  font-weight:var(--type-display);
  letter-spacing:var(--type-tracking);
  margin-top:.6rem;
}
.work-selector h2 > span { color:var(--red); font-weight:820; }
.work-selector-nav { display:flex; align-items:center; gap:2rem; padding-bottom:.35rem; }
.work-selector-hint { font-size:.875rem; color:#595959; }
.work-arrows { display:flex; gap:.5rem; }
.work-arrows button {
  width:3.2rem; height:3.2rem; border:1px solid var(--ink); border-radius:50%;
  display:grid; place-items:center; padding:0; background:transparent; color:var(--ink);
  font-size:1.45rem; line-height:1;
  transition:background .35s ease,color .35s ease,border-color .35s ease;
}
.work-arrows button:not(:disabled):hover { color:#fff; background:var(--ink); }
.work-arrows button:disabled { color:#999; border-color:#ddd; }
.work-track {
  --card-width:clamp(16.5rem,28.3vw,27rem);
  --card-gap:clamp(1rem,2vw,2rem);
  display:flex; gap:var(--card-gap);
  overflow-x:auto; overflow-y:hidden;
  padding:1.3rem var(--gutter) 2.2rem;
  scroll-padding-inline:var(--gutter);
  overscroll-behavior-x:contain;
  scrollbar-width:thin; scrollbar-color:var(--red) #e7e7e7;
  -webkit-overflow-scrolling:touch;
}
.work-track:focus-visible { outline:2px solid var(--red); outline-offset:-3px; }
.work-track::-webkit-scrollbar { height:3px; }
.work-track::-webkit-scrollbar-track { background:#e7e7e7; }
.work-track::-webkit-scrollbar-thumb { background:var(--red); }
.work-card { flex:0 0 var(--card-width); min-width:0; }
.work-card-link { display:block; user-select:none; -webkit-user-drag:none; }
.work-card-image {
  position:relative; height:clamp(15rem,24vw,23rem); overflow:hidden;
  background:#eee; isolation:isolate;
  transform:translateY(0); transition:transform .7s var(--ease-boom);
}
.work-card-image img {
  display:block; width:100%; height:100%; object-fit:cover;
  pointer-events:none; -webkit-user-drag:none;
  transition:transform .9s var(--ease-boom);
}
.work-card-link:hover .work-card-image { transform:translateY(-.5rem); }
.work-card-link:hover img { transform:scale(1.035); }
.work-card-link:focus-visible { outline-color:var(--red); outline-offset:4px; }
.work-card-title { display:grid; grid-template-columns:1.7rem minmax(0,1fr) 1rem; gap:.55rem; align-items:start; padding-top:1.1rem; }
.work-card-title h3 { font-size:clamp(1.1rem,1.55vw,1.55rem); font-weight:560; line-height:1.15; letter-spacing:-.035em; }
.work-card-number { font-size:.75rem; line-height:1.6; color:#666; }
.work-card-arrow { font-size:1.1rem; line-height:1.1; }
.work-card-link > p { font-size:.8125rem; line-height:1.5; color:#666; margin:.6rem 1.7rem 0 2.25rem; }
.work-card-open {
  position:absolute; inset:auto 1rem 1rem auto; width:3rem; height:3rem;
  border-radius:50%; background:#fff; color:var(--ink); display:grid; place-items:center;
  font-size:1.4rem; opacity:0; transform:translateY(.6rem);
  transition:opacity .3s ease,transform .5s var(--ease-boom);
}
.work-card-link:hover .work-card-open,.work-card-link:focus-visible .work-card-open { opacity:1; transform:translateY(0); }
.work-selector-foot { display:flex; justify-content:space-between; align-items:center; gap:2rem; padding:1.2rem var(--gutter) 0; }
.work-selector-foot > span { font-size:.75rem; line-height:1.5; letter-spacing:.025em; color:#666; }
.work-selector .archive-link { font-size:.875rem; text-transform:none; letter-spacing:0; white-space:nowrap; }
.work-card-link[href*="blackjack"] .work-card-image,
.work-card-link[href*="expediente"] .work-card-image { background:#101010; }
.work-card-link[href*="blackjack"] img,
.work-card-link[href*="expediente"] img { object-fit:contain; }
.work-card-link[href*="croissant"] img { object-position:center 22%; }
.work-card-link[href*="bigboom"] img { object-position:center 35%; }
.work-track.is-dragging .work-card-image,.work-track.is-dragging .work-card-image img { transform:none; transition:none; }
.work-track.is-dragging,.work-track.is-dragging * { user-select:none; }

/* Luminance masks expose only the character, never the atlas rectangle. */
.bombi-player { --bombi-duration:12s; color:var(--ink); }
.bombi-replay { background:transparent; border-radius:0; transform:none; transition:transform .75s var(--ease-boom); }
.bombi-replay:hover { transform:rotate(0); }
.bombi-rig {
  position:absolute; inset:4%; display:block;
  mix-blend-mode:normal; filter:none;
  transform-origin:52% 91%;
  animation:bombi-three-gestures var(--bombi-duration) cubic-bezier(.4,0,.2,1) 1 both paused;
}
.bombi-layer {
  display:block; position:absolute; inset:0;
  background:currentColor;
  mask-image:url('assets/bombi-smooth-atlas.png');
  mask-size:200% 100%; mask-repeat:no-repeat; mask-mode:luminance;
}
.bombi-body { mask-position:0% 50%; }
.bombi-arm {
  mask-position:100% 50%; mix-blend-mode:normal;
  transform-origin:31.5% 54.8%;
  animation:bombi-arm-follow-through var(--bombi-duration) cubic-bezier(.45,0,.25,1) 1 both paused;
}
/* A single scene with three readable beats, separated by resting poses.
 * Animate the original artwork only; the arm follows the body's momentum.
 */
@keyframes bombi-three-gestures {
  /* 1. Friendly wave: weight shifts subtly towards the raised hand. */
  0%,1% { transform:translate(0,0) scale(1) rotate(0); }
  10% { transform:translate(-.4%,-.4%) scale(1,1.006) rotate(-1.4deg); }
  19% { transform:translate(-.4%,0) scale(1) rotate(-.6deg); }
  28%,36% { transform:translate(0,0) scale(1) rotate(0); }
  /* 2. Hop: anticipation, short flight, cushioned landing, settle. */
  40% { transform:translate(0,.5%) scale(1.04,.955) rotate(-2deg); }
  43% { transform:translate(0,0) scale(.975,1.035) rotate(.4deg); animation-timing-function:cubic-bezier(.16,.72,.3,1); }
  46% { transform:translate(0,-9%) scale(.99,1.015) rotate(2.5deg); animation-timing-function:cubic-bezier(.55,0,.85,.35); }
  49% { transform:translate(0,0) scale(1.045,.95) rotate(.4deg); animation-timing-function:cubic-bezier(.22,.7,.25,1); }
  52% { transform:translate(0,-.5%) scale(.995,1.008) rotate(-.5deg); }
  56%,62% { transform:translate(0,0) scale(1) rotate(0); }
  /* 3. Playful bow: lean, hold the gesture, gently recover balance. */
  65% { transform:translate(.7%,0) scale(1) rotate(2deg); }
  71%,75% { transform:translate(-2.5%,.3%) scale(1.015,.96) rotate(-12deg); }
  82% { transform:translate(.3%,0) scale(1) rotate(1.2deg); }
  87% { transform:translate(0,0) scale(1) rotate(-.3deg); }
  92%,100% { transform:translate(0,0) scale(1) rotate(0); }
}
@keyframes bombi-arm-follow-through {
  0%,1% { transform:rotate(0); }
  9% { transform:rotate(14deg); }
  14% { transform:rotate(-11deg); }
  19% { transform:rotate(12deg); }
  24% { transform:rotate(-7deg); }
  29% { transform:rotate(2deg); }
  33%,36% { transform:rotate(0); }
  40% { transform:rotate(8deg); }
  44%,46% { transform:rotate(-14deg); }
  49% { transform:rotate(9deg); }
  53% { transform:rotate(-3deg); }
  57%,62% { transform:rotate(0); }
  66% { transform:rotate(4deg); }
  72%,76% { transform:rotate(24deg); }
  83% { transform:rotate(-4deg); }
  88%,100% { transform:rotate(0); }
}
.bombi-player.is-in-view .bombi-rig,.bombi-player.is-in-view .bombi-arm { animation-play-state:running; }
.motion-paused .bombi-rig,.motion-paused .bombi-arm,
.is-backgrounded .bombi-rig,.is-backgrounded .bombi-arm { animation-play-state:paused !important; }
.about-bombi .bombi-rig { inset:0; }
.about-bombi .bombi-replay { aspect-ratio:1; background:transparent; }
.bombi-portrait { transform:none; background:transparent; padding:0; }
.about-bombi .bombi-replay:focus-visible { outline-color:var(--ink); outline-offset:4px; }

/* Services and editorial passages share the same hierarchy. */
.services { border-top:1px solid var(--line); padding-top:5rem; }
.services-intro { display:block; }
.services-intro h2 { font-size:clamp(2.9rem,5.5vw,5.5rem); line-height:1.02; letter-spacing:var(--type-tracking); font-weight:var(--type-display); margin-top:1rem; }
.services-intro > p { font-size:1.0625rem; line-height:1.5; max-width:22rem; margin-top:2rem; }
.services-intro .services-statement { font-size:1.6rem; line-height:1.15; letter-spacing:-.025em; }
.service-list summary { font-weight:520; transition:color .35s ease; }
.service-list .details-icon { transition:transform .65s var(--ease-boom); }
.contact-explode h2 > span { transition:transform .65s var(--ease-boom); }
.studio-editorial .studio-heading h2 { line-height:1.08; font-weight:var(--type-display); letter-spacing:var(--type-tracking); }
.editorial-case .case-hero h1 { font-weight:600; letter-spacing:-.06em; line-height:1; }
.editorial-case .case-cover.golden-cover { background:#edece8; }
.editorial-case .case-cover.golden-cover img { max-width:min(100%,800px); max-height:800px; }
.editorial-case .case-cover.blackjack-cover { background:#101010; }
.gallery-blackjack { align-items:start; }
.gallery-blackjack img { background:#101010; max-height:none; }
.gallery-golden-ticket figure:first-child { max-width:min(100%,450px); justify-self:center; }
.gallery-golden-ticket figure:nth-child(2) { align-self:center; }
.gallery-golden-ticket img { max-width:800px; }

@media (hover:hover) and (pointer:fine) {
  .work-track,.work-track .work-card-link,.work-track .work-card-link * { cursor:url('assets/cursor-dot.svg') 12 12,grab; }
  .work-track.is-dragging,.work-track.is-dragging * { cursor:grabbing; }
}
@media (max-width:1000px) {
  .work-selector-hint { display:none; }
  .work-track { --card-width:37vw; }
  .work-card-image { height:31vw; }
}
@media (max-width:650px) {
  .home-page .work-selector { padding-top:1.8rem; padding-bottom:2rem; }
  .work-selector-heading { gap:1rem; padding-bottom:1rem; }
  .work-selector h2 { font-size:clamp(2rem,8vw,3rem); }
  .work-selector-heading .section-eyebrow { font-size:.75rem; }
  .work-arrows { gap:.35rem; }
  .work-arrows button { width:2.6rem; height:2.6rem; font-size:1.25rem; }
  .work-track { --card-width:72vw; --card-gap:1rem; padding-top:1rem; padding-bottom:1.7rem; }
  .work-card-image { height:63vw; }
  .work-card-title h3 { font-size:1.2rem; }
  .work-card-open { display:none; }
  .work-selector-foot { align-items:flex-start; padding-top:1rem; gap:1rem; }
  .work-selector-foot > span { max-width:8rem; font-size:.6875rem; }
  .work-selector .archive-link { font-size:.8125rem; }
  .work-selector .archive-link span { margin-left:.5rem; }
  .services { padding-top:3rem; }
  .services-intro { display:block; margin-bottom:2.5rem; }
  .services-intro h2 { font-size:3.5rem; margin-top:.8rem; }
  .services-intro > p { max-width:22rem; margin-top:1.2rem; font-size:1rem; }
  .gallery-golden-ticket figure:first-child { max-width:min(100%,450px); }
  .concept-annotation { font-size:1.3rem; }
}
@media (prefers-reduced-motion:reduce) {
  .bombi-rig,.bombi-arm { animation:none !important; transform:none !important; }
  .bombi-replay,.bombi-replay:hover { transform:none; }
  .work-card-image,.work-card-image img,.work-card-link:hover .work-card-image,.work-card-link:hover img { transform:none; transition:none; }
}

/* A black opening, a white exhibition, and one red invitation to the studio. */
.home-page { background:var(--ink); }
.home-page .header {
  margin:0; padding-inline:var(--gutter); background:var(--ink); color:#fff;
  border-bottom-color:#ffffff30;
}
.home-page .header .wordmark img { filter:none; }
.home-page .hero-kinetic { color:#fff; padding-bottom:4.2rem; }
.home-page .hero-kinetic h1 { color:#fff; padding-top:3.6rem; padding-bottom:3.4rem; }
.home-page .hero-overline { color:#bcbcbc; }
.home-page .hero-bottom > p { color:#d0d0d0; }
.home-page .hero-kinetic .hero-bottom { grid-template-columns:1.15fr 1fr; }
.home-page .hero-bottom .circle-arrow { border-color:#ffffff70; }
.home-page .hero-bombi { width:clamp(9rem,17vw,18rem); right:2.5%; top:.6rem; color:#fff; }
.home-page .hero-bombi .bombi-replay { background:transparent; transform:none; }
.home-page .hero-bombi .bombi-replay:focus-visible { outline-color:#fff; }
.home-page .work-selector { background:#fff; color:var(--ink); border-top-color:transparent; padding-top:3rem; padding-bottom:3rem; }
.home-page .work-selector-heading { padding-top:.6rem; }
.home-page .work-selector h2 { font-size:clamp(2.8rem,5vw,5.2rem); }
.home-page .work-selector .section-eyebrow,
.home-page .work-selector-hint,.home-page .work-card-number,
.home-page .work-card-link > p,.home-page .work-selector-foot > span { color:#606060; }
.home-page .work-arrows button { color:var(--ink); border-color:var(--ink); }
.home-page .work-arrows button:not(:disabled):hover { background:var(--ink); color:#fff; }
.home-page .work-arrows button:disabled { color:#888; border-color:#d7d7d7; }
.home-page .work-track { scrollbar-color:var(--red) #e7e7e7; }
.home-page .work-track::-webkit-scrollbar-track { background:#e7e7e7; }
.home-page .work-track::-webkit-scrollbar-thumb { background:var(--red); }
.home-page .work-selector .archive-link { border-bottom-color:var(--ink); }
.home-page .services { padding-top:4rem; padding-bottom:4.5rem; background:#fff; color:var(--ink); }
.home-page .studio-strip { display:block; padding:0; border:0; background:var(--red); color:#fff; }
.studio-strip-link {
  display:grid; grid-template-columns:minmax(8rem,.45fr) minmax(0,2fr) auto;
  align-items:center; gap:2rem; padding:2.8rem var(--gutter);
}
.studio-strip h2 { font-size:clamp(2rem,3.6vw,3.8rem); line-height:1.1; letter-spacing:-.05em; font-weight:560; }
.studio-strip h2 em { font-style:normal; }
.studio-strip-cta { display:inline-flex; align-items:center; gap:1rem; font-size:.9375rem; white-space:nowrap; }
.studio-strip-cta > span { font-size:2rem; transition:transform .6s var(--ease-boom); }
.studio-strip-link:hover .studio-strip-cta > span { transform:translate(.25rem,-.25rem); }
.studio-strip-link:focus-visible { outline:2px solid #fff; outline-offset:-8px; }
.contact-bottom { flex-wrap:wrap; column-gap:2.5rem; row-gap:1.5rem; }
.contact-bottom .contact-email { font-size:clamp(1.1rem,2vw,1.8rem); overflow-wrap:anywhere; }
.contact-bottom .contact-social { font-size:1.0625rem; }
.contact-bottom .contact-social > span { margin-left:.8rem; }

/* About: identity, origin and three principles. Each idea appears once. */
.about-concise .about-hero { padding-bottom:3.8rem; }
.about-concise .about-kicker { color:#bcbcbc; }
.about-concise .about-hero h1 {
  font-size:clamp(2.7rem,7.1vw,7.5rem); line-height:1.06;
  letter-spacing:-.055em; font-weight:560; margin:3.6rem 0 3.3rem;
}
.about-concise .about-hero-bottom { grid-template-columns:1.15fr 1fr; gap:3rem; align-items:end; }
.about-concise .about-hero-bottom > .small-label { color:#bcbcbc; line-height:1.7; }
.about-concise .about-hero-bottom > p { font-size:1.25rem; line-height:1.5; max-width:34rem; padding:0; }
.about-origin {
  display:grid; grid-template-columns:1.15fr 1fr; gap:3rem; align-items:center;
  padding:4.5rem var(--gutter);
}
.about-origin h2 {
  font-size:clamp(2.4rem,4vw,4.2rem); font-weight:560; letter-spacing:-.05em; line-height:1.07; margin-top:1.4rem;
}
.about-origin > p { font-size:1.125rem; line-height:1.65; color:#4d4d4d; max-width:34rem; }
.about-difference { margin:0 var(--gutter); padding:3rem 0 4.5rem; border-top:1px solid var(--ink); }
.difference-heading h2 { font-size:clamp(2.7rem,4.8vw,5rem); line-height:1.06; letter-spacing:-.05em; font-weight:560; margin-top:1.4rem; }
.difference-heading h2 em { color:var(--red); font-style:normal; }
.difference-principles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3rem; margin-top:3.4rem; }
.difference-principles article { border-top:1px solid var(--line); padding-top:1rem; }
.principle-number { color:var(--red); font-size:.875rem; }
.difference-principles h3 { font-size:clamp(1.35rem,2vw,2rem); font-weight:560; line-height:1.2; letter-spacing:-.035em; margin:1.7rem 0 1rem; }
.difference-principles p { font-size:1.0625rem; line-height:1.65; color:#4d4d4d; max-width:29rem; }
.about-concise .about-bombi {
  grid-template-columns:minmax(11rem,.65fr) minmax(0,1fr); gap:clamp(2rem,6vw,6rem);
  max-width:none; padding:3.5rem var(--gutter) 4.5rem; border-top:1px solid var(--line);
}
.about-concise .bombi-portrait { width:100%; max-width:21rem; justify-self:center; }
.about-concise .bombi-edition { display:none; }
.about-concise .about-bombi h2 { font-size:clamp(2rem,3.7vw,4rem); line-height:1.08; }
.about-concise .about-bombi p { font-size:1.0625rem; max-width:31rem; }
.about-concise .bombi-controls { gap:.8rem 1.6rem; }
.about-concise .bombi-controls .underlined-link { font-size:.875rem; }

@media (min-width:1700px) {
  .home-page .header { padding-inline:max(var(--gutter),calc((100vw - 1560px)/2)); }
}
@media (max-width:1000px) {
  .home-page .hero-bombi { width:19vw; min-width:8rem; right:0; }
  .difference-principles { gap:1.8rem; }
  .about-concise .about-hero-bottom > p { font-size:1.125rem; }
  .studio-strip-link { grid-template-columns:1fr auto; gap:1.2rem 2rem; }
  .studio-strip-link > .small-label { grid-column:1/-1; }
}
@media (max-width:650px) {
  .home-page .hero-kinetic { padding-bottom:2.8rem; }
  .home-page .hero-kinetic h1 { padding-top:2.6rem; padding-bottom:2.2rem; }
  .home-page .hero-bombi { width:26vw; min-width:0; right:-.25rem; top:.5rem; }
  .home-page .hero-kinetic .hero-bottom { grid-template-columns:1fr; }
  .home-page .work-selector { padding-top:1.8rem; padding-bottom:2.6rem; }
  .home-page .work-selector h2 { font-size:clamp(2rem,8vw,3rem); }
  .home-page .services { padding-top:3rem; }
  .studio-strip-link { grid-template-columns:1fr; gap:1.3rem; padding-block:2.3rem; }
  .studio-strip-link > .small-label { grid-column:1; }
  .studio-strip h2 { font-size:clamp(2rem,8.3vw,3rem); max-width:19rem; }
  .studio-strip-cta { justify-content:space-between; padding-top:.5rem; }
  .about-concise .about-hero { padding-bottom:2.8rem; }
  .about-concise .about-hero h1 { font-size:clamp(2.3rem,9vw,3.65rem); margin:2.8rem 0 2.4rem; }
  .about-concise .about-hero-bottom { grid-template-columns:1fr; gap:1.4rem; }
  .about-concise .about-hero-bottom > .small-label { grid-row:2; }
  .about-concise .about-hero-bottom > p { font-size:1.0625rem; grid-row:1; }
  .about-origin { grid-template-columns:1fr; gap:1.8rem; padding-block:3.2rem; }
  .about-origin h2 { font-size:2.6rem; }
  .about-origin > p { font-size:1rem; }
  .about-difference { padding-top:2.4rem; padding-bottom:3rem; }
  .difference-heading h2 { font-size:2.6rem; }
  .difference-principles { grid-template-columns:1fr; gap:1.7rem; margin-top:2.2rem; }
  .difference-principles article { display:grid; grid-template-columns:1.5rem minmax(0,1fr); gap:.75rem; padding-top:1.5rem; }
  .principle-number { padding-top:.15rem; }
  .difference-principles h3 { font-size:1.45rem; margin:0; }
  .difference-principles p { grid-column:2; font-size:1rem; max-width:none; }
  .about-concise .about-bombi { grid-template-columns:1fr; padding-block:2.8rem 3.5rem; gap:2.2rem; }
  .about-concise .bombi-portrait { max-width:15rem; justify-self:start; }
  .about-concise .about-bombi h2 { font-size:2.35rem; }
  .about-concise .about-bombi p { font-size:1rem; }
}