:root { --ink:#111; --paper:#fff; --grey:#e9e9e9; } * { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:"DM Sans",sans-serif; } a { color:inherit; text-decoration:none; }
.site-header { height:78px; padding:0 clamp(1.25rem,4vw,4rem); position:absolute; inset:0 0 auto; z-index:2; display:flex; align-items:center; gap:2rem; color:#fff; border-bottom:1px solid rgba(255,255,255,.45); }.wordmark { font:700 clamp(1.35rem,2vw,1.7rem)/1 "DM Mono",monospace; letter-spacing:-.13em; }.wordmark span,h1 span,h2 span { color:inherit; }.navigation { display:flex; gap:clamp(.75rem,2vw,2rem); margin-left:auto; font-size:.87rem; }.navigation a { opacity:.85; }.navigation a:hover { opacity:1; text-decoration:underline; text-underline-offset:.35rem; }.menu-button { display:none; color:inherit; background:none; border:0; font:inherit; cursor:pointer; }.language-switcher { display:flex; gap:.35rem; }.language-switcher button { min-width:2.2rem; padding:.32rem; border:1px solid rgba(255,255,255,.55); background:transparent; color:inherit; font:500 .68rem "DM Mono",monospace; cursor:pointer; }.language-switcher button[aria-pressed="true"],.language-switcher button:hover { background:#fff; color:#111; }
.hero { min-height:100vh; padding:clamp(7rem,15vw,12rem) clamp(1.25rem,8vw,10rem) 2.5rem; display:flex; flex-direction:column; justify-content:space-between; color:#fff; position:relative; isolation:isolate; background:linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.15) 65%),url("assets/giuleve-sunset.jpg") center/cover; filter:grayscale(1); }.hero::after { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.45),transparent 40%); }.eyebrow { margin:0; font:500 .72rem/1.3 "DM Mono",monospace; text-transform:uppercase; letter-spacing:.04em; }.hero h1 { margin:1.5rem 0 .8rem; font:500 clamp(4rem,10vw,9.5rem)/.83 "Fraunces",serif; letter-spacing:-.075em; }.byline { margin:0; font-size:clamp(1rem,1.7vw,1.3rem); }.quote { max-width:570px; margin:4rem 0 0 auto; padding:1.25rem 0 0; border-top:1px solid rgba(255,255,255,.55); }.quote blockquote { margin:0; font:500 clamp(1.5rem,2.6vw,2.35rem)/1.08 "Fraunces",serif; letter-spacing:-.04em; }.quote figcaption { margin-top:1rem; font:500 .75rem "DM Mono",monospace; }
.page-section,.about { padding:clamp(4.75rem,10vw,10rem) clamp(1.25rem,8vw,10rem); display:grid; grid-template-columns:1fr 2fr; gap:2rem; border-top:1px solid #bbb; }.page-section h2,.about h2 { margin:0; font:500 clamp(3rem,6vw,6rem)/.9 "Fraunces",serif; letter-spacing:-.07em; }.page-section div>p,.about div>p { max-width:530px; margin:2rem 0; font-size:clamp(1.1rem,1.8vw,1.45rem); line-height:1.45; }.underlined-link { padding-bottom:.4rem; border-bottom:1px solid; font:500 .9rem "DM Mono",monospace; }.underlined-link span { margin-left:1.5rem; }.muted-section { background:var(--grey); }.about { background:#111; color:#fff; min-height:52vh; }
footer { padding:clamp(4rem,8vw,7rem) clamp(1.25rem,8vw,10rem) 1.5rem; background:#fff; color:#111; border-top:1px solid #bbb; }.email { display:inline-block; margin-top:1.5rem; padding-bottom:.3rem; border-bottom:2px solid; font:500 clamp(1.3rem,3vw,2.5rem) "DM Mono",monospace; letter-spacing:-.08em; }.email span { margin-left:1rem; }.footer-bottom { margin-top:clamp(5rem,10vw,9rem); padding-top:1.3rem; border-top:1px solid #bbb; display:flex; justify-content:space-between; gap:1rem; align-items:center; font-size:.78rem; }.footer-bottom p { margin:0; }.footer-bottom>a:last-child:hover { text-decoration:underline; }
@media (max-width:700px) { .navigation { display:none; position:absolute; inset:78px 0 auto; padding:1.5rem 1.25rem; flex-direction:column; background:#111; border-bottom:1px solid rgba(255,255,255,.2); }.navigation.open { display:flex; }.menu-button { display:block; }.language-switcher { margin-left:auto; }.hero { min-height:760px; }.quote { margin-top:4rem; }.page-section,.about { grid-template-columns:1fr; }.footer-bottom { align-items:flex-start; flex-wrap:wrap; }.footer-bottom .wordmark { width:100%; } }