/* demant.app — a composed, warm minimalist index */

:root {
  /* warm near-black, tinted off true black — not the cold terminal default */
  --bg:    #15130f;
  --panel: #1b1813;
  --fg:    #ece7dc;
  --soft:  #a39d8f;   /* secondary text — ~5.2:1 on --bg */
  --faint: #6f6a5e;   /* numbers / tertiary — ~3.4:1, used non-essential */
  --line:  #2a261f;
  --accent:#d8975a;   /* warm clay/amber — hover only */
  --ring:  #d8975a;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --serif: "Spectral", Georgia, "Times New Roman", serif;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg:    #f6f3ec;
    --panel: #efeae0;
    --fg:    #1f1c16;
    --soft:  #5f5949;   /* ~5.6:1 on --bg */
    --faint: #94907f;
    --line:  #e1dccf;
    --accent:#9c5a23;   /* warm clay, AA on light */
    --ring:  #9c5a23;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { max-width: 100%; overflow-x: hidden; }
html { -webkit-text-size-adjust: 100%; }

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

/* anchor the column: centered, vertically biased, generous but composed */
main {
  width: min(36rem, 100% - 3rem);
  margin-inline: auto;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(2rem, 5vh, 3.25rem);
  padding-block: clamp(3rem, 9vh, 6rem);
}

/* ---- header: a human voice, set in serif ---- */
header h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 2.9rem);
  letter-spacing: -0.015em;
  line-height: 1.05;
}
.intro {
  margin-top: 0.9rem;
  color: var(--soft);
  font-size: 1.0625rem;
  max-width: 32ch;
  line-height: 1.55;
}

/* ---- the two lead links: havn + cv, set apart ---- */
.index { display: flex; flex-direction: column; }
.lead {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name arrow" "desc arrow";
  align-items: center;
  gap: 0 1rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--line);
  color: var(--fg);
  text-decoration: none;
}
.lead:first-child { border-top: 0; }
.lead-name {
  grid-area: name;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: color .18s ease, transform .25s cubic-bezier(.2,.8,.2,1);
}
.lead-desc {
  grid-area: desc;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: .01em;
  color: var(--soft);
  margin-top: 0.1rem;
}
.lead .arrow {
  grid-area: arrow;
  font-family: var(--mono);
  color: var(--faint);
  font-size: 1.1rem;
  transform: translateX(-4px);
  opacity: 0;
  transition: opacity .2s ease, transform .25s cubic-bezier(.2,.8,.2,1), color .18s ease;
}
.lead:hover .lead-name,
.lead:focus-visible .lead-name { color: var(--accent); transform: translateX(4px); }
.lead:hover .arrow,
.lead:focus-visible .arrow { opacity: 1; transform: translateX(0); color: var(--accent); }

/* ---- the numbered index ---- */
.list { list-style: none; margin-top: 0.5rem; padding-left: 0; }
.list li { border-top: 1px solid var(--line); list-style: none; }
.list li::marker { content: ""; }   /* iOS keeps <ol> markers without this */
.list a {
  display: grid;
  grid-template-columns: 2.25rem 1fr auto;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.6rem 0;
  color: var(--fg);
  text-decoration: none;
  font-family: var(--mono);
}
.num {
  font-size: 0.72rem;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.nm {
  font-size: 0.95rem;
  letter-spacing: .01em;
  transition: color .18s ease, transform .25s cubic-bezier(.2,.8,.2,1);
}
.ds {
  font-size: 0.78rem;
  color: var(--soft);
  text-align: right;
}
.list a:hover .nm,
.list a:focus-visible .nm { color: var(--accent); transform: translateX(3px); }

/* shared focus ring */
.lead:focus-visible,
.list a:focus-visible,
footer a:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---- footer ---- */
footer {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  font-family: var(--mono);
  font-size: 0.78rem;
}
footer a { color: var(--soft); text-decoration: none; transition: color .16s ease; }
footer a:hover { color: var(--fg); }
footer .loc { margin-left: auto; color: var(--faint); }

/* ---- mobile: one clean left edge, generous gutters, stacked rows ---- */
@media (max-width: 34rem) {
  body { font-size: 16px; }

  /* top-aligned (centering looks uneven when content fills the screen),
     roomy side gutters so nothing bleeds to the edge */
  main {
    width: 100%;
    padding-inline: 1.5rem;
    padding-block: clamp(3rem, 12vh, 5rem) 3rem;
    justify-content: flex-start;
    gap: 2.25rem;
  }

  header h1 {
    font-size: clamp(1.5rem, 1.05rem + 3.6vw, 2.4rem);
    line-height: 1.1;
    text-wrap: balance;
    overflow-wrap: break-word;
  }
  .intro { font-size: 1rem; max-width: 30ch; }

  /* never let the mono descriptions clip on narrow screens */
  .lead-desc, .ds { overflow-wrap: anywhere; white-space: normal; }
  .lead-desc { font-size: 0.76rem; }

  /* leads: name + desc stacked, flush to the same left edge as the header */
  .lead {
    grid-template-columns: 1fr;
    grid-template-areas: "name" "desc";
    padding: 1rem 0;
  }
  .lead .arrow { display: none; }
  .lead-name { font-size: 1.4rem; }

  /* drop the decorative number on phone so names align flush-left
     with everything else; description stacks underneath */
  .list { margin-top: 0; }
  .list a {
    grid-template-columns: 1fr;
    grid-template-areas: "name" "desc";
    row-gap: 0.15rem;
    padding: 0.85rem 0;
  }
  .num  { display: none; }
  .nm   { grid-area: name; font-size: 1.05rem; }
  .ds   { grid-area: desc; text-align: left; font-size: 0.8rem; }

  footer { flex-wrap: wrap; gap: 0.75rem 1.25rem; padding-top: 0.5rem; }
  footer .loc { margin-left: 0; width: 100%; order: -1; margin-bottom: 0.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .lead .arrow { opacity: 1; transform: none; }
}