/* ========================================================================== ROAMWITHADI — responsive.css "The Expedition Cut" · the four breakpoints and nothing else. -------------------------------------------------------------------------- THE ONE RULE THIS FILE OBEYS Every declaration below lives inside an @media (min-width: …) block. There is not one top-level rule in this file and not one max-width query. The site is mobile-first: style.css ships the 360px layout, effects.css ships the motion, and this file only ever ADDS as the viewport grows. Anything that must be true at 360px belongs in style.css — if it cannot be written as a min-width rule, it is not this file's job. EXACTLY FOUR BREAKPOINTS §1 480px --gutter: 1.5rem · the hero headline starts moving · the card grids go two-up · the newsletter form gets onto one line · the touch-target floor §2 768px --gutter: 2rem · story / bio / contact / destination rows split · the gear list gains its columns · the footer brand sits beside the socials · the grain doubles §3 1024px --gutter: 3rem · THE CHAPTER RAIL AND THE HERO COMPASS ARE SWITCHED ON (style.css ships both display:none and names this file as the place they come back) · the masthead becomes a horizontal row and the toggle goes away · the videos go three-up · the blog lead sits beside the cards · the footer goes four-up · .dest-pin opts into the pinned reel §4 1440px --gutter: 4.5rem · the display type sits at its ceiling · the destination cards gain width CASCADE POSITION header.php loads style.css → effects.css → responsive.css and calls that order load-bearing. On equal specificity these rules therefore win without an !important, and there is not one in this file. Where the earlier sheets are MORE specific than a bare class — everything the masthead drawer does is written `html.is-js .nav-panel` at (0,2,0), in BOTH style.css and effects.css — the rules here carry the same prefix so they still win on load order. A bare `.nav-panel` at (0,1,0) never beats that, however late it loads, and the site would ship with no desktop navigation. Same story for `html.is-js .nav-list{gap}` and `html.is-js .nav-link{font-size}`: both are answered here at matching specificity, not below it. -------------------------------------------------------------------------- THE RESET LOG — everything style.css or effects.css sets for the small screen that is EXPLICITLY overridden here rather than merely added to. This list exists because of a real defect in this repo's history: a grid-template-areas declared in style.css and never reset in responsive.css left a whole section stacked on desktop forever. §1 480 grid-template-columns .video-grid, .blog-cards 1fr → two-up gap .video-grid, .blog-cards the single `gap` is split into column-gap / row-gap flex-direction .news-form column → row width / height .social-link 2.35rem boxes raised to a 44px floor by min-* (a raise only, never a shrink) §2 768 grid-template-columns .story-grid 1fr → 2 · .bio-grid 1fr → 2 · .contact-grid 1fr → 2 · .gear-row 1fr → 2 display .gear-item (typography only in style.css) → grid, so the mono role gets its own column grid-template-columns .foot-top 1fr → content + socials gap .foot-top var(--space-lg) on both axes → a tight row-gap and a wide column-gap display .post-card--lead flex column → grid opacity .grain .045 → .09, the doubling effects.css asks for in its own comment §3 1024 display .chapter-rail none → flex (style.css §11 names this file and this value) display .hero-compass none → block (style.css names this file and this value) flex .mast-inner > .nav / > .nav-panel 1 0 100% → 0 0 auto, so the NO-JS nav stops taking a whole row of the masthead to itself flex-wrap .mast-inner wrap → nowrap width .nav 100% → auto margin-top .nav-cta var(--space-sm) → 0 display / position / inset / width / padding / background / border / overflow / visibility / transform html.is-js .nav-panel — the whole fixed-drawer battery from style.css (position:fixed, inset, width:min(86vw,21rem), 6rem padding, ink-deep ground, left border, overflow-y:auto, visibility:hidden, transform:translateX(100%)) opacity / visibility / translate / pointer-events html.is-js .nav-panel — and the second, softer drawer battery effects.css lays on top of it flex-direction / gap .nav-list column + .1rem (.35rem under is-js) → row + var(--space-md) font-size / letter-spacing html.is-js .nav-link the drawer's --text-lg / .1em back to --text-sm / .16em overflow .dest-rail overflow-x:auto → visible, and ONLY under html.is-js scroll-snap-type .dest-rail x mandatory → none, same scope flex-basis .dest-card 0 0 78% → a definite 21rem, because a percentage basis against a max-content rail is indefinite and resolves to content size grid-column .video-card / .post-card :nth-child(3) — the full-row span §1 gave them is put back to auto grid-template-columns .blog-cards back to ONE column: it is the narrow half of a split now, not the whole measure padding-inline-end .container reserves --rail beside the rail right .hero-compass var(--gutter) → gutter + rail §4 1440 padding-inline-end .container the rail reservation is handed back right .hero-compass back to var(--gutter) max-width .dest-card 21rem → 26rem. Without this reset the wider flex-basis beside it would be capped straight back and the cards would not grow. -------------------------------------------------------------------------- HORIZONTAL OVERFLOW — audited at 360 / 480 / 768 / 1024 / 1440 .seam · .hero-media · .hero-veil · .dest-bg · .blog-bg · .news-bg are every full-bleed layer on the site, and every one of them is position:absolute with inset:0 inside a section that is itself overflow:hidden. None can reach the document. Verified in style.css rather than guarded blindly here — a max-inline-size:100% on an inset:0 box is a no-op, and a no-op in a file this precise is noise. .dest-rail is the real one. Below 1024 it is a native overflow-x scroller and contains itself. At 1024, under html.is-js only, that overflow is turned OFF so animations.js can translate .dest-track instead — at which point five cards at max-content width WOULD run off the page. That is why .dest-pin is clipped on the inline axis in the same rule block. The two belong together and must never be separated. Every grid track written in this file uses minmax(0, …), never a bare 1fr. A bare 1fr is minmax(auto, 1fr) and refuses to shrink below its content's min-content width — one long unbroken word in a card and the row overflows. That is the discipline here, not a special case. .nav-list wraps at §3, so seven items plus the CTA can never widen the masthead past the viewport. TOUCH TARGETS .btn-icon / .nav-toggle / .to-top are 2.75rem = 44px in style.css and .video-play / .collage-play are 3.5rem, so the floor in §1 is a no-op for all of them and exists to keep them that way. It does two real raises: .social-link (2.35rem = 37.6px) and .btn / .news-submit (~43px from .95rem padding on a line-height:1 box). .nav-link gets its padding opened at §3 for the same reason. Nothing in this file shrinks any control at any width. See hand-off note 1 — the 360–479 band cannot be reached from a min-width file and belongs to style.css. ========================================================================== */ /* ========================================================================== §1 · 480px — LARGE MOBILE The first width at which anything gets denser, so it is also where the touch-target floor is re-asserted. ========================================================================== */ @media (min-width: 480px) { :root { /* --gutter across all four steps: 1.25 → 1.5 → 2 → 3 → 4.5rem */ --gutter: 1.5rem; /* The hero headline. The frozen token is clamp(3rem, 9.5vw, 8.5rem), which is pinned to its 3rem floor at every width below 505px — so the headline does not grow at all through this whole band. Raising the floor and the slope gets it moving from 480 up. The 8.5rem ceiling is untouched and is still the ceiling §4 sits at. */ --text-hero: clamp(3.5rem, 10.5vw, 8.5rem); } /* ── touch-target floor ────────────────────────────────────────────── min-* only: this can raise a control, never shrink one. */ .btn-icon, .nav-toggle, .video-play, .collage-play, .dest-prev, .dest-next, .to-top, .social-link { min-inline-size: 44px; min-block-size: 44px; } .btn, .news-submit, .news-input, .field-input, .field-textarea { min-block-size: 44px; } /* ── 06 · newsletter: the field and the button onto one line ───────── RESET: style.css has .news-form as a flex COLUMN with a single .75rem gap. The honeypot .hp is position:absolute and the two hidden inputs carry the UA's display:none, so none of the three becomes a flex item; the children that lay out are exactly .form-msg (only when the flash says so), .news-field, .news-submit and .news-note. The two full-width ones are pinned to their own rows so the field/button pair keeps a clean line to itself. */ .news-form { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: var(--space-sm); row-gap: var(--space-sm); } .news-form > .form-msg, .news-form > .news-note { flex: 1 0 100%; margin: 0; } .news-field { flex: 1 1 15rem; min-inline-size: 0; /* a flex item's min-width is auto by default */ } .news-input { inline-size: 100%; } .news-submit { flex: 0 0 auto; inline-size: auto; } /* ── the card grids go two-up ──────────────────────────────────────── RESET: both are grid-template-columns:1fr in style.css. Home ships three .video-card and three .post-card; /videos ships two .video-card and /blog ships a lead plus two briefs. Two columns suit all four cases as long as the odd one out spans — which is what the nth-child(3) rule does. nth-child(3), not :last-child: on /videos the last card is the SECOND one, and spanning that would leave a half-width orphan sitting above a full-width card. */ .video-grid, .blog-cards { display: grid; grid-template-areas: none; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-md); row-gap: var(--space-lg); align-items: start; } .video-grid > .video-card:nth-child(3), .blog-cards > .post-card:nth-child(3) { grid-column: 1 / -1; } /* /blog's index reverses that: there the FIRST card is the lead piece and it is the one that runs the full measure, so the third goes back into a normal track. */ .blog-cards--list > .post-card:nth-child(3) { grid-column: auto; } .blog-cards--list > .post-card--lead { grid-column: 1 / -1; } /* ── footer: the legal line stops running together ─────────────────── style.css gives .foot-legal type but no display, so its three s are plain inline boxes with nothing between them. */ .foot-legal { display: flex; flex-wrap: wrap; column-gap: var(--space-sm); row-gap: var(--space-xs); } } /* ========================================================================== §2 · 768px — TABLET The width at which two things can sit beside each other. Every split here is a two-column grid on a named contract wrapper, with grid-template-areas cleared and the children's placement returned to auto, so nothing declared for the stacked state can survive into a layout that no longer has it. ========================================================================== */ @media (min-width: 768px) { /* The masthead CTA comes back. style.css ships it display:none because at 360px the wordmark + button + toggle overflowed the bar and carried the menu toggle off-screen with them. This is the width at which the bar genuinely fits all three. */ .nav-cta { display: inline-flex; margin-top: 0; } :root { --gutter: 2rem; /* Film grain. Spec §9 asks for HALF the opacity below 768px — a max-width condition, which this file does not write. effects.css therefore ships the MOBILE value as its base (.045, and its own comment reads "≥768px doubles this in responsive.css"), and this is the doubling. Published as a token as well as a declaration so the two sheets can share one number instead of each holding a literal. */ --grain-op: .09; } .grain { opacity: var(--grain-op); } /* ── 02 · story: the collage beside the copy ─────────────────────── */ .story-grid { display: grid; grid-template-areas: none; grid-template-rows: auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; } .story-collage, .story-copy { grid-area: auto; } /* ── 03 · /destinations: each row splits, alternate rows flip ──────── .dest-card--row wraps its own .container, so the split is made on that container. The flip is explicit placement rather than `direction` or `order`, so the reading order in the DOM is untouched. */ .dest-card--row .container { display: grid; grid-template-areas: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: var(--space-lg); row-gap: var(--space-md); align-items: center; } .dest-card--flip .container > .dest-card-media { grid-column: 2; grid-row: 1; } .dest-card--flip .container > .dest-card-body { grid-column: 1; grid-row: 1; } /* ── 05 · /blog: the lead piece becomes a media/text split ─────────── RESET: .post-card is a flex column in style.css. .post-card--lead has exactly five children — .post-media, then .post-cat, .post-title, .post-date and .post-say — so the still takes column one across the four rows the rest of them occupy. */ .blog-cards--list { column-gap: var(--space-lg); } .post-card--lead { display: grid; grid-template-areas: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-md); align-items: center; } .post-card--lead > .post-media { grid-column: 1; grid-row: 1 / span 4; } /* ── /about: the bio splits, and flips on the alternate section ───── */ .bio-grid { display: grid; grid-template-areas: none; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: var(--space-lg); align-items: center; } .bio-media, .bio-copy { grid-area: auto; } .bio-grid--flip > .bio-media { grid-column: 2; grid-row: 1; } .bio-grid--flip > .bio-copy { grid-column: 1; grid-row: 1; } /* ── /gear: the list gains its columns ─────────────────────────────── Two splits, one inside the other. .gear-row is a group — the slate heading, then the