/* KEK CLUB / base layout. Only CSS 2.1 properties; no modern layout dependency. */
html { margin: 0; padding: 0; }
body { margin: 0; padding: 0; color: #20221b; background: #e9e8df; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.5; }
a { color: #20221b; }
a:hover { color: #466511; }
a:focus, button:focus, input:focus, select:focus { outline: 2px solid #486316; }
img { border: 0; max-width: 100%; }
p { margin: 0 0 12px; }
h1, h2, h3 { margin: 0; font-weight: bold; line-height: 1.06; letter-spacing: -1px; }
h1 { font-size: 30px; margin-bottom: 16px; }
h2 { font-size: 22px; margin-bottom: 12px; }
button, input, select { font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
button { cursor: pointer; }
button:disabled { cursor: default; }
code { font-family: monospace; font-size: 12px; }
.clear { clear: both; height: 0; font-size: 0; line-height: 0; }
.right { float: right; }
.site { width: 232px; max-width: 100%; margin: 0 auto; background: #f8f7ef; }
.topline { background: #20221b; color: #f8f7ef; font-family: monospace; font-size: 9px; letter-spacing: 0; padding: 5px 8px; }
.topline-right { float: right; }
.masthead { padding: 9px 8px; border-bottom: 1px solid #20221b; }
.brand { float: left; text-decoration: none; font-size: 32px; line-height: 32px; font-weight: bold; letter-spacing: -2px; }
.brand-dot { color: #708527; }
.brand-note { float: left; font-size: 8px; line-height: 1.2; margin: 7px 0 0 8px; }
.header-tools { float: right; font-family: monospace; font-size: 10px; text-align: right; }
.header-tools a { display: block; line-height: 18px; }
.desktop-nav { display: none; }
.eyebrow { font-family: monospace; font-size: 10px; line-height: 1.45; letter-spacing: 0.2px; margin: 0 0 12px; }
.micro { font-size: 10px; line-height: 1.5; }
.small { font-size: 12px; line-height: 1.55; }
.lead { font-size: 14px; line-height: 1.55; }
.highlight { background: #d5ed62; padding: 0 3px; }
.button { display: block; padding: 11px 10px; border: 1px solid #20221b; background: #20221b; color: #f8f7ef; text-align: left; text-decoration: none; font-weight: bold; font-size: 13px; line-height: 1.4; }
.button:hover, .button:focus { background: #d5ed62; color: #20221b; }
button.button { width: 100%; }
.button.light { background: #f8f7ef; color: #20221b; }
.button.light:hover { background: #d5ed62; }
.arrow { float: right; }
.text-link { display: block; padding: 10px 0; font-weight: bold; text-decoration: underline; }
.home-hero { padding-top: 10px; }
.hero-art { border: 1px solid #20221b; background: #d5ed62; margin: 0 3px 20px; }
.art-top { font-family: monospace; font-size: 9px; line-height: 1.4; padding: 6px; border-bottom: 1px solid #20221b; }
.art-image { display: block; padding: 2px; }
.art-image img { display: block; width: 100%; height: auto; }
.art-caption { padding: 7px 6px; border-top: 1px solid #20221b; font-size: 10px; }
.hero-copy { padding: 0 9px 20px; }
.hero-copy h1 { font-size: 33px; line-height: 0.99; letter-spacing: -1px; }
.hero-copy .eyebrow { font-size: 9px; }
.hero-note { font-size: 12px; }
.status-dot { font-family: Arial, sans-serif; font-size: 14px; color: #52670f; }
.ticker { border-top: 1px solid #20221b; border-bottom: 1px solid #20221b; background: #d5ed62; padding: 10px 7px; font-family: monospace; font-size: 10px; text-align: center; }
.ticker span { padding: 0 1px; }
.section-head { padding: 24px 9px 10px; }
.section-head .right { float: none; display: block; font-family: monospace; font-size: 10px; margin-bottom: 6px; }
.section-head h2 { font-size: 20px; }
.teasers { padding: 0 8px 15px; }
.teaser { display: block; border: 1px solid #20221b; padding: 13px; margin-bottom: 10px; text-decoration: none; }
.teaser:hover { color: #20221b; border-color: #617b14; }
.teaser-meta, .teaser-bottom { display: block; font-family: monospace; font-size: 10px; }
.teaser-symbol { display: block; font-family: monospace; font-size: 30px; line-height: 1.3; margin: 16px 0; }
.teaser strong { display: block; font-size: 23px; line-height: 1.08; letter-spacing: -0.8px; margin-bottom: 10px; }
.teaser-text { display: block; margin: 0 0 18px; font-size: 13px; }
.teaser-bottom { border-top: 1px solid #20221b; padding-top: 10px; }
.t-gallery { background: #ded8ed; }
.t-arcade { background: #d5ed62; }
.t-club { background: #eddccb; }
.closing-note { padding: 20px 10px 28px; border-top: 1px solid #20221b; }
.closing-note p { font-size: 23px; line-height: 1.12; font-weight: bold; letter-spacing: -0.5px; }
.closing-note p.eyebrow { font-size: 9px; line-height: 1.5; font-weight: normal; letter-spacing: 0; }
.footer { padding: 16px 8px 0; background: #20221b; color: #f8f7ef; }
.footer .eyebrow { font-size: 9px; color: #d5ed62; }
.footer a { color: #f8f7ef; }
.footer-nav a { display: block; padding: 9px 0; border-bottom: 1px solid #68695f; text-decoration: none; }
.footer-nav .selected { color: #d5ed62; }
.nav-index { font-family: monospace; font-size: 10px; margin-right: 8px; color: #b2b3a6; }
.footer-bottom { padding: 24px 0 12px; }
.footer-brand { display: block; font-size: 42px; font-weight: bold; line-height: 1; letter-spacing: -2px; margin-bottom: 12px; }
.footer-bottom p { font-size: 12px; }
.footer-bottom .micro { font-size: 9px; color: #bfc0b4; }
.to-top { float: right; padding: 5px 0 10px 10px; font-size: 12px; }
.page-heading { padding: 24px 9px 10px; }
.page-heading .eyebrow { margin-bottom: 18px; }
.page-heading h1 { font-size: 29px; }
.page-heading .lead { font-size: 14px; }
.exhibit-row { padding: 8px; }
.museum-mat { background: #ded8ed; border: 1px solid #20221b; padding: 8px; text-align: center; }
.museum-mat .eyebrow { font-size: 9px; }
.museum-image { display: block; width: 100%; height: auto; }
.museum-mat .micro { margin: 12px 0 0; }
.exhibit-copy { padding: 22px 2px 0; }
.display-small { font-size: 32px; }
.facts { margin: 20px 0; }
.facts dt { font-size: 10px; color: #515348; padding-top: 10px; border-top: 1px solid #a4a697; }
.facts dd { margin: 0 0 10px; font-size: 13px; }
.quote-panel { margin: 16px 8px 24px; padding: 16px 10px; background: #d5ed62; border: 1px solid #20221b; }
blockquote { padding: 0; margin: 0; }
blockquote p { font-size: 22px; line-height: 1.2; letter-spacing: -0.6px; margin-bottom: 0; }
.page-turn { margin: 12px 8px; padding: 14px 0; border-top: 1px solid #20221b; font-size: 12px; }
.two-column { padding: 0 8px 16px; }
.game-panel { border: 1px solid #20221b; background: #ded8ed; padding: 5px; }
.panel-top { border-bottom: 1px solid #20221b; font-family: monospace; font-size: 10px; padding: 5px 1px 10px; margin-bottom: 8px; }
.game-score { font-family: monospace; font-size: 12px; margin: 10px 1px; }
.memory-board { width: 100%; table-layout: fixed; border-collapse: collapse; }
.memory-board td { padding: 2px; text-align: center; }
.memory-card { display: block; margin: 0 auto; width: 43px; height: 41px; padding: 0; border: 1px solid #20221b; border-bottom-width: 3px; background: #f8f7ef; color: #20221b; font-family: monospace; font-size: 22px; font-weight: bold; line-height: 1; }
.memory-card:hover { background: #e9e8df; }
.memory-card.open { background: #20221b; color: #f8f7ef; }
.memory-card.matched { background: #d5ed62; color: #20221b; border-bottom-width: 1px; }
.game-message { font-size: 12px; margin: 12px 2px; min-height: 38px; }
#game-controls .small { margin: 12px 2px 4px; }
#game-controls .micro { margin: 0 2px 6px; }
.js-only { display: none; }
.text-panel { padding: 20px 2px 10px; }
.text-panel h2 { font-size: 22px; }
.oracle { padding: 14px 10px; background: #d5ed62; border: 1px solid #20221b; margin-bottom: 18px; }
.oracle #fortune { font-size: 19px; line-height: 1.25; font-weight: bold; }
.notice { border: 1px solid #20221b; border-left: 5px solid #20221b; padding: 12px 10px; margin: 14px 0; background: #eddccb; font-size: 12px; }
.notice p { margin: 10px 0 0; }
.passport { background: #d5ed62; border: 1px solid #20221b; margin-bottom: 12px; }
.passport-top { padding: 9px 8px; border-bottom: 1px solid #20221b; font-family: monospace; font-size: 10px; }
.passport-inner { padding: 16px 10px; }
.passport-inner .eyebrow { font-size: 9px; }
.passport-star { font-family: monospace; font-size: 42px; line-height: 1.3; margin: 8px 0 16px; }
.passport-name { font-size: 24px; font-weight: bold; line-height: 1.15; letter-spacing: -0.5px; }
.passport-role { font-size: 12px; }
.passport-line { height: 1px; border-top: 1px dashed #20221b; margin: 20px 0 10px; }
.passport-id { font-family: monospace; font-size: 16px; letter-spacing: 2px; }
.passport-inner .micro { margin: 0; }
.form-panel { padding: 14px 0; }
.form-panel h2 { font-size: 22px; }
.form-row { margin: 18px 0; }
.form-row label { display: block; font-size: 12px; margin-bottom: 6px; }
.text-input { display: block; width: 186px; padding: 9px; border: 1px solid #20221b; background: #fffef9; color: #20221b; }
.form-row select { display: block; width: 206px; padding: 8px 3px; border: 1px solid #20221b; background: #fffef9; color: #20221b; }
.plain-button { padding: 5px 0; border: 0; background: transparent; color: #20221b; text-decoration: underline; text-align: left; font-size: 12px; }
.club-rules { padding: 24px 10px; background: #ded8ed; border-top: 1px solid #20221b; }
.club-rules h2 { font-size: 25px; }
.manifesto-layout { padding: 0 10px; }
.principle { padding: 20px 0 12px; border-top: 1px solid #20221b; }
.principle h2 { font-size: 25px; }
.principle .eyebrow { font-size: 9px; }
.mini-icon { background: #ded8ed; border: 1px solid #20221b; padding: 8px; }
.mini-icon img { width: 100%; height: auto; display: block; }
.mini-icon .eyebrow { margin-top: 14px; }
.index-card { background: #d5ed62; border: 1px solid #20221b; padding: 14px 10px; margin: 18px 0; }
.stack-line { font-size: 25px; font-weight: bold; line-height: 1.2; letter-spacing: -0.5px; }
.signature { padding: 26px 10px; }
.signature-brand { font-size: 31px; letter-spacing: -1px; font-weight: bold; }
.diagnostic { background: #ded8ed; border: 1px solid #20221b; padding: 14px 10px; }
.diagnostic h2 { font-size: 24px; }
.latin h1 { font-size: 27px; }
.latin .hero-copy h1 { font-size: 30px; }
.latin .eyebrow { font-size: 9px; }
.latin .art-top { font-size: 8px; }
.latin .art-caption { font-size: 9px; }
.latin .teaser strong { font-size: 21px; }
.latin .text-panel h2, .latin .principle h2 { font-size: 23px; }

/* Slightly smaller long Latin heading in the help page. */
.latin.dsi .page-heading h1 { font-size: 26px; }