:root {
  --ink: #050505;
  --paper: #f4f3ef;
  --acid: #dcff3f;
  --orange: #ff6840;
  --blue: #9b8cff;
  --chrome: linear-gradient(112deg, #ffffff 0%, #8eeeff 17%, #e7b5ff 32%, #ff9adf 48%, #f9fff2 63%, #87d9ff 82%, #ffffff 100%);
  --chrome-soft: linear-gradient(112deg, rgba(255,255,255,.96), rgba(142,238,255,.82), rgba(231,181,255,.86), rgba(255,154,223,.78), rgba(249,255,242,.94));
  --line: 1px solid rgba(255,255,255,.24);
  --icon-arrow-up-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 13 13 3M6 3h7v7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
  --icon-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 8H3M7 4 3 8l4 4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
  --icon-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M4 9l4 4 4-4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
}

html { background: #050505; color: #f5f5f2; }
body { background: #050505; color: #f5f5f2; }
::selection { background: #e3b9ff; color: #050505; }

.grain { opacity: .11; mix-blend-mode: screen; }
.skip-link { background: #f5f5f2; color: #050505; }

.brand-mark,
.hero-brand-mark {
  background-repeat: no-repeat;
  background-color: transparent;
}

.hero-brand-mark {
  background-image: url('/assets/look-up-club-logo.png?v=3');
  background-position: 52% 49%;
  background-size: 227% auto;
}

.site-header {
  min-height: 88px;
  border-bottom: 1px solid rgba(255,255,255,.24);
  background: rgba(5,5,5,.88);
  color: #fff;
  backdrop-filter: blur(18px) saturate(150%);
}

.wordmark {
  width: 138px;
  min-width: 138px;
  padding: 0;
  justify-content: center;
  border-right: 1px solid rgba(255,255,255,.24);
}

.brand-mark-header {
  width: 74px;
  height: 72px;
  background-image: url('/assets/look-up-club-logo-white.png?v=2');
  background-position: center;
  background-size: contain;
  transition: opacity .2s ease;
}

.wordmark:hover .brand-mark-header {
  opacity: .78;
}

.site-nav a {
  border-left-color: rgba(255,255,255,.2);
  color: #f5f5f2;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .11em;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  background: rgba(255,255,255,.1);
  color: #fff;
}

.menu-toggle {
  border-left-color: rgba(255,255,255,.22);
  color: #fff;
}

main { background: #050505; }
.loading-screen { color: #fff; }
.loading-arrow { color: #bfb2ff; }

.page { background: #050505; }
.kicker { color: rgba(255,255,255,.65); letter-spacing: .16em; }
.kicker::before {
  content: "";
  display: inline-block;
  width: .78em;
  height: .78em;
  margin-right: .55rem;
  background: #e8b2ff;
  -webkit-mask: var(--icon-arrow-up-right) center / contain no-repeat;
  mask: var(--icon-arrow-up-right) center / contain no-repeat;
}
.display,
.section-title { color: #f6f5f2; }
.display em {
  color: transparent;
  background: var(--chrome);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lead { color: inherit; }

.arrow-link,
.arrow-link.dark {
  border: 1px solid rgba(255,255,255,.6);
}

/* One interaction language for every iridescent call to action. */
.site-nav a.nav-contact,
.site-nav a.nav-contact[aria-current="page"],
.arrow-link,
.arrow-link.dark,
.contact-form button,
.inline-form button {
  background-color: #dcefff;
  background-image: linear-gradient(110deg, #fff 0%, #8eeeff 22%, #ead0ff 43%, #ff9adf 63%, #f8fff3 82%, #8eeeff 100%);
  background-size: 240% 100%;
  background-position: 0 50%;
  color: #050505;
  font-family: var(--body);
  font-size: .72rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 4px 4px 0 rgba(255,255,255,.18);
  transition: background-position .45s cubic-bezier(.2,.8,.2,1), transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.site-nav a.nav-contact:hover,
.site-nav a.nav-contact:focus-visible,
.arrow-link:hover,
.arrow-link:focus-visible,
.arrow-link.dark:hover,
.arrow-link.dark:focus-visible,
.contact-form button:hover,
.contact-form button:focus-visible,
.inline-form button:hover,
.inline-form button:focus-visible {
  background-color: #dcefff;
  background-image: linear-gradient(110deg, #fff 0%, #8eeeff 22%, #ead0ff 43%, #ff9adf 63%, #f8fff3 82%, #8eeeff 100%);
  background-position: 100% 50%;
  color: #050505;
  filter: saturate(1.16) brightness(1.05);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(180,145,255,.24), 0 0 0 1px rgba(255,255,255,.28);
}

/* The navigation item fills the header rail, so it changes colour in place. */
.site-nav a.nav-contact { box-shadow: none; }
.site-nav a.nav-contact,
.contact-form button,
.inline-form button,
.text-arrow-link { gap: .7em; }

.contact-form button,
.inline-form button,
.text-arrow-link { display: inline-flex; align-items: center; justify-content: space-between; }

.text-arrow-link { vertical-align: middle; }

.site-nav a.nav-contact::after,
.arrow-link:not(.arrow-back):not(.arrow-download)::after,
.contact-form button::after,
.inline-form button::after,
.announcement-link::after,
.text-arrow-link::after {
  content: "";
  display: block;
  width: .95em;
  height: .95em;
  flex: 0 0 .95em;
  background: currentColor;
  -webkit-mask: var(--icon-arrow-up-right) center / contain no-repeat;
  mask: var(--icon-arrow-up-right) center / contain no-repeat;
  transition: transform .22s ease;
}

.arrow-link.arrow-back::before,
.arrow-link.arrow-download::after {
  content: "";
  display: block;
  width: .95em;
  height: .95em;
  flex: 0 0 .95em;
  background: currentColor;
  transition: transform .22s ease;
}

.arrow-link.arrow-back::before {
  -webkit-mask: var(--icon-arrow-left) center / contain no-repeat;
  mask: var(--icon-arrow-left) center / contain no-repeat;
}

.arrow-link.arrow-download::after {
  -webkit-mask: var(--icon-arrow-down) center / contain no-repeat;
  mask: var(--icon-arrow-down) center / contain no-repeat;
}

.announcement-link::after {
  width: clamp(2rem,5vw,5rem);
  height: clamp(2rem,5vw,5rem);
  flex-basis: clamp(2rem,5vw,5rem);
  background: var(--chrome);
}

.site-nav a.nav-contact:hover,
.site-nav a.nav-contact:focus-visible {
  transform: none;
  box-shadow: none;
}

.arrow-link:hover::after,
.arrow-link:focus-visible::after,
.inline-form button:hover::after,
.inline-form button:focus-visible::after,
.contact-form button:hover::after,
.contact-form button:focus-visible::after,
.announcement-link:hover::after,
.announcement-link:focus-visible::after,
.text-arrow-link:hover::after,
.text-arrow-link:focus-visible::after { transform: translate(3px,-3px); }

.arrow-link.arrow-back:hover::before,
.arrow-link.arrow-back:focus-visible::before { transform: translateX(-3px); }

.arrow-link.arrow-download:hover::after,
.arrow-link.arrow-download:focus-visible::after { transform: translateY(3px); }

.home-hero {
  min-height: calc(100svh - 88px);
  display: grid;
  grid-template-columns: minmax(260px, .82fr) minmax(0, 1.18fr);
  grid-template-rows: auto 1fr auto;
  column-gap: clamp(2rem, 4vw, 5rem);
  row-gap: clamp(1rem, 2vw, 2rem);
  padding: clamp(2rem, 5vw, 5rem) var(--pad) clamp(3rem, 6vw, 6rem);
  border-bottom: 1px solid rgba(255,255,255,.22);
  background:
    radial-gradient(circle at 18% 42%, rgba(85,220,255,.16), transparent 27%),
    radial-gradient(circle at 40% 65%, rgba(241,104,255,.13), transparent 28%),
    linear-gradient(135deg, #030303, #0c0c0d 55%, #030303);
  isolation: isolate;
}

.home-hero::after {
  content: "";
  position: absolute;
  inset: auto -10% -45% 20%;
  height: 75%;
  z-index: -1;
  background: conic-gradient(from 180deg, transparent, rgba(116,229,255,.13), rgba(255,128,226,.14), transparent 42%);
  filter: blur(45px);
  transform: rotate(-9deg);
}

.home-hero .kicker { grid-column: 1 / -1; margin: 0; }
.hero-brand-mark {
  grid-column: 1;
  grid-row: 2 / span 2;
  align-self: center;
  justify-self: center;
  width: min(100%, 500px);
  aspect-ratio: 1;
}

.hero-title {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  max-width: 900px;
  font-size: clamp(3.4rem, 7.8vw, 9rem);
  line-height: .82;
}

.hero-intro {
  grid-column: 2;
  grid-row: 3;
  width: min(58ch, 100%);
  margin: 0 0 clamp(.5rem, 1.5vw, 1.5rem);
  padding: 0;
  border: 0;
  background: none;
  color: rgba(245,245,242,.62);
  box-shadow: none;
  backdrop-filter: none;
  transform: none;
  font-size: clamp(.95rem, 1.25vw, 1.15rem);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: .015em;
}

.home-event {
  border-bottom-color: rgba(255,255,255,.24);
  background: #050505;
}
.event-poster-wrap { background: #050505; border-right: 1px solid rgba(255,255,255,.24); }
.event-copy {
  position: relative;
  overflow: hidden;
  background: #efefec;
  color: #050505;
}
.event-copy::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 8px;
  background: var(--chrome);
}
.event-copy .kicker { color: rgba(5,5,5,.6); }
.event-copy h2 { color: #050505; }
.event-fact { border-top-color: #050505; }

.home-about {
  border-bottom-color: rgba(255,255,255,.24);
  background: #0a0a0b;
  color: #f5f5f2;
}
.home-about-copy { background: radial-gradient(circle at 0 100%, rgba(204,135,255,.12), transparent 42%); }
.home-about-image { border-left-color: rgba(255,255,255,.24); }
.home-about-image img { filter: grayscale(.35) saturate(.72) contrast(1.15); }

.page-mast,
.page-mast.orange,
.page-mast.blue,
.page-mast.acid {
  position: relative;
  overflow: hidden;
  border-bottom-color: rgba(255,255,255,.24);
  background:
    radial-gradient(circle at 82% 20%, rgba(120,225,255,.12), transparent 22%),
    radial-gradient(circle at 92% 70%, rgba(248,132,255,.13), transparent 25%),
    #050505;
  color: #f5f5f2;
}
.split-section,
.manifesto,
.services-list,
.announcement-list,
.contact-grid {
  border-bottom-color: rgba(255,255,255,.24);
  background: #080808;
  color: #f5f5f2;
}
.split-image,
.home-about-image,
.contact-aside { border-left-color: rgba(255,255,255,.24); }
.split-image img { filter: grayscale(.25) saturate(.68) contrast(1.18); }

.manifesto-item { border-right-color: rgba(255,255,255,.2); }
.manifesto-item strong {
  color: transparent;
  background: var(--chrome);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.service-row { border-top-color: rgba(255,255,255,.2); }
.service-row:hover { background: rgba(204,172,255,.13); }
.service-number,
.service-title { border-right-color: rgba(255,255,255,.2); }
.service-number { color: #dcbbff; }

.event-detail { border-bottom-color: rgba(255,255,255,.24); }
.event-detail-poster { background: #050505; border-right: 1px solid rgba(255,255,255,.24); }
.event-detail-copy {
  background: #efefec;
  color: #050505;
}
.event-detail-copy .kicker { color: rgba(5,5,5,.6); }
.date-block { border-color: #050505; }
.date-block div + div { border-left-color: #050505; }
.credit-list { border-top-color: #050505; }
.credit-list li { border-bottom-color: #050505; }

.announcement-link { border-top-color:rgba(255,255,255,.2); color:#f5f5f2; }
.announcement-link:hover,
.announcement-link:focus-visible { background:rgba(204,172,255,.13); color:#fff; }
.announcement-hero { border-bottom-color:rgba(255,255,255,.24); background:#080808; }
.announcement-hero img { filter:saturate(.8) contrast(1.08); }
.announcement-detail { border-bottom-color:rgba(255,255,255,.24); background:#080808; color:#f5f5f2; }
.announcement-resources { border-left-color:rgba(255,255,255,.24); background:radial-gradient(circle at 15% 15%,rgba(137,224,255,.1),transparent 34%),#0b0b0c; }
.announcement-resource { border-bottom-color:rgba(255,255,255,.24); }

.contact-form-wrap { background: radial-gradient(circle at 12% 92%, rgba(105,219,255,.1), transparent 32%); }
.contact-aside .stamp {
  border-color: rgba(255,255,255,.55);
  background: var(--chrome-soft);
  color: #050505;
}
.field input,
.field textarea,
.inline-form input { border-bottom-color: rgba(255,255,255,.55); }
.field input:focus,
.field textarea:focus,
.inline-form input:focus { border-color: #dfb8ff; box-shadow: 0 3px 0 #dfb8ff; }
.contact-form button,
.inline-form button {
  border-color: rgba(255,255,255,.58);
}

.privacy-content { color: #f5f5f2; }
.privacy-content code { background: rgba(255,255,255,.12); }

.site-footer {
  border-top: 1px solid rgba(255,255,255,.24);
  background:
    radial-gradient(circle at 8% 5%, rgba(123,224,255,.1), transparent 25%),
    radial-gradient(circle at 36% 40%, rgba(239,126,255,.1), transparent 30%),
    #050505;
}
.footer-callout { border-bottom-color: rgba(255,255,255,.22); }
.footer-meta { color: rgba(255,255,255,.72); }

@media (max-width: 960px) {
  .site-nav { inset: 88px 0 auto; height: calc(100vh - 88px); background: rgba(5,5,5,.98); }
  .site-nav a { border-bottom-color: rgba(255,255,255,.2); }
  .home-hero { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; }
  .hero-brand-mark { grid-column: 1; grid-row: 2; width: min(65vw, 420px); }
  .hero-title { grid-column: 1; grid-row: 3; text-align: center; justify-self: center; }
  .hero-intro { grid-column: 1; grid-row: 4; justify-self: center; text-align: center; }
  .event-poster-wrap,
  .event-detail-poster { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.24); }
  .home-about-image,
  .split-image,
  .contact-aside { border-left: 0; border-top-color: rgba(255,255,255,.24); }
}

@media (max-width: 640px) {
  .site-header { min-height: 72px; }
  .wordmark { width: 102px; min-width: 102px; }
  .brand-mark-header {
    width: 62px;
    height: 60px;
  }
  .site-nav { inset: 72px 0 auto; height: calc(100vh - 72px); }
  .home-hero { min-height: calc(100svh - 72px); padding-top: 2.5rem; gap: 1.4rem; }
  .hero-brand-mark { width: min(72vw, 320px); }
  .hero-title { font-size: clamp(3rem, 15vw, 5.5rem); }
  .hero-intro { width: min(34ch, 100%); margin-bottom: 0; font-size: .94rem; line-height: 1.5; }
  .display { font-size: clamp(3.3rem, 18vw, 5.8rem); }
  .manifesto-item { border-right: 0; border-bottom-color: rgba(255,255,255,.2); }
  .service-body { border-top-color: rgba(255,255,255,.2); }
  .announcement-resources { border-top-color:rgba(255,255,255,.24); }
  .date-block div + div { border-left: 0; border-top-color: #050505; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-brand-mark,
  .brand-mark,
  .site-nav a.nav-contact,
  .arrow-link,
  .contact-form button,
  .inline-form button { transition: none; }
}