/*
 * Proglas header skins, sticky mini logo and logo animations.
 * Driven by body classes set in inc/header-skins.php: pg-skin-<skin>, pg-anim-<anim>,
 * plus pg-stuck (tab bar pinned), pg-mini (small logo shown, large one hidden) and pg-intro (load animation running),
 * all set by assets/js/header-skins.js.
 * Ported from the header mockups (proglas-assistant docs/mockups/header-mockups.html), 20 October 2026.
 */

/* =========================== skin tokens =========================== */
/* "trenutni" keeps the theme's own variables; it only gets the sticky mini logo and animations. */
body.pg-skin-trenutni {
    --pg-paper: var(--theme-neutral);
    --pg-hero-bg: #fff;
    --pg-bar-bg: #fff;
    --pg-bar-line: var(--theme-primary);
    --pg-bar-line-w: 2px;
    --pg-bar-solid: #fff;
    --pg-logo-ink: #1e3a5f;
    --pg-mini-ink: #1e3a5f;
    --pg-logo-filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='logo-blue' color-interpolation-filters='sRGB'%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.882353' intercept='0.117647'/%3E%3CfeFuncG type='linear' slope='0.772549' intercept='0.227451'/%3E%3CfeFuncB type='linear' slope='0.627451' intercept='0.372549'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3C/svg%3E#logo-blue");
    --pg-mini-filter: var(--pg-logo-filter);
    --pg-rule: var(--theme-primary);
    --pg-rule-h: 2px;
    --pg-accent: var(--theme-primary);
    --pg-bar-shadow: 0 6px 18px -10px rgba(30, 58, 95, 0.35);
}

body.pg-skin-izvorni {
    --theme-primary: #111111;
    --theme-secondary: #333333;
    --theme-neutral: #f2f7fb;
    --theme-text: #111111;
    --theme-text-light: #4a4740;
    --theme-border: #111111;
    --theme-hover: #c8102e;
    --theme-accent: #c8102e;
    --theme-muted: #f3eed9;
    --theme-footer-bg: #0b0b0b;
    --pg-paper: #f2f7fb;
    --pg-paper-img: none;
    --pg-hero-bg: #ffffff;
    --pg-ink-soft: #4a4740;
    --pg-bar-bg: #0b0b0b;
    --pg-bar-line: #0b0b0b;
    --pg-bar-line-w: 1px;
    --pg-bar-solid: #0b0b0b;
    --pg-logo-ink: #0b0b0b;
    --pg-mini-ink: #e7e6e1;
    --pg-logo-filter: none;
    --pg-mini-filter: invert(1) contrast(1.15);
    --pg-tab-fg: #e7e6e1;
    --pg-tab-bg: transparent;
    --pg-tab-on-fg: #0b0b0b;
    --pg-tab-on-bg: #ffe14d;
    --pg-tab-hover-bg: #2a2a2a;
    --pg-tab-font: "Latin Modern Roman", Georgia, serif;
    --pg-tab-size: 13.5px;
    --pg-tab-weight: 700;
    --pg-tab-ls: 0.05em;
    --pg-tab-pad: 6px 11px;
    --pg-tab-gap: 4px;
    --pg-tab-radius: 0;
    --pg-rule: #111111;
    --pg-rule-h: 2px;
    --pg-accent: #c8102e;
    --pg-bar-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.6);
}

body.pg-skin-hartija {
    --theme-primary: #1b1711;
    --theme-secondary: #5b4f3a;
    --theme-neutral: #eadbb3;
    --theme-text: #1b1711;
    --theme-text-light: #5b4f3a;
    --theme-border: #1b1711;
    --theme-hover: #7a1f14;
    --theme-accent: #7a1f14;
    --theme-muted: #e3d3a8;
    --theme-footer-bg: #171412;
    --pg-paper: #eadbb3;
    --pg-paper-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .25 0 0 0 0 .18 0 0 0 0 .08 0 0 0 .14 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"), radial-gradient(ellipse at 50% -10%, #f7edcf 0%, #eddfb8 55%, #dcc894 100%);
    --pg-hero-bg: transparent;
    --pg-ink-soft: #5b4f3a;
    --pg-bar-bg: transparent;
    --pg-bar-line: transparent;
    --pg-bar-line-w: 1px;
    --pg-bar-solid: #eadbb3;
    --pg-logo-ink: #1b1711;
    --pg-mini-ink: #1b1711;
    --pg-logo-filter: none;
    --pg-mini-filter: none;
    --pg-tab-fg: #f5ebd2;
    --pg-tab-bg: #171412;
    --pg-tab-on-fg: #171412;
    --pg-tab-on-bg: #f7edcf;
    --pg-tab-hover-bg: #3a332c;
    --pg-tab-font: "Old Standard TT", "Latin Modern Roman", Georgia, serif;
    --pg-tab-size: 14px;
    --pg-tab-weight: 700;
    --pg-tab-ls: 0.05em;
    --pg-tab-pad: 7px 16px;
    --pg-tab-gap: 2px;
    --pg-tab-radius: 0;
    --pg-rule: #1b1711;
    --pg-rule-h: 1px;
    --pg-accent: #7a1f14;
    --pg-bar-shadow: 0 10px 24px -14px rgba(27, 23, 17, 0.6);
    --pg-font-body: "EB Garamond", "Latin Modern Roman", Georgia, serif;
}

body.pg-skin-samizdat {
    --theme-primary: #0b0b0b;
    --theme-secondary: #3b3b3b;
    --theme-neutral: #e7e6e1;
    --theme-text: #0b0b0b;
    --theme-text-light: #3b3b3b;
    --theme-border: #0b0b0b;
    --theme-hover: #c8102e;
    --theme-accent: #c8102e;
    --theme-muted: #dcdbd5;
    --theme-footer-bg: #0b0b0b;
    --pg-paper: #e7e6e1;
    --pg-paper-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"), radial-gradient(ellipse at 50% 40%, #edece7 0%, #e4e3dd 70%, #d6d5cf 100%);
    --pg-hero-bg: transparent;
    --pg-ink-soft: #3b3b3b;
    --pg-bar-bg: #0b0b0b;
    --pg-bar-line: #0b0b0b;
    --pg-bar-line-w: 1px;
    --pg-bar-solid: #0b0b0b;
    --pg-logo-ink: #0b0b0b;
    --pg-mini-ink: #e7e6e1;
    --pg-logo-filter: contrast(1.35);
    --pg-mini-filter: invert(1) contrast(1.2);
    --pg-tab-fg: #e7e6e1;
    --pg-tab-bg: transparent;
    --pg-tab-on-fg: #0b0b0b;
    --pg-tab-on-bg: #ffe14d;
    --pg-tab-hover-bg: #2a2a2a;
    --pg-tab-font: "Oswald", "Arial Narrow", sans-serif;
    --pg-tab-size: 15px;
    --pg-tab-weight: 600;
    --pg-tab-ls: 0.09em;
    --pg-tab-pad: 6px 14px;
    --pg-tab-gap: 6px;
    --pg-tab-radius: 0;
    --pg-rule: #0b0b0b;
    --pg-rule-h: 4px;
    --pg-accent: #c8102e;
    --pg-bar-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.6);
    --pg-font-body: "IBM Plex Sans", system-ui, sans-serif;
}

body.pg-skin-moderan {
    --theme-primary: #17181a;
    --theme-secondary: #4a4d55;
    --theme-neutral: #ffffff;
    --theme-text: #17181a;
    --theme-text-light: #6b6e76;
    --theme-border: #e6e7ea;
    --theme-hover: #c8102e;
    --theme-accent: #c8102e;
    --theme-muted: #f1f1f3;
    --theme-footer-bg: #17181a;
    --pg-paper: #ffffff;
    --pg-paper-img: none;
    --pg-hero-bg: #ffffff;
    --pg-ink-soft: #6b6e76;
    --pg-bar-bg: rgba(255, 255, 255, 0.84);
    --pg-bar-line: #e6e7ea;
    --pg-bar-line-w: 1px;
    --pg-bar-solid: #ffffff;
    --pg-logo-ink: #17181a;
    --pg-mini-ink: #17181a;
    --pg-logo-filter: none;
    --pg-mini-filter: none;
    --pg-tab-fg: #4a4d55;
    --pg-tab-bg: transparent;
    --pg-tab-on-fg: #ffffff;
    --pg-tab-on-bg: #17181a;
    --pg-tab-hover-bg: #f1f1f3;
    --pg-tab-font: "IBM Plex Sans", system-ui, sans-serif;
    --pg-tab-size: 12.5px;
    --pg-tab-weight: 600;
    --pg-tab-ls: 0.09em;
    --pg-tab-pad: 7px 14px;
    --pg-tab-gap: 2px;
    --pg-tab-radius: 999px;
    --pg-rule: #e6e7ea;
    --pg-rule-h: 1px;
    --pg-accent: #c8102e;
    --pg-bar-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.35);
    --pg-font-body: "IBM Plex Sans", system-ui, sans-serif;
}

body.pg-skin-noc {
    --theme-primary: #e9e6df;
    --theme-secondary: #a7a9b1;
    --theme-neutral: #141518;
    --theme-text: #e9e6df;
    --theme-text-light: #a7a9b1;
    --theme-border: #2a2d33;
    --theme-hover: #f3d36b;
    --theme-accent: #f3d36b;
    --theme-muted: #1c1e23;
    --theme-footer-bg: #0d0e11;
    --pg-paper: #141518;
    --pg-paper-img: radial-gradient(ellipse at 50% -20%, #24262c 0%, #141518 60%);
    --pg-hero-bg: transparent;
    --pg-ink-soft: #a7a9b1;
    --pg-bar-bg: rgba(20, 21, 24, 0.86);
    --pg-bar-line: #2a2d33;
    --pg-bar-line-w: 1px;
    --pg-bar-solid: #141518;
    --pg-logo-ink: #e9e6df;
    --pg-mini-ink: #e9e6df;
    --pg-logo-filter: invert(1) sepia(0.22) brightness(0.96);
    --pg-mini-filter: invert(1) sepia(0.22) brightness(0.96);
    --pg-tab-fg: #a7a9b1;
    --pg-tab-bg: transparent;
    --pg-tab-on-fg: #f3d36b;
    --pg-tab-on-bg: transparent;
    --pg-tab-hover-bg: rgba(255, 255, 255, 0.06);
    --pg-tab-font: "IBM Plex Sans", system-ui, sans-serif;
    --pg-tab-size: 12.5px;
    --pg-tab-weight: 500;
    --pg-tab-ls: 0.12em;
    --pg-tab-pad: 8px 12px;
    --pg-tab-gap: 6px;
    --pg-tab-radius: 0;
    --pg-rule: #34373f;
    --pg-rule-h: 1px;
    --pg-accent: #f3d36b;
    --pg-bar-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.9);
    --pg-font-body: "EB Garamond", "Latin Modern Roman", Georgia, serif;
    color-scheme: dark;
}

/* =========================== page and hero =========================== */
body.site-body[class*="pg-skin-"]:not(.pg-skin-trenutni) {
    background-color: var(--pg-paper);
    background-image: var(--pg-paper-img);
    color: var(--theme-text);
}
body.pg-skin-hartija,
body.pg-skin-samizdat,
body.pg-skin-moderan,
body.pg-skin-noc {
    font-family: var(--pg-font-body);
}

.site-header.pg-hero {
    position: relative;
    z-index: 201; /* above the pinned tab bar while the logo flies into it; the menu overlays start at 205 */
    background: var(--pg-hero-bg, #fff);
    perspective: 1000px;
    transform-style: preserve-3d;
}
/* while the logo flies, the header holds at the top (top set by header-skins.js) and the content scrolls under it */
body.pg-hold .site-header.pg-hero {
    position: sticky;
    top: 0;
}
body.pg-skin-hartija .site-header.pg-hero,
body.pg-skin-samizdat .site-header.pg-hero,
body.pg-skin-noc .site-header.pg-hero {
    background-color: var(--pg-paper);
    background-image: var(--pg-paper-img);
}

.pg-hero .header-logo-line {
    border-top-color: var(--pg-rule, var(--theme-primary));
    border-top-width: var(--pg-rule-h, 2px);
}
body.pg-skin-izvorni .pg-hero .header-logo-line,
body.pg-skin-hartija .pg-hero .header-logo-line,
body.pg-skin-moderan .pg-hero .header-logo-line {
    visibility: hidden;
}

.pg-hero-meta {
    display: none;
    width: 100%;
    max-width: min(96%, var(--layout-max-width));
    margin: 0 auto 0.9rem;
    text-align: center;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pg-ink-soft, var(--theme-text-light));
}
body.pg-skin-moderan .pg-hero-meta,
body.pg-skin-noc .pg-hero-meta {
    display: block;
}

.pg-stamp {
    display: none;
    position: absolute;
    right: clamp(12px, 6vw, 120px);
    top: clamp(10px, 3vw, 34px);
    transform: rotate(-7deg);
    border: 3px solid var(--pg-accent, #c8102e);
    color: var(--pg-accent, #c8102e);
    padding: 6px 12px;
    font: 600 13px/1.1 "Oswald", "Arial Narrow", sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.82;
    mix-blend-mode: multiply;
    border-radius: 3px;
    pointer-events: none;
    z-index: 2;
}
body.pg-skin-izvorni .pg-stamp,
body.pg-skin-samizdat .pg-stamp {
    display: block;
}
@media (max-width: 700px) {
    .pg-stamp {
        display: none !important;
    }
}

/* =========================== the logo, in two layers =========================== */
.pg-logo {
    display: block;
    text-decoration: none;
    color: inherit;
}
.site-logo-link.pg-logo-hero {
    display: block;
    flex: 0 0 auto;
    position: relative;
    width: min(400px, 72vw);
    max-width: 100%;
    transform-origin: 0 0;
    will-change: transform;
}
.pg-logo .logo-box {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 2.2164;
    filter: var(--pg-logo-filter, none);
}
.pg-logo-mini .logo-box {
    filter: var(--pg-mini-filter, var(--pg-logo-filter, none));
}
.pg-logo .logo-box--single {
    aspect-ratio: auto;
}
.pg-logo .l-full,
.pg-logo .custom-logo {
    display: block;
    width: 100%;
    height: auto;
    filter: none;
}
/* the theme tints every image inside .site-logo-link blue and caps its height; the layers are tinted via the box instead */
.site-logo-link.pg-logo .l-rest,
.site-logo-link.pg-logo .l-egg,
.site-logo-link.pg-logo .l-full,
.pg-logo .l-rest,
.pg-logo .l-egg {
    filter: none;
    max-height: none;
}
.pg-logo .l-rest {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.pg-logo .l-egg {
    position: absolute;
    left: 18.377%;
    top: 6.667%;
    width: 32.756%;
    height: 91.872%;
    display: block;
    transform-origin: 50% 50%;
}
.pg-logo-hero .l-egg,
.pg-logo-hero .l-rest {
    will-change: transform, opacity;
}

/* =========================== pinned bar and mini logo =========================== */
body[class*="pg-skin-"]:not(.pg-skin-trenutni) .primary-nav {
    background: var(--pg-bar-bg);
    border-bottom: var(--pg-bar-line-w, 1px) solid var(--pg-bar-line);
    transition: box-shadow 0.3s, background-color 0.3s;
}
body.pg-skin-moderan .primary-nav,
body.pg-skin-noc .primary-nav {
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
}
body.pg-stuck .primary-nav {
    box-shadow: var(--pg-bar-shadow, none);
}
body.pg-skin-hartija.pg-stuck .primary-nav {
    background-color: #eadbb3;
    background-image: var(--pg-paper-img);
    border-bottom: 2px solid #1b1711;
}
@media (max-width: 1100px) {
    body.pg-skin-hartija .primary-nav {
        background-color: #eadbb3;
        background-image: var(--pg-paper-img);
    }
}

.primary-nav .pg-logo-mini {
    position: absolute;
    left: max(1rem, 2%);
    top: 50%;
    translate: 0 -50%;
    width: 96px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s;
    z-index: 3;
}
body.pg-mini .primary-nav .pg-logo-mini {
    visibility: visible;
    opacity: 1;
}
body.pg-mini .pg-logo-hero {
    visibility: hidden;
}
/* keep the centred menu clear of the small logo while the bar is pinned */
@media (min-width: 1101px) {
    .primary-nav .primary-menu-wrap {
        box-sizing: border-box;
        transition: padding 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    }
    body.pg-mini .primary-nav .primary-menu-wrap {
        padding-left: 124px;
    }
}
/* small laptops and landscape tablets: compact tabs so the eight items stay on one line next to the small logo.
   Selectors carry body.site-body + .primary-nav to outrank the generic skin rules below. */
@media (min-width: 1101px) and (max-width: 1300px) {
    body.pg-mini .primary-nav .primary-menu-wrap {
        padding-left: 100px;
    }
    .primary-nav .pg-logo-mini {
        width: 84px;
    }
    body.site-body.pg-skin-izvorni .primary-nav .primary-menu a,
    body.site-body.pg-skin-hartija .primary-nav .primary-menu a,
    body.site-body.pg-skin-samizdat .primary-nav .primary-menu a {
        font-size: 12px;
        letter-spacing: 0.02em;
        padding: 6px 8px;
    }
    body.site-body.pg-skin-izvorni .primary-nav .primary-menu,
    body.site-body.pg-skin-hartija .primary-nav .primary-menu,
    body.site-body.pg-skin-samizdat .primary-nav .primary-menu {
        gap: 3px;
    }
}
@media (min-width: 1101px) and (max-width: 1250px) {
    body.pg-mini .primary-nav .primary-menu-wrap {
        padding-left: 90px;
    }
    .primary-nav .pg-logo-mini {
        width: 74px;
    }
    body.site-body.pg-skin-izvorni .primary-nav .primary-menu a,
    body.site-body.pg-skin-hartija .primary-nav .primary-menu a,
    body.site-body.pg-skin-samizdat .primary-nav .primary-menu a {
        font-size: 11.5px;
        letter-spacing: 0.01em;
        padding: 6px 7px;
    }
    body.site-body.pg-skin-izvorni .primary-nav .primary-menu,
    body.site-body.pg-skin-hartija .primary-nav .primary-menu,
    body.site-body.pg-skin-samizdat .primary-nav .primary-menu {
        gap: 2px;
        padding-inline: 0.5rem;
    }
}

/* mobile toggles on a dark bar */
body.pg-skin-izvorni .menu-toggle,
body.pg-skin-izvorni .archive-nav-toggle,
body.pg-skin-samizdat .menu-toggle,
body.pg-skin-samizdat .archive-nav-toggle,
body.pg-skin-noc .menu-toggle,
body.pg-skin-noc .archive-nav-toggle {
    color: var(--pg-tab-fg);
}

/* =========================== desktop tabs =========================== */
body[class*="pg-skin-"]:not(.pg-skin-trenutni) .primary-menu {
    gap: var(--pg-tab-gap);
    padding: 0.5rem 1rem;
}
body[class*="pg-skin-"]:not(.pg-skin-trenutni) .primary-menu a {
    font-family: var(--pg-tab-font);
    font-size: var(--pg-tab-size);
    font-weight: var(--pg-tab-weight);
    letter-spacing: var(--pg-tab-ls);
    color: var(--pg-tab-fg);
    background: var(--pg-tab-bg);
    padding: var(--pg-tab-pad);
    border-radius: var(--pg-tab-radius);
    border-bottom: 0;
    transition: background-color 0.2s, color 0.2s;
}
body[class*="pg-skin-"]:not(.pg-skin-trenutni) .primary-menu a:hover,
body[class*="pg-skin-"]:not(.pg-skin-trenutni) .primary-menu a:focus-visible {
    background: var(--pg-tab-hover-bg);
    color: var(--pg-tab-fg);
}
body[class*="pg-skin-"]:not(.pg-skin-trenutni) .primary-menu .current-menu-item > a,
body[class*="pg-skin-"]:not(.pg-skin-trenutni) .primary-menu .current_page_item > a,
body[class*="pg-skin-"]:not(.pg-skin-trenutni) .primary-menu .current-menu-ancestor > a {
    color: var(--pg-tab-on-fg);
    background: var(--pg-tab-on-bg);
}
body.pg-skin-noc .primary-menu .current-menu-item > a,
body.pg-skin-noc .primary-menu .current_page_item > a {
    box-shadow: inset 0 -2px 0 currentColor;
}
body.pg-skin-izvorni .primary-menu .current-menu-item > a,
body.pg-skin-samizdat .primary-menu .current-menu-item > a {
    box-shadow: 4px 4px 0 rgba(255, 225, 77, 0.2);
}
/* the mobile sheet keeps readable colours on dark skins */
@media (max-width: 1100px) {
    body[class*="pg-skin-"]:not(.pg-skin-trenutni) .primary-menu-sheet .primary-menu a {
        color: var(--theme-text);
        background: transparent;
        font-family: inherit;
        letter-spacing: 0.06em;
    }
    body.pg-skin-izvorni .primary-menu-sheet .primary-menu .current-menu-item > a,
    body.pg-skin-samizdat .primary-menu-sheet .primary-menu .current-menu-item > a {
        background: var(--pg-tab-on-bg);
        color: var(--pg-tab-on-fg);
    }
    body.pg-skin-noc .primary-menu-sheet,
    body.pg-skin-noc .archive-menu-sheet {
        background: #1c1e23;
        color: var(--theme-text);
    }
}

/* =========================== mini logo entrances =========================== */
body.pg-anim-hatch.pg-mini .pg-logo-mini {
    animation: pgPopIn 0.62s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
body.pg-anim-flip.pg-mini .pg-logo-mini {
    animation: pgFlipIn 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    transform-origin: 50% 100%;
}
body.pg-anim-roll .pg-logo-mini .l-rest,
body.pg-anim-splat .pg-logo-mini .l-rest {
    opacity: 0;
    transition: opacity 0.45s 0.06s ease-out;
}
body.pg-anim-splat .pg-logo-mini .l-rest {
    transition-delay: 0.3s;
}
body.pg-anim-roll.pg-mini .pg-logo-mini .l-rest,
body.pg-anim-splat.pg-mini .pg-logo-mini .l-rest {
    opacity: 1;
}
body.pg-anim-roll.pg-mini .pg-logo-mini .l-egg {
    animation: pgSettle 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) both;
    transform-origin: 50% 90%;
}
body.pg-anim-splat.pg-mini .pg-logo-mini .l-egg {
    animation: pgEggSplatMini 0.55s both;
    transform-origin: 50% 50%;
}
body.pg-anim-splat.pg-mini .pg-logo-mini .splat circle {
    animation: pgDrop 0.5s 0.06s cubic-bezier(0.1, 0.6, 0.3, 1) forwards;
}

/* =========================== splat: whole egg and droplets =========================== */
.whole-egg {
    position: absolute;
    left: calc(18.377% + 32.756% / 2);
    top: calc(6.667% + 91.872% / 2);
    width: calc(32.756% * 1.3);
    aspect-ratio: 100 / 127;
    translate: -50% -50%;
    opacity: 0;
    pointer-events: none;
    overflow: visible;
    transform-origin: 50% 50%;
    will-change: transform, opacity;
    z-index: 2;
}
.whole-egg .we-body {
    fill: var(--pg-paper, #fff);
    transition: fill 0.25s;
}
.whole-egg .we-ink {
    fill: var(--pg-logo-ink, #111);
    fill-rule: evenodd;
    transition: fill 0.25s;
}
.whole-egg .we-hi path {
    fill: none;
    stroke: var(--pg-logo-ink, #111);
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.25s;
}
.whole-egg.over-bar .we-body {
    fill: var(--pg-bar-solid, #fff);
}
.whole-egg.over-bar .we-ink {
    fill: var(--pg-mini-ink, #111);
}
.whole-egg.over-bar .we-hi path {
    stroke: var(--pg-mini-ink, #111);
}
.splat {
    position: absolute;
    left: 18.377%;
    top: 6.667%;
    width: 32.756%;
    height: 91.872%;
    overflow: visible;
    pointer-events: none;
}
.splat circle {
    fill: #242224;
    opacity: 0;
    transform-origin: 50px 50px;
}
body.pg-anim-splat.pg-intro .whole-egg {
    animation: pgWeFly 1.4s forwards;
}
body.pg-anim-splat.pg-intro .pg-logo-hero .l-egg {
    animation: pgEggSplat 1.4s forwards;
}
body.pg-anim-splat.pg-intro .pg-logo-hero .l-rest {
    animation: pgShake 0.32s 1.02s;
}
body.pg-anim-splat.pg-intro .pg-logo-hero .splat circle {
    animation: pgDrop 0.6s 1s cubic-bezier(0.1, 0.6, 0.3, 1) forwards;
}

@keyframes pgPopIn {
    0% { transform: scale(0.25) rotate(-14deg); opacity: 0; }
    55% { transform: scale(1.12) rotate(5deg); opacity: 1; }
    80% { transform: scale(0.96) rotate(-2deg); }
    100% { transform: scale(1) rotate(0); }
}
@keyframes pgFlipIn {
    0% { transform: perspective(500px) rotateX(90deg); opacity: 0; }
    100% { transform: perspective(500px) rotateX(0); opacity: 1; }
}
@keyframes pgSettle {
    0% { transform: scale(1.18); }
    60% { transform: scale(0.94); }
    100% { transform: scale(1); }
}
@keyframes pgWeFly {
    0% { opacity: 0; transform: translate(-6vw, -10vh) rotate(-230deg) scale(3.2); }
    6% { opacity: 1; transform: translate(-5vw, -9vh) rotate(-222deg) scale(3); }
    18% { opacity: 1; transform: translate(-4vw, -8vh) rotate(-206deg) scale(2.8); animation-timing-function: cubic-bezier(0.6, 0, 0.95, 0.45); }
    70% { opacity: 1; transform: translate(0, 0) rotate(8deg) scale(1.12); }
    75% { opacity: 1; transform: translate(0, 4%) rotate(0) scale(1.5, 0.55); }
    79% { opacity: 0; transform: translate(0, 4%) scale(1.7, 0.3); }
    100% { opacity: 0; transform: scale(1); }
}
@keyframes pgEggSplat {
    0%, 74% { opacity: 0; transform: scale(0.5); }
    79% { opacity: 1; transform: scale(1.28, 0.8); }
    86% { transform: scale(0.92, 1.08); }
    93% { transform: scale(1.04, 0.98); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes pgEggSplatMini {
    0% { opacity: 0; transform: scale(0.5); }
    22% { opacity: 1; transform: scale(1.3, 0.78); }
    52% { transform: scale(0.92, 1.08); }
    78% { transform: scale(1.04, 0.98); }
    100% { transform: scale(1); }
}
@keyframes pgDrop {
    0% { opacity: 1; transform: translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.25); }
}
@keyframes pgShake {
    0%, 100% { translate: 0 0; }
    20% { translate: 3px 2px; }
    40% { translate: -3px -1px; }
    60% { translate: 2px -2px; }
    80% { translate: -1px 1px; }
}

@media (prefers-reduced-motion: reduce) {
    .pg-logo-mini,
    .pg-logo-mini *,
    .whole-egg,
    .pg-logo-hero .l-egg,
    .pg-logo-hero .l-rest,
    .splat circle {
        animation: none !important;
    }
    .primary-nav .primary-menu-wrap,
    .primary-nav .pg-logo-mini {
        transition: none;
    }
}

/* =========================== logged-in editors: clear the WordPress admin bar =========================== */
/* The admin bar is fixed at the top (32px, 46px under 783px, and it scrolls away under 601px), so the pinned tab bar
   and the sticky sidebars sit below it instead of underneath it. header-skins.js reads the bar's computed top. */
body.admin-bar .primary-nav {
    top: 32px;
}
body.admin-bar .site-nav-sidebar,
body.admin-bar .social-aside {
    top: calc(var(--sticky-nav-offset) + 32px);
    max-height: calc(100vh - var(--sticky-nav-offset) - 32px - 1rem);
}
@media (max-width: 782px) {
    body.admin-bar .primary-nav {
        top: 46px;
    }
    body.admin-bar .site-nav-sidebar,
    body.admin-bar .social-aside {
        top: calc(var(--sticky-nav-offset) + 46px);
        max-height: calc(100vh - var(--sticky-nav-offset) - 46px - 1rem);
    }
}
@media (max-width: 600px) {
    body.admin-bar .primary-nav {
        top: 0;
    }
    body.admin-bar .site-nav-sidebar,
    body.admin-bar .social-aside {
        top: var(--sticky-nav-offset);
        max-height: calc(100vh - var(--sticky-nav-offset) - 1rem);
    }
}

/* Keep the small navigation on a page opened from the already collapsed header. */
body.pg-carried-mini .site-header.pg-hero {
    display: none;
}