:root {
  --ink: #101114;
  --paper: #f5f3ed;
  --white: #fff;
  --blue: #176bff;
  --cyan: #5de5de;
  --lime: #c8f66c;
  --orange: #ff8a3d;
  --line: rgba(16, 17, 20, .16);
  --muted: #62656d;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
}
a { color: inherit; }
button, input, select { font: inherit; }
.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;
}

.site-header {
  align-items: center;
  background: rgba(245, 243, 237, .92);
  border-bottom: 1px solid var(--line);
  display: flex;
  height: 74px;
  justify-content: space-between;
  padding: 0 clamp(22px, 5vw, 80px);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(14px);
}
.brand {
  align-items: center;
  display: flex;
  font-size: 15px;
  gap: 13px;
  text-decoration: none;
}
.brand b { color: var(--muted); font-weight: 500; }
.ms-mark {
  display: grid;
  gap: 2px;
  grid-template-columns: 10px 10px;
}
.ms-mark i { background: #f25022; display: block; height: 10px; }
.ms-mark i:nth-child(2) { background: #7fba00; }
.ms-mark i:nth-child(3) { background: #00a4ef; }
.ms-mark i:nth-child(4) { background: #ffb900; }
nav { align-items: center; display: flex; gap: 30px; }
nav a { font-size: 14px; font-weight: 600; text-decoration: none; }
.nav-cta { background: var(--ink); color: var(--white); padding: 12px 18px; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr);
  min-height: 690px;
  overflow: hidden;
  padding: 95px clamp(22px, 6vw, 100px) 85px;
  position: relative;
}
.hero-grid {
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 58px 58px;
  inset: 0;
  mask-image: linear-gradient(to bottom, transparent, #000 25%, transparent 92%);
  opacity: .42;
  pointer-events: none;
  position: absolute;
}
.hero-content, .hero-panel { position: relative; z-index: 1; }
.eyebrow, .section-number {
  align-items: center;
  display: flex;
  font-family: "Syne", sans-serif;
  font-size: 12px;
  font-weight: 700;
  gap: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.eyebrow span { background: var(--blue); border-radius: 50%; height: 8px; width: 8px; }
h1, h2 {
  font-family: "Syne", sans-serif;
  letter-spacing: -.055em;
  line-height: .96;
  margin: 0;
}
h1 { font-size: clamp(62px, 7.6vw, 118px); max-width: 1050px; }
h1 em, h2 em { color: var(--blue); font-style: normal; }
.hero-copy { color: var(--muted); font-size: 19px; line-height: 1.6; max-width: 660px; }
.hero-actions { display: flex; gap: 12px; margin-top: 34px; }
.button {
  border: 1px solid var(--ink);
  cursor: pointer;
  display: inline-flex;
  font-weight: 700;
  gap: 36px;
  justify-content: space-between;
  padding: 15px 20px;
  text-decoration: none;
}
.button.primary { background: var(--blue); border-color: var(--blue); color: white; }
.button.secondary { background: transparent; }
.hero-panel {
  align-self: end;
  background: var(--ink);
  color: var(--white);
  margin-left: 45px;
  padding: 25px;
  transform: rotate(1.3deg);
}
.signal { align-items: center; border-bottom: 1px solid #3b3d43; display: flex; font: 700 11px "Syne"; gap: 8px; letter-spacing: .08em; padding-bottom: 22px; }
.signal strong { color: var(--lime); margin-left: auto; }
.pulse { animation: pulse 1.8s infinite; background: var(--lime); border-radius: 50%; height: 7px; width: 7px; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(200, 246, 108, 0); } 0%, 100% { box-shadow: 0 0 0 0 rgba(200, 246, 108, .45); } }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; }
.stat-grid div { border-bottom: 1px solid #3b3d43; padding: 25px 8px; }
.stat-grid div:nth-child(odd) { border-right: 1px solid #3b3d43; }
.stat-grid strong { display: block; font: 700 44px "Syne"; }
.stat-grid span { color: #a9abb3; font-size: 12px; }
.terminal-line { color: #8c909a; display: flex; font-family: monospace; font-size: 11px; justify-content: space-between; padding-top: 20px; }
.terminal-line b { color: var(--cyan); }

.ticker { background: var(--blue); color: white; overflow: hidden; padding: 14px 0; transform: rotate(-1deg) scale(1.02); }
.ticker div { display: flex; gap: 28px; justify-content: center; min-width: max-content; }
.ticker span { font: 700 12px "Syne"; letter-spacing: .08em; }
.ticker i { color: var(--lime); font-style: normal; }

.section { padding: 110px clamp(22px, 6vw, 100px); }
.section-heading { align-items: end; display: grid; gap: 60px; grid-template-columns: 1.4fr .6fr; margin-bottom: 58px; }
.section-heading h2 { font-size: clamp(48px, 6vw, 84px); }
.section-heading > p { color: var(--muted); font-size: 17px; line-height: 1.7; margin: 0; }
.filter-row { border-bottom: 1px solid var(--line); display: flex; gap: 28px; margin-bottom: 35px; }
.filter {
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 700;
  padding: 12px 0;
}
.filter span { font-size: 11px; margin-left: 5px; vertical-align: top; }
.filter.active { border-color: var(--blue); color: var(--ink); }
.paper-grid { display: grid; gap: 1px; grid-template-columns: repeat(3, 1fr); }
.paper-card {
  background: #e9e7e0;
  display: flex;
  flex-direction: column;
  min-height: 310px;
  padding: 28px;
  transition: background .2s, transform .2s;
}
.paper-card:hover { background: white; transform: translateY(-4px); }
.paper-card .meta { display: flex; justify-content: space-between; }
.paper-card .tag { background: var(--cyan); font: 700 10px "Syne"; letter-spacing: .08em; padding: 7px 9px; text-transform: uppercase; }
.paper-card.industry .tag { background: var(--orange); }
.paper-card .index { color: #9b9c9d; font: 600 12px monospace; }
.paper-card h3 { font: 700 22px/1.2 "Syne"; letter-spacing: -.025em; margin: 32px 0 20px; }
.paper-card p { color: var(--muted); font-size: 13px; line-height: 1.6; margin: auto 0 0; }
.source-link { display: inline-flex; font-weight: 700; gap: 12px; margin-top: 34px; text-underline-offset: 5px; }

.workshops-section { background: var(--ink); color: white; }
.section-heading.light > p { color: #a8abb4; }
.section-heading.light h2 em { color: var(--cyan); }
.workshop-grid { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
.workshop-card { border: 1px solid #3a3c43; min-height: 400px; padding: 34px; position: relative; }
.workshop-card:first-child { background: var(--blue); border-color: var(--blue); }
.workshop-card .date { color: var(--lime); font: 700 12px "Syne"; letter-spacing: .1em; text-transform: uppercase; }
.workshop-card h3 { font: 700 clamp(30px, 3.2vw, 47px)/1.05 "Syne"; letter-spacing: -.04em; margin: 55px 0 24px; max-width: 680px; }
.workshop-card p { color: #c8cad0; line-height: 1.6; max-width: 620px; }
.workshop-card:first-child p { color: #e3eaff; }
.organizers { bottom: 34px; display: flex; flex-wrap: wrap; gap: 10px; position: absolute; }
.organizers span { border: 1px solid currentColor; font-size: 12px; padding: 7px 10px; }
.workshop-card a { position: absolute; right: 32px; top: 30px; }

.awards-section { background: var(--lime); }
.award-card { align-items: center; display: grid; gap: 70px; grid-template-columns: .7fr 1.3fr; }
.award-art { aspect-ratio: 1; position: relative; }
.award-core { align-items: center; background: var(--ink); border-radius: 50%; color: var(--lime); display: flex; font: 700 44px "Syne"; height: 46%; justify-content: center; left: 27%; position: absolute; top: 27%; width: 46%; }
.orbit { border: 2px solid var(--ink); border-radius: 50%; inset: 9%; position: absolute; }
.orbit.two { inset: 0 30%; transform: rotate(50deg); }
.award-copy h2 { font-size: clamp(48px, 6vw, 82px); }
.award-copy > p { font-size: 18px; line-height: 1.65; max-width: 800px; }
.award-winners { border-bottom: 1px solid var(--ink); border-top: 1px solid var(--ink); display: grid; grid-template-columns: 1fr; margin-top: 28px; }
.award-winners span { padding: 20px 15px 20px 0; }
.award-winners span + span { border-top: 1px solid var(--ink); }
.award-winners b { display: block; font: 700 11px "Syne"; letter-spacing: .06em; margin-bottom: 6px; text-transform: uppercase; }
.award-winners strong { display: block; font: 700 18px/1.35 "Syne"; }
.award-winners small { display: block; font-size: 13px; line-height: 1.55; margin-top: 8px; max-width: 900px; }
.award-links { display: flex; flex-wrap: wrap; gap: 28px; }

.job-tools { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 15px; grid-template-columns: 1fr 230px auto; padding-bottom: 25px; }
.search-box { align-items: center; background: white; display: flex; gap: 10px; padding: 13px 16px; }
.search-box input { background: none; border: 0; outline: 0; width: 100%; }
select { background: white; border: 0; min-height: 48px; padding: 0 14px; width: 100%; }
.job-tools p { margin: 0; white-space: nowrap; }
.job-list { margin-top: 14px; }
.job-row {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 25px;
  grid-template-columns: 120px 1fr 1fr 40px;
  padding: 24px 12px;
  text-decoration: none;
  transition: background .2s, padding .2s;
}
.job-row:hover { background: white; padding-left: 22px; }
.job-row .job-id { color: var(--muted); font: 12px monospace; }
.job-row h3 { font: 700 18px "Syne"; margin: 0; }
.job-row p { color: var(--muted); font-size: 13px; margin: 0; }
.job-row .arrow { color: var(--blue); font-size: 20px; }
.load-more { margin: 30px auto 0; }
.data-note { color: var(--muted); font-size: 12px; text-align: center; }
code { background: #e4e1d8; padding: 2px 5px; }

footer { align-items: center; background: var(--ink); color: white; display: flex; justify-content: space-between; padding: 40px clamp(22px, 6vw, 100px); }
footer p { color: var(--cyan); font: 700 14px "Syne"; }
footer > div:last-child { display: flex; gap: 25px; }
footer a { color: #b9bbc2; font-size: 13px; }

@media (max-width: 950px) {
  nav a:not(.nav-cta) { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 70px; }
  .hero-panel { margin: 60px 0 0; max-width: 520px; transform: none; }
  .section-heading, .award-card { grid-template-columns: 1fr; }
  .section-heading { gap: 24px; }
  .paper-grid { grid-template-columns: 1fr 1fr; }
  .workshop-grid { grid-template-columns: 1fr; }
  .award-art { max-width: 400px; }
}
@media (max-width: 650px) {
  .site-header { height: 64px; }
  .brand b { display: none; }
  .nav-cta { padding: 10px 12px; }
  .hero { min-height: auto; padding-bottom: 70px; }
  h1 { font-size: 54px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .section { padding-bottom: 75px; padding-top: 75px; }
  .paper-grid { grid-template-columns: 1fr; }
  .filter-row { gap: 14px; overflow-x: auto; }
  .workshop-card { min-height: 470px; }
  .award-winners { grid-template-columns: 1fr; }
  .job-tools { grid-template-columns: 1fr; }
  .job-row { gap: 10px; grid-template-columns: 1fr 28px; }
  .job-row .job-id, .job-row p { grid-column: 1; }
  .job-row .arrow { grid-column: 2; grid-row: 1 / 4; }
  footer { align-items: flex-start; flex-direction: column; gap: 24px; }
}