/* Solidarity Works! International, front page.
   Three logos on one line: the organisation in the middle, a project to each
   side, joined to it by a thin line. The two projects sit on one great ring
   about the organisation, most of which lies off the screen. Under each logo,
   a sentence. A few faint points behind. Nothing else, and no script.

   The picture was drawn 1920 wide. One unit (--u) is one pixel of that
   drawing, so every distance below is a number you could measure on it. */

@font-face { font-family: "Inter"; src: url("fonts/inter-opsz.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;
  --ground: #0A0A0B;
  --ink: #F5F5F3;
  --lead: rgba(245, 245, 243, .82);
  --soft: rgba(245, 245, 243, .62);
  --faint: rgba(245, 245, 243, .46);
  --line: rgba(245, 245, 243, .32);
  --sans: "Inter", ui-sans-serif, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ez: cubic-bezier(.22, .61, .36, 1);
  --u: min(calc(100vw / 1920), 1.2px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 400 1rem/1.6 var(--sans);
  font-synthesis: none; font-kerning: normal; font-optical-sizing: auto; font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: 4px; }
::selection { background: rgba(245, 245, 243, .24); }

.skip { position: absolute; left: -9999px; top: 0; z-index: 9; background: #1A1B1E; color: var(--ink); padding: .7rem 1rem; }
.skip:focus { left: 1rem; top: 1rem; }

/* ——— the first screen */
.hub {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center;
  padding: 4rem 0 5rem;
  background: var(--ground) url("stars.svg") center / cover no-repeat;
}

/* three columns whose centres are 620 apart */
.row {
  position: relative;
  display: grid; align-items: start; justify-content: center;
  grid-template-columns: calc(var(--u) * 380) calc(var(--u) * 430) calc(var(--u) * 380);
  column-gap: calc(var(--u) * 215);
}
.centre { grid-column: 2; grid-row: 1; margin: 0; text-align: center; }
.project { grid-row: 1; text-align: center; }
.project.mya { grid-column: 1; }
.project.gb { grid-column: 3; }

/* every logo is centred in a box of one height, so the three sit on one axis
   and the words beneath them start level */
.logo { display: grid; place-items: center; height: calc(var(--u) * 120); margin: 0; }
.centre .logo img { width: calc(var(--u) * 350); }
.mya .logo img { width: calc(var(--u) * 160); }
.gb .logo img { width: calc(var(--u) * 236); }

.words {
  display: block; margin: calc(var(--u) * 52) 0 0;
  font-size: clamp(.84rem, calc(var(--u) * 16), 1.15rem); line-height: 1.6; letter-spacing: -.004em;
  color: var(--soft); text-wrap: balance;
}
.centre .words { color: var(--lead); }
.addr {
  display: block; margin-top: 1.15em;
  font-size: clamp(.74rem, calc(var(--u) * 13), .9rem); letter-spacing: .005em;
  color: var(--faint); transition: color .2s var(--ez);
}

/* the ring: centred on the organisation, through both projects */
.ring {
  position: absolute; z-index: 0; left: 50%; top: calc(var(--u) * 60);
  width: calc(var(--u) * 1240); height: calc(var(--u) * 1240);
  transform: translate(-50%, -50%);
  border: 1px solid var(--line); border-radius: 50%;
  pointer-events: none;
}

/* a project is one link. It stands in front of the ring, which passes behind
   its logo and its words; a line joins its logo to the organisation's. */
.project { position: relative; z-index: 1; isolation: isolate; display: block; text-decoration: none; }
.project::before {
  content: ""; position: absolute; z-index: -1;
  inset: calc(var(--u) * -28) calc(var(--u) * -10) calc(var(--u) * -26);
  background: var(--ground);
}
.project::after {
  content: ""; position: absolute; top: calc(var(--u) * 60); height: 1px;
  background: var(--line); transition: background-color .25s var(--ez);
}
.mya::after { left: calc(var(--u) * 296); width: calc(var(--u) * 313); }
.gb::after { right: calc(var(--u) * 334); width: calc(var(--u) * 275); }
.project .logo img { transition: transform .35s var(--ez); }
.project:hover .logo img, .project:focus-visible .logo img { transform: scale(1.04); }
.project:hover .addr, .project:focus-visible .addr { color: var(--ink); }
.project:hover::after, .project:focus-visible::after { background: rgba(245, 245, 243, .7); }
.project:focus-visible { outline-offset: calc(var(--u) * 14); }

/* the ring passes behind these too, where a short window brings it down to them */
.foot {
  position: absolute; z-index: 1; left: 50%; bottom: 1.2rem; transform: translateX(-50%); margin: 0;
  display: flex; gap: 1.9rem; padding: .55rem 1.5rem;
  background: var(--ground);
  font-size: .8rem; line-height: 1; white-space: nowrap;
}
.foot a { color: var(--faint); text-decoration: none; transition: color .2s var(--ez); }
.foot a:hover { color: var(--ink); }

/* ——— below the first screen */
.footer { padding: 2.75rem 1.5rem; border-top: 1px solid rgba(245, 245, 243, .08); }
.footer .cols { max-width: 54rem; margin: 0 auto; display: grid; grid-template-columns: 1.15fr .85fr 1.35fr; gap: 2.5rem; }
.footer h2 { margin: 0 0 .8rem; font: 500 .72rem/1 var(--sans); letter-spacing: .02em; color: var(--soft); }
.footer p { margin: 0 0 .55rem; font-size: .78rem; line-height: 1.65; color: var(--faint); }
.footer a { color: var(--soft); text-underline-offset: 3px; transition: color .2s var(--ez); }
.footer a:hover { color: var(--ink); }

/* ——— narrow windows: the organisation on top, a project under it, then the
   other, each joined to the one above by a short line. No ring. */
@media (max-width: 1099.98px) {
  .hub { display: block; padding: 4.5rem 1.5rem 2.75rem; }
  .row { display: flex; flex-direction: column; align-items: center; column-gap: 0; }
  .ring, .project::before { display: none; }
  .centre, .project { width: 100%; max-width: 24rem; }
  .logo { height: auto; }
  .centre .logo img { width: min(17.5rem, 80vw); }
  .mya .logo img { width: 9.5rem; }
  .gb .logo img { width: 13.5rem; }
  .words { margin-top: 1.7rem; font-size: 1rem; }
  .addr { font-size: .82rem; }
  .project { margin-top: 7rem; }
  .mya::after, .gb::after { left: 50%; right: auto; top: auto; bottom: calc(100% + 1.75rem); width: 1px; height: 3.5rem; }
  .foot { position: static; transform: none; justify-content: center; margin-top: 4.75rem; padding: 0; background: none; }
  .footer .cols { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; max-width: 24rem; }
}

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