/* srcfvz.eu — Swiss poster cycle. See the contract comment in index.html. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(/fonts/archivo-latin-wdth-normal.woff2) format("woff2-variations");
  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: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(/fonts/archivo-latin-ext-wdth-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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;
}

:root {
  --ink: #0e0e10;
  --paper: #ecebe6;
  --violet: #5536d6;
  --lime: #d3ef3a;
  --cobalt: #1d45f5;
  --orange: #ff4f17;

  --gutter: clamp(16px, 4vw, 56px);
  --col-gap: clamp(12px, 2vw, 28px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --rule: 1px solid currentColor;

  --step--1: clamp(.82rem, .78rem + .2vw, .94rem);
  --step-0: clamp(1rem, .96rem + .2vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.1rem + .7vw, 1.6rem);
  --step-2: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  --display: clamp(3.2rem, 1.6rem + 7.4vw, 6rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--step-0);
  line-height: 1.5;
  font-stretch: 100%;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }

.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--paper); color: var(--ink); padding: 8px 12px; }
.skip:focus { left: 8px; }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px 24px;
  padding: 16px var(--gutter);
  background: var(--nav-bg, var(--ink)); color: var(--nav-fg, var(--paper));
  transition: background-color .4s var(--ease), color .4s var(--ease);
  font-size: var(--step--1); font-weight: 600; letter-spacing: .01em;
}
.nav a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s var(--ease); }
.nav a:hover, .nav a:focus-visible, .nav a[aria-current] { background-size: 100% 1px; }
.nav__home { font-weight: 800; font-stretch: 75%; font-size: var(--step-1); line-height: 1; }
.nav ul { display: flex; gap: clamp(14px, 2.4vw, 32px); }
@media (max-width: 720px) {
  .nav { flex-direction: column; padding-block: 12px 10px; }
  .nav nav { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .nav ul { gap: 16px; white-space: nowrap; }
  .poster { padding-top: 128px; }
}

/* ---------- posters ---------- */
.poster {
  position: relative;
  min-height: 100svh;
  padding: clamp(96px, 14vh, 150px) var(--gutter) clamp(64px, 10vh, 120px);
  overflow: hidden;
  isolation: isolate;
}
.poster--ink    { background: var(--ink);    color: var(--paper); }
.poster--paper  { background: var(--paper);  color: var(--ink); }
.poster--violet { background: var(--violet); color: #fff; }
.poster--lime   { background: var(--lime);   color: var(--ink); }
.poster--cobalt { background: var(--cobalt); color: #fff; }
.poster--orange { background: var(--orange); color: var(--ink); }

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: clamp(40px, 7vh, 88px);
  max-width: 1440px; margin-inline: auto;
}
.grid > * { grid-column: 1 / -1; }
.poster > .grid { width: 100%; }

.display {
  font-size: var(--display);
  font-weight: 800; font-stretch: 68%;
  line-height: .88; letter-spacing: -.02em;
  text-wrap: balance;
}
.lead { font-size: var(--step-2); font-weight: 500; font-stretch: 88%; line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; max-width: 22ch; }
.small, .note, figcaption { font-size: var(--step--1); line-height: 1.45; max-width: 46ch; }
.poster__head { display: grid; gap: 22px; align-content: start; }
h3 { font-size: var(--step--1); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }

/* reveal: content is visible by default; motion only adds a lift once JS confirms */
.js .poster__head > * { transition: transform 1.1s var(--ease), opacity 1.1s var(--ease); }
.js .poster:not(.is-on) .poster__head > * { transform: translateY(28px); opacity: .001; }
.js .poster__head > :nth-child(2) { transition-delay: .12s; }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-rows: 1fr auto; padding-bottom: clamp(20px, 4vh, 40px); }
.hero .grid { align-items: end; }
.hero__claim { grid-column: 1 / span 6; align-self: end; display: grid; gap: 18px; }
.hero__claim .lead { max-width: 16ch; }
.hero__claim .small { opacity: .72; }
.logotype { margin: clamp(28px, 5vh, 56px) auto 0; max-width: 1440px; width: 100%; }
.logotype svg { width: 100%; height: auto; overflow: visible; }
.logotype text { fill: var(--paper); font-family: "Archivo", sans-serif; font-weight: 800; font-stretch: 62%; font-size: 252px; letter-spacing: -6px; }

.stack { grid-column: 8 / span 5; position: relative; align-self: end; }
.stack ol { display: grid; gap: 6px; }
.stack li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 10px 14px;
  border: var(--rule);
  font-size: var(--step--1);
}
.hero.is-on .stack li { animation: layer 6s linear infinite; animation-delay: calc(var(--i) * .6s); }
.stack li span { font-weight: 700; font-stretch: 80%; font-size: var(--step-1); line-height: 1; }
.stack li i { font-style: normal; opacity: .7; text-align: right; }
@keyframes layer {
  0%, 9% { background: var(--orange); color: var(--ink); border-color: var(--orange); }
  13%, 100% { background: transparent; color: var(--paper); border-color: var(--paper); }
}
.stack__probe {
  position: absolute; left: -26px; top: 0; width: 12px; height: 12px; border-radius: 50%;
  background: var(--orange);
}
.hero.is-on .stack__probe { animation: probe 6s linear infinite; }
.stack__probe::before { content: ""; position: absolute; left: 5px; bottom: 100%; width: 2px; height: clamp(80px, 22vh, 220px); background: var(--orange); }
@keyframes probe {
  0% { transform: translateY(8px); }
  60% { transform: translateY(calc(var(--stack-h, 360px) - 20px)); }
  60.01%, 100% { transform: translateY(calc(var(--stack-h, 360px) - 20px)); opacity: 0; }
}
@media (max-width: 860px) {
  .hero__claim { grid-column: 1 / -1; }
  .stack { grid-column: 2 / -1; }
}

/* ---------- needles ---------- */
#needles .poster__head { grid-column: 1 / span 5; }
.week { grid-column: 7 / -1; align-self: end; display: grid; gap: 14px; }
.week__grid {
  position: relative; display: grid; grid-template-columns: repeat(5, 1fr);
  aspect-ratio: 5 / 3; border-top: 2px solid #fff;
  background: repeating-linear-gradient(to right, transparent 0 calc(20% - 1px), rgb(255 255 255 / .28) calc(20% - 1px) 20%);
}
.week__grid span { font-size: var(--step--1); font-weight: 600; padding: 6px 0 0 6px; }
.bk { position: absolute; width: calc(20% - 10px); border-radius: 2px; background: #fff; }
.bk--a { left: calc(0% + 5px);  top: 22%; height: 34%; }
.bk--b { left: calc(20% + 5px); top: 48%; height: 40%; background: var(--lime); }
.bk--c { left: calc(40% + 5px); top: 18%; height: 28%; background: var(--orange); }
.bk--d { left: calc(80% + 5px); top: 30%; height: 50%; }
.bk--drag { left: calc(60% + 5px); top: 26%; height: 30%; background: transparent; border: 2px dashed #fff; }
.week__x { position: absolute; left: calc(20% + 5px); top: 40%; width: calc(20% - 10px); height: 30%; opacity: 0; pointer-events: none; }
.week__x::before, .week__x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 46%; height: 3px; background: var(--ink); transform-origin: center; }
.week__x::before { transform: translate(-50%, -50%) rotate(45deg); }
.week__x::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.is-on .bk--drag { animation: drag 4.8s var(--ease) infinite 0.6s; }
.is-on .week__x  { animation: refuse 4.8s ease-out infinite 0.6s; }
@keyframes drag {
  0%, 8%   { transform: translate(0, 0); background: transparent; }
  30%, 44% { transform: translate(-200%, 50%); background: rgb(255 255 255 / .35); }
  47%      { transform: translate(-190%, 50%); }
  50%      { transform: translate(-210%, 50%); }
  53%      { transform: translate(-196%, 50%); }
  72%, 100%{ transform: translate(0, 0); background: transparent; }
}
@keyframes refuse { 0%, 42% { opacity: 0; } 46%, 60% { opacity: 1; } 70%, 100% { opacity: 0; } }

.facts { grid-column: 1 / span 5; display: grid; gap: 0; border-top: 2px solid #fff; align-self: start; }
.facts li { padding: 14px 0; border-bottom: 1px solid rgb(255 255 255 / .45); font-size: var(--step--1); }
.facts b { display: block; font-size: var(--step-1); font-stretch: 85%; font-weight: 700; line-height: 1.15; margin-bottom: 2px; }

.shots {
  grid-column: 7 / -1; position: relative;
  display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: auto auto;
}
.shots img { width: 100%; height: auto; box-shadow: 0 30px 60px -24px rgb(0 0 0 / .55); }
.shots__main  { grid-column: 1 / span 6; grid-row: 1; aspect-ratio: 16 / 6; object-fit: cover; object-position: 50% 100%; }
.shots__side  { grid-column: 1 / span 4; grid-row: 2; margin-top: var(--col-gap); }
.shots__phone { grid-column: 5 / span 2; grid-row: 1 / span 2; align-self: end; justify-self: end; width: 88%; border-radius: 14px; z-index: 1; }
.js .poster:not(.is-on) .shots img { transform: translateY(60px); opacity: .001; }
.js .shots img { transition: transform 1.2s var(--ease), opacity 1.2s var(--ease); }
.js .shots img:nth-child(2) { transition-delay: .15s; }
.js .shots img:nth-child(3) { transition-delay: .3s; }
#needles .note { grid-column: 7 / -1; margin-top: calc(var(--col-gap) * -2); opacity: .8; }
.go {
  grid-column: 1 / span 5; grid-row: 4; align-self: end;
  display: inline-flex; align-items: center; gap: .3em; justify-self: start;
  font-size: var(--step-2); font-weight: 700; font-stretch: 80%; text-decoration: none;
  border-bottom: 2px solid currentColor; padding-bottom: 4px;
}
.go svg { width: .9em; height: .9em; fill: none; stroke: currentColor; stroke-width: 2.4; transition: transform .4s var(--ease); }
.go:hover svg { transform: translate(4px, -4px); }
@media (max-width: 860px) {
  #needles .poster__head, .week, .facts, .shots, #needles .note, .go { grid-column: 1 / -1; grid-row: auto; }
  #needles .note { margin-top: 0; }
}

/* ---------- homelab ---------- */
.lab .poster__head { grid-column: 1 / span 5; }
.rings { grid-column: 6 / -1; grid-row: 1 / span 2; position: relative; align-self: start; justify-self: end; width: 100%; max-width: 640px; }
.rings svg { width: 100%; overflow: visible; }
.ring { fill: none; stroke: var(--paper); stroke-width: 1.5; opacity: .5; }
.core { fill: var(--paper); }
.req { fill: var(--orange); transform-box: view-box; }
.is-on .req { animation: req 5.6s cubic-bezier(.65, 0, .35, 1) infinite; }
.is-on .r1 { animation: gate 5.6s infinite; animation-delay: 0s; }
.is-on .r2 { animation: gate 5.6s infinite; animation-delay: .7s; }
.is-on .r3 { animation: gate 5.6s infinite; animation-delay: 1.4s; }
.is-on .r4 { animation: gate 5.6s infinite; animation-delay: 2.1s; }
@keyframes req {
  0%   { transform: translate(-300px, -300px); }
  10%  { transform: translate(-198px, -198px); }
  22%  { transform: translate(-151px, -151px); }
  34%  { transform: translate(-105px, -105px); }
  46%  { transform: translate(-58px, -58px); }
  58%, 92% { transform: translate(0, 0); }
  100% { transform: translate(0, 0); opacity: 0; }
}
@keyframes gate {
  0%, 6%   { stroke: var(--paper); opacity: .5; stroke-width: 1.5; }
  10%, 16% { stroke: var(--orange); opacity: 1; stroke-width: 6; }
  26%, 100%{ stroke: var(--paper); opacity: .5; stroke-width: 1.5; }
}
.rings__labels { position: absolute; inset: 0; pointer-events: none; font-size: var(--step--1); font-weight: 600; }
.rings__labels li { position: absolute; left: 50%; transform: translate(-50%, -50%); padding: 2px 8px; background: var(--ink); white-space: nowrap; }
.rings__labels li:nth-child(1) { top: 3.33%; }
.rings__labels li:nth-child(2) { top: 14.33%; }
.rings__labels li:nth-child(3) { top: 25.33%; }
.rings__labels li:nth-child(4) { top: 36.33%; }
.rings__labels li:nth-child(5) { top: 50%; background: none; color: var(--ink); font-weight: 800; font-size: .7rem; }

.backup { grid-column: 1 / span 5; display: grid; gap: 18px; align-self: start; align-content: start; }
.backup__dots { display: flex; gap: 10px; }
.backup__dots i { width: clamp(48px, 7vw, 84px); aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--paper); }
.backup__dots i:nth-child(1) { background: var(--paper); }
.is-on .backup__dots i:nth-child(2) { animation: fill 4s var(--ease) infinite .4s; }
.is-on .backup__dots i:nth-child(3) { animation: fillo 4s var(--ease) infinite 1s; }
@keyframes fill  { 0%, 10% { background: transparent; } 30%, 100% { background: var(--paper); } }
@keyframes fillo { 0%, 10% { background: transparent; border-color: var(--paper); } 30%, 100% { background: var(--orange); border-color: var(--orange); } }
.backup dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; border-top: var(--rule); padding-top: 12px; }
.backup dt { font-size: var(--step-2); font-weight: 800; font-stretch: 70%; line-height: 1; }
.backup dd { margin: 4px 0 0; font-size: var(--step--1); opacity: .8; }

.alerts { grid-column: 1 / span 5; display: grid; gap: 14px; align-self: start; align-content: start; }
.alerts ol { display: flex; align-items: center; flex-wrap: wrap; gap: 0; font-weight: 700; font-stretch: 85%; }
.alerts li { display: flex; align-items: center; }
.alerts li:not(:last-child)::after { content: ""; width: clamp(18px, 3vw, 40px); height: 2px; margin: 0 8px; background: currentColor; }
.alerts li:last-child { color: var(--orange); }
.alerts figcaption { opacity: .75; }

.uses { grid-column: 7 / -1; display: grid; gap: 14px; align-content: start; }
.uses ul { border-top: var(--rule); }
.uses li { padding: 12px 0; border-bottom: 1px solid rgb(236 235 230 / .25); font-size: var(--step-1); font-stretch: 92%; line-height: 1.25; }
@media (max-width: 860px) {
  .lab .poster__head, .rings, .backup, .alerts, .uses { grid-column: 1 / -1; grid-row: auto; }
  .rings { max-width: 420px; margin-inline: auto; justify-self: center; }
}

/* ---------- trading ---------- */
#trading .poster__head { grid-column: 1 / span 6; }
.bars { grid-column: 1 / -1; display: grid; gap: 10px; }
.bars__plot {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(4px, 1vw, 14px);
  height: clamp(220px, 34vh, 360px);
  position: relative;
  background: linear-gradient(var(--ink), var(--ink)) 0 75% / 100% 2px no-repeat;
}
.bars__plot i {
  --h: calc(var(--v) / 3.2 * 75%);
  position: relative; height: 100%;
}
.bars__plot i::before {
  content: ""; position: absolute; left: 0; right: 0;
  bottom: 25%; height: max(var(--h), calc(var(--h) * -1));
  background: var(--ink);
  transform-origin: bottom;
  transform: scaleY(1);
}
.bars__plot i.l::before { bottom: auto; top: 75%; transform-origin: top; background: transparent; border: 2px solid var(--ink); }
.js .poster:not(.is-on) .bars__plot i::before { transform: scaleY(0); }
.js .bars__plot i::before { transition: transform .9s var(--ease); }
.bars__plot i:nth-child(1)::before { transition-delay: .05s }  .bars__plot i:nth-child(2)::before { transition-delay: .13s }
.bars__plot i:nth-child(3)::before { transition-delay: .21s }  .bars__plot i:nth-child(4)::before { transition-delay: .29s }
.bars__plot i:nth-child(5)::before { transition-delay: .37s }  .bars__plot i:nth-child(6)::before { transition-delay: .45s }
.bars__plot i:nth-child(7)::before { transition-delay: .53s }  .bars__plot i:nth-child(8)::before { transition-delay: .61s }
.bars__plot i:nth-child(9)::before { transition-delay: .69s }  .bars__plot i:nth-child(10)::before { transition-delay: .77s }
.bars__plot i:nth-child(11)::before { transition-delay: .85s } .bars__plot i:nth-child(12)::before { transition-delay: .93s }
.pipe { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--col-gap); border-top: 2px solid var(--ink); }
.pipe li { padding-top: 14px; font-size: var(--step--1); position: relative; }
.pipe b { display: block; font-size: var(--step-1); font-weight: 800; font-stretch: 75%; line-height: 1.1; margin-bottom: 6px; }
.pipe li::before { content: ""; position: absolute; top: -8px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); }
@media (max-width: 860px) { .pipe { grid-template-columns: 1fr 1fr; row-gap: 28px; } #trading .poster__head { grid-column: 1 / -1; } }

/* ---------- șmecherbot ---------- */
.bot .poster__head { grid-column: 1 / span 6; }
.soon { font-size: var(--step-1); font-weight: 700; font-stretch: 80%; display: inline-flex; align-items: center; gap: 10px; }
.soon::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--lime); animation: blink 1.6s steps(2) infinite; }
@keyframes blink { 50% { opacity: .15; } }
.curve { grid-column: 1 / -1; }
.curve svg { width: 100%; height: auto; overflow: visible; }
.pts circle { fill: #fff; opacity: .8; }
.fit, .future, .deal-line { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; }
.fit { stroke-dasharray: 520; stroke-dashoffset: 0; }
#needles { min-height: 0; }
.js .bot:not(.is-on) .fit { stroke-dashoffset: 520; }
.js .fit { transition: stroke-dashoffset 2s var(--ease) .2s; }
.future { stroke-dasharray: 4 14; opacity: .7; }
.deal { fill: var(--lime); }
.deal-line { stroke: var(--lime); stroke-width: 2; stroke-dasharray: 4 6; }
.is-on .deal { animation: pulse 2s ease-out infinite 2s; transform-box: fill-box; transform-origin: center; }
@keyframes pulse { 0% { transform: scale(1); } 30% { transform: scale(1.6); } 60%, 100% { transform: scale(1); } }
.bot { min-height: 0; }
.bot__text { grid-column: 7 / -1; grid-row: 1; align-self: end; max-width: 30ch; font-size: var(--step-1); line-height: 1.28; }
@media (max-width: 860px) {
  .bot .poster__head, .bot__text { grid-column: 1 / -1; grid-row: auto; }
  .fit, .future, .deal-line { vector-effect: non-scaling-stroke; stroke-width: 3; }
  .deal-line { stroke-width: 2; }
}

/* ---------- background ---------- */
.bg .poster__head { grid-column: 1 / span 7; }
.bg .lead { max-width: 26ch; }
.gantt { grid-column: 1 / -1; }
.gantt__axis { position: relative; height: 22px; border-bottom: 2px solid var(--ink); font-size: var(--step--1); font-weight: 700; }
.gantt__axis span { position: absolute; bottom: 4px; }
.gantt__axis span:nth-child(1) { left: 0; }
.gantt__axis span:nth-child(2) { left: calc(3 / 13 * 100%); }
.gantt__axis span:nth-child(3) { left: calc(6 / 13 * 100%); }
.gantt__axis span:nth-child(4) { left: calc(9 / 13 * 100%); }
.gantt__axis span:nth-child(5) { left: calc(12 / 13 * 100%); }
.gantt ol { display: grid; gap: 6px; padding-top: 12px; }
.gantt li { position: relative; height: clamp(30px, 4.2vh, 40px); }
.gantt li::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(var(--s) / 13 * 100%); width: calc((var(--e) - var(--s)) / 13 * 100%);
  min-width: 8px; background: var(--ink); transform-origin: left;
}
.gantt li.now::before { background: var(--violet); }
.gantt li.now::after { content: ""; position: absolute; top: 50%; left: calc(var(--e) / 13 * 100%); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--violet); animation: blink 1.6s steps(2) infinite; }
@media (max-width: 860px) { .gantt li.now::after { top: auto; bottom: -1px; } }
.gantt li span { position: absolute; top: 50%; transform: translateY(-50%); left: calc(var(--e) / 13 * 100% + 10px); white-space: nowrap; font-size: var(--step--1); font-weight: 600; }
.gantt li:nth-child(3) span, .gantt li:nth-child(5) span { left: calc(var(--s) / 13 * 100% + 10px); color: var(--paper); }
.gantt li:nth-child(n+6) span { left: auto; right: calc(100% - var(--s) / 13 * 100% + 10px); }
.js .bg:not(.is-on) .gantt li::before { transform: scaleX(0); }
.js .gantt li::before { transition: transform 1.1s var(--ease); }
.gantt li:nth-child(2)::before { transition-delay: .08s } .gantt li:nth-child(3)::before { transition-delay: .16s }
.gantt li:nth-child(4)::before { transition-delay: .24s } .gantt li:nth-child(5)::before { transition-delay: .32s }
.gantt li:nth-child(6)::before { transition-delay: .4s }  .gantt li:nth-child(7)::before { transition-delay: .48s }
.gantt li:nth-child(8)::before { transition-delay: .56s }
.skills { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px var(--col-gap); }
.skills div { border-top: 2px solid var(--ink); padding-top: 12px; display: grid; gap: 6px; }
.skills p { font-size: var(--step--1); max-width: 36ch; }
@media (max-width: 860px) {
  .bg .poster__head { grid-column: 1 / -1; }
  .skills { grid-template-columns: 1fr 1fr; }
  .gantt li span, .gantt li:nth-child(3) span, .gantt li:nth-child(5) span, .gantt li:nth-child(n+6) span {
    position: static; display: block; transform: none; white-space: normal; color: var(--ink);
  }
  .gantt li { height: auto; padding-bottom: 16px; }
  .gantt li::before { height: 10px; top: auto; bottom: 0; }
  .gantt ol { gap: 10px; }
}
@media (max-width: 480px) { .skills { grid-template-columns: 1fr; } }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-rows: 1fr auto; min-height: 90svh; }
.contact .grid { align-content: center; }
.contact .display, .contact__links { grid-column: 1 / -1; }
.contact .display { font-size: clamp(3.6rem, 1rem + 12vw, 6rem); }
.contact__links { display: grid; gap: 6px; }
.contact__links a {
  font-size: var(--step-2); font-weight: 700; font-stretch: 85%; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  transition: background-size .5s var(--ease);
}
.contact__links a:hover, .contact__links a:focus-visible { background-size: 100% 2px; }
.foot { display: flex; gap: 22px; flex-wrap: wrap; max-width: 1440px; width: 100%; margin: 0 auto; padding-top: 40px; font-size: var(--step--1); font-weight: 600; }
.foot span { margin-right: auto; }

/* ---------- reduced motion: final states, no loops ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .poster:not(.is-on) .poster__head > *, .js .poster:not(.is-on) .shots img { transform: none; opacity: 1; }
  .js .poster:not(.is-on) .bars__plot i::before, .js .bg:not(.is-on) .gantt li::before { transform: none; }
  .js .bot:not(.is-on) .fit { stroke-dashoffset: 0; }
  .stack__probe { display: none; }
  .bk--drag { transform: translate(-200%, 50%); background: rgb(255 255 255 / .35); }
  .week__x { opacity: 1; }
  .backup__dots i:nth-child(2) { background: var(--paper); }
  .backup__dots i:nth-child(3) { background: var(--orange); border-color: var(--orange); }
}

/* ---------- legal pages ---------- */
.legal { min-height: 100svh; }
.legal__body { grid-column: 1 / span 8; display: grid; gap: 18px; max-width: 68ch; }
.legal__body h2 { font-size: var(--step-1); font-weight: 800; font-stretch: 80%; margin-top: 12px; }
.legal .nav { --nav-bg: var(--paper); --nav-fg: var(--ink); }
@media (max-width: 860px) { .legal__body { grid-column: 1 / -1; } }