## MODIFIED Requirements

### Requirement: Core layout is device-agnostic and responsive
The system SHALL render key surfaces (header, hero, feed, modal, footer, policy modals, and floating controls) responsively across mobile, tablet, and desktop viewports while preserving readability, and SHALL verify these behaviors with browser-based regression tests.

#### Scenario: Mobile layout behavior
- **WHEN** a user opens the site on a mobile viewport
- **THEN** content remains readable without horizontal overflow
- **AND** interactive controls including icon-only copy/back-to-top and policy modals remain reachable and usable

#### Scenario: Desktop and tablet adaptation
- **WHEN** a user opens the site on tablet or desktop viewports
- **THEN** layout reflows according to breakpoint design rules
- **AND** no key content or controls are clipped

#### Scenario: Readability-focused typography and contrast updates
- **WHEN** content is rendered in core reading surfaces
- **THEN** typography and color choices improve baseline readability
- **AND** updates remain compatible with responsive behavior across breakpoints

#### Scenario: Sticky shrinking glass header
- **WHEN** user scrolls downward
- **THEN** header remains sticky with slight height reduction, subtle elevation, and glass blur effect
- **AND** controls remain readable and usable at all breakpoints

#### Scenario: Sticky footer does not overlap core reading zones
- **WHEN** footer is sticky
- **THEN** content remains readable and interactive controls are not obscured
- **AND** mobile/tablet/desktop layouts stay overflow-safe

#### Scenario: Breakpoint regression matrix verification
- **WHEN** Playwright responsive tests run across defined viewport classes
- **THEN** no horizontal overflow, clipping, or unreachable controls are detected
- **AND** sticky/floating controls retain expected behavior at each breakpoint