/* ============================================================
   Redolto — film studio
   Palette is deliberately monochrome. The only colour on this
   site comes from the frames themselves.
   ============================================================ */

:root{
  --bg:      #0A0A0A;
  --fg:      #FFFFFF;
  --muted:   #8A8A8A;
  --dim:     #5A5A5A;
  --line:    rgba(255,255,255,.13);
  --ease:    cubic-bezier(.22,1,.36,1);

  --gut:     clamp(20px, 5vw, 72px);
  --maxw:    1440px;
}

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

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

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

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

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gut);
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:#fff; color:#000; padding:12px 18px;
}
.skip:focus{ left:12px; top:12px; }

:focus-visible{ outline:1px solid #fff; outline-offset:4px; }

/* ---------- small caps label ---------- */
.eyebrow{
  margin:0;
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:11px;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--gut);
  transition:padding .4s var(--ease), background-color .4s var(--ease);
}
/* Past the hero the nav floats over full-bleed frames, some of them
   near-white. A tinted blur keeps white type legible on every one. */
.nav.is-stuck{
  padding-block:14px;
  background:rgba(10,10,10,.62);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
}
@supports not (backdrop-filter: blur(1px)){
  .nav.is-stuck{ background:rgba(10,10,10,.86); }
}

.nav__mark{
  font-size:13px; font-weight:600;
  letter-spacing:.34em;
}
.nav__links{ display:flex; gap:clamp(18px,3vw,40px); }
.nav__links a{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; opacity:.72;
  transition:opacity .3s var(--ease);
}
.nav__links a:hover{ opacity:1; }

@media (max-width:520px){
  .nav__links a:nth-child(2){ display:none; }
}

/* ============================================================
   HERO — the reel cuts itself
   ============================================================ */
.hero{
  position:relative;
  height:100svh; min-height:560px;
  display:flex; align-items:flex-end;
  overflow:hidden;
}

/* One frame, held. No drift, no pan, no cycle. */
.hero__frame{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 42%;
}

/* Legibility floor under the type. No colour cast — just density. */
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(10,10,10,.94) 0%, rgba(10,10,10,.62) 26%, rgba(10,10,10,.18) 52%, rgba(10,10,10,0) 74%),
    linear-gradient(to bottom, rgba(10,10,10,.55) 0%, rgba(10,10,10,0) 26%);
}

.grain{
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

.hero__body{
  position:relative;
  width:100%; max-width:var(--maxw);
  margin-inline:auto;
  padding:0 var(--gut) clamp(64px,10vh,120px);
}

.hero__title{
  margin:.18em 0 0;
  font-size:clamp(56px, 15.5vw, 260px);
  font-weight:500;
  line-height:.86;
  letter-spacing:-.02em;
  /* optical tracking so the wordmark reads as a mark, not a word */
  padding-right:.06em;
}

/* The hero label sits over open sky, not over the scrim's dense floor —
   grey is not enough there. */
.hero .eyebrow{
  color:rgba(255,255,255,.74);
  text-shadow:0 1px 14px rgba(0,0,0,.6);
}

.hero__line{
  margin:clamp(18px,2.4vh,30px) 0 0;
  max-width:32ch;
  font-size:clamp(15px,1.35vw,19px);
  line-height:1.5;
  color:rgba(255,255,255,.88);
  text-shadow:0 1px 16px rgba(0,0,0,.5);
}
.hero__line em{
  font-family:"Instrument Serif", Georgia, serif;
  font-style:italic;
  font-size:1.22em;
  color:#fff;
}

/* film-craft detail, bottom right */
.hero__meta{
  position:absolute; right:var(--gut); bottom:clamp(64px,10vh,120px);
  display:flex; flex-direction:column; align-items:flex-end; gap:6px;
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:11px; letter-spacing:.10em;
  color:rgba(255,255,255,.55);
}

@media (max-width:720px){ .hero__meta{ display:none; } }

.hero__cue{
  position:absolute; left:50%; bottom:26px; translate:-50% 0;
  width:1px; height:44px; overflow:hidden;
  background:rgba(255,255,255,.18);
}
.hero__cue span{
  display:block; width:1px; height:14px; background:#fff;
  animation:cue 2.6s var(--ease) infinite;
}
@keyframes cue{
  0%{ transform:translateY(-16px); opacity:0; }
  30%{ opacity:1; }
  100%{ transform:translateY(46px); opacity:0; }
}

/* ============================================================
   STUDIO
   ============================================================ */
.studio{ padding:clamp(96px,16vh,190px) 0 clamp(80px,12vh,140px); }

.statement{
  margin:.34em 0 0;
  font-size:clamp(38px, 7.2vw, 104px);
  font-weight:500;
  line-height:1.02;
  letter-spacing:-.033em;
  max-width:16ch;
}
.statement em{
  font-family:"Instrument Serif", Georgia, serif;
  font-style:italic;
  font-weight:400;
  letter-spacing:-.01em;
}

.studio__cols{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(36px,6vw,80px);
  margin-top:clamp(48px,8vh,88px);
  padding-top:clamp(32px,5vh,48px);
  border-top:1px solid var(--line);
}
@media (min-width:900px){
  .studio__cols{ grid-template-columns:1.15fr .85fr; }
}

.lede{
  margin:0;
  font-size:clamp(18px,1.8vw,24px);
  line-height:1.45;
  max-width:34ch;
  color:rgba(255,255,255,.88);
}

/* Second beat: steps down in size and weight so the first line keeps the
   floor and this reads as "and also", not as a second headline. */
.lede-sub{
  margin:clamp(20px,2.6vh,28px) 0 0;
  padding-top:clamp(18px,2.4vh,24px);
  border-top:1px solid var(--line);
  font-size:clamp(15px,1.15vw,17px);
  line-height:1.5;
  max-width:36ch;
  color:rgba(255,255,255,.62);
}

.facts{ margin:0; display:grid; gap:22px; align-content:start; }
.facts > div{ display:grid; gap:4px; }
.facts dt{
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:#767676;
}
.facts dd{ margin:0; font-size:15px; color:rgba(255,255,255,.9); }
.facts a{ border-bottom:1px solid var(--line); padding-bottom:1px; }
.facts a:hover{ border-color:#fff; }

/* ============================================================
   WORK
   ============================================================ */
.work{ padding-bottom:clamp(80px,12vh,140px); }
.work__head{ padding-bottom:clamp(22px,4vh,40px); }

.shot{ margin:0; position:relative; }
.shot img{ width:100%; }

.shot--full{ margin-bottom:clamp(10px,1.4vw,20px); }
.shot--full img{
  height:clamp(320px, 76vh, 860px);
  object-fit:cover;
}

.pair{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(10px,1.4vw,20px);
  margin-bottom:clamp(10px,1.4vw,20px);
}
@media (min-width:860px){
  .pair{ grid-template-columns:1fr 1fr; }
  .pair img{ height:clamp(280px,46vh,520px); object-fit:cover; }
  /* one row breaks the grid so the page never reads as a template */
  .pair--offset{ align-items:start; }
  .pair--offset .shot:first-child{ margin-top:clamp(24px,5vw,72px); }
}

/* Frames run from near-black space to a near-white chamber, so the caption
   carries its own corner wash instead of relying on the image being dark. */
.shot::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:min(260px,42%); height:104px;
  background:linear-gradient(to top right, rgba(0,0,0,.6), rgba(0,0,0,0) 72%);
  pointer-events:none;
}

.shot figcaption{
  position:absolute; left:clamp(14px,1.6vw,22px); bottom:clamp(12px,1.4vw,18px);
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:11px; letter-spacing:.14em;
  color:rgba(255,255,255,.75);
  text-shadow:0 1px 3px rgba(0,0,0,.6);
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{
  padding:clamp(96px,18vh,200px) 0 clamp(72px,10vh,120px);
  border-top:1px solid var(--line);
}
.mailto{
  display:block;
  margin-top:.3em;
  font-size:clamp(30px, 6.6vw, 96px);
  font-weight:500;
  letter-spacing:-.035em;
  line-height:1.04;
  word-break:break-word;
}
.mailto::after{
  content:"";
  display:block;
  height:1px;
  width:0;
  background:#fff;
  transition:width .55s var(--ease);
}
.mailto:hover::after{ width:100%; }

.contact__note{
  margin:clamp(22px,4vh,34px) 0 0;
  font-size:15px;
  color:var(--muted);
}

.contact__social{ margin:22px 0 0; }
.contact__social a{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 20px 10px 16px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:13px; letter-spacing:.02em;
  color:rgba(255,255,255,.86);
  transition:border-color .35s var(--ease), color .35s var(--ease), background-color .35s var(--ease);
}
.contact__social a:hover{
  border-color:#fff; color:#000; background:#fff;
}
.contact__social svg{ flex:none; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ border-top:1px solid var(--line); padding:26px 0 34px; }
.foot__row{
  display:flex; justify-content:space-between; gap:16px;
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--dim);
}
.foot__row a:hover{ color:#fff; }
@media (max-width:760px){ .foot__mid{ display:none; } }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
/* Scoped to .js so that if the script never runs the page is still
   fully readable instead of a wall of invisible elements. */
.js .rv{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
}
.js .rv.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .rv{ opacity:1; transform:none; transition:none; }
  .hero__cue span{ animation:none; }
}