/* Fan Finder page (/findme): homepage look (loaded after /fm/app.css and /styles.css). */
body{background:var(--bg)}
.fm-main{max-width:none;padding:0}
.fm-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr);
  grid-template-areas:"copy art" "pick art" "cta art";grid-template-rows:auto auto 1fr;
  column-gap:clamp(36px,6vw,96px);row-gap:22px;align-items:start;padding-block:46px 64px}
.fm-copy{grid-area:copy}
.fm-form{display:contents}
.fm-pick{grid-area:pick;margin:0}
.fm-cta{grid-area:cta;align-self:start;margin-top:8px}
.fm-art{grid-area:art;align-self:start}
.fm-h1{font-family:var(--display);font-weight:700;letter-spacing:.01em;line-height:1.02;
  font-size:clamp(2rem,3.5vw,3.6rem);margin:0 0 14px;text-shadow:none;overflow-wrap:break-word}
.fm-h1 span{display:block;white-space:normal}
.fm-copy .description{margin:0}
.fm-pick legend{font-family:inherit;font-size:.78rem;font-weight:850;letter-spacing:.16em;text-transform:uppercase;color:#ced7eb;margin-bottom:12px}
.fm-art .pv-h{font-family:inherit;font-size:.74rem;font-weight:850;letter-spacing:.2em;text-transform:uppercase;color:#ced7eb;margin:0 0 12px}
.fm-art .card{margin:0;border:1px solid rgba(240,245,255,.2);box-shadow:0 28px 70px rgba(0,0,0,.5),0 0 64px rgba(8,70,180,.14)}
.tile:has(input:checked){border-color:var(--red)}
.fm-create{border:1px solid #ff546a;cursor:pointer}
.fm-create:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
@media(max-width:900px){
  .fm-hero{grid-template-columns:1fr;grid-template-areas:"copy" "pick" "art" "cta";grid-template-rows:none;padding-block:30px 44px}
  .fm-h1{font-size:clamp(1.5rem,7.6vw,3rem)}
  .fm-art .card{margin-inline:auto}
  .fm-create{width:100%}
}

/* Postcard share page (/me) */
.me-hero{grid-template-rows:auto 1fr}
.me-hero{grid-template-areas:"copy art" "pick art"}
.me-actions .watch-button{margin-bottom:22px}
.me-share-label{margin:0 0 10px;font-size:.74rem;font-weight:850;letter-spacing:.2em;color:#ced7eb}
.me-actions .share{max-width:440px;margin-top:0}
.me-actions .share .btn{border-radius:5px}
.me-actions .me-new{display:flex;align-items:center;justify-content:center;gap:10px;max-width:440px;margin-top:18px;
  padding:14px 12px;color:#fff;background:var(--blue);border:2px solid #fff;border-radius:5px;
  box-shadow:inset 0 -5px 0 var(--red),0 8px 22px rgba(0,51,141,.45);text-decoration:none}
.me-actions .me-new:hover{background:#0a45b8}
.me-hero .fm-art .card{margin:0}
@media(max-width:900px){
  .me-hero{grid-template-areas:"copy" "art" "pick";grid-template-rows:none}
  .me-hero .fm-art .card{margin-inline:auto}
  .me-actions .watch-button,.me-actions .share,.me-actions .me-new{width:100%;max-width:none}
}

/* Error and not-found pages */
.msg-main{padding-block:14vh 18vh;text-align:left}
.msg-main .fm-h1{margin-bottom:26px}
.msg-btn{width:auto;min-width:min(100%,360px)}

/* Knit hat: sits beside the description (in the gap above the picker), and marks the selected tile */
.fm-sub{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.fm-sub .description{margin:0}
.fm-hat{flex:0 0 auto;width:78px;height:78px;margin:10px 4% 0 0;transform:rotate(12deg);
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.5))}
.tile{overflow:visible}
.tile:has(input:checked)::after{content:"";position:absolute;right:-8px;bottom:-8px;width:40px;height:40px;
  background:url("/fm/hat.svg") center/contain no-repeat;filter:drop-shadow(0 3px 5px rgba(0,0,0,.6));pointer-events:none}
@media(max-width:900px){
  .fm-hat{width:58px;height:58px;margin:8px 2% 0 0}
  .tile:has(input:checked)::after{width:30px;height:30px;right:-6px;bottom:-6px}
}
.fm-hat-icon{display:block;flex:0 0 auto;width:26px;height:26px;margin:-6px 0 -4px}