@import url("../index.css");

@supports(--custom-property: true) {

article {
  --height-article-padding: 1.5em;
  flex-direction: column;
  align-items:    center;
  display:        flex;
  position:       relative; } article

>* {
  width: var(--width-measure); } article

kbd {
  white-space:   nowrap;
  font-weight:   bold;
  font-size:     1.15em;
  color: var(--color-meta); } article

/* Figure */
  figure {
    flex-direction: column;
    align-items:    center;
    font-weight:    bold;
    user-select:    none;
    display:        flex;
    width:          auto;
    overflow:       hidden;
    font-size:      var(--text-size-meta);
    max-width:      min(100vw, 640*var(--text-size));
    margin-bottom:  var(--height-article-padding); } article figure

  div {
    display:        flex;
    align-items:    center;
    flex-direction: column; } article figure

  img {
    height:         100%;
    pointer-events: none;
    background: var(--color-border); } article

  figcaption {
    margin-top: 0.4em;
    text-align: center;
    text-wrap:  balance;
    width:      var(--width-measure);
    color:      var(--color-meta); }  article

  figcaption a:not(:hover) {
    text-decoration: underline; } article

nav {
  height: calc(55*var(--text-size)); } article

p {
  text-wrap:     pretty;
  line-height:   1.67;
  margin-bottom: var(--height-article-padding); } article

:is(p, table, li) a {
    text-decoration: underline; } article

a:is(:hover, :focus) {
  color: var(--color-active); } article

a:not(:focus):hover {
  text-decoration-color: transparent; } article

/* List */
  ul {
    padding-left:  1.5em;
    margin-bottom: var(--height-padding); } article

  li { 
    text-wrap:      pretty;
    position:       relative;
    padding-bottom: 0.75em;
    padding-right:  3em; } article
    
  li::marker {
      content: none; } article

  li:before {
    left:        -1.5em;
    content:     "\2013\2002\20";
    position:     absolute;
    text-shadow: -0.2em 0 0.4em var(--color-dim);
    color:        var(--color-dim); } article

hr {
  margin-top:    var(--height-descender);
  margin-bottom: var(--height-article-padding);
  border-image:  var(--gradient-dark-mid);
  border-top:    var(--border-transparent); } article

/* Blockquote */
  blockquote { 
    font-style:    italic;
    padding-left:  1.5em;
    border-image:  linear-gradient(to bottom, transparent, var(--color-dim), transparent) 1;
    margin-bottom: var(--height-article-padding);
    border-left:   var(--border-transparent);
    color:         var(--color-meta); } article blockquote

  p:last-of-type {
    margin-bottom: 0; }  article blockquote

  a:is(:hover, :focus) {
    color: var(--color-text); } article blockquote

  em { 
    font-style: normal; } article 

/* Table */
  :is(th, td) {
    height:      2rem;
    padding:     0.25rem 3rem 0.25rem 0;
    text-align:  left;
    white-space: nowrap;
    box-shadow:  inset 0 1.85rem var(--color-bg);
    background:  var(--color-border); } article

  th {
    font-weight: bold;
    font-size:   var(--text-size-meta);
    color:       var(--color-meta); } article

  :is(th, td):last-child {
    background: linear-gradient(to right, var(--color-border), var(--color-bg));
    width: 100%; } article

/* Article Header */
  :is(h2, h3, h4, h5, h6) {
    font-size:      1.2em;
    padding-bottom: 0.4em;
    font-weight:    bold; } article

/* Tombstone */
  >p:last-child:after { 
    font-family:    var(--font-icon);
    color:          var(--color-meta);
    content:        "\e410";
    padding:        0 0.2em;
    font-size:      calc(14 * var(--text-size));
    vertical-align: -0.125em; } article

.overscroll { 
  margin-bottom:  var(--height-padding);
  padding-bottom: var(--height-padding);
  overflow-x:     auto; }

/* Interview */
.interview :is(em, strong) {
  color: var(--color-active-light); }

.interview em a:is(:hover, :focus) {
  color: var(--color-text); }

@media (scripting: none) { 
  article nav {
    height: var(--height-padding); } }}

}