/* Shared science component system: light editorial sections, charcoal instruments. */
/* Vertical rhythm comes from .section in brand-styles (110 / 87 / 63). The
   section padding that used to live here copied .tech-section's 76px/82px and
   put two rhythms on one page -- .science-practice never took it. */
.wavelength-section,.dose-lesson,#mechanism,#positioning{background:var(--paper);border:0;border-top:1px solid var(--line)}
.wavelength-intro,.dose-intro{grid-template-columns:1fr 1fr;gap:48px;margin-bottom:36px}
.wavelength-intro h2,.dose-intro h2,.science-copy h2,#positioning .section-top h2{font-size:clamp(2.25rem,3.4vw,3.5rem);font-weight:400;line-height:1.08;letter-spacing:-.045em}
.wavelength-copy,.dose-intro>div+div,.science-copy>p,#positioning .section-top>p{font-size:1rem;line-height:1.65}
.dose-intro em{color:var(--ink)}
.wavelength-intro .eyebrow,.dose-intro .eyebrow,.science-copy .eyebrow,#positioning .eyebrow{margin-bottom:18px}
.science-split{grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.science-copy h2{margin-bottom:22px}.science-copy>p{max-width:520px;margin-top:16px}
#positioning .section-top{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;margin-bottom:36px}
.spectrum-explorer,.dose-explorer,.science-instrument{--panel-line:#344650;--panel-muted:#b5c7d0;--panel-accent:#80d6f8;background:#10171b;color:#f0f7fa;border:1px solid var(--panel-line);padding:28px 32px 0;box-shadow:none}
.science-instrument{padding-bottom:28px}
.spectrum-explorer p,.dose-explorer p,.science-instrument p,.science-instrument figcaption{color:var(--panel-muted)}
.spectrum-live,.response-layout,.dose-build-layout{grid-template-columns:1fr 1.65fr;gap:48px;padding-block:28px}
.spectrum-number output,.dose-number output{font-size:clamp(4rem,6.5vw,6.25rem);font-weight:400;letter-spacing:-.065em}
.spectrum-number>span,.dose-number>span{font-size:1.125rem;color:var(--panel-muted)}
.spectrum-context{min-height:0!important}.wavelength-study>p{margin-bottom:16px}
.spectrum-topline{border-bottom:1px solid var(--panel-line)}
.spectrum-views,.dose-tabs{gap:28px;padding-top:0;flex-wrap:nowrap}
.spectrum-views button,.dose-tabs button{font-size:.9375rem;line-height:1.4;min-height:44px;padding:0 0 15px;border-bottom-width:2px}
.spectrum-views button[aria-pressed=true],.dose-tabs button[aria-selected=true]{border-color:var(--panel-accent)}
.spectrum-extent{font-size:.8125rem}
.germicidal-title{font-size:1.0625rem;gap:6px;margin-bottom:14px}
.spectrum-bottom{gap:48px;padding-block:24px}.spectrum-presets{gap:28px}
.spectrum-presets button,.response-levels button{font-size:.875rem;min-height:54px}
.spectrum-presets button>span,.response-levels button span{font-size:1.0625rem}
.spectrum-explorer .spectrum-explanation,.dose-panel-heading>p{font-size:.9375rem;line-height:1.6}
.spectrum-method,.dose-details{padding-block:16px}
.dose-panel{padding-top:24px}.dose-panel-heading{gap:48px;margin-bottom:22px}
.dose-panel-heading h3,.geometry-heading h3{font-size:1.75rem;line-height:1.15;font-weight:400}
.dose-study-line{font-size:.8125rem;padding-block:12px}
.response-outcome output{font-size:clamp(2.5rem,3.8vw,3.5rem)}
.response-controls{gap:36px;padding-bottom:24px}.response-levels{gap:28px}
.dose-practice{gap:48px;margin-top:32px}.dose-practice h3{font-size:1.75rem}.dose-practice p{font-size:.9375rem}
.dose-comparisons{gap:40px}.dose-comparisons figcaption>span{font-size:3rem}
.instrument-heading{color:var(--panel-muted)}.instrument-heading .mono{font-size:.6875rem}
.instrument-caption,.science-assumptions p,.science-assumptions summary{font-size:.875rem;line-height:1.6}
.instrument-caption{margin-top:20px}
.geometry-panels{gap:24px}.geometry-heading{margin-top:24px}.geometry-heading>p{font-size:.9375rem;line-height:1.6;min-height:72px}
.distance-readout{margin-top:24px;min-height:56px;color:var(--panel-accent)}
.distance-readout output{font-size:3.5rem}.distance-readout>span{font-size:.8125rem;color:var(--panel-muted)}
.shadow-state{margin-top:24px;min-height:56px;color:var(--panel-muted)}
.distance-chart,.shadow-diagram{height:auto;aspect-ratio:580/300;margin:20px 0;max-height:none}
.chart-tick,.source-label{fill:#b5c7d0}.science-gridline{stroke:#344650}
.science-plot-line,.target-ray{stroke:#80d6f8}.science-plot-dot,.source-point{fill:#80d6f8;stroke:#10171b}
.shadow-diagram>rect:first-of-type{fill:#17242c;stroke:#526975}
.shadow-diagram>rect:nth-of-type(2){fill:#344650;stroke:#8a9ea9}
.visibility-area{fill:#80d6f819}.shadow-rays{stroke:#80d6f8;stroke-opacity:.22}
.target-point{fill:#17242c;stroke:#b5c7d0}.shadow-instrument[data-path-open=true] .target-point{fill:#80d6f8;stroke:#80d6f8}
.shadow-instrument[data-path-open=true] .shadow-state{color:#80d6f8}.shadow-instrument[data-path-open=true] .status-symbol{background:#80d6f8;border-color:#80d6f8}
.dna-base{fill:#17242c;stroke:#637f8e}.dna-thymine{fill:#1e485a;stroke:#80d6f8}.dna-letter{fill:#e1f2fa}.dna-direction,.dna-caption-label{fill:#b5c7d0}
.dna-backbone,.dna-neck{stroke:#8ba3af}.dna-pair{stroke:#68828f}.lesion-outline,.lesion-bonds,.lesion-callout{stroke:#80d6f8}.lesion-label{fill:#80d6f8}
.science-segmented{border:0;border-bottom:1px solid #344650;width:auto;gap:26px;margin-top:12px}
.science-segmented button{flex:initial;padding:10px 0 14px;min-height:44px;font-size:.9375rem;border:0;border-bottom:2px solid transparent;color:#aebec6}
.science-segmented button+button{border-left:0}.science-segmented button[aria-pressed=true]{background:transparent;color:#f0f7fa;border-bottom-color:#80d6f8}
.science-segmented button:hover:not([aria-pressed=true]){background:transparent;color:#fff}
.science-assumptions{border-color:#344650;padding-block:16px;margin-top:18px}
.science-sources-heading h2{font-size:2.25rem}
@media(max-width:850px){
 .wavelength-intro,.dose-intro,.science-split,#positioning .section-top{gap:28px}
 .science-split{grid-template-columns:1fr}.science-copy>p{max-width:660px}
 .spectrum-explorer,.dose-explorer,.science-instrument{padding:24px 24px 0}.science-instrument{padding-bottom:24px}
 .geometry-panels{grid-template-columns:1fr 1fr;gap:20px}.geometry-heading>p{min-height:96px}
 .spectrum-live,.response-layout,.dose-build-layout{gap:28px}.spectrum-bottom{gap:28px}
 .science-segmented{gap:20px}.science-segmented button{font-size:.875rem}
}
@media(max-width:700px){
 .wavelength-intro,.dose-intro,#positioning .section-top{grid-template-columns:1fr;gap:20px;margin-bottom:28px}
 .wavelength-intro h2,.dose-intro h2,.science-copy h2,#positioning .section-top h2{font-size:2.4rem}
 .geometry-panels{grid-template-columns:1fr;gap:24px}.geometry-heading>p{min-height:0}
 .spectrum-explorer,.dose-explorer,.science-instrument{padding:22px 20px 0}.science-instrument{padding-bottom:22px}
 .spectrum-live,.response-layout,.dose-build-layout{grid-template-columns:1fr;gap:24px;padding-block:24px}
 .spectrum-number output,.dose-number output{font-size:4.5rem}.spectrum-number{gap:10px}
 .spectrum-bottom{grid-template-columns:1fr;gap:20px;padding-top:46px}
 .dose-panel-heading{grid-template-columns:1fr;gap:14px}.dose-panel-heading h3,.geometry-heading h3{font-size:1.6rem}
 .dose-tabs{display:grid;gap:12px}.dose-tabs button{font-size:.875rem;min-height:54px;padding-bottom:12px}
 .spectrum-views{gap:20px}.spectrum-views button{font-size:.875rem}
 .dose-practice{grid-template-columns:1fr;gap:18px}.response-controls{display:block}
 .response-levels{gap:16px;justify-content:space-between}.response-outcome output{font-size:2.75rem}
 .spectrum-method>div{grid-template-columns:1fr;gap:16px}
 .dose-comparisons{grid-template-columns:1fr;gap:24px}
 .instrument-caption,.science-assumptions p,.science-assumptions summary{font-size:.875rem}
}
@media(max-width:380px){
 .spectrum-explorer,.dose-explorer,.science-instrument{padding-inline:16px}
 .spectrum-number output,.dose-number output{font-size:3.8rem}.response-outcome output{font-size:2.2rem}
 .dose-tabs{gap:8px}.dose-tabs button{font-size:.8125rem}.spectrum-views{gap:14px}.spectrum-views button{font-size:.8125rem}
 .response-reading{column-gap:12px}.response-reading .dose-value-label{font-size:.8125rem}
 .spectrum-presets{gap:12px}.spectrum-presets button{font-size:.8125rem}.spectrum-presets button>span{font-size:1rem}
}

/* Science follows Technology: a full-width heading, then visual and explanation. */
#wavelength .science-section-title,#mechanism .science-section-title,
#exposure .science-section-title,#positioning .science-section-title{
 font-size:clamp(2.65rem,4.3vw,4.35rem);font-weight:500;
 line-height:1.05;letter-spacing:-.048em;margin:0 0 36px;
}

/* Standfirst above the copy, same treatment as the dose section's own. */
#positioning .science-section-copy>h3,#mechanism .science-copy>h3{font-size:1.5rem;line-height:1.2;letter-spacing:-.025em;font-weight:500;margin:0 0 20px}
/* References collapse into the shared .faq-item accordion; the list keeps its
   own two-column layout and type inside it. */
.science-sources-accordion{border-top:0}
/* The section's own heading block is the toggle. .faq-item's summary padding and
   its 27px paragraph padding were both sized for a one-line label, and together
   they hung ~58px of dead space above the closing rule. */
.science-sources-accordion summary{padding:0 52px 22px 0}
.science-sources-accordion summary p{padding:0}
.science-sources-accordion summary:after{top:5px;font-size:1.75rem}
.science-sources-accordion .science-sources-heading{max-width:none;margin-bottom:0}
.science-sources-accordion .science-sources-heading p{margin-top:12px}
.science-sources-accordion .science-source-list{margin-top:4px}
.science-content-layout,#mechanism .science-split{
 display:grid;grid-template-columns:minmax(0,2.125fr) minmax(0,1fr);
 gap:52px;align-items:start;
}
.science-content-layout>*{min-width:0}
.science-section-copy{padding-top:4px;max-width:none;font-size:1rem;line-height:1.7}
.science-section-copy p{font-size:1rem;line-height:1.7;max-width:none;margin:0}
.science-section-copy p+p{margin-top:19px}
.science-section-copy .text-link{margin-top:20px}
#exposure .dose-practice{display:block;margin-top:30px}
#exposure .dose-practice h3,#exposure .dose-intro-copy h3{font-size:1.5rem;line-height:1.2;letter-spacing:-.025em;margin-bottom:20px}
#exposure .dose-practice .efficacy-science-link{margin-top:0}
#exposure .dose-practice .efficacy-science-link+.text-link{margin-top:4px}
#wavelength #tgr-wavelength-254-explained,#exposure #tgr-paired-dose{
 max-width:none;margin:0;padding:0;
}
#mechanism .dna-animation{width:100%;max-width:none}
#mechanism .dna-animation-stage{width:100%}
#mechanism .science-copy>p:first-child{margin-top:0}
/* Centres the copy on the animation frame itself rather than on the whole
   figure. The stage sits 92px below the figure's top (24px padding + the
   heading's fixed 2.5em/10px box) and 172px above its bottom (the caption
   block's own fixed min-heights + 20px padding), so the stage's centre is
   40px above the figure's at 1440. Centring the copy's MARGIN box and
   hanging bottom margin off it lifts the content by half that margin, so the
   copy stays centred on the frame at any copy height and any column width --
   a fixed padding could not, since the 16/9 stage grows with the column.
   The one thing that does move is the caption block: below ~1300px its text
   wraps past its own 3em min-height and the bottom chrome grows 172 -> 192px,
   which would want 100px here rather than 80px. 90px splits that, holding the
   copy within ~5px of the frame's centre at every desktop width instead of
   exact at one and 10px out at the other. */
#mechanism .science-copy{align-self:center;margin-bottom:90px}
#positioning .section-top{display:block;margin-bottom:36px}
#positioning .section-top>p{max-width:75ch;font-size:1rem;line-height:1.7}
@media(max-width:1000px){
 .science-content-layout,#mechanism .science-split{
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:32px;
 }
}
@media(max-width:780px){
 #wavelength .science-section-title,#mechanism .science-section-title,
 #exposure .science-section-title,#positioning .science-section-title{margin-bottom:29px}
 .science-content-layout,#mechanism .science-split{grid-template-columns:minmax(0,1fr);gap:28px}
 #mechanism .science-copy{align-self:start;margin-bottom:0}
 .science-section-copy{padding:0;max-width:600px}
 .science-section-copy p+p{margin-top:15px}
 #exposure .dose-practice h3,#exposure .dose-intro-copy h3{margin-bottom:15px}
 #positioning .section-top{margin-bottom:28px}
}
@media(max-width:700px){
}
/* The nav band above closes with its own border-bottom, so this section's
   border-top landed on the same pixel row and that boundary read as 2px while
   the line above the band stayed 1px. The other sections sharing the rule keep
   theirs -- nothing sits above them supplying one. The nav's border-bottom is
   the half to keep: on /technology/ the section after the nav has no
   border-top, so dropping it there would leave that band open at the bottom. */
#wavelength{border-top:0}
/* The closing link out to the technology page read as a caption rather than a
   link: white, no underline, only the arrow to signal it. Underlining the
   label makes it apparent, in the same spirit as the ADIS link on that page.
   Hover colour still comes from .text-link:hover. */
/* Standalone link on a light section: ink, like every other text link there (it inherited the grey paragraph colour). */
#exposure .efficacy-science-link .text-link{color:var(--ink)}
/* The opening section is dark, like Technology's; it keeps no rule above it. */
#wavelength.dark{background:var(--dark);border-top:0}
/* Tighter sections (closer to Technology's): the DNA figure sits on the section with no inner
   padding, and its stage title reserves one line instead of two where it never wraps; the
   dose copy blocks step 28px apart instead of 44px. */
#mechanism .dna-animation{padding:0}
@media(min-width:701px){#mechanism .dna-animation h3{min-height:0}}
#exposure .science-section-copy>div+div{margin-top:28px}
/* The dose section is the tallest: its diagrams take less width and its copy more, so both
   columns get shorter. Only from 1240px, where the diagram column stays well above the 560px
   at which the dose figure drops its lamp drawing; narrower screens keep the shared layout. */
@media(min-width:1240px){#exposure .science-content-layout{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}}