/* Sounds of a Sphere: coming-soon and 404. Styled after the SOAS-WEBSITE Figma: light grain ground,
   soft drifting colour blooms, LT Remark titles with softly blurred edges, Plus Jakarta Sans labels. */
@font-face {
  font-family: "LT Remark";
  src: url(/assets/LTRemark-Regular.woff2) format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
:root {
  --ground: #e5e5e5;
  --ink: #2c3439;
  --muted: #797979;
  --line: #ccd6dd;
  --dot: #e0a37b;
  --accent: #513b23;
  --display: "LT Remark", Georgia, serif;
  --sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--ground) url(/assets/grain.png);
  background-blend-mode: screen;
  color: var(--ink);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* One soft bloom, as in the Figma frame (SOAS-WEBSITE 2186:2): #FFC984 → #DF6A42 at 50%, blurred 100px,
   tilted ~8.7°, sitting a little above centre so the light grain ground shows around it. */
.bloom {
  position: fixed; left: 50%; top: 38%;
  width: max(80vw, 640px); height: max(52vw, 460px);
  translate: -50% -50%; rotate: 8.66deg;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffc984 22%, #df6a42 78%);
  opacity: .5;
  filter: blur(min(100px, 14vw));
  pointer-events: none;
  animation: drift 40s ease-in-out infinite alternate;
}
@keyframes drift { to { translate: -46% -46%; rotate: 5deg; } }

main {
  position: relative; min-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
}

.emblem { position: relative; width: 72px; height: 72px; margin-bottom: 28px; }
.emblem::before {
  content: ""; position: absolute; inset: -12px; border-radius: 50%;
  background: radial-gradient(circle, #fffbf2 0 30%, transparent 70%);
  opacity: .45; filter: blur(5px);
}
.emblem img { position: relative; display: block; width: 100%; height: 100%; animation: spin 60s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px;
  font: 700 11px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--accent);
}
.eyebrow::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dot); }

/* Title (404): a sharp copy and a blurred copy, cross-faded by a mask so the edges go soft. */
h1 {
  position: relative; margin: 0;
  font: 400 clamp(2.8rem, 12vw, 7rem)/.95 var(--display);
  letter-spacing: -.035em; color: var(--accent);
  text-wrap: balance;
  /* Only the right-hand end goes soft. */
  --focus: linear-gradient(to right, #000 72%, transparent 96%);
  --soft: linear-gradient(to right, transparent 74%, #000 98%);
}
/* Padding (cancelled by negative margins) gives the masks room, so the blur and descenders aren't cut off at the box edge. */
h1 .sharp, h1 .soft { padding: .12em .18em .2em; margin: -.12em -.18em -.2em; }
h1 .sharp { display: block; -webkit-mask-image: var(--focus); mask-image: var(--focus); }
h1 .soft { position: absolute; inset: 0; filter: blur(.03em); -webkit-mask-image: var(--soft); mask-image: var(--soft); }

/* Homepage title: the "sounds of a sphere" wordmark (Ogelo, outlined to soundsofasphere.svg, as on the Figma rail), with
   the same soft right-hand end. Each outer span fades (its mask applies after its blur); the inner <i> is the
   wordmark shape filled with the accent colour. The outer spans overhang the box so the blur isn't clipped. */
h1.wordmark { width: min(84vw, 720px); aspect-ratio: 210 / 28; }
h1.wordmark .sharp, h1.wordmark .soft { position: absolute; inset: -12% -3%; padding: 0; margin: 0; }
h1.wordmark .soft { filter: blur(clamp(1.2px, .32vw, 3px)); }
h1.wordmark i {
  position: absolute; inset: 9.68% 2.83%; background: var(--accent);
  -webkit-mask: url(/assets/soundsofasphere.svg) no-repeat center / contain; mask: url(/assets/soundsofasphere.svg) no-repeat center / contain;
}

.lede { margin: 20px 0 0; max-width: 34ch; color: var(--ink); }
.lede a { color: var(--accent); text-underline-offset: 3px; }

.rule { width: 56px; height: 1px; background: var(--line); margin: 30px auto; }

nav ul { list-style: none; display: flex; gap: 12px; margin: 0; padding: 0; justify-content: center; }
nav a {
  display: grid; place-items: center; width: 48px; height: 48px;
  border: .5px solid var(--line); border-radius: 50%;
  background: rgba(255, 255, 255, .3); color: var(--accent);
  transition: background .2s, border-color .2s;
}
nav a:hover, nav a:focus-visible { background: rgba(255, 255, 255, .7); border-color: var(--accent); }
nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
nav img { display: block; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .bloom, .emblem img { animation: none; }
}