/* The stylesheet for the marketing pages on enamelvault.com: site.html and
   professional.html. Extracted from site.html's inline <style> when the second page was
   added, byte for byte, so the homepage did not change when it moved.

   IT MUST BE IN isSiteAsset() IN worker/site.ts. The bare host 302s anything not in that
   allowlist to the app host, which makes this file cross-origin, and style-src 'self' then
   refuses it. The page still serves, completely unstyled, with no error anywhere. That is
   the same failure the fonts had, and the comment on that allowlist records it.

   THE COLOURS ARE A SECOND COPY OF THE PALETTE. src/site.tokens.test.ts reads the real
   values out of src/index.css and fails if any of them drifts from this file. Change a
   token there and this file is part of that change. */

/* Zilla Slab, from our own assets. This Worker serves /fonts on both hostnames, which
   is one of the reasons the page is not a separate project: under font-src 'self' a
   second host would need its own copy of the files. */
@font-face {
  font-family: "Zilla Slab";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/zilla-slab-500-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Zilla Slab";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/zilla-slab-700-latin.woff2") format("woff2");
}

:root {
  --wall: #1f3b34;
  --wall-deep: #16302a;
  --plate: #f3ede1;
  --rim: #16302a;
  --ink: #182b25;
  --ink-soft: #4f605a;
  --on-wall: #f3ede1;
  --action: #b53514;
  --action-deep: #8f260b;
  --action-lit: #ff8f73;
  --on-action: #fdf3ec;
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--wall);
  color: var(--on-wall);
  font-family: "Zilla Slab", Georgia, serif;
  font-weight: 500;
  line-height: 1.5;
  /* 16px gutter at phone width, and nothing scrolls sideways. */
  padding: 0 16px 48px;
}
.wrap {
  max-width: 960px;
  margin: 0 auto;
}

/* On the green wall, links take the LIT vermilion. The dark one drops to 2.7:1 here. */
a {
  color: var(--action-lit);
}
/* Inside a bone plate it flips, because the lit one fails on bone. */
.plate a,
.plate {
  color: var(--ink);
}
.plate a {
  color: var(--action);
}

header.masthead {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 0;
  border-bottom: 1px solid var(--wall-deep);
}
.masthead img {
  display: block;
}
.wordmark {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 1.05rem;
}
.masthead nav {
  margin-left: auto;
}

h1 {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(1.9rem, 6vw, 3rem);
  line-height: 1.1;
  margin: 40px 0 16px;
}
.lede {
  font-size: clamp(1.05rem, 2.5vw, 1.25rem);
  color: var(--on-wall);
  max-width: 42ch;
  margin: 0 0 32px;
}

h2 {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.95rem;
  margin: 40px 0 16px;
}

/* A bone plate: dark rim keyline, inner highlight, one soft shadow. */
dialog#signin-choice {
  border: none;
  max-width: 34rem;
  width: calc(100% - 32px);
  color: var(--ink);
}
dialog#signin-choice h2 {
  margin-top: 0;
}
dialog#signin-choice p {
  color: var(--ink-soft);
  margin: 8px 0 0;
}
dialog#signin-choice::backdrop {
  background: rgba(16, 36, 32, 0.6);
}
/* This page is otherwise all links, so it carries no button style at all and this one
   came out as a grey Arial default in the middle of the slab-serif. Quiet on purpose:
   it sits beside two red actions and must not read as a third. */
dialog#signin-choice form[method="dialog"] {
  margin: 18px 0 0;
}
dialog#signin-choice form[method="dialog"] button {
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  background: none;
  border: 1px solid var(--rim);
  border-radius: 6px;
  padding: 9px 16px;
  cursor: pointer;
}
.plate {
  background: var(--plate);
  border: 1px solid var(--rim);
  border-radius: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 2px 8px rgba(16, 36, 32, 0.35);
  padding: 20px;
}

.doors {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .doors {
    grid-template-columns: 1fr 1fr;
  }
}
.doors h3 {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.95rem;
  margin: 0 0 8px;
}
.doors p {
  color: var(--ink-soft);
  margin: 0 0 16px;
}

/* The one committing action, in the one reserved colour.
   THE SELECTOR CARRIES a.action AND MUST KEEP DOING SO. This button sits inside a
   .plate, and `.plate a` above sets link text to --action, the same vermilion that
   fills this button. At equal specificity that rule wins on source order and the
   label becomes vermilion on vermilion: a solid rectangle with invisible text. It
   shipped exactly that way and was caught by opening the page, not by a test, because
   src/index.contrast.test.ts measures token PAIRS and cannot see the cascade.
   Writing this as a bare `.action` is the bug. */
a.action,
.plate a.action {
  display: inline-block;
  background: var(--action);
  color: var(--on-action);
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 11px 18px;
  border-radius: 6px;
}
a.action:active,
.plate a.action:active {
  background: var(--action-deep);
}

ul.does {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  ul.does {
    grid-template-columns: 1fr 1fr;
  }
}
ul.does strong {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.9rem;
}
ul.does span {
  color: var(--ink-soft);
}

/* FLEX, NOT A THREE-COLUMN GRID, and that is the whole point of this block.
   There is exactly ONE public recipe today, and a 3-column grid holding one card
   renders a card stretched across a third of a page with two empty cells, which
   reads as broken rather than as sparse. This wraps instead: one card is one card
   at its natural width, and three fill the row with no change here. Adding the
   other two recipes is a publish, not an edit to this file. */
ul.rack {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.rack-item {
  flex: 0 1 280px;
  max-width: 340px;
}
.rack-card {
  display: block;
  text-decoration: none;
  padding: 12px;
}
.rack-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  margin-bottom: 10px;
}
.rack-title {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.95rem;
}

footer.site-foot {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--wall-deep);
  font-size: 0.9rem;
}
footer.site-foot nav a {
  margin-right: 16px;
}

:focus-visible {
  outline: 2px solid var(--action-lit);
  outline-offset: 2px;
}