/* Erald Caka: homepage-only styles (Claude Design "PIoneer/editorial" system). Article pages keep assets/site.css untouched. */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
    margin: 0;
    background: #f3f2f2;
    color: #201e1d;
    font-family: "Archivo", system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    text-wrap: pretty;
}

a { color: #ae1800; text-underline-offset: 3px; }
a:hover { color: #ec3013; }
::selection { background: rgba(236, 48, 19, .3); }
:focus-visible { outline: 2px solid #ec3013; outline-offset: 2px; }

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

/* nav links and CTA buttons carry their hover state as a class, since the
   base style is set inline per-element to match the source design. */
.navlink:hover { color: #ec3013; }
.btn-outline:hover { background: rgba(236, 48, 19, .08); color: #201e1d; }
.btn-primary:hover { background: #dd2b0f; color: #f3f2f2; }
.btn-text:hover { color: #ec3013; }
.btn-ghost:hover { background: rgba(243, 242, 242, .14); color: #f3f2f2; }
.btn-invert:hover { background: #201e1d; color: #f3f2f2; }
.pin-btn:hover { outline: 2px solid #ec3013; outline-offset: -2px; }

/* fixed-width label columns pair with wrapping content on desktop;
   below the breakpoint they go full width so content stacks under them
   instead of leaving a half-empty gutter. */
.kicker-col { flex: 0 0 200px; }
.feat-label { flex: 0 0 150px; }
.person-col {
    padding: 40px 0 44px 32px;
    border-left: 2px solid rgba(32, 30, 29, .4);
}

@media (max-width: 720px) {
    .kicker-col,
    .feat-label { flex: 1 1 100%; }
    .person-col {
        padding: 32px 0 0;
        border-left: 0;
        border-top: 2px solid rgba(32, 30, 29, .4);
    }
}