/*! Cormorant Garamond: Copyright 2015 The Cormorant Project Authors. IBM Plex Sans and IBM Plex Mono:
    Copyright IBM Corp. Licensed under the SIL Open Font License, Version 1.1; the licence ships with each
    family in /fonts/<family>/OFL.txt. */

/* The coming-soon page at ghillie.com (site/README.md, ADR-0170). It is the app's public split shell (PublicShell,
   web/src/styles/public.css) with one page in it, so it looks like the sign-in page it will lead to. The tokens are the
   ones it uses, copied from brand/tokens.css with the same values: Field notes on :root, Night when the device prefers
   dark, and Night always on the art (.theme-night). No script, no style attributes; nothing moves unless motion is
   welcome; amber nowhere (nothing has been found here). */

/* --- Fonts: the app's self-hosted WOFF2 subsets, the faces this page uses. --- */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/cormorant-garamond/cormorant-garamond-latin-600-normal.ae062b6d.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/cormorant-garamond/cormorant-garamond-latin-500-italic.4fb55a7a.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans/ibm-plex-sans-latin-400-normal.3b646991.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans/ibm-plex-sans-latin-600-normal.8960851d.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono/ibm-plex-mono-latin-400-normal.08949f72.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono/ibm-plex-mono-latin-500-normal.01d28544.woff2") format("woff2");
}

/* --- Tokens (brand/tokens.css) --- */
:root {
  --void: #07060d;

  --font-display: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --fs-display-xl: 2.75rem;
  --fs-read: 1.0625rem;
  --fs-body: 0.9375rem;
  --fs-small: 0.8125rem;
  --fs-label: 0.6875rem;
  --fs-code: 0.875rem;
  --lh-read: 1.65;
  --lh-body: 1.55;
  --tracking-label: 0.1em;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;

  --radius-s: 6px;
  --radius-l: 14px;
  --radius-pill: 999px;
  --target-min: 44px;

  --dur-fast: 120ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Field notes (light): the base. */
:root {
  color-scheme: light;
  --bg: #f3f0fa;
  --surface-1: #ffffff;
  --surface-2: #f8f6fd;
  --surface-code: #faf9fe;
  --line-subtle: #ece8f5;
  --line: #e0dbee;
  --line-strong: #cbc3e2;
  --control-edge: #857da6;
  --text: #17132b;
  --text-muted: #4f4868;
  --text-subtle: #5f5879;
  --accent: #5b3fd1;
  --accent-strong: #4a2fc0;
  --accent-soft: rgb(91 63 209 / 0.1);
  --on-accent: #ffffff;
  --syn-keyword: #4a2fc0;
  --syn-string: #0b6a84;
  --syn-comment: #5f5879;
  --syn-title: #17132b;
  --eye: #5b3fd1;
  --bg-glow: rgb(91 63 209 / 0.05);
  --shadow-1: 0 1px 2px rgb(23 19 43 / 0.06), 0 1px 1px rgb(23 19 43 / 0.03);
  --focus-ring: 2px solid var(--accent);
}

/* Night, when the device prefers dark. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #09080f;
    --surface-1: #14112a;
    --surface-2: #1b1837;
    --surface-code: #0d0b1c;
    --line-subtle: #1f1b3a;
    --line: #2c2752;
    --line-strong: #3e3773;
    --control-edge: #7a72a8;
    --text: #ece8f6;
    --text-muted: #aaa3c7;
    --text-subtle: #948db8;
    --accent: #9d7eff;
    --accent-strong: #c3b1ff;
    --accent-soft: rgb(157 126 255 / 0.14);
    --on-accent: #0b0a16;
    --syn-keyword: #c3b1ff;
    --syn-string: #8fd8ec;
    --syn-comment: #948db8;
    --syn-title: #f4f1ff;
    --eye: #c3b1ff;
    --bg-glow: rgb(138 99 255 / 0.07);
    --shadow-1: inset 0 1px 0 rgb(255 255 255 / 0.035), 0 1px 2px rgb(0 0 0 / 0.45);
    --focus-ring: 2px solid var(--accent);
  }
}

/* Night, always: the art. */
.theme-night {
  color-scheme: dark;
  --line: #2c2752;
  --text: #ece8f6;
  --text-muted: #aaa3c7;
  --accent: #9d7eff;
  --eye: #c3b1ff;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

code,
pre {
  font-family: var(--font-mono);
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: var(--space-3);
  left: var(--space-4);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-s);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-300%);
}

.skip-link:focus {
  transform: none;
}

.icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon circle {
  fill: currentColor;
}

/* --- The brand marks (web/src/styles/brand.css) --- */
.wordmark {
  display: block;
  width: auto;
  height: 28px;
  color: var(--text);
}

.wordmark__strokes {
  fill: none;
  stroke: currentColor;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand-eye {
  fill: var(--accent-strong);
}

.brand-halo__core {
  stop-color: var(--accent);
  stop-opacity: 0.55;
}

.brand-halo__edge {
  stop-color: var(--accent);
  stop-opacity: 0;
}

@keyframes hood-blink {
  0%,
  95%,
  100% {
    transform: scaleY(1);
  }

  97% {
    transform: scaleY(0.1);
  }
}

/* --- The public split shell (web/src/styles/public.css): the panel, 5; the art, 7. --- */
.public {
  display: grid;
  grid-template-columns: minmax(28rem, 5fr) minmax(0, 7fr);
  min-height: 100vh;
  background: var(--bg);
}

.public__panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-7) var(--space-9);
  background: radial-gradient(90% 40% at 0% 0%, var(--bg-glow), transparent 70%);
}

.public__top {
  display: flex;
  align-items: center;
  min-height: var(--target-min);
}

.public__lockup {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  color: var(--text);
}

.public__tag {
  padding-left: var(--space-3);
  border-left: 1px solid var(--line-strong);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1.25;
  text-transform: uppercase;
}

.public__main {
  display: grid;
  flex: 1;
  place-items: center;
  padding: var(--space-8) 0;
}

.public__main:focus {
  outline: none;
}

.public__foot {
  color: var(--text-subtle);
  font-size: var(--fs-small);
}

.public__product {
  margin: 0;
}

/* The art: Ghillie as the fiber ghost (newGhillie.png's neutral figure, in an 820 by 1024 frame of its own black), sized
   to cover its box, with the eyes' SVG in the same box so they stay in the hood's opening. --art-focus-y says where the
   crop falls, top (0) to bottom (1): high enough that the crown clears the top. */
.public__art {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow: hidden;
  container-type: size;
  border-left: 1px solid var(--line);
  background: var(--void);
}

.public-art__figure {
  --art-focus-y: 0.25;
  position: absolute;
  top: calc((100cqh - max(100cqw, 80.08cqh) * 1.2488) * var(--art-focus-y));
  left: calc((100cqw - max(100cqw, 80.08cqh)) / 2);
  width: max(100cqw, 80.08cqh);
  aspect-ratio: 820 / 1024;
}

.public-art__image,
.public-art__eyes {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.public-art__eye {
  fill: var(--eye);
}

.public-art__watching {
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  .public-art__watching {
    animation: hood-blink 7s ease-in-out infinite;
  }
}

.public__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, var(--void) 100%);
  background:
    linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--void) 88%, transparent) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--void) 50%, transparent), transparent 30%);
  pointer-events: none;
}

.public-art__caption {
  display: grid;
  position: absolute;
  right: var(--space-9);
  bottom: var(--space-8);
  left: var(--space-9);
  z-index: 1;
  gap: var(--space-3);
}

.public-art__line {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.1;
}

.public-art__sub {
  max-width: 46ch;
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* --- The page: a heading and a line, one hunt to try, and the four facts the sign-in page states. --- */
.soon {
  display: grid;
  gap: var(--space-7);
  width: 100%;
  max-width: 34rem;
}

.soon__head {
  display: grid;
  gap: var(--space-4);
}

.soon__eyebrow {
  justify-self: start;
  margin: 0;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.soon__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  font-weight: 600;
  line-height: 1.05;
  text-wrap: balance;
}

.soon__lead {
  max-width: 66ch;
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-read);
  line-height: var(--lh-read);
}

/* One hunt: the code card, Ghillie's prompt, and "Show me" as a disclosure that works without script. What it shows
   isn't amber: "show me" isn't a find (docs/06; the player does the same). */
.hunt {
  display: grid;
  gap: var(--space-3);
}

.hunt__card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--surface-code);
  box-shadow: var(--shadow-1);
}

.hunt__file {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--line-subtle);
  background: var(--surface-2);
  font-size: var(--fs-small);
}

.hunt__name {
  font-family: var(--font-mono);
  font-weight: 500;
}

.hunt__lang {
  color: var(--text-subtle);
}

.hunt__scroll {
  overflow-x: auto;
}

.hunt__code {
  margin: 0;
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-3);
  color: var(--text);
  font-size: var(--fs-code);
  line-height: 1.75;
  tab-size: 2;
}

.hunt__ln {
  display: inline-block;
  width: 2ch;
  margin-right: var(--space-4);
  color: var(--text-subtle);
  text-align: right;
  user-select: none;
}

.syn-keyword {
  color: var(--syn-keyword);
}

.syn-string {
  color: var(--syn-string);
}

.syn-comment {
  color: var(--syn-comment);
}

.syn-title {
  color: var(--syn-title);
  font-weight: 500;
}

/* Ghillie's line: Plex Mono, lowercase, quiet. */
.hunt__prompt,
.hunt__here {
  margin: 0;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-body);
}

.hunt__show {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  padding: 0 var(--space-5);
  border: 1px solid var(--control-edge);
  border-radius: var(--radius-s);
  background: var(--surface-1);
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.hunt__show::-webkit-details-marker {
  display: none;
}

.hunt__show:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
}

@media (prefers-reduced-motion: no-preference) {
  .hunt__show {
    transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }
}

.hunt__reveal[open] .hunt__show {
  margin-bottom: var(--space-3);
}

.hunt__answer {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--surface-1);
  box-shadow: var(--shadow-1);
  font-size: var(--fs-body);
}

.hunt__answer p {
  margin: 0;
}

.hunt__answer code {
  font-size: 0.875em;
  overflow-wrap: anywhere;
}

.hunt__quote {
  padding: var(--space-2) var(--space-3);
  border-left: 2px solid var(--line-strong);
  background: var(--surface-code);
}

.hunt__where {
  margin-right: var(--space-2);
  color: var(--text-subtle);
  font-size: var(--fs-small);
}

.hunt__label {
  margin: var(--space-2) 0 0;
  color: var(--text-subtle);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* The four facts, each after an icon in the accent (public.css, .signin__facts). */
.facts {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-5) 0 0;
  border-top: 1px solid var(--line-subtle);
  list-style: none;
}

.facts li {
  display: flex;
  gap: var(--space-3);
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: 1.5;
}

.facts .icon {
  flex: none;
  margin-top: 2px;
  color: var(--accent);
}

/* --- The missing page (404.html): the app's error page words (ErrorPage.razor), and the way home as a link drawn as a
   secondary button (errors.css). --- */
.lost {
  display: grid;
  gap: var(--space-4);
  width: 100%;
  max-width: 26.25rem;
}

.lost__title {
  margin: 0;
  font-size: 1.625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.lost p {
  margin: 0;
}

.lost__advice {
  color: var(--text-muted);
}

.lost__home {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  padding: 0 var(--space-5);
  border: 1px solid var(--control-edge);
  border-radius: var(--radius-s);
  background: var(--surface-1);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.lost__home:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
}

/* --- Below 64rem the art is a band above the panel; on a phone, a narrower band. --- */
@media (max-width: 64rem) {
  .public {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }

  .public__art {
    position: relative;
    order: -1;
    height: 13.75rem;
    border-bottom: 1px solid var(--line);
    border-left: 0;
  }

  .public-art__figure {
    --art-focus-y: 0.26;
  }

  .public-art__caption {
    right: var(--space-6);
    bottom: var(--space-4);
    left: var(--space-6);
  }

  .public-art__line {
    font-size: 2rem;
  }

  .public-art__sub {
    display: none;
  }

  .public__panel {
    padding: var(--space-5) var(--space-6) var(--space-6);
  }

  .public__main {
    place-items: start center;
    padding: var(--space-6) 0 var(--space-8);
  }
}

@media (max-width: 48rem) {
  .public__art {
    height: 190px;
  }

  .public-art__figure {
    --art-focus-y: 0.2;
  }

  .public-art__caption {
    right: var(--space-4);
    left: var(--space-4);
  }

  .public-art__line {
    font-size: 1.75rem;
  }

  .public__panel {
    padding: var(--space-4) var(--space-4) var(--space-6);
  }

  .public__main {
    place-items: start stretch;
  }

  .soon__title {
    font-size: 2.125rem;
  }
}

/* Forced colours: the wordmark's strokes take the canvas's text colour (brand.css), and the hunt's control keeps an edge. */
@media (forced-colors: active) {
  .wordmark__strokes {
    stroke: CanvasText;
  }

  .hunt__show,
  .lost__home {
    border-color: ButtonText;
  }
}

@media print {
  .public {
    display: block;
    min-height: 0;
    background: none;
  }

  .public__art,
  .skip-link {
    display: none;
  }
}