/*
 * Noa Scheinowitz — site styles.
 * Colors, space and radii come from tokens.css. Do not write hex values here.
 */

/* ========== Base ========== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 27px;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--accent-ink);
}

a:hover {
  color: var(--ink);
}

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

p {
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
  }
}

/* ========== Type styles (design system) ========== */
.display {
  margin: 0;
  font-size: 64px;
  line-height: 64px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--secondary-ink);
}

.heading-1 {
  margin: 0;
  font-size: 40px;
  line-height: 46px;
  font-weight: 400;
  color: var(--secondary-ink);
}

.heading-2 {
  margin: 0;
  font-size: 28px;
  line-height: 34px;
  font-weight: 400;
  font-style: italic;
  color: var(--secondary-ink);
}

.small {
  font-size: 14px;
  line-height: 21px;
}

.label {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.muted {
  color: var(--ink-muted);
}

@media (max-width: 760px) {
  .display {
    font-size: 44px;
    line-height: 48px;
  }
}

/* ========== Page frame ========== */
.page {
  max-width: calc(var(--page-max) + 2 * var(--page-margin));
  margin: 0 auto;
  padding: 0 var(--page-margin);
}

.prose {
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 20;
  padding: var(--space-2) var(--space-4);
  background: var(--paper);
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  top: var(--space-4);
}

/* Label-style text link: "View work →" */
.link-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.link-label:hover {
  color: var(--accent-ink);
}

.link-label.is-accent {
  color: var(--accent-ink);
}

.link-label.is-accent:hover {
  color: var(--ink);
}

.link-label.is-muted {
  color: var(--ink-muted);
}

/* An image frame with no image yet: accent-tint, with a small label. */
.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--accent-tint);
  color: var(--accent-ink);
}

/* ========== Navigation ========== */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--hairline);
}

.brand {
  font-size: 22px;
  line-height: 28px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}

.nav-main {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-link,
.nav-action,
.nav-toggle,
.nav-panel a {
  font-family: var(--font-serif);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}

.nav-link {
  padding: 14px 0;
  color: var(--ink);
}

.nav-link:hover,
.nav-link[aria-current='page'] {
  color: var(--accent-ink);
}

/* Contact: the one Batorange fill per view. */
.nav-action {
  padding: 13px 23px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  transition: background-color 0.15s, color 0.15s;
}

.nav-action:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.nav-action[aria-current='page'] {
  background: none;
  color: var(--accent-ink);
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  background: none;
  border: 1px solid var(--ink-muted);
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
}

.nav-panel {
  display: flex;
  flex-direction: column;
  padding: var(--space-2) 0 var(--space-4);
  border-bottom: 1px solid var(--hairline);
}

.nav-panel[hidden] {
  display: none;
}

.nav-panel a {
  padding: 14px 0;
  color: var(--ink);
}

.nav-panel a[aria-current='page'] {
  color: var(--accent-ink);
}

@media (max-width: 760px) {
  .nav-main {
    display: none;
  }
  .nav-toggle {
    display: inline-flex;
  }
}

@media (min-width: 761px) {
  .nav-panel {
    display: none;
  }
}

/* ========== Footer ========== */
.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: 120px;
  padding: var(--space-10) 0;
  border-top: 1px solid var(--hairline);
  color: var(--ink-muted);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.footer a {
  color: var(--ink-muted);
}

.footer a:hover {
  color: var(--accent-ink);
}

/* ========== Card (design system: components/Card) ========== */
.sf-card {
  display: block;
  container-type: inline-size;
  background: var(--paper-raised);
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-decoration: none;
}

.sf-card-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.sf-card-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.sf-card-link {
  transition: background-color 0.15s;
}

.sf-card-link:hover {
  background: var(--accent-tint);
  color: var(--ink);
}

.sf-card-link:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
}

.sf-card-media {
  position: relative;
  overflow: hidden;
  background: var(--accent-tint);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
}

.sf-card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sf-card-horizontal .sf-card-inner {
  display: grid;
  grid-template-columns: minmax(240px, 5fr) 7fr;
  gap: var(--space-6);
  align-items: center;
}

@container (max-width: 560px) {
  .sf-card-horizontal .sf-card-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: stretch;
  }
}

.sf-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sf-card-title {
  margin: 0;
  font-size: 28px;
  line-height: 34px;
  font-weight: 400;
  font-style: italic;
  color: var(--secondary-ink);
}

.sf-card-text {
  font-size: 17px;
  line-height: 27px;
}

.sf-card-meta {
  margin: 0;
  font-size: 14px;
  line-height: 21px;
  color: var(--ink-muted);
}

/* ========== Home ========== */
.hero {
  position: relative;
  margin-top: var(--space-10);
}

.hero-media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--ink) 65%, transparent),
    transparent 60%
  );
}

.hero-panel {
  position: absolute;
  left: var(--space-6);
  right: var(--space-6);
  bottom: var(--space-6);
  max-width: 640px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--paper);
}

.hero-panel .display {
  font-size: 45px;
  line-height: 48px;
  color: var(--paper);
}

.hero-panel .muted {
  color: color-mix(in srgb, var(--paper) 75%, transparent);
}

.hero-panel .link-label {
  color: var(--paper);
}

.hero-panel .link-label:hover {
  color: color-mix(in srgb, var(--paper) 70%, transparent);
}

.about {
  display: flex;
  gap: var(--space-10);
  align-items: flex-start;
  margin-top: 120px;
}

.portrait {
  flex: 0 0 auto;
  width: min(100%, 440px);
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-text {
  flex: 1 1 400px;
  min-width: 0;
  max-width: 680px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  padding-top: var(--space-2);
}

@media (max-width: 760px) {
  .about {
    flex-direction: column;
    margin-top: 80px;
  }
}

/* ========== Portfolio list ========== */
.portfolio-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  padding-top: var(--space-10);
}

.toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--ink-muted);
  border-radius: 999px;
}

.toggle a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-6);
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.toggle a:hover {
  color: var(--accent-ink);
}

.toggle a[aria-current='page'] {
  background: var(--ink);
  color: var(--paper);
}

/* One card per row, newest first. Cards are 2/3 of the page width.
   Alignment: add class "align-left", "align-center" or "align-alternate" to the list. */
.project-list {
  list-style: none;
  margin: var(--space-10) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.project-list > li {
  display: flex;
  justify-content: center;
}

.project-list.align-left > li {
  justify-content: flex-start;
}

.project-list.align-alternate > li:nth-child(even) {
  justify-content: flex-end;
}

.project-list.align-alternate > li:nth-child(odd) {
  justify-content: flex-start;
}

.project-list .sf-card {
  width: 66.666%;
}

.project-list .sf-card-horizontal {
  width: 100%;
}

@media (max-width: 760px) {
  .project-list .sf-card {
    width: 100%;
  }
}

/* ========== Project page ========== */
.back {
  margin-top: var(--space-6);
  margin-bottom: var(--space-4);
}

.carousel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.stage {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--accent-tint);
  touch-action: pan-y;
}

.slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

.slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ctl {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--ink-muted);
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.ctl:hover {
  background: var(--ink);
  color: var(--paper);
}

.ctl.prev {
  left: var(--space-6);
}

.ctl.next {
  right: var(--space-6);
}

.strip {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.thumbs {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding: 4px;
}

.thumb {
  flex: 0 0 auto;
  width: 112px;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 2px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--accent-tint);
  color: var(--accent-ink);
  font-family: var(--font-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  overflow: hidden;
  cursor: pointer;
}

.thumb[aria-pressed='true'] {
  border-color: var(--accent-ink);
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.counter {
  flex: 0 0 auto;
  color: var(--ink-muted);
}

.info {
  margin-top: var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.title-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.year {
  font-size: 40px;
  color: var(--ink-muted);
}

.cols {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-10);
  align-items: flex-start;
}

.synopsis {
  flex: 1 1 560px;
  min-width: 0;
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.festivals {
  flex: 1 1 360px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.festivals ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.festivals li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--hairline);
}

.people {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.people summary {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  cursor: pointer;
  list-style: none;
}

.people summary::-webkit-details-marker {
  display: none;
}

.chevron {
  flex: 0 0 auto;
  transition: transform 0.25s ease;
}

.people[open] .chevron {
  transform: rotate(180deg);
}

.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: var(--space-10);
  padding: var(--space-2) 0 var(--space-10);
}

.people-grid h3 {
  margin-bottom: var(--space-4);
}

.people-grid dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.person {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}

.person dt,
.person dd {
  margin: 0;
}

.person dd {
  text-align: right;
}

.cast .person dd {
  font-style: italic;
  color: var(--ink-muted);
}

.crew .person dt {
  color: var(--ink-muted);
}

.more {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: 80px;
}

@media (max-width: 760px) {
  .stage {
    border-radius: var(--radius-md);
  }
  .ctl {
    width: 44px;
    height: 44px;
  }
  .ctl.prev {
    left: var(--space-2);
  }
  .ctl.next {
    right: var(--space-2);
  }
  .year {
    font-size: 28px;
  }
}

/* ========== Contact ========== */
.contact {
  max-width: 760px;
  padding-top: 80px;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.contact-intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.contact-intro p {
  max-width: 560px;
}

.contact dl {
  margin: 0;
  border-bottom: 1px solid var(--hairline);
}

.contact-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--hairline);
}

.contact dd {
  margin: 0;
}

.contact-email {
  font-size: 28px;
  line-height: 34px;
  font-style: italic;
  overflow-wrap: anywhere;
}

.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.contact-links a {
  color: var(--ink);
}

.contact-links a:hover {
  color: var(--accent-ink);
}

/* ========== 404 ========== */
.not-found {
  padding-top: 80px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}