/* A studio masthead: original ink, a considered invitation, and a quiet frame. */
.site-masthead {
  position:relative;
  isolation:isolate;
  padding:0 max(6.3%,calc((100vw - 1320px)/2));
  color:var(--paper);
  background:#02272e;
}
.site-masthead::before {
  content:'';
  position:absolute;
  z-index:-1;
  inset:0;
  background:radial-gradient(ellipse at 52% -60%,#00788740,transparent 70%);
  pointer-events:none;
}
.masthead-edition {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:13px 0 0;
  color:#a6c8cb;
  font-size:10px;
  letter-spacing:.14em;
  line-height:1.5;
  text-transform:uppercase;
}
.masthead-edition span:last-child { display:flex; align-items:center; gap:10px; }
.masthead-edition i { width:3px; height:3px; background:#85d9e3; border-radius:50%; }
.masthead-main {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  grid-template-areas:'navigation brand invitation';
  align-items:center;
  gap:48px;
  min-height:118px;
  padding:12px 0 20px;
  border-bottom:1px solid #b6d3ce40;
}
.masthead-brand { grid-area:brand; display:block; padding:3px 8px; }
.masthead-brand .logo-horizontal { width:218px; }
.masthead-brand img { filter:brightness(0) invert(.96); }
.masthead-nav { grid-area:navigation; display:flex; align-items:center; gap:30px; }
.masthead-nav a {
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  white-space:nowrap;
  font-size:13px;
  color:#d0e3e2;
  text-decoration:none;
  transition:color .2s;
}
.masthead-nav a::after {
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:7px;
  height:1px;
  background:var(--glacier);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.masthead-nav a:hover,.masthead-nav a:focus-visible { color:var(--paper); }
.masthead-nav a:hover::after,.masthead-nav a:focus-visible::after { transform:scaleX(1); }
.masthead-invitation {
  grid-area:invitation;
  justify-self:end;
  position:relative;
  display:grid;
  grid-template-columns:1fr 35px;
  align-items:center;
  gap:26px;
  padding:10px 0 10px 26px;
  border-left:1px solid #b6d3ce55;
  text-decoration:none;
}
.masthead-invitation-copy { display:flex; flex-direction:column; gap:7px; }
.masthead-invitation strong { font:400 26px/1.1 var(--display); letter-spacing:-.035em; }
.masthead-invitation small { color:#b3d3d5; font-size:9px; letter-spacing:.13em; text-transform:uppercase; }
.masthead-invitation svg { width:30px; height:30px; fill:none; stroke:var(--glacier); stroke-width:1.15; transition:transform .35s cubic-bezier(.22,1,.36,1); }
.masthead-invitation:hover svg,.masthead-invitation:focus-visible svg { transform:translate(4px,-4px); }
.masthead-invitation:hover small { color:var(--glacier); }
.masthead-invitation:active { transform:translateY(1px); }
.site-masthead + main .launch-hero { padding-top:54px; }
@media(max-width:1100px) {
  .site-masthead { padding-inline:5.5%; }
  .masthead-main { gap:24px; }
  .masthead-nav { gap:22px; }
  .masthead-brand .logo-horizontal { width:185px; }
  .masthead-invitation { gap:15px; padding-left:20px; }
  .masthead-invitation strong { font-size:24px; }
}
@media(max-width:800px) {
  .site-masthead { padding-inline:7%; }
  .masthead-edition { padding-top:12px; font-size:8px; letter-spacing:.1em; gap:10px; }
  .masthead-edition .masthead-location { display:none; }
  .masthead-edition { justify-content:center; }
  .masthead-main { grid-template-columns:1fr 1fr; grid-template-areas:'brand invitation' 'navigation navigation'; gap:8px 18px; padding:18px 0 0; }
  .masthead-brand { justify-self:start; padding:0; }
  .masthead-brand .logo-horizontal { width:157px; }
  .masthead-invitation { gap:10px; grid-template-columns:1fr 20px; padding:6px 0 6px 18px; }
  .masthead-invitation strong { font-size:21px; white-space:nowrap; }
  .masthead-invitation small { font-size:8px; letter-spacing:.1em; }
  .masthead-invitation svg { width:20px; height:20px; }
  .masthead-nav { justify-content:center; gap:40px; border-top:1px solid #b6d3ce22; margin-top:10px; }
  .masthead-nav a { min-height:44px; font-size:12px; }
  .masthead-nav a::after { bottom:6px; }
  .site-masthead + main .launch-hero { padding-top:31px; }
}
@media(max-width:440px) {
  .masthead-brand .logo-horizontal { width:133px; }
  .masthead-invitation { gap:8px; padding-left:12px; }
  .masthead-invitation strong { font-size:19px; }
}
@media(max-width:360px) {
  .masthead-main { column-gap:12px; }
  .masthead-brand .logo-horizontal { width:112px; }
  .masthead-invitation { grid-template-columns:1fr 16px; gap:6px; padding-left:10px; }
  .masthead-invitation strong { font-size:18px; }
  .masthead-invitation svg { width:16px; height:16px; }
}