/* Shared detail-page type + measure.
   Used by layout.html (published site) and preview.html (builder preview),
   so the builder shows the real thing rather than an approximation. */

@font-face{
  font-family:'Suisse Intl';
  src:url('SuisseIntl-Book.otf') format('opentype');
  font-weight:400; font-display:swap;
}

.hk-type{
  font-family:'Suisse Intl',"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:12.5px; line-height:1.5; letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}

/* one shared measure: everything below sits inside these margins */
.hk-detail{ padding:96px 0 160px; }
.wrap{ width:min(1120px, 80vw); margin:0 auto; }

.dhead{ margin-bottom:92px; }
.dhead h1{ font-size:12.5px; font-weight:400; }
.dhead .sub{ color:var(--dim); margin-bottom:16px; }
.dhead .desc{ max-width:44em; }

.sec{ margin-bottom:104px; }
.sec:last-child{ margin-bottom:0; }
.sechead{ margin-bottom:34px; }
.sechead .lbl{
  display:block; color:var(--dim);
  padding-bottom:9px; margin-bottom:14px;
  border-bottom:1px solid var(--line);
}
.sechead h2{ font-size:15px; font-weight:400; margin-bottom:10px; }
.sechead p{ max-width:46em; }

.row{ display:grid; gap:26px; margin-bottom:26px; }
.row:last-child{ margin-bottom:0; }
.row.full{ grid-template-columns:1fr; }
.row.w1{ grid-template-columns:1fr; width:64%; margin-left:auto; margin-right:auto; }
.row.w2{ grid-template-columns:1fr 1fr; }
.row.w3{ grid-template-columns:1fr 1fr 1fr; }
.row figure{ background:var(--ph); overflow:hidden; }
.row img, .row video{ width:100%; height:auto; display:block; }
.row figure.fit{ position:relative; }
.row figure.fit img, .row figure.fit video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

@media (max-width:760px){
  .wrap{ width:88vw; }
  .row.w1{ width:100%; }
  .row.w3{ grid-template-columns:1fr 1fr; }
  .hk-detail{ padding-top:80px; }
}