/*
FABLE ARCADE content system
Palette: bg #08090d, bg-2 #101116, panel #14161d, panel-2 #191c24, text #f2f4f0, muted #aab0ad, soft #747c7b, line #ffffff1c, line-strong #ffffff2d, cyan #42f2e8, green #b7ff5a, pink #ff4fb8, amber #ffc857, violet #9b6cff.
Type scale: 12px, 14px, 16px, 18px, 22px, 30px, 42px, clamp(44px, 9vw, 88px).
Spacing scale: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 48px, 72px.
*/

:root{
  --fa-bg:#08090d;
  --fa-bg-2:#101116;
  --fa-panel:#14161d;
  --fa-panel-2:#191c24;
  --fa-text:#f2f4f0;
  --fa-muted:#aab0ad;
  --fa-soft:#747c7b;
  --fa-line:#ffffff1c;
  --fa-line-strong:#ffffff2d;
  --fa-cyan:#42f2e8;
  --fa-green:#b7ff5a;
  --fa-pink:#ff4fb8;
  --fa-amber:#ffc857;
  --fa-violet:#9b6cff;
  --fa-shell:min(1120px,calc(100% - 40px));
  --fa-measure:72ch;
  --fa-font:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color-scheme:dark;
}

.fa-header,
.fa-footer,
.fa-article,
.fa-grid{
  box-sizing:border-box;
  color:var(--fa-text);
  font-family:var(--fa-font);
  letter-spacing:0;
}

.fa-header *,
.fa-header *:before,
.fa-header *:after,
.fa-footer *,
.fa-footer *:before,
.fa-footer *:after,
.fa-article *,
.fa-article *:before,
.fa-article *:after,
.fa-grid *,
.fa-grid *:before,
.fa-grid *:after{
  box-sizing:border-box;
}

.fa-header{
  position:relative;
  z-index:10;
  min-height:72px;
  display:flex;
  align-items:center;
  gap:22px;
  width:100%;
  border-bottom:1px solid var(--fa-line);
  padding:0 max(20px,calc((100% - 1120px) / 2));
  background:
    linear-gradient(90deg,#ffffff08 1px,transparent 1px) 50% 0/72px 72px,
    linear-gradient(#ffffff06 1px,transparent 1px) 50% 0/72px 72px,
    #08090de6;
  backdrop-filter:blur(14px);
}

.fa-header:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--fa-cyan),var(--fa-green),var(--fa-pink),transparent);
  opacity:.55;
}

.fa-brand{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--fa-text);
  font-size:14px;
  font-weight:900;
  line-height:1;
  letter-spacing:.18em;
  text-decoration:none;
  text-transform:uppercase;
  white-space:nowrap;
}

.fa-brand:before{
  content:"";
  flex:0 0 auto;
  width:15px;
  height:15px;
  border:2px solid var(--fa-cyan);
  box-shadow:5px 5px 0 var(--fa-pink),0 0 22px #42f2e899;
  transform:rotate(45deg);
}

.fa-nav{
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:6px;
}

.fa-nav a,
.fa-footer nav a{
  min-height:36px;
  display:inline-flex;
  align-items:center;
  border:1px solid transparent;
  padding:7px 11px;
  color:var(--fa-muted);
  font-size:14px;
  font-weight:700;
  line-height:1.2;
  text-decoration:none;
}

.fa-nav a:hover,
.fa-nav a:focus-visible,
.fa-footer nav a:hover,
.fa-footer nav a:focus-visible{
  border-color:var(--fa-line-strong);
  color:var(--fa-text);
  background:#ffffff0a;
  outline:none;
}

.fa-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  width:100%;
  border-top:1px solid var(--fa-line);
  padding:24px max(20px,calc((100% - 1120px) / 2)) 42px;
  color:var(--fa-soft);
  background:
    linear-gradient(90deg,#ffffff06 1px,transparent 1px) 50% 0/72px 72px,
    var(--fa-bg);
  font-size:13px;
}

.fa-footer p{
  margin:0;
  color:#c7ccca;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.fa-footer nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:6px;
}

.fa-article{
  width:min(var(--fa-measure),calc(100% - 40px));
  margin:0 auto;
  padding:48px 0 72px;
  color:var(--fa-text);
  font:16px/1.65 var(--fa-font);
}

.fa-article:before{
  content:"FEATURED";
  display:inline-flex;
  margin-bottom:18px;
  border:1px solid #b7ff5a66;
  padding:6px 9px;
  color:var(--fa-green);
  background:#b7ff5a0d;
  font-size:12px;
  font-weight:900;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.fa-article h1,
.fa-article h2,
.fa-article h3,
.fa-article h4{
  margin:0;
  color:var(--fa-text);
  font-weight:950;
  line-height:1;
  letter-spacing:0;
  text-transform:uppercase;
}

.fa-article h1{
  max-width:12ch;
  margin-bottom:24px;
  font-size:clamp(2.75rem,9vw,5.5rem);
  line-height:.9;
}

.fa-article h2{
  margin-top:48px;
  margin-bottom:14px;
  border-top:1px solid var(--fa-line-strong);
  padding-top:24px;
  font-size:clamp(1.85rem,5vw,2.65rem);
}

.fa-article h3{
  margin-top:32px;
  margin-bottom:10px;
  color:#d9dfde;
  font-size:1.35rem;
}

.fa-article h4{
  margin-top:24px;
  margin-bottom:8px;
  color:var(--fa-amber);
  font-size:.88rem;
  letter-spacing:.13em;
}

.fa-article p,
.fa-article ul,
.fa-article ol,
.fa-article pre,
.fa-article blockquote,
.fa-article table,
.fa-article form{
  margin:0 0 20px;
}

.fa-article p,
.fa-article li{
  color:#d3d8d5;
}

.fa-article strong{
  color:var(--fa-text);
}

.fa-article a{
  color:var(--fa-cyan);
  font-weight:800;
  text-decoration-thickness:1px;
  text-decoration-color:#42f2e899;
  text-underline-offset:4px;
}

.fa-article a:hover,
.fa-article a:focus-visible{
  color:#8ffcf5;
  outline:2px solid var(--fa-cyan);
  outline-offset:3px;
  text-decoration-color:currentColor;
}

.fa-article ul,
.fa-article ol{
  padding-left:1.35rem;
}

.fa-article li + li{
  margin-top:8px;
}

.fa-article blockquote{
  border:1px solid var(--fa-line-strong);
  border-left:5px solid var(--fa-pink);
  padding:18px 20px;
  color:#d9dfde;
  background:
    radial-gradient(circle at 100% 0,#ff4fb81f,transparent 15rem),
    linear-gradient(135deg,#171a21,#101116);
  box-shadow:0 18px 50px #00000052;
}

.fa-article blockquote p:last-child{
  margin-bottom:0;
}

.fa-article code{
  border:1px solid #42f2e84d;
  padding:.12em .35em;
  color:#ebfffd;
  background:#42f2e812;
  font: .92em/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

.fa-article pre{
  overflow:auto;
  border:1px solid var(--fa-line-strong);
  padding:18px;
  color:#ebfffd;
  background:
    linear-gradient(#ffffff08 1px,transparent 1px) 0 0/100% 26px,
    #0b0c12;
  box-shadow:0 18px 50px #00000052;
}

.fa-article pre code{
  border:0;
  padding:0;
  background:transparent;
}

.fa-article hr{
  height:1px;
  margin:40px 0;
  border:0;
  background:linear-gradient(90deg,var(--fa-cyan),var(--fa-green),var(--fa-pink),transparent);
}

.fa-article img,
.fa-card img{
  max-width:100%;
  height:auto;
}

.fa-grid{
  width:min(1120px,calc(100% - 40px));
  margin:0 auto;
  padding:48px 0 72px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:18px;
  font:16px/1.5 var(--fa-font);
}

.fa-card{
  position:relative;
  isolation:isolate;
  min-height:260px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:14px;
  overflow:hidden;
  border:1px solid var(--fa-line-strong);
  padding:52px 22px 22px;
  color:inherit;
  text-decoration:none;
  background:
    linear-gradient(135deg,#ffffff10 0 1px,transparent 1px 14px) 0 0/14px 14px,
    radial-gradient(circle at 100% 0,#ffc8571f,transparent 18rem),
    linear-gradient(145deg,#181b22 0%,#111219 44%,#08090d 100%);
  box-shadow:0 24px 70px #00000080;
}

.fa-card:before{
  content:"FEATURED";
  position:absolute;
  top:16px;
  left:16px;
  z-index:1;
  border:1px solid #ffffff24;
  padding:6px 8px;
  color:#d9dfde;
  background:#08090db8;
  font-size:12px;
  font-weight:900;
  line-height:1;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.fa-card:after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:3px;
  background:linear-gradient(90deg,var(--fa-cyan),var(--fa-green),var(--fa-pink),var(--fa-violet));
}

.fa-card:hover,
.fa-card:focus-visible{
  border-color:#42f2e8a6;
  outline:none;
}

.fa-card h2,
.fa-card h3{
  margin:0;
  color:var(--fa-text);
  font-size:clamp(1.45rem,4vw,2rem);
  font-weight:950;
  line-height:1;
  letter-spacing:0;
  text-transform:uppercase;
}

.fa-card p{
  margin:0;
  color:#d3d8d5;
}

.fa-card a{
  color:var(--fa-cyan);
}

.fa-article form{
  border:1px solid var(--fa-line-strong);
  border-left:5px solid var(--fa-green);
  padding:24px;
  background:
    radial-gradient(circle at 100% 0,#42f2e81c,transparent 18rem),
    linear-gradient(135deg,#171a21,#101116);
  box-shadow:0 24px 70px #00000066;
}

.fa-article label{
  display:block;
  margin:0 0 8px;
  color:#d9dfde;
  font-size:12px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.fa-article input,
.fa-article textarea{
  width:100%;
  min-height:48px;
  border:1px solid var(--fa-line-strong);
  border-radius:0;
  margin:0 0 18px;
  padding:12px 14px;
  color:var(--fa-text);
  background:#08090dcc;
  font:16px/1.45 var(--fa-font);
}

.fa-article textarea{
  min-height:150px;
  resize:vertical;
}

.fa-article input::placeholder,
.fa-article textarea::placeholder{
  color:#909896;
}

.fa-article input:focus,
.fa-article textarea:focus{
  border-color:var(--fa-cyan);
  outline:2px solid #42f2e866;
  outline-offset:2px;
}

.fa-article input[type="checkbox"]{
  width:18px;
  min-height:18px;
  height:18px;
  margin:0;
  accent-color:var(--fa-green);
}

.fa-article .checkbox-row,
.fa-article label:has(input[type="checkbox"]){
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0 0 20px;
  color:#d3d8d5;
  font-size:14px;
  font-weight:700;
  letter-spacing:0;
  line-height:1.45;
  text-transform:none;
}

.fa-article button,
.fa-article input[type="submit"]{
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #b7ff5a99;
  border-radius:0;
  padding:12px 18px;
  color:#071007;
  background:var(--fa-green);
  box-shadow:0 0 30px #b7ff5a30;
  font:900 14px/1.2 var(--fa-font);
  text-decoration:none;
  text-transform:none;
  cursor:pointer;
}

.fa-article button:hover,
.fa-article button:focus-visible,
.fa-article input[type="submit"]:hover,
.fa-article input[type="submit"]:focus-visible{
  background:#d6ff9a;
  outline:2px solid #ffffff;
  outline-offset:3px;
}

@media (max-width:760px){
  :root{
    --fa-shell:min(100% - 28px,1120px);
  }

  .fa-header{
    min-height:auto;
    align-items:flex-start;
    flex-direction:column;
    gap:14px;
    padding:18px 14px;
  }

  .fa-nav{
    width:100%;
    margin-left:0;
    justify-content:flex-start;
  }

  .fa-nav a,
  .fa-footer nav a{
    padding-left:0;
    padding-right:10px;
  }

  .fa-footer{
    align-items:flex-start;
    flex-direction:column;
    padding:22px 14px 36px;
  }

  .fa-footer nav{
    justify-content:flex-start;
  }

  .fa-article,
  .fa-grid{
    width:min(100% - 28px,1120px);
    padding-top:36px;
    padding-bottom:56px;
  }

  .fa-article h1{
    max-width:100%;
    font-size:clamp(2.35rem,13vw,4.2rem);
  }

  .fa-article form{
    padding:20px 16px;
  }

  .fa-article button,
  .fa-article input[type="submit"]{
    width:100%;
  }
}

@media (prefers-reduced-motion:reduce){
  .fa-header *,
  .fa-header *:before,
  .fa-header *:after,
  .fa-footer *,
  .fa-footer *:before,
  .fa-footer *:after,
  .fa-article *,
  .fa-article *:before,
  .fa-article *:after,
  .fa-grid *,
  .fa-grid *:before,
  .fa-grid *:after{
    scroll-behavior:auto!important;
    transition-duration:.001ms!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
  }
}