/*
Theme Name: AE Citizen
Description: AE, Star Citizen Org. Gritty but stylish, dirty but superior.
Version: 2.0.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: ae-citizen
*/
/* Gritty but stylish, dirty but superior. Everything is seen through one old pane of glass: the feed runs behind
   the page, scan lines, grain and lens dirt lie over the top of all of it. Capitals carry the page. One neon red,
   sodium amber only for the small print. The paint on the big type and the plates is knocked about, the words
   you have to read never are. Spacing steps 4 8 12 16 24 32 48 64 96. */
@font-face{font-family:"Big Shoulders";src:url(assets/fonts/big-shoulders-display-latin-900-normal.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Big Shoulders";src:url(assets/fonts/big-shoulders-display-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Barlow;src:url(assets/fonts/barlow-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Barlow;src:url(assets/fonts/barlow-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Share Tech Mono";src:url(assets/fonts/share-tech-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
:root{
  --coal:#07080a; --plate:rgba(11,12,14,.74); --plate2:rgba(7,8,10,.86);
  --bone:#ebe4d6; --ash:#a39d90; --rule:rgba(235,228,214,.17);
  --neon:#ff2a1f; --sodium:#e6a549; --g:16px; --max:1360px;
  --display:"Big Shoulders",Impact,"Arial Narrow",sans-serif;
  --mono:"Share Tech Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--coal);scroll-behavior:smooth;scroll-padding-top:64px}
body{background:var(--coal);color:var(--bone);font:400 18px/1.5 Barlow,"Helvetica Neue",Arial,sans-serif;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--neon);outline-offset:3px}

/* the feed */
.feed{position:fixed;inset:0;z-index:0;background:var(--coal) url(assets/video/poster.jpg) center/cover no-repeat}
.feed video{width:100%;height:100%;object-fit:cover;display:block}
.haze{position:fixed;inset:0;z-index:1;pointer-events:none;background:
  radial-gradient(70% 55% at 88% 6%,rgba(230,150,60,.20),transparent 70%),
  radial-gradient(60% 60% at 4% 96%,rgba(30,110,120,.24),transparent 72%),
  radial-gradient(120% 100% at 50% 45%,transparent 38%,rgba(0,0,0,.72) 100%),
  linear-gradient(90deg,rgba(7,8,10,.74),rgba(7,8,10,.22) 60%,rgba(7,8,10,.34)),linear-gradient(0deg,rgba(7,8,10,.66),transparent 46%)}

/* the old glass, over everything. Each layer stands alone at the top of the page: wrapped in one parent they
   would blend only with each other and lay a grey veil over the lot. */
.scan,.roll,.grain,.dirt,.flick{position:fixed;z-index:50;pointer-events:none}
.scan{inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.20) 0 1px,transparent 1px 3px)}
.roll{left:0;right:0;height:22vh;top:-22vh;background:linear-gradient(180deg,transparent,rgba(235,228,214,.03) 60%,rgba(235,228,214,.06) 96%,transparent);animation:roll 11s linear infinite}
.grain{inset:-120px;background:url(assets/img/grain.png);opacity:.22;mix-blend-mode:overlay;animation:grain .7s steps(6) infinite}
.dirt{inset:0;background:url(assets/img/dirt.webp) center/cover no-repeat;mix-blend-mode:screen;opacity:.55}
.flick{inset:0;background:#000;opacity:0;animation:flick 9s steps(1) infinite}
@keyframes roll{to{transform:translateY(144vh)}}
@keyframes grain{0%{transform:translate(0,0)}17%{transform:translate(-42px,31px)}34%{transform:translate(55px,-18px)}51%{transform:translate(-27px,-64px)}68%{transform:translate(71px,44px)}85%{transform:translate(-66px,12px)}}
@keyframes flick{0%,41%,43.2%,78%,78.8%,100%{opacity:0}42%{opacity:.09}78.4%{opacity:.05}}

/* every page sits above the feed and under the glass */
.site{position:relative;z-index:5}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--g);padding-right:var(--g)}
.lbl{font:400 13px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sodium);text-shadow:0 1px 6px #000,0 0 2px #000}

/* capitals, knocked about */
.caps{font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:.84;letter-spacing:-.005em}
.worn{-webkit-mask:url(assets/img/wear.png) center/1100px auto;mask:url(assets/img/wear.png) center/1100px auto}
.ab{text-shadow:2px 0 0 rgba(255,42,31,.30),-2px 0 0 rgba(70,190,205,.20),0 0 34px rgba(235,200,150,.14)}

/* top bar */
.top{position:sticky;top:0;z-index:20;background:linear-gradient(180deg,rgba(5,6,8,.98),rgba(5,6,8,.93));border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.mark{display:flex;align-items:center;gap:12px;text-decoration:none}
.mark img{width:38px;height:38px;display:block}
.mark b{font:900 30px/1 var(--display);letter-spacing:.02em}
.nav{display:flex;align-items:center;gap:24px;font:400 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.nav a{text-decoration:none;color:var(--ash)} .nav a:hover{color:var(--bone)}
.nav a.go{color:var(--neon)}

/* buttons: chamfered, a little chewed */
.acts{display:flex;flex-wrap:wrap;gap:12px}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 28px;font:700 21px/1 var(--display);letter-spacing:.09em;text-transform:uppercase;text-decoration:none;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));transition:filter .15s}
.btn.red{background:var(--neon);color:#0a0505;box-shadow:0 0 42px rgba(255,42,31,.45)}
.btn.red:hover{filter:brightness(1.14)}
.btn.line{background:rgba(235,228,214,.09);color:var(--bone)}
.btn.line:hover{background:rgba(235,228,214,.18)}

/* hero */
.hero{min-height:calc(100svh - 65px);display:flex;flex-direction:column;justify-content:flex-end;padding:48px 0 32px}
.hero .wrap{width:100%;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);align-items:end}
.left{grid-column:1/9}
.hero h1{font-size:clamp(190px,37vw,560px);margin-left:-.02em}
.hero h1 em{font-style:normal;color:var(--neon);text-shadow:0 0 18px rgba(255,42,31,.9),0 0 90px rgba(255,42,31,.55);animation:tube 7s steps(1) infinite}
@keyframes tube{0%,100%{opacity:1}61%{opacity:.5}61.6%{opacity:1}62.4%{opacity:.35}63%{opacity:1}}
.org{font-size:clamp(44px,8.2vw,124px);margin-top:12px;letter-spacing:.012em}
.lead{max-width:30em;margin:24px 0;font-size:clamp(18px,1.6vw,22px);font-weight:600;line-height:1.35}

/* the data plate */
.plate{grid-column:9/13;position:relative;padding:24px;isolation:isolate;margin-bottom:8px}
.plate::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--plate2);border:1px solid var(--rule);-webkit-mask:url(assets/img/wear.png) 20% 30%/1600px auto;mask:url(assets/img/wear.png) 20% 30%/1600px auto}
.plate .crest{width:112px;height:112px;display:block;margin-bottom:16px}
.plate dl{display:grid;gap:12px}
.plate dd{font:700 26px/1.05 var(--display);text-transform:uppercase;letter-spacing:.03em}
.plate .tick{position:absolute;top:24px;right:24px;font:400 12px/1.3 var(--mono);letter-spacing:.14em;text-align:right;color:var(--ash)}
.plate .tick b{display:block;font-weight:400;color:var(--neon)}

/* the motto, hung down the side like a sign */
.sign{position:fixed;right:10px;top:50%;z-index:6;white-space:nowrap;writing-mode:vertical-rl;transform:translateY(-50%);font:900 19px/1 var(--display);letter-spacing:.34em;text-transform:uppercase;color:var(--neon);text-shadow:0 0 12px rgba(255,42,31,.75);opacity:.8;pointer-events:none}

/* strip */
.strip{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--plate2)}
.strip .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:baseline;padding-top:16px;padding-bottom:16px}
.strip b{font:900 44px/1 var(--display);margin-right:12px}
.strip span{font:400 13px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}

/* sections */
section{padding:96px 0}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:48px}
.head h2{font-size:clamp(76px,14vw,210px)}

/* divisions */
.arms{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--g)}
.arm{position:relative;padding:24px;min-height:360px;display:flex;flex-direction:column;isolation:isolate}
.arm::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--plate);border:1px solid var(--rule);border-top:3px solid var(--bone);-webkit-mask:url(assets/img/wear.png) var(--o,0 0)/1600px auto;mask:url(assets/img/wear.png) var(--o,0 0)/1600px auto}
.arm:nth-child(2){--o:-300px -120px}.arm:nth-child(3){--o:-620px -260px}.arm:nth-child(4){--o:-140px -380px}
.arm .code{font:900 clamp(92px,9vw,136px)/.8 var(--display);color:transparent;-webkit-text-stroke:1.5px rgba(235,228,214,.62)}
.arm h3{margin-top:auto;font:900 34px/.95 var(--display);text-transform:uppercase;letter-spacing:.01em}
.arm p{margin-top:12px;color:#cfc8ba;font-size:17px;line-height:1.4}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:3px solid var(--bone);background:var(--plate)}
.step{padding:24px 24px 32px;border-right:1px solid var(--rule)}
.step:last-child{border-right:0}
.step .n{display:block;font:900 clamp(110px,12vw,180px)/.82 var(--display);color:var(--neon);text-shadow:0 0 40px rgba(255,42,31,.4)}
.step h3{margin-top:24px;font:900 38px/.95 var(--display);text-transform:uppercase}
.step p{margin-top:12px;max-width:26em;color:#cfc8ba;font-size:17px;line-height:1.4}

/* the code */
.code-band{padding:128px 0;background:linear-gradient(180deg,transparent,rgba(5,6,8,.72) 18%,rgba(5,6,8,.72) 82%,transparent)}
blockquote{font-size:clamp(58px,9.4vw,146px);line-height:.9;max-width:12.5em}
blockquote em{font-style:normal;color:var(--neon);text-shadow:0 0 44px rgba(255,42,31,.55)}
.sig{margin-top:32px;display:flex;align-items:center;gap:16px}
.sig img{width:72px;height:72px}

/* call */
.call{padding:96px 0 128px}
.call h2{font-size:clamp(100px,17vw,270px);margin-bottom:32px}
.call h2 span{color:var(--neon)}

/* footer */
footer{border-top:1px solid var(--rule);background:var(--plate2);padding:32px 0;font:400 12px/1.5 var(--mono);letter-spacing:.06em;color:var(--ash)}
footer .wrap{display:grid;gap:12px}
footer b{color:var(--bone);font-weight:400;letter-spacing:.14em}

@media (max-width:1040px){
  .left,.plate{grid-column:1/-1}
  .plate{margin-top:32px;display:grid;grid-template-columns:112px 1fr;gap:16px}
  .plate .crest{margin:0}.plate .tick{display:none}
  .arms{grid-template-columns:1fr 1fr}
  .arm{min-height:300px}
}
@media (max-width:720px){
  body{font-size:17px}
  .nav a:not(.go){display:none}
  section{padding:64px 0}.code-band{padding:80px 0}.call{padding:64px 0 96px}
  .hero{padding-top:32px}
  .arms,.steps{grid-template-columns:1fr}
  .arm{min-height:240px}
  .step{border-right:0;border-bottom:1px solid var(--rule)}
  .strip .wrap{grid-template-columns:1fr;gap:8px}
  .head{display:block}.head .lbl{display:block;margin-top:12px}
  .btn{width:100%}
  .sign{display:none}
  .dirt{background-size:220% auto;opacity:.42}
}
@media (max-height:560px){.sign{display:none}}
@media (prefers-reduced-motion:reduce){
  .roll,.grain,.flick,.hero h1 em{animation:none}
  html{scroll-behavior:auto}
}

/* a little of the page for anyone using the keyboard, and room for the dashboard bar */
.skip{position:absolute;left:-999px;top:8px;z-index:60;background:var(--neon);color:#0a0505;padding:8px 12px;font:700 18px/1 var(--display)}
.skip:focus{left:8px}
.admin-bar .top{top:32px}
@media (max-width:782px){.admin-bar .top{top:46px}}

/* pages, posts and the short pages: the same capitals, a readable plate */
.page-head{padding-top:64px;padding-bottom:24px}
.page-head .lbl{display:block;margin-bottom:16px}
.page-head h1{font:900 clamp(56px,10vw,150px)/.88 var(--display);text-transform:uppercase;text-wrap:balance}
.prose{max-width:72ch;margin-bottom:96px;padding:32px 24px;background:var(--plate2);border-top:3px solid var(--bone);font-size:18px;line-height:1.6}
.prose > * + *{margin-top:1.1em}
.prose h2{font:900 clamp(32px,4vw,48px)/1 var(--display);text-transform:uppercase;margin-top:1.6em}
.prose h3{font:700 28px/1.1 var(--display);text-transform:uppercase;margin-top:1.4em}
.prose a{color:var(--neon);text-underline-offset:3px}
.prose ul,.prose ol{padding-left:1.2em}
.prose img,.prose video{max-width:100%;height:auto}
.prose blockquote{border-left:2px solid var(--neon);padding-left:20px;font-weight:600}
.prose code{font:15px/1.5 var(--mono);background:rgba(235,228,214,.09);padding:2px 6px}
.list{margin-bottom:96px;background:var(--plate2);border-top:3px solid var(--bone);display:grid}
.list a{display:grid;grid-template-columns:160px 1fr;gap:16px;padding:20px 24px;border-bottom:1px solid var(--rule);text-decoration:none}
.list > p{padding:20px 24px}
.list a:hover h2{color:var(--neon)}
.list h2{font:700 28px/1.1 var(--display);text-transform:uppercase}
.lost{padding-top:96px;padding-bottom:128px}
.lost h1{font:900 clamp(64px,11vw,170px)/.86 var(--display);text-transform:uppercase;text-wrap:balance}
.lost p{margin:24px 0;max-width:40ch;font-size:20px;font-weight:600;line-height:1.35;text-shadow:0 1px 8px #000,0 0 2px #000}
@media (max-width:720px){.list a{grid-template-columns:1fr;gap:4px}}