/* KSU portfolio site: page layout only. Tokens and components come from the design system. */
html { background: var(--bg-backdrop); overflow-x: clip; }
body { margin: 0; background: var(--bg-backdrop); color: var(--ink); font: 400 16px/22px var(--font-sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }

.site-backdrop { position: fixed; inset: 0; z-index: 0; }
#smooth-wrapper { position: relative; z-index: 1; }
#smooth-content { padding: var(--space-8); }
.site-frame { overflow-x: clip; }

/* Hero: the photograph runs from the very top of the frame; there is no nav bar */
/* The hero reaches the bottom of the first screen exactly, so the next section starts below the fold */
.site-hero { min-height: calc(100svh - var(--space-8)); }
.site-hero .ksu-cover__info { padding-top: var(--space-12); }

/* The booking button stays in the corner once the hero has gone by, and lifts above the player bar */
.site-book { position: fixed; right: var(--space-8); z-index: 15; padding: var(--space-6) var(--space-12); font-size: 26px; transition: bottom var(--ksu-hover), background var(--ksu-hover), color var(--ksu-hover); }
/* The player bar reports its height in --ksu-player-h; the button always sits one step above it */
.site-book { bottom: calc(var(--ksu-player-h, 0px) + var(--space-8)); }

/* Rhythm: big gaps between sections; full-bleed bands break out of the page margins */
.site-section { padding-top: clamp(96px, 16vw, 240px); }
.site-bleed, .site-band { margin-inline: calc(var(--space-8) * -1); }
.site-band { margin-top: var(--space-24); }

/* Mixes: straight under the hero, on coral */
.site-mixes { margin-top: 0; padding-top: var(--space-8); }
/* Everything after the hero rides above it, so the page slides over the held hero */
.site-frame > :not(.site-hero) { position: relative; z-index: 6; }
.site-frame > section:not(.ksu-accent):not(.ksu-paper), .site-frame > .site-band, .site-frame > .site-footer { background: var(--bg-page); }
.site-mixes__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-12); }
.site-mixes__head > div { flex: 1 1 60%; min-width: 0; }
.site-mixes__head .ksu-eyebrow { padding-bottom: 0.6em; text-align: right; }

/* Watch: the word sits on the film; the film runs off the right edge; shorts hang at different heights */
.site-watch__feature { margin: 0 calc(var(--space-8) * -1) 0 16%; }
.site-watch__feature .ksu-video__cap { padding-right: var(--space-8); }
.site-watch__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2); align-items: start; margin-top: var(--space-24); }
.site-watch__copy { grid-column: 1 / 6; display: grid; gap: var(--space-12); justify-items: start; padding-top: var(--space-24); }
.site-watch__short--a { grid-column: 7 / 10; }
.site-watch__short--b { grid-column: 10 / 13; margin-top: 38%; }

/* Live: four photos placed off the rhythm, with empty columns between them */
.site-live .ksu-photo-frame { min-height: 0; }
.site-live__a { grid-column: 1 / 7; aspect-ratio: 1086 / 1536; }
.site-live__b { grid-column: 9 / 13; aspect-ratio: 2 / 3; margin-top: 46%; }
.site-live__c { grid-column: 2 / 5; aspect-ratio: 2 / 3; margin-top: -18%; }
.site-live__d { grid-column: 6 / 12; aspect-ratio: 1440 / 835; margin-top: 12%; }
.site-live__note { grid-column: 9 / 13; margin-top: var(--space-16); max-width: none; text-align: left; }

/* Profile on paper, kept to about one screen: the word and three lines of small type, then a tall photograph beside one sentence and a short spec list */
.site-profile { margin-top: clamp(96px, 12vw, 180px); padding-top: var(--space-12); padding-bottom: var(--space-16); }
.site-profile__top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-12); }
.site-profile__top > div { flex: 0 1 46%; min-width: 0; }
.site-profile__top .ksu-eyebrow { padding-bottom: 0.4em; text-align: right; }
.site-profile__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-8) var(--space-2); align-items: start; }
.site-profile__photo { grid-column: 1 / 5; aspect-ratio: 3 / 4; min-height: 0; }
.site-profile__text { grid-column: 6 / 13; display: grid; gap: var(--space-12); min-width: 0; }
.site-profile__text .ksu-intro--xl { font-size: clamp(22px, 2.3vw, 34px); }

/* Press: the word, then a rail of tall photographs that runs edge to edge */
.site-media__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-12); }
.site-media__head > div { flex: 1 1 60%; min-width: 0; }
.site-media__head .ksu-eyebrow { padding-bottom: 0.6em; text-align: right; }
.site-media .ksu-rail { padding-left: var(--space-8); }
.site-media .ksu-mixes { margin-top: var(--space-16); }

/* Booking: the closing section. The word with the beat ring, contact details beside one portrait, then one very large button. */
.site-booking__head { position: relative; isolation: isolate; display: grid; gap: var(--space-6); }
.site-booking__head .ksu-beat { position: absolute; right: -6%; top: 50%; z-index: -1; width: min(760px, 62%); translate: 0 -50%; }
.site-booking__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-12) var(--space-2); align-items: end; margin-top: var(--space-24); }
.site-booking__text { grid-column: 1 / 8; display: grid; gap: var(--space-12); min-width: 0; }
.site-booking__photo { grid-column: 9 / 13; aspect-ratio: 3 / 4; min-height: 0; }
.site-booking__photo .ksu-photo { object-position: 30% 50%; }
.site-booking__cta { margin-top: var(--space-16); }
.site-booking__foot { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-8); margin-top: var(--space-8); }
.site-booking__details { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-12); }
.site-booking__details dd { margin-bottom: 0; }

.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-16); padding-block: var(--space-6); border-top: var(--hairline) solid var(--line); color: var(--ink-muted); font: 400 12px/17px var(--font-mono); text-transform: uppercase; }

@media (max-width: 900px) {
  .site-watch__feature { margin-left: 0; }
  .site-watch__copy { grid-column: 1 / 13; padding-top: 0; }
  .site-watch__short--a { grid-column: 1 / 7; }
  .site-watch__short--b { grid-column: 8 / 13; margin-top: 30%; }
  .site-live__a { grid-column: 1 / 10; }
  .site-live__b { grid-column: 7 / 13; margin-top: -30%; }
  .site-live__c { grid-column: 1 / 6; margin-top: 10%; }
  .site-live__d { grid-column: 3 / 13; margin-top: 8%; }
  .site-live__note { grid-column: 1 / 11; }
  .site-profile__top > div { flex-basis: 70%; }
  .site-profile__photo { grid-column: 1 / 8; }
  .site-profile__text { grid-column: 1 / 13; }
  .site-booking__text { grid-column: 1 / 13; }
  .site-booking__photo { grid-column: 4 / 13; grid-row: 1; }
  .site-booking__head .ksu-beat { right: -14%; width: 70%; }
}
@media (max-width: 720px) {
  #smooth-content { padding: 0; }
  .site-hero { min-height: 0; }
  .site-book { right: var(--space-4); bottom: calc(var(--ksu-player-h, 0px) + var(--space-4)); padding: var(--space-4) var(--space-6); font-size: 20px; }

  .site-bleed, .site-band { margin-inline: calc(var(--space-4) * -1); }
  .site-watch__feature { margin-right: calc(var(--space-4) * -1); }
  .site-watch__feature .ksu-video__cap { padding-right: var(--space-4); }
  .site-mixes__head .ksu-eyebrow, .site-media__head .ksu-eyebrow { text-align: left; }
  /* On phones the ring is large: centred just under the heading, it runs behind the word and out over the photograph below */
  .site-booking__head { z-index: 2; padding-block: var(--space-16) var(--space-8); }
  .site-booking__head .ksu-beat { right: -30%; top: 100%; width: 140%; }
  .site-booking__grid { margin-top: var(--space-12); }
  .site-media .ksu-rail { padding-left: var(--space-4); }

}