/* 10 Million AD lore pages: shared style sheet, separate from the main studio site.
   Look: Concord architecture. Brushed steel, frosted glass, edge-lit light strips,
   chamfered corridor frames, deep red trim, thin wide-tracked capitals.
   Layout: emblem and title up top, then the history as a run of corridor panels. */

:root{
  color-scheme: dark;
  --bg:#1a222b;          /* blue steel, deep */
  --bg-high:#2d3944;     /* lit steel */
  --glass:rgba(206,222,238,.07);
  --glass-edge:rgba(222,234,246,.22);
  --fg:#eef3f7;
  --muted:#9cabb8;
  --light:#f6f9ff;       /* light-strip white */
  --trim:#8f2323;        /* corridor red */
  --face:"Saira","Eurostile","Microgramma","Arial",sans-serif;
}

*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;
  padding-inline:16px;
  padding-block:0 96px;
  color:var(--fg);
  font-family:var(--face);
  font-size:17px;
  line-height:1.7;
  background:
    radial-gradient(ellipse 70% 420px at 50% 0%, rgba(190,214,240,.20), transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 140px, rgba(220,232,245,.025) 140px 142px, transparent 142px 300px),
    linear-gradient(180deg, var(--bg-high) 0%, var(--bg) 520px);
  background-color:var(--bg);
}
a{color:var(--light)}
a:focus-visible{outline:1px solid var(--light);outline-offset:4px}

.page{max-width:780px;margin:0 auto}

/* tracked capitals, used for every label */
.caps{
  font-stretch:125%;
  font-weight:300;
  letter-spacing:.28em;
  text-transform:uppercase;
}

/* nav */
.nav{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;
  padding-block:22px;
  font-size:12px;
}
.nav .show{display:flex;align-items:center;gap:12px;color:var(--fg);text-decoration:none}
.nav .show svg{width:34px;height:auto}
.nav ul{display:flex;flex-wrap:wrap;gap:6px 26px;list-style:none;margin:0;padding:0}
.nav ul a{color:var(--muted);text-decoration:none}
.nav ul a:hover,.nav ul a[aria-current="page"]{color:var(--light);text-shadow:0 0 12px rgba(246,249,255,.6)}

/* header sign */
.sign{
  position:relative;
  margin-top:8px;
  padding:clamp(40px,8vw,72px) 20px clamp(36px,7vw,60px);
  text-align:center;
  background:linear-gradient(180deg,rgba(214,228,242,.10),rgba(214,228,242,.03));
  border:1px solid var(--glass-edge);
  clip-path:polygon(28px 0,calc(100% - 28px) 0,100% 28px,100% calc(100% - 28px),calc(100% - 28px) 100%,28px 100%,0 calc(100% - 28px),0 28px);
}
.sign::before{ /* overhead light strip */
  content:"";position:absolute;left:12%;right:12%;top:14px;height:2px;border-radius:2px;
  background:var(--light);box-shadow:0 0 14px 2px rgba(246,249,255,.55);
}
.emblem{width:min(340px,78%);height:auto;filter:drop-shadow(0 0 10px rgba(240,246,255,.45)) drop-shadow(0 0 30px rgba(190,214,240,.25))}
.alliance{margin:26px 0 10px;font-size:clamp(11px,2.2vw,15px);color:var(--fg)}
.concord{display:flex;align-items:center;justify-content:center;gap:18px;font-size:clamp(10px,1.9vw,13px);color:var(--muted)}
.concord::before,.concord::after{content:"";width:clamp(30px,10vw,90px);height:1px;background:var(--muted)}

.title{padding-block:52px 12px;text-align:center}
.title h1{
  margin:0 0 14px;
  font-stretch:112%;font-weight:400;
  font-size:clamp(28px,5.6vw,46px);line-height:1.1;letter-spacing:.01em;
  text-wrap:balance;
}
.title p{margin:0 auto;max-width:52ch;color:var(--muted)}

/* timeline chart */
.chart{
  margin-top:44px;position:relative;
  padding:26px 0 18px;
  background:var(--glass);border:1px solid var(--glass-edge);
  clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px);
}
.chart::before{content:"";position:absolute;left:30px;right:30px;top:9px;height:1px;background:var(--light);opacity:.75;box-shadow:0 0 8px rgba(246,249,255,.6)}
.chart h2{margin:0 26px 4px;font-size:12px;color:var(--muted);font-weight:300}
.chart .scroll{overflow-x:auto;padding:0 10px}
.chart svg{display:block;width:100%;min-width:720px;height:auto}
.chart text{font-family:var(--face);fill:var(--fg)}
.chart .lab{font-size:16px;font-weight:500}
.chart .sub{font-size:12px;fill:var(--muted);letter-spacing:.14em;text-transform:uppercase;font-stretch:125%;font-weight:300}
.chart .tick{font-size:13px;fill:var(--muted);font-variant-numeric:tabular-nums}
.chart .who{font-size:15px;font-weight:500}
.chart .key{margin:6px 26px 0;font-size:12px;color:var(--muted)}

/* dossier */
.dossier{
  margin-top:28px;position:relative;
  background:var(--glass);border:1px solid var(--glass-edge);
  clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px);
}
.dossier::before{content:"";position:absolute;left:30px;right:30px;top:9px;height:1px;background:var(--light);opacity:.75;box-shadow:0 0 8px rgba(246,249,255,.6)}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px 24px;padding:34px clamp(22px,5vw,40px) 24px;border-bottom:1px solid var(--glass-edge)}
.field{font-size:11px;color:var(--muted)}
.field b{display:block;margin-top:4px;font-weight:400;color:var(--fg);letter-spacing:.14em}
.field .status{color:var(--trim);filter:brightness(1.6)}
.records{list-style:none;margin:0;padding:0}
.record{display:grid;grid-template-columns:150px minmax(0,1fr);gap:6px 28px;padding:26px clamp(22px,5vw,40px);border-bottom:1px solid rgba(222,234,246,.10)}
.record:last-child{border-bottom:0}
.record .date{display:flex;align-items:flex-start;gap:12px;margin:4px 0 0;font-size:11px;color:var(--muted);line-height:1.5;font-variant-numeric:tabular-nums}
.record .date::before{content:"";width:18px;height:4px;margin-top:6px;background:var(--trim);flex:none}
.record h3{margin:0 0 8px;font-stretch:112%;font-weight:500;font-size:clamp(19px,3vw,23px);line-height:1.2;text-wrap:balance}
.record p{margin:0 0 10px;max-width:60ch}
.record p:last-child{margin-bottom:0}
.redact{display:inline-block;height:.95em;vertical-align:-.12em;background:#05080b;box-shadow:inset 0 0 0 1px rgba(222,234,246,.08)}
.tag{display:inline-block;margin-top:2px;padding:3px 9px;font-size:10px;color:var(--fg);background:var(--trim)}
.record.now h3{text-shadow:0 0 14px rgba(246,249,255,.35)}

@media (max-width:600px){
  .record{grid-template-columns:minmax(0,1fr)}
}
.foot{
  margin-top:56px;display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;
  font-size:11px;color:var(--muted);
}
.foot a{text-decoration:none}
.foot a:hover{text-shadow:0 0 12px rgba(246,249,255,.6)}

@media (max-width:560px){
  .nav ul{gap:6px 18px}
  .sign{clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px)}
}