/* ============================================================
   BILLY ENDSON — Portfolio
   Design language: pure black canvas, heavy grotesque type,
   hairline section rules, colorful 3D-render imagery.
   ============================================================ */

:root {
  --bg: #000000;
  --fg: #ffffff;
  --muted: #9c9c9c;
  --line: rgba(255, 255, 255, 0.14);
  --pad: clamp(20px, 2.75vw, 38px);
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --display: "Public Sans", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

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

:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 4px;
}

/* ---------- Skip link ---------- */

.skip-link {
  position: absolute;
  left: var(--pad);
  top: -64px;
  z-index: 200;
  background: var(--fg);
  color: var(--bg);
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: top 0.25s ease;
}

.skip-link:focus-visible {
  top: 14px;
  outline: none;
}

/* ---------- Header / Nav ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: 22px var(--pad);
  transition: background 0.35s ease, border-color 0.35s ease, padding 0.35s ease;
  border-bottom: 1px solid transparent;
}

.site-header.scrolled {
  background: rgba(0, 0, 0, 0.78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
  padding-top: 14px;
  padding-bottom: 14px;
}

.nav {
  display: flex;
  gap: clamp(20px, 3.2vw, 44px);
}

.nav-link {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
  opacity: 0.75;
  padding: 4px 2px;
  position: relative;
  transition: opacity 0.25s ease;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}

.nav-link:hover,
.nav-link.is-active { opacity: 1; }

.nav-link:hover::after,
.nav-link.is-active::after { transform: scaleX(1); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.hero-media {
  position: absolute;
  inset: 0;
}

/* subtle film grain — evens out scaling artifacts on the video-derived frame */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Both layers must be taken out of flow. As static siblings each at
   height:100% the video lands BELOW the image and .hero{overflow:hidden}
   clips it to a sliver, so the video never appears. */
.hero-media img,
.hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* video stays hidden until JS enables it (motion allowed) */
.hero-media video { display: none; }
.hero-media.video-on video { display: block; }

.hero-media img {
  animation: heroDrift 30s var(--ease-out) infinite alternate;
}

/* Desktop hero is the 2:1 landscape render. Bias the crop right so the car
   — which sits flush against the right edge of the frame — is never cut;
   the left side we give up is skyline, and it sits behind the headline.
   Poster and video share the value so the swap between them is seamless. */
@media (min-width: 761px) {
  .hero-media img,
  .hero-media.video-on video { object-position: 90% center; }
}

@keyframes heroDrift {
  from { transform: scale(1.01); }
  to   { transform: scale(1.06) translate(-0.8%, -1%); }
}

.hero-content {
  position: absolute;
  left: clamp(22px, 20.9%, 290px);
  top: 50%;
  transform: translateY(-48%);
  z-index: 2;
}

.hero-title {
  /* Public Sans gives flat-sided capitals (B, E, M, H) a 0.0675em left side
     bearing, so at 116px the ink of "BILLY"/"ENDSON" starts ~7.8px right of
     the box while the 17.6px subtitle's ink starts under 0.8px in. The ratio
     is identical — it's the absolute inset that scales, and at 6.6x the size
     it reads as the title being indented. Pull it back by its own side
     bearing so the ink sits flush with the content edge. In em, so it stays
     exact at every step of the clamp() below (see .hero-sub for the pair). */
  margin-left: -0.0675em;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(3.2rem, 8.1vw, 7.25rem);
  line-height: 0.88;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  text-shadow: 0 4px 42px rgba(0, 0, 0, 0.4);
}

.hero-sub {
  /* Same correction as .hero-title, at this element's own scale (the "3" and
     "M" side bearing). Because each block is nudged by a fraction of ITS OWN
     font-size, the two left edges stay aligned at every viewport — a single
     shared px/em offset could only be right at one size ratio. */
  margin-left: -0.044em;
  margin-top: clamp(12px, 1.6vw, 20px);
  font-family: var(--display);
  font-size: clamp(0.8rem, 1.45vw, 1.1rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}

/* ---------- Sections shared ---------- */

section { scroll-margin-top: 64px; }

.section-title {
  font-size: clamp(2.6rem, 6.2vw, 5.2rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
}

/* <picture> wrappers must not disturb img sizing contexts */
picture { display: contents; }

/* cap content width on ultrawide — full-bleed sections stay full-bleed */
.section-head,
.works-grid,
.about-grid {
  max-width: 1560px;
  margin-inline: auto;
}

/* ---------- Gallery ---------- */

.gallery {
  padding: clamp(72px, 9vw, 124px) var(--pad) clamp(84px, 10.5vw, 140px);
  border-bottom: 1px solid var(--line);
}

.section-head { text-align: center; }

.section-kicker {
  margin-top: 10px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--muted);
}

.works-grid {
  margin-top: clamp(40px, 5vw, 62px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(14px, 1.3vw, 18px);
  row-gap: clamp(52px, 6.6vw, 90px);
}

.work-link { display: block; }

.work-media {
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: #0c0c0c;
}

.work-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out), filter 0.5s ease;
}

.work-link:hover .work-media img,
.work-link:focus-visible .work-media img {
  transform: scale(1.045);
  filter: brightness(1.06);
}

.work-meta {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.9vw, 24px);
  margin-top: 12px;
}

.work-num {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.65rem, 3.35vw, 3rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.work-title {
  display: block;
  font-size: clamp(0.95rem, 1.32vw, 1.2rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 5px;
  transition: text-decoration-color 0.3s ease;
}

.work-link:hover .work-title { text-decoration-color: var(--fg); }

.work-sub {
  display: block;
  margin-top: 5px;
  font-size: clamp(0.75rem, 1vw, 0.88rem);
  font-weight: 500;
  color: var(--muted);
}

/* ---------- About / FAQ ---------- */

.about {
  padding: clamp(80px, 10vw, 140px) var(--pad);
  border-bottom: 1px solid var(--line);
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6.3fr);
  gap: clamp(44px, 6vw, 92px);
  align-items: start;
}

.section-label {
  font-size: clamp(0.95rem, 1.6vw, 1.35rem);
  font-weight: 500;
  color: var(--fg);
  opacity: 0.9;
}

.about-title {
  margin-top: 6px;
  font-size: clamp(2.1rem, 4.6vw, 3.9rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.04;
}

.about-bio {
  margin-top: 24px;
  max-width: 46ch;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--muted);
}

.faq-item {
  border-top: 1px solid var(--line);
  padding: clamp(20px, 2.5vw, 30px) 0;
}

.faq-item:last-child { border-bottom: 1px solid var(--line); }

.faq-q {
  font-size: clamp(0.98rem, 1.32vw, 1.15rem);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.35;
}

.faq-a {
  margin-top: 12px;
  font-size: clamp(0.82rem, 1.05vw, 0.92rem);
  line-height: 1.7;
  color: var(--muted);
}

.faq-a a {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Contact ---------- */

.contact {
  display: grid;
  grid-template-columns: 43.3% 56.7%;
  min-height: clamp(480px, 56.2vw, 800px);
  border-bottom: 1px solid var(--line);
}

.contact-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(22px, 2.6vw, 34px);
  padding: clamp(64px, 8vw, 110px) var(--pad);
}

.contact-title {
  font-size: clamp(2.3rem, 4.9vw, 4.2rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
}

.contact-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.contact-email {
  display: inline-block;
  margin-top: 8px;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  transition: opacity 0.25s ease;
}

.contact-email:hover { opacity: 0.65; }

.socials {
  margin-top: clamp(20px, 2.4vw, 30px);
  display: flex;
  gap: clamp(16px, 2vw, 26px);
}

.socials a {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--muted);
  transition: color 0.25s ease;
}

.socials a:hover { color: var(--fg); }

.contact-media {
  position: relative;
  overflow: hidden;
  min-height: 320px;
}

.contact-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
}

/* ---------- Footer ---------- */

.site-footer {
  padding: 26px var(--pad);
  text-align: center;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.015em;
  color: var(--muted);
}

/* ---------- Reveal on scroll ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}

[data-reveal].in-view {
  opacity: 1;
  transform: none;
}

.works-grid .work-card:nth-child(2) { transition-delay: 0.08s; }
.works-grid .work-card:nth-child(3) { transition-delay: 0.16s; }
.works-grid .work-card:nth-child(4) { transition-delay: 0.24s; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-bio { max-width: 62ch; }
}

@media (max-width: 760px) {
  .works-grid { grid-template-columns: 1fr; row-gap: 56px; }

  .hero { min-height: 480px; }

  /* soft scrim so hero type stays legible over the moving video */
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(100deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.12) 55%, transparent 80%);
    pointer-events: none;
  }

  .hero-content {
    left: var(--pad);
    right: var(--pad);
    transform: translateY(-52%);
  }

  .contact { grid-template-columns: 1fr; min-height: 0; }

  .contact-media { min-height: 0; }

  .contact-media img {
    position: static;
    aspect-ratio: 4 / 5;
    object-position: 50% 22%;
  }

  .site-footer { font-size: 10.5px; }
}

@media (max-width: 760px) {
  .nav-link { padding: 10px 4px; font-size: 12.5px; }
}

@media (max-width: 420px) {
  .nav { gap: 16px; }
  .nav-link { font-size: 12px; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-media img { animation: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .work-media img { transition: none; }
}