@import url('https://fonts.googleapis.com/css2?family=Noto+Emoji:wght@300..700&family=Noto+Serif+JP:wght@200..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');
*, *::before, *::after { position: relative; box-sizing: border-box; }

@font-face {
  font-family: Constellation;
  src: url(assets/The\ Constellation.ttf);
}

:root {
  background: black url(assets/bg.jpg) repeat fixed;
  font: 16px 'Noto Serif', 'Noto Emoji', 'Noto Serif JP';
  color: #efefef;
  --accent: #AA8DD8;
}

body {
  width: min(95%, 80ch);
  margin: 70px auto 200px;
  padding: 15px;
  background: #000c;
}

div[ml="large"] {
  display: grid; 
  grid-template-columns: auto 1fr; 
  gap: 20px;

  & img { aspect-ratio: 1; width: 70px; border-radius: 100%; }
  & h3 { margin: 0; --afw-offset: -2px; }
  & p { margin: 0; &+p { margin-block-start: 10px; } }
  a[href^="."] + & { margin-block-start: 30px; }
}
div[ml="small"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15ch, 1fr));
  grid-auto-flow: row;
  gap: 20px;
  margin-block: 20px;

  & h3 { width: max-content; margin: 0; }
  & img { aspect-ratio: 1; border-radius: 100%; }
}
div[adm] {
  display: grid;
  grid-template-areas: 'img heading' 'img content';
  grid-template-columns: min-content auto;
  align-items: center;
  gap: 0 10px;
  margin-block: 30px;
  & img { max-width: 3.5em; grid-row: 1/-1; }
  & h3, p { margin: 0; }
}

a[fw], summary {
  display: flex; 
  gap: 20px;
  text-decoration: none;
  
  &::after {
    content: '';
    height: calc(.5lh + var(--afw-offset, 2px));
    border-bottom: 2px solid currentColor;
    flex-grow: 1;
  }
}
details {
  margin-block-start: 16px;
  &[open] summary { margin-block-end: 16px; }
}
a[href^="."] {
  text-decoration: none;
  &::before { content: '🙚 '; }
}

span[fa] { font: .8em Constellation; color: var(--accent); top: -1px; cursor: help; }

body[replist] {
  & table { 
    width: 100%; 
    @media (max-width: 705px) {
      &, tr, tbody, th, td { display: block; }
      & tr { margin-bottom: .5em; }
    }
  }
  & td:last-child { white-space: nowrap; text-align: right; }
  & span[new] { font-size: .8em; color: #777; top: -2px; }
}
body:not([replist]) {
  & table {
    text-align: left; 
    & tr { vertical-align: top; }
    & :is(td, th):not(:first-child) { padding-left: 10px; }
    a[href^="."] + & { margin-block-start: 10px; }

    @media (max-width: 735px) {
      &, tr, tbody, th, td { display: block; }
      & tr { margin-bottom: .5em; }
    }
  }
}

div[id^="fictive-approved-"] {
  scroll-margin-top: 10000px;
  padding-block: 30px 40px;
  margin-block-start: 40px !important;
  border-block: 2px solid var(--accent);

  &:not(:target) { display: none; }
  & h2 { margin-block-start: 0; }
  & div[ml] { margin-block-end: 0; }
}

h1 { 
  font: 2.5em Constellation; 
  margin-block: 0; 
  &+a { display: inline-block; margin-block-start: 10px; } 
}
h2 { 
  font: 2em Constellation; 
  margin-block: 40px 0; 

  &+p { margin-block-start: 5px; } 
  :not(p,table,[adm]) + & { margin-block-start: 60px; }
}
h3 { font: 1.5em Constellation; }
:is(h1,h2,h3) {
  &:has(> img) { display: flex; gap: .25lh; & img { height: 1lh; } }
  & a { 
    text-decoration: none; 
    &:has(> img) { display: flex; gap: .25lh; & img { height: 1lh; } }
  }
}

a { font-size: inherit; line-height: inherit; color: var(--accent); }
hr { margin-block: 30px; border-color: var(--accent); }
cite { display: block; text-align: right; margin-block-start: 10px; }
summary { color: var(--accent); cursor: pointer; }

:is(ul,ol) {
  & :is(ul,ol) { padding-inline-start: 20px; margin-block-start: var(--list-spacing, 5px); }
  & li:not(:first-child) { margin-block-start: var(--list-spacing, 5px); }
}