/* =================================================================
   fireweather.eu — Design System Foundation
   Derived from Apple design language
   Accent: Ember (#D94F2B) in place of Action Blue (#0066cc)
   Font stack: SF Pro on Apple devices; system-ui elsewhere
   ================================================================= */


/* ----- Reset ----- */

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


/* ----- Design Tokens ----- */

:root {

    /* Ember — the single interactive colour */
    --fw-ember: #D94F2B;
    --fw-ember-focus: #C04420;
    --fw-ember-on-dark: #FF6B47;

    /* Light surfaces */
    --fw-canvas: #ffffff;
    --fw-parchment: #f5f5f7;
    --fw-pearl: #fafafc;

    /* Dark surfaces */
    --fw-black: #000000;
    --fw-dark-1: #1d1d1f;
    /* hero tile */
    --fw-dark-2: #272729;
    /* secondary dark tile */
    --fw-dark-3: #2a2a2c;
    /* tertiary dark tile */
    --fw-dark-4: #252527;
    /* deepest dark tile */

    /* Text on light */
    --fw-ink: #1d1d1f;
    --fw-ink-80: #333333;
    --fw-ink-48: #7a7a7a;

    /* Text on dark */
    --fw-on-dark: #ffffff;
    --fw-on-dark-muted: #cccccc;

    /* Borders */
    --fw-divider: #f0f0f0;
    --fw-hairline: #e0e0e0;

    /* Translucent chip (circular controls over imagery) */
    --fw-chip: rgba(210, 210, 215, 0.64);

    /* Typography */
    --fw-font: system-ui, -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;

    /* Spacing scale */
    --fw-sp-xxs: 4px;
    --fw-sp-xs: 8px;
    --fw-sp-sm: 12px;
    --fw-sp-md: 17px;
    --fw-sp-lg: 24px;
    --fw-sp-xl: 32px;
    --fw-sp-xxl: 48px;
    --fw-sp-sec: 80px;

    /* Border-radius scale */
    --fw-r-xs: 5px;
    --fw-r-sm: 8px;
    --fw-r-md: 11px;
    --fw-r-lg: 18px;
    --fw-r-pill: 9999px;

    /* Global nav height */
    --fw-nav-h: 44px;
}


/* ----- Base ----- */

html {
    font-family: var(--fw-font);
    font-size: 17px;
    line-height: 1.47;
    letter-spacing: -0.374px;
    color: var(--fw-ink);
    background: var(--fw-canvas);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    min-height: 100vh;
}

a {
    color: var(--fw-ember);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

img {
    max-width: 100%;
    display: block;
}

ul,
ol {
    list-style: none;
}


/* ----- Global Navigation ----- */

.fw-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--fw-black);
    height: var(--fw-nav-h);
    display: flex;
    align-items: center;
    padding: 0 22px;
}

.fw-nav__logo {
    color: var(--fw-on-dark);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.2px;
    text-decoration: none;
    margin-right: auto;
    flex-shrink: 0;
}

.fw-nav__logo:hover {
    text-decoration: none;
}

.fw-nav__logo-accent {
    color: var(--fw-ember-on-dark);
}

.fw-nav__links {
    display: flex;
    gap: 22px;
    align-items: center;
}

.fw-nav__link {
    color: rgba(255, 255, 255, 0.85);
    font-size: 16px;
    letter-spacing: -0.12px;
    text-decoration: none;
    line-height: var(--fw-nav-h);
    white-space: nowrap;
    transition: color 0.15s;
}

.fw-nav__link:hover {
    color: var(--fw-on-dark);
    text-decoration: none;
}

.fw-nav__link--active {
    color: var(--fw-on-dark);
}

.fw-nav__lang {
    color: rgba(255, 255, 255, 0.45);
    font-size: 14px;
    letter-spacing: -0.12px;
    text-decoration: none;
    margin-left: 20px;
    transition: color 0.15s;
}

.fw-nav__lang:hover {
    color: var(--fw-on-dark);
    text-decoration: none;
}

.fw-nav__hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: var(--fw-on-dark);
    font-size: 20px;
    line-height: 1;
}


/* ----- Section Tiles ----- */

.fw-tile {
    width: 100%;
    padding: var(--fw-sp-sec) 40px;
}

.fw-tile--canvas {
    background: var(--fw-canvas);
    color: var(--fw-ink);
}

.fw-tile--parchment {
    background: var(--fw-parchment);
    color: var(--fw-ink);
}

.fw-tile--dark {
    background: var(--fw-dark-1);
    color: var(--fw-on-dark);
}

.fw-tile--dark-2 {
    background: var(--fw-dark-2);
    color: var(--fw-on-dark);
}

.fw-tile--dark-3 {
    background: var(--fw-dark-3);
    color: var(--fw-on-dark);
}

.fw-tile--dark-4 {
    background: var(--fw-dark-4);
    color: var(--fw-on-dark);
}

.fw-tile--center {
    text-align: center;
}

.fw-tile__inner {
    max-width: 980px;
    margin: 0 auto;
}

.fw-tile__inner--narrow {
    max-width: 700px;
    margin: 0 auto;
}


/* ----- Typography ----- */

.fw-hero {
    font-size: 56px;
    font-weight: 600;
    line-height: 1.07;
    letter-spacing: -0.28px;
}

.fw-display-lg {
    font-size: 40px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0;
}

.fw-display-md {
    font-size: 34px;
    font-weight: 600;
    line-height: 1.47;
    letter-spacing: -0.374px;
}

.fw-lead {
    font-size: 28px;
    font-weight: 400;
    line-height: 1.14;
}

.fw-lead-airy {
    font-size: 21px;
    font-weight: 300;
    line-height: 1.5;
}

.fw-tagline {
    font-size: 21px;
    font-weight: 600;
    line-height: 1.19;
    letter-spacing: 0.231px;
}

.fw-body {
    font-size: 17px;
    font-weight: 400;
    line-height: 1.47;
    letter-spacing: -0.374px;
}

.fw-body-strong {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.24;
    letter-spacing: -0.374px;
}

.fw-caption {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.43;
    letter-spacing: -0.224px;
}

.fw-caption-strong {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.29;
    letter-spacing: -0.224px;
}

/* Eyebrow label: uppercase category marker above a headline */
.fw-eyebrow {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--fw-ember);
}

.fw-eyebrow--muted {
    color: var(--fw-ink-48);
}

.fw-eyebrow--dark {
    color: var(--fw-ember-on-dark);
}


/* ----- Buttons ----- */

.fw-btn {
    display: inline-block;
    font-family: var(--fw-font);
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.374px;
    padding: 11px 22px;
    border-radius: var(--fw-r-pill);
    border: none;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.1s ease;
}

.fw-btn:hover {
    text-decoration: none;
}

.fw-btn:active {
    transform: scale(0.95);
}

/* Solid Ember pill — primary action */
.fw-btn--primary {
    background: var(--fw-ember);
    color: #ffffff;
}

.fw-btn--primary:hover {
    background: var(--fw-ember-focus);
}

/* Ghost pill on light surface */
.fw-btn--ghost {
    background: transparent;
    color: var(--fw-ember);
    border: 1px solid var(--fw-ember);
}

/* Ghost pill on dark tile */
.fw-btn--ghost-dark {
    background: transparent;
    color: var(--fw-ember-on-dark);
    border: 1px solid var(--fw-ember-on-dark);
}

.fw-btn-group {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.fw-btn-group--center {
    justify-content: center;
}


/* ----- Arrow text links ----- */

.fw-link-arrow {
    display: inline-block;
    color: var(--fw-ember);
    font-size: 17px;
    letter-spacing: -0.374px;
    text-decoration: none;
    transition: gap 0.15s;
}

.fw-link-arrow::after {
    content: ' →';
}

.fw-link-arrow:hover {
    text-decoration: none;
    color: var(--fw-ember-focus);
}

.fw-link-arrow--dark {
    color: var(--fw-ember-on-dark);
}

.fw-link-arrow--dark:hover {
    color: var(--fw-on-dark);
}


/* ----- Post card (used in listing pages) ----- */

.fw-card {
    background: var(--fw-canvas);
    border: 0.5px solid var(--fw-hairline);
    border-radius: var(--fw-r-lg);
    padding: var(--fw-sp-lg);
    display: flex;
    flex-direction: column;
    gap: var(--fw-sp-sm);
}

.fw-card__date {
    font-size: 12px;
    color: var(--fw-ink-48);
    letter-spacing: -0.12px;
}

.fw-card__title {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.24;
    letter-spacing: -0.374px;
    color: var(--fw-ink);
}

.fw-card__excerpt {
    font-size: 14px;
    line-height: 1.43;
    color: var(--fw-ink-80);
    letter-spacing: -0.224px;
    flex: 1;
}

.fw-card__link {
    font-size: 14px;
    color: var(--fw-ember);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: -0.224px;
}

.fw-card__link:hover {
    text-decoration: underline;
}

.fw-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--fw-sp-lg);
}


/* ----- Footer ----- */

.fw-footer {
    background: var(--fw-parchment);
    padding: 48px 40px 20px;
}

.fw-footer__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.fw-footer__col-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--fw-ink);
    letter-spacing: -0.224px;
    margin-bottom: 12px;
}

.fw-footer__links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fw-footer__link {
    color: var(--fw-ink-80);
    font-size: 12px;
    text-decoration: none;
    line-height: 1.4;
    transition: color 0.15s;
}

.fw-footer__link:hover {
    color: var(--fw-ember);
    text-decoration: none;
}

.fw-footer__bottom {
    border-top: 0.5px solid var(--fw-hairline);
    padding-top: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fw-footer__legal {
    font-size: 11px;
    color: var(--fw-ink-48);
}

.fw-footer__brand {
    font-size: 11px;
    font-weight: 600;
    color: var(--fw-ember);
}


/* ----- Spacing utilities ----- */

.fw-mb-xs {
    margin-bottom: var(--fw-sp-xs);
}

.fw-mb-sm {
    margin-bottom: var(--fw-sp-sm);
}

.fw-mb-md {
    margin-bottom: var(--fw-sp-md);
}

.fw-mb-lg {
    margin-bottom: var(--fw-sp-lg);
}

.fw-mb-xl {
    margin-bottom: var(--fw-sp-xl);
}

.fw-mb-xxl {
    margin-bottom: var(--fw-sp-xxl);
}

.fw-mb-sec {
    margin-bottom: var(--fw-sp-sec);
}

.fw-mt-sm {
    margin-top: var(--fw-sp-sm);
}

.fw-mt-lg {
    margin-top: var(--fw-sp-lg);
}

.fw-mt-xl {
    margin-top: var(--fw-sp-xl);
}

.fw-mt-xxl {
    margin-top: var(--fw-sp-xxl);
}


/* ----- Width constraints ----- */

.fw-max-640 {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.fw-max-740 {
    max-width: 740px;
    margin-left: auto;
    margin-right: auto;
}

.fw-max-980 {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}


/* ----- Loading skeleton (for async API content) ----- */

.fw-skeleton {
    background: var(--fw-divider);
    border-radius: var(--fw-r-sm);
    animation: fw-pulse 1.5s ease-in-out infinite;
}

@keyframes fw-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}


/* ----- Responsive ----- */

/* Tablet and below (≤ 833px): collapse nav, tighten tiles */
@media (max-width: 833px) {

    .fw-nav__links {
        display: none;
    }
    
    .fw-nav__links.fw-nav__links--open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: var(--fw-nav-h);
        left: 0;
        right: 0;
        background: var(--fw-black);
        padding: var(--fw-sp-lg) 22px;
        gap: var(--fw-sp-md);
        align-items: flex-start;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .fw-nav__hamburger {
        display: block;
    }

    .fw-hero {
        font-size: 34px;
    }

    .fw-display-lg {
        font-size: 28px;
    }

    .fw-lead {
        font-size: 21px;
    }

    .fw-tile {
        padding: var(--fw-sp-xxl) 20px;
    }

    .fw-footer__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Phone (≤ 640px) */
@media (max-width: 640px) {

    .fw-hero {
        font-size: 28px;
    }

    .fw-display-lg {
        font-size: 24px;
    }

    .fw-btn-group {
        flex-direction: column;
        align-items: center;
    }

    .fw-footer__grid {
        grid-template-columns: 1fr;
    }

    .fw-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--fw-sp-sm);
    }
}