/* The Fellwin identity of fellwin.sn (brand v3 "Latérite"), shared by every page of the demo:
   self-hosted faces, light and dark tokens, the header, the footer and the common parts.
   theme.js sets data-theme on <html> before the first paint. */

@font-face {
  font-family: "Newsreader";
  src: url("fonts/newsreader-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ink: #14202a;
  --ink-soft: #4a5a66;
  --ink-faint: #535e67;
  --primary: #3c6577;
  --accent: #b14724;
  --accent-strong: #8f3417;
  --cta: #b14724;
  --cta-hover: #8f3417;
  --surface: #ffffff;
  --paper: #fbfaf8;
  --muted: #f5f3f0;
  --border: #e7e3dd;
  --footer: #0f1a22;
  --footer-text: #a6b4bd;
  --footer-strong: #ffffff;
  /* Verdicts: a shape and a sentence each, the colour only third. */
  --ok: #0b6b4f;
  --ok-bg: #e3f3ec;
  --warn: #7a4f00;
  --warn-bg: #fbefd5;
  --bad: #a1161d;
  --bad-bg: #fbe4e3;
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius-sm: 4px;
  --radius-md: 10px;
  --gutter: clamp(1rem, 4vw, 2rem);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #eef2f4;
  --ink-soft: #b4c1c9;
  --ink-faint: #93a3ad;
  --primary: #8fb4c6;
  --accent: #d9714d;
  --accent-strong: #e8906f;
  --cta: #b14724;
  --cta-hover: #c45530;
  --surface: #16232d;
  --paper: #0f1a22;
  --muted: #1c2b36;
  --border: #2a3a46;
  --footer: #0a1218;
  --ok: #6fd6ad;
  --ok-bg: #10291f;
  --warn: #f0c267;
  --warn-bg: #2b2210;
  --bad: #ff8f8a;
  --bad-bg: #36171a;
}

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

[hidden] { display: none !important; }

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink-soft);
  font: 400 1rem/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The latérite strip at the very top of every fellwin.sn page. */
body::before {
  content: "";
  display: block;
  height: 3px;
  background: var(--accent);
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
  text-wrap: balance;
}

h1 { font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem); line-height: 1.1; letter-spacing: -0.015em; }
h2 { font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem); letter-spacing: -0.005em; }
h3 { font-size: 1.15rem; }

p { text-wrap: pretty; }

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

code, .mono { font-family: var(--font-mono); font-size: 0.875em; }

::selection { background: var(--primary); color: var(--paper); }

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

.wrap {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Header: the lockup as fellwin.sn draws it (mark in latérite, lowercase wordmark in ink), then
   the page's own name, then the language and theme controls. */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  min-height: 64px;
  padding-block: 10px;
}

.lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}

.lockup-mark {
  width: 24px;
  height: 24px;
  background: var(--accent-strong);
  -webkit-mask: url("icons/mark.svg") center / contain no-repeat;
  mask: url("icons/mark.svg") center / contain no-repeat;
}

.lockup-word {
  font: 500 1.25rem/1 var(--font-display);
  letter-spacing: -0.015em;
}

.product {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 16px;
  border-left: 1px solid var(--border);
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
}

a.product:hover { color: var(--ink); }

.tools { display: flex; align-items: center; gap: 8px; }

.tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font: 500 0.875rem/1 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
}

.tool:hover { border-color: var(--ink-faint); color: var(--ink); }
.tool[aria-pressed="true"] { border-color: var(--ink); }

.theme-toggle { padding: 0; }

.theme-toggle::before {
  content: "";
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: url("icons/theme.svg") center / contain no-repeat;
  mask: url("icons/theme.svg") center / contain no-repeat;
}

:root[data-theme="dark"] .theme-toggle::before { transform: rotate(180deg); }

/* Below 520 px the page's name takes its own line under the lockup. */
@media (max-width: 519px) {
  .product { order: 3; flex-basis: 100%; padding-left: 0; border-left: 0; }
  .tools { margin-left: auto; }
}

main { flex: 1; }
main.wrap { padding-block: 24px 48px; }

/* Footer: the deep-ink band of fellwin.sn. */
.site-footer {
  background: var(--footer);
  color: var(--footer-text);
  font-size: 0.875rem;
}

.site-footer .wrap { padding-block: 28px 32px; }
.site-footer p { margin: 0 0 8px; }
.site-footer p:last-child { margin-bottom: 0; }
.site-footer a { color: var(--footer-strong); }
.site-footer a:hover { color: var(--footer-text); }
.site-footer code { overflow-wrap: anywhere; color: var(--footer-strong); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 20px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0.6rem 1.2rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font: 500 0.95rem/1.2 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.button.primary { background: var(--cta); color: #ffffff; }
.button.primary:hover { background: var(--cta-hover); }
.button.secondary { background: transparent; border-color: var(--ink); color: var(--ink); }
.button.secondary:hover { background: var(--ink); color: var(--surface); }
.button:disabled { opacity: 0.6; cursor: progress; }

.chip {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--radius-sm);
  background: var(--muted);
  color: var(--ink-faint);
  font: 500 0.8125rem/1.5 var(--font-sans);
  white-space: nowrap;
}

.chip-published { background: var(--ok-bg); color: var(--ok); }
.chip-held { background: var(--warn-bg); color: var(--warn); }
.chip:empty { display: none; }

input, select, textarea {
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--primary); }

.spinner {
  display: inline-block;
  flex: none;
  width: 0.9em;
  height: 0.9em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; border-right-color: currentColor; opacity: 0.6; }
  .button { transition: none; }
}