/* ==========================================================================
   Norealle — science.css
   FIG 01 Wax esters · FIG 02 The barrier · FIG 03 Oxidation
   One visual language: a dark instrument window set into the page, a
   monospace HUD, and plain-language captions with their sources.
   Palette is the brand palette from site.css; nothing new is introduced
   except a cool white used only for ultraviolet light.
   ========================================================================== */

.sci{margin:clamp(64px,10vh,120px) 0 0}
.sci--barrier{margin-top:clamp(36px,6vh,64px)}

/* ---------- heading block ---------- */
.sci__head{max-width:64ch;margin:0 0 clamp(22px,3.6vh,36px)}
.sci__fig,
.sci__hud,
.sci__tag,
.sci__gauge span{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  font-weight:500;letter-spacing:.16em;text-transform:uppercase
}
.sci__fig{font-size:.66rem;color:var(--terracotta);margin:0 0 14px}
.sci__title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.55rem,2.9vw,2.3rem);line-height:1.12;letter-spacing:-.01em;
  margin:0 0 14px;color:var(--ink)
}
.sci__lede{font-size:1.02rem;line-height:1.66;color:#4A443E;margin:0;max-width:62ch}

/* ---------- the instrument window ---------- */
.sci__stage{
  position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;
  background:#131110;isolation:isolate;
  box-shadow:0 40px 80px -40px rgba(32,28,26,.55)
}
.sci__stage::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  box-shadow:inset 0 0 0 1px rgba(243,236,227,.07)
}
@media (max-width:700px){.sci__stage{aspect-ratio:4/5}}
.sci__stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

.sci__hud{
  position:absolute;z-index:2;max-width:46%;pointer-events:none;
  font-size:.58rem;line-height:1.4;color:rgba(243,236,227,.5)
}
.sci__hud--tl{top:16px;left:18px}
.sci__hud--tr{top:16px;right:18px;text-align:right}
.sci__hud--bl{bottom:16px;left:18px}
.sci__hud--br{bottom:16px;right:18px;text-align:right}
.sci__hud sub{font-size:.82em;vertical-align:-.25em;letter-spacing:0}
.sci__hud em{font-style:normal;color:rgba(200,154,91,.9)}
@media (max-width:520px){
  .sci__hud{font-size:.5rem;letter-spacing:.11em;max-width:48%}
  .sci__hud--tl,.sci__hud--tr{top:12px}
  .sci__hud--bl,.sci__hud--br{bottom:12px}
  .sci__hud--tl,.sci__hud--bl{left:12px}
  .sci__hud--tr,.sci__hud--br{right:12px}
}

/* live gauge (barrier + oxidation) */
.sci__gauge{display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.sci__gauge b{display:block;width:120px;height:3px;border-radius:2px;overflow:hidden;background:rgba(243,236,227,.12)}
.sci__gauge b i{display:block;width:100%;height:100%;background:var(--amber);transform-origin:left center;transform:scaleX(.5)}
.sci--shield .sci__gauge b i{background:var(--terracotta)}
@media (max-width:520px){.sci__gauge b{width:84px}}

/* ---------- legend ---------- */
.sci__legend{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;margin:18px 0 0;padding:0;font-size:.8rem;color:#6C645C}
.sci__legend li{display:flex;align-items:center;gap:9px}
.sci__legend i{display:inline-block;flex:none}
.k-dot{width:9px;height:9px;border-radius:50%}
.k-line{width:18px;height:2px;border-radius:2px}
.k-dash{width:18px;height:0;border-top:2px dashed}
.k-hex{width:12px;height:11px;clip-path:polygon(25% 2%,75% 2%,100% 50%,75% 98%,25% 98%,0 50%)}
.k-brick{width:17px;height:9px;border-radius:2px}
.k-dbl{width:18px;height:6px;border-top:1.5px solid #A79E93;border-bottom:1.5px solid #A79E93}

/* ---------- before / after states (barrier) and the two scenarios (shield) ---------- */
.sci__states{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,4vw,56px);margin-top:clamp(22px,3.5vh,34px)}
@media (max-width:600px){.sci__states{grid-template-columns:1fr;gap:20px}}
.sci__state{border-top:1px solid var(--rule);padding-top:16px;transition:opacity .6s cubic-bezier(.22,1,.36,1)}
.sci-js .sci__state{opacity:.4}
.sci-js .sci__state.is-on{opacity:1}
.sci__tag{display:block;font-size:.6rem;color:var(--terracotta);margin-bottom:10px}
.sci__state b{
  display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.15;color:var(--ink);margin-bottom:8px
}
.sci__state p{margin:0;font-size:.95rem;line-height:1.6;color:#4A443E;max-width:46ch}

/* ---------- explanation + sources ---------- */
.sci__body{margin:clamp(20px,3vh,30px) 0 0;font-size:.95rem;line-height:1.66;color:#4A443E;max-width:66ch}
.sci__src{margin-top:16px;font-size:.72rem;line-height:1.6;color:#8A8178;max-width:88ch}
.sci__src cite{font-style:italic}

@media (prefers-reduced-motion:reduce){.sci__state{transition:none}}