/* ============================================================ CULMENA — shared styles (rev. Jul 2026, post-RK review) ------------------------------------------------------------ LAYOUT SHELL Every top-level band (nav, sections, register, footer) uses .wrap so that logo, body copy, form fields and footer links share one vertical alignment line at every breakpoint. Change --shell in one place to retune the whole site. ============================================================ */ :root{ --forest:#1F4348; --forest-2:#2E5E63; --ink:#202A29; --cream:#FAF7F1; --sand:#F1EBE0; --line:#E3DCCE; --terra:#E76F51; --amber:#D9A44A; --muted:#6E7370; /* layout shell — RK: cap the nav so it doesn't stretch on 4K */ --shell:1600px; --gutter:clamp(20px, 3.4vw, 56px); --nav-h:84px; /* vertical rhythm */ --band:clamp(64px, 8vw, 130px); --gap:clamp(20px, 2.2vw, 30px); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:'Inter',system-ui,sans-serif;background:var(--cream);color:var(--ink); -webkit-font-smoothing:antialiased;overflow-x:hidden} img{max-width:100%;display:block} /* The visible page background lives here, not on : body now carries the Safari toolbar tint. Must stay in normal flow, not fixed. A fixed overlay the size of the viewport gets sampled instead of the body and the tint is lost (measured on an iPhone: a 1px fixed strip is ignored, a full-screen one is not). */ .page{background:var(--cream);position:relative;z-index:0} /* Safari 26 takes the toolbar colour from a fixed layer the size of the viewport, and only from one that size: measured on an iPhone, a 1px fixed strip is ignored and the body is used instead, which then went white at scroll 0. This layer sits behind the opaque .page, so it is never seen, and it holds the colour steady wherever the page is scrolled. */ .tint{position:fixed;inset:0;background-color:var(--tint);z-index:-1;pointer-events:none} a{color:inherit} .display{font-family:'Fraunces',Georgia,serif;font-weight:400;letter-spacing:-.02em} .display i{font-style:italic;color:var(--terra)} ::selection{background:var(--terra);color:#fff} /* page fade-in */ body{animation:pagein .7s ease both} @keyframes pagein{from{opacity:0}to{opacity:1}} /* the one true container */ .wrap{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)} /* ---------- NAV ---------- */ /* body > nav, not nav: the footer has its own