/* iPhone (< 768px) */
@media (max-width: 767px) {
    .article-panel {
        max-width: 100%;
    }

    .content {
        padding: 12px;
    }

    .header-top {
        margin-bottom: 8px;
    }

    .header-date {
        display: none;
    }

    .scroll-top {
        bottom: 16px;
        right: 16px;
        width: 40px;
        height: 40px;
    }
}

/* iPad (768-1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .content {
        max-width: 800px;
    }
}

/* Desktop (> 1024px) */
@media (min-width: 1025px) {
    .content {
        max-width: 900px;
    }
}

/* Safe area for iOS standalone */
@supports (padding-top: env(safe-area-inset-top)) {
    .header {
        padding-top: calc(12px + env(safe-area-inset-top));
    }

    .scroll-top {
        bottom: calc(24px + env(safe-area-inset-bottom));
    }
}