/* qioqvi.cc — shared styles, v0.3 (flat isometric + motion).
   Direction: deep ocean blue, bright blue/cyan light, open and flowing (no boxed sections). The one bold element is
   the glass server "in deep water" on the home page; everything else stays calm and readable.
   Fonts are self-hosted (no third-party requests) — OFL licences in assets/fonts/. */

@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage-grotesque-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage-grotesque-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage-grotesque-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("fonts/atkinson-hyperlegible-next-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("fonts/atkinson-hyperlegible-next-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("fonts/atkinson-hyperlegible-next-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("fonts/atkinson-hyperlegible-next-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --abyss: #04121F;   /* page background, deepest water */
  --deep: #072238;    /* raised surfaces */
  --sea: #0D3557;     /* the lighter water near the surface */
  --blue: #2D7BFF;    /* the bright accent: royal blue */
  --cyan: #6FE3FF;    /* light inside the glass, highlights */
  --text: #E8F3FF;
  --muted: #93B3CF;
  --hairline: rgba(111, 227, 255, .14);
  --display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --body: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
html, body { overflow-x: clip; }   /* nothing may make the page scroll sideways on phones (clip keeps sticky working) */
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  background-color: #020509;
}
/* The water: one fixed layer behind everything. --depth (0 at the top of the page → 1 at the bottom, set by
   assets/js/site.js while scrolling) takes it from dark ocean blue down to almost black, and the light from the
   surface fades as you go deeper. Without JavaScript it simply stays at the top colour. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 70% at 70% -10%, rgb(47 155 255 / calc(.22 * (1 - var(--depth, 0)))), transparent 60%),
    color-mix(in oklab, #0A2A47 calc((1 - var(--depth, 0)) * 100%), #020509);
}
img, svg { display: block; max-width: 100%; }
a { color: var(--cyan); text-underline-offset: .2em; }
a:hover { color: var(--text); }
p { margin: 0 0 1em; max-width: 64ch; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 0; padding: .5rem 1rem; background: var(--cyan); color: var(--abyss); z-index: 10; }
.skip:focus { left: 1rem; }

.wrap { max-width: 1200px; margin: 0 auto; padding-inline: var(--gutter); }

/* ---------- header ---------- */
.top {
  position: sticky; top: 1rem; z-index: 20;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem;
  max-width: 1200px; margin: 1rem auto 0; padding: .6rem .6rem .6rem 1.6rem;
  border-radius: 18px; background: rgba(7, 34, 56, .72); box-shadow: inset 0 0 0 1px var(--hairline), 0 12px 40px -18px rgba(0,0,0,.7);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.top-gap { height: 0; }
.brand { font-family: var(--display); font-weight: 800; font-size: 1.35rem; color: var(--text); text-decoration: none; letter-spacing: -.02em; }
.nav { display: flex; justify-content: center; gap: clamp(1.25rem, 4vw, 3.25rem); margin: 0; padding: 0; list-style: none; }
.top .pill { justify-self: end; }
.nav a { color: var(--muted); text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 2px; }
.pill {
  display: inline-block; font-family: var(--display); font-weight: 700; text-decoration: none; white-space: nowrap;
  padding: .7rem 1.35rem; border-radius: 12px; color: #fff; background: var(--blue);
  transition: background-color .2s ease, transform .2s ease;
}
.pill:hover { background: #fff; color: var(--abyss); transform: translateY(-1px); }
.pill.ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--hairline); }
.pill.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--cyan); }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--display); line-height: 1.05; margin: 0 0 .5em; letter-spacing: -.025em; }
h1 { font-weight: 800; font-size: clamp(2.5rem, 6vw, 4.5rem); }
h2 { font-weight: 700; font-size: clamp(1.75rem, 3.4vw, 2.6rem); }
h3, .h3 { font-weight: 700; font-size: 1.35rem; letter-spacing: -.01em; }
.lede { font-size: clamp(1.15rem, 1.6vw, 1.35rem); }
.muted { color: var(--muted); }

/* ---------- home ---------- */
.current { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  /* fade the current out by itself (no colour painted over it → no visible edge against the water) */
  -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 100%); mask-image: linear-gradient(180deg, #000 50%, transparent 100%); }
.hero-zone { position: relative; margin-top: -5.5rem; padding-top: 5.5rem; overflow: hidden; }
.hero {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center;
  padding-block: clamp(3rem, 8vw, 7rem) clamp(2.5rem, 6vw, 5rem);
}
.word { display: inline-block; }
.wordmark {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(4.5rem, 16vw, 13.5rem); line-height: .85; letter-spacing: -.055em;
  margin: 0 0 .25em; position: relative; z-index: 1;
  background: linear-gradient(180deg, #FFFFFF 10%, #A9D8FF 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .intro { max-width: 34rem; position: relative; z-index: 1; }
.hero .intro .lede { margin-bottom: .6em; }
.server-wrap { position: relative; }
.server { position: relative; width: 100%; max-width: 480px; margin-inline: auto; height: auto; }

.doors { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1rem, 2.5vw, 1.75rem); padding-bottom: clamp(2rem, 5vw, 4rem); }
.door {
  display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem;
  padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--radius); text-decoration: none; color: var(--text);
  background: linear-gradient(160deg, rgba(47, 155, 255, .16), rgba(7, 34, 56, .55) 60%);
  box-shadow: inset 0 0 0 1px var(--hairline);
  transition: box-shadow .25s ease, transform .25s ease;
}
.door + .door { background: linear-gradient(160deg, rgba(111, 227, 255, .10), rgba(7, 34, 56, .55) 60%); }
.door strong { font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.05; letter-spacing: -.02em; }
.door span { color: var(--muted); max-width: 32ch; }
.door:hover, .door:focus-visible { color: var(--text); box-shadow: inset 0 0 0 1.5px var(--cyan), 0 18px 50px -20px rgba(47, 155, 255, .55); transform: translateY(-3px); }

.status { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; color: var(--muted); padding-bottom: 3rem; }
.dot { width: .6rem; height: .6rem; border-radius: 50%; background: #5EE6A8; box-shadow: 0 0 12px rgba(94, 230, 168, .8); flex: none; }

/* isometric server: the rack powers on once */
.led { opacity: .15; }
@media (prefers-reduced-motion: no-preference) {
  .led { animation: power-on .6s ease-out forwards; }
  .led-1 { animation-delay: .6s; } .led-2 { animation-delay: .9s; } .led-3 { animation-delay: 1.2s; } .led-4 { animation-delay: 1.5s; }
  .server { animation: rise 1.2s cubic-bezier(.2,.7,.2,1) .1s both; }
}
@media (prefers-reduced-motion: reduce) { .led { opacity: 1; } }
@keyframes power-on { to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- home: "how it's protected" — pinned while the walls stack up ---------- */
.stack { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "head art" "copy art";
  grid-template-rows: 1fr 1fr; column-gap: clamp(1.5rem, 5vw, 4rem); min-height: 100vh; padding-block: 4rem; }
.stack-head { grid-area: head; align-self: end; margin-bottom: 1.5rem; }
.stack-copy { grid-area: copy; align-self: start; }
.stack-art { grid-area: art; align-self: center; }
.wall-text { display: grid; gap: 1.25rem; }
.js-stack .wall-text { gap: 0; }
.js-stack .wall-text > div { grid-area: 1 / 1; }  /* animated: all sentences in one spot, shown one at a time */
.wall-text h3 { color: var(--cyan); margin-bottom: .4rem; }
.wall-text p { color: var(--muted); font-size: 1.15rem; }
.progress { display: flex; gap: .4rem; margin-top: 2rem; }
.progress i { width: 1.6rem; height: 4px; border-radius: 2px; background: var(--hairline); }
.progress i.on { background: var(--blue); }
.stack-art svg { width: 100%; max-width: 520px; margin-inline: auto; height: auto; overflow: visible; }
.js-stack .wall-text > div:not(:first-child) { opacity: 0; }
.progress { display: none; } .js-stack .progress { display: flex; }

/* ---------- inner pages: open sections, no boxes ---------- */
.page-head { padding-block: clamp(2.5rem, 7vw, 6rem) clamp(1.5rem, 4vw, 3rem); max-width: 50rem; }
.page-head .lede { color: var(--text); }
.section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: clamp(1.5rem, 5vw, 5rem);
  padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.section + .section { background: linear-gradient(90deg, transparent, var(--hairline), transparent) top / 100% 1px no-repeat; }
.section .side p { color: var(--muted); }

.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); padding-block: 1rem clamp(2.5rem, 6vw, 4.5rem); }
.feature .glyph { width: 2.75rem; height: 2.75rem; margin-bottom: 1rem; }
.feature p { color: var(--muted); }

.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; align-items: baseline; }
.steps li::before {
  content: counter(step); font-family: var(--display); font-weight: 800; color: var(--abyss); background: var(--cyan);
  width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; align-self: start;
}
.plain { margin: 0; padding-left: 1.1rem; display: grid; gap: .7rem; }
.plain li::marker { color: var(--blue); }
.soon { color: var(--muted); font-style: italic; white-space: nowrap; }
.guide-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.guide-list li { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.walls { margin: 0; display: grid; grid-template-columns: 13rem 1fr; gap: 1.1rem 2rem; }
.walls dt { font-family: var(--display); font-weight: 700; font-size: 1.1rem; }
.walls dd { margin: 0; color: var(--muted); }

.projects { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.25rem) clamp(2rem, 5vw, 4rem); }
.project h3 { display: flex; align-items: center; gap: .7rem; }
.project h3::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); flex: none; }
.project p { color: var(--muted); margin-bottom: .6rem; }
.project .tech { color: var(--blue); font-size: .95rem; }
.project.later h3::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }

footer { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--muted); font-size: .95rem;
  padding-block: 2.5rem 3rem; margin-top: 2rem;
  background: linear-gradient(90deg, transparent, var(--hairline), transparent) top / 100% 1px no-repeat; }
footer a { color: var(--muted); }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .stack { grid-template-columns: 1fr; grid-template-areas: "head" "art" "copy"; grid-template-rows: auto; min-height: auto; }
  .stack-head { margin-bottom: 1rem; }
  .server-wrap { margin: 0 auto; max-width: 300px; order: -1; }
  .doors, .features, .projects, .section { grid-template-columns: 1fr; }
  .walls { grid-template-columns: 1fr; gap: .2rem; }
  .walls dd { margin-bottom: 1rem; }
}
@media (max-width: 640px) {
  .top { grid-template-columns: 1fr auto; gap: .35rem 1rem; margin: .6rem .6rem 0; top: .6rem; padding: .5rem .5rem .5rem 1.1rem; }
  .top nav { grid-column: 1 / -1; grid-row: 2; }
  .nav { justify-content: space-around; padding: .35rem 0 .25rem; border-top: 1px solid var(--hairline); }
  .nav a { padding: .35rem .5rem; }
  .hero-zone { margin-top: -8.5rem; padding-top: 8.5rem; }
  .hero { padding-block: 1.5rem 2rem; }
  .headline { max-width: none; }
}