/* Exergue's collector's cabinet, scoped to the studio homepage. */
@font-face {
  font-family:ExergueFraunces;
  src:url('exergue/brand/design-assets/fonts/Fraunces.ttf') format('truetype');
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}

.chapter-exergue {
  --ex-home-paper:#f4f0e7;
  --ex-home-bronze:#d6b785;
  grid-template-columns:minmax(0, 1.25fr) minmax(0, .9fr);
  grid-template-areas:"showcase copy";
  gap:clamp(36px, 5vw, 80px);
  padding-bottom:80px;
  min-height:0;
  scroll-margin-top:40px;
}

.ex-home-copy { grid-area:copy; min-width:0; }

.ex-home-copy h3 {
  position:relative;
  width:max-content;
  max-width:100%;
  margin:30px 0 34px;
  padding-bottom:23px;
  color:var(--ex-home-paper);
  font-family:ExergueFraunces,Georgia,serif;
  font-weight:500;
  letter-spacing:-.055em;
  line-height:1.08;
}

.ex-home-copy h3 > span {
  position:absolute;
  bottom:0;
  left:0;
  width:23%;
  height:3px;
  background:var(--ex-home-bronze);
}

.ex-home-copy .ex-home-tagline {
  max-width:25ch;
  margin-bottom:20px;
  font:400 clamp(1.8rem, 1.3rem + 1.1vw, 2.5rem)/1.18 ExergueFraunces,Georgia,serif;
  letter-spacing:-.035em;
  color:var(--ex-home-paper);
}

.ex-home-copy > p:not(.ex-home-tagline) { max-width:38ch; margin-bottom:28px; }

.ex-home-details {
  display:grid;
  gap:13px;
  padding:0 0 0 18px;
  margin:0 0 32px;
  border-left:1px solid #d6b78570;
  list-style:none;
  font-size:var(--type-small);
  line-height:1.6;
  color:#a8b5b9;
}

.ex-home-details li > span { display:block; color:#e0d6c3; font-weight:500; }
.ex-home-actions { display:flex; flex-wrap:wrap; align-items:center; gap:16px 26px; }
.ex-home-actions .launch { color:#172c26; background:var(--ex-home-paper); border-color:var(--ex-home-paper); }
.ex-home-actions .launch:hover { background:#e5cfab; border-color:#e5cfab; }
.ex-home-film-link { display:inline-flex; align-items:center; gap:12px; min-height:44px; font-size:var(--type-control); color:#d6c4a7; }
.ex-home-film-link:hover { text-decoration:underline; text-underline-offset:5px; }
.ex-home-copy .status { margin:19px 0 0; color:#a8b5b9; }

.ex-home-showcase { grid-area:showcase; margin:0; min-width:0; }
.ex-home-cabinet {
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr);
  align-items:center;
  gap:32px 30px;
  padding:28px clamp(22px, 2.5vw, 40px) 24px;
  border:1px solid #c3b48835;
  border-radius:3px;
  background:radial-gradient(ellipse at 25% 35%, #355c4d, #213e35 62%, #192d29);
  color:var(--ex-home-paper);
  box-shadow:inset 0 0 65px #09151224;
}

.ex-home-cabinet-heading, .ex-home-cabinet-footer {
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
}

.ex-home-cabinet-heading { padding-bottom:20px; border-bottom:1px solid #dec89d3b; }
.ex-home-cabinet-heading .section-label { color:#deccad; font-size:.75rem; }
.ex-home-cabinet-heading > span:last-child { font-size:.6875rem; color:#adbcb0; white-space:nowrap; }
.ex-home-kicker { display:block; margin-bottom:18px; font-size:.75rem; letter-spacing:.09em; text-transform:uppercase; color:#c0cfc4; }
.ex-home-specimen { min-width:0; padding-bottom:12px; }
.ex-home-banknote { width:100%; transform:rotate(-6deg); margin:34px 0 36px; box-shadow:0 16px 20px #08161055; }
.ex-home-object-label { display:flex; flex-wrap:wrap; align-items:baseline; gap:5px 14px; padding-bottom:18px; border-bottom:1px solid #dec89d3b; }
.ex-home-object-label > span:first-child { font:400 clamp(1.5rem, 1rem + 1.2vw, 2.25rem)/1.2 ExergueFraunces,Georgia,serif; letter-spacing:-.035em; }
.ex-home-object-label > span:last-child { font-size:.75rem; color:#d3c3a9; }
.ex-home-specimen > p { margin-top:18px; font:400 clamp(1rem, .8rem + .45vw, 1.25rem)/1.45 ExergueFraunces,Georgia,serif; color:#c6d2c6; }
.ex-home-app { min-width:0; }
.ex-home-app img { width:100%; border:4px solid #15251f; border-radius:15px; box-shadow:0 18px 35px #08161060; }
.ex-home-cabinet-footer { padding-top:19px; border-top:1px solid #dec89d3b; font-size:.75rem; color:#c6d2c6; }
.ex-home-cabinet-footer > span:last-child { color:#d9bd90; }
.ex-home-showcase figcaption { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 16px; margin-top:17px; font-size:.75rem; color:#99ada8; }
.ex-home-showcase figcaption a { text-decoration:underline; text-underline-offset:4px; }
.ex-home-showcase figcaption a:hover { color:var(--ex-home-paper); }

@media(max-width:1100px) {
  .chapter-exergue { grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr); gap:35px; }
  .ex-home-cabinet { gap:26px 22px; padding-inline:22px; }
  .ex-home-cabinet-heading > span:last-child { display:none; }
  .ex-home-cabinet-footer { flex-wrap:wrap; gap:5px 12px; }
}

@media(max-width:900px) {
  .chapter-exergue { grid-template-columns:minmax(0, 1fr); grid-template-areas:"copy" "showcase"; gap:36px; }
  .ex-home-copy > p:not(.ex-home-tagline) { max-width:50ch; }
  .ex-home-details { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; max-width:680px; }
  .ex-home-showcase { width:min(100%, 680px); justify-self:center; }
  .ex-home-cabinet { padding-inline:32px; gap:28px 36px; }
  .ex-home-cabinet-heading > span:last-child { display:block; }
}

@media(max-width:600px) {
  .chapter-exergue { padding-bottom:45px; }
  .ex-home-copy h3 { margin-block:25px 26px; padding-bottom:19px; }
  .ex-home-copy .ex-home-tagline { font-size:clamp(1.65rem, 6.5vw, 2.2rem); }
  .ex-home-details { grid-template-columns:minmax(0, 1fr); gap:12px; }
  .ex-home-cabinet { grid-template-columns:minmax(0, .9fr) minmax(0, 1fr); padding:20px 16px 18px; gap:25px 18px; }
  .ex-home-cabinet-heading { padding-bottom:16px; }
  .ex-home-cabinet-heading .section-label { font-size:.6875rem; }
  .ex-home-cabinet-heading > span:last-child { display:none; }
  .ex-home-kicker { font-size:.6875rem; letter-spacing:.07em; margin-bottom:14px; }
  .ex-home-banknote { margin-block:24px; }
  .ex-home-object-label { padding-bottom:14px; }
  .ex-home-specimen > p { font-size:1rem; margin-top:14px; }
  .ex-home-app img { border-width:3px; border-radius:10px; }
  .ex-home-cabinet-footer { font-size:.6875rem; padding-top:16px; }
}

@media(prefers-reduced-motion:reduce) { .ex-home-actions .launch { transition:none; } }
@media(forced-colors:active) {
  .ex-home-cabinet { border-color:CanvasText; }
  .ex-home-copy h3 > span { background:CanvasText; }
}
