/* ============ Tokens ============ */
:root{
  --navy-950: #060d1c;
  --navy-900: #0a1730;
  --navy-800: #10203f;
  --navy-700: #17335e;
  --blue-500: #2f6fed;
  --blue-400: #4c8bff;
  --blue-100: #e7f0ff;
  --ink: #0a1730;
  --ink-soft: #4a5670;
  --paper: #ffffff;
  --paper-soft: #f4f6fb;
  --line: #e3e8f2;
  --radius: 14px;
  --shadow: 0 20px 40px -20px rgba(10, 23, 48, 0.35);
  --font-display: "Archivo", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
}

/* ============ Reset ============ */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin: 0; padding: 0; }
h1, h2, h3{ font-family: var(--font-display); line-height: 1.15; margin: 0 0 .5em; }
p{ margin: 0 0 1em; color: var(--ink-soft); }

.sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link{
  position: absolute; left: 1rem; top: -3rem; background: var(--blue-500); color: #fff;
  padding: .6rem 1rem; border-radius: 8px; transition: top .2s ease; z-index: 200;
}
.skip-link:focus{ top: 1rem; }

.wrap{
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow{
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue-500);
  margin: 0 0 .6em;
}
.hero-content .eyebrow{ color: #fff; }

/* ============ Buttons ============ */
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  border: 2px solid transparent;
}
.btn-primary{
  background: var(--blue-500);
  color: #fff;
  box-shadow: 0 12px 24px -10px rgba(47,111,237,.55);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 16px 28px -10px rgba(47,111,237,.65); }
.btn-ghost{
  border-color: rgba(255,255,255,.55);
  color: #fff;
}
.btn-ghost:hover{ background: rgba(255,255,255,.12); }
.btn-on-dark{
  background: #fff;
  color: var(--navy-900);
}
.btn-on-dark:hover{ transform: translateY(-2px); }

.link-arrow{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .92rem;
  color: var(--blue-500);
  white-space: nowrap;
}
.link-arrow:hover{ text-decoration: underline; }

/* ============ Header ============ */
.site-header{
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
/* Background/blur live on a pseudo-element rather than .site-header itself,
   so backdrop-filter doesn't create a new containing block on the header —
   that would trap position:fixed descendants like the mobile nav panel
   inside the header's own box instead of letting them fill the viewport. */
.site-header::before{
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: rgba(6,13,28,.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.header-inner{
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}
.logo{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--blue-400);
  letter-spacing: .01em;
}
.logo span{ font-weight: 500; color: #fff; margin-left: .3em; }
.logo .three{ color: #FFCD00; margin-left: -.05em; }
.logo-footer{ color: var(--blue-500); }
.logo-footer span{ color: var(--navy-900); }

.main-nav #nav-list{
  display: flex;
  gap: 2rem;
}
.main-nav a{
  font-family: var(--font-display);
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: rgba(255,255,255,.85);
  text-transform: uppercase;
  padding: .4rem 0;
  border-bottom: 2px solid transparent;
}
.main-nav a:hover{ color: #fff; border-color: var(--blue-400); }

.nav-toggle{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: transparent; border: 0; cursor: pointer;
}
.nav-toggle span{
  display: block; width: 22px; height: 2px; background: #fff; margin: 0 auto;
}

/* ============ Hero ============ */
.hero{
  position: relative;
  min-height: 640px;
  display: flex; align-items: flex-end;
  color: #fff;
  overflow: hidden;
}
.hero-media{ position: absolute; inset: 0; }
.hero-media img{ width: 100%; height: 100%; object-fit: cover; object-position: center 65%; transform: scale(1.1); transform-origin: 78% 55%; }
.hero-scrim{
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6,13,28,0) 0%, rgba(6,13,28,.12) 40%, rgba(6,13,28,.55) 100%),
    linear-gradient(90deg, rgba(6,13,28,.4) 0%, rgba(6,13,28,0) 45%);
}
.hero-content{ position: relative; padding: 7rem 24px 1.25rem; max-width: 760px; }
.hero h1{ font-size: clamp(2.6rem, 6vw, 4.2rem); margin-bottom: .25em; }
.hero-lead{ color: rgba(255,255,255,.88); font-size: 1.08rem; max-width: 56ch; }
.hero-actions{ display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.8rem; }

/* ============ Stat strip ============ */
.strip{ background: var(--navy-900); color: #fff; }
.strip-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  padding: 2.6rem 24px;
}
.strip-item{ display: flex; flex-direction: column; gap: .35rem; }
.strip-num{ font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: var(--blue-400); }
.strip-label{ font-size: .88rem; color: rgba(255,255,255,.75); }

.strip-tagline{ padding: 1.6rem 0; }
.tagline-text{
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(.85rem, 2vw, 1.1rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
}

/* ============ Sections ============ */
.section{ padding: 5.5rem 0; }
.section-head{
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
  margin-bottom: 2.5rem;
}
.section-head h2{ font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 0; }

/* ============ News ============ */
.news-section{ background: var(--paper-soft); }
.news-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.news-card{
  background: var(--paper);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.news-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow); }
.news-card a{ display: flex; flex-direction: column; height: 100%; }
.news-card img{ width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.news-body{ padding: 1.4rem; display: flex; flex-direction: column; flex: 1; }
.news-body time{ font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-500); }
.news-body h3{ font-size: 1.1rem; margin: .5em 0 .5em; }
.news-body p{ font-size: .93rem; margin-bottom: .8em; flex: 1; }
.read-more{ font-family: var(--font-display); font-weight: 700; font-size: .85rem; color: var(--blue-500); }

/* ============ About ============ */
.about-grid{
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 3.5rem;
  align-items: center;
}
.about-media img{ border-radius: var(--radius); box-shadow: var(--shadow); aspect-ratio: 4/5; object-fit: cover; }
.about-text h2{ font-size: clamp(1.7rem, 3vw, 2.3rem); }
.about-text p{ font-size: 1rem; }

/* ============ Gallery ============ */
.gallery-section{ background: var(--paper-soft); }
.photo-grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .75rem;
}
.photo-grid-item{ border-radius: 10px; overflow: hidden; aspect-ratio: 1/1; }
.photo-grid-item img{ width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.photo-grid-item:hover img{ transform: scale(1.06); }
.gallery-tile{ display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--shadow); }
.gallery-tile img{ width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.gallery-tile:hover img{ transform: scale(1.06); }

/* ============ Lightbox ============ */
.lightbox{
  position: fixed; inset: 0; z-index: 999;
  display: none; align-items: center; justify-content: center;
  background: rgba(6,13,28,.92);
  padding: 2rem;
}
.lightbox.open{ display: flex; }
.lightbox-figure{ position: relative; max-width: 92vw; max-height: 88vh; display: flex; flex-direction: column; align-items: center; }
.lightbox-img{ display: block; max-width: 92vw; max-height: 80vh; width: auto; height: auto; border-radius: 6px; box-shadow: var(--shadow); }
.lightbox-caption{ color: #fff; font-size: .85rem; margin-top: .8rem; opacity: .85; text-align: center; }
.lightbox-close, .lightbox-prev, .lightbox-next{
  position: absolute; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25);
  color: #fff; border-radius: 999px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .2s ease; line-height: 1; padding: 0;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ background: rgba(255,255,255,.2); }
.lightbox-close{ top: 1rem; right: 1rem; width: 2.75rem; height: 2.75rem; font-size: 1.5rem; }
.lightbox-prev, .lightbox-next{ top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; font-size: 1.7rem; }
.lightbox-prev{ left: .5rem; }
.lightbox-next{ right: .5rem; }
.lightbox-counter{
  position: absolute; top: 1rem; left: 1rem; color: #fff; font-size: .82rem;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25); padding: .35rem .8rem; border-radius: 999px;
}
body.lightbox-locked{ overflow: hidden; }

@media (max-width: 640px){
  .lightbox{ padding: 1rem; }
  .lightbox-prev, .lightbox-next{ width: 2.4rem; height: 2.4rem; font-size: 1.3rem; }
  .lightbox-close{ width: 2.4rem; height: 2.4rem; font-size: 1.3rem; }
}
.gallery-jump{ display: flex; flex-wrap: wrap; gap: .6rem .9rem; margin-bottom: 2.5rem; font-size: .88rem; }
.gallery-jump a{ color: var(--blue-500); font-weight: 600; }

/* ============ Video ============ */
.video-grid{
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 3rem;
  align-items: center;
}
.video-text h2{ font-size: clamp(1.7rem, 3vw, 2.2rem); }
.video-embed{
  position: relative; width: 100%; aspect-ratio: 16/9;
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  background: var(--navy-900);
}
.video-embed iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ============ CTA ============ */
.cta-section{
  background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
  color: #fff;
}
.cta-inner{ text-align: center; padding: 4.5rem 24px; max-width: 640px; margin: 0 auto; }
.cta-inner h2{ font-size: clamp(1.7rem, 3vw, 2.3rem); }
.cta-inner p{ color: rgba(255,255,255,.8); margin-bottom: 1.8rem; }

/* ============ Footer ============ */
.site-footer{ background: var(--paper); border-top: 1px solid var(--line); }
.footer-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 3rem;
  padding: 4rem 24px 2.5rem;
}
.footer-brand p{ font-size: .92rem; max-width: 32ch; margin: 1rem 0 1.2rem; }
.social-link{ font-family: var(--font-display); font-weight: 700; font-size: .88rem; color: var(--blue-500); }
.footer-col h3{ font-family: var(--font-display); font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 1rem; }
.footer-col ul{ display: flex; flex-direction: column; gap: .65rem; }
.footer-col a{ font-size: .95rem; }
.footer-col a:hover{ color: var(--blue-500); }
.contact-list li{ display: flex; flex-direction: column; margin-bottom: 1rem; }
.contact-list strong{ font-size: .95rem; }
.contact-list span{ font-size: .82rem; color: var(--ink-soft); margin-bottom: .2rem; }
.contact-list a{ font-size: .88rem; color: var(--blue-500); }
.footer-bottom{
  border-top: 1px solid var(--line);
  padding: 1.4rem 24px;
}
.footer-bottom p{ margin: 0; font-size: .82rem; color: var(--ink-soft); }

/* ============ Responsive ============ */

/* Header nav switches to the hamburger menu well before the grid
   breakpoints below: with 9 nav items, the horizontal nav needs
   roughly 1070px to lay out without wrapping, so anything narrower
   (including iPad portrait at 768px and iPad landscape at 1024px)
   needs the collapsed menu or the nav overflows the header and the
   whole page gains horizontal scroll. */
@media (max-width: 1100px){
  .main-nav #nav-list{
    position: fixed; inset: 72px 0 0 0;
    flex-direction: column;
    background: var(--navy-950);
    padding: 2rem 24px;
    gap: 1.2rem;
    transform: translateX(100%);
    transition: transform .25s ease;
    overflow-y: auto;
  }
  .main-nav.open #nav-list{ transform: translateX(0); }
  .nav-toggle{ display: flex; }
}

@media (max-width: 960px){
  .news-grid{ grid-template-columns: 1fr 1fr; }
  .about-grid{ grid-template-columns: 1fr; }
  .about-media{ order: -1; }
  .about-media img{ aspect-ratio: 16/9; }
  .video-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .footer-brand{ grid-column: span 2; }
  .photo-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* ============ Sub-page hero ============ */
.page-hero{
  position: relative;
  padding: 8.5rem 0 3.5rem;
  color: #fff;
  background: linear-gradient(135deg, var(--navy-950), var(--navy-700));
  overflow: hidden;
}
.page-hero::after{
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 85% 20%, rgba(76,139,255,.25), transparent 55%);
}
.page-hero-media{ position: absolute; inset: 0; }
.page-hero-media img{ width: 100%; height: 100%; object-fit: cover; object-position: center; }
.page-hero.hero-tall{ padding-top: 10.5rem; padding-bottom: 6.5rem; }
.page-hero-scrim{
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(6,13,28,.6) 0%, rgba(6,13,28,.22) 45%, rgba(6,13,28,0) 72%),
    radial-gradient(ellipse at center, rgba(6,13,28,0) 55%, rgba(6,13,28,.35) 100%);
}
.page-hero-scrim-left{
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(6,13,28,.65) 0%, rgba(6,13,28,.3) 30%, rgba(6,13,28,0) 60%);
}
.page-hero-inner{ position: relative; }
.page-hero h1{ font-size: clamp(2rem, 4.5vw, 3rem); margin: 0 0 .4em; }
.page-hero p{ color: rgba(255,255,255,.82); max-width: 60ch; font-size: 1.02rem; margin: 0; }
.breadcrumb{ font-size: .82rem; color: rgba(255,255,255,.6); margin-bottom: 1rem; }
.breadcrumb a{ color: rgba(255,255,255,.85); }
.breadcrumb a:hover{ text-decoration: underline; }

.main-nav a.active{ color: #fff; border-color: var(--blue-400); }

/* ============ News archive ============ */
.archive{ padding: 4.5rem 0 6rem; }
.archive-item{
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 2rem;
  padding: 2.2rem 0;
  border-bottom: 1px solid var(--line);
}
.archive-item:first-child{ padding-top: 0; }
.archive-date{ font-family: var(--font-display); font-weight: 700; color: var(--blue-500); font-size: .95rem; padding-top: .1rem; }
.archive-item h2{ font-size: 1.25rem; margin: 0 0 .5em; }
.archive-item p{ margin: 0; font-size: .96rem; }
.archive-item p + p{ margin-top: .8em; }
.archive-thumb{ float: right; width: 240px; max-width: 42%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); margin: 0 0 .8rem 1.6rem; box-shadow: var(--shadow); }
a.inline-link{ color: var(--blue-500); font-weight: 600; }

/* ============ Event tables ============ */
.events{ padding: 4.5rem 0 6rem; }
.events-note{
  background: var(--blue-100);
  color: var(--navy-900);
  border-radius: 10px;
  padding: .9rem 1.2rem;
  font-size: .92rem;
  margin-bottom: 2.5rem;
}
.events-note a{ color: var(--blue-500); font-weight: 700; }
.events-year{ font-size: 1.3rem; margin: 2.6rem 0 1.1rem; }
.events-year:first-of-type{ margin-top: 0; }
/* On Regler/Länkar the first .events-year follows a doc-list or
   links-grid rather than leading the section, so the first-of-type
   reset above would leave it sitting right on top of that block —
   give it its normal top margin back in that context. */
.doc-list + .events-year, .links-grid + .events-year{ margin-top: 2.6rem; }
.table-scroll{ overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table.event-table{ width: 100%; border-collapse: collapse; min-width: 640px; font-size: .92rem; }
.event-table th{
  text-align: left; font-family: var(--font-display); font-size: .76rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft); background: var(--paper-soft);
  padding: .85rem 1rem; border-bottom: 1px solid var(--line);
}
.event-table td{ padding: .95rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink); }
.event-table tr:last-child td{ border-bottom: none; }
.event-table .event-links{ display: flex; gap: .7rem; flex-wrap: wrap; }
.event-table .event-links a{ color: var(--blue-500); font-weight: 700; white-space: nowrap; }
.tag-cancelled{ color: #b4534a; font-weight: 700; font-size: .8rem; }
table.results-table{ table-layout: fixed; }
.results-table th:first-child, .results-table td:first-child{ width: 300px; }
.event-table tr.selected td{ font-weight: 700; box-shadow: inset 3px 0 0 var(--blue-500); }
/* Widths match the 2026 table's own natural (auto-layout) column
   proportions, so the 2025/2024 tables line up with it instead of
   each sizing its columns independently. */
table.schedule-table{ table-layout: fixed; }
.schedule-table th:nth-child(1), .schedule-table td:nth-child(1){ width: 15%; }
.schedule-table th:nth-child(2), .schedule-table td:nth-child(2){ width: 19%; }
.schedule-table th:nth-child(3), .schedule-table td:nth-child(3){ width: 25%; }
.schedule-table th:nth-child(4), .schedule-table td:nth-child(4){ width: 17%; }
.schedule-table th:nth-child(5), .schedule-table td:nth-child(5){ width: 24%; }
/* A <td> with display:flex stops respecting the table's fixed column
   width in some browsers, so the Länkar cells collapsed to fit their
   content and the links stacked instead of sitting on one row. Keep
   the <td> itself a normal table-cell and flex only the inner
   wrapper, with no wrapping, so the links share a single line
   without affecting any column width. */
.schedule-table .event-links{ display: table-cell; }
.schedule-table .event-links-inner{ display: flex; align-items: center; gap: .6rem; flex-wrap: nowrap; }

/* ============ Document list (Regler / Historia) ============ */
.doc-section{ padding: 4.5rem 0 6rem; }
.doc-note{
  background: var(--paper-soft); border: 1px solid var(--line); border-radius: 10px;
  padding: 1rem 1.2rem; font-size: .9rem; color: var(--ink-soft); margin-bottom: 2.5rem;
}
.doc-list{ display: grid; gap: .85rem; }
.doc-item{
  display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--paper);
  transition: border-color .15s ease, transform .15s ease;
}
.doc-item:hover{ border-color: var(--blue-400); transform: translateX(2px); }
.doc-icon{
  width: 40px; height: 40px; border-radius: 9px;
  background: var(--blue-100); color: var(--blue-500);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: .72rem;
  flex-shrink: 0;
}
.doc-item span{ font-weight: 600; font-size: .96rem; }

/* ============ Theory sections ============ */
.theory{ padding: 4.5rem 0 6rem; }
.theory-block{ padding: 2.6rem 0; border-bottom: 1px solid var(--line); }
.theory-block:first-child{ padding-top: 0; }
.theory-block:last-child{ border-bottom: none; }
.theory-block h2{ font-size: 1.5rem; }
.theory-block h3{ font-size: 1.05rem; margin-top: 1.4rem; }
.theory-block p{ font-size: .96rem; max-width: 74ch; }
.theory-block ul{ display: grid; gap: .9rem; margin: 1rem 0; }
.theory-block ul li{ font-size: .95rem; color: var(--ink-soft); padding-left: 1.3rem; position: relative; }
.theory-block ul li::before{ content: "→"; position: absolute; left: 0; color: var(--blue-500); font-weight: 700; }
.theory-block ul li strong{ color: var(--ink); }
.theory-toc{ display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 3rem; }
.theory-toc a{
  font-family: var(--font-display); font-weight: 700; font-size: .82rem;
  padding: .5rem 1rem; border-radius: 999px; background: var(--paper-soft); border: 1px solid var(--line);
}
.theory-toc a:hover{ border-color: var(--blue-400); color: var(--blue-500); }
.theory-img{ display: block; max-width: 100%; height: auto; border-radius: 10px; box-shadow: var(--shadow); margin: 1.2rem 0; }
.theory-img-row{ display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 1.2rem 0; }
.theory-img-row .theory-img{ margin: 0; flex: 1 1 240px; }

/* ============ Links page ============ */
.links-section{ padding: 4.5rem 0 6rem; }
.links-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
.link-card{
  display: block; padding: 1.4rem 1.5rem; border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .15s ease, transform .15s ease;
}
.link-card:hover{ border-color: var(--blue-400); transform: translateY(-2px); }
.link-card .link-kicker{ font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin-bottom: .4rem; }
.link-card .link-name{ font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--blue-500); }

/* ============ Media page ============ */
.media-section{ padding: 4.5rem 0; }
.media-section + .media-section{ border-top: 1px solid var(--line); }
.video-tile-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.video-tile{ border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); background: var(--navy-900); aspect-ratio: 16/9; position: relative; }
.video-tile iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gallery-cover-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.gallery-cover{
  position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3;
  box-shadow: var(--shadow);
}
.gallery-cover img{ width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.gallery-cover:hover img{ transform: scale(1.05); }
.gallery-cover-label{
  position: absolute; inset: auto 0 0 0;
  padding: 2.5rem 1.2rem 1rem;
  background: linear-gradient(0deg, rgba(6,13,28,.9), transparent);
  color: #fff;
}
.gallery-cover-label strong{ display: block; font-family: var(--font-display); font-size: 1rem; }
.gallery-cover-label span{ font-size: .8rem; color: rgba(255,255,255,.75); }

@media (max-width: 720px){
  .strip-grid{ grid-template-columns: 1fr 1fr; }
  .news-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .footer-brand{ grid-column: auto; }
  .photo-grid{ grid-template-columns: repeat(3, 1fr); }
  .hero-content{ padding: 5.5rem 20px 3rem; }
  .archive-item{ grid-template-columns: 1fr; gap: .4rem; }
  .archive-thumb{ float: none; width: 100%; max-width: none; aspect-ratio: 16/9; margin: .6rem 0; }
  .links-grid{ grid-template-columns: 1fr; }
  .video-tile-grid{ grid-template-columns: 1fr; }
  .gallery-cover-grid{ grid-template-columns: 1fr 1fr; }
  .page-hero{ padding: 7rem 0 3rem; }
  .page-hero.hero-tall{ padding: 8rem 0 4.5rem; }
}