/* kartaan.com — the front page.
 *
 * Every colour, radius and typeface below is copied from the ERP's own token
 * file, D:\Kartaan-ERP\src\shared\tokens\tokens.css, so the front door and the
 * rooms behind it look like one house.
 *
 * A copy can drift. tools/check_page.py reads that file and refuses any value
 * here that no longer matches it, and refuses any colour written anywhere else
 * in this stylesheet. That is the only thing keeping the two in step.
 *
 * The light values come from the ERP's `:root`; the dark ones from its
 * `body.dark`. This page has no theme switch and no script — it follows the
 * setting the reader's own machine already has.
 */

:root {
  --bg: #F8F3EC;
  --surface: #FFFFFF;
  --text: #5C1A0A;
  --text-tint: #5C4A3A;
  --accent: #B8832A;
  --border: #E8DDD0;
  --border-strong: #D4C4B0;
  --radius: 10px;
  --font: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #160A04;
    --surface: #221008;
    --text: #F5EDE0;
    --text-tint: #A08878;
    --accent: #E8A84A;
    --border: #3A1E12;
    --border-strong: #4A2818;
  }
}

/* ------------------------------------------------------------------ ground */

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 60rem;
  margin: 0 auto;
  padding: 0 20px 96px;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------- top strip */

.top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 0 0;
}

.mark {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.top-link {
  font-size: 1rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.top-link:hover {
  text-decoration-thickness: 2px;
}

/* -------------------------------------------------------------------- hero */

.hero {
  padding: 76px 0 8px;
}

.hero h1 {
  margin: 0;
  max-width: 19ch;
  font-size: clamp(2.125rem, 6.4vw, 3.75rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.lead {
  margin: 30px 0 0;
  max-width: 56ch;
  font-size: 1.1875rem;
  line-height: 1.62;
}

/* ---------------------------------------------------------------- sections */

.band {
  padding: 64px 0 0;
}

.band h2 {
  margin: 0 0 22px;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.012em;
}

.say {
  margin: 0;
  max-width: 60ch;
  color: var(--text-tint);
}

/* ------------------------------------------------------------------- shelf
 *
 * The two things a person can use today share one frame and one background:
 * they are joined up and they are there. The two that are not built are drawn
 * as empty outlines below it. The difference in the drawing is the difference
 * in the fact, and the words say it as well.
 */

.built {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.item {
  padding: 26px 26px 28px;
}

.item + .item {
  border-top: 1px solid var(--border);
}

.ghosts {
  margin: 16px 0 0;
  display: grid;
  gap: 12px;
}

.ghost {
  padding: 22px 26px 24px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
}

/* The register line: a name on the left, its honest state on the right, and a
 * gold rule of dots holding the two together. It is the one flourish on the
 * page; everything else is quiet. */

.row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 14px;
}

.name {
  margin: 0;
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.name-inside {
  font-size: 1.0625rem;
}

.leader {
  border-bottom: 2px dotted var(--accent);
  transform: translateY(-0.32em);
}

/* Gold holds together a name and a state that is real. The two that are not
 * built get the same rule in the same grey as their own outline, so at a glance
 * the gold marks what a person can actually go and use. */

.ghost .leader {
  border-bottom-color: var(--border-strong);
}

.state {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-tint);
  text-align: right;
}

.what {
  margin: 12px 0 0;
  max-width: 58ch;
  color: var(--text-tint);
}

.version {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
}

.go {
  display: inline-block;
  margin: 16px 0 0;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.go:hover {
  text-decoration-thickness: 2px;
}

/* AutoSync is a room in the ERP, not a product beside it, so it is drawn
 * inside the ERP's own entry rather than given one of its own. */

.inside {
  margin: 22px 0 0;
  padding: 0 0 0 18px;
  border-left: 2px solid var(--border);
}

/* ------------------------------------------------------------------ footer */

.foot {
  margin: 80px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--border);
}

.foot-say {
  margin: 10px 0 0;
  max-width: 60ch;
  font-size: 0.9375rem;
  color: var(--text-tint);
}

/* -------------------------------------------------------------- narrow
 *
 * At a phone's width the name and its state will not sit on one line, so the
 * dotted rule has nothing to hold together and goes. The state drops under the
 * name and stays in words, which is where the meaning actually was.
 */

@media (max-width: 34em) {
  .row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .leader {
    display: none;
  }

  .state {
    text-align: left;
    font-size: 0.9375rem;
  }

  .hero {
    padding: 54px 0 8px;
  }

  .item {
    padding: 22px 20px 24px;
  }

  .ghost {
    padding: 20px 20px 22px;
  }

  .lead {
    font-size: 1.0625rem;
  }
}