/* Shared page CSS for every Jejak.ai page.
   Extracted from the <style> block that used to sit inline in
   jejak_ai_landing_page.html so that the landing page and the principles page
   cannot drift apart.

   This sheet MUST be linked BEFORE tailwind.css. Utilities and the custom
   classes here collide at equal specificity (.pb-0 vs .section), so the later
   sheet wins. Loading tailwind.css first silently flips that and leaves
   .section's padding-block overriding .pb-0. */

html { -webkit-font-smoothing: antialiased; }

/* Raw CSS takes a single level of quoting. The nested form
   '"Plus Jakarta Sans"' is correct ONLY inside tailwind.config.js, where
   Tailwind emits the quotes itself. In plain CSS it names a family containing
   literal quote characters, which silently falls back to system-ui. */
body {
    background-color: #fbf9f4; /* paper */
    color: #191c16;            /* ink */
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}

/* Layout primitives */
.container-page { max-width: 1536px; margin-inline: auto; padding-inline: 1.5rem; }
@media (min-width: 1024px) { .container-page { padding-inline: 2.5rem; } }

/* At 390px the hero chart runs straight through the body copy, because
   the content column fills most of the canvas. A paper scrim veils the
   lower half so the text stays legible while the chart keeps its full
   strength in the space above. Not needed once the column narrows. */
.hero-scrim {
    height: 70%;
    background: linear-gradient(to top, #fbf9f4 62%, rgba(251, 249, 244, 0) 100%);
}

/* Citation markers render as narrow as 7px, which is fiddly to tap. A
   pseudo-element hit area was tried first and proved unreliable, since
   it is clipped by the cards that carry overflow-hidden. This grows the
   anchor's own box instead, which nothing clips. Inline links inside a
   sentence are exempt from WCAG 2.2 target size, so this is a usability
   improvement rather than a conformance fix. */
.cite {
    display: inline-block;
    min-width: 24px;
    padding-inline: 0.35rem;
    text-align: center;
}

/* Mobile first. 8rem top and bottom on a 390px screen spends a third of
   a viewport on padding alone, and the page is already long. */
.section { padding-block: 4.5rem; }
@media (min-width: 640px) { .section { padding-block: 8rem; } }
@media (min-width: 1024px) { .section { padding-block: 12rem; } }

/* The <picture> wrappers exist only to offer a WebP source. Without
   display:contents the wrapper, not the <img>, becomes the flex/grid
   item and the sizing classes on the image stop applying. */
picture { display: contents; }

.measure { max-width: 62ch; }

/* Cards carry a soft resting shadow per brand guidelines section 14.
   Hierarchy comes from tint, weight and spacing; the shadow only lifts
   the card off its ground. No transform on hover, ever. */
.card-surface {
    box-shadow: 0 1px 2px rgba(25, 28, 22, 0.04), 0 8px 24px rgba(25, 28, 22, 0.06);
}

/* Display type scale. Weight 800 with heavy negative tracking is the
   brand-compliant equivalent of the reference's low-weight serif. */
.display-1 {
    font-size: clamp(3rem, 8vw, 5.5rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.02;
}

.display-2 {
    font-size: clamp(2.25rem, 5vw, 4rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.08;
}

.display-row {
    font-size: clamp(1.75rem, 3vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.display-close {
    font-size: clamp(3.5rem, 10vw, 7.5rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1;
}

.card-title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.eyebrow {
    font-family: "Fira Code", ui-monospace, monospace;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.body-lg { font-size: 1.25rem; line-height: 1.6; }
.body    { font-size: 1.0625rem; line-height: 1.65; }

/* Buttons. Full-radius pills, no shadow, no lift. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 9999px;
    padding: 1rem 1.5rem;
    font-weight: 600;
    font-size: 1rem;
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.btn-primary { background-color: #191c16; color: #fbf9f4; }
.btn-primary:hover { background-color: #1b5e20; }

.btn-outline { border: 1px solid rgba(25, 28, 22, 0.25); color: #191c16; }
.btn-outline:hover { border-color: #2e7d32; color: #2e7d32; }

.btn-lg { padding: 1.25rem 4rem; }

/* Focus. Never removed. */
a:focus-visible, button:focus-visible {
    outline: 2px solid #2e7d32;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Scroll reveal. Final state is the default so that a JS failure or
   reduced-motion preference leaves the page fully readable. */
.reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
    .js-motion .reveal {
        opacity: 0;
        transform: translateY(12px);
        transition: opacity 700ms cubic-bezier(0.5, 0, 0, 1),
                    transform 700ms cubic-bezier(0.5, 0, 0, 1);
    }
    .js-motion .reveal.is-visible { opacity: 1; transform: none; }
}

/* Feature row SVG line-draw. Final state is drawn, so a JS failure or
   reduced motion leaves every diagram fully visible. */
.svg-draw { stroke-dasharray: none; stroke-dashoffset: 0; }

@media (prefers-reduced-motion: no-preference) {
    .js-motion .svg-draw {
        stroke-dasharray: var(--len, 400);
        stroke-dashoffset: var(--len, 400);
        transition: stroke-dashoffset 1400ms cubic-bezier(0.5, 0, 0, 1);
    }
    .js-motion .svg-draw.is-drawn { stroke-dashoffset: 0; }

    .js-motion .svg-pop { opacity: 0; transition: opacity 500ms ease; }
    .js-motion .svg-pop.is-drawn { opacity: 1; }
}