/* ============================================================
   Anna-Katharina Schubert — Director Portfolio
   Shared stylesheet
   ============================================================ */

/* ---------- self-hosted fonts (latin subset) ---------- */
@font-face{
  font-family:'Caveat';
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url("fonts/caveat.woff2") format('woff2');
}
@font-face{
  font-family:'Tenor Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("fonts/tenor-sans-400.woff2") format('woff2');
}
@font-face{
  font-family:'Biryani';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("fonts/biryani-400.woff2") format('woff2');
}
@font-face{
  font-family:'Biryani';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("fonts/biryani-600.woff2") format('woff2');
}
@font-face{
  font-family:'Biryani';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("fonts/biryani-700.woff2") format('woff2');
}

:root{
  --bg:#0e0b0a;
  --bg-panel:#1a1413;
  --ink:#f2f1eb;
  --ink-dim:#b3a69c;
  --accent:#7b8d73;        /* sage green — primary accent (dark mode) */
  --accent-soft:rgba(123,141,115,0.35);
  --accent-2:#d18181;      /* dusty rose — secondary accent */
  --line:rgba(242,241,235,0.13);
  --ease:cubic-bezier(.22,.61,.36,1);
}
:root[data-theme="light"]{
  --bg:#f2f1eb;
  --bg-panel:#e6e1d4;
  --ink:#241614;
  --ink-dim:#6e5f58;
  --accent:#641212;        /* maroon — primary accent (light mode) */
  --accent-soft:rgba(100,18,18,0.25);
  --accent-2:#7b8d73;      /* sage green — secondary accent */
  --line:rgba(36,22,20,0.13);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Biryani',sans-serif;
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
  position:relative;
  min-height:100vh;
  transition:background-color .3s var(--ease),color .3s var(--ease);
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:999;
  opacity:0.035;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:inherit;text-decoration:none;}
a,button{-webkit-tap-highlight-color:rgba(123,141,115,0.3);}
.skip-link{
  position:absolute;
  top:-60px;left:1rem;
  z-index:1001;
  background:var(--accent);
  color:var(--bg);
  padding:0.7rem 1.2rem;
  font-family:'Biryani',sans-serif;
  font-size:0.85rem;
  letter-spacing:0.04em;
  border-radius:2px;
  transition:top .2s var(--ease);
}
.skip-link:focus{top:1rem;}
img{display:block;max-width:100%;height:auto;}
ul{list-style:none;}
::selection{background:var(--accent-soft);color:var(--ink);}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

.eyebrow{
  font-family:'Caveat',cursive;
  font-size:1.5rem;
  color:var(--accent);
  display:inline-block;
  margin-bottom:0.4rem;
  font-weight:600;
}
h1,h2,h3{
  font-family:'Tenor Sans',sans-serif;
  font-weight:500;
  letter-spacing:0.02em;
  line-height:1.15;
}
.container{
  max-width:1120px;
  margin:0 auto;
  padding:0 6vw;
}
section{position:relative;z-index:1;}
main{display:block;}

/* ---------- scroll progress crack ---------- */
.crack-progress{
  position:fixed;
  top:0;left:0;right:0;
  height:3px;
  z-index:1000;
  background:transparent;
}
.crack-progress__fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  clip-path:polygon(0 40%,2% 0,4% 60%,6% 10%,8% 70%,10% 20%,12% 55%,14% 5%,16% 65%,18% 15%,20% 50%,22% 0,24% 60%,26% 25%,28% 70%,30% 10%,32% 55%,34% 0,36% 65%,38% 20%,40% 50%,42% 5%,44% 60%,46% 15%,48% 70%,50% 0,52% 55%,54% 20%,56% 65%,58% 10%,60% 50%,62% 0,64% 60%,66% 25%,68% 70%,70% 15%,72% 55%,74% 0,76% 65%,78% 20%,80% 50%,82% 5%,84% 60%,86% 15%,88% 70%,90% 0,92% 55%,94% 20%,96% 65%,98% 10%,100% 50%,100% 100%,0 100%);
  transition:width 0.12s linear;
}

/* ---------- nav ---------- */
nav.sitenav{
  position:fixed;top:0;left:0;right:0;
  z-index:900;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.6rem 6vw;
  padding-top:calc(1.6rem + env(safe-area-inset-top,0px));
  background:transparent;
  transition:background 0.4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
nav.sitenav::before{
  content:"";
  position:absolute;
  left:0;right:0;
  bottom:100%;
  height:100vh;
  background:var(--bg);
}
nav.sitenav.scrolled{
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.nav__name{
  display:flex;
  align-items:center;
  gap:0.6rem;
  font-family:'Tenor Sans',sans-serif;
  font-size:1rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--ink);
}
.nav__mark{
  height:22px;
  width:auto;
  display:block;
}
.nav__mark--light{display:none;}
:root[data-theme="light"] .nav__mark--dark{display:none;}
:root[data-theme="light"] .nav__mark--light{display:block;}
.nav__links{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  gap:2.2rem;
}
.nav__contact-mobile{display:none;}
.nav__links a{
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-dim);
  transition:color .3s var(--ease);
  position:relative;
}
.nav__links a:hover,
.nav__links a[aria-current="page"]{color:var(--ink);}
.nav__links a[aria-current="page"]::after{
  content:"";
  position:absolute;left:0;right:0;bottom:-6px;
  height:1px;
  background:var(--accent);
}
.nav__cta{
  font-size:0.75rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink-dim);
  border:1px solid var(--line);
  padding:0.55rem 1.1rem;
  border-radius:2px;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.nav__cta:hover{border-color:var(--accent);color:var(--accent);}
.nav__right{
  display:flex;
  align-items:center;
  gap:1rem;
}
.theme-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;height:34px;
  background:none;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--ink-dim);
  cursor:pointer;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent);}
.theme-toggle__icon{width:16px;height:16px;}
.theme-toggle__icon--moon{display:none;}
:root[data-theme="light"] .theme-toggle__icon--sun{display:none;}
:root[data-theme="light"] .theme-toggle__icon--moon{display:block;}
.nav__toggle{
  display:none;
  background:none;border:none;color:var(--ink);
  cursor:pointer;
  width:24px;height:18px;
  padding:0;
  position:relative;
}
.nav__toggle-bar{
  position:absolute;
  left:0;right:0;
  height:2px;
  background:var(--ink);
  border-radius:1px;
  transition:transform .35s var(--ease),opacity .35s var(--ease),top .35s var(--ease);
}
.nav__toggle-bar:nth-child(1){top:0;}
.nav__toggle-bar:nth-child(2){top:8px;}
.nav__toggle-bar:nth-child(3){top:16px;}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1){top:8px;transform:rotate(45deg);}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2){opacity:0;}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3){top:8px;transform:rotate(-45deg);}

/* ---------- page hero (used on inner pages) ---------- */
.page-hero{
  padding-top:10rem;
  padding-bottom:4rem;
  min-height:40vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.page-hero h1{
  font-size:clamp(2.2rem,6vw,3.8rem);
  letter-spacing:0.02em;
  text-transform:uppercase;
}
.page-hero p{
  margin-top:1.2rem;
  max-width:44ch;
  color:var(--ink-dim);
  font-size:1.05rem;
}

/* ---------- hero (home) ---------- */
.hero{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:8rem 10vw 4rem;
  position:relative;
}
.hero__eyebrow{
  font-family:'Caveat',cursive;
  font-size:1.8rem;
  color:var(--accent);
  margin-bottom:0.6rem;
  opacity:0;
  transform:translateY(14px);
  animation:riseIn 0.9s var(--ease) 0.15s forwards;
}
.hero h1{
  font-size:clamp(1.7rem,8.2vw,5.2rem);
  letter-spacing:0.03em;
  text-transform:uppercase;
  line-height:1.05;
  opacity:0;
  transform:translateY(18px);
  animation:riseIn 1s var(--ease) 0.35s forwards;
}
.hero__role{
  margin-top:1.1rem;
  font-size:0.95rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink-dim);
  opacity:0;
  transform:translateY(14px);
  animation:riseIn 0.9s var(--ease) 0.6s forwards;
}
.hero__tag{
  margin-top:1.8rem;
  max-width:36ch;
  font-size:1.15rem;
  font-weight:300;
  color:var(--ink);
  opacity:0;
  transform:translateY(14px);
  animation:riseIn 0.9s var(--ease) 0.8s forwards;
}
.hero__crack{
  margin-top:2.6rem;
  width:220px;
  height:14px;
  opacity:0;
  animation:fadeIn 1s var(--ease) 1.05s forwards;
}
.hero__crack path{
  stroke-dasharray:400;
  stroke-dashoffset:400;
  animation:draw 1.3s var(--ease) 1.15s forwards;
}
.scroll-cue{
  position:absolute;
  bottom:2.4rem;left:50%;
  transform:translateX(-50%);
  font-size:0.7rem;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--ink-dim);
  opacity:0;
  animation:fadeIn 1s var(--ease) 1.6s forwards;
}
.scroll-cue::after{
  content:"";
  display:block;
  width:1px;height:34px;
  background:linear-gradient(var(--accent),transparent);
  margin:0.6rem auto 0;
  animation:pulseLine 2.2s ease-in-out infinite;
}

@keyframes riseIn{to{opacity:1;transform:translateY(0);}}
@keyframes fadeIn{to{opacity:1;}}
@keyframes draw{to{stroke-dashoffset:0;}}
@keyframes pulseLine{0%,100%{opacity:0.3;}50%{opacity:1;}}

/* ---------- reveal on scroll ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 0.9s var(--ease),transform 0.9s var(--ease);
}
.reveal.is-visible{opacity:1;transform:translateY(0);}
.reveal-delay-1{transition-delay:0.12s;}
.reveal-delay-2{transition-delay:0.24s;}
.reveal-delay-3{transition-delay:0.36s;}

/* ---------- about / photo+text split ---------- */
.split{padding:6rem 0 8rem;}
.split__grid{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:0;
}
.split__photo-wrap{
  position:relative;
  padding-right:4rem;
  border-right:1px solid var(--line);
}
.split__photo-wrap img{
  width:100%;
  filter:grayscale(0.2) contrast(1.05);
  border:1px solid var(--line);
}
.split__text{
  padding-left:4rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.split__text h2{
  font-size:clamp(1.8rem,3vw,2.6rem);
  margin-bottom:1.4rem;
}
.split__text p{
  color:var(--ink-dim);
  font-size:1.02rem;
  margin-bottom:1.2rem;
  max-width:52ch;
}
.pull{
  margin-top:1.6rem;
  font-family:'Tenor Sans',sans-serif;
  font-style:italic;
  font-size:1.35rem;
  color:var(--ink);
  border-left:2px solid var(--accent);
  padding-left:1.2rem;
  max-width:46ch;
}

/* ---------- work / featured film ---------- */
.work{padding:6rem 0 8rem;}
.work--bordered{border-top:1px solid var(--line);}
.work__grid{
  display:grid;
  grid-template-columns:0.62fr 1.38fr;
  gap:4.5rem;
  align-items:start;
}
.work__poster img{
  width:100%;
  border:1px solid var(--line);
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.6);
}
.work__title{
  font-family:'Caveat',cursive;
  font-size:3.4rem;
  color:var(--ink);
  line-height:1;
  margin-bottom:0.3rem;
}
.work__meta{
  font-size:0.8rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:1.6rem;
}
.work__synopsis{
  font-size:1.08rem;
  color:var(--ink);
  max-width:56ch;
  margin-bottom:2.2rem;
}
.work__castlabel{
  font-size:0.75rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink-dim);
  margin-bottom:0.9rem;
}
.cast-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.7rem 2rem;
  max-width:44rem;
}
.cast-list li{
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  padding-bottom:0.55rem;
  font-size:0.95rem;
}
.cast-list li span:first-child{color:var(--ink);}
.cast-list li span:last-child{color:var(--ink-dim);font-style:italic;font-family:'Tenor Sans',sans-serif;}

.links-row{
  display:flex;
  gap:1.6rem;
  margin-top:2rem;
  flex-wrap:wrap;
}
.links-row a{
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-dim);
  border-bottom:1px solid var(--line);
  padding-bottom:0.2rem;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.links-row a:hover{color:var(--accent);border-color:var(--accent);}

/* still strip */
.still-strip{
  margin-top:4.5rem;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.still-strip img{
  width:100%;height:100%;
  object-fit:cover;
  filter:saturate(0.9) contrast(1.05);
}
.still-strip figure{
  position:relative;
  overflow:hidden;
  background:var(--bg-panel);
  height:100%;
}
.still-strip figcaption{
  position:absolute;
  bottom:0.9rem;left:1rem;
  font-size:0.7rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink);
  background:rgba(11,12,13,0.55);
  padding:0.3rem 0.6rem;
}

/* ---------- statement ---------- */
.statement{
  padding:8rem 0;
  background:var(--bg-panel);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.statement .container{max-width:820px;}
.statement blockquote{
  font-family:'Tenor Sans',sans-serif;
  font-size:clamp(1.3rem,2.6vw,1.7rem);
  font-weight:400;
  line-height:1.55;
  color:var(--ink);
}
.statement blockquote p{margin-bottom:1.4rem;}
.statement__sign{
  margin-top:2.2rem;
  text-align:right;
  font-family:'Caveat',cursive;
  font-size:2.2rem;
  color:var(--accent);
}

/* ---------- recognition ---------- */
.recognition{padding:7rem 0;}
.recognition--tight{padding:5rem 0;}
.recognition__eyebrow-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:3.5rem;
  flex-wrap:wrap;
  gap:1rem;
}
.recognition__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2.5rem;
}
.rec-card{
  border-top:1px solid var(--line);
  padding-top:1.6rem;
}
.rec-card svg{width:34px;height:34px;margin-bottom:1.1rem;color:var(--accent);}
.rec-card h3{
  font-size:1.15rem;
  font-weight:500;
  margin-bottom:0.5rem;
  line-height:1.3;
}
.rec-card p{
  color:var(--ink-dim);
  font-size:0.92rem;
}

/* ---------- contact ---------- */
.contact-section{
  padding:9rem 0 8rem;
  text-align:center;
  position:relative;
}
.contact-section--center{
  min-height:100svh;
  padding:8rem 0;
  display:flex;
  align-items:center;
}
.contact-section--center .container{width:100%;}
.contact-section h1,.contact-section h2{
  font-size:clamp(2rem,5vw,3.2rem);
  max-width:16ch;
  margin:0 auto 1.4rem;
}
.contact-section p{
  color:var(--ink-dim);
  max-width:40ch;
  margin:0 auto 2.6rem;
}
.contact-meta{
  margin-top:3rem;
  display:flex;
  justify-content:center;
  gap:3rem;
  flex-wrap:wrap;
  font-size:0.85rem;
  color:var(--ink-dim);
}
.contact-meta strong{
  display:block;
  color:var(--ink);
  font-family:'Tenor Sans',sans-serif;
  font-size:1.05rem;
  font-weight:500;
  margin-bottom:0.3rem;
}
.btn-accent{
  display:inline-block;
  border:1px solid var(--accent);
  color:var(--accent);
  padding:1rem 2.4rem;
  font-size:0.85rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  border-radius:2px;
  transition:background .35s var(--ease),color .35s var(--ease);
}
.btn-accent:hover{background:var(--accent);color:var(--bg);}
.btn-accent[type="submit"]{background:none;border-color:var(--accent);cursor:pointer;}

/* ---------- contact form ---------- */
.contact-form{
  text-align:left;
  max-width:560px;
  margin:3.5rem auto 0;
  display:flex;
  flex-direction:column;
  gap:1.6rem;
}
.form-row{display:flex;flex-direction:column;gap:0.5rem;}
.form-row label{font-size:0.78rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-dim);}
.form-row input,.form-row select,.form-row textarea{
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line);
  padding:0.6rem 0.1rem;
  font-family:'Biryani',sans-serif;
  font-size:1rem;
  color:var(--ink);
  transition:border-color .3s var(--ease);
}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{
  outline:none;
  border-color:var(--accent);
}
.form-row select{cursor:pointer;}
.form-row select option{background:var(--bg);color:var(--ink);}
.form-row textarea{resize:vertical;min-height:120px;}
.form-row--error input,.form-row--error select,.form-row--error textarea{border-color:#b3454a;}
.form-row__error{font-size:0.8rem;color:#b3454a;}
.form-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-status{
  margin:0 auto 1.5rem;
  padding:0.9rem 1.2rem;
  border-radius:2px;
  font-size:0.92rem;
  max-width:560px;
  text-align:left;
}
.form-status--ok{background:rgba(78,154,91,0.12);color:#4e9a5b;border:1px solid rgba(78,154,91,0.3);}
.form-status--error{background:rgba(179,69,74,0.12);color:#b3454a;border:1px solid rgba(179,69,74,0.3);}

/* ---------- legal pages (impressum / privacy) ---------- */
.legal{
  padding-top:10rem;
  padding-bottom:7rem;
}
.legal h1{
  font-size:clamp(2rem,5vw,3rem);
  margin-bottom:0.6rem;
}
.legal .legal__updated{
  color:var(--ink-dim);
  font-size:0.85rem;
  margin-bottom:3.5rem;
}
.legal__block{
  max-width:68ch;
  margin-bottom:2.6rem;
}
.legal__block h2{
  font-size:1.3rem;
  color:var(--accent);
  margin-bottom:0.8rem;
  font-weight:500;
}
.legal__block p, .legal__block li{
  color:var(--ink-dim);
  font-size:0.98rem;
  margin-bottom:0.7rem;
}
.legal__block ul{padding-left:1.2rem;list-style:disc;}
.legal__block a{color:var(--accent);border-bottom:1px solid transparent;}
.legal__block a:hover{border-color:var(--accent);}
.legal__placeholder{
  color:var(--accent-2);
  font-style:italic;
}
.legal__note{
  margin-top:4rem;
  padding:1.4rem 1.6rem;
  border:1px solid var(--line);
  border-left:2px solid var(--accent-2);
  max-width:68ch;
  font-size:0.88rem;
  color:var(--ink-dim);
}

/* ---------- footer ---------- */
footer.sitefoot{
  padding:2.6rem 6vw 3rem;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1rem;
  font-size:0.78rem;
  letter-spacing:0.04em;
  color:var(--ink-dim);
}
.sitefoot__links{
  display:flex;
  gap:1.6rem;
}
.sitefoot__links a{transition:color .3s var(--ease);}
.sitefoot__links a:hover{color:var(--accent);}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .split__grid{grid-template-columns:1fr;}
  .split__photo-wrap{border-right:none;border-bottom:1px solid var(--line);padding-right:0;padding-bottom:3rem;margin-bottom:3rem;}
  .split__text{padding-left:0;}
  .work__grid{grid-template-columns:1fr;gap:2.5rem;}
  .work__poster{max-width:280px;}
  .still-strip{grid-template-columns:1fr;}
  .still-strip figure{height:60vw;}
  .recognition__grid{grid-template-columns:1fr;gap:2rem;}
  .cast-list{grid-template-columns:1fr;}
  nav.sitenav{padding:1.2rem 6vw;padding-top:calc(1.2rem + env(safe-area-inset-top,0px));}
  .nav__links{
    position:fixed;
    top:0;right:0;left:auto;
    height:100vh;
    width:min(58vw,260px);
    background:var(--bg);
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    gap:1.8rem;
    padding:2rem 3rem;
    transform:translateX(100%);
    transition:transform .4s var(--ease);
    border-left:1px solid var(--line);
  }
  .nav__links.open{transform:translateX(0);}
  .nav__links a{font-size:0.95rem;}
  .nav__contact-mobile{display:block;}
  .nav__cta{display:none;}
  .nav__toggle{display:block;z-index:901;}
  .contact-meta{gap:2rem;flex-direction:column;}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;}
}