.divs { padding-bottom: 0; }
.divs__intro { display: flex; justify-content: space-between; align-items: flex-end; align-items: last baseline; gap: 32px; margin-bottom: clamp(40px, 5vw, 80px); }
.divs__intro .h1 { max-width: none; }
.legend { display: flex; flex-direction: column; gap: 4px; flex: none; padding-bottom: 0; }
.legend a { display: flex; align-items: center; min-height: 26px; }

.dv { padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(64px, 7vw, 112px); scroll-margin-top: 8px; }
.dv__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); row-gap: 36px; border-top: 1px solid var(--fg); padding-top: 22px; }
.dv__id { grid-column: 1 / 7; }

.dv__brand { margin-bottom: clamp(18px, 2vw, 28px); --dvn: var(--t-heading); }
.dv__name { font-weight: 500; font-size: var(--dvn); line-height: var(--lh-heading); letter-spacing: var(--tr-heading); }
.dv__tag { font-weight: 500; font-size: var(--t-subhead); line-height: var(--lh-heading); letter-spacing: var(--tr-heading); max-width: 12em; text-wrap: balance; }
.dv__body { grid-column: 7 / 13; }
.dv__desc, .pv__desc { font-size: var(--t-body); line-height: var(--lh-body); max-width: 40em; text-wrap: pretty; }

.sched { margin-top: 28px; container-type: inline-size; }
.sched__head { display: flex; justify-content: space-between; padding-bottom: 9px; border-bottom: 1px solid var(--fg); }
.sched__head h4 { font-weight: 300; }
.sched ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gut); }
.sched li { padding: 9px 0; border-bottom: 1px solid var(--rule); font-weight: 300; font-size: var(--t-small); line-height: var(--lh-text); text-wrap: balance; }

@container (max-width: 589px) { .sched ul { grid-template-columns: 1fr; } }

.dv__views { display: flex; flex-wrap: wrap; column-gap: var(--gut); row-gap: 32px; margin-top: clamp(40px, 5vw, 72px); align-items: flex-start; }
.dv__view { min-width: 0; flex: none; }
.dv__ph { position: relative; overflow: hidden; }
.dv__ph > img, .dv__ph > .lv { position: absolute; inset: 0; width: 100%; height: 100%; }
.dv__ph > img { object-fit: cover; }
.dv__view .vt { margin-top: 14px; }
.dv__view .vt__t { text-wrap: balance; }
.vt__m--p { display: none; }
@media (min-width: 641px) { .dv__view .vt__t b { white-space: nowrap; } }

.pv { padding-top: 0; }
.pv__k { color: var(--fg2); margin-bottom: 14px; }
.pv__title { font-weight: 500; font-size: var(--t-heading); line-height: var(--lh-heading); letter-spacing: var(--tr-heading); max-width: 9em; text-wrap: balance; }
.pv__sites { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gut); margin-top: 28px; }
.pv__sites li { display: flex; align-items: baseline; gap: 14px; border-top: 1px solid var(--fg); padding-top: 14px; }
.pv__n { font-weight: 500; font-size: var(--t-heading); line-height: 1; letter-spacing: var(--tr-heading); font-variant-numeric: tabular-nums; }
.pv__c { display: flex; flex-direction: column; gap: 6px; font-weight: 500; font-size: var(--t-lead); line-height: var(--lh-text); }
.pv__book { margin-top: 28px; border-top: 1px solid var(--rule-2); }
.pv__photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--gut); margin-top: clamp(40px, 5vw, 72px); align-items: start; }
.pv__photos[hidden] { display: none; }
.pv__ph .ph { overflow: hidden; }
.pv__ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pv__ph figcaption { margin-top: 10px; }

@media (max-width: 1023px) {
  .dv__id, .dv__body { grid-column: 1 / -1; }
  .dv__desc, .pv__desc { max-width: 34em; }
}
@media (max-width: 640px) {
  .divs__intro { flex-direction: column; align-items: flex-start; gap: 24px; }
  .legend { flex-direction: row; flex-wrap: wrap; gap: 4px 22px; padding-bottom: 0; }
  .sched ul { grid-template-columns: 1fr; }
  .dv__views { row-gap: 26px; }

  .dv__view.is-compact .vt__m--p { display: block; }
  .dv__view.is-compact .vt__t span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
}

@media (pointer: coarse) and (max-width: 640px) {
  .legend a { position: relative; }
  .legend a::after { content: ''; position: absolute; top: -9px; bottom: -9px; left: -6px; right: -6px; }
}