/* RIC Robotics — shared base for all homepage directions */
@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@300;400;500;600;700&family=Archivo:wght@400;500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --bg:#0b0c0d;
  --bg2:#121315;
  --bg3:#17191b;
  --line:#26282b;
  --line2:#3a3d41;
  --ink:#f0eee6;
  --ink-dim:#a7a59b;
  --ink-mute:#6f6e68;
  --rust:#e8590c;
  --ember:#ff6a2b;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --cond:'Saira Condensed',sans-serif;
  --sans:'Archivo',system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.55;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
::selection{background:var(--rust);color:#fff;}

/* ---- image placeholder ---- */
.ph{
  position:relative;
  background:
    repeating-linear-gradient(135deg,#161719 0 11px,#1a1b1e 11px 22px);
  border:1px solid var(--line);
  overflow:hidden;
}
.ph::before{
  content:"";position:absolute;inset:10px;
  border:1px solid var(--line);
  border-radius:inherit;
  pointer-events:none;opacity:.5;
}
.ph::after{
  content:attr(data-label);
  position:absolute;left:16px;bottom:14px;right:16px;
  font-family:var(--mono);font-size:11px;line-height:1.4;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);
}
.ph .corner{position:absolute;width:9px;height:9px;border:1px solid var(--line2);}
.ph .corner.tl{top:10px;left:10px;border-right:0;border-bottom:0;}
.ph .corner.tr{top:10px;right:10px;border-left:0;border-bottom:0;}
.ph .corner.bl{bottom:10px;left:10px;border-right:0;border-top:0;}
.ph .corner.br{bottom:10px;right:10px;border-left:0;border-top:0;}

/* ---- direction switcher (shared, fixed) ---- */
.dirbar{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;gap:18px;
  height:34px;padding:0 16px;
  background:rgba(8,9,10,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
}
.dirbar .db-label{color:var(--ink-mute);}
.dirbar .db-links{display:flex;gap:2px;margin-left:auto;}
.dirbar a{
  padding:5px 11px;color:var(--ink-dim);border:1px solid transparent;
  transition:.15s;
}
.dirbar a:hover{color:var(--ink);border-color:var(--line2);}
.dirbar a.active{color:#0b0c0d;background:var(--rust);}
.dirbar .db-home{color:var(--ink-dim);}
.dirbar .db-home:hover{color:var(--rust);}

/* offset so fixed bar doesn't cover content */
.has-dirbar{padding-top:34px;}

@media (max-width:640px){
  .dirbar{gap:8px;font-size:9px;}
  .dirbar .db-label{display:none;}
}