/* ============================================================================
   vancouvermusicals.com — shared stylesheet for every page
   Identity: the legacy VMTC theatre-marquee (animated bulb logo, neon signage).
   Palette sampled from logo-animated3.gif.

   ⛔ CTA COLOUR IS RESERVED. --cta (#e01070, hue 332) appears ONLY on .ticket.
      The identity occupies hues 31 (orange), 54 (bulb), 199 (cyan), 207 (blue),
      so 332 is a hue the brand never uses — that is the whole point (rule 19).
      Do NOT use --cta on headings, ranks, bonuses, ribbons, links, or borders.

   ⛔ NEVER use the `padding` SHORTHAND on a class that is combined with .wrap.
      .wrap owns the horizontal gutter; a shorthand resets it and the block goes
      flush to the screen edge on mobile. Set padding-top / padding-bottom only.
   ============================================================================ */

@font-face{font-family:Lato;src:url(/assets/fonts/lato-400.woff2)format("woff2");
  font-weight:400;font-display:swap}
@font-face{font-family:Lato;src:url(/assets/fonts/lato-700.woff2)format("woff2");
  font-weight:700;font-display:swap}
@font-face{font-family:Oswald;src:url(/assets/fonts/oswald-var.woff2)format("woff2");
  font-weight:200 700;font-display:swap}

:root{
  --navy:#001013;          /* legacy header black */
  --navy-2:#07222b;
  --blue:#115e9e;          /* marquee blue — primary accent */
  --blue-deep:#093e66;
  --orange:#ff8400;        /* marquee bulb letters */
  --cyan:#00aeff;
  --bulb:#fff280;
  --ink:#12212a;
  --ink-2:#4a5f6b;
  --line:#d8e2ea;
  --paper:#fff;
  --paper-2:#f2f6f9;
  --cta:#e01070;           /* RESERVED — .ticket only */
  --cta-dark:#b60c5a;
  --wrap:1120px;
  --gut:20px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font:16px/1.65 Lato,-apple-system,system-ui,Segoe UI,sans-serif;
  overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue-deep)}
a:hover{color:var(--blue)}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}

/* ---------------------------------------------------------------- headings */
h1,h2,h3,h4{font-family:Oswald,Oswald-fallback,Impact,sans-serif;font-weight:600;
  line-height:1.14;letter-spacing:.005em;color:var(--navy);margin:0}
h1{font-size:clamp(27px,5.4vw,42px);text-transform:none}
h2{font-size:clamp(22px,3.7vw,30px);padding-top:0}
h3{font-size:clamp(18px,2.6vw,21px)}
h4{font-size:17px}
p{margin:0 0 15px}
section{padding-top:26px}

/* Neon tube underline under H2s — the signage half of the motif. Sits UNDER
   the heading so nothing is ever rendered above a heading (rule 5). */
.h2neon{position:relative;padding-bottom:11px;margin-bottom:14px}
.h2neon::after{content:"";position:absolute;left:0;bottom:0;width:74px;height:3px;
  border-radius:3px;background:var(--cyan);
  box-shadow:0 0 7px rgba(0,174,255,.85),0 0 15px rgba(0,174,255,.45)}

/* ------------------------------------------------------- the bulb-rule motif
   A row of evenly spaced marquee bulbs, used as the section divider and as the
   separator between toplist rows. This is the repeating motif derived from the
   logo's bulb lettering — it replaces card borders entirely. */
.bulbrule{height:9px;margin:22px 0;border:0;
  background-image:radial-gradient(circle at center,var(--orange) 0 2.6px,rgba(255,132,0,.22) 2.6px 3.4px,transparent 3.5px);
  background-size:17px 9px;background-repeat:repeat-x;background-position:center}
.bulbrule--tight{margin:13px 0}
.bulbrule--dim{opacity:.5}

/* -------------------------------------------------------------- masthead */
.mast{background:var(--navy);
  background-image:radial-gradient(circle at 12% 120%,rgba(17,94,158,.5),transparent 55%),
                   radial-gradient(circle at 88% -30%,rgba(0,174,255,.18),transparent 50%)}
.mast .wrap{display:flex;align-items:center;gap:18px;
  padding-top:13px;padding-bottom:13px}
.mast__logo{flex:0 0 auto}
/* Doubled from the original clamp(196px,30vw,268px). The upper bound is the
   literal 2x (536px). The lower bound cannot be 2x: 392px would overflow a
   360px viewport, so mobile takes the largest width that still leaves room for
   the burger and the wrap gutters (230 + 18 gap + 41 burger + 40 gutters = 329). */
.mast__logo img{width:clamp(230px,37vw,536px)}
.nav{margin-left:auto;display:flex;align-items:center;gap:22px}
.nav a{color:#cfe6f2;text-decoration:none;font-family:Oswald,sans-serif;font-weight:500;
  font-size:14.5px;letter-spacing:.055em;text-transform:uppercase;white-space:nowrap}
.nav a:hover{color:#fff}
.burger{display:none;margin-left:auto;background:none;border:0;cursor:pointer;
  padding:8px;line-height:0}
.burger span{display:block;width:25px;height:2.5px;background:#cfe6f2;margin:5px 0;
  border-radius:2px}

/* --------------------------------------------------------------- the hero
   Compact for BOTH views so the first toplist row clears a 360x640 fold.
   padding-top/bottom only — never the shorthand (see header note). */
.hero{padding-top:20px;padding-bottom:4px}

/* Two columns on desktop so the byline occupies what was dead space to the
   right of the lede, instead of sitting under it and pushing the toplist down.
   Nothing new is introduced here: SECTION-RULES 1.1 forbids a banner or stat
   splash before the toplist, so this only relocates content that already
   existed. Single column below 860px. No `padding` shorthand: this class is
   combined with .wrap, which owns the horizontal gutter. */
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) 306px;
  gap:20px 38px;align-items:start}
.hero__main{min-width:0}

/* The lede no longer needs a character cap; the grid column constrains it. */
.lede{font-size:17.5px;color:var(--ink-2);margin:9px 0 0}
.jump{display:inline-block;margin-top:12px;font-family:Oswald,sans-serif;
  font-weight:500;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--blue-deep);text-decoration:none;border-bottom:2px solid var(--orange)}
.jump:hover{color:var(--blue)}

/* byline: structured rows, never a compressed dot-run. In the hero it is the
   right-hand column, so it reads as a small credentials panel. */
.byline{display:flex;align-items:center;gap:15px}
.hero__grid .byline{background:var(--paper-2);border-radius:11px;
  border-left:4px solid var(--blue);
  padding-top:15px;padding-bottom:15px;padding-left:16px;padding-right:16px}
/* Headshot at 1.5x the original 47px. */
.byline img{width:70px;height:70px;border-radius:50%;flex:0 0 auto;
  border:2px solid var(--line)}
.byline__who{font-family:Oswald,sans-serif;font-weight:600;font-size:15.5px;
  color:var(--navy);letter-spacing:.01em}
.byline__who a{color:var(--navy);text-decoration:none;border-bottom:1px solid var(--orange)}
.byline__role{font-size:13px;color:var(--ink-2);margin-top:1px}
.byline__meta{font-size:12.5px;color:var(--ink-2);margin-top:3px;
  display:flex;flex-wrap:wrap;gap:5px 13px}
.byline__meta b{font-weight:700;color:var(--ink)}

/* ------------------------------------------------- toplist: marquee strips
   Deliberately NOT a card grid. Each pick is a horizontal marquee row like a
   theatre listings board, separated by bulb rules instead of boxes. */
.marquee{margin:0;padding:0;list-style:none}
/* Each pick is a bordered card. The bulb-rule border-image that used to be the
   only separator is gone: on mobile the rows ran together, so the rows now have
   a real edge and the bulb motif stays on the section rules, the rank rings and
   the heading underlines. */
.strip{display:grid;align-items:center;gap:16px;
  /* The bonus column takes width from the brand column: the brand block had
     ~180px of slack at full width while the bonus headline was wrapping to two
     lines, which undercut the one thing the row is meant to sell. */
  grid-template-columns:56px 152px minmax(0,1fr) 272px 172px;
  padding-top:15px;padding-bottom:15px;padding-left:16px;padding-right:18px;
  position:relative;background:var(--paper);
  border:1px solid var(--line);border-radius:12px;margin-bottom:14px}
.strip:last-child{margin-bottom:0}
.strip--top{border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(255,132,0,.13);
  background:linear-gradient(90deg,rgba(255,132,0,.075),rgba(255,132,0,0) 62%)}

/* Rank in a bulb-ringed disc: the logo's bulb lettering reduced to one glyph.
   ⛔ The bulb layer MUST be masked to a ring outside the disc. ::before is
   absolutely positioned, so it paints ABOVE the element's text, not behind it.
   Unmasked, its dots land on the disc face and sit directly on top of the
   numeral, which is what made the positions illegible. The mask keeps every
   bulb outside the disc edge so the face stays clean. Stops are percentages of
   the gradient radius, so the ring survives the smaller mobile disc. */
.rank{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  font-family:Oswald,sans-serif;font-weight:700;font-size:26px;line-height:1;
  color:#fff;background:var(--blue);position:relative;flex:0 0 auto;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.3)}
/* The ring needs its own dark base. The bulbs are pale (#fff280): masked out
   over the white page they disappear, so they are laid on a navy annulus, the
   way the legacy marquee lettering sat on a dark header. */
.rank::before{content:"";position:absolute;inset:-8px;border-radius:50%;
  background-image:radial-gradient(circle at center,var(--bulb) 0 1.9px,transparent 2px),
                   linear-gradient(var(--navy),var(--navy));
  background-size:8.5px 8.5px,100% 100%;
  background-repeat:repeat,no-repeat;
  /* closest-side is required. A bare `circle` defaults to farthest-corner, so
     on this 72px box the gradient radius resolves to 50.9px and 77% lands at
     39px, outside the box: the whole ring gets masked away and disappears. */
  -webkit-mask:radial-gradient(circle closest-side,transparent 0 77%,#000 78%);
  mask:radial-gradient(circle closest-side,transparent 0 77%,#000 78%)}
.strip--top .rank{background:var(--orange);color:var(--navy);
  box-shadow:inset 0 0 0 2px rgba(0,16,19,.22)}

/* The chip and the bonus plate are anchors to the same destination as the row's
   ticket, so the whole card is clickable. They must not look like body links. */
.chip{background:#fff;border:1px solid var(--line);border-radius:9px;height:78px;
  display:grid;place-items:center;padding-left:13px;padding-right:13px;
  text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s}
.chip img{max-height:52px;width:auto}
.chip--dark{background:var(--navy-2);border-color:#123a47}
a.chip:hover{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,132,0,.16)}

.brand__name{font-family:Oswald,sans-serif;font-weight:600;font-size:19px;
  color:var(--navy);line-height:1.2}
.stars{color:var(--orange);font-size:14px;letter-spacing:1.5px;margin-top:3px}
.stars b{color:var(--ink-2);font-weight:400;font-size:12.5px;letter-spacing:0;
  margin-left:5px;font-family:Lato,sans-serif}
.pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.pill{font-size:11.5px;font-family:Oswald,sans-serif;font-weight:500;
  letter-spacing:.045em;text-transform:uppercase;color:var(--blue-deep);
  background:var(--paper-2);border:1px solid var(--line);border-radius:4px;
  padding:3px 8px}

/* bonus is the eye-catcher: brand accent, big, on a marquee-lit plate */
/* display:block is required: this is an anchor now, and an inline box would
   ignore the vertical padding and collapse the plate. */
.bonus{display:block;background:var(--paper-2);border-left:4px solid var(--orange);
  border-radius:0 8px 8px 0;padding:10px 13px;
  text-decoration:none;color:inherit;transition:background .15s}
/* Hover shifts the plate background only. The bonus amount keeps its orange:
   --cta / --cta-dark is reserved for .ticket and must never appear on a bonus
   (see the reserved-colour note at the top of this file). */
a.bonus:hover{background:#e6eef4;border-left-color:#d86e00}
.bonus__lbl{font-family:Oswald,sans-serif;font-weight:500;font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2)}
.bonus__amt{font-family:Oswald,sans-serif;font-weight:600;font-size:23px;
  line-height:1.15;color:var(--orange);margin-top:2px}
.bonus__terms{font-size:11.5px;color:var(--ink-2);margin-top:4px}

/* ------------------------------------------------ the CTA: a ticket stub
   RESERVED COLOUR. Shape = a theatre ticket with punched notches, echoing the
   marquee/box-office language. Nothing else on the site uses this colour. */
.ticket{display:block;text-align:center;text-decoration:none;color:#fff;
  background:var(--cta);font-family:Oswald,sans-serif;font-weight:600;
  font-size:15px;letter-spacing:.07em;text-transform:uppercase;
  padding:14px 18px;border:0;cursor:pointer;position:relative;
  -webkit-mask:radial-gradient(circle 7px at 0 50%,transparent 98%,#000) ,
               radial-gradient(circle 7px at 100% 50%,transparent 98%,#000);
  -webkit-mask-composite:source-in;mask:radial-gradient(circle 7px at 0 50%,transparent 98%,#000),
               radial-gradient(circle 7px at 100% 50%,transparent 98%,#000);
  mask-composite:intersect}
.ticket:hover{background:var(--cta-dark);color:#fff}
.ticket--sm{font-size:13.5px;padding-top:11px;padding-bottom:11px}
.ticket__sub{display:block;font-family:Lato,sans-serif;font-weight:400;
  font-size:11px;letter-spacing:.02em;text-transform:none;opacity:.9;margin-top:2px}

/* ribbon — absolutely positioned, must never be stretched by a child selector */
/* left tracks the card's padding-left (16px) plus the rank disc (56px), so the
   ribbon clears the disc and sits on the card's top edge. */
.ribbon{position:absolute;top:0;left:80px;transform:translateY(-50%);
  font-family:Oswald,sans-serif;font-weight:600;font-size:10.5px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--navy);
  background:var(--bulb);border-radius:3px;padding:3px 9px;z-index:2}

/* ------------------------------------------------------------- reviews */
.review{padding-top:22px}
.review__head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.scorebar{height:5px;background:var(--line);border-radius:4px;overflow:hidden}
.scorebar i{display:block;height:100%;background:var(--blue)}
.dims{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
  margin:14px 0}
.dim__t{display:flex;justify-content:space-between;font-size:12.5px;
  color:var(--ink-2);margin-bottom:4px}
.dim__t b{color:var(--navy);font-family:Oswald,sans-serif;font-weight:600}
.pc{display:grid;gap:16px;grid-template-columns:1fr 1fr;margin:14px 0}
.pc ul{margin:6px 0 0;padding-left:19px}
.pc li{margin-bottom:5px}
.pc h4{font-size:14px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}

/* --------------------------------------------------------------- tables */
.tblwrap{overflow-x:auto;margin:16px 0}
table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:560px}
th,td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--line);
  vertical-align:middle}
th{font-family:Oswald,sans-serif;font-weight:600;font-size:12.5px;
  letter-spacing:.07em;text-transform:uppercase;color:#fff;background:var(--blue-deep)}
tbody tr:nth-child(even){background:var(--paper-2)}

/* ------------------------------------------------------------------ FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-family:Oswald,sans-serif;font-weight:500;
  font-size:17px;color:var(--navy);padding:14px 0;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--orange);font-size:21px;
  line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq__a{padding-bottom:14px}
.faq__a p:last-child{margin-bottom:0}

/* ------------------------------------------------------------- callouts */
.note{background:var(--paper-2);border-left:4px solid var(--cyan);
  border-radius:0 8px 8px 0;padding:14px 16px;margin:16px 0}
.note h3{margin-bottom:6px}
.authorbox{background:var(--paper-2);border-radius:11px;padding:19px;margin:26px 0;
  display:flex;gap:17px;align-items:flex-start}
/* 1.5x the original 88px. */
.authorbox img{width:132px;height:132px;border-radius:50%;flex:0 0 auto}

/* -------------------------------------------------------------- footer */
.foot{background:var(--navy);color:#9fc0cf;margin-top:34px;
  font-size:13.5px}
.foot .wrap{padding-top:28px;padding-bottom:28px}
.foot a{color:#cfe6f2;text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline}
.foot__nav{display:flex;flex-wrap:wrap;gap:9px 20px;margin-bottom:15px;
  font-family:Oswald,sans-serif;letter-spacing:.05em;text-transform:uppercase;
  font-size:13px}
.foot__legal{border-top:1px solid #143a47;padding-top:15px;line-height:1.7}
.foot__legal b{color:#cfe6f2}

/* ------------------------------------------------------------ responsive */
@media (max-width:1000px){
  /* Bonus column stays wide enough here too, or the headline wraps again. In
     this band the column cannot grow further without squeezing the brand block,
     so the amount steps down 2px to keep the headline on one line. */
  .strip{grid-template-columns:52px 128px minmax(0,1fr) 232px 156px;gap:13px}
  .bonus__amt{font-size:21px}
  .chip{height:70px}
}
@media (max-width:1080px){
  .hero__grid{grid-template-columns:minmax(0,1fr) 268px;gap:18px 26px}
}
@media (max-width:860px){
  /* One column. The byline returns to sitting under the lede. */
  .hero__grid{grid-template-columns:1fr;gap:0}
  .hero__grid .byline{margin-top:14px}
  .nav{display:none}
  .nav--open{display:flex;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:flex-start;gap:0;background:var(--navy-2);
    padding-top:6px;padding-bottom:14px;z-index:30}
  .nav--open a{padding:12px 20px;width:100%}
  .nav--open .ticket{margin:9px 20px 0;width:calc(100% - 40px)}
  .burger{display:block}
  .mast{position:relative}   /* anchor for the open nav — NOT sticky */
  .mast .wrap{position:relative}
}
@media (max-width:720px){
  /* Compact the hero so the first toplist row starts inside the fold on a
     360x640 device. A stacked row is ~470px tall, so three rows cannot
     physically clear a small-phone fold (the desktop grid does show three).
     The target here is rank 1 visible without scrolling. Nothing is hidden:
     same DOM, same content, reflowed. */
  .hero{padding-top:14px}
  .lede{font-size:16px;line-height:1.55;max-width:none}
  .jump{margin-top:9px}
  .byline{gap:12px}
  .hero__grid .byline{margin-top:11px;padding-top:12px;padding-bottom:12px;
    padding-left:13px;padding-right:13px}
  /* 1.5x the original 40px mobile size. */
  .byline img{width:60px;height:60px}
  .byline__meta{font-size:12px;gap:3px 11px}
  /* The leading bulb rule and the section's top padding are pure spacing
     between the hero and rank 1. On a small phone that space costs more than
     the motif earns, and the card borders below already separate the rows. */
  #toplist{padding-top:6px}
  #toplist > .wrap > hr.bulbrule:first-child{display:none}
  .byline__meta{gap:2px 10px}
  /* Stronger card edge on mobile, where the rows previously ran together with
     nothing but a bulb rule between them. */
  .strip{padding-top:16px;padding-bottom:16px;padding-left:14px;padding-right:14px;
    border-width:2px;margin-bottom:18px;border-radius:14px}
  .strip{grid-template-columns:1fr;justify-items:center;text-align:center;
    gap:11px;padding-top:19px;padding-bottom:19px}
  .strip > *{width:100%;max-width:420px}
  /* The ribbon is absolutely positioned and must keep its intrinsic width.
     The rule above would otherwise stretch it into a full-width bar, which is
     the stretching the .ribbon note warns about. */
  .strip > .ribbon{width:auto;max-width:none}
  .strip .rank{width:48px;height:48px;font-size:19px;max-width:48px}
  .chip{height:74px}
  .pills{justify-content:center}
  .ribbon{left:50%;transform:translate(-50%,-50%)}
  /* Reading order on mobile: brand identity, then the bonus, then the CTA, so
     the bonus is the last thing read before the ticket. The attribute pills
     travel inside .brand (they are not a direct grid child, so they cannot be
     ordered independently) and sit under the star rating. */
  .strip .brand{order:1}
  .strip .bonus{order:2;border-left:0;border-top:4px solid var(--orange);
    border-radius:0 0 8px 8px;text-align:center}
  .strip .cta{order:3}
  .pc{grid-template-columns:1fr}
  .authorbox{flex-direction:column;align-items:center;text-align:center}
}