/* ================================================================
   Marcel Schnellinger — Portfolio
   v16 · 2026-05-04 · imprint page + footer link
   ================================================================ */

/* ---------- root tokens ---------- */

:root {
  --bg:        #f4efe6;
  --bg-deep:   #eae3d3;
  --ink:       #191712;
  --ink-soft:  rgba(25, 23, 18, 0.62);
  --ink-faint: rgba(25, 23, 18, 0.18);
  --rule:      rgba(25, 23, 18, 0.14);
  --accent:    #a8421f;

  --display: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono:    'Helvetica Neue', Helvetica, Arial, sans-serif;

  --max:     1480px;
  --gutter:  clamp(1.25rem, 2.5vw, 2.5rem);
}

/* role-specific palettes — same structure, distinct color story */

[data-role="director"] {
  --bg: #f4efe6;
  --bg-deep: #eae3d3;
  --ink: #191712;
  --ink-soft: rgba(25, 23, 18, 0.62);
  --ink-faint: rgba(25, 23, 18, 0.18);
  --rule: rgba(25, 23, 18, 0.14);
  --accent: #a8421f;
}

[data-role="cinematographer"] {
  --bg: #0e0e0c;
  --bg-deep: #1a1a17;
  --ink: #e8e6e0;
  --ink-soft: rgba(232, 230, 224, 0.62);
  --ink-faint: rgba(232, 230, 224, 0.22);
  --rule: rgba(232, 230, 224, 0.16);
  --accent: #c89e5b;
}

[data-role="photography"] {
  --bg: #fafaf7;
  --bg-deep: #ededea;
  --ink: #0a0a0a;
  --ink-soft: rgba(10, 10, 10, 0.6);
  --ink-faint: rgba(10, 10, 10, 0.16);
  --rule: rgba(10, 10, 10, 0.12);
  --accent: #2d5a3d;
}

/* ---------- reset ---------- */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 380;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: opacity .25s ease;
}

a:hover { opacity: .55; }

button { font: inherit; cursor: pointer; }

::selection { background: var(--accent); color: var(--bg); }

/* ---------- layout primitives ---------- */

.shell {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}

/* ---------- type ---------- */

.eyebrow,
.label {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.display {
  font-family: var(--display);
  font-weight: 320;
  letter-spacing: -0.025em;
  line-height: 0.95;
  margin: 0;
}

.display em {
  font-style: italic;
}

h1.display { font-size: clamp(3.2rem, 9vw, 9.5rem); }
h2.display { font-size: clamp(2.4rem, 6vw, 6rem); }

p { margin: 0 0 1em; }

.lede {
  font-size: clamp(1.15rem, 1.5vw, 1.45rem);
  line-height: 1.4;
  font-weight: 360;
  max-width: 38ch;
}

/* ---------- top nav ---------- */

.topnav {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.6rem var(--gutter);
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 50;
  border-bottom: 1px solid var(--rule);
}

.topnav .brand {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 420;
  letter-spacing: -0.01em;
}

.topnav .roles {
  display: flex;
  gap: 1.5rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.topnav .roles a { color: var(--ink-soft); position: relative; }
.topnav .roles a.is-active { color: var(--ink); }
.topnav .roles a.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -.45rem;
  height: 1px;
  background: var(--accent);
}

@media (max-width: 640px) {
  .topnav {
    flex-direction: column;
    align-items: flex-start;
    gap: .9rem;
    padding: 1rem var(--gutter);
  }
  .topnav .roles {
    gap: .9rem 1rem;
    flex-wrap: wrap;
    font-size: .65rem;
    letter-spacing: .12em;
  }
}

/* ---------- landing-page mode: dark transparent topnav over video ---------- */

body.is-landing {
  background: #0a0a0a;
  color: #f4efe6;
}

body.is-landing .topnav {
  background: rgba(10, 10, 10, 0.35);
  border-bottom: 1px solid rgba(244, 239, 230, 0.12);
  color: #f4efe6;
}

body.is-landing .topnav .brand {
  color: #f4efe6;
}

body.is-landing .topnav .roles a {
  color: rgba(244, 239, 230, 0.65);
}

body.is-landing .topnav .roles a:hover,
body.is-landing .topnav .roles a.is-active {
  color: #f4efe6;
}

body.is-landing .foot {
  color: rgba(244, 239, 230, 0.55);
  border-top: 1px solid rgba(244, 239, 230, 0.12);
  background: rgba(10, 10, 10, 0.5);
  position: relative;
  z-index: 2;
}

/* ---------- footer ---------- */

.foot {
  margin-top: 8rem;
  padding: 3rem var(--gutter) 2rem;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

@media (max-width: 640px) {
  .foot { flex-direction: column; align-items: flex-start; }
}

/* ================================================================
   ROOT LANDING
   ================================================================ */

.landing {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  isolation: isolate; /* contain z-index stacking */
  background: #0a0a0a; /* fallback while video loads */
  color: #f4efe6;
}

/* full-bleed background video */
.landing-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

/* dark scrim over the video so the cream type stays readable
   regardless of the footage at any given moment */
.landing::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(10, 10, 10, 0.45) 0%,
      rgba(10, 10, 10, 0.20) 45%,
      rgba(10, 10, 10, 0.30) 100%);
  pointer-events: none;
}

/* lift everything else above the scrim */
.landing > *:not(.landing-bg-video) {
  position: relative;
  z-index: 2;
}

.landing-head {
  padding: clamp(3rem, 8vh, 6rem) var(--gutter) clamp(2rem, 6vh, 4rem);
}

.landing-head .name {
  font-size: clamp(3rem, 11vw, 12rem);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: .9;
  margin: 0;
  color: #f4efe6;
}

.landing-head .tag {
  margin-top: 1.2rem;
  max-width: 36ch;
  color: rgba(244, 239, 230, 0.85);
}

/* Vertical role list, left-aligned under the name */
.landing-roles {
  display: flex;
  flex-direction: column;
  gap: clamp(0.4rem, 1vh, 0.9rem);
  margin-top: clamp(2rem, 4vh, 3rem);
}

.landing-role {
  display: inline-block;
  width: fit-content;
  font-size: clamp(1.4rem, 2.4vw, 2.2rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: rgba(244, 239, 230, 0.78);
  transition: color .25s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}

.landing-role:hover {
  color: #f4efe6;
  transform: translateX(0.4rem);
  opacity: 1;
}

@media (max-width: 800px) {
  .landing-role { font-size: clamp(1.2rem, 5vw, 1.6rem); }
}

/* ================================================================
   ROLE INDEX (project list)
   ================================================================ */

.role-head {
  padding: clamp(3rem, 8vh, 6rem) var(--gutter) clamp(2rem, 5vh, 3.5rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}

.role-head .crumb {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.role-head h1 {
  font-size: clamp(3rem, 10vw, 11rem);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: .9;
  margin: 0;
}

.role-head h1 em {
  font-style: italic;
  color: var(--accent);
}

.role-head .blurb {
  max-width: 40ch;
  font-size: 1.1rem;
  margin-top: .5rem;
}

/* index — visual grid of project covers */

.work-grid {
  padding: 0 var(--gutter) clamp(3rem, 6vh, 5rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 2.2rem) clamp(1rem, 2vw, 2rem);
}

@media (max-width: 1280px) { .work-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .work-grid { grid-template-columns: 1fr; } }

.work-tile {
  display: block;
  color: inherit;
  position: relative;
}

.work-tile-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--bg-deep) center / cover no-repeat;
  overflow: hidden;
  display: block;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), filter .35s ease;
  filter: saturate(.96);
}

.work-tile:hover .work-tile-thumb {
  filter: saturate(1.05) contrast(1.02);
  transform: scale(1.005);
}

.work-tile-thumb.is-empty {
  display: grid;
  place-items: center;
  background: var(--bg-deep);
  color: var(--ink-faint);
}

.work-tile-thumb .ph-num {
  font-size: clamp(2rem, 4vw, 3.5rem);
  letter-spacing: -0.02em;
  font-weight: 200;
  color: var(--ink-faint);
}

.work-tile-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.85rem;
  padding: 0 0.1rem;
}

.work-tile-meta .ttl {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.25;
  color: var(--ink);
  transition: color .25s ease;
}

.work-tile:hover .work-tile-meta .ttl {
  color: var(--accent);
}

.work-tile-meta .yr {
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--ink-soft);
  flex-shrink: 0;
}

.work-tile .sub {
  display: block;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 0.25rem;
  padding: 0 0.1rem;
}

/* empty state */

.empty {
  padding: 6rem var(--gutter);
  text-align: center;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ================================================================
   PROJECT DETAIL
   ================================================================ */

.proj-hero {
  padding: clamp(3rem, 7vh, 5rem) var(--gutter) clamp(1.5rem, 3vh, 2.5rem);
}

.proj-hero .crumb {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
}

.proj-hero h1 {
  font-size: clamp(2.6rem, 7.5vw, 7.5rem);
  font-weight: 320;
  letter-spacing: -0.03em;
  line-height: .92;
  margin: 0;
  max-width: 18ch;
}

.proj-hero h1 em {
  font-style: italic;
  color: var(--accent);
}

.proj-hero .sub {
  margin-top: 1.2rem;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  color: var(--ink-soft);
  max-width: 50ch;
}

/* meta strip */

.proj-meta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 2rem 2.4rem;
  padding: 2.5rem var(--gutter);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.proj-meta .item {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.proj-meta .k {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.proj-meta .v {
  font-size: 1rem;
  line-height: 1.35;
}

/* description */

.proj-desc {
  padding: 4rem var(--gutter);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2rem;
  border-bottom: 1px solid var(--rule);
}

.proj-desc .label { align-self: start; }

.proj-desc .body {
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.55;
  max-width: 60ch;
  white-space: pre-line;
}

@media (max-width: 720px) {
  .proj-desc { grid-template-columns: 1fr; gap: 1rem; }
}

/* media spreads */

.spreads { padding: 3rem 0; }

.spread {
  margin: 0 0 2.5rem;
  padding: 0 var(--gutter);
}

.spread.full          { padding: 0; }
.spread.full > figure { margin: 0; }

.spread.full img,
.spread.full video,
.spread.full iframe {
  width: 100vw;
}

/* .spread-padded: keep the figure within the same horizontal gutter
   as text. Must override .full's 100vw behavior when both classes coexist.
   Using !important here because the cascade combinations are getting
   too brittle to manage with specificity alone. */
.spread.spread-padded { padding: 0 var(--gutter) !important; }
.spread.spread-padded > figure { margin: 0; }
.spread.spread-padded img,
.spread.spread-padded video,
.spread.spread-padded iframe { width: 100% !important; max-width: 100% !important; }

.spread.two-up {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.spread.three-up {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.spread.half-left,
.spread.half-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2rem;
}

.spread.half-right > figure { grid-column: 2; }

.spread.centered {
  display: grid;
  place-items: center;
  padding: 0 calc(var(--gutter) + 5vw);
}

.spread figure { margin: 0; }

.spread img,
.spread video,
.spread iframe {
  width: 100%;
  height: auto;
  display: block;
}

.spread iframe {
  aspect-ratio: 16/9;
  border: 0;
}

/* uploaded videos: ink-toned background instead of the browser default
   gray, so before-playback feels intentional. Let the video use its
   own natural aspect ratio. */
.spread video {
  background: var(--ink);
}

.spread figcaption {
  margin-top: .65rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

@media (max-width: 720px) {
  .spread.two-up,
  .spread.three-up,
  .spread.half-left,
  .spread.half-right {
    grid-template-columns: 1fr;
  }
  .spread.half-right > figure { grid-column: 1; }
  .spread.centered { padding: 0 var(--gutter); }
}

/* next project */

.proj-next {
  border