/* hectorknudsen.com. Cinematographer for YouTube creators.
   Near-black ground, one accent, one grotesque. The thumbnails carry the colour. */

:root {
  color-scheme: dark;
  --bg: #09090a;
  --bg-2: #141416;
  --line: #232327;
  --line-2: #34343a;
  --ink: #fafafa;
  --ink-2: #a8a8b0;
  --ink-3: #787882;   /* 4.56:1 on --bg. Used at small sizes, so it must clear AA. */
  --accent: #e9c46a;
  --max: 1240px;
  --pad: clamp(1.25rem, 5vw, 3rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 clamp(1rem, .96rem + .2vw, 1.0625rem)/1.6
        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--bg); padding: .75rem 1rem;
}
.skip:focus { left: 0; }

/* ---------- header: name left, two links right ---------- */
.site-head { padding: 1.75rem 0 0; }
.site-head .wrap { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; }
.brand {
  text-decoration: none; font-weight: 600; font-size: .8125rem;
  letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
}
.nav { display: flex; gap: clamp(1.125rem, 3vw, 2rem); }
.nav a {
  text-decoration: none; font-size: .75rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--accent); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem; text-decoration: none;
  font-weight: 600; font-size: .875rem; letter-spacing: .02em;
  padding: .875rem 1.625rem; border-radius: 999px;
  background: var(--ink); color: var(--bg); border: 1px solid var(--ink);
}
.btn:hover { background: var(--accent); border-color: var(--accent); }
.btn-2 { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-2:hover { background: transparent; color: var(--accent); border-color: var(--accent); }

/* ---------- hero ---------- */
.hero { padding: clamp(4rem, 12vw, 8.5rem) 0 clamp(2.5rem, 6vw, 4rem); }
.hero h1 {
  margin: 0 0 1.5rem;
  font-size: clamp(2.125rem, 1.15rem + 4.6vw, 5.5rem);
  line-height: .98; letter-spacing: -.035em; font-weight: 700;
}
.hero h1 em { font-style: normal; color: var(--ink-3); display: block; }
.lede {
  margin: 0 0 2.25rem; max-width: 40ch;
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.3125rem);
  line-height: 1.5; color: var(--ink-2);
}
.actions { display: flex; gap: .75rem; flex-wrap: wrap; }

/* ---------- sections ---------- */
section { padding: clamp(3.5rem, 9vw, 6.5rem) 0; }
.rule { border-top: 1px solid var(--line); }
.label {
  font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 2rem;
}

/* ---------- work: full-bleed vertical stack ---------- */
.stack { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); }
.piece { text-decoration: none; display: block; }
.piece .shot {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: .5rem; background: var(--bg-2); border: 1px solid var(--line);
}
.piece .shot img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.6,.2,1), opacity .5s ease;
}
.piece:hover .shot img, .piece:focus-visible .shot img { transform: scale(1.03); opacity: .82; }
.piece .cap {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-top: 1.125rem;
}
.piece .who {
  margin: 0; font-size: .75rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); flex-basis: 100%;
}
.piece h3 {
  margin: .5rem 0 0; font-weight: 600; letter-spacing: -.02em;
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.875rem); line-height: 1.2;
}
.piece .go { margin: .5rem 0 0; font-size: .8125rem; color: var(--ink-3); }
.piece:hover .go { color: var(--ink-2); }

/* ---------- player (project pages) ---------- */
.frame {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  background: #000; border: 1px solid var(--line);
  border-radius: .5rem; overflow: hidden;
}
.frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- roster ---------- */
.roster { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.roster li {
  border-top: 1px solid var(--line); padding: 1.125rem 0;
  font-size: clamp(1rem, .9rem + .6vw, 1.375rem);
  letter-spacing: -.01em; color: var(--ink-2);
}
.roster li:last-child { border-bottom: 1px solid var(--line); }

/* ---------- prose ---------- */
.prose { max-width: 60ch; }
.prose p { margin: 0 0 1.375rem; color: var(--ink-2); }
.prose p.first { color: var(--ink); font-size: clamp(1.125rem, 1rem + .6vw, 1.375rem); line-height: 1.45; letter-spacing: -.01em; }
.prose a { color: var(--accent); }

/* ---------- contact ---------- */
.mailto {
  display: inline-block; text-decoration: none; color: var(--ink);
  font-size: clamp(1.375rem, 1rem + 2.6vw, 3rem);
  font-weight: 600; letter-spacing: -.035em; line-height: 1.1;
  border-bottom: 1px solid var(--line-2); padding-bottom: .125rem;
}
.mailto:hover { color: var(--accent); border-color: var(--accent); }
.meta { margin: 2.75rem 0 0; padding: 0; list-style: none; font-size: .9375rem; max-width: 34rem; }
.meta li { display: flex; gap: 1.5rem; padding: .875rem 0; border-top: 1px solid var(--line); }
.meta b {
  font-weight: 400; color: var(--ink-3); min-width: 7.5rem; flex-shrink: 0;
  font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; padding-top: .1875rem;
}

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--line); padding: 2.5rem 0 3.5rem; color: var(--ink-3); font-size: .8125rem; }
.site-foot .wrap { display: flex; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }
.site-foot a { color: var(--ink-2); text-decoration: none; }
.site-foot a:hover { color: var(--ink); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }   /* wraps on the narrowest phones instead of pushing the email off screen */

/* ---------- phone ---------- */
@media (max-width: 30rem) {
  /* Four nav items will not sit beside the name on a phone, so the header
     stacks rather than clipping the last link off the right edge. */
  .site-head { padding: 1.125rem 0 0; }
  .site-head .wrap { flex-direction: column; align-items: flex-start; gap: .625rem; }
  .brand { font-size: .6875rem; letter-spacing: .12em; }
  .nav { gap: 1rem; }
  .nav a { font-size: .625rem; letter-spacing: .1em; }
  .hero { padding: 3rem 0 2.5rem; }
  /* "Cinematic adventure" has to sit on one line on a phone, or the headline runs to four. */
  .hero h1 { font-size: 1.875rem; }
  /* The printed email is the widest word on the site. Keep it inside a 320px phone. */
  .mailto { font-size: 1.25rem; overflow-wrap: anywhere; }
  .actions .btn { flex: 1 1 auto; justify-content: center; }
}

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

/* ---------- headings that double as section labels ---------- */
h1.label, h2.label { font-weight: 400; }

.piece-title {
  margin: 0 0 2rem; line-height: 1.1; letter-spacing: -.03em;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
}

.say {
  margin: 0 0 2rem; max-width: 36ch; line-height: 1.45; letter-spacing: -.01em;
  font-size: clamp(1.125rem, 1rem + .6vw, 1.375rem);
}

.pager { margin: 3rem 0 0; display: flex; gap: .75rem; flex-wrap: wrap; }

.piece .go { display: flex; gap: .75rem; align-items: baseline; }
.piece .go span { color: var(--ink-3); }

/* ---------- closing call to action ---------- */
.cta h2 {
  margin: 0 0 .75rem; letter-spacing: -.025em; line-height: 1.1;
  font-size: clamp(1.625rem, 1.2rem + 2vw, 2.75rem);
}
.cta p { margin: 0 0 2rem; color: var(--ink-2); max-width: 40ch; }

.more { margin: 3rem 0 0; }
.nf { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.5rem); }

/* ---------- elsewhere ---------- */
.links { margin: 0; padding: 0; list-style: none; }
.links li { border-top: 1px solid var(--line); }
.links li:last-child { border-bottom: 1px solid var(--line); }
.links a, .links .nolink {
  display: grid; gap: .25rem 1.5rem; padding: 1.5rem 0; text-decoration: none;
  grid-template-columns: 1fr; align-items: baseline;
}
.links a:hover .n { color: var(--accent); }
.links .n {
  font-weight: 600; letter-spacing: -.02em; color: var(--ink);
  font-size: clamp(1.125rem, 1rem + .8vw, 1.5rem);
}
.links .w { color: var(--ink-2); font-size: .9375rem; max-width: 52ch; }
.links .go { color: var(--ink-3); font-size: .8125rem; }
.links .nolink .n { color: var(--ink-2); }

@media (min-width: 48rem) {
  .links a, .links .nolink { grid-template-columns: 14rem 1fr auto; }
  .links .w { grid-column: 2; }
}

/* ---------- about, section headings inside prose ---------- */
.prose h2 {
  margin: 3rem 0 1rem; font-size: .6875rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 500;
}

/* ---------- showreel hero ----------
   The video is decoration behind the type. The poster is painted underneath it
   so the block is never black while the video loads, and it is the only thing
   shown when the viewer has asked for reduced motion. */
.hero.has-reel { padding-bottom: 0; }
.reel {
  position: relative; margin: clamp(2rem, 5vw, 3.5rem) 0 0;
  aspect-ratio: 16 / 9; overflow: hidden; background: #000;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.reel-v, .reel-still {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.reel-still { display: none; }
.reel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(9,9,10,.45), rgba(9,9,10,0) 40%);
}

@media (prefers-reduced-motion: reduce) {
  .reel-v { display: none; }
  .reel-still { display: block; }
}

/* ---------- gear ---------- */
.gear-group + .gear-group { margin-top: 3.5rem; }

/* links inside the contact detail rows */
.meta a { color: var(--accent); }

/* ---------- paid link disclosure ---------- */
.disclosure { margin: 0 0 1.5rem; color: var(--ink-2); font-size: .875rem; }

/* ---------- licensed and hired by ----------
   White marks on the dark ground, one row height, so no single brand shouts. */
.logos {
  list-style: none; margin: 0; padding: 0;
  /* Flex rather than grid, so a short last row sits centred at any count. */
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 2rem 1.5rem;
}
.logos li { flex: 0 0 calc(50% - .75rem); }
@media (min-width: 40rem) {
  .logos { gap: 2.5rem 3rem; }
  .logos li { flex-basis: calc(25% - 2.25rem); }
}
.logos li { display: flex; align-items: center; justify-content: center; height: 3.25rem; }
.logos img { width: auto; height: auto; max-width: 100%; max-height: 100%; opacity: .75; }
.also { margin: 2.75rem 0 0; color: var(--ink-2); font-size: .9375rem; }

/* ---------- role on film cards ---------- */
.piece .role { margin: .375rem 0 0; color: var(--ink-2); font-size: .875rem; flex-basis: 100%; }

/* ---------- second logo group ---------- */
.label.logos-next { margin-top: 3.5rem; }

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