/* Layout: sizes are written in the original 2560 frame's pixels and scaled by --u.
   2000px and up: the original frame at full size (1760 content column, --u = 1px).
   Below 2000px: the 1920 frame, which is that design at 75% (1440 container, 60px side
   padding, 1320 content column, --u tops out at .75px), scaling down from there.
   Below 1000px: one column. Small text has pixel floors so it stays readable. */
:root {
  color-scheme: dark;
  --navy-900: #02122b;
  --navy-700: #002156;
  --sky: #1e96fc;
  --white: #ffffff;
  --photo-empty: #0a2a5e;
  --rule: rgba(255, 255, 255, .14);
  --scrim: rgba(1, 8, 22, .6);
  --shadow: rgba(0, 0, 0, .45);

  --font-display: "Prompt", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body: "Open Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --col: 1320px;                                        /* content column cap */
  --g: clamp(20px, 4.1667vw, 60px);                         /* side gutter */
  --w: min(var(--col), calc(100vw - 2 * var(--g)));        /* content column */
  --u: calc(var(--w) / 1760);                           /* one design pixel */
  --h: max(var(--u), .62px);                            /* header scale */
  --b: max(var(--u), .52px);                            /* button scale */
  --p-min: 15px;                                        /* body copy floor */
}
@media (min-width: 2000px) {
  :root { --col: 1760px; --g: 80px; }                   /* original 2560 frame at full size */
}
@media (max-width: 999px) {
  :root { --u: min(.75px, calc(var(--w) / 880)); --p-min: 16px; }
}
@media (max-width: 559px) {
  :root { --h: .5px; }
}

/* Base resets (previously supplied by the design preview wrapper) */
body { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }

html { background: var(--navy-900); }
body {
  background: var(--navy-900);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
h1, h2, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid var(--white); outline-offset: 4px; border-radius: 6px; }
svg { display: block; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.page {
  background: linear-gradient(136.34deg, var(--navy-900) .49%, var(--navy-700) 80.02%);
  padding-inline: var(--g);
  padding-block: calc(41 * var(--u)) calc(16 * var(--u));
  overflow-x: clip;
}
.col { max-width: var(--col); margin-inline: auto; }

/* ---------- Header ---------- */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px calc(32 * var(--h));
}
.brand { display: flex; align-items: flex-start; color: var(--white); }
.brand__mark { width: calc(101.19 * var(--h)); height: calc(74.53 * var(--h)); flex: none; }
.brand__name {
  font-family: var(--font-display);
  font-size: calc(32.819 * var(--h));
  line-height: 1.5;
  margin-top: calc(5.13 * var(--h));
  margin-left: calc(6.25 * var(--h));
}
.site-header__end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px calc(47.3 * var(--h));
  margin-left: auto;
}
.social { display: flex; align-items: center; }
.social a { display: block; transition: opacity .15s; }
.social a:hover { opacity: .8; }
.social svg { width: calc(48 * var(--h)); height: calc(48 * var(--h)); }
.social .social__discord svg { width: calc(60 * var(--h)); height: calc(45 * var(--h)); }
.social li + li { margin-left: calc(30 * var(--h)); }
.social li:nth-child(2) { margin-left: calc(30.66 * var(--h)); }
.social li:nth-child(4) { margin-left: calc(24 * var(--h)); }
.site-nav { display: flex; gap: calc(31.2 * var(--h)); font-size: max(15px, calc(24 * var(--h))); line-height: 1.362; white-space: nowrap; }
.site-nav a:hover { color: var(--sky); }

/* Below 800px the social icons and nav move into a slide-out menu behind a hamburger button. */
.menu-toggle, .menu-close, .scrim { display: none; }
@media (max-width: 799px) {
  .site-header { flex-wrap: nowrap; }
  .menu-toggle, .menu-close {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    margin-right: -8px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--white);
    cursor: pointer;
  }
  .menu-toggle { margin-left: auto; }
  .menu-toggle:focus-visible, .menu-close:focus-visible { outline: 3px solid var(--white); outline-offset: 0; }
  .site-header__end {
    --h: .6667px;
    position: fixed;
    top: 0; bottom: 0; right: 0;
    z-index: 20;
    width: min(320px, 84vw);
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    margin: 0;
    padding: calc(16px + env(safe-area-inset-top, 0px)) 24px calc(28px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, var(--navy-900), var(--navy-700));
    box-shadow: -24px 0 60px var(--shadow);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s .28s;
  }
  .menu-open .site-header__end { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
  .menu-close { align-self: flex-end; }
  .site-nav { order: 1; flex-direction: column; gap: 0; margin-top: 12px; font-size: 22px; }
  .site-nav a { padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .social { order: 2; margin-top: 28px; }
  .scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 15;
    background: var(--scrim);
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s;
  }
  .menu-open .scrim { opacity: 1; pointer-events: auto; }
  html.menu-lock { overflow: hidden; }
}

/* ---------- Shared pieces ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: max(32px, calc(96 * var(--u)));
  color: var(--sky);
}
.copy { font-size: max(var(--p-min), calc(22 * var(--u))); line-height: 1.362; }

.photo-card {
  position: relative;
  aspect-ratio: 880 / 481;
  max-width: 100%;
  border-radius: calc(45 * var(--u));
  overflow: hidden;
  background: var(--photo-empty);
}
.photo-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: calc(406 * var(--b));
  height: calc(94 * var(--b));
  padding-bottom: calc(1.6 * var(--b));
  border-radius: calc(45 * var(--b));
  background: var(--sky);
  color: var(--white);
  font-size: calc(40 * var(--b));
  line-height: 1.362;
  transition: filter .15s, transform .15s;
}
.btn:hover { filter: brightness(1.1); }
.btn:active { transform: translateY(1px); }
/* Icon and label positions assume a 406-unit button; the margin re-centres them when a button is narrower. */
.btn__icon { position: absolute; margin-left: calc((100% - 406 * var(--b)) / 2); }
.btn__icon--calendar { left: calc(56 * var(--b)); top: calc(12 * var(--b)); width: calc(69 * var(--b)); height: calc(69 * var(--b)); }
.btn__icon--discord { left: calc(42 * var(--b)); top: calc(14.75 * var(--b)); width: calc(86 * var(--b)); height: calc(64.5 * var(--b)); }
.btn__icon--patreon { left: calc(56.7 * var(--b)); top: calc(16 * var(--b)); width: calc(56.6 * var(--b)); height: calc(62 * var(--b)); }
.btn__label {
  position: absolute;
  left: calc(140 * var(--b));
  top: calc(4 * var(--b));
  width: calc(230 * var(--b));
  height: calc(86 * var(--b));
  margin-left: calc((100% - 406 * var(--b)) / 2);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: calc(32 * var(--b));
  line-height: 1.1;
}

/* ---------- Hero ---------- */
.hero {
  display: grid;
  grid-template-columns: 880fr 820fr;
  column-gap: calc(60 * var(--u));
  align-items: center;
  margin-top: min(80px, calc(106.67 * var(--u)));   /* same 80px as the gaps between sections */
}
/* The hero photo already carries the tint and logo; the vector lockup sits exactly on top so the logo stays sharp on high-density screens. */
.hero__lockup { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--white); }
.hero__title { line-height: 1.08; padding-bottom: calc(12 * var(--u)); min-width: 0; }

/* ---------- Next meetup ---------- */
.meetup {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: min(80px, calc(106.67 * var(--u)));   /* 80px on desktop, same as the gap below */
}
.meetup__title { font-size: max(22px, calc(40 * var(--u))); line-height: 1.362; font-weight: 700; }
/* Pull the title up by the empty space above its capitals, so the visible gap under the hero is the full 80px and no more. */
@media (min-width: 1000px) {
  .meetup__title { margin-top: -.355em; }
}
.meetup__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px calc(26.9 * var(--u));
  margin-top: calc(10.5 * var(--u));
  padding-right: calc(13.7 * var(--u));
  color: var(--sky);
  font-size: max(14px, calc(22 * var(--u)));
  line-height: 1.362;
}
.meta { display: flex; align-items: flex-start; }
.meta svg { flex: none; }
.meta--place { gap: max(4px, calc(6.9 * var(--u))); }
.meta--place svg { width: max(20px, calc(34 * var(--u))); height: max(20px, calc(34 * var(--u))); }
.meta--date { gap: max(6px, calc(21.7 * var(--u))); }
.meta--date svg { width: max(18px, calc(31 * var(--u))); height: max(18px, calc(31 * var(--u))); }
.meetup__copy { max-width: 34.1em; margin-top: calc(10 * var(--u)); }
.meetup__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px calc(43 * var(--u));
  margin-top: max(20px, calc(34 * var(--u)));
}

/* ---------- Contribute ---------- */
.contribute {
  display: grid;
  grid-template-columns: 812fr 880fr;
  column-gap: calc(68 * var(--u));
  align-items: start;
  margin-top: min(80px, calc(106.67 * var(--u)));   /* 80px on desktop, same as the gap above */
}
.contribute__copy { min-width: 0; }
.contribute__title { line-height: .93; margin-top: calc(-9.3 * var(--u)); }
.contribute__copy .copy { margin-top: calc(27.7 * var(--u)); margin-left: calc(2 * var(--u)); }
/* Two buttons share the copy column: each takes half, and they wrap if there is no room. */
.contribute__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px calc(43 * var(--u));   /* same as the Next Meetup buttons */
  margin-top: max(20px, calc(40 * var(--u)));
  margin-left: calc(2 * var(--u));
}
.contribute__actions .btn { flex: 1 1 0; width: auto; min-width: calc(372 * var(--b)); max-width: calc(406 * var(--b)); }

/* ---------- Latest from Bluesky ---------- */
.feed { margin-top: min(80px, calc(106.67 * var(--u))); }
.feed__title { line-height: .93; }
.feed__title a:hover { text-decoration: underline; text-underline-offset: .12em; }
.feed__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: calc(40 * var(--u));
  margin-top: max(20px, calc(40 * var(--u)));
}
.post {
  display: flex;
  flex-direction: column;
  gap: max(10px, calc(16 * var(--u)));
  padding: max(20px, calc(36 * var(--u)));
  border: 1px solid var(--rule);
  border-radius: calc(45 * var(--u));
  background: var(--photo-empty);
}
.post__date { color: var(--sky); font-size: max(14px, calc(22 * var(--u))); line-height: 1.362; }
.post__date:hover { text-decoration: underline; text-underline-offset: .2em; }
.post__text { white-space: pre-line; overflow-wrap: anywhere; }
.post__text a { color: var(--sky); }
.post__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: max(12px, calc(24 * var(--u)));
}
.post__text a:hover { text-decoration: underline; text-underline-offset: .2em; }

/* ---------- Footer ---------- */
.site-footer {
  /* 160px on desktop, measured to the top of the letters (the .355em removes the empty space above them). */
  margin-top: calc(min(160px, calc(213.33 * var(--u))) - .355em);
  text-align: center;
  font-family: var(--font-display);
  font-size: max(15px, calc(36 * var(--u)));
  line-height: 1.512;
}

/* ---------- One column ----------
   Spacing follows the Mobile 390 frame: the pixel value is what that frame uses at 390px,
   and the --u term grows it in proportion on wider one-column screens. */
@media (max-width: 999px) {
  .page { padding-top: max(20px, calc(41 * var(--u))); }

  .hero { grid-template-columns: 1fr; row-gap: max(20px, calc(50.3 * var(--u))); margin-top: max(36px, calc(110 * var(--u))); }
  .hero__title { padding-bottom: 0; text-wrap: balance; }

  .meetup { margin-top: max(50px, calc(125.7 * var(--u))); }
  .meetup__meta { padding-right: 0; }
  .meetup__actions { gap: max(10px, calc(25.1 * var(--u))) calc(43 * var(--u)); margin-top: max(24px, calc(60.3 * var(--u))); }

  /* Heading, photo, paragraph, button: the photo moves up between the heading and the copy. */
  .contribute { display: flex; flex-direction: column; align-items: stretch; margin-top: max(50px, calc(125.7 * var(--u))); }
  .contribute__copy { display: contents; }
  .contribute__title { order: 1; margin-top: 0; }
  .photo-card--cta { order: 2; margin-top: max(20px, calc(50.3 * var(--u))); }
  .contribute__copy .copy { order: 3; margin-top: max(20px, calc(50.3 * var(--u))); margin-left: 0; }
  .contribute__actions { order: 4; justify-content: center; gap: max(10px, calc(25.1 * var(--u))) calc(43 * var(--u)); margin-top: max(24px, calc(60.3 * var(--u))); margin-left: 0; }
  .contribute__actions .btn { flex: none; width: calc(406 * var(--b)); min-width: 0; max-width: none; }

  .feed { margin-top: max(50px, calc(125.7 * var(--u))); }
  .feed__list { grid-template-columns: 1fr; gap: max(16px, calc(40 * var(--u))); }

  .site-footer { margin-top: max(40px, calc(100.6 * var(--u))); }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .social a, .site-header__end, .menu-open .site-header__end, .scrim { transition: none; }
}