/* ==========================================================================
   Amber Miller, soprano: site styles

   EDIT: Colors, fonts and the menu size are set once, in the :root block
   below. Change a value there and it updates on every page.
   ========================================================================== */

:root {
  /* Colors */
  --purple: #7a23a4;       /* primary: headings, links, buttons */
  --plum: #4a1563;         /* hover states, footer background */
  --lavender: #f4edf8;     /* photo strip band, placeholders */
  --ivory: #faf8f5;        /* page background */
  --charcoal: #2a2630;     /* body text */
  --warm-gray: #6e6873;    /* dates, captions, notes */
  --hairline: #e6e1ea;     /* thin dividing lines */
  --on-plum: #faf8f5;      /* text on the footer */
  --on-plum-soft: #d9c8e6; /* quieter text on the footer */

  /* Fonts */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-body: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;

  /* Menu size: smallest size on phones, scaling size, largest size on wide screens */
  --nav-size: clamp(1.75rem, 4vw, 3.5rem);

  /* Layout */
  --page-width: 74rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --header-pad: clamp(0.5rem, 1vw, 1rem);
  --header-h: calc(var(--nav-size) * 1.3 + 2 * var(--header-pad) + 1px);
}

/* Fonts are stored in the fonts folder, so the site has no outside dependencies. */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-italic.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- Base ---------- */

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

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

body {
  margin: 0;
  background: var(--ivory);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--purple);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { color: var(--plum); }

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

cite { font-style: italic; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  color: var(--purple);
}

p { margin: 0 0 1.1em; }

.wrap {
  width: 100%;
  max-width: var(--page-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 20;
  padding: 0.5rem 1rem;
  background: var(--plum);
  color: var(--on-plum);
}
.skip-link:focus { top: 1rem; }

.icon {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  fill: currentColor;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.75rem 1.6rem;
  border: 1px solid var(--purple);
  color: var(--purple);
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.button:hover { background: var(--purple); color: var(--ivory); }

.button--solid { background: var(--purple); color: var(--ivory); }
.button--solid:hover { background: var(--plum); border-color: var(--plum); color: var(--ivory); }

.button--large { padding: 0.8em 1.6em; font-size: clamp(1.25rem, 1.8vw, 1.625rem); }

.button--xl { padding: 0.85em 2em; font-size: clamp(1.375rem, 2.2vw, 2rem); }

/* ---------- Header and menu ---------- */

.site-header {
  background: var(--ivory);
  border-bottom: 1px solid var(--hairline);
}

.header-inner {
  display: flex;
  justify-content: center;
  padding-block: var(--header-pad);
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 clamp(1.25rem, 3.4vw, 3.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: block;
  padding-block: 0.1em;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--nav-size);
  line-height: 1.1;
  color: var(--charcoal);
  text-decoration: none;
}
.site-nav a:hover { color: var(--purple); }
.site-nav a[aria-current="page"] {
  color: var(--purple);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.16em;
}

/* ---------- Home: name and photo ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  /* The photo column is sized so the whole photo fits on screen below the menu. */
  grid-template-columns: minmax(0, 1fr) min(45vw, calc((100svh - var(--header-h)) * 0.8));
  align-items: stretch;
}

.hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-block: 4rem;
  padding-inline: max(var(--gutter), calc((100vw - var(--page-width)) / 2 + var(--gutter))) var(--gutter);
}

.hero-name {
  font-size: clamp(4.5rem, 10.75vw, 11rem);
  line-height: 0.9;
  letter-spacing: -0.015em;
}
.hero-name span { display: block; }

.hero-voice {
  margin: 1.5rem 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2rem, 3.9vw, 4rem);
  line-height: 1.2;
  color: var(--warm-gray);
}

.hero-cta { margin: 3rem 0 0; }

.hero-photo { background: var(--charcoal); }
.hero-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 15%;
}

/* ---------- Home: biography ---------- */

.section { padding-block: clamp(4rem, 9vw, 7rem); }

/* The photo runs to the left edge of the screen, mirroring the photo at the top of the page,
   while the text stays lined up with the rest of the page. */
.bio-grid {
  --bio-gap: clamp(2rem, 4.5vw, 4rem);
  --content: min(100% - 2 * var(--gutter), var(--page-width) - 2 * var(--gutter));
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [content-start] calc((var(--content) - var(--bio-gap)) * 0.4)
    [photo-end] var(--bio-gap)
    [text-start] calc((var(--content) - var(--bio-gap)) * 0.6)
    [content-end] minmax(var(--gutter), 1fr)
    [full-end];
  align-items: center;
}

.bio-photo { grid-column: full-start / photo-end; grid-row: 1; }
.bio-photo img { width: 100%; }

.bio-grid .bio-text { grid-column: text-start / content-end; grid-row: 1; }
.bio-grid .bio-text h2 {
  margin-bottom: 1.5rem;
  font-size: clamp(2.75rem, 5.4vw, 4.75rem);
}

.bio-text {
  max-width: 44rem;
  font-size: clamp(1.1875rem, 1.65vw, 1.4375rem);
  line-height: 1.75;
}
.bio-text p { margin: 0 0 1.35em; }
.bio-text p:last-child { margin-bottom: 0; }

/* The opening paragraph is set in the display typeface as an introduction. */
.bio-text .lede {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.625rem, 2.65vw, 2.375rem);
  line-height: 1.45;
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* ---------- Sections with a heading on the left ---------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 1.75rem clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.split > h2,
.split > h3 {
  position: sticky;
  top: 2rem;
  font-size: clamp(2rem, 3.4vw, 2.75rem);
}

/* ---------- Home: photo strip ---------- */

.strip {
  background: var(--lavender);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}

.strip-grid {
  display: grid;
  /* Fits however many photos are listed: one row on wide screens, two per row on phones. */
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.strip-grid a { display: block; }
.strip-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
}

.strip-more { margin: 2rem 0 0; text-align: center; }

/* ---------- Inner pages ---------- */

.page-head {
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(2rem, 4vw, 3.25rem);
}
.page-head h1 { font-size: clamp(3rem, 7vw, 5.75rem); }

.page-body { padding-bottom: clamp(4rem, 8vw, 6.5rem); }

.block {
  padding-block: 2.5rem;
  border-top: 1px solid var(--hairline);
}
.block > h2,
.block > h3 { font-size: clamp(1.75rem, 2.8vw, 2.25rem); top: 1.5rem; }

/* About page: "Biography" and "Artistic Resume" titles */
.section-title {
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
}
.section-title--spaced { margin-top: clamp(3.5rem, 7vw, 6rem); }

/* Résumé and Media pages give more room to the content column than the Home biography does. */
.page-body .split { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); }

/* ---------- About: biography text and résumé ---------- */

.about-text {
  max-width: 52rem;
  font-size: clamp(1.25rem, 2vw, 1.6875rem);
  line-height: 1.7;
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.about-text p { margin: 0 0 1.2em; }
.about-text p:last-child { margin-bottom: 0; }

/* The résumé is shown as a sheet of paper. */
.resume-sheet {
  max-width: 52rem;
  margin: 0;
  background: #fff;
  border: 1px solid var(--hairline);
  box-shadow: 0 1px 2px rgba(42, 38, 48, 0.06), 0 12px 32px rgba(42, 38, 48, 0.08);
}
.resume-sheet img { width: 100%; }

/* ---------- Media: videos, photos, headshot ---------- */

.video-list { display: grid; gap: 3rem; }

.video { margin: 0; }
.video-frame { aspect-ratio: 16 / 9; background: var(--charcoal); }
.video-frame--4x3 { aspect-ratio: 4 / 3; max-width: 44rem; }
.video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.video figcaption { margin-top: 0.85rem; }

.gallery { columns: 2; column-gap: 1rem; }
.gallery a {
  display: block;
  margin-bottom: 1rem;
  break-inside: avoid;
  cursor: zoom-in;
}

.headshot img { width: 100%; max-width: 22rem; }
.headshot .button { margin-top: 1.5rem; }

/* Photo viewer (opens when a photo on the Media page is clicked) */
.lightbox {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.lightbox::backdrop { background: rgba(28, 16, 36, 0.97); }
.lightbox-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 3.5rem 4.5rem;
}
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox button {
  position: absolute;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--on-plum);
  font: 400 2.75rem/1 var(--font-display);
  cursor: pointer;
}
.lightbox button:hover { color: var(--on-plum-soft); }
.lightbox button:focus-visible { outline-color: var(--on-plum); }
.lb-close { top: 0.75rem; right: 0.75rem; }
.lb-prev { top: 50%; left: 0.75rem; transform: translateY(-50%); }
.lb-next { top: 50%; right: 0.75rem; transform: translateY(-50%); }

/* ---------- Studio and Contact ---------- */

.split-media {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 2.5rem clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.split-media--reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }

.portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 80%;
}

.contact-list { display: grid; gap: 1.75rem; margin: 0; }
.contact-list dt { font-size: 0.95rem; color: var(--warm-gray); letter-spacing: 0.02em; }
.contact-list dd {
  margin: 0.15rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.studio-body { max-width: 44rem; }
.studio-intro {
  margin: 0 0 2rem;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.6;
}
/* Embedded Google Form: tall enough that the whole form shows without its own scrollbar,
   including the red "required" notes Google adds if someone skips a question. */
.form-embed iframe { display: block; width: 100%; height: 1750px; border: 0; }
@media (max-width: 40rem) {
  .form-embed iframe { height: 1900px; }
}

.portrait--natural img { aspect-ratio: auto; }

/* ---------- Footer: YouTube first, email second ---------- */

.site-footer {
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
  background: var(--plum);
  color: var(--on-plum);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  text-align: center;
}

.footer-youtube {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.3em 1em 0.35em;
  border: 1px solid var(--on-plum);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.1;
  color: var(--on-plum);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.footer-youtube:hover { background: var(--on-plum); color: var(--plum); }

.footer-email {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.25;
  color: var(--on-plum);
  overflow-wrap: anywhere;
}
.footer-email:hover { color: var(--on-plum-soft); }

.site-footer :focus-visible { outline-color: var(--on-plum); }

/* ---------- Smaller screens ---------- */

@media (max-width: 52rem) {
  .split,
  .page-body .split,
  .split-media,
  .split-media--reverse { grid-template-columns: minmax(0, 1fr); }
  .split > h2,
  .split > h3 { position: static; }

  /* Phones and tablets: photo across the full screen width, text below it. */
  .bio-grid { grid-template-columns: var(--gutter) minmax(0, 1fr) var(--gutter); row-gap: 2.25rem; }
  .bio-photo { grid-column: 1 / -1; grid-row: 1; }
  .bio-grid .bio-text { grid-column: 2; grid-row: 2; }
  .portrait { max-width: 26rem; }
}

@media (max-width: 48rem) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-photo { order: -1; }
  .hero-text { align-items: center; padding: 2.5rem var(--gutter) 0.5rem; text-align: center; }

}

@media (max-width: 40rem) {
  .gallery { columns: 1; }
  .lightbox-inner { padding: 3.5rem 0.5rem; }
}

/* On narrow phones the menu splits evenly over two lines, and the Home button stays on one line. */
@media (max-width: 32rem) {
  .site-nav ul { max-width: calc(var(--nav-size) * 10.5); margin-inline: auto; }
  .button--large,
  .button--xl { padding: 1.05rem clamp(0.9rem, 4vw, 1.4rem); font-size: 1.125rem; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}