/* TopoSaic site — hand-rolled, dependency-free. Light "paper map" theme,
   lifted from the app's own design tokens (app/globals.css): cream paper,
   ink + moss text, acid-lime + clay accents, Georgia serif map-label headings,
   square cartographic corners. */

:root {
  color-scheme: light;
  --ink: #14201d;
  --muted: #66716d;
  --paper: #f2f1e9;
  --panel: #fcfbf5;
  --line: #d9dbd0;
  --line-strong: #c7cabb;
  --moss: #263f34;
  --acid: #d8fb72;
  --clay: #c4724a;
  --green: #50a56a;
  --gold: #d5a744;
  --shadow: 0 24px 70px rgba(20, 32, 29, 0.1);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --maxw: 72rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Acid-lime corner glow + faint topographic contour lines behind everything. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    repeating-radial-gradient(circle at 82% 8%, transparent 0 39px, rgba(38, 63, 52, .045) 39px 40px),
    repeating-radial-gradient(circle at 14% 96%, transparent 0 47px, rgba(196, 114, 74, .05) 47px 48px),
    radial-gradient(circle at 8% -4%, rgba(216, 251, 114, 0.30), transparent 26%),
    linear-gradient(var(--paper), var(--paper));
  background-repeat: repeat, repeat, no-repeat, no-repeat;
}

a { color: var(--moss); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }
code, pre { font-family: var(--mono); font-size: 0.9em; }
code { background: rgba(38, 63, 52, .08); padding: .12em .4em; border-radius: 4px; }
pre {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--moss);
  padding: 1rem 1.2rem;
  overflow-x: auto;
  line-height: 1.55;
}
pre code { background: none; padding: 0; }
pre .c { color: var(--muted); }         /* comment */
pre .p { color: var(--clay); font-weight: 600; }  /* prompt */

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.2; letter-spacing: -0.02em; }
h2 { font-size: 1.9rem; margin-top: 2.6rem; }
h3 { font-size: 1.25rem; margin-top: 2rem; }

/* small uppercase eyebrow label — the app's signature */
.eyebrow {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 720;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

table { border-collapse: collapse; width: 100%; margin: 1.2rem 0; font-size: 0.95rem; }
th, td { border: 1px solid var(--line); padding: .5rem .75rem; text-align: left; vertical-align: top; }
th { background: rgba(38, 63, 52, .05); font-weight: 700; }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(242, 241, 233, 0.85);
  border-bottom: 1px solid var(--line);
}
.nav {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0.7rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
.brand {
  display: flex; align-items: center; gap: .7rem;
  font-weight: 760; font-size: 1.05rem; color: var(--ink); letter-spacing: -0.02em;
}
.brand img { width: 34px; height: 34px; border-radius: 8px; }
.brand:hover { text-decoration: none; }
.brand small {
  display: block; color: var(--muted); font-size: .6rem; font-weight: 620;
  letter-spacing: 0.14em; text-transform: uppercase; margin-top: 2px;
}
.nav-links { display: flex; gap: 1.2rem; margin-left: auto; align-items: center; }
.nav-links a { color: var(--muted); font-size: .92rem; font-weight: 600; }
.nav-links a:hover { color: var(--ink); text-decoration: none; }
.nav-links a.cta {
  color: #fff;
  background: var(--moss);
  padding: .48rem 1rem;
  font-weight: 720;
  font-size: .78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nav-links a.cta:hover { background: var(--ink); }

/* ---------- Hero ---------- */
.hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 4.6rem 1.25rem 3rem;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 3rem;
  align-items: center;
}
.hero-logo { width: 66px; height: 66px; border-radius: 14px; margin-bottom: 1.1rem; box-shadow: var(--shadow); }
.hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.3rem); margin: 0 0 1rem; }
.hero h1 .grad { color: var(--clay); }
.hero .lede { color: var(--muted); font-size: 1.12rem; margin-bottom: 1.8rem; }
.btn-row { display: flex; gap: .8rem; flex-wrap: wrap; }
.btn {
  display: inline-block;
  padding: .62rem 1.2rem;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  background: var(--panel);
}
.btn:hover { text-decoration: none; border-color: var(--moss); }
.btn.primary { background: var(--moss); color: #fff; border: 1px solid var(--moss); }
.btn.primary:hover { background: var(--ink); }
.hero-shot { margin: 0; }
.hero-shot img {
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
}
.hero-shot figcaption { text-align: center; color: var(--muted); font-size: .84rem; margin-top: .6rem; }

/* ---------- Strip ---------- */
.strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.strip-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 2rem 1.25rem;
  font-size: 1.08rem;
  color: var(--muted);
  font-family: var(--serif);
}
.strip-inner strong { color: var(--ink); }

/* ---------- Sections ---------- */
.section { max-width: var(--maxw); margin: 0 auto; padding: 3.4rem 1.25rem 1rem; }
.section > h2 { margin-top: 0; font-size: 2rem; }
.section > .sub { color: var(--muted); max-width: 46rem; margin-top: -0.2rem; }

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.1rem;
  margin-top: 2rem;
}
.wall-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 3px solid var(--moss);
  padding: 1.3rem 1.4rem;
}
.card:nth-child(3n+2) { border-top-color: var(--clay); }
.card:nth-child(3n+3) { border-top-color: var(--gold); }
.card h3 { margin: .3rem 0 .5rem; font-size: 1.1rem; }
.card p { margin: 0; color: var(--muted); font-size: .95rem; }
.card .icon { font-size: 1.35rem; }

.shot-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  margin: 1.8rem 0;
}
.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  margin: 1.8rem 0;
}
.shot-pair figure, .gallery figure, .feature-shot { margin: 0; }
.shot-pair img, .gallery img, .feature-shot img {
  border: 1px solid var(--line-strong);
  width: 100%;
  box-shadow: var(--shadow);
}
.shot-pair figcaption, .gallery figcaption, .feature-shot figcaption {
  font-size: .85rem; color: var(--muted); margin-top: .5rem; text-align: center;
}
.feature-shot { margin: 1.8rem 0; }

/* ---------- Install / run cards ---------- */
.install-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.1rem;
  margin-top: 2rem;
}
.install-grid .card { border-top-color: var(--moss); }
.install-grid .card h3 { display: flex; align-items: center; gap: .5rem; margin-top: 0; font-size: 1.05rem; }
.install-grid pre { margin: .8rem 0 0; font-size: .8rem; }
.install-grid p { margin: .5rem 0 0; color: var(--muted); font-size: .9rem; }
.install-grid .plat { font-family: var(--mono); font-size: .82rem; color: var(--ink); }

/* ---------- Callout ---------- */
.callout {
  border: 1px solid var(--line);
  border-left: 3px solid var(--clay);
  background: var(--panel);
  padding: .9rem 1.15rem;
  margin: 1.4rem 0;
  font-size: .96rem;
}
.callout.info { border-left-color: var(--green); }

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--line);
  margin-top: 4rem;
  padding: 2.4rem 1.25rem 3rem;
  background: var(--panel);
}
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1.4rem 2.4rem;
  color: var(--muted);
  font-size: .9rem;
}
.footer a { color: var(--muted); }
.footer a:hover { color: var(--ink); }
.footer .attrib { max-width: 40rem; }
.footer .foot-links { display: flex; flex-direction: column; gap: .4rem; }
.footer h4 { font-family: var(--sans); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 .3rem; }

/* "Made by · see more" — sibling projects */
.more-projects {
  max-width: var(--maxw);
  margin: 2.2rem auto 0;
  padding-top: 1.9rem;
  border-top: 1px solid var(--line);
  text-align: center;
}
.more-projects h4 {
  font-family: var(--sans);
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 1.2rem;
}
.project-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  max-width: 48rem; margin: 0 auto;
}
.project-links a {
  display: block; padding: .95rem 1.1rem; text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 3px solid var(--moss);
  color: var(--ink);
}
.project-links a:nth-child(3n+2) { border-top-color: var(--clay); }
.project-links a:nth-child(3n+3) { border-top-color: var(--gold); }
.project-links a:hover { border-color: var(--moss); text-decoration: none; box-shadow: var(--shadow); }
.project-links strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.15rem; }
.project-links span { display: block; color: var(--muted); font-size: .82rem; margin-top: .25rem; }
@media (max-width: 640px) { .project-links { grid-template-columns: 1fr; } }

/* ---------- Responsive ---------- */
/* The two home-page section anchors go first: past eight links the bar runs
   into the brand and pushes the Download button off the edge. What is left is
   the same six links the guides have always carried. Its own breakpoint, a
   little above the layout one, so a wider font fallback cannot close the gap
   between the brand and the links. */
@media (max-width: 960px) {
  .nav-links a.nav-wide { display: none; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 3rem; }
  .shot-pair, .gallery, .wall-features { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
}
/* Six links start pushing the Download button off the edge below about
   620px, so the bar drops to the destinations that are not sections of the
   home page: Features, Guides, Changelog, and Download. */
@media (max-width: 680px) {
  .nav-links { gap: .8rem; }
  .nav-links a:not(.cta):not(.keep) { display: none; }
}
/* On a phone even those four overflow. Features and Download are what is
   left; the rest of the site is a scroll away on any page. */
@media (max-width: 480px) {
  .nav-links a.nav-mid { display: none; }
}

/* A three-column table on a phone gets about ninety pixels a column, which
   no one can read, and it cannot scroll sideways either. Each row becomes
   its own block instead, every cell carrying the heading that explained it
   — build.mjs writes those into data-label from the header row. The header
   row itself stays in the document for screen readers rather than being
   thrown away. */
@media (max-width: 680px) {
  .section table { border: 0; font-size: .92rem; }
  .section thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .section tr {
    display: block;
    background: var(--panel);
    border: 1px solid var(--line);
    border-top: 3px solid var(--moss);
    margin-bottom: .85rem;
  }
  .section td {
    display: block;
    border: 0;
    border-top: 1px solid var(--line);
    padding: .6rem .9rem;
  }
  .section tr td:first-child { border-top: 0; }
  .section td::before {
    content: attr(data-label);
    display: block;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .2rem;
  }
  /* Nothing to label, so nothing to show. */
  .section td:not([data-label])::before { content: none; }
}

/* The two-line brand wordmark wraps on a narrow phone. */
@media (max-width: 420px) {
  .brand small { display: none; }
}

/* ---------- Lightbox ---------- */
.lb-zoomable { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  background: rgba(20, 32, 29, 0.9);
  backdrop-filter: blur(6px);
  cursor: zoom-out;
}
.lightbox.show { display: flex; }
.lightbox figure {
  margin: 0; max-width: 96vw; max-height: 94vh;
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
}
.lightbox img {
  max-width: 96vw; max-height: 86vh; width: auto; height: auto;
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 30px 90px rgba(0,0,0,.6);
}
.lightbox figcaption {
  color: #d6ddd2; font-size: .92rem; text-align: center; max-width: 70rem;
  display: flex; gap: 1.2rem; align-items: baseline; flex-wrap: wrap; justify-content: center;
}
.lightbox .lb-full { color: var(--acid); white-space: nowrap; cursor: pointer; }
.lightbox .lb-close {
  position: fixed; top: 1rem; right: 1.2rem;
  background: none; border: none; color: #d6ddd2; font-size: 2.2rem; line-height: 1; cursor: pointer;
}
.lightbox .lb-close:hover { color: #fff; }

/* ---------- Guide pages ---------- */
.guide-head { padding-top: 3.4rem; }
.guide-head h1 {
  font-size: clamp(2rem, 4.4vw, 2.9rem);
  margin: .3rem 0 .8rem;
}
.guide-head .sub { max-width: 46rem; }

/* A section's own prose column — keeps lines readable beside full-width
   tables and card grids. */
.section > p,
.section > ol,
.section > ul { max-width: 46rem; }

.section > ol,
.section > ul { padding-left: 1.15rem; }
.tight li { margin: .35rem 0; }
.tight li::marker { color: var(--muted); }

.section table .muted-cell { color: var(--muted); font-size: .86rem; }
.callout p { margin: 0; }
.callout p + p { margin-top: .7rem; }