@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400&display=swap");


:root{--paper:#f6f2e9;--ink:#25251f;--muted:#706e65}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Georgia,"Times New Roman",serif}
a{color:inherit;text-decoration:none}
.hero{
 min-height:640px;height:72vh;max-height:760px;position:relative;background:
 linear-gradient(rgba(245,240,229,.05),rgba(26,32,26,.08)),
 url("parnassia-hero.jpg") center/cover no-repeat;overflow:hidden
}
.nav{position:absolute;z-index:5;top:0;left:0;right:0;padding:46px 7.5%;display:grid;grid-template-columns:1fr auto 1fr;align-items:start}
.nav-left,.nav-right{display:flex;gap:38px;font:600 11px/1 Arial,sans-serif;letter-spacing:.22em;text-transform:uppercase}
.nav-right{justify-content:flex-end}
.wordmark{text-align:center;transform:translateY(5px)}
.wordmark h1{font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-size:52px;font-weight:400;letter-spacing:.14em;margin:0;line-height:1}
.hero-copy{position:absolute;z-index:4;right:7.5%;top:50%;width:min(430px,38vw);color:#f6f1e8;text-align:center;font-size:20px;font-style:italic;line-height:1.55;text-shadow:0 1px 12px rgba(0,0,0,.25)}
.product{min-height:285px;padding:48px 7.5%;display:grid;grid-template-columns:150px 130px minmax(330px,1fr) 180px;gap:42px;align-items:center;background:#f8f4eb}
.release{font-size:14px;line-height:1.75;letter-spacing:.26em;text-transform:uppercase}
.release span{display:block}
.icon{width:118px;height:118px;object-fit:cover;border-radius:27px;box-shadow:0 1px 1px rgba(0,0,0,.15)}
.product-copy h2{font-size:22px;font-weight:400;letter-spacing:.27em;text-transform:uppercase;margin:0 0 8px}
.product-copy em{font-size:16px;letter-spacing:.04em}
.product-copy p{font-size:16px;line-height:1.55;max-width:510px;margin:22px 0 0}
.learn{border-left:1px solid #77756d;padding-left:45px;height:58px;display:flex;align-items:center;justify-content:center;gap:24px;font:600 11px/1 Arial,sans-serif;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap}
footer{min-height:84px;padding:0 7.5%;display:flex;align-items:center;justify-content:space-between;background:#f8f4eb;font:600 9px/1 Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase}
.footer-links{display:flex;gap:34px}
.page-nav{padding:30px 7.5%;display:flex;justify-content:space-between;border-bottom:1px solid #ddd7ca;font:600 10px/1 Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase}
.page-nav div{display:flex;gap:28px}
.page{max-width:820px;margin:auto;padding:80px 30px 120px}
.page h1{font-size:52px;font-weight:400;letter-spacing:.08em}
.page p{font-size:18px;line-height:1.75}
@media(max-width:850px){
 .hero{height:760px;max-height:none;background:
  linear-gradient(rgba(245,240,229,.05),rgba(26,32,26,.08)),
  url("parnassia-hero-mobile.jpg") center center/cover no-repeat}
 .nav{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"wordmark wordmark" "apps contact";row-gap:20px;column-gap:34px;align-items:center;padding:30px 8% 0}
 .wordmark{grid-area:wordmark}
 .nav-left{grid-area:apps;justify-content:flex-end}
 .nav-right{grid-area:contact;justify-content:flex-start}
 .wordmark h1{font-size:39px}
 .hero-copy{top:144px;left:8%;right:8%;transform:none;width:auto;font-size:18px;line-height:1.45}
 .product{grid-template-columns:1fr;text-align:center;gap:24px;padding:55px 9%}
 .release{font-size:13px;letter-spacing:.22em;line-height:1.4}
 .release span{display:inline}
 .release span+span::before{content:"\00a0"}
 .icon{margin:auto}.product-copy p{margin:20px auto 0}
 .learn{border-left:0;border-top:1px solid #aaa;padding:25px 0 0;height:auto}
 footer{padding:28px 7%;flex-direction:column;gap:20px}.footer-links{gap:20px;flex-wrap:wrap;justify-content:center}
}