/* =========================================================
   Oliver Montgomery — olivermontgomery.com
   Built from Figma. Breakpoint tiers:
     S  — phones      : <= 734px   (base, mobile-first)
     M  — tablets     : 735–1068px (min-width: 735px)
     L  — desktop     : >= 1069px  (min-width: 1069px)
     XL — cap         : content caps at --wrap-max (1440px frame
                        from Figma → 1320px content), margins grow beyond.
   ========================================================= */

/* ===== Licensed fonts ===== */
@font-face {
  font-family: "Saans";
  src: url("fonts/Saans-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Saans SemiMono";
  src: url("fonts/SaansSemiMono-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #fffaf4;
  --ink: #000000;

  /* Saans (licensed). Generic families are last-resort only. */
  --font-sans: "Saans", sans-serif;
  --font-mono: "Saans SemiMono", monospace;

  /* XL cap — the page stops scaling past this; matches the 1440px Figma frame. */
  --wrap-max: 1440px;
  --gutter: clamp(20px, 5vw, 60px);

  /* Type scale (fluid: phone -> desktop) */
  --fs-lead: clamp(1.375rem, 0.95rem + 1.9vw, 1.875rem);   /* 22 -> 30px */
  --fs-project: clamp(1.25rem, 1.05rem + 0.9vw, 1.5625rem); /* 20 -> 25px */
  --fs-mono: 1rem;                                          /* 16px */

  /* Vertical rhythm */
  --space-section: clamp(4.5rem, 9vw, 8.125rem);  /* ~72 -> 130px between sections */
  --space-label: clamp(1.25rem, 2.5vw, 2rem);     /* label -> content */
}

/* Night mode — soft black bg, cream text (auto by local time; toggle in top bar) */
[data-theme="dark"] {
  --bg: #1a1816;
  --ink: #fffaf4;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 0.5s ease, color 0.5s ease;
}

a { color: inherit; }

/* Native text selection — black highlight, cream text (matches the site) */
::selection {
  background: var(--ink);
  color: var(--bg);
}
::-moz-selection {
  background: var(--ink);
  color: var(--bg);
}

/* =========================================================
   Motion
   ========================================================= */

/* Lenis smooth-scroll base styles */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Hero load-in — staggered fade-up on first paint */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.topbar,
.intro .label,
.intro .lead,
.current { animation: fade-up 0.85s cubic-bezier(0.2, 0.6, 0.2, 1) both; }
.topbar         { animation-delay: 0.05s; }
.intro .label   { animation-delay: 0.2s; }
.intro .lead    { animation-delay: 0.32s; }
.current        { animation-delay: 0.5s; }

/* Scroll reveals — active only when JS is on (content stays visible otherwise) */
.has-motion .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.has-motion .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Respect reduced-motion: no load-in, no reveal offset, no smooth scroll */
@media (prefers-reduced-motion: reduce) {
  .topbar,
  .intro .label,
  .intro .lead,
  .current { animation: none; }
  .has-motion .reveal { opacity: 1; transform: none; transition: none; }
}

/* ===== Layout wrapper ===== */
.wrap {
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding: 60px var(--gutter) clamp(2.5rem, 5vw, 3.75rem);
}

@media (max-width: 734px) {
  .wrap { padding-top: 32px; }
}

/* ===== Mono labels / small caps text ===== */
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.2;
}

a.mono { text-decoration: none; }

/* Permanent highlighter on every top-bar + footer mono item
   (email, LinkedIn, Santa Monica, time) — black marker, cream text */
.topbar .mono,
.footer .mono {
  color: var(--bg);
  background-image: linear-gradient(var(--ink), var(--ink));
  background-repeat: no-repeat;
  background-position: 0 center;
  background-size: 100% 100%;
  padding: 0 0.12em;
  margin-inline: -0.12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Agency links (Bluefin / GoodLab / Little Plains) — outlink to agency sites.
   On hover, a highlighter band in the brand color wipes across the word. */
.agency-link {
  --hl: transparent;
  text-decoration: none;
  background-image: linear-gradient(var(--hl), var(--hl));
  background-repeat: no-repeat;
  background-position: 0 center;
  background-size: 0% 100%;
  padding: 0 0.12em;
  margin: 0 -0.12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 0.28s ease, color 0.28s ease;
}
.agency-link:hover { background-size: 100% 100%; }
.agency-link.is-bluefin { --hl: #2200ff; }
.agency-link.is-goodlab { --hl: #d60098; }
.agency-link.is-littleplains { --hl: #ffde00; }

/* Highlight text colors are pinned to the fixed brand colors (theme-independent) */
.agency-link.is-bluefin:hover,
.agency-link.is-goodlab:hover { color: #fffaf4; } /* cream on blue/magenta */
.agency-link.is-littleplains:hover { color: #1a1816; } /* dark on yellow */

.label { margin: 0 0 var(--space-label); }

/* ===== Top bar ===== */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

/* Day/night toggle */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.18s ease;
}
.theme-toggle:hover { opacity: 0.55; }
.theme-toggle svg { display: block; width: 18px; height: 18px; }
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

/* Shrink the top bar on very narrow screens (< 355px) so it doesn't overflow */
@media (max-width: 354px) {
  .topbar .mono { font-size: 13px; }
  .topbar { gap: 0.6rem; }
  .topbar-right { gap: 0.6rem; }
}

/* ===== Sections ===== */
/* Even, consistent spacing between every section across the whole site. */
.section { margin-top: var(--space-section); }
.intro { margin-top: 0; } /* hero centering handles the top spacing */

/* Hero = intro + current, vertically centered to fill the first screen. Only
   these two paragraphs are above the fold on load; "Select Credits" begins just
   below. Centering keeps the whitespace balanced (not dumped below Current).
   svh keeps mobile browser toolbars from pushing credits into view. */
.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
}
.hero + .section { margin-top: 0; } /* credits attaches at the hero's bottom edge */

/* ===== Lead / large body copy ===== */
.lead {
  font-size: var(--fs-lead);
  line-height: 1.15;
  font-weight: 400;
  margin: 0;
  max-width: 60rem;
}
.intro .lead { max-width: 54rem; } /* widened so the desktop intro line breaks fit */

/* Responsive role titles: shortened on mobile, full on tablet/desktop */
.on-desktop { display: none; }
.on-mobile { display: inline; }
@media (min-width: 735px) {
  .on-desktop { display: inline; }
  .on-mobile { display: none; }
}

/* ===== Select Credits ===== */
.credit-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.credit {
  padding: clamp(1.25rem, 2.2vw, 1.5625rem) 0; /* 25px design top inset */
  border-top: 1px solid var(--ink);
}
.credit:last-child { border-bottom: 1px solid var(--ink); }

.project {
  display: inline-block;
  font-size: var(--fs-project);
  line-height: 1.147;
  text-decoration: none;
  margin-bottom: clamp(1rem, 1.8vw, 1.375rem); /* ~22px to meta row */
  /* highlighter hover — black marker, text knocks out to cream */
  background-image: linear-gradient(var(--ink), var(--ink));
  background-repeat: no-repeat;
  background-position: 0 center;
  background-size: 0% 100%;
  padding: 0 0.08em;
  margin-inline: -0.08em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 0.28s ease, color 0.2s ease;
}
.project:hover {
  background-size: 100% 100%;
  color: var(--bg);
}

/* Meta row: ROLE / SERVICE / AGENCY */
.meta {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* ===== Photo gallery ===== */
/* Inherits --space-section from .section for even spacing. */
.gallery {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  background: var(--bg);
  overflow: hidden;
  cursor: pointer;
}
.gallery img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* contain = landscapes fill, portraits shown in full (capped to the same
     height) with cream space on the sides */
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.gallery img.is-active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .gallery img { transition: none; }
}

/* ===== Footer ===== */
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between; /* info left, toggle right */
  gap: 1rem;
  margin-top: var(--space-section);
}
.footer-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem; /* email · city · time, left-justified */
}

/* =========================================================
   M — TABLETS (>= 735px)
   ========================================================= */
@media (min-width: 735px) {
  /* Fixed columns so values left-align across every row (like desktop),
     sized to fit the narrowest tablet (~661px of content). */
  .meta {
    display: grid;
    grid-template-columns: 230px 250px auto;
    gap: 0;
    align-items: baseline;
  }
}

/* =========================================================
   L — DESKTOP (>= 1069px)
   Match Figma column positions: ROLE @0, SERVICE @251, AGENCY @519
   ========================================================= */
@media (min-width: 1069px) {
  .meta {
    display: grid;
    grid-template-columns: 251px 268px auto;
    gap: 0;
    align-items: baseline;
  }
}