/* Dam Square Escorts: the home hero, photos first.
   Linked only from the home page (and its design option). Same steel system as
   site.css: Khand / Golos Text / IBM Plex Mono, #101215 ground, one signal red.
   Nothing moves; hover only changes colour. */

/* ================================================================ shared */
.hx{position:relative;isolation:isolate;overflow:hidden;background:var(--bg)}
.hx-ph{position:relative;display:block;overflow:hidden;background:var(--bg3);color:var(--ink);text-decoration:none;min-width:0}
.hx-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.hx-ph::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(223,234,239,.1)}
.hx-ph:hover::after{box-shadow:inset 0 0 0 1px var(--cold)}
.hx-ph:focus-visible{outline:2px solid var(--cold);outline-offset:-2px}
/* frame number: a mono chip, generated, so it is not page copy */
.hx-board,.hx-wall{counter-reset:hx}
.hx-ph{counter-increment:hx}
.hx-ph::before{content:counter(hx,decimal-leading-zero);position:absolute;top:.6rem;left:.6rem;z-index:2;padding:.3rem .45rem;border-radius:1px;
  background:rgba(16,18,21,.78);box-shadow:inset 0 0 0 1px var(--line2);font:500 .58rem/1 var(--mono);letter-spacing:.12em;color:var(--cold)}
.hx-lead::before{background:var(--sig);color:#101215;box-shadow:none;font-weight:600}
.hx-cap{position:absolute;left:.75rem;right:.75rem;bottom:.7rem;z-index:2;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.15rem .5rem}
.hx-cap b{font:600 1.3rem/1 var(--head);letter-spacing:.04em;text-transform:uppercase;color:var(--ink);text-shadow:0 1px 10px rgba(16,18,21,.6)}
.hx-cap i{font:500 .58rem/1.2 var(--mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--cold)}
.hx-ph:hover .hx-cap b{color:#fff}
.hx-ph:hover .hx-cap i{color:var(--sig)}

/* the headline: one huge line, then the promise on a solid signal-red slab */
.hx-h1{font:600 var(--fs)/.84 var(--head);letter-spacing:-.005em;text-transform:uppercase;color:var(--ink)}
.hx-h1 .h1a,.hx-h1 .h1b{display:inline}
.hx-h1 .l2{display:table;margin-top:.2em;padding:.17em .42em .1em;background:var(--sig);color:#101215;font:600 .36em/1 var(--head);letter-spacing:.12em;text-shadow:none}
.hx-line{display:flex;align-items:baseline;gap:.7rem;max-width:40ch;color:var(--mut);font-size:clamp(1rem,1.15vw,1.08rem);line-height:1.6}
.hx-line::before{content:"";flex:none;width:22px;height:2px;background:var(--sig);transform:translateY(-.3em)}
.hx-cta{justify-content:flex-start;margin-top:0}
.hx-cta>a{min-height:52px}

/* ================================================================ A: the wall */
@media (min-width:1024px){
  .hx-w{--fs:clamp(4.6rem,8.4vw,9.1rem);display:grid}
  .hx-w>.hx-copy,.hx-w>.hx-wall{grid-area:1/1}
  .hx-w .hx-wall{position:relative;display:grid;grid-template-columns:1fr 1fr 2.3fr 1fr 1fr;grid-template-rows:100%;gap:6px;
    height:clamp(600px,calc(100svh - var(--hh)),980px)}
  .hx-w .hx-ph{grid-row:1}
  .hx-w .hx-m{grid-column:1}.hx-w .hx-s{grid-column:2}.hx-w .hx-lead{grid-column:3}.hx-w .hx-e{grid-column:4}.hx-w .hx-c{grid-column:5}
  .hx-w .hx-x{display:none}
  /* the words sit on a dark floor that rises into the portraits */
  .hx-w .hx-wall::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64%;z-index:2;pointer-events:none;
    background:linear-gradient(0deg,rgba(16,18,21,.98) 0,rgba(16,18,21,.9) 26%,rgba(16,18,21,.5) 58%,rgba(16,18,21,0))}
  .hx-w .hx-ph::after{background:linear-gradient(180deg,rgba(16,18,21,.8),rgba(16,18,21,0) 22%)}
  .hx-w .hx-lead::after{box-shadow:inset 0 3px 0 var(--sig),inset 0 0 0 1px rgba(224,80,60,.5)}
  .hx-w .hx-ph::before{left:auto;right:.6rem}
  .hx-w .hx-cap{top:.75rem;bottom:auto;flex-direction:column;align-items:flex-start;gap:.35rem}
  .hx-w .hx-lead .hx-cap b{font-size:1.75rem}
  .hx-w .hx-copy{align-self:end;position:relative;z-index:3;width:100%;max-width:var(--max);margin-inline:auto;padding:0 var(--g) clamp(1.6rem,3.4vh,2.6rem)}
  .hx-w .hx-h1{text-shadow:0 2px 34px rgba(16,18,21,.55)}
  .hx-w .hx-act{display:flex;align-items:center;justify-content:space-between;gap:1rem 2rem;margin-top:clamp(1.1rem,2.4vh,1.6rem)}
  .hx-w .hx-line{flex:0 1 34ch}
  .hx-w .hx-cta{flex:none;flex-wrap:nowrap;gap:.6rem}
}
@media (min-width:1600px){
  .hx-w .hx-wall{grid-template-columns:1fr 1fr 1fr 2.3fr 1fr 1fr 1fr}
  .hx-w .hx-x{display:block}
  .hx-w .hx-l{grid-column:1}.hx-w .hx-m{grid-column:2}.hx-w .hx-s{grid-column:3}.hx-w .hx-lead{grid-column:4}
  .hx-w .hx-e{grid-column:5}.hx-w .hx-c{grid-column:6}.hx-w .hx-r{grid-column:7}
}
@media (min-width:1024px) and (max-width:1199px){
  .hx-w .hx-act{flex-wrap:wrap}
}
/* phone and tablet: the lead portrait edge to edge with the headline on it, four more beneath */
@media (max-width:1023px){
  .hx-w{--fs:clamp(3rem,14.6vw,6.6rem);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:6px;padding:0 var(--g) 1.8rem}
  .hx-w .hx-copy,.hx-w .hx-wall,.hx-w .hx-act{display:contents}
  .hx-w .hx-x{display:none}
  .hx-w .hx-lead{grid-column:1/-1;grid-row:1;height:clamp(420px,62svh,760px);margin-inline:calc(-1 * var(--g))}
  .hx-w .hx-lead img{object-position:50% 30%}
  .hx-w .hx-lead::after{box-shadow:none;background:linear-gradient(180deg,rgba(16,18,21,.45),rgba(16,18,21,0) 18%,rgba(16,18,21,0) 40%,rgba(16,18,21,.7) 66%,rgba(16,18,21,.97) 96%)}
  .hx-w .hx-lead::before{top:.8rem;left:var(--g)}
  .hx-w .hx-lead .hx-cap{top:.8rem;bottom:auto;left:auto;right:var(--g);flex-direction:column;align-items:flex-end;gap:.3rem}
  .hx-w .hx-lead .hx-cap b{font-size:1.45rem}
  .hx-w .hx-h1{grid-column:1/-1;grid-row:1;align-self:end;position:relative;z-index:3;padding-bottom:1rem;text-shadow:0 2px 24px rgba(16,18,21,.7)}
  .hx-w .hx-h1 .h1a,.hx-w .hx-h1 .h1b{display:block}
  .hx-w .hx-h1 .l2{font-size:.4em;margin-top:.26em}
  .hx-w .hx-t{grid-row:2;aspect-ratio:3/4.3;margin-top:6px}
  .hx-w .hx-t img{object-position:50% 12%}
  .hx-w .hx-t::after{background:linear-gradient(180deg,rgba(16,18,21,0) 55%,rgba(16,18,21,.85))}
  .hx-w .hx-m{grid-column:1}.hx-w .hx-s{grid-column:2}.hx-w .hx-e{grid-column:3}.hx-w .hx-c{grid-column:4}
  .hx-w .hx-t .hx-cap{left:.45rem;right:.3rem;bottom:.45rem}
  .hx-w .hx-t .hx-cap b{font-size:1rem}
  .hx-w .hx-t .hx-cap i{display:none}
  .hx-w .hx-t::before{top:.35rem;left:.35rem;padding:.24rem .32rem;font-size:.52rem}
  .hx-w .hx-line{grid-column:1/-1;grid-row:3;margin-top:1.2rem;max-width:none}
  .hx-w .hx-cta{grid-column:1/-1;grid-row:4;margin-top:1.1rem}
}
@media (min-width:640px) and (max-width:1023px){
  .hx-w .hx-lead{height:clamp(520px,64svh,820px)}
  .hx-w .hx-t{aspect-ratio:3/4}
  .hx-w .hx-t .hx-cap b{font-size:1.25rem}
}

/* ================================================================ B: the board */
.hx-a .hx-board{display:grid;grid-template-columns:1fr 2.1fr 1fr;grid-template-rows:1fr 1fr;gap:8px}
.hx-a .hx-lead{grid-column:2;grid-row:1/3}
.hx-a .hx-lead::after{box-shadow:inset 0 3px 0 var(--sig),inset 0 0 0 1px rgba(224,80,60,.5)}
.hx-a .hx-ph::after{background:linear-gradient(180deg,rgba(16,18,21,0) 60%,rgba(16,18,21,.86))}
.hx-a .hx-lead .hx-cap b{font-size:1.9rem}
.hx-a .hx-s1{grid-column:1;grid-row:1}
.hx-a .hx-s2{grid-column:1;grid-row:2}
.hx-a .hx-s3{grid-column:3;grid-row:1}
.hx-a .hx-s4{grid-column:3;grid-row:2}
.hx-a .hx-line{margin-top:1.4rem}
.hx-a .hx-cta{margin-top:1.5rem}

@media (min-width:900px){
  .hx-a{--H:clamp(560px,min(calc(100svh - var(--hh) - 40px),64vw),860px);--fs:clamp(4.6rem,9.2vw,9.6rem)}
  .hx-a .hx-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:clamp(1rem,2vw,2rem);
    padding:20px 0 20px max(var(--g),calc((100% - var(--max))/2 + var(--g)))}
  /* the headline is laid over the first column of portraits on purpose: the whole word crosses */
  .hx-a .hx-copy{position:relative;z-index:3;min-width:0}
  .hx-a .hx-h1{width:max-content;max-width:none;text-shadow:0 2px 30px rgba(16,18,21,.75)}
  .hx-a .hx-h1 .h1a,.hx-a .hx-h1 .h1b{display:block}
  .hx-a .hx-h1 .l2{white-space:nowrap;font-size:.32em}
  /* names on top of the frames, so the headline crossing the first column never lands on one */
  .hx-a .hx-cap{top:.75rem;bottom:auto;flex-direction:column;align-items:flex-start;gap:.35rem}
  .hx-a .hx-ph::before{left:auto;right:.6rem}
  .hx-a .hx-ph::after{background:linear-gradient(180deg,rgba(16,18,21,.8),rgba(16,18,21,0) 24%)}
  .hx-a .hx-s2 .hx-cap{top:auto;bottom:.75rem}
  .hx-a .hx-line{max-width:min(100%,26rem)}
  .hx-a .hx-cta{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;max-width:min(100%,27rem)}
  .hx-a .hx-cta>a{padding-inline:1rem;letter-spacing:.12em!important}
  .hx-a .hx-cta>a:last-child{grid-column:1/-1}
  .hx-a .hx-board{position:relative;z-index:1;height:var(--H);width:calc(var(--H) * 1.1)}
  .hx-a .hx-in::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:repeating-linear-gradient(90deg,var(--line2) 0 22px,transparent 22px 40px)}
  /* the two portraits under the headline sit back a little so the words stay readable */
  .hx-a .hx-s1::after{background:linear-gradient(90deg,rgba(16,18,21,.6),rgba(16,18,21,.2)),linear-gradient(180deg,rgba(16,18,21,.8),rgba(16,18,21,0) 24%)}
  .hx-a .hx-s2::after{background:linear-gradient(90deg,rgba(16,18,21,.6),rgba(16,18,21,.2)),linear-gradient(0deg,rgba(16,18,21,.8),rgba(16,18,21,0) 24%)}
}
@media (min-width:900px) and (max-width:1180px){
  .hx-a{--fs:clamp(4rem,8.2vw,6.4rem)}
  .hx-a .hx-board{width:calc(var(--H) * .98)}
}
@media (max-width:899px){
  .hx-a{--fs:clamp(3rem,14.6vw,5.6rem)}
  .hx-a .hx-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:6px;padding:0 var(--g) 1.8rem}
  .hx-a .hx-copy,.hx-a .hx-board{display:contents}
  .hx-a .hx-lead{grid-column:1/-1;grid-row:1;height:clamp(420px,62svh,700px);margin-inline:calc(-1 * var(--g))}
  .hx-a .hx-lead img{object-position:50% 18%}
  .hx-a .hx-lead::after{box-shadow:none;background:linear-gradient(180deg,rgba(16,18,21,.35),rgba(16,18,21,0) 18%,rgba(16,18,21,0) 40%,rgba(16,18,21,.7) 66%,rgba(16,18,21,.97) 96%)}
  .hx-a .hx-lead::before{top:.8rem;left:var(--g)}
  .hx-a .hx-lead .hx-cap{top:.8rem;bottom:auto;left:auto;right:var(--g);flex-direction:column;align-items:flex-end;gap:.3rem}
  .hx-a .hx-lead .hx-cap b{font-size:1.45rem}
  .hx-a .hx-h1{grid-column:1/-1;grid-row:1;align-self:end;position:relative;z-index:3;padding-bottom:1rem;text-shadow:0 2px 24px rgba(16,18,21,.7)}
  .hx-a .hx-h1 .h1a,.hx-a .hx-h1 .h1b{display:block}
  .hx-a .hx-h1 .l2{font-size:.4em;margin-top:.26em}
  .hx-a .hx-s1,.hx-a .hx-s2,.hx-a .hx-s3,.hx-a .hx-s4{grid-row:2;aspect-ratio:3/4.3;margin-top:6px}
  .hx-a .hx-s1{grid-column:1}.hx-a .hx-s2{grid-column:2}.hx-a .hx-s3{grid-column:3}.hx-a .hx-s4{grid-column:4}
  .hx-a .hx-board .hx-ph:not(.hx-lead) .hx-cap{left:.45rem;right:.3rem;bottom:.45rem}
  .hx-a .hx-board .hx-ph:not(.hx-lead) .hx-cap b{font-size:1rem}
  .hx-a .hx-board .hx-ph:not(.hx-lead) .hx-cap i{display:none}
  .hx-a .hx-board .hx-ph:not(.hx-lead)::before{top:.35rem;left:.35rem;padding:.24rem .32rem;font-size:.52rem}
  .hx-a .hx-line{grid-column:1/-1;grid-row:3;margin-top:1.2rem;max-width:none}
  .hx-a .hx-cta{grid-column:1/-1;grid-row:4;margin-top:1.1rem}
}

/* ================================================================ the introduction, moved under the roster */
.home-intro .container{max-width:var(--max)}
.home-intro-text{max-width:74ch;padding-left:clamp(1rem,2.4vw,1.6rem);border-left:2px solid var(--sig);color:var(--mut);font-size:clamp(1.02rem,1.25vw,1.14rem);line-height:1.8}
.home-intro-text strong{color:var(--ink);font-weight:500}
.home-intro-text a{color:var(--cold)}