@font-face {
  font-family: 'Barlow Condensed';
  src: url('assets/barlow-condensed-600.woff2') format('woff2');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
:root {
  --silver: #e6e8e8;
  --ink: #292f32;
  --vermilion: #b93721;
  --rule: #b3b9bc;
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --gutter: clamp(24px, 4.45vw, 80px);
  color-scheme: light;
  background: var(--silver);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  scrollbar-color: var(--ink) var(--silver);
}
* { box-sizing: border-box; }
body { margin: 0; }
::selection { background: var(--vermilion); color: white; }
.page {
  position: relative;
  isolation: isolate;
  min-height: 680px;
  min-height: max(680px, 100svh);
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.masthead { padding-top: 36px; position: relative; z-index: 2; }
.monogram {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font: 600 28px/1 var(--display);
  letter-spacing: -.02em;
}
.monogram-dot { display: inline-block; width: 5px; height: 5px; background: var(--vermilion); }
main { flex: 1; display: flex; align-items: flex-end; padding: 330px 0 58px; }
h1 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--vermilion);
  font: 600 clamp(64px, 7.2vw, 96px)/.92 var(--display);
  letter-spacing: -.025em;
  text-transform: uppercase;
  text-wrap: balance;
}
h1 > span { display: block; }
h1 > span + span { margin-top: .085em; }
.title-period { margin-left: .01em; }
.artwork {
  position: absolute;
  width: min(75vw, 1120px);
  right: -1.5vw;
  top: -26px;
  pointer-events: none;
  z-index: 0;
}
.artwork img { display: block; width: 100%; height: auto; }
footer {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--rule);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .015em;
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .artwork.is-ready { animation: settle 700ms cubic-bezier(.16,1,.3,1) both; }
  @keyframes settle { from { transform: translateY(-12px) rotate(-1deg); } to { transform: translateY(0) rotate(0); } }
}
@media (min-width: 1700px) {
  .artwork { right: 4vw; top: 3vh; }
  main { padding-bottom: 8vh; }
}
@media (min-width: 1001px) and (max-height: 780px) {
  .artwork { width: min(70vw, 980px); top: -35px; }
  main { padding-top: 280px; }
}
@media (max-width: 1000px) {
  .page { min-height: max(740px, 100svh); }
  .artwork { width: 86vw; top: 26px; right: -9vw; }
  main { padding-top: 390px; padding-bottom: 48px; }
  h1 { font-size: clamp(64px, 9vw, 90px); }
}
@media (max-width: 600px) {
  .page { min-height: max(640px, 100svh); }
  .masthead { padding-top: 26px; }
  .monogram { font-size: 25px; }
  .artwork { width: 116vw; right: -11vw; top: max(44px, calc(100svh - 670px)); }
  main { padding-top: 320px; padding-bottom: 36px; }
  h1 { font-size: clamp(54px, 13.8vw, 80px); }
  footer { min-height: 68px; font-size: 11px; }
  footer .company { display: none; }
}
@media (max-width: 360px) {
  main { padding-top: 274px; }
  h1 { font-size: 49px; }
  .page { min-height: max(568px, 100svh); }
}
@media (forced-colors: active) {
  h1 { color: CanvasText; }
  .monogram-dot { background: CanvasText; }
}