/* ==========================================================================
   The logo, the two bold accents, and motion on every interaction.
   Loaded last on every page. Everything still works, and stays put, for
   anyone who asks for reduced motion.
   ========================================================================== */

:root {
  /* The logo's own blue and red. Bold, so used in only a few places:
     the logo, the main buttons, the chosen tab and a few key figures. */
  --bold-blue: #2F4FA8;
  --bold-red: #D7263D;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

/* The logo */
.mark { flex: none; display: block; width: auto; }
.mark .mark-bar { fill: var(--bold-blue); }
.mark .mark-arrow { fill: var(--bold-red); }
.brand { gap: 12px !important; }
.brand .mark { height: 40px; }
.footer-brand { align-items: center; gap: 16px !important; }
.footer-brand .mark { height: 46px; }
.footer-brand .mark .mark-bar { fill: #fff; }
.gz-home { display: inline-flex; align-items: center; gap: 10px; }
.gz-home .mark { height: 20px; }
.gz-home .mark .mark-bar { fill: #fff; }
@media (prefers-reduced-motion: no-preference) {
  /* The bars rise and the arrow climbs when the page opens, and again on hover. */
  .brand .mark .mark-bar { transform-box: fill-box; transform-origin: 50% 100%; animation: bar-rise 700ms var(--ease-out) both; }
  .brand .mark .mark-bar:nth-child(2) { animation-delay: 70ms; }
  .brand .mark .mark-bar:nth-child(3) { animation-delay: 140ms; }
  .brand .mark .mark-bar:nth-child(4) { animation-delay: 210ms; }
  .brand .mark .mark-arrow { animation: arrow-in 700ms var(--ease-out) 300ms both; }
  .brand:hover .mark .mark-bar { animation: bar-bounce 520ms var(--ease-out) both; }
  .brand:hover .mark .mark-bar:nth-child(2) { animation-delay: 50ms; }
  .brand:hover .mark .mark-bar:nth-child(3) { animation-delay: 100ms; }
  .brand:hover .mark .mark-bar:nth-child(4) { animation-delay: 150ms; }
  .brand:hover .mark .mark-arrow { animation: arrow-nudge 520ms var(--ease-out) both; }
}
@keyframes bar-rise { from { transform: scaleY(0); } to { transform: none; } }
@keyframes bar-bounce { 0% { transform: none; } 40% { transform: scaleY(.6); } 100% { transform: none; } }
@keyframes arrow-in { from { opacity: 0; transform: translate(-14px, 14px); } to { opacity: 1; transform: none; } }
@keyframes arrow-nudge { 0% { transform: none; } 45% { transform: translate(6px, -6px); } 100% { transform: none; } }

/* Bold accents, sparingly */
.button, .ar .button, .nav-feature { background: var(--bold-red) !important; border-color: var(--bold-red) !important; color: #fff !important; }
.button:hover, .nav-feature:hover { background: var(--bold-blue) !important; border-color: var(--bold-blue) !important; }
.pod-tabs button[aria-selected="true"] { background: var(--bold-blue) !important; border-color: var(--bold-blue) !important; }
.publication.journal { background: var(--bold-blue) !important; border-left-color: var(--bold-red) !important; }
.publication.gazette { border-top-color: var(--bold-red) !important; }
.bold-figure { color: var(--bold-red) !important; }

/* Motion on every interaction */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Links: an underline that draws in from the left */
  main p a:not([class]), footer .footer-grid > div > a:not(.footer-brand), .dropdown a, nav#navigation > a:not(.nav-feature) {
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 320ms var(--ease-out), color 200ms;
  }
  main p a:not([class]):hover, footer .footer-grid > div > a:not(.footer-brand):hover, .dropdown a:hover, nav#navigation > a:not(.nav-feature):hover { background-size: 100% 1px; }
  nav#navigation > a:not(.nav-feature) { border-bottom-color: transparent !important; }

  /* Text links with an arrow: the line thickens, the arrow moves */
  .text-link { transition: gap 300ms var(--ease-out), color 200ms, border-color 200ms; }
  .text-link:hover { gap: 34px; }
  .text-link span, .round-arrow, .initiative-list b, .event-title span, .contact-link span { display: inline-block; transition: transform 300ms var(--ease-out); }
  a:hover .text-link span, .text-link:hover span, a:hover > .round-arrow, .initiative-list a:hover b, .event-card:hover .event-title span, .contact-link:hover span { transform: translate(4px, -4px); }

  /* Buttons: lift on hover, press on click */
  .button, .nav-feature, .pod-tabs button, .ar-book__toggle, .menu-toggle, button[type="submit"], .ct-submit, #photo-prev, #photo-next, #photo-pause {
    transition: transform 200ms var(--ease-out), background-color 250ms, border-color 250ms, color 250ms, box-shadow 250ms !important;
  }
  .button:hover, .nav-feature:hover, .ct-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgb(23 42 66 / .16); }
  .button:active, .nav-feature:active, .pod-tabs button:active, .menu-toggle:active, .ct-submit:active, #photo-prev:active, #photo-next:active, #photo-pause:active { transform: translateY(0) scale(.97); box-shadow: none; }

  /* Cards: a lift, and pictures that ease in */
  .publication, .event-card, .ar-articles a, .ar-facts > div, .ar-editors li, .team-card, .tm-card, .eq-comp, .op-card {
    transition: transform 380ms var(--ease-out), box-shadow 380ms var(--ease-out), background-color 250ms;
  }
  .publication:hover, .event-card:hover, .tm-card:hover, .eq-comp:hover, .op-card:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgb(23 42 66 / .12); }
  .ar-articles a:hover, .ar-facts > div:hover, .ar-editors li:hover { transform: translateY(-3px); }
  .event-image img, .team-card img, .eq-comp img, .eq-photo img, .op-photo img, .pg-photo img, .tm-photo img, .ar-head__pic img { transition: transform 700ms var(--ease-out), filter 500ms; }
  .event-card:hover img, .team-card:hover img, .eq-comp:hover img, .eq-photo:hover img, .op-photo:hover img, .pg-photo:hover img, .tm-photo:hover img, .ar-head__pic:hover img { transform: scale(1.05); }

  /* The initiative rows slide on hover */
  .initiative-list > a { transition: padding 300ms var(--ease-out), background-color 300ms !important; }

  /* Dropdowns open with a fade and a drop */
  details[open] > .dropdown { animation: drop-in 260ms var(--ease-out) both; }
  summary::after { display: inline-block; transition: transform 250ms var(--ease-out); }
  details[open] > summary::after { transform: rotate(180deg); }

  /* Questions open smoothly */
  .ar-faq details > div { animation: none; }
  .ar-faq details[open] > div { animation: fold-open 360ms var(--ease-out) both; }
  .ar-faq summary::after { transition: transform 300ms var(--ease-out); }
  .ar-faq details[open] summary::after { transform: rotate(180deg); }

  /* Tabs: the new season fades up */
  .pod-season:not([hidden]) { animation: fade-up 420ms var(--ease-out) both; }

  /* Form fields */
  .ct-field input, .ct-field textarea, .ct-field select { transition: border-color 200ms, box-shadow 250ms var(--ease-out), background-color 200ms; }

  /* Things arrive as they scroll in */
  .js-motion [data-in] { opacity: 0; transform: translateY(22px); transition: opacity 700ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: var(--in-delay, 0ms); }
  .js-motion [data-in].is-in { opacity: 1; transform: none; }
  .js-motion [data-in="pic"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1000ms var(--ease-in-out); transition-delay: var(--in-delay, 0ms); }
  .js-motion [data-in="pic"].is-in { clip-path: inset(0 0 0 0); }

  /* Between pages: a short cross-fade, where the browser supports it */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out 220ms var(--ease-in-out) both; }
  ::view-transition-new(root) { animation: vt-in 320ms var(--ease-out) both; }
}
@keyframes drop-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes fold-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

/* Focus is always visible */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--bold-blue) !important; outline-offset: 3px !important; }

/* The header logo as a reading meter (motion.js) */
.has-meter .brand .mark .mark-bar { transition: fill 350ms var(--ease-out); }
.has-meter .brand .mark .mark-bar:not(.is-lit) { fill: #c9d2e6; }

/* The homepage title in the serif */
.photo-heading h1 { font: 400 clamp(40px, 5.2vw, 76px)/1.08 var(--serif) !important; letter-spacing: -1px !important; }