/* Self-hosted fonts (variable woff2, latin) — served from assets/fonts/ */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('assets/fonts/inter.woff2') format('woff2');
}
@font-face{
  font-family:'Yanone Kaffeesatz';
  font-style:normal;
  font-weight:200 700;
  font-display:swap;
  src:url('assets/fonts/yanonekaffeesatz.woff2') format('woff2');
}

:root{
    --ink:#161412;
    --ink-soft:#6b6660;
    --red:#f5241a;
    --line:rgba(22,20,18,.16);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  body{
    background:#ffffff;
    color:var(--ink);
    font-family:'Inter',-apple-system,'Helvetica Neue',sans-serif;
    -webkit-font-smoothing:antialiased;
  }

  /* header: brand left · contact icons centered · language right */
  header{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    padding:clamp(1.25rem,3vw,2rem) clamp(1.5rem,5vw,3.5rem);
  }
  .brand{justify-self:start}
  .brand img{width:clamp(7.5rem,12vw,10rem);height:auto;display:block}
  .top-social{
    justify-self:center;
    display:flex;gap:1.5rem;
  }
  .top-social a{
    color:var(--ink-soft);display:inline-flex;align-items:center;
    transition:color .3s ease;
  }
  .top-social a:hover,.top-social a:focus-visible{color:var(--red)}
  .top-social svg{width:1.0625rem;height:1.0625rem;display:block}
  .lang{
    justify-self:end;
    font-size:.6875rem;letter-spacing:.22em;font-weight:500;
    color:var(--ink-soft);text-transform:uppercase;
  }
  .lang a{color:var(--ink-soft);text-decoration:none;transition:color .3s ease}
  .lang a:hover{color:var(--red)}
  .lang .on{color:var(--ink)}
  .lang .sep{margin:0 .5em;color:var(--line)}

  /* hero */
  .hero{
    min-height:62svh;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    text-align:center;padding:2rem 1.5rem;
  }
  .hero .kicker{
    font-size:.6875rem;letter-spacing:.28em;text-transform:uppercase;
    color:var(--ink-soft);margin-bottom:1.75rem;
  }
  .hero .kicker::before{
    content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
    background:var(--red);vertical-align:middle;margin-right:.9em;
    transform:translateY(-1px);
  }
  .hero h1{
    font-family:'Yanone Kaffeesatz','Arial Narrow',sans-serif;
    font-weight:300;
    font-size:clamp(2.695rem,8.085vw,5.775rem);
    letter-spacing:.015em;line-height:1.02;
  }
  .hero .sub{
    margin-top:1.5rem;font-size:.75rem;letter-spacing:.18em;
    text-transform:uppercase;color:var(--ink-soft);
  }

  /* works index */
  .works{
    max-width:52rem;margin:0 auto;
    padding:clamp(3rem,8vw,5.5rem) clamp(1.5rem,5vw,3.5rem);
  }
  .works .label{
    font-size:.6875rem;letter-spacing:.28em;text-transform:uppercase;
    color:var(--ink-soft);padding-bottom:1.25rem;
    border-bottom:1px solid var(--line);
  }
  .work{border-bottom:1px solid var(--line)}
  .work-head{
    display:flex;align-items:baseline;gap:1.5rem;width:100%;
    padding:1.5rem 0;background:none;border:0;cursor:pointer;
    color:inherit;font:inherit;text-align:left;
  }
  .work-head .n{
    font-size:.6875rem;letter-spacing:.2em;color:var(--ink-soft);
    min-width:2em;
  }
  .work-head .t{
    font-family:'Yanone Kaffeesatz','Arial Narrow',sans-serif;
    font-weight:400;font-size:clamp(1.625rem,3.6vw,2.25rem);
    letter-spacing:.01em;
    line-height:1.05;flex:1;
    transition:color .35s ease;
  }
  .work-head .meta{
    font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;
    color:var(--ink-soft);white-space:nowrap;
  }
  .work-head .tog{flex:none;width:.875rem;height:.875rem;position:relative;align-self:center}
  .work-head .tog::before,.work-head .tog::after{
    content:"";position:absolute;background:var(--ink-soft);
    transition:transform .4s cubic-bezier(.22,1,.36,1);
  }
  .work-head .tog::before{left:0;top:calc(50% - .5px);width:100%;height:1px}
  .work-head .tog::after{top:0;left:calc(50% - .5px);height:100%;width:1px}
  .work.open .tog::after{transform:rotate(90deg)}
  .work-head:hover .t{color:var(--red)}
  .work-head:hover .n{color:var(--red)}

  /* expandable detail: poster bottom-left · credits bottom-right */
  .work-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.22,1,.36,1)}
  .work.open .work-body{grid-template-rows:1fr}
  .work-clip{overflow:hidden;min-height:0}
  .work-inner{
    display:flex;flex-direction:column;gap:1.75rem;
    padding:.5rem 0 2.5rem;
  }
  .work-main{display:flex;align-items:center;gap:2.5rem}
  .poster{
    position:relative;flex:none;width:11.25rem;
    background:var(--ink);border:0;padding:0;cursor:pointer;
  }
  .poster img{width:100%;height:auto;display:block}
  .poster .play{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:2.75rem;height:2.75rem;border-radius:50%;
    background:rgba(22,20,18,.72);
    transition:background .3s ease,transform .3s ease;
  }
  .poster .play::before{
    content:"";position:absolute;left:50%;top:50%;
    transform:translate(-38%,-50%);
    border-left:.8rem solid #fff;
    border-top:.5rem solid transparent;border-bottom:.5rem solid transparent;
  }
  .poster:hover .play{background:var(--red);transform:translate(-50%,-50%) scale(1.08)}
  .credits{
    margin:0;display:flex;flex-direction:column;gap:.9rem;
  }
  .credits .cr{display:grid;grid-template-columns:7.5rem 1fr;gap:0 1.25rem}
  .credits dt{
    font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--ink-soft);padding-top:.2rem;
  }
  .credits dd{margin:0;font-size:.875rem;line-height:1.55}
  .syn-block{max-width:36rem}
  .syn-label{
    font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--ink-soft);margin-bottom:.45rem;
  }
  .syn{margin:0;font-size:.9375rem;line-height:1.6}

  /* vimeo lightbox — vertical-native frame for vertical films */
  .lightbox{
    position:fixed;inset:0;z-index:60;
    background:rgba(22,20,18,.92);
    display:flex;align-items:center;justify-content:center;
    opacity:0;pointer-events:none;transition:opacity .3s ease;
  }
  .lightbox.open{opacity:1;pointer-events:auto}
  .lb-frame{
    position:relative;width:min(62rem,92vw);aspect-ratio:16/9;
    border-radius:10px;overflow:hidden;background:#000;
    transform:scale(.96);transition:transform .3s ease;
  }
  .lightbox.open .lb-frame{transform:scale(1)}
  .lb-frame.vertical{width:auto;height:min(86vh,800px);aspect-ratio:9/16}
  .lb-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  .lb-close{
    position:absolute;top:1.25rem;right:1.5rem;
    background:none;border:0;color:#fff;font-size:2rem;line-height:1;cursor:pointer;
    transition:color .3s;
  }
  .lb-close:hover{color:var(--red)}

  /* footer */
  footer{
    border-top:1px solid var(--line);
    padding:clamp(2.5rem,6vw,4rem) clamp(1.5rem,5vw,3.5rem) 2rem;
    text-align:center;
  }
  .social{display:flex;flex-wrap:wrap;justify-content:center;gap:1.75rem}
  .social + .social{margin-top:1.375rem}
  .social a{
    color:var(--ink-soft);display:inline-flex;align-items:center;
    transition:color .3s ease;
  }
  .social a:hover,.social a:focus-visible{color:var(--red)}
  .social svg{width:1.125rem;height:1.125rem;display:block}
  .legal{
    margin-top:2.5rem;font-size:.625rem;letter-spacing:.18em;
    text-transform:uppercase;color:var(--ink-soft);
  }

  @media (max-width:560px){
    header{grid-template-columns:auto 1fr auto}
    .top-social{gap:1.125rem}
    .top-social svg{width:.9375rem;height:.9375rem}
    .work-head{flex-wrap:wrap;row-gap:.4rem}
    .work-head .t{flex:1 1 calc(100% - 3.5rem);line-height:1.12}
    .work-head .meta{width:100%;padding-left:3.5rem}
    .work-main{gap:1.25rem;align-items:flex-start}
    .poster{width:8.75rem}
    .credits .cr{grid-template-columns:1fr;gap:.15rem}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none!important}}