:root {
    --bg: #f6f6f6;
    --ink: #111;
    --muted: #555;
    --rule: #dcdcdc;
    --mark: #fff176;
    --mark-strong: #f5d90a;
    --head: "Manrope", "Helvetica Neue", Arial, sans-serif;
    --body: "Poppins", "Helvetica Neue", Arial, sans-serif;
    --gutter: clamp(1.25rem, 3vw, 2.5rem);
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 1rem; }
  body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1rem/1.55 var(--body); }
  a { color: inherit; }
  img { max-width: 100%; display: block; }
  :focus-visible { outline: 3px solid #2f5fd0; outline-offset: 3px; }
  .wrap { max-width: 1400px; margin: 0 auto; padding: 0 var(--gutter); }
  section { padding: clamp(3.5rem, 8vw, 6.5rem) 0 0; }
  h1, h2, h3 { font-family: var(--head); font-weight: 500; letter-spacing: -.03em; margin: 0; line-height: 1.1; }
  h2 { font-size: clamp(2rem, 4vw, 2.75rem); margin-bottom: 1.75rem; }

  /* Header */
  .site-header { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "nav title in"; align-items: start; gap: 1rem; padding-top: 2rem; }
  nav { grid-area: nav; display: flex; flex-wrap: wrap; gap: .25rem 1.2rem; font-size: .95rem; }
  nav a { text-decoration: none; }
  nav a { padding: .1rem .3rem; margin: 0 -.3rem; transition: background-size .2s; background: linear-gradient(var(--ink), var(--ink)) 0 100% / 0 2px no-repeat; }
  nav a:hover, nav a[aria-current="page"] { background-size: 100% 2px; }
  body > .wrap:first-child { position: sticky; top: 0; z-index: 20; padding-bottom: 1rem; background: rgba(246,246,246,.92); box-shadow: 0 0 0 100vmax rgba(246,246,246,.92); clip-path: inset(0 -100vmax); }
  @supports (backdrop-filter: blur(8px)) { body > .wrap:first-child { backdrop-filter: blur(10px); } }
  .site-title { grid-area: title; font: 400 1.6rem/1.2 var(--head); letter-spacing: -.04em; text-decoration: none; }
  .social { grid-area: in; justify-self: end; }
  .social svg { width: 1.6rem; height: 1.6rem; display: block; }
  @media (max-width: 1320px) {
    .site-header { grid-template-columns: 1fr auto; grid-template-areas: "title in" "nav nav"; }
  }

  /* Hero: the rule of threes, as three lines */
  .hero { text-align: center; padding-top: clamp(2.5rem, 6vw, 4.5rem); }
  .hero h1 { font-size: clamp(2.5rem, 5.6vw, 4.25rem); font-weight: 500; letter-spacing: -.04em; margin-bottom: clamp(.75rem, 2vw, 1.5rem); }
  .hero .three { margin: 0; font: 500 clamp(1.4rem, 4.3vw, 3.75rem)/1.15 var(--head); letter-spacing: -.055em; }
  .hero .three span { display: inline-block; white-space: nowrap; margin: 0 .12em; }  /* one line on wide screens; wraps between phrases on narrow ones */
  @media (prefers-reduced-motion: no-preference) {
    .hero h1, .hero .three span { opacity: 0; transform: translateY(.35em); animation: rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
    .hero .three span:nth-child(1) { animation-delay: .12s; }
    .hero .three span:nth-child(2) { animation-delay: .26s; }
    .hero .three span:nth-child(3) { animation-delay: .40s; }
    @keyframes rise { to { opacity: 1; transform: none; } }
  }

  /* Game carousel: drifts slowly, pauses on hover, scrolls by hand or with the arrows */
  .carousel { position: relative; margin-top: clamp(2.5rem, 5vw, 4rem); }
  .track { display: flex; gap: .85rem; overflow-x: auto; padding: 0 var(--gutter); scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
  .track::-webkit-scrollbar { display: none; }
  .tile { position: relative; flex: 0 0 clamp(230px, 27vw, 360px); aspect-ratio: 1; background: #222; color: #fff; display: grid; place-items: center; text-align: center; padding: 1rem; font: 500 1rem/1.2 var(--head); overflow: hidden; }
  .tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 3.25rem; height: 3.25rem; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; font-size: 1.5rem; cursor: pointer; display: grid; place-items: center; opacity: 0; transition: opacity .2s; }
  .carousel:hover .arrow, .arrow:focus-visible { opacity: 1; }
  .arrow:hover { background: #000; }
  .arrow.prev { left: var(--gutter); } .arrow.next { right: var(--gutter); }

  /* Projects */
  .projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 2rem 1.75rem; }
  .project { text-align: center; }
  .logo { height: 120px; display: grid; place-items: center; margin-bottom: 1.25rem; }
  .logo img { max-height: 100%; width: auto; max-width: 100%; }
  .logo .name { display: none; font-size: 1.4rem; }
  .logo.missing img { display: none; } .logo.missing .name { display: block; }
  .project p { font-style: italic; margin: 0; }

  /* About */
  .about { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
  .about h2 { font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 600; letter-spacing: -.04em; }
  .about .lead { font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.5; }
  .about p { margin: 0 0 1.1rem; max-width: 36rem; }
  .about img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 52% 20%; }
  @media (max-width: 800px) { .about { grid-template-columns: 1fr; } }

  /* Video gallery */
  .filterbar { position: sticky; top: var(--hdr, 5rem); z-index: 10; padding: .85rem 0 .7rem; margin-bottom: 1.75rem; border-bottom: 1px solid var(--rule); background: rgba(246,246,246,.94); box-shadow: 0 0 0 100vmax rgba(246,246,246,.94); clip-path: inset(0 -100vmax); }
  @supports (backdrop-filter: blur(8px)) { .filterbar { backdrop-filter: blur(10px); } }
  .filters { display: flex; flex-wrap: nowrap; gap: 0 1.5rem; overflow-x: auto; scrollbar-width: none; padding: .15rem .3rem; }
  .filters::-webkit-scrollbar { display: none; }
  .filter-scroll { position: relative; }
  .fs { position: absolute; top: 0; bottom: 0; width: 3rem; border: 0; padding: 0; display: grid; place-items: center; color: var(--ink); cursor: pointer; }
  .fs[hidden] { display: none; }
  .fs.prev { left: 0; justify-items: start; background: linear-gradient(90deg, #f6f6f6 55%, rgba(246,246,246,0)); }
  .fs.next { right: 0; justify-items: end; background: linear-gradient(270deg, #f6f6f6 55%, rgba(246,246,246,0)); }
  .fs:hover svg { transform: scale(1.2); }
  .fs svg { transition: transform .15s; }
  .fs:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
  .filters button { flex: none; white-space: nowrap; font: 400 .95rem var(--body); background: linear-gradient(var(--ink), var(--ink)) 0 100% / 0 2px no-repeat; color: var(--ink); border: 0; border-radius: 0; padding: .1rem .3rem; margin: 0 -.3rem; cursor: pointer; transition: background-size .2s; }
  .filters button:hover, .filters button[aria-pressed="true"] { background-size: 100% 2px; }
  .filters button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .filter-label, .filter-select { display: none; }
  .filter-label { font: 600 .7rem var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; }
  .filter-select { width: 100%; font: 500 1.1rem var(--body); color: var(--ink); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23111' stroke-width='2'/%3E%3C/svg%3E") right .9rem center / 1.2rem no-repeat; border: 1px solid var(--ink); border-radius: 0; padding: .7rem 2.6rem .7rem .9rem; margin: 0; -webkit-appearance: none; appearance: none; }
  @media (max-width: 700px) { .filter-scroll { display: none; } .filters { display: none !important; } .filter-label[hidden] { display: none; } .filter-label:not([hidden]) { display: block; } .filter-select { display: block; } }
  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 2.25rem 1.5rem; }
  .video { color: inherit; }
  .thumb { position: relative; aspect-ratio: 16/9; background: #000; overflow: hidden; }
  .thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  .video span { display: block; margin-top: .75rem; font: 700 1.05rem/1.3 var(--head); letter-spacing: -.02em; }

  /* Samples, press, contact */
  .section-title { font-size: clamp(1.75rem, 3.2vw, 2.5rem); font-weight: 600; letter-spacing: -.04em; text-align: center; margin: 0 0 .5rem; }
  #samples { padding-top: clamp(2.25rem, 4.5vw, 3.5rem); }
  .section-title ~ .section-title { margin-top: clamp(3.5rem, 7vw, 6rem); }
  .note { color: var(--muted); text-align: center; margin: 0 0 2rem; }
  .scripts, .specs { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }   /* uneven last rows center themselves */
  .script { flex: 0 1 calc((100% - 2rem) / 3); min-width: min(100%, 280px); display: flex; flex-direction: column; background: #fff; padding: 1.5rem; border-bottom: 2px solid var(--ink); }
  .script img { width: 100%; height: 7.5rem; margin-bottom: 1.25rem; object-fit: contain; object-position: center; }
  .script { text-align: center; }
  .script p { margin: 0 0 .6rem; }
  .script .links { margin-top: auto !important; padding-top: 1rem; }
  .fmt { color: var(--muted); font-size: .9rem; }
  .links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; margin-top: 1rem !important; }
  .links a, .spec .go { font-weight: 600; text-decoration: none; background: linear-gradient(var(--ink), var(--ink)) 0 100% / 0 2px no-repeat; transition: background-size .2s; }
  .links a:hover, .spec:hover .go { background-size: 100% 2px; }
  .spec { flex: 0 1 calc((100% - 3rem) / 4); min-width: min(100%, 220px); display: flex; flex-direction: column; gap: .35rem; background: #fff; padding: 1.5rem; text-decoration: none; border-bottom: 2px solid var(--ink); min-height: 9rem; text-align: center; }
  .spec .logo { display: grid; place-items: center; height: 7.5rem; margin-bottom: .75rem; }
  .spec .logo img { max-width: 85%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
  .spec.dark { background: #333; border-bottom-color: #333; }
  .spec.dark .fmt { color: #aaa; }
  .spec.dark .go { color: #f1f1f1; }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .spec h3 { font-size: 1.35rem; margin: 0; }
  .spec .fmt { margin: 0; text-align: center; font-size: 1.05rem; }
  .spec .go { margin-top: auto; padding-top: 1rem; align-self: center; }
  .button { display: inline-block; background: var(--ink); color: var(--bg); padding: .85rem 1.75rem; text-decoration: none; font-weight: 600; border-radius: 3px; }
  .button:hover { background: var(--mark); color: var(--ink); }
  main { padding-bottom: 5rem; }   /* breathing room at the bottom of every page */

  /* Portfolio intro */
  .faq { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem clamp(2rem, 6vw, 5rem); align-items: start; margin-bottom: clamp(1.75rem, 3.5vw, 3rem); }
  .qa h3:first-child { margin-top: 0; }
  @media (max-width: 800px) { .faq { grid-template-columns: 1fr; } }
  .faq .lead { font: 400 clamp(1.35rem, 2.6vw, 1.9rem)/1.2 var(--head); letter-spacing: -.03em; margin: 0; }
  .faq .lead span { display: block; }
  .faq .lead span:first-child { font: 600 clamp(2rem, 4.2vw, 3.25rem)/1.08 var(--head); letter-spacing: -.04em; }
  .faq .lead span + span { margin-top: 1.1rem; font: 400 clamp(1.05rem, 1.5vw, 1.25rem)/1.4 var(--body); letter-spacing: 0; color: var(--muted); }
  .faq h3 { font: 600 1.3rem/1.25 var(--head); letter-spacing: -.02em; margin: 1.5rem 0 .3rem; }
  .faq .qa h3:first-child { margin-top: 0; }
  .faq p { margin: 0 0 .5rem; }
  h2.favorites { text-align: left; font-size: clamp(1.5rem, 3vw, 2rem); }
  h2.favorites.themed { font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing: 0; line-height: 1.1; }

  /* Contact form */
  .contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; min-height: 60vh; }
  .contact-intro { text-align: center; }
  .contact-intro h2 { font-size: clamp(2.5rem, 5vw, 3.6rem); margin-bottom: 1.5rem; }
  .sub { font-size: 1rem; margin: 0; }
  .form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
  .form .row { margin-bottom: 1.5rem; }
  .form legend { padding: 0; font-size: 1rem; margin-bottom: .6rem; }
  .form label { display: block; font-size: .85rem; margin-bottom: .4rem; }
  .form label.big { font-size: 1rem; }
  .req { color: var(--muted); }
  .pair { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
  .form input[type="text"], .form input[type="email"], .form textarea { width: 100%; font: inherit; color: var(--ink); background: #fff; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; padding: .85rem .75rem; }
  .form textarea { resize: vertical; min-height: 6rem; }
  .send { text-align: center; margin-top: 1.5rem; }
  .send-btn { font: 400 1rem var(--body); color: var(--ink); background: none; border: 1px solid var(--ink); padding: 1.1rem 1.5rem; cursor: pointer; }
  .send-btn:hover { background: var(--mark); }
  .send-btn:disabled { opacity: .6; cursor: default; }
  .status { margin: 1rem 0 0; min-height: 1.5em; text-align: center; }
  @media (max-width: 800px) { .contact { grid-template-columns: 1fr; min-height: 0; } .pair { grid-template-columns: 1fr; } }
  .gallery-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1.25rem; margin-bottom: 1.5rem; }
  .gallery-head h2 { margin: 0; }
  .client { color: var(--muted); margin: 0; }

  /* ===== Polish ===== */

  /* Soft cross-fade between pages (browsers that support it; others just load normally). The header stays put. */
  @view-transition { navigation: auto; }
  body > .wrap:first-child { view-transition-name: site-header; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }

  /* Hover: cards lift slightly and their bottom rule turns highlighter yellow. */
  .script, .spec { transition: translate .2s ease, box-shadow .2s ease, border-color .2s ease; }
  .script:hover, .spec:hover { translate: 0 -4px; box-shadow: 0 14px 28px -12px rgba(0,0,0,.18); border-bottom-color: var(--mark-strong); }
  .video .thumb { transition: box-shadow .2s ease; }
  .video:hover .thumb { box-shadow: 0 14px 28px -12px rgba(0,0,0,.3); }
  @media (prefers-reduced-motion: reduce) { .script, .spec { transition: none; } .script:hover, .spec:hover { translate: none; } }

  /* Scroll reveal: items fade up a little as they enter the screen. CSS only, so it also works for videos added by the filter.
     Skipped entirely where unsupported or when the viewer prefers reduced motion. */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .project, .script, .spec, .video {
        animation: reveal linear backwards; animation-timeline: view(); animation-range: entry 0% entry 40%;
      }
      @keyframes reveal { from { opacity: 0; transform: translateY(1.75rem); } to { opacity: 1; transform: none; } }
    }
  }

  /* Password gate (Portfolio and Writing Samples) */
  .gate { max-width: 30rem; padding-top: clamp(3.5rem, 11vw, 8rem); text-align: center; }
  .gate-title { font: 600 clamp(1.6rem, 3.4vw, 2.25rem)/1.15 var(--head); letter-spacing: -.04em; margin: 0 0 .6rem; }
  .gate-sub { color: var(--muted); margin: 0 0 2rem; }
  .gate-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .gate input { display: block; width: 100%; box-sizing: border-box; font: 400 1.1rem var(--body); padding: 1rem; background: #fff; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; margin-bottom: 1.25rem; }
  .gate input:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ink); }
  .gate-err { color: #b00020; margin: 0 0 1.25rem; }
  .gate-note { color: var(--muted); font-size: .9rem; margin: 2rem 0 0; }
  .gate-note a { color: inherit; }

  /* ===== Mobile menu (phones) ===== */
  .menu-btn { display: none; }
  @media (max-width: 700px) {
    body > .wrap:first-child { box-shadow: none; clip-path: none; }   /* header already spans the full width on phones */
    .site-header { grid-template-columns: 1fr auto auto; grid-template-areas: "title in menu"; align-items: center; gap: .25rem; padding-top: 1rem; }
    .site-title { font-size: 1.3rem; }
    .social { padding: .5rem; margin-right: -.1rem; }
    .menu-btn { grid-area: menu; display: grid; place-items: center; align-content: center; gap: 6px; width: 2.75rem; height: 2.75rem; margin-right: -.55rem; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); }
    .menu-btn span { display: block; width: 22px; height: 2px; background: currentColor; transition: transform .25s ease; }
    .menu-open .menu-btn span:first-child { transform: translateY(4px) rotate(45deg); }
    .menu-open .menu-btn span:last-child { transform: translateY(-4px) rotate(-45deg); }
    .menu-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
    nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: .1rem; padding: .75rem var(--gutter) 1.5rem; background: var(--bg); border-bottom: 1px solid var(--rule); box-shadow: 0 18px 30px -18px rgba(0,0,0,.25);
      font-size: 1.7rem; visibility: hidden; opacity: 0; transform: translateY(-.5rem); pointer-events: none; transition: opacity .2s ease, transform .2s ease, visibility 0s .2s; }
    .menu-open nav { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: opacity .2s ease, transform .2s ease; }
    nav a { font-family: var(--head); font-weight: 500; letter-spacing: -.03em; padding: .4rem .3rem; margin: 0 -.3rem; background-position: 0 88%; }
  }
  @media (prefers-reduced-motion: reduce) { .menu-btn span, nav { transition: none !important; } }

  /* Home page screenplay logos: smaller on phones */
  @media (max-width: 700px) {
    .logo { height: 76px; margin-bottom: .9rem; }
    .logo img { max-width: 62%; }
  }