/* 301 BIOTEC — /technology/ layout glue ONLY.
   All visual rules come from the locked homepage via site.css. Each rule below places an existing
   homepage pattern in this page's arrangement, using homepage values. */

/* text entry timing (same mechanism as the SLYHB-150 page; --fade is set by chrome.js) */
.tp [data-bg]>*{opacity:var(--fade,1)}

/* ruled index rows that are not links: the values of .ind-list a, without the link affordances */
.ind-list .row{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:clamp(14px,2vw,30px);align-items:baseline;padding:clamp(16px,2.2vh,24px) 0}
.in-lbl{font:600 10.5px/1.4 var(--b);letter-spacing:.18em;text-transform:uppercase;color:var(--brass-lo);margin-bottom:10px}
.in-lbl.out{color:var(--muted);margin-top:clamp(36px,5vh,56px)}
.ind-list.out{border-top:1px dashed rgba(21,26,23,.35)}
.ind-list.out .nm{color:var(--muted);font-size:clamp(19px,1.5vw,24px)}

/* 05 control: spec sheet beside the installation photograph (.m and .sheet are homepage patterns) */
.ct-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,6vw,90px);align-items:start;margin-top:clamp(40px,6vh,70px)}
.ct-grid .sheet{max-width:none;margin-top:0}
.ct-fig,.od-fig{position:relative;margin:0;overflow:hidden;aspect-ratio:4/5;background:#101a14}
.ct-fig img,.od-fig img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.02)}
.ct-fig figcaption,.od-fig figcaption{position:absolute;left:14px;bottom:12px;font:600 10px/1.3 var(--b);letter-spacing:.16em;text-transform:uppercase;color:var(--off);background:rgba(8,13,10,.7);padding:6px 9px;backdrop-filter:blur(4px)}

/* 07 odour: the 2015 measurement, presented with the homepage's .op-facts figures */
.od-fig{aspect-ratio:3/2}
.od-test{margin-top:clamp(28px,4vh,44px)}
.od-test .pp-lbl{font:600 10.5px/1.4 var(--b);letter-spacing:.18em;text-transform:uppercase;color:var(--brass-hi)}
.od-src{margin-top:8px;font-size:12.5px;line-height:1.5;color:var(--muted-d)}
.od-test .op-facts{margin-top:22px;flex-wrap:wrap;gap:18px 24px}
.od-test .of b.sm{font-size:clamp(15px,1.3vw,20px)}
.od-test .of b em{font:500 .42em/1 var(--b);font-style:normal;letter-spacing:.04em;color:var(--muted-d);margin-left:5px}
.od-test .ev-tag{margin-top:18px}

/* 11 evidence: the register beside the laboratory block */
.ev-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,90px);align-items:start;margin-top:clamp(40px,6vh,70px)}

/* 12 scale: the Section 05 ruler in its own section */
.proof .pf-range{margin-top:clamp(48px,7vh,90px)}
.proof .acts{margin-top:clamp(40px,6vh,64px)}

@media (max-width:900px){
  .ct-grid,.ev-grid{grid-template-columns:minmax(0,1fr)}
  .ct-fig{aspect-ratio:3/2}
  .ind-list .row{grid-template-columns:32px minmax(0,1fr);padding:16px 0}
  .ind-list.out .nm{font-size:18px}
  .od-test .op-facts{display:grid;grid-template-columns:1fr 1fr}
}


/* AA: index numbers and small labels take their tone from the band behind them.
   Dark and forest bands use the light brass; the warm band uses a 6%-darker step of --brass-lo
   (4.56:1). Nothing else changes — same type, size, position, spacing and numbering. */
.k i,.ind-list .no,.pg-list .no,.area .n,.in-lbl,.od-lbl,.fq-q .n,.st-op,.sy .n,.ls-el .n{color:var(--brass-hi)}
.ind .k i,.ind .no,.ind .n,.ind .in-lbl,.ind .od-lbl,.ind .fq-q .n,.ind .st-op,
section[data-bg="#F2EEE5"] .k i,section[data-bg="#F2EEE5"] .no,section[data-bg="#F2EEE5"] .n,
section[data-bg="#F2EEE5"] .in-lbl,section[data-bg="#F2EEE5"] .od-lbl,
section[data-bg="#F2EEE5"] .fq-q .n,section[data-bg="#F2EEE5"] .st-op{color:#846739}