/* ===== The Trilly studios and their characters (home N v2, #220; BUILD-NOTES Part B; docs/BRAND.md "Trilly characters"): the studios'
   tiles, a character's drawing and its "Trilly character" label, on the home and on /studios. The pages' own parts are prefixed st-;
   the rest of a studio's page is the browse pages' (browse.css). ===== */
.hn-av{display:block;flex:none;border-radius:50%}
.hn-av-xs{width:24px;height:24px}
.hn-av-sm{width:32px;height:32px}
.hn-av-st{width:52px;height:52px}
/* The label every character's name carries: an ice pill, navy words. */
.hn-char{display:inline-block;padding:1px 7px;border-radius:999px;background:var(--ice);color:var(--navy);font-size:var(--fs-small);font-weight:500;line-height:1.5;white-space:nowrap;transform:scale(.88);transform-origin:left center}

.hn-studios{margin-top:clamp(32px,4vw,48px);padding-top:24px;border-top:1px solid var(--line)}
.hn-studios-h{display:flex;align-items:baseline;gap:6px 16px;flex-wrap:wrap;margin-bottom:14px}
.hn-studios-h h3{margin:0}
.hn-studios-h p{margin:0;color:var(--soft);font-size:var(--fs-small)}
.hn-studio-row{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.hn-studio{position:relative;display:flex;align-items:center;gap:10px;min-height:76px;padding:10px 12px;border-radius:var(--r-sm);background:var(--white);box-shadow:inset 0 0 0 1px var(--line);color:var(--navy);text-decoration:none}
.hn-studio:hover,.hn-studio[aria-current="page"]{box-shadow:inset 0 0 0 2px var(--navy)}
.hn-studio:focus-visible{outline:var(--ring-line);box-shadow:var(--ring)}
.hn-studio-t{display:flex;flex-direction:column;min-width:0;font-size:var(--fs-small);line-height:1.3}
.hn-studio-t b{padding-right:22px;font-family:var(--display);font-weight:600}
.hn-studio-t>span{color:var(--soft)}
.hn-studio-t>.hn-studio-who{display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;margin-top:3px;color:var(--navy);font-weight:500}
.hn-studio-ic{position:absolute;top:8px;right:8px;display:inline-grid;width:22px;height:22px;opacity:.9}
.hn-studio-ic svg{width:100%;height:100%}


/* /studios: a card a studio, its name the link over the card, its jobs links of their own above it */
.st-cards-list{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.st-card{position:relative;display:flex;align-items:flex-start;gap:14px;padding:18px 18px 16px;border-radius:var(--r);background:var(--white);box-shadow:inset 0 0 0 1px var(--line)}
.st-card:hover{box-shadow:inset 0 0 0 2px var(--navy)}
.st-card:has(.st-card-link:focus-visible){outline:var(--ring-line);box-shadow:var(--ring)}
.st-card-av{width:56px;height:56px}
.st-card-t{display:flex;flex-direction:column;gap:6px;min-width:0;padding-right:20px}
.st-card-h{margin:0;font-size:var(--h3)}
.st-card-link{color:var(--navy);text-decoration:none}
.st-card-link::after{content:"";position:absolute;inset:0;border-radius:var(--r)}
.st-card-link:focus-visible{outline:none}
.st-card-about{margin:0;color:var(--soft)}
.st-card-who{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;margin:0;font-size:var(--fs-small);color:var(--navy);font-weight:500}
.st-card-n{color:var(--soft);font-weight:400}
.st-card-jobs{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0;padding:0;list-style:none}
.st-card-jobs li{min-width:0;max-width:100%}
.st-card-jobs .br-sit{min-height:36px;padding:4px 12px;max-width:100%;white-space:normal;font-size:var(--fs-small)}   /* a long job ("Keep the home repaired and maintained") wraps inside its card, never out of it */
.st-card-ic{position:absolute;top:14px;right:14px;display:inline-grid;width:24px;height:24px;opacity:.9}
.st-card-ic svg{width:100%;height:100%}

/* /studios: the ten faces in a row, overlapping, each a link to its studio (on a phone two rows of five, 44 px, not overlapping) */
.st-faces{display:flex;margin:20px 0 0;padding:0 0 0 8px;list-style:none}
.st-faces li{margin-left:-8px}
.st-faces li:hover,.st-faces li:focus-within{position:relative;z-index:1}
.st-face-link{display:block;border-radius:50%}
.st-face-link:hover .st-face{box-shadow:0 0 0 3px var(--navy)}
.st-face-link:focus-visible{outline:var(--ring-line);box-shadow:var(--ring)}
.st-face{width:48px;height:48px;box-shadow:0 0 0 3px var(--white)}

/* a studio's page */
.st-hero-in{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.st-av{width:96px;height:96px}
.st-hero-t{display:flex;flex-direction:column;gap:6px;min-width:0}
.st-hero-t h1{margin:0}
.st-kicker{margin:0;color:var(--warn);font-weight:600}
.st-count{white-space:nowrap}
.st-who{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0;color:var(--navy)}
.st-jobs-sec{margin-top:clamp(32px,4vw,48px)}
.st-jobs-sec h2{margin:0 0 12px}
.st-jobs-sec .st-jobs{flex-wrap:wrap;overflow:visible;margin-left:0;padding:0}
.st-jobs-sec .br-sit{flex:0 1 auto;max-width:100%;min-height:44px;padding-block:6px;white-space:normal}
/* Trust is said once on a studio's page, in About ("Trilly checks every skill before it's listed"), not on each card: the card leaves its
   tested mark off (ViewData HideProof) and the next signal, when it has one, takes its place (ratings and reviews stay). */
/* A card's picture is as tall as its example (the key line and up to three rows) and no taller, so its tint is a frame, never a grey slab
   (the design-studios-lows review, M2). Two cards on a row share the taller one's height, so their names start level: each card takes two
   rows of the list's grid (the picture, then the rest) and the row's picture track is the taller picture. An icon-only picture is a band of its own (below), not the
   base's 16:10. The picture is never shorter than its own content (min-height: max-content; the base's second row is minmax(0,1fr), which
   a subgrid can size at nothing), and the example is never cut by a height. */
.st-cards .card-pic:not(.card-pic-icon){aspect-ratio:auto;grid-template-rows:auto 1fr;min-height:max-content}
/* The shorter example sits in the middle of the room the taller one's picture gives its row, not at the top of a slab (trades, 1440). */
.st-cards .card-paper{max-height:none;align-self:center}
/* A picture with no example (an Original with none, or a key-less one) is a short band, not the base's 16:10, so it never stretches its row
   (the design-studios-9b review, L3); the studio's icon a phone's picture gives its place to is the same band. */
.st-cards .card-pic-icon{aspect-ratio:16/6}
.card-pic-ic{display:none}
/* A key that is half a sentence (CardPicture.IconAlways, no sentence end before its cut) is the studio's icon band at every width, as a
   card with no key line is, never a cut line (the design-studios-9d review, M1). */
.st-cards .card-pic.card-pic-always{aspect-ratio:16/6;min-height:0;grid-template-rows:none;place-items:center;align-content:center;padding:0}
.st-cards .card-pic-always>.card-tags,.st-cards .card-pic-always>.card-paper{display:none}
.st-cards .card-pic-always>.card-pic-ic{display:grid}
.card-pic-ic svg{width:72px;height:72px}
/* A studio with three skills or fewer: the heading over its cards says what the hero's count does, so it is for screen readers only
   (.vh, in the page; Trades at 1440 was 186 words, warn over 185; no fact is lost: the count is in the hero). Its space stays: closing it
   pulled the next heading onto the first screen and the count back to 186. */
/* The base .card is a size container (container-type), and layout containment makes a subgrid an ordinary grid (measured in Edge: the
   card's rows read "none" and its picture shrank to 30 px as a flex item); the studios' cards are wider than the 300 px container
   query wherever they show more than one example line, so they are not containers. */
.st-cards>.card{container-type:normal;display:grid;grid-template-rows:subgrid;grid-row:span 2;row-gap:0}
/* Three or more skills: three cards a row from a wide screen, so the last row isn't a lone card. */
@media (min-width:1081px){.st-cards:has(>.card:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}}
.st-about{margin-top:clamp(48px,6vw,72px);padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--line)}
.st-about h2{margin:0 0 12px}
.st-about p{max-width:44rem;margin:0 0 10px;color:var(--soft)}
.st-about .hn-studio-row{margin-top:24px}

/* /studios: ten studios two a row (five rows), so no row ends on a lone card: three a row left one alone, whichever way the last row was set. */
@media (max-width:1080px){
  .hn-studio-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* A studio's skills two a row from a tablet up: three put 191 words on a 1024 px first screen and 212 at 1440 (the card directory's
   185/195 is what the two-up cards keep); the heroes without the dead space under the line (the review, M5), from a tablet up: on a
   phone the cards' words would come into the first screen. */
@media (min-width:761px){
  .st-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* A key is its first whole sentence (CardPicture.WholeSentences, 110 characters at most): five lines at the narrowest card, so the
     base's two-line cut never meets it; six is the room for a font that runs wide (the design-studios-9c review, L1). */
  .st-cards .card-key{-webkit-line-clamp:6;line-clamp:6}
  .st-hero.br-hero-list{padding-bottom:32px}
  .st-hero+.br-results{padding-top:16px}
}
@media (max-width:760px){
  /* A phone's first screen within the card directory's 60/65 words (the pre-check), its space used rather than cut: on /studios less
     blank under the hero (its cards are short); on a studio's page 24 px under the hero and above the list, the jobs' chips under the
     skills, and fewer words above the list: the kicker, the count and the list's heading go to wider screens (the crumb says "Trilly
     studios", the hero names the studio; the heading stays for screen readers). */
  .st-hero.br-hero-list{padding-bottom:24px}
  .st-hero+.br-results{padding-top:24px}
  .st-hero-index.br-hero-list{padding-bottom:40px}
  .st-hero-index+.br-results{padding-top:16px}
  .st-kicker,.st-count{display:none}
  .st-list-line h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .st-list-line{position:relative;margin:0}
  .st-card-jobs{display:none}
  /* A phone's card picture shows the key's first whole sentence (CardPicture.PhoneKeyLength: two lines at most) and no rows (the card
     directory's budget, 60/65 words, PAGES.md); when no sentence fits it is the studio's icon, so it is a frame round a sentence or an icon
     band, not a grey slab, and never a cut sentence (the design-studios-9b and 9c reviews, M1). */
  .st-cards .card-paper>p:nth-child(n+2){display:none}
  .st-cards .card-pic.card-pic-long{aspect-ratio:16/6;min-height:0;grid-template-rows:none;place-items:center;align-content:center;padding:0}
  .st-cards .card-pic-long>.card-tags,.st-cards .card-pic-long>.card-paper{display:none}
  .st-cards .card-pic-long>.card-pic-ic{display:grid}
  /* Room for a focused tile's 6 px halo inside the swipe row, as the cards' row has (the studios-lows review, M1): the home's strip
     and each studio page's "other studios"; the negative margin keeps the tiles where they were. */
  .hn-studio-row{display:flex;overflow-x:auto;padding:8px 8px 14px;margin:-8px -8px 0;scroll-padding-inline:8px;scrollbar-width:none}
  .st-about .hn-studio-row{margin-top:16px}
  .hn-studio-row li{flex:0 0 240px}
  .st-av{width:72px;height:72px}
  .st-faces{padding-left:0}
  .st-faces li{margin-left:0}
  .st-face{width:44px;height:44px}
}
/* One column of cards, a phone's: /studios' swipe sideways, one a screen (two a row from 601 px, the 9c review, L4), and the ten faces in two
   rows of five; the jobs are each studio page's. */
@media (max-width:600px){
  .st-cards-list{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:8px 8px 14px;margin:-8px -8px 0;scroll-padding-inline:8px}
  .st-card{flex:0 0 calc(100% - 28px);scroll-snap-align:start}
  .st-faces{display:grid;grid-template-columns:repeat(5,44px);gap:8px 12px;justify-content:start}
}
/* The narrow two-up cards (a studio's skills, 601 to 760 px; the picture is about 265 px wide): a sentence longer than
   CardPicture.PhoneNarrowKeyChars gives its place to the studio's icon too. The ten faces fit one row (10 x 44 + 9 x 10 = 530 px). */
@media (min-width:601px) and (max-width:760px){
  .st-faces{display:flex;gap:10px}
  .st-cards .card-pic.card-pic-mid{aspect-ratio:16/6;min-height:0;grid-template-rows:none;place-items:center;align-content:center;padding:0}
  .st-cards .card-pic-mid>.card-tags,.st-cards .card-pic-mid>.card-paper{display:none}
  .st-cards .card-pic-mid>.card-pic-ic{display:grid}
}