/* ============================================================
   RESUME PAGE — the only styles main.css doesn't already cover.
   Loaded AFTER css/main.css. Three small things live here:

   1. Breathing room under the two download buttons in the hero
   2. Credit tables scroll sideways on narrow phones instead of
      squeezing the three columns (or pushing the page wide)
   3. The centered closing note above the footer

   ✏️ Colors, fonts, and spacing all come from css/main.css —
      edit that file, not this one, to change the look.
   ============================================================ */

.page-hero .hero-actions {
  margin-top: clamp(1.8rem, 3vw, 2.4rem);
}

/* Signpost under the two downloads: "Or read my full credits below ↓".
   Beth's worry was that the download buttons read as the end of the page and
   nobody would realise every credit is also listed here. The "Performing
   Experience" divider does sit above the fold at every size (measured: 738 of
   844 on a phone, 767 of 860 on a laptop) — but it is a small ornament right
   on the edge, and easy to skim past. This says it in words instead.

   It is an <a> to #credits rather than a plain note, so it also carries
   people down when tapped. */
.credits-cue {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  text-align: center;
}

/* The header is fixed, so an anchor jump would drop #credits underneath it —
   measured 32px up, with the flower divider and "Performing Experience" label
   half hidden. scroll-margin-top holds the landing that much lower. */
#credits {
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

/* The shared .arrow-link nudges its arrow sideways on hover, which is wrong
   for one pointing down. Same specificity as that rule, so this file being
   loaded after main.css is what makes it win. */
.credits-cue:hover .arrow,
.credits-cue:focus-visible .arrow {
  transform: translateY(4px);
}

@media (prefers-reduced-motion: reduce) {
  .credits-cue:hover .arrow,
  .credits-cue:focus-visible .arrow {
    transform: none;
  }
}

/* Close the gap between the downloads and the credits below them, so the
   "Performing Experience" divider sits in that space instead of leaving it
   empty — and lands above the fold on a laptop. */
.page-hero {
  padding-bottom: clamp(1.2rem, 2.5vw, 2rem);
}

.page-hero + .section {
  padding-top: clamp(1.2rem, 2.5vw, 2rem);
}

/* The two downloads, each with a preview above its button, so a visitor can
   see what they are getting before they commit. Deliberately small — these
   are thumbnails, not display images; the hero photo and the gallery are
   where the pictures are meant to be looked at. */
.download-previews {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.2rem, 3vw, 2rem);
  margin-top: clamp(1.8rem, 3vw, 2.4rem);
}

.download-card {
  display: grid;
  gap: 0.9rem;
  justify-items: center;
  align-content: start;
  width: clamp(9rem, 20vw, 11rem);
}

.download-thumb {
  display: block;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bone);
}

/* Fixed height on both, so the pair lines up whatever shape the source is.
   The headshot is anchored to the top so the crop keeps her face. */
.download-thumb img {
  display: block;
  width: 100%;
  height: 9rem;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.5s var(--ease);
}

/* The resume preview is a wide strip of a portrait page — cropping it would
   cut the name off one side and the credits off the other, so it is fitted
   whole inside the frame instead, on paper white. */
.download-thumb--doc img {
  object-fit: contain;
  object-position: center;
  background: #fdfcfa;
}

.download-thumb:hover img {
  transform: scale(1.03);
}

.download-card .btn {
  width: 100%;
  text-align: center;
  padding-inline: 0.6rem;
  font-size: var(--text-xs);
}

/* Sits between the downloads and the first credits table, so the page does
   not jump from a row of small thumbnails straight into a data table. */
.credits-intro {
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  text-align: center;
  margin-bottom: clamp(2.4rem, 5vw, 3.6rem);
}

/* A full-width hairline with the marquee's petal asterisk sitting on it. */
.rule-ornament {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--line);
  position: relative;
  margin-bottom: 1.2rem;
}

.rule-ornament::after {
  content: "\2749";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding-inline: 0.9rem;
  background: var(--bone);
  color: var(--rose);
  font-size: var(--text-base);
  line-height: 1;
}

.credits-intro-note {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  max-width: 32rem;
}

/* The vitals line under the intro — letterspaced caps with petal separators */
.resume-stats {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 1.4rem;
}

.resume-stats .sep {
  color: var(--rose);
  padding-inline: 0.45em;
}

/* Link out to the reels, under the skills chips. Generous space above so it
   reads as its own invitation rather than another item in the list. */
.skills-link {
  margin-top: clamp(2.6rem, 5vw, 4rem);
}

/* Closing note — centered, narrow, with room around the link */
.resume-note {
  display: grid;
  justify-items: center;
  gap: 1.4rem;
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
}

/* The review block that closes the page. .praise already centres and caps its
   width; this just gives it air so it reads as a closing note rather than
   another row of resume data. */
.resume-praise {
  padding-block: clamp(1rem, 3vw, 2rem);
}