/* Numinous Works Limited — main site.
   No third-party requests by design: no web fonts, no analytics, no embeds.
   That is what keeps this page cookie-free and consent-banner-free.
   Adding any of them changes the site's legal posture, not just its looks.
   (The Aethon brand kit imports Google Fonts — deliberately NOT carried over
   here. If those faces are ever wanted on this site, self-host them.) */

:root {
  /* --nw-bg is matched EXACTLY to the baked-in background of the dark lockup
     PNGs (sampled: rgb(11,11,12)). Change it and a rectangle appears around
     the logo. Re-export the lockups transparent to lift this constraint. */
  --nw-bg:      #0B0B0C;
  --nw-ink:     #EDEBE6;
  --nw-muted:   #8A8A8F;
  --nw-faint:   #5C5C63;   /* rules and marks only - 2.8-3.0:1, too dim for text */
  /* Faint TEXT. #5C5C63 failed WCAG AA (PageSpeed, 6 Oct 2026); #85858C is the
     same grey lifted to 4.9:1 on a hovered tile and 5.4:1 on the page. */
  --nw-faint-text: #85858C;
  --nw-rule:    #1E1E22;
  --nw-surface: #131317;
  --nw-focus:   #C9C4B8;

  /* Borrowed from the Aethon brand kit (--accent-fire). Used only on the
     Aethon tile. A future project brings its own accent; the parent site
     stays neutral. */
  --accent-aethon: #FF6B35;

  --nw-gutter: clamp(1.25rem, 5vw, 3rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--nw-bg);
  color: var(--nw-ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Main ---------- */

main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(3rem, 9vh, 5.5rem);
  padding: clamp(2.5rem, 8vh, 5rem) var(--nw-gutter);
  text-align: center;
}

.identity {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.75rem, 5vw, 2.75rem);
}

/* aspect-ratio is set in CSS, per layout, because the two lockups have different
   shapes (1500x560 vs 760x940) and the <img> attributes describe only one. Without
   it the phone layout reserved a too-short box and the page jumped when the stacked
   lockup arrived (mobile CLS 0.212, PageSpeed 6 Oct 2026). */
/* Width is a fixed size, not "100% of a shrink-to-fit parent": inside the centred
   flex column, 100% resolved to zero until the image decoded, so the box was empty
   on first paint and everything below jumped when it arrived. */
/* <picture> is the flex item, and a centred flex item shrinks to fit its content,
   so "100%" inside it is 0 until the image decodes. display: contents makes the
   <img> itself the flex item. */
.identity picture { display: contents; }
.lockup { display: block; width: min(420px, 100%); height: auto; aspect-ratio: 1500 / 560; }

@media (max-width: 559px) {
  .lockup { width: min(230px, 58vw); aspect-ratio: 760 / 940; }
}

.contact {
  color: var(--nw-ink);
  font-size: clamp(0.9375rem, 2.6vw, 1.0625rem);
  letter-spacing: 0.02em;
  text-decoration: none;
  border-bottom: 1px solid var(--nw-faint);
  padding-bottom: 0.15em;
  transition: border-color 120ms ease, color 120ms ease;
  overflow-wrap: anywhere;   /* never force a scrollbar at 320px */
}

.contact:hover, .contact:focus-visible { color: #FFF; border-color: var(--nw-ink); }

:focus-visible { outline: 2px solid var(--nw-focus); outline-offset: 4px; border-radius: 3px; }

/* ---------- Projects ---------- */

.projects { width: 100%; }

.section-label {
  margin: 0 0 1.5rem;
  color: var(--nw-faint-text);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* auto-fit + a max track width: one tile centres at 20rem, two sit side by
   side, three or more wrap. No CSS change needed to add a project. */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 20rem));
  justify-content: center;
  gap: 1rem;
}

.tile {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  /* Right/bottom padding leaves room for the arrow so text never runs under it. */
  padding: 1.25rem 3rem 1.35rem 1.25rem;
  text-align: left;
  text-decoration: none;
  color: inherit;
  background: var(--nw-surface);
  border: 1px solid var(--nw-rule);
  border-radius: 10px;
  transition: border-color 140ms ease, background-color 140ms ease,
              transform 140ms ease;
}

.tile:hover, .tile:focus-visible {
  background: #17171C;
  border-color: #33333D;
  transform: translateY(-2px);
}

.tile-mark {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  margin-top: 0.15rem;
  color: var(--nw-faint);
  transition: color 140ms ease;
}

.tile-mark svg { width: 100%; height: 100%; display: block; }

/* Project accent at rest, not only on hover (Ash, 6 Oct 2026): the mark and the
   status pill carry the project's colour; hover adds the arrow and a lift. */
.tile--aethon { --tile-accent: var(--accent-aethon); --tile-accent-rgb: 255, 107, 53; }
.tile--aethon .tile-mark { color: var(--tile-accent); }

/* The "this goes somewhere" cue. Visible at rest (touch has no hover), lifts to
   the project's accent and nudges right on hover/focus. */
.tile-go {
  position: absolute; right: 1rem; bottom: 1rem;
  width: 22px; height: 22px;
  color: var(--nw-muted);
  transition: color 140ms ease, transform 140ms ease;
}
.tile-go svg { width: 100%; height: 100%; display: block; }
.tile--aethon:hover .tile-go, .tile--aethon:focus-visible .tile-go { color: var(--accent-aethon); transform: translateX(3px); }

.tile-body { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }

.tile-title {
  color: var(--nw-ink);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.35;
}

.tile-desc { color: var(--nw-muted); font-size: 0.8125rem; line-height: 1.5; }

.tile-status {
  margin-top: 0.35rem;
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.2rem 0.6rem 0.2rem 0.5rem;
  border: 1px solid var(--nw-rule);
  border-radius: 999px;
  color: var(--nw-faint-text);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- Contact (after Projects) ---------- */

.contact-line { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.contact-line .section-label { margin: 0; }

/* Status pill in the project's accent: tinted fill, soft border, a small dot.
   #FF6B35 on the tinted pill measures ~5.9:1, so the label stays AA. */
.tile--aethon .tile-status {
  color: var(--tile-accent);
  border-color: rgba(var(--tile-accent-rgb), 0.35);
  background: rgba(var(--tile-accent-rgb), 0.08);
}
.tile-status::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 6px currentColor;
}

/* ---------- Footer: the statutory block ---------- */

footer { border-top: 1px solid var(--nw-rule); padding: clamp(1.75rem, 5vw, 2.5rem) var(--nw-gutter); }

.footer-inner {
  max-width: 62rem; margin: 0 auto;
  display: flex; flex-direction: column; gap: 0.4rem;
}

.entity {
  margin: 0 0 0.35rem;
  color: var(--nw-ink);
  font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.01em;
}

.statutory { margin: 0; color: var(--nw-muted); font-size: 0.8125rem; line-height: 1.65; }
.statutory .crn { color: var(--nw-ink); font-weight: 600; }

.copyright { margin: 0.9rem 0 0; color: var(--nw-faint-text); font-size: 0.75rem; }

/* ---------- Print: this page may be printed as proof of disclosure ---------- */

@media print {
  body { background: #fff; color: #000; }
  .lockup { filter: invert(1); }
  .statutory, .entity, .copyright, .tile-title, .tile-desc { color: #000; }
  .projects { display: none; }
  footer { border-top-color: #000; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .tile:hover, .tile:hover .tile-go { transform: none; }
}