/* ==========================================================================
   Fig — Metarch landing layout + unified blog styling
   Loaded after screen.css (see default.hbs). Overrides theme defaults.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Home: sidebar shell
   -------------------------------------------------------------------------- */
.fig-shell {
    display: flex;
    min-height: 100vh;
    max-width: var(--container-width, 1000px);
    margin: 0 auto;
    position: relative;
    /* Match the standalone Metarch page's 20px type base. The blog theme sets
       html{font-size:62.5%} + body{1.6rem}=16px, which shrank every em-based
       size to 80%. Pinning 20px here restores the landing's scale 1:1. */
    font-size: 20px;
    line-height: 1.5em;
}

.fig-sidebar {
    /* content-box so the 2em padding adds outside width:200px (=~280px),
       matching the standalone Metarch page. The blog theme forces border-box
       globally, which would shrink the sidebar and shift content left. */
    box-sizing: content-box;
    width: 200px;
    flex-shrink: 0;
    padding: 3em 2em;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.fig-sidebar .fig-logo-section {
    margin-bottom: 3em;
}

.fig-nav-links .nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fig-nav-links li {
    margin-bottom: 1.2em;
}

.fig-nav-links a {
    display: inline-block;
    color: var(--color-darker-gray, #0A0A0A);
    text-decoration: none;
    font-size: 0.9em;
    transition: all 0.3s ease;
}

.fig-nav-links a:hover {
    color: var(--color-accent);
    padding-left: 0.5em;
}

.fig-nav-links .nav-current a {
    color: var(--color-accent);
    font-weight: 600;
}

.fig-content {
    box-sizing: content-box;
    flex: 1;
    min-width: 0;
    padding: 3em 2em 0 2em;
}

/* --------------------------------------------------------------------------
   2. Home: landing typography (the "Hyperintelligence | noun" treatment)
   -------------------------------------------------------------------------- */
.fig-landing {
    padding-bottom: 1.5em;
    max-width: 640px;
}

.fig-landing-title {
    font-size: 1.5em;
    margin-bottom: 1em;
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: normal;
    line-height: 1.3;
}

.fig-landing-title .fig-accent {
    color: var(--color-accent);
}

.fig-landing-title .fig-landing-sep,
.fig-landing-title .fig-landing-pos {
    color: var(--color-darker-gray, #0A0A0A);
    font-style: normal;
    font-size: 0.6em;
}

.fig-landing-title .fig-landing-def {
    color: var(--color-darker-gray, #0A0A0A);
    font-style: normal;
    font-size: 0.6em;
    font-weight: bold;
    font-family: var(--font-sans);
}

.fig-landing p {
    font-size: 0.75em;
    line-height: 1.5em;
    margin: 0 0 1.6em;
}

.fig-landing-title + p {
    margin-top: 1.6em;
}

.fig-landing a {
    color: var(--color-link);
    text-decoration: underline;
}

.fig-landing a:hover {
    color: var(--color-accent);
}

.fig-landing-footer {
    max-width: 640px;
}

.fig-landing-footer p {
    color: var(--color-secondary-text);
    font-size: 0.6em;
    font-family: var(--font-sans);
    font-weight: 400;
    margin-top: 2.5em;
}

.fig-landing-footer a {
    color: rgb(51 58 87 / 1);
    text-decoration: none;
}

.fig-landing-footer a:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

/* desktop vertical rhythm parity with metarch site */
@media (min-width: 1200px) {
    .fig-sidebar { padding-top: 6em; }
    .fig-content { padding-top: 6em; }
}

@media (min-width: 1600px) {
    .fig-sidebar { padding-top: 10em; }
    .fig-content { padding-top: 10em; }
}

/* mobile: stack sidebar above content */
@media (max-width: 768px) {
    .fig-shell {
        flex-direction: column;
        min-height: 0;
    }
    .fig-sidebar {
        width: 100%;
        height: auto;
        position: relative;
        padding: 2em 1em;
    }
    .fig-sidebar .fig-logo-section {
        margin-bottom: 1.5em;
    }
    .fig-content {
        padding: 1em 1em 2em;
    }
    .fig-nav-links {
        display: flex;
        gap: 2em;
        flex-wrap: wrap;
    }
    .fig-nav-links li {
        margin-bottom: 0;
    }
}

/* --------------------------------------------------------------------------
   3. Blog
   -------------------------------------------------------------------------- */

/* Article (post page) hero title: serif italic brand accent, matching the
   landing's display style. Flip these three lines to bold sans if desired. */
.gh-article-title {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: normal;
}

/* Post-list cards: bold sans titles, no underline, muted meta (matches target) */
.gh-card-link,
.gh-card-link:hover {
    text-decoration: none;
}

.gh-card-title {
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 700;
    color: var(--color-darker-gray, #0A0A0A);
    text-decoration: none;
}

.gh-card-excerpt {
    color: var(--color-primary-text);
    text-decoration: none;
}

.gh-card-meta {
    color: var(--color-secondary-text);
    text-decoration: none;
}

/* Top-nav: match the landing's menu scale (logo ~30px, links ~18px) */
.gh-navigation .fig-logo-text {
    font-size: 30px;
}

.gh-navigation-menu .nav a {
    font-size: 18px;
}

/* --------------------------------------------------------------------------
   4. Pixel cursor effect (driven by assets/js/pixel.js)
   -------------------------------------------------------------------------- */
.pixel {
    position: fixed;
    width: 8px;
    height: 8px;
    background-color: #80448C;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

.pixel.active {
    opacity: 1;
}

.pixel-burst {
    position: absolute;
    width: 4px;
    height: 4px;
    background-color: #80448C;
    pointer-events: none;
    animation: burst 0.6s ease-out forwards;
}

@keyframes burst {
    0%   { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

@keyframes burst-custom {
    0%   { transform: translate(-50%, -50%) translate(0, 0) scale(1); opacity: 1; }
    100% { opacity: 0; }
}

/* touch devices: no cursor trail */
@media (hover: none) {
    .pixel { display: none; }
}