/* =====================================================================
   /wofl/  —  Yotsuba theme
   Faithful to 4chan's classic "Yotsuba" (peach) stylesheet as it looked
   in 2015. No webfonts, no radius, no shadows, no gradients other than
   the page-top fade 4chan itself paints.
   ===================================================================== */

:root {
  --page: #ffffee;          /* body background (cream) */
  --fade: #fed6af;          /* top-of-page fade */
  --reply: #f0e0d6;         /* reply post background */
  --reply-border: #d9bfb7;
  --reply-hl: #f0c0b0;      /* highlighted / (You) reply */
  --reply-hl-border: #d99f91;
  --text: #800000;          /* body text is MAROON on Yotsuba, not black */
  --title: #af0a0f;         /* board title red */
  --subject: #cc1105;
  --name: #117743;          /* "Anonymous" green */
  --quote: #789922;         /* greentext */
  --quotelink: #dd0000;
  --link: #0000ee;
  --link-hover: #dd0000;
  --hr: #d9bfb7;
  --form-cell: #eeaa88;     /* post form label cells (#ea8) */
  --summary: #707070;       /* "N replies omitted" grey */
  --side-arrow: #e0bfb7;
  --ban: #ff0000;
  --mod: #f00;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  padding: 0 0 40px;
  background-color: var(--page);
  background-image: linear-gradient(to bottom, var(--fade), var(--page));
  background-repeat: no-repeat;
  background-size: 100% 110px;
  color: var(--text);
  font-family: arial, helvetica, sans-serif;
  font-size: 10pt;
  line-height: 1.4;
}
a { color: var(--link); }
a:hover { color: var(--link-hover); }
img { max-width: 100%; height: auto; }
hr { border: 0; border-top: 1px solid var(--hr); margin: 8px 0; clear: both; }
code, kbd, .mono { font-family: "Courier New", courier, monospace; }
b, strong { font-weight: 700; }
input, button, textarea {
  font-family: arial, helvetica, sans-serif;
  font-size: 10pt;
  color: #000;
}

/* ---------- board list / top nav ---------- */
.boardList {
  font-size: 9pt;
  padding: 3px 4px 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2px 12px;
}
.boardList a { color: var(--text); text-decoration: none; }
.boardList a:hover { color: var(--link-hover); }
.boardList .current { font-weight: 700; }
.boardList .navLinks a { color: var(--text); }

/* ---------- board header ---------- */
.boardBanner { text-align: center; clear: both; margin-top: 20px; }
.boardBanner img.banner {
  width: 300px; height: 100px;
  border: 1px solid var(--hr);
  display: inline-block;
  image-rendering: auto;
}
.boardTitle {
  font-family: tahoma, geneva, verdana, sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -2px;
  color: var(--title);
  margin-top: 8px;
  line-height: 1.1;
}
.boardSubtitle { font-size: 8pt; color: var(--title); }

/* ---------- post form (repurposed as the buy box) ---------- */
.postForm {
  margin: 14px auto 0;
  border-collapse: collapse;
  font-size: 10pt;
  max-width: 720px;
  width: 100%;
}
.postForm td { padding: 0 0 1px; vertical-align: middle; }
.postForm td.label {
  background: var(--form-cell);
  color: var(--text);
  font-weight: 700;
  padding: 3px 6px;
  width: 92px;
  white-space: nowrap;
}
.postForm td.field { padding-left: 2px; }
.postForm input[type=text] {
  width: 100%;
  padding: 2px 3px;
  border: 1px solid #aaa;
  background: #fff;
  font-family: "Courier New", courier, monospace;
  font-size: 10pt;
  color: #000;
}
.postForm input[readonly] { background: #fff; }
.postForm .field-row { display: flex; gap: 4px; align-items: center; }
.postForm .field-row input { flex: 1; min-width: 0; }
.postForm .hint { font-size: 8pt; color: var(--summary); padding: 3px 2px 0; }
.postForm .buttons { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px 0 2px 2px; }

.btn {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid #767676;
  background: #efefef;
  color: #000;
  font-family: arial, helvetica, sans-serif;
  font-size: 10pt;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.3;
}
.btn:hover { background: #e5e5e5; color: #000; }
.btn.primary { font-weight: 700; }
.btn[aria-disabled="true"] { color: #888; cursor: not-allowed; }
.boardList a[aria-disabled="true"], .navLinks a[aria-disabled="true"], .footLinks a[aria-disabled="true"], .postMessage a[aria-disabled="true"] { color: var(--summary); cursor: not-allowed; text-decoration: none; }
.btn.copied { background: var(--reply-hl); }

/* ---------- hero (kept plain: Arial bold, board colours) ---------- */
.hero { text-align: center; padding: 26px 8px 4px; }
.hero .ticker {
  font-size: clamp(64px, 14vw, 128px);
  font-weight: 700;
  letter-spacing: -4px;
  line-height: 1;
  color: var(--title);
}
.hero .tagline {
  font-size: clamp(16px, 3.2vw, 26px);
  font-weight: 700;
  margin-top: 8px;
  color: var(--text);
}
.hero .ca-line {
  margin-top: 10px;
  font-family: "Courier New", courier, monospace;
  font-size: 12px;
  word-break: break-all;
}
.hero .ca-line .lbl { color: var(--name); font-weight: 700; font-family: arial, helvetica, sans-serif; font-size: 11px; }

/* ---------- thread / posts ---------- */
.board { max-width: 900px; margin: 0 auto; padding: 0 12px; }
.navLinks.bar { font-size: 9pt; padding: 4px 0; }
.navLinks.bar a { text-decoration: none; }
.thread { margin: 6px 0 14px; }
.postContainer { margin: 4px 0; }
.post { padding: 2px 0; }
.post.op { display: block; }
.post.reply {
  display: inline-block;
  background: var(--reply);
  border: 1px solid var(--reply-border);
  padding: 4px 24px 6px 6px;
  margin: 2px 0;
  max-width: 100%;
  vertical-align: top;
}
.post.reply.highlight { background: var(--reply-hl); border-color: var(--reply-hl-border); }
.post.reply.official { border-width: 1px; border-style: dashed; }
.sideArrows {
  color: var(--side-arrow);
  float: left;
  margin: 4px 3px 0 2px;
  user-select: none;
}
.postInfo { font-size: 10pt; margin: 0 0 2px; display: block; }
.postInfo .subject { color: var(--subject); font-weight: 700; }
.postInfo .name { color: var(--name); font-weight: 700; }
.postInfo .name.mod { color: var(--mod); }
.postInfo .capcode { color: var(--mod); font-weight: 700; }
.postInfo .dateTime { color: var(--text); }
.postInfo .postNum { color: var(--text); text-decoration: none; }
.postInfo .postNum:hover { color: var(--link-hover); }
.postInfo .you { color: var(--quotelink); font-size: 9pt; }
.postInfo .backlinks { font-size: 8pt; margin-left: 4px; }
.postInfo .backlinks a { color: var(--quotelink); }
.fileText { font-size: 9pt; margin: 2px 0; }
.fileText a { color: var(--link); }
.fileThumb { float: left; margin: 3px 20px 5px 0; }
.fileThumb img { display: block; border: 0; }
.fileThumb.sm img { max-width: 125px; max-height: 125px; }
.fileThumb.md img { max-width: 220px; max-height: 220px; }
.fileThumb.lg img { max-width: 300px; max-height: 300px; }
blockquote.postMessage { margin: 4px 0 0 40px; display: block; }
.post.reply blockquote.postMessage { margin-left: 8px; }
.postMessage p { margin: 0 0 8px; }
.postMessage p:last-child { margin-bottom: 0; }
.quote { color: var(--quote); }
.quotelink { color: var(--quotelink); text-decoration: underline; }
.quotelink:hover { color: var(--link-hover); }
.deadlink { color: var(--quotelink); text-decoration: line-through; }
.spoiler { background: #000; color: #000; }
.spoiler:hover { color: #fff; }
.clear { clear: both; }
.postContainer:after, .post.op:after { content: ""; display: table; clear: both; }

.summary { color: var(--summary); font-size: 9pt; margin: 4px 0 6px 0; }
.summary a { color: var(--summary); }
.threadDivider {
  text-align: center;
  font-family: "Courier New", courier, monospace;
  font-size: 9pt;
  color: var(--title);
  padding: 14px 0 4px;
  letter-spacing: 1px;
  clear: both;
}

/* ---------- sections (still inside the board) ---------- */
section.block { padding: 18px 0 8px; clear: both; }
.headline {
  font-size: clamp(24px, 4.6vw, 38px);
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.1;
  color: var(--text);
  margin: 0 0 12px;
}
.headline .sub { display: block; font-size: 10pt; letter-spacing: 0; color: var(--title); font-weight: 400; margin-top: 4px; }
.bigStatement {
  text-align: center;
  font-size: clamp(24px, 5vw, 46px);
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.12;
  padding: 22px 0 6px;
  color: var(--text);
}
.bigStatement .red { color: var(--title); }
.subStatement { text-align: center; font-weight: 700; color: var(--name); margin-top: 6px; }
.tinyQuote { text-align: center; font-family: "Courier New", courier, monospace; font-size: 9pt; color: var(--quote); margin-top: 18px; }
.sourceLine { font-size: 9pt; margin-top: 10px; font-family: "Courier New", courier, monospace; }

/* two column "era" grid rendered as two reply posts */
.eraGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
@media (max-width: 640px) { .eraGrid { grid-template-columns: 1fr; } }
.eraGrid .post.reply { display: block; padding-right: 10px; }
.eraGrid ul { margin: 4px 0 0; padding: 0; list-style: none; }
.eraGrid li { padding: 2px 0; }
.eraGrid li:before { content: "> "; color: var(--quote); }
.eraGrid .old .postInfo .subject { color: var(--summary); }

/* timeline */
.timeline { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; margin: 10px 0; }
.timeline .year {
  font-family: "Courier New", courier, monospace; font-weight: 700; font-size: 11pt;
  background: var(--reply); border: 1px solid var(--reply-border); padding: 1px 12px;
}
.timeline .event { padding: 3px 0; }
.timeline .event.quote { color: var(--quote); }
.timeline .arrow { color: var(--title); font-size: 18px; line-height: 1; }
.timeline .result { font-size: clamp(20px, 4vw, 30px); font-weight: 700; letter-spacing: -.5px; padding: 2px 0; }
.timeline .gap { font-family: "Courier New", courier, monospace; font-size: 9pt; color: var(--title); letter-spacing: 2px; padding: 14px 0; }

/* gallery = a row of file posts */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-top: 12px; }
.gallery .post.reply { display: block; padding: 4px 6px 6px; }
.gallery img { width: 100%; height: 170px; object-fit: contain; display: block; background: #fff; }
.gallery .fileText { margin-bottom: 3px; }
.gallery .caption { font-size: 9pt; margin-top: 4px; }

/* catalog */
.catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px 10px; margin: 12px 0; }
.catalog .cthread { text-align: center; }
.catalog .cthread a { text-decoration: none; color: var(--text); display: block; }
.catalog .cthread img { width: 150px; height: 150px; object-fit: contain; border: 1px solid var(--reply-border); background: #fff; margin: 0 auto; display: block; }
.catalog .cthread img.icon { object-fit: contain; padding: 18px; }
.catalog .meta { font-size: 8pt; color: var(--text); margin-top: 3px; }
.catalog .teaser { font-size: 9pt; margin-top: 2px; }
.catalog .teaser b { color: var(--subject); }
.catalog .cthread a:hover .teaser b { color: var(--link-hover); }

/* wide "content" post used for long doc text */
.post.reply.wide { display: block; padding-right: 10px; }
.post.reply.wide blockquote.postMessage { margin-left: 4px; }
table.plain { border-collapse: collapse; margin: 4px 0; font-size: 9pt; }
table.plain th, table.plain td { border: 1px solid var(--reply-border); padding: 3px 7px; text-align: left; vertical-align: top; }
table.plain th { background: var(--reply-hl); }
.swatch { display: inline-block; width: 12px; height: 12px; border: 1px solid #888; vertical-align: -2px; margin-right: 4px; }
kbd.key { border: 1px solid #999; background: #fff; padding: 0 4px; font-size: 9pt; }

/* footer */
footer {
  border-top: 1px solid var(--hr);
  margin-top: 26px;
  padding: 16px 12px 30px;
  text-align: center;
  font-size: 9pt;
}
footer .footLinks { margin: 6px 0; font-family: "Courier New", courier, monospace; }
footer .footLinks a { margin: 0 4px; }
footer .disclaimer { color: var(--summary); font-size: 8pt; margin-top: 8px; }

/* responsive */
@media (max-width: 560px) {
  .fileThumb { float: none; margin: 4px 0 8px; }
  blockquote.postMessage { margin-left: 4px; }
  .postForm td.label { width: 70px; font-size: 9pt; }
  .boardTitle { font-size: 24px; letter-spacing: -1px; }
  .hero .ticker { letter-spacing: -2px; }
}