/* ============================================================
   01. LOCAL FONTS
   ============================================================ */

@font-face {
    font-family: 'Title-01-Font';
    src: url('/fonts/local.host-title-01.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Text-body-01-Font';
    src: url('/fonts/local.host-text-body-01.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* ============================================================
   02. DESIGN TOKENS
   ============================================================ */

:root {
    /* colors */
    --color-bg: #1E1A20;
    --color-text: #E4E2E0;
    --color-text-muted: #BDB6AF;
    --color-text-soft: #DAD6D2;
    --color-bright: #FFFDF6;
    --color-accent: #C45621;
    --color-highlight-text: #111111;

    /* paper identities */
    --paper-blue: #7DD7EA;
    --paper-bubblegum: #E3ACFF;
    --paper-ghost: #CEDFDF;

    /* type */
    --font-title: 'Title-01-Font', Georgia, 'Times New Roman', serif;
    --font-body: 'Text-body-01-Font', Georgia, 'Times New Roman', serif;
    --font-ui: Arial, Helvetica, sans-serif;

    --text-size-body: 22px;
    --text-line-body: 1.37;

    --text-size-list-date: 25px;
    --text-size-list-title: 46px;

    --text-size-post-title: 69px;
    --text-size-page-title: 51px;
    --text-size-page-heading: 26px;

    --text-size-content: 21.7px;
    --text-line-content: 1.6;

    --text-size-mobile-post-title: 32px;
    --text-size-mobile-page-title: 42px;

    /* layout */
    --width-site: 850px;
    --width-reading: 725px;
    --width-footer: calc(var(--width-site) + 150px);

    --space-site-x: 2rem;
    --space-site-y: 3rem;
    --space-content-top: 132px;
    --space-entry-bottom: 2.3rem;

    /* top objects */
    --top-object-x: 30px;
    --top-object-y: 50px;

    /* logo */
    --logo-top: 30px;
    --logo-left: 40px;
    --logo-width: 350px;
    --logo-mobile-width: min(100%, 640px);
    --logo-blog-size: clamp(24px, 3.2vw, 44px);
    --logo-blog-left: 0.35rem;
    --logo-blog-top: -0.05rem;

    /* menu: vertical 1 × 6 object */
    --menu-top: 40px;
    --menu-right: 40px;
    --menu-width: 132px;
    --menu-item-height: 34px;
    --menu-line-height: 24px;
    --menu-gap: 0px;
    --menu-font-size: 15px;
    --menu-letter-spacing: 0.1em;
    --menu-hover-scale-x: 1.08;
    --menu-hover-scale-y: 1.34;
    --menu-react-space: 10px;
    --menu-current-extra-space: 8px;
    --menu-counter-space: 7px;

    /* rules */
    --rule-color: var(--color-accent);
    --rule-height: 6px;
    --rule-radius: 999px;

    /* motion */
    --hover-speed: 0.15s;
}

/* ============================================================
   03. RESET + BASE
   ============================================================ */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-size-body);
    line-height: var(--text-line-body);
    font-weight: 400;
    color: var(--color-text);
    background: var(--color-bg);
}

.container {
    max-width: var(--width-site);
    margin: 0 auto;
    padding: var(--space-content-top) var(--space-site-x) var(--space-site-y);
}

a {
    color: inherit;
}

a:hover {
    text-decoration: none;
}


/* ============================================================
   04. PAPER IDENTITY
   ============================================================ */

.paper-blue {
    --paper-title-color: var(--paper-blue);
    --paper-highlight-color: var(--paper-blue);
}

.paper-bubblegum {
    --paper-title-color: var(--paper-bubblegum);
    --paper-highlight-color: var(--paper-bubblegum);
}

.paper-ghost {
    --paper-title-color: var(--paper-ghost);
    --paper-highlight-color: var(--paper-ghost);
}


/* ============================================================
   05. HEADER
   ============================================================ */

.site-topbar {
    display: contents;
}

/* ---------- logo ---------- */

.site-mark {
    position: absolute;
    top: var(--logo-top);
    left: var(--logo-left);
    z-index: 10;
    pointer-events: auto;
}

.site-mark a {
    display: block;
    text-decoration: none;
}

.site-mark a:hover {
    background: transparent;
}

.site-logo-image {
    display: block;
    width: var(--logo-width);
    max-width: none;
    height: auto;
    border: 0;
}

.site-logo-blog {
    display: block;
    margin-top: var(--logo-blog-top);
    margin-left: var(--logo-blog-left);

    font-family: var(--font-ui);
    font-size: var(--logo-blog-size);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: 0.02em;
    text-transform: lowercase;

    color: var(--color-text);
    pointer-events: none;
}
/* ---------- menu ---------- */

.site-directory {
    position: absolute;
    top: var(--menu-top);
    right: var(--menu-right);
    z-index: 10;

    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: var(--menu-line-height);
    gap: var(--menu-gap);

    width: var(--menu-width);

    font-family: var(--font-ui);
    font-size: var(--menu-font-size);
    font-weight: 900;
    line-height: 1;
    letter-spacing: var(--menu-letter-spacing);
    text-transform: uppercase;
    overflow: visible;
}

.site-directory a {
    --menu-current-shift-y: 0px;
    --menu-hover-shift-y: 0px;
    --menu-counter-shift-y: 0px;

    --menu-scale-x: 1;
    --menu-scale-y: 1;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: var(--menu-line-height);
    padding: 0 0.65rem;

    color: var(--color-text);
    background: transparent;
    text-decoration: none;

    transform:
        translateY(
            calc(
                var(--menu-current-shift-y)
                + var(--menu-hover-shift-y)
                + var(--menu-counter-shift-y)
            )
        )
        scaleX(var(--menu-scale-x))
        scaleY(var(--menu-scale-y));
    transform-origin: center;

    transition:
        background-color var(--hover-speed) ease,
        color var(--hover-speed) ease,
        transform var(--hover-speed) ease;
}

.site-directory a:hover,
.site-directory a:focus-visible,
.site-directory a.is-current {
    z-index: 1;
    color: var(--color-bright);
    background: var(--color-accent);
    --menu-scale-x: var(--menu-hover-scale-x);
    --menu-scale-y: var(--menu-hover-scale-y);
}


/* --------------------------------------------------
   1. CURRENT ITEM = RESTING DIVIDER

   This is the selected-page state.

   Items above current move up.
   Items below current move down.
-------------------------------------------------- */

.site-directory a:has(~ a.is-current) {
    --menu-current-shift-y: calc(-1 * var(--menu-react-space));
}

.site-directory a.is-current ~ a {
    --menu-current-shift-y: var(--menu-react-space);
}


/* --------------------------------------------------
   2. HOVER BELOW CURRENT

   The south side gets the local hover motion.
   The north side counter-reacts upward.
-------------------------------------------------- */

/* Items between current and hover move up. */
.site-directory:has(a.is-current ~ a:hover) a.is-current ~ a:has(~ a:hover),
.site-directory:has(a.is-current ~ a:focus-visible) a.is-current ~ a:has(~ a:focus-visible) {
    --menu-hover-shift-y: calc(-1 * var(--menu-react-space));
}

/* Items below hover move down. */
.site-directory:has(a.is-current ~ a:hover) a:hover ~ a,
.site-directory:has(a.is-current ~ a:focus-visible) a:focus-visible ~ a {
    --menu-hover-shift-y: var(--menu-react-space);
}

/* Current + north side move farther up as one counter-part. */
.site-directory:has(a.is-current ~ a:hover) a:has(~ a.is-current),
.site-directory:has(a.is-current ~ a:hover) a.is-current,
.site-directory:has(a.is-current ~ a:focus-visible) a:has(~ a.is-current),
.site-directory:has(a.is-current ~ a:focus-visible) a.is-current {
    --menu-counter-shift-y: calc(-1 * var(--menu-counter-space));
}


/* --------------------------------------------------
   3. HOVER ABOVE CURRENT

   The north side gets the local hover motion.
   The south side counter-reacts downward.
-------------------------------------------------- */

/* Items above hover move up. */
.site-directory:has(a:hover ~ a.is-current) a:has(~ a:hover),
.site-directory:has(a:focus-visible ~ a.is-current) a:has(~ a:focus-visible) {
    --menu-hover-shift-y: calc(-1 * var(--menu-react-space));
}

/* Items between hover and current move down. */
.site-directory:has(a:hover ~ a.is-current) a:hover ~ a:has(~ a.is-current),
.site-directory:has(a:focus-visible ~ a.is-current) a:focus-visible ~ a:has(~ a.is-current) {
    --menu-hover-shift-y: var(--menu-react-space);
}

/* Current + south side move farther down as one counter-part. */
.site-directory:has(a:hover ~ a.is-current) a.is-current,
.site-directory:has(a:hover ~ a.is-current) a.is-current ~ a,
.site-directory:has(a:focus-visible ~ a.is-current) a.is-current,
.site-directory:has(a:focus-visible ~ a.is-current) a.is-current ~ a {
    --menu-counter-shift-y: var(--menu-counter-space);
}


/* --------------------------------------------------
   4. HOVERING THE CURRENT ITEM ITSELF

   No extra hover/counter movement.
   The current item is already the center.
-------------------------------------------------- */

.site-directory:has(a.is-current:hover) a,
.site-directory:has(a.is-current:focus-visible) a {
    --menu-hover-shift-y: 0px;
    --menu-counter-shift-y: 0px;
}
/* ============================================================
   06. POST LISTS
   ============================================================ */

.post-list .post-entry {
    position: relative;

    display: block;
    margin-bottom: 1.25rem;
    padding: 1.05rem 1.2rem 1.15rem;

    color: var(--color-text);
    background: var(--color-bg);
}

.post-list .post-entry:last-child {
    margin-bottom: 0;
}

.post-body {
    min-width: 0;
}

.post-list .post-date {
    position: relative;

    display: inline-block;
    margin-bottom: 0.75rem;
    padding-bottom: 8px;

    font-family: var(--font-title);
    font-size: var(--text-size-list-date);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
    text-align: left;

    color: var(--color-text);
}

.post-list .post-date::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;

    width: 100%;
    height: var(--rule-height);

    background: var(--color-accent);
    border-radius: var(--rule-radius);
}

.post-list .post-title {
    margin: 0 0 0.5rem;

    font-family: var(--font-title);
    font-size: var(--text-size-list-title);
    font-weight: normal;
    line-height: 1.1;

    color: var(--paper-title-color, var(--paper-blue));
}

.post-list .post-title a {
    display: -webkit-box;
    overflow: hidden;

    color: inherit;
    text-decoration: none;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    transition: color var(--hover-speed) ease;
}

.post-list .post-title a span {
    transition:
        background-color var(--hover-speed) ease,
        color var(--hover-speed) ease;
}

.post-list .post-title a:hover span,
.post-list .post-title a:focus-visible span {
    color: var(--color-highlight-text);
    background: var(--paper-highlight-color, var(--paper-blue));
}


/* ---------- media preview strip ---------- */

.post-entry-media {
    margin-bottom: 3.2rem;
}

.media-preview {
    --media-preview-height: 140px;
    --media-preview-gap: 8px;
    --media-preview-scale: calc(var(--media-preview-zoom, 120) * 0.01);

    display: flex;
    align-items: stretch;
    gap: var(--media-preview-gap);

    width: 100%;
    max-width: 100%;
    height: var(--media-preview-height);
    margin-top: 0.75rem;

    overflow: hidden;
    text-decoration: none;
}

.media-preview:hover {
    text-decoration: none;
}

.media-preview-item {
    display: block;
    flex: 0 0 auto;
    height: 100%;

    overflow: hidden;
    background: rgba(255, 253, 246, 0.04);
}

.media-preview-item img {
    display: block;
    width: auto;
    height: 100%;

    transform: scale(var(--media-preview-scale));
    transform-origin: center;
}
/* ============================================================
   07. CONTENT FLOW
   ============================================================ */

.post-content {
    overflow-wrap: break-word;

    color: var(--color-text);
    font-size: var(--text-size-content);
    line-height: var(--text-line-content);
}

.post-content p {
    margin-bottom: 1.5rem;

    text-align: justify;
    text-align-last: left;
    hyphens: auto;
    hyphenate-limit-chars: 8 3 3;
    text-wrap: pretty;
    overflow-wrap: normal;
    word-break: normal;
}

.post-content img {
    display: block;
    max-width: 100%;
    height: auto;
}


/* ============================================================
   08. SINGLE POSTS
   ============================================================ */

.single-post {
    max-width: var(--width-reading);
    margin: 0 auto;
}

.single-post .post-title {
    margin-bottom: 3rem;

    font-family: var(--font-title);
    font-size: var(--text-size-post-title);
    font-weight: normal;
    line-height: 0.9;
    text-align: center;

    color: var(--paper-title-color, var(--paper-blue));
}

.post-meta-block {
    margin: -2rem 0 3rem;

    font-size: 18px;
    line-height: 1.25;
    letter-spacing: 0.04em;
    text-align: center;

    color: var(--color-text-muted);
}

.post-meta-date {
    display: block;
    font-style: normal;
}

.translation-switch {
    margin-top: 0.25rem;
}

.translation-switch a {
    color: var(--color-text-muted);
    text-decoration: none;

    transition:
        background-color var(--hover-speed) ease,
        color var(--hover-speed) ease;
}

.translation-switch a:hover,
.translation-switch a:focus-visible {
    color: var(--color-bright);
    background: var(--color-accent);
}


/* ============================================================
   09. PLAIN PAGES
   ============================================================ */

.plain-page {
    max-width: var(--width-reading);
    margin: 0 auto;
}

.plain-page .post-title {
    margin-bottom: 2rem;

    font-family: var(--font-title);
    font-size: var(--text-size-page-title);
    font-weight: normal;
    line-height: 1;

    color: var(--color-text);
}

.plain-page .post-content p {
    margin-bottom: 1.5rem;
}

.plain-page .post-content h2 {
    margin: 2.5rem 0 1rem;

    font-family: var(--font-title);
    font-size: var(--text-size-page-heading);
    font-weight: normal;
    line-height: 1;

    color: var(--color-text);
}

.plain-page .post-content ul,
.plain-page .post-content ol {
    margin: 0 0 2rem 1.2rem;
}

.plain-page .post-content li {
    margin-bottom: 0.85rem;
}

.plain-page .post-content a {
    color: var(--paper-blue);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
}

.plain-page .post-content a:hover,
.plain-page .post-content a:focus-visible {
    color: var(--color-bright);
    background: var(--color-accent);
    text-decoration: none;
}

.plain-page .post-content blockquote {
    margin: 0 0 2rem;
    padding: 0.9rem 0 0.9rem 1.2rem;

    border-left: var(--rule-height) solid var(--rule-color);

    color: var(--color-text-muted);
    font-size: 0.88em;
    line-height: 1.25;
}

.plain-page .post-content blockquote p {
    margin-bottom: 0.75rem;
}

.plain-page .post-content blockquote p:last-child {
    margin-bottom: 0;
}

/* ============================================================
   10. SPECIAL PAGES
   ============================================================ */

/* ---------- archive ---------- */

.site-view-archive {
    --archive-accent: #B22135;
}

.site-view-archive .post-content blockquote {
    margin: 0 0 2.35rem;
    padding: 0.42rem 0 0.46rem 0.6rem;

    border-left: 5px solid var(--archive-accent);

    font-family: var(--font-ui);
    font-size: clamp(16px, 5vw, 28px);
    font-weight: 700;
    line-height: 1.45;

    color: var(--color-text);
}

.site-view-archive .post-content blockquote p {
    margin: 0;

    color: inherit;
    text-align: left;
    text-align-last: auto;
    hyphens: none;
    text-wrap: auto;
    word-spacing: normal;
}

.site-view-archive .post-content blockquote p:last-child {
    margin-bottom: 0;
    color: inherit;
}

.site-view-archive .post-content blockquote a,
.site-view-archive .post-content blockquote a:link,
.site-view-archive .post-content blockquote a:visited {
    display: inline;
    padding: 0 0.02em 0.02em;

    color: var(--color-bright);
    background: var(--archive-accent);
    text-decoration: none;

    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.site-view-archive .post-content blockquote a:hover,
.site-view-archive .post-content blockquote a:focus-visible {
    color: var(--archive-accent);
    background: var(--color-bright);
    text-decoration: none;
}


/* ---------- about ---------- */

.site-view-about {
    --about-link-bg: #3B3B6E;
    --about-link-text: #FBB430;
}

.site-view-about .post-content {
    font-family: var(--font-ui);
    font-size: clamp(18px, 6vw, 26px);
    font-weight: 700;
    line-height: 1.45;

    color: var(--color-text);
}

.site-view-about .post-content p {
    margin-bottom: 2.2rem;

    text-align: left;
    text-align-last: auto;
    hyphens: none;
    text-wrap: auto;
}

.site-view-about .post-content a,
.site-view-about .post-content a:link,
.site-view-about .post-content a:visited {
    display: inline;
    padding: 0 0.06em 0.02em;

    color: var(--about-link-text);
    background: var(--about-link-bg);
    text-decoration: none;

    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.site-view-about .post-content a:hover,
.site-view-about .post-content a:focus-visible {
    color: var(--about-link-bg);
    background: var(--about-link-text);
    text-decoration: none;
}

/* ---------- RSS links ---------- */

.post-content ul:has(a.rss-link) {
    list-style: none;
    margin: 4rem 0 7.5rem;
    padding: 0;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
}

.post-content ul:has(a.rss-link) li {
    margin: 0;
    padding: 0;
}

.post-content a.rss-link,
.post-content a.rss-link:link,
.post-content a.rss-link:visited {
    display: inline-block;
    padding: 0 0.12em;

    font-family: var(--font-title);
    font-size: clamp(34px, 5vw, 56px);
    font-weight: normal;
    line-height: 1.05;

    color: var(--rss-link-text);
    background: var(--rss-link-bg);
    text-decoration: none;
}

.post-content a.rss-link:hover,
.post-content a.rss-link:focus-visible {
    color: var(--color-bright);
    background: var(--color-accent);
    text-decoration: none;
}

.post-content a.rss-link-full {
    --rss-link-text: var(--color-bright);
    --rss-link-bg: rgba(255, 253, 246, 0.12);
}

.post-content a.rss-link-blue {
    --rss-link-text: var(--color-highlight-text);
    --rss-link-bg: var(--paper-blue);
}

.post-content a.rss-link-bubblegum {
    --rss-link-text: var(--color-highlight-text);
    --rss-link-bg: var(--paper-bubblegum);
}

.post-content a.rss-link-ghost {
    --rss-link-text: var(--color-highlight-text);
    --rss-link-bg: var(--paper-ghost);
}


/* ============================================================
   11. SHORTCODES / MARKDOWN OBJECTS
   ============================================================ */

/* ---------- inline paper marks ---------- */

.paper-mark {
    display: inline;
    padding: 0 0.08em;

    font-family: var(--font-title);

    color: var(--color-highlight-text);
    background: var(--paper-mark-color);

    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.paper-mark-blue {
    --paper-mark-color: var(--paper-blue);
}

.paper-mark-bubblegum {
    --paper-mark-color: var(--paper-bubblegum);
}

.paper-mark-ghost {
    --paper-mark-color: var(--paper-ghost);
}

.paper-mark-size-normal {
    font-size: 1em;
}

.paper-mark-size-big {
    font-size: clamp(22px, 3vw, 44px);
    line-height: 0.95;
}

.paper-mark-size-huge {
    font-size: clamp(42px, 3vw, 52px);
    line-height: 0.9;
}


/* ---------- content spacing ---------- */

.content-space {
    display: block;
}

.content-space-small {
    height: 0.1rem;
}

.content-space-medium {
    height: 2.5rem;
}

.content-space-large {
    height: 4rem;
}

.content-space-huge {
    height: 7rem;
}

/* ============================================================
   12. PAGINATION
   ============================================================ */

.pagination-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 1.2rem;

    margin-top: 5rem;
    margin-bottom: -5rem;

    font-family: var(--font-ui);
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pagination-slot {
    min-width: 0;
}

.pagination-newer {
    justify-self: start;
}

.pagination-current {
    justify-self: center;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.pagination-older {
    justify-self: end;
}

.pagination-nav a {
    color: var(--color-bright);
    text-decoration: none;
}

.pagination-nav a:hover,
.pagination-nav a:focus-visible {
    color: var(--color-highlight-text);
    background: var(--color-accent);
}


/* ============================================================
   13. 404
   ============================================================ */

.site-view-404 .container {
    min-height: 100vh;
    padding-top: 0;
    padding-bottom: 0;

    display: flex;
    align-items: center;
    justify-content: center;
}

.not-found-page {
    text-align: center;
    transform: translateY(-4vh);
}

.not-found-page h1 {
    font-family: var(--font-ui);
    font-size: clamp(140px, 22vw, 360px);
    font-weight: 900;
    line-height: 0.8;
    letter-spacing: -0.06em;

    color: rgba(228, 226, 224, 0.42);
}

.not-found-page p {
    margin-top: 1.2rem;

    font-family: var(--font-title);
    font-size: clamp(30px, 4vw, 64px);
    font-weight: normal;
    line-height: 1;

    color: rgba(228, 226, 224, 0.55);
}

.site-view-404 .site-footer,
.site-view-404 .back-top,
.site-view-404 .reader-mode-toggle {
    display: none;
}
/* ============================================================
   14. FOOTER
   ============================================================ */

.site-footer {
    max-width: var(--width-footer);
    margin: 4.8rem auto 0;
    padding: 0 var(--space-site-x) var(--space-site-y);

    color: var(--color-text-muted);
}

.footer-rule {
    width: 100%;
    height: 2px;
    margin-bottom: 1rem;

    background: var(--color-accent);
    box-shadow: 0 1px 0 rgba(255, 253, 246, 0.06);
}

.footer-inner {
    display: grid;
    grid-template-columns: minmax(208px, 360px) 1fr auto auto;
    column-gap: 2rem;
    align-items: center;
}

.subscribe-form {
    grid-column: 1;
    justify-self: start;

    display: flex;
    align-items: center;
    gap: 0;

    width: 100%;
    max-width: 360px;

    border: 1px solid rgba(255, 253, 246, 0.18);
    background: rgba(255, 253, 246, 0.025);
}

.subscribe-form input,
.subscribe-form button,
.subscribe-info,
.footer-license,
.footer-rss {
    height: 34px;

    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.subscribe-form input,
.subscribe-form button {
    border: 0;
    border-radius: 0;
}

.subscribe-form input {
    flex: 1;
    min-width: 0;
    padding: 0 0.75rem;

    color: var(--color-bright);
    background: rgba(255, 253, 246, 0.075);
}

.subscribe-form button {
    padding: 0 0.9rem;

    color: var(--color-bright);
    background: transparent;
    border-left: 1px solid rgba(255, 253, 246, 0.18);
    cursor: not-allowed;
    opacity: 0.86;
}

.subscribe-info {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    flex: 0 0 34px;

    color: var(--color-text-muted);
    background: transparent;
    border-left: 1px solid rgba(255, 253, 246, 0.18);
    text-decoration: none;

    font-size: 13px;
    letter-spacing: 0;
}

.subscribe-info:hover,
.subscribe-info:focus-visible {
    color: var(--color-bright);
    background: var(--color-accent);
}

.footer-license {
    grid-column: 3;
    justify-self: center;

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.35rem;

    color: var(--color-text-muted);
    opacity: 0.82;
    text-decoration: none;
    white-space: nowrap;
}

.footer-rss {
    grid-column: 4;
    justify-self: end;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0 0.35rem;

    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
}

.footer-license:hover,
.footer-license:focus-visible,
.footer-rss:hover,
.footer-rss:focus-visible {
    color: var(--color-bright);
    background: var(--color-accent);
}
/* ============================================================
   15. UTILITIES
   ============================================================ */

.back-top,
.reader-mode-toggle {
    position: fixed;
    right: var(--top-object-x);
    z-index: 20;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    font-family: var(--font-ui);
    font-size: 24px;
    font-weight: 900;
    line-height: 1;

    color: var(--color-text);
    background: transparent;
    text-decoration: none;

    transition:
        opacity var(--hover-speed) ease,
        background-color var(--hover-speed) ease,
        color var(--hover-speed) ease;
}

.back-top {
    bottom: 84px;
    opacity: 0;
    pointer-events: none;
}

.back-top.is-visible {
    opacity: 0.75;
    pointer-events: auto;
}

.reader-mode-toggle {
    bottom: 32px;
    border: 0;
    padding: 0;
    cursor: pointer;
    opacity: 0.75;
}

.back-top.is-visible:hover,
.back-top.is-visible:focus-visible,
.reader-mode-toggle:hover,
.reader-mode-toggle:focus-visible {
    opacity: 1;
    color: var(--color-bright);
    background: var(--color-accent);
}


/* ============================================================
   16. FOCUS STATES
   ============================================================ */

.subscribe-form input:focus-visible,
.subscribe-info:focus-visible,
.footer-license:focus-visible,
.footer-rss:focus-visible,
.site-directory a:focus-visible,
.post-list .post-title a:focus-visible,
.translation-switch a:focus-visible,
.back-top:focus-visible,
.reader-mode-toggle:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

/* ============================================================
   17. RESPONSIVE — SMALL DESKTOP / MENU CLEARANCE
   ============================================================ */

@media (max-width: 1060px), (max-height: 720px) {
    .site-logo-blog {
        display: none;
    }
}

@media (min-width: 721px) and (max-width: 1080px) {
    .single-post .post-title {
        width: min(
            var(--width-reading),
            calc(100vw - (2 * (var(--menu-width) + var(--menu-right))) - 3rem)
        );
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;

        font-size: clamp(46px, 6.4vw, var(--text-size-post-title));
        text-align: center;
    }

    .plain-page .post-title {
        max-width: calc(
            100vw
            - (2 * var(--space-site-x))
            - var(--menu-width)
            - var(--menu-right)
            - 3rem
        );

        font-size: clamp(36px, 5.3vw, var(--text-size-page-title));
    }
}
@media (min-width: 721px) and (max-width: 920px) {
    .post-list .post-title {
        font-size: clamp(38px, 5.4vw, var(--text-size-list-title));
    }

    .post-list .post-date {
        font-size: clamp(21px, 2.8vw, var(--text-size-list-date));
    }
}


/* ============================================================
   18. RESPONSIVE — PHONE
   ============================================================ */

@media (max-width: 720px) {
    .site-topbar {
        display: block;
        padding: 1.25rem var(--space-site-x) 0;
        text-align: center;
    }

    .site-mark,
    .site-directory {
        position: static;
    }

    .site-mark {
        width: 100%;
    }

    .site-mark a {
        width: 100%;
    }

    .site-logo-image {
        width: var(--logo-mobile-width);
        max-width: 100%;
        height: auto;
        margin: 0 auto;
    }

    .site-directory {
        width: min(100%, 520px);
        margin: 1rem auto 0;

        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: var(--menu-line-height);
        column-gap: 0.45rem;
        row-gap: 0.35rem;

        font-size: 13px;
        letter-spacing: 0.075em;
    }

    .site-directory a {
        width: auto;
        height: var(--menu-line-height);
        padding: 0 0.25rem;
    }

    .site-directory a,
    .site-directory a:hover,
    .site-directory a:focus-visible,
    .site-directory a.is-current {
        --menu-current-shift-y: 0px;
        --menu-hover-shift-y: 0px;
        --menu-counter-shift-y: 0px;
        --menu-scale-x: 1;
        --menu-scale-y: 1;

        transform: none;
    }

    .container {
        padding-top: 2.25rem;
    }

    .post-list .post-entry {
        margin-bottom: 3rem;
    }

    .post-list .post-date {
        margin-bottom: 0.5rem;
    }

    .post-list .post-title {
        font-size: clamp(32px, 8vw, 40px);
        hyphens: manual;
        overflow-wrap: break-word;
        word-break: normal;
    }

    .post-list .post-title a {
        -webkit-line-clamp: 4;
    }

    .media-preview {
        --media-preview-height: 118px;
    }

    .media-preview-item:nth-child(n + 3) {
        display: none;
    }

    .single-post .post-title {
        font-size: var(--text-size-mobile-post-title);
    }

    .plain-page .post-title {
        font-size: var(--text-size-mobile-page-title);
    }

    .post-content p {
        text-align: left;
        text-align-last: auto;
        hyphens: none;
    }

    .reader-mode-toggle,
    .back-top {
        display: none;
    }

    .site-footer {
        margin-top: 3.2rem;
    }

    .footer-inner {
        grid-template-columns: 1fr auto;
        row-gap: 1.4rem;
        column-gap: 1rem;
        align-items: center;
    }

    .subscribe-form {
        grid-column: 1 / -1;
        justify-self: stretch;
    }

    .footer-license {
        grid-column: 1;
        justify-self: start;
    }

    .footer-rss {
        grid-column: 2;
        justify-self: end;
    }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .site-directory a {
        transition: none;
        transform: none;
    }
}