/* ==========================================================================
   Christopher Kraus Music
   One stylesheet for the whole site. Edit colours and fonts in :root below.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts, served from this site's own /fonts folder. Nothing here calls out
   to Google or anyone else. Both families are variable fonts: one file
   covers every weight from 400 to 800.

   The "-ext" files cover accented characters (Dvořák, Fauré, Saint-Saëns).
   Browsers only download them if such a character actually appears on the
   page, so they cost nothing until you need them.

   EB Garamond and IBM Plex Sans are both licensed under the SIL Open Font
   License. The full text is in /fonts/. Keep those files.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/eb-garamond-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/eb-garamond-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/eb-garamond-latin-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  --paper:      #FBFAF7;
  --stone:      #E9E6DE;
  --stone-deep: #DCD6C9;
  --ink:        #1E2630;
  --ink-deep:   #141A22;
  --brass:      #8C7130;
  --brass-lift: #C6A85E;
  --text:       #22272D;
  --text-mute:  #5C636B;
  --rule:       #C9C3B5;

  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --sans:  "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;

  --measure: 66ch;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --wide: 1140px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.1875rem;
  line-height: 1.62;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; background: var(--stone); }

a { color: var(--brass); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

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

h1, h2, h3 { font-weight: 500; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.1rem, 5vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.1rem); }
h3 { font-size: 1.35rem; }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.wrap { width: min(var(--wide), 100%); margin-inline: auto; padding-inline: var(--gutter); }
.prose { max-width: var(--measure); }
.skip {
  position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper);
  padding: .6rem 1rem; z-index: 100; font-family: var(--sans); font-size: .9rem;
}
.skip:focus { left: 0; }

/* --- Five-line staff, used as a section rule ----------------------------- */
.staff {
  height: 25px;
  background-image: repeating-linear-gradient(to bottom, var(--rule) 0 1px, transparent 1px 6px);
  background-size: 100% 25px;
  background-repeat: no-repeat;
  margin: 0 0 2rem;
  max-width: 132px;
}
.staff-wide { max-width: none; }

/* --- Masthead ------------------------------------------------------------ */
.masthead {
  background: var(--ink-deep);
  color: var(--paper);
  font-family: var(--sans);
  position: relative;
  z-index: 5;
}
.masthead-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 72px;
}
.wordmark {
  font-family: var(--serif);
  font-size: 1.32rem;
  color: var(--paper);
  text-decoration: none;
  letter-spacing: .005em;
}
.wordmark:hover { color: var(--brass-lift); }

.nav-toggle {
  display: none; background: none; border: 1px solid rgba(251,250,247,.35);
  color: var(--paper); font-family: var(--sans); font-size: .85rem;
  padding: .45rem .7rem; border-radius: 2px; cursor: pointer;
}

.nav ul { display: flex; gap: 1.55rem; list-style: none; margin: 0; padding: 0; }
.nav a {
  color: rgba(251,250,247,.82); text-decoration: none; font-size: .95rem;
  padding: .35rem 0; display: inline-block; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--paper); border-bottom-color: rgba(198,168,94,.5); }
.nav a[aria-current="page"] { color: var(--paper); border-bottom-color: var(--brass-lift); }

@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .nav { display: none; width: 100%; }
  .nav.is-open { display: block; }
  .masthead-inner { flex-wrap: wrap; padding-block: .9rem; }
  .nav ul { flex-direction: column; gap: 0; padding-bottom: .5rem; }
  .nav a { padding: .6rem 0; border-bottom: 1px solid rgba(251,250,247,.12); width: 100%; }
  .nav a[aria-current="page"] { border-bottom-color: var(--brass-lift); }
}

/* --- Hero ---------------------------------------------------------------- */
.hero {
  background-color: var(--ink);
  background-image: linear-gradient(180deg, rgba(20,26,34,.72), rgba(20,26,34,.88)), var(--hero-image, none);
  background-size: cover;
  background-position: center 30%;
  color: var(--paper);
  padding-block: clamp(3.5rem, 11vw, 7rem);
}
.hero h1 { font-size: clamp(2.6rem, 7.5vw, 4.5rem); margin-bottom: .25em; }
.hero-role {
  font-family: var(--sans); font-size: 1rem; color: var(--brass-lift);
  margin-bottom: 1.4em; max-width: 44ch;
}
.hero-lede { font-size: 1.24rem; color: rgba(251,250,247,.9); max-width: 54ch; }
.hero .btn-row { margin-top: 2rem; }

/* --- Buttons ------------------------------------------------------------- */
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn {
  font-family: var(--sans); font-size: .95rem; line-height: 1;
  padding: .85rem 1.35rem; border-radius: 2px; text-decoration: none;
  display: inline-block; border: 1px solid var(--brass);
  background: var(--brass); color: var(--paper);
}
.btn:hover { background: #755D25; border-color: #755D25; color: var(--paper); }
.btn-quiet { background: transparent; color: var(--brass); }
.btn-quiet:hover { background: var(--brass); color: var(--paper); }
.hero .btn-quiet { color: var(--paper); border-color: rgba(251,250,247,.5); }
.hero .btn-quiet:hover { background: rgba(251,250,247,.12); border-color: var(--paper); }

/* --- Page header (interior pages) --------------------------------------- */
.page-head { padding-block: clamp(2.5rem, 6vw, 4rem) 0; }
.page-head h1 { margin-bottom: .55rem; }
.page-head .standfirst { color: var(--text-mute); max-width: var(--measure); font-size: 1.16rem; }

/* --- Sections ------------------------------------------------------------ */
.band { padding-block: clamp(2.75rem, 7vw, 4.5rem); }
.band-stone { background: var(--stone); }
.band-ink { background: var(--ink); color: var(--paper); }
.band-ink h2, .band-ink h3 { color: var(--paper); }
.band-ink a { color: var(--brass-lift); }
.band-ink a:hover { color: var(--paper); }
.band-ink .staff { background-image: repeating-linear-gradient(to bottom, rgba(251,250,247,.3) 0 1px, transparent 1px 6px); }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(1.5rem, 4vw, 3.25rem); align-items: start; }
.split-flip > :first-child { order: 2; }
@media (max-width: 800px) { .split { grid-template-columns: 1fr; } .split-flip > :first-child { order: 0; } }

.dateline { font-family: var(--sans); font-size: .85rem; color: var(--text-mute); margin-top: 1.4rem; }
.band-ink .dateline { color: rgba(251,250,247,.6); }

/* --- Concert list -------------------------------------------------------- */
.concerts { list-style: none; margin: 0; padding: 0; }
.concerts li {
  display: grid; grid-template-columns: 11rem minmax(0,1fr) auto;
  gap: 1rem 1.75rem; align-items: baseline;
  padding: 1.15rem 0; border-top: 1px solid var(--rule);
}
.concerts li:last-child { border-bottom: 1px solid var(--rule); }
.band-ink .concerts li { border-color: rgba(251,250,247,.22); }
.concert-date { font-family: var(--sans); font-size: .88rem; color: var(--brass); }
.band-ink .concert-date { color: var(--brass-lift); }
.concert-title { font-size: 1.22rem; }
.concert-venue { display: block; font-size: 1rem; color: var(--text-mute); }
.band-ink .concert-venue { color: rgba(251,250,247,.68); }
.concert-link { font-family: var(--sans); font-size: .9rem; white-space: nowrap; }
@media (max-width: 720px) {
  .concerts li { grid-template-columns: 1fr; gap: .35rem; }
}

/* --- Feature pair (harpsichord / weddings) ------------------------------- */
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
.feature img { margin-bottom: 1.1rem; aspect-ratio: 3 / 2; object-fit: cover; }
.feature h3 { margin-bottom: .35rem; }
.feature p { color: var(--text-mute); }
.feature .more { font-family: var(--sans); font-size: .93rem; }

/* --- Compositions -------------------------------------------------------- */
.works { margin-top: 2.5rem; }
.work {
  display: grid; grid-template-columns: minmax(0,1fr) 210px;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding: 2.25rem 0; border-top: 1px solid var(--rule);
}
.work:last-of-type { border-bottom: 1px solid var(--rule); }
.work h3 { margin-bottom: .45rem; }
.work-scoring {
  font-family: var(--sans); font-size: .8rem; color: var(--brass);
  border: 1px solid var(--brass); border-radius: 2px; padding: .2rem .5rem;
  display: inline-block; margin-bottom: 1rem;
}
.work-note { font-size: 1.02rem; color: var(--text-mute); }
.work-links { font-family: var(--sans); font-size: .93rem; margin-top: 1rem; }
.work-links a + a { margin-left: 1.1rem; }
.work-cover img { border: 1px solid var(--stone-deep); }
@media (max-width: 760px) {
  .work { grid-template-columns: 1fr; }
  .work-cover { max-width: 210px; }
}

.video { aspect-ratio: 16 / 9; width: 100%; border: 0; margin-top: 1.25rem; background: var(--stone); }

/* --- Media gallery ------------------------------------------------------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.25rem; margin-top: 2.5rem; }
.gallery figure { margin: 0; }
.gallery img { aspect-ratio: 3 / 4; object-fit: cover; }
.gallery figcaption { font-family: var(--sans); font-size: .82rem; color: var(--text-mute); margin-top: .5rem; }

/* --- Video grid ---------------------------------------------------------- */
/* Two or three across on a desktop, one across on a phone. Each cell keeps
   YouTube's 16:9 shape, so the rows line up whatever the video. */
.videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: clamp(1.5rem, 3.5vw, 2.5rem); margin-top: 2.5rem; }
.videos figure { margin: 0; }
.videos .video { margin-top: 0; }

/* A heading that follows a paragraph of intro text needs a little air. */
.prose + h2 { margin-top: 2.75rem; }

/* --- Feature photo -------------------------------------------------------
   A single large photo shown at its own aspect ratio: no cropping, no
   overlay, just sized up and centered. Use for a photo that needs to read
   clearly rather than sit as a hero backdrop. */
.feature-photo {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin-inline: auto;
  border: 1px solid var(--stone-deep);
}

/* --- Price list ---------------------------------------------------------- */
.services { list-style: none; margin: 1.5rem 0 0; padding: 0; max-width: var(--measure); }
.services li { padding: 1.25rem 0; border-top: 1px solid var(--rule); }
.services li:last-child { border-bottom: 1px solid var(--rule); }
.fee { font-family: var(--sans); font-size: 1.05rem; color: var(--brass); display: block; margin-bottom: .3rem; }

/* --- Subscribe form ------------------------------------------------------ */
.subscribe { display: grid; gap: .75rem; max-width: 30rem; margin-top: 1.5rem; }
.subscribe label { font-family: var(--sans); font-size: .9rem; }
.subscribe input[type="email"] {
  font: inherit; padding: .7rem .8rem; border: 1px solid var(--rule);
  border-radius: 2px; background: var(--paper); color: var(--text); width: 100%;
}
.consent { display: flex; gap: .6rem; align-items: flex-start; font-family: var(--sans); font-size: .85rem; color: var(--text-mute); }
.subscribe button { font-family: var(--sans); font-size: .95rem; padding: .8rem 1.3rem; border: 0; border-radius: 2px; background: var(--brass); color: var(--paper); cursor: pointer; justify-self: start; }
.subscribe button:hover { background: #755D25; }
.band-ink .subscribe input[type="email"] { background: rgba(251,250,247,.06); border-color: rgba(251,250,247,.3); color: var(--paper); }
.band-ink .consent { color: rgba(251,250,247,.7); }

/* --- Footer -------------------------------------------------------------- */
.site-foot { background: var(--ink-deep); color: rgba(251,250,247,.72); font-family: var(--sans); padding-block: 3rem; font-size: .92rem; }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 2rem; }
.site-foot h2 { font-family: var(--sans); font-size: .9rem; font-weight: 600; color: var(--paper); margin-bottom: .8rem; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: .5rem; }
.site-foot a { color: rgba(251,250,247,.8); text-decoration: none; }
.site-foot a:hover { color: var(--brass-lift); text-decoration: underline; }
.colophon { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(251,250,247,.15); font-size: .85rem; color: rgba(251,250,247,.5); }