/* assets/sitestyle.css
   Works in all browsers including text-mode (Lynx, w3m).
   No imports, no Google Fonts, no external dependencies.
   Edit this file to restyle the entire site.

   COLOR SCHEME
   ----------------------------------------------------------------
   Drawn from the piggy bank illustration:
   Background:   #faf6f0  warm cream/blush -- the illustration background
   Surface:      #f0ebe2  slightly deeper cream for cards and header
   Border:       #d8cfc0  warm tan border
   Text main:    #1a1a1a  near-black -- the illustration outlines
   Text muted:   #6a7a8a  muted blue-grey -- the trousers color
   Accent:       #c8920a  warm gold -- the coin color
   Accent dark:  #a07008  deeper gold for hover
   Link:         #c8920a  gold
   Link visited: #8a6005  darker gold
   OK/success:   #4a8a50  friendly green -- the piggy bank
   Warning:      #c87820  amber
   Error:        #c03028  slightly-more-red, not harsh
   ---------------------------------------------------------------- */

/* Page basics */
body {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    line-height: 1.6;
    color: #1a1a1a;
    background: #faf6f0;
    margin: 0;
    padding: 0;
}

/* Layout container */
.wrap {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 1.2em;
}

/* Header */
#siteheader {
    background: linear-gradient(to bottom, #f0ebe2, #e8e0d4);
    border-bottom: 1px solid #d8cfc0;
    padding: 0.8em 0;
    margin-bottom: 1.5em;
}
#siteheader .wrap {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5em;
}
#sitelogo {
    font-size: 1.4em;
    font-weight: bold;
    text-decoration: none;
    color: #c8920a;
}
#sitenav a {
    margin-left: 1.2em;
    color: #6a7a8a;
    text-decoration: none;
    font-size: 0.9em;
}
#sitenav a:hover { color: #1a1a1a; text-decoration: none; }

/* Main content */
#main { padding-bottom: 2em; }

h1 { font-size: 1.9em; margin: 0.5em 0 0.3em; color: #1a1a1a; }
h2 { font-size: 1.4em; margin: 1.4em 0 0.4em; border-bottom: 1px solid #d8cfc0; padding-bottom: 0.2em; color: #7a5a08; }
h3 { font-size: 1.1em; margin: 1em 0 0.3em; color: #9a7010; }
p  { margin: 0.6em 0; }
ul, ol { margin: 0.6em 0; padding-left: 1.5em; }
li { margin: 0.3em 0; }
a         { color: #c8920a; }
a:visited { color: #8a6005; }
a:hover   { color: #a07008; }

/* Placeholder notice boxes */
.placeholder {
    border: 2px dashed #d8cfc0;
    background: #f0ebe2;
    padding: 0.8em 1em;
    margin: 1em 0;
    font-size: 0.9em;
    color: #6a7a8a;
}
.placeholder strong { color: #c8920a; }

/* Info / notice boxes */
.notice {
    border-left: 4px solid #d8cfc0;
    background: #f0ebe2;
    padding: 0.6em 1em;
    margin: 1em 0;
    font-size: 0.9em;
    color: #6a7a8a;
}
.notice.ok    { border-color: #4a8a50; background: #edf5ee; color: #2a6030; }
.notice.warn  { border-color: #c87820; background: #fdf3e3; color: #7a4a08; }
.notice.error { border-color: #c03028; background: #fdecea; color: #8a1818; }

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.45em 1.1em;
    border: 1px solid #c8920a;
    background: transparent;
    color: #c8920a;
    text-decoration: none;
    font-size: 0.95em;
    cursor: pointer;
    font-family: Georgia, "Times New Roman", serif;
}
.btn:hover { background: #c8920a; color: #faf6f0; text-decoration: none; }
.btn.primary { background: #c8920a; color: #faf6f0; border-color: #c8920a; font-weight: bold; }
.btn.primary:hover { background: #a07008; border-color: #a07008; color: #faf6f0; }

/* Forms */
label { display: block; font-weight: bold; font-size: 0.9em; margin-top: 1em; margin-bottom: 0.2em; color: #3a3020; }
input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=url],
select,
textarea {
    width: 100%;
    max-width: 440px;
    padding: 0.4em 0.6em;
    border: 1px solid #d8cfc0;
    font-size: 1em;
    font-family: Georgia, "Times New Roman", serif;
    background: #ffffff;
    color: #1a1a1a;
    box-sizing: border-box;
}
textarea { height: 6em; }
.formrow { margin-bottom: 0.8em; }
.formerror { color: #c03028; font-size: 0.88em; margin-top: 0.2em; }
.formhint  { color: #6a7a8a; font-size: 0.85em; margin-top: 0.2em; display: block; }

/* Tables */
table { border-collapse: collapse; width: 100%; margin: 1em 0; font-size: 0.92em; }
th { text-align: left; background: linear-gradient(to bottom, #e8e0d4, #ddd5c8); color: #7a5a08; padding: 0.5em 0.7em; border-bottom: 2px solid #c8920a; }
td { padding: 0.45em 0.7em; border-bottom: 1px solid #e8e0d4; vertical-align: top; }
tr:nth-child(even) td { background: #f5f0e8; }

/* Stat boxes */
.statrow { margin: 1em 0; }
.statbox {
    display: inline-block;
    border: 1px solid #d8cfc0;
    background: linear-gradient(to bottom, #f5f0e8, #ede8de);
    padding: 0.6em 1.2em;
    margin: 0.3em 0.4em 0.3em 0;
    text-align: center;
    min-width: 120px;
    vertical-align: top;
}
.statnum   { font-size: 1.8em; font-weight: bold; color: #c8920a; }
.statlabel { font-size: 0.8em; color: #6a7a8a; }

/* Creator profile */
.profilehead { border-bottom: 1px solid #d8cfc0; padding-bottom: 1em; margin-bottom: 1em; }
.tiertable td:last-child { text-align: right; }

/* Footer */
#sitefooter {
    background: linear-gradient(to bottom, #ede8de, #e5dfd4);
    border-top: 1px solid #d8cfc0;
    padding: 1em 0;
    margin-top: 2em;
    font-size: 0.85em;
    color: #6a7a8a;
}
#sitefooter a { color: #8a7850; }
#sitefooter a:hover { color: #c8920a; }
#sitefooter .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5em; }

/* Print */
@media print {
    body { background: #fff; color: #000; }
    #siteheader, #sitefooter, .btn { display: none; }
}