/* Contents page for guide.janus360.app.
   The app's red is the cover. The list sits on paper under it.
   Every color is a token. Components only read the variables. */

:root,
html[data-theme="light"] {
  --field: #e9545c;
  --ink: #1d1818;
  --ink-soft: rgba(29, 24, 24, 0.72);
  --sheet: #f6f1e7;
  --row: #f6f1e7;
  --row-hover: #fffaf3;
  --rule: rgba(29, 24, 24, 0.18);
  --num: #9d2b32;
  --focus: #1d1818;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --field: #141010;
    --ink: #f5eded;
    --ink-soft: rgba(245, 237, 237, 0.72);
    --sheet: #2a2323;
    --row: #2a2323;
    --row-hover: #352c2c;
    --rule: rgba(245, 237, 237, 0.16);
    --num: #f0767c;
    --focus: #f5eded;
  }
}

html[data-theme="dark"] {
  --field: #141010;
  --ink: #f5eded;
  --ink-soft: rgba(245, 237, 237, 0.72);
  --sheet: #2a2323;
  --row: #2a2323;
  --row-hover: #352c2c;
  --rule: rgba(245, 237, 237, 0.16);
  --num: #f0767c;
  --focus: #f5eded;
}

* { box-sizing: border-box; }

html { color-scheme: light dark; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--sheet);
  color: var(--ink);
  font-family: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.45;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: 12px;
  top: -40px;
  background: var(--sheet);
  color: var(--ink);
  padding: 8px 12px;
}
.skip:focus { top: 12px; }

/* The cover. One word, set to the edge of the page, then the paper starts. */
.mast {
  background: var(--field);
  color: var(--ink);
  min-height: 46vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.mast-inner,
.sheet-inner {
  width: min(100% - 32px, 728px);
  margin-inline: auto;
}

.running {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 22px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.mast h1 {
  position: relative;
  z-index: 2;
  margin: 18px 0 calc(-0.36 * clamp(76px, 18vw, 168px));
  font-weight: 700;
  font-size: clamp(76px, 18vw, 168px);
  line-height: 0.84;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

.lede {
  max-width: 34em;
  margin: 0 0 22px;
  font-size: clamp(17px, 2vw, 20px);
  color: var(--ink);
}

.sheet {
  position: relative;
  z-index: 1;
  padding: calc(0.36 * clamp(76px, 18vw, 168px) + 28px) 0 64px;
}

.sheet-inner { container-type: inline-size; }

.list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.list a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "num title tail"
    "num desc tail";
  column-gap: 22px;
  row-gap: 2px;
  align-items: baseline;
  padding: 22px 8px 22px 4px;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  background: var(--row);
  transition: background-color 160ms ease;
}

.list a:hover,
.list a:focus-visible { background: var(--row-hover); }

.num {
  grid-area: num;
  align-self: start;
  padding-top: 0.08em;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.04em;
  color: var(--num);
  font-variant-numeric: tabular-nums;
}

.title {
  grid-area: title;
  font-weight: 700;
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-wrap: balance;
}

.desc {
  grid-area: desc;
  color: var(--ink-soft);
  font-size: 16px;
}

.tail {
  grid-area: tail;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.meta {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.go {
  font-weight: 600;
  font-size: 16px;
}

.go svg {
  width: 18px;
  height: 18px;
  vertical-align: -3px;
  margin-left: 2px;
  transition: transform 180ms ease;
}

.list a:hover .go svg,
.list a:focus-visible .go svg { transform: translateX(5px); }

.foot {
  margin: 28px 0 0;
  color: var(--ink-soft);
  font-size: 15px;
}

/* On a narrow card, the platform and the Open link drop under the sentence. */
@container (max-width: 520px) {
  .list a {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "num title"
      "num desc"
      "num tail";
  }
  .tail {
    flex-direction: row;
    align-items: baseline;
    gap: 16px;
    margin-top: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .list a, .go svg { transition: none; }
}

@media print {
  .mast { min-height: 0; background: #fff; }
  .sheet { background: #fff; }
  .list a { background: #fff; }
}