/* ============================================================ layout.css Page skeleton: base type, container, section rhythm, the recurring "horizon" divider, loader & scroll progress. ============================================================ */ body { font-family: var(--font-body); font-size: var(--step-0); color: var(--color-ink); background: var(--color-bg); overflow-x: hidden; } /* When Lenis is active it toggles this class on . */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } /* ---- Container ---- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--wide { max-width: var(--container-wide); } /* ---- Section rhythm ---- */ .section { position: relative; padding-block: var(--space-10); } .section--tight { padding-block: var(--space-9); } /* Eyebrow / section label */ .eyebrow { display: inline-flex; align-items: center; gap: 0.6em; font-size: var(--step--1); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-muted); font-weight: 500; } .eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--color-ocean); opacity: 0.7; } /* Section heading pattern */ .section-head { max-width: 46ch; margin-bottom: var(--space-8); } .section-title { font-family: var(--font-display); font-weight: 600; font-size: var(--step-3); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); margin-top: var(--space-4); } .section-title .serif { font-family: var(--font-serif); font-weight: 400; font-style: italic; letter-spacing: 0; } .section-lead { margin-top: var(--space-4); color: var(--color-muted); font-size: var(--step-1); line-height: var(--leading-body); max-width: 52ch; } /* ---- The "horizon" — signature divider motif ---- */ /* A single hairline that fades at both ends, like a sea horizon. */ .horizon { height: 1px; border: 0; margin: 0; background: linear-gradient( to right, transparent, var(--color-border) 12%, var(--color-border) 88%, transparent ); } /* (The ambient "tide" glow was removed — the hero is now photography-led, so the coastal portrait carries the atmosphere instead of blurred shapes.) */ /* ---- Page loader ---- */ .loader { position: fixed; inset: 0; z-index: var(--z-loader); display: grid; place-items: center; background: var(--color-bg); } .loader__mark { font-family: var(--font-serif); font-style: italic; font-size: var(--step-3); color: var(--color-ink); overflow: hidden; height: 1.2em; line-height: 1.2em; } .loader__count { position: absolute; bottom: var(--space-7); right: var(--gutter); font-size: var(--step--1); letter-spacing: var(--tracking-wide); color: var(--color-muted); font-variant-numeric: tabular-nums; } .loader__bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 0%; background: var(--color-ocean); } body.is-loaded .loader { pointer-events: none; } /* ---- Scroll progress hairline (top of viewport) ---- */ .scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: var(--color-ocean); z-index: calc(var(--z-nav) + 1); } /* Utility */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .text-serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; } .accent { color: var(--color-ocean); }