/* Home page. Page-prefixed classes only; every component comes from site.css.
   Colors come from the semantic tokens (--fg, --fg-2, --line), so the same rules hold on bone, paper and ink. */

/* ---------- Number band under the hero ---------- */
.section.home-figures{padding-block:var(--s-5) calc(var(--section-y) * .5)}
.home-figures .rule{margin-bottom:var(--s-4)}
.home-figures__label{margin-bottom:var(--s-4)}
@media (min-width:44em) and (max-width:63.99em){.home-figures .statband{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:64em){.home-figures .statband{grid-template-columns:repeat(4,minmax(0,1fr))}}
.home-stat__title{display:block;margin-top:.35rem;font-weight:400;color:var(--fg-2)}
.home-rule{margin-bottom:var(--s-5)}
.home-more{margin-top:var(--s-4)}
/* a ruled section is separated by its hairline, so it does not also need a full top gap; the contact block sits just above the footer's own gap */
#work.section,#channels.section{padding-top:var(--s-4)}
#contact.section{padding-bottom:var(--s-4)}
/* dates and windows never break across lines */
[data-stamp="d:asOfDate"],[data-stamp$=".window"],[data-stamp="d:lifetimeReadDate"],[data-stamp="s:tools.asOf"],[data-stamp$=".published"],[data-stamp$=".publishedAt"]{white-space:nowrap}

/* ---------- Work: four cards, two over two ---------- */
.home-work{display:grid;gap:clamp(1.5rem,3vw,2.5rem);grid-template-columns:minmax(0,1fr)}
/* metric blocks hang from the tagline so their rules line up across a row; the link is pinned to the card floor */
.home-work .work-card__metric{margin-bottom:var(--s-3)}
.home-work .work-card>.arrow-link{margin-top:auto}
.work-card__metric .home-metric__name{color:var(--fg);font-weight:500}
/* a text-valued headline ("1 hour, 12 scenes") may wrap; keep its line height tight */
.home-work .work-card__metric .num{text-wrap:balance}
@media (min-width:44em){
  .home-work{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* where two cards sit side by side a tagline can wrap, so reserve two lines to keep the metric rules level */
@media (min-width:44em) and (max-width:63.99em){.home-work .tagline{min-height:2.8em}}

/* ---------- The Lab ---------- */
.home-tile__name{margin-bottom:1.25rem}
.home-lab__tiles{grid-template-columns:minmax(0,1fr)}
@media (min-width:52em){.home-lab__tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.home-proves{margin-top:var(--s-4);max-width:40rem;font-size:var(--fs-lede);line-height:1.5;color:var(--fg)}
.section--ink .home-more{margin-top:var(--s-3)}

/* ---------- Method: steps ---------- */
#method .steps{grid-template-columns:minmax(0,1fr)}
@media (min-width:44em){#method .steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:72em){#method .steps{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* where steps sit side by side, share rows (counter, verb, sentence, evidence) so every evidence hairline sits at one height */
@supports (grid-template-rows:subgrid){
  @media (min-width:44em){
    #method .steps{row-gap:0}
    #method .step{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:.9rem;align-content:start;padding-bottom:var(--s-4)}
    #method .step__artifact{margin-top:0;align-self:start}
  }
}

/* ---------- Guides ---------- */
/* .guide-card is a .card--cut and its link also pads itself, which doubles the inset; the link carries the padding here */
.home-guides .guide-card.card--cut{padding:0}
#guides.section{padding-bottom:calc(var(--section-y) * .6)}
@media (min-width:44em) and (max-width:63.99em){.home-guides{grid-template-columns:minmax(0,1fr)}}
@media (min-width:64em){.home-guides .chip{min-height:2.9rem}}

/* ---------- Channels: three compact rows ---------- */
.home-channels{border-bottom:1px solid var(--line)}
.home-channel{display:grid;gap:var(--s-3) var(--s-4);align-items:center;padding-block:var(--s-3);border-top:1px solid var(--line)}
.home-channel__format{margin-top:.5rem;max-width:30rem;font-size:var(--fs-small);line-height:1.5;color:var(--fg-2)}
.home-channel__subs{display:flex;flex-direction:column;gap:.25rem}
.home-channel__subs .num{font-size:clamp(2rem,3.4vw,3rem);line-height:1;color:var(--fg)}
.home-channel__subs .small{color:var(--fg-2)}
.home-channel .arrow-link{justify-self:start}
@media (min-width:56em){
  .home-channel{grid-template-columns:minmax(0,5fr) minmax(0,3fr) auto;padding-block:var(--s-4)}
  .home-channel .arrow-link{justify-self:end}
}

/* ---------- Studio: bio left, principles right ---------- */
.home-studio{display:grid;gap:var(--s-5)}
.home-studio__bio .lede{max-width:34rem;color:var(--fg)}
.home-studio .principles{border-top:0}
.home-studio .principle:first-child{padding-top:0;border-top:0}
@media (min-width:64em){
  .home-studio{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-5) var(--s-6);align-items:start}
}

/* ---------- Contact ---------- */
.home-contact__actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem}
.home-contact__actions .small{color:var(--fg-2)}
.home-contact__services{margin-bottom:var(--s-3)}