/* Cairnea — cairnea.com
   Corporate parent page. KinDash leads; the Android apps are a second line, and
   the layout says so before the words do.

   Everything visual here follows the Cairnea Brand Guidelines V2, transcribed
   in docs/branding.md and enforced by .claude/skills/cairnea-brand.
   The short version: six colours (Slate, Deep Teal, Soft Gray, Mist, Charcoal,
   White), Inter for everything, sentence case, left alignment, rounded forms,
   generous space, and a tone that is calm rather than urgent. The brand asks
   for "clean interfaces, quiet whitespace, and soft rounded corners", so the
   page argues "calm, accessible" by being it: 18px body text, a short
   measure, large targets, and no motion at all. */

/* ── Typeface ─────────────────────────────────────────────────────
   Inter is the brand's primary typeface, self-hosted so the page still loads
   nothing from anywhere else (CSP font-src 'self'). One variable file carries
   the whole weight range plus the optical-size axis: opsz 32 is Inter Display,
   the headline cut the guidelines name; opsz 14–18 is text Inter. Latin
   subset, ~104 KB. The fallback stack is the guidelines' own, verbatim. */
@font-face {
  font-family: Inter;
  src: url("fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand palette — the only hues on the page. docs/branding.md §04. */
  --slate:    #2F3E46;
  --teal:     #2E7D73;   /* Deep Teal */
  --gray:     #C9D2D6;   /* Soft Gray */
  --mist:     #F7F8F8;
  --charcoal: #1F2A30;
  --white:    #FFFFFF;

  /* Roles. The guidelines' mix is 55% White/Mist, 20% Slate, 15% Deep Teal,
     10% Soft Gray: grounds are white and mist, text is slate, teal is the one
     accent (links, the button, the focus ring), soft gray draws the rules. */
  --bg:       var(--white);
  --bg-2:     var(--mist);          /* panels, footer, icon discs */
  --card:     var(--mist);          /* cards on the white ground */
  --ink:      var(--slate);         /* 11.1:1 on white, 10.4:1 on mist */
  --ink-2:    #59656b;              /* Slate at 80% over white: 6.0:1 on white, 5.6:1 on mist */
  --rule:     var(--gray);
  --link:     var(--teal);          /* 4.9:1 on white, 4.6:1 on mist — the page's floor */
  --link-line: var(--teal);
  --button:   var(--teal);          /* white text on it: 4.9:1 */
  --button-ink: var(--white);
  --button-hover: var(--slate);
  --button-hover-ink: var(--white);
  --focus:    var(--teal);

  /* The mark's stones, top to base. Never recoloured (guidelines §03). */
  --stone-top:  var(--gray);
  --stone-mid:  var(--teal);
  --stone-base: var(--slate);

  /* The guidelines' fallback stack, verbatim, behind Inter. */
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  --radius: 1rem;                   /* cards: soft rounded corners */
  --wrap: 64rem;
  --gut: clamp(1.25rem, 4vw, 3rem);
}

/* Dark scheme. The guidelines show the logo "on brand slate background" with
   a white base stone, so a dark page is on-brand as long as it stays inside
   the palette: charcoal ground, slate panels, mist text, soft gray secondary.
   Deep Teal is only 3.0:1 on charcoal — enough for a focus ring or an
   underline, not for text — so links are set in mist and keep teal as their
   underline, and teal survives as the button's ground behind white text. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:       var(--charcoal);
    --bg-2:     var(--slate);
    --card:     var(--slate);
    --ink:      var(--mist);        /* 13.8:1 on charcoal, 10.4:1 on slate */
    --ink-2:    var(--gray);        /* 9.6:1 on charcoal, 7.2:1 on slate */
    --rule:     #3e4d55;            /* Soft Gray at 15% over slate; decorative */
    --link:     var(--mist);
    --link-line: var(--teal);
    --button-hover: var(--mist);
    --button-hover-ink: var(--slate);

    --stone-top:  var(--gray);
    --stone-mid:  var(--teal);
    --stone-base: var(--white);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-optical-sizing: auto;
  font-size: 1.125rem;          /* Body, 18px, weight 400 — the guidelines' scale */
  font-weight: 400;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--link);
  text-decoration-color: var(--link-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { text-decoration-thickness: 2px; }

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

.skip {
  position: absolute; left: -9999px;
  background: var(--slate); color: var(--white);
  padding: 0.75rem 1.25rem; z-index: 10;
  border-radius: 999px;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.wrap.narrow { max-width: 44rem; }

.band { padding-block: clamp(3.5rem, 8vw, 6rem); }
.panel { background: var(--bg-2); --card: var(--bg); }

/* ── Type scale (guidelines §05) ─────────────────────────────────
   Desktop sizes are the guidelines' exactly; clamp() only shrinks them on
   narrow screens. opsz 32 pins the headline cut to Inter Display. */
h1, h2, h3 {
  font-variation-settings: "opsz" 32;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(2.75rem, 1.5rem + 4.5vw, 4.5rem); font-weight: 700; line-height: 1.05; }   /* 72px */
h2 { font-size: clamp(2rem, 1.4rem + 2.5vw, 3rem);      font-weight: 600; line-height: 1.1;  }   /* 48px */
h3 { font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2rem);   font-weight: 600; line-height: 1.2;  }   /* 32px */

.caption {                                          /* Caption: 12px, 0.08em, uppercase */
  font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 1.25rem;
}
.small { font-size: 0.875rem; }                     /* Small: 14px */

/* ── Topbar ─────────────────────────────────────────────────────── */
.topbar { padding-block: 1.25rem; }
.topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }

/* Primary logo: mark plus wordmark. The wordmark is live text in Inter 700;
   the guidelines ask for clear space equal to the top stone's height around
   the logo, which the topbar's padding and the nav gap provide. */
.logo {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 1.375rem; font-weight: 700; letter-spacing: -0.03em;
  font-variation-settings: "opsz" 32;
  color: var(--ink); text-decoration: none;
}
/* Sized in em so the mark tracks the wordmark if the font size ever moves.
   Never below the 32px minimum the guidelines set for the mark. */
.mark-stack { width: 1.6em; height: 1.6em; min-width: 32px; min-height: 32px; flex: none; }
/* Stone fills for every <use> of the #cairn symbol (header mark and hero). */
.s-top  { fill: var(--stone-top); }
.s-mid  { fill: var(--stone-mid); }
.s-base { fill: var(--stone-base); }

.topbar nav { display: flex; gap: clamp(1rem, 3vw, 2rem); font-size: 1rem; font-weight: 500; }
.topbar nav a { color: var(--ink-2); text-decoration: none; }
.topbar nav a:hover { color: var(--ink); text-decoration: underline; }

/* ── Buttons (guidelines §05: Inter Medium 16px, teal pill) ─────── */
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin: 0; }
.cta {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  background: var(--button);
  color: var(--button-ink);
  font-size: 1rem; font-weight: 500; line-height: 1.25;
  text-decoration: none;
  border-radius: 999px;
}
.cta:hover { background: var(--button-hover); color: var(--button-hover-ink); }
.cta-link { font-size: 1rem; font-weight: 500; text-decoration: none; }
.cta-link:hover { text-decoration: underline; }

/* ── Hero ───────────────────────────────────────────────────────── */
.hero { padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem); }
.hero-in { display: grid; gap: 3rem; align-items: center; }
.hero h1 { margin: 0 0 1.5rem; }
.lede {
  max-width: 44ch;
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 2.25rem;
  text-wrap: pretty;
}

/* Graphic motif (guidelines §06, "subtle stacked-stone inspiration"): the
   cairn, upright, in the mark's own stone colours, with one quiet ground line.
   Decorative only; the stones are never faded, so it reads as the brand's
   cairn and not as a pile of shapes. */
.hero-art { display: none; width: 100%; max-width: 22rem; aspect-ratio: 623 / 639; height: auto; justify-self: end; }

@media (min-width: 56rem) {
  .hero-in { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .hero-art { display: block; }
}

/* ── Principles: Clarity, Guidance, Ease ────────────────────────── */
.principles {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 2rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.principles li { display: grid; grid-template-columns: auto 1fr; gap: 0 1rem; align-items: start; }
.principles h3 { font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.01em; font-variation-settings: "opsz" 20; margin: 0.5rem 0 0.25rem; }
.principles p { grid-column: 2; margin: 0; color: var(--ink-2); font-size: 1rem; text-wrap: pretty; }

/* Iconography (guidelines §06): simple line icons with rounded geometry,
   on a pale disc. Stroke and fill come from currentColor. */
.icon {
  display: inline-grid; place-items: center;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--bg-2);
  color: var(--ink);
  grid-row: 1 / span 2;
}
.icon svg { width: 1.5rem; height: 1.5rem; }
.panel .icon { background: var(--bg-2); }
.card .icon { background: var(--bg-2); }

/* ── Flagship: weight on the page mirrors weight in the business ── */
.flagship h2 { margin: 0 0 0.75rem; }
.sub {
  max-width: 52ch;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  color: var(--ink-2);
  margin: 0 0 clamp(2rem, 5vw, 2.75rem);
  text-wrap: pretty;
}

.cards {
  list-style: none; margin: 0 0 2.5rem; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; align-items: start;
}
.card h3 { font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.01em; font-variation-settings: "opsz" 18; margin: 0.6rem 0 0; }
.card p { grid-column: 2; margin: 0; color: var(--ink-2); font-size: 1rem; text-wrap: pretty; }
.panel .card { border-color: transparent; }

.commit {
  max-width: 52ch;
  font-size: 1rem;
  color: var(--ink-2);
  margin: 0 0 2.25rem;
  padding-left: 1.25rem;
  border-left: 3px solid var(--teal);
  text-wrap: pretty;
}

/* ── Sections ───────────────────────────────────────────────────── */
.sec-h { margin: 0 0 0.65rem; }

/* ── Apps: lighter treatment than the flagship, on purpose ──────── */
.apps { list-style: none; margin: 0; padding: 0; }
.apps li {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: clamp(0.35rem, 2vw, 1.5rem);
  padding-block: 1.15rem;
  border-top: 1px solid var(--rule);
}
.apps li:last-child { border-bottom: 1px solid var(--rule); }
.app-n { font-weight: 600; }
.app-d { color: var(--ink-2); font-size: 1rem; text-wrap: pretty; }
.app-w { color: var(--ink-2); font-size: 0.875rem; white-space: nowrap; }

@media (max-width: 46rem) {
  .apps li { grid-template-columns: 1fr auto; }
  .app-d { grid-column: 1 / -1; }
}

.aside {
  max-width: 52ch;
  font-size: 1rem;
  color: var(--ink-2);
  margin: 2rem 0 0;
  text-wrap: pretty;
}

/* ── Contact ────────────────────────────────────────────────────── */
.contact { margin: 0; }
.contact > div {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: clamp(0.35rem, 3vw, 1.5rem);
  padding-block: 1rem;
  border-top: 1px solid var(--rule);
}
.contact > div:last-child { border-bottom: 1px solid var(--rule); }
.contact dt { font-weight: 600; }
.contact dd { margin: 0; color: var(--ink-2); }

@media (max-width: 34rem) {
  .contact > div { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* ── Footer ─────────────────────────────────────────────────────── */
.foot { background: var(--bg-2); padding-block: clamp(2.5rem, 6vw, 4rem); }
.foot .caption { margin-bottom: 1.5rem; }
.fine {
  max-width: 58ch;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 1rem;
  text-wrap: pretty;
}
.foot-in .fine:last-child { margin-bottom: 0; }