/* ZaiSis Consulting - landing page
   Fonts are self-hosted (SIL Open Font License): Bricolage Grotesque, Michroma. */

@font-face {
  font-family: "Bricolage";
  src: url("../assets/fonts/bricolage-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage";
  src: url("../assets/fonts/bricolage-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Michroma";
  src: url("../assets/fonts/michroma-latin.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Michroma";
  src: url("../assets/fonts/michroma-latin-ext.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --paper: #e9edf3;                      /* cool grey; the washes below add the blue */
  --ink: #0b101a;
  --muted: #4f5b70;
  --rule: rgba(11, 16, 26, 0.18);
  --text: "Bricolage", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --wide: "Michroma", "Eurostile", "Segoe UI", system-ui, sans-serif;
  --gx: 8%;                              /* page gutter */
  --off: 56px;                           /* distance from the line to the text */
  --pad: clamp(5.5rem, 17vh, 11rem);     /* vertical breathing room of a node */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.62 var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* Atmosphere: translucent grey and blue washes over the paper, plus a faint
   measuring grid. Fixed, so the content moves over it like over frosted glass. */
body::before, body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
body::before {
  background:
    radial-gradient(60vw 55vh at 88% 8%, rgba(58, 104, 178, 0.30), transparent 70%),
    radial-gradient(55vw 60vh at 4% 96%, rgba(84, 98, 122, 0.30), transparent 72%),
    radial-gradient(45vw 45vh at 42% 52%, rgba(120, 156, 208, 0.16), transparent 70%),
    linear-gradient(165deg, #f2f4f8 0%, #e3e8f0 55%, #d6deea 100%);
}
body::after {
  background-image: radial-gradient(rgba(11, 16, 26, 0.13) 1px, transparent 1.4px);
  background-size: 30px 30px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
h1, h2, h3, p, ol, dl, dd { margin: 0; padding: 0; }
ol { list-style: none; }
a { color: inherit; }
::selection { background: var(--ink); color: var(--paper); }
.dark ::selection { background: var(--paper); color: var(--ink); }
:focus-visible { outline: 1.5px solid currentColor; outline-offset: 4px; border-radius: 2px; }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 20;
  background: var(--ink); color: var(--paper); padding: .6rem 1rem; text-decoration: none;
}
.skip:focus { top: 1rem; }

/* ---------- header ---------- */
.top {
  position: absolute; inset: 0 0 auto 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center;
  padding: clamp(1.1rem, 3vh, 2rem) var(--gx);
}
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand__mark { width: 30px; height: 30px; }
.brand__name { font: 400 .78rem/1 var(--wide); letter-spacing: .06em; }
.brand__name span { color: var(--muted); }
.mark__l line, .brand__mark line { stroke: currentColor; stroke-linecap: round; }
.brand__mark line { stroke-width: 3; }
.mark__d { fill: currentColor; }

.top__nav { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.2rem); }
.langs { display: inline-flex; gap: .15rem; font: 400 .62rem/1 var(--wide); letter-spacing: .14em; }
.langs a {
  position: relative; padding: .55rem .45rem; text-decoration: none; color: var(--muted);
  transition: color .25s;
}
.langs a:hover { color: inherit; }
.langs a[aria-current] { color: inherit; }
.langs a[aria-current]::after {
  content: ""; position: absolute; left: .45rem; right: .55rem; bottom: .2rem; height: 1px; background: currentColor;
}
.langs a.suggest::before {
  content: ""; position: absolute; right: .05rem; top: .25rem; width: 5px; height: 5px; border-radius: 50%; background: currentColor;
}
.top__contact {
  font: 400 .62rem/1 var(--wide); letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  padding: .7rem 1rem; border: 1px solid var(--rule); border-radius: 99px; transition: background .3s, color .3s, border-color .3s;
}
.top__contact:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- the line ---------- */
main { position: relative; }
.topo {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1;
  pointer-events: none; overflow: visible; color: var(--ink);
}
/* js/site.js keeps a twin of the drawing, clipped to the dark sections, in the light colour */
.topo--inv { color: var(--paper); }
.topo path, .topo line, .topo rect, .topo circle.ring { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; }
.topo .dash { stroke-dasharray: 2 6; }
.topo .dot { fill: currentColor; }
.topo .n { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .7s cubic-bezier(.2, .9, .2, 1.2); }
.topo .n.on { transform: scale(1); }
.topo .fade { opacity: 0; transition: opacity .9s ease; }
.topo .fade.on { opacity: 1; }
.topo .pen { fill: currentColor; transition: opacity .4s; }
.topo .you { transform-box: fill-box; transform-origin: center; animation: you 3.6s ease-in-out infinite; }
@keyframes you { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.9); opacity: 0; } }

/* A pin marks where the line passes; the line itself is drawn by js/site.js. */
.pin {
  position: absolute; left: calc(-1 * var(--off)); top: .05rem;
  width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
}
.pin--stub { left: calc(-1 * var(--off) + 30px); top: .42rem; width: 8px; height: 8px; margin-left: -4px; }
.pin--rule { top: .3rem; width: 8px; height: 8px; margin-left: -4px; }
.pin--end { width: 16px; height: 16px; margin-left: -8px; top: -.1rem; }
html:not(.js) .pin { background: currentColor; }
html:not(.js) .pin--stub, html:not(.js) .pin--end { background: none; border: 1.25px solid currentColor; }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 7rem var(--gx) clamp(4.5rem, 13vh, 8rem);
}
.hero__mark {
  position: absolute; right: 9%; top: 15%;
  width: clamp(230px, 36vw, 520px); aspect-ratio: 1;
}
.mark { width: 100%; height: 100%; overflow: visible; }
.mark line { stroke: currentColor; stroke-width: .2; stroke-linecap: round; }
.pin--root { left: 17.1875%; top: 82.8125%; width: 21.875%; height: 21.875%; margin: -10.9375% 0 0 -10.9375%; }
.hero__text { position: relative; z-index: 2; max-width: 46rem; }
h1 {
  font-weight: 300; font-size: clamp(2.7rem, 7.4vw, 6.6rem); line-height: .96; letter-spacing: -.035em;
  text-wrap: balance; max-width: 11ch;
}
.hero__sub { margin-top: clamp(1.5rem, 4vh, 2.4rem); max-width: min(27rem, 46vw); font-size: 1.14rem; line-height: 1.5; color: var(--muted); }
.hero__slogan { margin-top: 1.6rem; font: 400 .6rem/1.4 var(--wide); letter-spacing: .22em; text-transform: uppercase; }
.hero__follow {
  position: absolute; right: var(--gx); bottom: clamp(1.4rem, 4vh, 2.4rem); z-index: 2;
  font: 400 .58rem/1 var(--wide); letter-spacing: .22em; text-transform: uppercase; text-decoration: none; color: var(--muted);
  transition: color .25s;
}
.hero__follow::after { content: "\2193"; display: inline-block; margin-left: .8em; animation: nudge 2.8s ease-in-out infinite; }
.hero__follow:hover { color: var(--ink); }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

.js .mark line { stroke-dasharray: 40; stroke-dashoffset: 40; animation: spoke 1.5s cubic-bezier(.3, .7, .2, 1) .25s forwards; }
.js .mark circle { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: pop .8s cubic-bezier(.2, .9, .2, 1.15) forwards; }
.js .mark circle:nth-child(1) { animation-delay: .05s; }
.js .mark circle:nth-child(2) { animation-delay: .95s; }
.js .mark circle:nth-child(3) { animation-delay: 1.05s; }
.js .mark circle:nth-child(4) { animation-delay: 1.15s; }
.js .mark circle:nth-child(5) { animation-delay: 1.25s; }
.js .hero__text > *, .js .hero__follow { opacity: 0; transform: translateY(14px); animation: rise 1.1s cubic-bezier(.2, .7, .2, 1) forwards; }
.js .hero__text > :nth-child(1) { animation-delay: .35s; }
.js .hero__text > :nth-child(2) { animation-delay: .6s; }
.js .hero__text > :nth-child(3) { animation-delay: .8s; }
.js .hero__follow { animation-delay: 1.5s; }
@keyframes spoke { to { stroke-dashoffset: 0; } }
@keyframes pop { to { transform: scale(1); } }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- nodes ---------- */
.intro, .node, .how, .field, .contact {
  --x: var(--xd, 8%);
  position: relative;
  padding: var(--pad) 6vw var(--pad) calc(var(--x) + var(--off));
}
.node__in { position: relative; z-index: 2; max-width: 34rem; }
.label {
  font: 400 .62rem/1.3 var(--wide); letter-spacing: .2em; text-transform: uppercase;
}
.label__n { color: var(--muted); margin-right: 1.1em; }
h2 {
  margin-top: 1.5rem; font-weight: 340; font-size: clamp(1.95rem, 3.7vw, 3.15rem); line-height: 1.04; letter-spacing: -.028em;
  text-wrap: balance;
}
.node__body { margin-top: 1.6rem; max-width: 31rem; }
.tools { margin-top: 1.3rem; font-size: .82rem; letter-spacing: .01em; color: var(--muted); }
.entry { position: relative; margin-top: 2.7rem; max-width: 26rem; font-weight: 300; font-size: 1.12rem; line-height: 1.45; }
.entry time { display: block; margin-bottom: .55rem; font: 400 .62rem/1.3 var(--wide); letter-spacing: .16em; color: var(--muted); }

.intro { padding-bottom: calc(var(--pad) * .5); }
.intro .node__in { max-width: 44rem; }
.intro__text { margin-top: 1.6rem; font-weight: 300; font-size: clamp(1.4rem, 2.5vw, 2.15rem); line-height: 1.28; letter-spacing: -.015em; text-wrap: pretty; }

/* reveal: text settles in as the line arrives */
.js .node__in > :not(.pin) { opacity: 0; transform: translateY(16px); transition: opacity 1s ease, transform 1s cubic-bezier(.2, .7, .2, 1); }
.js .seen .node__in > :not(.pin) { opacity: 1; transform: none; }
.js .seen .node__in > :nth-child(3) { transition-delay: .08s; }
.js .seen .node__in > :nth-child(4) { transition-delay: .16s; }
.js .seen .node__in > :nth-child(5) { transition-delay: .24s; }
.js .seen .node__in > :nth-child(6) { transition-delay: .36s; }

/* ---------- how we work ---------- */
.how .node__in { max-width: 40rem; }
.rules { margin-top: 3.2rem; display: grid; gap: 2.6rem; }
.rules li { position: relative; display: grid; grid-template-columns: 3.2rem 1fr; column-gap: .4rem; }
.rule__n { grid-row: span 2; font: 400 .62rem/1.9 var(--wide); letter-spacing: .16em; color: var(--muted); }
.rules h3 { font-weight: 400; font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.2; letter-spacing: -.015em; }
.rules p { margin-top: .5rem; color: var(--muted); max-width: 30rem; }

/* ---------- dark end ---------- */
.dark { background: var(--ink); color: var(--paper); --muted: #9fabc0; --rule: rgba(233, 237, 243, 0.2); }
.field {
  background:
    radial-gradient(70vw 80% at 92% 0%, rgba(58, 104, 178, 0.34), transparent 70%),
    linear-gradient(180deg, #0d1422, var(--ink));
}
.contact { background: radial-gradient(60vw 90% at 0% 100%, rgba(58, 104, 178, 0.22), transparent 70%), var(--ink); }
.field .node__in { max-width: 46rem; }

.contact { padding-bottom: calc(var(--pad) * 1.15); }
.mail {
  display: inline-block; margin-top: 2.6rem;
  font-weight: 300; font-size: clamp(1.55rem, 4.2vw, 3.3rem); line-height: 1.15; letter-spacing: -.025em; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: .12em; transition: background-size .45s cubic-bezier(.2, .7, .2, 1);
}
.mail:hover { background-size: 100% .09em; }

.foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; align-items: center;
  padding: 1.6rem var(--gx) 2rem; border-top: 1px solid var(--rule);
  font-size: .8rem; color: var(--muted);
}
.foot__r { display: flex; align-items: center; gap: 1.4rem; }
.foot .langs a[aria-current], .foot .langs a:hover { color: var(--paper); }

/* ---------- mini-map ---------- */
.minimap {
  position: fixed; right: 26px; top: 50%; transform: translateY(-50%); z-index: 6;
  color: var(--ink); display: none; transition: color .4s;
}
.minimap.inv { color: var(--paper); }
.minimap ol { position: relative; }
.minimap ol::before { content: ""; position: absolute; right: 3.5px; top: 11px; bottom: 11px; width: 1px; background: currentColor; opacity: .35; }
.minimap a { display: flex; justify-content: flex-end; align-items: center; gap: 12px; height: 22px; text-decoration: none; }
.minimap span { font: 400 .54rem/1 var(--wide); letter-spacing: .18em; text-transform: uppercase; opacity: 0; transform: translateX(6px); transition: opacity .3s, transform .3s; white-space: nowrap; }
.minimap i { position: relative; width: 8px; height: 8px; border-radius: 50%; border: 1px solid currentColor; transition: background .3s, transform .3s; }
.minimap a:hover span, .minimap a:focus-visible span, .minimap a.cur span { opacity: 1; transform: none; }
.minimap a.cur i { background: currentColor; transform: scale(1.25); }
@media (min-width: 1180px) { .js .minimap { display: block; } }

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  :root { --gx: 22px; --pad: clamp(4.5rem, 12vh, 7rem); }
  .intro, .node, .how, .field, .contact {
    --x: 26px; --off: calc(80px - var(--x));
    padding-left: 80px; padding-right: 22px;
  }
  .node:nth-of-type(odd), .field { --x: 46px; }
  .pin--stub { left: calc(-1 * var(--off) + 22px); }
  .brand__name span { display: none; }
  .top__contact { display: none; }
  .hero { padding-top: 6rem; }
  /* the mark sits so that its lower node lands in the left gutter, where the line runs */
  .hero__mark { --mw: min(58vw, 230px); width: var(--mw); left: calc(26px - var(--mw) * .171875); right: auto; top: 11%; }
  .hero__text { margin-left: 58px; }
  .hero__sub { max-width: none; }
  h1 { max-width: none; font-size: clamp(2.05rem, 10.2vw, 3rem); }
  .hero__follow { left: 80px; right: auto; }
  .hero { padding-bottom: 5.5rem; }
  .rules li { grid-template-columns: 2.4rem 1fr; }
  .foot { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .mark line { stroke-dashoffset: 0; }
  .js .mark circle { transform: none; }
  .js .hero__text > *, .js .hero__follow, .js .node__in > :not(.pin) { opacity: 1; transform: none; }
  .topo .n, .topo .fade { transform: none; opacity: 1; }
}

@media print {
  .topo, .minimap, .hero__follow, .top__nav { display: none; }
  .js .node__in > :not(.pin), .js .hero__text > * { opacity: 1; transform: none; }
  .dark { background: none; color: inherit; }
}