/* =========================================================
   SPETH STUDIO — shared stylesheet
   Edit colors/fonts in :root below.
   ========================================================= */

:root {
  --ink:        #1a1a1a;
  --ink-soft:   #55595c;
  --ink-faint:  #9aa0a4;
  --rule:       #e6e6e6;
  --bg:         #ffffff;
  --accent:     #2f6f78;   /* nav active / link hover */
  --gutter:     6px;       /* space between grid images */
  --nav-h:      74px;
  --font:       "Poppins", "Jost", "Century Gothic", "Futura",
                -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* height:auto matters — without it an image with width/height attributes
   scales its width to fit but keeps its full pixel height, which stretches
   it vertically. Rules further down override this where a fixed height is
   wanted (gallery photos, home tiles). */
img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

/* ---------------------------------------------------------
   NAV
   --------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  padding: 0 28px;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--rule);
}

.brand {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 0 0 auto;
}

.brand .mark {
  width: 51px;
  height: 51px;
  flex: 0 0 auto;
}

.brand .mark svg,
.brand .mark img { width: 100%; height: 100%; object-fit: contain; display: block; }

.brand .wordmark {
  font-size: 16.5px;
  font-weight: 500;
  letter-spacing: .22em;
  line-height: 1.25;
  text-transform: uppercase;
}

.brand .wordmark span { display: block; }

/* --- menu --- */

.menu {
  display: flex;
  align-items: center;
  gap: 34px;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}

.menu > li { position: relative; }

.menu > li > a {
  display: block;
  padding: 26px 0;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color .2s ease;
}

.menu > li > a:hover,
.menu > li.is-active > a { color: var(--accent); }

/* --- dropdown --- */

.submenu {
  position: absolute;
  top: 100%;
  left: -22px;
  min-width: 200px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--rule);
  box-shadow: 0 14px 34px rgba(0,0,0,.07);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.menu > li:hover .submenu,
.menu > li:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.submenu li + li { border-top: 1px solid var(--rule); }

.submenu a {
  display: block;
  padding: 15px 22px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color .2s ease, background .2s ease;
}

.submenu a:hover { color: var(--accent); background: #fafafa; }

/* --- search + burger --- */

/* the baseball, top right — the old search button lived here */
.nav-egg {
  margin-left: 32px;
  display: inline-flex;
  align-items: center;
  padding: 6px;
  line-height: 0;
  opacity: .9;
  transition: opacity .2s ease, transform .2s ease;
}

.nav-egg img {
  width: 22px;
  height: 22px;
  display: block;
}

.nav-egg:hover {
  opacity: 1;
  transform: scale(1.12);
}

.burger {
  display: none;
  margin-left: auto;
  background: none;
  border: 0;
  padding: 10px;
  cursor: pointer;
}

.burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
}

.burger span + span { margin-top: 5px; }

/* ---------------------------------------------------------
   PAGE HEADER
   --------------------------------------------------------- */

.page-head { padding: 44px 28px 30px; }

/* gallery pages carry only the breadcrumb, so they need less room */
.page-head.crumb-only { padding: 34px 28px 22px; }

/* Matches .prose-wrap's container exactly, so this line starts on the same
   vertical as the form fields below it instead of floating off at the
   window edge. Keep the max-width and side padding in step with .prose-wrap. */
.page-head-aligned {
  max-width: 1180px;
  margin: 0 auto;
  padding: 44px 28px 6px;
}

/* same face, weight and tracking as the nav and footer */
.crumb {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #000;
  margin-bottom: 0;
}

.crumb a { color: #000; transition: color .2s; }
.crumb a:hover { color: var(--accent); }

.page-title {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 300;
  letter-spacing: .005em;
}

.page-intro {
  max-width: 62ch;
  margin: 14px 0 0;
  color: var(--ink-soft);
  font-size: 15px;
}

/* on the contact page this line stands in for a heading */
.page-lead {
  margin: 0;
  max-width: 30ch;
  font-size: clamp(21px, 2.1vw, 26px);
  font-weight: 300;
  line-height: 1.35;
  color: var(--ink);
}

/* ---------------------------------------------------------
   CATEGORY GRID (home)

   On the home page the whole grid is sized to fill exactly one
   screen — nav on top, footer below, four tiles filling the gap.
   body.home turns the page into a vertical flex column so the
   grid can absorb whatever height is left over, with no magic
   numbers to keep in sync.
   --------------------------------------------------------- */

body.home {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;       /* accounts for mobile browser chrome */
  overflow: hidden;     /* firm height, so the tiles shrink to fit */
}

body.home .nav { flex: 0 0 auto; }
body.home .footer { flex: 0 0 auto; margin-top: 0; }

.cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gutter);
  padding: 0 var(--gutter) var(--gutter);
}

body.home .cat-grid {
  flex: 1 1 auto;
  grid-template-rows: repeat(2, 1fr);
  min-height: 0;        /* lets the rows shrink inside the flex parent */
  padding-top: var(--gutter);
}

/* a lone final tile centers itself, like the reference */
.cat-grid .tile.center-last {
  grid-column: 1 / -1;
  width: 50%;
  margin: 0 auto;
}

.tile {
  position: relative;
  display: block;
  overflow: hidden;
  background: #111;
  min-height: 0;
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 10;
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1), opacity .5s ease;
}

/* inside the full-height grid the tile fills its cell instead */
body.home .tile img { aspect-ratio: auto; }

.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.12);
  transition: background .4s ease;
}

.tile:hover img { transform: scale(1.045); }
.tile:hover::after { background: rgba(0,0,0,.28); }

.tile-label {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: clamp(18px, 2.1vw, 30px);
  font-weight: 300;
  letter-spacing: .34em;
  text-transform: uppercase;
  text-indent: .34em; /* optically recenter the tracking */
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
  pointer-events: none;
}

/* ---------------------------------------------------------
   GALLERY — ordered masonry

   A grid of very short rows. Each photo spans however many rows
   its own height needs, so photos keep their native aspect ratio
   and columns still pack tightly — but reading order now runs
   LEFT TO RIGHT, the way you'd expect. Photo 1 sits next to
   photo 2, not above it.

   js/masonry.js sets the --span number on each figure from the
   width and height rebuild.py already wrote into the <img> tag.
   --------------------------------------------------------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--gutter);
  row-gap: 0;
  grid-auto-rows: 1px;
  padding: 0 var(--gutter) var(--gutter);
}

.gallery figure {
  margin: 0 0 var(--gutter);
  /* --span is set by js/masonry.js; the fallback keeps the page
     usable if that script is blocked or fails to run */
  grid-row: span var(--span, 400);
}

/* The grid stays a grid at all times. js/masonry.js works out each
   photo's --span by reading the grid's own column width, so switching
   the grid off here would leave the script nothing to measure and it
   could never recover. If the script never runs, the fallback --span
   above gives every photo the same height instead: plainer, but
   perfectly usable, and still in the right order. */

.shot {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: #f2f2f2;
  cursor: zoom-in;
  overflow: hidden;
}

.gallery .shot { height: 100%; }

.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .35s ease, transform 1s cubic-bezier(.2,.7,.2,1);
}

.shot:hover img { opacity: .92; transform: scale(1.02); }

/* the column ladder: more columns = smaller photos = more on screen */
@media (max-width: 1099px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1500px) {
  .gallery { grid-template-columns: repeat(4, 1fr); }
}

/* mosaic variant — the darker, ASCAYA-style section */
.mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 190px;
  gap: var(--gutter);
  padding: 0 var(--gutter) var(--gutter);
}

.mosaic .shot { height: 100%; }
.mosaic .shot img { height: 100%; object-fit: cover; }

.mosaic .tall { grid-row: span 2; }
.mosaic .wide { grid-column: span 2; }

.section-wordmark {
  text-align: center;
  padding: 66px 20px 34px;
  font-family: "Cormorant Garamond", "Didot", Georgia, serif;
  font-size: clamp(26px, 3.6vw, 46px);
  font-weight: 300;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------
   DRONE REEL — video player + thumbnails
   --------------------------------------------------------- */

.reel-stage {
  padding: 0 var(--gutter) 0;
  background: #000;
}

.reel-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.reel-player video,
.reel-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: contain;
  background: #000;
}

.reel-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  padding: 20px 28px 6px;
}

.reel-caption h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: .01em;
}

.reel-caption .reel-meta {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.reel-caption p {
  flex: 1 0 100%;
  max-width: 68ch;
  margin: 4px 0 0;
  font-size: 14.5px;
  color: var(--ink-soft);
}

.reel-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
  padding: 28px var(--gutter) var(--gutter);
}

.reel-thumb {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  background: #111;
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  font-family: inherit;
}

.reel-thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 1s cubic-bezier(.2,.7,.2,1), opacity .3s ease;
}

.reel-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.18);
  transition: background .3s ease;
}

.reel-thumb:hover img { transform: scale(1.05); }
.reel-thumb:hover::after,
.reel-thumb[aria-current="true"]::after { background: rgba(0,0,0,.05); }

.reel-thumb[aria-current="true"] { outline: 2px solid var(--accent); outline-offset: -2px; }

.reel-thumb .play {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.85);
  display: grid;
  place-items: center;
  color: #fff;
  pointer-events: none;
  transition: background .3s ease;
}

.reel-thumb:hover .play { background: rgba(255,255,255,.16); }

.reel-thumb .t-label {
  position: absolute;
  z-index: 2;
  left: 12px;
  bottom: 10px;
  color: #fff;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(0,0,0,.5);
  pointer-events: none;
}

/* ---------------------------------------------------------
   LIGHTBOX
   --------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(12,12,12,.96);
}

.lightbox.open { display: flex; }

.lightbox img {
  max-width: 92vw;
  max-height: 86vh;
  object-fit: contain;
}

.lb-btn {
  position: absolute;
  background: none;
  border: 0;
  color: #fff;
  font-size: 30px;
  font-weight: 200;
  line-height: 1;
  padding: 18px;
  cursor: pointer;
  opacity: .75;
  transition: opacity .2s;
}

.lb-btn:hover { opacity: 1; }
.lb-close { top: 10px; right: 14px; }
.lb-prev  { left: 8px;  top: 50%; transform: translateY(-50%); }
.lb-next  { right: 8px; top: 50%; transform: translateY(-50%); }

.lb-count {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 11px;
  letter-spacing: .22em;
  opacity: .6;
}

/* ---------------------------------------------------------
   PROSE PAGES (about / contact)
   --------------------------------------------------------- */

.prose-wrap {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 28px 64px;
}

/* ---------------------------------------------------------
   CREDITS — clients and publication credits on the About page
   --------------------------------------------------------- */

.credits {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px 96px;
}

.credits-head {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #000;
  margin: 0 0 20px;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
}

.credits-head + .credit-list + .credits-head { margin-top: 48px; }

.credit-list {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 4;
  column-gap: 44px;
}

.credit-list li {
  padding: 0 0 18px;
  break-inside: avoid;
}

.c-name {
  display: block;
  font-size: 14px;
  color: var(--ink);
}

.c-where {
  display: block;
  font-size: 12px;
  color: var(--ink-faint);
  margin-top: 2px;
}

.press-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 26px 44px;
  align-items: center;
}

/* Heights are set one logo at a time on purpose. Matching them all to the
   same number makes the wide ones (LA Times) shout and the stacked ones
   (AD) disappear — these are tuned so they read as equal weight. */
.press-list img { width: auto; opacity: .88; }

.p-natgeo  { height: 30px; }
.p-wsj     { height: 30px; }
.p-ad      { height: 40px; }
.p-forbes  { height: 22px; }
.p-latimes { height: 20px; }
.p-rollingstone { height: 23px; }
.p-robb    { height: 23px; }
.p-thr     { height: 27px; }

@media (max-width: 640px) {
  .press-list { gap: 20px 30px; }
  .press-list img { transform: scale(.85); transform-origin: left center; }
}

@media (max-width: 1440px) {
  .credit-list { columns: 3; }
}

@media (max-width: 1099px) {
  .credit-list { columns: 2; }
}

@media (max-width: 640px) {
  .credit-list { columns: 1; }
}

.prose p { color: var(--ink-soft); margin: 0 0 1.15em; }
.prose p.lead { color: var(--ink); font-size: 19px; line-height: 1.6; }

.meta-list a { border-bottom: 1px solid var(--rule); transition: border-color .2s, color .2s; }
.meta-list a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.meta-list {
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.meta-list li {
  display: flex;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
}

.meta-list .k {
  flex: 0 0 130px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 3px;
}

/* --- form --- */

.contact-form { margin: 0; }

.form-status {
  margin: 20px 0 0;
  max-width: 46ch;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  min-height: 1.2em;          /* holds its space so the page doesn't jump */
}

.form-status.is-good { color: var(--accent); }
.form-status.is-bad  { color: #b4472f; }

.btn[disabled] { opacity: .5; cursor: default; }
.btn[disabled]:hover { background: none; color: var(--ink); }

/* a required field that has been filled in badly, only once the browser
   has decided — :invalid alone would flag every empty field on load */
.contact-form input:not(:placeholder-shown):invalid,
.contact-form textarea:not(:placeholder-shown):invalid {
  border-bottom-color: #b4472f;
}

.field { margin-bottom: 22px; }

.field label {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.field select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 24px;
  border-radius: 0;
  cursor: pointer;
  /* a chevron drawn in, since removing the native control removes its arrow */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 L6 6.5 L11 1.5' fill='none' stroke='%231a1a1a' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 2px;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  font-weight: 300;
  color: var(--ink);
  border-radius: 0;
}

.field textarea { min-height: 130px; resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  border-bottom-color: var(--accent);
}

.btn {
  display: inline-block;
  margin-top: 8px;
  padding: 15px 40px;
  border: 1px solid var(--ink);
  background: none;
  font-family: inherit;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}

.btn:hover { background: var(--ink); color: #fff; }

/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

body.home .footer { padding: 18px 28px; }

.footer {
  margin-top: 40px;
  padding: 52px 28px 40px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #000;
}

.footer span,
.footer a { color: #000; }

.footer a { transition: color .2s; }
.footer a:hover { color: var(--accent); }

.footer nav {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  align-items: center;
}

/* a link with a glyph sitting next to its label */
.footer .with-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.footer .with-icon img {
  width: 18px;
  height: 18px;
  display: block;
}

/* ---------------------------------------------------------
   REVEAL ON SCROLL
   --------------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(16px); }

.reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in { opacity: 1; transform: none; transition: none; }
  .tile img, .shot img { transition: none; }
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1080px) {
  .menu { gap: 22px; }
  .menu > li > a { font-size: 11.5px; letter-spacing: .14em; }
  .prose-wrap { gap: 40px; }
}

@media (max-width: 860px) {
  .burger { display: block; }
  .nav-egg { margin-left: 12px; }

  .menu {
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 18px 30px rgba(0,0,0,.06);
    max-height: 0;
    overflow: hidden;
    transition: max-height .32s ease;
  }

  .menu.open { max-height: 640px; overflow-y: auto; }

  .menu > li > a { padding: 16px 28px; border-top: 1px solid var(--rule); }

  .submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: 0;
    box-shadow: none;
    background: #fafafa;
  }

  .submenu a { padding-left: 46px; }

  .prose-wrap { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 640px) {
  .cat-grid { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .cat-grid .tile.center-last { width: 100%; }
  .reel-thumbs { grid-template-columns: repeat(2, 1fr); }

  /* keep the home grid 2x2 on phones so it still fits one screen */
  body.home .cat-grid { grid-template-columns: repeat(2, 1fr); }
  body.home .tile-label { font-size: 12px; letter-spacing: .18em; text-indent: .18em; }
  .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .page-head { padding: 30px 20px 22px; }
  .footer { flex-direction: column; align-items: flex-start; }
}