:root{
    --bg:#110d0a;
    --bg-soft:#1c1613;
    --cream:#f4e8ce;
    --cream-dim:rgba(244,232,206,0.62);
    --pepper:#c8342f;
    --amber:#e3a94a;
    --teal:#4c8796;
    --stock:#2c1f15;
    --stock-light:#4a3521;
    --line: rgba(244,232,206,0.14);
    --band-h: clamp(40px, 6.2vw, 68px);
    --ease-premium: cubic-bezier(0.65, 0, 0.35, 1);
  }

  *{box-sizing:border-box;}
  html,body{margin:0; padding:0;}
  body{
    background:var(--bg);
    color:var(--cream);
    font-family:'Literata', serif;
  }

  ::selection{ background:var(--pepper); color:var(--cream); }

  .grain{
    position:fixed; inset:0; pointer-events:none; z-index:30;
    opacity:0.05; 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");
  }


  .sprocket-band{
    width:100%;
    height:var(--band-h);
    background-color:var(--stock);
    background-image:
      linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0) 35%, rgba(0,0,0,0.28) 100%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='68'%3E%3Crect x='13' y='24' width='20' height='20' rx='7' fill='%23000000' opacity='0.55'/%3E%3Crect x='12' y='22' width='20' height='20' rx='7' fill='%23110d0a'/%3E%3C/svg%3E");
    background-repeat:no-repeat, repeat-x;
    background-size:100% 100%, 46px 100%;
    background-position:center, left center;
    flex-shrink:0;
    z-index:25;
  }
  .sprocket-band.top{
    border-bottom:2px solid rgba(227,169,74,0.4);
    box-shadow:0 6px 18px -4px rgba(0,0,0,0.65);
  }
  .sprocket-band.bottom{
    border-top:2px solid rgba(227,169,74,0.4);
    box-shadow:0 -6px 18px -4px rgba(0,0,0,0.65);
  }
  .sprocket-band{ animation:sprocketDrift 5s linear infinite; }
  @keyframes sprocketDrift{
    from{ background-position:center, 0 center; }
    to{ background-position:center, -46px center; }
  }

  .flicker{
    position:fixed; inset:0; pointer-events:none; z-index:29;
    background:#000; opacity:0;
    animation:flicker 7s infinite;
  }
  @keyframes flicker{
    0%{opacity:0;} 3%{opacity:0.05;} 6%{opacity:0.01;} 9%{opacity:0.04;} 12%{opacity:0;}
    35%{opacity:0;} 38%{opacity:0.035;} 41%{opacity:0;}
    60%{opacity:0;} 63%{opacity:0.06;} 67%{opacity:0.01;} 70%{opacity:0;}
    100%{opacity:0;}
  }
  .light-leak{
    position:fixed; top:-25%; bottom:-25%; left:-30%; width:68%;
    z-index:28; pointer-events:none;
    background:radial-gradient(ellipse at center, rgba(227,169,74,0.62), rgba(200,52,47,0.24) 42%, transparent 74%);
    mix-blend-mode:screen; filter:blur(42px);
    animation:leakDrift 18s ease-in-out infinite;
  }
  @keyframes leakDrift{
    0%{ left:-30%; opacity:0.22; }
    25%{ left:-5%; opacity:0.62; }
    50%{ left:66%; opacity:0.28; }
    75%{ left:92%; opacity:0.58; }
    100%{ left:-30%; opacity:0.22; }
  }

  .chrome{
    position:fixed; left:0; right:0; top:var(--band-h);
    display:none; 
    justify-content:space-between; align-items:flex-start;
    padding:1.2rem clamp(1rem,4vw,2.75rem) 0;
    font-family:'JetBrains Mono', monospace;
    z-index:26; pointer-events:none;
  }
  .brand{
    display:flex; align-items:center; gap:0.55rem;
    letter-spacing:0.32em; font-size:0.72rem; text-transform:uppercase;
    color:var(--cream); pointer-events:auto;
  }
  .brand-mark{ width:24px; height:24px; flex-shrink:0; object-fit:contain; }
  .brand span{ color:var(--pepper); }
  .frame-counter{
    font-size:0.72rem; letter-spacing:0.22em; color:var(--cream-dim);
    font-variant-numeric:tabular-nums;
  }
  .progress-line{
    position:fixed; left:0; top:calc(var(--band-h) - 2px);
    height:2px; background:linear-gradient(90deg, var(--amber), var(--pepper));
    width:0%; z-index:27; display:none;
    transition:width 0.9s var(--ease-premium);
    box-shadow:0 0 10px rgba(227,169,74,0.5);
  }

  .nav-dots{
    position:fixed; right:clamp(1rem,3.5vw,2.75rem); top:50%;
    transform:translateY(-50%);
    display:none; flex-direction:column; gap:1rem;
    z-index:26;
  }
  .nav-dots button{
    width:8px; height:8px; padding:0; border-radius:50%;
    background:transparent; border:1px solid var(--cream-dim);
    cursor:pointer; transition:all 0.35s var(--ease-premium);
  }
  .nav-dots button:hover{ border-color:var(--amber); }
  .nav-dots button:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; }
  .nav-dots button.is-active{
    background:var(--amber); border-color:var(--amber);
    box-shadow:0 0 10px rgba(227,169,74,0.65);
    transform:scale(1.25);
  }

 
  #track{
    display:flex;
    flex-direction:column;
    width:100%;
  }
  .panel{
    width:100%;
    min-height:calc(100vh - 2 * var(--band-h));
    flex-shrink:0;
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    padding:clamp(2rem,6vw,4rem) clamp(1.25rem,5vw,4rem);
    text-align:center;
    position:relative;
    overflow:hidden;
  }
  .panel::before{
    content:""; position:absolute; inset:0; z-index:0; opacity:0.55;
  }
  .panel--hero::before{ background:radial-gradient(ellipse at 50% 20%, rgba(227,169,74,0.14), transparent 60%); }
  .panel--film::before{ background:radial-gradient(ellipse at 50% 50%, rgba(200,52,47,0.11), transparent 60%); }
  .panel--next::before{ background:radial-gradient(ellipse at 50% 50%, rgba(76,135,150,0.16), transparent 60%); }
  .panel--contact::before{ background:radial-gradient(ellipse at 50% 80%, rgba(227,169,74,0.11), transparent 60%); }
  .panel > *{ position:relative; z-index:1; }

  .eyebrow{
    font-family:'JetBrains Mono', monospace;
    letter-spacing:0.4em; font-size:0.72rem; text-transform:uppercase;
    color:var(--amber); margin:0 0 1.2rem;
    display:inline-flex; align-items:center; gap:0.7em;
  }
  .eyebrow::before{
    content:""; width:1.6em; height:1px; background:var(--amber); opacity:0.6;
  }
  .eyebrow--lower{ text-transform:lowercase; }
  h1{
    font-family:'Big Shoulders Display', sans-serif;
    font-weight:900; text-transform:uppercase;
    font-size:clamp(2.8rem, 11vw, 7.5rem);
    line-height:0.95; margin:0; color:var(--cream);
    text-shadow:0 0 60px rgba(227,169,74,0.18);
  }
  h1 .accent{ color:var(--pepper); }
  h2{
    font-family:'Big Shoulders Display', sans-serif;
    font-weight:800; text-transform:uppercase;
    font-size:clamp(2.2rem, 8vw, 5rem);
    line-height:0.9; margin:0 0 1rem; color:var(--cream);
  }
  .lede{
    max-width:36rem; margin:1.5rem auto 0;
    font-size:clamp(1rem,2vw,1.15rem); line-height:1.7;
    color:var(--cream-dim); font-style:italic;
  }
  .tags{
    display:flex; gap:0.6rem; flex-wrap:wrap; justify-content:center;
    margin-top:1.5rem; font-family:'JetBrains Mono', monospace;
  }
  .tags span{
    border:1px solid var(--line); padding:0.4rem 0.9rem;
    font-size:0.7rem; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--cream-dim); border-radius:2px;
  }

  .scroll-hint{
    margin-top:3rem; display:flex; flex-direction:column; align-items:center; gap:0.55rem;
    font-family:'JetBrains Mono', monospace; font-size:0.68rem;
    letter-spacing:0.24em; text-transform:uppercase; color:var(--cream-dim);
  }
  .scroll-hint svg{ width:16px; height:16px; animation:bob 1.6s ease-in-out infinite; }
  @keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(6px);} }

  .contact-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr));
    gap:1.75rem 1.5rem; max-width:52rem; margin:2rem auto 0; width:100%;
  }
  .contact-item{ padding-top:1rem; border-top:1px solid var(--line); text-align:left; }
  .contact-label{
    display:block; font-family:'JetBrains Mono', monospace;
    font-size:0.65rem; letter-spacing:0.28em; text-transform:uppercase;
    color:var(--teal); margin-bottom:0.5rem;
  }
  .contact-value{ font-size:1.02rem; color:var(--cream); }
  .contact-value a{
    color:var(--cream); text-decoration:none; border-bottom:1px solid transparent;
    transition:border-color 0.2s ease, color 0.2s ease;
  }
  .contact-value a:hover, .contact-value a:focus-visible{
    color:var(--amber); border-bottom-color:var(--amber);
  }
  .contact-value a:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; }

  .fine-print{
    margin-top:2.25rem; font-family:'JetBrains Mono', monospace;
    font-size:0.65rem; letter-spacing:0.14em; color:rgba(244,232,206,0.4);
  }


  html.js, html.js body{ height:100%; overflow:hidden; overscroll-behavior:none; }
  html.js .sprocket-band{ position:fixed; left:0; right:0; }
  html.js .sprocket-band.top{ top:0; }
  html.js .sprocket-band.bottom{ bottom:0; }
  html.js .chrome, html.js .progress-line{ display:flex; }
  html.js .progress-line{ display:block; }
  html.js .nav-dots{ display:flex; }

  html.js #viewport{
    position:fixed; left:0; right:0;
    top:var(--band-h); bottom:var(--band-h);
    overflow:hidden; z-index:10;
  }
  html.js #track{
    flex-direction:row;
    height:100%;
    width:max-content;
    will-change:transform;
    transition:transform 0.9s var(--ease-premium);
  }
  html.js #track.is-flutter{ transition:transform 0.9s var(--ease-premium), filter 0.25s ease; }
  html.js .panel{
    width:100vw; height:100%; min-height:0;
  }

  @media (prefers-reduced-motion: reduce){
    .scroll-hint svg{ animation:none; }
    html.js #track{ transition:transform 0.01s linear; }
    .progress-line{ transition:width 0.01s linear; }
    .sprocket-band{ animation:none; }
    .flicker{ display:none; }
    .light-leak{ display:none; }
  }

button.scroll-hint{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  padding:0;
  background:transparent;
  color:var(--cream-dim);
  font:inherit;
  cursor:pointer;
}
button.scroll-hint:hover,
button.scroll-hint:focus-visible{
  color:var(--amber);
}
button.scroll-hint:focus-visible{
  outline:1px solid var(--amber);
  outline-offset:8px;
}

.chrome{
  padding-top:0.55rem;
  padding-left:clamp(0.55rem, 1.8vw, 1.35rem);
}

.brand{
  margin:0;
  padding:0;
  border:0;
  background:none;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.brand-mark{
  display:block;
  width:clamp(190px, 16vw, 255px);
  height:auto;
  max-height:70px;
  object-fit:contain;
}

@media (max-width:700px){
  :root{ --band-h:42px; }

  .chrome{
    padding-top:0.3rem;
    padding-right:0.75rem;
    padding-left:0.45rem;
    align-items:flex-start;
  }

  .brand-mark{
    width:clamp(138px, 40vw, 178px);
    max-height:48px;
  }

  .frame-counter{
    margin:0.2rem 0 0;
    font-size:0.62rem;
  }

  .nav-dots{
    right:0.55rem;
    gap:0.72rem;
  }


  html.js .panel{
    justify-content:center;
    overflow:hidden;
    padding:clamp(2rem,6vw,4rem) 2.15rem clamp(2rem,6vw,4rem) 1.15rem;
  }


  html.js .panel--contact{
    justify-content:flex-start;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    padding-top:4.1rem;
    padding-bottom:1.25rem;
  }

  .panel--contact .eyebrow{
    margin-bottom:0.55rem;
  }

  .panel--contact h2{
    font-size:clamp(2.35rem,13vw,3.5rem);
    margin-bottom:0.25rem;
  }

  .contact-grid{
    grid-template-columns:1fr;
    gap:0.62rem;
    margin-top:0.75rem;
  }

  .contact-item{
    padding-top:0.52rem;
  }

  .contact-label{
    margin-bottom:0.2rem;
    font-size:0.58rem;
  }

  .contact-value{
    display:block;
    overflow-wrap:anywhere;
    font-size:0.92rem;
    line-height:1.35;
  }

  .fine-print{
    margin-top:0.8rem;
    padding-bottom:0.2rem;
    font-size:0.55rem;
    line-height:1.45;
  }
}

@media (max-width:380px), (max-height:680px){
  html.js .panel--contact{
    padding-top:3.65rem;
    padding-bottom:0.9rem;
  }

  .panel--contact h2{
    font-size:2.3rem;
  }

  .contact-grid{
    gap:0.42rem;
    margin-top:0.5rem;
  }

  .contact-item{
    padding-top:0.4rem;
  }

  .fine-print{
    margin-top:0.55rem;
  }
}



button.scroll-hint{
  display:flex;
  margin:3rem 0 0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  color:var(--cream-dim);
  font-family:'JetBrains Mono', monospace;
  font-size:0.68rem;
  font-weight:400;
  line-height:1.2;
  letter-spacing:0.24em;
  text-transform:uppercase;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  -webkit-tap-highlight-color:transparent;
}
button.scroll-hint svg{
  display:block;
  flex:0 0 auto;
}
button.scroll-hint:hover{ color:var(--amber); }


.panel--contact{
  justify-content:center !important;
  padding-bottom:clamp(4.6rem, 10vh, 6.4rem) !important;
  overflow:hidden !important;
}
.contact-content{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}


.panel--contact .fine-print{
  position:absolute;
  left:1rem;
  right:1rem;
  bottom:clamp(0.65rem, 1.8vh, 1.15rem);
  z-index:3;
  margin:0;
  text-align:center;
  pointer-events:none;
}

@media (max-width:700px){

  html.js .panel--contact{
    justify-content:center !important;
    overflow:hidden !important;
    padding-top:clamp(3.2rem, 8vh, 4.2rem) !important;
    padding-right:2.15rem !important;
    padding-bottom:4.15rem !important;
    padding-left:1.15rem !important;
  }

  .panel--contact .eyebrow{
    margin-bottom:0.45rem;
  }
  .panel--contact h2{
    margin:0 0 0.15rem;
    font-size:clamp(2.25rem, 12vw, 3.25rem);
  }
  .panel--contact .contact-grid{
    grid-template-columns:1fr;
    gap:0.5rem;
    margin-top:0.65rem;
    max-width:30rem;
  }
  .panel--contact .contact-item{
    padding-top:0.45rem;
  }
  .panel--contact .contact-label{
    margin-bottom:0.14rem;
    font-size:0.56rem;
  }
  .panel--contact .contact-value{
    font-size:0.88rem;
    line-height:1.28;
  }
  .panel--contact .fine-print{
    bottom:0.55rem;
    font-size:0.52rem;
    line-height:1.35;
    letter-spacing:0.1em;
  }
}


@media (max-width:700px) and (max-height:700px){
  html.js .panel--contact{
    padding-top:3.1rem !important;
    padding-bottom:3.45rem !important;
  }
  .panel--contact .eyebrow{
    margin-bottom:0.28rem;
    font-size:0.6rem;
  }
  .panel--contact h2{
    font-size:2.15rem;
  }
  .panel--contact .contact-grid{
    gap:0.34rem;
    margin-top:0.42rem;
  }
  .panel--contact .contact-item{
    padding-top:0.32rem;
  }
  .panel--contact .contact-label{
    margin-bottom:0.08rem;
    font-size:0.52rem;
  }
  .panel--contact .contact-value{
    font-size:0.8rem;
    line-height:1.2;
  }
  .panel--contact .fine-print{
    bottom:0.38rem;
    font-size:0.48rem;
  }
}


@media (min-width: 900px) {

    .contact-grid{
        grid-template-columns: repeat(2, 1fr);
        max-width: 720px;
        gap: 2rem 3rem;
    }

}