gave every interior page the gap twice: once from main, once from the hero's own padding. */ main > *:first-child:not(.hero):not(.page-hero) { padding-top: calc(var(--header-h) + var(--space-10)); } /* Surface variants. Kept as separate single-class modifiers so a section can change ground without any selector specificity conflict. The names survive from the previous design so every page keeps working; what they resolve to is now a step through the dark rather than a step through the light. */ .section-light { background: var(--obsidian); } .section-alt { background: var(--slate); } .section-sand { background: var(--slate-2); } .section-navy { background: var(--slate); } .section-navy-deep { background: #06070A; } /* A band's seam. The champagne hairline that separates one room from the next is the same device the logo draws with. */ .section-alt, .section-sand, .section-navy, .section-navy-deep { border-block: 1px solid var(--hair); } /* ----------------------------------------------------------------- grids Auto-fit grids collapse on their own, so most layouts need no media query at all. min() keeps a single card from overflowing a narrow phone. */ .grid { display: grid; gap: var(--space-8); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); } .grid-5 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); } .grid-gap-lg { gap: clamp(2rem, 5vw, 4.5rem); } .grid-gap-sm { gap: var(--space-4); } /* A content column beside a sidebar (Events, Insights). */ .grid-sidebar { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: 1fr; } @media (min-width: 62rem) { .grid-sidebar { grid-template-columns: minmax(0, 1fr) 21rem; } .grid-sidebar-left { grid-template-columns: 21rem minmax(0, 1fr); } } /* Two-column text-and-image blocks (About). */ .grid-split { display: grid; gap: clamp(2.5rem, 6vw, 6rem); grid-template-columns: 1fr; align-items: center; } @media (min-width: 54rem) { .grid-split { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ------------------------------------------------------- the aperture The site has ONE motion device, and this is it: a letterbox mask that draws back to admit you. The page opens through it, every photograph below the fold reveals through it, and each headline line rises from behind it. One idea used consistently reads as choreography; five different ideas read as a demo reel. Applied only to [data-reveal] elements, which the motion layer opens on arrival. Nothing here is applied by CSS alone, so a visitor whose script never runs is handled by the no-JS block at the end of motion.css rather than being left staring at an empty column. */ [data-reveal].reveal-mask { clip-path: inset(50% 0 50% 0); transition: clip-path var(--dur-mask) var(--ease-curtain); } [data-reveal].reveal-mask.is-in { clip-path: inset(0 0 0 0); } [data-reveal].reveal, .reveal { opacity: 0; transform: translateY(26px); transition: opacity var(--dur-reveal) var(--ease-curtain), transform var(--dur-reveal) var(--ease-curtain); } [data-reveal].reveal.is-in, .reveal.is-in, .reveal.is-visible { opacity: 1; transform: none; } [data-reveal].reveal-left { transform: translateX(-26px); } [data-reveal].reveal-right { transform: translateX(26px); } [data-reveal].reveal-left.is-in, [data-reveal].reveal-right.is-in { transform: none; } [data-reveal].reveal-draw { transform: scaleX(0); transform-origin: left; transition: transform var(--dur-draw) var(--ease-curtain); } [data-reveal].reveal-draw.is-in { transform: scaleX(1); } /* A room boundary announces itself with a champagne seam that draws across the full width as the room arrives. */ .seam { position: relative; } .seam::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(to right, var(--champagne-dim), var(--hair) 62%, transparent); transform: scaleX(0); transform-origin: left; transition: transform 1800ms var(--ease-curtain); } .seam.is-in::before { transform: scaleX(1); } /* ------------------------------------------------------------- utilities */ .text-center { text-align: center; } .text-left { text-align: left; } .text-gold { color: var(--champagne); } .text-white { color: var(--bone); } .text-muted { color: var(--smoke-2); } .mx-auto { margin-inline: auto; } .mt-0 { margin-top: 0; } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); } .mt-10 { margin-top: var(--space-10); } .mb-0 { margin-bottom: 0; } .mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); } .mb-8 { margin-bottom: var(--space-8); } .mb-10 { margin-bottom: var(--space-10); } .measure { max-width: 46ch; } .measure-wide { max-width: 62ch; } .is-hidden { display: none !important; } .lead { font-size: var(--fs-lead); line-height: var(--lh-relaxed); color: var(--smoke); max-width: 52ch; }