/* ==========================================================================
   THE SAND
   A light band, deliberately — it breaks the run of dark sections and suits
   the subject: this is the lab-sheet part of the page.
   ========================================================================== */

.petro{
  position:relative;
  background:var(--ink);
  border-top:1px solid var(--rule-soft);
  padding:clamp(5rem,11vw,8rem) clamp(20px,5vw,60px);
}

.petro__head{ max-width:56ch; margin-bottom:clamp(2.6rem,5vw,3.6rem); }

.petro__scale{ margin:0; }

.scale{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:1px;
  background:var(--rule-soft);
  border-block:1px solid var(--rule-soft);
}

.scale__step{
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  padding:1.9rem .6rem 1.6rem;
  background:var(--ink);
  border:0; margin:0; cursor:pointer;
  font:inherit; color:var(--paper-faint);
  transition:background .3s var(--ease), color .3s var(--ease);
}
.scale__step:hover,
.scale__step.is-on{ background:var(--ink-deep); color:var(--paper); }

.scale__art{ display:block; width:100%; max-width:104px; }
.scale__art canvas{ width:100%; height:auto; display:block; }

/* MRP's class keeps a marker whatever else is hovered */
.scale__step.is-mrp{ box-shadow:inset 0 -2px 0 var(--green); }

.scale__name{
  font-size:.8rem; font-weight:600;
  text-align:center; line-height:1.3;
}

.scale__flag{
  font-size:.6rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--green);
}

.petro__note{
  margin:1.4rem 0 0;
  font-size:.95rem; line-height:1.6;
  color:var(--paper-soft);
  max-width:62ch;
  min-height:3em;
}
.petro__note b{ color:var(--paper); font-weight:600; }

@media (max-width:880px){
  .scale{ grid-template-columns:repeat(3,1fr); }
  .scale__art{ max-width:128px; }
}
@media (max-width:460px){
  .scale{ grid-template-columns:repeat(2,1fr); }
  .scale__step{ padding:1.4rem .4rem 1.2rem; }
  .scale__art{ max-width:150px; }
}