/* /missalignedtees/ only. Loaded after portfolio.css: it keeps that page
   structure (header, breadcrumb, buttons, facts, prose, footer) and swaps the
   purple site tokens for the MissAlignedTees palette, charcoal, mustard and gold.
   Gold is the text and button accent because mustard on charcoal is only 3.7:1. */

:root {
  --bg:          #232321;
  --surface:     #2C2C2A;
  --accent:      #FAC775;   /* button fill; charcoal text on it is 11:1 */
  --accent-text: #FAC775;   /* gold as text on --bg: 11.4:1 */
  --soft:        #FAC775;
  --tint:        #FFF4E6;
  --mustard:     #BA7517;

  --text:        #F4EFE6;
  --text-mid:    rgba(244, 239, 230, 0.84);
  --text-faint:  rgba(244, 239, 230, 0.66);
  --line:        rgba(250, 199, 117, 0.18);
  --line-strong: rgba(250, 199, 117, 0.38);
}

body { background: radial-gradient(ellipse 460px 320px at 50% 0, rgba(186, 117, 23, 0.26), rgba(35, 35, 33, 0) 74%) no-repeat var(--bg); }
/* No crystal behind this page; it belongs to the earlyspark brand, not the shop's. */
body::before { content: none; }

.btn-primary { color: var(--surface); }
.btn-primary:hover { background: #f2b85a; color: var(--surface); }
.site-link:hover { background: rgba(186, 117, 23, 0.28); }

.brand { display: flex; align-items: center; gap: 18px; }
/* The <picture> is the flex item, not the <img>: without this a long heading
   shrinks it to a sliver on narrow screens. */
.brand picture { flex: none; }
/* Lets the title wrap at its <wbr> instead of pushing the page wider. */
.brand > div { min-width: 0; }
.brand img { width: 88px; height: 88px; border-radius: 14px; border: 1px solid var(--line); flex: none; }
.tagline { font-family: var(--display); font-weight: 600; font-size: clamp(17px, 4.4vw, 21px); color: var(--accent-text); }

/* Grand opening promo above the shop button. */
.promo {
  display: flex; flex-direction: column; gap: 6px; padding: 16px 18px;
  border: 1px solid var(--accent-text); border-left-width: 4px; border-radius: 6px;
  background: var(--surface);
}
.promo-label { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-text); }
.promo-deal { font-family: var(--display); font-weight: 600; font-size: clamp(19px, 5vw, 22px); color: var(--text); }
.promo p { color: var(--text-mid); }
.promo code { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--accent-text); overflow-wrap: anywhere; }

/* Shirt cards: product photo on top, design text and one link per fit below. */
.shirts { display: grid; grid-template-columns: 1fr; gap: 16px; }
.shirt {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line-strong); border-radius: 6px;
  background: linear-gradient(150deg, var(--surface) 0%, rgba(44, 44, 42, 0.5) 100%);
}
.shirt img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-bottom: 1px solid var(--line); }
.shirt-body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; min-width: 0; }
/* Plain wrapping: the shared balance rule breaks titles early to even out lines. */
.shirt h3 { font-size: clamp(19px, 5vw, 22px); font-weight: 600; text-wrap: wrap; }
.shirt p { font-size: 16px; color: var(--text-mid); }
.shirt .actions { margin-top: 6px; }
.shirt .btn { min-height: 44px; padding: 10px 16px; font-size: 14px; }

/* Placeholder card that sends people to the full shop. Same 4:5 as a photo,
   drawn as a model mid-response: logo, a prompt line, and a progress bar stuck
   at 73%. Built from text and CSS so it stays sharp and is easy to reword. */
.shirt-more-art {
  aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.gen {
  width: 76%; display: flex; flex-direction: column; gap: 12px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.shirt .gen img { width: 30%; height: auto; aspect-ratio: auto; border: 0; border-radius: 10px; }
.shirt .gen p { margin: 0; font-size: clamp(13px, 3.6vw, 17px); line-height: 1.4; }
.shirt .gen-cmd { color: var(--accent-text); }
.shirt .gen-note { color: var(--text-faint); font-size: clamp(11px, 3vw, 14px); }
.gen-cursor {
  display: inline-block; width: 0.55em; height: 1.05em; margin-left: 0.25em;
  vertical-align: text-bottom; background: var(--accent-text);
  animation: gen-blink 1.1s steps(1) infinite;
}
.gen-bar { height: 12px; border: 1px solid var(--accent-text); border-radius: 3px; overflow: hidden; }
.gen-bar span { display: block; width: 73%; height: 100%; background: var(--mustard); }
@keyframes gen-blink { 50% { opacity: 0; } }

.prose h3 { font-size: clamp(17px, 4.6vw, 19px); font-weight: 600; }
.faq { display: flex; flex-direction: column; gap: 22px; }
.faq div { display: flex; flex-direction: column; gap: 6px; }

@media (min-width: 640px) {
  .shirts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand img { width: 104px; height: 104px; }
}