/* Josefin Sans and Space Grotesk are loaded from site/fonts only. No outside servers. */
@font-face { font-family: "Josefin Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/josefin-sans-latin-600.woff2") format("woff2"); 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: "Josefin Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/josefin-sans-latin-ext-600.woff2") format("woff2"); 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: "Space Grotesk"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/space-grotesk-latin-400.woff2") format("woff2"); 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: "Space Grotesk"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/space-grotesk-latin-ext-400.woff2") format("woff2"); 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: "Space Grotesk"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/space-grotesk-latin-600.woff2") format("woff2"); 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: "Space Grotesk"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/space-grotesk-latin-ext-600.woff2") format("woff2"); 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; }

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.125rem;
  line-height: 1.75;
  color: #efe6cf;
  background-color: #222;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.page-about, .page-guitarist { background-image: url("images/prawnlake.jpg"); }
.page-mixing, .page-lessons { background-image: url("images/mixingdesk.jpg"); }
.page-home, .page-contact { background-image: url("images/nightsky.jpg"); }

header, main, footer { max-width: 50rem; margin: 1rem auto; padding: 0 1rem; }
h1, h2 { color: #c9a64d; font-family: "Josefin Sans", sans-serif; line-height: 1.2; font-weight: 600; }
h1 { margin-top: 0; }
a { color: #c9a64d; }
.box, nav, footer { background: rgba(0, 0, 0, 0.55); border-radius: 12px; }
nav { font-family: "Josefin Sans", sans-serif; font-weight: 600; }
.box { padding: 2rem; }
nav { padding: 1rem 1.5rem; }
.subnav-bar { margin-top: .5rem; padding: .5rem 1rem; font-size: .95rem; }
.subnav-bar ul { justify-content: center; gap: 1.5rem; }
.subnav-bar .tape { position: static; display: inline-block; transform: rotate(-4deg); margin-left: .4rem; font-size: .6rem; vertical-align: middle; }
footer { width: calc(100% - 2rem); max-width: 48rem; padding: 1.5rem 2rem; font-size: .9rem; }
footer p { margin: .25rem 0; }

nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; justify-content: space-between; gap: .25rem; }
nav li { white-space: nowrap; }
nav a { text-decoration: none; }
nav a[aria-current="page"] { font-weight: 600; text-decoration: underline; }
.box ul { padding-left: 1.2rem; }

table { border-collapse: collapse; width: 100%; margin: 1.5rem 0; }
th, td { text-align: left; padding: .5rem; border-bottom: 1px solid rgba(255,255,255,.3); }
th { font-family: "Josefin Sans", sans-serif; font-weight: 600; }

.video { position: relative; aspect-ratio: 16 / 9; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 12px; }
.about-photo { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto 1.5rem; border-radius: 12px; }
.photo-slot { min-height: 12rem; display: flex; align-items: center; justify-content: center; margin-top: 1.5rem; }
.missing { outline: 2px dashed #fff200; color: #fff200; padding: .25rem; }

.big-buttons { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.big { display: block; padding: 2rem 1rem; text-align: center; font-size: 1.5rem; font-family: "Josefin Sans", sans-serif; font-weight: 600; background: rgba(0,0,0,.55); border-radius: 12px; text-decoration: none; color: #c9a64d; }

.inop-item { position: relative; display: inline-block; }
.btn-disabled { opacity: .6; cursor: not-allowed; }
.tape { position: absolute; left: -.4rem; right: -.4rem; top: 50%; transform: translateY(-50%) rotate(-4deg); background: #ccc; color: #000; text-align: center; font-weight: bold; font-size: .75rem; letter-spacing: .1em; padding: 0 .25rem; pointer-events: none; }

.social { list-style: none; padding: 0; display: flex; flex-wrap: nowrap; justify-content: space-between; gap: .5rem 1rem; }

@media (max-width: 40rem) { .social { display: grid; grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 40rem) { .big-buttons { flex-direction: row; } .big { flex: 1; } }
@media (max-width: 30rem) { .box { padding: 1.25rem; } nav { padding: 1rem .5rem; font-size: clamp(.62rem, 3.1vw, 1.125rem); } .subnav-bar { padding: .5rem; font-size: clamp(.6rem, 3vw, .95rem); } }
/* iOS ignores fixed attachment */
@supports (-webkit-touch-callout: none) { body { background-attachment: scroll; } }

.video-load { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 12px; background: rgba(0,0,0,.5); color: #c9a64d; font: inherit; font-size: 1.25rem; font-weight: 600; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; }
.play-icon { width: 4.5rem; height: 4.5rem; }
.video-load:hover .play-icon circle, .video-load:active .play-icon circle, .video-load:focus-visible .play-icon circle { stroke: #e0254b; }
.video-load:hover .play-icon polygon, .video-load:active .play-icon polygon, .video-load:focus-visible .play-icon polygon { fill: #e0254b; }
.video-load:hover, .video-load:active, .video-load:focus-visible { color: #e0254b; -webkit-text-fill-color: #e0254b; background: rgba(0,0,0,.55); -webkit-background-clip: border-box; background-clip: border-box; }
button { font-weight: 600; }

/* Faint metallic sheen: diagonal gold gradient on text. Flat gold is the fallback. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  h1, h2, th, a:not(.big), .big span, .page-home .box p {
    background-image: linear-gradient(135deg, #e3c777, #c9a64d, #a98a3a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  .big span { display: inline-block; }
  .video-load {
    background: linear-gradient(135deg, #e3c777, #c9a64d, #a98a3a), rgba(0,0,0,.55);
    -webkit-background-clip: text, border-box;
    background-clip: text, border-box;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

/* Red accent, like an amplifier LED */
nav a[aria-current="page"]::before {
  content: "";
  display: inline-block;
  width: .5em;
  height: .5em;
  margin-right: .5em;
  border-radius: 50%;
  vertical-align: middle;
  background: #e0254b;
  box-shadow: 0 0 .45em .1em rgba(224, 37, 75, .6);
}
a:hover, a:active, a:focus-visible { color: #e0254b; }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  a:not(.big):hover, a:not(.big):active, a:not(.big):focus-visible,
  .big:hover span, .big:active span, .big:focus-visible span {
    background-image: none;
    color: #e0254b;
    -webkit-text-fill-color: #e0254b;
  }
}

/* Home heading: large name with a thin cream outline, roomy centred box */
.page-home h1 {
  font-family: "Space Grotesk", sans-serif;
  display: inline-block;
  margin: 0 0 1.75rem;
  font-size: clamp(3rem, 11vw, 6rem);
  letter-spacing: .03em;
  line-height: 1.1;
}
.page-home .box { padding: 3.5rem 2rem; text-align: center; border: 2px solid rgba(239, 230, 207, 0.7); border-radius: 8px; }
.page-home .box p { margin: 0 0 .5rem; font-size: 1.25rem; color: #c9a64d; }
.page-home .box p:last-child { margin-bottom: 0; }
.page-home header { margin-bottom: 1.5rem; }
.page-home main { margin-top: 1.5rem; }
.page-home .big-buttons { margin-top: 1.5rem; }
@media (max-width: 30rem) { .page-home .box { padding: 2.25rem 1.25rem; } }