/* Hallmark · shape: Stage, the atom alone at the centre, two small things at the foot · genre: modern-minimal · theme: brand
 * paper: the logo tile's own diagonal (surface: absolute) · display: Archivo 116/700, a two-word subset · hero: the atom, by the order · nav: none · footer: none, two small icons (X and mail) in the corner, under the words on a phone · signature: the logo itself as a lit nucleus, with light travelling its orbits
 * axes: light/grotesk-wide/warm · posture: committed · contrast: pass (#C02F00 on the tile foot, 4.7:1 or better) · fold: pass · copy: verbatim · v2.1.0 */
/* Hallmark · waive 44c · no head and no sentence on the page · the order asks for the atom alone with two small things at the foot */
/* Hallmark · dismissed 77 · the order is one full-screen page: the atom, one status line and two icons; nothing else may be on it */
@font-face { font-family: 'Archivo Status'; src: url(/assets/fonts/coming.ca72692ff9.woff2) format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
:root {
  --color-accent-ink: #C02F00;
  --field: linear-gradient(135deg, #fff7f1 0%, #fff6ed 12.5%, #fff4e9 25%, #fff1e5 37.5%, #ffefe1 50%, #ffeddd 62.5%, #ffebd9 75%, #ffe8d5 87.5%, #ffe6d0 100%);
  --font-status: 'Archivo Status', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
html, body { margin: 0; height: 100%; overflow: clip; overscroll-behavior: none; background-color: #ffefe1; background-image: var(--field); background-attachment: fixed; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; touch-action: manipulation; }
body { position: fixed; inset: 0; }
/* the large viewport carries the canvas, the small one (.foot) places the words and the icon: Safari's bars can come and go and nothing jumps or is covered */
.cs { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: clip; background-image: var(--field); color: var(--color-accent-ink); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
@supports (height: 100lvh) { .cs { bottom: auto; height: 100lvh; } }
.foot { position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-sizing: border-box; padding-top: env(safe-area-inset-top, 0px); pointer-events: none; }
@supports (height: 100svh) { .foot { bottom: auto; height: 100svh; } }
.atom { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; opacity: 0; -webkit-tap-highlight-color: transparent; }
.atom[data-ready='1'] { opacity: 1; }
.poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.status { position: absolute; left: 0; right: 0; bottom: calc(max(14px, env(safe-area-inset-bottom, 0px)) + clamp(30px, 5.2%, 58px)); margin: 0; text-align: center; font-family: var(--font-status); font-weight: 700; font-size: clamp(18px, 0.35vw + 13.5px, 20.5px); line-height: 22px; letter-spacing: -0.01em; color: var(--color-accent-ink); pointer-events: none; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.x { position: absolute; right: max(4px, env(safe-area-inset-right, 0px)); bottom: max(4px, env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; display: grid; place-items: center; color: var(--color-accent-ink); pointer-events: auto; touch-action: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.mail { right: calc(max(4px, env(safe-area-inset-right, 0px)) + 44px); }
.x svg { width: 20px; height: 20px; fill: currentColor; display: block; transition: transform .12s ease-out; }
.x:hover svg { transform: scale(1.14); }
.x:active svg { opacity: .7; }
.x:focus-visible { outline: 2px solid currentColor; outline-offset: -6px; }
@media (prefers-reduced-motion: reduce) { .x svg { transition: none; } }
@media (pointer: coarse) { .x { width: 56px; height: 56px; right: max(2px, env(safe-area-inset-right, 0px)); bottom: max(2px, env(safe-area-inset-bottom, 0px)); } .mail { right: calc(max(2px, env(safe-area-inset-right, 0px)) + 56px); } .x svg { width: 22px; height: 22px; } }
/* A phone's browser can lie over the foot of the page, or start the page under its top bar so the foot runs off the screen (X on an iPhone): the foot is never safe there. On a phone the words and the icons stand directly under the atom, in the part of the page every shape of webview keeps in view; no script, no canvas needed. 51.12vw is half the atom's tallest reach (src/cs/atom.js); the 77.1% line is the top of the lowest bar on the page: 80px above it fits the words and the icons. */
@media (max-width: 767px), (max-height: 500px) {
  .foot { --words-top: min(calc(45.5% + 51.12vw - 4px), calc(77.1% - 80px)); }
  .status { bottom: auto; top: var(--words-top); }
  .x { bottom: auto; top: calc(var(--words-top) + 24px); width: 48px; height: 48px; right: auto; left: calc(50% + 2px); }
  .mail { left: auto; right: calc(50% + 2px); }
}
/* The still image stops above the words and the atom in it stands on them, as the live atom does: 152.75vw lands it there on the 430x1000 render; the soft edge leaves no seam with the page. */
@supports (height: 100svh) {
  @media (max-width: 767px), (max-height: 500px) { .poster { --above-words: min(calc(45.5svh + 51.12vw - 18px), calc(77.1svh - 94px)); height: var(--above-words); object-position: 50% calc(var(--above-words) - 152.75vw); -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent); } }
  @media (max-width: 767px) and (orientation: landscape), (max-height: 500px) and (orientation: landscape) { .poster { object-position: 50% 50%; } }
}