@font-face {
  font-family: 'Newake';
  src: url('/fonts/Newake-Font-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #f7f5f1;
  --ink: #1c1c1a;
  --ink-soft: #5a5a55;
  --line: #d9d6cf;
  --line-soft: #ebe8e2;
  --accent: #1c1c1a;
  --max-width: 1100px;
  --gutter: 1.5rem;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Jost', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Smooth reveal once content.json has populated (see inline style in head). */
  transition: opacity 0.18s ease;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Intro / header ---------- */

.intro {
  padding: 4rem 0 2.5rem;
  text-align: center;
}

.studio-name {
  font-family: 'Newake', serif;
  font-weight: 400;
  /* Fluid sizing: scales with viewport width so the headline fills the space
     and never wraps. Tuned so "Moonshot Photo Co." fits at ~320px viewports. */
  /* Cap dialled back from 9rem after switching tracking from -0.04 to +0.03em
     so the wider headline still fits inside main's 1052px content area. */
  font-size: clamp(1.75rem, 9vw, 7rem);
  /* Positive tracking: NEWAKE's geometric forms want air at display sizes. */
  letter-spacing: 0.03em;
  line-height: 1;
  margin: 0 0 1.25rem;
  white-space: nowrap;
}

.tagline {
  font-size: clamp(1.5rem, 5vw, 3rem);
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink-soft);
  /* 2rem top margin collapses with the headline's 1.25rem bottom into 2rem
     of breathing room above the tagline. */
  margin: 2rem 0 0;
  text-wrap: balance;
}

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

.hero {
  margin: 0 0 3rem;
  background: var(--line-soft);
}

.hero img {
  width: 100%;
  max-height: 70vh;
  object-fit: cover;
  aspect-ratio: 3 / 2;
}

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

.about {
  max-width: 38rem;
  margin: 0 auto 4rem;
  text-align: center;
}

.about p {
  font-size: 1.0625rem;
  line-height: 1.65;
  margin: 0 0 2rem;
  text-wrap: pretty;
}

/* ---------- Mission ops (about/approach) ---------- */

.mission-ops {
  max-width: 38rem;
  margin: 0 auto 4rem;
  padding: 0 var(--gutter);
  text-align: center;
}

/* At mobile, drop the section's own horizontal padding so the body text
   fills the same width as the thumbnail grid above (which inherits its
   inset from <main>'s gutter only). Otherwise main's 1.5rem gutter +
   the section's own 1.5rem stack to ~48px each side on narrow screens
   and the text column reads as over-margined. */
@media (max-width: 699px) {
  .mission-ops {
    padding: 0;
  }
}

.mission-ops .section-heading {
  margin-bottom: 1.75rem;
}

.mission-ops-body {
  font-size: 1.0625rem;
  line-height: 1.65;
  margin: 0;
  text-wrap: pretty;
}

/* Soft-CTA closing line. Slightly larger, medium weight, and a touch more
   vertical breathing room above it to feel like a landing rather than a
   continuation of the paragraph above. */
.mission-ops-closer {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5;
  margin: 2.5rem 0 0;
  color: var(--ink);
  text-wrap: pretty;
}

.ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  border: 1px solid var(--ink);
}

.btn-icon {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
}

.btn-primary {
  background: var(--ink);
  color: var(--bg);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: transparent;
  color: var(--ink);
}

.btn-secondary {
  background: transparent;
  color: var(--ink);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background: var(--ink);
  color: var(--bg);
}

/* ---------- Work / thumbnails ---------- */

.work {
  margin: 0 0 4rem;
}

/* Centered to match the page's centered-heading rhythm. Scoped to the
   heading only — adding text-align: center to .work would also centre the
   thumbnail captions, which want their default left alignment. */
.work .section-heading {
  text-align: center;
}

.section-heading {
  font-family: 'Newake', serif;
  font-weight: 400;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  letter-spacing: -0.01em;
  margin: 0 0 1.5rem;
  text-transform: lowercase;
}

.thumbs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}

.thumb-group {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.thumb {
  padding: 0;
  border: 0;
  background: var(--line-soft);
  cursor: pointer;
  overflow: hidden;
  position: relative;
  aspect-ratio: 2 / 3;
  transition: opacity 0.18s ease;
  width: 100%;
  display: block;
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb:hover img,
.thumb:focus-visible img {
  opacity: 0.85;
}

.thumb-caption {
  font-family: 'Jost', system-ui, -apple-system, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0.625rem 0 0;
  letter-spacing: 0.005em;
}

/* Skip the awkward 2-column state: three thumbs leave an orphan on the
   second row. Jump straight from 1-up to 3-up once the viewport has room
   for portrait thumbs at a comfortable size. */
@media (min-width: 750px) {
  .thumbs {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.25rem 1.75rem;
  }
  .thumb-caption {
    margin-top: 0.75rem;
  }
}

/* ---------- Testimonials carousel ---------- */

.testimonials {
  max-width: 56rem;
  margin: 0 auto 5rem;
  padding: 0 var(--gutter);
}

.testimonials[hidden] { display: none; }

.carousel {
  max-width: 40rem;
  margin: 0 auto;
}


.carousel-nav {
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
  flex-shrink: 0;
}

.carousel-nav:hover,
.carousel-nav:focus-visible {
  color: var(--ink);
  border-color: var(--ink);
  background: #fff;
}

.carousel-nav[hidden] { display: none; }

.nav-icon {
  width: 16px;
  height: 16px;
}

.testimonial-card {
  /* One source of truth for internal spacing. --card-pad is the base unit;
     every other gap is a deliberate ratio of it. Adjusting --card-pad
     rescales the whole card proportionally without breaking relationships. */
  --card-pad: clamp(1.75rem, 4.5vw, 2.5rem);    /* 28-40px */
  /* Bottom padding is slightly larger than top to visually compensate for
     typographic asymmetry: the quote (large italic) carries ~7px of line-box
     leading above its first visible glyph, but the role (smaller upright)
     carries only ~3-4px of leading below its last visible glyph. Equal CSS
     padding therefore reads as *more* visible whitespace at the bottom.
     +0.4rem (~6px) brings the perceived padding into balance. */
  --card-pad-bottom: calc(var(--card-pad) + 0.4rem);
  --quote-gap: calc(var(--card-pad) * 0.4);     /* the line-height 1.55 on the
                                                   quote already contributes
                                                   ~14px of invisible leading,
                                                   so this margin lands on top
                                                   of that to give a *rendered*
                                                   gap noticeably tighter than
                                                   the card-edge padding —
                                                   the attribution attaches to
                                                   the quote instead of
                                                   floating in the middle. */
  --attr-gap: 0.375rem;                         /* tight name/role pairing */

  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  padding: var(--card-pad) var(--card-pad) var(--card-pad-bottom);
  text-align: center;
  position: relative;

  /* Fixed-ish card height so switching slides never reflows the contact card
     or footer below. Sized to fit ~120 words of italic quote at the desktop
     carousel width; below 854px it scales down with viewport. Quotes longer
     than this scroll internally (see .testimonial-quote rules). */
  height: clamp(26rem, 75vw, 40rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.testimonial-card[hidden] { display: none; }

/* Slide-switch fade. JS adds .is-fading to the card; only the text children
   transition opacity, so the card frame (background, shadow, height) stays
   put while the quote and attribution crossfade. Two stages — 200ms out,
   hidden swap, 200ms in. Must match FADE_MS in script.js. */
.testimonial-quote,
.testimonial-attr {
  transition: opacity 200ms ease-out;
}
.testimonial-card.is-fading .testimonial-quote,
.testimonial-card.is-fading .testimonial-attr {
  opacity: 0;
}

.testimonial-quote {
  font-family: 'Jost', system-ui, sans-serif;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 var(--quote-gap);
  border: 0;

  /* Within the fixed-height card, the quote takes whatever space is left
     after attribution + padding. min-height: 0 lets it shrink below its
     intrinsic content size; overflow-y: auto then scrolls the text. */
  min-height: 0;
  overflow-y: auto;
  /* Slim scrollbar — readable but not visually loud. */
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.testimonial-quote::-webkit-scrollbar { width: 6px; }
.testimonial-quote::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 3px;
}

/* Soft fade at the bottom edge when (and only when) the quote actually
   overflows AND the user hasn't scrolled to the end. Signals "more below"
   without adding any chrome. JS toggles .can-overflow and .is-at-bottom. */
.testimonial-quote.can-overflow:not(.is-at-bottom) {
  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 28px), transparent);
          mask-image: linear-gradient(to bottom, black calc(100% - 28px), transparent);
}

.testimonial-attr {
  display: flex;
  flex-direction: column;
  gap: var(--attr-gap);
  align-items: center;
  /* Override the bare `footer { … }` rule lower in this file — that
     selector was matching this nested <footer> and injecting 1.75rem
     of vertical padding (which was the unaccounted-for ~28px above
     the attribution) plus a thin border-top. */
  padding: 0;
  border: 0;
  /* Anchor the attribution at its natural size; the quote above is the
     element that shrinks/scrolls when content overflows the card. */
  flex-shrink: 0;
}

/* Hairline divider between quote and attribution. In-flow as the first
   flex item, so it adds a deliberate slice of breathing room around
   itself (instead of compressing into the existing gap). Width is
   centered horizontally by the parent's align-items: center. */
.testimonial-attr::before {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  background: var(--line-soft);
  /* No margin-top — the quote's margin-bottom (--quote-gap) already
     supplies the space above the line. margin-bottom (0.5rem) plus the
     flex column's --attr-gap (0.375rem) gives ~14px below the line
     before the name, roughly matching the ~13px above. */
  margin-bottom: 0.5rem;
}

.testimonial-name {
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 0.9375rem;
  color: var(--ink);
}

.testimonial-role {
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}

.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.625rem;
}

.carousel-dots[hidden] { display: none; }

.carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.18s ease;
  position: relative;
}

/* Bigger invisible tap area around each dot for mobile finger accuracy. */
.carousel-dot::after {
  content: '';
  position: absolute;
  inset: -10px;
}

.carousel-dot:hover { background: var(--ink-soft); }

.carousel-dot.is-active {
  background: var(--ink);
  transform: scale(1.15);
}

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

/* The contact section is a card matching the testimonial card's visual
   treatment (radius, shadow, background), sized snugly around the form.
   max-width of 40rem keeps the card a tight container — its padding is
   the only thing that holds the form away from the card edges. The
   form, heading, and intro fill the card's content area; no inner
   width caps needed. */
.contact {
  max-width: 40rem;
  margin: 0 auto 4rem;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  padding: clamp(2rem, 5vw, 3rem);
}

/* Pull the card outward on narrow viewports so it doesn't feel pinched
   against the screen edges. Main has padding: 0 1.5rem, so a -0.5rem
   margin on each side gives the card a 1rem gutter to the viewport. */
@media (max-width: 600px) {
  .contact {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
  }
}

.contact-intro {
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.5;
  margin: 0 0 2rem;
  color: var(--ink);
  text-wrap: pretty;
}

#contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.field label {
  font-size: 0.875rem;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

.field input,
.field textarea {
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.75rem 0.875rem;
  min-height: 48px;
  transition: border-color 0.18s ease;
  width: 100%;
}

.field textarea {
  resize: vertical;
  min-height: 8rem;
  line-height: 1.5;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ink);
}

.botcheck {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.form-status {
  margin: 0;
  font-size: 0.9375rem;
  min-height: 1.5em;
}

.form-status.success { color: #2e6f3e; }
.form-status.error { color: #b3261e; }

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

footer {
  border-top: 1px solid var(--line-soft);
  padding: 1.75rem var(--gutter);
  text-align: center;
}

footer p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}

/* ---------- Lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 18, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  z-index: 100;
}

.lightbox[hidden] { display: none; }

.lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 48px;
  height: 48px;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.18s ease;
}

.lightbox-close:hover,
.lightbox-close:focus-visible {
  background: rgba(255, 255, 255, 0.1);
}

/* ---------- Focus ---------- */

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.btn-primary:focus-visible {
  outline-offset: 3px;
}

/* ---------- Larger screens ---------- */

@media (min-width: 700px) {
  .intro { padding: 6rem 0 4rem; }
  .hero { margin-bottom: 4rem; }
  .about { margin-bottom: 6rem; }
  .work { margin-bottom: 6rem; }
  .mission-ops { margin-bottom: 6rem; }
  .contact { margin-bottom: 6rem; }
}