/* Jean's pages beside the app (D438), which site/site.js writes: over the app's style sheet and the person's look,
   Tilde by default, any other look's tokens where it has them. What every page shares: the top, the sections and
   their hero, ticks, questions, prose and the foot, which the homepage has too. Each page's own sheet adds its
   parts, its classes starting with its own prefix. Logical properties only, so a right-to-left language needs
   nothing more; classes start with site-. */

.site, .site-foot {
  --site-side: var(--side, var(--room-2));
  --site-fill: var(--fill, var(--ink));
  --site-on-fill: var(--on-fill, var(--room));
  --site-float: var(--float, 0 1.25rem 3.5rem -0.75rem oklch(0 0 0 / 0.45));
  --site-pane: 1.25rem;
  --site-gutter: clamp(1.25rem, 6vw, 5rem);
  /* A section's sides: the gutter, or wider so what it holds is at most 72rem, centred. */
  --site-edge: max(var(--site-gutter), (100% - 72rem) / 2);
}
.site { background: var(--room); color: var(--ink); line-height: 1.6; }
:where(.site) :where(h1, h2, h3, p, ul, ol, dl, dd, table, figure, fieldset) { margin: 0; }
:where(.site) :where(ul, ol) { padding: 0; list-style: none; }
.site main { display: block; inline-size: auto; margin: 0; padding: 0; }
.site a { color: var(--flame); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.site a.button { color: var(--ink); text-decoration: none; }
.site a.button.primary { color: var(--site-on-fill); }
.site :is(h1, h2, h3, .site-why) { text-wrap: balance; }
.site h1 { font: 700 clamp(2.1rem, 5vw, 3.4rem)/1.08 var(--display); color: var(--ink); }
.site h2 { font: 700 clamp(1.75rem, 3.6vw, 2.5rem)/1.15 var(--display); color: var(--ink); }
.site h3 { font-size: 1.05rem; font-weight: 600; }
.site:is(:lang(ar), :lang(ja), :lang(ko)) :is(h1, h2) { font-family: var(--sans); }
/* Hangul breaks between words, as Korean is set, not between any two syllables */
.site:lang(ko) { word-break: keep-all; }
:is(.site, .site-foot) .icon { inline-size: 1.25rem; block-size: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: var(--pen); stroke-linecap: round; stroke-linejoin: round; }
.site :is(code, pre) { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; }
.site pre { margin: 0; padding: 0.75rem 0.9rem; border-radius: 0.75rem; background: var(--room-2); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; direction: ltr; text-align: start; }

/* A way past the top, for the keyboard: shown once it has the focus, above the top, so it covers nothing */
.site a.site-skip { position: absolute; z-index: 3; inset-inline-start: 1rem; inset-block-start: -10rem; padding: 0.5rem 1rem; border-radius: 0.75rem; background: var(--site-fill); color: var(--site-on-fill); text-decoration: none; }
.site a.site-skip:focus { position: static; display: block; inline-size: max-content; max-inline-size: calc(100% - 2rem); margin: 0.5rem 1rem; }

/* The top: the name, whom the page is for, the languages, and the way into the app */
.site-top { position: sticky; inset-block-start: 0; z-index: 2; display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem var(--site-edge); background: oklch(from var(--room) l c h / 0.86); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-block-end: 1px solid var(--line); }
.site-top .wordmark { color: var(--ink); text-decoration: none; font-size: 1.1875rem; }
.site-top app-persona { --persona-size: 1.5rem; }
.site-for { color: var(--ink-soft); font-size: 0.9375rem; }
.site-langs, .site-langs ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.site-langs { margin-inline-start: auto; font-size: 0.875rem; color: var(--ink-soft); }
.site-langs .icon { inline-size: 1rem; block-size: 1rem; }
.site-langs [aria-current] { color: var(--ink); font-weight: 600; }
html:has(> body.site) { scroll-padding-block-start: 4.5rem; }

/* A heading's link to itself (site.js's anchored()), shown while the pointer is over the heading: after its words, or
   where the window is wide, a page's or a section's title's before them in the margin, level with its first line and
   reaching the words, so the pointer never leaves the heading on its way there; an h3 titles a card or a box, whose
   padding has no room for it */
.site a.site-anchor { display: inline-block; margin-inline-start: 0.3em; color: var(--ink-soft); text-decoration: none; opacity: 0; transition: opacity 0.15s; }
.site-anchor .icon { inline-size: clamp(1rem, 0.6em, 1.5rem); block-size: clamp(1rem, 0.6em, 1.5rem); vertical-align: -0.05em; }
:is(h1, h2, h3, h4, h5, h6):hover > a.site-anchor { opacity: 1; }
.site a.site-anchor:hover { color: var(--flame); } .site a.site-anchor:focus-visible { opacity: 1; }
@media not (max-width: 52rem) {
  :is(h1, h2):has(> a.site-anchor) { position: relative; }
  .site :is(h1, h2) > a.site-anchor { position: absolute; inset-block-start: 0; inset-inline-end: 100%; display: flex; align-items: center; block-size: 1lh; margin: 0; padding-inline-end: 0.3em; }
}
@media (hover: none) { .site a.site-anchor { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 1.5rem; min-block-size: 1.5rem; opacity: 1; } }

/* The hero: what the page promises, and the way in */
.site-hero { display: flex; flex-direction: column; gap: 2.25rem; padding: clamp(2.5rem, 7vw, 5rem) var(--site-edge); }
/* A pane's demo (site/demo.js): Jean's own conversation in the pane's frame; a page sets how tall, by what its task shows. */
.site-demo { display: block; inline-size: 100%; block-size: var(--demo, 32rem); border: 0; }
/* With a tour: Play is the page's, at the frame's foot as the frame's own is, and opens the task again full size,
   in a modal dialog over the page, which holds still behind it. */
:has(> .site-demo-play) { position: relative; }
.site-demo-play { position: absolute; inset-block-end: 1.9rem; inset-inline: 0; inline-size: max-content; margin-inline: auto; box-shadow: 0 1rem 2rem -1rem oklch(0 0 0 / 0.6); }
.site-tour { inline-size: min(64rem, 100vw - 2rem); block-size: min(48rem, 100dvh - 2rem); padding: 0; border: 1px solid var(--line); border-radius: var(--site-pane); background: var(--room); color: var(--ink); box-shadow: var(--site-float); overflow: hidden; }
.site-tour::backdrop { background: oklch(0 0 0 / 0.6); }
.site-tour-frame { display: block; inline-size: 100%; block-size: 100%; border: 0; }
.site-tour-close { position: absolute; inset-block-start: 0.6rem; inset-inline-end: 0.6rem; }
html:has(.site-tour[open]) { overflow: hidden; }
.site-hero-text { display: flex; flex-direction: column; gap: 1.35rem; min-inline-size: 0; max-inline-size: 46rem; }
.site-eyebrow { color: var(--ink-soft); font-weight: 600; font-size: 0.9rem; }
.site-lede { color: var(--ink-soft); font-size: 1.15rem; max-inline-size: 40rem; text-wrap: pretty; }
.site-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.site-cta .button, .site-end .button { padding: 0.65rem 1.3rem; font-size: 1rem; }
.site-facts { display: flex; flex-wrap: wrap; gap: 0.35rem 1.35rem; color: var(--ink-soft); font-size: 0.9rem; }
.site-facts li::before, .site-ticks li::before { content: '✓' / ''; color: var(--flame); font-weight: 600; margin-inline-end: 0.5rem; }

/* Sections, their colour the page's width */
.site-section { display: flex; flex-direction: column; gap: 2rem; padding: clamp(3rem, 7vw, 5rem) var(--site-edge); border-block-start: 1px solid var(--line); }
.site-section.is-side { background: var(--site-side); }
.site-section > header { display: flex; flex-direction: column; gap: 0.75rem; max-inline-size: 46rem; }
.site-why { color: var(--ink-soft); font-size: 1.1rem; text-wrap: pretty; }
.site-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
.site-ticks { display: flex; flex-direction: column; gap: 0.85rem; }
.site-ticks li { display: flex; align-items: baseline; }
.site-source { color: var(--ink-faint); font-size: 0.8125rem; } ::placeholder { color: var(--ink-soft); opacity: 1; }
.site-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.site-stats p { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--site-pane); background: var(--room); }
.site-stats b { font: 700 clamp(2.2rem, 4vw, 3rem)/1 var(--display); color: var(--ink); }
.site-stats small { color: var(--ink-faint); font-size: 0.8125rem; }
.site-limits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 3rem; }
.site-limits li { display: flex; gap: 0.6rem; color: var(--ink-soft); }
.site-limits li::before { content: '–' / ''; color: var(--ink-faint); }

/* The felt-tip pen (site.js's FELT): Jean's sunflower as it is where it underlines and highlights, under ink, and
   where it draws a line of its own, the wave's shade by day, a mark at 3:1. The words stay ink; every mark is drawn
   over or under them, never instead of them. */
.site {
  --felt: oklch(from var(--tint) 0.845 min(c, 0.161) h);
  --felt-line: var(--felt);
}
[data-theme='light'] .site { --felt-line: oklch(from var(--tint) 0.64 min(c, 0.19) h); }
svg[class^='felt-'] { overflow: visible; flex: none; fill: none; stroke: var(--felt-line); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
svg[class^='felt-'] path { vector-effect: non-scaling-stroke; }
.felt { position: relative; z-index: 0; }
.felt > svg { position: absolute; z-index: -1; }
.felt.is-under { white-space: nowrap; }
svg.felt-under { inset-inline-start: -3%; inset-block-end: -0.1em; inline-size: 106%; block-size: 0.42em; stroke: var(--felt); stroke-width: 0.15em; }
[data-theme='light'] svg.felt-under { mix-blend-mode: multiply; }
svg.felt-circle { inset-inline-start: -20%; inset-block-start: -28%; inline-size: 140%; block-size: 138%; }
svg.felt-strike { inset-inline-start: -4%; inset-block-start: 0; inline-size: 108%; block-size: 100%; stroke: var(--ink); stroke-width: 2.2; }
svg.felt-tick { inline-size: 1.05em; block-size: 1.05em; margin-inline-end: 0.5rem; }
.site-facts.is-felt li { display: flex; align-items: center; }
.site-facts.is-felt li::before { content: none; }
:dir(rtl) :is(.felt-under, .felt-circle, .felt-arc, .felt-point, .felt-across) { scale: -1 1; }
/* The highlighter: by day behind the words, as on paper; by night a band under them, so light words never sit on yellow. */
.felt-mark { background: linear-gradient(transparent 80%, var(--felt) 80% 93%, transparent 93%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-inline: 0.15em; border-radius: 0.2em; color: var(--ink); }
[data-theme='light'] .felt-mark { background: linear-gradient(176deg, transparent 30%, oklch(from var(--felt) l c h / 0.7) 33% 88%, transparent 91%); }
@media (max-width: 30rem) {
  .felt.is-under { white-space: normal; }
  svg.felt-under { display: none; }
}
@media (forced-colors: active) {
  svg[class^='felt-'] { display: none; }
  .felt-mark { background: none; }
  .site-facts.is-felt li::before { content: '✓' / ''; }
}

/* Questions, one open at a time */
.site-questions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3.5rem; align-items: start; }
.site-questions details { border-block-end: 1px solid var(--line); }
.site-questions summary { display: flex; justify-content: space-between; gap: 1rem; padding-block: 1rem; font-weight: 600; cursor: pointer; list-style: none; }
.site-questions summary::-webkit-details-marker { display: none; }
.site-questions summary .icon { color: var(--ink-soft); }
.site-questions details[open] .is-closed, .site-questions details:not([open]) .is-open { display: none; }
.site-questions details p { padding-block-end: 1rem; color: var(--ink-soft); }

/* The last word, centred, and its button */
.site-end { align-items: center; text-align: center; }
.site-end app-persona { --persona-size: 4rem; }

/* Prose: the privacy policy, the terms, where files go */
.site-prose { max-inline-size: calc(46rem + 2 * var(--site-gutter)); margin-inline: auto; padding: clamp(2rem, 6vw, 4rem) var(--site-gutter) 5rem; }
.site-prose :is(h1, h2) { margin-block: 2.25rem 0.75rem; }
.site-prose h1 { margin-block-start: 0; font-size: clamp(2rem, 4.5vw, 2.75rem); }
.site-prose h2 { font-size: clamp(1.35rem, 3vw, 1.6rem); }
.site-prose :is(ul, ol) { list-style: revert; }

/* The foot */
.site-foot { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 2.5rem; padding: 3rem var(--site-edge); border-block-start: 1px solid var(--line); background: var(--site-side); color: var(--ink); font-size: 0.875rem; }
.site-foot > * { display: flex; flex-direction: column; gap: 0.4rem; }
.site-foot ul { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.site-foot p { margin: 0; color: var(--ink-soft); }
.site-foot nav a { color: var(--ink); text-decoration: none; }
.site-foot nav a:hover { text-decoration: underline; }
.site-foot nav a[aria-current] { font-weight: 600; }
.site-foot .site-mark { color: var(--ink); font: 700 1.1875rem/1.2 var(--display); }
.site .site-foot .site-foot-head { margin: 0; color: var(--ink-soft); font: 600 0.8125rem/1.4 var(--body, inherit); letter-spacing: normal; }

/* A phone, or any narrow window: one column, the top on two lines or more, all of it still there */
@media (max-width: 52rem) {
  .site-two, .site-stats, .site-limits, .site-questions, .site-foot { grid-template-columns: minmax(0, 1fr); }
  .site-top { flex-wrap: wrap; row-gap: 0.4rem; }
  .site-foot { gap: 1.25rem; }
}
@media (max-width: 30rem) {
  .site-langs .icon { display: none; }
  /* Its lines kept with the page rather than over it, where the window has little room */
  .site-top { position: static; }
  html:has(> body.site) { scroll-padding-block-start: 0.5rem; }
}
@media print { .site-top { position: static; } .site-skip, .site-anchor { display: none; } }