/* Speak UPP! Lab: the personal site's system, re-tuned so cyan leads and the other hues derive from it. */
:root{--turq:#12d6f7;--blue:#3aa0ff;--purple:#7c8cff}
.brand{display:inline-flex;align-items:center;gap:10px}
.brand b{background:var(--turq);color:var(--ink);border-radius:8px;padding:1px 10px}
.btn-primary{background:var(--turq);color:var(--ink)}
.btn-primary:hover{background:var(--text);color:var(--ink)}
h2 .grad,h1 .grad{background:linear-gradient(90deg,var(--turq),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.card.top{border-top:4px solid var(--turq)}
.card.top.alt{border-top-color:var(--blue)}
.card ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;color:var(--muted)}
.card .q{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--turq)}
.split .tablebox{flex:1 1 380px;min-width:0}
.tablebox{overflow-x:auto;border:1px solid var(--line);border-radius:20px;background:var(--panel)}
table{width:100%;border-collapse:collapse;font-size:1rem}
th,td{padding:12px 12px;text-align:left;border-bottom:1px solid var(--line)}
caption{caption-side:bottom;padding:12px 16px;text-align:left;font-size:.9rem;color:var(--muted)}
thead th{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--turq)}
tbody th{font-weight:600}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0;background:rgba(18,214,247,.14);font-weight:700}
.lvl{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.lvl i{width:26px;height:10px;border-radius:999px;border:2px solid var(--turq);display:inline-block}
.lvl.full i{background:var(--turq)}
.lvl.part i{background:repeating-linear-gradient(115deg,var(--turq) 0 4px,transparent 4px 8px)}
.lvl.none{color:var(--muted)}
.lvl.none i{border-color:var(--muted)}
.route{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;list-style:none;margin:0;padding:0}
.route li{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:6px}
.route li.now{border:2px solid var(--turq);background:rgba(18,214,247,.14)}
.route .n{width:30px;height:30px;border-radius:50%;border:2px solid var(--turq);color:var(--turq);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem}
.route li.now .n{background:var(--turq);color:var(--ink)}
.route b{font-family:var(--display)}
.route .d{color:var(--muted);font-size:.95rem}
.tag{align-self:flex-start;background:var(--turq);color:var(--ink);font-size:.75rem;font-weight:700;border-radius:999px;padding:3px 10px}
.takes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px 32px}
.takes p{color:var(--muted)}
/* tighter rhythm between sections */
section{padding:46px 0}
.page-hero .wrap{padding-top:72px;padding-bottom:60px}
@media (max-width:640px){section{padding:36px 0}}
/* comparison: two even columns on laptop and up, so the whole chart is visible */
@media (min-width:900px){.split.even{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:start}}
@media (max-width:520px){table{min-width:420px}}
/* hero: centred on laptop and up, left-aligned on phones */
@media (min-width:900px){
  .page-hero .wrap{align-items:center;text-align:center}
  .page-hero .lead{max-width:58ch}
  .page-hero canvas{-webkit-mask-image:none;mask-image:none;opacity:.5}
}
/* stage and screen, side by side in the about section */
.split .shots{flex:1 1 320px;max-width:460px;min-width:0;display:flex;flex-direction:column;gap:16px}
.shots figure{margin:0;display:flex;flex-direction:column;gap:8px}
.split .shots .frame{aspect-ratio:3/2;max-width:none;flex:none}
/* phones: logo left and Next step right on the first row, links on the row below */
@media (max-width:760px){
  .nav .wrap{position:relative}
  .nav nav{flex:1 1 100%}
  .nav ul li:last-child{position:absolute;right:24px;top:9px}
  .nav ul a.btn{padding:7px 14px;font-size:.92rem}
}