:root {
  --navy: #0d1b3d;
  --navy-soft: #16264a;
  --copper: #b35a2e;
  --copper-hot: #d9824b;
  --paper: #f3efe6;
  --paper-light: #fffcf7;
  --ink-muted: rgba(13, 27, 61, .58);
  --serif: "Libre Baskerville", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  padding: 14px;
  color: var(--navy);
  background: var(--navy);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
.skip { position: fixed; z-index: 20; top: 8px; left: 8px; padding: 8px 12px; background: white; transform: translateY(-150%); }
.skip:focus { transform: none; }

.stage {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: calc(100svh - 28px);
  overflow: hidden;
  background: var(--paper);
  clip-path: polygon(0 0, calc(100% - 74px) 0, 100% 74px, 100% 100%, 74px 100%, 0 calc(100% - 74px));
}
.stage::before {
  content: "";
  position: absolute;
  z-index: 10;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--copper), var(--copper)) 0 0 / calc(100% - 74px) 2px no-repeat,
    linear-gradient(45deg, transparent 48.8%, var(--copper) 49%, var(--copper) 51%, transparent 51.2%) 100% 0 / 74px 74px no-repeat,
    linear-gradient(var(--copper), var(--copper)) 100% 74px / 2px calc(100% - 74px) no-repeat,
    linear-gradient(var(--copper), var(--copper)) 74px 100% / calc(100% - 74px) 2px no-repeat,
    linear-gradient(45deg, transparent 48.8%, var(--copper) 49%, var(--copper) 51%, transparent 51.2%) 0 100% / 74px 74px no-repeat,
    linear-gradient(var(--copper), var(--copper)) 0 0 / 2px calc(100% - 74px) no-repeat;
}
.stage::after {
  content: "1822";
  position: absolute;
  z-index: 0;
  left: -2vw;
  bottom: -10vw;
  color: rgba(188, 94, 47, .045);
  font: 700 min(39vw, 44rem)/.75 var(--serif);
  letter-spacing: -.12em;
  pointer-events: none;
}

.masthead {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: start;
  gap: clamp(24px, 5vw, 80px);
  padding: 20px 38px 0;
}
.brand {
  display: block;
  width: 126px;
  margin-top: -6px;
  text-decoration: none;
}
.brand img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 7px 10px rgba(13, 27, 61, .14));
}
.coordinates, .opening {
  margin: 0;
  font: 600 .58rem/1.6 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.coordinates { color: var(--ink-muted); }
.opening {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-right: 64px;
  white-space: nowrap;
}
.opening span { width: 7px; height: 7px; border-radius: 50%; background: var(--copper); box-shadow: 0 0 0 5px rgba(188,94,47,.12); }

.hero {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(500px, 1.1fr);
  align-items: center;
  gap: clamp(30px, 5vw, 92px);
  padding: 20px clamp(38px, 6vw, 112px) 24px;
}
.hero-copy { align-self: center; padding-top: 3vh; }
.edition {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 30px;
  color: var(--copper);
  font: 600 .62rem/1 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.edition::before { content: ""; width: 32px; height: 1px; background: var(--copper); }
h1 { margin: 0; }
h1 span {
  display: block;
  margin: 0 0 .1em;
  font: 700 clamp(3.2rem, 6.7vw, 8.2rem)/.88 var(--serif);
  letter-spacing: -.07em;
}
h1 strong {
  display: block;
  color: var(--copper);
  font: 400 italic clamp(2.8rem, 5.5vw, 6.7rem)/.98 var(--serif);
  letter-spacing: -.055em;
}
.intro {
  max-width: 530px;
  margin: 36px 0 0 clamp(0px, 8vw, 130px);
  padding-left: 20px;
  border-left: 1px solid rgba(11,26,54,.25);
  color: var(--ink-muted);
  font-size: clamp(.82rem, 1vw, 1rem);
  line-height: 1.8;
}

.portrait {
  position: relative;
  justify-self: end;
  width: min(100%, 780px);
  height: min(56vh, 580px);
  min-height: 400px;
  isolation: isolate;
}
.portrait::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -12px 18px 18px -12px;
  background: var(--copper);
  clip-path: polygon(14% 0, 86% 0, 100% 11%, 100% 89%, 86% 100%, 14% 100%, 0 89%, 0 11%);
}
.portrait-surface {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: var(--paper-light);
  background:
    radial-gradient(circle at var(--glow-x, 63%) var(--glow-y, 35%), rgba(226,125,67,.52), transparent 19%),
    linear-gradient(145deg, #132540, #07142a 70%);
  clip-path: polygon(14% 0, 86% 0, 100% 11%, 100% 89%, 86% 100%, 14% 100%, 0 89%, 0 11%);
}
.portrait-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .2;
  background-image: linear-gradient(90deg, transparent 49.8%, rgba(255,255,255,.15) 50%, transparent 50.2%), linear-gradient(transparent 49.8%, rgba(255,255,255,.1) 50%, transparent 50.2%);
  background-size: 72px 72px;
}
.portrait-surface > img {
  position: absolute;
  z-index: 2;
  inset: -7px;
  width: calc(100% + 14px);
  height: calc(100% + 14px);
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  filter: saturate(.82) contrast(1.04);
  transform: translate3d(var(--shift-x, 0), var(--shift-y, 0), 0) scale(1.018);
  transition: opacity .7s ease, transform 1.2s cubic-bezier(.18,.72,.22,1);
}
.portrait.photo-ready .portrait-surface > img { opacity: 1; }
.portrait.photo-ready .portrait-surface::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  background:
    radial-gradient(circle 220px at var(--glow-x, 66%) var(--glow-y, 30%), rgba(255, 214, 170, .16), transparent 72%),
    linear-gradient(180deg, rgba(13,27,61,.03), rgba(13,27,61,.46)),
    radial-gradient(circle at 70% 30%, transparent, rgba(13,27,61,.22));
  transition: background .25s linear;
}
.photo-note {
  position: absolute;
  z-index: 5;
  right: 24px;
  bottom: -25px;
  margin: 0;
  padding: 14px 18px;
  color: var(--paper);
  background: var(--navy);
  font: 600 .52rem/1 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.information {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(3, 1fr) minmax(190px, 1.1fr);
  margin: 0 38px 24px;
  border-top: 1px solid rgba(11,26,54,.28);
}
.information > div, .information > a { padding: 18px 18px 0 0; }
.information > div + div, .information > a { padding-left: 22px; border-left: 1px solid rgba(11,26,54,.18); }
.information span { display: block; margin-bottom: 7px; color: var(--ink-muted); font: 600 .55rem/1 var(--sans); letter-spacing: .17em; text-transform: uppercase; }
.information strong { font: 400 .7rem/1.55 var(--sans); letter-spacing: .04em; }
.information > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--paper-light);
  background: var(--navy);
  padding: 0 22px;
  text-decoration: none;
  transition: background .2s ease;
}
.information > a span { margin: 0; color: inherit; }
.information > a b { color: var(--copper-hot); font-size: 1.2rem; }
.information > a:hover { background: var(--copper); }
.information > a:hover b { color: var(--paper-light); }
.credit { position: fixed; right: 2px; top: 50%; margin: 0; color: rgba(238,230,216,.45); transform: translateY(-50%) rotate(90deg); transform-origin: center; font: 500 .48rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.policy { position: fixed; z-index: 12; left: 26px; bottom: 3px; margin: 0; color: rgba(238,230,216,.72); font: 500 .52rem/1 var(--sans); letter-spacing: .08em; }
.policy a { text-underline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  .masthead, .hero-copy, .portrait, .information { opacity: 0; animation: enter .9s cubic-bezier(.2,.75,.2,1) forwards; }
  .hero-copy { animation-delay: .08s; }.portrait { animation-delay: .18s; }.information { animation-delay: .28s; }
  .portrait-surface { animation: aperture 1.15s .18s cubic-bezier(.22,.78,.18,1) both; }
  h1 span, h1 strong { opacity: 0; animation: headline 1s cubic-bezier(.18,.72,.22,1) forwards; }
  h1 span { animation-delay: .12s; }
  h1 strong { animation-delay: .22s; }
  @keyframes enter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes headline { from { opacity: 0; transform: translateY(.28em); } to { opacity: 1; transform: translateY(0); } }
  @keyframes aperture {
    from { clip-path: polygon(48% 48%, 52% 48%, 52% 52%, 52% 52%, 52% 52%, 48% 52%, 48% 52%, 48% 48%); }
    to { clip-path: polygon(14% 0, 86% 0, 100% 11%, 100% 89%, 86% 100%, 14% 100%, 0 89%, 0 11%); }
  }
}

@media (max-width: 900px) {
  body { padding: 8px; }
  .stage { min-height: calc(100svh - 16px); clip-path: polygon(0 0, calc(100% - 38px) 0, 100% 38px, 100% 100%, 38px 100%, 0 calc(100% - 38px)); }
  .stage::before { background: linear-gradient(var(--copper), var(--copper)) 0 0 / calc(100% - 38px) 1px no-repeat, linear-gradient(45deg, transparent 48.4%, var(--copper) 49%, var(--copper) 51%, transparent 51.6%) 100% 0 / 38px 38px no-repeat, linear-gradient(var(--copper), var(--copper)) 100% 38px / 1px calc(100% - 38px) no-repeat, linear-gradient(var(--copper), var(--copper)) 38px 100% / calc(100% - 38px) 1px no-repeat, linear-gradient(45deg, transparent 48.4%, var(--copper) 49%, var(--copper) 51%, transparent 51.6%) 0 100% / 38px 38px no-repeat, linear-gradient(var(--copper), var(--copper)) 0 0 / 1px calc(100% - 38px) no-repeat; }
  .masthead { grid-template-columns: 1fr auto; padding: 12px 20px 0; }
  .brand { width: 92px; margin-top: -3px; }
  .coordinates { display: none; }
  .hero { grid-template-columns: 1fr; gap: 32px; padding: 24px 20px 34px; }
  .hero-copy { padding-top: 0; }
  .edition { margin-bottom: 20px; }
  h1 span { font-size: clamp(3.4rem, 15vw, 5.8rem); }
  h1 strong { font-size: clamp(2.7rem, 12vw, 4.9rem); }
  .intro { margin: 26px 0 0 14vw; }
  .portrait { justify-self: center; width: min(88vw, 680px); height: 48vh; min-height: 360px; }
  .information { grid-template-columns: 1fr 1fr; margin: 0 20px 20px; }
  .information > div:nth-child(3) { border-left: 0; }
  .information > a { min-height: 70px; }
  .credit { display: none; }
  .policy { left: 16px; bottom: 1px; }
}

@media (max-width: 520px) {
  .masthead { align-items: start; }
  .opening { margin-right: 24px; font-size: .52rem; }
  .hero { padding-top: 16px; }
  .edition { letter-spacing: .13em; }
  h1 span { font-size: 15vw; }
  h1 strong { font-size: 11.7vw; }
  .intro { max-width: 280px; font-size: .75rem; }
  .portrait { width: calc(100vw - 78px); height: 42vh; min-height: 330px; }
  .information { grid-template-columns: 1fr 1fr; }
  .information > div { padding-top: 14px; padding-bottom: 10px; }
  .information > div:nth-child(3) { display: none; }
  .information > a { grid-column: 1 / -1; border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}