/* iliona.net: the compute hall. A deep night ground, rows of machines in
   cool light, the GPU machines in warm gold. The words keep to the calm left
   of the page; the hall stands to their right. */

/* French sets a narrow no-break space (U+202F) before ; : ! ? and inside « ». Archivo lacks
   that glyph: "Fine" holds only U+202F, 1/8 em wide, and every stack starts with it. */
@font-face { font-family: "Fine"; src: url(/assets/fonts/fine.woff2) format("woff2"); unicode-range: U+202F; font-display: swap; }
@font-face { font-family: "Archivo X"; font-weight: 300; font-display: swap; src: url(/assets/fonts/archivo-x300-latin.woff2) format("woff2"); 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 X"; font-weight: 300; font-display: swap; src: url(/assets/fonts/archivo-x300-latin-ext.woff2) format("woff2"); 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; }
@font-face { font-family: "Archivo X"; font-weight: 500; font-display: swap; src: url(/assets/fonts/archivo-x500-latin.woff2) format("woff2"); 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 X"; font-weight: 500; font-display: swap; src: url(/assets/fonts/archivo-x500-latin-ext.woff2) format("woff2"); 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; }
@font-face { font-family: "Archivo"; font-weight: 400; font-display: swap; src: url(/assets/fonts/archivo-400-latin.woff2) format("woff2"); 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-weight: 400; font-display: swap; src: url(/assets/fonts/archivo-400-latin-ext.woff2) format("woff2"); 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; }
@font-face { font-family: "Archivo"; font-weight: 600; font-display: swap; src: url(/assets/fonts/archivo-600-latin.woff2) format("woff2"); 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-weight: 600; font-display: swap; src: url(/assets/fonts/archivo-600-latin-ext.woff2) format("woff2"); 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; }

/* metric-matched fallbacks: the page does not reflow when Archivo arrives */
@font-face { font-family: "Archivo fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo"); size-adjust: 98%; ascent-override: 89.8%; descent-override: 21.4%; line-gap-override: 0%; }
@font-face { font-family: "Archivo X fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo"); size-adjust: 123.2%; ascent-override: 71.4%; descent-override: 17%; line-gap-override: 0%; }

/* The palette (DESIGN.md). The renderer reads --g-l, --g-c and --g-h, and
   --cold and --hot, so the hall's haze and the page's ground are one colour. */
:root {
  --g-l: 0.16; --g-c: 0.04; --g-h: 262;
  --ground: oklch(var(--g-l) var(--g-c) var(--g-h));  /* deep night    #050d1e */
  --deep: oklch(0.13 0.033 262);      /* the floor     #020714 */
  --lamp: oklch(0.93 0.014 250);      /* night white   #e1e9f1, 15.8:1 */
  --ash: oklch(0.76 0.03 255);        /* dim text      #a5b2c4, 9.0:1 */
  --cold: oklch(0.9 0.07 222);        /* machine light #abe9ff */
  --hot: oklch(0.86 0.13 68);         /* GPU light     #ffc06e */
  --hair: oklch(0.76 0.03 255 / 0.24);
  --display: "Fine", "Archivo X", "Archivo X fallback", "Archivo", sans-serif;
  --text: "Fine", "Archivo", "Archivo fallback", sans-serif;
  --gut: max(6vw, 24px);              /* 20 px under 400 px wide (below) */
  --gl: calc(var(--gut) + env(safe-area-inset-left, 0px));
  --gr: calc(var(--gut) + env(safe-area-inset-right, 0px));
  --head: 7rem;                       /* the header band: 112 px, 76 px on a phone */
  color-scheme: dark;
}
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: 0.2s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--head) + 1.5rem); }
body {
  margin: 0; background: var(--ground); color: var(--lamp);
  font: 400 1.0625rem/1.6 var(--text); font-kerning: normal;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
h1, h2, p, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2 { font-family: var(--display); font-weight: 300; text-wrap: balance; letter-spacing: -0.01em; }
p, dd, li { text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.24em; text-decoration-color: oklch(0.9 0.07 222 / 0.6); }
a:hover { text-decoration-color: var(--cold); }
:focus-visible { outline: 2px solid var(--cold); outline-offset: 3px; border-radius: 2px; }
::selection { background: oklch(0.9 0.07 222 / 0.3); color: var(--lamp); }
.skip {
  position: absolute; left: var(--gl); top: 8px; z-index: 20; padding: 10px 14px;
  background: var(--lamp); color: var(--ground); font-weight: 600; text-decoration: none; transform: translateY(-160%);
}
.skip:focus { transform: none; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nw { white-space: nowrap; }

/* ── the hall ──────────────────────────────────────────────────────────── */
.hall {
  position: fixed; inset: 0 0 auto 0; width: 100%; height: 100lvh; z-index: 0;
  display: block; opacity: 0; pointer-events: none; touch-action: pan-y pinch-zoom;
}
.lit .hall { opacity: 1; }
/* without WebGL (or without script): the same hall, drawn once */
.fallback {
  display: none; position: fixed; inset: 0 0 auto 0; height: 100lvh; z-index: 0;
  background: var(--ground) url(/assets/hall.webp) 100% 50% / cover no-repeat;
}
.nogl .hall { display: none; }
.nogl .fallback { display: block; }
/* the calm: the words sit on the ground, the hall stands to their right */
.home::before {
  content: ""; position: fixed; inset: 0 auto auto 0; width: 66%; height: 100lvh; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--ground) 0, var(--ground) 68%, oklch(var(--g-l) var(--g-c) var(--g-h) / 0.72) 82%, oklch(var(--g-l) var(--g-c) var(--g-h) / 0));
}

/* ── header ────────────────────────────────────────────────────────────── */
/* A band of ground as tall as a corporate letterhead, the name set large in it,
   and a short fade below so the hall slips under it. */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  display: flex; flex-wrap: wrap; align-content: center; align-items: baseline; justify-content: space-between; gap: 0 1rem;
  min-height: calc(var(--head) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) var(--gr) 0 var(--gl);
  background: var(--ground);
}
.top::after {
  content: ""; position: absolute; inset: 100% 0 auto 0; height: 1.75rem; pointer-events: none;
  background: linear-gradient(var(--ground), oklch(var(--g-l) var(--g-c) var(--g-h) / 0));
}
/* The wordmark: Archivo Expanded 500 in caps, cap height 24 px from 1024 px wide
   and 16 px at 390 px (font size = cap height / 0.686), tracked open for caps. */
.mark {
  display: flex; flex-wrap: nowrap; column-gap: 0.36em;
  font: 500 clamp(23.3px, calc(16.14px + 1.841vw), 35px)/1.12 var(--display);
  letter-spacing: 0.035em; text-decoration: none; color: var(--lamp); white-space: nowrap;
}
.mark span { display: block; }
.links { display: flex; align-items: baseline; gap: 0.4rem 1.6rem; font-size: min(0.9375rem, 16px); }
/* each link is a 44 px target; the underline shows on hover and focus only */
.links a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; text-decoration: none; color: var(--ash); }
.links a:hover, .links a:focus-visible { text-decoration-line: underline; color: var(--lamp); }
.links a[aria-current] { color: var(--lamp); }

/* ── sections ──────────────────────────────────────────────────────────── */
main { position: relative; z-index: 2; }
.sec { min-height: 76vh; min-height: 76svh; display: grid; align-content: center; padding: 7rem var(--gr) 7rem var(--gl); }
.col { width: min(34rem, 40vw); }
.col > * + * { margin-top: 1.1rem; }
.hero { position: relative; min-height: 100vh; min-height: 100svh; align-content: end; padding-bottom: 16svh; }
h1 { font-size: clamp(2.25rem, 1rem + 2.7vw, 3.5rem); line-height: 1.06; }
.lede { font-size: 1.1875rem; line-height: 1.55; color: var(--lamp); max-width: 30em; }
.hero .lede { margin-top: 1.6rem; }
h2 { font-size: clamp(1.5rem, 0.95rem + 1.25vw, 2.125rem); line-height: 1.12; }
.col > h2 + * { margin-top: 1.3rem; }
.sec p, .sec dd { color: var(--ash); }
.crescendo { min-height: 128svh; }
.crescendo h2 { font-size: clamp(1.875rem, 1rem + 2.1vw, 3rem); line-height: 1.06; color: var(--lamp); }
.crescendo h2::after { content: ""; display: block; width: 3.5rem; height: 2px; margin-top: 1.4rem; background: var(--hot); }
.end { min-height: 90svh; }
.sites, .figures { display: grid; gap: 0.2rem; margin-top: 1.6rem; }
.sites div { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; padding-block: 0.7rem; border-top: 1px solid var(--hair); }
.sites dt { color: var(--lamp); }
/* the compute: a set of figures, two abreast, each in the display face over what it measures */
.figures { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.25rem, 2.5vw, 2.5rem); }
.figures div { display: grid; align-content: start; gap: 0.3rem; padding-block: 0.9rem 0.6rem; border-top: 1px solid var(--hair); }
.figures dd { order: -1; font: 300 clamp(1.5rem, 0.9rem + 1.4vw, 2.25rem)/1.1 var(--display); color: var(--lamp); white-space: nowrap; }
.figures dt { font-size: 0.9375rem; color: var(--ash); text-wrap: balance; }
/* the areas: a name over its definition */
.areas { display: grid; gap: 0.2rem; margin-top: 1.6rem; }
.areas div { padding-block: 0.8rem; border-top: 1px solid var(--hair); }
.areas dt { color: var(--lamp); }
.areas dd { margin-top: 0.25rem; }

/* ── the pause control ─────────────────────────────────────────────────── */
/* the bottom-right corner of the hero, on every screen, clear of the words */
.pause {
  position: absolute; z-index: 3;
  right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 44px; height: 44px; border-radius: 50%; padding: 0; cursor: pointer;
  background: oklch(var(--g-l) var(--g-c) var(--g-h) / 0.82); border: 1px solid var(--hair); color: var(--ash);
  display: grid; place-items: center;
}
.pause:hover, .pause:focus-visible { color: var(--lamp); border-color: oklch(0.76 0.03 255 / 0.5); }
.pause svg { width: 20px; height: 20px; overflow: visible; }
.pause .i-pause { fill: none; stroke: currentColor; stroke-width: 3; }
.pause .i-play { fill: currentColor; display: none; }
.pause[aria-pressed="true"] .i-pause { display: none; }
.pause[aria-pressed="true"] .i-play { display: inline; }
.pause[hidden] { display: none; }
.still .pause, .nogl .pause { display: none; }

/* ── footer ────────────────────────────────────────────────────────────── */
.foot {
  position: relative; z-index: 2; background: var(--ground); padding: 4rem var(--gr) calc(2rem + env(safe-area-inset-bottom, 0px)) var(--gl);
  --family-ink: var(--lamp); --family-dim: var(--ash); --family-line: var(--hair); --family-ground: transparent;
}
.legal { display: flex; flex-wrap: wrap; gap: 0.3rem 2rem; align-items: center; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--hair); font-size: 0.875rem; color: var(--ash); }
.legal a { display: inline-flex; align-items: center; min-height: 44px; }

/* ── pages without the hall: legal notice, contact, 404 ────────────────── */
.page { position: relative; z-index: 2; padding: calc(var(--head) + env(safe-area-inset-top, 0px) + 4rem) var(--gr) 5rem var(--gl); }
.page .col { width: min(40rem, 100%); }
.page h1 { font-size: clamp(2rem, 1.2rem + 2vw, 3rem); }
.page h2 { font-size: 1.3125rem; font-weight: 500; margin-top: 2.8rem; }
.page p, .page li, .page dd { color: var(--ash); max-width: 40em; }
.page dt { color: var(--lamp); }
.page .col > h2 + * { margin-top: 0.9rem; }
.page .col > * + p { margin-top: 0.8rem; }
.doc dl { display: grid; gap: 0.5rem; margin-top: 1rem; }
.doc dl div { display: grid; grid-template-columns: 13rem 1fr; gap: 1rem; }
.doc ul { margin-top: 0.8rem; }
.doc ul li { padding-left: 1.1rem; position: relative; }
.doc ul li + li { margin-top: 0.4rem; }
.doc ul li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 6px; height: 1px; background: var(--ash); }
.doc .col > .note { margin-top: 2.8rem; padding-top: 1rem; border-top: 1px solid var(--hair); }
address { font-style: normal; }
/* the band of machine light that crowns every page without the hall */
.inner::before {
  content: ""; position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 11; pointer-events: none;
  background: linear-gradient(90deg, oklch(var(--g-l) var(--g-c) var(--g-h) / 0), var(--cold) 30%, var(--hot) 62%, oklch(var(--g-l) var(--g-c) var(--g-h) / 0));
  opacity: 0.55;
}

/* ── the contact form ──────────────────────────────────────────────────── */
.contact { display: grid; gap: 1.2rem; margin-top: 2.4rem; max-width: 36rem; }
.contact p { margin: 0; }
.contact label { display: block; margin-bottom: 0.45rem; font-size: 0.9375rem; color: var(--lamp); }
.contact input, .contact textarea {
  width: 100%; padding: 0.75rem 0.9rem; font: inherit; color: var(--lamp);
  background: var(--deep); border: 1px solid oklch(0.76 0.03 255 / 0.38); border-radius: 3px;
}
.contact textarea { resize: vertical; min-height: 10rem; line-height: 1.5; }
.contact input:focus-visible, .contact textarea:focus-visible { outline: 2px solid var(--cold); outline-offset: 1px; border-color: transparent; }
.contact-trap { position: absolute; left: -100vw; }
.contact-note { font-size: 0.875rem; }
.contact button {
  justify-self: start; min-height: 48px; padding: 0 1.6rem; cursor: pointer;
  font: 500 0.9375rem/1 var(--display); letter-spacing: 0.02em;
  color: var(--ground); background: var(--lamp); border: 0; border-radius: 3px;
}
.contact button:hover { background: var(--cold); }
.contact button:disabled { opacity: 0.6; cursor: progress; }
.contact-status { min-height: 1.6em; color: var(--lamp); }

/* ── portrait tablet and phone: the hall above, the words below ────────── */
/* Each section is a panel of ground over the fixed hall, with a window of the
   hall above it, a little over a third of the screen: the flight shows between
   the panels without long empty stretches. The panel reaches 8 px from the
   screen's edges; its text keeps the gutter. (main.js reads the same query.) */
@media (max-width: 899px) and (min-height: 501px) {
  .home::before { display: none; }
  .col { width: min(36rem, 100%); }
  .sec { min-height: 0; align-content: end; padding-block: 36vh 0; padding-block: 36svh 0; }
  .sec .col { --pan: calc(var(--gut) - 8px); background: var(--ground); margin-inline: calc(-1 * var(--pan)); padding: 1.4rem var(--pan) 1.6rem; width: calc(100% + 2 * var(--pan)); max-width: calc(36rem + 2 * var(--pan)); border-radius: 4px; }
  .hero { min-height: 100vh; min-height: 100svh; padding-block: 52svh calc(76px + env(safe-area-inset-bottom, 0px)); } /* the whole first screen; the words end above the pause control */
  /* the words stand on the ground: the hall fades out just above the heading,
     wherever the heading falls on the screen */
  .hero .col { position: relative; background: none; padding-block: 0; }
  .hero .col::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    inset: -9svh calc(-8px - env(safe-area-inset-right, 0px)) calc(-76px - env(safe-area-inset-bottom, 0px) - 2.5rem) calc(-8px - env(safe-area-inset-left, 0px));
    background: linear-gradient(oklch(var(--g-l) var(--g-c) var(--g-h) / 0), var(--ground) 9svh, var(--ground) calc(100% - 2.5rem), oklch(var(--g-l) var(--g-c) var(--g-h) / 0));
  }
  .crescendo { padding-top: 46svh; }
  .fallback { background-position: 60% 0; background-size: auto 62lvh; }
}
/* a phone on its side, or any short window: the wide layout (the words on the
   left, the hall to their right) with a short header and tighter spacing */
@media (max-height: 500px) {
  :root { --head: 4.75rem; }
  .sec { padding-block: 4.5rem; }
  .hero { padding-top: calc(var(--head) + env(safe-area-inset-top, 0px) + 1.5rem); padding-bottom: 12svh; }
  .col { width: min(34rem, 44vw); }
  .lede { font-size: 1.0625rem; }
}
@media (max-width: 599px) {
  body { font-size: 1rem; }
  :root { --head: 4.75rem; }
  /* on a phone the name stands on two lines, and the links sit on the second line's baseline */
  .mark { flex-direction: column; line-height: 1.1; }
  .top { align-items: last baseline; }
  .links { gap: 0 0.75rem; }
  h1 { font-size: 2.125rem; }
  .lede { font-size: 1.0625rem; }
  .sites div { grid-template-columns: 1fr; gap: 0.1rem; }
  .doc dl div { grid-template-columns: 1fr; gap: 0.1rem; }
  .page { padding-top: calc(var(--head) + env(safe-area-inset-top, 0px) + 2.5rem); }
  /* the figures become a table of rows: what is measured on the left, the figure on the right */
  .figures { grid-template-columns: 1fr; }
  .figures div { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 1rem; padding-block: 0.7rem; }
  .figures dd { order: 0; grid-area: 1 / 2; text-align: right; font-size: 1.5rem; }
  .figures dt { grid-area: 1 / 1; font-size: 1rem; line-height: 1.45; text-wrap: pretty; }
}
@media (max-width: 399px) { :root { --gut: 20px; } }
/* the narrowest phones: the name, the figures and the hero line a size smaller, so the header holds one line
   and the first screen holds the hero text */
@media (max-width: 359px) { .mark { font-size: 21px; } .figures dd { font-size: 1.3125rem; } .hero .lede { font-size: 1rem; } }
@media (min-width: 2000px) { html { font-size: 112.5%; } }

/* ── preferences ───────────────────────────────────────────────────────── */
@media (prefers-contrast: more) {
  :root { --ash: var(--lamp); --hair: oklch(0.76 0.03 255 / 0.6); }
  .sec .col { background: var(--ground); }
  .home::before { background: linear-gradient(90deg, var(--ground) 0 80%, oklch(var(--g-l) var(--g-c) var(--g-h) / 0)); }
}
@media (forced-colors: active) {
  .hall, .fallback, .home::before, .hero .col::before, .inner::before { display: none; }
  .pause { border: 1px solid ButtonText; forced-color-adjust: none; background: Canvas; color: ButtonText; }
  .contact input, .contact textarea { border: 1px solid CanvasText; }
  .crescendo h2::after { background: CanvasText; }
}
@media print {
  .hall, .fallback, .home::before, .top, .pause, .skip, .family, .inner::before { display: none !important; }
  :root { color-scheme: light; }
  html, body, .foot { background: #fff; color: #000; }
  .page, .foot { padding: 0; }
  .page p, .page li, .page dd, .page dt, .legal { color: #000; }
  a { color: #000; text-decoration: underline; }
  .doc h2 { break-after: avoid; }
}