/* Desktop hero experiment: larger Vitruvian figure and a low, horizontal lab instrument. */
@media (min-width:1101px){
  .hero:has(.lab-readout){
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    grid-template-rows:440px auto;
    column-gap:32px;
    row-gap:16px;
    align-items:start;
    min-height:0;
    padding-top:100px;
    padding-bottom:44px;
  }

  .hero:has(.lab-readout) .hero-copy{
    grid-column:1;
    grid-row:1 / 3;
    align-self:start;
    max-width:560px;
    padding-top:62px;
  }

  .hero:has(.lab-readout) h1{max-width:18ch}
  .hero:has(.lab-readout) h1>span:last-child{white-space:normal}

  .hero:has(.lab-readout) .hero-figure{
    grid-column:2;
    grid-row:1;
    width:100%;
    height:440px;
    min-height:0;
    margin:0;
    align-self:start;
    overflow:visible;
  }

  .hero:has(.lab-readout) .statue-wrap{
    width:100%;
    max-width:none;
    height:100%;
    max-height:none;
  }

  .hero:has(.lab-readout) .statue{
    width:auto;
    height:112%;
    max-width:none;
    max-height:none;
    object-fit:contain;
    filter:drop-shadow(0 0 42px rgba(201,162,75,.23));
  }

  .hero:has(.lab-readout) .hero-figure::after{
    width:84%;
    background:radial-gradient(circle,rgba(201,162,75,.2),transparent 66%);
  }

  .hero:has(.lab-readout) .hero-figure .plinth{
    bottom:1.5%;
    width:72%;
  }

  .hero .lab-readout{
    grid-column:2;
    grid-row:2;
    position:relative;
    inset:auto;
    width:100%;
    max-width:none;
    min-height:0;
    margin:0;
    padding:14px 20px 10px;
    border-color:rgba(201,162,75,.48);
    background:linear-gradient(110deg,rgba(12,11,9,.98),rgba(22,19,13,.96));
    box-shadow:0 22px 60px rgba(0,0,0,.24),inset 0 1px 0 rgba(227,184,78,.08);
  }

  [data-theme="light"] .hero .lab-readout{
    background:linear-gradient(110deg,rgba(239,234,223,.98),rgba(226,216,196,.96));
  }

  .hero .lab-content{
    display:grid;
    grid-template-columns:170px minmax(210px,1fr) minmax(175px,.75fr);
    grid-template-rows:auto auto auto;
    column-gap:22px;
    align-items:center;
  }

  .hero .lab-label{grid-column:1;grid-row:1;align-self:end}
  .hero .lab-value{grid-column:1;grid-row:2 / 4;align-self:start;margin:2px 0 0;font-size:36px;line-height:1.2}
  .hero .lab-scale{grid-column:2;grid-row:1;align-self:end;margin:0 0 8px}
  .hero .lab-ticks{grid-column:2;grid-row:2;height:18px;margin:0}
  .hero .lab-caption{grid-column:3;grid-row:1;margin:0;align-self:end}
  .hero .lab-explanation{grid-column:3;grid-row:2;margin:0;line-height:1.45}
  .hero .lab-link{grid-column:3;grid-row:3;margin:2px 0 0;line-height:1.35}

  .hero .lab-explore{
    display:grid;
    grid-template-columns:max-content minmax(0,1fr);
    align-items:center;
    gap:18px;
    margin-top:8px;
    padding-top:7px;
    border-top:1px solid var(--hair-soft);
    font-size:var(--type-label);
  }

  .hero .lab-slider{min-height:28px}
  .hero .lab-footer{margin-top:2px;padding-top:0;border-top:0}
}

@media (min-width:761px) and (max-width:1100px){
  .hero:has(.lab-readout) .hero-figure{height:500px}
  .hero:has(.lab-readout) .statue-wrap{max-width:520px}
  .hero .lab-readout{width:100%;max-width:760px}
  .hero .lab-content{
    display:grid;
    grid-template-columns:160px minmax(240px,1fr);
    column-gap:24px;
  }
  .hero .lab-label,.hero .lab-value{grid-column:1}
  .hero .lab-scale,.hero .lab-ticks,.hero .lab-caption,.hero .lab-explanation,.hero .lab-link{grid-column:2}
}

@media (max-width:760px){
  .hero:has(.lab-readout) .hero-figure{order:1!important}
  .hero .lab-readout{order:2!important;max-width:100%}
}

/* Size the instrument by its available space, including browser zoom. */
.hero .lab-readout{min-width:0;max-width:100%;box-sizing:border-box;container-type:inline-size}
.hero .lab-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto auto auto;gap:10px 24px;min-width:0}
.hero .lab-content>*{min-width:0;max-width:100%;box-sizing:border-box;white-space:normal;overflow-wrap:anywhere}
.hero .lab-label{grid-column:1;grid-row:1;align-self:end}
.hero .lab-value{grid-column:1;grid-row:2;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0;position:static}
.hero .lab-value small{position:static;transform:none;margin:0;white-space:nowrap}
.hero .lab-scale{grid-column:2;grid-row:1;margin:0;align-self:center;width:100%}
.hero .lab-ticks{grid-column:2;grid-row:2;align-self:start;height:auto;margin:0;width:100%}
.hero .lab-caption{grid-column:1/-1;grid-row:3;margin:12px 0 0;line-height:1.4}
.hero .lab-explanation{grid-column:1/-1;grid-row:4;margin:0;line-height:1.5}
.hero .lab-link{grid-column:1/-1;grid-row:5;margin:0;line-height:1.4}
.hero .lab-explore{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;min-width:0;margin-top:20px}
.hero .lab-slider{min-width:0;width:100%;box-sizing:border-box}
.hero .lab-footer{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center}
.hero .lab-motion{max-width:100%;white-space:normal;overflow-wrap:anywhere;text-align:start;min-height:44px}
@container (max-width:360px){
  .hero .lab-content{grid-template-columns:minmax(0,1fr);gap:10px}
  .hero .lab-label{grid-column:1;grid-row:1}
  .hero .lab-value{grid-column:1;grid-row:2}
  .hero .lab-scale{grid-column:1;grid-row:3;margin-top:8px}
  .hero .lab-ticks{grid-column:1;grid-row:4}
  .hero .lab-caption{grid-row:5}
  .hero .lab-explanation{grid-row:6}
  .hero .lab-link{grid-row:7}
}