/* Wordmark: "uk" in ruby, "ruby" in the neutral colour, "conference" smaller and regular weight. */
.wordmark { font-weight: 700; letter-spacing: -0.055em; white-space: nowrap; line-height: 1; text-decoration: none; color: var(--cream) }
.wordmark__uk { color: var(--ruby) }
.wordmark__conference { font-size: 0.45em; font-weight: 400; letter-spacing: -0.01em }

.label { font: 600 var(--t-small)/1.3 var(--label); color: var(--amber); margin: 0 }
.muted { color: var(--muted) }

.button {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--s-3);
  font: 600 18px/1 var(--label);
  text-decoration: none;
  color: var(--cream);
  background: var(--ruby);
  border: 2px solid var(--ruby);
  cursor: pointer;
}
.button:hover { color: var(--cream); background: var(--ruby-dark); border-color: var(--ruby-dark) }

/* Site header */
.masthead { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) 0 }
.masthead .wordmark { font-size: 32px }

/* Hero */
.hero { padding: var(--s-6) 0 0 }
.hero__title { font-size: var(--t-display); margin: var(--s-3) 0 0 }
.hero__title > .hero__year { display: block; margin-top: 0.06em; font-size: 0.72em; color: var(--amber); letter-spacing: -0.04em }
.hero__tagline { font-size: var(--t-lead); line-height: 1.15; letter-spacing: -0.015em; margin: var(--s-3) 0 0 }
.hero__intro { max-width: var(--measure); margin: var(--s-3) 0 0 }
.hero__meta { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin: var(--s-3) 0 0 }

/* Sign-up form */
.signup { margin: var(--s-5) 0 0; max-width: 720px }
.signup__row { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: flex-end }
.signup__field { display: flex; flex-direction: column; gap: var(--s-1); flex: 1 1 320px }
.signup__field label { font: 600 var(--t-small) var(--label) }
.signup__field input { min-height: 52px; padding: 0 var(--s-2); font: var(--t-body) var(--sans); color: var(--night); background: var(--cream); border: 2px solid var(--cream) }
.signup__field input:focus { outline: 3px solid var(--amber); outline-offset: 2px }
.signup__note { margin: var(--s-2) 0 0; font-size: var(--t-small) }
.signup__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden }

.notice { margin: 0 0 var(--s-2); font: 600 var(--t-small)/1.4 var(--label); color: var(--amber) }
.notice--error { color: var(--ruby) }

/* Icon row along a ruby rule */
.skyline { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-2); margin: var(--s-6) 0 0; border-bottom: 6px solid var(--ruby) }
.skyline img { width: clamp(40px, 6vw, 84px); height: auto }

/* Facts and people */
.fact__icon { width: 72px; height: 72px; margin-bottom: var(--s-3) }
.person__bio { color: var(--muted); font: 400 18px/1.4 var(--label) }

/* AI speaker experiment */
.experiment { background: var(--ruby-night); border-top: 0 }
.experiment .label { color: var(--cream) }
.experiment ol { margin: 0; padding-left: 1.2em }
.experiment__art { width: 100%; max-width: 320px; justify-self: center }

/* Venue art */
.venue-art { display: flex; gap: var(--s-3); align-items: flex-end; justify-content: center; border-bottom: 6px solid var(--ruby) }
.venue-art img { width: 30% }

/* Footer */
.site-footer { border-top: 1px solid var(--rule); padding: var(--s-5) 0 var(--s-6) }
.site-footer .wordmark { font-size: 40px; margin-bottom: var(--s-2) }

@media (max-width: 600px) {
  .masthead .wordmark { font-size: 26px }
  .skyline img:nth-child(n+7) { display: none }
}

/* Focus */
a:focus-visible, .button:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px }

/* Motion: one sequence on page load, and the balloon lifting when someone signs up. */
@keyframes set-in { from { opacity: 0; transform: translateY(0.3em) } }
@keyframes rise { from { opacity: 0; transform: translateY(32px) } }
@keyframes lift {
  0% { transform: translateY(0) }
  55% { transform: translateY(-64px) rotate(-3deg) }
  100% { transform: translateY(-44px) rotate(2deg) }
}
@keyframes notice-in { from { opacity: 0; transform: translateY(-8px) } }

.hero__title > span { display: inline-block; animation: set-in 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both }
.hero__title > span:nth-child(2) { animation-delay: 120ms }
.hero__title > span:nth-child(3) { animation-delay: 260ms }
/* The year first appears small, right after "conference", drops to its own line and slides into place. */
@keyframes year-out {
  0% { opacity: 0; transform: translate(7.95em, -0.88em) scale(0.625) }
  30% { opacity: 1; transform: translate(7.95em, -0.88em) scale(0.625) }
  60% { opacity: 1; transform: translate(7.95em, 0) scale(0.8) }
  100% { opacity: 1; transform: none }
}
.hero__title > span:nth-child(4) { transform-origin: left top; animation: year-out 1700ms cubic-bezier(0.45, 0, 0.2, 1) 500ms both }

.skyline img { animation: rise 600ms cubic-bezier(0.2, 0.7, 0.2, 1) both }
.skyline img:nth-child(1) { animation-delay: 500ms }
.skyline img:nth-child(2) { animation-delay: 560ms }
.skyline img:nth-child(3) { animation-delay: 620ms }
.skyline img:nth-child(4) { animation-delay: 680ms }
.skyline img:nth-child(5) { animation-delay: 740ms }
.skyline img:nth-child(6) { animation-delay: 800ms }
.skyline img:nth-child(7) { animation-delay: 860ms }
.skyline img:nth-child(8) { animation-delay: 920ms }
.skyline img:nth-child(9) { animation-delay: 980ms }
.skyline img:nth-child(10) { animation-delay: 1040ms }
.skyline img:nth-child(11) { animation-delay: 1100ms }
.skyline img:nth-child(12) { animation-delay: 1160ms }

.hero--settled .hero__title > span,
.hero--settled .skyline img { animation: none }

.hero--subscribed .skyline .skyline__balloon { animation: lift 2400ms cubic-bezier(0.3, 0, 0.2, 1) 200ms both }

.notice { animation: notice-in 400ms ease-out both }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important }
}

/* Development copy editor */
[data-copy-key][contenteditable]:hover { outline: 1px dashed var(--amber); outline-offset: 4px; cursor: text }
[data-copy-key][contenteditable]:focus { outline: 2px solid var(--amber); outline-offset: 4px }
[data-copy-key][data-copy-state="saved"] { outline: 2px solid var(--cream); outline-offset: 4px }
[data-copy-key][data-copy-state="failed"] { outline: 2px solid var(--ruby); outline-offset: 4px }

/* Development notes */
.dev-tools { position: fixed; right: var(--s-2); bottom: var(--s-2); z-index: 1000; display: flex; gap: var(--s-1); align-items: center; padding: var(--s-1); background: var(--panel); border: 1px solid var(--rule); font: 400 14px/1 var(--label) }
.dev-tools__button { min-height: 36px; padding: 0 var(--s-2); font: 600 14px/1 var(--label); color: var(--night); background: var(--amber); border: 0; cursor: pointer }
.dev-tools__link { min-height: 36px; padding: 0 var(--s-1); font: 400 14px/1 var(--label); color: var(--cream); background: none; border: 0; cursor: pointer; text-decoration: underline }
.dev-tools__count { color: var(--cream); padding-right: var(--s-1) }
.dev-popover { position: absolute; z-index: 1001; width: 360px; padding: var(--s-2); background: var(--panel); border: 1px solid var(--amber); font: 400 15px/1.4 var(--label); color: var(--cream) }
.dev-popover label { display: block; margin-bottom: var(--s-1) }
.dev-popover textarea { width: 100%; padding: var(--s-1); font: 16px/1.4 var(--sans); color: var(--night); background: var(--cream); border: 0 }
.dev-popover p { margin: 0 }
.dev-popover__actions { display: flex; gap: var(--s-1); align-items: center; margin-top: var(--s-1) }
.dev-note-pin { position: absolute; z-index: 999; width: 28px; height: 28px; border-radius: 50%; font: 600 14px/28px var(--label); color: var(--night); background: var(--amber); border: 2px solid var(--night); cursor: pointer; padding: 0 }
[data-note-hover] { outline: 2px dashed var(--amber) !important; outline-offset: 3px; cursor: crosshair }