/* ============================================================
   RODUCTIONS
   A24-inspired editorial system: black ground, white type,
   restrained gray metadata, and artwork as the only colour.
   ============================================================ */

:root{
  --ground:#FFF;
  --surface:#F4F4F2;
  --ink:#090B0B;
  --ink-2:#626262;
  --ink-3:#858585;
  --rule:#E6E6E4;
  --rule-strong:#CFCFCD;

  --wrap:1440px;
  --pad:clamp(20px, 4.4vw, 64px);

  --f-display:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-body:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-mono:"Helvetica Neue",Helvetica,Arial,sans-serif;
}

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

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.bleed{max-width:var(--wrap);margin:0 auto}

.label{
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink-3);
  font-weight:500;
}
.label--bright{color:var(--ink)}

.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--ink);color:var(--ground);
  padding:12px 18px;font-family:var(--f-mono);font-size:12px;z-index:50;
}
.skip:focus{left:0}

/* ---------- header ---------- */

.site-head{
  border-bottom:0;
  position:sticky;top:0;z-index:20;
  background:var(--ground);
}
.site-head__in{
  display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:24px;
  padding-top:30px;padding-bottom:30px;
}

.wordmark{
  display:block;
  grid-column:1;
  width:clamp(150px,15vw,205px);
  line-height:0;
}
.wordmark img{display:block;width:100%;height:auto}

.site-nav{display:flex;gap:clamp(18px,2.6vw,38px)}
.site-nav a{
  font-family:var(--f-mono);
  font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-2);
  padding:10px 0;
  transition:color .2s ease;
  white-space:nowrap;
}
.site-nav{grid-column:3;justify-content:flex-end}
.site-nav a:hover{color:var(--ink)}
.site-nav a[aria-current="page"]{color:var(--ink)}

/* ---------- statement ---------- */

.statement{
  padding-top:clamp(92px,13vw,176px);
  padding-bottom:clamp(68px,9vw,116px);
  border-bottom:1px solid var(--rule);
}
.statement p{
  margin:0;
  max-width:20ch;
  max-width:820px;
  font-size:clamp(25px,3.2vw,43px);
  line-height:1.12;
  letter-spacing:-.045em;
}

/* ---------- slate ---------- */

.slate{padding-top:clamp(56px,8vw,100px);padding-bottom:clamp(64px,9vw,112px)}
.slate__head{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:20px;margin-bottom:clamp(24px,3vw,36px);
}

.grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(24px,2.8vw,42px) clamp(16px,2vw,30px);
}
@media (max-width:1080px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.card{display:flex;flex-direction:column;gap:17px}

.card__frame{
  position:relative;
  aspect-ratio:2/3;
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--rule);
}
.card__frame img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
}
.card:hover .card__frame img{transform:scale(1.03)}

.card__veil{
  position:absolute;inset:0;
   background:linear-gradient(to top, rgba(255,255,255,.96) 30%, rgba(255,255,255,.78));
  display:flex;flex-direction:column;justify-content:flex-end;gap:14px;
   padding:clamp(18px,2vw,28px);
  opacity:0;
  transition:opacity .25s ease;
}
.card:hover .card__veil,
.card:focus-within .card__veil{opacity:1}
.card__veil p{margin:0;font-size:14px;line-height:1.42;color:var(--ink)}
.card__cta{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);
   border-top:1px solid rgba(9,11,11,.25);padding-top:12px;
}

.card__meta{display:flex;flex-direction:column;gap:7px}
.card__title{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(20px,2vw,29px);
  letter-spacing:-.055em;text-transform:none;line-height:1;
}

/* touch devices get no hover, so the logline lives under the poster */
.card__logline{
  display:none;margin:0;font-size:14.5px;line-height:1.45;color:var(--ink-2);
}
@media (hover:none){
  .card__veil{display:none}
  .card__logline{display:block}
}

/* ---------- project page ---------- */

.proj-head{
  display:grid;grid-template-columns:1fr 360px;gap:clamp(28px,5vw,60px);
   padding-top:clamp(64px,9vw,112px);
  padding-bottom:clamp(32px,4.5vw,52px);
}
@media (max-width:900px){.proj-head{grid-template-columns:1fr}}

.proj-title{
  margin:0;
   font-family:var(--f-display);font-weight:500;
   font-size:clamp(52px,9vw,112px);
   line-height:.86;letter-spacing:-.07em;text-transform:none;
  text-wrap:balance;
}
.proj-tagline{
   margin:0;font-size:clamp(18px,2vw,25px);line-height:1.25;
  max-width:42ch;color:var(--ink);
}
.proj-head__left{display:flex;flex-direction:column;gap:clamp(16px,2vw,24px)}

.specs{display:flex;flex-direction:column;gap:20px;margin:0;padding-top:8px}
.spec{display:flex;flex-direction:column;gap:5px;border-top:1px solid var(--rule);padding-top:12px}
.spec:first-child{border-top-color:var(--rule-strong)}
.spec dd{margin:0;font-family:var(--f-display);font-size:15px;font-weight:400;line-height:1.35}
.spec dt{margin:0}

.keyart{
  width:100%;aspect-ratio:16/9;object-fit:cover;
  background:var(--surface);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
@media (max-width:760px){.keyart{aspect-ratio:4/5}}

.synopsis{
  display:grid;grid-template-columns:280px 1fr;gap:clamp(20px,5vw,60px);
  padding-top:clamp(48px,7vw,84px);padding-bottom:clamp(44px,6vw,72px);
  border-bottom:1px solid var(--rule);
}
@media (max-width:900px){.synopsis{grid-template-columns:1fr;gap:18px}}
.synopsis__body{display:flex;flex-direction:column;gap:20px;max-width:66ch}
.synopsis__body p{margin:0;font-size:clamp(16.5px,1.5vw,19px);line-height:1.58}

.gallery{padding-top:clamp(40px,6vw,68px);padding-bottom:clamp(40px,6vw,68px)}
.gallery__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:18px}
@media (max-width:760px){.gallery__grid{grid-template-columns:1fr}}
.gallery__grid img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--surface);border:1px solid var(--rule)}

.next{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding-top:clamp(36px,5vw,56px);padding-bottom:clamp(36px,5vw,56px);
  border-top:1px solid var(--rule-strong);border-bottom:1px solid var(--rule-strong);
}
.next__title{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(30px,5vw,58px);letter-spacing:-.06em;text-transform:none;line-height:1;
  transition:opacity .2s ease;
}
.next:hover .next__title{opacity:.6}

/* ---------- company ---------- */

.company{
  display:grid;grid-template-columns:1fr 420px;gap:clamp(28px,6vw,80px);
  padding-top:clamp(56px,8vw,96px);padding-bottom:clamp(44px,6vw,72px);
}
@media (max-width:980px){.company{grid-template-columns:1fr}}
.company__left{display:flex;flex-direction:column;gap:clamp(20px,3vw,30px)}
.company__lede{margin:0;font-size:clamp(24px,2.8vw,36px);line-height:1.14;letter-spacing:-.055em;max-width:27ch}
.company__body{display:flex;flex-direction:column;gap:18px;max-width:62ch}
.company__body p{margin:0;font-size:16px;line-height:1.55;color:var(--ink-2)}
.company__portrait{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--surface);border:1px solid var(--rule)}

.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);padding-bottom:clamp(56px,8vw,88px)}
@media (max-width:840px){.facts{grid-template-columns:1fr}}
.fact{display:flex;flex-direction:column;gap:9px;border-top:1px solid var(--rule-strong);padding-top:14px}
.fact span:last-child{font-size:16px;line-height:1.5}

.contact{
  display:flex;flex-direction:column;gap:16px;
  padding-top:clamp(52px,7vw,80px);padding-bottom:clamp(52px,7vw,80px);
  border-top:1px solid var(--rule-strong);border-bottom:1px solid var(--rule-strong);
}
.contact__mail{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(28px,5.2vw,64px);letter-spacing:-.065em;line-height:1;
  word-break:break-word;
  transition:opacity .2s ease;
}
.contact__mail:hover{opacity:.6}

/* ---------- footer ---------- */

.site-foot{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(22px,3vw,40px);
  padding-top:clamp(44px,6vw,64px);padding-bottom:clamp(44px,6vw,64px);
}
@media (max-width:760px){.site-foot{grid-template-columns:1fr}}
.foot-col{display:flex;flex-direction:column;gap:9px}
.foot-col a{font-size:16px;transition:opacity .2s ease}
.foot-col a:hover{opacity:.6}

/* ---------- motion ---------- */

.reveal{opacity:0;transform:translateY(14px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s cubic-bezier(.22,.61,.36,1)}

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