/* 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); }

.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); }

/* ---------- 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; }

/* ---------- 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); }
}

/* 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)); } }

/* 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; }
}