/* ED extends the shared Atomic Lab design system. */
.ed-page { --ed-muted: #b6caff; }
.ed-hero { padding: clamp(55px, 7vw, 100px) 0 70px; background: var(--paper); }
.ed-hero-grid, .ed-lesson-grid { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 64px; }
.ed-wordmark { margin-left: 8px; padding: 4px 8px; border-radius: 5px; color: white; background: var(--blue); font-size: 1rem; letter-spacing: -.04em; }
.ed-hero h1 { margin: 10px 0 26px; font-size: clamp(3.8rem, 7.8vw, 7.1rem); letter-spacing: -.065em; line-height: .96; }
.ed-hero h1 em { color: var(--blue); font-style: normal; }
.ed-hero-lead { font-size: 1.5rem; line-height: 1.4; font-weight: 650; }
.ed-hero-description { max-width: 470px; color: var(--ink-soft); }
.ed-hero .button-row { margin-top: 32px; gap: 24px; }
.ed-simple-link { font-weight: 700; font-size: .9rem; }
.ed-credit { margin-top: 36px; color: var(--ink-soft); font-size: .78rem; }
.ed-hero-art { position: relative; padding: 25px; background-color: var(--blue-deep); background-image: linear-gradient(#ffffff09 1px, transparent 1px), linear-gradient(90deg, #ffffff09 1px, transparent 1px); background-size: 32px 32px; border-radius: 22px 22px 90px 22px; color: var(--ed-muted); }
.ed-art-label { font: .64rem ui-monospace, monospace; letter-spacing: .12em; }
.ed-hero-art svg { width: 100%; margin: 12px 0; }
.ed-art-footer { display: flex; gap: 16px; align-items: center; font: .6rem ui-monospace, monospace; letter-spacing: .1em; }
.ed-art-footer span:first-child { font-size: 1.7rem; color: var(--aqua); }
.ed-ribbon { background: var(--blue-deep); color: white; }
.ed-ribbon .container { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 22px; }
.ed-ribbon span { font-size: .82rem; font-weight: 650; }
.ed-ribbon span::before { content: '+'; margin-right: 12px; color: var(--aqua); }
.ed-episode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
.ed-episode-card { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: white; }
.ed-card-image { display: block; overflow: hidden; background: var(--blue-deep); }
.ed-card-image img { width: 100%; transition: transform .25s ease; }
.ed-episode-card:hover .ed-card-image img { transform: scale(1.025); }
.ed-card-copy { padding: 28px; }
.ed-card-meta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: space-between; margin-bottom: 16px; color: var(--ink-soft); font-size: .72rem; font-weight: 650; }
.ed-card-meta span:first-child { color: var(--blue-dark); text-transform: uppercase; letter-spacing: .08em; }
.ed-card-copy h3 { font-size: 1.65rem; line-height: 1.15; margin-bottom: 18px; }
.ed-card-copy h3 a { text-decoration: none; }
.ed-card-copy h3 a:hover { color: var(--blue); }
.ed-card-copy p { color: var(--ink-soft); font-size: .95rem; }
.ed-card-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.ed-card-bottom > span { font-size: .75rem; }
.ed-method { padding: 80px 0; background: var(--paper-warm); }
.ed-method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 85px; align-items: center; }
.ed-method .section-title { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 24px; }
.ed-method p { color: var(--ink-soft); }
.ed-method-steps { list-style: none; counter-reset: step; padding: 0; margin: 0; }
.ed-method-steps li { display: grid; grid-template-columns: 50px 1fr; padding: 24px 0; border-bottom: 1px solid #e8dfd1; counter-increment: step; }
.ed-method-steps li::before { content: '0' counter(step); grid-row: span 2; color: var(--blue); font: 1.2rem ui-monospace, monospace; padding-top: 5px; }
.ed-method-steps strong { font-size: 1.3rem; }
.ed-method-steps span { color: var(--ink-soft); font-size: .9rem; }
.ed-glossary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin: 0; }
.ed-glossary > div { border-top: 2px solid var(--blue); padding-top: 20px; }
.ed-glossary dt { font-size: 1.25rem; font-weight: 750; margin-bottom: 8px; }
.ed-glossary dd { margin: 0; color: var(--ink-soft); font-size: .94rem; }
.ed-lesson-hero { background: var(--paper); padding: 38px 0 55px; }
.ed-lesson-grid { gap: 48px; }
.ed-lesson-grid h1 { font-size: clamp(2.3rem, 4vw, 3.7rem); line-height: 1.05; letter-spacing: -.05em; }
.ed-lesson-grid .section-lead { font-size: 1.08rem; }
.ed-lesson-meta { display: flex; gap: 18px; flex-wrap: wrap; font-size: .75rem; color: var(--ink-soft); }
.ed-lesson-meta span:first-child { color: var(--blue-dark); font-weight: 750; }
.ed-video { overflow: hidden; background: var(--blue-deep); border-radius: 14px; aspect-ratio: 16 / 9; }
.ed-video img, .ed-video iframe, .ed-video video { width: 100%; height: 100%; border: 0; }
.ed-video-note { margin: 12px 0 0; color: var(--ink-soft); font-size: .77rem; }
.ed-jump-nav { border-block: 1px solid var(--line); background: white; }
.ed-jump-nav .container { display: flex; gap: 36px; padding-block: 18px; flex-wrap: wrap; }
.ed-jump-nav a { text-decoration: none; color: var(--blue-dark); font-size: .86rem; font-weight: 700; }
.ed-jump-nav a:hover { text-decoration: underline; }
.ed-lesson-content { display: grid; grid-template-columns: 260px minmax(0, 760px); justify-content: space-between; gap: 65px; padding-block: 75px; }
.ed-learning { align-self: start; position: sticky; top: calc(var(--header-height) + 30px); border-top: 3px solid var(--blue); padding-top: 24px; }
.ed-learning h2 { font-size: 1.3rem; }
.ed-learning ul { list-style: none; padding: 0; margin: 25px 0; }
.ed-learning li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .9rem; color: var(--ink-soft); }
.ed-learning .button { margin-bottom: 16px; }
.ed-learning > a { display: inline-block; font-size: .8rem; margin-top: 16px; }
.ed-big-question { border-left: 4px solid var(--aqua); padding: 8px 0 8px 28px; margin-bottom: 48px; }
.ed-big-question > span { font-size: .75rem; color: var(--blue-dark); font-weight: 700; }
.ed-big-question h2 { margin: 15px 0; font-size: 2rem; }
.ed-big-question p { font-size: 1.08rem; color: var(--ink-soft); }
.ed-explainer + .ed-explainer { margin-top: 35px; }
.ed-explainer h3 { font-size: 1.3rem; margin-bottom: 16px; }
.ed-explainer p { color: var(--ink-soft); line-height: 1.85; }
.ed-lab-section { background: var(--paper); padding: 75px 0; }
.ed-lab-section .section-title { font-size: clamp(2rem, 4vw, 3rem); }
.ed-section-intro { max-width: 760px; color: var(--ink-soft); margin: 24px 0 35px; }
.ed-lab { display: grid; grid-template-columns: 1.2fr 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: white; }
.ed-lab-visual { display: flex; align-items: center; justify-content: center; min-height: 400px; padding: 35px; background-color: var(--blue-deep); background-image: radial-gradient(#ffffff20 1px, transparent 1px); background-size: 20px 20px; }
.ed-lab-visual > svg { width: 100%; max-width: 500px; }
.ed-lab-panel { padding: 35px; align-self: center; }
.ed-lab-tag { display: block; margin-bottom: 25px; font-size: .67rem; letter-spacing: .12em; color: var(--blue-dark); font-weight: 800; }
.ed-control { display: block; margin-bottom: 22px; }
.ed-control > span { display: block; margin-bottom: 10px; font-size: .85rem; font-weight: 700; }
.ed-control input[type=range] { display: block; width: 100%; accent-color: var(--blue); cursor: pointer; min-height: 30px; }
.ed-control input[type=number] { width: 100%; max-width: 230px; border: 1px solid #8798b7; border-radius: 8px; padding: 9px 12px; background: white; }
.ed-readout { display: block; padding: 18px 0; border-top: 1px solid var(--line); margin-top: 24px; font-size: 1.05rem; font-weight: 700; line-height: 1.6; font-variant-numeric: tabular-nums; }
.ed-small { color: var(--ink-soft); font-size: .78rem; line-height: 1.7; }
.ed-machine-pair { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 20px; }
.ed-machine-pair h4 { text-align: center; color: white; font-size: 1rem; }
.ed-machine-pair svg { width: 100%; }
.ed-waste-art { position: relative; width: 100%; text-align: center; }
.ed-waste-art > span { color: var(--aqua); font-size: 7rem; line-height: 1; }
.ed-material-pile { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; margin: 45px auto 0; max-width: 350px; }
.ed-material-pile i { height: 28px; border: 3px solid var(--aqua); border-radius: 4px; transform: rotate(calc(var(--i) * 13deg)); }
.ed-material-pile i:nth-child(3n) { border-color: var(--yellow); border-radius: 50%; }
.ed-material-pile i:nth-child(4n) { border-color: var(--coral); }
.ed-scale-art { display: flex; justify-content: center; align-items: center; width: 100%; height: 320px; position: relative; }
.ed-cube { width: 95px; height: 95px; margin-right: 76px; flex-shrink: 0; background: #075cf6; border: 1px solid #94baff; position: relative; transform: scale(1); }
.ed-cube::before { content: ''; position: absolute; width: 100%; height: 38px; left: 18px; top: -39px; transform: skewX(-45deg); background: #4c93ff; border: 1px solid #94baff; }
.ed-cube::after { content: ''; position: absolute; width: 38px; height: 100%; top: -20px; right: -39px; transform: skewY(-45deg); background: #0547bc; border: 1px solid #94baff; }
.ed-scale-baseline { position: absolute; bottom: 0; width: 90%; height: 1px; background: #486ba9; }
.ed-cost-lab { margin-top: 30px; border: 1px solid var(--line); border-radius: 20px; padding: 35px; background: white; }
.ed-cost-lab h3 { font-size: 1.5rem; }
.ed-cost-lab > p { max-width: 820px; color: var(--ink-soft); }
.ed-cost-bars { max-width: 900px; }
.ed-cost-bars > div { margin-block: 12px; }
.ed-cost-bars span { display: block; font-size: .8rem; font-weight: 700; margin-bottom: 5px; }
.ed-cost-bars i { display: block; min-width: 2px; height: 16px; border-radius: 3px; background: var(--blue); }
.ed-cost-bars > div:nth-child(2) i { background: var(--success); }
.ed-bottom-content { max-width: 900px; padding-top: 75px; }
.ed-bottom-content > section { margin-bottom: 65px; }
.ed-bottom-content h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.ed-activity { border-radius: 16px; background: var(--paper-warm); padding: 35px; border: 1px solid #e7dfd1; }
.ed-activity ol { padding-left: 22px; }
.ed-activity li { padding-left: 8px; margin-top: 15px; }
.ed-faq details, .ed-answer-key details { border-bottom: 1px solid var(--line); }
.ed-faq summary, .ed-answer-key summary { padding: 22px 28px 22px 0; cursor: pointer; font-weight: 700; line-height: 1.5; }
.ed-faq details p, .ed-answer-key details p { padding-bottom: 22px; color: var(--ink-soft); }
.ed-quiz fieldset { margin: 28px 0; padding: 25px; border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.ed-quiz legend { font-weight: 750; padding-inline: 10px; font-size: 1.05rem; }
.ed-quiz-option { display: flex; align-items: start; gap: 12px; padding: 12px; margin-block: 7px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.ed-quiz-option:has(input:checked) { background: var(--paper); border-color: var(--blue); }
.ed-quiz-option input { accent-color: var(--blue); margin-top: 6px; flex: 0 0 auto; width: 16px; height: 16px; }
.ed-question-feedback { margin-top: 20px; padding: 15px; border-left: 3px solid var(--blue); background: var(--paper); font-size: .9rem; }
.ed-quiz fieldset.is-correct { border-color: var(--success); }
.ed-quiz fieldset.is-incorrect { border-color: #b85525; }
.ed-quiz-result { margin-top: 24px; font-weight: 750; }
.ed-sources { padding-top: 30px; border-top: 1px solid var(--line); font-size: .85rem; color: var(--ink-soft); }
.ed-sources h2 { font-size: 1.2rem; }
.ed-sources ul { padding-left: 18px; }
.ed-next { margin-bottom: 75px; padding: 32px 0; border-top: 3px solid var(--blue); display: flex; justify-content: space-between; gap: 35px; align-items: center; }
.ed-next h2 { font-size: 1.6rem; max-width: 500px; margin: 0; }
.ed-next .button { flex-shrink: 0; }
.ed-notice { border-left: 3px solid var(--coral); padding: 14px 20px; background: white; }
.ed-enhanced, .ed-print-lines { display: none; }
.ed-ready .ed-enhanced { display: block; }
.ed-ready button.ed-enhanced { display: inline-flex; }
.ed-ready .ed-answer-key { display: none; }
.ed-page [hidden] { display: none !important; }
@media (max-width: 900px) {
  .ed-hero-grid, .ed-lesson-grid { gap: 32px; }
  .ed-hero h1 { font-size: 4.5rem; }
  .ed-hero-lead { font-size: 1.25rem; }
  .ed-method-grid { gap: 36px; }
  .ed-lesson-content { grid-template-columns: 210px minmax(0, 1fr); gap: 36px; }
  .ed-lab-visual { padding: 20px; min-height: 330px; }
  .ed-lab-panel { padding: 25px; }
}
@media (max-width: 700px) {
  .ed-hero-grid, .ed-lesson-grid, .ed-method-grid, .ed-lab, .ed-lesson-content { grid-template-columns: 1fr; }
  .ed-hero { padding: 45px 0; }
  .ed-hero h1 { font-size: clamp(3.5rem, 13vw, 5.5rem); }
  .ed-hero-art { max-width: 460px; width: 100%; justify-self: center; margin-top: 10px; }
  .ed-ribbon .container { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .ed-ribbon span { font-size: .72rem; }
  .ed-ribbon span::before { margin-right: 6px; }
  .ed-episode-grid { grid-template-columns: 1fr; gap: 25px; }
  .ed-card-copy { padding: 24px; }
  .ed-glossary { grid-template-columns: 1fr 1fr; gap: 28px; }
  .ed-learning { position: static; }
  .ed-lesson-content { padding-block: 45px; gap: 45px; }
  .ed-learning ul { margin-block: 15px; }
  .ed-learning li { padding-block: 8px; }
  .ed-jump-nav .container { gap: 12px 22px; }
  .ed-jump-nav a { font-size: .8rem; }
  .ed-big-question { padding-left: 20px; }
  .ed-big-question h2 { font-size: 1.75rem; }
  .ed-lab-section { padding-block: 50px; }
  .ed-lab-visual { min-height: 300px; }
  .ed-lab-visual > svg { max-height: 340px; }
  .ed-lab-panel { padding: 24px; }
  .ed-cost-lab, .ed-activity { padding: 24px; }
  .ed-quiz fieldset { padding: 16px; }
  .ed-quiz legend { font-size: 1rem; }
  .ed-next { flex-direction: column; align-items: start; }
}
@media (max-width: 380px) { .ed-glossary { grid-template-columns: 1fr; } .ed-card-copy { padding: 20px; } .ed-machine-pair { gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .ed-card-image img { transition: none; } }
@media print {
  @page { margin: 18mm; }
  .ed-page { color: black; font-size: 10pt; }
  .ed-page .container { width: 100%; }
  .ed-lesson-hero, .ed-lab-section, .ed-activity { padding: 0; background: white; }
  .ed-lesson-grid, .ed-lesson-content, .ed-lab { display: block; }
  .ed-video, .ed-video-note, .ed-jump-nav, .ed-next, .ed-enhanced, .ed-ready .ed-enhanced, .ed-learning > a, .ed-lab-visual, .ed-cost-bars { display: none !important; }
  .ed-lesson-content, .ed-bottom-content { padding: 20px 0; }
  .ed-learning { position: static; margin-bottom: 25px; }
  .ed-learning ul { display: flex; gap: 20px; }
  .ed-learning .ed-small { display: none; }
  .ed-lesson-grid h1 { font-size: 26pt; }
  .ed-bottom-content h2, .ed-big-question h2, .ed-lab-section .section-title { font-size: 17pt; }
  .ed-lab, .ed-cost-lab, .ed-activity { border: 0; }
  .ed-lab-panel, .ed-cost-lab { padding: 0; }
  .ed-print-lines, .ed-ready .ed-answer-key { display: block; }
  .ed-print-lines hr { margin-top: 28px; border: 0; border-bottom: 1px solid #aaa; }
  .ed-faq details > p, .ed-answer-key details > p { display: block !important; }
  .ed-faq summary, .ed-answer-key summary { padding-block: 12px; }
  .ed-explainer, details, .ed-print-lines, .ed-readout { break-inside: avoid; }
  .ed-bottom-content > section { margin-bottom: 30px; }
}
