/* ==========================================================================
   QI Resolved — brand stylesheet

   Palette is taken primarily from the logo (QIResolved_Logo_1_AI.png) and
   secondarily from the website mockup (WEBSITE DESIGN 3_2.jpg). Contrast
   ratios below are measured against the cream page background.
   ========================================================================== */

:root {
    /* --- Primary: sampled from the logo ---------------------------------- */
    --orange:       #F36B22;  /* the arch and vertical bar                   */
    --navy:         #22346E;  /* the horizontal rule and lower circle arc    */
    --slate:        #3C5553;  /* the v01 orange/navy overlap; retained as a
                                 muted tone (the v02 mark knocks it out)     */

    /* --- Secondary: sampled from the mockup ------------------------------ */
    --cream:        #FAF5D8;  /* page ground                                 */
    --cream-deep:   #F4EBC4;  /* panels, hover states                        */
    --orange-soft:  #F7A96B;  /* hairlines and the footer rule               */

    /* --- Derived, for contrast ------------------------------------------- */
    /* Logo orange on cream is 2.8:1 — fine for the display headline at
       48px/800, too weak for anything smaller. Everything below display
       size uses this deeper burnt orange instead, at 4.9:1 (WCAG AA). */
    --orange-deep:  #B24A12;

    --rail-w: 210px;
    --mark-h: 72px;
}

@media (max-width: 640px) {
    :root { --mark-h: 52px; }
}

html {
    scroll-behavior: smooth;
    background: var(--cream);
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

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

/* Clear the sticky header when jumping to an anchor */
section[id] {
    scroll-margin-top: calc(var(--mark-h) + 5rem);
}

/* --------------------------------------------------------------------------
   Header: the logo's navy rule is continued across the page, so the mark
   sits on the line exactly as it does in the mockup.
   -------------------------------------------------------------------------- */

header { position: relative; }

.logo-row {
    position: relative;
    padding-top: 1rem;
    padding-bottom: .6rem;
}

/* The mark's own navy bar spans its full width, so the page rule meets it
   edge to edge. 63.64% / 4.95% are the bar's top and height within the
   cropped mark, so the two stay aligned at any --mark-h. */
.logo-rule {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(1rem + var(--mark-h) * 0.6364);
    height: calc(var(--mark-h) * 0.0495);
    background: var(--navy);
}

/* In flow, so the header sizes itself; sits above the page rule */
.logo-lockup {
    position: relative;
    z-index: 1;
    display: block;
    width: fit-content;
    margin-left: auto;
    text-align: right;
    text-decoration: none;
}

.logo-mark {
    height: var(--mark-h);
    width: auto;
    margin-left: auto;
    display: block;
}

.logo-word {
    display: block;
    margin-top: .35rem;
    font-size: calc(var(--mark-h) * 0.22);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
    color: var(--navy);
}

/* --------------------------------------------------------------------------
   Menu button (small screens) — three orange bars, as drawn in the mockup
   -------------------------------------------------------------------------- */

.menu-btn {
    position: absolute;
    top: calc(1rem + var(--mark-h) * 0.30);
    left: 0;
    width: 40px;
    height: 28px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

.menu-btn span {
    display: block;
    height: 4px;
    background: var(--orange);
    transition: transform .15s ease, opacity .15s ease;
}

.menu-btn span + span { margin-top: 8px; }

.menu-btn.is-open span:nth-child(1) { transform: translateY(12px) rotate(45deg); }
.menu-btn.is-open span:nth-child(2) { opacity: 0; }
.menu-btn.is-open span:nth-child(3) { transform: translateY(-12px) rotate(-45deg); }

.mobile-menu {
    background: var(--cream);
    border-bottom: 2px solid var(--orange-soft);
}

.mobile-menu ul {
    max-width: 1400px;
    margin: 0 auto;
    padding: .5rem 1.25rem 1.25rem;
}

.mobile-menu a {
    display: block;
    padding: .7rem 0;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--orange-deep);
    text-decoration: none;
}

.mobile-menu a:hover { color: var(--navy); }

/* --------------------------------------------------------------------------
   Section rail (large screens)
   -------------------------------------------------------------------------- */

.rail-link {
    display: block;
    text-decoration: none;
    text-align: right;
}

.rail-label {
    display: block;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--orange-deep);
    transition: color .15s ease;
}

.rail-link:hover .rail-label,
.rail-link[aria-current="true"] .rail-label {
    color: var(--navy);
}

.rail-illustration {
    display: block;
    width: 100%;
    height: auto;
    margin-top: .5rem;
    /* The JPEG ground is the same #FAF5D8 as the page, so `darken` drops it
       out entirely and leaves only the line work. `multiply` would square the
       cream into a visible darker box. */
    mix-blend-mode: darken;
    opacity: .9;
    transition: opacity .2s ease;
}

.rail-link:hover .rail-illustration { opacity: 1; }

/* --------------------------------------------------------------------------
   Prose
   -------------------------------------------------------------------------- */

.prose p { margin-bottom: 1rem; line-height: 1.7; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 700; color: var(--orange-deep); }

.prose h2 {
    margin: 2.75rem 0 .85rem;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--orange);
}

.prose h2:first-child { margin-top: 0; }

.prose h3 {
    margin: 2rem 0 .6rem;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--navy);
}

.prose ul, .prose ol { margin-bottom: 1rem; padding-left: 1.4rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: .4rem; line-height: 1.65; }
.prose li > ul, .prose li > ol { margin: .4rem 0 0; }

.prose hr {
    margin: 2.5rem 0;
    border: 0;
    border-top: 2px solid var(--orange-soft);
}

.prose blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    background: var(--cream-deep);
    border-left: 4px solid var(--orange);
    border-radius: 0 .5rem .5rem 0;
}

.prose blockquote p { margin-bottom: .5rem; }

/* Tables scroll rather than widening the page on a phone */
.prose .table-wrap { overflow-x: auto; margin-bottom: 1.5rem; }

.prose table {
    width: 100%;
    min-width: 32rem;
    border-collapse: collapse;
    font-size: .9rem;
}

.prose th, .prose td {
    padding: .6rem .75rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--orange-soft);
}

.prose th {
    font-weight: 700;
    color: var(--navy);
    border-bottom-width: 2px;
}

.prose code {
    padding: .1em .35em;
    font-size: .875em;
    background: var(--cream-deep);
    border-radius: .25rem;
    word-break: break-word;
}

.prose a {
    color: var(--orange-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.prose a:hover { color: var(--navy); }

/* --------------------------------------------------------------------------
   Reveal on scroll — CSS only.

   Guarded by @supports, so the hidden start state exists only in browsers that
   can actually run the scroll-driven animation. Anywhere else the rule never
   applies and the content simply renders. An earlier JavaScript version of
   this could leave blocks stuck at opacity 0 if the observer missed them,
   which is a bad trade for a 600ms fade.
   -------------------------------------------------------------------------- */

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .fade-in {
            animation: fade-in-up linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 55%;
        }
    }
}

@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}