/* Joan Knows — the brand, verbatim from Ashley's Claude Design system
   ("Organic", fetched 2026-07-28). Single source of the brand for the public
   pages: home.html links this file directly. public/index.html (the app)
   carries the SAME values inlined in its own :root — its .card and button
   styles collide with the component classes below, so the app aligns by
   value, not by link. Retune colours here first, then mirror the swatches
   in the app's :root.

   Fonts (Caprasimo headings, Figtree body — plus Grand Hotel for the logo
   art only) load from <link> tags in each page's head rather than an
   @import here, so they start downloading before this stylesheet parses.

   Trimmed to the tokens plus the component classes the homepage actually
   uses (btn, input, card, tag, elev — and .jmark, the Joan mark as one
   parameterized block, so every placement of the logo is the same
   construction at a different size). The full system also carries field,
   nav, dialog and seg blocks — reintroduce them from the design project if
   a page ever needs them. */

:root {
  --color-bg: #f5ead8;
  --color-surface: #ebddc5;
  --color-text: #201e1d;
  --color-accent: #c67139;
  --color-accent-2: #7a8a5e;
  --color-divider: color-mix(in srgb, #201e1d 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f9f4ed;
  --color-neutral-200: #eee7db;
  --color-neutral-300: #dcd3c4;
  --color-neutral-400: #c0b6a5;
  --color-neutral-500: #a19786;
  --color-neutral-600: #82796a;
  --color-neutral-700: #645c50;
  --color-neutral-800: #474238;
  --color-neutral-900: #2e2b25;

  --color-accent-100: #fff2eb;
  --color-accent-200: #ffe1d0;
  --color-accent-300: #ffc6a5;
  --color-accent-400: #f6a06b;
  --color-accent-500: #d67f48;
  --color-accent-600: #b2622d;
  --color-accent-700: #8c491a;
  --color-accent-800: #643312;
  --color-accent-900: #402310;

  --color-accent-2-100: #f0fae1;
  --color-accent-2-200: #e1eecc;
  --color-accent-2-300: #ccdbb2;
  --color-accent-2-400: #aebf92;
  --color-accent-2-500: #8fa073;
  --color-accent-2-600: #728157;
  --color-accent-2-700: #56633f;
  --color-accent-2-800: #3d472b;
  --color-accent-2-900: #272e1b;

  --font-heading: "Caprasimo", system-ui, sans-serif;
  --font-heading-weight: 400;
  --font-body: "Figtree", system-ui, sans-serif;

  --space-1: 4.4px;
  --space-2: 8.8px;
  --space-3: 13.2px;
  --space-4: 17.6px;
  --space-6: 26.4px;
  --space-8: 35.2px;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }

.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }

.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }

/* — the Joan mark, as one parameterized block —
   The full construction: the Grand Hotel "J", the "oan" script inside the
   hand-drawn thought-cloud, and the two dots trailing down-left (the cloud's
   tail). Drawn once on a 430×370 master canvas and scaled per placement, so
   six placements are one logo instead of six drifting copies. Set on the
   placement element:
     --jm-scale  the size — the rendered box is 430×370 × scale
     --jm-color  the mark's colour (defaults to accent; cream on accent bands)
     --jm-halo   the halo behind the "oan" letters — always the colour of the
                 ground the cloud sits on, so the script reads over the cloud
                 line without erasing it
   The absolute positioning inside is self-contained: a fixed-size scaled
   canvas is the one place the layout rules allow it. .jmark is the sizing
   wrapper; .jmark-art can also sit alone inside a custom-sized box (the
   homepage hero does, with a container-query scale). */
.jmark {
  position: relative; flex: none;
  width: calc(430px * var(--jm-scale, 1));
  height: calc(370px * var(--jm-scale, 1));
}
.jmark-art {
  position: absolute; left: 0; top: 0; width: 430px; height: 370px;
  transform: scale(var(--jm-scale, 1)); transform-origin: top left;
  color: var(--jm-color, var(--color-accent));
}
.jmark-cloud { position: absolute; left: 120px; top: 32px; width: 250px; height: 150px; }
.jmark-cloud svg { display: block; width: 100%; height: 100%; overflow: visible; }
.jmark-cloud path {
  fill: none; stroke: currentColor; stroke-width: 8;
  stroke-linecap: round; stroke-linejoin: round;
}
.jmark-o, .jmark-a, .jmark-n {
  position: absolute; font-family: "Grand Hotel", cursive; font-size: 74px;
  line-height: 1; transform-origin: 50% 80%;
  text-shadow:
    0 0 0.085em var(--jm-halo, var(--color-bg)),
    0 0 0.085em var(--jm-halo, var(--color-bg)),
    0 0 0.085em var(--jm-halo, var(--color-bg)),
    0.04em 0 0.07em var(--jm-halo, var(--color-bg)),
    -0.04em 0 0.07em var(--jm-halo, var(--color-bg));
}
.jmark-o { left: 71px; top: -7px; transform: rotate(-26deg); }
.jmark-a { left: 101px; top: -17px; transform: rotate(-4deg); }
.jmark-n { left: 133px; top: -7px; transform: rotate(20deg); }
.jmark-dot1 { position: absolute; left: 178px; top: 176px; width: 34px; height: 34px; background: currentColor; border-radius: 50%; }
.jmark-dot2 { position: absolute; left: 162px; top: 218px; width: 21px; height: 21px; background: currentColor; border-radius: 50%; }
.jmark-j { position: absolute; left: 57px; top: 78px; font-family: "Grand Hotel", cursive; font-size: 220px; line-height: 1; }

/* — rounded frame: everything softens, small controls go pill — */
.card { border-radius: calc(var(--radius-lg) * 1.15); }
.btn, .tag, .input { border-radius: 999px; }
.input { padding-inline: 14px; }