/* StyleGauge - homepage and the shared feature strip. Built on tokens.css. */

.sg-section { padding: var(--sg-space-15) 0; border-top: var(--sg-border); }
.sg-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sg-space-9); flex-wrap: wrap; }
.sg-section__title { margin: 0; font-size: var(--sg-display-lg); font-weight: 900; letter-spacing: var(--sg-display-lg-ls); line-height: var(--sg-display-lg-lh); text-transform: uppercase; }
.sg-section__lede { margin: var(--sg-space-5) 0 0; max-width: 56ch; font-size: var(--sg-body-lg); line-height: 1.55; color: var(--sg-body); }

/* ---- hero: 60/40, never centred -------------------------- */
.sg-hero { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: var(--sg-space-15); align-items: center; padding: var(--sg-space-15) 0; }
.sg-hero__title { margin: 0; font-size: var(--sg-display-2xl); font-weight: 900; letter-spacing: var(--sg-display-2xl-ls); line-height: var(--sg-display-2xl-lh); text-transform: uppercase; }
.sg-hero__sub { margin: var(--sg-space-7) 0 0; max-width: 46ch; font-size: var(--sg-body-lg); line-height: 1.55; color: var(--sg-body); }
.sg-hero__cta { display: flex; gap: var(--sg-space-4); flex-wrap: wrap; margin-top: var(--sg-space-10); }

.sg-hero__demo { border: var(--sg-border); border-radius: var(--sg-radius-lg); background: var(--sg-white); padding: var(--sg-space-8); }
.sg-demo__head { display: flex; align-items: center; gap: var(--sg-space-5); padding-bottom: var(--sg-space-6); border-bottom: var(--sg-border); }
.sg-demo__thumb { width: 46px; height: 58px; border-radius: var(--sg-radius-md); background: var(--sg-beige); flex: 0 0 auto; }
.sg-demo__name { margin: 0; font-size: var(--sg-body-sm); font-weight: 600; }
.sg-demo__meta { margin: 2px 0 0; font-size: 11.5px; color: var(--sg-slate); }
.sg-demo__rows { list-style: none; margin: 0; padding: 0; }
.sg-demo__rows li { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--sg-space-5); padding: var(--sg-space-5) 0; border-bottom: var(--sg-border); }
.sg-demo__rows li:last-child { border-bottom: 0; }
.sg-demo__store { font-size: var(--sg-body-sm); font-weight: 600; }
.sg-demo__note { grid-column: 1; font-size: 11.5px; color: var(--sg-slate); }
.sg-demo__rows .sg-price { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: var(--sg-price-lg); }
.sg-demo__rows li.is-best .sg-price { color: var(--sg-success); }
.sg-demo__link { display: inline-block; margin-top: var(--sg-space-6); font-size: var(--sg-body-sm); font-weight: 600; color: var(--sg-ink); }

/* ---- stats ---------------------------------------------- */
.sg-stats { border-top: var(--sg-rule-ink); border-bottom: var(--sg-border); }
.sg-stats ul { list-style: none; margin: 0; padding: var(--sg-space-10) 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sg-space-9); }
.sg-stats strong { display: block; font-size: var(--sg-display-md); font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sg-stats span { display: block; margin-top: 4px; font-size: var(--sg-label); font-weight: 700; letter-spacing: var(--sg-label-ls); text-transform: uppercase; color: var(--sg-slate); }

/* ---- rails ---------------------------------------------- */
.sg-rail { list-style: none; margin: var(--sg-space-10) 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: var(--sg-space-7); }
.sg-card__badge--save { background: var(--sg-success); color: var(--sg-white); border-color: var(--sg-success); }
.sg-card__at { font-size: 11.5px; color: var(--sg-slate); }

/* ---- colour grid ---------------------------------------- */
.sg-colorgrid { list-style: none; margin: var(--sg-space-10) 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: var(--sg-space-5); }
.sg-colorgrid a { display: flex; align-items: center; gap: var(--sg-space-4); padding: var(--sg-space-5); border: var(--sg-border); border-radius: var(--sg-radius-lg); text-decoration: none; color: var(--sg-ink); }
.sg-colorgrid a:hover { border-color: var(--sg-ink); background: var(--sg-cream); }
.sg-colorgrid__chip { width: 26px; height: 26px; border-radius: var(--sg-radius-full); background: var(--sw); flex: 0 0 auto; border: 1px solid transparent; }
.sg-colorgrid__chip.has-border { border-color: var(--sg-line); }
.sg-colorgrid__name { font-size: var(--sg-body-sm); font-weight: 600; flex: 1 1 auto; }
.sg-colorgrid__n { font-size: 11px; color: var(--sg-mute); font-variant-numeric: tabular-nums; }

/* ---- occasions: a formality ladder, not a card row ------- */
.sg-occgrid { list-style: none; margin: var(--sg-space-10) 0 0; padding: 0; border-top: var(--sg-border); }
.sg-occgrid li { border-bottom: var(--sg-border); }
.sg-occgrid a { display: grid; grid-template-columns: minmax(0,1fr) 240px; align-items: center; gap: var(--sg-space-9); padding: var(--sg-space-7) 0; text-decoration: none; color: var(--sg-ink); }
.sg-occgrid a:hover .sg-occgrid__name { text-decoration: underline; }
.sg-occgrid__name { font-size: var(--sg-heading-md); font-weight: 700; text-transform: uppercase; letter-spacing: .01em; }
.sg-occgrid__rank { display: block; height: 3px; background: var(--sg-line); border-radius: 2px; position: relative; }
.sg-occgrid__rank i { position: absolute; inset: 0 auto 0 0; width: var(--f); background: var(--sg-ink); border-radius: 2px; }

/* ---- outfits -------------------------------------------- */
.sg-outfits { list-style: none; margin: var(--sg-space-10) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sg-space-9); }
.sg-outfit { display: flex; flex-direction: column; border: var(--sg-border); border-radius: var(--sg-radius-lg); overflow: hidden; }
.sg-outfit__img { display: flex; align-items: center; justify-content: center; aspect-ratio: 4/5; background: var(--sg-beige); }
.sg-outfit__body { padding: var(--sg-space-7); display: flex; flex-direction: column; gap: var(--sg-space-4); }
.sg-outfit__name { margin: 0; font-size: var(--sg-heading-md); font-weight: 700; text-transform: none; letter-spacing: 0; line-height: 1.25; }
.sg-outfit__name a { color: var(--sg-ink); text-decoration: none; }
.sg-outfit__pieces { margin: 0; font-size: var(--sg-body-sm); color: var(--sg-slate); line-height: 1.5; }
.sg-outfit__foot { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sg-space-5); padding-top: var(--sg-space-5); border-top: var(--sg-border); }
.sg-price--lg { font-size: var(--sg-price-lg); }
.sg-outfit__meta { font-size: 11.5px; color: var(--sg-slate); }
.sg-outfit__warn { margin: 0; font-size: 11.5px; color: var(--sg-amber); }

/* ---- how it works --------------------------------------- */
.sg-how { padding: var(--sg-space-15) 0; border-top: var(--sg-border); }
.sg-how ol { list-style: none; margin: var(--sg-space-10) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sg-space-9); counter-reset: none; }
.sg-how li { display: flex; flex-direction: column; gap: var(--sg-space-4); padding-top: var(--sg-space-6); border-top: var(--sg-rule-ink); }
.sg-how__n { font-size: var(--sg-label); font-weight: 700; letter-spacing: var(--sg-label-ls); color: var(--sg-slate); font-variant-numeric: tabular-nums; }
.sg-how strong { font-size: var(--sg-heading-md); font-weight: 700; text-transform: uppercase; letter-spacing: .01em; }
.sg-how span:last-child { font-size: var(--sg-body-sm); color: var(--sg-body); line-height: 1.6; }

/* ---- boys band ------------------------------------------ */
.sg-boys { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--sg-space-13); align-items: center; margin: var(--sg-space-13) 0 0; padding: var(--sg-space-13); background: var(--sg-cream); border-radius: var(--sg-radius-xl); }
.sg-boys__text p { margin: var(--sg-space-5) 0 var(--sg-space-8); max-width: 44ch; font-size: var(--sg-body); line-height: 1.6; color: var(--sg-body); }
.sg-boys__bands { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sg-space-3); }
.sg-boys__bands a { display: flex; align-items: center; justify-content: space-between; padding: var(--sg-space-6) var(--sg-space-7); background: var(--sg-white); border: var(--sg-border); border-radius: var(--sg-radius-md); font-size: var(--sg-body-sm); font-weight: 600; color: var(--sg-ink); text-decoration: none; }
.sg-boys__bands a::after { content: "\2192"; color: var(--sg-slate); }
.sg-boys__bands a:hover { border-color: var(--sg-ink); }

/* ---- feature strip: closes every page ------------------- */
.sg-strip { margin-top: var(--sg-space-15); background: var(--sg-cream); border-top: var(--sg-border); }
.sg-strip ul { list-style: none; margin: 0; padding: var(--sg-space-13) var(--sg-space-11); display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sg-space-9); max-width: var(--sg-wide, 1440px); margin-inline: auto; }
.sg-strip li { display: flex; flex-direction: column; gap: var(--sg-space-3); }
.sg-strip__mark { width: 30px; height: 30px; border-radius: var(--sg-radius-full); background: var(--sg-gold-tint); border: 1px solid var(--sg-gold); }
.sg-strip strong { font-size: var(--sg-body-sm); font-weight: 700; }
.sg-strip span:last-child { font-size: 12.5px; line-height: 1.55; color: var(--sg-slate); }

/* ---- responsive ----------------------------------------- */
@media (max-width: 1279px) {
  .sg-rail, .sg-colorgrid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .sg-strip ul { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1023px) {
  .sg-hero { grid-template-columns: 1fr; gap: var(--sg-space-12); }
  .sg-stats ul, .sg-how ol { grid-template-columns: repeat(2, 1fr); }
  .sg-rail, .sg-colorgrid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .sg-outfits { grid-template-columns: 1fr; }
  .sg-boys { grid-template-columns: 1fr; padding: var(--sg-space-10); }
  .sg-occgrid a { grid-template-columns: minmax(0,1fr) 120px; }
}
@media (max-width: 767px) {
  .sg-rail, .sg-colorgrid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sg-space-5); }
  .sg-strip ul { grid-template-columns: 1fr; padding: var(--sg-space-10) var(--sg-space-8); gap: var(--sg-space-7); }
  .sg-hero__cta { flex-direction: column; }
  .sg-section, .sg-how { padding: var(--sg-space-13) 0; }
}
/* ---- hubs, documents and the outfit page ----------------- */

.sg-catgrid { list-style: none; margin: var(--sg-space-10) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--sg-space-5); }
.sg-catgrid a { display: flex; align-items: center; justify-content: space-between; gap: var(--sg-space-4); min-height: 76px; padding: var(--sg-space-6) var(--sg-space-7); border: var(--sg-border); border-radius: var(--sg-radius-lg); text-decoration: none; color: var(--sg-ink); font-weight: 600; font-size: var(--sg-body-sm); }
.sg-catgrid a:hover { border-color: var(--sg-ink); background: var(--sg-cream); }
.sg-catgrid em { font-style: normal; font-size: 11px; color: var(--sg-mute); font-variant-numeric: tabular-nums; }

.sg-boys__bands--wide { grid-template-columns: repeat(5, minmax(0,1fr)); display: grid; gap: var(--sg-space-3); margin-top: var(--sg-space-9); }
.sg-note-privacy { margin: var(--sg-space-7) 0 0; font-size: var(--sg-body-sm); color: var(--sg-slate); }
.sg-outfits--index { grid-template-columns: repeat(3, minmax(0,1fr)); }

/* Dress-code explainer: the ranking asset on an occasion page. */
.sg-explainer { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: var(--sg-space-13); padding: var(--sg-space-12) 0; border-top: var(--sg-rule-ink); align-items: start; }
.sg-explainer__lede { margin: var(--sg-space-6) 0 0; font-size: var(--sg-body-lg); line-height: 1.6; color: var(--sg-body); max-width: 60ch; }
.sg-explainer__scale { border: var(--sg-border); border-radius: var(--sg-radius-lg); padding: var(--sg-space-8); }
.sg-ladder { list-style: none; margin: var(--sg-space-6) 0 0; padding: 0; display: grid; gap: var(--sg-space-4); counter-reset: none; }
.sg-ladder li { display: grid; grid-template-columns: minmax(0,1fr) 84px; align-items: center; gap: var(--sg-space-5); font-size: var(--sg-body-sm); }
.sg-ladder a { color: var(--sg-slate); text-decoration: none; }
.sg-ladder a:hover { color: var(--sg-ink); text-decoration: underline; }
.sg-ladder li.is-here a { color: var(--sg-ink); font-weight: 700; }
.sg-ladder i { display: block; height: 3px; border-radius: 2px; background: var(--sg-line); position: relative; }
.sg-ladder i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--f); background: var(--sg-slate); border-radius: 2px; }
.sg-ladder li.is-here i::after { background: var(--sg-ink); }

/* Outfit detail. */
.sg-look { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: var(--sg-space-13); padding: var(--sg-space-12) 0; align-items: start; }
.sg-look__preview { aspect-ratio: 4/5; border-radius: var(--sg-radius-lg); background: var(--sg-beige); display: flex; align-items: center; justify-content: center; }
.sg-look__panel { display: flex; flex-direction: column; gap: var(--sg-space-7); }
.sg-look__intro { margin: 0; font-size: var(--sg-body-lg); line-height: 1.55; color: var(--sg-body); }
.sg-slots { list-style: none; margin: 0; padding: 0; border-top: var(--sg-border); }
.sg-slot { display: grid; grid-template-columns: 46px minmax(0,1fr) auto; gap: var(--sg-space-5); align-items: center; padding: var(--sg-space-6) 0; border-bottom: var(--sg-border); }
.sg-slot.is-hero { background: var(--sg-cream-2); }
.sg-slot__thumb { width: 46px; height: 58px; border-radius: var(--sg-radius-md); background: var(--sg-beige); }
.sg-slot__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sg-slot__label { font-size: var(--sg-label); font-weight: 700; letter-spacing: var(--sg-label-ls); text-transform: uppercase; color: var(--sg-slate); }
.sg-slot__name { font-size: var(--sg-body-sm); font-weight: 600; color: var(--sg-ink); text-decoration: none; }
.sg-slot__name:hover { text-decoration: underline; }
.sg-slot__price { text-align: right; display: flex; flex-direction: column; gap: 2px; }
.sg-slot__at { font-size: 11px; color: var(--sg-slate); }
.sg-look__total { display: flex; align-items: baseline; gap: var(--sg-space-5); flex-wrap: wrap; padding-top: var(--sg-space-6); }
.sg-look__totallabel { font-size: var(--sg-label); font-weight: 700; letter-spacing: var(--sg-label-ls); text-transform: uppercase; color: var(--sg-slate); }
.sg-look__across { font-size: var(--sg-body-sm); color: var(--sg-slate); }

/* Editorial documents: About, Contact, legal. */
.sg-doc { padding: var(--sg-space-13) 0 var(--sg-space-15); }
.sg-doc__title { font-size: var(--sg-display-lg); font-weight: 900; letter-spacing: var(--sg-display-lg-ls); line-height: var(--sg-display-lg-lh); text-transform: uppercase; margin: 0 0 var(--sg-space-9); }
.sg-doc h2 { font-size: var(--sg-heading-lg); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; margin: var(--sg-space-12) 0 var(--sg-space-5); }
.sg-doc h3 { font-size: var(--sg-heading-md); font-weight: 700; text-transform: none; letter-spacing: 0; margin: var(--sg-space-9) 0 var(--sg-space-4); }
.sg-doc p, .sg-doc li { font-size: var(--sg-body); line-height: 1.7; color: var(--sg-body); max-width: var(--sg-max-measure); }
.sg-doc ul, .sg-doc ol { padding-left: 1.15em; display: grid; gap: var(--sg-space-4); }
.sg-doc a { color: var(--sg-ink); }
.sg-lead { font-size: var(--sg-body-lg) !important; color: var(--sg-ink) !important; font-weight: 500; line-height: 1.55 !important; }
.sg-panel { padding: var(--sg-space-9); background: var(--sg-cream); border-left: var(--sg-border-accent); border-radius: 0 var(--sg-radius-lg) var(--sg-radius-lg) 0; margin: var(--sg-space-7) 0; }
.sg-panel p:last-child { margin-bottom: 0; }
.sg-steps { counter-reset: sgstep; list-style: none; padding-left: 0 !important; }
.sg-steps li { counter-increment: sgstep; position: relative; padding-left: 2.4em; }
.sg-steps li::before { content: counter(sgstep); position: absolute; left: 0; top: 0; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--sg-gold-ink); }

@media (max-width: 1023px) {
  .sg-catgrid, .sg-boys__bands--wide { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .sg-explainer, .sg-look { grid-template-columns: 1fr; gap: var(--sg-space-10); }
  .sg-outfits--index { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 767px) {
  .sg-catgrid, .sg-boys__bands--wide { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sg-outfits--index { grid-template-columns: 1fr; }
  .sg-slot { grid-template-columns: 40px minmax(0,1fr); }
  .sg-slot__price { grid-column: 2; text-align: left; }
}
/* The outfit preview is a composite of the real pieces, not a staged photo. */
.sg-look__preview.has-shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sg-space-3); padding: var(--sg-space-6); align-content: center; }
.sg-look__preview.has-shots img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--sg-radius-md); background: var(--sg-panel-alt, #E3DCD2); }
.sg-look__preview.has-shots img:first-child:nth-last-child(3) { grid-column: span 2; aspect-ratio: 16/10; }
.sg-slot__thumb { overflow: hidden; }
.sg-slot__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-card__img img, .sg-outfit__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Editorial imagery. Every slot owns its ratio so nothing shifts on load. */
.sg-hero__visual { position: relative; }
.sg-hero__shot { margin: 0; border-radius: var(--sg-radius-lg); overflow: hidden; background: var(--sg-beige); aspect-ratio: 3/2; }
.sg-hero__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-hero__visual .sg-hero__demo { position: absolute; left: -32px; right: 24px; bottom: -28px; box-shadow: var(--sg-shadow-pop); background: var(--sg-white); }
.sg-hero { padding-bottom: var(--sg-space-15); }

.sg-boys { grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); }
.sg-boys__shot { grid-column: 1 / -1; margin: 0 0 var(--sg-space-5); border-radius: var(--sg-radius-lg); overflow: hidden; background: var(--sg-beige); aspect-ratio: 16/9; max-height: 300px; }
.sg-boys__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sg-occhero { margin: var(--sg-space-9) 0 0; border-radius: var(--sg-radius-lg); overflow: hidden; background: var(--sg-beige); aspect-ratio: 16/10; }
.sg-occhero img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 1023px) {
  .sg-hero__visual .sg-hero__demo { position: static; margin-top: var(--sg-space-7); box-shadow: none; }
  .sg-boys { grid-template-columns: 1fr; }
  .sg-boys__shot { max-height: 200px; }
  .sg-occhero { aspect-ratio: 16/11; }
}

/* ============================================================
   IMAGE PLACEMENT SPEC
   Every container declares its own aspect-ratio and an #EAE4DC
   ground, so nothing shifts as a file loads and letterboxing is
   never white. Contained images: 12px radius, hairline border,
   no shadow. Full-bleed: none of those.
   ============================================================ */

/* Home hero. Subject sits right of centre; the empty left third is
   load-bearing because the price widget sits on it. Never crop right. */
.sg-hero__shot { background: var(--sg-beige); border: var(--sg-border); }
.sg-hero__shot img { object-position: 70% 40%; }
.sg-hero__visual .sg-hero__demo { max-height: 52%; overflow: hidden; left: -24px; right: 24px; bottom: 24px; }

/* Boys band. 16:9 file in a wide strip; cap raised to 360px per spec so
   the garment row is not fighting a 4.8:1 crop. */
.sg-boys__shot { max-height: 360px; background: var(--sg-beige); border: 0; border-radius: var(--sg-radius-lg); }
.sg-boys__shot img { object-position: 50% 50%; }

/* Occasion and season heroes share one component. Focal point is set
   inline from term meta. */
.sg-occhero { border: var(--sg-border); }

/* Audience landing heroes. Edge to edge compositions: three figures,
   five garments. Horizontal cropping removes content, so these keep
   their 2:1 at every width. */
.sg-audhero { margin: var(--sg-space-9) 0 0; aspect-ratio: 2/1; overflow: hidden; border-radius: var(--sg-radius-lg); border: var(--sg-border); background: var(--sg-beige); }
.sg-audhero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; }

/* About hero. Three tags must all survive, so this never crops narrower. */
.sg-about-hero { margin: 0 0 var(--sg-space-12); }
.sg-about-hero img { width: 100%; aspect-ratio: 2/1; object-fit: cover; border-radius: var(--sg-radius-lg); border: var(--sg-border); background: var(--sg-beige); display: block; }

/* 404. The one page where a centred composition is correct. */
.sg-404shot { margin: var(--sg-space-10) auto 0; max-width: 560px; aspect-ratio: 16/10; overflow: hidden; border-radius: var(--sg-radius-lg); border: var(--sg-border); background: var(--sg-beige); }
.sg-404shot img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; display: block; }

/* Empty results. Sits inside the existing dashed panel. */
.sg-empty__shot { margin: 0 auto var(--sg-space-7); max-width: 420px; aspect-ratio: 4/3; overflow: hidden; border-radius: var(--sg-radius-lg); border: var(--sg-border); background: var(--sg-beige); }
.sg-empty__shot img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 55%; display: block; }

@media (max-width: 767px) {
  /* A five-row table over a 390px photograph leaves neither legible,
     so the widget comes out of the image and stacks beneath it. */
  .sg-hero__visual .sg-hero__demo { position: static; max-height: none; margin-top: var(--sg-space-7); box-shadow: none; }

  /* Contain, not cover: at 390px a cover crop shows two of five garments.
     Safe only because this file's own ground matches --sg-beige. If the
     file is ever replaced with one on a different ground, revisit this. */
  .sg-boys__shot { max-height: none; }
  .sg-boys__shot img { object-fit: contain; }

  /* A full-figure 16:10 at 390px renders the subject about 120px tall.
     Portrait crop against the focal point instead. */
  .sg-occhero { aspect-ratio: 4/5; }

  /* These two carry their meaning across the full width; scale, do not crop. */
  .sg-audhero, .sg-about-hero img { aspect-ratio: 2/1; }

  /* The clear-filters button matters more than the illustration. */
  .sg-empty__shot { display: none; }
}