/* HUGIN holding page (job:hugin-anon-domain). Combo palette (04-design/hugin-brand/combo/tokens.json), both themes. */
@font-face { font-family: "Archivo"; src: url("/assets/archivo.woff") format("woff"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Martian Mono"; src: url("/assets/martian.woff") format("woff"); font-weight: 100 800; font-display: swap; }
:root {
  --ground: #EEEDE8; --cell: #F6F5F2; --line: #C8C6BE; --ink: #0D0E10; --dim: #585A62; --up: #1C7349;
  --wm: rgba(13, 14, 16, .024);
}
@media (prefers-color-scheme: dark) {
  :root { --ground: #0A0A0B; --cell: #111113; --line: #2A2A2F; --ink: #EDEDEF; --dim: #8A8A93; --up: #7FC79A;
    --wm: rgba(255, 255, 255, .03); }
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 17px/1.5 "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  display: grid; grid-template-rows: 1fr auto; overflow-x: hidden;
}
.hold { position: relative; display: grid; place-items: center; align-content: center; gap: 10px; padding: 48px 20px; text-align: center; }
.mark img { display: block; width: 132px; height: 132px; animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
h1 { margin: 6px 0 0; font-weight: 800; font-stretch: 112%; letter-spacing: .32em; font-size: clamp(34px, 7vw, 56px);
  padding-left: .32em; animation: rise .9s .12s cubic-bezier(.2, .7, .2, 1) both; }
.line { margin: 0; max-width: 30ch; color: var(--dim); font-size: clamp(17px, 2.6vw, 20px); animation: rise .9s .24s cubic-bezier(.2, .7, .2, 1) both; }
.soon { margin: 18px 0 0; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--cell); font: 500 13px/1 "Martian Mono", ui-monospace, monospace; letter-spacing: .08em;
  text-transform: uppercase; animation: rise .9s .36s cubic-bezier(.2, .7, .2, 1) both; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--up); animation: pulse 2.4s ease-in-out infinite; }
/* The Runestone dial, as a slow living watermark behind the mark. */
.dial { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: -1; }
.dial i { position: absolute; border-radius: 50%; border: 1px solid var(--wm); }
.dial i:nth-child(1) { width: min(86vmin, 640px); height: min(86vmin, 640px); border-width: 28px; border-style: dashed;
  animation: spin 180s linear infinite; }
.dial i:nth-child(2) { width: min(62vmin, 460px); height: min(62vmin, 460px); border-width: 2px; }
.dial i:nth-child(3) { width: min(40vmin, 300px); height: min(40vmin, 300px); border-width: 14px; border-style: dotted;
  animation: spin 240s linear infinite reverse; }
.foot { padding: 16px 20px 22px; text-align: center; color: var(--dim); font: 400 12px/1.4 "Martian Mono", ui-monospace, monospace; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }