/* Sources, version 2. Colour fields: hero sky, deep blue (the bars), cream (the list), sand (credits).
   The four source types keep one colour everywhere: company coral, government teal, industry report amber, university mint.
   Patterns v2 does not have, kept here: type colours, count bars, source cards, credit cards. */

main { display: block; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { transform: scale(0.96); } 50% { transform: scale(1.05); } }
@keyframes drift { from { transform: translateX(-60px); } to { transform: translateX(160px); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes rise { from { transform: translateY(40px) rotate(-6deg); } to { transform: rotate(-2deg); } }
@keyframes belt { to { transform: translateX(56px); } }

.sun-rays { transform-box: fill-box; transform-origin: center; animation: spin 90s linear infinite; }

/* the four types */
[data-type="company"] { --c: var(--coral); --ci: var(--ink); }
[data-type="government"] { --c: var(--teal-dark); --ci: var(--cream); }
[data-type="industry report"] { --c: var(--amber); --ci: var(--ink); }
[data-type="university"] { --c: var(--teal-3); --ci: var(--ink); }

/* ================= 1. HERO ================= */
.hero { position: relative; overflow: hidden; background: #0E86A6; min-height: clamp(520px, calc(100svh - var(--header-h)), 760px); }
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.ring { transform-box: fill-box; transform-origin: center; animation: pulse 5s ease-in-out infinite; }
.ring.r2 { animation-delay: -2.5s; }
.cloud { animation: drift 38s ease-in-out infinite alternate; }
.cloud.c2 { animation-duration: 52s; animation-direction: alternate-reverse; }
.sb { animation: bob 4.2s ease-in-out infinite; }
.sb.s2 { animation-delay: -0.8s; }
.sb.s3 { animation-delay: -1.6s; }
.sb.s4 { animation-delay: -2.4s; }
.sb.s5 { animation-delay: -3.2s; }
.sb.s6 { animation-delay: -0.4s; }
.birds path { animation: bob 3s ease-in-out infinite; }
.birds .b2 { animation-delay: -1.3s; }
.hero-copy { position: relative; z-index: 2; padding-top: clamp(32px, 7vh, 80px); padding-bottom: var(--s8); }
.hero-title { margin: 0 0 var(--s5); }
.ht { display: inline-block; font-size: var(--fs-hero); line-height: 0.9; letter-spacing: -0.045em; color: var(--cream); background: var(--ink); padding: 0.06em 0.18em 0.14em; border-radius: 0.2em; transform: rotate(-2deg); box-shadow: 0.05em 0.06em 0 var(--amber); animation: rise 800ms var(--spring) both; }
.hero-line { display: inline-block; margin: 0; padding: var(--s3) var(--s5); background: var(--sun); color: var(--ink); border-radius: 999px; font: 600 clamp(20px, 2.2vw, 28px)/1.2 var(--font-body); transform: rotate(1deg); max-width: 28ch; }
@media (max-width: 600px) { .hero { min-height: 600px; } .ht { font-size: 20vw; } .hero-copy { padding-top: var(--s6); } }

/* ================= 2. COUNT BY TYPE ================= */
.counts { background: var(--deep); padding-block: var(--s8); overflow: clip; }
.counts::before { content: ""; position: absolute; right: -10vw; top: -12vw; width: 44vw; aspect-ratio: 1; border-radius: 50%; background: var(--panel); }
.counts::after { content: ""; position: absolute; right: 14vw; top: 5vw; width: 8vw; aspect-ratio: 1; border-radius: 50%; background: var(--amber); }
.counts h2 { font-size: clamp(38px, 5.6vw, 80px); max-width: 14ch; }
.counts .lead { margin-top: var(--s5); max-width: 30ch; }
.bars { display: grid; gap: var(--s6); margin-top: var(--s7); }
.bar { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); align-items: center; gap: var(--s3) var(--s6); }
.bar-name { grid-column: 1; grid-row: 1; justify-self: start; padding: 6px 20px 10px; border-radius: 999px; background: var(--c); color: var(--ci); font: 800 clamp(24px, 2.6vw, 34px)/1 var(--font-display); letter-spacing: -0.015em; transform: rotate(-1.5deg); }
.bar::after { content: ""; grid-column: 2; grid-row: 1; height: clamp(44px, 6vw, 72px); border-radius: 999px; background: rgba(255, 243, 214, 0.12); }
.bar-fill { grid-column: 2; grid-row: 1; z-index: 1; display: block; width: var(--w); height: clamp(44px, 6vw, 72px); border-radius: 999px; box-shadow: 0 6px 0 var(--ink); position: relative; overflow: hidden; background: var(--c); }
/* the belt stripes are a strip wider than the bar, slid along by transform (two stripe periods per loop, so it joins up) */
.bar-fill::before { content: ""; position: absolute; inset: 0 0 0 -56px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.24) 0 14px, rgba(255, 255, 255, 0) 14px 28px); animation: belt 2.8s linear infinite; }
@media (max-width: 760px) {
  .counts { padding-block: var(--s8); }
  .bar { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .bar-name, .bar::after, .bar-fill { grid-column: 1; }
  .bar-name { grid-row: 1; }
  .bar::after, .bar-fill { grid-row: 2; }
  .counts::before { width: 80vw; right: -30vw; top: -30vw; }
  .counts::after { display: none; }
}

/* ================= 3. THE LIST ================= */
.list { background: var(--cream); color: var(--ink); }
.list h2 { font-size: clamp(40px, 6vw, 80px); --st-rot: -1.5deg; }
.filter { margin-top: var(--s6); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); }
.chip { --c: var(--cream-2); --ci: var(--ink); padding: 0 var(--s5); background: var(--c); color: var(--ci); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--cream); box-shadow: 0 2px 0 var(--amber); transform: translateY(4px); }
.filter-status { margin-top: var(--s5); }
.filter-status p { max-width: none; font: 600 var(--fs-small)/1.4 var(--font-body); }

.source-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); margin-top: var(--s7); }
.source { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); padding: var(--s5) var(--s5) var(--s6); border-radius: var(--r-lg); background: var(--cream-2); box-shadow: 0 6px 0 var(--ink); scroll-margin-top: calc(var(--header-h) + var(--s6)); }
.source:target { background: var(--sun); outline: 4px solid var(--ink); outline-offset: 4px; } /* sun on cream is a small step, so the jump target also gets a ring */
.source-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.src-type { padding: 5px 14px 7px; border-radius: 999px; background: var(--c); color: var(--ci); font: 700 15px/1.1 var(--font-body); letter-spacing: 0.02em; transform: rotate(-1.5deg); }
.source p { max-width: none; }
.source-title { font: 800 clamp(20px, 1.8vw, 24px)/1.2 var(--font-display); letter-spacing: -0.01em; }
.source-title a { display: flex; align-items: center; min-height: 44px; padding-block: 6px; }
.source-pub { font: 600 17px/1.35 var(--font-body); color: var(--ink-soft); }
.source-dates { font: 500 16px/1.35 var(--font-body); color: var(--ink-soft); }
.source-used { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: auto; padding-top: var(--s2); font: 700 16px/1 var(--font-body); }
.source-used a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 var(--s4); border-radius: 999px; background: var(--ink); color: var(--cream); text-decoration: none; transition: transform 160ms var(--spring); }
@media (hover: hover) { .source-used a:hover { transform: translateY(-2px); } }
@media (max-width: 900px) {
  .source-list { grid-template-columns: minmax(0, 1fr); }
}

/* ================= 4. CREDITS ================= */
.credits { background: var(--sand); color: var(--ink); }
.credits h2 { font-size: clamp(40px, 6vw, 80px); }
.credit-head { margin-top: var(--s7); font-size: clamp(30px, 3.4vw, 48px); }
.credit-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--s5); margin-top: var(--s5); }
.credit-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); padding: var(--s6); border-radius: var(--r-lg); }
.credit-card.c0 { background: var(--disc-power); color: var(--disc-power-ink); }
.credit-card.c1 { background: var(--disc-renewable); color: var(--disc-renewable-ink); }
.credit-card.c2 { background: var(--disc-electronics); color: var(--disc-electronics-ink); }
.credit-card.c3 { background: var(--disc-control); color: var(--disc-control-ink); }
.credit-card.c4 { background: var(--disc-comms); color: var(--disc-comms-ink); }
.credit-card p { max-width: none; font: 600 17px/1.35 var(--font-body); }
.credit-title { margin-bottom: var(--s2); font-size: clamp(24px, 2.2vw, 30px); }
.credit-links { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: auto; padding-top: var(--s3); }
.credit-links a, .card li a { display: inline-flex; align-items: center; min-height: 44px; padding: var(--s2) var(--s4); border-radius: 22px; background: var(--ink); color: var(--cream); font: 700 16px/1.25 var(--font-body); text-decoration: none; overflow-wrap: anywhere; }
@media (hover: hover) { .credit-links a:hover, .card li a:hover { background: var(--cream); color: var(--ink); } }

.credit-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); margin-top: var(--s7); }
.credit-pair .card { padding: var(--s6); border-radius: var(--r-lg); }
.credit-pair .card h3 { margin: 0 0 var(--s4); }
.credit-pair ul { display: grid; gap: var(--s3); }
.credit-pair li { max-width: none; font: 600 17px/1.4 var(--font-body); }
.credit-pair li a { margin-top: var(--s2); }
@media (min-width: 901px) { .credit-pair li a wbr { display: none; } } /* the licence URL has break points for narrow cards only; on wide ones it stays one unbroken run */
.film-card { background: var(--panel); color: var(--cream); }
.film-card li a { background: var(--cream); color: var(--ink); }
.strip { display: block; width: 100%; max-width: 320px; height: auto; margin-bottom: var(--s5); animation: bob 4.2s ease-in-out infinite; }
.font-card { background: var(--cream); color: var(--ink); }
.specimen { display: flex; gap: var(--s5); max-width: none; margin-bottom: var(--s4); font-size: clamp(64px, 9vw, 120px); line-height: 0.9; }
.sp-a { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em; }
.sp-b { font-family: var(--font-body); font-weight: 600; }
@media (max-width: 760px) {
  .credit-pair { grid-template-columns: minmax(0, 1fr); }
}