/* Latent — "Pantry Sheen" for the web.
 *
 * The app's design system (Latent/Design/Theme.swift, architecture/adr/0008–0010),
 * carried over to the site: bottle green and cream, one brass accent. Dark is
 * the PRIMARY appearance; light is structurally identical, not a different
 * design. If Theme.swift's palette changes, change this file too.
 *
 * The rules the app follows apply here as well:
 * - One brass-filled action per page; everything else is outline or text.
 * - Cormorant Garamond for the wordmark, a page's own <h1> and the lede only.
 *   h2/h3 use the system body face at weight.
 * - No italics anywhere (ADR 0009). `em` renders upright.
 * - Text meets WCAG AA (4.5:1). Latent darkens Larder's light-mode brass from
 *   #96793E to #786132 for exactly this reason, and so does this file.
 *
 * Every path here is relative. GitHub Pages serves project sites under
 * /<repo>/, so a leading slash would 404. */

/* ---- Fonts: self-hosted, Latin subset. No external requests anywhere on
   this site — a privacy policy that phones a third party for a webfont
   contradicts itself. ---- */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("./fonts/cormorant-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("./fonts/cormorant-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("./fonts/plexmono-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---- Palette ----
   Light first on bare :root so a viewer with no preference still gets a
   complete palette, then dark overrides only what changes — the same split
   as Theme.swift's adaptive(dark:light:). */
:root {
  --surface: #f1ebdd;
  --surface-raised: #f8f2e4;
  --text: #1d2a21;
  --text-secondary: rgba(29, 42, 33, 0.78);
  --text-quiet: rgba(29, 42, 33, 0.7);
  --accent: #786132;
  --on-accent: #f1ebdd;
  --accent-wash: rgba(150, 121, 62, 0.12);
  --hairline: rgba(150, 121, 62, 0.32);
  --hairline-strong: rgba(150, 121, 62, 0.55);

  --radius-card: 8px;
  --radius-small: 6px;
  --radius-pill: 999px;
  --measure: 68ch;

  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #16211a;
    --surface-raised: #1b2820;
    --text: #ece5d3;
    --text-secondary: rgba(236, 229, 211, 0.72);
    --text-quiet: rgba(236, 229, 211, 0.6);
    --accent: #b79862;
    --on-accent: #16211a;
    --accent-wash: rgba(183, 152, 98, 0.1);
    --hairline: rgba(183, 152, 98, 0.22);
    --hairline-strong: rgba(183, 152, 98, 0.45);
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
}

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

/* No italics in Latent (ADR 0009) — not even the browser's default for em. */
em,
i,
cite,
address {
  font-style: normal;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-thickness: 2px;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface-raised);
  color: var(--text);
  padding: 12px 18px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-small);
  z-index: 10;
}

.skip-link:focus {
  left: 16px;
  top: 16px;
}

/* ---- Layout ---- */
.shell {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  padding: 0 24px;
}

main {
  padding: 8px 0 72px;
}

/* ---- Wordmark ----
   Built in CSS, not as an image — an external image can't reach this page's
   @font-face and would neither adapt to the current appearance nor use the
   real display face. This is the one legitimate "once per screen" use of
   Cormorant Garamond on every page, alongside the page's own <h1>. */
.wordmark {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  color: inherit;
}

.wordmark__text {
  display: block;
  font-family: var(--display);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: var(--text);
}

.wordmark__rule {
  display: block;
  width: 36px;
  height: 1px;
  margin: 8px auto 0;
  background: var(--accent);
  border: 0;
}

/* ---- Site header / footer ---- */
.site-header {
  border-bottom: 1px solid var(--hairline);
  padding: 28px 0 22px;
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  align-items: center;
  justify-content: space-between;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.site-nav a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--accent);
}

.site-footer {
  border-top: 1px solid var(--hairline);
  padding: 28px 0 44px;
  color: var(--text-quiet);
  font-size: 14px;
}

.site-footer p {
  margin: 0 0 6px;
}

/* ---- Meta label — the mono small-caps signature carried over from the
   app's .metaLabel() modifier (uppercase, tracking, IBM Plex Mono). ---- */
.meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-quiet);
  margin: 0 0 10px;
}

.meta--accent {
  color: var(--accent);
}

/* ---- Typography ----
   h1 is the page's one Cormorant Garamond heading, matching "once per
   screen." h2/h3 deliberately use the system body face, not the display
   face — a section break signalled by a preceding .meta label and a
   hairline, the same way the app signals structure without a second
   typeface or a second accent. */
h1 {
  font-family: var(--display);
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0;
  text-wrap: balance;
  font-size: clamp(2.3rem, 6vw, 3.2rem);
  line-height: 1.1;
  margin: 12px 0 18px;
}

h2 {
  font-family: var(--body);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  text-wrap: balance;
  font-size: clamp(1.4rem, 3.2vw, 1.7rem);
  line-height: 1.25;
  margin: 52px 0 14px;
  padding-top: 26px;
  border-top: 1px solid var(--hairline);
}

h3 {
  font-family: var(--body);
  font-weight: 600;
  color: var(--text);
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 28px 0 8px;
}

p,
li {
  max-width: var(--measure);
}

p {
  margin: 0 0 18px;
}

ul,
ol {
  padding-left: 22px;
  margin: 0 0 18px;
}

li {
  margin-bottom: 9px;
}

strong {
  font-weight: 600;
}

code {
  font-family: var(--mono);
  font-size: 0.88em;
  color: var(--accent);
  word-break: break-word;
}

.lede {
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.6vw, 1.4rem);
  line-height: 1.45;
  color: var(--text-secondary);
  margin-bottom: 32px;
}

/* ---- Cards ---- */
.card {
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 22px 24px;
  margin: 0 0 16px;
}

.card > :last-child {
  margin-bottom: 0;
}

.card h3 {
  margin-top: 0;
}

/* ---- The single accent action ----
   One filled button per page, at most — everything else is outline or
   text. Same discipline as the app's BrassButtonStyle: a second filled button
   would read as two competing calls to action. */
.button-accent {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--accent);
}

.button-accent:hover {
  filter: brightness(1.08);
  text-decoration: none;
}

.button-outline {
  display: inline-block;
  background: transparent;
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 25px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline-strong);
}

.button-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 30px 0 8px;
}

/* ---- Landing hero ---- */
.hero {
  padding: 48px 0 8px;
}

.hero__icon {
  width: 88px;
  height: 88px;
  border-radius: 19px;
  border: 1px solid var(--hairline);
  margin-bottom: 6px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin: 12px 0 8px;
}

.feature-grid .card {
  margin: 0;
}

.feature-grid p {
  color: var(--text-secondary);
  font-size: 15.5px;
  margin: 0;
}

/* ---- FAQ ---- */
details {
  border-bottom: 1px solid var(--hairline);
  padding: 4px 0;
}

details summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 34px 18px 0;
  position: relative;
  font-family: var(--body);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--text);
}

details summary::-webkit-details-marker {
  display: none;
}

details summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 17px;
  color: var(--accent);
}

details[open] summary::after {
  content: "\2212";
}

details .answer {
  padding: 0 0 14px;
  color: var(--text-secondary);
}

details .answer > :last-child {
  margin-bottom: 0;
}

/* ---- Code blocks ---- */
pre {
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-small);
  padding: 16px 18px;
  overflow-x: auto;
  margin: 0 0 18px;
}

pre code {
  display: block;
  color: var(--text);
  background: none;
  font-size: 0.82rem;
  line-height: 1.55;
  white-space: pre;
}

/* ---- Definition-style rows (privacy "what/where") ---- */
.rows {
  border-top: 1px solid var(--hairline);
  margin: 18px 0 26px;
}

.row {
  display: grid;
  grid-template-columns: minmax(140px, 30%) 1fr;
  gap: 8px 24px;
  padding: 15px 0;
  border-bottom: 1px solid var(--hairline);
}

.row dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 3px;
}

.row dd {
  margin: 0;
  max-width: var(--measure);
  color: var(--text-secondary);
}

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

/* ---- Callout ---- */
.callout {
  border-left: 2px solid var(--accent);
  background: var(--accent-wash);
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
  padding: 16px 20px;
  margin: 0 0 22px;
}

.callout > :last-child {
  margin-bottom: 0;
}

/* ---- Print: people save privacy policies as PDFs ---- */
@media print {
  :root {
    --surface: #fff;
    --surface-raised: #fff;
    --text: #000;
    --text-secondary: #333;
    --text-quiet: #555;
    --accent: #5e4c27;
    --hairline: #ccc;
  }

  body {
    font-size: 11.5pt;
  }

  .site-nav,
  .skip-link,
  .actions,
  .site-footer__print-hide {
    display: none;
  }

  a {
    color: #000;
    text-decoration: none;
  }

  main a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-family: var(--mono);
    font-size: 9pt;
    color: #555;
  }

  h2 {
    break-after: avoid;
  }

  details {
    break-inside: avoid;
  }

  details .answer {
    display: block !important;
  }
}