
  :root{
    --bg:#07070b;
    --bg-raised:#0f0e16;
    --bg-sunken:#050408;
    --ink:#f5f3f9;
    --muted:#958fa8;
    --muted-dim:#5f5a72;
    --line:#211e2e;
    --magenta:#ff2f8f;
    --cyan:#2ce6ff;
    --violet:#8b5cf6;
    --caution:#ffcc33;
    --focus:#2ce6ff;
    color-scheme: dark;
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-font-smoothing:antialiased;
    padding-inline:0;
    overflow-x:hidden;
  }

  h1,h2,h3,.display{
    font-family:'Rajdhani', 'Arial Narrow', sans-serif;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.01em;
    text-wrap:balance;
    margin:0;
  }

  .mono{
    font-family:'Space Mono', 'Courier New', monospace;
  }

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

  ::selection{background:var(--magenta);color:#07070b;}

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

  .wrap{
    max-width:1180px;
    margin-inline:auto;
    padding-inline:24px;
  }

  @media (min-width:640px){
    .wrap{padding-inline:40px;}
  }

  /* ---------- NAV ---------- */
  header.site-nav{
    position:sticky;
    top:env(safe-area-inset-top, 0px);
    z-index:50;
    background:rgba(7,7,11,0.82);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{
    max-width:1180px;
    margin-inline:auto;
    padding:14px 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
  }
  @media (min-width:640px){ .nav-inner{padding:14px 40px;} }

  .nav-mark-link{
    display:inline-flex;
    align-items:center;
    text-decoration:none;
  }
  .nav-mark{
    height:40px;
    width:auto;
    filter:drop-shadow(0 0 6px rgba(44,230,255,0.25));
  }
  @media (min-width:640px){ .nav-mark{ height:48px; } }

  nav.nav-links{
    display:flex;
    gap:22px;
    list-style:none;
    margin:0;
    padding:0;
    font-family:'Space Mono', monospace;
    font-size:11px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    overflow-x:auto;
    scrollbar-width:none;
  }
  nav.nav-links::-webkit-scrollbar{display:none;}
  nav.nav-links li{white-space:nowrap;}
  nav.nav-links a{
    color:var(--muted);
    text-decoration:none;
    padding-block:4px;
    border-bottom:1px solid transparent;
    transition:color .15s ease, border-color .15s ease;
  }
  nav.nav-links a:hover, nav.nav-links a:focus-visible{
    color:var(--cyan);
    border-color:var(--cyan);
  }
  nav.nav-links a.tag-vj{ color:var(--magenta); }
  nav.nav-links a.tag-vj:hover{ color:var(--magenta); border-color:var(--magenta); }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    padding-block: 96px 76px;
    background:
      linear-gradient(180deg, rgba(7,7,11,0.35) 0%, rgba(7,7,11,0.88) 62%, var(--bg) 100%),
      linear-gradient(100deg, rgba(255,47,143,0.38), rgba(44,230,255,0.28)),
      var(--hero-img) center 30% / cover no-repeat;
    background-blend-mode:normal, color, normal;
    border-bottom:1px solid var(--line);
  }
  .hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:
      repeating-linear-gradient(180deg, rgba(0,0,0,0.18) 0px, rgba(0,0,0,0.18) 1px, transparent 1px, transparent 3px);
    mix-blend-mode:overlay;
    pointer-events:none;
    opacity:.5;
  }
  .hero-inner{ position:relative; z-index:1; }

  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:'Space Mono', monospace;
    font-size:13px;
    font-weight:700;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--cyan);
    margin-bottom:22px;
  }
  @media (min-width:640px){ .eyebrow{ font-size:14px; } }
  .eyebrow::before{
    content:"";
    width:7px;height:7px;
    background:var(--cyan);
    box-shadow:0 0 8px var(--cyan);
    display:inline-block;
  }

  .hero-logo{
    width:min(560px, 92vw);
    margin-bottom:28px;
    filter:drop-shadow(0 0 30px rgba(255,47,143,0.25));
  }

  .hero h1{
    font-size:clamp(2rem, 5.4vw, 3.6rem);
    line-height:1.04;
    max-width:14ch;
  }
  .hero h1 .accent{ color:var(--magenta); }

  .hero-sub{
    margin-top:22px;
    max-width:52ch;
    color:var(--muted);
    font-size:1.02rem;
    line-height:1.65;
  }

  .hero-meta{
    margin-top:36px;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }
  .chip{
    font-family:'Space Mono', monospace;
    font-size:11px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--muted);
    border:1px solid var(--line);
    padding:7px 12px;
    background:rgba(255,255,255,0.02);
  }

  /* ---------- SECTION SHELL ---------- */
  section{
    padding-block:88px;
    border-bottom:1px solid var(--line);
    position:relative;
  }
  .section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:24px;
    margin-bottom:48px;
    flex-wrap:wrap;
  }
  .section-head h2{
    font-size:clamp(1.6rem, 3.4vw, 2.4rem);
  }
  .section-index{
    font-family:'Space Mono', monospace;
    font-size:12px;
    color:var(--muted-dim);
    letter-spacing:0.1em;
  }

  /* ---------- WORK ---------- */
  .work-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  @media (max-width:760px){ .work-grid{grid-template-columns:1fr;} }

  .work-card{
    position:relative;
    isolation:isolate;
    min-height:360px;
    padding:26px 26px 28px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    gap:12px;
    overflow:hidden;
    background:var(--bg);
  }
  .work-card::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;
    background:var(--card-img, none), var(--card-fallback);
    background-size:cover;
    background-position:center;
    filter:saturate(1.02) brightness(0.9);
    transform:scale(1.02);
    transition:transform .5s ease, filter .5s ease;
  }
  .work-card::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(0deg, rgba(5,4,8,0.92) 0%, rgba(5,4,8,0.66) 42%, rgba(5,4,8,0.18) 100%);
  }
  .work-card:hover::before{ filter:saturate(1.15) brightness(1); transform:scale(1.06); }

  .work-card:nth-child(2){ --card-fallback: linear-gradient(150deg, #2a1240, #0c0c16); }
  .work-card:nth-child(3){ --card-fallback: linear-gradient(150deg, #0f2e3a, #0c0c16); }
  .work-card:nth-child(4){ --card-fallback: linear-gradient(150deg, #3a1030, #0c0c16); }
  .work-card:nth-child(5){ --card-fallback: linear-gradient(150deg, #1c2a10, #0c0c16); }
  .work-card:nth-child(6){ --card-fallback: linear-gradient(150deg, #0f1f3a, #0c0c16); }
  .work-card:nth-child(7){ --card-fallback: linear-gradient(150deg, #3a2410, #0c0c16); }

  .work-card.featured{
    grid-column:1 / -1;
    min-height:480px;
    padding:38px 40px 40px;
    --card-fallback: linear-gradient(150deg, #3a2410, #0c0c16);
  }
  .work-card.featured::after{
    background:linear-gradient(0deg, rgba(5,4,8,0.94) 0%, rgba(5,4,8,0.7) 38%, rgba(5,4,8,0.15) 100%);
  }
  .featured-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    align-self:flex-start;
    font-family:'Space Mono', monospace;
    font-size:11px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--bg);
    background:var(--caution);
    padding:6px 12px;
    margin-bottom:16px;
  }
  .work-card.featured h3{
    font-size:clamp(1.6rem, 3.2vw, 2.3rem);
  }
  .work-card.featured p{
    max-width:60ch;
    font-size:1rem;
  }
  .work-card.featured .work-top{ max-width:60ch; }

  .work-top{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:12px;
    font-family:'Space Mono', monospace;
    font-size:11px;
    letter-spacing:0.08em;
    text-transform:uppercase;
  }
  .work-year{ color:rgba(245,243,249,0.65); }
  .work-medium{ color:var(--cyan); }

  .work-card h3{
    font-size:1.3rem;
    letter-spacing:0.005em;
    color:#fff;
  }

  .work-card p{
    color:rgba(245,243,249,0.78);
    font-size:0.94rem;
    line-height:1.6;
    margin:0;
    max-width:46ch;
  }

  .work-card{ text-decoration:none; cursor:pointer; }

  .work-more{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-family:'Space Mono', monospace;
    font-size:10.5px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--cyan);
    opacity:0.75;
    transform:translateX(0);
    transition:opacity .18s ease, transform .18s ease;
  }
  .work-card:hover .work-more,
  .work-card:focus-visible .work-more{
    opacity:1;
    transform:translateX(4px);
  }
  a.work-more{ text-decoration:none; }
  a.work-more:hover, a.work-more:focus-visible{
    opacity:1;
    transform:translateX(4px);
  }

  /* ---------- FILM DETAIL VIEW ---------- */
  #film-view{ background:var(--bg); }

  .film-hero{
    position:relative;
    min-height:320px;
    display:flex;
    align-items:flex-end;
    background-size:cover;
    background-position:center;
    border-bottom:1px solid var(--line);
  }
  .film-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(0deg, rgba(5,4,8,0.95) 0%, rgba(5,4,8,0.68) 48%, rgba(5,4,8,0.28) 100%);
  }
  .film-hero.archive::before{
    background:linear-gradient(0deg, rgba(5,4,8,0.97) 0%, rgba(5,4,8,0.88) 45%, rgba(5,4,8,0.62) 100%);
    backdrop-filter:saturate(0.7);
  }
  .film-hero-inner{
    position:relative;
    z-index:1;
    padding-block:64px 40px;
    width:100%;
  }
  .film-back{
    position:relative;
    z-index:1;
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:'Space Mono', monospace;
    font-size:11px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--muted);
    text-decoration:none;
    padding-top:20px;
  }
  .film-back:hover, .film-back:focus-visible{ color:var(--cyan); }

  .film-badge{
    display:inline-flex;
    font-family:'Space Mono', monospace;
    font-size:11px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--cyan);
    margin-bottom:14px;
  }
  .film-hero h1{
    font-size:clamp(1.9rem, 5vw, 3.2rem);
    color:#fff;
    max-width:18ch;
  }
  .film-meta-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px 18px;
    margin-top:18px;
    font-family:'Space Mono', monospace;
    font-size:11.5px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:rgba(245,243,249,0.75);
  }
  .film-meta-row span{ white-space:nowrap; }

  .film-body{
    padding-block:56px 80px;
  }
  .film-body-layout{
    display:grid;
    grid-template-columns:1.5fr 1fr;
    gap:56px;
    align-items:start;
  }
  @media (max-width:820px){ .film-body-layout{grid-template-columns:1fr;} }

  .film-synopsis p{
    color:var(--ink);
    font-size:1.08rem;
    line-height:1.75;
    max-width:62ch;
    margin:0 0 26px;
  }

  .film-note{
    border-left:2px solid var(--violet);
    padding-left:22px;
    margin-top:10px;
  }
  .film-note-label{
    display:block;
    font-family:'Space Mono', monospace;
    font-size:11px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--violet);
    margin-bottom:10px;
  }
  .film-note p{
    color:var(--muted);
    line-height:1.75;
    font-size:0.98rem;
    max-width:60ch;
    margin:0;
  }

  .film-gallery{
    margin-top:36px;
  }
  .film-gallery-label{
    display:block;
    font-family:'Space Mono', monospace;
    font-size:11px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--muted-dim);
    margin-bottom:14px;
  }
  .film-gallery-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
    gap:10px;
  }
  .film-gallery-grid img{
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
    border-radius:3px;
    cursor:pointer;
    opacity:0.9;
    transition:opacity 0.15s ease, transform 0.15s ease;
    display:block;
    background:var(--bg-sunken);
  }
  .film-gallery-grid img:hover, .film-gallery-grid img:focus-visible{
    opacity:1;
    transform:translateY(-2px);
  }

  .film-side{
    display:flex;
    flex-direction:column;
    gap:32px;
  }
  .film-specs{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:12px 18px;
    font-size:0.92rem;
  }
  .film-specs dt{
    font-family:'Space Mono', monospace;
    font-size:10.5px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--muted-dim);
    margin:0;
    white-space:nowrap;
  }
  .film-specs dd{
    margin:0;
    color:var(--ink);
  }

  .film-journal-list{
    display:flex;
    flex-direction:column;
    gap:18px;
  }
  .film-journal-entry{
    display:grid;
    grid-template-columns:76px 1fr;
    gap:12px;
    align-items:start;
  }
  .film-journal-entry img{
    width:76px;
    height:76px;
    object-fit:cover;
    border-radius:3px;
    cursor:pointer;
    display:block;
    background:var(--bg-sunken);
    opacity:0.92;
    transition:opacity 0.15s ease;
  }
  .film-journal-entry img:hover, .film-journal-entry img:focus-visible{
    opacity:1;
  }
  .film-journal-date{
    display:block;
    font-family:'Space Mono', monospace;
    font-size:10px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--muted-dim);
    margin:0 0 4px;
  }
  .film-journal-caption{
    margin:0;
    color:var(--muted);
    font-size:0.88rem;
    line-height:1.55;
  }

  .film-credits h3, .film-side h3{
    font-family:'Space Mono', monospace;
    font-size:11px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--cyan);
    margin-bottom:16px;
    font-weight:400;
  }
  .film-credits dl{
    margin:0;
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .film-credits dt{
    font-family:'Space Mono', monospace;
    font-size:10.5px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--muted-dim);
    margin:0 0 4px;
  }
  .film-credits dd{
    margin:0;
    color:var(--ink);
    font-size:0.94rem;
    line-height:1.5;
  }

  .film-foot-nav{
    padding-top:32px;
    margin-top:16px;
    border-top:1px solid var(--line);
  }
  .film-foot-nav a{
    font-family:'Space Mono', monospace;
    font-size:11px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--muted);
    text-decoration:none;
  }
  .film-foot-nav a:hover, .film-foot-nav a:focus-visible{ color:var(--cyan); }

  /* ---------- PRESENTATIONS VIEW ---------- */
  #presentations-view{ background:var(--bg); }
  .pres-hero{
    background:var(--bg-sunken);
    border-bottom:1px solid var(--line);
    padding-block:20px 44px;
  }
  .pres-hero h1{
    font-size:clamp(1.9rem, 5vw, 3.2rem);
    color:#fff;
    margin-top:14px;
  }
  .pres-sub{
    margin-top:16px;
    max-width:64ch;
    color:var(--muted);
    font-size:1rem;
    line-height:1.65;
  }
  .pres-body{ padding-block:56px 80px; }
  .pres-intro p{
    color:var(--ink);
    font-size:1.05rem;
    line-height:1.75;
    max-width:70ch;
    margin:0 0 16px;
  }
  .pres-featured-wrap{
    display:flex;
    flex-direction:column;
    gap:24px;
    margin:40px 0 60px;
  }
  .pres-featured{
    display:grid;
    grid-template-columns:1fr 1.2fr;
    gap:32px;
    align-items:center;
    border:1px solid var(--line);
    background:var(--bg-raised);
    padding:24px;
  }
  @media (max-width:760px){ .pres-featured{ grid-template-columns:1fr; } }
  .pres-featured img{
    width:100%;
    display:block;
    border-radius:2px;
    aspect-ratio:1100/502;
    object-fit:cover;
  }
  .pres-featured-label{
    display:inline-flex;
    font-family:'Space Mono', monospace;
    font-size:11px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--violet);
    margin-bottom:10px;
  }
  .pres-featured h3{
    font-size:clamp(1.2rem, 2.4vw, 1.6rem);
    color:var(--ink);
    max-width:26ch;
  }
  .pres-featured-place{
    font-family:'Space Mono', monospace;
    font-size:11.5px;
    letter-spacing:0.04em;
    color:var(--cyan);
    margin-top:12px;
  }
  .pres-featured p{
    color:var(--muted);
    font-size:0.95rem;
    line-height:1.65;
    margin-top:14px;
    max-width:52ch;
  }
  .pres-year-group{ margin-bottom:40px; }
  .pres-year-group h3{
    font-family:'Space Mono', monospace;
    font-size:13px;
    letter-spacing:0.12em;
    color:var(--caution);
    padding-bottom:10px;
    margin-bottom:18px;
    border-bottom:1px solid var(--line);
  }
  .pres-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  .pres-list li{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .pres-row{
    display:grid;
    grid-template-columns:280px 1fr;
    gap:18px;
  }
  @media (max-width:700px){ .pres-row{ grid-template-columns:1fr; gap:4px; } }
  .pres-list .pres-place{
    font-family:'Space Mono', monospace;
    font-size:11.5px;
    line-height:1.5;
    color:var(--muted-dim);
  }
  .pres-list .pres-title{
    color:var(--ink);
    font-size:0.98rem;
    line-height:1.5;
  }
  .pres-photos{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding-left:0;
  }
  @media (min-width:701px){ .pres-photos{ padding-left:298px; } }
  .pres-photos img{
    width:110px;
    height:74px;
    object-fit:cover;
    border-radius:2px;
    cursor:pointer;
    opacity:0.88;
    transition:opacity 0.15s ease, transform 0.15s ease;
    display:block;
  }
  .pres-photos img:hover, .pres-photos img:focus-visible{
    opacity:1;
    transform:translateY(-2px);
  }
  .pres-lightbox{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.88);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:32px;
    z-index:1000;
    cursor:zoom-out;
  }
  .pres-lightbox[hidden]{ display:none; }
  .pres-lightbox img{
    max-width:100%;
    max-height:100%;
    border-radius:2px;
    box-shadow:0 20px 60px rgba(0,0,0,0.5);
  }

  /* ---------- VJ SECTION ---------- */
  .vj-section{
    background:var(--bg-sunken);
    overflow:hidden;
  }

  .marquee{
    position:relative;
    height:132px;
    margin-bottom:56px;
    border-block:1px solid var(--line);
    background:#000;
  }
  .marquee-track{
    position:absolute;
    inset:0;
    display:flex;
    width:max-content;
    animation:scroll-left 34s linear infinite;
    filter:saturate(1.3) contrast(1.05) brightness(0.92);
  }
  .marquee-track img{
    height:132px;
    width:auto;
    flex:none;
  }
  .marquee::before, .marquee::after{
    content:"";
    position:absolute;
    top:0; bottom:0;
    width:80px;
    z-index:2;
    pointer-events:none;
  }
  .marquee::before{ left:0; background:linear-gradient(90deg, var(--bg-sunken), transparent); }
  .marquee::after{ right:0; background:linear-gradient(270deg, var(--bg-sunken), transparent); }

  @keyframes scroll-left{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce){
    .marquee-track{ animation:none; }
  }

  .vj-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:'Space Mono', monospace;
    font-size:11px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--bg);
    background:var(--magenta);
    padding:6px 12px;
    margin-bottom:22px;
  }

  .vj-layout{
    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    gap:56px;
    align-items:start;
  }
  @media (max-width:860px){ .vj-layout{grid-template-columns:1fr;} }

  .vj-layout h2{
    font-size:clamp(1.9rem, 4.6vw, 3rem);
    margin-bottom:20px;
  }
  .vj-layout h2 .accent{ color:var(--violet); }

  .vj-copy p{
    color:var(--muted);
    line-height:1.7;
    font-size:1rem;
    max-width:50ch;
  }

  .vj-tags{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:26px;
  }
  .vj-tags span{
    font-family:'Space Mono', monospace;
    font-size:11px;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--violet);
    border:1px solid rgba(139,92,246,0.4);
    padding:7px 12px;
  }

  .reel-frame{
    position:relative;
    aspect-ratio:16/9;
    border:1px dashed rgba(255,255,255,0.22);
    background:
      linear-gradient(0deg, rgba(5,4,8,0.86) 0%, rgba(5,4,8,0.32) 55%, rgba(5,4,8,0.12) 100%),
      var(--reel-img, none) center/cover no-repeat,
      linear-gradient(160deg, rgba(139,92,246,0.14), rgba(44,230,255,0.08)),
      var(--bg-raised);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:14px;
    text-align:center;
    padding:24px;
    text-decoration:none;
    transition:border-color 0.18s ease, background 0.18s ease;
  }
  .reel-frame:hover, .reel-frame:focus-visible{
    border-color:var(--cyan);
    border-style:solid;
  }
  .reel-frame:hover .play-btn, .reel-frame:focus-visible .play-btn{
    box-shadow:0 0 32px rgba(44,230,255,0.45);
    transform:scale(1.05);
  }
  .play-btn{
    width:60px;height:60px;
    border-radius:50%;
    border:1.5px solid var(--cyan);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 0 22px rgba(44,230,255,0.25);
    transition:box-shadow 0.18s ease, transform 0.18s ease;
  }
  .play-btn svg{ margin-left:3px; }
  .reel-frame .mono{
    font-size:11px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .reel-frame .reel-title{
    font-family:'Rajdhani', sans-serif;
    font-weight:700;
    font-size:1.1rem;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--ink);
  }
  .reel-corner{
    position:absolute;
    top:14px; left:14px;
    font-family:'Space Mono', monospace;
    font-size:10px;
    letter-spacing:0.1em;
    color:var(--muted-dim);
  }
  .reel-corner.br{ top:auto; left:auto; bottom:14px; right:14px; }
  .reel-yt-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .reel-yt-icon svg{
    width:28px;
    height:28px;
    fill:var(--ink);
    opacity:0.92;
  }

  /* ---------- PRACTICE ---------- */
  .practice-layout{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:36px;
    align-items:center;
  }
  @media (max-width:640px){ .practice-layout{grid-template-columns:1fr;} }
  .practice-num{
    font-family:'Rajdhani', sans-serif;
    font-weight:700;
    font-size:clamp(4rem, 14vw, 7.5rem);
    line-height:0.85;
    color:var(--ink);
    -webkit-text-stroke:1px var(--caution);
  }
  .practice-copy h2{
    font-size:clamp(1.3rem, 2.6vw, 1.8rem);
    margin-bottom:10px;
  }
  .practice-copy p{
    color:var(--muted);
    line-height:1.65;
    max-width:56ch;
    margin:0;
  }
  .practice-copy .range{
    font-family:'Space Mono', monospace;
    color:var(--caution);
    font-size:12px;
    letter-spacing:0.08em;
    display:block;
    margin-top:12px;
  }

  /* ---------- ABOUT ---------- */
  .about-layout{
    display:grid;
    grid-template-columns:380px 1fr;
    gap:48px;
    align-items:start;
  }
  @media (max-width:900px){ .about-layout{grid-template-columns:300px 1fr;} }
  @media (max-width:760px){ .about-layout{grid-template-columns:1fr;} }
  .about-layout > h2{
    grid-column:1 / -1;
    font-size:clamp(1.8rem, 4vw, 2.6rem);
    max-width:10ch;
  }
  .about-photo-wrap{
    position:relative;
  }
  .about-photo{
    width:100%;
    aspect-ratio:1000 / 868;
    object-fit:cover;
    border-radius:4px;
    border:1px solid var(--line);
    filter:contrast(1.05) saturate(1.05);
    display:block;
  }
  .about-photo-wrap::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:4px;
    box-shadow:0 0 0 1px rgba(44,230,255,0.15), 0 24px 48px -24px rgba(0,0,0,0.6);
    pointer-events:none;
  }
  .about-name{
    font-family:'Space Mono', monospace;
    font-size:11px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--cyan);
    margin-top:14px;
  }
  .about-copy h3{
    font-family:'Rajdhani', sans-serif;
    font-size:clamp(1.3rem, 2.6vw, 1.7rem);
    font-weight:700;
    color:var(--ink);
    margin-bottom:14px;
  }
  .about-copy p{
    color:var(--muted);
    line-height:1.75;
    font-size:1.02rem;
  }
  .about-copy p + p{ margin-top:16px; }
  .about-copy strong{ color:var(--ink); font-weight:700; }

  /* ---------- CONTACT ---------- */
  #contact{
    padding-top:0;
  }
  .contact-layout h2{
    font-size:clamp(1.8rem, 4vw, 2.6rem);
    margin-bottom:22px;
  }
  .contact-text{
    color:var(--muted);
    line-height:1.7;
    font-size:1.02rem;
    max-width:52ch;
    margin:0 0 26px;
  }
  .contact-email{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family:'Space Mono', monospace;
    font-size:1.05rem;
    letter-spacing:0.02em;
    color:var(--cyan);
    text-decoration:none;
    border-bottom:1px solid rgba(44,230,255,0.35);
    padding-bottom:4px;
    margin-bottom:36px;
  }
  .contact-email:hover, .contact-email:focus-visible{
    color:var(--ink);
    border-color:var(--ink);
  }
  .contact-socials{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
  }
  .social-link{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:11px 18px;
    border:1px solid var(--line);
    background:rgba(255,255,255,0.02);
    color:var(--ink);
    text-decoration:none;
    font-family:'Space Mono', monospace;
    font-size:12px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    transition:border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  }
  .social-link svg{
    width:18px;
    height:18px;
    flex:none;
    fill:currentColor;
  }
  .social-link:hover, .social-link:focus-visible{
    color:var(--bg);
    background:var(--cyan);
    border-color:var(--cyan);
  }

  /* ---------- MORE SHORT FILMS ---------- */
  .more-films{
    margin-top:44px;
    padding-top:36px;
    border-top:1px solid var(--line);
  }
  .more-films-head{
    font-family:'Space Mono', monospace;
    font-size:11px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--muted-dim);
    margin-bottom:18px;
  }
  .more-films-list{
    list-style:none;
    margin:0; padding:0;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:2px;
    background:var(--line);
    border:1px solid var(--line);
  }
  @media (max-width:900px){ .more-films-list{ grid-template-columns:repeat(2, 1fr); } }
  @media (max-width:560px){ .more-films-list{ grid-template-columns:1fr; } }
  .more-films-list a{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:12px;
    background:var(--bg);
    padding:16px 18px;
    text-decoration:none;
    color:var(--ink);
    font-family:'Manrope', sans-serif;
    font-weight:600;
    font-size:0.95rem;
    transition:background 0.15s ease, color 0.15s ease;
  }
  .more-films-list a:hover, .more-films-list a:focus-visible{
    background:rgba(44,230,255,0.08);
    color:var(--cyan);
  }
  .more-films-list .yr{
    font-family:'Space Mono', monospace;
    font-size:11px;
    color:var(--muted-dim);
    white-space:nowrap;
  }

  /* ---------- FOOTER ---------- */
  footer{
    padding-block:56px 40px;
  }
  .footer-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    flex-wrap:wrap;
    margin-bottom:32px;
  }
  .foot-brand{
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
  }
  footer .foot-mark{ height:36px; width:auto; opacity:0.95; }
  @media (min-width:640px){ footer .foot-mark{ height:42px; } }
  .foot-name{
    font-family:'Rajdhani', sans-serif;
    font-weight:700;
    font-size:15px;
    letter-spacing:0.04em;
    color:var(--muted);
    text-transform:uppercase;
    padding-left:16px;
    border-left:1px solid var(--line);
  }
  @media (max-width:480px){ .foot-name{ border-left:none; padding-left:0; font-size:13px; } }
  .footer-links{
    display:flex;
    gap:20px;
    list-style:none;
    margin:0; padding:0;
    font-family:'Space Mono', monospace;
    font-size:11px;
    letter-spacing:0.1em;
    text-transform:uppercase;
  }
  .footer-links a{ color:var(--muted); text-decoration:none; }
  .footer-links a:hover, .footer-links a:focus-visible{ color:var(--cyan); }

  .footer-bottom{
    display:flex;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    padding-top:24px;
    border-top:1px solid var(--line);
    font-family:'Space Mono', monospace;
    font-size:11px;
    color:var(--muted-dim);
    letter-spacing:0.04em;
  }
