:root {
  --paper: #f2f0e9;
  --ink: #151611;
  --muted: #686a62;
  --line: #cbc9c0;
  --acid: #cfd2c5;
  --coral: #b7a990;
}

body {
  overflow-x: hidden;
}

header {
  background: rgba(242, 240, 233, .94);
}

.hero-cinematic {
  max-width: 1440px;
  margin: 0 auto;
  padding: 28px 24px 90px;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(360px, .75fr);
  grid-template-rows: minmax(620px, 72vh) auto;
  gap: 28px 36px;
}

.hero-media {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: #2d2f28 url("media-lab-hero.webp") 66% center / cover no-repeat;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
  pointer-events: none;
}

.camera-ui {
  position: absolute;
  z-index: 2;
  top: 24px;
  left: 24px;
  right: 24px;
  display: flex;
  justify-content: space-between;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
}

.camera-ui span:first-child::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: #e5553e;
}

.focus-frame {
  position: absolute;
  z-index: 2;
  top: 44%;
  left: 59%;
  width: 74px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, .9);
}

.focus-frame::before,
.focus-frame::after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, .85);
}

.focus-frame::before {
  width: 14px;
  height: 1px;
  left: 29px;
  top: 25px;
}

.focus-frame::after {
  width: 1px;
  height: 14px;
  left: 36px;
  top: 18px;
}

.timecode {
  position: absolute;
  z-index: 2;
  right: 24px;
  bottom: 20px;
  color: #fff;
  font: 12px monospace;
  letter-spacing: .08em;
}

.hero-editorial {
  align-self: end;
  min-width: 0;
  padding-bottom: 24px;
}

.hero-editorial h1 {
  max-width: 650px;
  margin-bottom: 32px;
  font-size: clamp(56px, 6.3vw, 98px);
}

.hero-editorial .lead {
  max-width: 510px;
}

.hero-editorial .actions {
  align-items: center;
}

.media-index {
  grid-column: 1 / -1;
  list-style: none;
  margin: 0;
  padding: 20px 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--ink);
}

.media-index li {
  padding: 0 20px;
  border-left: 1px solid var(--line);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.media-index li:first-child {
  border-left: 0;
  padding-left: 0;
}

.media-index span {
  display: block;
  margin-bottom: 10px;
  color: var(--muted);
  font: 11px monospace;
}

.film-strip {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px 100px;
  display: grid;
  grid-template-columns: 1.25fr .75fr 1fr;
  gap: 10px;
}

.film-frame {
  min-height: 380px;
  margin: 0;
  position: relative;
  overflow: hidden;
  background-image: url("media-lab-hero.webp");
  background-repeat: no-repeat;
  background-size: auto 125%;
  filter: saturate(.8) contrast(1.03);
}

.frame-a {
  background-position: 94% center;
}

.frame-b {
  background-position: 68% center;
}

.frame-c {
  background-position: 40% center;
}

.film-frame::before,
.film-frame::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 14px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 17px, transparent 17px 28px);
}

.film-frame::before { top: 0; }
.film-frame::after { bottom: 0; }

.film-frame figcaption {
  position: absolute;
  left: 18px;
  bottom: 28px;
  padding: 9px 11px;
  background: rgba(17, 18, 14, .86);
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .11em;
}

.film-frame figcaption span {
  margin-right: 16px;
  color: #babdb3;
}

.programs-list {
  padding-top: 0;
}

.programs-list article {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  padding: 46px 0;
  border-top: 1px solid var(--ink);
}

.programs-list article:last-child {
  border-bottom: 1px solid var(--ink);
}

.programs-list h2 {
  margin-bottom: 0;
}

.programs-list .number {
  font: 11px monospace;
  color: var(--muted);
}

.skills-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: skill;
}

.skills-list li {
  counter-increment: skill;
  padding: 15px 0;
  border-top: 1px solid var(--line);
  font-size: 19px;
}

.skills-list li::before {
  content: "0" counter(skill);
  display: inline-block;
  width: 48px;
  color: var(--muted);
  font: 11px monospace;
}

/* Убираем цветные плашки и возвращаем редакционную, фотографическую подачу. */
.program.dark,
.program.lime,
.program-title,
.program-title.acid,
.project,
.p1,
.p2,
.p3,
.p4,
.quote,
.notice,
.notice.warning,
.stats article {
  background-color: transparent;
  color: var(--ink);
}

.program {
  border-top: 1px solid var(--ink);
}

.program-title {
  min-height: 360px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.project {
  border: 1px solid var(--line);
}

.quote {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.notice {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}

.chips {
  display: block;
}

.chips span {
  display: block;
  padding: 14px 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}

.cards article,
.resource-grid article {
  min-height: 180px;
  border-width: 0 0 1px;
}

.button {
  border-radius: 0;
}

.button.primary {
  background: var(--ink);
}

.button:hover {
  background: #d9d8d0;
}

.marquee {
  display: none;
}

@media (max-width: 1500px) {
  .menu-button {
    display: block;
  }

  .menu {
    display: none;
    position: absolute;
    top: 74px;
    left: 0;
    right: 0;
    max-height: calc(100vh - 74px);
    overflow: auto;
    background: var(--paper);
    padding: 20px 24px;
    flex-direction: column;
    align-items: flex-start;
    border-bottom: 1px solid var(--line);
  }

  .menu.open {
    display: flex;
  }
}

@media (max-width: 980px) {
  .hero-cinematic {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    padding-top: 18px;
  }

  .hero-media {
    min-height: 60vh;
  }

  .hero-editorial {
    padding: 24px 0 0;
  }

  .media-index {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 0;
  }

  .media-index li:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }

  .film-strip {
    grid-template-columns: 1fr 1fr;
  }

  .film-frame:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .hero-cinematic {
    padding: 12px 18px 62px;
  }

  .hero-media {
    min-height: 56vh;
    background-position: 72% center;
  }

  .hero-editorial h1 {
    font-size: clamp(50px, 16vw, 76px);
  }

  .media-index {
    grid-template-columns: 1fr 1fr;
  }

  .media-index li {
    padding: 0 10px;
  }

  .film-strip {
    padding: 0 18px 64px;
    grid-template-columns: 1fr;
  }

  .film-frame,
  .film-frame:last-child {
    grid-column: auto;
    min-height: 250px;
  }

  .programs-list article {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Competition-ready content and interaction */
.jury-route { display:grid; grid-template-columns:minmax(260px,.8fr) 1.2fr; gap:clamp(42px,8vw,130px); }
.jury-heading p:last-child { max-width:540px; }
.jury-route ol { list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.jury-route li { border-bottom:1px solid var(--line); }
.jury-route li a { color:inherit; display:grid; grid-template-columns:54px 1fr; gap:4px 20px; padding:22px 4px; text-decoration:none; transition:padding .2s,color .2s; }
.jury-route li a:hover { padding-left:12px; color:var(--accent); }
.jury-route li span { grid-row:1/3; color:var(--muted); font-size:.78rem; padding-top:4px; }
.jury-route li strong { font-size:clamp(1.12rem,2vw,1.45rem); }
.jury-route li small { color:var(--muted); font-size:.94rem; }
.authorship { max-width:580px; color:var(--muted); }

.worksheet,.rubric,.pedagogy-manifest,.audience-path,.principles,.result-ladder,.evidence,.lab-builder,.lab-rules { border-top:1px solid var(--line); display:grid; grid-template-columns:minmax(230px,.72fr) 1.28fr; gap:clamp(38px,8vw,130px); }
.worksheet>ol,.result-ladder>ol,.lab-rules>ol { list-style:none; margin:0; padding:0; }
.worksheet li,.result-ladder li,.lab-rules li { display:grid; grid-template-columns:minmax(120px,.6fr) 1.4fr; gap:20px; padding:18px 0; border-bottom:1px solid var(--line); }
.worksheet li span,.result-ladder p,.lab-rules p { color:var(--muted); margin:0; }
.project-map { display:grid; grid-template-columns:1fr 1fr; gap:0 34px; }
.project-map p,.rubric>div:last-child p { display:flex; flex-direction:column; gap:5px; padding:18px 0; border-bottom:1px solid var(--line); margin:0; }
.rubric>div:last-child span { color:var(--muted); }
.cycle { border-top:1px solid var(--line); }
.cycle ol { list-style:none; margin:42px 0 0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); }
.cycle li { padding:22px; border-left:1px solid var(--line); min-height:230px; }
.cycle li:first-child { border-left:0; padding-left:0; }
.cycle li span,.audience-path article>span { display:block; color:var(--accent); font-size:.76rem; letter-spacing:.08em; margin-bottom:38px; }
.cycle li strong { font-family:var(--display); font-size:clamp(1.5rem,2.4vw,2.2rem); }
.cycle li p { color:var(--muted); font-size:.92rem; }
.audience-path>div:last-child { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); }
.audience-path article { background:var(--bg); padding:clamp(26px,4vw,54px); }
.audience-path article>span { margin-bottom:20px; }
.principles ul { list-style:none; margin:0; padding:0; columns:2; column-gap:48px; }
.principles li { break-inside:avoid; padding:0 0 24px; color:var(--muted); }
.principles li strong { color:var(--text); }
.evidence>div:last-child { display:grid; grid-template-columns:1fr 1fr; }
.evidence a { color:inherit; display:flex; flex-direction:column; padding:24px; min-height:132px; border:1px solid var(--line); margin:-1px 0 0 -1px; text-decoration:none; }
.evidence a:hover { color:var(--accent); }
.evidence a span { color:var(--muted); margin-top:auto; }
.result-ladder li { grid-template-columns:50px 1fr; }
.result-ladder li>span { color:var(--accent); font-size:.76rem; }
.result-ladder li strong { font-family:var(--display); font-size:1.65rem; }
.result-ladder > div { min-width:0; }
.result-ladder h2 {
  max-width:100%;
  font-size:clamp(2rem,3.35vw,3.25rem);
  overflow-wrap:normal;
  hyphens:manual;
  word-break:normal;
}

.lab-hero { padding-bottom:46px; }
.lab-builder { align-items:start; }
.lab-controls { position:sticky; top:120px; }
.lab-controls label { display:block; margin:20px 0; font-weight:700; }
.lab-controls select { display:block; width:100%; margin-top:8px; padding:14px; color:var(--text); background:var(--bg); border:1px solid var(--line); font:inherit; }
.task-card { color:#f4f0e8; background:#191919; padding:clamp(28px,6vw,70px); outline:none; }
.task-label { color:#e5522d; text-transform:uppercase; letter-spacing:.08em; font-size:.75rem; }
.task-card h2 { color:#fff; font-size:clamp(2.2rem,5vw,4.8rem); line-height:.95; }
.task-card>p:not(.task-label) { font-size:1.15rem; max-width:700px; }
.task-card dl { margin:42px 0 0; }
.task-card dl div { display:grid; grid-template-columns:130px 1fr; padding:15px 0; border-top:1px solid #444; }
.task-card dt { color:#aaa; }
.task-card dd { margin:0; }
.task-actions { display:flex; gap:26px; margin-top:34px; }
.text-button { appearance:none; border:0; padding:0; background:none; color:#fff; border-bottom:1px solid currentColor; cursor:pointer; font:inherit; }
.lab-rules li { grid-template-columns:45px 1fr; }
.lab-rules li span { color:var(--accent); }

.readable-toggle { position:fixed; z-index:90; left:18px; bottom:18px; display:flex; align-items:center; gap:8px; padding:10px 14px; border:1px solid var(--text); background:var(--bg); color:var(--text); box-shadow:0 6px 24px rgba(0,0,0,.12); cursor:pointer; font:700 .78rem/1 var(--sans); }
.readable-toggle span:first-child { font-family:serif; font-size:1.15rem; }
body.readable { --bg:#fff; --text:#000; --muted:#222; --line:#555; font-size:19px; }
body.readable *,body.readable *::before,body.readable *::after { animation:none!important; transition:none!important; }
body.readable p,body.readable li { line-height:1.75; }
body.readable a { text-decoration:underline; text-underline-offset:3px; }

@media (max-width:900px) {
  .jury-route,.worksheet,.rubric,.pedagogy-manifest,.audience-path,.principles,.result-ladder,.evidence,.lab-builder,.lab-rules { grid-template-columns:1fr; gap:34px; }
  .result-ladder h2 { max-width:18ch; }
  .cycle ol { grid-template-columns:1fr 1fr; }
  .cycle li:nth-child(odd) { border-left:0; }
  .lab-controls { position:static; }
}
@media (max-width:620px) {
  .cycle ol,.audience-path>div:last-child,.project-map,.evidence>div:last-child { grid-template-columns:1fr; }
  .cycle li { border-left:0; border-top:1px solid var(--line); min-height:0; padding:22px 0; }
  .cycle li span { margin-bottom:14px; }
  .principles ul { columns:1; }
  .worksheet li { grid-template-columns:1fr; gap:5px; }
  .readable-toggle span:last-child { display:none; }
}
@media print {
  header,footer,.reading-progress,.to-top,.readable-toggle,.cta,.task-actions,.lab-controls { display:none!important; }
  main,.section,.page-hero { padding:18px 0!important; }
  .reveal { opacity:1!important; transform:none!important; }
  .task-card { color:#000; background:#fff; border:2px solid #000; }
  .task-card h2,.text-button { color:#000; }
}