/* AMAROK HUB - the APEX staff console entry point.
   Typography is brand-locked: Raleway (headers, primary, tight tracking, dominates the layout)
   and Cabin (body, secondary, left aligned, slightly negative tracking). NO mono anywhere - it is
   not in the brand system. Decorative/label text is Raleway Bold in full caps, which is what the
   guidelines specify for it. Accent red is never modified; Metal Blue stays subordinate. */

:root{
  --red:#DD2734;
  --charcoal:#0A090C;   /* Dark / Warm  */
  --dusty:#061826;      /* Dark / Cool  */
  --metal:#0F4761;      /* Accent, subordinate */
  --cool:#FBF9FF;       /* Light / Cool */
  --line:rgba(251,249,255,.13);
  --line-2:rgba(251,249,255,.22);
  --dim:rgba(251,249,255,.60);
  --dimmer:rgba(251,249,255,.40);
  --disp:'Raleway',Segoe UI,Helvetica Neue,Arial,sans-serif;
  --body:'Cabin',-apple-system,Segoe UI,Helvetica Neue,Arial,sans-serif;
  --shell:1240px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--charcoal);color:var(--cool);
  font-family:var(--body);font-size:16.5px;line-height:1.6;letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;display:flex;flex-direction:column;
  /* Dark/Cool bloom behind the console - gradients are permitted on darks. */
  background-image:
    radial-gradient(1100px 620px at 76% -8%, rgba(15,71,97,.34), transparent 62%),
    radial-gradient(760px 480px at 4% 104%, rgba(6,24,38,.62), transparent 66%);
  background-repeat:no-repeat;background-attachment:fixed;
}
h1,h2,h3{font-family:var(--disp);margin:0;letter-spacing:-.03em;text-wrap:balance;}
p{margin:0;}
a{color:inherit;}

/* Thin lines lead the eye - a hairline field, kept almost subliminal. */
.grid-bg{position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:96px 96px;opacity:.30;
  -webkit-mask-image:radial-gradient(1200px 700px at 50% 0%,#000 12%,transparent 76%);
          mask-image:radial-gradient(1200px 700px at 50% 0%,#000 12%,transparent 76%);}

.shell{max-width:var(--shell);margin:0 auto;padding-left:clamp(20px,4.4vw,44px);padding-right:clamp(20px,4.4vw,44px);width:100%;}

/* ---------- LABEL: Raleway Bold, full caps (brand rule for decorative text) ---------- */
.label{font-family:var(--disp);font-weight:700;font-size:12.2px;letter-spacing:.2em;text-transform:uppercase;}

/* ---------- TOP BAR ---------- */
.bar{position:relative;z-index:2;border-bottom:1px solid var(--line);}
.bar-in{display:flex;align-items:center;gap:16px;padding-top:20px;padding-bottom:20px;}
.bar img{display:block;width:clamp(116px,13vw,142px);height:auto;}
.bar .spacer{margin-left:auto;}
.chip{display:inline-flex;align-items:center;gap:9px;min-height:38px;padding:0 14px;
  border:1px solid var(--line-2);color:var(--dim);
  font-family:var(--disp);font-weight:700;font-size:12.2px;letter-spacing:.16em;text-transform:uppercase;}
.chip .pulse{width:7px;height:7px;border-radius:50%;background:#57C98A;flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(87,201,138,.55);}
@media(prefers-reduced-motion:no-preference){
  .chip .pulse{animation:pulse 2.6s ease-out infinite;}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(87,201,138,.5);}70%{box-shadow:0 0 0 7px rgba(87,201,138,0);}100%{box-shadow:0 0 0 0 rgba(87,201,138,0);}}
}
.chip.quiet{color:var(--dimmer);}
@media(max-width:720px){ .chip.quiet{display:none;} }

/* ---------- HERO ---------- */
.hero{position:relative;z-index:2;padding-top:clamp(46px,7vw,88px);padding-bottom:clamp(26px,3.4vw,40px);}
.hero .label{color:var(--red);}
.hero h1{font-weight:700;font-size:clamp(40px,6.6vw,78px);line-height:.98;margin-top:18px;}
.hero .sub{color:var(--dim);font-size:clamp(16px,1.5vw,18.5px);line-height:1.58;margin-top:20px;max-width:52ch;}
.hero .sub b{color:var(--cool);font-weight:600;}
/* the four-dot system - Metal Blue, Dusty Blue, Pure Black, APEX Red */
.dots{display:flex;gap:8px;align-items:center;margin-top:30px;}
.dots i{width:8px;height:8px;border-radius:50%;display:block;}
.dots i:nth-child(1){background:var(--metal);}
.dots i:nth-child(2){background:#123A52;}
.dots i:nth-child(3){background:rgba(251,249,255,.30);}
.dots i:nth-child(4){background:var(--red);}

/* ---------- CONSOLE GRID ---------- */
.console{position:relative;z-index:2;padding-bottom:clamp(40px,5vw,64px);}
.console-head{display:flex;align-items:baseline;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--line);}
.console-head .label{color:var(--dimmer);}
.console-head .count{margin-left:auto;color:var(--dimmer);font-family:var(--disp);font-weight:600;font-size:12.5px;letter-spacing:.1em;}
.tiles{display:grid;grid-template-columns:1fr;gap:14px;margin-top:22px;}
@media(min-width:700px){ .tiles{grid-template-columns:1fr 1fr;} }
@media(min-width:1080px){ .tiles{grid-template-columns:repeat(3,1fr);} }

.tile{position:relative;display:flex;flex-direction:column;min-height:212px;
  padding:26px 24px 22px;border:1px solid var(--line);background:rgba(251,249,255,.022);
  text-decoration:none;color:inherit;overflow:hidden;
  transition:border-color .18s ease,background .18s ease,transform .18s ease;}
/* cornerpiece - a brand shape, drawn in the accent */
.tile::after{content:"";position:absolute;top:-1px;right:-1px;width:26px;height:26px;
  border-top:2px solid transparent;border-right:2px solid transparent;transition:border-color .18s ease;}
a.tile:hover,a.tile:focus-visible{background:rgba(251,249,255,.055);border-color:var(--line-2);transform:translateY(-2px);}
a.tile:hover::after,a.tile:focus-visible::after{border-top-color:var(--red);border-right-color:var(--red);}
a.tile:focus-visible{outline:2px solid var(--red);outline-offset:3px;}
.tile .idx{color:var(--red);}
.tile h2{font-weight:700;font-size:clamp(21px,2.1vw,24px);margin-top:13px;letter-spacing:-.022em;}
.tile p{color:var(--dim);font-size:14.8px;line-height:1.55;margin-top:10px;}
.tile .foot{margin-top:auto;padding-top:20px;display:flex;align-items:center;gap:10px;min-height:40px;}
.tile .enter{font-family:var(--disp);font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cool);}
a.tile:hover .enter{color:var(--red);}
.tile .arrow{transition:transform .18s ease;display:inline-block;}
a.tile:hover .arrow{transform:translateX(4px);}
.state{display:inline-flex;align-items:center;gap:8px;
  font-family:var(--disp);font-weight:700;font-size:12.2px;letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer);}
.state .d{width:6px;height:6px;border-radius:50%;background:var(--dimmer);display:block;}
.state.live{color:#57C98A;}
.state.live .d{background:#57C98A;}
.tile.off{opacity:.5;}
.tile.off h2{color:var(--dim);}

/* ---------- NOTICE ---------- */
.notice{position:relative;z-index:2;padding-bottom:clamp(40px,5vw,60px);}
.notice-in{border:1px solid var(--line);border-left:3px solid var(--red);padding:24px 26px;background:rgba(6,24,38,.34);}
.notice .label{color:var(--red);}
.notice p{color:var(--dim);font-size:14.4px;line-height:1.66;margin-top:12px;max-width:96ch;}
.notice p + p{margin-top:10px;}

/* ---------- FOOT ---------- */
.foot{position:relative;z-index:2;margin-top:auto;border-top:1px solid var(--line);}
.foot-in{padding-top:22px;padding-bottom:30px;display:grid;gap:8px;color:var(--dimmer);font-size:13.2px;}
@media(min-width:820px){ .foot-in{grid-template-columns:1fr auto;align-items:center;} }
.foot a{color:var(--dim);text-decoration:underline;text-underline-offset:3px;}
.foot a:hover{color:var(--cool);}