/* THE STANDARD — page styles. Everything here is built on standard.css tokens;
   no colour literal appears below that is not already in the token set. */

/* ---------- header brand lockup ------------------------------------------ */
.bb-brandlink { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; }
.bb-headermark { flex: none; }
.bb-brandlink__txt { display: flex; flex-direction: column; line-height: 1; }
.bb-brandlink__wm {
  font-family: var(--font-display); font-weight: 700; font-size: 1.28rem;
  letter-spacing: .04em; color: var(--text);
}
.bb-brandlink__wm b { font-weight: 700; }
.bb-brandlink__wm i { font-style: normal; }
.bb-brandlink__sub {
  font-size: .58rem; font-weight: 600; letter-spacing: .27em;
  text-transform: uppercase; color: var(--gold-ink); margin-top: .28rem;
}
.bb-themebtn {
  display: inline-grid; place-items: center; width: 32px; height: 32px;
  border: 1px solid var(--line-strong); border-radius: 50%;
  background: transparent; color: var(--text-2); cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.bb-themebtn:hover { border-color: var(--gold); color: var(--gold-ink); background: var(--gold-wash); }
@media (max-width: 900px) {
  .bb-header__in { flex-wrap: wrap; gap: var(--s3); }
  .bb-nav { width: 100%; margin-left: 0; gap: var(--s3) var(--s4); }
  .bb-nav a { font-size: .68rem; }
}

/* ---------- footer -------------------------------------------------------- */
.bb-foot-motto { font-family: var(--font-serif); font-size: 1.2rem; font-style: italic; color: var(--gold-bright); margin-bottom: var(--s3); }
.bb-foot-motto span { font-size: .82rem; font-style: normal; color: #93A9D6; letter-spacing: .05em; }
.bb-foot-small { font-size: .8rem; line-height: 1.85; color: #B9C7E2; }
.bb-foot-rule { height: 1px; background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent); margin: var(--s6) 0 var(--s4); opacity: .5; }
.bb-foot-legal { color: #8296B8; font-size: .74rem; }

/* ---------- hero ---------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1100px 520px at 12% -10%, color-mix(in srgb, var(--navy) 9%, transparent), transparent 62%),
    radial-gradient(900px 480px at 92% 6%, color-mix(in srgb, var(--red) 7%, transparent), transparent 60%),
    var(--bg-alt);
  border-bottom: 1px solid var(--hairline);
}
.hero__in { display: grid; gap: var(--s7); align-items: center; padding-block: var(--s8) var(--s8); }
@media (min-width: 940px) { .hero__in { grid-template-columns: 1.15fr .85fr; } }
.hero h1 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: var(--step-5); letter-spacing: .035em; line-height: 1.02; margin-bottom: var(--s4);
}
.hero h1 .amp { color: var(--red); }
.hero__kicker { font-family: var(--font-serif); font-size: var(--step-2); font-style: italic; color: var(--text-2); }
.hero__actions { margin-top: var(--s6); }
.hero__globe { position: relative; justify-self: center; width: min(100%, 420px); }
.hero__globe img { width: 100%; filter: drop-shadow(0 22px 46px rgba(10,30,68,.24)); }
.hero__ring {
  position: absolute; inset: -6%; border-radius: 50%;
  border: 1px solid var(--hairline); pointer-events: none;
}
.hero__ring::after {
  content: ""; position: absolute; inset: 6%; border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--gold) 40%, transparent);
  animation: bb-spin 90s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .hero__ring::after { animation: none; } }

/* ---------- stat band ----------------------------------------------------- */
.statband { border-block: 1px solid var(--line); background: var(--surface); }
.statband__in { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .statband__in { grid-template-columns: repeat(4, 1fr); } }
.statband .bb-stat + .bb-stat { border-left: 1px solid var(--line); }
@media (max-width: 759px) { .statband .bb-stat:nth-child(3) { border-left: 0; } .statband .bb-stat:nth-child(n+3) { border-top: 1px solid var(--line); } }

/* ---------- cluster cards ------------------------------------------------- */
.cluster { position: relative; }
.cluster__n { font-family: var(--font-display); font-size: var(--step-3); color: var(--gold-ink); line-height: 1; }
.cluster h3 { font-size: var(--step-1); margin: var(--s2) 0 var(--s2); }
.cluster p { font-size: .84rem; color: var(--text-2); margin: 0; }

/* ---------- roster -------------------------------------------------------- */
.roster-controls {
  position: sticky; top: 62px; z-index: 20;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  padding: var(--s4) 0; border-bottom: 1px solid var(--line);
  display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center;
}
.roster-controls .bb-input { flex: 1 1 240px; min-width: 0; }
.roster-count { font-size: .78rem; color: var(--text-2); font-family: var(--font-mono); }
.roster-count b { color: var(--text); }

.appgrid { display: grid; gap: var(--s4); }
@media (min-width: 640px)  { .appgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .appgrid { grid-template-columns: repeat(3, 1fr); } }
.app { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4) var(--s4) var(--s3); }
.app__top { display: flex; align-items: flex-start; gap: var(--s2); justify-content: space-between; }
.app__name { font-weight: 600; font-size: .98rem; line-height: 1.3; color: var(--text); }
.app__host { font-family: var(--font-mono); font-size: .72rem; color: var(--text-3); word-break: break-all; }
.app__blurb { font-size: .8rem; color: var(--text-2); line-height: 1.55; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.app__foot { margin-top: auto; padding-top: var(--s3); display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.clusterhead { display: flex; align-items: baseline; gap: var(--s3); margin: var(--s7) 0 var(--s4); }
.clusterhead h2 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .05em; font-size: var(--step-2); margin: 0; }
.clusterhead .n { font-family: var(--font-mono); font-size: .8rem; color: var(--gold-ink); }
.clusterhead::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); opacity: .6; }
.roster-empty { text-align: center; padding: var(--s8) 0; color: var(--text-2); }

/* ---------- colours page -------------------------------------------------- */
.swatches { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.sw { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.sw__chip { height: 78px; }
.sw__meta { padding: var(--s3); font-size: .74rem; }
.sw__name { font-weight: 600; display: block; }
.sw__hex { font-family: var(--font-mono); color: var(--text-2); }
.sw__ratio { display: block; margin-top: .3rem; font-family: var(--font-mono); font-size: .68rem; }
.sw__ratio b { font-weight: 600; }
.pass { color: var(--ok); } .fail { color: var(--bad); }

.donts { display: grid; gap: var(--s4); }
@media (min-width: 780px) { .donts { grid-template-columns: 1fr 1fr; } }
.demo { border-radius: var(--r); padding: var(--s5); border: 1px solid var(--line); }
.demo--do  { border-left: 3px solid var(--ok); }
.demo--dont{ border-left: 3px solid var(--bad); }
.demo h4 { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--s3); }
.demo--do h4 { color: var(--ok); } .demo--dont h4 { color: var(--bad); }

/* ---------- code ---------------------------------------------------------- */
.code {
  position: relative; background: var(--navy); color: #DCE6F7;
  border-radius: var(--r); padding: var(--s5); overflow-x: auto;
  font-family: var(--font-mono); font-size: .8rem; line-height: 1.75;
  border: 1px solid var(--navy-2);
}
.code .k { color: var(--gold-bright); } .code .s { color: #9FD9B8; } .code .c { color: #7C90B8; }
.code__copy { position: absolute; top: .6rem; right: .6rem; }

/* ---------- brand page ---------------------------------------------------- */
.markgrid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.mark { text-align: center; padding: var(--s5) var(--s4) var(--s4); }
.mark__stage { display: grid; place-items: center; min-height: 160px; padding: var(--s3); background: var(--parchment); border-radius: var(--r); margin-bottom: var(--s3); }
.mark__stage--navy { background: var(--navy); }
.mark__stage img { max-height: 132px; width: auto; }
.mark__name { font-size: .8rem; font-weight: 600; }
.mark__file { font-family: var(--font-mono); font-size: .68rem; color: var(--text-3); }

/* ---------- films --------------------------------------------------------- */
.films { display: grid; gap: var(--s5); }
@media (min-width: 860px) { .films { grid-template-columns: repeat(2, 1fr); } }
.film { overflow: hidden; padding: 0; }
.film video, .film__poster { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--navy); display: block; }
.film__body { padding: var(--s5); }
.film__meta { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; margin-top: var(--s3); font-size: .74rem; color: var(--text-3); font-family: var(--font-mono); }
.film__pending { display: grid; place-items: center; aspect-ratio: 16/9; background: var(--navy); color: var(--navy-4); text-align: center; padding: var(--s5); }
.film__pending strong { display: block; color: var(--gold-bright); font-family: var(--font-display); letter-spacing: .12em; text-transform: uppercase; font-size: .9rem; margin-bottom: var(--s2); }
.transcript { margin-top: var(--s4); }
.transcript summary { cursor: pointer; font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); }
.transcript p { font-size: .84rem; color: var(--text-2); margin-top: var(--s3); }

/* ---------- the card page -------------------------------------------------
   Sized in container query units so the whole card scales as one object.
   The bottom band is absolute, so every column reserves room for it. */
.cardstage { display: grid; place-items: center; padding: var(--s7) 0; background: var(--bg-alt); }
.bizcard {
  width: min(100%, 760px); aspect-ratio: 1.75/1;
  background: var(--parchment); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: var(--r);
  box-shadow: var(--shadow-2); position: relative; overflow: hidden;
  display: grid; grid-template-columns: 0.92fr 1.08fr;
  container-type: inline-size;
}
.bizcard__frame { position: absolute; inset: 1.4cqw; border: 1px solid var(--gold); pointer-events: none; opacity: .75; z-index: 3; }
.bizcard__frame::before, .bizcard__frame::after { content: ""; position: absolute; width: 3.4cqw; height: 3.4cqw; border: 0.34cqw solid var(--gold-deep); }
.bizcard__frame::before { top: -0.7cqw; left: -0.7cqw; border-right: 0; border-bottom: 0; }
.bizcard__frame::after  { bottom: -0.7cqw; right: -0.7cqw; border-left: 0; border-top: 0; }

.bizcard__l, .bizcard__r {
  position: relative; z-index: 2;
  padding: 4.6cqw 3.2cqw 7.4cqw;      /* bottom clears the band */
  display: flex; flex-direction: column; justify-content: center; gap: 0.5cqw;
  min-width: 0;
}
.bizcard__l { border-right: 1px solid var(--hairline); text-align: center; align-items: center; }
.bizcard__l .bb-stars { font-size: 1.5cqw; }
.bizcard__wm { font-family: var(--font-display); font-weight: 700; font-size: 8.2cqw; line-height: 1; letter-spacing: .02em; margin-top: 0.6cqw; }
.bizcard__rule { font-family: var(--font-display); font-size: 1.55cqw; letter-spacing: .2em; margin-top: 0.9cqw; white-space: nowrap; }
.bizcard__tag { font-family: var(--font-display); font-size: 1.42cqw; letter-spacing: .09em; line-height: 1.85; color: var(--ink-2); margin-top: 1.1cqw; }
.bizcard__tag em { color: var(--gold-ink); font-style: normal; }
.bizcard__l img { width: 26%; margin-top: 1.6cqw; }

.bizcard__name { font-family: var(--font-serif); font-style: italic; font-size: 6.2cqw; line-height: 1.05; color: var(--gold-deep); }
.bizcard__role { font-size: 1.38cqw; font-weight: 700; letter-spacing: .045em; margin-top: 0.4cqw; }
.bizcard__rows { display: grid; gap: 1.05cqw; font-size: 1.42cqw; line-height: 1.45; margin-top: 1.4cqw; }
.bizcard__row { display: flex; gap: 1.3cqw; align-items: center; }
.bizcard__row a { color: var(--ink); text-decoration-color: var(--gold); }
.bizcard__ico { width: 3.5cqw; height: 3.5cqw; border-radius: 50%; background: var(--gold-deep); color: var(--parchment); display: grid; place-items: center; flex: none; }
.bizcard__ico svg { width: 1.9cqw; height: 1.9cqw; }
.bizcard__stat { font-size: 1.5cqw; font-weight: 700; letter-spacing: .07em; text-align: center; margin-top: 1.6cqw; }
.bizcard__motto { font-family: var(--font-serif); font-style: italic; font-size: 2.1cqw; color: var(--gold-deep); text-align: center; margin-top: 0.3cqw; }
.bizcard__band {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  background: var(--ink); color: var(--gold-bright);
  font-family: var(--font-display); font-size: 1.24cqw; letter-spacing: .14em;
  text-align: center; padding: 1.15cqw 2cqw; white-space: nowrap;
}
/* The printed card carries a photographed flag in this corner. A flat vector
   flag at this size reads as a broken image, so the corner keeps the flag's
   COLOURS as a wash and drops its geometry. */
.bizcard::before {
  content: ""; position: absolute; left: 0; bottom: 0; width: 44%; height: 52%;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(110% 110% at 0% 100%, rgba(200,16,46,.17) 0%, rgba(200,16,46,.06) 40%, transparent 72%),
    radial-gradient(80%  85%  at 0% 100%, rgba(10,30,68,.20) 0%, transparent 64%);
}

@media (max-width: 640px) {
  /* Below this the card stops being a card: two columns at phone width make
     1.4cqw type unreadable, so it becomes a single stacked column. */
  .bizcard { aspect-ratio: auto; grid-template-columns: 1fr; }
  .bizcard__l { border-right: 0; border-bottom: 1px solid var(--hairline); padding-bottom: 4cqw; }
  .bizcard__l, .bizcard__r { padding-inline: 6cqw; }
  .bizcard__r { padding-bottom: 17cqw; }
  .bizcard__wm { font-size: 15cqw; }
  .bizcard__rule { font-size: 2.9cqw; }
  .bizcard__tag { font-size: 2.7cqw; }
  .bizcard__name { font-size: 11cqw; }
  .bizcard__role, .bizcard__rows { font-size: 2.7cqw; }
  .bizcard__ico { width: 6.6cqw; height: 6.6cqw; }
  .bizcard__ico svg { width: 3.6cqw; height: 3.6cqw; }
  .bizcard__stat { font-size: 2.9cqw; }
  .bizcard__motto { font-size: 4cqw; }
  .bizcard__band { font-size: 2.1cqw; letter-spacing: .06em; padding: 2.4cqw 4cqw; white-space: normal; line-height: 1.7; }
  .bizcard__flag { display: none; }
}

/* ---------- misc ---------------------------------------------------------- */
.leadgrid { display: grid; gap: var(--s5); }
@media (min-width: 880px) { .leadgrid { grid-template-columns: 1.2fr .8fr; } }
.steps { counter-reset: s; display: grid; gap: var(--s4); }
.step { display: grid; grid-template-columns: auto 1fr; gap: var(--s4); align-items: start; }
.step::before {
  counter-increment: s; content: counter(s, decimal-leading-zero);
  font-family: var(--font-display); font-size: 1.1rem; color: var(--gold-ink);
  border: 1px solid var(--hairline); border-radius: 50%; width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
}
.step h4 { margin-bottom: .35rem; font-size: 1rem; }
.step p { font-size: .86rem; color: var(--text-2); margin: 0; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; font-size: .82rem; }
.kv dt { color: var(--text-3); font-family: var(--font-mono); font-size: .74rem; }
.kv dd { margin: 0; }