/* Squeaky Cheese — squeakysound.com
   Look: dark mix-stage room, one serif (Spectral),
   cheese-yellow accent on buttons only. Colours live here; change them in one place. */

:root {
  --black: #000000;      /* page */
  --panel: #111111;      /* cards, placeholders */
  --light: #f4f1ea;      /* main text */
  --dim: #9a958c;        /* secondary text */
  --rule: #2a2a2a;       /* thin lines */
  --rind: #f4f1ea;       /* accent: underlines, + signs, focus (was yellow #f2c230) */

  --sans: "Spectral", Georgia, "Times New Roman", serif;
  --gutter: clamp(1rem, 4vw, 3rem);
  --measure: 36rem;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--black);
  color: var(--light);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
}

img { max-width: 100%; }
a { color: inherit; text-decoration-color: var(--dim); text-underline-offset: 0.2em; }
a:hover { color: var(--rind); text-decoration-color: var(--rind); }
:focus-visible { outline: 2px solid var(--rind); outline-offset: 4px; }

/* Small uppercase labels, like a credit roll */
.label {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ---------- Header: logo centre stage, tabs underneath ---------- */
.site-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: 2rem var(--gutter) 1.5rem;
  position: relative;
  z-index: 2;
}
.wordmark { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; text-decoration: none; color: var(--light); }
.wordmark .logo { display: block; height: clamp(3rem, 6vw, 4rem); width: auto; }
.wordmark .brand { display: block; height: clamp(1.1rem, 2vw, 1.4rem); width: auto; }
.home .wordmark .logo { height: clamp(3.75rem, 8vw, 5.5rem); }
.home .wordmark .brand { height: clamp(1.4rem, 2.8vw, 1.9rem); }
.wordmark:hover { color: var(--light); }

/* Desktop only (wider than 60rem): a slim bar, logo and name on the left, tabs on the right.
   Phones and tablets keep the stacked header above. */
@media (min-width: 60.0625rem) {
  .site-header { flex-direction: row; justify-content: space-between; align-items: center; gap: 2rem; max-width: 76rem; margin: 0 auto; width: 100%; padding: 1.25rem var(--gutter); }
  .wordmark, .home .wordmark { flex-direction: row; align-items: center; gap: 0.75rem; }
  .wordmark .logo, .home .wordmark .logo { height: 2.5rem; }
  .wordmark .brand, .home .wordmark .brand { height: 1.05rem; }
}

.tabs { display: flex; gap: clamp(1.25rem, 4vw, 3rem); }
.tabs a {
  position: relative;
  padding-bottom: 0.4em;
  text-decoration: none;
  color: var(--light);
  opacity: 0.7;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: opacity 0.3s ease;
}
/* Hover: a thin line draws out from the centre; the current tab keeps a yellow one */
.tabs a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--light);
  transform: scaleX(0);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tabs a:hover { opacity: 1; color: var(--light); }
.tabs a:hover::after { transform: scaleX(1); }
.tabs a[aria-current="page"] { opacity: 1; }
.tabs a[aria-current="page"]::after { height: 2px; background: var(--rind); transform: scaleX(1); }

main {
  flex: 1;
  width: 100%;
  max-width: 76rem;
  margin: 0 auto;
  padding: 2rem var(--gutter) 5rem;
}

.site-footer {
  padding: 1.5rem var(--gutter);
  font-size: 0.8125rem;
  color: var(--dim);
  border-top: 1px solid var(--rule);
}

/* ---------- Buttons ---------- */
.actions { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; }
.btn {
  display: inline-block;
  padding: 0.75em 1.5em;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--light);
  color: var(--light);
}
.btn:hover { color: var(--black); background: var(--light); }
.btn-primary { background: var(--rind); border-color: var(--rind); color: var(--black); }
.btn-primary:hover { background: var(--light); border-color: var(--light); color: var(--black); }

/* ---------- Home: full-screen photo at the console ---------- */
.home main { max-width: none; padding: 0; }

.hero {
  position: relative;
  min-height: 34rem;
  height: calc(100svh - 12rem);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  padding: 4rem var(--gutter) clamp(2.5rem, 6vh, 4.5rem);
  background: var(--black) url("assets/hero-studio-2.jpg") 62% 0% / cover no-repeat;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(0deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.8) 30%, rgba(0,0,0,0.2) 65%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 18%);
}
/* Desktop only: the photo fills the screen under the slim header, the crop sits a little
   lower so the mixing desk shows, and the darkening is a soft shadow behind the title
   instead of a band across the whole bottom. Phones and tablets keep the rules above. */
@media (min-width: 60.0625rem) {
  .hero { height: calc(100svh - 5rem); background-position: 62% 38%; }
  .hero::before {
    background:
      radial-gradient(ellipse 55% 45% at 50% 82%, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0) 100%),
      linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 22%),
      linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 14%);
  }
}
.hero-text { max-width: 60rem; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.hero-name { font-size: clamp(1.25rem, 2.4vw, 1.75rem); font-weight: 500; letter-spacing: 0.02em; margin-bottom: -0.5rem !important; }
.hero-text > * { margin: 0; }
.hero h1 {
  font-size: clamp(2.25rem, 5.5vw, 4.75rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.hero .lede { max-width: 30rem; font-size: 1.125rem; color: var(--light); opacity: 0.85; }

/* Featured work: one row of six */
.featured { padding: 4.5rem var(--gutter) 5rem; }
.section-head { display: flex; justify-content: flex-start; align-items: baseline; gap: 1rem; margin: 0 0 1.75rem; text-align: left; }
.section-head h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 600; letter-spacing: -0.01em; }

.posters {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.25rem;
}
.poster { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.poster .art {
  aspect-ratio: 2 / 3;
  max-width: 100%;
  background: var(--panel);
  border: 1px solid var(--rule);
  display: flex;
  align-items: flex-end;
  padding: 1rem;
  overflow: hidden;
}
.poster .art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.poster .art:has(img) { padding: 0; border: 0; }
/* Title card on black: keep the frame so it reads as a tile */
.poster .art.title-card { border: 1px solid var(--rule); }
.poster .art .t { font-size: 1.125rem; font-weight: 600; line-height: 1.15; }
.poster .meta { display: flex; flex-direction: column; gap: 0.1rem; letter-spacing: 0.08em; line-height: 1.4; }
.poster .name { font-weight: 500; line-height: 1.3; }

/* ---------- Inner pages ---------- */
.page-head { margin: 1rem 0 3rem; }
.page-title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}
.page-head p { margin: 0; color: var(--dim); max-width: var(--measure); }

/* Work: credits grouped by role, each group opens and closes */
.role-group { border-top: 1px solid var(--rule); }
.role-group:last-of-type { border-bottom: 1px solid var(--rule); }
.role-group summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 0;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 600;
}
.role-group summary::-webkit-details-marker { display: none; }
.role-group summary .count { color: var(--dim); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.role-group summary::after {
  content: "+";
  color: var(--rind);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1;
  width: 1.5rem;
  text-align: center;
}
.role-group[open] summary::after { content: "\2212"; }
.role-group summary .grow { flex: 1; display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }

.credits { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; }
.credits th { text-align: left; padding: 0 1rem 0.5rem 0; }
.credits td { padding: 0.8rem 1rem 0.8rem 0; border-top: 1px solid var(--rule); vertical-align: top; }
.credits td.title { font-weight: 500; font-size: 1.125rem; }
/* Credit titles link to IMDb. The clickable area is the width of the title
   (plus a little either side) and the full height of the row, line to line. */
.credits a.imdb {
  display: inline-block;
  padding: 0.8rem 0.6rem;
  margin: -0.8rem -0.6rem;
  text-decoration: none;
  color: inherit;
}
.credits a.imdb .t {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.25em;
  transition: text-decoration-color 0.25s ease;
}
.credits a.imdb:hover { color: var(--light); }
.credits a.imdb:hover .t { text-decoration-color: var(--rind); }
/* Home posters link to IMDb */
.poster-link { display: flex; flex-direction: column; gap: 0.6rem; text-decoration: none; color: inherit; }
/* Hover: the whole poster grows past its frame (nothing is cropped) and lifts slightly */
.poster-link .art { position: relative; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s ease, filter 0.5s ease; }
/* Hover effects only on devices with a real mouse or trackpad */
@media (hover: hover) and (pointer: fine) {
  .poster-link:hover .art { transform: scale(1.05); z-index: 2; box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.7); filter: brightness(1.06); }
}
/* Touch screens: no hover zoom (it can get stuck after a tap); just a brief dip while pressed */
.poster-link:active .art { filter: brightness(0.85); transition-duration: 0.1s; }
.poster-link:hover { color: inherit; }
.poster-link .meta { position: relative; z-index: 3; }
.credits td.title .dir-sm { display: none; font-weight: 400; font-size: 0.875rem; color: var(--dim); }
.credits td.title .note { display: block; font-weight: 400; font-size: 0.875rem; color: var(--dim); }
.credits td.dim { color: var(--dim); }
.credits td.year, .credits th.year { text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; }

/* About */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  margin: 0 0 4rem;
}
.prose p { margin: 0 0 1.25rem; max-width: var(--measure); }
.stage-photo { margin: 0; }
.stage-photo .photo { position: relative; }
.stage-photo img { display: block; width: 100%; height: auto; }
/* Same treatment as the home photo: muted colour, dark fade from the bottom */
.stage-photo .photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.15) 45%, rgba(0,0,0,0) 70%),
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 25%);
  pointer-events: none;
}
.stage-photo .zoom { display: block; cursor: zoom-in; }

/* Photo viewer: the full photo, unmuted, on a dark screen */
.lightbox { padding: 0; border: 0; margin: 0; width: 100vw; height: 100vh; height: 100svh; max-width: none; max-height: none; background: var(--black); overflow: hidden; cursor: zoom-out; }
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox::backdrop { background: transparent; }  /* the viewer itself is the black; it fades as you drag the photo down */
.lightbox figure { margin: 0; padding: 3.5rem 1rem 1.5rem; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
.lightbox img { display: block; max-width: 100%; max-height: calc(100svh - 10rem); width: auto; height: auto; object-fit: contain; }
.lightbox figcaption { max-width: 40rem; color: var(--dim); font-size: 0.95rem; line-height: 1.5; text-align: center; }
.lightbox-close { position: absolute; top: 0.5rem; right: 0.75rem; padding: 0.25rem 0.6rem; border: 0; background: none; color: var(--light); font: 300 2.25rem/1 var(--sans); cursor: pointer; }
.stage-photo figcaption { margin-top: 0.6rem; color: var(--dim); font-size: 0.875rem; }

.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2rem;
  border-top: 1px solid var(--rule);
  padding-top: 2.5rem;
}
.service h2 { margin: 0 0 0.5rem; font-size: 1.25rem; font-weight: 600; }
.service p { margin: 0; color: var(--light); opacity: 0.85; }

.studio { border-top: 1px solid var(--rule); padding-top: 2.5rem; max-width: var(--measure); }
.studio h2 { margin: 0 0 0.5rem; font-size: 1.25rem; font-weight: 600; }
.studio p { margin: 0; font-size: 1.125rem; }

/* Contact */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.contact-body { margin: 0 0 1.5rem; font-size: 1.125rem; }
.contact-intro { margin: 2rem 0 0.75rem; font-size: 1.125rem; color: var(--dim); }
.big-email {
  display: inline-block;
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 500;
  margin: 0 0 2rem;
  word-break: break-word;
  text-decoration: underline;
  text-decoration-color: var(--dim);
  text-underline-offset: 0.25em;
}
.profiles { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
.profiles a {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.75rem; padding: 0 1.25rem;
  border: 1px solid var(--rule);
  text-decoration: none; font-weight: 600; font-size: 0.875rem;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.profiles a:hover { border-color: var(--light); color: var(--light); }
.profiles img { display: block; height: 1.5rem; width: auto; }
.details { margin: 0; max-width: 40rem; }
.details div {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--rule);
}
.details dt { color: var(--dim); }
.details dd { margin: 0; }

/* The one moment of motion: the home page fades up from black */
@media (prefers-reduced-motion: reduce) {
  .tabs a, .tabs a::after, .credits a.imdb, .poster-link .art { transition: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero { animation: fade-in 1.2s ease both; }
}
/* Swipe between tabs (phones). The drag itself is handled in swipe.js;
   this is the incoming page sliding in from the side the old one left towards. */
html { background: var(--black); overflow-x: hidden; }
body { touch-action: pan-y pinch-zoom; }  /* sideways drags go to swipe.js; scrolling and pinch-to-zoom stay with the browser */
.swipe-in-right body { animation: swipe-in-right 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.swipe-in-left body { animation: swipe-in-left 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes swipe-in-right { from { transform: translate3d(100%,0,0); } to { transform: none; } }
@keyframes swipe-in-left { from { transform: translate3d(-100%,0,0); } to { transform: none; } }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Tablets ---------- */
@media (max-width: 60rem) {
  .posters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .about-grid { grid-template-columns: 1fr; }
}

/* ---------- Phones ---------- */
@media (max-width: 40rem) {
  .tabs { width: 100%; justify-content: space-between; }
  .hero { background-position: 78% center; height: auto; min-height: 36rem; padding-top: 14rem; }
  .posters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .credits .hide-sm { display: none; }
  .credits td.title .dir-sm { display: block; }
  .details div { grid-template-columns: 1fr; gap: 0.1rem; }
}

/* ---------- Desktop only (wider than 60rem): behave like a regular website ----------
   Text and spacing stay a fixed size, content sits in a centred column, and the home photo
   keeps its scale: a bigger window shows more of the photo instead of zooming into it.
   Phones and tablets (60rem and narrower) are not affected by anything in here. */
@media (min-width: 60.0625rem) {
  :root { --gutter: 3rem; }
  .tabs { gap: 3rem; }
  .hero {
    height: min(calc(100svh - 5rem), 66rem);
    background-size: 1600px auto;   /* the photo never zooms: a bigger window just shows more of it */
  }
  .hero-name { font-size: 1.75rem; }
  .hero h1 { font-size: 4.75rem; }
  .featured { max-width: 76rem; margin: 0 auto; }
  .section-head h2 { font-size: 2.25rem; }
  .page-title { font-size: 4.5rem; }
  .role-group summary { font-size: 1.75rem; }
  .about-grid { gap: 4rem; }
  .big-email { font-size: 2.25rem; }
}
/* Very wide windows (wider than the photo itself): centre the photo and fade its sides into the black */
@media (min-width: 100.0625rem) {
  .hero { background-position: 50% 38%; }
  .home .hero { background-position: 50% 0; }
  .hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(90deg, #000 calc(50% - 800px), rgba(0,0,0,0) calc(50% - 560px), rgba(0,0,0,0) calc(50% + 560px), #000 calc(50% + 800px));
  }
}
/* Desktop only: one fixed composition. Sizes and spacing never change with the window;
   narrower windows scroll sideways instead of squeezing. */
@media (min-width: 60.0625rem) {
  html { overflow-x: auto; }
  body { min-width: 76rem; }
}

/* Desktop only, Home page.
   The photo fills the first screen under the header and your name and title sit at its bottom,
   as on the original site. Featured work (with its heading) sits below on black, so you scroll
   to reach the credits. */
@media (min-width: 60.0625rem) {
  .home .hero {
    height: calc(100svh - 5rem);                    /* fills the window; name and title follow its bottom edge */
    min-height: 30rem;
    align-items: flex-end;                          /* name and title at the bottom of the photo */
    padding: 4rem var(--gutter) 3.5rem;
    background-position: 50% 0;                    /* photo pinned to the top, centred on the column */
  }
  .home .hero::before {
    background:
      radial-gradient(ellipse 620px 230px at 50% calc(100% - 160px), rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 55%, rgba(0,0,0,0) 100%),  /* soft shadow behind the title */
      linear-gradient(180deg, rgba(0,0,0,0.85) 0, rgba(0,0,0,0) 110px),                                                   /* under the header */
      linear-gradient(180deg, rgba(0,0,0,0) 880px, #000 1060px),                                                          /* photo's own bottom edge, on very tall windows */
      linear-gradient(0deg, #000 0, rgba(0,0,0,0) 180px);                                                                 /* soft edge into Featured work */
  }
}
/* Desktop only: the side vignette is part of the photo. It is always on and locked to the photo's
   own edges, so it never slides in when the window is resized; a narrower window simply crops it
   off-screen along with the edges of the photo. */
@media (min-width: 60.0625rem) {
  .hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(90deg,
      #000 calc(50% - 800px),
      rgba(0,0,0,0) calc(50% - 560px),
      rgba(0,0,0,0) calc(50% + 560px),
      #000 calc(50% + 800px));
  }
}