/* Homepage options: takes on option 1 with a centered logo. */

/* Centered-logo headers */
.site-head .brand img { width: 132px; }
.nav .nav-donate { background: var(--pink); color: var(--navy); padding: var(--s2) var(--s4); border-radius: 999px; border: 0; }
.nav .nav-donate:hover { background: var(--cream); }
.head-split .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.head-split .nav-left { justify-self: start; }
.head-split .nav-right { justify-self: end; justify-content: flex-end; }
.head-stack .wrap { flex-direction: column; justify-content: center; gap: var(--s3); }
.head-stack .nav { justify-content: center; }

/* Hero ticket */
.event-hero h1.ticket-art { margin: 0 0 var(--s5); max-width: 34rem; line-height: 0; }
.event-hero h1.ticket-art img { width: 100%; height: auto; }

.sec-h { margin-bottom: var(--s6); }

/* Mission */
.home-mission { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s5) var(--gutter); }
.home-mission h2 { grid-column: 1 / span 4; }
.home-mission > div { grid-column: 6 / span 7; }
.mission-text { font: 700 clamp(1.1875rem, 1.05rem + .45vw, 1.4375rem)/1.4 var(--display); max-width: 44ch; }
.more-link { font-weight: 800; }
.home-mission .cta-row { margin-top: var(--s5); }

/* Hall of Fame */
.hof img { display: block; width: 100%; height: auto; border-radius: var(--radius-l); }
.hof-copy h2 { margin-bottom: var(--s4); }
.hof-copy p { font-size: var(--t-md); line-height: 1.5; margin-bottom: var(--s5); }
.hof-split { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s6) var(--gutter); align-items: center; }
.hof-split .hof-img { grid-column: 1 / span 7; }
.hof-split .hof-copy { grid-column: 9 / span 4; }
.hof-right .hof-img { grid-column: 6 / span 7; grid-row: 1; }
.hof-right .hof-copy { grid-column: 1 / span 4; grid-row: 1; }
.hof-overlay { position: relative; }
.hof-overlay img { aspect-ratio: 16 / 8; object-fit: cover; }
.hof-overlay .hof-copy { position: absolute; left: var(--s7); bottom: var(--s7); max-width: 26rem; background: var(--white); border: 3px solid var(--navy); border-radius: var(--radius-l); padding: var(--s6); }
.hof-overlay .hof-copy p { font-size: 1.125rem; }
.hof-stack .hof-img img { aspect-ratio: 16 / 7; object-fit: cover; }
.hof-stack .hof-copy { text-align: center; max-width: 36rem; margin: var(--s6) auto 0; }
.hof-stack .hof-copy p { margin-inline: auto; }

/* News */
.news-cards { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6) var(--gutter); }
.news-card { position: relative; background: var(--white); border: 3px solid var(--navy); border-radius: var(--radius-l); overflow: hidden; display: flex; flex-direction: column; }
.news-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 3px solid var(--navy); }
.news-card div { padding: var(--s5) var(--s6) var(--s6); }
.news-card h3 { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); line-height: 1.2; margin-bottom: var(--s3); }
.news-card h3 a { color: var(--navy); text-decoration: none; }
.news-card h3 a::after { content: ""; position: absolute; inset: 0; }
.news-card:hover { box-shadow: 0 6px 0 var(--tangerine); }
.news-card h3 a:focus-visible { outline: none; }
.news-card:focus-within { outline: 3px solid var(--navy); outline-offset: 4px; }
.news-card p { margin: 0; font-size: 1.0625rem; }
.news-list { list-style: none; display: grid; gap: var(--s4); }
.news-list a { display: grid; grid-template-columns: 14rem 1fr; gap: var(--s6); align-items: center; color: var(--navy); text-decoration: none; background: var(--white); border: 3px solid var(--navy); border-radius: var(--radius-l); padding: var(--s4); }
.news-list a:hover { box-shadow: 0 6px 0 var(--tangerine); }
.news-list img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-m); }
.news-list strong { display: block; font: 700 clamp(1.25rem, 1.1rem + .5vw, 1.5rem)/1.2 var(--display); margin-bottom: var(--s2); }

/* Mailing list */
.home-signup { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s5) var(--gutter); align-items: center; }
.home-signup > div { grid-column: 1 / span 5; }
.home-signup > div p { margin: var(--s3) 0 0; }
.home-signup form { grid-column: 7 / span 6; display: flex; flex-wrap: wrap; gap: var(--s3); }
.home-signup label { flex-basis: 100%; font-weight: 800; }
.home-signup input { flex: 1 1 14rem; min-width: 0; min-height: 52px; font: inherit; padding: var(--s3) var(--s5); border-radius: 999px; border: 2px solid var(--navy); background: var(--white); color: var(--navy); }
.with-donate { align-items: start; }
.with-donate > div:first-child { grid-column: 1 / span 6; }
.with-donate > div:first-child form { margin-top: var(--s5); }
.with-donate .donate-box { grid-column: 8 / span 5; background: var(--white); border: 3px solid var(--navy); border-radius: var(--radius-l); padding: var(--s6); }
.with-donate .donate-box p { margin: var(--s3) 0 var(--s5); }

@media (max-width: 900px) {
  .head-split .wrap { grid-template-columns: 1fr; justify-items: center; gap: var(--s3); }
  .head-split .brand { grid-row: 1; }
  .head-split .nav-left, .head-split .nav-right { justify-self: center; justify-content: center; }
  .home-mission h2, .home-mission > div, .hof-split .hof-img, .hof-split .hof-copy,
  .home-signup > div, .home-signup form, .with-donate > div:first-child, .with-donate .donate-box { grid-column: 1 / -1; grid-row: auto; }
  .hof-overlay .hof-copy { position: relative; left: auto; bottom: auto; max-width: none; margin-top: calc(-1 * var(--s7)); margin-inline: var(--s4); }
  .hof-overlay img { aspect-ratio: 4 / 3; }
  .news-cards { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .news-list a { grid-template-columns: 1fr; }
  .hof-stack .hof-img img { aspect-ratio: 4 / 3; }
  .event-hero h1.ticket-art { max-width: 22rem; }
}

/* Round 6: Donate and the mailing list both live in the mission section. */
.mj-side { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s7) var(--gutter); align-items: center; }
.mj-copy { grid-column: 1 / span 6; }
.mj-copy h2 { margin-bottom: var(--s5); }
.mj .cta-row { margin-top: var(--s5); }
.mj-side .join { grid-column: 8 / span 5; }
.mj-wide .join { margin-top: calc(var(--band) * .6); }
.join { position: relative; }
.join h2 { font-size: clamp(1.75rem, 1.35rem + 1.4vw, 2.5rem); }
.join h2 + p { margin: var(--s3) 0 0; font-size: var(--t-md); line-height: 1.45; }
.join form { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.join label { flex-basis: 100%; font-weight: 800; }
.join input { flex: 1 1 12rem; min-width: 0; min-height: 52px; font: inherit; padding: var(--s3) var(--s5); border-radius: 999px; border: 2px solid var(--navy); background: var(--white); color: var(--navy); }
.join .form-msg { flex-basis: 100%; margin: 0; font-weight: 700; }
.join .form-msg:empty { display: none; }

/* Scalloped seal, same shape as the countdown badge */
.seal-badge { position: absolute; width: 8rem; aspect-ratio: 1; display: grid; place-content: center; text-align: center; isolation: isolate; z-index: 2; font: 700 1.0625rem/1.1 var(--display); color: var(--navy); }
.seal-badge .seal { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; overflow: visible; }
.seal-badge .seal path { fill: var(--lemon); stroke: var(--navy); stroke-width: 2.5; stroke-linejoin: round; }
.seal-badge::after { content: ""; position: absolute; inset: 12%; border-radius: 50%; border: 2px solid var(--navy); z-index: -1; }

/* 1. Ticket: the hero's ticket stub, in the poster colors */
.join-ticket .ticket { display: block; background: var(--poster); padding: var(--s7) calc(var(--s7) + var(--zig)); transform: rotate(-1.5deg); }
.join-ticket .seal-badge { top: -3.25rem; right: -1.5rem; transform: rotate(10deg); }
.join-ticket h2 { max-width: 9em; }

/* 2. Treat card: a box tier with three treats on top */
.join-card { background: var(--white); border: 3px solid var(--navy); border-radius: var(--radius-l); box-shadow: var(--lift); }
.join-card .jc-top { display: flex; justify-content: center; padding: var(--s6) var(--s5); border-bottom: 3px solid var(--navy); border-radius: calc(var(--radius-l) - 3px) calc(var(--radius-l) - 3px) 0 0; background: repeating-conic-gradient(from -90deg at 50% 140%, rgba(255,255,255,.35) 0 8deg, transparent 8deg 16deg), var(--poster); }
.treat { display: block; width: 7rem; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 4px solid var(--navy); box-shadow: 0 0 0 4px var(--white); }
.jc-top .treat { margin-inline: -.4rem; }
.jc-top .treat:nth-child(1) { transform: rotate(-8deg) translateY(.4rem); }
.jc-top .treat:nth-child(2) { position: relative; z-index: 1; width: 8.25rem; }
.jc-top .treat:nth-child(3) { transform: rotate(7deg) translateY(.4rem); }
.jc-body { padding: var(--s6); }
.join-card .sticker { position: absolute; top: calc(-1 * var(--s4)); right: var(--s5); z-index: 2; background: var(--navy); color: var(--lemon); border-radius: 999px; padding: var(--s1) var(--s4); font-weight: 800; transform: rotate(5deg); }

/* 3. Postcard: a stamped, franked card */
.join-postcard { background: var(--white); border: 3px solid var(--navy); border-radius: var(--radius-m); box-shadow: var(--lift); padding: var(--s7) var(--s6) var(--s6); transform: rotate(1deg); }
.join-postcard h2, .join-postcard h2 + p { padding-right: 7.5rem; }
.pc-stamp { position: absolute; top: var(--s5); right: var(--s5); width: 6.5rem; }
.pc-stamp .perf { display: block; padding: 7px; background: var(--pink); transform: rotate(4deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle 4px, #0000 97%, #000) -6px -6px / 12px 12px;
          mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle 4px, #0000 97%, #000) -6px -6px / 12px 12px; }
.pc-stamp img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.pc-stamp .cancel { position: absolute; left: -3.5rem; top: 1.75rem; width: 6.5rem; overflow: visible; }
.pc-stamp .cancel path { fill: none; stroke: var(--navy); stroke-width: 3; stroke-linecap: round; }

/* 4. Poster: a full-width gradient card with a pile of treats */
.join-poster { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s6) var(--gutter); align-items: center; background: var(--poster); border: 3px solid var(--navy); border-radius: var(--radius-l); box-shadow: var(--lift); padding: var(--s7); }
.jp-copy { grid-column: 1 / span 6; }
.join-poster h2 { font-size: var(--t-xl); }
.treat-pile { grid-column: 8 / span 5; position: relative; height: 17rem; }
.treat-pile .treat { position: absolute; box-shadow: 0 0 0 5px var(--cream); }
.treat-pile .t1 { width: 10rem; left: 0; top: 2rem; transform: rotate(-8deg); }
.treat-pile .t2 { width: 12.5rem; left: 30%; top: 0; z-index: 1; }
.treat-pile .t3 { width: 9.5rem; right: 0; bottom: 0; transform: rotate(9deg); }
.treat-pile .seal-badge { left: -.5rem; bottom: -1.5rem; transform: rotate(-10deg); }

/* 5. Inbox: the form beside an example update */
.join-inbox { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s6) var(--gutter); align-items: center; background: #d9e6fb; border: 3px solid var(--navy); border-radius: var(--radius-l); padding: var(--s7); }
.ji-copy { grid-column: 1 / span 6; }
.join-inbox h2 { font-size: var(--t-xl); }
.mail { grid-column: 8 / span 5; margin: 0; }
.mail-card { background: var(--white); border: 3px solid var(--navy); border-radius: var(--radius-m); box-shadow: var(--lift); padding: var(--s5); transform: rotate(-2deg); }
.mail-head { display: flex; align-items: center; gap: var(--s3); padding-bottom: var(--s3); margin-bottom: var(--s4); border-bottom: 2px solid var(--navy); font-size: 1rem; line-height: 1.3; }
.mail-head img { width: 4rem; }
.mail-head b { display: block; }
.mail-photo { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: var(--radius-s); }
.mail-card p { font-size: 1rem; margin: var(--s4) 0; }
.mail-card .btn { pointer-events: none; }
.mail figcaption { margin-top: var(--s5); text-align: center; font-size: var(--t-sm); font-weight: 700; }

@media (max-width: 900px) {
  .mj-copy, .mj-side .join, .jp-copy, .treat-pile, .ji-copy, .mail { grid-column: 1 / -1; }
  .mj-side .join { margin-top: var(--s5); }
  .join-poster, .join-inbox { padding: var(--s6); }
  .treat-pile { width: min(100%, 24rem); justify-self: center; }
}
@media (max-width: 640px) {
  .join-ticket .ticket { padding: var(--s6) calc(var(--s5) + var(--zig)); }
  .join-ticket .seal-badge { width: 6.5rem; top: -2.75rem; right: -.5rem; font-size: .9375rem; }
  .jc-top .treat { width: 5.25rem; }
  .jc-top .treat:nth-child(2) { width: 6.25rem; }
  .jc-body, .join-postcard { padding: var(--s5); }
  .join-postcard { padding-top: var(--s6); }
  .join-postcard h2 { padding-right: 5.5rem; }
  .join-postcard h2 + p { padding-right: 0; }
  .pc-stamp { width: 5rem; top: var(--s4); right: var(--s4); }
  .pc-stamp .cancel { left: -2.5rem; width: 5rem; }
  .treat-pile { height: 13rem; }
  .treat-pile .t1 { width: 7.5rem; }
  .treat-pile .t2 { width: 9.5rem; }
  .treat-pile .t3 { width: 7rem; }
  .treat-pile .seal-badge { width: 6.5rem; font-size: .9375rem; }
  .join-inbox { padding: var(--s5); }
}

/* Round 7 (option 2): orange menu bar on top, logo on white, photo-topped signup, site hero for the Hall of Fame. */
.head-top { background: var(--white); color: var(--navy); }
.head-top .topbar { background: #ffa723; }
.head-top .topbar .nav { justify-content: center; padding-block: var(--s3); }
.head-top .nav a:hover, .head-top .nav a[aria-current] { border-bottom-color: var(--navy); }
.head-top .nav .nav-donate:hover, .head-top .nav .nav-cart:hover { background: var(--white); }
.head-top .nav .nav-cart { background: var(--white); }
.head-top .logobar .wrap { justify-content: center; padding-block: var(--s4); }
.head-top .brand img { width: 190px; }
.join-photo { box-shadow: none; overflow: hidden; }
.jc-photo { border-bottom: 3px solid var(--navy); }
.jc-photo img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; object-position: 50% 60%; }
.hof-hero .hof-img img, .hof-stack.hof-hero .hof-img img { aspect-ratio: auto; }
.hof-hero .hof-copy { max-width: 46rem; }
@media (max-width: 640px) {
  .head-top .topbar .nav { gap: var(--s2) var(--s4); }
  .head-top .brand img { width: 140px; }
  .hof-hero .hof-copy p { font-size: var(--t-base); }
}

/* Round 8: no orange hover on news items, no yellow ring on the email field. Focus stays visible as a navy outline. */
.news-list a:hover, .news-card:hover { box-shadow: none; }
.news-list a:focus-visible { box-shadow: none; outline: 3px solid var(--navy); outline-offset: 4px; border-radius: var(--radius-l); }
.join input:focus-visible { box-shadow: none; outline: 3px solid var(--navy); outline-offset: 2px; border-radius: 999px; }

/* Round 9 (option 2): slimmer uppercase menu bar, more room around the logo, logo pink on Donate. */
.head-top .topbar .nav { padding-block: 10px; gap: var(--s1) var(--s6); font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; }
.head-top .topbar .nav a { padding-block: 2px; }
.head-top .nav .nav-donate { background: #ff5d81; padding: 3px var(--s4); }
.head-top .nav .nav-cart { padding: 2px 3px 2px var(--s3); gap: var(--s1); }
.head-top .crate-ico { width: .95rem; height: .95rem; }
.head-top .cart-count { min-width: 1.25rem; height: 1.25rem; font-size: .75rem; letter-spacing: 0; }
.head-top .logobar .wrap { padding-block: 2.5rem; }
.head-top .brand img { display: block; }
@media (max-width: 640px) {
  .head-top .topbar .nav { gap: var(--s1) var(--s4); font-size: .75rem; letter-spacing: .06em; }
  .head-top .logobar .wrap { padding-block: var(--s6); }
}

/* Round 10 (option 2): tighter band spacing around mission, News and Hall of Fame. */
.home-2 section[aria-labelledby="mission-h"] { padding-block: calc(var(--band) * .5); }
.home-2 section[aria-labelledby="news-h"] { padding-block: calc(var(--band) * .5); }
.home-2 #fame { padding-top: calc(var(--band) * .5); }
.home-2 .mj-side { align-items: start; }

/* Round 12 (option 2): square corners in News and the Hall of Fame. */
.home-2 .news-list a, .home-2 .news-list a:focus-visible, .home-2 .news-list img, .home-2 #fame img { border-radius: 0; }
.home-2 .news-list a { border-width: 1px; }
.home-2 .mj .btn.ghost { background: var(--white); }