:root{
  --ink:#11110f;
  --cream:#f2eee7;
  --blue:#2c6f91;
  --paper:#f1eee7;
  --peach:#d68f68;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#111;color:#fff;font-family:Georgia,"Times New Roman",serif}
a{color:inherit;text-decoration:none}
img{display:block;width:100%}

.site-header{
  height:72px;background:#0d0e0c;display:grid;grid-template-columns:250px 1fr auto;align-items:center;
  gap:24px;padding:0 58px;position:relative;z-index:20;border-bottom:1px solid rgba(255,255,255,.05)
}
.brand{display:flex;flex-direction:column;line-height:.88;letter-spacing:.18em}
.brand-main{font-size:29px}
.brand-sub{font-family:Arial,sans-serif;font-size:14px;margin-top:8px;letter-spacing:.35em}
.main-nav{display:flex;align-items:center;gap:31px;font-size:14px}
.main-nav a{position:relative;padding:27px 0 20px}
.main-nav a.active::after,.main-nav a:hover::after{content:"";position:absolute;left:0;right:0;bottom:14px;height:2px;background:var(--blue)}
.header-tools{display:flex;align-items:center;gap:19px;font-family:Arial,sans-serif}
.icon{font-size:24px;opacity:.95}.divider{height:32px;width:1px;background:#333;margin:0 8px}
.tagline{font-size:11px;line-height:1.65;letter-spacing:.28em;white-space:nowrap}
.menu-toggle{display:none}

.hero{height:553px;background:url('images/hero.jpg') center center/cover no-repeat;position:relative;overflow:hidden}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.25) 43%,rgba(0,0,0,0) 72%)}
.hero-copy{position:relative;z-index:2;padding:135px 0 0 70px;width:52%;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.hero-logo{display:flex;flex-direction:column;line-height:.92}
.hero-main{font-size:80px;letter-spacing:.04em}
.hero-sub{font-family:Arial,sans-serif;font-size:30px;letter-spacing:.34em;margin-top:13px}
.blue-rule{display:block;width:68px;height:4px;background:var(--blue);margin:28px 0 20px}
.hero h1{font-size:38px;line-height:1.15;font-weight:400;margin:0 0 34px}
.button{display:inline-flex;align-items:center;gap:30px;padding:18px 28px;background:#214f6b;border:1px solid rgba(255,255,255,.45);font-family:Arial,sans-serif;font-size:12px;letter-spacing:.22em}
.button span{font-size:28px;line-height:0}

.statement{background:radial-gradient(circle at 50% 30%,#faf8f3 0%,#ece8e0 70%);color:#171713;text-align:center;padding:25px 12vw 29px}
.statement>p:first-child{font-size:19px;line-height:1.45;max-width:760px;margin:0 auto}
.blue-rule.centered{margin:20px auto}
.statement-quote{font-style:italic;font-size:30px;line-height:1.25;margin:0}

.collections{background:#0e0f0d;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding:28px 36px 35px}
.collection-card{text-align:center}
.collection-card img{height:178px;object-fit:cover}
.image-link{overflow:hidden;display:block}
.image-link img{transition:transform .35s ease}.image-link:hover img{transform:scale(1.025)}
.collection-card h2{font-family:Arial,sans-serif;font-size:13px;letter-spacing:.25em;font-weight:400;margin:19px 0 17px}
.collection-card p{font-size:15px;line-height:1.25;color:#e9e4dc;margin:0}

.bottom-banner{height:298px;background:url('images/banner.jpg') center center/cover no-repeat;position:relative;display:flex;justify-content:space-between;align-items:center;padding:0 68px;overflow:hidden}
.banner-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,.04) 58%,rgba(0,0,0,.18))}
.banner-left,.banner-right{position:relative;z-index:2}
.banner-left p{font-family:Arial,sans-serif;font-size:16px;line-height:1.7;letter-spacing:.28em;margin:0}
.banner-left .blue-rule{margin:19px 0 0;width:72px}
.banner-right{text-align:right;margin-top:75px}
.banner-right p{font-family:"Brush Script MT","Segoe Script",cursive;font-size:35px;line-height:1.4;color:#e6ab88;margin:0;font-style:italic}
.peach-rule{display:inline-block;width:43px;height:2px;background:var(--peach);margin-top:4px}

.placeholder{min-height:calc(100vh - 72px);display:grid;place-items:center;background:#ece8df;color:#161612;text-align:center;padding:40px}
.placeholder h1{font-size:50px;margin:.2em 0}.placeholder p{font-size:20px}.placeholder a{color:#245e7c;text-decoration:underline}

@media (max-width: 900px){
  .site-header{grid-template-columns:1fr auto;padding:0 20px;height:70px}
  .header-tools{display:none}.brand-main{font-size:24px}.brand-sub{font-size:11px}
  .menu-toggle{display:block;background:transparent;color:#fff;border:0;font-size:26px;cursor:pointer}
  .main-nav{display:none;position:absolute;top:70px;left:0;right:0;background:#0d0e0c;flex-direction:column;gap:0;padding:10px 20px 18px}
  .main-nav.open{display:flex}.main-nav a{width:100%;padding:13px 0}.main-nav a.active::after,.main-nav a:hover::after{bottom:7px}
  .hero{height:600px;background-position:62% center}
  .hero-copy{padding:235px 24px 0;width:100%;background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.25) 70%,transparent)}
  .hero-main{font-size:53px}.hero-sub{font-size:21px}.hero h1{font-size:31px}.button{padding:16px 20px}
  .statement{padding:30px 25px}.statement>p:first-child{font-size:17px}.statement-quote{font-size:26px}.desktop-break{display:none}
  .collections{grid-template-columns:repeat(2,1fr);padding:24px;gap:30px 18px}.collection-card img{height:220px}
  .bottom-banner{height:330px;padding:0 28px}.banner-right{margin-top:110px}.banner-right p{font-size:30px}
}
@media (max-width: 560px){
  .hero{height:560px;background-position:68% center}.hero-copy{padding-top:245px}.hero-main{font-size:43px}.hero-sub{font-size:16px}.hero h1{font-size:28px}
  .collections{grid-template-columns:1fr}.collection-card img{height:300px}.statement-quote{font-size:23px}
  .bottom-banner{align-items:flex-end;padding:0 20px 25px;display:block}.banner-left{position:absolute;left:20px;top:36px}.banner-left p{font-size:13px}.banner-right{position:absolute;right:20px;bottom:20px}.banner-right p{font-size:26px}
}