@font-face {
    font-family: "EB Garamond Variable";
    src: url("../fonts/EBGaramond-VariableFont_wght.fe83127979f7.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* EB Garamond Variable - Italic */
@font-face {
    font-family: "EB Garamond Variable";
    src: url("../fonts/EBGaramond-Italic-VariableFont_wght.5e0992919d14.woff2") format("woff2");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}


:root {
    --bs-font-size-base: 1.2rem;
    --bs-font-size-sm: 0.85rem;
    --bs-font-size-lg: 1.25rem;
}


body {
    font-family: "EB Garamond Variable", serif;
}

.skip-link {
    position: absolute;
    top: -30px;
}

.skip-link:focus-visible {
    top: 5px;
}

footer a,
.footer-text a {
    text-decoration: none;
}

/* Author-inserted StreamField images: float them so following body text wraps
   alongside, and cap the display size so large uploads don't overwhelm the
   post body. */
/* Contain floated figures within the post body so they don't overflow into the
   tags, related posts, or site footer below. */
.post-body {
    display: flow-root;
}


.body-figure .body-image {
    max-width: 100%;
    max-height: 400px;
    width: auto;
    height: auto;
    margin-top: 1rem;
}
@media screen and (min-width: 767px){
    .body-figure {
        float: right;
        margin: 0.25rem 0 1rem 1.5rem;
    }
}


article.blog-content .w-block-heading.block-heading {
    margin-top: 2em;
}


/* "Opens in a new tab" indicator.
   The empty, ARIA-labelled span is emitted by blog/wagtail_hooks.py after every
   new-tab link; this draws its visible ↗ glyph. It is purely decorative — the
   accessible name lives on the span's aria-label — so it needs no text
   alternative here. `currentColor` makes the arrow track the link colour in
   both light and dark themes, keeping its contrast in step with the link text
   (WCAG 1.4.11). */
.new-tab-indicator {
    display: inline-block;
    width: 0.72em;
    height: 0.72em;
    margin-left: 0.12em;
    vertical-align: baseline;
    background-color: currentColor;
    -webkit-mask: var(--new-tab-glyph) no-repeat center / contain;
            mask: var(--new-tab-glyph) no-repeat center / contain;
}

:root {
    --new-tab-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' y1='17' x2='17' y2='7'/%3E%3Cpolyline points='8 7 17 7 17 16'/%3E%3C/svg%3E");
}

/* Some browsers (older WebKit) don't honour a masked box; if masks aren't
   supported the span stays invisible, so fall back to the ↗ character. */
@supports not ((-webkit-mask: none) or (mask: none)) {
    .new-tab-indicator {
        background-color: transparent;
    }
    .new-tab-indicator::before {
        content: "\2197"; /* ↗ NORTH EAST ARROW */
    }
}


/* Reader reactions.
   A row of Iconoir emoji buttons under each post. Colors come from Bootstrap's
   theme variables so the widget tracks light/dark automatically. The empty
   placeholder reserves height (via min-height) so the HTMX-loaded fragment
   doesn't shift the page as it swaps in. */
.post-reactions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    margin: 1.25rem 0;
}

.post-reactions__label {
    font-size: var(--bs-font-size-sm);
    color: var(--bs-secondary-color);
}

.post-reactions__btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    /* Keep a constant transparent border so hover/active only change its
       colour — animating border-width would nudge the row by a pixel. */
    border: 1px solid transparent;
    border-radius: 2rem;
    background-color: transparent;
    color: var(--bs-body-color);
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease,
        color 0.15s ease;
}

/* Grow the icon with transform, not font-size: transforms are GPU-composited
   and don't reflow the row, so the scale stays smooth and the neighbours hold
   still. */
.post-reactions__btn i {
    font-size: 1.5rem;
    transition: transform 0.15s ease;
}

/* Smooth grow on hover/focus — the button persists across these states, so the
   transition has a value to animate from. */
.post-reactions__btn:hover i,
.post-reactions__btn:focus-visible i {
    transform: scale(1.3);
}

.post-reactions__btn:hover {
    /* border-color: var(--bs-primary); */
    color: var(--bs-primary);
}

.post-reactions__btn:focus-visible {
    /* outline: 2px solid var(--bs-primary); */
    outline-offset: 2px;
}

.post-reactions__btn.is-active {
    /* border-color: var(--bs-primary); */
    color: var(--bs-primary);
}

/* Active reactions render enlarged. Because the widget is swapped with
   hx-swap="morph" (idiomorph), the button stays the *same* DOM node across a
   toggle, so this transform animates via the transition above — a smooth grow
   when you react, and no flicker on already-active icons when you react to
   another one. */
.post-reactions__btn.is-active i {
    transform: scale(1.3);
}

/* Respect users who ask for less motion: keep the final sizes, drop the
   animating. */
@media (prefers-reduced-motion: reduce) {
    .post-reactions__btn i {
        transition: none;
    }
}

.post-reactions__count {
    font-size: var(--bs-font-size-sm);
    font-variant-numeric: tabular-nums;
    min-width: 1ch;
    text-align: center;
}

/* Before the visitor reacts, counts are hidden but must still reserve their
   space, so revealing them later doesn't grow the button and shift the row.
   visibility:hidden keeps the box (and the flex gap above it) in layout; the
   `hidden` attribute's display:none would collapse both and change the height. */
.post-reactions__count.is-hidden {
    visibility: hidden;
}


/* Back-to-top button.
   Fixed to the bottom-left of the viewport. Visibility is governed entirely by
   Halfmoon's .visually-hidden-focusable utility in the markup: it clips the
   button (with !important) while keeping it in the tab order, and reveals it on
   :focus. arthurktripp_com.js removes that class once the visitor scrolls past
   ~1.5 viewport heights, so pointer users see it too. Colors come from
   Bootstrap theme variables, so the button tracks light/dark automatically. */
.back-to-top {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    z-index: 1030;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 50%;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: 1.5rem;
    line-height: 1;
    transition: color 0.25s ease, border-color 0.25s ease,
        background-color 0.25s ease, height 0.25s ease, width 0.25s ease;
}

.back-to-top:hover,
.back-to-top:focus-visible {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
    height: 3.5rem;
    width: 3.5rem;
}



/* Styling for blockquotes */
blockquote {
    margin: revert;
    margin-top: 2em;
    margin-bottom: 2em;
    padding: 1em; 
    border-left: .5px solid var(--bs-primary);

}