/* Shared shell for the pages behind the homepage.

   The homepage is a dc-runtime document whose styling lives in inline
   attributes. These pages are plain HTML, so the same design is expressed
   once here instead. Values are copied from that page rather than invented:
   same ground, same ink, same accent, same three faces. */

:root {
  --ground: #F3F4F2;
  --paper:  #FAFAF9;
  --ink:    #121722;
  --muted:  #5B6270;
  --accent: #0B6A9A;
  --line:   rgba(18, 23, 34, .10);
  --head: 'Golos Text', system-ui, sans-serif;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --page: 1440px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--head);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
::selection { background: var(--accent); color: #fff; }

.page { max-width: var(--page); margin: 0 auto; padding: 0 32px; }

/* ----------------------------------------------------------------- nav */

/* The floating pill from the homepage, to the pixel, so moving between
   pages does not feel like moving between sites. */
.nav {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 50;
  display: flex; align-items: center; gap: 4px;
  padding: 6px 6px 6px 16px; border-radius: 999px;
  background: rgba(250, 250, 249, .74);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(18, 23, 34, .07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 12px 32px -14px rgba(18, 23, 34, .22);
  width: max-content; max-width: calc(100% - 32px);
}
.nav__home {
  display: flex; align-items: center; gap: 10px; margin-right: 14px;
  font-weight: 700; font-size: 15px; letter-spacing: -.02em;
}
.nav__home img { display: block; flex: none; }
.nav a:not(.nav__home):not(.nav__cta) {
  padding: 9px 14px; border-radius: 999px;
  font-size: 14px; font-weight: 500; color: var(--muted);
  transition: background .25s, color .25s;
}
.nav a:not(.nav__home):not(.nav__cta):hover { background: rgba(18, 23, 34, .05); color: var(--ink); }
.nav__cta {
  margin-left: 6px; padding: 10px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--ground); background: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 6px 14px -6px rgba(18, 23, 34, .5);
  transition: transform .25s;
}
.nav__cta:hover { transform: translateY(-1px); color: var(--ground); }

/* --------------------------------------------------------------- type */

.eyebrow {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .04em;
  margin: 0 0 18px;
}
.eyebrow span { color: var(--accent); }
.eyebrow span + span { color: var(--muted); margin-left: 14px; }

h1, h2 { font-weight: 700; line-height: .88; letter-spacing: -.04em; margin: 0; }
h1 { font-size: min(9.4vw, 140px); }
h2 { font-size: min(5vw, 64px); }
h3 { font-weight: 700; font-size: 24px; letter-spacing: -.03em; margin: 0; }
.it { font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: -.01em; }

p { font-size: 17px; line-height: 1.55; color: var(--muted); }
.lead { font-size: 21px; line-height: 1.45; color: var(--ink); font-weight: 450; max-width: 46ch; }
.meta { font-family: var(--mono); font-size: 12px; letter-spacing: .01em; color: var(--muted); }

/* ------------------------------------------------------------ surface */

/* The graph paper under the top of every page, masked so it fades out. */
.grid-bg { position: relative; }
.grid-bg::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(18, 23, 34, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 23, 34, .045) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 70% 60% at 30% 40%, #000 20%, transparent 75%);
}

/* Event photographs stay in colour: bright indoor frames go pale in
   greyscale and merge into this near-white ground. */
.shot { border-radius: 18px; overflow: hidden; }
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.card {
  background: var(--paper); border: 1px solid rgba(18, 23, 34, .07); border-radius: 20px;
  padding: 26px 28px;
  box-shadow: inset 0 1px 0 #fff, 0 10px 30px -22px rgba(18, 23, 34, .5);
}

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 24px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 15px; font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 10px 24px -10px rgba(11, 106, 154, .7);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.btn:hover { transform: translateY(-2px); color: #fff; }
.btn--quiet {
  background: var(--paper); color: var(--ink); border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 #fff, 0 8px 20px -14px rgba(18, 23, 34, .35);
}
.btn--quiet:hover { color: var(--ink); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* -------------------------------------------------------------- blocks */

.section { padding: 110px 0 0; }
.cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px 20px; }
.prose { max-width: 68ch; }
.prose h2 { margin-top: 64px; }
.prose h2 + p { margin-top: 16px; }
.prose ul { padding-left: 20px; color: var(--muted); font-size: 17px; line-height: 1.7; }

/* -------------------------------------------------------------- footer */

.foot { background: var(--ink); color: rgba(243, 244, 242, .75); border-radius: 36px 36px 0 0; margin-top: 140px; padding: 72px 0 32px; }
.foot__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px 32px; }
.foot__mark { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 22px; letter-spacing: -.02em; color: #F3F4F2; }
.foot__head { font-family: var(--mono); font-size: 12px; letter-spacing: .01em; color: rgba(243, 244, 242, .5); margin: 0 0 14px; }
.foot a { font-family: var(--mono); font-size: 13px; letter-spacing: .01em; color: rgba(243, 244, 242, .78); line-height: 2; display: block; }
.foot a:hover { color: #fff; }
.foot p { color: rgba(243, 244, 242, .68); }
.foot__fine { font-family: var(--mono); font-size: 11px; line-height: 1.7; color: rgba(243, 244, 242, .45); max-width: 38ch; }
.foot__base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 56px; padding-top: 20px; border-top: 1px solid rgba(243, 244, 242, .1); font-family: var(--mono); font-size: 11px; color: rgba(243, 244, 242, .45); }
.foot__base a { display: inline; }

@media (max-width: 1100px) {
  .cols > * { grid-column: 1 / -1 !important; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  /* Same fit as the homepage bar: wordmark off, the rest tightened, so Join
     stays on screen. */
  .nav { padding: 6px 6px 6px 12px; }
  .nav__home { margin-right: 6px; }
  .nav__word { display: none; }
  .nav a:not(.nav__home):not(.nav__cta) { padding: 9px 8px; }
  .nav__cta { margin-left: 2px; padding: 10px 14px; }
  .page { padding: 0 20px; }
  .foot__grid { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
  .nav { gap: 2px; }
  .nav a:not(.nav__home):not(.nav__cta) { padding: 9px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .shot, .btn { transition: none; }
}

/* Events run as one list, so they are spaced from each other rather than
   each carrying a section's worth of padding. */
.event { padding: 96px 0 0; }
.event + .event { padding-top: 120px; }
.event h2 { font-size: min(6.4vw, 86px); }