html, body {
margin: 0;
padding: 0;
background: #efefef;
font-family: 'Lora', serif;
color: #222;
}
.outer {
display: flex;
justify-content: center;
width: 100%;
}
.page {
/* let the page shrink and center, don’t always fill the parent */
max-width: 860px;
width: auto;
background: #ffffff;
padding: 80px 90px;
box-sizing: border-box;
/* horizontal auto margins will centre the block */
margin: 80px auto;
box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}
/* Typography */
p {
margin: 0;
text-indent: 1.4em;
line-height: 1.7;
font-size: 18px;
}
h1, h2, h3, h4 {
font-weight: 600;
line-height: 1.25;
margin-top: 2.5rem;
margin-bottom: 1rem;
}
h1 { font-size: 2.2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.25rem; }
h1 + p,
h2 + p,
h3 + p {
text-indent: 0;
}
/* Video */
figure {
margin: 2.5rem 0 1rem 0;
}
video {
width: 100%;
display: block;
border-radius: 8px;
}
figcaption {
font-size: 0.85rem;
line-height: 1.4;
color: #666;
margin-top: 0.6rem;
}
/* Slightly smaller captions for video figures */
.video-figure figcaption {
font-size: 0.8rem;
}
/* References styling */
#references p {
text-indent: -1.2em;
margin-left: 1.2em;
font-size: 0.95rem;
}
/* Citation links */
.citation {
text-decoration: none;
border-bottom: 1px solid #aaa;
color: inherit;
}
/* Mobile */
@media (max-width: 768px) {
.outer {
display: block;
}
.page {
/* keep content centred even on small screens */
margin: 0 auto;
padding: 24px;
box-shadow: none;
}
p {
text-indent: 0;
}
}
/* --- Styles moved from inline in index.html --- */
/* These rules were previously in the page head; keeping them here for the article page. */
html {
line-height: 1.5;
font-family: Georgia, serif;
font-size: 20px;
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
/* let the external stylesheet handle spacing and width */
margin: 0 auto;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
.motion-class {
display: inline; /* keep inline so text flow & justification remain unchanged */
position: relative;
}
@keyframes settle-shake {
0% { transform: translateX(-2.5px); opacity: 1; filter: blur(2px); }
15% { transform: translateX(2.5px); opacity: 0.95; filter: blur(1.5px); }
30% { transform: translateX(-2.5px); opacity: 0.8; filter: blur(1px); }
50% { transform: translateX(2px); opacity: 0.6; filter: blur(0.6px); }
70% { transform: translateX(-0.5px); opacity: 0.3; filter: blur(0.25px); }
90% { transform: translateX(0.1px); opacity: 0.12; filter: blur(0.08px); }
100% { transform: translateX(0); opacity: 0; filter: blur(0); }
}
/* animate a pseudo-element copy so original text stays in flow and line spacing/justification doesn't change */
.motion-class::after {
content: attr(data-motion);
position: absolute;
left: 0;
top: 0;
white-space: pre;
font: inherit;
color: inherit;
pointer-events: none;
visibility: hidden;
transform-origin: left center;
display: inline-block;
will-change: transform, opacity, filter;
z-index: 2;
}
/* keep original text visible; animate an overlay copy above it */
.motion-class.animate-after::after {
visibility: visible;
animation: settle-shake 1s ease-out forwards;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 1em;
}
h1 {
font-size: 1.8em;
}
}
@media print {
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p { margin: 1em 0; }
a { color: #1a1a1a; }
a:visited { color: #1a1a1a; }
img { max-width: 100%; }
h1, h2, h3, h4, h5, h6 { margin-top: 1.4em; }
h5, h6 { font-size: 1em; font-style: italic; }
h6 { font-weight: normal; }
ol, ul { padding-left: 1.7em; margin-top: 1em; }
li > ol, li > ul { margin-top: 0; }
blockquote { margin: 1em 0 1em 1.7em; padding-left: 1em; border-left: 2px solid #e6e6e6; color: #606060; }
code { font-family: Menlo, Monaco, 'Lucida Console', Consolas, monospace; font-size: 85%; margin: 0; }
pre { margin: 1em 0; overflow: auto; }
pre code { padding: 0; overflow: visible; overflow-wrap: normal; }
.sourceCode { background-color: transparent; overflow: visible; }
hr { background-color: #1a1a1a; border: none; height: 1px; margin: 1em 0; }
table { margin: 1em 0; border-collapse: collapse; width: 100%; overflow-x: auto; display: block; font-variant-numeric: lining-nums tabular-nums; }
table caption { margin-bottom: 0.75em; }
tbody { margin-top: 0.5em; border-top: 1px solid #1a1a1a; border-bottom: 1px solid #1a1a1a; }
th { border-top: 1px solid #1a1a1a; padding: 0.25em 0.5em 0.25em 0.5em; }
td { padding: 0.125em 0.5em 0.25em 0.5em; }
header { margin-bottom: 4em; text-align: center; }
#TOC li { list-style: none; }
#TOC ul { padding-left: 1.3em; }
#TOC > ul { padding-left: 0; }
#TOC a:not(:hover) { text-decoration: none; }
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
span.underline{text-decoration: underline;}
div.column{display: inline-block; vertical-align: top; width: 50%;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
/* Top framed header for journal info (moved from head) */
.top-frame {
border: 1px solid #e3e3e3;
background: #fbfbfb;
padding: 0.45em 0.9em;
margin: 1em 0 0.5em 0;
font-size: 0.95em;
display: flex;
align-items: center;
justify-content: center; /* center children horizontally */
gap: 0.6em;
border-radius: 4px;
color: #1a1a1a;
text-align: center; /* fallback for older UA */
}
.top-frame a { color: #1a1a1a; text-decoration: none; font-weight: 600; }
.top-frame a:hover { text-decoration: underline; }
.top-frame .doi { margin-left: 0; font-size: 0.86em; color: #666; font-weight: normal; }
/* Small centered note placed just below the top-frame */
.top-frame-note {
font-size: 0.82em;
color: #666;
text-align: center;
padding: 0.25em 0.9em 0.6em 0.9em; /* modest padding beneath the frame */
margin-top: 0.15em;
line-height: 1.1;
}
/* --- End moved styles --- */