/* HIMYM edition: everything structural comes from /styles.css. This only adds the umbrella. */
.himym {
  --umbrella: #f7c325;
  --horn: #2b5fd9;
}

.himym h1 { font-size: clamp(28px, 7.6vw, 50px); line-height: 1.12; text-wrap: balance; text-shadow: 2px 2px 0 #fff, 4px 4px 0 var(--choc); }
.himym h1 .ast { font-size: 0.4em; vertical-align: top; line-height: 1.6; }
.narrator { font-style: italic; max-width: 470px; }
.icon-row { margin: 12px 0 0; font-size: 26px; letter-spacing: 0.25em; }

.himym .window-title { background: linear-gradient(90deg, var(--pink-deep), var(--pink) 70%, var(--umbrella)); }
.himym .signature-ink.blank { transform: rotate(-8deg); padding-left: 12px; }

.center-body { text-align: center; }
.center-body .pixel-button { margin-top: 4px; }

.lawyered {
  display: inline-block;
  padding: 0 5px;
  color: var(--stamp);
  border: 2px solid var(--stamp);
  border-radius: 4px;
  font-family: "Pixelify Sans", sans-serif;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.08em;
  transform: rotate(-3deg);
}

/* barney says */
.quote {
  min-height: 4.2em;
  display: grid;
  place-items: center;
  margin: 0 0 14px;
  padding: 14px 16px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  text-wrap: balance;
  background: var(--cream);
  border: 3px dashed var(--umbrella);
  border-radius: 10px;
}
.quote.is-swapping { animation: quote-in 0.3s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes quote-in { from { transform: scale(0.92) rotate(-1deg); opacity: 0; } }

/* intervention banner */
.banner {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 2px;
  margin: 2px 0 14px;
}
.banner span {
  flex: 0 1 28px;
  padding: 8px 0 12px;
  font-family: "Pixelify Sans", sans-serif;
  font-weight: 700;
  font-size: clamp(13px, 4.2vw, 20px);
  color: var(--choc);
  background: var(--umbrella);
  border: 2px solid var(--choc);
  clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
}
.banner span:nth-child(even) { background: var(--pink); color: #fff; transform: translateY(3px) rotate(2deg); }
.banner span:nth-child(odd) { transform: rotate(-2deg); }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* the bro code */
.articles { list-style: none; margin: 12px 0 0; padding: 0; counter-reset: article; }
.articles li {
  counter-increment: article;
  position: relative;
  padding: 10px 8px 10px 92px;
  border-bottom: 2px dotted var(--pink-soft);
}
.articles li[value] { counter-set: article 150; }
.articles li::before {
  content: "Article " counter(article);
  position: absolute;
  left: 4px;
  top: 10px;
  font-family: "Pixelify Sans", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--pink-deep);
  font-variant-numeric: tabular-nums;
}
.articles li:last-child { background: var(--cream); border-radius: 6px; border-bottom: 0; }

/* marshall's charts */
.chart { margin: 18px 0 0; padding: 12px; background: var(--cream); border: 2px solid var(--gold); border-radius: 8px; }
.chart svg { display: block; width: 100%; height: auto; font-family: "Nunito", sans-serif; }
.chart figcaption { margin-top: 8px; font-size: 14px; color: var(--choc-soft); text-wrap: pretty; }
.axis { stroke: var(--choc); stroke-width: 3; stroke-linecap: round; }
.diagonal { stroke: var(--pink-deep); stroke-width: 3; stroke-dasharray: 7 5; stroke-linecap: round; }
.axis-label { font-family: "Pixelify Sans", sans-serif; font-size: 12px; font-weight: 700; fill: var(--choc); letter-spacing: 0.08em; }
.chart-note { font-size: 11px; font-weight: 700; fill: var(--pink-deep); }
.chart-note.strong { font-size: 13px; fill: var(--choc); }
.zone { font-size: 12px; font-weight: 700; fill: var(--choc-soft); }
.zone.small { font-size: 10px; font-weight: 500; }
.you { fill: var(--gold); stroke: var(--choc); stroke-width: 3; }
.pie { fill: var(--umbrella); stroke: var(--choc); stroke-width: 3; }
.pie-sliver { stroke: var(--choc); stroke-width: 1; }
.dad-swatch { fill: var(--paper); stroke: var(--choc); stroke-width: 3; }
.pie-label { font-family: "Pixelify Sans", sans-serif; font-size: 24px; font-weight: 700; fill: var(--choc); }
.pie-label.small { font-size: 16px; }

#highFive.is-slapped { animation: five 0.3s ease; }
@keyframes five { 50% { transform: scale(1.15) rotate(-6deg); } }

@media (max-width: 420px) {
  .articles li { padding-left: 8px; padding-top: 28px; }
  .articles li::before { top: 8px; left: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .quote.is-swapping, #highFive.is-slapped { animation: none; }
}

/* generated sticker sheet: 3 columns x 2 rows, sliced by position */
.sticker-row { display: flex; justify-content: center; gap: 4px; margin: 14px 0 0; }
.sticker {
  flex: 0 1 58px;
  aspect-ratio: 1;
  background: url("art/icons.webp") 0 0 / 300% 200% no-repeat;
  filter: drop-shadow(2px 3px 0 rgba(74, 44, 26, 0.3));
}
.sticker.s1 { background-position: 50% 0; }
.sticker.s2 { background-position: 100% 0; }
.sticker.s3 { background-position: 0 100%; }
.sticker.s4 { background-position: 50% 100%; }
.sticker.s5 { background-position: 100% 100%; }
.sticker:nth-child(odd) { transform: rotate(-5deg); }
.sticker:nth-child(even) { transform: rotate(4deg) translateY(3px); }
.hero-photo { margin-top: 22px; }
.apron-sticker { float: right; width: 120px; margin: 0 0 6px 12px; text-align: center; transform: rotate(4deg); }
.apron-sticker img { display: block; width: 100%; height: auto; filter: drop-shadow(2px 3px 0 rgba(74, 44, 26, 0.3)); }
.apron-sticker figcaption { font-family: "Caveat", cursive; font-size: 22px; line-height: 1; color: var(--pink-deep); }

.who { display: block; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pink-deep); }
.platinum {
  margin: 22px 0 0;
  padding: 14px 16px;
  text-align: center;
  font-size: 18px;
  background: linear-gradient(135deg, #f4f4f6, #d9dbe3 45%, #fafafc 60%, #cfd2dc);
  border: 3px solid var(--choc);
  border-radius: 10px;
  box-shadow: 3px 3px 0 var(--choc);
}
.platinum p { margin: 0; text-wrap: balance; }
.inspection-status {
  margin: 14px 0 0;
  padding: 10px 12px;
  font-family: "Pixelify Sans", sans-serif;
  font-weight: 700;
  text-align: center;
  background: var(--cream);
  border: 3px dashed var(--stamp);
  border-radius: 8px;
}
.inspection-status.is-normal { border-color: var(--mint); background: #e6f8f0; }