/* Project details: company and context, role, bullets, then media. */
#company-dialog {
  --panel-padding:32px;
  font-family:inherit;
  font-size:inherit;
  font-weight:inherit;
  line-height:inherit;
  letter-spacing:normal;
  color:var(--ink);
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
}
#company-dialog .company-header {
  display:grid;
  grid-template-columns:36px minmax(0,1fr) 44px;
  align-items:start;
  column-gap:12px;
  min-height:0;
  padding:24px var(--panel-padding) 12px;
  border-bottom:0;
  touch-action:pan-y;
}
#company-dialog .company-logo { grid-column:1; width:36px; height:36px; margin-top:1px; }
#company-dialog .company-heading { grid-column:2; min-width:0; }
#company-dialog .company-header h2 {
  margin:0;
  font-size:22px;
  line-height:1.25;
  font-weight:600;
  letter-spacing:-.3px;
  text-wrap:balance;
}
#company-dialog .company-header h2 .company-age { white-space:nowrap; }
#company-dialog .company-role {
  margin:8px 0 0;
  max-width:62ch;
  color:var(--text-secondary,#6a6a6a);
  font-size:15px;
  font-weight:450;
  line-height:1.45;
  letter-spacing:normal;
  text-wrap:balance;
}
#company-dialog .company-close {
  position:static;
  grid-column:3;
  grid-row:1;
  align-self:start;
  width:44px;
  height:44px;
  margin-top:-7px;
}
#company-dialog .company-body {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:24px;
  padding:12px var(--panel-padding) 44px;
  overflow:visible;
  flex:0 0 auto;
}
#company-dialog .company-media,
#company-dialog .company-copy { display:block; min-width:0; flex:none; }
#company-dialog .company-gallery { background:none; border-radius:14px; }
#company-dialog .gallery-stage { background:var(--card); border-radius:14px; }
#company-dialog .company-detail {
  max-width:none;
  color:var(--ink);
  font-family:inherit;
  font-size:inherit;
  font-weight:inherit;
  line-height:1.55;
  letter-spacing:normal;
}
#company-dialog .company-detail .work-achievements {
  display:block;
  margin:0;
  padding-left:21px;
  list-style:disc;
}
#company-dialog .company-detail .work-achievements>li {
  margin:0;
  padding:0 0 0 2px;
  border:0;
  background:none;
}
#company-dialog .company-detail .work-achievements>li+li { margin-top:12px; }
#company-dialog .company-detail li::marker { color:#777; font-size:.75em; }
#company-dialog .gallery-toolbar { padding-top:12px; }
#company-dialog .gallery-toolbar .gallery-dot { width:28px; height:32px; }
#company-dialog .company-credit {
  margin:8px 0 0;
  color:var(--text-secondary,#6a6a6a);
  font:450 12px/1.5 'DM Sans',sans-serif;
  letter-spacing:normal;
}
#company-dialog .company-credit[hidden] { display:none; }
#company-dialog .company-credit a {
  color:inherit;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
}
@media (min-width:761px) { #company-dialog { width:min(800px,67vw); } }
@media (max-width:760px) {
  #company-dialog { --panel-padding:20px; }
  #company-dialog .company-header {
    grid-template-columns:30px minmax(0,1fr) 44px;
    column-gap:10px;
    padding-top:34px;
    padding-bottom:12px;
  }
  #company-dialog .company-logo { width:30px; height:30px; margin-top:0; }
  #company-dialog .company-header h2 { font-size:19px; line-height:1.3; letter-spacing:-.2px; }
  #company-dialog .company-role { font-size:14px; }
  #company-dialog .company-close { margin-top:-9px; }
  #company-dialog .company-body {
    gap:22px;
    padding-top:12px;
    padding-bottom:max(32px,env(safe-area-inset-bottom));
  }
  #company-dialog .gallery-toolbar { padding-top:8px; }
}

/* Native vertical scroll everywhere; only the small handle drags the mobile sheet. */
@media(max-width:760px) {
  #company-dialog .sheet-handle {
    top:0;
    width:56px;
    height:26px;
    background:none;
    touch-action:none;
  }
  #company-dialog .sheet-handle::before {
    content:'';
    position:absolute;
    top:10px;
    left:9px;
    width:38px;
    height:4px;
    border-radius:4px;
    background:#aaa;
  }
}

/* Additional works read as part of the same scrolling case study. */
#company-dialog .company-subprojects { display:block; min-width:0; }
#company-dialog .company-subproject { min-width:0; margin-top:24px; }
#company-dialog .company-subproject + .company-subproject { margin-top:48px; }
#company-dialog .company-subproject-heading { margin:0 0 24px; }
#company-dialog .company-subproject-heading h2 { margin:0; font-size:22px; line-height:1.25; font-weight:600; letter-spacing:-.3px; text-wrap:pretty; }
#company-dialog .company-subproject > .company-gallery { margin-top:24px; }
#company-dialog .gallery-slide > img.gallery-skill-search { object-fit:cover; object-position:bottom; }
@media(max-width:760px) {
 #company-dialog .company-subproject { margin-top:14px; }
 #company-dialog .company-subproject + .company-subproject { margin-top:36px; }
 #company-dialog .company-subproject-heading h2 { font-size:19px; line-height:1.3; letter-spacing:-.2px; }
}

#company-dialog .company-subproject .company-gallery { container-type:inline-size; }
#company-dialog .company-subproject .company-gallery .gallery-track { height:auto; aspect-ratio:16 / 9; }

#company-dialog .company-subproject .company-gallery .gallery-slide { height:100%; min-height:0; aspect-ratio:auto; }