/*
====================================================================
FILE: styles.css
PURPOSE: This file controls the WEBSITE'S APPEARANCE.

Nothing in this file appears as visible text. It controls colors, fonts,
spacing, image cropping, mobile layouts, buttons, forms, and animations.

BEGINNER RULES:
1. Search for "EDIT HERE" to find the safest common changes.
2. Do not delete braces: { or }.
3. Every property usually ends with a semicolon: ;
4. If you break something, undo the last edit rather than negotiating with CSS.
====================================================================
*/

/* ==================================================================
   1. MASTER DESIGN SETTINGS
   EDIT HERE: The variables below control the main colors, fonts,
   header height, and general side padding for the entire website.

   Example: changing --accent changes the gold-brown highlight color.
   A hex color looks like #a88759. Use any online color picker for another.
   ================================================================== */
:root {
  --ink: #11110f;
  --ink-soft: #1a1a17;
  --paper: #efede6;
  --paper-soft: #e5e2d9;
  --white: #ffffff;
  --muted-dark: #706d65;
  --muted-light: #aaa79f;
  --line-dark: rgba(17, 17, 15, 0.18);
  --line-light: rgba(239, 237, 230, 0.18);
  --accent: #a88759;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --header-height: 4.75rem;
  --panel-pad: clamp(2rem, 6vw, 7rem);
}

/* ==================================================================
   2. BASIC BROWSER RESET
   These rules remove inconsistent browser defaults. Usually leave alone.
   ================================================================== */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
  background: var(--ink);
}

body {
  margin: 0;
  /*
     HEADER CLEARANCE:
     The header is fixed to the top of the browser. This padding reserves an
     equal amount of real page space beneath it, so the portrait and opening
     text begin BELOW the header instead of hiding behind it.
  */
  padding-top: var(--header-height);
  min-width: 280px;
  overflow-x: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

figure, p { margin: 0; }
img, iframe, svg { display: block; max-width: 100%; }
/* A <picture> wrapper is now used for the responsive hero portrait.
   Giving it full dimensions lets the selected phone/desktop image fill the
   exact same photograph panel without creating mystery gaps. */
.split-media picture { display: block; width: 100%; height: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

/* Keyboard focus outline for accessibility. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* Invisible accessibility text. It is read by screen readers. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Hidden "Skip to content" link for keyboard users. */
.skip-link {
  position: fixed;
  z-index: 1000;
  top: 0.75rem;
  left: 0.75rem;
  transform: translateY(-160%);
  padding: 0.65rem 0.9rem;
  background: var(--paper);
  color: var(--ink);
}
.skip-link:focus { transform: translateY(0); }

/* ==================================================================
   3. FIXED TOP HEADER AND NAVIGATION
   Controls the Austin Kleyn logo, menu links, and mobile menu button.
   EDIT HERE: header height is the --header-height variable at the top.
   ================================================================== */
.site-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-inline: clamp(1.1rem, 3vw, 2.5rem);
  color: var(--paper);
  mix-blend-mode: difference;
  transition: background-color 180ms ease, backdrop-filter 180ms ease;
}

.site-header.is-scrolled {
  mix-blend-mode: normal;
  background: rgba(17, 17, 15, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.brand {
  display: inline-grid;
  gap: 0.05rem;
  line-height: 1.05;
}
.brand-name { font-family: var(--serif); font-size: 1.06rem; }
.brand-role {
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.72;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.site-nav a { opacity: 0.72; transition: opacity 140ms ease; }
.site-nav a:hover, .site-nav a:focus-visible { opacity: 1; }

.menu-button {
  display: none;
  width: 2.65rem;
  height: 2.65rem;
  padding: 0.62rem;
  border: 1px solid rgba(239, 237, 230, 0.35);
  background: var(--ink);
  color: var(--paper);
}
.menu-button span:not(.sr-only) {
  display: block;
  width: 100%;
  height: 1px;
  margin-block: 0.28rem;
  background: currentColor;
  transition: transform 180ms ease, opacity 180ms ease;
}

/* ==================================================================
   4. TRUE 50/50 SPLIT LAYOUT AND PHOTOGRAPHS

   grid-template-columns creates two exactly equal halves on larger screens.
   The mobile rules near the bottom change this to one stacked column.

   EDIT HERE: PHOTO CROPPING
   - object-fit: cover fills the available area and may crop an edge.
   - object-fit: contain shows the entire photograph but may leave empty space.
   - aspect-ratio: 2 / 3 means width 2, height 3.
   ================================================================== */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
}

.split-hero,
.split-listen {
  align-items: stretch;
}

.split-media {
  min-width: 0;
  overflow: hidden;
  background: #080807;
}

.split-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

/* HERO-SPECIFIC HEIGHT AND PORTRAIT FRAMING ------------------------
   These rules solve two separate problems without changing later sections:
   1. On normal laptops, the first section is exactly one visible screen tall,
      so the two introductory links are visible immediately.
   2. The portrait fills its half instead of stopping early and leaving a
      mysterious empty strip beneath it on tablet/Fold-sized screens.

   EDIT HERE: DESKTOP PORTRAIT POSITION
   Desktop now uses assets/portrait-desktop.jpg, a crop of the already-made
   wider portrait. It includes more neck, collar, and upper jacket than the
   earlier desktop framing while still filling the entire right half.

   The second number in object-position controls vertical emphasis:
   - 8% gives a very small downward shift, preserving all practical headroom
     while showing a touch more neck than a strict top pin.
   - Lower the number toward 0% to protect even more headroom.
   - Raise it cautiously toward 20% to reveal slightly more jacket. */
.split-hero .split-media img {
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: 50% 8%;
}

/* On regular desktop/laptop widths, the header occupies its own space and
   the opening section uses exactly the REST of the visible browser height. */
@media (min-width: 961px) {
  .split-hero { height: calc(100svh - var(--header-height)); }
}

/* LISTEN PHOTO: REMOVE THE EMPTY STRIP ON TWO-COLUMN SCREENS --------
   The right-hand Listen panel is taller because it contains text, Spotify,
   and four links. Without height: 100%, the piano image keeps only its own
   2:3 aspect-ratio height, leaving the black figure background visible below.

   EDIT HERE: PIANO PHOTO CROPPING
   - object-position: 50% 50% keeps the center of the photograph visible.
   - Change the second percentage to move the photograph up or down. */
@media (min-width: 721px) {
  .split-listen .split-media img {
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: 50% 50%;
  }
}

/* UNFOLDED FOLD / PORTRAIT TABLET PIANO FRAMING --------------------
   EDIT HERE: PIANO PHOTO ON AN OPEN PIXEL FOLD

   WHY THIS SPECIAL RULE EXISTS:
   At widths between 721px and 960px, the site still uses two equal columns,
   but the screen is much taller relative to its width than a laptop. Because
   the image must fill the full height, object-fit: cover trims some material
   from both sides. The person stands left of center in the original photo,
   so a perfectly centered crop can shave the outside edge of his jacket.

   object-position: 25% 50% uses a middle-left crop. This moves the figure
   slightly left inside the column while preserving enough piano to make the
   direction of movement visually obvious.

   This affects ONLY tablet/Fold-sized two-column screens. Desktop stays at
   50% 50%, and normal phones use the stacked image rules farther below.

   EDIT HERE: FOLD PIANO HORIZONTAL POSITION
   - 25% is the current compromise: figure slightly left, piano still visible.
   - Lower toward 0% to preserve more of the photograph's left side.
   - Raise toward 50% to reveal more piano, but the figure may begin cropping. */
@media (min-width: 721px) and (max-width: 960px) {
  .split-listen .split-media img {
    object-position: 25% 50%;
  }
}

/* Text-side panels: alignment and interior spacing. */
.split-panel {
  min-width: 0;
  display: flex;
  align-items: center;
  padding: max(calc(var(--header-height) + 2rem), var(--panel-pad)) var(--panel-pad);
}

.split-panel-light {
  background: var(--paper);
  color: var(--ink);
}

.split-panel-dark {
  background: var(--ink);
  color: var(--paper);
}

/* HERO TEXT POSITIONING ---------------------------------------------
   This uses less wasted vertical padding than the general panels below.
   That is what keeps both opening links above the bottom edge on laptops. */
.hero-copy {
  /* The body already reserves space for the fixed header. Do not add the
     header height a second time here or the buttons get shoved downward. */
  padding-top: clamp(1.15rem, 3vh, 2.25rem);
  padding-bottom: clamp(1.4rem, 3.5vh, 2.75rem);
}

/* Maximum readable width for text inside each half. */
.content-block {
  width: min(100%, 38rem);
}
.content-block-wide { width: min(100%, 44rem); }

/* ==================================================================
   5. TYPOGRAPHY: SMALL LABELS, GIANT HEADINGS, AND PARAGRAPHS
   EDIT HERE: change font sizes, line spacing, and heading appearance.
   clamp(minimum, flexible size, maximum) keeps text responsive.
   ================================================================== */
.kicker {
  margin-bottom: 1.2rem;
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

h1, h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.88;
}

h1 { font-size: clamp(4.2rem, 9.2vw, 9rem); }
h2 { font-size: clamp(3.8rem, 7.4vw, 7.2rem); }

.lead,
.section-intro {
  max-width: 34rem;
  margin-top: clamp(1.8rem, 3vw, 2.8rem);
  font-family: var(--serif);
  line-height: 1.48;
}

.lead { font-size: clamp(1.12rem, 1.75vw, 1.55rem); color: #34332f; }
.section-intro { font-size: clamp(1.05rem, 1.45vw, 1.3rem); }
.split-panel-dark .section-intro { color: #c4c1b8; }
.split-panel-light .section-intro { color: #4f4d47; }

/* ==================================================================
   6. INTRODUCTION BUTTONS AND LINKS
   Controls "Listen to the music" and "View scores."
   ================================================================== */
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 1.7rem;
  margin-top: 2.35rem;
}

.button {
  min-height: 3.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.25rem;
  border: 1px solid currentColor;
  border-radius: 0;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background-color 160ms ease, color 160ms ease;
}

.button-dark { background: var(--ink); color: var(--paper); }
.button-dark:hover, .button-dark:focus-visible { background: var(--accent); color: var(--ink); border-color: var(--accent); }

.quiet-link {
  padding-block: 0.45rem;
  border-bottom: 1px solid currentColor;
  color: #5d5a53;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.quiet-link:hover { color: var(--ink); }

/* ==================================================================
   7. LISTEN SECTION: SPOTIFY PLAYER AND PLATFORM LINKS
   EDIT HERE: border-radius on .spotify-embed changes corner roundness.
   The platform link grid is two columns on desktop and one on phones.
   ================================================================== */
.listen-panel { align-items: flex-start; }
.listen-panel .content-block { padding-top: clamp(1rem, 2vw, 2.5rem); }

.spotify-embed {
  margin-top: clamp(2rem, 4vw, 3.2rem);
  overflow: hidden;
  border-radius: 12px;
  background: #121212;
}
.spotify-embed iframe { width: 100%; border: 0; }

.platform-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1.25rem;
  border-top: 1px solid var(--line-light);
}

.platform-links a {
  min-height: 4.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line-light);
  color: #d6d3ca;
  font-family: var(--serif);
  font-size: 1.08rem;
  transition: color 150ms ease, padding 150ms ease;
}
.platform-links a:nth-child(odd) { padding-right: 1.2rem; }
.platform-links a:nth-child(even) { padding-left: 1.2rem; border-left: 1px solid var(--line-light); }
.platform-links a:hover { color: var(--white); padding-inline: 0.55rem; }

/* ==================================================================
   7A. MOBILE-SAFE MENU AND BUTTON DESTINATIONS

   The links in the header and opening section still use href="#listen" and
   href="#scores". Those IDs now live on the actual Recordings content and
   actual score list inside index.html, rather than on the outer split sections.

   WHY THIS EXISTS:
   On phones, the outer sections begin with a photograph or explanatory panel.
   Jumping to the outer section made visitors land before the useful controls.
   These targets make the useful content itself the destination.

   EDIT HERE: ANCHOR BREATHING ROOM
   scroll-margin-top adds a small gap beneath the fixed header after a jump.
   The main header clearance is already handled by html scroll-padding-top.
   Increase 1rem only if the target looks too close to the header.
   ================================================================== */
#listen,
#scores {
  scroll-margin-top: 1rem;
}

/* ==================================================================
   8. SCORES SECTION
   Controls the height and appearance of the numbered score list.
   ================================================================== */
.split-scores,
.split-contact { min-height: min(58rem, 100svh); }

.score-panel { padding-block: clamp(4rem, 8vw, 7rem); }
.score-list { width: 100%; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-light); }
.score-list li { border-bottom: 1px solid var(--line-light); }
.score-list a {
  min-height: 6.7rem;
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) 1.2rem;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  transition: padding 160ms ease, color 160ms ease;
}
.score-list a:hover { padding-inline: 0.7rem; color: var(--white); }
.score-index { color: var(--muted-light); font-size: 0.68rem; letter-spacing: 0.08em; }
.score-copy { min-width: 0; display: grid; gap: 0.3rem; }
.score-copy strong { overflow-wrap: anywhere; font-family: var(--serif); font-size: clamp(1.35rem, 2.5vw, 2rem); font-weight: 400; line-height: 1.1; }
.score-copy small { color: var(--muted-light); font-size: 0.68rem; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; }
.score-list a > span:last-child { color: var(--muted-light); }

/* ==================================================================
   9. CONTACT FORM
   EDIT HERE: input backgrounds, borders, placeholder colors, and spacing.
   The white background is what prevents the fields from looking blacked out.
   ================================================================== */
.form-panel { align-items: center; }
.contact-form { width: min(100%, 42rem); display: grid; gap: 1.35rem; }
.form-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line-dark);
}
.form-heading p { font-family: var(--serif); font-size: clamp(1.5rem, 2.5vw, 2rem); }
.form-heading span { color: var(--muted-dark); font-size: 0.66rem; font-weight: 750; letter-spacing: 0.09em; text-transform: uppercase; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.field { display: grid; gap: 0.45rem; }
.field label { color: #3f3d37; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.field label span { color: #8d5f3c; }
.field input,
.field textarea {
  width: 100%;
  border: 1px solid rgba(17, 17, 15, 0.32);
  border-radius: 0;
  padding: 0.95rem 1rem;
  background: var(--white);
  color: var(--ink);
  caret-color: var(--ink);
  outline: 0;
  color-scheme: light;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.field input::placeholder, .field textarea::placeholder { color: #77736a; opacity: 1; }
.field textarea { min-height: 11rem; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: rgba(17, 17, 15, 0.62); }
.field input:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(168, 135, 89, 0.16); }
.contact-form .button { justify-self: start; }
.form-note { margin-top: -0.3rem; color: var(--muted-dark); font-size: 0.76rem; }
.honeypot { position: absolute; left: -10000px; }

/* ==================================================================
   10. FOOTER
   ================================================================== */
.site-footer {
  min-height: 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem clamp(1.1rem, 3vw, 2.5rem);
  background: #090908;
  color: var(--muted-light);
  font-size: 0.74rem;
}
.site-footer a:hover { color: var(--paper); }

/* ==================================================================
   11. FADE-IN ANIMATIONS
   EDIT HERE:
   - opacity: 0 starts an item invisible.
   - translateY(24px) starts it 24 pixels lower.
   - 760ms is the animation duration. Larger = slower.
   - reveal-image uses 950ms, so photographs fade slightly more slowly.

   Content remains visible when JavaScript is unavailable.
   ================================================================== */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 760ms cubic-bezier(.2,.65,.25,1), transform 760ms cubic-bezier(.2,.65,.25,1);
}
.js .reveal-image { transform: scale(1.018); transition-duration: 950ms; }
/* The opening portrait still fades in, but does NOT zoom. Even a temporary
   1.8% zoom can nibble at the hairline on short phone screens while the page
   is loading. Later photographs keep the subtle zoom effect. */
.js .split-hero .reveal-image { transform: none; transition-duration: 760ms; }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ==================================================================
   12. THANK-YOU PAGE AND 404 PAGE
   Both utility pages share these simple centered-card styles.
   ================================================================== */
.utility-page {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: var(--paper);
  color: var(--ink);
}
.utility-card { width: min(100%, 46rem); }
.utility-card h1 { font-size: clamp(4rem, 12vw, 8rem); }
.utility-card .lead { margin-bottom: 2.2rem; }

/* ==================================================================
   12A. SHORT DESKTOP / LAPTOP HEIGHT FIX
   Browsers consume some vertical room with tabs and toolbars, because
   apparently a webpage must negotiate for its own pixels. These rules make
   the opening text slightly more compact only when the window is short.
   ================================================================== */
@media (min-width: 961px) and (max-height: 820px) {
  .hero-copy {
    padding-top: 0.8rem;
    padding-bottom: 1.15rem;
  }
  .hero-copy .kicker { margin-bottom: 0.8rem; }
  .hero-copy h1 { font-size: clamp(4.35rem, 8.2vw, 7.35rem); }
  .hero-copy .lead {
    margin-top: 1.15rem;
    font-size: clamp(1rem, 1.4vw, 1.28rem);
    line-height: 1.42;
  }
  .hero-copy .actions { margin-top: 1.35rem; }
}

/* ==================================================================
   13. TABLET / FOLD / SMALL LAPTOP RULES
   Everything inside this block applies when the screen is 960px wide or less.
   This is where the normal navigation changes into the hamburger menu.
   ================================================================== */
@media (max-width: 960px) {
  :root { --panel-pad: clamp(1.6rem, 5vw, 3.5rem); }
  .site-header { mix-blend-mode: normal; background: rgba(17,17,15,.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .menu-button { display: block; }
  .site-nav {
    position: fixed;
    inset: var(--header-height) 0 auto;
    display: grid;
    gap: 0;
    padding: 0 1.1rem;
    background: rgba(17,17,15,.98);
    transform: translateY(-125%);
    visibility: hidden;
    transition: transform 180ms ease, visibility 180ms ease;
  }
  .site-nav.is-open { transform: translateY(0); visibility: visible; }
  .site-nav a { padding: 1rem 0; border-top: 1px solid var(--line-light); }
  .menu-button[aria-expanded="true"] span:nth-of-type(2) { transform: translateY(5px) rotate(45deg); }
  .menu-button[aria-expanded="true"] span:nth-of-type(3) { opacity: 0; }
  .menu-button[aria-expanded="true"] span:nth-of-type(4) { transform: translateY(-5px) rotate(-45deg); }
  h1 { font-size: clamp(4rem, 10.7vw, 7rem); }
  .split-scores, .split-contact { min-height: auto; }
}

/* ==================================================================
   14. PHONE PORTRAIT RULES
   At 720px or less, the two halves stack into one column.
   EDIT HERE: .split grid-template-columns: 1fr is the stacking instruction.
   ================================================================== */
@media (max-width: 720px) {
  :root { --header-height: 4.35rem; --panel-pad: 1.35rem; }
  .split { grid-template-columns: 1fr; }
  .split-panel { min-height: auto; padding: calc(var(--header-height) + 2.4rem) var(--panel-pad) 4.5rem; }
  .split-media { order: -1; }
  .split-media img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }

  /* MOBILE HERO ORDER, PHONE PORTRAIT, AND FIRST-SCREEN BALANCE -----
     The portrait comes FIRST, followed by the introduction. This prevents the
     portrait and piano photographs from appearing back-to-back with no text.

     PHONE-ONLY PORTRAIT FILE:
     Phones use assets/portrait-mobile.jpg, selected by the <picture> element
     in index.html. This is NOT another generated image. It is a closer crop of
     the same already-generated wider portrait, approximately matching the crop
     rectangle chosen in Apple Preview: full hair, full neck, collar, and the
     shirt V, without the excessive amount of jacket from version 13.

     Desktop/tablet uses the separate assets/portrait-desktop.jpg crop. That
     crop is slightly looser vertically so a bit more neck remains visible.

     WHY THE HEIGHT USES A CALCULATION:
     The browser reserves enough of the first visible screen for the kicker and
     BOTH lines of "Austin Kleyn." On a tall phone the image can be square-ish;
     on a short phone it automatically becomes a little shorter. This is more
     reliable than choosing one fixed height for every phone humans have made.

     EDIT HERE: MOBILE PORTRAIT HEIGHT
     - 16rem is the emergency minimum for short browser viewports, including
       the Pixel Fold used closed while Chrome's large address bars are visible.
     - 100vw allows approximately a square image on ordinary phones.
     - 100svh minus the header and 10.75rem reserves room for the complete name.
     - 25.5rem prevents excessive height on unusually wide phones.

     To show more photograph, reduce 10.75rem slightly, perhaps to 10.25rem.
     To guarantee still more room below "Kleyn," increase it to 11.25rem. */
  .split-hero .split-media {
    order: -2;
    height: clamp(
      16rem,
      min(100vw, calc(100svh - var(--header-height) - 10.75rem)),
      25.5rem
    );
  }
  .split-hero .split-media img {
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    /* The new phone crop already contains the desired full head-to-shirt-V
       framing. A 30% vertical focus protects the hair while retaining more
       neck than a strict top pin on short screens. */
    object-position: 50% 30%;
  }
  .split-hero .split-panel {
    order: -1;
    min-height: auto;
    /* This smaller phone-only top gap helps the full surname clear the first
       screen. Desktop spacing is not touched. */
    padding: 1.5rem var(--panel-pad) 4.5rem;
  }
  .split-hero .kicker { margin-bottom: 0.75rem; }
  .split-hero h1 {
    /* Same serif typeface and visual character, slightly better calibrated
       for narrow screens so the bottom of the Y is immediately visible. */
    font-size: clamp(3.35rem, 18.2vw, 5.45rem);
    line-height: 0.82;
  }

  .split-listen .split-media { order: 0; }
  .split-listen .split-panel { order: 1; }
  .split-scores .split-panel, .split-contact .split-panel { min-height: 60svh; }

  /* MOBILE-SAFE CONTACT LANDING -----------------------------------
     The Contact navigation link uses JavaScript to jump to #contact-form
     only on phone-sized screens. This margin reserves room for the fixed
     header so the "Send a message" heading and first fields remain visible.

     EDIT HERE: Increase 0.8rem if the form still feels too close to the
     header; decrease it if there is more empty space than you want. */
  #contact-form { scroll-margin-top: calc(var(--header-height) + 0.8rem); }
  h1:not(#hero-title) { font-size: clamp(4rem, 21vw, 6.5rem); }
  h2 { font-size: clamp(3.8rem, 18vw, 6rem); }
  .lead { font-size: 1.14rem; }
  .platform-links { grid-template-columns: 1fr; }
  .platform-links a:nth-child(odd), .platform-links a:nth-child(even) { padding-inline: 0; border-left: 0; }
  .platform-links a:hover { padding-inline: 0.45rem; }
  .field-row { grid-template-columns: 1fr; }
  .form-heading { align-items: flex-start; flex-direction: column; gap: 0.4rem; }
}

/* Very narrow phones: stack buttons and footer items. */
@media (max-width: 430px) {
  .actions { align-items: stretch; flex-direction: column; }
  .button, .quiet-link { width: 100%; }
  .quiet-link { display: flex; justify-content: space-between; }
  .spotify-embed iframe { height: 352px; }
  .site-footer { align-items: flex-start; flex-direction: column; }
}

/* ==================================================================
   15. PHONE / FOLD LANDSCAPE RULES
   Keeps important sections in two columns on short, wide screens.
   ================================================================== */
@media (orientation: landscape) and (max-height: 620px) and (max-width: 980px) {
  .split-hero, .split-listen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-hero .split-panel, .split-listen .split-panel { order: initial; min-height: auto; padding: calc(var(--header-height) + 1.4rem) 2rem 2rem; }
  .split-media { order: initial; }
  h1 { font-size: clamp(3.5rem, 12vh, 5.5rem); }
  h2 { font-size: clamp(3.2rem, 11vh, 5rem); }
  .lead, .section-intro { margin-top: 1rem; font-size: 0.98rem; }
  .actions { margin-top: 1.25rem; }
}

/* ==================================================================
   16. ACCESSIBILITY: REDUCED MOTION
   Visitors who disable animation in their device settings see no fade effects.
   Leave this block intact.
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}