@font-face {font-family: "JetBrains Mono";src: url("fonts/JetBrainsMono-Regular.woff2") format("woff2");font-weight: 400;font-style: normal;font-display: swap;}
@font-face {font-family: "JetBrains Mono";src: url("fonts/JetBrainsMono-Italic.woff2") format("woff2");font-weight: 400;font-style: italic;font-display: swap;}
@font-face {font-family: "JetBrains Mono";src: url("fonts/JetBrainsMono-Bold.woff2") format("woff2");font-weight: 700;font-style: normal;font-display: swap;}
*, *::before, *::after {margin: 0;padding: 0;box-sizing: border-box;}
html {scroll-behavior: smooth;}
body {background-color: #fff; color: #444; font-family:'helvetica neue', helvetica, Arial, sans-serif; font-weight: normal; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; font-variant-ligatures: normal;font-optical-sizing: auto; padding: 0 50px;}
img {max-width: 100%; border: 0;}
ol {margin: 70px 0 0 10px;}
p {font-size:.95rem;line-height: 1.5em; margin:0 0 20px 0; max-width: 680px; text-wrap: pretty; }
ul {margin:20px 0 20px 20px;}
li {font-size:.95rem; line-height: 1.5em; margin: 10px 0;}
h1,h2,h3,h4,h5 {color: #000;}
h1 {font-size: 2.2rem;text-transform: uppercase;  line-height: 1em; margin:0 0 20px 0; letter-spacing: -0.02em;}
h2 {font-size: 1.7rem; line-height: 1em; margin: 20px 0; letter-spacing: -0.01em;}
h3 {font-size: 1.5rem; margin: 10px 0; letter-spacing: -0.01em;  color:#444;}
h4 {font-size: 1.3rem; margin: 10px 0;color:#444;}
h5 {font-size: 1.1rem; margin: 10px 0;color:#444;}
b,th {color: #000;}
small {display: block; margin:20px 0;}
blockquote {font-family:"JetBrains Mono",monospace; font-size:1rem;line-height: 1.6em; margin:30px 0 10px 0; font-style: italic; text-wrap: pretty;}
blockquote cite {font-size: .85rem; line-height:1.3em; margin:10px 0 30px 0; display:block; font-weight:700; font-style:normal; text-transform:uppercase;}
cite {font-size: 1rem;}
a {color:#999;}
a:hover{color: #E20612;transition: all 0.25s ease-out;}
small {font-family:"JetBrains Mono",monospace;font-size: .85rem; word-spacing: -0.3em;}
nav {width: 100%; height: 90px;font-weight: bold; text-transform: uppercase; font-size: .9rem; position: fixed;background-color: #232323; z-index: 1; top:0; left: 0; padding: 35px 49px 0 49px;font-family:"JetBrains Mono",monospace; word-spacing: -.2em;}
nav div {float: right;}
nav .rd::before {content: "";display: inline-block;width: .75em;height: .75em;background: #E20612;border-radius: 50%;margin-right: 0.4em;position: relative;}
nav a, footer a {text-decoration: none; color: #fff; padding: 1px 5px 3px 5px;}
nav a:hover, footer a:hover {color: #E20612; }
main, section, header {width: 100%; margin: 170px auto 0 auto; position: relative; }
article {margin-bottom: 30px;}
article header {margin: 30px 0 50px 0;}
footer {width: 100vw; margin:150px -50px 0 -50px; padding:50px; background-color: #232323; color: #ccc;font-family:"JetBrains Mono",monospace;word-spacing: -.2em;}
footer .twocolumn div {text-align: right;}
button {font-size: 1rem; font-weight:500; padding: 10px 70px;border-radius: 6px;border: none;cursor: pointer; background-color: #000000; text-decoration: none; color: #fff; margin: 20px 0; display: inline-block;}
button:hover, .button:hover {background-color: #000;  color: #fff;}
select, input {font-size: 1rem; padding:5px;border-radius: 6px;border:1px solid #ddd; width: 350px; height:36px; display: block; margin-bottom: 10px;}
input[type="radio"] {height: 25px;}
fieldset {display: block; border: none; margin:20px 0;}
label,legend {display: inline-block; font-weight: 500; margin-bottom: 10px;}
legend {color: #000;}
textarea { width: 100%;  max-width: 600px;  height: 150px;resize: vertical;}
figcaption {font-family:'JetBrains Mono',ui-monospace; font-style:normal;display: block; font-size: 0.85rem; margin:5px 0; }
table {width: 100%;min-width: 600px;border-collapse: collapse;}
th, td {font-family:'JetBrains Mono',ui-monospace; font-style:normal; font-size: 0.85rem; text-align:left; vertical-align: top; padding:9px; border-bottom:1px dotted #ccc ; }
sup {font-size: 0.75em;vertical-align: super;line-height: 0;}
.hero {background:url(img/q-hero.jpg) no-repeat top center; background-size: cover; height: 700px; padding: 50px;}
.hero h1, .hero p {color: #fff;}
.image-toggle {cursor: pointer;padding: 2px 10px;}
.twocolumn {display: grid; grid-template-columns: repeat(2, 1fr);column-gap: 30px; margin: 70px auto;}
.threecolumn {display: grid; grid-template-columns: repeat(3, 1fr);column-gap: 30px; margin: 70px auto;}
.threecolumn small {margin-top: 0;}
.photostory {margin-top: 70px; max-width: 2500px;}
.photostory section {display:flex;align-items:first baseline;gap:30px;}
.photostory article {max-width: 670px; margin:70px auto;}
.red {color: #E20612;}
.core {background-color:#eee;}
.footnotes li {font-family: "Charter", Georgia, serif; text-wrap: auto;}
.footnotes li::marker {font-size: 0.9rem;}
.footnote-backref {text-decoration: none;margin-left: 0.25em;opacity: 0.6;}
.blk-back {margin:50px -50px -100px -50px;background-color: #000; padding: 100px 50px 100px 50px;}
.blk-back p {font-size: 1.7rem; font-weight: 500; line-height: 1.2em; color: #ddd; max-width: 800px;}
.blk-back h2 {color: #fff;  width: auto; }

@media (max-width:860px) {
  nav {position: relative; top:0;  font-size: .85rem; padding: 35px 5px 0 5px;}
  body {padding: 0;}
  main,header {padding: 0 10px;}
  main, section, header {margin: 50px auto;}
  header .meta {flex-direction: column;align-items: flex-start;}
  header time {margin-bottom: 10px;}
  header .coordinate {text-align: left;}
  footer {margin:150px -10px 0 -10px; padding:10px 20px;}
  footer .twocolumn {display: block;  grid-template-columns: none;  column-gap: 0;}
  footer .twocolumn div {text-align: left;}
  p,li {font-size:.9rem;}
  h1 {font-size: 1.7rem;}
  h2 {font-size: 1.3rem;}
  h3 {font-size: 1.1rem;}
  h4 {font-size: .9rem;}
  ol,ul {margin: 50px 10px 50px 20px;}
  th,td {font-size: .8rem; padding: 5px 5px 5px 0;}
  .table-wrap {max-width: 100%;overflow-x: auto;-webkit-overflow-scrolling: touch;}
  .twocolumn,.threecolumn {display: block;  grid-template-columns: none;  column-gap: 0;}
  .blk-back {margin:0 -10px; padding: 30px;}
  .blk-back p {font-size: 1.5rem;}
  .blk-back h2 {font-size: 1.5rem;}
  .hero {background:url(img/q-hero.jpg) no-repeat center center; background-size: cover; height: 400px; padding: 50px;}
}
@media (max-width:600px) {
.table-wrap  {mask-image: linear-gradient(to right, black 90%, transparent);}
nav {font-size: .8rem;}
}