/* Home page (top of page proof). Page-specific layer on top of site/css/base.css. */

/* hero: sheet title, then the plate */
.hero { padding: 64px 0 0; }
.hero-head { align-items: end; padding-bottom: 44px; row-gap: 32px; }
.hero-head .eyebrow { margin: 0 0 26px; }
.hero-head .lede { margin: 0; }
.hero-head .ctas { justify-content: flex-end; align-self: end; }
.hero-head .ctas, .listing-card .ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-plate { position: relative; margin: 0; overflow: hidden; }
.hero-plate img { width: 100%; height: auto; aspect-ratio: 1296 / 600; object-fit: cover; }
.hero-plate .callout { margin-left: -5px; }
.plate-cap { display: flex; gap: 16px; align-items: baseline; padding: 14px 0 0; font-size: 13px; line-height: 19px; color: var(--ink-2); border-bottom: 1px solid var(--slate-30); padding-bottom: 14px; }
.plate-cap span { font-size: 12px; font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--navy); font-feature-settings: var(--tnum); }

/* section 1: practice schedule */
.practice { padding-top: 104px; }
.practice-intro .eyebrow { margin: 0 0 24px; }
.practice-intro .h1 { margin: 0 0 24px; }
.practice-intro p.muted { font-size: 18px; line-height: 28px; max-width: 34ch; }
.schedule { padding-top: 4px; }
.sched-head, .sched-row { display: grid; grid-template-columns: 64px 180px 1fr; column-gap: 24px; align-items: baseline; }
.sched-head { padding-bottom: 12px; border-bottom: 1px solid var(--navy); }
.sched-row { padding: 22px 0 20px; border-bottom: 1px solid var(--slate-30); }
.sched-row .fig { font-size: 22px; line-height: 28px; color: var(--slate); }
.sched-row h3 { font-family: var(--font-cond); font-weight: 500; font-size: 30px; line-height: 32px; }
.sched-row p { margin: 0; font-size: 17px; line-height: 26px; color: var(--ink); }
.sides { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; margin-top: 36px; }
.sides .label { margin: 0 0 8px; }
.side-list { margin: 0; font-family: var(--font-cond); font-weight: 500; font-size: 22px; line-height: 30px; }
.side-list i { display: inline-block; width: 6px; height: 6px; background: var(--slate); margin: 0 12px; vertical-align: middle; transform: translateY(-2px); }

/* section 2: the live listing */
.listing { padding: 96px 0 112px; }
.listing-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 20px; margin-bottom: 40px; border-bottom: 1px solid var(--rule); }
.listing-head .eyebrow { margin: 0; }
.listing-photo { position: relative; margin: 0; overflow: hidden; }
.listing-photo img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.listing-card .chip-gold { margin-bottom: 20px; }
.listing-card .h1 { margin: 0 0 8px; }
.listing-card .addr { font-family: var(--font-cond); font-weight: 500; font-size: 22px; line-height: 28px; margin: 0 0 16px; }
.listing-card .summary { font-size: 17px; line-height: 26px; color: var(--ink); margin: 0 0 24px; }
.listing-card .kf { margin: 0 0 24px; }
.listing-card .rate { margin: 0 0 28px; }

@media (max-width: 900px) {
  .hero { padding-top: 40px; }
  .hero-head { padding-bottom: 32px; }
  .hero-head .ctas { justify-content: flex-start; }
  .hero-head .display br { display: none; }
  .hero-plate img { aspect-ratio: 4 / 3; object-position: 62% 50%; }
  /* 4:3 crop at 62% keeps the corner at 61.75% of width at every size: flip the plate to the left of it */
  .hero-plate .callout { left: auto !important; right: calc(38.25% - 5px) !important; top: 38% !important; margin: 0; flex-direction: row-reverse; }
  .hero-plate .callout .addr-part { display: none; }
  .listing-photo { margin-bottom: 32px; }
  .sched-head { display: none; }
  .sched-row { grid-template-columns: 44px 1fr; }
  .sched-row p { grid-column: 2; margin-top: 6px; }
  .sides { grid-template-columns: 1fr; row-gap: 24px; }
}
@media (max-width: 640px) {
  .plate-cap { flex-direction: column; gap: 4px; }
  .callout .plate { padding: 7px 10px 6px; font-size: 11px; }
  .callout .plate b { font-size: 12px; }
  .callout .line { width: 28px; }
  .listing-head { flex-direction: column; gap: 12px; }
  .listing-card .rate .amt .fig { font-size: 44px; }
}