/* Home page: hero, about, experience, work, contact. */

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

.hero { background: var(--cream); }

/* Hero copy is centred at mobile and tablet and swings left at desktop,
   where it also takes a fixed 786px measure. */
.hero__inner {
  max-width: calc(var(--container) + 2 * var(--pad-x));
  margin: 0 auto;
  padding: var(--pad-y) var(--pad-x);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.hero__wordmark {
  width: 100%;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 60px;
  line-height: 60px;
  color: var(--teal);
}

.hero__tagline {
  width: 100%;
  font-family: var(--font-body);
  font-size: 24px;
  line-height: 40px;
  color: var(--navy);
}

@media (min-width: 768px) {
  .hero__inner { padding: 32px; gap: 24px; }
  .hero__wordmark, .hero__tagline { max-width: 672px; }
  .hero__wordmark { font-size: 100px; line-height: 100px; }
  .hero__tagline { font-size: 32px; line-height: 32px; }
}

@media (min-width: 1000px) {
  .hero__inner {
    padding: 64px;
    gap: 32px;
    align-items: flex-start;
    text-align: left;
  }
  /* The hero copy takes a 786px measure at desktop, inside the usual
     container rather than instead of it. */
  .hero__wordmark, .hero__tagline { max-width: 786px; }
  .hero__tagline { font-size: 40px; line-height: 40px; }
}

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

.about { background: var(--navy); }

.about__inner {
  max-width: calc(var(--container) + 2 * var(--pad-x));
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: flex;
  flex-direction: column;
}

.about__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 0;
}

.about__body {
  font-size: 18px;
  line-height: 28px;
  color: var(--cream);
}

/* The closing clause is lemon, and — as on the live site — keeps the
   larger desktop size even at mobile widths. */
.about__highlight { color: var(--lemon); font-size: 24px; line-height: 36px; }

/* The portrait is a cutout anchored to the bottom of its box. Its exact
   geometry differs per breakpoint and is taken from the live build: mobile
   crops it inside a 294px window, desktop lets an 809px-tall image overflow
   a 653px box (and spill left past a narrower column), which is what makes
   it read as standing on the section's baseline rather than framed in it.
   No object-fit is set, matching the live site — the image is drawn to the
   box, not letterboxed into it. */
.about__photo { position: relative; width: 100%; height: 294px; overflow: hidden; }
.about__photo img {
  position: absolute;
  bottom: -94.46px;
  left: 48px;
  width: 247px;
  height: 388.463px;
  max-width: none;
  object-position: bottom;
}

@media (min-width: 768px) {
  .about__inner {
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 73px;
  }
  .about__text { flex: 1 0 0; max-width: 350px; gap: 24px; padding: 32px 0; }
  .about__body { font-size: 24px; line-height: 36px; }
  .about__photo {
    flex: 1 0 0;
    max-width: 600px;
    align-self: stretch;
    height: auto;
    overflow: visible;
  }
  /* Width is stated rather than derived from left+right: pairing those
     with aspect-ratio lets the intrinsic size win and the image escapes
     the column. */
  .about__photo img {
    left: 8px;
    right: auto;
    bottom: 0;
    width: calc(100% - 7.5px);
    height: auto;
    aspect-ratio: 2317 / 3644;
  }
}

@media (min-width: 1000px) {
  .about__inner { align-items: flex-end; }
  .about__text { max-width: 600px; gap: 32px; padding: 64px 0; }
  .about__photo { max-width: 600px; height: 653px; align-self: auto; }
  .about__photo img {
    left: auto;
    right: -0.5px;
    bottom: -0.17px;
    width: 514.5px;
    height: 809.166px;
    aspect-ratio: auto;
  }
}

/* ---------- Experience ---------- */

.experience { background: var(--cream); }

.experience__inner {
  max-width: calc(var(--container) + 2 * var(--pad-x));
  margin: 0 auto;
  padding: var(--pad-y) var(--pad-x);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.job__head {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  text-align: left;
}

.job__chevron { flex: none; width: 24px; height: 24px; display: grid; place-items: center; }
.job__chevron svg { width: 9px; height: 15px; transition: transform .2s ease; }
.job[data-open] .job__chevron svg { transform: rotate(90deg); }

.job__text {
  flex: 1 0 0;
  min-width: 1px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: space-between;
  row-gap: 4px;
}

.job__who {
  flex: 1 0 0;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 16px;
}

.job__company { font-weight: 700; }
.job__company, .job__title, .job__dates { font-size: 16px; line-height: 24px; color: var(--black); }
.job__dates { white-space: nowrap; }

.job__body { padding: 8px 0 0 32px; }
.job__body p { font-size: 16px; line-height: 24px; color: var(--black); max-width: 75ch; }
.job__body[hidden] { display: none; }

/* Rows are separated by a lemon hairline centred in a 64px band. It's drawn
   between rows rather than after each one, so the collapsed list ends flush
   on the fourth row the way the live site's does. */
.job + .job { margin-top: 64px; }
.job + .job::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  margin-top: -32px;
  height: 1px;
  background: var(--lemon);
}
.job { position: relative; }

/* Rows 5-10 wait for "See More Experience". */
.job--extra { display: none; }
.experience__list[data-expanded] .job--extra { display: block; }

.experience__group { display: flex; flex-direction: column; }
.experience__more { padding-top: 32px; }

@media (min-width: 768px) {
  .job__head { gap: 6px; }
  .job__who { gap: 6px; }
  .job__text { row-gap: 6px; }
}

@media (min-width: 1000px) {
  .job__head { gap: 8px; }
  .job__who { gap: 8px; }
  .job__text { row-gap: 8px; }
  .job__company, .job__title, .job__dates,
  .job__body p { line-height: 26px; }
  .experience__more { padding-top: 64px; }
}

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

.work { background: var(--navy); }

.work__inner {
  max-width: calc(var(--container) + 2 * var(--pad-x));
  margin: 0 auto;
  padding: var(--pad-y) var(--pad-x);
  display: flex;
  flex-direction: column;
}

.work .heading { padding-bottom: 16px; }

.work__grid { display: flex; flex-direction: column; gap: var(--gap); }
.work__row { display: flex; flex-direction: column; gap: var(--gap); }

/* Each card is sized by its own image (aspect-ratio set inline from the
   live build), so a row's cards differ in height and the row centres them —
   as on the live site. */
.work__card {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--cream);
  aspect-ratio: var(--ar);
}

@media (min-width: 768px)  { .work__card { aspect-ratio: var(--ar-t); } }
@media (min-width: 1000px) { .work__card { aspect-ratio: var(--ar-d); } }

/* Where Figma cropped a tall source into a card, the image is scaled past
   the card and nudged up; --ch/--ct carry that per breakpoint. Cards
   without a crop set height/top inline instead and simply cover. The rule
   is on .work__photo, not on every img in the card, so it leaves the
   Firefighter Pfister wordmark alone. */
.work__photo {
  position: absolute;
  left: 0;
  width: 100%;
  max-width: none;
  height: var(--ch);
  top: var(--ct);
}

@media (min-width: 768px)  { .work__photo { height: var(--ch-t); top: var(--ct-t); } }
@media (min-width: 1000px) { .work__photo { height: var(--ch-d); top: var(--ct-d); } }


/* Firefighter Pfister's card darkens toward the base so its wordmark
   stays legible over the photograph. */
.work__card--ffp .work__scrim {
  position: absolute;
  inset: 0;
  /* Stops read off the live card's SVG gradient, which fades in from
     46.2% down the card and reaches full strength at 90.4%. */
  background: linear-gradient(to bottom, rgb(0 0 0 / 0) 46.2%, rgb(0 0 0 / 60%) 90.4%);
}
/* The wordmark sits in the card's middle band (26.51% in from top and
   bottom on the live site). Expressed as a width percentage of the card
   rather than a centred auto-width box, which resolves ambiguously against
   an aspect-ratio'd parent and lets the SVG escape the card. */
.work__wordmark {
  position: absolute;
  left: 11.71%;
  top: 26.51%;
  width: 76.71%;
  height: 46.98%;
  object-fit: fill;
}



@media (min-width: 768px) {
  .work .heading { padding-bottom: 24px; }
  /* The live build sizes the Work heading at 96px from tablet up, while its
     sibling headings step 48 -> 64 -> 96. Reproduced rather than corrected. */
  .work .heading { font-size: 96px; line-height: 96px; }
}

@media (min-width: 1000px) {
  .work .heading { padding-bottom: 32px; }
  /* The two-up row centres its cards; the three-up row hangs them from
     the top, matching the live build. */
  .work__row { flex-direction: row; }
  .work__row--two { align-items: center; }
  .work__row--three { align-items: flex-start; }
  .work__row .work__card { flex: 1 0 0; min-width: 1px; }
}

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

.contact { background: var(--cream); }

.contact__inner {
  max-width: calc(var(--container) + 2 * var(--pad-x));
  margin: 0 auto;
  padding: var(--pad-y) var(--pad-x);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.contact__body { font-size: 16px; line-height: 24px; color: var(--black); }

@media (min-width: 768px)  { .contact__body { font-size: 18px; } }
@media (min-width: 1000px) { .contact__body { font-size: 20px; line-height: 26px; } }

/* ---------- Form ---------- */

.form { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.form__group { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.form__row { display: flex; flex-direction: column; gap: 16px; width: 100%; }

.form__field {
  background: var(--white);
  border: 1px solid var(--navy);
  border-radius: 8px;
  padding: 16px;
  flex: 1 0 0;
  min-width: 1px;
}
.form__field--area { min-height: 116px; display: flex; }

.form__field input,
.form__field textarea {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--black);
  resize: none;
}
.form__field textarea { min-height: inherit; }
.form__field input::placeholder,
.form__field textarea::placeholder { color: var(--black); opacity: 1; }
.form__field:focus-within { outline: 2px solid var(--salmon); outline-offset: 1px; }

@media (min-width: 768px) {
  .form { gap: 24px; }
  .form__group { gap: 32px; }
  .form__row { flex-direction: row; gap: 32px; }
  .form__field input, .form__field textarea { font-size: 20px; line-height: 26px; }
}

@media (min-width: 1000px) {
  .form { gap: 32px; }
}