/* commanderkeep.com while the app is in development: the Final card of the
   board 2026-11-05-landing-page, translated from card to page. Sizes are the
   card's, in px; the body is the container its phone rules ask about. */

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/atkinson-hyperlegible-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --room: #0d0d0d;
  --room-deep: #080808;
  --ink: #f3f1ee;
  --ink-soft: #b7b2ac;
  --ink-quiet: #8f8a84;
  /* the keep's heart, lit half #7556bb, raised to 5.2:1 on the room so it can mark text */
  --heart: #8f74d4;
  --heart-lit: #7556bb;
  --rule: rgba(243, 241, 238, 0.12);
  --contact: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.55) 40%, transparent 72%);
  --seat: drop-shadow(0 7px 9px rgba(0, 0, 0, 0.55)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
  --display: "Atkinson Hyperlegible", sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: dark;
  accent-color: var(--heart);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; background: var(--room); }

body {
  container-type: inline-size;
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(var(--room-deep), var(--room) 900px);
  color: var(--ink);
  font: 400 17px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--heart-lit); color: #fff; }

a {
  color: var(--ink);
  font-weight: 600;
  text-decoration-line: underline;
  text-decoration-color: var(--heart);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
  -webkit-tap-highlight-color: transparent;
  transition: color 160ms var(--ease-out), text-decoration-color 160ms var(--ease-out);
}
@media (hover: hover) { a:hover { color: var(--heart); } }
:focus-visible { outline: 2px solid var(--heart); outline-offset: 4px; border-radius: 4px; }

.page { flex: 1; display: flex; align-items: center; padding-block: 48px; }
.wrap { width: min(1180px, 100cqi - 40px); margin: 0 auto; }

/* the keep icon in the pad's place, 420 px, left of the words. Below the full
   1180 page the icon, its gap and the name shrink together, as shares of the
   page (size / 1180), so the name never wraps or overflows its column */
.duo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: min(96px, (100cqi - 40px) * 0.081356); align-items: center; }
.logo { position: relative; isolation: isolate; width: min(420px, (100cqi - 40px) * 0.355932); margin-left: min(25px, (100cqi - 40px) * 0.021186); }
.logo img { display: block; width: 100%; height: auto; filter: var(--seat); }
.logo::after {
  content: ""; position: absolute; left: -6%; right: -6%; top: calc(100% - 14px); height: 28px;
  background: var(--contact); z-index: -1;
}

.words { --lede: 21.6px; }
h1 {
  margin: 0;
  font-family: var(--display); font-weight: 700; font-size: min(68.86px, (100cqi - 40px) * 0.058356); line-height: 0.92;
  text-wrap: balance;
  /* the C hangs 1.7 px past the lede's A, the owner's pick for left-set headings */
  margin-left: calc(var(--lede) * 0.0236 - 0.059em);
}
.lede { margin: 26px 0 0; max-width: 30ch; font-size: var(--lede); line-height: 1.45; color: var(--ink-soft); }
.meta {
  margin: 18px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  font-size: 13.8px; color: var(--ink-quiet);
}
.state { display: inline-flex; align-items: center; gap: 7px; color: var(--heart); font-weight: 600; letter-spacing: 0.01em; }
.state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--heart); }
/* the not-found page: its short line splits evenly, never leaving one word alone */
.lost .lede { text-wrap: balance; }
.price { margin: 22px 0 0; color: var(--ink-soft); }
.mail { margin: 30px 0 0; color: var(--ink-soft); }

footer { padding: 32px 0 40px; border-top: 1px solid var(--rule); font-size: 14.4px; color: var(--ink-quiet); }
.frow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
footer .sign { display: flex; align-items: center; gap: 10px; color: var(--ink-quiet); font-weight: 400; text-decoration-color: transparent; }
footer .sign img { width: 22px; height: 22px; }
@media (hover: hover) { footer .sign:hover { color: var(--ink); text-decoration-color: var(--heart); } }
footer nav { display: flex; gap: 22px; }
footer nav a { color: var(--ink-soft); font-weight: 400; text-decoration-color: transparent; }
@media (hover: hover) { footer nav a:hover { color: var(--ink); text-decoration-color: var(--heart); } }
.made { margin: 0; color: var(--ink-soft); }
.heart {
  display: inline-block; width: 1.05em; height: 0.93em; vertical-align: -0.12em;
  margin-inline: 0.15em; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
}
.notice { margin: 14px 0 0; max-width: 92ch; font-size: 12.8px; line-height: 1.5; color: var(--ink-quiet); }

/* phones: one column, the icon (227 px) centred above the left-set words */
@container (max-width: 899px) {
  .page { padding-block: 36px; }
  .duo { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .logo { width: 227px; margin: 0 0 4px; justify-self: center; }
  .words { --lede: 18.4px; }
  /* 41.3 px at 390 and wider; below that the name shrinks to keep one line
     (8.327 px of text per px of size, column 100cqi - 40px, hang .059em - .434px) */
  h1 { font-size: min(41.3px, calc(11.9cqi - 4.9px)); }
  .lede { margin-top: 20px; }
  .price { margin-top: 16px; }
  .mail { margin-top: 22px; }
  .frow { flex-direction: column; align-items: flex-start; }
  .notice { margin-top: 10px; font-size: 12px; }
}