/* Embrace rebuild: news page. Uses the tokens, header, band and footer from home.css. */
.links a[aria-current="page"]::after{ transform:scaleX(1); }
.news h1{ font-family:var(--display); font-weight:var(--display-w); font-synthesis:none; text-transform:uppercase; line-height:.95; font-size:clamp(3.2rem,7.5vw,6rem); text-align:center; margin-bottom:2.5rem; }
.news h1 span{ color:var(--gold); }

/* the newest story: one wide photo with its title over the dark left side */
.feature{ position:relative; height:560px; border-radius:14px; overflow:hidden; border:1px solid var(--line); }
.feature img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.feature::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,0) 75%); }
.feature-text{ position:absolute; z-index:1; left:0; bottom:0; max-width:560px; padding:3rem; display:flex; flex-direction:column; gap:.8rem; }
.feature-text h2{ margin:0; font-size:clamp(2.4rem,4vw,3.4rem); }
.feature-text p + p{ margin-top:0; }
.story-date{ font-family:'Barlow Condensed',system-ui,sans-serif; font-weight:600; font-size:1.05rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); }
.story-more{ margin-top:.5rem; color:var(--gold); font-weight:700; width:fit-content; }
.story-more i{ font-style:normal; display:inline-block; transition:transform .2s; }
.story-more:hover i{ transform:translateX(4px); }

/* every older story: a row with the logo, the story, then its Read more link on the right */
.news-list{ margin-top:2.5rem; border-top:1px solid rgba(245,197,24,.3); }
.news-row{ display:grid; grid-template-columns:300px 1fr 220px; gap:2rem; align-items:center; padding:1.75rem 0; border-bottom:1px solid rgba(245,197,24,.3); }
.news-pic{ position:relative; height:190px; border-radius:10px; overflow:hidden; }
.news-pic img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* an event organizer's logo instead of a photo: centered on a dark tile, or a white tile for logos made for light backgrounds */
.news-pic.logo{ background:var(--panel); border:1px solid var(--line); }
.news-pic.logo img{ inset:2rem 2.5rem; width:calc(100% - 5rem); height:calc(100% - 4rem); object-fit:contain; }
.news-pic.logo.light{ background:#fff; border-color:#fff; }
.news-text{ display:flex; flex-direction:column; gap:.55rem; }
.news-text h3{ font-family:var(--display); font-weight:var(--display-w); font-synthesis:none; text-transform:uppercase; font-size:1.6rem; line-height:1; margin:0; }
.news-text p + p{ margin-top:0; max-width:560px; }
.news-side{ display:flex; flex-direction:column; align-items:flex-end; gap:.75rem; text-align:right; }
.news-side .story-more{ margin-top:0; }

/* phones and small tablets: photo on top, then the story, everything left aligned (mobile pass still to come) */
@media (max-width:860px){
  .feature{ height:460px; }
  .feature-text{ padding:1.75rem; }
  .news-row{ grid-template-columns:1fr; gap:1rem; }
  .news-pic{ height:220px; }
  .news-side{ align-items:flex-start; text-align:left; }
}

/* medal results inside a story */
.medals{ list-style:none; display:grid; gap:.5rem; margin:.4rem 0 .2rem; }
.medals li{ color:#d8d8da; font-size:.95rem; display:flex; align-items:center; gap:.7rem; }
.medal{ flex:none; width:64px; text-align:center; font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; padding:.3rem 0; border-radius:3px; color:#000; }
/* metallic badges: a light band across the middle, darker at the edges, a thin bright edge on top */
.medal{ font-weight:700; text-shadow:0 1px 0 rgba(255,255,255,.35); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(0,0,0,.25), 0 1px 3px rgba(0,0,0,.4); }
.medal.gold{ background:linear-gradient(135deg,#8a6a12 0%,#d4a62a 22%,#fff1a8 45%,#e3b53a 60%,#a87e16 82%,#f2cf63 100%); color:#2b1d00; }
.medal.silver{ background:linear-gradient(135deg,#6f747b 0%,#b9bec5 22%,#ffffff 45%,#c4c9cf 60%,#878c93 82%,#dde1e6 100%); color:#1c1e22; }
.medal.bronze{ background:linear-gradient(135deg,#6b3a14 0%,#b06a32 22%,#f4c08d 45%,#c07b42 60%,#7d4519 82%,#d9955a 100%); color:#2a1405; }
.story-src{ color:var(--muted); font-size:.82rem; text-decoration:underline; text-underline-offset:3px; width:fit-content; }
.story-src:hover{ color:var(--gold); }

/* big numbers inside a story */
.stats{ display:flex; flex-wrap:wrap; gap:1.75rem; margin:.4rem 0 .2rem; }
.stats p{ display:flex; flex-direction:column; margin:0; }
.stats b{ font-family:var(--display); font-weight:var(--display-w); font-synthesis:none; font-size:2rem; line-height:1; color:var(--gold); }
.stats span{ color:var(--muted); font-size:.8rem; max-width:150px; }

/* a story's own page: back link, date, title, then a photo grid; each photo opens full size */
.back{ display:inline-block; color:var(--gold); font-weight:600; margin-bottom:1.5rem; }
.back:hover{ text-decoration:underline; text-underline-offset:4px; }
/* a story's own page, the same order on every story: big centered title, date, location,
   then the write-up, the results and the photos, each under its own heading */
.article-head{ text-align:center; margin:.5rem auto 1rem; }
.article-head h1{ margin-bottom:1rem; }
.article-head .story-date{ font-size:1.25rem; }
.article-place{ font-family:'Barlow Condensed',system-ui,sans-serif; font-weight:600; font-size:1.05rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:.15rem; }
.article-sec{ margin-top:3.5rem; }
.article-sec > h2{ font-size:2rem; padding-bottom:.6rem; margin-bottom:1.5rem; border-bottom:2px solid var(--gold); }
.article-body p{ max-width:760px; font-size:1.08rem; line-height:1.75; color:#d8d8da; }
.article-body p + p{ margin-top:1rem; }
.article-soon{ color:var(--muted); font-size:1.05rem; }
.article-sec .story-src{ display:inline-block; margin-top:.5rem; }
.article-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.article-gallery a{ display:block; border-radius:10px; overflow:hidden; border:1px solid var(--line); transition:border-color .2s, transform .2s; }
.article-gallery a:hover{ border-color:var(--gold); transform:translateY(-3px); }
.article-gallery img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
@media (max-width:860px){ .article-gallery{ grid-template-columns:1fr 1fr; } }
/* only one photo so far: show it wide instead of alone in a three-column grid */
.article-gallery.one{ grid-template-columns:1fr; }
.article-gallery.one img{ aspect-ratio:16/9; }

/* a story's full results: big numbers, then every medal in columns by age group */
.stats.big{ gap:3rem; margin:0 0 3rem; padding:1.75rem 2rem; background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:10px; }
.stats.big b{ font-size:2.8rem; }
.stats.big span{ font-size:.85rem; max-width:180px; margin-top:.3rem; }
/* a story's big numbers as a gold band: black numbers, thin dividers between them */
.stats-band{ display:grid; grid-template-columns:repeat(4,1fr); background:var(--gold); border-radius:12px; padding:.75rem; margin-bottom:3rem; }
.stats-band > div{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:1.5rem 1rem; }
.stats-band > div + div{ border-left:1px solid rgba(0,0,0,.2); }
.stats-band b{ font-family:var(--display); font-weight:var(--display-w); font-synthesis:none; font-size:3.4rem; line-height:1; color:#000; margin-bottom:.5rem; }
.stats-band .l{ font-family:'Barlow Condensed',system-ui,sans-serif; font-weight:600; font-size:1.05rem; letter-spacing:.08em; text-transform:uppercase; color:#000; }
.stats-band .d{ color:#3a3000; font-size:.85rem; margin-top:.15rem; }
@media (max-width:860px){ .stats-band{ grid-template-columns:1fr 1fr; } .stats-band > div + div{ border-left:0; } }
.roll-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem; align-items:start; margin-bottom:2rem; }
.roll-col h2, .roll-col h3{ font-size:1.6rem; padding-bottom:.6rem; margin-bottom:1rem; border-bottom:2px solid var(--gold); display:flex; justify-content:space-between; align-items:baseline; }
.roll-col h3{ font-family:var(--display); font-weight:var(--display-w); font-synthesis:none; text-transform:uppercase; line-height:1; font-size:1.4rem; border-bottom:1px solid rgba(245,197,24,.35); }   /* column heads under the Results heading: a lighter line than the section's */
.roll-col h2 span, .roll-col h3 span{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.medals.roll{ gap:.85rem; }
.medals.roll li{ align-items:flex-start; }
.medals.roll li > span:last-child{ display:flex; flex-direction:column; }
.medals.roll b{ color:var(--white); font-weight:700; }
.medals.roll small{ color:var(--muted); font-size:.8rem; }
@media (max-width:860px){ .roll-grid{ grid-template-columns:1fr; } }
