/* Website brand lockup: original wordmark letterforms, with the same five
   emblem shapes used by the homepage model. No bitmap cropping or backing tile. */
.masthead .brand,
.event-header .event-brand {
  --brand-wordmark-width: 182px;
  --brand-symbol-width: 26px;
  --brand-symbol-height: 52px;
  --brand-accent: #f4c320;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  white-space: nowrap;
}

.masthead .brand-symbol,
.event-header .event-brand-mark {
  display: block;
  position: relative;
  flex: 0 0 auto;
  width: var(--brand-symbol-width);
  height: var(--brand-symbol-height);
  margin: 0;
  overflow: visible;
  background: none;
  box-shadow: none;
}

.brand-lockup .brand-emblem {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.brand-fries, .brand-letter-c { fill: var(--brand-accent); }
.brand-letter-f { fill: currentColor; }
.brand-fry { transition: transform .28s cubic-bezier(.2,.7,.2,1); }
.brand-lockup .brand-wordmark {
  display: block;
  width: var(--brand-wordmark-width);
  height: auto;
  overflow: visible;
  fill: currentColor;
}

.masthead .brand-name,
.event-header .event-brand-name {
  display: block;
  flex: 0 0 auto;
  width: var(--brand-wordmark-width);
  line-height: 1;
  letter-spacing: normal;
}
.masthead .brand-subline,
.event-header .brand-subline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
  margin-top: 7px;
  font-family: FC Sans, Arial, sans-serif;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .14em;
}
.brand-cjk { display: block; flex: 0 0 auto; }
.brand-context {
  display: block;
  flex: 0 0 auto;
  margin-left: auto;
  text-align: right;
  font: 400 10px/1.2 Arial, sans-serif;
  letter-spacing: .08em;
  opacity: .72;
}

.masthead {
  height: 102px;
  padding-top: 18px;
  padding-bottom: 18px;
  gap: clamp(18px, 2vw, 30px);
}
.event-header .event-brand {
  --brand-wordmark-width: 166px;
  --brand-symbol-width: 24px;
  --brand-symbol-height: 48px;
  gap: 12px;
  min-height: 54px;
}
.event-header .brand-subline { margin-top: 6px; font-size: 13px; }
.masthead .top-nav { gap: clamp(18px, 2vw, 30px); }
.masthead .top-nav,
.event-header .event-nav,
.masthead .motion-toggle,
.event-header .event-motion,
.masthead .platform-top { flex-shrink: 0; }

/* The closing scenes use the yellow brand field, so the mark becomes ink. */
html[data-chapter="3"] .masthead .brand,
html[data-event-scene="start"] .event-header .event-brand,
html[data-event-scene="join"] .event-header .event-brand { --brand-accent: currentColor; }

@media (prefers-reduced-motion: no-preference) {
  .brand-lockup .brand-fry { animation: brand-fries-enter .52s cubic-bezier(.2,.7,.2,1) backwards; }
  .brand-lockup .brand-fry-center { animation-delay: .06s; }
  .brand-lockup .brand-fry-right { animation-delay: .12s; }
  .brand-lockup .brand-letter-f,
  .brand-lockup .brand-letter-c { animation: brand-ink-enter .5s ease-out .1s backwards; }
  .brand-lockup .brand-wordmark { animation: brand-wordmark-enter .5s cubic-bezier(.2,.7,.2,1) .13s backwards; }
  .brand-lockup .brand-subline { animation: brand-ink-enter .4s ease-out .22s backwards; }
}
@media (hover: hover) and (pointer: fine) {
  .brand-lockup:hover .brand-fry-left { transform: translateY(-10px); }
  .brand-lockup:hover .brand-fry-center { transform: translateY(-18px); }
  .brand-lockup:hover .brand-fry-right { transform: translateY(-12px); }
}
.brand-lockup:focus-visible .brand-fry-left { transform: translateY(-10px); }
.brand-lockup:focus-visible .brand-fry-center { transform: translateY(-18px); }
.brand-lockup:focus-visible .brand-fry-right { transform: translateY(-12px); }
@keyframes brand-fries-enter { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes brand-ink-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes brand-wordmark-enter { from { opacity: 0; transform: translateX(-5px); } to { opacity: 1; transform: translateX(0); } }
html[data-motion="reduced"] .brand-lockup *,
html[data-event-motion="reduced"] .brand-lockup * { animation: none !important; transition: none !important; }
html[data-motion="reduced"] .brand-lockup .brand-fry,
html[data-event-motion="reduced"] .brand-lockup .brand-fry,
html[data-motion="reduced"] .brand-lockup .brand-wordmark,
html[data-event-motion="reduced"] .brand-lockup .brand-wordmark { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .brand-lockup * { animation: none !important; transition: none !important; }
  .brand-lockup .brand-fry, .brand-lockup .brand-wordmark { transform: none !important; }
}

@media (max-width: 1000px) {
  .masthead { gap: 17px; }
  .masthead .top-nav { gap: 18px; }
  .masthead .motion-label { display: none; }
  .masthead .motion-toggle { width: 28px; justify-content: center; }
  .event-header { gap: 20px; }
}
@media (max-width: 820px) { .masthead .top-nav { display: none; } }
@media (max-width: 760px) {
  .masthead { height: 87px; gap: 10px; padding-top: 14px; padding-bottom: 14px; }
  .event-header { gap: 12px; }
  .masthead .brand,
  .event-header .event-brand {
    --brand-wordmark-width: 142px;
    --brand-symbol-width: 24px;
    --brand-symbol-height: 44px;
    gap: 10px;
    min-height: 50px;
  }
  .masthead .brand-subline,
  .event-header .brand-subline { margin-top: 6px; font-size: 12px; letter-spacing: .14em; }
  .brand-context { font-size: 9px; letter-spacing: .04em; }
}
@media (max-width: 420px) {
  .masthead,
  .event-header { padding-left: 20px; padding-right: 20px; gap: 8px; }
  .masthead .brand,
  .event-header .event-brand {
    --brand-wordmark-width: 118px;
    --brand-symbol-width: 22px;
    --brand-symbol-height: 40px;
    gap: 9px;
    min-height: 46px;
  }
  .masthead .brand-subline,
  .event-header .brand-subline { margin-top: 5px; gap: 7px; font-size: 11px; }
  .brand-context { font-size: 8px; letter-spacing: .035em; }
  .masthead .platform-top { font-size: 11px; padding: 0 9px; gap: 5px; }
  .masthead .motion-toggle { width: 24px; }
}
@media (max-width: 360px) {
  .masthead,
  .event-header { padding-left: 16px; padding-right: 16px; gap: 6px; }
  .masthead .brand,
  .event-header .event-brand {
    --brand-wordmark-width: 90px;
    --brand-symbol-width: 19px;
    --brand-symbol-height: 35px;
    gap: 6px;
    min-height: 44px;
  }
  .masthead .brand-subline,
  .event-header .brand-subline { font-size: 11px; letter-spacing: .12em; }
  .brand-context { display: none; }
  .event-header .event-nav a { font-size: 11px; }
  .event-header .event-motion { width: 28px; }
}