/* Kaniban's shared chrome: the palette, the typeface, the controls, the bar at the
   top and the line at the bottom. Linked by the landing page and by every
   standalone page beside it (privacy), so the brand is defined once. Anything
   only one page uses stays in that page. */

@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/google-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/google-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;
  --ground: #e6e3de;
  --paper: #f4f2ef;
  --surface: #fff;
  --well: #ece9e4;
  --slip-edge: #ece8e3;
  --ink: #171614;
  --ink-hi: #322f2a;
  --dim: #55514a;
  /* contrast-pinned: clears 4.5:1 on --ground, --paper and --surface. Don't lighten. */
  --muted: #69645b;
  --faint: #b2aca3;
  --line: rgba(23, 22, 20, 0.07);
  --coral: #ff6433;
  --focus: var(--ink);
  --coral-ink: #be4425;
  --coral-wash: #fff0eb;
  --violet: #a78bfa;
  --sky: #38bdf8;
  --emerald: #34d399;
  --amber: #fbbf24;
  --rose: #fb7185;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;
  --shadow-slip: 0 0 10px -4px rgba(23, 21, 18, 0.05), 0 3px 6px -3px rgba(23, 21, 18, 0.06);
  --shadow-drag: 0 0 24px -8px rgba(23, 21, 18, 0.15), 0 8px 18px -8px rgba(23, 21, 18, 0.16);
  --shadow-shell: 0 0 0 1px rgba(23, 21, 18, 0.05), 0 0 30px -16px rgba(23, 21, 18, 0.13),
    0 6px 18px -14px rgba(23, 21, 18, 0.13);
  --sans: 'Google Sans', 'Wix Madefor Display', system-ui, -apple-system, 'Segoe UI', Helvetica,
    Arial, sans-serif;
}

/* The attribute, not the media query: each page resolves the saved choice or the
   system preference into it before first paint, the way the board does. */
:root[data-theme='dark'] {
  color-scheme: dark;
  --ground: #100f0e;
  --paper: #191816;
  --surface: #232120;
  --well: #2b2926;
  --slip-edge: #3b3734;
  --ink: #f4f2ef;
  --ink-hi: #e6e2db;
  --dim: #b6afa4;
  --muted: #9a938a;
  --faint: #5e5952;
  --line: rgba(244, 242, 239, 0.09);
  --coral-ink: #f58d6c;
  --coral-wash: #3b241f;
  --shadow-slip: 0 0 10px -4px rgba(0, 0, 0, 0.4), 0 3px 6px -3px rgba(0, 0, 0, 0.44);
  --shadow-drag: 0 0 24px -8px rgba(0, 0, 0, 0.56), 0 8px 18px -8px rgba(0, 0, 0, 0.56);
  --shadow-shell: 0 0 0 1px rgba(255, 250, 244, 0.05), 0 0 30px -16px rgba(0, 0, 0, 0.48),
    0 6px 18px -14px rgba(0, 0, 0, 0.48);
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.022em; line-height: 1.06; }
p { margin: 0; color: var(--dim); }
a { color: inherit; }
img { max-width: 100%; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}

/* — focus — */
/* One ring, keyboard only, drawn outside the box so nothing reflows. It follows
   the pill radius because it is an outline and not a shadow. */
a:focus-visible, button:focus-visible, summary:focus-visible, .btn:focus-visible,
.theme:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 3px;
}
/* No exception for the coral button: the 3px offset puts the ring on the page,
   not on the coral, so it is the ground it has to be seen against. */

/* The link that lets a keyboard skip the nav: read by screen readers always,
   seen only once focused, and above the sticky header when it is. */
.skip {
  position: absolute; top: 10px; left: 10px; z-index: 20;
  width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.skip:focus {
  display: inline-flex; align-items: center; width: auto; height: auto;
  min-height: 40px; padding: 0 18px; overflow: visible; clip: auto; clip-path: none;
  border-radius: 999px; background: var(--paper); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line); font: 500 14px var(--sans); text-decoration: none;
}

/* — controls — */
.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  min-height: 46px; padding: 0 22px; border: 0; border-radius: 999px;
  font: 500 14px var(--sans); text-decoration: none; cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--coral); color: #171614; }
.btn-quiet { background: transparent; color: var(--dim); box-shadow: inset 0 0 0 1px var(--line); }
.btn-quiet:hover { color: var(--ink); }
.theme {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 999px; background: transparent; color: var(--dim);
  box-shadow: inset 0 0 0 1px var(--line); cursor: pointer;
  transition: color 0.2s, box-shadow 0.2s;
}
.theme:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--faint); }
.theme .sun { display: none; }
:root[data-theme='dark'] .theme .sun { display: block; }
:root[data-theme='dark'] .theme .moon { display: none; }

/* — nav — */
header {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--ground) 86%, transparent);
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; gap: 24px; height: 68px; }
.brand {
  display: flex; align-items: center; gap: 10px; font-weight: 700; text-decoration: none;
  letter-spacing: -0.02em;
}
.brand img { width: 28px; height: 28px; object-fit: contain; }
.nav-links { display: flex; gap: 22px; margin-left: auto; font-size: 14px; }
.nav-links a { color: var(--dim); text-decoration: none; padding: 14px 0; margin: -14px 0; }
.nav-links a:hover { color: var(--ink); }
@media (max-width: 720px) { .nav-links { display: none; } .nav .theme { margin-left: auto; } }

/* — footer — */
footer { border-top: 1px solid var(--line); padding: 40px 0 56px; }
.foot {
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; font-size: 13px;
  color: var(--muted);
}
.foot .by a {
  color: var(--dim); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--faint);
}
.foot .by a:hover { color: var(--ink); text-decoration-color: var(--coral); }
.foot nav { margin-left: auto; display: flex; gap: 20px; }
.foot a { text-decoration: none; padding: 14px 0; margin: -14px 0; }
.foot a:hover { color: var(--ink); }
@media (max-width: 560px) { .foot nav { margin-left: 0; } }