diff --git a/src/styles/route.css b/src/styles/route.css index 980eb11..4ede8d6 100644 --- a/src/styles/route.css +++ b/src/styles/route.css @@ -152,13 +152,22 @@ @media screen and (min-width: 768px) { .reading-stage .portfolio-section[data-layout='destination'] { inline-size: min(900px, 64%); - margin-block-end: clamp(80px, 12vh, 140px); + /* The end-of-route sign hangs below the destination in its margin, so + the destination itself still fits one desktop viewport. */ + padding-block-end: 0; + margin-block-end: clamp(140px, 20vh, 200px); + } + .reading-stage .portfolio-section[data-layout='destination']::after { + inset-block: calc(100% + 28px) auto; } .reading-stage [data-layout='destination'] > h2 { - font-size: clamp(72px, 10vw, 168px); + font-size: clamp(64px, min(10vw, 15vh), 168px); + } + .reading-stage [data-layout='destination'] .chapter-body { + padding: clamp(22px, 3.4vh, 40px) clamp(24px, 3vw, 44px); } .reading-stage [data-layout='destination'] .contact-destination__copy { - font-size: clamp(26px, 2.4vw, 38px); + font-size: clamp(22px, min(2.4vw, 3.6vh), 38px); line-height: 1.22; letter-spacing: -0.03em; } @@ -168,6 +177,21 @@ font-size: 1.05rem; } } +@media screen and (min-width: 768px) and (max-height: 780px) { + .reading-stage .portfolio-section[data-layout='destination'] { + padding-block-start: 2.25rem; + } + .reading-stage [data-layout='destination'] > h2 { + font-size: clamp(64px, 13vh, 168px); + margin-block-end: 0.9rem; + } + .reading-stage [data-layout='destination'] .contact-destination__copy { + font-size: 23px; + } + .reading-stage [data-layout='destination'] .contact-social { + margin-block-start: 0.9rem; + } +} /* ---------- Case studies: evidence beside media that stays in view ---------- */ @media screen and (min-width: 1100px) { @@ -283,6 +307,11 @@ .site-navigation ul { position: relative; grid-template-columns: minmax(0, 1fr); + /* Eight exits in one column outgrow short or zoomed viewports; the + route scrolls inside the fixed bar instead of leaving the screen. */ + max-block-size: calc(100dvh - var(--site-navigation-block-size, 70px) - 12px); + overflow-y: auto; + overscroll-behavior: contain; } .site-navigation li { position: relative;