/* nethos.io coming-soon page, in the Automata website's drawing language (see
   automata-website/DESIGN.md): a night surface for the opening, a white paper panel
   with ink rules for the drawing, amber for what needs action, Chakra Petch capitals
   as the annotation voice. Tokens match automata-website's themes/custom/Assessment.css. */

@font-face {
  font-family: "Hubot Sans Expanded";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/hubot-sans-expanded-medium.woff2") format("woff2");
}
@font-face {
  font-family: "Hubot Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/hubot-sans-medium.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/atkinson-hyperlegible-next-latin-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Chakra Petch";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/chakra-petch-latin-600.woff2") format("woff2");
}

:root {
  --ink: #0f1a1f;
  --hair: #d3dadd;
  --amber: #ff9800;
  --night: #0b161c;
  --night-rule: #26373f;
  --night-text: #e8eef1;
  --night-copy: #a7b8c0;
  --night-link: #7fcfec;

  --font-wide: "Hubot Sans Expanded", "Hubot Sans", Arial, sans-serif;
  --font-headline: "Hubot Sans", Arial, sans-serif;
  --font-body: "Atkinson Hyperlegible Next", Arial, sans-serif;
  --font-label: "Chakra Petch", Arial, sans-serif;

  --gutter: clamp(1rem, 4.5vw, 4rem);
}

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

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

body {
  margin: 0;
  background: var(--night);
  color: var(--night-text);
  font: 400 18px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, p, figure { margin: 0; }

a:focus-visible {
  outline: 2px solid var(--night-link);
  outline-offset: 3px;
}

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.label {
  font: 600 14px/1.3 var(--font-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- top bar: status and the parent company --------------------------------- */
.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--night-rule);
}
.status { display: inline-flex; align-items: center; gap: 10px; color: var(--night-text); }
.status__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px rgb(255 152 0 / 18%);
}
.bar__link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--night-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.bar__link:hover { color: #ffffff; text-decoration-thickness: 2px; }

/* --- the opening ------------------------------------------------------------- */
.hero {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 3rem clamp(2rem, 6vw, 6rem);
  align-items: center;
  padding-block: clamp(3rem, 8vh, 6rem);
}
.hero--single { grid-template-columns: minmax(0, 1fr); }

.hero h1 {
  color: #ffffff;
  font-family: var(--font-wide);
  font-size: clamp(56px, 8.5vw, 124px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.95;
}
.hero--single h1 { font-size: clamp(44px, 6vw, 76px); line-height: 1.02; }
.hero__code { margin-bottom: 1.25rem; color: var(--amber); }

.hero__lead {
  max-width: 18em;
  margin-top: 1.75rem;
  color: #ffffff;
  font-family: var(--font-headline);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}
.hero__body { max-width: 46ch; margin-top: 1.25rem; color: var(--night-copy); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 2.25rem;
}

.link {
  display: inline-block;
  padding-block: 10px;
  color: var(--night-link);
  font-size: 16px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.link:hover { color: #ffffff; text-decoration-color: var(--amber); text-decoration-thickness: 3px; }

/* --- the drawing: an inventory, its paths to the boundary, and the one that
   reaches the internet. A paper panel, so amber keeps its contrast. --------- */
.npaths {
  --np-line: #8d9da4;
  padding: 18px 20px 16px;
  border: 1.5px solid var(--ink);
  background: #ffffff;
  color: var(--ink);
}
.npaths__head { position: relative; height: 26px; }
.npaths__head span { position: absolute; top: 0; white-space: nowrap; }
.npaths__label--inventory { left: 3.85%; }
.npaths__label--boundary { left: 63.5%; transform: translateX(-50%); }
.npaths__label--internet { left: 87.5%; transform: translateX(-50%); }
.npaths__drawing { display: block; width: 100%; height: auto; overflow: visible; }

.npaths__boundary { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 6 6; }
.npaths__opening { fill: #ffffff; }
.npaths__closed path { fill: none; stroke: var(--np-line); stroke-width: 4; stroke-linecap: round; }
.npaths__closed .npaths__cap { stroke: var(--ink); }
.npaths__reach { fill: none; stroke: var(--amber); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.npaths__packet {
  fill: var(--ink);
  offset-path: path("M420 160L392.4 132.4Q374 114 348 114L210 114");
  offset-rotate: 0deg;
  offset-distance: 100%;
  opacity: 0;
}
.npaths__row { fill: #f2f5f6; stroke: var(--ink); stroke-width: 1.5; }
.npaths__asset.is-open .npaths__row { fill: #fff1dc; stroke-width: 2.5; }
.npaths__glyph { fill: #ffffff; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.npaths__bar { fill: #b3c1c7; }
.npaths__bar--faint { fill: #d7dfe2; }
.npaths__internet { fill: #ffffff; stroke: var(--ink); stroke-width: 2; }
.npaths__internet ellipse,
.npaths__internet path { fill: none; stroke-width: 1.5; }

.npaths__caption {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--hair);
  font: 600 14px/1.3 var(--font-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.npaths__swatch { width: 22px; height: 6px; border-radius: 3px; background: var(--amber); }

/* On load the internet reaches back along the open path to the asset. */
@media (prefers-reduced-motion: no-preference) {
  .npaths__reach { stroke-dasharray: 1; animation: npaths-draw 900ms cubic-bezier(0.4, 0, 0.2, 1) 600ms backwards; }
  .npaths__packet { animation: npaths-travel 900ms cubic-bezier(0.4, 0, 0.2, 1) 600ms both, npaths-park 300ms ease-out 1500ms forwards; }
  .npaths__asset.is-open .npaths__row { animation: npaths-hit 480ms ease-out 1450ms backwards; }
}
@keyframes npaths-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes npaths-travel { from { offset-distance: 0%; opacity: 1; } to { offset-distance: 100%; opacity: 1; } }
@keyframes npaths-park { from { opacity: 1; } to { opacity: 0; } }
@keyframes npaths-hit { from { fill: var(--amber); } }

@media (max-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .npaths { max-width: 640px; }
}

@media (max-width: 420px) {
  .npaths { padding: 14px 14px 12px; }
  .npaths__label--boundary { display: none; }
}