@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@200;300;400;500;600;700;800&display=swap');

/* ============================================================
   Theming
   ============================================================ */
:root,
[data-theme="dark"] {
    /* Typographic scale (base 16px) */
    --fs-xs:   0.75rem;   /* 12px  — tags, metadata badges  */
    --fs-sm:   0.875rem;  /* 14px  — secondary text, dates  */
    --fs-base: 1rem;      /* 16px  — body copy              */
    --fs-md:   1.125rem;  /* 18px  — card titles            */
    --fs-lg:   1.333rem;  /* ~21px — section labels         */
    --fs-xl:   1.6rem;    /* ~26px — h3                     */
    --fs-2xl:  2rem;      /* 32px  — h2                     */
    --fs-3xl:  2.5rem;    /* 40px  — h1                     */

    --bg: #181d18;
    --text: #c2dcc2;
    --secondary: #7a9878;
    --border: rgba(81, 174, 85, 0.18);
    --card-bg: #111511;
    --logo-r: #e07a50;
    --logo-d: #5aaed4;
    --logo-u: #d4b84a;
    /* terminal bar */
    --term-bg: #0d110d;
    --term-text: #c2dcc2;
    --term-border-dim: rgba(81, 174, 85, 0.25);
    --term-hover-bg: rgba(81, 174, 85, 0.12);
    --green: #5ec462;
    --green-dm: #5ec462;     /* dark-surface green — stays #5ec462 in both themes; use on --term-bg */
    --prose-accent: #5ec462; /* = --green; 7.94:1 on --bg — WCAG AAA */
    --fg-accent: #5ec462;    /* text-on-bg interactive accent; AAA on dark --bg */
    --card-footer-bg: #0d110d; /* = --term-bg; darker zone for tag section */

    /* ── Semantic surface aliases ── */
    --surface:     var(--card-bg);
    --surface-2:   var(--card-footer-bg);
    --text-muted:  var(--secondary);
    --accent:      var(--green);
    --accent-text: var(--fg-accent);

    /* ── Interaction / code tokens ── */
    --code-bg:       rgba(81, 174, 85, 0.09);
    --hover-bg:      rgba(81, 174, 85, 0.06);
    --border-accent: rgba(81, 174, 85, 0.30);
    --border-strong: rgba(81, 174, 85, 0.42);
    --highlight-bg:  rgba(81, 174, 85, 0.13);

    /* ── Spacing scale (8px base) ── */
    --sp-1:  0.25rem;  /* 4px  */
    --sp-2:  0.5rem;   /* 8px  */
    --sp-3:  0.75rem;  /* 12px */
    --sp-4:  1rem;     /* 16px */
    --sp-5:  1.25rem;  /* 20px */
    --sp-6:  1.5rem;   /* 24px */
    --sp-8:  2rem;     /* 32px */
    --sp-10: 2.5rem;   /* 40px */
    --sp-12: 3rem;     /* 48px */

    /* ── Line-height tokens ── */
    --lh-heading: 1.25;
    --lh-body:    1.75;
    --lh-card:    1.4;
    --lh-ui:      1.5;

    /* ── Layout ── */
    --content-pad: clamp(0.75rem, 3%, 2rem);

    /* ── Semantic status colors ── */
    /* These are UI/state colors that stay consistent across themes.
       Error/warning/info appear in admin toasts, banners, and status labels.
       --color-success mirrors the phosphor green but is theme-independent. */
    --color-error:   #EE4A44;  /* destructive actions, error states       */
    --color-success: #51AE55;  /* confirmations, saved states             */
    --color-warning: #e6b800;  /* caution (featured limit, usage warns)   */
    --color-info:    #5aaed4;  /* informational highlights                */

    /* ── Transition duration tokens ── */
    --transition-fast:   0.15s;  /* hover feedback — buttons, links           */
    --transition-normal: 0.25s;  /* theme switch — color/bg crossfade         */
    --transition-slow:   0.4s;   /* complex animations (loader, progress)     */

    /* ── Terminal prompt accent colors ── */
    --term-host-color: #d7734a;  /* hostname segment in all terminal prompts  */
    --term-path-color: #5a9fc2;  /* path segment in all terminal prompts      */

    /* ── Z-index scale ── */
    --z-overlay: 50;   /* fixed non-sticky overlays (theme widget)  */
    --z-sticky:  100;  /* sticky navbar / header / cookie banner     */
    --z-loader:  200;  /* full-screen page loading screen            */
    /* Admin-specific modals (500, 1000) are intentionally above this scale */
}

[data-theme="light"] {
    --bg: #f0f5f0;
    --text: #141f14;
    --secondary: #3e5e3e;    /* 7.1:1 on --bg — WCAG AAA */
    --border: rgba(46, 136, 48, 0.22);
    --card-bg: #e5ede5;
    --logo-r: #c0501e;
    --logo-d: #2a6a9c;
    --logo-u: #806a10;
    /* terminal bar */
    --term-bg: #1e261e;
    --term-text: #c2dcc2;
    --term-border-dim: rgba(81, 174, 85, 0.3);
    --term-hover-bg: rgba(81, 174, 85, 0.18);
    --green: #3a9e3e;
    --prose-accent: #175719; /* 7.82:1 on --bg — WCAG AAA (was #1b7320, 5.37:1) */
    --fg-accent: #175719;    /* text-on-bg interactive accent; AAA on light --bg */
    --card-footer-bg: #d8e5d8;

    /* ── Interaction / code tokens ── */
    --code-bg:       rgba(46, 136, 48, 0.11);
    --hover-bg:      rgba(46, 136, 48, 0.07);
    --border-accent: rgba(46, 136, 48, 0.30);
    --border-strong: rgba(46, 136, 48, 0.50);
    --highlight-bg:  rgba(46, 136, 48, 0.14);

    /* ── Semantic aliases (mirrors dark mode structure) ── */
    --surface:     var(--card-bg);
    --surface-2:   var(--card-footer-bg);
    --text-muted:  var(--secondary);
    --accent:      var(--green);
    --accent-text: var(--fg-accent);
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
/* overflow-x: clip prevents horizontal overflow WITHOUT creating a scroll
   container — unlike hidden, it does not break position:sticky. */
html {
    background-color: var(--term-bg); /* overscroll area matches sticky-bar & footer */
    overflow-x: clip;
    /* Prevent iOS Safari from auto-scaling text when rotating to landscape */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Firefox themed page scrollbar — thin, matches site palette */
    scrollbar-width: thin;
    scrollbar-color: var(--border-accent) var(--bg);
}

/* Webkit (Chrome, Safari, Edge) themed page scrollbar */
html::-webkit-scrollbar { width: 8px; }
html::-webkit-scrollbar-track { background: var(--bg); }
html::-webkit-scrollbar-thumb {
    background: var(--border-accent);
    border-radius: 3px;
}
html::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

body {
    background-color: var(--term-bg);
    color: var(--text);
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    margin: 0;
    overflow-x: clip;
    transition: background-color 0.25s, color 0.25s;
}

/* Buttons, inputs, and other form elements don't inherit font by default */
button, input, textarea, select {
    font-family: inherit;
    font-size: inherit;
}

/* Global anchor reset — browser's a:link/a:visited defaults have specificity
   0-1-1 and override class-only rules. Resetting here prevents blue/purple
   colors and underlines leaking into any component. */
a { color: inherit; text-decoration: none; }

::selection { color: var(--bg); background-color: var(--secondary); }

/* ============================================================
   Page wrapper
   ============================================================ */
.page {
    border: solid calc(1rem + 1.2vw) var(--border);
    background-color: var(--bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: background-color 0.25s, border-color 0.25s;
}

@media (max-width: 768px) { .page { border: none; } }

.page__inner {
    /* Top/left/right border gives breathing room & constrains content width.
       Bottom border removed so footer sits flush at the bottom edge.
       Footer lives inside page__inner so it matches content width exactly. */
    border: solid min(3vh, 2rem) var(--bg);
    border-bottom: 0;
    box-shadow: 0 0 20px 5px var(--bg);
    flex: 1;
    display: flex;
    flex-direction: column;
    transition: background-color 0.25s, border-color 0.25s, box-shadow 0.25s;
}

/* ============================================================
   Site Header
   ============================================================ */
.site-header {
    margin: 6% 8% 4%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

/* Sticky wrapper: groups navbar + progress bar as one stuck unit */
.sticky-bar {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    /* Subtle glow visible on dark bg + dark shadow for depth below */
    box-shadow: 0 0 16px rgba(81, 174, 85, 0.22), 0 4px 18px rgba(0, 0, 0, 0.55);
}

/* Terminal-style header variant */
.site-header--terminal {
    display: flex;
    align-items: stretch;
    margin: 0;
    background-color: var(--term-bg);
    border-bottom: 1px solid var(--term-border-dim);
    min-height: 48px;
    /* Subtle glow visible on dark bg + dark shadow for depth below */
    box-shadow: 0 0 16px rgba(81, 174, 85, 0.22), 0 4px 18px rgba(0, 0, 0, 0.55);
    transition: background-color 0.25s, border-color 0.25s, box-shadow 0.25s;
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
}

/* When header lives inside .sticky-bar, the parent handles stickiness
   and carries the shadow — remove it from the header to avoid doubling */
.sticky-bar .site-header--terminal {
    position: relative;
    top: auto;
    z-index: auto;
    box-shadow: none;
}

.term-prompt {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;       /* allow prompt to shrink below content size in header flex row */
    padding: 0 16px;
    gap: 0;
    font-size: calc(0.65rem + 0.45vw);
    white-space: nowrap;
    overflow: hidden;
}

.term-user   { color: var(--green); }
.term-at     { color: var(--term-text); opacity: 0.5; }
.term-host   { color: var(--term-host-color); }
.term-colon  { color: var(--term-text); opacity: 0.5; }
.term-path   { color: var(--term-path-color); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.term-dollar { color: var(--green); margin-left: 4px; font-weight: 700; flex-shrink: 0; }

.term-cursor {
    display: inline-block;
    width: 0.5em;
    height: 1.1em;
    background: var(--green);
    margin-left: 6px;
    vertical-align: text-bottom;
    animation: cursor-blink 1.1s step-end infinite;
    flex-shrink: 0;
}

@keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

.term-right {
    display: flex;
    align-items: stretch;
    border-left: 1px solid var(--term-border-dim);
}

.term-search {
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 0;
    color: var(--term-text);
    opacity: 0.7;
    font-size: calc(0.55rem + 0.35vw);
    border-right: 1px solid var(--term-border-dim);
    cursor: text;
    transition: opacity 0.15s;
}

.term-search:focus-within { opacity: 1; }

.term-search__pre, .term-search__suf { color: var(--green); font-weight: 600; }

.term-search__input {
    background: none;
    border: none;
    outline: none;
    color: var(--term-text);
    font-family: 'JetBrains Mono', monospace;
    font-size: inherit;
    width: 110px;
    opacity: 1;
}

.term-search__input::placeholder { color: var(--term-text); opacity: 0.3; }

.term-nav {
    display: flex;
    align-items: stretch;
}

.term-nav__link {
    display: flex;
    align-items: center;
    padding: 0 16px;
    color: var(--term-text);
    text-decoration: none;
    font-size: calc(0.55rem + 0.35vw);
    white-space: nowrap;
    border-left: 1px solid var(--term-border-dim);
    transition: background-color 0.15s, color 0.15s;
}

.term-nav__link:hover {
    background-color: var(--term-hover-bg);
    color: var(--green);
}

/* Theme toggle inside terminal nav */
.term-theme-btn {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: none;
    border-left: 1px solid var(--term-border-dim);
    font-family: 'JetBrains Mono', monospace;
    font-size: calc(0.65rem + 0.45vw);
    color: var(--green);
    cursor: pointer;
    /* Fixed width prevents jitter when icon glyph changes */
    width: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s;
}

/* Fixed-width icon slot so glyph width change doesn't shift layout */
.term-theme-btn > span {
    display: inline-block;
    width: 1em;
    text-align: center;
}

.term-theme-btn:hover { background-color: var(--term-hover-bg); }

@media (max-width: 768px) {
    /* Row 1 — terminal prompt */
    .site-header--terminal {
        flex-direction: column;
        min-height: unset;
    }
    .site-header--terminal .term-prompt {
        flex: none;
        font-size: 12px;
        padding: 7px 12px;
        border-bottom: 1px solid var(--term-border-dim);
        overflow: hidden;
    }
    /* Row 2 — nav links + theme btn */
    .site-header--terminal .term-right {
        border-left: none;
        flex-wrap: wrap;
    }
    .site-header--terminal .term-nav {
        flex: 1;
        justify-content: center;
    }
    /* Row 3 — search on its own full-width row */
    .site-header--terminal .term-search {
        order: 2;
        flex: 0 0 100%;
        border-right: none;
        border-top: 1px solid var(--term-border-dim);
        padding: 6px 14px;
        font-size: 12px;
    }
    .site-header--terminal .term-search__input { flex: 1; width: auto; }
    .site-header--terminal .term-nav__link {
        padding: 8px 14px;
        font-size: 12px;
    }
    /* Higher specificity (0-3-0) guarantees this wins over all base rules */
    .site-header--terminal .term-nav .term-theme-btn {
        -webkit-appearance: none;
        appearance: none;
        padding: 8px 0;
        width: 42px;
        font-size: 14px;
        border: none;
        border-left: 1px solid var(--term-border-dim);
        border-right: 1px solid var(--term-border-dim);
    }
}

/* ============================================================
   Logo
   ============================================================ */
.logo-link {
    text-decoration: none;
    color: var(--text);
    display: inline-block;
    transition: color 0.25s;
}

.logo-link__name {
    margin: 0;
    text-shadow: 3px 0 0 var(--logo-r), 0 3px 0 var(--logo-d), 0 -3px 0 var(--logo-u);
}

.logo-link__title {
    text-align: center;
    letter-spacing: 7.5px;
    color: var(--secondary);
    margin: 0;
    transition: color 0.25s;
}

/* ============================================================
   Site Nav
   ============================================================ */
.site-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    white-space: nowrap;
    line-height: calc(1rem + 1.2vw);
    height: max-content;
}

.site-nav__link {
    text-decoration: none;
    color: var(--text);
    display: block;
    transition: background-color 0.15s, color 0.15s;
}

.site-nav__link:hover {
    background-color: var(--green);
    color: var(--bg);
}

/* ============================================================
   Global Theme Widget - fixed left side, all pages
   ============================================================ */
.theme-widget {
    position: fixed;
    right: calc(1rem + 1.2vw + 6px);
    top: calc(1rem + 1.2vw + 8px);
    z-index: var(--z-overlay);
    width: 40px;
    height: 40px;
    background-color: var(--term-bg);
    color: var(--green);
    border: 1px solid var(--term-border-dim);
    cursor: pointer;
    box-shadow: 0 0 10px 2px var(--code-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, background-color 0.25s, color 0.25s, border-color 0.25s;
}

.theme-widget:hover  { transform: scale(1.12); }
.theme-widget:active { transform: scale(1.05); transition-duration: 0.08s; }

@media (max-width: 768px) {
    .theme-widget {
        right: 10px;
        top: 10px;
    }
}

/* Synchronized theme transition — added/removed by JS around theme switch.
   Excludes .prose * (hundreds of text nodes in long articles) to avoid a
   massive style-recalculation that causes jank at the start of the transition.
   Structural chrome (cards, sidebars, header, footer…) still transitions
   via this rule; prose elements rely on their own per-property transitions
   defined elsewhere, or switch instantly (imperceptible for body text). */
.theme-transition,
.theme-transition *:not(.prose *) {
    transition: background-color 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s !important;
}
.theme-transition *:not(.prose *)::before,
.theme-transition *:not(.prose *)::after {
    transition: color 0.25s, border-color 0.25s !important;
}

/* ============================================================
   Tags — unified for tag bar, cards, and blog header
   ============================================================ */

/* All tags share this base style */
.tag {
    color: var(--tag-color, var(--secondary));
    font-size: var(--fs-xs); /* 12px — WCAG minimum readable size */
    font-weight: 500;
    letter-spacing: 0.4px;
    font-family: 'JetBrains Mono', monospace;
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid color-mix(in srgb, var(--tag-color, var(--secondary)) 55%, transparent);
    background-color: color-mix(in srgb, var(--tag-color, var(--secondary)) 10%, transparent);
    transition: background-color 0.15s, border-color 0.15s;
}
.tag::before { content: '['; font-weight: 300; opacity: 0.45; }
.tag::after  { content: ']'; font-weight: 300; opacity: 0.45; }

.tag-link { text-decoration: none; }
.tag-link:hover .tag {
    background-color: color-mix(in srgb, var(--tag-color, var(--secondary)) 22%, transparent);
    border-color: var(--tag-color, var(--secondary));
}

/* Light mode: darken the entire tag so any vivid/light colour (yellow,
   light-blue, etc.) becomes legible on the sage background.
   filter: brightness(0.55) darkens text + bg + border together while
   preserving each tag's colour identity. */
[data-theme="light"] .tag {
    background-color: color-mix(in srgb, var(--tag-color, var(--secondary)) 18%, transparent);
    border-color:     color-mix(in srgb, var(--tag-color, var(--secondary)) 72%, transparent);
    filter: brightness(0.55);
}

/* Tag bar (filter row) */
.tag-bar {
    margin: 0 var(--content-pad) var(--sp-3);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}


/* "filter:" label rendered via CSS so no HTML change needed */
.tag-bar::before {
    content: '$ tags:';
    color: var(--secondary);
    font-size: var(--fs-xs); /* 12px — bumped from 10px, WCAG minimum */
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 1px;
    opacity: 0.55;
    flex-shrink: 0;
    align-self: center;
    padding-right: 2px;
}

.tag-bar .tag-link { text-decoration: none; transition: opacity 0.15s; }
.tag-bar .tag-link:not(.tag-link--active) { opacity: 0.55; }
.tag-bar .tag-link--active .tag {
    outline: 1px solid var(--tag-color, var(--secondary));
    outline-offset: 2px;
    background-color: color-mix(in srgb, var(--tag-color, var(--secondary)) 20%, transparent);
}

/* ============================================================
   Article List Header — ls -l command echo
   ============================================================ */
.article-list-hdr {
    margin: 0 var(--content-pad) var(--sp-2); /* top 0 — tag-bar already provides spacing above */
    font-size: var(--fs-xs);
    color: var(--secondary);
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 1px;
    opacity: 0.55;
}

/* ============================================================
   Article Grid — vertical list of two-tone cards
   ============================================================ */
.article-grid {
    margin: 0 var(--content-pad) var(--sp-2);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

/* ============================================================
   Article Card — two-zone: top (body) / bottom (tags)
   ============================================================ */
.article-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--text);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border-accent);
    overflow: hidden;
    transition: border-left-color 0.15s, box-shadow 0.15s;
}

.article-card:hover {
    border-left-color: var(--green);
    box-shadow: 0 0 12px var(--code-bg);
}

.article-card:active { transition-duration: 0.05s; }

/* ── Top zone: date, title, excerpt ── */
.article-card__top {
    background-color: var(--card-bg);
    padding: var(--sp-4) var(--sp-5) var(--sp-3);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    transition: background-color 0.25s;
}

/* Header row: meta group (left) + optional badge (right) */
.article-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.article-card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.article-card__date     { color: var(--secondary); font-size: var(--fs-xs); }
.article-card__readtime { color: var(--fg-accent);  font-size: var(--fs-xs); }

/* Title */
.article-card__title {
    font-weight: 600;
    font-size: var(--fs-md);
    line-height: var(--lh-card);
    transition: color 0.15s;
}

.article-card:hover .article-card__title { color: var(--fg-accent); }

/* Strikethrough inside card titles */
.article-card__title del { text-decoration: line-through; opacity: 0.6; }

/* Excerpt — two lines, clipped with line clamp */
.article-card__excerpt {
    font-size: var(--fs-sm);
    color: var(--secondary);
    line-height: var(--lh-ui);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Inline markdown formatting inside excerpt */
.article-card__excerpt code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.88em;
    background-color: color-mix(in srgb, var(--secondary) 14%, transparent);
    padding: 1px 4px;
    border-radius: 2px;
}
.article-card__excerpt strong { color: var(--text); font-weight: 600; }
.article-card__excerpt em     { font-style: italic; }

/* Inline code inside article card titles */
.article-card__title code {
    font-weight: 500;
    font-size: 0.92em;
    color: var(--fg-accent);
    background-color: var(--code-bg);
    padding: 1px 5px;
    border-radius: 2px;
}

/* ── Bottom zone: tags ── */
.article-card__bottom {
    background-color: var(--card-footer-bg);
    border-top: 1px solid var(--border);
    padding: var(--sp-2) var(--sp-5);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    transition: background-color 0.25s;
}


/* ============================================================
   Pagination
   ============================================================ */
.pagination {
    margin: 0 2% min(3vh, 2rem);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.pagination__info {
    font-size: var(--fs-xs);
    color: var(--secondary);
    letter-spacing: 1px;
    opacity: 0.55;
}

.pagination__controls {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.pagination__btn {
    font-size: var(--fs-xs);
    color: var(--fg-accent);
    text-decoration: none;
    padding: 3px 10px;
    border: 1px solid var(--border);
    transition: background-color 0.15s, border-color 0.15s;
}

.pagination__btn:hover {
    background-color: var(--code-bg);
    border-color: var(--green);
}

.pagination__btn--disabled {
    color: var(--secondary);
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.pagination__num {
    font-size: var(--fs-xs);
    color: var(--secondary);
    text-decoration: none;
    padding: 3px 8px;
    border: 1px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}

.pagination__num:hover {
    color: var(--fg-accent);
    border-color: var(--border);
}

.pagination__num--active {
    color: var(--fg-accent);
    border-color: var(--border);
    font-weight: 600;
    cursor: default;
    pointer-events: none;
}

/* ============================================================
   Empty state
   ============================================================ */
.empty-state { color: var(--secondary); font-size: var(--fs-xs); padding: var(--sp-1) 0; }

/* ============================================================
   Divider
   ============================================================ */
.divider { border: none; border-top: 1px solid var(--border); margin: 0 4%; transition: border-color 0.25s; }

/* ============================================================
   Footer — terminal status bar (mirrors top navbar)
   ============================================================ */
.site-footer {
    background-color: var(--term-bg);
    border-top: 1px solid var(--term-border-dim);
    color: var(--term-text);
    font-size: var(--fs-xs);
    padding: 1% 4%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    /* Sticky footer: push to bottom on pages without a most-read section */
    margin-top: auto;
    transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}

/* When footer is inside page__inner, extend it beyond the bg-colored
   left/right borders so it spans the same full width as the 404 footer */
.page__inner .site-footer {
    margin-left: calc(-1 * min(3vh, 2rem));
    margin-right: calc(-1 * min(3vh, 2rem));
}

.site-footer__social { display: flex; gap: 1rem; align-items: center; }

/* Social icons on dark term-bg — always use term-text base, green on hover */
.social-link { text-decoration: none; color: var(--term-text); opacity: 0.65; transition: color 0.15s, opacity 0.15s; font-size: 1rem; }
.social-link:hover { color: var(--green); opacity: 1; }

.site-footer__policy {
    color: var(--term-text);
    text-decoration: none;
    opacity: 0.5;
    transition: opacity 0.15s, color 0.15s;
}
.site-footer__policy:hover { color: var(--green); opacity: 1; }

/* Terminal prompt inside footer left section */
.site-footer__cmd {
    white-space: nowrap;
    font-size: var(--fs-xs);
}

/* ============================================================
   Back to Top
   ============================================================ */
.btt {
    position: fixed;
    z-index: var(--z-sticky);
    bottom: calc(1.5rem + 1.7vw);
    right: calc(1.5rem + 1.7vw);
    background-color: var(--term-bg);
    color: var(--green);
    border: 1px solid var(--term-border-dim);
    cursor: pointer;
    padding: 4px 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--fs-xs); /* 12px — bumped from 11px, WCAG minimum */
    letter-spacing: 0.5px;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s, background-color 0.15s, border-color 0.15s, bottom 0.15s ease;
}

.btt--visible {
    opacity: 1;
    visibility: visible;
}

.btt:hover {
    background-color: var(--code-bg);
    border-color: var(--border-strong);
}

@media (max-width: 768px) {
    .btt { bottom: 1rem; right: 1rem; }

    /* Tighter padding inside two-tone cards on mobile */
    .article-card__top    { padding: var(--sp-3) var(--sp-4) var(--sp-2); }
    .article-card__bottom { padding: var(--sp-1) var(--sp-4); }

    /* Tighter grid gap on small screens (margin handled by --content-pad clamp) */
    .article-grid { gap: var(--sp-2); }

    /* Footer: wrap on small screens, center both rows */
    .site-footer {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--sp-2);
        padding: var(--sp-2) var(--sp-4);
    }
    /* Force the entire "cmd · © year · gizlilik" line onto one row.
       11px (down from 12px) is enough to fit the full string on a 375px screen. */
    .site-footer__copy { width: 100%; text-align: center; white-space: nowrap; font-size: 11px; }
    /* .site-footer__cmd already has white-space:nowrap in base rule — no override needed */

}

/* ============================================================
   Loading Screen
   ============================================================ */
.loader {
    background: var(--term-bg, #0d110d);
    display: flex;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: var(--z-loader);
    transition: opacity 0.3s;
}

.loader__inner { width: 112px; height: 112px; position: relative; }

.loader__box { border: 16px solid var(--color-success); box-sizing: border-box; position: absolute; display: block; }

.loader__box--1 { width: 112px; height: 48px; margin-top: 64px; margin-left: 0;    animation: anime1 2s ease-in-out infinite; }
.loader__box--2 { width: 48px;  height: 48px; margin-top: 0;    margin-left: 0;    animation: anime2 2s ease-in-out infinite; }
.loader__box--3 { width: 48px;  height: 48px; margin-top: 0;    margin-left: 64px; animation: anime3 2s ease-in-out infinite; }

@keyframes anime1 {
    0%    { width: 112px; height: 48px;  margin-top: 64px; margin-left: 0; }
    12.5% { width: 48px;  height: 48px;  margin-top: 64px; margin-left: 0; }
    62.5% { width: 48px;  height: 48px;  margin-top: 64px; margin-left: 0; }
    75%   { width: 48px;  height: 112px; margin-top: 0;    margin-left: 0; }
    87.5% { width: 48px;  height: 48px;  margin-top: 0;    margin-left: 0; }
    100%  { width: 48px;  height: 48px;  margin-top: 0;    margin-left: 0; }
}
@keyframes anime2 {
    0%    { width: 48px;  height: 48px; margin-top: 0; margin-left: 0; }
    37.5% { width: 48px;  height: 48px; margin-top: 0; margin-left: 0; }
    50%   { width: 112px; height: 48px; margin-top: 0; margin-left: 0; }
    62.5% { width: 48px;  height: 48px; margin-top: 0; margin-left: 64px; }
    100%  { width: 48px;  height: 48px; margin-top: 0; margin-left: 64px; }
}
@keyframes anime3 {
    0%    { width: 48px;  height: 48px;  margin-top: 0;    margin-left: 64px; }
    12.5% { width: 48px;  height: 48px;  margin-top: 0;    margin-left: 64px; }
    25%   { width: 48px;  height: 112px; margin-top: 0;    margin-left: 64px; }
    37.5% { width: 48px;  height: 48px;  margin-top: 64px; margin-left: 64px; }
    87.5% { width: 48px;  height: 48px;  margin-top: 64px; margin-left: 64px; }
    100%  { width: 112px; height: 48px;  margin-top: 64px; margin-left: 0; }
}

/* ============================================================
   Cookie Banner
   ============================================================ */
.cookie-banner {
    position: fixed;
    bottom: calc(1.5rem + 1.7vw);
    left: calc(1.5rem + 1.7vw);
    background-color: var(--term-bg);
    color: var(--term-text);
    font-size: var(--fs-xs);
    border: 1px solid var(--term-border-dim);
    border-top: 2px solid var(--border-strong);
    z-index: var(--z-sticky);
    box-shadow: 0 0 16px 2px var(--code-bg);
    width: min(320px, calc(100vw - 2rem));
    padding: 10px 14px 12px;
    transition: opacity 0.3s, bottom 0.15s ease, top 0.15s ease;
}

.cookie-banner__header {
    font-size: var(--fs-xs);
    opacity: 0.7;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cookie-banner__cmd { color: var(--term-text); }

.cookie-banner__text {
    margin: 0 0 10px;
    color: var(--term-text);
    opacity: 0.8;
    line-height: 1.5;
}

.cookie-banner__actions { display: flex; }

.cookie-banner__checkbox { visibility: hidden; width: 0; height: 0; margin: 0; position: absolute; }

.cookie-banner__label {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.15s;
}
.cookie-banner__label:hover { color: var(--green); }
.cookie-banner__label:hover .cookie-banner__check { color: var(--green); }

.cookie-banner__check {
    color: var(--green);
    font-weight: 600;
    flex-shrink: 0;
}

.cookie-banner__link {
    color: var(--green);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.cookie-banner__link:hover { opacity: 0.8; }

[data-theme="light"] .cookie-banner {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.30);
}

@media (max-width: 768px) {
    /* Mobile: full-width bar pinned to the viewport bottom — standard pattern.
       Avoids navbar rubber-band conflict entirely; no JS positioning needed. */
    .cookie-banner {
        bottom: 0;
        top: auto !important;
        left: 0;
        right: 0;
        width: 100%;
        border-left: none;
        border-right: none;
        border-bottom: none;
    }

    /* Hide BTT while cookie banner occupies the bottom of the viewport.
       .cookie-visible is added to <body> by cookie.js until the user accepts. */
    .cookie-visible .btt { display: none !important; }
}

/* ============================================================
   Privacy Policy Page
   ============================================================ */
.privacy-wrap {
    max-width: 80ch;
    width: 100%;
    margin: 0 auto;
    padding: 0.5rem 0 min(3vh, 2rem);
}

.privacy-meta {
    font-size: var(--fs-xs);
    color: var(--secondary);
    opacity: 0.7;
    font-family: 'JetBrains Mono', monospace;
}

/* ============================================================
   404 Page — Terminal Theme
   ============================================================ */
.page--404 { flex-direction: column; }

.err-404 {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    gap: 2rem;
}

.err-404__ascii {
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(0.5rem, 1.8vw, 0.85rem);
    color: var(--green);
    line-height: 1.25;
    margin: 0;
    text-align: center;
    letter-spacing: 0;
    user-select: none;
    white-space: pre;
}

.err-404__shell {
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--fs-sm);
    background-color: var(--term-bg);
    border: 1px solid var(--term-border-dim);
    padding: 1.1rem 1.4rem;
    width: min(520px, 92vw);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.err-404__line {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.err-404__cmd { color: var(--term-text); white-space: nowrap; }

.err-404__cmd--link {
    text-decoration: none;
    color: var(--green);
    transition: opacity 0.15s;
}
.err-404__cmd--link:hover { opacity: 0.7; }

.err-404__output {
    color: var(--secondary);
    padding-left: 1.5ch;
    font-size: var(--fs-xs);
}
.err-404__output--err { color: var(--term-host-color); }

.err-404__key { opacity: 0.6; }
.err-404__spacer { height: 0.6rem; }

/* ============================================================
   Archive Page
   ============================================================ */
.archive-year { margin: var(--sp-4) 0 var(--sp-3); padding: 0 1.5rem; }
/* Last archive-year provides the footer gap — match page__inner top border */
.archive-year:last-of-type { margin-bottom: min(3vh, 2rem); }
/* Tighten the gap between the section header command and the first year block */
.section-hdr + .archive-year { margin-top: var(--sp-2); }

.archive-year__heading {
    font-size: var(--fs-sm);
    color: var(--green);
    font-weight: 700;
    letter-spacing: 0.05em;
    margin: 0 0 0.75rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.4rem;
}

.archive-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.archive-item {
    display: flex;
    align-items: baseline;
    gap: 1ch;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.archive-item__date {
    font-size: var(--fs-xs);
    color: var(--secondary);
    white-space: nowrap;
    min-width: 13ch;
    flex-shrink: 0;
}

.archive-item__title {
    color: var(--text);
    text-decoration: none;
    font-size: var(--fs-sm);
    flex: 1;
    transition: color 0.15s;
}
.archive-item__title:hover { color: var(--fg-accent); }
/* Inline code inside archive titles — font-size:inherit prevents shrinkage
   since archive titles are already at --fs-sm (14px); 0.92em would go too small. */
.archive-item__title code {
    font-weight: 500;
    font-size: inherit;
    color: var(--fg-accent);
    background-color: var(--code-bg);
    padding: 1px 5px;
    border-radius: 2px;
}

.archive-item__tags {
    display: flex;
    gap: 0.4ch;
    flex-wrap: wrap;
}

.tag--sm {
    font-size: 10px;
    padding: 0 0.3em;
}

/* Search result snippet */
.article-card__snippet {
    font-size: var(--fs-xs);
    color: var(--secondary);
    margin-top: 0.3rem;
    line-height: 1.5;
}
.article-card__snippet mark {
    background: transparent;
    color: var(--green);
    font-weight: 600;
}

/* Search suggestions (typo fallback) */
.search-suggestions {
    margin: 0 0 1.5rem;   /* matches manifesto: page__inner border provides top gap */
    border: 1px solid var(--border);
    background: var(--card-bg);
    font-size: var(--fs-sm);
    overflow: hidden;
}

.search-suggestions__title {
    color: var(--green);
    font-weight: 700;
    padding: 0.5rem 1rem;
    background: var(--card-footer-bg);
    border-bottom: 1px solid var(--border);
}

.search-suggestions__list {
    margin: 0;
    padding: 0;
}

.search-suggestions__item + .search-suggestions__item {
    border-top: 1px solid var(--border);
}

.search-suggestions__link:link,
.search-suggestions__link:visited {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.4rem 1rem;
    color: var(--text);
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
}

/* '>' shell continuation prompt — added via CSS so no HTML change needed */
.search-suggestions__link::before {
    content: '>';
    color: var(--secondary);
    flex-shrink: 0;
    transition: color 0.12s;
}

.search-suggestions__link:hover {
    background: var(--hover-bg);
    color: var(--green);
}

.search-suggestions__link:hover::before {
    color: var(--green);
}

.search-suggestions__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Inline code inside suggestion titles — font-size:inherit prevents shrinkage
   when the entire title is wrapped in <code> (e.g. `deneme` → <code>deneme</code>) */
.search-suggestions__name code {
    font-weight: 500;
    font-size: inherit;
    color: var(--fg-accent);
    background-color: var(--code-bg);
    padding: 1px 5px;
    border-radius: 2px;
}

.search-suggestions__tag {
    font-size: var(--fs-xs);
    white-space: nowrap;
    flex-shrink: 0;
    opacity: 0.9;
    transition: opacity 0.12s;
}

.search-suggestions__link:hover .search-suggestions__tag {
    opacity: 1;
}

.search-suggestions__arrow { display: none; }

/* Featured suggestion — ★ replaces > prefix, subtle green row tint */
.search-suggestions__item--featured .search-suggestions__link:link,
.search-suggestions__item--featured .search-suggestions__link:visited {
    background: var(--hover-bg);
}

.search-suggestions__item--featured .search-suggestions__link::before {
    content: '★';
    color: var(--green);
    opacity: 0.85;
    font-size: 0.9em;
}

.search-suggestions__item--featured .search-suggestions__link:hover {
    background: color-mix(in srgb, var(--hover-bg) 150%, transparent);
}

/* Manifesto block */
.manifesto {
    margin: 0 0 var(--sp-5);
    background: var(--card-bg);
    border: 1px solid var(--border);
    font-family: 'JetBrains Mono', monospace;
    overflow: hidden;
}

.manifesto__cmd {
    background: var(--term-bg, #0e100e);
    color: var(--green);
    padding: 0.45rem 1rem;
    font-size: var(--fs-xs);
    border-bottom: 1px solid var(--border);
    letter-spacing: 0.02em;
}

.manifesto__body {
    padding: 0.6rem 0;
    display: flex;
    flex-direction: column;
    counter-reset: ln;
}

.manifesto__ln {
    display: flex;
    gap: 1.5ch;
    padding: 0.05rem 1rem 0.05rem 0;
    font-size: var(--fs-xs);
    color: var(--secondary);
    line-height: 1.8;
}
.manifesto__ln::before {
    counter-increment: ln;
    content: counter(ln);
    color: var(--border-accent);
    min-width: 3ch;
    padding-left: 0.75rem;
    text-align: right;
    user-select: none;
    flex-shrink: 0;
}
.manifesto__ln--gap {
    line-height: 0.5rem;
    min-height: 0.5rem;
}

.manifesto__prompt {
    padding: 0.35rem 1rem;
    border-top: 1px solid var(--border);
    font-size: var(--fs-xs);
    color: var(--secondary);
    background: var(--term-bg, #0e100e);
    display: flex;
    align-items: center;
    gap: 0;
}

/* Shared section header — used by normal posts, featured, most-read */
.section-hdr,
.featured-section__hdr,
.most-read-section__hdr {
    font-size: var(--fs-sm);
    color: var(--green);
    font-weight: 700;
    margin-bottom: var(--sp-3);
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.35rem;
}
/* Prevent long multi-tag commands (e.g. "$ ls --tag=a,b,c ~/blog/") from
   overflowing on narrow screens — truncate with ellipsis instead. */
.section-hdr {
    margin: 0 0 var(--sp-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* When section-hdr is the first element in page__inner (e.g. archive page),
   page__inner's own border (~32px) already provides enough top breathing room —
   remove the extra 16px top margin so the gap isn't doubled up. */
.page__inner > .section-hdr:first-child { margin-top: 0; }

/* Featured posts */
.featured-section { margin: 0 0 var(--sp-5); }
/* Inner article-grid inside featured-section needs no bottom margin —
   featured-section itself controls external spacing. */
.featured-section .article-grid { margin-bottom: 0; }
.featured-badge {
    font-size: 10px;
    color: var(--green);
    border: 1px solid var(--green);
    padding: 0 0.4em;
    margin-left: 0.5ch;
    opacity: 0.8;
}

/* ★ prefix on featured card titles.
   display:inline-block + line-height:1 isolates the star's box so the
   fallback-font metrics of ★ (U+2605) don't expand the title's line-box
   or shift the surrounding text. font-size:0.9em keeps the star visually
   consistent with the title weight. */
.article-card--featured .article-card__title::before {
    content: "★";
    color: var(--green);
    opacity: 0.85;
    display: inline-block;
    vertical-align: -0.05em;
    font-size: 1em;
    line-height: 1;
    margin-right: 0.4em;
}
/* ★ prefix on featured most-read titles */
.most-read-item--featured .most-read-item__title::before {
    content: "★";
    color: var(--green);
    opacity: 0.8;
    display: inline-block;
    vertical-align: -0.05em;
    font-size: 1em;
    line-height: 1;
    margin-right: 0.4em;
}

/* Most-read section — consistent 20px top gap from whatever precedes it
   (matches manifesto→featured and featured→article-list spacing).
   Footer keeps its base margin-top:auto, so it always sticks to the bottom. */
.most-read-section { margin: 0 0 min(3vh, 2rem); }
.article-grid  + .most-read-section { margin-top: var(--sp-5); }
.pagination    + .most-read-section { margin-top: var(--sp-5); }
.most-read-list {
    display: flex;
    flex-direction: column;
    padding: 0 var(--content-pad);
}
.most-read-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    transition: background-color 0.15s;
    min-width: 0;
}
.most-read-item:hover { background-color: var(--hover-bg); }
.most-read-item__rank {
    color: var(--green);
    font-size: var(--fs-xs);
    font-weight: 700;
    opacity: 0.55;
    font-family: 'JetBrains Mono', monospace;
    flex-shrink: 0;
    min-width: 2.5ch;
}
.most-read-item__title {
    color: var(--text);
    font-size: var(--fs-sm);
    transition: color 0.15s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.most-read-item:hover .most-read-item__title { color: var(--green); }

/* Update date in blog header */
.blog-content__updated {
    font-size: var(--fs-xs);
    color: var(--secondary);
    opacity: 0.75;
}

/* ============================================================
   Accessibility — Keyboard Focus
   ============================================================ */
/* Show a clear green outline only when keyboard-navigating */
:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

/* Suppress the browser default outline on mouse/touch clicks */
:focus:not(:focus-visible) {
    outline: none;
}

/* ============================================================
   About / Hakkımda Page
   ============================================================ */
.about-wrap {
    max-width: 80ch;
    margin: 0 auto;
    padding: 0 0 min(3vh, 2rem);
}

/* ── Identity card — manifesto variant ── */
.manifesto--identity {
    background: var(--term-bg);
    border-color: var(--term-border-dim);
    box-shadow: 0 0 10px 2px color-mix(in srgb, var(--accent) 5%, transparent);
    margin-bottom: var(--sp-8);
}
.manifesto--identity .manifesto__cmd {
    border-bottom-color: var(--term-border-dim);
}
.manifesto--identity .manifesto__prompt {
    border-top-color: var(--term-border-dim);
}

/* Inner grid for KEY = VALUE alignment within a manifesto__ln */
.about-ln-content {
    display: grid;
    grid-template-columns: 7ch auto 1fr;
    gap: 0.5ch;
    flex: 1;
    min-width: 0;
    align-items: baseline;
}

.about-id__key  { color: var(--term-text); opacity: 0.55; }
.about-id__op   { color: var(--secondary); }
.about-id__val  { color: var(--term-text); }
.about-id__val--ok { color: var(--green); }

/* Green pulsing dot for STATUS=● */
.about-id__dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--green);
    margin-right: 0.5ch;
    vertical-align: middle;
    position: relative; top: -1px;
    box-shadow: 0 0 5px var(--green);
    animation: about-dot-pulse 2.4s ease-in-out infinite;
}

@keyframes about-dot-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 5px var(--green); }
    50%       { opacity: 0.45; box-shadow: none; }
}

/* ── Content sections — same header language as meta/toc widgets ── */
.about-section { margin-bottom: 0; }
/* Space between consecutive about-sections so cmd doesn't sit flush
   against the preceding section's last paragraph. */
.about-section + .about-section { margin-top: var(--sp-6); }

.about-section__cmd {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--fs-sm);
    line-height: 1;
    color: var(--green);
    opacity: 0.85;
    letter-spacing: 1px;
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--term-border-dim);
}

.about-p {
    font-size: var(--fs-base);
    color: var(--text);
    line-height: var(--lh-body);
    margin: 0 0 1.15em;
    text-wrap: pretty;
}
.about-p:last-child { margin-bottom: 0; }

/* Final closing line — set off with a left accent border */
.about-p--close {
    margin-top: var(--sp-4);
    padding-left: 1ch;
    border-left: 2px solid var(--border-accent);
    color: var(--secondary);
    font-size: var(--fs-sm);
    font-style: italic;
}

/* ── Contact rows ── */
.about-contact {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.about-contact__item {
    display: grid;
    grid-template-columns: 11ch auto 1fr;
    gap: 1ch;
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--fs-sm);
    align-items: baseline;
    text-decoration: none;
    color: inherit;
    padding: 3px 0;
    border-radius: 2px;
    transition: color 0.15s;
}
.about-contact__item:hover .about-contact__val { color: var(--green); }
.about-contact__item:hover .about-contact__sep { color: var(--green); opacity: 0.6; }
.about-contact__key { color: var(--secondary); }
.about-contact__key::before { content: "["; }
.about-contact__key::after  { content: "]"; }
.about-contact__sep { color: var(--term-border-dim); transition: color 0.15s; }
.about-contact__val { color: var(--accent-text); transition: color 0.15s; }


@media (max-width: 600px) {
    .about-ln-content,
    .about-contact__item { font-size: var(--fs-xs); }
}

/* ============================================================
   Accessibility — Reduced Motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    /* Collapse all transitions/animations to near-zero */
    *, *::before, *::after {
        animation-duration:        0.01ms !important;
        animation-iteration-count: 1      !important;
        transition-duration:       0.01ms !important;
        scroll-behavior:           auto   !important;
    }

    /* Keep the cursor visible instead of blinking */
    .term-cursor {
        animation: none;
        opacity: 1;
    }

    /* Keep the loader visible instantly without the morph animation */
    .loader__box--1,
    .loader__box--2,
    .loader__box--3 {
        animation: none;
    }
}