/* DRAFT A — INSTRUMENT CLUSTER
   The page as a cockpit panel: lit glass modules packed on the dark ground,
   tight gutters, every module labelled like an instrument. */

.wrap{width:min(1580px,94vw);margin-inline:auto}
main{position:relative;z-index:1}

/* ---- top bar ---- */
.bar{position:sticky;top:0;z-index:60;
  background:rgba(6,6,7,.72);
  backdrop-filter:blur(24px) saturate(170%);-webkit-backdrop-filter:blur(24px) saturate(170%);
  border-bottom:1px solid var(--line2);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.6),0 14px 34px rgba(0,0,0,.5)}
.bar-in{display:flex;align-items:center;gap:clamp(1.4rem,3vw,3rem);
  padding:clamp(14px,1.4vw,20px) 0;min-height:66px}
.mark{display:flex;align-items:center;gap:.75rem;font:900 1rem/1 var(--display);letter-spacing:-.04em}
.mark i{width:26px;height:26px;border-radius:7px;background:var(--acc);display:grid;place-items:center;
  color:var(--acc-ink);font:900 .72rem/1 var(--display);font-style:normal;flex:none}
.mark span{color:var(--ink3);font-weight:400}
.bar nav{display:flex;gap:clamp(1rem,2vw,2.1rem);margin-left:auto}
.bar nav a{font:400 .66rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink3);
  transition:color var(--t-mid) var(--e)}
.bar nav a:hover{color:var(--ink)}
.bar .btn{padding:.72rem 1.4rem}

/* ---- section headers, dashboard-style ---- */
.sec{display:flex;align-items:center;gap:.9rem;padding:clamp(58px,7vw,104px) 0 clamp(18px,1.8vw,24px)}
.sec:first-of-type{padding-top:clamp(30px,3.4vw,52px)}
.sec .n{font:500 .66rem/1 var(--mono);letter-spacing:.19em;color:var(--acc-t)}
.sec .t{font:500 .66rem/1 var(--mono);letter-spacing:.19em;text-transform:uppercase;color:var(--ink)}
.sec .x{font:400 .66rem/1 var(--mono);letter-spacing:.19em;text-transform:uppercase;color:var(--ink3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sec .r{flex:1;min-width:20px;height:1px;background:var(--line2)}

/* ---- the cluster grid ---- */
.cluster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(10px,.85vw,14px)}
.mod{padding:var(--padb) var(--padi)}
.mod-hd{display:flex;align-items:center;gap:.7rem;padding-bottom:clamp(16px,1.6vw,22px);
  margin-bottom:clamp(16px,1.6vw,22px);border-bottom:1px solid var(--line2)}
.mod-hd .lbl{flex:1;min-width:0}

/* hero */
.hero{grid-column:span 8;padding:clamp(34px,3.4vw,60px) clamp(30px,3vw,54px) clamp(34px,3.4vw,58px)}
.hero .d1{margin:clamp(20px,2vw,30px) 0 clamp(20px,2vw,28px)}
.hero .body{margin-bottom:clamp(28px,2.8vw,40px)}
.cta{display:flex;flex-wrap:wrap;gap:12px}

.gauges{grid-column:span 4;display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:clamp(10px,.85vw,14px)}
.gauge{padding:var(--padb) var(--padi);display:flex;flex-direction:column;justify-content:space-between;gap:clamp(14px,1.6vw,20px)}
.gauge .v{font:900 clamp(2.4rem,3.6vw,3.6rem)/var(--lh-d) var(--display);letter-spacing:-.045em;color:var(--acc)}
.gauge .v small{font-size:.32em;letter-spacing:.14em;color:var(--ink3);font-weight:400;
  font-family:var(--mono);margin-left:.7rem;text-transform:uppercase}
.gauge p{font:400 .78rem/var(--lh-b) var(--display);color:var(--ink2);max-width:34ch}

/* readouts — a bordered row is padded on BOTH axes, label col >= 6.5rem */
.readouts{display:grid;gap:0;margin-top:clamp(26px,2.6vw,38px);border-top:1px solid var(--line2)}
.readout{display:grid;grid-template-columns:minmax(var(--labelw),max-content) minmax(0,1fr);
  gap:var(--gut);align-items:baseline;
  padding:var(--padb) var(--padi);border-bottom:1px solid var(--line2)}
.readout dt{font:500 .66rem/var(--lh-h) var(--mono);letter-spacing:.19em;text-transform:uppercase;color:var(--ink3)}
.readout dd{font:400 .82rem/var(--lh-b) var(--display);color:var(--ink2)}

/* what-it-does modules */
.duty{grid-column:span 4;padding:var(--padb) var(--padi);display:flex;flex-direction:column;gap:clamp(14px,1.4vw,18px);min-height:260px}
.duty .d3{margin-top:auto}
.duty p{font:400 .82rem/var(--lh-b) var(--display);color:var(--ink2)}
.duty .idx{font:500 .66rem/1 var(--mono);letter-spacing:.19em;color:var(--acc)}

/* courses */
.course{grid-column:span 4;padding:var(--padb) var(--padi);display:flex;flex-direction:column;gap:clamp(14px,1.4vw,18px);
  transition:opacity var(--t-mid) var(--e),background-color var(--t-mid) var(--e)}
.course:hover{opacity:.88;background-color:rgba(247,244,236,.055)}
.course .code{font:900 clamp(2rem,2.7vw,2.7rem)/var(--lh-d) var(--display);letter-spacing:-.05em;color:var(--acc)}
.course .nm{font:700 clamp(1.05rem,1.35vw,1.28rem)/var(--lh-h) var(--display);letter-spacing:-.015em}
.course p{font:400 .8rem/var(--lh-b) var(--display);color:var(--ink2)}
.course .go{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:var(--gut);
  padding-top:clamp(16px,1.6vw,22px);border-top:1px solid var(--line2)}
.course .go span{font:500 .64rem/1 var(--mono);letter-spacing:.19em;text-transform:uppercase;color:var(--ink3)}
.course .go b{font:500 .64rem/1 var(--mono);letter-spacing:.19em;text-transform:uppercase;color:var(--acc-t)}
.course--wide{grid-column:span 6}

/* CTA annunciator */
.ann{grid-column:span 12;padding:clamp(40px,4vw,72px) clamp(30px,3vw,56px);
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--gut);align-items:end}
.ann .body{margin-top:clamp(18px,1.8vw,26px)}
.ann .cta{justify-content:flex-end}

/* footer */
.foot{position:relative;z-index:1;margin-top:clamp(56px,6vw,96px);border-top:1px solid var(--line2)}
.foot-in{display:flex;flex-wrap:wrap;gap:var(--gut);align-items:center;
  padding:var(--padb) 0;font:400 .66rem/var(--lh-h) var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink3)}
.foot-in a{color:var(--ink2);transition:color var(--t-mid) var(--e)}
.foot-in a:hover{color:var(--acc-t)}
.foot-in .sp{margin-left:auto}

@media (max-width:1180px){
  .hero,.ann{grid-column:span 12}
  .gauges{grid-column:span 12;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto}
  .duty,.course,.course--wide{grid-column:span 6}
  .ann{grid-template-columns:minmax(0,1fr)}
  .ann .cta{justify-content:flex-start}
}
@media (max-width:720px){
  .gauges{grid-template-columns:minmax(0,1fr)}
  .duty,.course,.course--wide{grid-column:span 12}
  .bar nav{display:none}
  .sec .x{display:none}
}