/* v5 hero: text, cards and handwritten notes stay as live HTML. Load after the other stylesheets. */
.hl-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  height:max(760px,56.28vw);
  min-height:0;
  padding-top:9.95vw;
  background:#0c071a;
  color:#fff;
}
.hl-hero .hl-grid{position:relative;z-index:2}
.hl-hero .hero-copy{position:relative;z-index:2}
.hl-hero .hero-proof{position:relative;z-index:2}
.hl-note,.hl-paper-note p{text-transform:uppercase;letter-spacing:.015em}
.hl-hero .hl-visual{position:absolute;inset:0;z-index:1}
.hl-photo-frame{position:absolute;inset:0;overflow:hidden;background:#100a21}
.hl-photo{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center}
.hl-photo-veil{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,#0b071c 0%,#0b071cf2 16%,#0b071cd7 31%,#0b071c73 48%,#0b071c0a 69%),
    linear-gradient(0deg,#0b071c91 0%,transparent 31%,#0b071c66 100%);
}
.hl-paper-note{
  position:absolute;
  z-index:2;
  top:14%;left:-.35%;
  width:clamp(96px,6.65%,150px);
  min-height:30%;
  padding:2.2% .65% 1.2%;
  transform:rotate(-5deg);
  background:linear-gradient(138deg,#cec6cc,#f2e9de 34%,#d7cfcd 100%);
  box-shadow:2px 8px 30px #0008;
  color:#231b36;
}
.hl-paper-note::before,.hl-paper-note::after{
  content:"";
  position:absolute;
  background:#d1c6c5a3;
  box-shadow:0 2px 8px #0003;
  height:17px;
  width:46px;
  transform:rotate(-9deg);
  top:-7px;
  left:24%;
}
.hl-paper-note::after{top:auto;bottom:-6px;left:7%;transform:rotate(7deg)}
.hl-paper-note svg{display:block;width:35px;height:32px;max-width:100%;fill:none;stroke:currentColor;stroke-width:2;transform:rotate(-10deg)}
.hl-paper-note p{
  font:400 clamp(16px,1.15vw,22px)/1.02 Caveat,cursive;
  margin-top:8px;
  overflow-wrap:normal;
}
.hl-note{
  position:absolute;
  z-index:2;
  width:11%;
  margin:0;
  color:#c89bff;
  font:400 clamp(23px,2.06vw,37px)/.9 Caveat,cursive;
  text-align:center;
  text-wrap:balance;
  transform:rotate(-12deg);
  text-shadow:0 2px 8px #120518b8;
}
.hl-note svg{
  position:absolute;
  display:block;
  width:60%;height:83px;
  fill:none;
  stroke:#d4ff43;
  stroke-width:2.3;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.hl-note-meaning{top:18%;left:44%}
.hl-note-meaning svg{top:80%;left:65%;transform:rotate(8deg)}
.hl-card-stack{position:absolute;z-index:3;right:3.5%;top:55%;width:23%;display:grid;gap:13px}
.hl-card{
  color:#fff;
  background:linear-gradient(145deg,#241437e9,#100c22ec);
  border:1px solid #c99cf270;
  border-radius:18px;
  box-shadow:0 10px 35px #0009,inset 0 1px #fff3;
  backdrop-filter:blur(12px);
}
.hl-live-card{padding:18px 19px 17px}
.hl-live-top{display:flex;gap:13px;align-items:center}
.hl-live-icon{width:48px;height:48px;flex:none;display:grid;place-items:center;border-radius:12px;background:#5c2b8caa;color:#e5cfff}
.hl-live-icon svg{width:31px;height:31px;fill:currentColor;stroke:none}
.hl-live-top strong,.hl-new-copy strong{display:block;font:700 clamp(12px,.94vw,16px)/1.2 InterHero,Arial,sans-serif}
.hl-online{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:clamp(11px,.77vw,13px);line-height:1.2;color:#e3d9ec}
.hl-online i,.hl-new-name i{display:inline-block;width:8px;height:8px;flex:none;border-radius:50%;background:#8cf738;box-shadow:0 0 7px #9ff35499}
.hl-live-bottom{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-top:13px}
.hl-live-bottom strong{display:block;font:800 clamp(26px,1.94vw,34px)/1.02 InterHero,Arial,sans-serif;letter-spacing:-.04em}
.hl-live-bottom span:not(.hl-bars){display:block;font-size:clamp(11px,.81vw,14px);line-height:1.2;margin-top:4px;white-space:nowrap;color:#e9deed}
.hl-bars{height:56px;display:flex;gap:6px;align-items:end;flex:none}
.hl-bars i{display:block;width:10px;height:37%;border-radius:4px 4px 2px 2px;background:linear-gradient(#bf92ff,#6d2fd7)}
.hl-bars i:nth-child(2){height:54%}.hl-bars i:nth-child(3){height:78%}.hl-bars i:nth-child(4){height:100%}
.hl-new-card{display:flex;align-items:center;gap:12px;padding:15px 13px}
.hl-avatar{display:grid;place-items:center;flex:none;width:47px;height:47px;background:#d4c4ef;color:#351753;border-radius:50%}
.hl-avatar svg{width:31px;height:31px;fill:currentColor;stroke:none}
.hl-new-copy{min-width:0;flex:1}
.hl-new-copy strong{margin-bottom:7px}
.hl-new-copy>span{display:block;font-size:clamp(10px,.79vw,13px);line-height:1.3;white-space:nowrap}
.hl-new-copy>span:last-child{color:#dacde3;margin:3px 0 0 15px}
.hl-new-name{display:flex!important;align-items:center;gap:6px}
.hl-new-time{flex:none;align-self:flex-start;font-size:clamp(10px,.72vw,12px);line-height:1.2;color:#eee1ef;white-space:nowrap}
.hl-polaroid{
  position:absolute;
  z-index:2;
  left:57%;bottom:-2%;
  width:19.7%;
  margin:0;
  padding:10px 10px 20px;
  background:#e6e1e1;
  color:#281734;
  box-shadow:0 13px 35px #0009;
  transform:rotate(8deg);
}
.hl-polaroid::before{content:"";position:absolute;z-index:2;left:23%;top:-10px;width:38%;height:23px;background:#d8cbacb8;transform:rotate(-8deg);box-shadow:0 2px 6px #0003}
.hl-polaroid img{display:block;width:100%;height:auto;aspect-ratio:1.7;object-fit:cover;filter:grayscale(1)}
.hl-polaroid figcaption{font:400 clamp(19px,1.37vw,26px)/1.06 Caveat,cursive;text-align:center;margin-top:9px}

@media(max-width:1100px){
  .hl-hero{height:auto;min-height:0;padding:35px 0 0}
  .hl-hero .hl-grid{position:relative;z-index:2}
  .hl-hero .hero-copy{padding-bottom:30px}
  .hl-hero .hl-visual{
    position:relative;
    inset:auto;
    z-index:1;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:start;
    gap:18px;
    width:min(100%,900px);
    margin:8px auto 0;
    padding:0 20px 45px;
  }
  .hl-photo-frame{position:relative;inset:auto;grid-column:1/-1;width:100%;height:clamp(300px,54vw,580px);border-radius:28px;overflow:hidden}
  .hl-photo{object-position:65% center}
  .hl-photo-veil{background:linear-gradient(0deg,#0b071c77,transparent 55%),linear-gradient(90deg,#0b071c44,transparent 60%)}
  .hl-paper-note,.hl-note,.hl-card-stack,.hl-polaroid{position:relative;inset:auto;top:auto;right:auto;bottom:auto;left:auto;width:auto;transform:none}
  .hl-paper-note{min-height:150px;padding:22px 20px 18px;border-radius:6px;box-shadow:0 5px 20px #0006;transform:rotate(-3deg)}
  .hl-paper-note p{font-size:clamp(21px,2.5vw,28px);line-height:1}
  .hl-note{min-height:150px;padding:16px 9px 46px;font-size:clamp(28px,3vw,38px);text-align:left;transform:rotate(-3deg)}
  .hl-note svg{width:75px;height:45px;top:auto;bottom:6px;left:45%;right:auto;transform:none}
  .hl-card-stack{grid-column:1/3;display:grid;gap:14px;align-self:stretch}
  .hl-polaroid{grid-column:3/4;align-self:start;padding:9px 9px 13px;transform:rotate(3deg)}
  .hl-polaroid img{aspect-ratio:1.14}
  .hl-polaroid figcaption{font-size:24px}
  .hl-live-top strong,.hl-new-copy strong{font-size:14px}
  .hl-online,.hl-live-bottom span:not(.hl-bars),.hl-new-copy>span,.hl-new-time{font-size:12px}
  .hl-live-bottom strong{font-size:28px}
}

@media(max-width:600px){
  .hl-hero{padding:25px 0 0}
  .hl-hero .hero-copy{padding-bottom:28px}
  .hl-hero .hero-actions .button{min-height:52px}
  .hl-hero .hl-visual{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:0 20px 38px;margin-top:0}
  .hl-photo-frame{height:auto;aspect-ratio:1.18;border-radius:18px}
  .hl-photo{object-position:68% center}
  .hl-paper-note{min-height:118px;padding:18px 14px;transform:rotate(-2deg)}
  .hl-paper-note svg{width:25px;height:24px}
  .hl-paper-note p{font-size:22px;margin-top:5px}
  .hl-paper-note::before,.hl-paper-note::after{width:32px;height:12px}
  .hl-note{min-height:118px;padding:12px 4px 37px;font-size:clamp(24px,6.5vw,30px)}
  .hl-note svg{width:58px;height:34px;left:auto;right:2px;bottom:3px}
  .hl-card-stack,.hl-polaroid{grid-column:1/-1}
  .hl-card-stack{gap:12px}
  .hl-live-card{padding:15px}
  .hl-live-top strong,.hl-new-copy strong{font-size:14px}
  .hl-online,.hl-live-bottom span:not(.hl-bars),.hl-new-copy>span,.hl-new-time{font-size:12px}
  .hl-live-bottom strong{font-size:29px}
  .hl-polaroid{width:min(70%,280px);justify-self:center;margin:8px 0 0;transform:rotate(3deg)}
  .hl-polaroid img{aspect-ratio:1.45}
  .hl-polaroid figcaption{font-size:25px}
}

@media(max-width:360px){
  .hl-hero h1{font-size:clamp(28px,8.7vw,32px)}
  .hl-bars{gap:4px}.hl-bars i{width:8px}
  .hl-new-card{gap:9px;padding:12px 10px}
  .hl-avatar{width:42px;height:42px}
  .hl-new-copy>span,.hl-new-time{font-size:11px}
}

/* The photo is the coordinate system for its notes and cards on narrow screens. */
@media(max-width:1100px){
 .hl-hero .hl-visual{display:block;position:relative;width:100%;max-width:100%;height:clamp(420px,59vw,580px);margin:0;padding:0}
 .hl-photo-frame{position:absolute;inset:0;width:100%;height:100%;border-radius:0}
 .hl-photo-veil{background:linear-gradient(180deg,#0c071a 0%,#0c071a20 20%,transparent 42%,#0c071a20 80%,#0c071a 100%)}
 .hl-note{position:absolute;min-height:0;padding:0;width:20%;font-size:clamp(24px,3.2vw,33px);text-align:center;transform:rotate(-8deg)}
 .hl-note-meaning{top:8%;left:12%;right:auto}
 .hl-note svg{position:relative;top:auto;bottom:auto;left:auto;right:auto;width:70px;height:50px;margin:4px auto 0}
 .hl-card-stack{position:absolute;width:min(43%,350px);right:5%;left:auto;top:auto;bottom:12%;gap:10px}
 .hl-paper-note{position:absolute;width:16%;left:-1%;right:auto;top:35%;min-height:0;padding:18px 8px}
 .hl-paper-note p{font-size:17px}
 .hl-polaroid{position:absolute;width:25%;left:14%;right:auto;top:auto;bottom:0;padding:8px;transform:rotate(7deg)}
 .hl-polaroid img{aspect-ratio:1.7}
 .hl-polaroid figcaption{font-size:22px}
}
@media(max-width:600px){
 .hl-hero .hl-visual{height:clamp(420px,112vw,520px)}
 .hl-paper-note,.hl-polaroid{display:none}
 .hl-note{font-size:clamp(24px,6.5vw,30px);width:28%}
 .hl-note-meaning{top:6%;left:5%}
 .hl-note svg{width:53px;height:45px}
 .hl-card-stack{width:min(78%,315px);right:5%;bottom:8%}
 .hl-live-card{padding:13px 15px}
 .hl-new-card{padding:12px}
}
@media(prefers-reduced-motion:reduce){.hl-hero *{animation:none!important;transition:none!important}}

/* Anchor the handwritten note to the proof row so its arrow identifies the final metric. */
.hl-hero .hero-proof{flex-wrap:wrap}
.hl-hero .hero-proof>.hl-note-meaning{
  position:relative;
  inset:auto;
  z-index:3;
  display:flex;
  flex:0 0 100%;
  flex-wrap:nowrap;
  justify-content:flex-end;
  width:100%;
  min-height:90px;
  margin:16px 0 0;
  padding:0 calc(7.3vw + 25px) 0 0;
  font:400 clamp(23px,2.06vw,37px)/.9 Caveat,cursive;
  text-align:center;
  transform:none;
}
.hl-hero .hero-proof>.hl-note-meaning>span{
  display:block;
  width:clamp(170px,13vw,205px);
  flex:none;
  font:inherit;
  line-height:inherit;
  color:inherit;
  white-space:normal;
  text-transform:inherit;
  transform:rotate(-8deg);
}
.hl-hero .hero-proof>.hl-note-meaning svg{
  position:absolute;
  top:calc(17px - clamp(90px,calc(4vw + 46px),123px));
  right:calc(3.66vw - 14px);
  left:auto;
  bottom:auto;
  width:110px;
  height:clamp(90px,calc(4vw + 46px),123px);
  margin:0;
  transform:none;
}
@media(min-width:601px) and (max-width:1100px){
  .hl-hero .hero-proof>.hl-note-meaning{padding-right:90px}
  .hl-hero .hero-proof>.hl-note-meaning svg{top:-87px;right:10px;height:100px}
}
@media(max-width:600px){
  .hl-hero .hl-visual{
    position:absolute;
    inset:0;
    z-index:1;
    display:block;
    width:100%;
    height:auto;
    margin:0;
    padding:0;
  }
  .hl-hero .hl-photo-frame{position:absolute;inset:0;width:100%;height:100%;border-radius:0}
  .hl-hero .hl-photo{object-position:72% center;filter:blur(1.5px);transform:scale(1.06)}
  .hl-hero .hl-photo-veil{
    background:
      linear-gradient(180deg,#0c071ae8 0%,#0c071ab8 42%,#0c071ade 100%),
      linear-gradient(90deg,#0c071a9c,#0c071a55);
  }
  .hl-hero .hl-grid,.hl-hero .hero-copy{position:relative;z-index:2}
  .hl-hero .hero-proof>.hl-note-meaning{min-height:100px;margin-top:19px;padding-right:80px;font:400 clamp(24px,6.5vw,30px)/.9 Caveat,cursive}
  .hl-hero .hero-proof>.hl-note-meaning>span{width:min(190px,60%);text-align:right}
  .hl-hero .hero-proof>.hl-note-meaning svg{top:-100px;right:2px;width:110px;height:110px}
  .hl-hero .hl-card-stack{display:none}
}
@media(max-width:380px){
  .hl-hero .hero-proof strong{font-size:18px;letter-spacing:-.04em}
}
@media(max-width:360px){
  .hl-hero .hero-proof>.hl-note-meaning svg{right:-7px}
}
body>[data-inline-svg-sprites]{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}

/* Intermediate widths keep the photograph behind the opening, while the
   cards occupy their own space below the copy. Desktop and phone rules stay as-is. */
@media(min-width:601px) and (max-width:1100px){
  .hl-hero{padding-bottom:clamp(300px,calc(32vw + 60px),410px)}
  .hl-hero .hl-visual{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;padding:0}
  .hl-hero .hl-photo-frame{position:absolute;inset:0;width:100%;height:100%;border-radius:0}
  .hl-hero .hl-photo{object-position:70% center;filter:none}
  .hl-hero .hl-photo-veil{
    background:linear-gradient(180deg,#0c071a9e 0%,#0c071a92 55%,#0c071a82 100%),
      linear-gradient(90deg,#0c071ac2 0%,#0c071a73 45%,transparent 100%);
  }
  .hl-hero .hl-card-stack{position:absolute;top:auto;right:5%;bottom:35px;width:min(43%,350px)}
  .hl-hero .hl-paper-note{display:none}
  .hl-hero .hl-polaroid{position:absolute;top:auto;bottom:30px;left:8%;width:22%}
}