/* falconberg.ai site.css - per-site child layer.
   Cascade: theme tokens -> framework content.css -> this file.
   Delivered 2026-08-16, design-handoffs/2026-08-16-v1-application-return.

   Scope discipline (contract 2.3): hook vocabulary only. Roots used:
   c-header-nav, c-hero, c-feature-grid, c-cta, c-prose-section, c-footer.
   Body hooks used: site-falconberg, page-home, page-about, page-contact.
   No framework-internal classnames appear below. Where a rule reaches
   through structure (".c-hero > div") it relies only on the wrapper
   pattern already observable in the deployed markup; every such
   dependency is listed in FINDINGS.md F8 with the fixture request that
   would remove it.

   The design: hairlines, not shadows. One black, one red, one grotesk,
   one mono. Red appears in exactly four places on the whole site - the
   wordmark's AI, the intent markers on hover, the focus ring, and the
   verification mark. Everything else is greyscale and spacing.

   Ground and surface (revised 2026-08-16 after review): the page ground
   is a light grey and content surfaces are white and sit on it. Chrome
   (header, footer) stays on the ground with hairlines, so white always
   means "this is a thing you act on": the chat shell, the About prose,
   the contact form slot, the button on the ink band.

   Typeface delivery: the design specifies Geist + IBM Plex Mono. This
   file cannot load them (no @import per contract 2.3; the asset manifest
   has no woff2 format). See FINDINGS.md F5. Until a font delivery
   mechanism exists the stack falls back to the platform grotesk and the
   typographic character is materially different from the previews. */

/* ------------------------------------------------------------- page frame */
body.site-falconberg {
    font-family: var(--font-sans);
    font-size: var(--font-size-body);
    line-height: 1.6;
    letter-spacing: -0.006em;
    color: var(--foreground);
    background: var(--background);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}
body.site-falconberg > main {
    flex: 1 1 auto;
}
.site-falconberg :is(h1, h2, h3, h4) {
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.025em;
    text-wrap: balance;
}
.site-falconberg :focus-visible {
    outline: 2px solid var(--accent-brand);
    outline-offset: 3px;
    border-radius: 3px;
}

/* ------------------------------------------- framework reconciliation
   Added 2026-08-16 (SIT-012 Step 4), after ENG-221 wrapped content.css in
   @layer framework and made the site layer able to win at last.

   This file was authored against previews/framework.approx.css, a 13-line
   reset. The DEPLOYED content.css is ~11.7KB of opinionated component
   styling, so every property it sets that this file does not is a
   framework default the design never chose. Before the layer fix most of
   these could not be overridden at any specificity; they can now, and
   this block is where the design reclaims them. Each rule names the
   framework rule it answers, measured live on staging 2026-08-16. */

/* content.css: main > section { padding: var(--section-padding-y) 0 }.
   Every hook below carries its own vertical rhythm on its inner wrapper,
   so the framework padding was ADDED to the design's rather than
   replaced by it. Measured before this fix: /formation rendered 2140px
   against the design's 1445px, home 1612px against 1101px. */
.c-hero,
.c-feature-grid,
.c-cta,
.c-prose-section {
    padding: 0;
}
/* content.css: .site-footer { padding: 4rem 0 2rem }, on the footer itself
   and so outside the main > section rule above. Same doubling: measured
   2026-08-16, the footer rendered 457px against the design's 365px. */
.c-footer {
    padding: 0;
}

/* content.css: .logo { display: flex; gap: 0.6rem; height: 24px } and
   .logo b { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em }.
   The wordmark is ONE word set once: the red "AI" comes from the ::after
   on the anchor and inherits the anchor's type, so a re-styled inner
   element splits the lockup into two sizes with a gap down the middle.
   Measured before this fix: "Falconberg" 20px/700/-0.4px beside "AI"
   17px/600. The design is 17px/600/-0.544px throughout, no space. */
.c-header-nav > div > a,
.c-footer > div > div > div > a {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    height: auto;
}
.c-header-nav > div > a > b,
.c-footer > div > div > div > a > b {
    font: inherit;
    letter-spacing: inherit;
    max-width: none;
}

/* content.css: .site-footer { color: var(--dark-section-foreground) }.
   The framework footer is an ink band; this design keeps chrome on the
   ground with a hairline, so the inherited colour is white text on a
   light ground. Every footer element this file styles was masking it;
   anything it did not style was invisible. State the colour once. */
.c-footer {
    color: var(--foreground);
}

/* ------------------------------------------------------------------ header
   Wordmark left, Sign in right, hairline under. Nothing else, ever.

   The lockup is typographic, not an image: logoText carries "Falconberg"
   and the ::after supplies "AI" in the brand red. This is the only way
   the shipped header-nav schema can express a two-colour wordmark; it
   costs the accessible name the "AI" (finding F3 asks for logoTextAccent). */
.c-header-nav {
    flex: 0 0 auto;
    background: transparent;
    border-bottom: 1px solid var(--border);
}
.c-header-nav > div {
    max-width: var(--container-marketing);
    margin: 0 auto;
    height: var(--header-height);
    padding: 0 clamp(1rem, 4vw, 2rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.c-header-nav > div > a {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.032em;
    color: var(--foreground);
    text-decoration: none;
}
.c-header-nav > div > a::after {
    content: "AI";
    color: var(--accent-brand);
}
.c-header-nav > div > a:hover {
    color: var(--foreground);
}
.c-header-nav > div > div > a {
    display: inline-flex;
    align-items: center;
    height: 2.25rem;
    padding: 0 0.9375rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--foreground);
    font-size: var(--font-size-small);
    font-weight: 500;
    letter-spacing: -0.01em;
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.c-header-nav > div > div > a:hover {
    border-color: var(--foreground);
}

/* -------------------------------------------------------------------- hero
   Centred, single column, generous. The eyebrow is the mono register;
   the headline is the only thing at display weight on any page. */
.c-hero > div {
    max-width: var(--container-marketing);
    margin: 0 auto;
    padding: clamp(3.25rem, 8vw, var(--section-padding-y)) clamp(1rem, 4vw, 2rem) clamp(2.5rem, 6vw, 4rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.c-hero h1 {
    margin: 0;
    max-width: 20ch;
    font-size: clamp(1.875rem, 4.6vw, var(--font-size-h1));
}
.c-hero > div > p:has(+ h1) {
    margin: 0 0 1.125rem;
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}
.c-hero h1 ~ p {
    margin: 1.25rem 0 0;
    max-width: 48ch;
    font-size: var(--font-size-lead);
    line-height: 1.6;
    letter-spacing: -0.008em;
    color: var(--muted-foreground);
}
.c-hero img {
    width: 84px;
    height: auto;
    margin: 0 0 1.75rem;
}

/* --------------------------------------------------------- primary action
   One dominant action per view, and it is ink. The red is not a button
   colour: it is reserved so that when it appears the eye trusts it. */
.c-hero a,
.c-cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
    padding: 0 1.5rem;
    border-radius: var(--radius);
    background: var(--primary);
    color: var(--primary-foreground);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-decoration: none;
    transition: background-color 0.15s ease;
}
.c-hero a {
    margin-top: 2.25rem;
}
.c-hero a:hover {
    background: var(--border-contrast);
}

/* ------------------------------------------------- home: the chat shell
   The homepage's dominant component is the "Ask a question" widget. The
   live island (FEAT-047) ships later; until it does, the shell below IS
   the widget minus its input, and the four intents sit inside it as the
   conversation starters they will remain. When the island lands it adds
   the input row at the top of this same shell: same measure, same
   radius, same hairlines, same rows. Nothing about the static page has
   to be undone. The static rows navigate; the live rows will seed the
   conversation instead. See FINDINGS.md F1 for the full widget contract. */
.page-home > main {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.page-home .c-hero > div {
    padding-bottom: 0;
}
.page-home .c-hero h1 {
    max-width: 15ch;
    font-size: clamp(2rem, 5.4vw, var(--font-size-display));
    letter-spacing: -0.035em;
}
.page-home .c-feature-grid > div {
    max-width: var(--container-shell);
    margin: 0 auto;
    padding: 2.25rem clamp(1rem, 4vw, 2rem) clamp(3rem, 7vw, 5rem);
}
.page-home .c-feature-grid > div > div {
    /* content.css: .fg .grid { margin-top: 3rem } — the shell is not a
       grid of cards under a heading, it is the page's dominant object and
       sits directly under the question. Measured 2026-08-16: 48px of
       framework margin held it 47px below where the design puts it. */
    margin: 0;
    display: block;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-shell);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(21, 23, 26, 0.04), 0 14px 36px -20px rgba(21, 23, 26, 0.24);
}
.page-home .c-feature-grid a {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.9375rem;
    padding: 1.125rem 1.25rem;
    border-top: 1px solid var(--border);
    text-decoration: none;
    color: var(--foreground);
    transition: background-color 0.12s ease;
}
.page-home .c-feature-grid a:first-child {
    border-top: 0;
}
.page-home .c-feature-grid a::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-top: 0.5rem;
    border: 1px solid #C7CBCF;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}
.page-home .c-feature-grid a > * {
    grid-column: 2;
    margin: 0;
}
.page-home .c-feature-grid a h3 {
    font-size: var(--font-size-body);
    font-weight: 500;
    letter-spacing: -0.015em;
}
.page-home .c-feature-grid a p {
    margin-top: 0.1875rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--muted-foreground);
}
.page-home .c-feature-grid a:hover {
    background: var(--muted);
}
.page-home .c-feature-grid a:hover::before {
    background: var(--accent-brand);
    border-color: var(--accent-brand);
}
/* The "Learn more ->" suppression that stood here is REMOVED (ENG-219
   Step 7, 2026-08-16). It was written against the previews' reconstructed
   markup; the deployed feature-grid emits the affordance only on the
   cards/numbered branch, and these intent rows render through the plain
   branch, which has never emitted it. The rule suppressed nothing and
   its removal changes no pixel — verified by re-render. */

/* -------------------------------------------- feature grid: What you get
   Not cards. A numbered evidence list: hairline rule, mono index, claim,
   substantiation. The numbering is the teaching register made visual. */
body:not(.page-home) .c-feature-grid {
    border-top: 1px solid var(--border);
}
body:not(.page-home) .c-feature-grid > div {
    max-width: var(--container-marketing);
    margin: 0 auto;
    padding: clamp(3rem, 6vw, 4.5rem) clamp(1rem, 4vw, 2rem);
}
body:not(.page-home) .c-feature-grid h2 {
    margin: 0 0 2.75rem;
    /* content.css: .fg h2 { max-width: 46rem } — a centred-heading measure.
       This heading labels the full-width evidence list beneath it. */
    max-width: none;
    /* content.css: .fg h2 { text-align: center; margin: 0 auto 0.9rem }.
       The evidence list is a record, and a record is set flush left. */
    text-align: start;
    font-size: var(--font-size-h3);
}
body:not(.page-home) .c-feature-grid > div > div {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
    counter-reset: fg;
}
body:not(.page-home) .c-feature-grid > div > div > * {
    counter-increment: fg;
    padding-top: 1rem;
    border-top: 1px solid var(--foreground);
}
body:not(.page-home) .c-feature-grid > div > div > *::before {
    content: counter(fg, decimal-leading-zero);
    display: block;
    margin-bottom: 1.5rem;
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    letter-spacing: 0.08em;
    color: var(--muted-foreground);
}
body:not(.page-home) .c-feature-grid h3 {
    margin: 0;
    font-size: 1.0625rem;
}
body:not(.page-home) .c-feature-grid p {
    margin: 0.5rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--muted-foreground);
}

/* --------------------------------------------------------------- cta band */
.c-cta {
    background: var(--dark-section);
    color: var(--dark-section-foreground);
}
.c-cta > div {
    max-width: var(--container-marketing);
    margin: 0 auto;
    padding: clamp(3.5rem, 7vw, 5rem) clamp(1rem, 4vw, 2rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2rem;
}
.c-cta h2 {
    margin: 0;
    max-width: 22ch;
    font-size: clamp(1.5rem, 3.4vw, var(--font-size-h2));
}
.c-cta p {
    margin: -1rem 0 0;
    max-width: 52ch;
    color: var(--dark-section-muted);
}
.c-cta a {
    background: var(--card);
    color: var(--foreground);
}
.c-cta a:hover {
    background: #E4E6E8;
}

/* ------------------------------------------------------------ prose */
.c-prose-section > div {
    max-width: var(--container-prose);
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 4vw, 2rem) clamp(4rem, 8vw, 6rem);
}
.c-prose-section p {
    margin: 0 0 1.375rem;
    max-width: 68ch;
    font-size: 1.0625rem;
    line-height: 1.75;
    letter-spacing: -0.008em;
    color: #24282C;
}
.c-prose-section h2 {
    margin: 2.75rem 0 1rem;
    font-size: var(--font-size-h3);
}
.c-prose-section a {
    color: var(--foreground);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.c-prose-section a:hover {
    color: var(--accent-brand);
}

/* ------------------------------------------------------- about
   The one page whose whole argument is "this can be checked" gets its
   prose on a white surface: the page reads as a document laid on a desk,
   which is the register, and it is where the verification mark will sit
   once F2 is resolved. */
.page-about .c-hero > div {
    padding-bottom: 0.5rem;
}
.page-about .c-prose-section > div {
    max-width: var(--container-prose);
    margin: 0 auto clamp(4rem, 8vw, 6rem);
    padding: clamp(2.25rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem) clamp(2rem, 4vw, 2.75rem);
    border: 1px solid var(--border);
    border-radius: var(--radius-shell);
    background: var(--card);
}
.page-about .c-prose-section p:last-child {
    margin-bottom: 0;
}

/* ----------------------------------------------------- contact: form slot
   The something-else path. Until the platform form key exists the page
   carries a labelled slot, and the slot is drawn as the card the form
   will occupy: same shell radius, same measure, mono label register, so
   the swap to form-embed (layout: card) is a content change, not a
   redesign. Finding F6. */
.page-contact .c-prose-section > div {
    max-width: var(--container-shell);
    padding-top: 0.5rem;
}
.page-contact .c-prose-section p {
    margin: 0;
    max-width: none;
    padding: 1.5rem 1.5rem 1.625rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-shell);
    background: var(--card);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.75;
    letter-spacing: 0;
    color: var(--muted-foreground);
}

/* ------------------------------------------------------------------ footer
   Every link on the site that is not the one dominant action lives here.
   Mono column headings hold the same evidential register as the eyebrows
   and the verification mark. */
.c-footer {
    flex: 0 0 auto;
    border-top: 1px solid var(--border);
    background: transparent;
}
.c-footer > div {
    max-width: var(--container-marketing);
    margin: 0 auto;
    padding: 3.25rem clamp(1rem, 4vw, 2rem) 2.25rem;
}
/* Depth corrected 2026-08-16: the deployed footer nests the wordmark at
   .c-footer > div > div > div > a, so the rule below matched nothing and
   the red "AI" never rendered in the footer at all (header only). */
.c-footer > div > div > div > a {
    font-size: var(--font-size-body);
    font-weight: 600;
    letter-spacing: -0.032em;
    color: var(--foreground);
    text-decoration: none;
}
.c-footer > div > div > div > a::after {
    content: "AI";
    color: var(--accent-brand);
}
.c-footer h4 {
    margin: 0 0 1rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}
/* content.css: .site-footer .cols { grid-template-columns: 2fr 1fr 1fr 1fr }
   — four tracks for three columns, so every column lands left of where the
   design puts it (measured 2026-08-16: -71px and -157px). */
.c-footer > div > div:first-child {
    grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
    gap: 2.5rem 3rem;
}
.c-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
/* content.css: .site-footer li { margin-bottom: 0.55rem }, which stacks on
   top of the gap above and drifts each link further down the column. */
.c-footer li {
    margin: 0;
}
.c-footer a {
    font-size: var(--font-size-small);
    color: var(--foreground);
    text-decoration: none;
}
.c-footer a:hover {
    color: var(--accent-brand);
}
.c-footer p {
    font-size: var(--font-size-small);
    color: var(--muted-foreground);
}

/* content.css: .legal-bar { border-top: 1px solid var(--border-contrast);
   margin-top: 3.5rem; font-size: 0.85rem; color: var(--dark-section-muted) }
   — a dark-ground rule set on a light footer. Measured before this fix:
   the copyright line rendered #A9AEB4 on white, 2.23:1, and the hairline
   above it was #2E3237. Links keep their own colour from .c-footer a. */
.c-footer > div > div:last-child {
    /* 4.25rem = the design's own 1.75rem plus the 2.5rem the design gets
       free as a grid row-gap: in the preview the legal bar is a row of the
       footer grid, on the platform it is a sibling of the column block, so
       the gap has to be stated. Measured 2026-08-16: it sat exactly 40px
       high before this line. */
    margin-top: 4.25rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    font-size: var(--font-size-small);
    color: var(--muted-foreground);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
}
/* content.css: .legal-bar a { margin-left: 1.25rem } — a leading margin on
   the first link as well as between them, which widens the group and drags
   its left edge 8px off the design's. The gaps above state the spacing. */
.c-footer > div > div:last-child > span:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-left: auto;
}
.c-footer > div > div:last-child a {
    margin-left: 0;
}

/* -------------------------------------------------------------- responsive */
@media (max-width: 760px) {
    body:not(.page-home) .c-feature-grid > div > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }
    .c-hero h1 {
        max-width: 18ch;
    }
}
@media (max-width: 480px) {
    .page-home .c-feature-grid a {
        padding: 1rem 1rem;
    }
}