:root {
  --petrol: #0F2F33;
  --petrol-deep: #092529;
  --name: #C7D4D8;
  --ivory: #F6F4EF;
  --line: rgba(246, 244, 239, .18);
  --line-strong: rgba(199, 212, 216, .42);
  --body-font: "Josefin Sans", sans-serif;
  --title-font: "Cormorant Garamond", Georgia, serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--petrol); }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--petrol);
  color: var(--ivory);
  font-family: var(--body-font);
  font-weight: 300;
  letter-spacing: .025em;
  overflow-x: hidden;
}

body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

.loading {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  background: var(--petrol);
  pointer-events: none;
  opacity: 1;
  transition: opacity 2.45s cubic-bezier(.22,.61,.36,1);
}
.loading__logo {
  width: min(43vw, 560px); height: auto;
  opacity: 1;
  transform: scale(1);
  transition: opacity 2.45s cubic-bezier(.22,.61,.36,1), transform 2.45s cubic-bezier(.22,.61,.36,1);
}
body.is-loaded .loading { opacity: 0; }
body.is-loaded .loading__logo { opacity: 0; transform: scale(.97); }

.site-header {
  position: fixed; z-index: 100; top: 0; left: 0; width: 100%;
  height: 104px;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; padding: 0 4.2vw;
  opacity: 0; transform: translateY(-6px);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: opacity .7s ease, transform .7s ease, background-color .45s ease, border-color .45s ease, backdrop-filter .45s ease;
}
body.is-loaded .site-header { opacity: 1; transform: translateY(0); transition-delay: .52s; }
.site-header.is-scrolled {
  background: rgba(9, 37, 41, .90);
  border-bottom-color: rgba(199, 212, 216, .14);
  backdrop-filter: blur(14px) saturate(110%);
  -webkit-backdrop-filter: blur(14px) saturate(110%);
}

.brand { justify-self: start; display: inline-flex; align-items: center; }
.brand__logo { width: 72px; height: 72px; display: block; }
.mobile-name, .menu-toggle { display: none; }

.nav { display: flex; align-items: center; gap: clamp(24px, 3vw, 50px); font-size: 13px; text-transform: uppercase; letter-spacing: .13em; }
.nav a, .contact-link { position: relative; padding: 8px 0 11px; opacity: .9; transition: opacity .25s ease; }
.nav a::after, .contact-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--name);
  transform: scaleX(0); transform-origin: center;
  transition: transform .25s ease;
}
.nav a:hover, .contact-link:hover { opacity: .6; }
.nav a:hover::after, .contact-link:hover::after { transform: scaleX(1); }
.nav a.is-active, .contact-link.is-active { font-weight: 600; opacity: 1; }
.nav a.is-active::after, .contact-link.is-active::after { transform: scaleX(1); }

.contact-link { justify-self: end; font-size: 13px; text-transform: uppercase; letter-spacing: .13em; }

.hero {
  min-height: 100svh; display: grid; place-items: center;
  padding: 130px 5vw 90px;
}
.hero__title {
  width: min(79vw, 1540px); height: auto; display: block;
  opacity: 0; transform: translateY(5px);
  transition: opacity .85s ease, transform .85s ease;
}
body.is-loaded .hero__title { opacity: 1; transform: translateY(0); transition-delay: .14s; }

.publications { padding: 12vh 6vw 16vh; }
.publications__inner { max-width: 1380px; margin: 0 auto; }
.section-kicker {
  margin-bottom: 18px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .18em; opacity: .62;
}
.publications h1 {
  margin: 0 0 8vh; max-width: 850px;
  font-family: var(--title-font); font-weight: 400;
  font-size: clamp(40px, 4.1vw, 68px); line-height: .98;
  color: var(--ivory);
}
.publication-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(50px,8vw,150px); }
.publication {
  display: block; padding: 0 0 28px;
  border-bottom: 1px solid var(--line);
  transition: opacity .3s ease, transform .3s ease;
}
.publication:hover { opacity: .65; transform: translateY(-3px); }
.publication__meta { display: flex; justify-content: space-between; gap: 20px; font-size: 11px; text-transform: uppercase; letter-spacing: .13em; opacity: .65; }
.publication h2 {
  margin: 22px 0 18px; font-family: var(--title-font); font-weight: 400;
  font-size: clamp(30px, 3vw, 48px); line-height: .98; color: var(--name);
}
.publication p { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }

.site-footer {
  padding: 0 6vw 7vh; max-width: 1380px; margin: 0 auto;
  display: grid; justify-items: center; gap: 3px; text-align: center;
  font-size: 10px; line-height: 1.25; letter-spacing: .1em; opacity: .68;
}
.site-footer a { width: auto; }

.page {
  min-height: 100svh; padding: 170px 6vw 13vh;
}
.page__inner { max-width: 1380px; margin: 0 auto; }
.page__eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .18em; opacity: .62; margin-bottom: 25px; }
.page__title { margin: 0; max-width: 1000px; font-family: var(--title-font); font-weight: 400; font-size: clamp(64px, 10vw, 160px); line-height: .82; color: var(--name); }
.page__lead { max-width: 720px; margin: 55px 0 0; font-size: clamp(18px, 1.6vw, 25px); line-height: 1.5; }
.page__body { max-width: 760px; margin-top: 80px; font-size: 17px; line-height: 1.7; }
.page__body p { margin: 0 0 1.5em; }

.editorial {
  padding: 150px 4.5vw 12vh;
}
.editorial__head { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 0 30px; }
.editorial__head h1 { margin: 20px 0 0; font-family: var(--title-font); font-size: clamp(64px, 11vw, 170px); line-height: .78; font-weight: 400; color: var(--name); }
.editorial__filters { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:22px; }
.editorial__filters span { font-size: 10px; text-transform: uppercase; letter-spacing: .18em; opacity:.65; }
.editorial-grid { margin-top: 0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); border-left:1px solid var(--line); }
.editorial-card { min-width:0; padding: 24px 22px 30px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.editorial-card__image {
  width:100%; aspect-ratio: 1 / .82; display:grid; place-items:center;
  background: rgba(199,212,216,.08); border:1px solid rgba(199,212,216,.16);
  overflow:hidden;
}
.editorial-card__image span { font-family:var(--title-font); font-size:clamp(38px,4vw,70px); color:var(--name); opacity:.42; }
.editorial-card__meta { display:flex; justify-content:space-between; gap:15px; margin-top:18px; font-size:9px; text-transform:uppercase; letter-spacing:.14em; opacity:.6; }
.editorial-card h2 { margin:14px 0 10px; font-family:var(--title-font); font-size:clamp(26px,2.3vw,38px); line-height:.98; font-weight:500; color:var(--name); }
.editorial-card p { margin:0; font-size:11px; line-height:1.5; opacity:.7; }
.editorial-card__author { display:block; margin-top:18px; font-size:9px; text-transform:uppercase; letter-spacing:.12em; opacity:.55; }

.article { padding: 160px 6vw 14vh; }
.article__inner { max-width: 900px; margin:0 auto; }
.article__meta { display:flex; justify-content:space-between; gap:20px; padding-bottom:20px; border-bottom:1px solid var(--line); font-size:10px; text-transform:uppercase; letter-spacing:.15em; opacity:.62; }
.article h1 { margin:42px 0 24px; font-family:var(--title-font); font-weight:400; color:var(--name); font-size:clamp(52px,7vw,104px); line-height:.88; }
.article__deck { font-size:20px; line-height:1.5; opacity:.78; margin-bottom:70px; }
.article__content { font-size:18px; line-height:1.72; }
.article__content p { margin:0 0 1.5em; }
.article__content blockquote { margin:45px 0; padding-left:25px; border-left:1px solid var(--name); font-family:var(--title-font); font-size:30px; line-height:1.1; color:var(--name); }

.contact-page { min-height:100svh; padding:160px 6vw 10vh; display:grid; place-items:center; }
.contact-card { width:min(760px,100%); text-align:center; }
.contact-card__identity { display:inline-block; text-align:left; margin-bottom:70px; }
.contact-card__identity img { width:min(720px, 85vw); height:auto; display:block; }
.contact-links { display:grid; gap:0; border-top:1px solid var(--line); }
.contact-links a, .contact-links button {
  appearance:none; background:none; border:0; border-bottom:1px solid var(--line);
  padding:24px 4px; text-align:center; font-size:13px; text-transform:uppercase; letter-spacing:.14em;
  cursor:pointer; transition: opacity .25s ease;
}
.contact-links a:hover, .contact-links button:hover { opacity:.55; }
.contact-note { margin-top:18px; font-size:9px; text-transform:uppercase; letter-spacing:.13em; opacity:.45; }

.mobile-menu, .menu-backdrop { display:none; }

@media (max-width: 800px) {
  .site-header {
    height: 88px; padding:0 20px;
    grid-template-columns: 1fr auto 1fr;
  }
  .brand__logo { width:60px; height:60px; }
  .nav, .contact-link { display:none; }
  .mobile-name {
    display:block; justify-self:center; font-family:var(--title-font);
    font-size:19px; letter-spacing:.08em; color:var(--name);
    white-space:nowrap;
  }
  .menu-toggle {
    justify-self:end; display:flex; flex-direction:column; gap:5px;
    width:42px; height:42px; align-items:flex-end; justify-content:center;
    border:0; background:transparent; cursor:pointer; padding:8px 0 8px 12px;
  }
  .menu-toggle span { display:block; height:1px; background:var(--ivory); transition:width .25s ease, transform .25s ease; }
  .menu-toggle span:nth-child(1){width:27px}.menu-toggle span:nth-child(2){width:20px}.menu-toggle span:nth-child(3){width:27px}
  .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .mobile-menu {
    position:fixed; z-index:210; top:0; right:0; bottom:0; width:min(82vw,360px);
    display:flex; flex-direction:column; padding:115px 34px 40px;
    background:var(--petrol-deep); transform:translateX(100%);
    transition:transform .45s cubic-bezier(.22,.61,.36,1);
  }
  body.menu-open .mobile-menu { transform:translateX(0); }
  .mobile-menu__close { position:absolute; top:22px; right:25px; border:0; background:none; font-size:32px; font-weight:300; cursor:pointer; }
  .mobile-menu nav { display:grid; gap:28px; }
  .mobile-menu nav a { width:max-content; padding-bottom:8px; border-bottom:1px solid transparent; font-size:15px; text-transform:uppercase; letter-spacing:.14em; }
  .mobile-menu nav a.is-active { font-weight:600; border-bottom-color:var(--name); }
  .menu-backdrop { position:fixed; z-index:200; inset:0; background:rgba(0,0,0,.34); opacity:0; pointer-events:none; display:block; transition:opacity .35s ease; }
  body.menu-open .menu-backdrop { opacity:1; pointer-events:auto; }

  .site-header.is-scrolled { background:rgba(9, 37, 41, .94); border-bottom-color:rgba(199, 212, 216, .14); }

  .loading__logo { width:min(64vw,390px); }
  .hero { min-height:100svh; padding:110px 20px 70px; }
  .hero__title { width:calc(100vw - 52px); }
  .publications { padding:11vh 25px 13vh; }
  .section-kicker { font-size:10px; }
  .publications h1 { margin-bottom:6vh; font-size:42px; line-height:.95; }
  .publication-grid { grid-template-columns:1fr; gap:58px; }
  .publication h2 { font-size:35px; }
  .publication__meta { font-size:9px; }
  .site-footer { padding:0 25px 7vh; }

  .page { padding:140px 25px 11vh; }
  .page__title { font-size:clamp(65px,20vw,105px); }
  .page__lead { margin-top:42px; font-size:18px; }
  .page__body { margin-top:55px; font-size:16px; }

  .editorial { padding:125px 18px 10vh; }
  .editorial__head h1 { font-size:25vw; }
  .editorial__filters { margin-top:18px; }
  .editorial-grid { grid-template-columns:1fr; }
  .editorial-card { padding:20px 18px 25px; }
  .editorial-card__image { aspect-ratio:1/.75; }
  .editorial-card h2 { font-size:34px; }

  .article { padding:135px 25px 12vh; }
  .article h1 { font-size:54px; }
  .article__deck { font-size:18px; margin-bottom:52px; }
  .article__content { font-size:16px; line-height:1.7; }

  .contact-page { padding:135px 25px 10vh; }
  .contact-card__identity { margin-bottom:48px; }
  .contact-card__identity img { width:100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition-duration:.01ms !important; animation-duration:.01ms !important; }
}