/* Biz Little — generic SMB content hub. Mint + cream, very soft corners, magazine
   tile layout, approachable. Persona 7 (SMB owners). */
/* Design review: Esme Dahl-Adekunle. Brief: hand-drawn line-icons on tiles, italicize the
   "little" in the brand, sliding read-more arrows, paper-grain on body. */

:root[data-site="bizlittle"] {
    --bl-bg: #fbfbf3;
    --bl-surface: #ffffff;
    --bl-fg: #1f3933;
    --bl-muted: #5d706b;
    --bl-accent: #34d399;
    --bl-accent-deep: #059669;
    --bl-mint-1: #d1fae5;
    --bl-mint-2: #ecfccb;
    --bl-peach: #fed7aa;
    --bl-rule: #d6e4dd;
    --bl-display: "DM Serif Display", "Recoleta", "Cormorant Garamond", Georgia, serif;
    --bl-sans: "Inter", "Avenir Next", system-ui, sans-serif;
}
html[data-site="bizlittle"], body { background: var(--bl-bg); color: var(--bl-fg); }
body {
    font-family: var(--bl-sans); margin: 0; line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    /* Esme: paper grain. Very faint warm noise. */
    background-image:
        repeating-linear-gradient(
            45deg,
            transparent 0 2px,
            rgba(31,57,51,.012) 2px 3px
        );
    font-feature-settings: "kern", "liga", "ss01";
}

.bl-container { max-width: 1080px; margin: 0 auto; padding: 0 1.5rem; }

.bl-header { background: var(--bl-bg); padding: 1.25rem 0; }
.bl-header .bl-container { display: flex; justify-content: space-between; align-items: center; }
.bl-brand {
    color: var(--bl-fg); text-decoration: none;
    font-family: var(--bl-display); font-size: 1.5rem;
    letter-spacing: -.005em;
}
.bl-brand-dot { color: var(--bl-accent); margin: 0 .15rem; }
/* Esme: italic "little" for character. */
.bl-brand em { font-style: italic; font-weight: 400; color: var(--bl-accent-deep); }

.bl-nav { display: flex; align-items: center; gap: .25rem; }
.bl-nav a {
    color: var(--bl-muted); text-decoration: none; margin-left: 1.25rem; font-weight: 500;
    transition: color .12s ease;
}
.bl-nav a:hover { color: var(--bl-fg); }
.bl-nav a:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 4px; border-radius: 4px; }

.bl-main { padding: 0; }
.bl-hero { padding: 4rem 0 2rem; max-width: 760px; margin: 0 auto; }
.bl-eyebrow { color: var(--bl-accent); text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; font-weight: 700; margin: 0 0 1rem; }
h1 { font-family: var(--bl-display); font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.04; margin: 0 0 1rem; letter-spacing: -.015em; font-weight: 600; }
.bl-accent { color: var(--bl-accent-deep); font-style: italic; }
.bl-lede { color: var(--bl-muted); font-size: 1.15rem; max-width: 56ch; }

.bl-btn {
    display: inline-block; padding: .9rem 1.6rem;
    border-radius: 999px; text-decoration: none; font-weight: 700;
    margin-top: 1.25rem;
    transition: background-color .12s ease, color .12s ease, transform .12s ease, box-shadow .15s ease;
}
.bl-btn-primary {
    background: var(--bl-fg); color: #fff;
    box-shadow: 0 2px 4px rgba(31,57,51,.12), 0 8px 18px rgba(31,57,51,.18);
}
.bl-btn-primary:hover {
    background: var(--bl-accent-deep); color: #fff;
    transform: translateY(-1px);
}
.bl-btn:focus-visible { outline: 3px solid var(--bl-accent-deep); outline-offset: 3px; }

.bl-mosaic { padding: 3rem 0 5rem; }
.bl-mosaic-grid { display: grid; gap: 1.5rem; grid-template-columns: 1.4fr 1fr 1fr; grid-auto-rows: 1fr; }
@media (max-width: 880px) { .bl-mosaic-grid { grid-template-columns: 1fr; } }

.bl-tile {
    padding: 2rem; border-radius: 24px;
    transition: transform .15s ease, box-shadow .15s ease;
    position: relative;
}
.bl-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(31,57,51,.04), 0 18px 32px -12px rgba(31,57,51,.18);
}

/* Esme: hand-drawn line-icon at the top of every tile. Inline SVG via mask. */
.bl-tile-icon {
    width: 32px; height: 32px;
    display: inline-block;
    color: var(--bl-fg);
    margin-bottom: .5rem;
}
.bl-tile-icon svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.bl-tile-1 { background: var(--bl-mint-1); grid-row: span 2; }
.bl-tile-2 { background: var(--bl-peach); }
.bl-tile-3 { background: var(--bl-mint-2); }

.bl-tag { font-size: .8rem; color: var(--bl-muted); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.bl-tile h2 { font-family: var(--bl-display); font-size: 1.65rem; margin: .5rem 0; line-height: 1.12; letter-spacing: -.005em; font-weight: 600; }
.bl-tile p { color: var(--bl-muted); margin: 0; }

/* Esme: read-more affordance with sliding arrow. */
.bl-readmore {
    display: inline-flex; align-items: center; gap: .35rem;
    margin-top: 1rem;
    color: var(--bl-fg); font-weight: 600; text-decoration: none;
    font-size: .92rem;
    border-bottom: 1.5px solid var(--bl-fg);
    padding-bottom: 1px;
    transition: color .12s ease, border-color .12s ease;
}
.bl-readmore::after {
    content: "→"; transition: transform .15s ease;
}
.bl-readmore:hover { color: var(--bl-accent-deep); border-color: var(--bl-accent-deep); }
.bl-readmore:hover::after { transform: translateX(3px); }
.bl-readmore:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 4px; border-radius: 2px; }

::selection { background: var(--bl-mint-1); color: var(--bl-fg); }

.bl-footer { padding: 3rem 0; color: var(--bl-muted); font-size: .9rem; border-top: 1px solid var(--bl-rule); }
.bl-footer-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.bl-footer a { color: var(--bl-muted); text-decoration: none; }
.bl-footer a:hover { color: var(--bl-accent-deep); }

.skip-to-content {
    position: absolute; left: -9999px;
    background: var(--bl-fg); color: #fff;
    padding: .65rem 1.2rem; border-radius: 999px; font-weight: 700; z-index: 1000;
}
.skip-to-content:focus { left: 1rem; top: 1rem; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}