/*!
Theme Name: PIF Magazine New
Theme URI: https://pifmagazine.com
Author: Nemanja Janjic
Author URI: https://pifmagazine.com
Description: A custom, mobile-first WordPress magazine theme built with HTML5, CSS3, Bootstrap 5 and ACF blocks.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pifmagazine
Tags: magazine, blog, custom-colors, custom-menu, featured-images, block-styles, translation-ready
*/

/* =============================================================
   This is the theme's main stylesheet — plain CSS3, no build step.
   Bootstrap loads BEFORE this file, so the rules here override it.
   Edit colors via the CSS variables in :root below.
   Breakpoints match Bootstrap: sm 576, md 768, lg 992, xl 1200.
   ============================================================= */

/* ---------- 1. Design tokens ---------- */
:root {

    /* Font families */
    --font-headline: "Bebas Neue", "Arial Narrow", Impact, sans-serif; /* big bold condensed headlines */
    --font-body: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* UI + body text */
    --font-reading: "Newsreader", Georgia, "Times New Roman", serif; /* long-form article text */
    --font-title: "Libre Caslon Text", "Playfair Display", Georgia, serif; /* elegant headings */
    --font-quote: "Instrument Serif", Georgia, "Times New Roman", serif; /* accents, quotes, italics */
    scroll-behavior: smooth;
    --paper: #ffffff;
    --surface: #ffffff;
    --ink: #112444;
    --muted: #5a667c;
    --faint: #97a3b6;
    --rule: #e8edf4;
    --rule-strong: #d2dbe8;
    --accent: #ec1878;
    --accent-ink: #ffffff;
    --blue: #0a4c92;
    --teal: #1fb6c9;

    /* --- NEW: named colors for values already used across the theme --- */
    --ink-900: #0c1a33;   /* dark card fallback (latest/special/related media) */
    --ink-950: #0b2545;   /* darker fallback (top-article/listing media)       */
    --glass-bg: rgba(15, 20, 30, .82); /* frosted slider controls              */
    --overlay-ink: 7, 18, 32;          /* rgba base for legibility gradients    */
    --on-dark: #fff;                   /* text/icons over dark media            */
    --on-blue: #eaf2fb;                /* light text over the blue cards        */

    /* --- NEW: type scale (maps the ~30 ad-hoc sizes onto steps) --- */
    --fs-3xs: 10px;
    --fs-2xs: 11px;
    --fs-xs: 12px;
    --fs-sm: 13px;
    --fs-md: 14px;
    --fs-base: 16px;
    --fs-lg: 18px;
    --fs-xl: 21px;
    --fs-2xl: 22px;
    --fs-h-section: clamp(24px, 2.4vw, 33px); /* .pifmag-section__title       */
    --fs-h-block: clamp(28px, 3.4vw, 42px);   /* block section titles         */

    /* --- NEW: spacing scale (4px base) --- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-7: 28px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;

    /* --- NEW: radius / shadow / z / motion --- */
    --r-xs: 3px;
    --r-sm: 4px;
    --r-md: 6px;
    --r-lg: 14px;
    --r-pill: 999px;
    --shadow-card: 0 4px 14px -6px rgba(0, 0, 0, .5);
    --z-header: 50;
    --z-modal: 1080;
    --ease: .2s ease;
    --ease-slow: .35s ease;
}

/* ---------- 2. Base ---------- */
body {
    font-family: var(--font-body);
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-headline);
}

h1 {
    font-weight: 700;
    letter-spacing: 1.2px;
    font-size: clamp(40px, 6vw, 78px);
    line-height: 1;
    margin: 0 0 22px;
    color: var(--ink);
    text-wrap: balance;
}

img,
figure img {
    max-width: 100%;
    height: auto;
}

/* Accessible skip link, hidden until focused (pairs with .visually-hidden-focusable). */
.skip-link {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 1080;
}

/* object-fit helper (used on featured images). */
.object-fit-cover {
    object-fit: cover;
}

/* WordPress editor alignment helpers. */
.aligncenter {
    display: block;
    margin-inline: auto;
}

.wp-caption-text,
.gallery-caption {
    font-size: 0.875rem;
    /* NOTE: previously `color: var(--pif-muted)` — an undefined var (no-op on
       live). Removed to keep rendering identical. To enable the intended muted
       caption color, add `color: var(--muted);` (see _refactor/03-IMPROVEMENTS). */
}

/* ---------- 3. Typography ---------- */
.entry-title {
    line-height: 1.15;
}

.entry-content {
    font-size: 1.0625rem; /* 17px — comfortable on mobile */
}

.entry-content p,
.entry-content ul,
.entry-content ol,
.entry-content blockquote {
    margin-bottom: 1.25rem;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.entry-content a {
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

.entry-content blockquote {
    padding-left: 1.25rem;
    /* NOTE: previously `border-left: 4px solid var(--pif-primary)` and
       `color: var(--pif-dark)` — undefined vars, no-ops on live (blockquotes
       show no accent border there). Removed to keep rendering identical. To
       enable the intended styling: border-left: 4px solid var(--accent);
       color: var(--ink); (see _refactor/03-IMPROVEMENTS). */
    font-style: italic;
}

.single-entry .entry-content {
    max-width: 70ch;
}

@media (min-width: 768px) {
    .entry-content {
        font-size: 1.125rem; /* 18px on tablet and up */
    }
}

header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: saturate(1.1) blur(8px);
    border-bottom: 1px solid var(--rule);
}

header .container {
    gap: 28px;
}

.topbar__divider {
    width: 1px;
    height: 24px;
    background: var(--rule-strong);
}

.navbar {
    padding-block: 5px;

}

.site-header .custom-logo {
    max-height: 60px;
    height: 60px;
    width: auto;
}

#menu-primary-menu {
    display: flex;
    align-items: center;
    gap: 26px;
}

.nav-link {
    display: block;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .02em;
    white-space: nowrap;
    color: var(--ink);
    opacity: .82;
    padding: 4px 0;
    text-decoration: none;
    background: 0 0;
    border: 0;
    position: relative;
    transition: .25s ease;
}

.nav-link:hover {
    opacity: 1;
}

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding: 4px 0;
    }

    .navbar-expand-lg .navbar-nav .nav-link::after {
        content: "";
        position: absolute;
        display: block;
        left: 0;
        right: 100%;
        bottom: -2px;
        height: 1px;
        background: var(--accent);
        transition: right .25s ease;
    }

    .navbar-expand-lg .navbar-nav .nav-link.active::after {
        right: 0;
    }

    .navbar-expand-lg .navbar-nav .nav-link:hover::after {
        right: 0;
    }
}

.social-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.social-nav a {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--muted);
    transition: background .2s, color .2s;
}

.social-nav a:hover {
    background: var(--accent);
    color: #fff;
}

/* Block-specific styles live next to each block:
   blocks/<name>/<name>.css — auto-enqueued via block.json "style". */
.modal {
    background: rgba(6, 15, 32, .62);
    backdrop-filter: blur(3px);
}

a,
a > * {
    cursor: pointer;
    transition: color .2s, transform .35s;
}

.pifmag-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 34px;
    max-width: 1124px;
    margin-inline: auto;
}

.pifmag-section__title {
    font-family: var(--font-headline);
    font-size: clamp(24px, 2.4vw, 33px);
    margin: 0;
    line-height: 1.05;
    font-style: italic;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--ink);
    position: relative;
    padding-left: 18px;
}

.pifmag-section__title span {
    color: var(--accent);
}

.pifmag-section__title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    border-radius: 2px;
    background: var(--teal, var(--accent));
}

.pifmag-section__button a {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    display: inline-flex;
    gap: 7px;
    align-items: center;
    white-space: nowrap;
    text-decoration-line: none;
}

.pifmag-section__button a:hover {
    color: var(--accent);
}

@media (max-width: 575.8px) {
    .pifmag-section__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

section {
    padding-block: 40px;
}

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1240px;
    }
}

footer {
    margin-top: auto;
    background: var(--paper);
    border-top: 1px solid var(--rule);
    padding-block: clamp(44px, 5vw, 68px) 32px;
}

footer #top-row {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr;
    gap: 40px;
}

@media (max-width: 991.8px) {
    footer #top-row {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
}

@media (max-width: 991.8px) {
    .footer-logo-col {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575.8px) {
    footer #top-row {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }
}

@media (max-width: 575.8px) {
    .footer-logo-col {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

.footer-logo-col .wp-block-image {
    margin-bottom: 0;
}

.footer-logo-col img,
.footer-logo-col .wp-block-image img {
    height: 72px;
    width: auto;
    margin-bottom: 16px;

}

.footer-logo-col ul {
    display: flex;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-logo-col ul a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--rule-strong);
    display: grid;
    place-items: center;
    transition: background .2s, color .2s, border-color .2s;
    color: rgb(17, 36, 68);
}

.footer-logo-col ul a:hover {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}

.footer-nav-col .widget-title {
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--faint);
    margin: 0 0 16px;
    font-weight: 600;
}

.footer-nav-col ul {
    list-style: none;
    padding: 0;
    margin: 0;

    display: flex;
    flex-direction: column;
    gap: 11px;
}

.footer-nav-col ul a {
    font-size: 14.5px;
    color: var(--ink);
    opacity: .82;
    text-decoration: none;
}

.footer-nav-col ul a:hover {
    opacity: 1;
    color: var(--accent);
}

@media (max-width: 575.8px) {
    .footer-nav-col ul li {
        text-align: center;
    }
}

#bottom-container {
    margin-top: 44px;
    padding-top: 24px;
    border-top: 1px solid var(--rule);
}

#menu-footer-menu li a {
    margin: 0;
    font-size: 13px;
    color: var(--faint);
    text-decoration: none;
    opacity: 1;
}

#bottom-row {
    row-gap: 20px;
}

#menu-footer-menu li a:hover {
    color: var(--accent);
}

footer p.site-info {
    margin: 0;
    font-size: 13px;
    color: var(--faint);
    text-align: right;
}

@media screen and (max-width: 767.8px) {
    #menu-footer-menu li,
    footer p.site-info {
        width: 100%;
        text-align: center;
    }

    #menu-footer-menu li a {
        text-align: center;
    }
}

@media (min-width: 1200px) {
    .container-xl {
        max-width: 1096px;
    }
}


.pifmag-post-section__head {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 30px;
    padding-top: clamp(36px, 5vw, 72px);
}

.post-title {
    font-family: var(--font-headline);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(34px, 4.4vw, 58px);
    line-height: 1.03;
    letter-spacing: -0.02em;
    margin: 0 0 22px;
    text-wrap: balance;
    width: 100%;
    text-align: center;
}

.pifmag-post-section__eyebrow {
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: var(--accent);
    justify-content: center;
    margin-bottom: 18px;
    width: 100%;
    text-align: center;
}

/* Merged from two identical selectors; dropped `font-family: var(--font-display)`
   (undefined var, no-op on live). */
.pifmag-post-section__head .excerpt {
    font-size: clamp(18px, 1.6vw, 22px);
    line-height: 1.5;
    color: var(--muted);
    margin: 0 auto 28px;
    max-width: 60ch;
    text-align: center;
}

.post-thumbnail {
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.post-content-row {
    align-items: start;
    margin: 0 auto;
    grid-template-columns: 1fr;


}

@media (min-width: 991.8px) {
    .post-content-row {
        display: grid;
        gap: clamp(28px, 4vw, 64px);
        max-width: 1060px;
        grid-template-columns: minmax(0, 680px) 300px;
    }
}

.article__hero-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin: 12px 0 28px;
    flex-wrap: wrap;
}

.article__credit {
    font-family: var(--font-reading);
    font-style: italic;
    font-size: 13px;
    color: var(--faint);
    margin: 0;
    text-align: left;
    flex: 1 1 280px;
}

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

.article-share__label {
    font-family: var(--font-body);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--faint);
}

.article-share a {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--muted);
    border: 1px solid var(--rule-strong);
    transition: background .2s, color .2s, border-color .2s, transform .15s;
    position: relative;
}

.article-share a:hover {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
    transform: translateY(-1px);
}

.copy-text {
    position: absolute;
    bottom: -28px;
    right: 0;
    font-family: var(--font-body);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    background: var(--accent);
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
    z-index: -99;
    opacity: 0;
}

.is-copied .copy-text {
    opacity: 1;
    z-index: 99;
}

.post-content-wrapper .entry-content > p:first-of-type::first-letter {
    font-size: 4.6em;
    float: left;
    line-height: .74;
    padding: 4px 12px 0 0;
    font-weight: 600;
    color: var(--accent);
    font-family: var(--font-reading);
}

.post-content-wrapper .entry-content p {
    font-family: var(--font-reading);
    font-size: 19px;
    line-height: 1.7;
    margin: 0 0 26px;
}

.post-content-wrapper .entry-content p.pifmag-keypoints__title {
    margin-bottom: 0;
}

.post-content-wrapper .entry-content h2 {
    font-family: var(--font-reading);
    font-weight: 600;
    font-size: 32px;
    margin: 44px 0 14px;
    letter-spacing: -0.01em;
}

.post-content-wrapper .entry-content h3 {
    font-family: var(--font-reading);
    font-weight: 600;
    font-size: 26px;
    margin: 44px 0 14px;
    letter-spacing: -0.01em;
}

.post-aside-inner form {
    background: var(--blue);
    color: #eaf2fb;
    padding: 18px 20px 1px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 14px;
    overflow: hidden;
}

.post-aside-inner form h2 {
    color: var(--teal);
    margin-bottom: 8px;
    font-size: 12.5px;
    line-height: 1.45;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-family: var(--font-body);
}

.post-aside-inner form h3 {
    font-family: var(--font-reading);
    font-style: italic;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.18;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
    color: #fff;
}

.post-aside-inner form p {
    margin: 0 0 12px;
    color: rgba(234, 242, 251, .78);
    font-size: 12.5px;
    line-height: 1.45;
}

.post-aside-inner .gform-theme--foundation .gform_fields {
    gap: 0;
}

/* Form becomes a single full-width grid */
.post-aside-inner #gform_1 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

/* Flatten wrappers so their children join the form grid */
.post-aside-inner #gform_1 .gform-body,
.post-aside-inner #gform_1 .gform_fields {
    display: contents;
}

/* Every grid item spans the full width */
.post-aside-inner #gform_1 .gfield,
.post-aside-inner #gform_1 .gform_footer {
    width: 100%;
}

.post-aside-inner #gform_1 .gform_footer {
    margin-top: 8px;
}

/* Every inner element fills its container */
.post-aside-inner #gform_1 .ginput_container,
.post-aside-inner #gform_1 input[type="email"],
.post-aside-inner #gform_1 .gform_button {
    width: 100%;
    box-sizing: border-box;
}

/* Order: heading, email, submit, then privacy text last */
.post-aside-inner #gform_1 #field_1_3 {
    order: 1;
}

/* Newsletter heading */
.post-aside-inner #gform_1 #field_1_2 {
    order: 2;
}

/* Email input */
.post-aside-inner #gform_1 .gform_footer {
    order: 3;
}

/* Submit button */
.post-aside-inner #gform_1 #field_1_4 {
    order: 4;
}

/* Privacy text — under submit */
.post-aside-inner #gform_1 .gfield--width-full {
    grid-column: 1 !important;
}

.post-aside-inner form input[type="email"] {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .28);
    min-width: 0;
    flex: 1;
    padding: 9px 13px;
    border-radius: 999px;
    font-size: 13px;
    height: 36px;
    color: var(--paper);
    outline: none;
}

.post-aside-inner form input[type="email"]::placeholder {
    color: rgba(234, 242, 251, .6);
}

.post-aside-inner form input[type="email"]:focus {
    border-color: var(--teal);
    background: rgba(255, 255, 255, .16);
    outline: none;
}

.post-aside-inner #gform_submit_button_1,
.post-aside-inner form .button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: .02em;
    border-radius: 999px;
    cursor: pointer;
    transition: transform .15s, background .2s, color .2s;
    height: 36px;
    background: var(--accent);
    color: var(--accent-ink);
    width: 100%;
    border: none;
    outline: none;
    padding: 10px 16px;
    font-size: 13px;
}

#gform_submit_button_1:hover,
.post-aside-inner form .button:hover,
#gform_submit_button_1:focus,
.post-aside-inner form .button:focus {
    transform: translateY(-1px);
    outline: none;
    border: none;
}

.post-aside-inner #gform_1_validation_container {
    display: none;
}

.post-aside-inner #validation_message_1_2 {
    color: #fff;
    font-style: italic;
}

.post-aside {
    height: 100%;
}

.post-aside-inner {
    position: sticky;
    top: 92px;
    margin-inline: auto;
    max-width: 320px;

}

.widget-area.sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.gform-body a {
    color: rgba(234, 242, 251, .78);
    text-decoration: underline;
}

.gform-body a:hover {
    color: var(--teal);
}

.single-post .site-main {
    padding-bottom: clamp(36px, 5vw, 72px);
}

.span-pifmag-title-section__accent > span {
    font-style: italic;
    color: var(--accent);
    font-weight: 700;
    letter-spacing: 1px;
}

main {
    padding-bottom: clamp(28px, 4vw, 56px);
}

.search-form button[type="submit"] {
    align-items: center;
    gap: 9px;
    white-space: nowrap;
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .02em;
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
    cursor: pointer;
    transition: transform .15s, background .2s, color .2s;
    background: var(--accent);
    color: var(--accent-ink);
    width: 105px;
    border: none;
    outline: none;
}

.search-form input[type="search"] {
    background: rgba(255, 255, 255, .1);
    color: var(--ink);
    min-width: 0;
    flex: 1;
    padding: 13px 18px;
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
    font-size: 14.5px;
    height: 48px;
    color: var(--ink);
    outline: none;
    border: 1px solid rgba(17, 36, 68, .5);
}

.search-form input[type="search"]:focus {
    outline: none;
    box-shadow: none;
}

.single-container {
    max-width: 1060px;
    margin-inline: auto;
}

/* =============================================================
   UTILITIES & SHARED COMPONENTS  (refactor — see _refactor/02-NAMING-CONVENTION)
   Token-backed helper classes applied in markup. Utilities use !important so
   they reliably win when applied to an element (block CSS loads after this
   file). Component classes (eyebrow, etc.) are plain and replace the old
   per-block copies.
   ============================================================= */

/* ---- Text color utilities ---- */
.pifmag-t-ink { color: var(--ink) !important; }
.pifmag-t-muted { color: var(--muted) !important; }
.pifmag-t-faint { color: var(--faint) !important; }
.pifmag-t-paper { color: var(--paper) !important; }
.pifmag-t-accent { color: var(--accent) !important; }
.pifmag-t-accent-ink { color: var(--accent-ink) !important; }
.pifmag-t-blue { color: var(--blue) !important; }
.pifmag-t-teal { color: var(--teal) !important; }
.pifmag-t-on-dark { color: var(--on-dark) !important; }

/* ---- Background color utilities ---- */
.pifmag-bg-paper { background-color: var(--paper) !important; }
.pifmag-bg-ink { background-color: var(--ink) !important; }
.pifmag-bg-ink-900 { background-color: var(--ink-900) !important; }
.pifmag-bg-ink-950 { background-color: var(--ink-950) !important; }
.pifmag-bg-accent { background-color: var(--accent) !important; }
.pifmag-bg-blue { background-color: var(--blue) !important; }
.pifmag-bg-teal { background-color: var(--teal) !important; }
.pifmag-bg-rule { background-color: var(--rule) !important; }

/* ---- Font-family utilities ---- */
.pifmag-ff-headline { font-family: var(--font-headline) !important; }
.pifmag-ff-body { font-family: var(--font-body) !important; }
.pifmag-ff-reading { font-family: var(--font-reading) !important; }
.pifmag-ff-title { font-family: var(--font-title) !important; }
.pifmag-ff-quote { font-family: var(--font-quote) !important; }

/* ---- Font-size utilities (normalized scale) ---- */
.pifmag-fs-3xs { font-size: var(--fs-3xs) !important; } /* 10 */
.pifmag-fs-2xs { font-size: var(--fs-2xs) !important; } /* 11 */
.pifmag-fs-xs { font-size: var(--fs-xs) !important; }   /* 12 */
.pifmag-fs-sm { font-size: var(--fs-sm) !important; }   /* 13 */
.pifmag-fs-md { font-size: var(--fs-md) !important; }   /* 14 */
.pifmag-fs-base { font-size: var(--fs-base) !important; } /* 16 */
.pifmag-fs-lg { font-size: var(--fs-lg) !important; }   /* 18 */
.pifmag-fs-xl { font-size: var(--fs-xl) !important; }   /* 21 */
.pifmag-fs-2xl { font-size: var(--fs-2xl) !important; } /* 22 */

/* ---- Text color over dark/blue surfaces ---- */
.pifmag-t-on-blue { color: var(--on-blue) !important; }

/* ---- Padding utilities (spacing scale; all-sides / vertical / horizontal) ---- */
.pifmag-p-0 { padding: 0 !important; }
.pifmag-p-2 { padding: var(--sp-2) !important; }
.pifmag-p-3 { padding: var(--sp-3) !important; }
.pifmag-p-4 { padding: var(--sp-4) !important; }
.pifmag-p-5 { padding: var(--sp-5) !important; }
.pifmag-p-6 { padding: var(--sp-6) !important; }
.pifmag-py-2 { padding-block: var(--sp-2) !important; }
.pifmag-py-3 { padding-block: var(--sp-3) !important; }
.pifmag-py-4 { padding-block: var(--sp-4) !important; }
.pifmag-py-5 { padding-block: var(--sp-5) !important; }
.pifmag-py-6 { padding-block: var(--sp-6) !important; }
.pifmag-py-8 { padding-block: var(--sp-8) !important; }
.pifmag-py-10 { padding-block: var(--sp-10) !important; }
.pifmag-px-2 { padding-inline: var(--sp-2) !important; }
.pifmag-px-3 { padding-inline: var(--sp-3) !important; }
.pifmag-px-4 { padding-inline: var(--sp-4) !important; }
.pifmag-px-5 { padding-inline: var(--sp-5) !important; }
.pifmag-px-6 { padding-inline: var(--sp-6) !important; }

/* ---- Font-weight ---- */
.pifmag-fw-300 { font-weight: 300 !important; }
.pifmag-fw-500 { font-weight: 500 !important; }
.pifmag-fw-600 { font-weight: 600 !important; }
.pifmag-fw-700 { font-weight: 700 !important; }
.pifmag-fw-800 { font-weight: 800 !important; }

/* ---- Font-style ---- */
.pifmag-fst-italic { font-style: italic !important; }
.pifmag-fst-normal { font-style: normal !important; }

/* ---- Line-height (near-duplicates snap to nearest step) ---- */
.pifmag-lh-1 { line-height: 1 !important; }
.pifmag-lh-105 { line-height: 1.05 !important; }
.pifmag-lh-112 { line-height: 1.12 !important; }
.pifmag-lh-120 { line-height: 1.2 !important; }
.pifmag-lh-130 { line-height: 1.3 !important; }
.pifmag-lh-145 { line-height: 1.45 !important; }
.pifmag-lh-150 { line-height: 1.5 !important; }
.pifmag-lh-165 { line-height: 1.65 !important; }
.pifmag-lh-170 { line-height: 1.7 !important; }

/* ---- Letter-spacing (near-duplicates snap to nearest step) ---- */
.pifmag-ls-tighter { letter-spacing: -0.02em !important; }
.pifmag-ls-tight { letter-spacing: -0.01em !important; }
.pifmag-ls-normal { letter-spacing: 0 !important; }
.pifmag-ls-wide { letter-spacing: 0.02em !important; }
.pifmag-ls-wider { letter-spacing: 0.05em !important; }
.pifmag-ls-widest { letter-spacing: 0.14em !important; }
.pifmag-ls-hl { letter-spacing: 1.5px !important; }

/* ---- Text transform / align / wrap ---- */
.pifmag-tt-upper { text-transform: uppercase !important; }
.pifmag-tt-none { text-transform: none !important; }
.pifmag-ta-left { text-align: left !important; }
.pifmag-ta-center { text-align: center !important; }
.pifmag-ta-right { text-align: right !important; }
.pifmag-tw-balance { text-wrap: balance !important; }
.pifmag-tw-pretty { text-wrap: pretty !important; }

/* ---- Responsive heading sizes (one class per DISTINCT clamp, exact values) ---- */
.pifmag-fs-display { font-size: clamp(40px, 6vw, 78px) !important; }
.pifmag-fs-h1 { font-size: clamp(36px, 5.4vw, 62px) !important; }
.pifmag-fs-h1b { font-size: clamp(34px, 4.4vw, 62px) !important; }
.pifmag-fs-h1c { font-size: clamp(34px, 4.4vw, 58px) !important; }
.pifmag-fs-h1d { font-size: clamp(30px, 4vw, 52px) !important; }
.pifmag-fs-h2 { font-size: clamp(30px, 3.4vw, 46px) !important; }
.pifmag-fs-h2b { font-size: clamp(28px, 3.4vw, 46px) !important; }
.pifmag-fs-h2c { font-size: clamp(28px, 3.4vw, 42px) !important; }
.pifmag-fs-h3 { font-size: clamp(24px, 2.4vw, 34px) !important; }
.pifmag-fs-h3b { font-size: clamp(24px, 2.4vw, 33px) !important; }
.pifmag-fs-h3c { font-size: clamp(24px, 2.4vw, 32px) !important; }
.pifmag-fs-h4 { font-size: clamp(22px, 2.2vw, 31px) !important; }
.pifmag-fs-h4b { font-size: clamp(22px, 2.2vw, 30px) !important; }
.pifmag-fs-h5 { font-size: clamp(18px, 1.6vw, 23px) !important; }
.pifmag-fs-h5b { font-size: clamp(18px, 1.6vw, 22px) !important; }
.pifmag-fs-h6 { font-size: clamp(17px, 1.4vw, 20px) !important; }
.pifmag-fs-h6b { font-size: clamp(17px, 1.4vw, 19.5px) !important; }

/* ---- Margin utilities (spacing scale; directional; asymmetric stays in CSS) ---- */
.pifmag-m-0 { margin: 0 !important; }
.pifmag-mx-auto { margin-inline: auto !important; }
.pifmag-mt-2 { margin-top: var(--sp-2) !important; }
.pifmag-mt-3 { margin-top: var(--sp-3) !important; }
.pifmag-mt-4 { margin-top: var(--sp-4) !important; }
.pifmag-mt-6 { margin-top: var(--sp-6) !important; }
.pifmag-mt-8 { margin-top: var(--sp-8) !important; }
.pifmag-mb-0 { margin-bottom: 0 !important; }
.pifmag-mb-2 { margin-bottom: var(--sp-2) !important; }
.pifmag-mb-3 { margin-bottom: var(--sp-3) !important; }
.pifmag-mb-4 { margin-bottom: var(--sp-4) !important; }
.pifmag-mb-5 { margin-bottom: var(--sp-5) !important; }
.pifmag-mb-6 { margin-bottom: var(--sp-6) !important; }
.pifmag-mb-7 { margin-bottom: var(--sp-7) !important; }
.pifmag-mb-8 { margin-bottom: var(--sp-8) !important; }

/* ---- Eyebrow / kicker / location — unified small-caps label ----
   Replaces: .pifmag-post-section__eyebrow, .pifmag-*__eyebrow,
   .pifmag-lccard__pin-wrapper, .pifmag-top-article__location,
   .article-row__kicker, .kicker. Size normalized to 12px, tracking to .14em.
   Color comes from a .pifmag-t-* utility on the same element. */
.pifmag-eyebrow {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Inline variant with the location pin (◍) — flex row. */
.pifmag-eyebrow--inline {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

/* Centered variant (page/post/section heads). */
.pifmag-eyebrow--center {
    justify-content: center;
    width: 100%;
    text-align: center;
}

.pifmag-eyebrow__pin {
    color: var(--accent);
    line-height: 1;
}

/* Over dark media the whole eyebrow (incl. pin) is white — pin follows the
   label color instead of the accent default. */
.pifmag-eyebrow.pifmag-t-on-dark .pifmag-eyebrow__pin {
    color: inherit;
}