/* Copyright Samuel Krauss (Elchi Studios). All rights reserved.
   SPDX-License-Identifier: LicenseRef-Proprietary */

/* A copy of elchi-web's src/styles/site.css, the hub's own rules on top of
   the design system, so the journal this backend renders on elchi.dev looks
   like every other page there. When the hub's file changes, copy it here
   again below this note (internal/journalsite, hubCSS). */

/* elchi.dev and websites.elchi.dev: what only this site needs, on top of
   the design system (/_design/elchi.css). Tokens only; no colour of its own.
   Bundled into an external file at build time, never inline. */

/* ---------- Header: seven sections, a language switch, one action ---------- */
.hub-header .site-header__in { gap: var(--space-3) var(--space-4); }
.hub-nav { gap: 0; }
.hub-nav a { padding-inline: var(--space-2); font-size: 0.9375rem; }
@media (max-width: 74.99rem) {
  .hub-header .nav--wide { display: none; }
  .hub-header .button.menu-button { display: inline-flex; margin-inline-start: 0; }
}
@media (max-width: 29.99rem) { .header-cta { display: none; } }

/* ---------- Sections and rhythm ---------- */
.split2 { display: grid; gap: var(--space-6) var(--space-8); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: start; }

/* ---------- Home ---------- */
.home-hero { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; padding-block: var(--space-8) var(--space-7); }
.home-hero__text { display: grid; gap: var(--space-4); }
.home-hero h1 { font-size: clamp(2.6rem, 1.4rem + 4.4vw, 5.25rem); line-height: 1.02; letter-spacing: -0.025em; max-width: 10em; }
.home-hero .lede { font-size: clamp(1.1875rem, 1rem + 0.6vw, 1.4375rem); max-width: 26em; }
/* The constellation of the servers stands beside it, drawn on arrival;
   its caption lives on the infrastructure page, the chart names itself
   to assistive technology. */
.home-hero .sky { align-self: center; }
.home-hero .sky figcaption { display: none; }
.infra-band { align-items: center; }
@media (max-width: 59.99rem) { .home-hero { grid-template-columns: 1fr; } }
/* The home page's opening settles in like every page head. */
@media (prefers-reduced-motion: no-preference) {
  .js .home-hero__text > * { animation: settle 640ms var(--ease) both; }
  .js .home-hero__text > :nth-child(2) { animation-delay: 70ms; }
  .js .home-hero__text > :nth-child(3) { animation-delay: 140ms; }
  .js .home-hero__text > :nth-child(n+4) { animation-delay: 210ms; }
}

/* The galaxy: a canvas over a still picture of the same model, which is
   all a visitor without JavaScript or with reduced motion sees. Light mode
   is a photographic plate (ink on paper, as astronomers printed them),
   dark mode the sky. */
.galaxy { display: grid; gap: var(--space-3); margin: 0; }
.galaxy__stage { --galaxy-glow: 0; --poster: url("/img/galaxy-plate-640.webp"); position: relative; aspect-ratio: 1; border: 1px solid var(--c-line); border-radius: var(--radius-2); overflow: hidden; background-color: var(--c-raised); touch-action: pan-y pinch-zoom; }
:root[data-theme="dark"] .galaxy__stage { --galaxy-glow: 1; --poster: url("/img/galaxy-sky-640.webp"); background-color: var(--c-sunk); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .galaxy__stage { --galaxy-glow: 1; --poster: url("/img/galaxy-sky-640.webp"); background-color: var(--c-sunk); } }
@media (min-resolution: 1.5dppx) {
  .galaxy__stage { --poster: url("/img/galaxy-plate-1080.webp"); }
  :root[data-theme="dark"] .galaxy__stage { --poster: url("/img/galaxy-sky-1080.webp"); }
}
@media (min-resolution: 1.5dppx) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .galaxy__stage { --poster: url("/img/galaxy-sky-1080.webp"); } }
.galaxy__stage::before { content: ""; position: absolute; inset: 0; background: var(--poster) center / cover no-repeat; }
.galaxy__stage.is-running::before { content: none; }
.js .galaxy__stage.is-running { cursor: crosshair; }
.galaxy__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.galaxy__controls { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.galaxy figcaption { display: grid; gap: var(--space-1); font-size: 0.875rem; color: var(--c-text-2); max-width: 40em; }

.products { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.product-card { position: relative; display: grid; align-content: start; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--c-line); border-top: 3px solid var(--c-rule); border-radius: var(--radius-2); background-color: var(--c-raised); transition: border-color var(--dur-fast) var(--ease), transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.product-card:hover { border-color: var(--c-text-2); border-top-color: var(--c-action); transform: translateY(-4px); box-shadow: 0 18px 40px -28px rgb(0 0 0 / 0.6); }
.product-card h3 { font-size: 1.625rem; }
.product-card__icon { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-2); background-color: var(--c-action-wash); color: var(--c-action); transition: transform var(--dur-base) var(--ease); }
.product-card:hover .product-card__icon { transform: rotate(-6deg) scale(1.06); }
@media (prefers-reduced-motion: reduce) { .product-card:hover .product-card__icon { transform: none; } }
.product-card h3 a { color: var(--c-text); text-decoration: none; }
.product-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.product-card:hover h3 a { color: var(--c-action); }
.product-card p { color: var(--c-text-2); }
.product-card .ticks { margin-block: var(--space-1); }
.product-card .more { margin-top: auto; padding-top: var(--space-2); }
.product-card--offer { border-top-style: dashed; }
@media (prefers-reduced-motion: reduce) { .product-card:hover { transform: none; } }

.solutions { list-style: none; padding: 0; display: grid; border-top: 1px solid var(--c-line); }
.solutions li { border-bottom: 1px solid var(--c-line); }
.solutions a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-5); align-items: center; padding: var(--space-5) var(--space-3); margin-inline: calc(-1 * var(--space-3)); border-radius: var(--radius-2); color: var(--c-text); text-decoration: none; transition: background-color var(--dur-base) var(--ease); }
.solutions a:hover { background-color: color-mix(in srgb, var(--c-action-wash) 70%, transparent); }
.solutions b { font-size: 1.25rem; transition: color var(--dur-fast) var(--ease); }
.solutions a { grid-template-columns: auto minmax(0, 1fr) auto; }

.solutions span { grid-column: 2; color: var(--c-text-2); max-width: 44em; }
.solutions a::after { content: ""; grid-column: 3; grid-row: 1 / span 2; width: 0.7em; height: 0.7em; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--dur-base) var(--ease); color: var(--c-text-3); }
.solutions a:hover b { color: var(--c-action); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.solutions a:hover::after { transform: translateX(4px) rotate(45deg); color: var(--c-action); }
/* The home page lists the industries in two columns from a laptop up,
   under a small heading each list shares with the tasks below it. */
@media (min-width: 60rem) { .solutions--cols { grid-template-columns: 1fr 1fr; column-gap: var(--space-7); } }
.home-sub { margin-block: var(--space-6) var(--space-3); font-size: 1.0625rem; color: var(--c-text-2); }
.section-head + .home-sub { margin-top: var(--space-2); }

/* A product still in beta carries the design system's tag beside its
   name: quiet, in the figure face, never the action colour, since it is a
   fact about the product and not something to press. */
.tag--beta { letter-spacing: 0.04em; white-space: nowrap; }
.hub-nav .tag--beta, .menu .tag--beta { margin-inline-start: var(--space-1); }
.product-card h3 .tag--beta { vertical-align: 0.35em; }
.beta-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); max-width: 44em; margin-block: 0 var(--space-7); color: var(--c-text-2); }
.beta-note .tag--beta { margin-inline-start: 0; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: var(--space-4) var(--space-5); }
.stats .reading__value { font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3.25rem); }

.sky { margin: 0; display: grid; gap: var(--space-2); }
.sky figcaption { display: grid; gap: var(--space-1); font-size: 0.875rem; color: var(--c-text-2); max-width: 52em; }
.sky--home .chart-wide { display: none; }
.sky--home .chart-close { display: block; max-width: 34rem; margin-inline: auto; }

.contact-band { display: grid; gap: var(--space-5) var(--space-8); grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.contact-band__ways { display: grid; gap: var(--space-2); font-size: 1.125rem; }
/* The last word of the home page sits on a panel washed from the corner in
   the action colour. */
.contact-band--panel { padding: var(--space-7) var(--space-6); border: 1px solid var(--c-line); border-radius: calc(var(--radius-2) * 2); background: radial-gradient(60rem 30rem at 0% 0%, var(--c-action-wash), transparent 70%), var(--c-raised); }
@media (max-width: 47.99rem) { .contact-band--panel { padding: var(--space-6) var(--space-4); } }
@media (max-width: 47.99rem) { .contact-band { grid-template-columns: 1fr; } }

/* ---------- Product pages ---------- */
.features { display: grid; gap: var(--space-5) var(--space-7); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.features h3 { margin-bottom: var(--space-2); }
.features p { color: var(--c-text-2); }
.plans { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.plan { display: grid; align-content: start; gap: var(--space-2); padding: var(--space-5); border: 1px solid var(--c-line); border-radius: var(--radius-2); background-color: var(--c-raised); }
.plan--main { border-color: var(--c-action); box-shadow: inset 0 3px 0 var(--c-action); }
.plan h3 { font-size: 1.25rem; }
.plan__price { font-size: 1.375rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.plan p { color: var(--c-text-2); }
.missing { list-style: none; padding: 0; display: grid; gap: var(--space-3); max-width: 46em; }
.missing li { position: relative; padding-inline-start: var(--space-5); }
.missing li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.5em; width: 0.6em; height: 0.6em; border: 2px solid var(--c-text-3); border-radius: 50%; }
.facts-row { display: grid; gap: var(--space-4) var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.sdk-list { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; }
.sdk-list code { display: inline-block; padding: 0.15rem 0.5rem; border: 1px solid var(--c-line); border-radius: var(--radius-1); background-color: var(--c-sunk); }

/* ---------- Solutions ---------- */
.before-after { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.before-after > div { display: grid; align-content: start; gap: var(--space-2); padding: var(--space-5); border: 1px solid var(--c-line); border-radius: var(--radius-2); background-color: var(--c-raised); }
.before-after > div:last-child { border-color: var(--c-action); box-shadow: inset 3px 0 0 var(--c-action); }
.before-after h2 { font-size: 1.125rem; color: var(--c-text-2); }

/* ---------- Industries ----------
   The Lösungen page names them in a grid of links, each with its icon;
   an industry's page states what it can expect as terms and answers, and
   ends on its sources, set small. */
.sectors { list-style: none; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
@media (min-width: 56rem) { .sectors { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sectors li { display: flex; }
.sectors a { flex: 1; display: flex; align-items: center; gap: var(--space-3); min-height: 3.5rem; padding: var(--space-3) var(--space-4); border: 1px solid var(--c-line); border-radius: var(--radius-2); background-color: var(--c-raised); color: var(--c-text); font-weight: 600; text-decoration: none; transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.sectors .icon { flex: none; box-sizing: border-box; width: 2.25rem; height: 2.25rem; padding: 0.45rem; border-radius: var(--radius-2); background-color: var(--c-action-wash); color: var(--c-action); transition: transform var(--dur-base) var(--ease); }
.sectors a:hover { border-color: var(--c-action); color: var(--c-action); }
.expect { display: grid; max-width: 56rem; margin: 0; border-top: 1px solid var(--c-line); }
.expect > div { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: var(--space-1) var(--space-5); padding-block: var(--space-5); border-bottom: 1px solid var(--c-line); }
.expect dt { font-size: 1.0625rem; font-weight: 700; }
.expect dd { margin: 0; color: var(--c-text-2); max-width: 44em; }
@media (max-width: 39.99rem) { .expect > div { grid-template-columns: 1fr; } }
/* Long answers: each block starts at its top rather than spreading its
   heading and text over the height of the row; four offers stand two by
   two. */
.industry-time > div { align-content: start; }
@media (min-width: 48rem) { .industry-build:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.industry-note { max-width: 44em; margin-top: var(--space-6); padding-inline-start: var(--space-4); border-inline-start: 3px solid var(--c-rule); color: var(--c-text-2); }
.industry-sources h2 { margin-bottom: var(--space-4); font-size: 1.125rem; }
.industry-sources .sources { color: var(--c-text-2); }

/* ---------- Infrastructure and trust ---------- */
.servers td:first-child { font-family: var(--font-mono); white-space: nowrap; }
.servers tr:target { background-color: var(--c-action-wash); }
.role-notes { list-style: none; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.role-notes li { display: grid; gap: var(--space-1); padding-top: var(--space-3); border-top: 1px solid var(--c-line); }
.role-notes b { font-size: 1.0625rem; }
.role-notes span { color: var(--c-text-2); font-size: 0.9375rem; }
.cards2 { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.cards2 > section { display: grid; align-content: start; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--c-line); border-radius: var(--radius-2); background-color: var(--c-raised); }
.cards2 > section h2 { font-size: 1.25rem; }
.cards2 > section p { color: var(--c-text-2); }

/* ---------- About ---------- */
.founder { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); align-items: start; }
.founder picture, .founder img { border-radius: var(--radius-2); }
@media (max-width: 47.99rem) { .founder { grid-template-columns: 1fr; } .founder picture { max-width: 16rem; } }
.principles { display: grid; gap: var(--space-5) var(--space-7); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); counter-reset: p; }
.principles > div { display: grid; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--c-rule); counter-increment: p; }
.principles > div::before { content: counter(p, decimal-leading-zero); font-family: var(--font-mono); font-size: 0.8125rem; color: var(--c-text-3); }
.principles p { color: var(--c-text-2); }

/* ---------- Knowledge, changelog, press ---------- */
.article-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: 0.875rem; color: var(--c-text-3); }
.article-note { max-width: 44em; margin-top: var(--space-7); padding: var(--space-4); border: 1px dashed var(--c-control); border-radius: var(--radius-2); color: var(--c-text-2); font-size: 0.9375rem; }
.sources { max-width: 44em; padding-inline-start: 1.25rem; display: grid; gap: var(--space-2); font-size: 0.9375rem; }
.sources a { overflow-wrap: anywhere; }
.timeline { list-style: none; padding: 0; display: grid; max-width: 48em; border-top: 1px solid var(--c-line); }
.timeline li { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--space-1) var(--space-5); padding-block: var(--space-5); border-bottom: 1px solid var(--c-line); }
.timeline time { font-variant-numeric: tabular-nums; color: var(--c-text-2); }
.timeline h2 { font-size: 1.1875rem; }
.timeline p { grid-column: 2; color: var(--c-text-2); }
@media (max-width: 39.99rem) { .timeline li { grid-template-columns: 1fr; } .timeline p { grid-column: 1; } }
.press-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-5); max-width: 44em; }
.press-facts dt { font-weight: 600; }
.press-facts dd { margin: 0; color: var(--c-text-2); }
.downloads { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.mark-show { display: grid; place-items: center; width: 8rem; height: 8rem; border: 1px solid var(--c-line); border-radius: var(--radius-2); background-color: var(--c-raised); }
.mark-show svg, .mark-show img { width: 5rem; height: 5rem; object-fit: contain; }
.mark-pair { display: flex; flex-wrap: wrap; gap: var(--space-3); }


/* ---------- Contact ---------- */
.contact-layout { display: grid; gap: var(--space-7); grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 55.99rem) { .contact-layout { grid-template-columns: 1fr; } }
.contact-layout .form--grid { max-width: none; }
.topics { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.contact-aside { display: grid; gap: var(--space-5); padding: var(--space-5); border: 1px solid var(--c-line); border-radius: var(--radius-2); background-color: var(--c-raised); }
.contact-aside h2 { font-size: 0.9375rem; color: var(--c-text-2); margin-bottom: var(--space-1); }
.contact-aside p { font-size: 1.0625rem; }
.contact-aside .hint, .contact-aside .muted { font-size: 0.9375rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#sent h2 { font-size: 1.25rem; }
#sent:focus { outline: none; }

/* ---------- Booking a call ----------
   Four steps in one column beside the other ways to reach us. Everything
   that fills in after the page arrived has its room already: the type's
   card, the five weeks of the calendar, the line under it. Chosen states
   are the action fill, which forced colours turn into Highlight. */
.booking-layout { display: grid; gap: var(--space-7); grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 55.99rem) { .booking-layout { grid-template-columns: 1fr; } }
.booking { display: grid; gap: var(--space-5); min-width: 0; }
.booking-steps { display: grid; gap: var(--space-7); }
.booking-step { display: grid; gap: var(--space-3); min-width: 0; margin: 0; padding: 0; border: 0; }
.booking-step legend { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); padding: 0; font-size: 1.25rem; font-weight: 700; }
.booking-step__n { display: inline-grid; flex: none; place-items: center; width: 1.875rem; height: 1.875rem; border-radius: 50%; background-color: var(--c-action-wash); color: var(--c-action); font-family: var(--font-mono); font-size: 0.875rem; }

.booking-types { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); min-height: 5.75rem; }
.booking-type { display: flex; gap: var(--space-3); align-items: flex-start; min-height: 5.75rem; padding: var(--space-4); border: 1px solid var(--c-line); border-radius: var(--radius-2); background-color: var(--c-raised); cursor: pointer; }
.booking-type:hover { border-color: var(--c-text-2); }
/* The radio is the design system's (.check): 24 pixels, its own focus ring. */
.booking-type.check { align-items: flex-start; }
.booking-type input { margin-top: 0.0625rem; cursor: pointer; }
.booking-type:has(input:checked) { border-color: var(--c-action); box-shadow: inset 0 0 0 1px var(--c-action); }
.booking-type__text { display: grid; gap: var(--space-1); min-width: 0; }
.booking-type__meta { color: var(--c-text-2); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.booking-type__desc { color: var(--c-text-2); font-size: 0.9375rem; }
.booking-type--placeholder { display: grid; align-content: start; gap: var(--space-3); min-height: 8.5rem; cursor: default; }
@media (max-width: 29.99rem) { .booking-type--placeholder { min-height: 10rem; } }
.booking-type--placeholder:hover { border-color: var(--c-line); }
.booking-type__bar { display: block; width: 60%; height: 0.875rem; border-radius: var(--radius-1); background-color: var(--c-sunk); }
.booking-type__bar--short { width: 35%; }

.cal { display: grid; gap: var(--space-3); max-width: 30rem; }
.cal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 2.75rem; }
.cal__range { font-weight: 700; }
.cal__nav { display: flex; gap: var(--space-2); }
.button.cal__arrow { min-width: 2.75rem; min-height: 2.75rem; padding: 0; }
.cal__arrow svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cal__grid { width: calc(100% + 0.5rem); margin-inline: -0.25rem; border-collapse: separate; border-spacing: 0.25rem; table-layout: fixed; }
.cal__grid th { padding: 0 0 var(--space-1); color: var(--c-text-3); font-size: 0.8125rem; font-weight: 600; text-align: center; }
.cal__cell { height: 2.75rem; padding: 0; text-align: center; }
.cal__blank { display: grid; place-items: center; height: 2.75rem; color: var(--c-text-3); font-variant-numeric: tabular-nums; opacity: 0.55; }
.cal__day { position: relative; display: grid; place-items: center; width: 100%; height: 2.75rem; padding: 0; border: 1px solid transparent; border-radius: var(--radius-2); background-color: transparent; color: var(--c-text-3); font: inherit; font-variant-numeric: tabular-nums; cursor: default; }
.cal__day:not([aria-disabled="true"]) { border-color: var(--c-line); background-color: var(--c-raised); color: var(--c-text); font-weight: 700; cursor: pointer; }
.cal__day:not([aria-disabled="true"]):hover { border-color: var(--c-action); }
.cal__day:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.cal__day--today .cal__num { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.cal__dot { position: absolute; bottom: 0.3rem; left: 50%; width: 0.3125rem; height: 0.3125rem; margin-left: -0.15625rem; border-radius: 50%; background-color: var(--c-action); }
[aria-selected="true"] > .cal__day { border-color: var(--c-action-fill); background-color: var(--c-action-fill); color: var(--c-on-action); }
[aria-selected="true"] > .cal__day .cal__dot { background-color: var(--c-on-action); }
.cal__zone { min-height: 2.6em; }

.booking-times { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr)); }
.booking-time { position: relative; display: grid; align-content: center; justify-items: center; gap: 0.125rem; min-height: 2.75rem; padding: var(--space-2); border: 1px solid var(--c-line); border-radius: var(--radius-2); background-color: var(--c-raised); font-variant-numeric: tabular-nums; cursor: pointer; }
.booking-time:hover { border-color: var(--c-action); }
.booking-time input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.booking-time__own { font-weight: 700; }
.booking-time__zh { color: var(--c-text-2); font-size: 0.75rem; }
.booking-time:has(input:checked) { border-color: var(--c-action-fill); background-color: var(--c-action-fill); color: var(--c-on-action); }
.booking-time:has(input:checked) .booking-time__zh { color: var(--c-on-action); }
.booking-time:has(input:focus-visible) { outline: 2px solid var(--c-focus); outline-offset: 2px; }

.booking-chosen { padding: var(--space-3) var(--space-4); border-inline-start: 3px solid var(--c-action); border-radius: var(--radius-2); background-color: var(--c-action-wash); font-weight: 600; }
.booking-fields { max-width: none; }
/* The consent is a sentence beside its box, not a field's label. */
.booking-consent > .check { align-items: flex-start; font-weight: 400; font-size: 1rem; }
.booking-consent > .check input { margin-top: 0.0625rem; }
.booking-off h3, .booking-done h3 { font-size: 1.25rem; }
.booking-done a { overflow-wrap: anywhere; }
.booking-done:focus, .booking-off:focus, .booking-stale:focus, .manage .notice:focus { outline: none; }
@media (prefers-reduced-motion: no-preference) {
  .booking-type, .cal__day, .booking-time { transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
}
@media (forced-colors: active) {
  [aria-selected="true"] > .cal__day, .booking-time:has(input:checked) { forced-color-adjust: none; border-color: Highlight; background-color: Highlight; color: HighlightText; }
  .cal__dot { forced-color-adjust: none; background-color: CanvasText; }
  [aria-selected="true"] > .cal__day .cal__dot { background-color: HighlightText; }
}

/* The manage page: the facts of one meeting, and its cancellation. */
/* The page holds the room of a confirmed meeting with its cancellation
   form from the start (measured: 27.5rem, 39rem on a phone), so nothing
   below moves when the meeting arrives; every other state is shorter. */
.manage { display: grid; align-content: start; gap: var(--space-5); max-width: 40rem; min-height: 27.5rem; }
@media (max-width: 29.99rem) { .manage { min-height: 39rem; } }
.manage__loading { min-height: 1.5em; }
.manage__card { display: grid; gap: var(--space-5); padding: var(--space-5); border: 1px solid var(--c-line); border-radius: var(--radius-2); background-color: var(--c-raised); }
.manage__facts { display: grid; gap: var(--space-3); margin: 0; }
.manage__facts > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-3); }
.manage__facts dt { color: var(--c-text-2); }
.manage__facts dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 29.99rem) { .manage__facts > div { grid-template-columns: 1fr; gap: 0; } }
.manage__state { font-weight: 700; }
.manage__state--confirmed { color: var(--c-ok); }
.manage__state--cancelled { color: var(--c-danger); }
.manage__state--over { color: var(--c-text-2); }
.manage__cancel { max-width: none; padding-top: var(--space-4); border-top: 1px solid var(--c-line); }

/* ---------- Press ---------- */
.quote { padding-inline-start: var(--space-4); border-inline-start: 3px solid var(--c-rule); color: var(--c-text); font-size: 1.0625rem; }
.press-portrait { width: 12rem; border-radius: var(--radius-2); }
.downloads { list-style: none; padding: 0; }

.footer-contact { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); align-items: center; justify-content: space-between; margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--c-line); }
.footer-contact .theme { margin: 0; }

/* Readings in a list: the value and its label carry no indent of their own. */
.stats dt, .stats dd, .facts-row dt, .facts-row dd { margin: 0; }

/* ---------- websites.elchi.dev ---------- */
.h3 { font-size: 1.25rem; }
.ticks--row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-2); }

/* A measured value against a scale: a progress element, so the value is
   an attribute and never a style. */
.trace { display: grid; gap: var(--space-3); max-width: 48rem; }
.trace__row { display: grid; grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr) 4.5rem; gap: var(--space-3); align-items: center; }
.trace__value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: end; }
@media (max-width: 39.99rem) { .trace__row { grid-template-columns: minmax(0, 1fr) 4.5rem; } .trace__row .bar { grid-column: 1 / -1; grid-row: 2; } }
.bar { appearance: none; width: 100%; height: 0.75rem; border: 0; border-radius: var(--radius-1); background-color: var(--c-sunk); color: var(--c-action-fill); overflow: hidden; }
.bar::-webkit-progress-bar { background-color: var(--c-sunk); border-radius: var(--radius-1); }
.bar::-webkit-progress-value { background-color: var(--c-action-fill); border-radius: var(--radius-1); transition: inline-size var(--dur-slow) var(--ease); }
.bar::-moz-progress-bar { background-color: var(--c-action-fill); border-radius: var(--radius-1); }
.bar--ghost::-webkit-progress-value { background-color: var(--c-control); }
.bar--ghost::-moz-progress-bar { background-color: var(--c-control); }

/* Colour swatches: a class per colour, so no colour is written in the markup. */
.swatches { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.swatch { position: relative; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--c-line); border-radius: 50%; cursor: pointer; transition: transform var(--dur-press) var(--ease), border-color var(--dur-fast) var(--ease); }
.swatch:hover { border-color: var(--c-text-2); }
.swatch:active { transform: scale(0.94); }
.swatch::before { content: ""; width: 1.875rem; height: 1.875rem; border-radius: 50%; background-color: var(--sw); }
.swatch input[type="radio"] { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.swatch:has(input:checked) { border: 2px solid var(--c-text); }
.swatch:has(input:focus-visible) { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.sw-1 { --sw: #1f5fbf; } .sw-2 { --sw: #0f8a5f; } .sw-3 { --sw: #8b2a7a; } .sw-4 { --sw: #b8860b; } .sw-5 { --sw: #14161a; }
.swatch--custom::before { display: none; }
.swatch--custom input { width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.swatch--custom input::-webkit-color-swatch-wrapper { padding: 0; }
.swatch--custom input::-webkit-color-swatch { border: 0; border-radius: 50%; }
.swatch--custom input::-moz-color-swatch { border: 0; border-radius: 50%; }

/* The client's page in miniature. Its colours are the client's, set as a
   custom property from the script; the frame is ours. */
.mini-preview, .preview { --pv: #1f5fbf; display: grid; align-content: start; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--c-line); border-radius: var(--radius-2); background-color: #ffffff; color: #14161a; }
.mini-preview__bar, .pv-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid #e3e6ec; }
.mini-preview__dot, .pv-dot { width: 0.75rem; height: 0.75rem; border-radius: 50%; background-color: var(--pv); }
.mini-preview__title { font-size: 1.5rem; font-weight: 700; line-height: 1.15; }
.mini-preview__text { color: #4a5160; }
.mini-preview__button, .pv-button { justify-self: start; padding: 0.5rem 1rem; border-radius: var(--radius-2); background-color: var(--pv); color: #ffffff; font-weight: 600; }

.configurator { display: grid; gap: var(--space-7); grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; }
@media (max-width: 59.99rem) { .configurator { grid-template-columns: 1fr; } }
.configurator .preview { position: sticky; top: 5rem; }
@media (max-width: 59.99rem) { .configurator .preview { position: static; order: -1; } }
.send { display: grid; gap: var(--space-4); padding-top: var(--space-5); border-top: 1px solid var(--c-line); }
.send h2 { font-size: 1.25rem; }
.preview[data-scheme="dark"] { background-color: #12151b; color: #eef1f6; border-color: #2a303b; }
.preview[data-scheme="dark"] .pv-bar, .preview[data-scheme="dark"] .pv-foot { border-color: #2a303b; }
.preview[data-scheme="dark"] .pv-grid span { color: #aab2c0; }
.pv-brand { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; }
.pv-nav { display: flex; gap: var(--space-4); font-size: 0.875rem; }
.pv-hero { display: grid; gap: var(--space-3); padding-block: var(--space-6); }
.pv-eyebrow { color: var(--pv); font-weight: 600; font-size: 0.875rem; }
.pv-h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); font-weight: 700; line-height: 1.12; overflow-wrap: anywhere; }
.pv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-4); }
.pv-grid div { display: grid; gap: var(--space-1); padding-top: var(--space-3); border-top: 2px solid var(--pv); }
.pv-grid span { font-size: 0.875rem; color: #4a5160; }
.pv-foot { padding-top: var(--space-3); border-top: 1px solid #e3e6ec; font-size: 0.8125rem; opacity: 0.8; }
.pv-font-grotesk { font-family: var(--font-sans); }
.pv-font-serif { font-family: Georgia, "Times New Roman", serif; }
.pv-font-mono { font-family: var(--font-mono); }

/* Questions: a disclosure each. */
.faq { display: grid; max-width: 48rem; border-top: 1px solid var(--c-line); }
.faq details { border-bottom: 1px solid var(--c-line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding-block: var(--space-4); font-size: 1.125rem; font-weight: 700; cursor: pointer; list-style: none; transition: color var(--dur-fast) var(--ease); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--c-action); }
.faq summary::after { content: ""; flex: none; width: 0.55rem; height: 0.55rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--dur-base) var(--ease); }
.faq details[open] summary::after { transform: rotate(225deg); }
.faq details p { padding-bottom: var(--space-5); color: var(--c-text-2); max-width: 42em; }
/* An answer slides open instead of appearing, where the browser can
   animate to the height of its content; elsewhere it simply opens. */
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .faq { interpolate-size: allow-keywords; }
    .faq details::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size 320ms var(--ease), opacity 320ms var(--ease), content-visibility 320ms allow-discrete; }
    .faq details[open]::details-content { block-size: auto; opacity: 1; }
  }
}

/* Price. */
.plans--two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.plan h3 { margin-top: var(--space-3); font-size: 1.0625rem; }
.plan__amount { font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3.25rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.plan__amount span { font-size: 0.4em; font-weight: 400; color: var(--c-text-2); letter-spacing: 0; }

/* Comparison. */
.calc { display: grid; gap: var(--space-7); grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
@media (max-width: 63.99rem) { .calc { grid-template-columns: 1fr; } }
.calc__result { display: grid; gap: var(--space-4); position: sticky; top: 5rem; }
@media (max-width: 63.99rem) { .calc__result { position: static; } }
.calc__tables { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); align-items: start; }
.calc__tables caption { padding: var(--space-3) var(--space-3) var(--space-2); text-align: start; font-weight: 700; }
.calc__tables tfoot th, .calc__tables tfoot td { font-weight: 700; border-top: 2px solid var(--c-rule); }
.calc__ours { border-color: var(--c-action); }
.calc__verdict { font-size: 1.125rem; font-weight: 600; max-width: 40em; }
.compare-table th.us, .compare-table td.us { background-color: var(--c-action-wash); }
.compare-table td { min-width: 9rem; }
.print-only { display: none; }
@media print {
  .no-print { display: none !important; }
  .print-only { display: block; }
  .calc { grid-template-columns: 1fr; }
  .calc__result { position: static; }
}

/* Review of 8 October 2026: the narrowest phones, long words, four
   readings in half a page. */
.langs--menu { gap: var(--space-2); }
.langs--menu a { padding-inline: var(--space-3); border: 1px solid var(--c-line); }
@media (min-width: 22.5rem) { .langs--menu { display: none; } }
.prose, .page-hero h1 { overflow-wrap: break-word; hyphens: auto; }
.split2 .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mini-preview__button, .pv-button { cursor: default; }
.page-hero > * { min-width: 0; }
.page-hero h1 { overflow-wrap: anywhere; }
.reading--figure { max-width: 34rem; margin-bottom: var(--space-2); }

/* How a product is made: four steps, each with its number above the
   heading; the scan framed like the paper it is. */
.making__step { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-action); }
.making__facts { display: grid; gap: var(--space-2); padding-inline-start: 1.2em; color: var(--c-text-2); max-width: 44em; }
.making__scan { margin: var(--space-6) 0 0; }
.making__scan img { display: block; width: 100%; height: auto; border: 1px solid var(--c-line); border-radius: var(--radius-2); background-color: #fff; }
.making__scan figcaption, .making__code figcaption { margin-top: var(--space-3); color: var(--c-text-3); font-size: 0.875rem; }
.making .flow { margin-top: var(--space-6); }
.making__redraw { margin-top: var(--space-4); }
.making__code { margin: 0; min-width: 0; }
.making__code pre { padding-inline-end: var(--space-4); tab-size: 4; }
.making__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }

/* Icons: strokes in the current colour; in a section that is arriving
   they draw themselves (the arrival lasts 700 ms, the drawing less). */
.icon { display: block; width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .reveal .icon path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .reveal.is-in .icon path { animation: icon-draw 620ms 120ms var(--ease) forwards; }
}
@keyframes icon-draw { to { stroke-dashoffset: 0; } }
.solutions .solutions__icon { grid-row: 1 / span 2; box-sizing: border-box; width: 2.75rem; height: 2.75rem; padding: 0.6rem; border-radius: var(--radius-2); background-color: var(--c-action-wash); color: var(--c-action); transition: transform var(--dur-base) var(--ease); }
.solutions a:hover .solutions__icon { transform: rotate(-6deg) scale(1.06); }
@media (prefers-reduced-motion: reduce) { .solutions a:hover .solutions__icon { transform: none; } }
/* On a phone the icon sits above its title, so the text keeps the width. */
@media (max-width: 39.99rem) {
  .solutions a { grid-template-columns: minmax(0, 1fr) auto; }
  .solutions .solutions__icon { grid-row: 1; grid-column: 1; width: 2.25rem; height: 2.25rem; padding: 0.45rem; margin-bottom: var(--space-2); }
  .solutions b, .solutions span { grid-column: 1; }
  .solutions a::after { grid-column: 2; grid-row: 1 / span 3; }
}

/* Phone and address with their icons; the icon answers the pointer. */
.contact-way { display: inline-flex; align-items: center; gap: var(--space-2); }
.contact-way .icon { width: 1.25rem; height: 1.25rem; color: var(--c-action); transition: transform var(--dur-base) var(--ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .contact-way:hover .icon { transform: rotate(-12deg) scale(1.15); } }

/* ---------- Answers to the pointer on this site (second pass) ----------
   Text moves a little and a line in the action colour grows; nothing here
   pretends to be a link. */
.features > div { position: relative; padding-top: var(--space-4); border-top: 1px solid var(--c-line); }
.features > div::before { content: ""; position: absolute; inset-inline-start: 0; top: -1px; width: 2rem; height: 2px; background-color: var(--c-action); transition: width var(--dur-base) var(--ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .features > div:hover::before { width: 100%; }
  .features h3, .principles h3, .role-notes b, .timeline h2, .cards2 > section h2 { transition: transform var(--dur-base) var(--ease), color var(--dur-fast) var(--ease); }
  .features > div:hover h3, .principles > div:hover h3, .role-notes li:hover b, .timeline li:hover h2, .cards2 > section:hover h2 { transform: translateX(3px); }
  .plan, .cards2 > section, .before-after > div { transition: border-color var(--dur-fast) var(--ease), transform var(--dur-base) var(--ease); }
  .plan:hover, .cards2 > section:hover, .before-after > div:hover { border-color: var(--c-control); }
  .plan--main:hover { border-color: var(--c-action); }
  .principles > div::before { transition: color var(--dur-fast) var(--ease), transform var(--dur-base) var(--ease); display: inline-block; }
  .principles > div:hover::before { color: var(--c-action); transform: translateX(3px); }
  .role-notes li { transition: border-color var(--dur-fast) var(--ease); }
  .role-notes li:hover { border-top-color: var(--c-action); }
  .timeline time { transition: color var(--dur-fast) var(--ease); }
  .timeline li:hover time { color: var(--c-action); }
  .founder picture { display: block; overflow: hidden; border-radius: var(--radius-2); }
  .founder img { transition: transform 600ms var(--ease); }
  .founder picture:hover img { transform: scale(1.03); }
  .missing li::before { transition: transform var(--dur-base) var(--ease), border-color var(--dur-fast) var(--ease); }
  .missing li:hover::before { transform: scale(1.25); border-color: var(--c-action); }
  .facts-row > * { transition: transform var(--dur-base) var(--ease); }
  .facts-row > :hover { transform: translateY(-2px); }
  .sectors a:hover .icon { transform: rotate(-6deg) scale(1.06); }
  .expect dt { transition: transform var(--dur-base) var(--ease), color var(--dur-fast) var(--ease); }
  .expect > div:hover dt { transform: translateX(3px); color: var(--c-action); }
}

/* Four principles stand two by two rather than three and one. */
@media (min-width: 48rem) { .principles:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Newsletter ----------
   The sign-up (components/Newsletter.astro, and the same markup on the
   journal's pages, which carry a copy of this file): the words beside the
   form on a wide screen, under it on a phone. Without a script the form
   is hidden, since the server takes no sign-up without its token, and a
   sentence says so. */
.newsletter-signup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--space-4) var(--space-7); align-items: start; padding: var(--space-6); border: 1px solid var(--c-line); border-radius: calc(var(--radius-2) * 2); background-color: var(--c-raised); }
.newsletter-signup h2 { margin: 0 0 var(--space-2); font-size: 1.25rem; color: var(--c-text); }
.newsletter-signup__text p { margin: 0; color: var(--c-text-2); }
.newsletter-signup > noscript { grid-column: 2; }
.newsletter-form { display: grid; gap: var(--space-2); }
.newsletter-form .field > label { color: var(--c-text); }
.newsletter-form__row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.newsletter-form__row .input { flex: 1 1 14rem; min-width: 0; }
.newsletter-form__row .button { flex: none; }
.newsletter-form .hint { margin: var(--space-1) 0 0; }
.no-js .newsletter-form { display: none; }
.newsletter-done { align-self: center; }
.newsletter-done p { margin: 0; }
/* In the footer it opens the footer, above the columns of links. */
.site-footer .newsletter-signup { margin-bottom: var(--space-7); font-size: 1rem; }
.site-footer .newsletter-signup h2 { font-size: 1.25rem; margin-bottom: var(--space-2); }
.newsletter-end { margin-top: var(--space-8); }
@media (max-width: 47.99rem) {
  .newsletter-signup { grid-template-columns: 1fr; padding: var(--space-5) var(--space-4); }
  .newsletter-signup > noscript { grid-column: auto; }
}
/* Its own page: what it is beside the sign-up, which stands on its own. */
.newsletter-page { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-7); align-items: start; }
.newsletter-page__about { display: grid; gap: var(--space-6); }
.newsletter-page__about h2 { font-size: 1.375rem; margin-bottom: var(--space-3); }
.newsletter-points { display: grid; gap: var(--space-3); margin: 0; padding-left: 1.25rem; }
.newsletter-points li { max-width: 60ch; }
.newsletter-signup--page { grid-template-columns: 1fr; }
@media (max-width: 63.99rem) { .newsletter-page { grid-template-columns: 1fr; } }
/* The confirmation and the way off: one button, then what it did. */
.newsletter-step { display: grid; gap: var(--space-4); max-width: 40rem; }
.newsletter-step .notice p + p { margin-top: var(--space-3); }

/* Copyright Samuel Krauss (Elchi Studios). All rights reserved.
   SPDX-License-Identifier: LicenseRef-Proprietary */

/* What only the journal's pages need on top of the hub's rules (hub.css),
   served with them as one file. Tokens only, like the hub's.

   The journal's language switch has four languages where the hub's has
   two, and four do not fit a phone's header beside the brand and the menu.
   On a narrow screen the header's switch moves into the menu, where it is
   a row of four names, as the hub's does on the narrowest phones. */
@media (max-width: 35.99rem) {
  .hub-header .site-header__end > .langs { display: none; }
  .hub-header .langs--menu { display: flex; flex-wrap: wrap; }
}