@import url(style.css);
@import url(https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* Typography */
h1, h2, h3, h4, h4.reference { font-weight: 400; }
.large, h1.title { font-weight: 700; }
.large { font-size: 1.25em; }
.small { font-size: .9em; }
.smallcap {
    font-variant: small-caps;
    font-size: 1.2em;
}

/* Layout */
body {
    margin: 0 5em;
    padding: 0;
    font-family: "Noto Serif", "Times New Roman", Georgia, serif;
    color: #333;
    background-color: #fff;
}

#content {
    max-width: 40em;
    margin: 1em auto;
    background: #FFF;
    padding: 1em 2.5em;
}

/* Headers */
#copyright, h1, h2, h3, h4 {
    text-align: center;
    font-family: "Noto Sans", Verdana, Arial, Helvetica, sans-serif;
    color: navy;
}

#copyright {font-size: 0.9em;}

h1.title {
    font-size: 1.5em;
    color: maroon;
}

h4.volume {
    text-align: left;
    color: #800040;
    margin: 0;
}

/* Text elements */
a { text-decoration: none; }

.title-note {
    font-weight: 400;
    font-size: .8em;
    color: navy;
}

.blue { color: #009; }
.green { color: green; }
.maroon { color: #800040; }
.red { color: red; }
.blue, .green, .maroon, .red { font-weight: bolder; }

/* Spacing and alignment */
.top { padding-top: .4em; }
.right { text-align: right; }
.left { text-align: left; }
.center { text-align: center; }

/* Special content blocks */
.poem {
    margin: 0 3em 0 9em;
    line-height: 1.45em;
}

.longpoem {
    margin: 0 2em 0 6em;
}

.prose {
    margin: 0 3em;
}

.poem-note {
    margin: 0 5em;
    font-size: .9em;
}

.prose-note, .smallquote {
    margin: 0 2em 0 1em;
    font-size: .9em;
}

.memorial, .preface {
    margin: 0 2em;
}

.hang {
    padding-left: 3em;
    text-indent: -3em;
}

.hang-quote {
    padding-left: 1em;
    text-indent: -.5em;
}

.indent, .smallquote {
    padding: 0 2em;
}

.page {
    border-top: 1px solid green;
    padding-top: 0.8em;
    text-align: right;
    font-size: 0.8em;
    color: green;
}

.toc { text-align: right; padding-right: 2em; }


.poetry-sq,
.prose-sq {
  display: inline-block;   /* Ensures margin/padding work reliably */
  font-size: 1em;        /* Smaller than text */
  vertical-align: middle;  /*Perfect alignment */
  margin-left: 0.5em;      /* Tighter space (1em might be too wide) */
  line-height: 1;          /* Prevents vertical drift */
  position: relative;
  top: -2px;               /* Adjust pixel-perfectly */
}

/* Your color scheme */
.poetry-sq { color: #d55fe1; }  /* Soft purple */
.prose-sq  { color: #39be35; }  /* Muted green */

/* Your chosen colors */
.poetry-sq { color: #d55fe1; }  /* Soft purple */
.prose-sq  { color: #39be35; }  /* Muted green */

/* Tables */
.tablecenter, table {
    margin: 0 auto;
}

td, th {
    padding: 0 .8em .25em;
    font-family: "Noto Sans";
    font-size: 1.1em;
    border: none;
}

td.item {
    font-family: "Noto Serif";
    text-align: left;
}

td.price {
    font-family: "Noto Serif";
    text-align: right;
    vertical-align: bottom;
}

td.woman, th.woman {
    font-family: "Noto Serif";
    font-size: .8em;
}

td.woman {
    text-align: left;
    vertical-align: top;
    padding-left: 1em;
    text-indent: -1.5em;
}

th.woman { text-align: center; }

/* Boxes and containers */
.BoxLeft, .TextBoxLeft, .TextBoxRight {
    margin: 0 1em;
    padding: 1em;
}

.BoxLeft, .TextBoxLeft { float: left; }
.TextBoxRight { float: right; }

.TextBoxLeft, .TextBoxRight {
    width: 14em;
    border-style: solid;
    border-width: thin;
    font-size: xx-small;
}

.BoxLeft { display: inline; }

/* Special elements */
#index, .memorial, hr.short { text-align: center; }
hr.short { width: 50%; }

.stage {
    margin: 0 0 -.75em 1em;
    font-style: italic;
    color: #800040;
}

.source {
    text-align: right;
    margin-top: 2em;
    color: navy;
}

.centre-divider, .scan, p.divider {
    text-align: center;
    font-weight: 700;
    color: navy;
    margin-top: 1.5em;
}

p.divider, .centre-divider { margin-left: 8em; }

/* Columns and flex */
.column2 {
    column-count: 2;
    column-width: 200px;
    column-fill: auto;
}

.flex-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: auto;
    width: 500px;
    flex-wrap: wrap;
}

.flex-container > div {
    margin: 0 10px;
    text-align: center;
    line-height: 75px;
    font-size: 1.2rem;
    font-family: "Noto Sans";
}

/* Search */
.search {
    width: 25em;
    height: 2em;
    border: 1px solid silver;
}

/* Lists (preserved as requested) */
ul.a { list-style-type: circle; }
ul.b { list-style-type: disc; }
ul.c { list-style-type: square; }
ol.d { list-style-type: armenian; }
ol.e { list-style-type: cjk-ideographic; }
ol.f { list-style-type: decimal; }
ol.g { list-style-type: decimal-leading-zero; }
ol.h { list-style-type: georgian; }
ol.i { list-style-type: hebrew; }
ol.j { list-style-type: hiragana; }
ol.k { list-style-type: hiragana-iroha; }
ol.l { list-style-type: katakana; }
ol.m { list-style-type: katakana-iroha; }
ol.n { list-style-type: lower-alpha; }
ol.o { list-style-type: lower-greek; }
ol.p { list-style-type: lower-latin; }
ol.q { list-style-type: lower-roman; }
ol.r { list-style-type: upper-alpha; }
ol.s { list-style-type: upper-latin; }
ol.t { list-style-type: upper-roman; }
ol.u { list-style-type: none; }
ol.v { list-style-type: inherit; }
ol p, ul p { margin-bottom: 0; }

li {
    margin: .75em 0;
}

/* Animations */
@keyframes highfade {
    0%, 100% { background-color: transparent; }
    20% { background-color: #ff0; }
}

a:target, ol#footnotes li:target, ol#footnotes2 li:target, sup a:target {
    animation: highfade 3s ease-in-out 1;
    border: 0;
    outline: 0;
}

/* Hover effects */
td a:hover {
    color: #66F;
    border-top: 2px solid #009;
    border-bottom: 2px solid #009;
    background-color: #fff;
}

.category, .vardill a:hover {
    color: #999;
    background-color: #fff;
}

.vardill a:hover {
    border-top: 1px solid #009;
    border-bottom: 1px solid #009;
}

.category {
    border-top: 2px solid #009;
    border-bottom: 2px solid #009;
}

/* Media queries */
@media (max-width: 800px) {
    .flex-container {
        flex-direction: column;
    }
}