/* 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, at the foot of what is visible 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); }
}
/* On a phone, a touch screen (pointer: coarse; a desk's mouse or trackpad never is, so a desk keeps the layout above at every window size), the icons stand at the foot of what is visible, and the atom with the words under it stands as one pair in the middle of the space above them. --seen is that foot where src/cs/atom.js knows better than the small viewport (a webview as tall as the screen, a visual viewport that ends higher), else it is the foot of .foot itself, so a sheet that is dragged smaller or larger carries them along with no script; 12px and the home indicator keep them off the browser's bar. The middle lies halfway between the top of what is free (the safe-area top) and the row; 51.12vw is half the atom's tallest reach at full size and the atom stands 14px over the words (src/cs/atom.js), so the words at that middle plus 51.12vw - 4px put the pair's centre on it. When the space is too short for that, the words stand 32px above the row (the pair keeps 10px at the top and at the foot) and the atom shrinks to fit above them. Without script nothing can tell a webview that runs off the screen: there the words keep their place under the 77.1% line, and the icons stay directly under them. */
@media (max-width: 767px) and (pointer: coarse), (max-height: 500px) and (pointer: coarse) {
  .foot { --row: calc(var(--seen, 100%) - max(12px, env(safe-area-inset-bottom, 0px)) - 48px); --words-top: min(calc((env(safe-area-inset-top, 0px) + var(--row)) / 2 + 51.12vw - 4px), calc(var(--row) - 32px)); }
  .x { top: var(--row); }
}
@media (scripting: none) and (max-width: 767px) and (pointer: coarse), (scripting: none) and (max-height: 500px) and (pointer: coarse) {
  .foot { --words-top: min(calc(45.5% + 51.12vw - 4px), calc(77.1% - 80px)); }
  .x { top: calc(var(--words-top) + 24px); }
}
/* 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%; } }
  @media (max-width: 767px) and (pointer: coarse), (max-height: 500px) and (pointer: coarse) { .poster { --above-words: min(calc((env(safe-area-inset-top, 0px) + var(--seen, 100svh) - max(12px, env(safe-area-inset-bottom, 0px)) - 48px) / 2 + 51.12vw - 18px), calc(var(--seen, 100svh) - max(12px, env(safe-area-inset-bottom, 0px)) - 94px)); } }
  @media (scripting: none) and (max-width: 767px) and (pointer: coarse), (scripting: none) and (max-height: 500px) and (pointer: coarse) { .poster { --above-words: min(calc(45.5svh + 51.12vw - 18px), calc(77.1svh - 94px)); } }
}