/* John Debo. Same look as the WordPress/Elementor site it replaces (Oct 2026): black,
   Helvetica, one big photo with the name in dark grey, a big white menu that stays at
   the top, round social icons, light grey text. */
:root{
  --black:#000; --white:#fff; --text:#dadada; --dim:#d3d3d3; --name:#313131; --line:#2a2a2a;
  --font:"Helvetica Neue", Helvetica, Arial, sans-serif;
  --hero-h:768px;
  /* The header stack over the photo: name, menu, icons (fixed sizes so the photo height
     can be filled exactly). */
  --name-top:30px; --name-size:99px; --nav-size:39px; --nav-pad:20px; --nav-h:46px;
  --soc:50px; --soc-icon:20px; --soc-gap:20px; --soc-top:20px;
  --wrap:min(1140px, 100% - 40px);
}
@media (max-width:1024px){:root{--name-size:80px;--nav-size:32px}}
@media (max-width:767px){:root{--name-size:51px;--nav-size:19px;--nav-h:30px;--nav-pad:14px;--soc:34px;--soc-icon:15px;--soc-gap:11px;--soc-top:12px}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--nav-h) + 30px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;position:relative;background:var(--black);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.5;letter-spacing:-.5px;-webkit-font-smoothing:antialiased}
img,iframe{display:block;max-width:100%}
a{color:inherit}
h1,h2,p,ul{margin:0}
ul{padding:0;list-style:none}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--white);color:var(--black);padding:10px 16px;border-radius:6px}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--white);outline-offset:3px}

/* ---- Photo header ---- */
.hero{position:absolute;top:0;left:0;right:0;height:var(--hero-h);overflow:hidden;background:#111}
.hero__img{width:100%;height:100%;object-fit:cover}
.name{position:relative;margin:0;padding:var(--name-top) 10px 0;font-size:var(--name-size);font-weight:600;line-height:1;letter-spacing:-.05em;color:var(--name);white-space:nowrap}
@media (max-width:767px){.name{letter-spacing:-.06em}}

/* The menu stays at the top while scrolling; once it sticks it gets a dark backing so it
   reads over the text (site.js adds .is-stuck). */
.nav{position:sticky;top:0;z-index:20;padding:var(--nav-pad) 10px 0}
.nav::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;pointer-events:none}
.nav.is-stuck::before{opacity:1}
.nav__links{position:relative;display:flex;justify-content:center;gap:0 clamp(18px,2.4vw,40px);height:var(--nav-h);align-items:center}
.nav__links a{display:block;font-size:var(--nav-size);font-weight:600;line-height:1;letter-spacing:-.5px;color:var(--white);text-decoration:none}
.nav__links a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.15em}
.nav.is-stuck{padding-bottom:12px}
.nav.is-stuck .nav__links{height:auto;min-height:var(--nav-h)}
@media (max-width:767px){.nav__links{gap:0 26px}.nav__links a{letter-spacing:-.7px}}

.socials{position:relative;display:flex;justify-content:center;flex-wrap:wrap;gap:8px var(--soc-gap);margin-top:var(--soc-top);padding:0 10px}
.socials a{display:grid;place-items:center;width:var(--soc);height:var(--soc);border-radius:50%;background:var(--black);color:var(--white)}
.socials svg{width:var(--soc-icon);height:var(--soc-icon)}
.socials a:hover{background:#262626}

/* Fills the rest of the photo so the page starts below it. */
.hero-space{height:calc(var(--hero-h) - var(--name-top) - var(--name-size) - var(--nav-pad) - var(--nav-h) - var(--soc-top) - var(--soc))}

/* ---- Sections ---- */
.section{width:var(--wrap);margin:0 auto;padding-top:48px}
.section h2{font-size:32px;font-weight:600;line-height:1.2;letter-spacing:-.5px;color:var(--white);margin-bottom:16px}
.about p + p{margin-top:1em}
.players{display:flex;flex-direction:column;gap:20px}
.player{width:100%;border:0;background:#111}
.player--video{aspect-ratio:16/9;height:auto}

/* ---- Contact and footer ---- */
.foot{width:var(--wrap);margin:48px auto 0;padding-bottom:24px;text-align:center}
.foot hr{border:0;border-top:1px solid var(--line);margin:0 0 20px}
.foot__contact{font-size:14px;color:var(--dim)}
.foot__contact a{color:var(--white)}
.foot__copy{margin-top:6px;font-size:12px;color:#8a8a8a}

/* Press feedback, with fallbacks for reduced motion / transparency / more contrast. */
.nav__links a:active,.socials a:active{transform:scale(.97)}
@media (prefers-reduced-motion:no-preference){
  .socials a{transition:background-color .2s ease,transform .1s ease-out}
  .nav::before{transition:opacity .25s ease}
}
@media (prefers-reduced-motion:reduce){.nav__links a:active,.socials a:active{transform:none;opacity:.7}}
@media (prefers-reduced-transparency:reduce){.nav::before{background:var(--black);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (prefers-contrast:more){:root{--text:#fff;--dim:#fff}.nav::before{background:var(--black)}.socials a{outline:1px solid #888}}

/* Focal point for the photo (set in the admin), as classes because the CSP blocks inline styles. */
.hero__img.fx-0{--fx:0%}.hero__img.fx-5{--fx:5%}.hero__img.fx-10{--fx:10%}.hero__img.fx-15{--fx:15%}.hero__img.fx-20{--fx:20%}.hero__img.fx-25{--fx:25%}.hero__img.fx-30{--fx:30%}.hero__img.fx-35{--fx:35%}.hero__img.fx-40{--fx:40%}.hero__img.fx-45{--fx:45%}.hero__img.fx-50{--fx:50%}.hero__img.fx-55{--fx:55%}.hero__img.fx-60{--fx:60%}.hero__img.fx-65{--fx:65%}.hero__img.fx-70{--fx:70%}.hero__img.fx-75{--fx:75%}.hero__img.fx-80{--fx:80%}.hero__img.fx-85{--fx:85%}.hero__img.fx-90{--fx:90%}.hero__img.fx-95{--fx:95%}.hero__img.fx-100{--fx:100%}
.hero__img.fy-0{--fy:0%}.hero__img.fy-5{--fy:5%}.hero__img.fy-10{--fy:10%}.hero__img.fy-15{--fy:15%}.hero__img.fy-20{--fy:20%}.hero__img.fy-25{--fy:25%}.hero__img.fy-30{--fy:30%}.hero__img.fy-35{--fy:35%}.hero__img.fy-40{--fy:40%}.hero__img.fy-45{--fy:45%}.hero__img.fy-50{--fy:50%}.hero__img.fy-55{--fy:55%}.hero__img.fy-60{--fy:60%}.hero__img.fy-65{--fy:65%}.hero__img.fy-70{--fy:70%}.hero__img.fy-75{--fy:75%}.hero__img.fy-80{--fy:80%}.hero__img.fy-85{--fy:85%}.hero__img.fy-90{--fy:90%}.hero__img.fy-95{--fy:95%}.hero__img.fy-100{--fy:100%}
.hero__img{object-position:var(--fx,50%) var(--fy,50%)}

/* John's Berklee mark is tall and narrow: keep its shape inside the round icon. */
.socials .icon-berklee{width:auto;height:var(--soc-icon)}
.lbtn__icon .icon-berklee{width:auto;height:22px}

/* The name over the photo uses the difference blend (like the Chrome hero): white text that
   inverts the photo under it, so it reads on both the light and dark parts. With "more
   contrast" it is plain white with a shadow instead. */
.name{color:var(--white);mix-blend-mode:difference}
@media (prefers-contrast:more){.name{mix-blend-mode:normal;text-shadow:0 1px 12px rgba(0,0,0,.8)}}