/* ==========================================================================
   RESPONSIVE VIEWPORT TIERS — mobile → ultrawide
   Load AFTER layout-system.css + layout-align.css.
   See: V3/_dev/RESPONSIVE-DESIGN-PLAN.md
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tier E+ : comfortable reading width for long prose (avoid full-width lines)
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {
    .content-area .welcome-sec p,
    .content-area .welcome-sec li {
        max-width: 68ch;
    }

    .main-wrapper {
        gap: 2rem;
    }
}

/* --------------------------------------------------------------------------
   Tier F–G : 1440–1919px — laptop / small desktop rhythm
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) {
    .main-wrapper {
        gap: 2.25rem;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

/* --------------------------------------------------------------------------
   Tier H : 1920px+ — Full HD workspace
   -------------------------------------------------------------------------- */
@media (min-width: 1920px) {
    .main-wrapper {
        gap: 2.5rem;
        padding-top: 2.25rem;
        padding-bottom: 2.25rem;
    }
}

/* --------------------------------------------------------------------------
   Tier I : 2560px+ — QHD / 32" / ultrawide — extra side breathing
   (layout-system already uses 3.75rem padding at 1920; this adds one step)
   -------------------------------------------------------------------------- */
@media (min-width: 2560px) {
    .container {
        padding-left: 5rem;
        padding-right: 5rem;
    }

    .main-wrapper {
        gap: 3rem;
        margin-top: 2.5rem;
    }
}