/* ========== HOW IT WORKS ========== */
.tt-steps{ display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.tt-step{
  background:var(--tt-white); border:2px solid rgba(32,64,143,.18);
  border-radius:var(--tt-radius); padding:30px 26px 28px; position:relative;
}
.tt-step__num{
  display:grid; place-items:center; width:52px; height:52px; border-radius:50%;
  background:var(--tt-blue); color:var(--tt-white);
  font-family:var(--tt-display); font-size:1.5rem; line-height:1;
  margin-bottom:18px;
}
.tt-step h3{ font-size:1.35rem; color:var(--tt-green); margin-bottom:.5rem; }
.tt-step p{ color:var(--tt-stone); }

/* ---------- SWA partner block (footer) ---------- */
.tt-partner{
  display:flex; align-items:center; gap:16px;
  margin-top:1.6rem; padding-top:1.4rem;
  border-top:1px solid rgba(255,255,255,.16);
}
.tt-partner img{
  width:58px; height:58px; flex:0 0 auto;
  background:var(--tt-white); border-radius:50%; padding:4px;
}
.tt-partner__txt{ font-size:.92rem; line-height:1.45; }
.tt-partner__txt strong{
  display:block; font-family:var(--tt-head); font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--tt-gold); font-size:.85rem; margin-bottom:.15rem;
}

/* ========== CHALLENGE GRID ========== */
.tt-challenges{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.tt-challenge{
  display:flex; flex-direction:column; gap:.55rem;
  background:var(--tt-green-pale); border:2px solid rgba(20,68,46,.16);
  border-radius:var(--tt-radius); padding:22px 24px;
  text-decoration:none; transition:transform .2s ease, box-shadow .2s ease;
}
.tt-challenge:hover{ transform:translateY(-3px); box-shadow:var(--tt-shadow); }
.tt-challenge__month{
  font-family:var(--tt-head); font-weight:700; font-size:.85rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--tt-gold-dk);
}
.tt-challenge__title{
  font-family:var(--tt-head); font-weight:600; font-size:1.3rem;
  line-height:1.2; color:var(--tt-green);
}
.tt-challenge__meta{
  margin-top:auto; padding-top:.6rem; display:flex; flex-wrap:wrap; gap:8px 14px;
  align-items:center; font-size:.95rem; color:var(--tt-stone);
}
.tt-challenge__pts{
  font-family:var(--tt-head); font-weight:700; color:var(--tt-leaf);
  letter-spacing:.04em; text-transform:uppercase; font-size:.9rem;
}
.tt-challenge--big{ border-color:var(--tt-gold); background:var(--tt-gold-pale); }
.tt-challenge--big .tt-challenge__pts{ color:var(--tt-gold-dk); }

/* ========== WINNERS ========== */
.tt-winners{ display:grid; gap:18px; }
.tt-winner{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px;
  background:var(--tt-white); border:2px solid var(--tt-line);
  border-radius:var(--tt-radius); padding:22px 26px;
}
.tt-winner__place{
  display:grid; place-items:center; flex:0 0 auto;
  width:54px; height:54px; border-radius:50%;
  background:var(--tt-green); color:var(--tt-gold);
  font-family:var(--tt-display); font-size:1.35rem; line-height:1;
}
.tt-winner__name{
  flex:1 1 260px; font-family:var(--tt-head); font-weight:600;
  font-size:clamp(1.3rem,2.4vw,1.7rem); line-height:1.15;
  color:var(--tt-green); text-transform:uppercase; letter-spacing:.01em;
}
.tt-winner__note{ display:block; font-size:.95rem; font-weight:400;
  text-transform:none; letter-spacing:0; color:var(--tt-stone); margin-top:.2rem; }

/* ========== CALLOUT / GUIDE ========== */
.tt-callout{
  background:var(--tt-gold-pale); border:2px solid var(--tt-gold);
  border-radius:var(--tt-radius); padding:clamp(26px,4vw,40px);
  display:grid; gap:24px; grid-template-columns:1fr auto; align-items:center;
}
.tt-callout h3{ font-size:clamp(1.4rem,2.6vw,1.9rem); color:var(--tt-green); margin-bottom:.4rem; }
.tt-callout p{ color:#6B5726; max-width:56ch; }
@media (max-width:720px){ .tt-callout{ grid-template-columns:1fr; } }

/* ========== FINALE ========== */
.tt-finale{ position:relative; overflow:hidden; }
.tt-finale__inner{ display:grid; gap:36px; grid-template-columns:1.2fr .8fr; align-items:center; }
.tt-finale__art picture{ display:block; }
.tt-finale__art img{
  width:100%; max-width:480px; height:auto; display:block; margin-inline:auto;
  border:2px solid rgba(255,255,255,.22); border-radius:var(--tt-radius);
  box-shadow:0 16px 30px rgba(0,0,0,.28);
}
.tt-finale__dates{
  display:flex; flex-wrap:wrap; gap:12px; margin-top:1.6rem;
}
.tt-finale__date{
  font-family:var(--tt-head); font-weight:600; font-size:1.05rem;
  background:rgba(255,255,255,.14); padding:.42em 1.25em; color:var(--tt-white);
  clip-path:polygon(8px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
@media (max-width:820px){
  .tt-finale__inner{ grid-template-columns:1fr; }
  .tt-finale__art{ order:-1; }
  .tt-finale__art img{ max-width:440px; }
}

/* ========== CONTACT ========== */
.tt-contacts{ display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.tt-contact{
  background:var(--tt-white); border:2px solid var(--tt-line);
  border-radius:var(--tt-radius); padding:26px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.tt-contact__photo{
  width:132px; height:132px; border-radius:50%;
  object-fit:cover; background:var(--tt-green-pale);
  border:4px solid var(--tt-gold); margin-bottom:1.1rem;
}
.tt-contact h3{ font-size:1.25rem; color:var(--tt-green); }
.tt-contact__role{ font-size:.95rem; color:var(--tt-stone); margin-bottom:1rem; min-height:2.9em; }
.tt-contact a{ display:block; color:var(--tt-leaf); font-weight:600; text-decoration:none; word-break:break-word; }
.tt-contact a:hover{ text-decoration:underline; }
.tt-submit-note{
  margin-top:30px; padding:20px 24px; border-radius:var(--tt-radius);
  background:var(--tt-green-pale); border:2px dashed rgba(20,68,46,.3);
  text-align:center; font-size:1.05rem;
}
.tt-submit-note a{ color:var(--tt-green); font-weight:700; }

/* ========== THEME SONG ========== */
.tt-anthem{
  display:grid; gap:clamp(24px,4vw,40px);
  grid-template-columns:1.15fr .85fr; align-items:stretch;
}
.tt-anthem__art{ display:block; }
.tt-anthem__art img{
  width:100%; height:auto;
  border:2px solid var(--tt-line); border-radius:var(--tt-radius);
  box-shadow:var(--tt-shadow);
}

.tt-player{
  background:var(--tt-green); color:var(--tt-white);
  border:2px solid var(--tt-green-dk); border-radius:var(--tt-radius);
  padding:clamp(26px,3.4vw,36px);
  display:flex; flex-direction:column; justify-content:center;
}
.tt-player__eyebrow{
  font-family:var(--tt-head); font-weight:600; font-size:.85rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--tt-gold);
}
.tt-player__title{
  font-family:var(--tt-display); font-weight:400;
  font-size:clamp(1.5rem,2.8vw,2.1rem); line-height:1.1;
  margin:.45rem 0 .3rem;
}
.tt-player__by{ font-size:.98rem; color:rgba(255,255,255,.76); margin-bottom:1.6rem; }

/* Native fallback, shown only while JS has not taken over. */
.tt-player__native{ width:100%; }
.tt-player.is-ready .tt-player__native{ display:none; }

.tt-player__ui{ display:flex; align-items:center; gap:18px; }
/* display:flex outranks the UA rule for [hidden], so without this the custom
   transport would sit next to the native player when JS never runs. */
.tt-player__ui[hidden]{ display:none; }
.tt-player__btn{
  flex:0 0 auto; display:grid; place-items:center;
  width:60px; height:60px; border-radius:50%; border:0;
  background:var(--tt-gold); color:var(--tt-green-dk); cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.tt-player__btn:hover{ background:#FFC759; transform:scale(1.05); }

/* Play triangle and pause bars are drawn from the one span, so the button has
   no icon font or inline SVG to load. */
.tt-player__icon{
  display:block; width:0; height:0; margin-left:4px;
  border-top:11px solid transparent; border-bottom:11px solid transparent;
  border-left:18px solid currentColor;
}
.is-playing .tt-player__icon{
  width:16px; height:20px; margin-left:0; border:0;
  border-left:5px solid currentColor; border-right:5px solid currentColor;
}

.tt-player__bar{ flex:1 1 auto; min-width:0; }
.tt-player__times{
  display:flex; justify-content:space-between;
  margin-top:.5rem; font-family:var(--tt-head); font-weight:600;
  font-size:.9rem; letter-spacing:.06em; color:rgba(255,255,255,.72);
  font-variant-numeric:tabular-nums;
}

/* The filled portion of the track is painted with a gradient stop that audio.js
   moves, since a range input gives no styleable "played" region of its own. */
.tt-player__seek{
  -webkit-appearance:none; appearance:none;
  display:block; width:100%; height:8px; margin:0;
  background:linear-gradient(to right,
    var(--tt-gold) 0 var(--tt-progress,0%),
    rgba(255,255,255,.22) var(--tt-progress,0%) 100%);
  border-radius:999px; cursor:pointer;
}
.tt-player__seek::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:var(--tt-white); border:3px solid var(--tt-gold-dk); cursor:pointer;
}
.tt-player__seek::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%;
  background:var(--tt-white); border:3px solid var(--tt-gold-dk); cursor:pointer;
}
.tt-player__seek::-moz-range-track{ background:transparent; }

.tt-player__dl{
  display:inline-block; align-self:flex-start; margin-top:1.5rem;
  font-family:var(--tt-head); font-weight:600; font-size:.9rem;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--tt-gold); text-decoration:none;
  border-bottom:2px solid rgba(243,180,64,.45); padding-bottom:2px;
}
.tt-player__dl:hover{ border-bottom-color:var(--tt-gold); }

@media (max-width:820px){
  .tt-anthem{ grid-template-columns:1fr; }
}
@media (max-width:420px){
  .tt-player__ui{ gap:14px; }
  .tt-player__btn{ width:52px; height:52px; }
}