/* Snowy Ghost: Ink & Snow.
   The logo's own drawing language for the whole site: true black line on cold
   snow paper, white fills, one confident stroke. Shared by the home page and the
   legal pages. */

@font-face {
  font-family: "Shantell Sans";
  src: url("/assets/fonts/shantell-sans.woff2") format("woff2");
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/assets/fonts/atkinson-hyperlegible-next.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/assets/fonts/atkinson-hyperlegible-next-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #f2f5f8;
  --snow: #fff;
  --ink: #000;
  --graphite: #2f353d;
  --graphite-soft: #545c66;
  --ember: #a8400c;
  --display: "Shantell Sans", ui-rounded, system-ui, sans-serif;
  --text: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --wrap: 74rem;
  --line: 3px;
}

* { box-sizing: border-box; }
/* The page colour lives on html only: it paints beneath the fixed snow canvas,
   so every section stays transparent and lets the snow through. */
html { background: var(--paper); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  color: var(--graphite);
  font: 400 1.0625rem/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 0.22em; }
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 6px; }
p { margin: 0 0 1em; text-wrap: pretty; }

h1, h2, h3 {
  font-family: var(--display);
  color: var(--ink);
  margin: 0;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.nowrap { white-space: nowrap; }

.skip {
  position: absolute; left: -999px; top: 0.5rem; z-index: 10;
  padding: 0.5rem 1rem; background: var(--snow);
  border: var(--line) solid var(--ink); border-radius: 999px;
}
.skip:focus { left: 0.5rem; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

#snow {
  position: fixed; inset: 0; z-index: -1;
  width: 100%; height: 100vh; height: 100lvh;
  pointer-events: none;
}

/* ---------- Nav ---------- */
.nav {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
  padding-block: 1.25rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.5rem 1rem;
}
.brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--display); font-weight: 700; font-size: 1.25rem;
  text-decoration: none;
}
.brand img { width: 2.25rem; height: 2.25rem; }
.nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0; padding: 0; }
.nav li a {
  display: inline-block; padding: 0.45rem 0.8rem; border-radius: 999px;
  font-weight: 700; font-size: 0.95rem; text-decoration: none;
}
.nav li a:hover, .nav li a[aria-current="page"] { background: var(--snow); box-shadow: inset 0 0 0 2px var(--ink); }
@media (max-width: 40rem) {
  .nav ul { margin-inline: -0.55rem; gap: 0; }
  .nav li a { padding-inline: 0.55rem; }
}
@media (max-width: 22.5rem) {
  .nav ul { margin-inline: -0.3rem; }
  .nav li a { padding-inline: 0.3rem; font-size: 0.875rem; }
}

/* ---------- Buttons and small parts ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 3rem; padding: 0.7rem 1.35rem;
  border: var(--line) solid var(--ink); border-radius: 999px;
  background: var(--snow); color: var(--ink);
  font-family: var(--display); font-weight: 700; font-size: 1.08rem;
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
.btn--ember { background: var(--ember); color: #fff; }

.status {
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin: 0 0 1.1rem; padding: 0.3rem 0.85rem 0.3rem 0.6rem;
  border: 2px solid var(--ink); border-radius: 999px;
  background: var(--snow); color: var(--ink);
  font-weight: 700; font-size: 0.9rem; line-height: 1.3;
}
.status i {
  flex: none; width: 0.8rem; height: 0.8rem;
  border: 2px solid var(--ink); border-radius: 50%; background: var(--snow);
}
.status--live i { background: var(--ink); }
.status--soon i { background: var(--ember); }

.legal-links { display: inline-flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.95rem; }

.product-name { font-size: clamp(3rem, 8vw, 6.5rem); font-weight: 800; letter-spacing: -0.02em; }
.product-sub {
  font-family: var(--display); font-weight: 500; color: var(--ink);
  font-size: clamp(1.35rem, 2.4vw, 1.8rem); line-height: 1.25;
  margin: 0.6rem 0 1.4rem;
  text-wrap: balance;
}
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem 1.5rem; margin-top: 2rem; }
.actions > a:not(.btn) { font-weight: 700; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: min(100svh, 60rem); display: flex; flex-direction: column; overflow: hidden; overflow: clip; }
.hero-inner {
  flex: 1;
  width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center; gap: clamp(2rem, 5vw, 5rem);
  padding-block: 2rem 5rem;
}
.hero h1 { font-size: clamp(2.6rem, 6.4vw, 5.6rem); font-weight: 750; line-height: 1.02; max-width: 12ch; }
.lead { font-size: clamp(1.12rem, 1.6vw, 1.3rem); max-width: 39rem; margin-top: 1.6rem; }
.hero .actions { margin-top: 2.2rem; }
.snow-control { margin: 1.4rem 0 0; }
.snow-control button {
  padding: 0.4rem 0; border: 0; background: none; cursor: pointer;
  font: 700 0.95rem var(--text); color: var(--graphite-soft);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.22em;
}
.snow-control button:hover { color: var(--ink); }
.snow-on.snow-paused .ghost, .snow-on.snow-paused .ghost-shadow { animation-play-state: paused; }

.ghost-stage { position: relative; justify-self: center; width: clamp(170px, 24vw, 330px); padding-top: 3rem; }
.ghost {
  position: relative; z-index: 1; display: block; width: 100%;
  padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: 40% 40% 12% 12%;
  -webkit-tap-highlight-color: transparent;
}
.ghost-art { width: 100%; height: auto; transform-origin: 50% 88%; }
.ghost.shiver .ghost-art { animation: shiver 0.7s ease-in-out; }
.ghost-art .eyes circle { transform-box: fill-box; transform-origin: center; transition: transform 0.06s ease; }
.ghost-art.blink .eyes circle { transform: scaleY(0.12); }
.ghost-art.pop .eyes circle { animation: eye-pop 0.34s ease-out; }
.ghost-art .squint, .ghost-art.squint .eyes { display: none; }
.ghost-art.squint .squint { display: inline; }
.ghost-shadow {
  display: block; width: 62%; height: 0.9rem; margin: 0.4rem auto 0;
  border-radius: 50%; background: rgba(0, 0, 0, 0.13);
  transition: filter 0.6s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .snow-on .ghost { animation: bob 5.6s ease-in-out infinite; }
  .snow-on .ghost-shadow { animation: shadow 5.6s ease-in-out infinite; }
}
/* Buried, he sits still in his pile, which casts its own shadow. Until the script
   draws the pile, he stays hidden, so the reveal is never spoiled. If it never
   runs, he shows after a moment anyway. */
.buried .ghost, .buried .ghost-shadow { animation: none; }
.buried .ghost-shadow { filter: opacity(0); transition: none; }
/* The whole pile answers a tap, and its focus ring goes on the hint below, since the
   pile is drawn over the button. */
.buried .ghost::before {
  content: ""; position: absolute; left: -23%; right: -23%; top: 0; bottom: -8%;
  clip-path: polygon(36% 0, 64% 0, 100% 100%, 0 100%);
}
.buried .ghost:focus-visible { outline: none; }
.buried .ghost:focus-visible ~ .ghost-hint { opacity: 1; outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 6px; }
.js:not(.snow-on) :is(.ghost-art, .ghost-shadow) { visibility: hidden; animation: show-late 0s 3s forwards; }
/* The snow cap is drawn here, above the ghost, in the ghost's own line. */
#cap { position: absolute; z-index: 2; left: -70%; top: -40%; width: 240%; height: 230%; pointer-events: none; }
.ghost-hint {
  position: absolute; left: 50%; top: 100%; margin: 0.4rem 0 0;
  transform: translateX(-50%); white-space: nowrap;
  display: flex; align-items: center; gap: 0.4rem;
  font-family: var(--display); font-weight: 500; font-size: 1rem; color: var(--graphite);
  opacity: 0; transition: opacity 0.6s ease;
}
.ghost-hint svg { width: 1.6rem; height: 1.6rem; flex: none; }
.ghost-hint.show { opacity: 1; }
.hint-touch { display: none; }
@media (hover: none) { .hint-touch { display: inline; } .hint-hover { display: none; } }

@keyframes show-late { to { visibility: visible; } }
@keyframes eye-pop { 0% { transform: scale(1, 0.15); } 55% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes shadow { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(0.86); opacity: 0.7; } }
@keyframes shiver {
  0% { transform: rotate(0); } 15% { transform: rotate(-8deg); } 32% { transform: rotate(7deg); }
  50% { transform: rotate(-5deg); } 68% { transform: rotate(3deg); } 84% { transform: rotate(-1.5deg); }
  100% { transform: rotate(0); }
}

@media (max-width: 760px) {
  .hero-inner { grid-template-columns: 1fr; padding-block: 0.5rem 4.5rem; gap: 3.2rem; }
  .ghost-stage { order: -1; width: clamp(150px, 46vw, 190px); padding-top: 1.5rem; }
  .hero h1 { max-width: 11ch; }
}

/* ---------- Ovenlight ---------- */
.ovenlight {
  position: relative; padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem); overflow: hidden; overflow: clip;
  --ov-w: min(100% - 2 * var(--gutter), var(--wrap));
  --ov-gap: clamp(2.5rem, 6vw, 6rem);
  /* the centre of the phone's 0.85fr column */
  --lamp-x: calc(50% + var(--ov-w) * 0.2875 + var(--ov-gap) * 0.2125);
}
/* The oven light: a soft cone falling from the lamp's bulb onto the phone. */
.ovenlight::before {
  content: ""; position: absolute; z-index: -1;
  left: calc(var(--lamp-x) - 30rem); top: 5.3rem; width: 60rem; height: min(70rem, 92%);
  background: radial-gradient(ellipse 52% 78% at 50% 0%, rgba(255, 206, 140, 0.9), rgba(246, 150, 70, 0.34) 46%, rgba(246, 150, 70, 0) 82%);
  -webkit-mask-image: conic-gradient(from 150deg at 50% 0%, transparent 0deg, #000 13deg, #000 47deg, transparent 60deg);
  mask-image: conic-gradient(from 150deg at 50% 0%, transparent 0deg, #000 13deg, #000 47deg, transparent 60deg);
  pointer-events: none;
}
.lamp { position: absolute; left: var(--lamp-x); top: 0; width: 5.5rem; transform: translateX(-50%); }
.ov-grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--ov-gap); align-items: start;
  padding-top: clamp(4rem, 8vw, 7rem);
}
.ov-intro { font-size: 1.15rem; max-width: 36rem; }
.features {
  list-style: none; padding: 0; margin: 2.4rem 0 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 2.2rem;
}
.features li { display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: 0; }
.features svg { width: 3rem; height: 3rem; margin-bottom: 0.7rem; }
.features h3 { font-size: 1.25rem; margin-bottom: 0.35rem; line-height: 1.2; align-self: end; }
.features p { margin: 0; font-size: 1rem; }
.ov-agent { margin-top: 2.4rem; max-width: 36rem; }
.ov-agent strong, .ov-none { color: var(--ink); }
.ov-none { font-weight: 700; }

.phone {
  position: relative; justify-self: center; margin: 1rem 0 0;
  width: min(100%, 22rem); padding: 0.7rem;
  border: 4px solid var(--ink); border-radius: 3.1rem;
  background: var(--snow); box-shadow: 8px 8px 0 var(--ink);
}
.phone::before {
  content: ""; position: absolute; z-index: 1; left: 50%; top: 1.45rem;
  width: 28%; height: 1.55rem; transform: translateX(-50%);
  border-radius: 999px; background: var(--ink);
}
.phone img {
  width: 100%;
  border: 2px solid var(--ink); border-radius: 2.4rem;
}
@media (max-width: 860px) {
  .ov-grid { grid-template-columns: 1fr; }
  .ovenlight .phone { order: -1; width: min(78%, 19rem); }
  .ovenlight { --lamp-x: 50%; }
  .ovenlight::before { height: 48rem; }
}
@media (max-width: 520px) { .features { grid-template-columns: 1fr; gap: 1.6rem; } }

/* ---------- Glitch ---------- */
.glitch { padding-block: clamp(4rem, 9vw, 8rem); }
.glitch-grid {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2.5rem, 6vw, 6rem); align-items: center;
}
.poster {
  justify-self: center; width: min(100%, 24rem); margin: 0; overflow: hidden;
  border: 4px solid var(--ink); border-radius: 1.4rem;
  background: var(--snow); box-shadow: 8px 8px 0 var(--ink);
  transform: rotate(-2.2deg);
}
.glitch-copy > p:not([class]) { max-width: 34rem; }
.badge img { height: 3.2rem; width: auto; }
@media (max-width: 860px) {
  .glitch-grid { grid-template-columns: 1fr; }
  .poster { width: min(80%, 20rem); }
}

/* ---------- Workbench: Dimm and Whengo ---------- */
.bench-section { padding-block: clamp(4rem, 9vw, 8rem); }
.section-title { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 750; }
.section-intro { font-size: 1.15rem; margin-top: 0.9rem; }
.bench { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(3rem, 7vw, 6.5rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.bench article { max-width: 32rem; display: flex; flex-direction: column; scroll-margin-top: 1.5rem; }
.bench .spot { width: min(100%, 15rem); margin-bottom: 1.5rem; }
.bench .product-name { font-size: clamp(2.6rem, 5vw, 4rem); }
.bench .product-sub { margin-bottom: 1rem; }
.bench-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.4rem; margin: auto 0 0; padding-top: 1.6rem; }
.bench-meta .status { margin: 0; }
@media (max-width: 760px) { .bench { grid-template-columns: 1fr; } }

/* ---------- About ---------- */
.about { padding-block: clamp(4rem, 9vw, 8rem); }
.about-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.about-lead { font-size: 1.3rem; color: var(--ink); line-height: 1.45; }
@media (max-width: 760px) { .about-grid { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.footer { padding-block: clamp(4rem, 9vw, 7rem) 3rem; }
.hello { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 750; }
.big-mail {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.35rem, 6.6vw, 3.6rem);
  margin: 0.8rem 0 0.6rem; overflow-wrap: anywhere;
}
.big-mail a { text-decoration-thickness: 3px; }
.legal-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, auto)); justify-content: start;
  gap: 1.5rem 3.5rem; margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 2rem;
  border-top: var(--line) solid var(--ink);
}
.legal-grid .label { margin: 0 0 0.4rem; font-family: var(--display); font-weight: 700; font-size: 1.1rem; color: var(--ink); }
.legal-grid a { display: inline-block; padding-block: 0.3rem; }
.legal-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.95rem; }
.copyright { margin-top: 2.5rem; font-size: 0.95rem; color: var(--graphite-soft); }
.footer--doc { padding-top: 3rem; }
.footer--doc .legal-grid { margin-top: 0; }
@media (max-width: 720px) { .legal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; } }

/* ---------- Legal pages ---------- */
.doc { width: min(100% - 2 * var(--gutter), 38rem); margin-inline: auto; padding-block: clamp(1.5rem, 5vw, 3.5rem) 1rem; }
.doc-product { display: block; margin-bottom: 0.5rem; font-size: 1.15rem; line-height: 1.2; color: var(--graphite-soft); }
.doc h1 { font-size: clamp(2.4rem, 6vw, 3.6rem); font-weight: 800; }
.doc .updated { color: var(--graphite-soft); margin: 0.9rem 0 2.2rem; }
.doc h2 { font-size: clamp(1.35rem, 3vw, 1.6rem); margin: 2.4rem 0 0.7rem; line-height: 1.2; }
.doc h3 { font-size: 1.15rem; margin: 1.6rem 0 0.5rem; line-height: 1.25; }
.doc ul, .doc ol { padding-left: 1.3rem; margin: 0 0 1em; }
.doc li { margin: 0.35rem 0; }
.doc li::marker { color: var(--ink); }
.doc strong { color: var(--ink); }
.doc hr { border: 0; border-top: var(--line) solid var(--ink); margin: 2.5rem 0; }
.doc .highlight {
  padding: 1rem 1.2rem; margin: 0 0 1.5rem;
  background: var(--snow); color: var(--ink);
  border: var(--line) solid var(--ink); border-radius: 1rem;
  box-shadow: 5px 5px 0 var(--ink);
}
.doc .highlight p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .btn, .ghost-hint { transition: none; }
  .ghost.shiver .ghost-art { animation: none; }
}
.glitch-copy .legal-links { display: flex; margin: 1.2rem 0 0; }