/* hoodies.html: the full hoodie and sweatshirt page. Sections reuse .layers (sections/pieces/pieces.css)
   and the product cards (sections/drop/drop.css). */
.hood { padding-top: var(--header-h); }
.hood__head {
  max-width: var(--max); margin: 0 auto; padding: clamp(40px, 7vw, 96px) var(--gutter) clamp(28px, 4vw, 48px);
}
.hood__head .layers__kicker { margin-bottom: 14px; }
.hood__title {
  font-size: var(--fs-5); font-weight: 900; font-stretch: 140%; letter-spacing: -.05em; line-height: .92; margin-bottom: 18px;
}
.hood__title em { font-family: var(--serif); font-style: italic; font-weight: 400; font-stretch: normal; letter-spacing: -.02em; }
.hood__lede { font-size: var(--fs-2); max-width: 52ch; color: var(--fg); }
.hood__jump { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 24px; }
.hood__jump .size { height: 36px; padding: 0 14px; font-size: .75rem; text-decoration: none; }

.hood__worn { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) clamp(48px, 7vw, 96px); }
.hood__worn .layers__title { margin-bottom: clamp(20px, 3vw, 36px); }
.hood__group { scroll-margin-top: calc(var(--header-h) + 12px); }

.hood__charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.hood__chart {
  display: grid; gap: 6px; text-align: left; padding: 18px 20px; min-height: 92px;
  border: 1.5px solid var(--line); border-radius: var(--radius); background: transparent; color: var(--fg);
  font: inherit; cursor: pointer; transition: border-color .2s ease, background-color .2s ease;
}
.hood__chart:hover, .hood__chart:focus-visible { border-color: var(--fg); background: rgba(255, 255, 255, .04); }
.hood__chart-name { font-family: var(--display); font-weight: 900; font-stretch: 115%; font-size: var(--fs-2); line-height: 1.1; }
.hood__chart-meta { font-family: var(--mono); font-size: var(--fs-0); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }

/* the comparison table (same look as minimalist.html's, which keeps its own copy) */
.mini-weight { display: block; height: 6px; margin-top: 8px; border-radius: 3px; background: rgba(255, 255, 255, .2); }
.mini-weight i { display: block; width: var(--w); height: 100%; border-radius: inherit; background: var(--fg); transform-origin: left center; }
.mini-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.mini-table th, .mini-table td { padding: 16px 16px 16px 0; text-align: left; vertical-align: top; border-top: 1px solid var(--line); font-weight: 400; }
.mini-table tbody th { width: 16%; font-weight: 700; font-size: var(--fs-0); }
.mini-table thead th { border-top: 0; padding-top: 0; vertical-align: bottom; }
.mini-dots { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.mini-dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
.layers__scroll { overflow-x: auto; }
.layers__table { min-width: 720px; }
.layers__table thead th { font-family: var(--display); font-weight: 900; font-stretch: 112%; font-size: var(--fs-1, 1rem); line-height: 1.15; padding-bottom: 10px; border-bottom: 4px solid var(--line); }
.layers__table td { color: var(--fg); }
.layers__note { margin-top: 16px; max-width: 70ch; font-size: var(--fs-0); color: var(--muted); }