/* the live page is mark "G": dark by default (also when the system gives no hint), light only on an explicit light hint */
:root {
  --bg: #0c110e;
  --ink: #e6ece8;
  --muted: #8d9a92;
  --tile: #3ee08f;
  --glyph: #0c110e;
  --accent: #3ee08f;
  --mono: ui-monospace, "JetBrains Mono", "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #ffffff;
    --ink: #0c110e;
    --muted: #5d615e;
    --tile: #0c110e;
    --glyph: #3ee08f;
    --accent: #16a862;
  }
}

/* design-board themes: each option panel pins its own colours, independent of the system scheme */
.theme-ink {
  --bg: #ffffff; --ink: #141414; --muted: #5d615e;
  --tile: #141414; --glyph: #ffffff; --accent: #141414;
}
.theme-phosphor {
  --bg: #0c110e; --ink: #e6ece8; --muted: #8d9a92;
  --tile: #0c110e; --glyph: #3ee08f; --accent: #3ee08f;
}
.theme-lime {
  --bg: #1d232b; --ink: #e7ecef; --muted: #93a0ad;
  --tile: #c6f432; --glyph: #1d232b; --accent: #c6f432;
}
.theme-phosphor-tile {
  --bg: #0c110e; --ink: #e6ece8; --muted: #8d9a92;
  --tile: #3ee08f; --glyph: #0c110e; --accent: #3ee08f;
}
.theme-g-light {
  --bg: #ffffff; --ink: #0c110e; --muted: #5d615e;
  --tile: #0c110e; --glyph: #3ee08f; --accent: #16a862;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 1rem/1.6 var(--mono);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding: 1.5rem;
}

a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }

.page { flex: 1; display: flex; flex-direction: column; }

.card {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
}

.lockup { display: block; margin: 0 0 1.5rem; width: min(100%, 28rem); }
.lockup svg { display: block; width: 100%; height: auto; }
.lockup .tile { fill: var(--tile); }
.lockup .glyph { fill: var(--glyph); }
.lockup .word { fill: var(--ink); }
.lockup .ring { fill: none; stroke: var(--accent); stroke-width: 3; }

.tagline {
  margin: 0;
  color: var(--muted);
  font-size: clamp(.9375rem, 2.4vw, 1.0625rem);
}

/* the tagline types itself out once (45 chars, 1ch each in a monospace font), then the cursor keeps blinking */
.typed {
  display: inline-block;
  vertical-align: bottom;
  white-space: nowrap;
  overflow: hidden;
  width: 45ch;
  animation: type 1.8s steps(45, end) .5s both;
}
@keyframes type { from { width: 0; } }

.cursor {
  display: inline-block;
  width: .6em;
  height: 1.1em;
  margin-left: .2em;
  vertical-align: -.2em;
  background: var(--accent);
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .typed, .cursor { animation: none; } }
/* too narrow for one line: no typing, let it wrap */
@media (max-width: 38rem) {
  .typed { display: inline; white-space: normal; width: auto; animation: none; }
}

/* contact line: a phosphor link that fades in just after the tagline finishes typing (.5s delay + 1.8s) */
.contact {
  margin: 2rem 0 0;
  font-size: clamp(.9375rem, 2.4vw, 1.0625rem);
  animation: reveal .5s ease-out 2.4s both;
}
.contact a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
  transition: text-decoration-color .2s;
}
.contact a::before { content: "→ " / ""; color: var(--muted); }
.contact a:hover { text-decoration-color: currentColor; }
@keyframes reveal { from { opacity: 0; transform: translateY(.25rem); } }
@media (prefers-reduced-motion: reduce) { .contact { animation: none; } }
@media (max-width: 38rem) { .contact { animation-delay: 0s; } }   /* no typing on narrow screens, so no wait */

.site-footer {
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  text-align: center;
  color: var(--muted);
  font-size: .75rem;
}
.site-footer p { margin: 0; }

/* design board: option panels side by side on a neutral canvas */
body.board {
  display: block;
  background: #e4e4e0;
  color: #141414;
  padding: 1.5rem;
}

.options {
  display: grid;
  gap: 2rem 1.5rem;
  max-width: 90rem;
  margin: 0 auto;
}
@media (min-width: 72rem) {
  .options { grid-template-columns: 1fr 1fr; }
}

.option-label {
  margin: 0 0 .5rem;
  font: 600 .75rem/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6b6b66;
}

.panel {
  --pt: 3rem;
  --px: 2.5rem;
  display: flex;
  flex-direction: column;
  min-height: 34rem;
  padding: var(--pt) var(--px) 1.5rem;
  overflow: hidden;
  border-radius: 14px;
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 8px 24px rgb(0 0 0 / .08);
}
@media (max-width: 38rem) {
  .panel { --pt: 2.5rem; --px: 1.5rem; min-height: 26rem; }
}

/* layouts */
.layout-center .card { align-items: center; text-align: center; }
.layout-center .lockup { width: min(100%, 15rem); }