/* ============================================================
   TWOTWENTYTWO STUDIO
   ============================================================ */

:root{
  --bg:        #fbfbfd;
  --bg-elev:   #ffffff;
  --ink:       #1d1d1f;
  --ink-2:     #6e6e73;
  --ink-3:     #a1a1a6;
  --hair:      rgba(0,0,0,.10);
  --accent:    #fe7a59;

  --nav-h:     52px;
  --gap:       clamp(12px, 1.5vw, 26px);
  --pad:       clamp(20px, 5vw, 76px);
  --radius:    16px;

  --ease:      cubic-bezier(.28,.11,.32,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

body.lb-open{ overflow:hidden; }

img{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }

::selection{ background:var(--accent); color:#fff; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }


/* ============================================================
   NAV
   ============================================================ */

.nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  height:var(--nav-h);
  background:rgba(251,251,253,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--hair);
}

.nav__inner{
  max-width:1560px; margin:0 auto; height:100%;
  padding:0 var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}

.brand{ display:flex; align-items:center; gap:10px; }
.brand__mark{ width:17px; height:auto; }
.brand__type{ display:flex; flex-direction:column; line-height:1; }
.brand__name{ font-size:12px; font-weight:700; letter-spacing:.15em; }
.brand__sub{ font-size:8.5px; font-weight:600; letter-spacing:.30em; color:var(--ink-2); margin-top:3px; }

.tabs{ position:relative; display:flex; gap:2px; }
.tab{
  position:relative; z-index:2;
  padding:7px 16px; border-radius:999px;
  font-size:13.5px; font-weight:500; letter-spacing:-.01em;
  color:var(--ink-2);
  transition:color .3s var(--ease);
}
.tab.is-active{ color:var(--ink); }
.tab:hover{ color:var(--ink); }

.tabs__pill{
  position:absolute; z-index:1; top:0; left:0; height:100%;
  background:rgba(0,0,0,.06);
  border-radius:999px;
  transition:transform .45s var(--ease), width .45s var(--ease);
}


/* ============================================================
   VIEWS
   ============================================================ */

main{ padding-top:var(--nav-h); }

.view{ display:none; }
.view.is-active{ display:block; animation:viewIn .6s var(--ease-out) both; }
@keyframes viewIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }


/* ============================================================
   HERO
   ============================================================ */

.hero{
  padding:clamp(56px,11vh,132px) var(--pad) clamp(40px,7vh,84px);
  max-width:1560px; margin:0 auto;
}
.hero__title{
  margin:0;
  font-size:clamp(38px,7.2vw,88px);
  font-weight:600;
  letter-spacing:-.035em;
  line-height:1.03;
}
.hero__sub{
  margin:clamp(18px,2.4vh,30px) 0 0;
  font-size:clamp(15px,1.35vw,21px);
  font-weight:400;
  line-height:1.5;
  letter-spacing:-.01em;
  color:var(--ink-2);
  max-width:34em;
}


/* ============================================================
   GRID
   Uniform two-column, every tile 4:5, rows aligned. Portrait
   4:5 sources drop in without any per-tile bookkeeping.
   ============================================================ */

.grid{
  max-width:1560px; margin:0 auto;
  padding:0 var(--pad);
  display:grid;
  grid-template-columns:repeat(2,1fr);
  column-gap:var(--gap);
  row-gap:clamp(34px,4.5vw,64px);
}

.tile{ margin:0; cursor:pointer; }
.tile--wide{ grid-column:1 / -1; }
.tile--wide .tile__frame{ aspect-ratio:16/9; }

.tile__frame{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:var(--radius);
  background:#ececed;
  box-shadow:0 1px 2px rgba(0,0,0,.05), 0 12px 34px -18px rgba(0,0,0,.30);
}
.tile__frame img{
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.001);
  transition:transform 1.1s var(--ease-out), filter .6s var(--ease);
}
@media (hover:hover){
  .tile:hover .tile__frame img{ transform:scale(1.045); }
  .tile:hover .tile__cap span{ color:var(--accent); }
  .tile:hover .tile__play{ background:var(--accent); color:#fff; border-color:transparent; }
}

/* play badge on the film tile */
.tile__play{
  position:absolute; left:16px; bottom:16px;
  display:grid; place-items:center;
  width:38px; height:38px; padding-left:2px;
  color:#fff;
  background:rgba(20,20,22,.42);
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}

.tile__cap{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding:15px 3px 0;
  font-size:13.5px; letter-spacing:-.005em;
}
.tile__cap span{ font-weight:600; color:var(--ink); transition:color .3s var(--ease); }
.tile__cap em{ font-style:normal; font-weight:400; color:var(--ink-3); }


/* ============================================================
   NOTE
   ============================================================ */

.note{
  max-width:1560px; margin:0 auto;
  padding:clamp(64px,11vh,140px) var(--pad) clamp(48px,8vh,96px);
}
.note p{
  margin:0;
  max-width:36em;
  font-size:clamp(14px,1.2vw,17px);
  line-height:1.6;
  color:var(--ink-3);
  letter-spacing:-.005em;
}


/* ============================================================
   CONTACT
   ============================================================ */

.contact{
  max-width:1560px; margin:0 auto;
  padding:clamp(56px,12vh,150px) var(--pad) clamp(60px,10vh,130px);
}
.contact__title{
  margin:0 0 clamp(38px,6vh,72px);
  font-size:clamp(34px,6.4vw,78px);
  font-weight:600; letter-spacing:-.035em; line-height:1.04;
}

.contact__rows{ border-top:1px solid var(--hair); max-width:760px; }
.crow{
  display:flex; align-items:baseline; gap:clamp(16px,4vw,54px);
  padding:20px 2px;
  border-bottom:1px solid var(--hair);
}
.crow__k{
  flex:0 0 auto; width:clamp(72px,9vw,124px);
  font-size:12px; font-weight:500; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-3);
}
.crow__v{
  font-size:clamp(16px,1.7vw,23px); font-weight:500; letter-spacing:-.018em;
  transition:color .25s var(--ease);
}
a.crow__v:hover{ color:var(--accent); }

.contact__foot{
  margin:clamp(40px,6vh,72px) 0 0;
  max-width:34em;
  font-size:clamp(14px,1.15vw,16px); line-height:1.6; color:var(--ink-3);
}


/* ============================================================
   FOOTER
   ============================================================ */

.foot{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  max-width:1560px; margin:0 auto;
  padding:26px var(--pad) calc(34px + env(safe-area-inset-bottom));
  border-top:1px solid var(--hair);
  font-size:12px; color:var(--ink-3); letter-spacing:-.005em;
}


/* ============================================================
   REVEAL
   ============================================================ */

.reveal{ opacity:0; transform:translateY(24px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .95s var(--ease-out), transform .95s var(--ease-out);
}


/* ============================================================
   LIGHTBOX
   ============================================================ */

.lb{
  position:fixed; inset:0; z-index:1000;
  background:rgba(8,8,10,.96);
  -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
  opacity:0; pointer-events:none;
  transition:opacity .4s var(--ease);
}
.lb.is-open{ opacity:1; pointer-events:auto; }

/* The picture gets the whole viewport bar a slim caption strip. A 4:5
   portrait on a 16:9 screen is height-bound, so every pixel of height
   given away here is a directly smaller image. */
.lb__stage{
  position:absolute; inset:0;
  margin:0; padding:14px 14px 46px;
  display:flex; align-items:center; justify-content:center;
}
.lb__media{
  position:relative;
  min-width:0; min-height:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:6px;
  opacity:0;
  transition:opacity .45s var(--ease);
}
.lb.is-loaded .lb__media{ opacity:1; }

/* Sized against the viewport directly. A percentage chain through the
   shrink-wrapping flex parents resolves to "auto" and the picture spills
   off screen, so the cap is stated in vw/vh and nothing can undo it. */
.lb__media img,
.lb__media video{
  max-width:calc(100vw - 28px);
  max-height:calc(100vh - 60px);
  max-height:calc(100dvh - 60px);
  width:auto; height:auto;
  object-fit:contain;
}
.lb__media [hidden]{ display:none; }


/* the tile image stands in until the master arrives */
.lb__spin{
  position:absolute; right:12px; bottom:12px; z-index:3;
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.25);
  border-top-color:rgba(255,255,255,.85);
  opacity:0; transition:opacity .3s var(--ease);
  animation:spin .7s linear infinite;
}
.lb.is-hires-pending .lb__spin{ opacity:1; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.lb__cap{
  position:absolute; left:0; right:0; bottom:15px;
  display:flex; gap:12px; align-items:baseline; justify-content:center;
  font-size:13px; color:rgba(255,255,255,.55);
  pointer-events:none;
}
.lb__cap span{ font-weight:600; color:rgba(255,255,255,.92); }
.lb__cap em{ font-style:normal; }

.lb__close,.lb__nav{
  position:absolute; z-index:2;
  display:grid; place-items:center;
  color:rgba(255,255,255,.7);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  transition:background .25s var(--ease), color .25s var(--ease);
}
.lb__close:hover,.lb__nav:hover{ background:rgba(255,255,255,.17); color:#fff; }

.lb__close{
  top:clamp(16px,3vh,26px); right:clamp(16px,3vw,26px);
  width:40px; height:40px; font-size:26px; line-height:1; padding-bottom:3px;
}
.lb__nav{
  top:50%; transform:translateY(-50%);
  width:46px; height:46px; font-size:26px; line-height:1; padding-bottom:3px;
}
.lb__nav--prev{ left:clamp(12px,2.4vw,26px); }
.lb__nav--next{ right:clamp(12px,2.4vw,26px); }


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width:900px){
  .grid{ grid-template-columns:1fr; row-gap:clamp(26px,6vw,44px); }
  .lb__stage{ padding:64px 14px 54px; }
  .lb__nav{ width:40px; height:40px; font-size:22px; }
}

@media (max-width:520px){
  :root{ --radius:12px; }
  .brand__sub{ display:none; }
  .tab{ padding:7px 13px; font-size:13px; }
  .crow{ flex-direction:column; gap:5px; padding:16px 2px; }
  .crow__k{ width:auto; }
}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
}