/* Energy Variance — "How it works".
   Same black view as the landing page: white on black, Archivo throughout
   (words and labels). Four inputs on one side, two outputs on the
   other, and the veins between them are drawn on the canvas (explainer.js). */

:root {
  --black: #000000;
  --white: #FFFFFF;
  --dim:   #7C8288;
  --dimmer:#4A4F54;          /* rules and underlines only: 2.5:1 on black */
  --line:  #26292D;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* The central circle. explainer.js measures this element, so changing the
     size here is all it takes — the veins follow. */
  --core: clamp(130px, 30vmin, 320px);

  color-scheme: dark;
}

* { box-sizing: border-box; }

/* One view at any ordinary size, and allowed to scroll when it is not one
   (200% zoom, a short window): it used to be `overflow: hidden` on html and
   body, which left whatever fell below the fold unreachable. The body is the
   canvas's box, so the veins scroll with the labels they start at. */

body {
  position: relative;
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--display);
  font-variation-settings: "wdth" 100, "wght" 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--white); color: var(--black); }

:focus-visible { outline: 1px solid var(--white); outline-offset: 4px; }

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

/* ---------- the veins ---------- */

#veins {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

/* ---------- stage ---------- */

/* At least one view tall; the middle row never shrinks below its content,
   so a view too short for the diagram makes the page longer rather than
   laying the lists over the header and footer. */
.stage {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(16px, 3vh, 34px) clamp(20px, 4vw, 56px);
  pointer-events: none;
}

.stage a,
.stage button { pointer-events: auto; }

.mono {
  font-family: var(--display);
  font-variation-settings: "wdth" 100, "wght" 500;
  font-size: 10.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  font-weight: 400;
}

.top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px 16px;
}

.wordmark {
  font-family: var(--display);
  font-variation-settings: "wdth" 116, "wght" 600;
  font-size: 15px;
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--white);
  text-decoration: none;
}

/* The logo after the name, a little taller than the line of text. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}

.wm-logo {
  display: block;
  height: 1.92em;
  width: auto;
}

/* The three pages, opposite the wordmark. The page you are on is the bright
   one. */
.nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;            /* on a very narrow screen a link drops to a second line */
  justify-content: flex-end;
  margin-left: auto;          /* stays at the right even if it wraps under the wordmark */
  gap: 10px clamp(16px, 2.6vw, 32px);
}

.nav > a {
  font-family: var(--display);
  font-variation-settings: "wdth" 100, "wght" 500;
  font-size: 10.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}

.nav > a:hover,
.nav > a:focus-visible { color: var(--white); }

.nav > a[aria-current="page"] {
  color: var(--white);
  border-bottom-color: var(--dimmer);
}


/* Phones: the links sit on the left, under the name. */
@media (max-width: 560px) {
  .nav { flex-basis: 100%; margin-left: 0; justify-content: flex-start; }
}

/* The smallest phones: tighten the three tabs so they stay on one line. */
@media (max-width: 360px) {
  .nav { column-gap: 12px; }
  .nav > a { letter-spacing: 0.1em; }
}

/* The address closes the page, centred. */
.foot {
  display: flex;
  justify-content: center;
}

/* The address: set like the tabs, in full. A click copies it and "Copied"
   takes its place for a moment; the two share one grid cell so nothing
   shifts. */
.contact {
  display: inline-grid;
  padding: 0 0 3px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  cursor: pointer;
  font-family: var(--display);
  font-variation-settings: "wdth" 100, "wght" 500;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--white);
  transition: border-color 160ms ease;
}

.contact > span {
  grid-area: 1 / 1;
  white-space: nowrap;
  text-align: center;
}

.contact:hover,
.contact:focus-visible { border-bottom-color: var(--dimmer); }

.contact-done {
  visibility: hidden;
  font-size: 10.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #84E8C8;
}

.contact.copied .contact-address { visibility: hidden; }
.contact.copied .contact-done { visibility: visible; }

/* ---------- inputs | core | outputs ---------- */

/* --stack is read by explainer.js: 0 = inputs on the left and outputs on the
   right, 1 = inputs across the top and outputs across the bottom. */
.flow {
  --stack: 0;
  display: grid;
  grid-template-columns: minmax(0, 22vw) minmax(0, 1fr) minmax(0, 22vw);
  align-items: center;
}

.core {
  position: relative;
  width: var(--core);
  aspect-ratio: 1;
  justify-self: center;
  display: grid;
  place-items: center;
}

/* A soft scrim so the mark reads over the dots of the sphere behind it — the
   same trick the landing page uses under its strapline. */
.core::before {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle at center,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.7) 52%,
    transparent 74%
  );
}

.logo {
  position: relative;
  width: 86%;
  height: auto;
  display: block;
}

.col { min-width: 0; }

.inputs  { text-align: right; }
.outputs { text-align: left; }

.tag {
  display: block;
  margin: 0 0 clamp(14px, 2.4vh, 26px);
  font-family: var(--display);
  font-variation-settings: "wdth" 100, "wght" 500;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--white);
}

.items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 5vh, 54px);
}

.item { display: block; }


.name {
  display: block;
  font-variation-settings: "wdth" 106, "wght" 500;
  font-size: clamp(17px, 1.75vw, 30px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* The outputs are what the page is about, so they are set a size up. */
.outputs .name { font-size: clamp(20px, 2.25vw, 38px); }

/* ---------- narrow or tall: inputs across the top, outputs across the bottom ---------- */

/* explainer.js reads --stack rather than repeating this query, so the
   breakpoint lives here and nowhere else. */
@media (max-aspect-ratio: 11/10), (max-width: 560px) {
  /* The middle row never shrinks below the circle: on a view too short for
     it the page grows and scrolls instead of the lists sliding over it. */
  .flow {
    --stack: 1;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
  }

  .core { --core: clamp(104px, 30vmin, 230px); align-self: center; }

  /* room between the header and the first row, and the last row and the foot */
  .flow { margin-block: 18px; }

  .inputs, .outputs { text-align: center; }

  .tag { margin-bottom: 14px; }

  .items {
    display: grid;
    gap: 8px;
  }
  .inputs .items  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .outputs .items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }


  .name {
    font-size: clamp(11px, 3.2vw, 17px);
    letter-spacing: -0.015em;
  }
  .outputs .name { font-size: clamp(15px, 4.6vw, 24px); letter-spacing: -0.025em; }
}

/* Under 300px (a phone at 200% zoom) four names across no longer fit whole
   words: let them hyphenate rather than run into each other. */
@media (max-width: 300px) {
  .inputs .name {
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: anywhere;
  }
}

/* A phone on its side: little height to spare, so tighten the lists. */
@media (max-height: 560px) and (min-aspect-ratio: 11/10) and (min-width: 561px) {
  .items { gap: 10px; }
  .name { font-size: clamp(14px, 1.7vw, 20px); }
  .outputs .name { font-size: clamp(16px, 2vw, 26px); }
  .tag { margin-bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
}