/*
  sistemik.cl — one stylesheet, no build step.

  The server's Content-Security-Policy is `style-src 'self'` and
  `script-src` is absent: no inline <style>, no style="" attributes, no
  scripts. Everything visual lives in this file. (The policy is set in the
  sistemik.cl block of the Caddyfile in Sistemik-SpA/aevia.)

  One rule runs through the whole page: English is always the lighter line.
  Spanish is the document language; every English line is a translation set
  in --ink-soft, the way bilingual signage sets its second language.
*/

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #f1f3f2;
  --box: #ffffff;
  --ink: #1e2b33;
  --ink-soft: #55646d;
  --rule: #c6cfcf;
  --flow: #147b38;
  --font: Archivo, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #12191d;
    --box: #1a242a;
    --ink: #dce4e8;
    --ink-soft: #9aa8b0;
    --rule: #34424b;
    --flow: #4cc47a;
  }
}

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

html {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.6;
  font-weight: 400;
}

[lang="en"] {
  color: var(--ink-soft);
}

a {
  color: inherit;
}

a:focus-visible {
  outline: 3px solid var(--flow);
  outline-offset: 4px;
}

.page {
  max-width: 70rem;
  margin: 0 auto;
  padding-inline: clamp(1rem, 4vw, 3rem);
  padding-block: clamp(2.5rem, 7vw, 5.5rem) 2.5rem;
}

/* ------------------------------------------------------------------------
   The system diagram

   Grid cells, not a drawing: every label is live text, so it reflows,
   selects, translates and reads aloud. The dashed boundary is its own grid
   item spanning the processes; the flow is a second item laid across the
   boundary's edge, so it visibly crosses it.

   Narrow screens (default): the diagram runs top to bottom and the flow
   leaves through the bottom edge. Wide screens: left to right, out through
   the right edge.
   ------------------------------------------------------------------------ */

.system {
  --stroke: 2px;
  --flow-stroke: 3px;
  --head: 14px;
  --pad: 1.25rem;
  --box-h: 5.25rem;
  --name: clamp(2rem, 1rem + 4.6vw, 4.25rem);

  display: grid;
  grid-template-columns: var(--pad) minmax(0, 1fr) var(--pad);
  grid-template-rows:
    calc(var(--name) * 0.5 + 0.75rem)
    var(--box-h)
    0.75rem
    var(--box-h)
    calc(var(--pad) + 0.25rem)
    2.75rem
    auto;
  padding-top: calc(var(--name) * 0.5);
}

.boundary {
  grid-column: 1 / 4;
  grid-row: 1 / 6;
  border: var(--stroke) dashed var(--ink);
}

/* The company name is the boundary's label, set on the line itself. */
.name {
  grid-column: 1 / 4;
  grid-row: 1;
  align-self: start;
  justify-self: start;
  position: relative;
  z-index: 2;
  margin: 0 0 0 calc(var(--pad) - 0.3em);
  padding-inline: 0.3em;
  background: var(--paper);
  transform: translateY(-52%);
  font-size: var(--name);
  font-weight: 700;
  font-stretch: 125%;
  line-height: 1;
  letter-spacing: -0.012em;
  white-space: nowrap;
}

.process {
  grid-column: 2;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: 0.75rem 1.125rem;
  background: var(--box);
  border: var(--stroke) solid var(--ink);
  font-size: 1.0625rem;
  font-weight: 560;
  line-height: 1.35;
}

.process span {
  font-size: 0.9375rem;
  font-weight: 400;
}

.process--consulting {
  grid-row: 2;
}

.process--software {
  grid-row: 4;
}

/* The product flow: a line with a head, drawn as a background so a single
   clip-path can reveal the line and its head together. */
.flow {
  /* Where the reveal starts. The media query below swaps this value rather
     than the animation's name: naming a second keyframe restarted the
     animation every time the layout crossed the breakpoint, so resizing a
     window (or rotating a phone) made the arrow vanish and redraw. */
  --flow-hidden: inset(0 0 100% 0);
  grid-column: 2;
  grid-row: 5 / 7;
  justify-self: start;
  position: relative;
  z-index: 2;
  width: var(--head);
  margin-left: 2rem;
  background: linear-gradient(var(--flow), var(--flow)) center top /
    var(--flow-stroke) calc(100% - var(--head) + 2px) no-repeat;
}

.flow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--head);
  height: var(--head);
  background: var(--flow);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.product {
  grid-column: 2 / 4;
  grid-row: 7;
  justify-self: start;
  display: block;
  margin: 0.625rem 0 0 calc(2rem - 0.15em);
  text-decoration: none;
  color: var(--ink);
}

.product-name {
  display: block;
  font-size: 2.25rem;
  font-weight: 700;
  font-stretch: 125%;
  line-height: 1;
  letter-spacing: -0.012em;
  color: var(--flow);
}

.product-line {
  display: block;
  font-size: 1rem;
  line-height: 1.4;
  text-wrap: balance;
}

.product-name + .product-line {
  margin-top: 0.5rem;
}

.product-url {
  display: inline-block;
  margin-top: 0.625rem;
  font-weight: 560;
  text-decoration: underline;
  text-decoration-color: var(--flow);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}

.product:hover .product-url {
  text-decoration-thickness: 3px;
}

@media (min-width: 52rem) {
  .system {
    --pad: 2.5rem;
    --box-h: 5.5rem;
    --name: clamp(3rem, 0.75rem + 4vw, 4.25rem);

    /* The third column is `auto`, not `1fr`: the name spans columns 1-3 and
       never wraps, so the boundary is always at least as wide as its label
       (and takes any spare width after that). With `1fr` the product column
       took its full width first and
       squeezed the name onto two lines just above the breakpoint. The
       process column needs a real minimum for the same reason: at zero, the
       `auto` column absorbs the whole of the name's width and the boxes
       collapse. */
    grid-template-columns:
      var(--pad)
      minmax(14rem, 17rem)
      auto
      4.5rem
      minmax(13rem, 17rem);
    grid-template-rows:
      calc(var(--name) * 0.5 + 1.25rem)
      var(--box-h)
      1rem
      var(--box-h)
      var(--pad);
  }

  .boundary {
    grid-row: 1 / 6;
  }

  .process--software {
    grid-row: 2;
  }

  .process--consulting {
    grid-row: 4;
  }

  .flow {
    --flow-hidden: inset(0 100% 0 0);
    grid-column: 3 / 5;
    grid-row: 2;
    align-self: center;
    justify-self: stretch;
    width: auto;
    height: var(--head);
    margin-left: 0;
    background: linear-gradient(var(--flow), var(--flow)) left center /
      calc(100% - var(--head) + 2px) var(--flow-stroke) no-repeat;
  }

  .flow::after {
    left: auto;
    right: 0;
    top: 0;
    bottom: auto;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
  }

  /* Spans both process rows so its extra lines hang below without
     stretching the software row; the padding puts the product name's
     centre on the flow line. */
  .product {
    grid-column: 5;
    grid-row: 2 / 6;
    align-self: start;
    margin: 0;
    padding: calc(var(--box-h) / 2 - 1.125rem) 0 0 0.875rem;
  }
}

/* The one moment of motion: the product flow leaves the system. Once, on load,
   in whichever direction the layout runs. */
@media (prefers-reduced-motion: no-preference) {
  .flow {
    animation: flow-in 0.8s cubic-bezier(0.3, 0.7, 0.2, 1) 0.35s both;
  }
}

@keyframes flow-in {
  from {
    clip-path: var(--flow-hidden);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* ------------------------------------------------------------------------
   Prose, the company record, the colophon
   ------------------------------------------------------------------------ */

.about {
  display: grid;
  gap: 1.25rem 3.5rem;
  margin-top: clamp(3rem, 7vw, 5rem);
}

.about p {
  margin: 0;
  max-width: 36em;
  text-wrap: pretty;
}

.record {
  display: grid;
  gap: 1.25rem 3rem;
  margin: clamp(2.5rem, 6vw, 4rem) 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

.record dt {
  font-size: 0.875rem;
  line-height: 1.4;
}

.record dt span {
  display: block;
}

.record dd {
  margin: 0.375rem 0 0;
  font-weight: 560;
}

.colophon {
  display: grid;
  gap: 0.25rem 3.5rem;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.colophon p {
  margin: 0;
}

.colophon .copyright {
  margin-top: 0.75rem;
}

@media (min-width: 30rem) {
  .record {
    grid-template-columns: repeat(2, minmax(0, max-content));
    justify-content: start;
  }
}

@media (min-width: 52rem) {
  .about {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .record {
    grid-template-columns: repeat(4, minmax(0, max-content));
  }

  .colophon {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .colophon .copyright {
    grid-column: 1 / -1;
  }
}

/* ------------------------------------------------------------------------
   404
   ------------------------------------------------------------------------ */

/* Same container and left edge as the home page; only the text is narrower. */
.missing > * {
  max-width: 36rem;
}

.missing h1 {
  margin: 0;
  font-size: clamp(2rem, 1.25rem + 3vw, 3rem);
  font-weight: 700;
  font-stretch: 125%;
  line-height: 1.1;
  letter-spacing: -0.012em;
}

.missing p {
  margin: 0.75rem 0 0;
}

.missing .home {
  display: inline-block;
  margin-top: 2rem;
  font-weight: 560;
  text-decoration-color: var(--flow);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}