/* ==========================================================
   Fonts — Söhne. Each cut is its own family so the weight
   always comes from the file (the 100–900 range stops browsers
   faking bold on top of it).
   ========================================================== */
@font-face {
  font-family: "Sohne Fett";
  src: url("fonts/Sohne-Fett.otf") format("opentype");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Sohne Kraftig";
  src: url("fonts/Sohne-Kraftig.otf") format("opentype");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Sohne Leicht";
  src: url("fonts/Sohne-Leicht.otf") format("opentype");
  font-weight: 100 900;
  font-display: swap;
}

/* ==========================================================
   Settings — change these to customize the layout
   Sizes here depend only on page width, never on viewport height.
   ========================================================== */
:root {
  --page-max: 1280px;           /* max page width, padding included */
  --edge: 20px;                 /* nav padding from the page edges */
  --gutter: 20px;               /* gap between grid columns/rows */
  --cols: 8;                    /* desktop columns */
  --nav-size: 12px;             /* nav, WORK label and small column titles */
  --nav-rows: 1;                /* rows the nav wraps to (set per breakpoint below) */
  --nav-height: calc(var(--edge) * 2 + var(--nav-rows) * var(--nav-size) * 1.2 + (var(--nav-rows) - 1) * var(--gutter)); /* fallback; main.js measures the real nav */
  --hover-line: currentColor;   /* squiggle underline on hovered nav and footer links (currentColor = same as the text) */
  --hover-bg: #000000;          /* hero name highlight fill */
  --hover-fg: pink;             /* hero name highlight text */
  --body-size: 14px;            /* all body copy: resume, tags, descriptions, footer */
  --body-line-height: 1.5;
  --tag-size: 10px;             /* project tag chips */
  --tag-contrast: 20%;          /* how far the chip fill shifts from the section color */
  --tag-mix: black;             /* set by main.js: black on light sections (darker chips), white on dark ones (lighter chips) */
  --tag-fill: color-mix(in srgb, var(--bg), var(--tag-mix) var(--tag-contrast));
  --tag-padding: 4px;
  --tag-radius: 4px;
  --tag-gap: 4px;               /* space between chips */
  --hover-speed: 200ms;
  --h2-size: 32px;              /* h2 headings (small labels like PHOTO and WORK ↓ keep their own size) */
  --project-title-size: var(--h2-size);
  --unfocused-opacity: 0.4;     /* projects above/below the one in focus */
  --resume-unfocused-opacity: 0.5; /* hero resume row once you've scrolled past the hero */
  --image-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  --image-shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.25);
  --image-radius: 8px;          /* rounded corners on project images */
  --tooltip-darkness: 70%;      /* how much black is mixed into the current section's color */
  --tooltip-see-through: 50%;   /* how much of what's underneath shows through (blurred) */
  /* Current section color (--bg, set by main.js) darkened by --tooltip-darkness, then made see-through */
  --tooltip-bg: color-mix(in srgb, color-mix(in srgb, var(--bg), black var(--tooltip-darkness)), transparent var(--tooltip-see-through));
  --tooltip-fg: #ffffff;
  --tooltip-blur: 8px;          /* blur of whatever is under the tooltip */
  --tooltip-offset: 16px;       /* distance from the cursor */
  --tooltip-speed: 150ms;       /* tooltip animate in/out */
  --tooltip-image-size: 120px;  /* square picture in tooltips that have one */
  --resume-lift: 60px;          /* space between the resume row and the WORK label */
  --side-clear: calc(var(--edge) * 2 + var(--dot-size)); /* page side padding, leaves room for the dots */
  --font-display: "Sohne Kraftig", sans-serif; /* hero blurb + footer thanks ("Sohne Fett" is also loaded) */
  --font-heading: "Sohne Kraftig", sans-serif; /* nav, labels, titles, headings */
  --font-body: "Sohne Leicht", sans-serif;     /* body copy */
  --headline-size: 3rem;        /* hero blurb + footer thanks */
  --hero-gap: 80px;             /* space between hero blurb and resume row */
  --section-gap: 120px;         /* space between projects — keep small so the next one peeks in */
  --work-label-height: calc(var(--edge) * 2 + var(--nav-size) * 1.2); /* one nav-sized line + edge padding */
  --hero-height: calc(100svh - var(--work-label-height)); /* hero + WORK label fill the landing screen */
  --project-image-ratio: 21 / 9;
  --dot-size: 8px;
  --dot-gap: 8px;
  --dot-track: 48px;            /* length of the work dot while scrolling through projects */
  --snap: y mandatory;          /* "y proximity" for a softer snap, "none" to turn off */
  --color-transition: 300ms;    /* set to 0ms for a hard cut between colors */

  /* Active colors — updated by main.js from the focused section's data-bg / data-primary */
  --bg: #e7e7e7;
  --fg: #000000;
  --nav-fg: #333333;

  /* Left/right edge of the page area, so the side nav stays inside --page-max */
  --page-inset: max(0px, calc((100vw - var(--page-max)) / 2));
}

@media (max-width: 1024px) { :root { --cols: 4; --headline-size: 2.25rem; --hero-gap: 60px; } }  /* tablet */
@media (max-width: 640px)  { :root { --cols: 1; --nav-rows: 2; --headline-size: 1.75rem; --hero-gap: 40px; } }  /* mobile */

/* ==========================================================
   Base
   ========================================================== */
html {
  scroll-snap-type: var(--snap);
}

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  transition: background-color var(--color-transition), color var(--color-transition);
}

/* Body copy — the one style for all running text (resume, tags, descriptions, footer).
   Headings, labels and the nav set their own font and size on top of this. */
body {
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-line-height);
}

main {
  box-sizing: border-box;
  max-width: var(--page-max);
  margin: 0 auto;
  padding-inline: var(--side-clear);
}

a { color: inherit; }

h1, h2, h3 { font-family: var(--font-heading); }

h2 { font-size: var(--h2-size); line-height: 1; }

/* ==========================================================
   Grid
   ========================================================== */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--gutter);
}

/* ----------------------------------------------------------
   Placement: "columns 3–6" = class="start-3 end-6"

   Desktop (8 cols): used as written.
   Tablet  (4 cols): halved automatically (cols 1–2 → 1, 3–4 → 2, …).
                     Override with t-start-N / t-end-N (N = 1–4).
   Mobile  (1 col):  everything is full width.
   ---------------------------------------------------------- */
.start-1 { grid-column-start: 1; }  .end-1 { grid-column-end: 2; }
.start-2 { grid-column-start: 2; }  .end-2 { grid-column-end: 3; }
.start-3 { grid-column-start: 3; }  .end-3 { grid-column-end: 4; }
.start-4 { grid-column-start: 4; }  .end-4 { grid-column-end: 5; }
.start-5 { grid-column-start: 5; }  .end-5 { grid-column-end: 6; }
.start-6 { grid-column-start: 6; }  .end-6 { grid-column-end: 7; }
.start-7 { grid-column-start: 7; }  .end-7 { grid-column-end: 8; }
.start-8 { grid-column-start: 8; }  .end-8 { grid-column-end: 9; }

@media (max-width: 1024px) {
  .start-1, .start-2 { grid-column-start: 1; }  .end-1, .end-2 { grid-column-end: 2; }
  .start-3, .start-4 { grid-column-start: 2; }  .end-3, .end-4 { grid-column-end: 3; }
  .start-5, .start-6 { grid-column-start: 3; }  .end-5, .end-6 { grid-column-end: 4; }
  .start-7, .start-8 { grid-column-start: 4; }  .end-7, .end-8 { grid-column-end: 5; }

  .t-start-1 { grid-column-start: 1; }  .t-end-1 { grid-column-end: 2; }
  .t-start-2 { grid-column-start: 2; }  .t-end-2 { grid-column-end: 3; }
  .t-start-3 { grid-column-start: 3; }  .t-end-3 { grid-column-end: 4; }
  .t-start-4 { grid-column-start: 4; }  .t-end-4 { grid-column-end: 5; }
}

@media (max-width: 640px) {
  .grid > * { grid-column: 1 / -1; }
}

/* ==========================================================
   Nav — fixed to the top, one item per grid column
   ========================================================== */
.nav {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  color: var(--nav-fg);
  transition: color var(--color-transition);
}

/* Same width and side padding as <main>, so nav items line up with the content columns */
.nav-inner {
  box-sizing: border-box;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--edge) var(--side-clear);
  font-family: var(--font-heading);
  font-size: var(--nav-size);
  font-weight: bold;
  line-height: 1.2;
}

.nav-inner a {
  text-decoration: none;
}

/* Hover for nav links, the WORK label and footer links: a squiggle underline in the text's color, no fill */
.nav-inner a:hover,
.work-label a:hover,
.footer-link:hover {
  text-decoration: underline wavy var(--hover-line);
  text-underline-offset: 3px;
}

/* LOS ANGELES, in column 4 and CALIFORNIA in column 5 (two columns inside the item's 4–5 span).
   On tablet and mobile the item is one column wide, so the two lines stack. */
.nav-location {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gutter);
}
@media (max-width: 1024px) {
  .nav-location { grid-template-columns: minmax(0, 1fr); }
}

/* Nav stays 2×2 on mobile instead of stacking 4 rows */
@media (max-width: 640px) {
  .grid.nav-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.nav-inner > * { grid-column: auto; }
}

/* Dot indicator — right center */
.dots {
  position: fixed;
  z-index: 10;
  right: calc(var(--page-inset) + var(--edge));
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--dot-gap);
  color: var(--nav-fg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--color-transition), color var(--color-transition);
}

/* Shown only in the work section (toggled by main.js) */
.dots.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.dots a {
  position: relative;
  display: block;
  width: var(--dot-size);
  height: var(--dot-size);
  border: 1px solid currentColor;
  border-radius: var(--dot-size);
  box-sizing: border-box;
  overflow: hidden;
  transition: height var(--color-transition);
}

/* Fill height comes from --progress, set by main.js (0 = empty, 1 = full) */
.dots a::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(var(--progress, 0) * 100%);
  background: currentColor;
}

/* The work dot stretches into a track while you're in the projects */
.dots a.dot-track[aria-current="true"] {
  height: var(--dot-track);
}

/* ==========================================================
   Sections
   ========================================================== */
.section {
  padding-block: calc(var(--section-gap) / 2);
  align-content: center;
  scroll-snap-align: center;
}

.hero {
  box-sizing: border-box;
  min-height: var(--hero-height);
  padding-top: var(--nav-height);
  padding-bottom: var(--resume-lift);
  scroll-snap-align: start;
  /* Blurb row takes all spare height, pushing the resume row to the bottom */
  align-content: stretch;
  grid-template-rows: 1fr;
  grid-auto-rows: auto;
}

/* WORK label: same size, color and edge padding as the top nav */
.work-label {
  padding-block: var(--edge);
  color: var(--nav-fg);
  font-size: var(--nav-size);
  line-height: 1.2;
}

.work-label h2 {
  margin: 0;
  font-size: inherit;
  font-weight: bold;
  transition: opacity var(--color-transition);
}

/* Hidden once you've scrolled past the hero, so it doesn't sit under the nav (toggled by main.js) */
.work-label.is-past h2 {
  opacity: 0;
}

.work-label a {
  text-decoration: none;
}

/* --project-height is measured from the first project by main.js */
.footer {
  box-sizing: border-box;
  min-height: var(--project-height, auto);
  scroll-snap-align: end;
}

/* Footer links are sized to their text so hover and tooltip only trigger on the words */
.footer-link {
  justify-self: start;
}

/* Mobile: links above the © line */
@media (max-width: 640px) {
  .footer-note { order: 1; }
}

/* Footer links (EMAIL, LINKEDIN), the © line and ✌️: same type as the nav */
.footer-link,
.footer-note {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--nav-size);
  font-weight: bold;
  line-height: 1.2;
  color: var(--nav-fg); /* matches the nav */
  text-decoration: none;
}

/* Project tags (SCOPE): small rounded chips. Their fill is the current section color
   (--bg from main.js) pushed darker on light sections and lighter on dark ones, so it always stands out. */
.tags {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--tag-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tags li {
  padding: var(--tag-padding);
  border-radius: var(--tag-radius);
  background: var(--tag-fill);
  font-size: var(--tag-size);
  line-height: 1.2;
  transition: background-color var(--color-transition);
}

.headline {
  font-family: var(--font-display);
  font-size: var(--headline-size);
  font-weight: normal;
  line-height: 1.2;
  margin: 0;
}

/* Blurb row: uses the page's own columns (subgrid) so the blurb lines up with
   everything else, and is centered in the space above the resume row */
.hero-intro {
  grid-template-columns: subgrid;
  align-self: center;
  margin-block: var(--hero-gap);
}

/* Width comes from its grid placement (start-N / end-N) */
.hero-blurb {
  text-align: left;
}

/* Blurb words (wrapped by animations.js): inline-block so they can tilt on hover */
.blurb-word {
  display: inline-block;
}

@media (max-width: 640px) {
  .hero-intro > * { grid-column: 1 / -1; }
}

/* ==========================================================
   Elements
   ========================================================== */
.placeholder {
  aspect-ratio: var(--project-image-ratio);
  border: 1px solid currentColor;
  display: grid;
  place-items: center;
}

/* A real image or video fills its project box (cropped to fit if needed) and drops the placeholder outline */
.project-image:has(img, video) {
  border: none;
  overflow: hidden;
}

.project-image img,
.project-image video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* Resume column headings: nav size, bold */
.col-heading {
  font-size: var(--nav-size);
  font-weight: bold;
}

/* Project top row: number, title + subtitle, description, button — tops aligned */
.project p,
.project h2 {
  margin: 0;
}

/* Field labels (PROJECT TITLE, DESCRIPTION): same style as the resume headings */
.project .col-heading {
  margin: 0 0 0.83em;
}

.project-num,
.project-title h2 {
  font-family: var(--font-heading);
  font-size: 1em;
  font-weight: bold;
}

/* Number matches the field labels (PROJECT TITLE, DESCRIPTION) */
.project-num {
  font-size: var(--nav-size);
}

.project-title h2 {
  font-size: var(--project-title-size);
  line-height: 1.2;
}

/* Projects out of focus fade back; the one in focus (set by main.js) is full strength */
.project {
  opacity: var(--unfocused-opacity);
  transition: opacity var(--color-transition);
}

.project.is-active {
  opacity: 1;
}

/* Resume row fades back once the hero is out of focus (e.g. still peeking above project 01) */
.hero .resume {
  transition: opacity var(--color-transition);
}

.hero:not(.is-active) .resume {
  opacity: var(--resume-unfocused-opacity);
}

/* Resume photo: fills its column, square, with the same rounded corners as the project images.
   It tilts toward the cursor on hover (animations.js). */
.resume-photo {
  display: block;
  width: 100%;
  max-width: 240px; /* keeps it from filling the whole screen width on mobile */
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--image-radius);
}

/* Project images: minor shadow, lifts on hover.
   The lift uses `top` because GSAP owns transform/translate for the scroll parallax in animations.js. */
.project-image {
  position: relative;
  top: 0;
  border-radius: var(--image-radius);
  overflow: hidden; /* clips the image to the rounded corners */
  box-shadow: var(--image-shadow);
  text-decoration: none;
  transition: box-shadow var(--hover-speed), top var(--hover-speed);
}

.project-image:hover {
  box-shadow: var(--image-shadow-hover);
  top: -2px;
}

/* Page load-in: the nav and first screen stay hidden until animations.js starts revealing them */
.is-loading .nav-inner > *,
.is-loading .work-label,
.is-loading .hero > * {
  visibility: hidden;
}

/* Cursor tooltip — positioned by main.js, never blocks clicks */
.tooltip {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  padding: 8px;
  background: var(--tooltip-bg);
  color: var(--tooltip-fg);
  -webkit-backdrop-filter: blur(var(--tooltip-blur));
  backdrop-filter: blur(var(--tooltip-blur));
  font-family: var(--font-heading);
  font-size: var(--nav-size);
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--tooltip-speed) ease-out; /* fades in/out */
}

.tooltip.is-visible {
  opacity: 1;
}

/* Optional picture above the tooltip text (data-tooltip-image) */
.tooltip img {
  display: block;
  width: var(--tooltip-image-size);
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center;
  margin-bottom: 8px;
}