/* takahashi v1.0 (Jan 01, 2008) - An open source template by Chad Woolley - http://thewoolleyweb.com. Free to use for any purpose as long as the proper credits are given to the original author. */

/* Adapted for livespec-ai.org: fixed minimum width removed, heading sizes
   scale with the viewport, prose and blog-article styles added, and grey
   tones adjusted to meet WCAG 2.2 AA contrast. Greyscale only. */

body {
background: #FFFFFF;
color: #303030;
font: 100% Verdana,Tahoma,Arial,sans-serif;
margin: 0;
padding: 0;
text-align: center;
}

a {
text-decoration: none;
}

/*** Main container ***/

#container {
width: 100%;
}

/*** Header section ***/

#header a {
color: #ffffff;
}

#header h1 {
background: #000000;
color: #ffffff;
font-style: italic;
font-size: clamp(2em, 8vw, 3.5em);
margin: 0;
padding: 10px;
}

/*** Content ***/

#content a {
color: #000000;
font-weight: bold;
text-decoration: none;
}

#content a:hover {
color: #404040;
text-decoration: underline;
}

#content {
background: #EAEAEA;
color: #000000;
font-weight: bold;
letter-spacing: 1px;
padding-bottom: 10px;
overflow-wrap: break-word;
}

#content h1 {
background-color: #C0C0C0;
font-size: clamp(1.6em, 6vw, 2.7em);
margin: 0px;
margin-bottom: 10px;
padding: 3px;
}

#content h2 {
font-size: clamp(1.2em, 4.5vw, 1.9em);
margin: 0px;
padding: 0 10px 4px;
}

/* One-line framing under a takahashi link heading. */
#content .caption {
font-weight: normal;
letter-spacing: normal;
margin: 0 auto 18px;
max-width: 70ch;
padding: 0 16px;
}

/* Blog index: each entry (title, date, summary) is one link. */
#content a.entry {
display: block;
padding: 4px 0;
}

#content a.entry .caption {
font-weight: bold;
}

#content a.entry:hover h2,
#content a.entry:hover .caption {
text-decoration: underline;
}

/*** Prose: left-justified, normal weight, readable measure ***/

#content .prose {
font-size: 1.05em;
font-weight: normal;
letter-spacing: normal;
line-height: 1.6;
margin: 0 auto;
max-width: 70ch;
padding: 0 16px 16px;
text-align: left;
}

#content .prose a {
text-decoration: underline;
}

#content .prose h2,
#content .prose h3 {
font-size: 1.3em;
padding: 0;
margin: 1.2em 0 0.4em;
}

#content .prose .notice {
border: 2px dashed #303030;
padding: 8px 12px;
}

/*** Article: blog entry title, byline, and body in one readable column ***/

#content .article {
background: #FFFFFF;
box-sizing: border-box;
font-weight: normal;
letter-spacing: normal;
margin: 0 auto 10px;
max-width: calc(70ch + 64px);
padding: 32px 32px 24px;
text-align: left;
}

#content .article header {
border-bottom: 1px solid #C0C0C0;
margin-bottom: 1.5em;
padding-bottom: 1em;
}

#content .article h1 {
background: none;
font-size: clamp(1.7em, 5vw, 2.4em);
letter-spacing: -0.01em;
line-height: 1.2;
margin: 0 0 0.4em;
padding: 0;
}

#content .article .byline {
color: #595959;
font-size: 0.9em;
margin: 0;
}

#content .article .byline a {
color: #303030;
}

#content .article .body {
font-size: 1.05em;
line-height: 1.7;
}

#content .article .body p,
#content .article .body ul,
#content .article .body blockquote {
margin: 0 0 1.1em;
}

#content .article .body h2 {
font-size: 1.35em;
line-height: 1.3;
margin: 1.6em 0 0.5em;
padding: 0;
}

#content .article .body a {
text-decoration: underline;
}

#content .article .body blockquote {
border-left: 4px solid #808080;
color: #303030;
font-style: italic;
padding: 0 0 0 1em;
}

#content .article .notice {
border: 2px dashed #303030;
padding: 8px 12px;
}

#content .article footer {
border-top: 1px solid #C0C0C0;
font-size: 0.95em;
padding-top: 1em;
}

@media (max-width: 480px) {
#content .article {
padding: 20px 16px 16px;
}
}

/*** Markdown elements in prose and article bodies (rendered by pandoc) ***/

#content .prose ol,
#content .article .body ol,
#content .article .body table,
#content .article .body pre {
margin: 0 0 1.1em;
}

#content .article .body h3 {
font-size: 1.15em;
line-height: 1.3;
margin: 1.4em 0 0.4em;
padding: 0;
}

#content .prose blockquote {
border-left: 4px solid #808080;
color: #303030;
font-style: italic;
margin: 0 0 1em;
padding: 0 0 0 1em;
}

#content .prose code,
#content .article .body code {
background: rgba(0, 0, 0, 0.07);
color: #202020;
font-family: Menlo, Consolas, monospace;
font-size: 0.9em;
padding: 0.1em 0.3em;
}

#content .prose pre,
#content .article .body pre {
background: rgba(0, 0, 0, 0.07);
color: #202020;
line-height: 1.45;
overflow-wrap: normal;
overflow-x: auto;
padding: 0.8em 1em;
white-space: pre;
}

#content .prose pre code,
#content .article .body pre code {
background: none;
font-size: 0.9em;
padding: 0;
}

#content .prose table,
#content .article .body table {
border-collapse: collapse;
display: block;
max-width: 100%;
overflow-x: auto;
}

#content .prose th,
#content .prose td,
#content .article .body th,
#content .article .body td {
border: 1px solid #808080;
padding: 0.3em 0.6em;
text-align: left;
vertical-align: top;
}

#content .prose th,
#content .article .body th {
background: rgba(0, 0, 0, 0.07);
font-weight: bold;
}

#content .prose hr,
#content .article .body hr {
border: 0;
border-top: 1px solid #808080;
margin: 1.5em 0;
}

#content .prose img,
#content .article .body img {
height: auto;
max-width: 100%;
}

/*** Footer ***/

#footer {
background: #FFFFFF;
color: #595959;
font-size: 1.0em;
font-weight: bold;
padding: 10px 16px;
}

#footer a {
color: #404040;
display: inline-block;
font-weight: bold;
margin: 4px 0.6em;
}

/*** End of file ***/