/* Fidune home page (brief §5). System serif, no web fonts, no remote
   resources, no url() (D6, S-4). The policy pages keep site/style.css. */

:root {
  color-scheme: light dark;
  --bg: #FBFAF7;
  --text: #1A1A1A;
  --secondary: #6B6B6B;
  --underline: #D9C9B0;
  --tile-border: #E4DCCD;
  --tile-border-strong: #B9AC95;
  --tile-fill: #F4EFE6;
  --dot-ring: transparent;
  --serif: ui-serif, "New York", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --body-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  --lead-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111111;
    --text: #EDEDED;
    --secondary: #9A9A9A;
    --underline: #5A4E3C;
    --tile-border: #2C2C2C;
    --tile-border-strong: #6A6A6A;
    --tile-fill: #1A1A1A;
    --dot-ring: #666666;
  }
}

/* Phones: one screen with the actions in view (founder 2026-11-01). */
@media (max-width: 30rem) {
  :root {
    --body-size: 1.05rem;
    --lead-size: 1.55rem;
  }
}

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

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0.5rem 1.5rem 1.5rem;
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  font-size: var(--body-size);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 48rem) {
  /* 8vw sides (brief §5) until the page is ~1448px wide; beyond that a
     76rem frame is centred and the column stays on its left (32" monitors). */
  body { padding: 1rem max(8vw, calc(50% - 38rem)) 1.5rem; }
}

header, main, footer { max-width: 36rem; }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--underline);
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.18em;
}

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

/* Word mark until the brand mark exists (brief §5). */
.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 1.5rem;      /* founder 2026-11-01: a bit bigger, still a mark */
  letter-spacing: 0.01em;
  text-decoration: none;
}

/* One screen, no scroll (founder 2026-11-01): small top gap, tight rhythm. */
main {
  margin-top: clamp(0.25rem, 1.5vh, 1.5rem);
}

main > p { margin: 0 0 0.6em; }

.lead {
  font-size: var(--lead-size);
  line-height: 1.25;
  letter-spacing: -0.005em;
}
main > .lead { margin: 0 0 0.5em; }

/* Banner row (brief §4.4, §5): at the top, above the headline (founder
   2026-11-01). One tile = one plain link. Built for N tiles: equal-width
   tiles with a 9rem min width: 2-4 sit in one row on desktop and more
   wrap; on phones two tiles share a row (compact), and below ~19rem of
   column (320px phones) they stack, BYG first. */
.banners {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 1em;
}

.banner {
  display: block;
  flex: 1 1 9rem;
  min-width: 0;
  min-height: 44px;
  padding: 0.5rem 0.8rem 0.55rem;
  border: 1px solid var(--tile-border);
  border-radius: 12px;
  background: var(--tile-fill);
  text-decoration: none;
  font-size: 0.85rem;
  line-height: 1.3;
}
.banner:hover,
.banner:focus-visible { border-color: var(--tile-border-strong); }
.banner:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
  border-radius: 12px;
}

.banner-title {
  display: block;
  font-size: 1.2rem;
  line-height: 1.2;
  letter-spacing: 0.04em;
}
.banner-line {
  display: block;
  margin-top: 0.1em;
  color: var(--secondary);
}
/* No-break space: the chevron never sits alone on a line. */
.banner-line::after {
  content: "\00a0›";
  content: "\00a0›" / "";   /* decorative: not part of the link name */
}

/* "On-device" never splits at its hyphen. */
.nowrap { white-space: nowrap; }

.dots {
  display: inline-flex;
  gap: 0.25em;
  margin-left: 0.15em;
  vertical-align: 0.12em;
}
.dot {
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  border: 1px solid transparent;
}
.dot-black { background: #111111; border-color: var(--dot-ring); }
.dot-yellow { background: #E8B500; }
.dot-green { background: #2E9E5B; }

/* The three actions: native disclosures, no JavaScript (brief §4). */
.actions { margin-top: 0.8em; }

details { margin: 0; }

summary {
  display: block;
  min-height: 44px;
  padding-block: max(0.15em, calc((44px - 1.45em) / 2));
  list-style: none;
  cursor: pointer;
  width: fit-content;
}
summary::-webkit-details-marker { display: none; }
summary::marker { content: ""; }

summary::after {
  content: "›";
  content: "›" / "";   /* decorative: not read by VoiceOver */
  display: inline-block;
  margin-left: 0.3em;
  transform-origin: 50% 55%;
}
details[open] > summary::after { transform: rotate(90deg); }

@media (prefers-reduced-motion: no-preference) {
  summary::after { transition: transform 0.15s ease-out; }
}

details > p { margin: 0.1em 0 0.9em; }

/* Inline links that must still be easy to tap (brief §5: 44px targets). */
.target {
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
}

/* One tap selects the whole address; there is no Copy button (no JS). */
.share {
  -webkit-user-select: all;
  user-select: all;
}

/* /byg/ and /smol/: same column and type, no actions, no banners. */
h1.lead { font-weight: normal; margin: 0 0 0.75em; }
main ul { margin: 0 0 1.2em; padding-left: 1.2em; }
main li { margin-bottom: 0.3em; }

.back {
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
  margin-top: 1.3em;
}

footer {
  margin-top: 1em;
  color: var(--secondary);
  font-size: 0.85rem;
  line-height: 1.5;
}
/* Each "· link" pair wraps as one unit: no separator left at a line end. */
footer span { white-space: nowrap; }

/* 44px tall tap targets; when the line wraps on narrow phones the rows
   sit 44px apart, so targets never overlap. */
footer a {
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
}