/* ==========================================================================
   interior.css: banners, prose, detail layouts, videos, tips, forms.
   Everything that only appears on pages other than the home page.
   ========================================================================== */

/* ---------- Interior banner ---------- */
.tt-banner{
  background:var(--tt-green); color:var(--tt-white);
  padding-block:clamp(44px,6vw,76px);
  position:relative; overflow:hidden;
}
.tt-banner::before{
  content:""; position:absolute; inset:auto -10% -60% -10%; height:120%;
  background:radial-gradient(50% 60% at 50% 100%, rgba(243,180,64,.16), transparent 70%);
  pointer-events:none;
}
.tt-banner > *{ position:relative; }
.tt-banner h1{
  font-family:var(--tt-display); font-weight:400;
  font-size:clamp(2rem,5vw,3.4rem); line-height:1.02; text-wrap:balance;
}
.tt-banner__lead{
  margin-top:1.1rem; max-width:62ch; font-size:1.15rem;
  color:rgba(255,255,255,.86);
}
.tt-banner__lead a{ color:var(--tt-gold); }
.tt-banner__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin-top:1.6rem;
}
.tt-banner__due{
  font-family:var(--tt-head); font-weight:600; font-size:1rem;
  letter-spacing:.04em; color:rgba(255,255,255,.82);
}

/* Headings that reuse the display face at section scale */
.tt-h1{ font-family:var(--tt-display); font-weight:400; font-size:clamp(2rem,5vw,3.2rem); line-height:1.03; }
.tt-h2{ font-family:var(--tt-display); font-weight:400; font-size:clamp(1.7rem,3.4vw,2.5rem); line-height:1.05; color:var(--tt-green); }
.tt-on-green .tt-h2, .tt-on-green .tt-h1{ color:var(--tt-white); }
.tt-section--tight{ --tt-tight-y:clamp(40px,5vw,64px); padding-block:var(--tt-tight-y); }
.tt-actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:2.2rem; }
.tt-actions--start{ justify-content:flex-start; }

/* ---------- Long-form prose ---------- */
.tt-prose{ max-width:74ch; }
.tt-prose p{ margin-bottom:1.15rem; }
.tt-prose .tt-h2{ margin:2.6rem 0 1rem; }
.tt-prose .tt-lede{ font-size:1.25rem; line-height:1.6; color:var(--tt-green); font-weight:500; }
.tt-pull{
  font-family:var(--tt-display); font-weight:400;
  font-size:clamp(1.35rem,2.6vw,1.85rem); line-height:1.25;
  color:var(--tt-green); text-align:center; text-wrap:balance;
  padding:1.6rem 0;
}

/* ---------- Shared content blocks ---------- */
.tt-list{ margin:0 0 1.15rem 0; }
.tt-list li{
  position:relative; padding-left:1.6rem; margin-bottom:.55rem;
}
.tt-list li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:9px; height:9px; border-radius:50%; background:var(--tt-gold);
}
.tt-note{
  background:var(--tt-gold-pale); border:2px solid var(--tt-gold);
  border-radius:var(--tt-radius); padding:18px 22px; margin:1.4rem 0;
  color:#6B5726;
}
.tt-note--warn{ background:#FBE4E4; border-color:#C9646A; color:#7A2B30; }

/* ---------- Challenge detail ---------- */
.tt-detail{ display:grid; gap:clamp(28px,4vw,52px); grid-template-columns:minmax(0,1fr) 320px; align-items:start; }
.tt-detail__body{ max-width:68ch; }
.tt-detail__body p{ margin-bottom:1.15rem; }
.tt-detail__body h3{
  font-family:var(--tt-head); font-size:1.35rem; color:var(--tt-green);
  margin:2rem 0 .7rem;
}
.tt-detail__side{ display:grid; gap:18px; position:sticky; top:100px; }
.tt-side-card{
  background:var(--tt-white); border:2px solid var(--tt-line);
  border-radius:var(--tt-radius); padding:22px 24px;
}
.tt-side-card h3{
  font-family:var(--tt-head); font-weight:600; font-size:.9rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--tt-gold-dk);
  margin-bottom:.7rem;
}
.tt-side-card p{ font-size:.98rem; color:var(--tt-stone); }
.tt-side-card__mail{
  display:block; margin-top:.4rem; font-weight:600; color:var(--tt-leaf);
  word-break:break-word; text-decoration:none;
}
.tt-side-card__mail:hover{ text-decoration:underline; }
.tt-side-card__due{ margin-top:.7rem; font-weight:600; color:var(--tt-green); }
.tt-side-card--pts{ background:var(--tt-green); border-color:var(--tt-green); }
.tt-side-card--pts h3{ color:var(--tt-gold); }
.tt-side-card--pts .tt-side-card__pts{
  font-family:var(--tt-head); font-weight:700; font-size:1.5rem;
  line-height:1.15; color:var(--tt-white); letter-spacing:.01em;
}
.tt-side-links li{ margin-bottom:.6rem; }
.tt-side-links a{ color:var(--tt-leaf); font-weight:600; text-decoration:none; }
.tt-side-links a:hover{ text-decoration:underline; }
@media (max-width: 900px){
  .tt-detail{ grid-template-columns:1fr; }
  .tt-detail__side{ position:static; }
}

/* ---------- Prev / next ---------- */
.tt-prevnext{ display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.tt-prevnext__link{
  display:flex; flex-direction:column; gap:.15rem; text-decoration:none;
  background:var(--tt-white); border:2px solid var(--tt-line);
  border-radius:var(--tt-radius); padding:16px 22px; max-width:46%;
  transition:border-color .2s ease, transform .2s ease;
}
.tt-prevnext__link:hover{ border-color:var(--tt-gold); transform:translateY(-2px); }
.tt-prevnext__link span{
  font-family:var(--tt-head); font-size:.8rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--tt-gold-dk);
}
.tt-prevnext__link strong{ font-family:var(--tt-head); font-size:1.1rem; color:var(--tt-green); }
.tt-prevnext__link--next{ text-align:right; margin-left:auto; }
@media (max-width:640px){ .tt-prevnext__link{ max-width:100%; flex:1 1 100%; } }

/* ---------- Challenge card variants ---------- */
.tt-challenge--unlock{ border-color:rgba(114,17,36,.35); }
.tt-challenge--unlock .tt-challenge__pts{ color:var(--tt-maroon); }

/* ---------- Winners ---------- */
.tt-winners--finale{ margin-bottom:2.4rem; }
.tt-months{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.tt-month{
  background:var(--tt-white); border:2px solid var(--tt-line);
  border-radius:var(--tt-radius); padding:22px 24px;
}
.tt-month h3{
  font-family:var(--tt-head); font-size:1.3rem; color:var(--tt-green);
  margin-bottom:.8rem;
}
.tt-month__list{ counter-reset:place; list-style:none; }
.tt-month__list li{
  counter-increment:place; position:relative; padding-left:2rem;
  margin-bottom:.55rem; font-weight:500;
}
.tt-month__list li::before{
  content:counter(place); position:absolute; left:0; top:.15em;
  width:22px; height:22px; border-radius:50%;
  background:var(--tt-gold); color:var(--tt-green-dk);
  font-family:var(--tt-head); font-weight:700; font-size:.8rem;
  display:grid; place-items:center;
}

/* ---------- Empty / hero-with-mascot blocks ---------- */
.tt-empty{ display:grid; gap:clamp(20px,4vw,44px); grid-template-columns:180px 1fr; align-items:center; }
.tt-empty img{ width:100%; max-width:180px; }
.tt-empty p{ margin-top:.9rem; max-width:56ch; color:var(--tt-stone); }
.tt-empty--404 p{ color:rgba(255,255,255,.85); }
.tt-empty picture{ display:block; }
/* Two mascots side by side need more room than Bruce did on his own. */
.tt-empty--pair{ grid-template-columns:280px 1fr; }
.tt-empty--pair img{ max-width:280px; }
@media (max-width:700px){
  .tt-empty, .tt-empty--pair{ grid-template-columns:1fr; text-align:center; }
  .tt-empty img{ max-width:130px; margin-inline:auto; }
  .tt-empty--pair img{ max-width:220px; }
  .tt-empty p{ margin-inline:auto; }
  .tt-empty .tt-actions--start{ justify-content:center; }
}

/* ---------- Videos ---------- */
.tt-videos{ display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); }
.tt-video{ display:flex; flex-direction:column; gap:.9rem; }
.tt-video--solo{ max-width:720px; margin-inline:auto; }
.tt-video__thumb{
  position:relative; display:block; width:100%; padding:0; border:0; cursor:pointer;
  background:var(--tt-green-dk); border-radius:var(--tt-radius); overflow:hidden;
  aspect-ratio:16/9; line-height:0;
  transition:transform .2s ease, box-shadow .2s ease;
}
.tt-video__thumb img{ width:100%; height:100%; object-fit:cover; }
.tt-video__thumb:hover{ transform:translateY(-3px); box-shadow:var(--tt-shadow); }
.tt-video__play{
  position:absolute; inset:0; margin:auto; width:68px; height:68px;
  background:var(--tt-gold); border-radius:50%;
  display:grid; place-items:center;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  transition:transform .2s ease;
}
.tt-video__play::after{
  content:""; width:0; height:0; margin-left:5px;
  border-left:22px solid var(--tt-green-dk);
  border-top:14px solid transparent; border-bottom:14px solid transparent;
}
.tt-video__thumb:hover .tt-video__play{ transform:scale(1.08); }
.tt-video__meta h3{ font-family:var(--tt-head); font-size:1.2rem; color:var(--tt-green); }
.tt-video__meta p{ font-size:.95rem; color:var(--tt-stone); }
.tt-band-green .tt-video__meta h3{ color:var(--tt-white); }
.tt-band-green .tt-video__meta p{ color:rgba(255,255,255,.7); }
.tt-video iframe{ width:100%; aspect-ratio:16/9; border:0; border-radius:var(--tt-radius); display:block; }

/* ---------- Forms ----------
   Each card is the same five rows: heading, intro, facts, body, button. Where
   subgrid is available the rows are shared across the whole row of cards, so a
   heading that wraps to two lines cannot push its neighbour's content out of
   step. Without subgrid the cards still bottom-align their buttons. */
.tt-forms{
  display:grid; gap:32px;
  grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));
}
.tt-form{
  background:var(--tt-white); border:2px solid var(--tt-line);
  border-radius:var(--tt-radius); padding:clamp(26px,3vw,36px);
  display:flex; flex-direction:column;
}
/* Both card headings have to hold one line, or the shared heading row grows to
   two and the cards fall out of step. The longer of the two clears its column
   by a hair at full width, so the type steps down slightly here to keep it on
   one line all the way to the single-column breakpoint. */
.tt-form .tt-h2{ font-size:clamp(1.6rem,3.15vw,2.35rem); text-wrap:balance; }
/* The fact box owns the space on both of its sides, so the intro drops the
   bottom margin it gets from .tt-form p and the gap stays even. Needs the
   element in the selector to outrank that rule. */
.tt-form p.tt-form__intro{ margin-top:1.1rem; margin-bottom:0; color:var(--tt-stone); }
.tt-form__facts{
  display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  margin:1.4rem 0; padding:20px; border-radius:var(--tt-radius);
  background:var(--tt-green-pale);
}
.tt-fact{ display:flex; flex-direction:column; gap:.1rem; }
.tt-fact strong{
  font-family:var(--tt-head); font-weight:700; font-size:1.25rem; color:var(--tt-green);
}
.tt-fact span{ font-size:.88rem; line-height:1.35; color:var(--tt-stone); }
.tt-form h3{
  font-family:var(--tt-head); font-size:1.2rem; color:var(--tt-green);
  margin:1.6rem 0 .6rem;
}
.tt-form__body > h3:first-child{ margin-top:0; }
.tt-form p{ margin-bottom:1rem; }
.tt-form .tt-btn{ margin-top:auto; align-self:flex-start; }

/* 900px, not the 800px the columns technically need, because the cards still
   stack just below that and a zeroed row gap would let them touch. */
@supports (grid-template-rows: subgrid){
  @media (min-width: 900px){
    /* The 32px gap is for the space between the two cards. Once the rows are
       shared it also lands between every row inside them, so the row half is
       dropped and the spacing comes from the elements' own margins. */
    .tt-forms{ grid-template-rows:auto auto auto 1fr auto; row-gap:0; }
    .tt-form{
      display:grid; grid-row:span 5; grid-template-rows:subgrid;
      align-content:start;
    }
    /* A one-line heading sits in a row sized for two. Push it to the bottom of
       its row so it stays tight to its intro, and the slack lands as extra
       breathing room at the top of the card rather than as a gap mid-card. */
    .tt-form .tt-h2{ align-self:end; }
    .tt-form .tt-btn{ margin-top:1.6rem; }
  }
}

/* ---------- Contact variants ---------- */
/* ---------- Info cards ----------
   Address and contact-method cards. Every line is its own element on a shared
   gap, so line one sits at the same height in every card of a row regardless of
   how many lines follow. Deliberately not built on .tt-contact, which carries
   a min-height on its role text to align the staff photos. */
.tt-infocards{ display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); }
.tt-infocard{
  background:var(--tt-white); border:2px solid var(--tt-line);
  border-radius:var(--tt-radius); padding:24px 26px;
  display:flex; flex-direction:column; align-items:flex-start; gap:.3rem;
}
.tt-infocard h3{
  font-family:var(--tt-head); font-weight:600; font-size:1.2rem;
  color:var(--tt-green); margin-bottom:.5rem;
}
.tt-infocard p{ font-size:.98rem; line-height:1.5; color:var(--tt-stone); }
.tt-infocard a{ color:var(--tt-leaf); font-weight:600; text-decoration:none; word-break:break-word; }
.tt-infocard a:hover{ text-decoration:underline; }
.tt-contact__bio{
  font-size:.95rem; color:var(--tt-stone); margin-bottom:1rem; text-align:left;
}
.tt-contacts--bio .tt-contact__role{ min-height:0; margin-bottom:.9rem; }
/* Bios run to different lengths, so the phone and email block is pushed to the
   foot of the card and lines up across the row. */
.tt-contacts--bio .tt-contact__links{ width:100%; margin-top:auto; padding-top:.4rem; }
.tt-callout--dark{ background:rgba(255,255,255,.07); border-color:rgba(243,180,64,.55); }
.tt-callout--dark h3{ color:var(--tt-white); }
.tt-callout--dark p{ color:rgba(255,255,255,.8); }
.tt-finale__lead{ color:rgba(255,255,255,.85); margin-top:1rem; max-width:52ch; }

/* ---------- Tip cards: the SWA's own graphics ---------- */
.tt-tipcards{ display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); }
.tt-tipcard{
  background:var(--tt-white); border:2px solid var(--tt-line);
  border-radius:var(--tt-radius); overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}
.tt-tipcard:hover{ transform:translateY(-3px); box-shadow:var(--tt-shadow); }
.tt-tipcard img{ width:100%; height:auto; display:block; }
/* The graphic carries the words, so the caption is for screen readers only. */
.tt-tipcard figcaption{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.tt-callout--bruce{ grid-template-columns:auto 1fr auto; align-items:center; }
.tt-callout__bruce{ width:104px; height:auto; }
@media (max-width:720px){
  .tt-callout--bruce{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .tt-callout__bruce{ width:88px; }
}

/* ---------- Sponsor strip ---------- */
.tt-sponsors{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:clamp(28px,5vw,64px); list-style:none;
}
.tt-sponsors li{ display:flex; align-items:center; }
/* Sponsors are shown at full strength, no dimming. */
.tt-sponsors img{ height:clamp(52px,7vw,74px); width:auto; }

/* ---------- Meet the mascots (about) ---------- */
.tt-mascots{
  display:grid; gap:clamp(24px,4vw,44px);
  grid-template-columns:1.15fr .85fr; align-items:center;
}
.tt-mascots__photo{
  margin:0; border:2px solid var(--tt-line); border-radius:var(--tt-radius);
  overflow:hidden; background:var(--tt-white); box-shadow:var(--tt-shadow);
}
.tt-mascots__photo img{ width:100%; height:auto; display:block; }
.tt-mascots__copy h3{
  font-family:var(--tt-head); font-weight:600; font-size:1.5rem;
  color:var(--tt-green); margin:0 0 .35rem;
}
.tt-mascots__copy h3 + p{ margin-bottom:1.5rem; }
.tt-mascots__copy p{ color:#28506B; margin:0; }
.tt-mascots__copy > :last-child{ margin-bottom:0; }
@media (max-width:860px){
  .tt-mascots{ grid-template-columns:1fr; }
}

/* ---------- Mascot art dropped into a section ---------- */
/* Cutouts, so no frame: they sit straight on whatever band they land in. */
.tt-mascot-art{ display:block; margin:0 auto; height:auto; }
.tt-mascot-art--sm{ width:min(100%,300px); }
.tt-mascot-art--md{ width:min(100%,420px); }
.tt-mascot-art--lg{ width:min(100%,560px); }
/* Sitting under a section head, it wants to close the gap a little. */
.tt-section-head + .tt-mascot-art{ margin-top:-.5rem; margin-bottom:1.5rem; }

/* A framed scene, same treatment as the mascot photo on the about page.
   Deliberately small: it supports the copy around it rather than leading. */
.tt-figure{
  margin:0 auto clamp(28px,4vw,44px); max-width:520px;
  border:2px solid var(--tt-line); border-radius:var(--tt-radius);
  overflow:hidden; background:var(--tt-white); box-shadow:var(--tt-shadow);
}
.tt-figure img{ display:block; width:100%; height:auto; }