/* ==========================================================================
   TIMBERJACKS — collegiate program system, light ground

   Reference: medfordrogues.com. Pro club sites are LIGHT — white/near-white
   content, brand colour confined to the header, footer and accents, with
   photography carrying the page. The earlier build made pine green the entire
   field, which left the colour nowhere to work as an accent.

   Value structure now:
     dark band  → header, hero, footer, stat strip   (~25% of the page)
     light      → all content sections               (~75%)
     pine       → headings, eyebrows, rules
     gold       → the primary action ON DARK (it is the wordmark colour, so it
                  is already the brand). Gold fails contrast as text on white,
                  so on light surfaces pine carries the primary action instead.
     ember      → retired from the interface. The sunset orange is the smallest
                  colour in the badge; as the loudest control on the page it read
                  borrowed rather than brand.

   Type: Big Shoulders Display (condensed athletic) over Barlow.
   No emoji anywhere in the public interface.
   ========================================================================== */

:root{
  --page:#FFFFFF;
  --band:#F5F2EA;        /* warm alternating band */
  --text:#16211C;
  --muted:#5A6B62;
  --rule:#E2DED2;
}

.tj{background:var(--page);color:var(--text)}
.tj-wrap{max-width:1180px;margin:0 auto;padding:0 32px}

/* Dark surfaces — the brand anchors */
.tj-dark{background:var(--bark);color:var(--cream)}

/* Section eyebrow: number + label */
.tj-eyebrow{
  display:flex;align-items:baseline;gap:14px;
  font-family:'Barlow Condensed',sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.24em;font-size:.78rem;
  color:var(--pine);margin-bottom:24px;
}
.tj-eyebrow::after{content:'';flex:1;height:1px;background:var(--rule)}
.tj-num{font-variant-numeric:tabular-nums;opacity:.55}
.tj-dark .tj-eyebrow{color:var(--gold)}
.tj-dark .tj-eyebrow::after{background:rgba(212,168,90,.28)}

/* ---- Topbar ---- */
.tj-bar{background:var(--bark);position:sticky;top:0;z-index:60;border-bottom:3px solid var(--gold)}
.tj-bar-inner{max-width:1180px;margin:0 auto;padding:0 32px;display:flex;align-items:center;gap:16px;height:70px}
.tj-brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.tj-bar-logo{height:44px;width:auto}
.tj-bar-name{
  font-family:'Big Shoulders Display','Barlow Condensed',sans-serif;font-weight:800;
  font-size:1.34rem;line-height:1;color:var(--cream);text-transform:uppercase;letter-spacing:.01em;
}
.tj-nav{margin-left:auto;display:flex;gap:2px;align-items:center}
.tj-nav a{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;font-size:.8rem;text-decoration:none;color:rgba(245,242,234,.8);
  padding:10px 14px;white-space:nowrap;transition:color .15s,background .15s;
}
.tj-nav a:hover{color:var(--bark);background:var(--gold)}
.tj-nav a.tj-nav-cta{color:var(--bark);background:var(--gold);margin-left:10px;font-weight:700;padding:10px 20px}
.tj-nav a.tj-nav-cta:hover{background:var(--cream);color:var(--bark)}

/* ---- Hero: a compact dark band, not a full-height field of green ---- */
.tj-hero{position:relative;overflow:hidden;background:var(--bark)}
.tj-hero-mark{
  position:absolute;right:-4%;top:50%;transform:translateY(-50%);
  width:min(460px,46vw);opacity:.1;pointer-events:none;user-select:none;
}
/* padding-block only — the horizontal gutter must come from .tj-wrap, or the
   hero text goes flush to the edge on any window narrower than the max-width. */
.tj-hero-inner{position:relative;z-index:2;padding-top:60px;padding-bottom:56px}
.tj-kicker{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.32em;font-size:.82rem;color:var(--gold);margin-bottom:12px;
}
.tj-hero h1{
  font-family:'Big Shoulders Display','Barlow Condensed',sans-serif;font-weight:800;
  text-transform:uppercase;font-size:clamp(3rem,10vw,7rem);line-height:.84;
  letter-spacing:-.005em;color:var(--cream);margin:0;
}
.tj-hero-rule{height:3px;background:var(--gold);width:min(460px,80%);margin:24px 0 18px}
.tj-hero-meta{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.2em;font-size:.92rem;color:rgba(245,242,234,.82);
}
.tj-hero-sub{max-width:520px;margin-top:16px;color:rgba(245,242,234,.72);font-size:1.04rem;line-height:1.6}
.tj-cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

/* Buttons */
.tj-btn{
  display:inline-block;font-family:'Barlow Condensed',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;text-decoration:none;font-size:.88rem;
  padding:15px 30px;border-radius:2px;transition:background .16s,color .16s,border-color .16s;
}
/* Primary action: pine on the light ground, gold on dark surfaces. Gold as a
   button fill is fine — it carries dark text, not light. */
.tj-btn-solid{background:var(--pine);color:#fff}
.tj-btn-solid:hover{background:#14492A}
.tj-dark .tj-btn-solid,.tj-hero .tj-btn-solid,.tj-pagehead .tj-btn-solid{background:var(--gold);color:var(--bark)}
.tj-dark .tj-btn-solid:hover,.tj-hero .tj-btn-solid:hover,.tj-pagehead .tj-btn-solid:hover{background:var(--cream)}
.tj-btn-line{background:transparent;color:var(--pine);border:1px solid var(--pine)}
.tj-btn-line:hover{background:var(--pine);color:#fff}
.tj-dark .tj-btn-line{color:var(--cream);border-color:rgba(245,242,234,.5)}
.tj-dark .tj-btn-line:hover{background:var(--cream);color:var(--bark);border-color:var(--cream)}

/* ---- Stat strip: dark, sits under the hero ---- */
.tj-facts{display:grid;grid-template-columns:repeat(3,1fr);background:var(--pine)}
.tj-fact{padding:22px 32px;border-right:1px solid rgba(245,242,234,.16)}
.tj-fact:last-child{border-right:none}
.tj-fact dt{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.22em;font-size:.68rem;color:rgba(245,242,234,.72);margin-bottom:5px;
}
.tj-fact dd{
  margin:0;font-family:'Big Shoulders Display','Barlow Condensed',sans-serif;font-weight:700;
  font-size:1.45rem;text-transform:uppercase;color:#fff;line-height:1;letter-spacing:.01em;
}

/* ---- Sections: light by default ---- */
.tj-panel{padding:78px 0}
.tj-panel-band{background:var(--band)}
.tj-panel h2{
  font-family:'Big Shoulders Display','Barlow Condensed',sans-serif;font-weight:800;
  text-transform:uppercase;font-size:clamp(2rem,5vw,3.2rem);line-height:.96;
  letter-spacing:-.005em;color:var(--bark);margin-bottom:22px;
}
.tj-dark .tj-panel h2,.tj-panel.tj-dark h2{color:var(--cream)}
.tj-split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.tj-body{font-size:1.06rem;line-height:1.75;color:var(--muted);max-width:56ch}
.tj-body p+p{margin-top:16px}
.tj-dark .tj-body{color:rgba(245,242,234,.76)}

/* Program pillars — hairline list */
.tj-list{border-top:2px solid var(--pine)}
.tj-list-row{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:20px 0;border-bottom:1px solid var(--rule)}
.tj-list-n{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:.74rem;
  letter-spacing:.2em;color:var(--pine);padding-top:5px;font-variant-numeric:tabular-nums;
}
.tj-list-t{
  font-family:'Big Shoulders Display','Barlow Condensed',sans-serif;font-weight:700;
  text-transform:uppercase;font-size:1.22rem;color:var(--bark);margin-bottom:4px;letter-spacing:.01em;
}
.tj-list-d{color:var(--muted);font-size:.97rem;line-height:1.6}

/* ---- Empty states ---- */
.tj-empty{border-top:2px solid var(--pine);padding:26px 0 0;color:var(--muted);font-size:.98rem;max-width:52ch}
.tj-empty strong{
  display:block;font-family:'Big Shoulders Display','Barlow Condensed',sans-serif;
  font-weight:700;text-transform:uppercase;font-size:1.12rem;color:var(--bark);
  margin-bottom:6px;letter-spacing:.01em;
}
.tj-dark .tj-empty{border-color:var(--gold);color:rgba(245,242,234,.6)}
.tj-dark .tj-empty strong{color:var(--cream)}

/* ---- Partners: horizontal logo band, like a club sponsor row ---- */
.tj-partner-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.tj-partner{background:#fff;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;padding:20px}
.tj-partner img{max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(1);opacity:.72;transition:filter .2s,opacity .2s}
.tj-partner:hover img{filter:none;opacity:1}

/* ---- Footer ---- */
.tj-foot{background:var(--bark);border-top:3px solid var(--gold);padding:54px 0 40px;color:rgba(245,242,234,.58);font-size:.92rem}
.tj-foot-top{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:30px}
.tj-foot-logo{width:64px}
.tj-foot-name{
  font-family:'Big Shoulders Display','Barlow Condensed',sans-serif;font-weight:800;
  text-transform:uppercase;color:var(--cream);font-size:1.5rem;line-height:1;letter-spacing:.01em;
}
.tj-foot-name span{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:.74rem;letter-spacing:.22em;color:var(--gold);margin-top:6px}
.tj-foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:26px;border-top:1px solid rgba(245,242,234,.14);padding-top:26px}
.tj-foot h4{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.2em;font-size:.7rem;color:var(--gold);margin-bottom:10px;
}
.tj-foot p{margin:0 0 5px}
.tj-foot a{color:rgba(245,242,234,.74);text-decoration:none}
.tj-foot a:hover{color:var(--gold)}
.tj-foot-legal{border-top:1px solid rgba(245,242,234,.14);margin-top:28px;padding-top:20px;font-size:.82rem;color:rgba(245,242,234,.42)}

/* ---- Support page ---- */
.tj-pagehead{background:var(--bark);position:relative;overflow:hidden;padding:56px 0 50px}
.tj-pagehead h1{
  font-family:'Big Shoulders Display','Barlow Condensed',sans-serif;font-weight:800;
  text-transform:uppercase;font-size:clamp(2.4rem,7vw,4.6rem);line-height:.9;
  color:var(--cream);margin:0 0 16px;letter-spacing:-.005em;
}
.tj-pagehead p{max-width:56ch;color:rgba(245,242,234,.74);font-size:1.04rem;line-height:1.7}

/* Progress toward the goal */
.tj-goal{margin-top:26px;max-width:640px}
.tj-goal-bar{height:6px;background:rgba(245,242,234,.16);position:relative;overflow:hidden}
.tj-goal-bar>div{position:absolute;top:0;bottom:0;transition:width .8s cubic-bezier(.2,.7,.3,1)}
.tj-goal-raised{background:var(--gold);left:0}
.tj-goal-cash{background:rgba(212,168,90,.55)}
.tj-goal-pending{background:rgba(212,168,90,.28)}
.tj-goal-stats{display:flex;align-items:baseline;gap:12px;margin-top:16px;flex-wrap:wrap}
.tj-goal-raised-n{
  font-family:'Big Shoulders Display','Barlow Condensed',sans-serif;font-weight:800;
  font-size:2.4rem;color:#fff;line-height:1;font-variant-numeric:tabular-nums;
}
.tj-goal-of{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.16em;font-size:.82rem;color:rgba(245,242,234,.66);
}
.tj-goal-note{margin-top:6px;font-size:.9rem;color:var(--gold)}

/* Sponsorship rate card */
.tj-tiers{width:100%;border-collapse:collapse}
.tj-tiers th{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.2em;font-size:.7rem;color:var(--pine);text-align:left;
  padding:0 0 12px;border-bottom:2px solid var(--pine);
}
.tj-tiers th:last-child,.tj-tiers td:last-child{text-align:right}
.tj-tiers td{padding:15px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.tj-tier-name{
  font-family:'Big Shoulders Display','Barlow Condensed',sans-serif;font-weight:700;
  text-transform:uppercase;font-size:1.14rem;color:var(--bark);letter-spacing:.01em;
}
.tj-tier-size{font-size:.89rem;color:var(--muted);margin-top:2px}
.tj-tier-price{
  font-family:'Big Shoulders Display','Barlow Condensed',sans-serif;font-weight:800;
  font-size:1.45rem;color:var(--pine);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.tj-tier-left{font-size:.78rem;color:var(--muted);margin-top:2px;text-transform:uppercase;letter-spacing:.12em}
.tj-tier-full{color:#A9B3AD}

.tj-banner-fig{margin:0;border:1px solid var(--rule);background:#fff}
.tj-banner-fig img{width:100%;display:block}
.tj-banner-cap{
  font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.18em;
  font-size:.7rem;color:var(--muted);padding:11px 16px;border-top:1px solid var(--rule);
}

/* ---- Motion ---- */
@media (prefers-reduced-motion:no-preference){
  .tj-rise{animation:tjRise .8s cubic-bezier(.2,.7,.3,1) backwards}
  .tj-rise-2{animation-delay:.08s}
  .tj-rise-3{animation-delay:.16s}
  .tj-rise-4{animation-delay:.24s}
  @keyframes tjRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
}

.tj a:focus-visible,.tj-btn:focus-visible,.tj-nav a:focus-visible{outline:2px solid var(--pine);outline-offset:3px}

@media (max-width:900px){
  .tj-split{grid-template-columns:1fr;gap:40px}
  .tj-facts{grid-template-columns:1fr}
  .tj-fact{border-right:none;border-bottom:1px solid rgba(245,242,234,.16);padding:18px 24px}
  .tj-fact:last-child{border-bottom:none}
  .tj-panel{padding:56px 0}
  .tj-hero-inner{padding:44px 0 42px}
  .tj-hero-mark{opacity:.07;right:-24%}
  .tj-wrap,.tj-bar-inner{padding:0 22px}
  /* Section anchors drop out on small screens; the TEAM links must not — they
     are the only route to the team pages from the nav. */
  .tj-nav a.tj-nav-sec{display:none}
  .tj-nav{gap:0}
  .tj-nav a{padding:10px 9px;font-size:.76rem;letter-spacing:.1em}
  .tj-nav a.tj-nav-cta{margin-left:6px;padding:10px 13px}
}

/* Phone type/spacing for the hero. The stacked photo layout itself lives in the
   MOBILE CORRECTIONS block at the end of this file — it has to come after the
   PHOTOGRAPHY rules to win the cascade. */
@media (max-width:760px){
  .tj-hero h1{font-size:clamp(2.6rem,13vw,4rem)}
  .tj-hero-rule{margin:18px 0 14px}
  .tj-cta-row{margin-top:24px}
  .tj-btn{padding:14px 22px;font-size:.82rem}
}

/* ==========================================================================
   PHOTOGRAPHY
   Photo-led hero, per medfordrogues.com. Faces sit in the upper two thirds, so
   the scrim rises from the bottom and the wordmark sits low-left over it —
   nothing is printed across the players.
   ========================================================================== */
.tj-hero--photo{background:var(--bark);min-height:clamp(420px,62vh,620px);display:flex;align-items:flex-end}
.tj-hero-img{
  position:absolute;inset:0;background-size:cover;background-position:center 32%;
  background-repeat:no-repeat;background-image:var(--hero);
}
.tj-hero-scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,31,22,.34) 0%,rgba(11,31,22,.12) 34%,rgba(11,31,22,.72) 74%,rgba(11,31,22,.94) 100%);
}
.tj-hero--photo .tj-hero-inner{padding-top:0;padding-bottom:46px;width:100%}
.tj-hero--photo h1{text-shadow:0 3px 26px rgba(0,0,0,.55)}
.tj-hero--photo .tj-hero-meta,.tj-hero--photo .tj-hero-sub{text-shadow:0 2px 14px rgba(0,0,0,.6)}
.tj-hero--photo .tj-hero-mark{display:none}

/* Honour label — states a real result, never decoration */
.tj-honour{
  display:inline-flex;align-items:center;gap:11px;margin-bottom:16px;
  border:1px solid rgba(212,168,90,.6);padding:8px 15px;border-radius:2px;
  background:rgba(11,31,22,.55);backdrop-filter:blur(4px);
}
.tj-honour span{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.18em;font-size:.76rem;color:var(--gold);
}

/* Feature block: photo beside copy */
.tj-figure{position:relative;overflow:hidden;background:var(--band)}
.tj-figure img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3}

/* Photo grid — mixed portrait/landscape, tiled without gaps */
.tj-photos{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--rule)}
.tj-photo{position:relative;overflow:hidden;background:var(--band)}
.tj-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.tj-photo:hover img{transform:scale(1.04)}
.tj-photo--tall{grid-row:span 2}
.tj-photo--wide{grid-column:span 2}
@media (max-width:900px){
  .tj-photos{grid-template-columns:repeat(2,1fr)}
  .tj-photo--wide{grid-column:span 2}
}

/* ==========================================================================
   TEAMS — the organization fields several age groups
   ========================================================================== */
.tj-teams-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px;background:var(--rule);border:1px solid var(--rule);margin-top:8px}
.tj-team-card{
  background:#fff;padding:32px 28px;text-decoration:none;display:flex;flex-direction:column;
  transition:background .18s;position:relative;
}
.tj-team-card:hover{background:var(--band)}
.tj-team-age{
  font-family:'Big Shoulders Display','Barlow Condensed',sans-serif;font-weight:800;
  font-size:3.4rem;line-height:.85;color:var(--pine);letter-spacing:-.01em;
}
.tj-team-name{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;font-size:.8rem;color:var(--bark);margin-top:12px;
}
.tj-team-tag{color:var(--muted);font-size:.95rem;line-height:1.55;margin-top:10px}
.tj-team-go{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;font-size:.76rem;color:var(--pine);margin-top:auto;padding-top:22px;
}
.tj-team-card:hover .tj-team-go{color:var(--bark)}

/* Team links in the footer use the footer's own link style, not the topbar's */
.tj-foot-teams{display:flex;flex-direction:column;gap:5px}
.tj-foot-teams a{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;font-size:.82rem;color:rgba(245,242,234,.74);
  text-decoration:none;padding:0;background:none;
}
.tj-foot-teams a:hover{color:var(--gold);background:none}

/* ---- Schedule ---- */
.tj-sched{border-top:2px solid var(--pine)}
.tj-sched-row{
  display:grid;grid-template-columns:96px 1fr auto;gap:22px;align-items:baseline;
  padding:20px 0;border-bottom:1px solid var(--rule);
}
.tj-sched-date{
  font-family:'Big Shoulders Display','Barlow Condensed',sans-serif;font-weight:800;
  color:var(--pine);line-height:.95;font-variant-numeric:tabular-nums;
}
.tj-sched-mon{display:block;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:600;font-family:'Barlow Condensed',sans-serif}
.tj-sched-day{display:block;font-size:2rem}
.tj-sched-title{
  font-family:'Big Shoulders Display','Barlow Condensed',sans-serif;font-weight:700;
  text-transform:uppercase;font-size:1.2rem;color:var(--bark);letter-spacing:.01em;
}
.tj-sched-loc{color:var(--muted);font-size:.94rem;margin-top:4px;line-height:1.5}
.tj-sched-kind{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.16em;font-size:.68rem;color:var(--pine);
  border:1px solid var(--rule);padding:5px 10px;white-space:nowrap;
}
.tj-sched-time{display:block;color:var(--muted);font-size:.84rem;margin-top:6px;text-align:right;letter-spacing:.04em}
.tj-sched-note{margin-top:18px;font-size:.84rem;color:var(--muted)}
@media (max-width:640px){
  .tj-sched-row{grid-template-columns:64px 1fr;gap:16px}
  .tj-sched-kind{grid-column:2;justify-self:start;margin-top:8px}
  .tj-sched-day{font-size:1.6rem}
  .tj-sched-time{text-align:left}
}

/* ---- Roster: the jersey number does the visual work ---- */
.tj-roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:8px}
.tj-player{background:#fff;padding:22px 20px;display:flex;align-items:baseline;gap:14px}
.tj-player-num{
  font-family:'Big Shoulders Display','Barlow Condensed',sans-serif;font-weight:800;
  font-size:2.3rem;line-height:.85;color:var(--pine);font-variant-numeric:tabular-nums;
  min-width:1.6ch;letter-spacing:-.02em;
}
.tj-player-num.is-blank{color:var(--rule)}
.tj-player-name{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;font-size:.95rem;color:var(--bark);line-height:1.3;
}
.tj-panel-band .tj-player{background:#fff}

/* ==========================================================================
   MOBILE CORRECTIONS  — appended last on purpose.
   The .tj-hero--photo{display:flex} rule in the PHOTOGRAPHY block sits later in
   this file than the earlier @media query, so it won the cascade at every width
   and the stacked phone layout never actually took effect. Overrides that must
   beat it have to come after it.
   ========================================================================== */

/* Outline buttons on DARK surfaces. The hero and page header are dark but carry
   no .tj-dark class, so pine-on-pine was rendering at roughly 1.5:1 contrast —
   "The Program" was effectively invisible. */
.tj-hero .tj-btn-line,
.tj-pagehead .tj-btn-line{color:var(--cream);border-color:rgba(245,242,234,.55)}
.tj-hero .tj-btn-line:hover,
.tj-pagehead .tj-btn-line:hover{background:var(--cream);color:var(--bark);border-color:var(--cream)}

@media (max-width:760px){
  /* Stack: whole photo, then the wordmark on solid pine beneath it. */
  .tj-hero--photo{display:block;min-height:0;align-items:initial}
  .tj-hero--photo .tj-hero-img{
    position:relative;inset:auto;width:100%;aspect-ratio:4/3;
    background-position:center;background-image:var(--hero-mobile,var(--hero));
  }
  .tj-hero--photo .tj-hero-scrim{display:none}
  .tj-hero--photo .tj-hero-inner{padding-top:26px;padding-bottom:30px}
  .tj-hero--photo h1,
  .tj-hero--photo .tj-hero-meta,
  .tj-hero--photo .tj-hero-sub{text-shadow:none}

  /* The brand wordmark plus five nav items cannot fit 390px — the text was
     overrunning the 10U link. The badge alone identifies the site here. */
  .tj-bar-name{display:none}
  .tj-bar-logo{height:40px}
}

/* Touch targets and label legibility on phones.
   Footer links rendered 18–21px tall (hard to hit with a thumb) and the stat
   labels came out at 10.9px. Both measured on a 390px viewport. */
@media (max-width:760px){
  .tj-foot-cols p{margin:0}
  .tj-foot-cols p a,
  .tj-foot-teams a{display:inline-block;padding:9px 0;line-height:1.25}
  .tj-foot-cols{gap:18px}
  .tj-fact dt{font-size:.78rem;letter-spacing:.18em}
  .tj-fact{padding:16px 22px}
  .tj-eyebrow{font-size:.8rem}
}

/* ---- Social marks in the header ---- */
.tj-social{display:flex;align-items:center;gap:2px;margin-left:12px}
.tj-social a{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:3px;
  color:rgba(245,242,234,.78);transition:color .15s,background .15s;
}
.tj-social a:hover{color:var(--bark);background:var(--gold)}
.tj-social svg{width:17px;height:17px;display:block}
@media (max-width:760px){
  /* Space is tight next to the team links; keep the marks but tighten them. */
  .tj-social{margin-left:6px;gap:0}
  .tj-social a{width:30px;height:30px}
  .tj-social svg{width:16px;height:16px}
}

/* Staff-only preview marker — makes it unmistakable that a section is switched
   off for the public even though a logged-in coach can see it. */
.tj-preview-note{
  border-left:4px solid var(--ember);background:#FFF4E8;color:#7A4A18;
  padding:14px 18px;margin-bottom:22px;font-size:.95rem;line-height:1.6;max-width:60ch;
}

/* "This is only an idea" marker — must read unambiguously, since the concept
   view deliberately shows a mockup and prices that are not yet real. */
.tj-concept-flag{
  display:inline-block;font-family:'Barlow Condensed',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;
  color:var(--bark);background:var(--gold);padding:7px 14px;margin-bottom:14px;
}

/* Nav wordmark gains the gold "Southern Oregon" kicker, echoing the hero. */
.tj-bar-name{line-height:1.05}
.tj-bar-kicker{
  display:block;font-family:'Barlow Condensed',sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.2em;font-size:.6rem;
  color:var(--gold);margin-bottom:3px;
}