/* d2up.net - the one-page front door. Colours and type from the guide (site/css/site.css). */
:root {
  --bg: #000; --stone: #15120f; --stone-2: #1c1813; --iron: #3b342b; --iron-hi: #5a5042;
  --bone: #d9ccae; --ash: #7d7464; --gold: #c9a95c; --gold-hi: #e3c77e; --blood: #9e2418; --soul: #8fbfe0;
  --font-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --font-body: "EB Garamond", Garamond, Georgia, serif;
}
* { box-sizing: border-box; }
html { height: 100%; }
body {
  margin: 0; min-height: 100%; background: var(--bg); color: var(--bone);
  font-family: var(--font-body); font-size: 1.1875rem; line-height: 1.6;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 2rem 1rem; text-align: center;
}
main { width: 100%; max-width: 36rem; display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
img { display: block; max-width: 100%; height: auto; }
.logo { margin: 0; }
.line { margin: 0; font-size: 1.3rem; }
.line + .line { margin-top: -1rem; color: var(--ash); font-size: 1.05rem; }
.rule { width: 60%; height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--blood) 20%, var(--blood) 80%, transparent); opacity: .7; }
.actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin: 0; }
.btn {
  display: inline-block; padding: .7rem 1.3rem; border: 1px solid var(--iron-hi); border-radius: 2px;
  background: var(--stone-2); color: var(--bone); text-decoration: none;
  font-family: var(--font-display); font-size: .82rem; letter-spacing: .18em; text-transform: uppercase;
}
.btn.primary { border-color: var(--gold); color: var(--gold-hi); }
.btn:hover, .btn:focus-visible { border-color: var(--gold-hi); color: var(--gold-hi); background: var(--stone); }
:focus-visible { outline: 2px solid var(--soul); outline-offset: 2px; }
footer { margin-top: 3rem; font-size: .85rem; color: var(--ash); max-width: 36rem; }
footer img { margin: 0 auto .6rem; opacity: .8; }
a { color: var(--gold); }
.up { color: #3fa34d; }
.down { color: #c8382a; }
.shots {
  width: 100%; max-width: 60rem; margin-top: 3rem;
  display: grid; grid-template-columns: 1fr; gap: 1rem;
}
/* Five shots: one wide over two pairs on a tablet, two wide over three on a desktop. */
@media (min-width: 36rem) {
  .shots { grid-template-columns: repeat(2, 1fr); }
  .shots figure:first-child { grid-column: 1 / -1; }
}
@media (min-width: 60rem) {
  .shots { grid-template-columns: repeat(6, 1fr); }
  .shots figure { grid-column: span 2; }
  .shots figure:nth-child(-n+2) { grid-column: span 3; }
}
.shots figure { margin: 0; }
.shots a { display: block; border: 1px solid var(--iron); }
.shots a:hover, .shots a:focus-visible { border-color: var(--gold); }
.shots img { width: 100%; aspect-ratio: 1972 / 1200; object-fit: cover; }
.shots figcaption { margin-top: .35rem; font-size: .95rem; color: var(--ash); }