/*
   CYNTWIX LOW-FIDELITY OVERRIDE
   Deliberately limited to the sort of layout and decoration common on
   personal sites before 2010: floats, inline-blocks, tiled images, square
   borders, system fonts and browser-looking controls.
*/

html {
  min-height: 100%;
  background: #000 !important;
}

* {
  box-sizing: content-box !important;
}

body {
  min-height: 100% !important;
  margin: 0 !important;
  padding: 18px 10px 35px !important;
  color: #e4d5aa !important;
  font-family: "Times New Roman", Times, serif !important;
  font-size: 17px !important;
  line-height: 1.35 !important;
  text-align: center !important;
  background-color: #000 !important;
  background-image: url("static.gif") !important;
  background-repeat: repeat !important;
}

body::before,
body::after,
.oracle-stage::before,
.oracle-stage::after,
.generator::before,
.portrait-relic::before,
.portrait-relic::after,
.transmission-frame::before,
.transmission-frame::after,
.video-thumb::before,
.video-thumb::after,
.crt-frame::before,
.crt-frame::after {
  content: none !important;
  display: none !important;
}

a:link { color: #e0b643 !important; }
a:visited { color: #b57b2a !important; }
a:hover { color: #fff1a3 !important; background: #421500 !important; }
a:active { color: #e14925 !important; }

img {
  max-width: 100% !important;
  border: 0 !important;
}

.page-shell,
.about-header,
.archive-header,
.writing-header,
.contact-header,
main,
footer {
  width: auto !important;
  max-width: 1020px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.site-header,
.about-header,
.archive-header,
.writing-header,
.contact-header {
  min-height: 0 !important;
  display: block !important;
  padding: 6px 3px 10px !important;
  border: 0 !important;
  border-bottom: 4px double #9a762e !important;
  background: #0c0701 !important;
  text-align: center !important;
}

.sigil {
  display: inline !important;
  width: auto !important;
  height: auto !important;
  margin-right: 25px !important;
  padding: 2px 6px !important;
  border: 2px ridge #d3a536 !important;
  color: #f4cf68 !important;
  background: #321006 !important;
  font: bold 20px "Times New Roman", Times, serif !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

nav {
  display: inline !important;
  text-align: center !important;
}

nav a,
.hero-links a,
.marginalia a,
.back,
.email-link,
.new-entry-link,
.entries-link {
  display: inline !important;
  min-height: 0 !important;
  margin: 0 7px !important;
  padding: 0 !important;
  border: 0 !important;
  color: #e0b643 !important;
  background: transparent !important;
  font: 15px "Courier New", Courier, monospace !important;
  text-decoration: underline !important;
  text-transform: none !important;
  box-shadow: none !important;
}

nav a:hover,
.hero-links a:hover,
.marginalia a:hover,
.back:hover,
.email-link:hover,
.new-entry-link:hover,
.entries-link:hover {
  color: #fff1a3 !important;
  background: #421500 !important;
  box-shadow: none !important;
}

main {
  padding: 26px 0 35px !important;
}

h1,
h2,
h3,
p,
figure {
  margin-top: 0;
}

h1,
h2 {
  color: #f0c557 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: normal !important;
  text-shadow: 2px 2px #641b0d !important;
}

h1:before,
h1:after,
h2:before,
h2:after {
  content: "~";
  margin: 0 8px;
  color: #a54221;
  font-size: 55%;
  vertical-align: middle;
}

h1:first-letter,
h2:first-letter,
.subhead:first-letter {
  color: #d49b32 !important;
}

.mark-title:before,
.mark-title:after { content: none !important; }

.kicker {
  color: #c78a2e !important;
  font: bold 12px "Courier New", Courier, monospace !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
}

.kicker:before { content: "[ "; color: #a54221; }
.kicker:after { content: " ]"; color: #a54221; }

footer {
  min-height: 0 !important;
  clear: both !important;
  display: block !important;
  padding: 10px 0 !important;
  border-top: 3px double #9a762e !important;
  color: #aa8a50 !important;
  background: #0c0701 !important;
  font: 11px "Courier New", Courier, monospace !important;
}

footer span { display: none !important; }
footer p { display: inline !important; margin: 0 7px !important; }
footer img {
  display: inline !important;
  width: 28px !important;
  height: 28px !important;
  vertical-align: middle !important;
}

/* home */
.hero {
  min-height: 0 !important;
  display: block !important;
  padding: 45px 12px 30px !important;
  text-align: left !important;
  overflow: hidden !important;
}

.hero-copy {
  display: block !important;
  float: left !important;
  width: 57% !important;
}

.mark-title {
  display: block !important;
  width: auto !important;
  min-height: 0 !important;
  margin: 8px 0 15px !important;
  padding: 6px !important;
  border: 5px ridge #b98b31 !important;
  background: #080500 !important;
  box-shadow: none !important;
}

.mark-title img {
  display: block !important;
  width: 100% !important;
}

.subhead {
  color: #e0d6b0 !important;
  font: italic 22px Georgia, "Times New Roman", serif !important;
  line-height: 1.25 !important;
}

.hero-links { display: block !important; margin-top: 20px !important; }
.hero-links a { margin-left: 0 !important; margin-right: 18px !important; }

.oracle-stage {
  position: relative !important;
  float: right !important;
  display: block !important;
  width: 34% !important;
  min-height: 0 !important;
  padding: 18px 0 !important;
  border: 3px double #b6842c !important;
  background: #190702 !important;
  text-align: center !important;
}

.halo { display: none !important; }
.oracle-eye {
  width: 72% !important;
}

.illumination-strip {
  clear: both !important;
  min-height: 0 !important;
  display: block !important;
  margin: 12px 0 30px !important;
  padding: 10px !important;
  border: 3px double #c48c27 !important;
  background: #1d0b01 !important;
}

.illumination-strip .torch { display: inline !important; }
.illumination-strip .torch img {
  display: inline !important;
  width: 65px !important;
  vertical-align: middle !important;
}

.illumination-strip p {
  display: inline-block !important;
  width: 68% !important;
  color: #edbd57 !important;
  font: italic 26px "Times New Roman", Times, serif !important;
  vertical-align: middle !important;
}

.gates {
  display: block !important;
  margin: 0 !important;
  padding: 18px 10px !important;
  border: 5px double #a77b2a !important;
  background: #110800 !important;
  text-align: left !important;
}

.gates h2 { font-size: 32px !important; }
.gate-grid { display: block !important; text-align: center !important; }
.gate {
  display: inline-block !important;
  width: 38% !important;
  min-height: 85px !important;
  margin: 8px !important;
  padding: 10px !important;
  border: 3px ridge #8f6b2d !important;
  background: #100904 !important;
  color: #e0b643 !important;
  text-align: left !important;
  text-decoration: underline !important;
  vertical-align: top !important;
  box-shadow: none !important;
}
.gate span { display: block !important; color: #b57624 !important; font: 11px monospace !important; }
.gate strong { display: block !important; margin-top: 8px !important; font-size: 25px !important; }
.gate em { display: block !important; color: #bbb !important; }

/* about + contact */
.about-hero,
.contact-hero {
  min-height: 0 !important;
  display: block !important;
  overflow: hidden !important;
  text-align: left !important;
}
.about-hero .copy,
.contact-copy {
  display: block !important;
  float: left !important;
  width: 50% !important;
}
.about-hero h1,
.contact-hero h1,
.archive-hero h1,
.generator h1,
.entries-hero h1 {
  margin: 8px 0 20px !important;
  font-size: 66px !important;
  line-height: 1 !important;
}
.identity-mark {
  width: auto !important;
  padding: 4px !important;
  border: 2px groove #887733 !important;
  background: #000 !important;
  box-shadow: none !important;
}
.portrait-relic,
.transmission-frame {
  float: right !important;
  display: block !important;
  width: 42% !important;
  padding: 5px !important;
  border: 4px ridge #a37b33 !important;
  background: #100904 !important;
  text-align: center !important;
}
.portrait-relic img,
.transmission-frame img {
  width: 100% !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.transmission-frame figcaption {
  color: #d2a139 !important;
  font: 11px "Courier New", monospace !important;
}
.ledger {
  clear: both !important;
  display: block !important;
  margin: 40px 0 16px !important;
  padding-top: 10px !important;
  border-top: 3px double #9c762d !important;
}
.ledger article {
  display: inline-block !important;
  width: 27% !important;
  min-height: 150px !important;
  margin: 3px !important;
  padding: 12px !important;
  border: 2px solid #8d6d35 !important;
  background: #100904 !important;
  text-align: left !important;
  vertical-align: top !important;
}
.ledger h2 { font-size: 26px !important; }
.ledger p { color: #bbb !important; font: 14px "Courier New", monospace !important; }
.marginalia {
  display: block !important;
  min-height: 0 !important;
  padding: 8px !important;
  border: 3px double #8c4b2b !important;
  background: #180703 !important;
  text-align: center !important;
}
.marginalia img { display: inline !important; width: 50px !important; vertical-align: middle !important; }
.marginalia p { display: inline !important; margin: 0 20px !important; font-size: 20px !important; }
.email-link { display: inline-block !important; margin: 15px 0 !important; font-weight: bold !important; }

/* video archive */
.archive-hero {
  display: block !important;
  margin: 0 0 25px !important;
  text-align: left !important;
}
.hover-panel {
  min-height: 0 !important;
  padding: 7px !important;
  border: 2px dotted #b6842c !important;
  color: #d2a139 !important;
  background: #170b01 !important;
  font: 13px "Courier New", monospace !important;
  box-shadow: none !important;
}
.grid { display: block !important; text-align: left !important; }
.video-thumb,
.crt-frame {
  position: relative !important;
  display: inline-block !important;
  width: 27.5% !important;
  min-height: 0 !important;
  margin: 10px 1% !important;
  padding: 10px !important;
  border: 3px ridge #9b7838 !important;
  background: #0d0803 !important;
  box-shadow: none !important;
  vertical-align: top !important;
  overflow: hidden !important;
}
.video-thumb:hover { border-color: #f1c95a !important; box-shadow: none !important; }
.video-thumb img,
.crt-frame iframe {
  display: block !important;
  width: 100% !important;
  border: 1px solid #555 !important;
}
.crt-frame iframe { height: 174px !important; }
.video-thumb span { color: #bbb !important; font: 12px "Courier New", monospace !important; }
.back { display: block !important; margin-top: 25px !important; }

/* word machine */
.generator {
  display: block !important;
  padding: 25px !important;
  border: 5px ridge #a7803a !important;
  background: #0c0702 !important;
  box-shadow: none !important;
  text-align: center !important;
}
.count-options { display: block !important; width: auto !important; margin: 12px 0 !important; }
button,
.count-option,
.go-button,
.submit-button,
.entry-button {
  display: inline-block !important;
  width: auto !important;
  min-height: 0 !important;
  margin: 3px !important;
  padding: 4px 10px !important;
  border: 2px outset #ddd !important;
  color: #000 !important;
  background: #c0c0c0 !important;
  font: 13px Arial, Helvetica, sans-serif !important;
  text-transform: none !important;
  box-shadow: none !important;
}
button:active { border-style: inset !important; }
.count-option.is-selected { color: #fff !important; background: #1e2a68 !important; }
.submit-button:disabled { color: #777 !important; background: #bbb !important; }
.selected-section { display: block !important; min-height: 90px !important; }
.word-list { display: block !important; min-height: 40px !important; }
.word-pill,
.entry-words span {
  display: inline-block !important;
  min-width: 0 !important;
  margin: 3px !important;
  padding: 3px 7px !important;
  border: 1px dotted #d5a336 !important;
  color: #e5b643 !important;
  background: #251000 !important;
  font: 13px "Courier New", monospace !important;
  box-shadow: none !important;
}
.word-pill.is-used { color: #160b00 !important; background: #e1b342 !important; }
.name-field { display: block !important; width: auto !important; margin: 12px auto !important; text-align: left !important; }
.name-field input,
textarea {
  width: 92% !important;
  padding: 5px !important;
  border: 2px inset #ccc !important;
  color: #edce79 !important;
  background: #090500 !important;
  box-shadow: none !important;
  font: 15px "Courier New", monospace !important;
}
textarea { min-height: 230px !important; }

/* entries */
.entries-hero { display: block !important; text-align: center !important; }
.entry-shell { display: block !important; overflow: hidden !important; text-align: left !important; }
.entry-list-panel {
  float: left !important;
  display: block !important;
  width: 27% !important;
  padding: 10px !important;
  border: 3px groove #957132 !important;
  background: #100904 !important;
  box-shadow: none !important;
}
.entry-list { display: block !important; }
.entry-button { display: block !important; width: 90% !important; text-align: left !important; }
.entry-button.is-active { color: #fff !important; background: #1e2a68 !important; }
.entry-detail {
  float: right !important;
  width: 64% !important;
  min-height: 320px !important;
  padding: 12px !important;
  border: 2px solid #8c6c32 !important;
  background: #090500 !important;
  box-shadow: none !important;
}

@media only screen and (max-width: 650px) {
  body { padding: 8px 5px 25px !important; font-size: 16px !important; }
  .sigil { display: block !important; width: 26px !important; margin: 0 auto 8px !important; }
  nav { display: block !important; line-height: 2 !important; }
  .hero-copy,
  .oracle-stage,
  .about-hero .copy,
  .contact-copy,
  .portrait-relic,
  .transmission-frame,
  .entry-list-panel,
  .entry-detail {
    float: none !important;
    width: auto !important;
    margin: 12px 0 !important;
  }
  .hero { padding-top: 25px !important; }
  .gate,
  .ledger article,
  .video-thumb,
  .crt-frame { display: block !important; width: auto !important; margin: 10px 0 !important; }
  .illumination-strip .torch img { width: 38px !important; }
  .illumination-strip p { width: 65% !important; font-size: 18px !important; }
  .about-hero h1,
  .contact-hero h1,
  .archive-hero h1,
  .generator h1,
  .entries-hero h1 { font-size: 46px !important; }
}