/* ==========================================================================
   Antaclis — landing page styles

   Everything you are likely to change (colours, fonts, sizes, spacing) is in
   the variables of section 1. Dark is the main design; light mode, used when
   the visitor's device is set to light, only overrides colours.
   ========================================================================== */


/* 0. Fonts (self-hosted, SIL Open Font License; see fonts/LICENSE-*.txt) */

@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}


/* 1. Design tokens */

:root {
  color-scheme: dark light;

  /* Colours: dark theme (default) */
  --bg:          #0D0F22;  /* deep navy, from the logo */
  --text:        #E8EAF2;
  --muted:       #A2A8C0;
  --rule:        rgb(232 234 242 / 0.12);  /* hairlines between sections */
  --accent:      #8AB6F9;  /* logo blue; the only accent colour */
  --accent-hover:#A9C9FB;
  --on-accent:   #0D0F22;  /* text on accent-coloured buttons */
  --field:       #8AB6F9;  /* field-line illustration */
  --field-alpha: 0.6;

  /* Typography */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --size-label: 0.8125rem;                                    /* 13px mono labels */
  --size-body:  1.0625rem;                                    /* 17px */
  --size-lead:  clamp(1.1875rem, 1.05rem + 0.55vw, 1.4375rem);
  --size-h3:    1.25rem;
  --size-large: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);      /* intro statements */
  --size-h1:    clamp(2.75rem, 1.4rem + 6vw, 5.5rem);

  /* Spacing and layout */
  --gutter:   clamp(1rem, 4vw, 2.5rem);   /* page side padding */
  --section:  clamp(4rem, 3rem + 5vw, 7.5rem); /* vertical space between sections */
  --max:      74rem;                      /* content width */
  --measure:  40rem;                      /* comfortable line length for text */
  --radius:   6px;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:          #F6F7FA;
    --text:        #1A1C3A;  /* logo navy */
    --muted:       #50546E;
    --rule:        rgb(26 28 58 / 0.14);
    --accent:      #2E5BBA;  /* logo blue, darkened to be readable on light */
    --accent-hover:#244A9C;
    --on-accent:   #FFFFFF;
    --field:       #2E5BBA;
    --field-alpha: 0.45;
  }
}


/* 2. Base */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--size-body);
  line-height: 1.6;
  font-feature-settings: "cv11", "ss01";  /* Inter: simpler 'a', open digits */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }

a {
  color: inherit;
  text-decoration-color: var(--rule);
  text-underline-offset: 0.2em;
}
a:hover { color: var(--accent); }

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

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Hidden visually, still read by screen readers */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  padding: 0.5rem 0.875rem;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius);
  z-index: 10;
}
.skip-link:focus { top: 0.75rem; }

/* Small monospace labels: section names, the hero eyebrow */
.label {
  font-family: var(--font-mono);
  font-size: var(--size-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.label .num { color: var(--accent); margin-right: 0.75em; }


/* 3. Header */

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
}
.brand:hover { color: inherit; }
.brand img { width: 2rem; height: 2rem; }
.wordmark {
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.site-nav ul { display: flex; gap: clamp(1rem, 3vw, 2rem); }
.site-nav a {
  font-size: 0.875rem;
  color: var(--muted);
  text-decoration: none;
}
.site-nav a:hover { color: var(--text); }

@media (max-width: 26rem) {
  .wordmark { letter-spacing: 0.16em; }
  .site-nav .nav-optional { display: none; }  /* keep the header on one line on small phones */
}


/* 4. Hero */

.hero .wrap {
  display: grid;
  gap: 1rem;
  padding-block: clamp(3rem, 2rem + 6vw, 7rem) clamp(1rem, 4vw, 4rem);
}

.hero .label { display: flex; align-items: center; gap: 0.625rem; }
.hero .label::before {           /* small accent marker */
  content: "";
  width: 0.5rem; height: 0.5rem;
  background: var(--accent);
  border-radius: 50%;
}

.hero h1 {
  margin-top: 1.5rem;
  font-size: var(--size-h1);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.hero .lead {
  margin-top: 1.5rem;
  max-width: 30rem;
  font-size: var(--size-lead);
  line-height: 1.5;
  color: var(--muted);
}

/* Field-line illustration: static SVG from tools/fieldlines.py, replaced by a
   live canvas animation (field.js) when motion is allowed */
.field {
  width: 100%;
  max-width: 32rem;  /* keeps it modest when stacked under the text */
  margin-inline: auto;
  height: auto;
  /* fade the edges so the lines dissolve into the page */
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
}
canvas.field { aspect-ratio: 640 / 500; }  /* live version drawn by field.js */
.field path {
  fill: none;
  stroke: var(--field);
  stroke-opacity: var(--field-alpha);
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* One-time draw-in, only for visitors who have not asked for reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .field path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: draw 2.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: calc(0.2s + var(--i) * 45ms);
  }
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.hero { overflow: clip; }  /* the illustration may extend past the page edge */

@media (min-width: 56rem) {
  .hero .wrap {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
    gap: 0;
  }
  .field { width: 135%; max-width: none; margin-left: -15%; }
}


/* 5. Sections */

/* Hairline aligned with the text (not the padded edge of .wrap) */
.rule-top {
  background: linear-gradient(var(--rule), var(--rule)) no-repeat center top /
              calc(100% - 2 * var(--gutter)) 1px;
}

.section { padding-block: var(--section); }
.section + .section { padding-top: 0; }
.section + .section .wrap { padding-top: var(--section); }

.section-grid { display: grid; gap: 1.5rem 2rem; }
@media (min-width: 56rem) {
  .section-grid { grid-template-columns: 14rem minmax(0, 1fr); }
}

.statement {
  max-width: 44rem;
  font-size: var(--size-large);
  font-weight: 450;
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}


/* What we do */

.blocks {
  display: grid;
  gap: 2.5rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 44rem) {
  .blocks { grid-template-columns: 1fr 1fr; gap: 3rem; }
}
.block { padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.block h3 {
  font-size: var(--size-h3);
  font-weight: 550;
  letter-spacing: -0.01em;
}
.block p { margin-top: 0.75rem; max-width: var(--measure); color: var(--muted); }
.block p + p { margin-top: 1rem; }


/* Team */

.team { display: grid; gap: 2rem; }
@media (min-width: 40rem) { .team { grid-template-columns: 1fr 1fr; gap: 2.5rem 3rem; } }

.person { padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.person a {
  font-size: var(--size-h3);
  font-weight: 550;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.person a .arrow {
  display: inline-block;
  margin-left: 0.25em;
  color: var(--muted);
  font-size: 0.85em;
  transition: transform 0.15s ease, color 0.15s ease;
}
.person a:hover .arrow { color: var(--accent); transform: translate(2px, -2px); }
.person p { margin-top: 0.5rem; color: var(--muted); font-size: 0.9375rem; }


/* Contact */

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2.5rem;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.375rem;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 550;
  text-decoration: none;
  border-radius: var(--radius);
  transition: background-color 0.15s ease;
}
.button:hover { background: var(--accent-hover); color: var(--on-accent); }

.email {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  color: var(--muted);
}


/* 6. Footer */

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-block: 2rem 2.5rem;
  font-size: 0.875rem;
  color: var(--muted);
}