/* The splash page. The design system's palette, type and logo, set larger and
   looser: an editorial headline, an iron oxide panel with the mark at scale,
   the nameplate's double frame inside it. */
*,*::before,*::after{box-sizing:border-box}

.splash{
  min-height:100vh;min-height:100svh;margin:0;
  display:grid;grid-template-rows:auto 1fr auto;
  background:var(--warm-gray);color:var(--cast-iron);
  padding:0 clamp(16px,4vw,56px);
}

.splash>*{width:100%;max-width:1240px;margin:0 auto}

/* Top: the nameplate, horizontal. */
.top{padding:28px 0}
.home-link{display:inline-block;text-decoration:none}
.nameplate{display:inline-flex;border:2px solid var(--iron-oxide);padding:3px;color:var(--iron-oxide)}
.nameplate-inner{border:1px solid currentColor;padding:8px 14px;display:flex;align-items:center;gap:10px}
.nameplate svg{width:18px;height:20px;fill:currentColor;display:block}
.nameplate .word{font-family:var(--font-logo);font-weight:700;font-size:17px;line-height:1;letter-spacing:var(--tracking-wordmark);white-space:nowrap}

/* Hero: headline on the left, the panel on the right. */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,96px);align-items:center;padding:clamp(8px,3vh,40px) 0}
.hero-text{display:flex;flex-direction:column;align-items:flex-start;gap:28px}

.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--rust)}
.eyebrow::before{content:"";width:28px;height:2px;background:currentColor}

.hero h1{
  font-size:clamp(40px,4.9vw,68px);line-height:1.06;letter-spacing:-.02em;
  color:var(--iron-oxide);max-width:15ch;text-wrap:balance;
}
.hero h1 em{font-style:italic;font-weight:700;color:var(--rust)}

.lede{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--iron-gray);max-width:34ch;text-wrap:pretty}

.call{
  display:inline-flex;align-items:center;gap:10px;margin-top:4px;
  padding:14px 26px;border-radius:999px;
  background:var(--rust);color:var(--white);font-weight:700;text-decoration:none;
  transition:background-color .2s ease;
}
.call:hover{background:var(--rust-hover);color:var(--white)}
.call:focus-visible{outline:2px solid var(--iron-oxide);outline-offset:3px}

/* The panel: iron oxide, the nameplate's double frame inset, the mark at scale. */
.panel{
  aspect-ratio:4/5;max-height:calc(100svh - 230px);justify-self:end;width:100%;
  background:var(--iron-oxide);border-radius:32px;padding:18px;
}
.panel-frame{
  position:relative;height:100%;border-radius:20px;
  border:3px solid var(--rust);outline:1px solid var(--rust);outline-offset:-10px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.panel-mark{width:46%;max-width:240px;height:auto;fill:var(--rust)}
.panel-url{position:absolute;left:0;right:0;bottom:34px;text-align:center;font-family:var(--font-sans);font-weight:700;font-size:11px;line-height:1;letter-spacing:var(--tracking-domain);color:var(--warm-gray);white-space:nowrap}

/* Base line. */
.base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding:22px 0 26px;border-top:1px solid var(--rule);font-size:var(--text-caption-size);color:var(--iron-gray)}

/* Arrival: a short rise, once. */
@media (prefers-reduced-motion:no-preference){
  .hero-text>*,.panel{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
  .hero-text>*:nth-child(2){animation-delay:.06s}
  .hero-text>*:nth-child(3){animation-delay:.12s}
  .hero-text>*:nth-child(4){animation-delay:.18s}
  .panel{animation-delay:.1s}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

@media (max-width:820px){
  .hero{grid-template-columns:minmax(0,1fr);gap:32px;padding:16px 0 40px}
  .hero h1{max-width:14ch}
  .panel{justify-self:stretch;aspect-ratio:5/4;max-height:none;border-radius:24px;padding:12px}
  .panel-frame{border-radius:14px}
  .panel-mark{width:30%}
}