/* Public character site: early-2000s database — laid out like a mid-2000s web-portal front page. */
:root {
  color-scheme: light;
  --page: #ffffff;
  --text: #1a1a1a;
  --muted: #666666;
  --link: #1a4fa0;
  --line: #cdc4ae;            /* tan box borders */
  --cream: #f7f3e8;
  --cream-2: #efe8d6;
  --tab: #f3eddd;
  --tab-2: #e6dcc3;
  --green-a: #e0f3b5;
  --green-b: #a9d45b;
  --green-line: #86a944;
  --up: #2a8a2a;
  --down: #cc2200;
  --logo: #1f8ad8;
}

* { box-sizing: border-box; }
html, body { background: var(--page); }
body { margin: 0; color: var(--text); font: 13px/1.4 Arial, Helvetica, sans-serif; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
.fake { cursor: default; }
.blank { color: var(--muted); font-style: italic; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.portal { max-width: 1000px; margin: 0 auto; padding: 0 10px 24px; }
.box { border: 1px solid var(--line); background: var(--page); }

/* Thin top bar */
.topbar { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 6px 2px; font-size: 11px; color: var(--link); }
.topbar a[aria-current] { color: var(--text); font-weight: bold; text-decoration: none; }

/* Masthead: logo + search */
.masthead {
  display: flex; gap: 20px; align-items: center; padding: 12px 14px;
  background: linear-gradient(var(--page), var(--cream) 40%, var(--cream-2));
}
.logo-area { flex: none; }
.logo { font: 900 34px/1 "Arial Black", Arial, Helvetica, sans-serif; color: var(--logo); letter-spacing: -1px; text-decoration: none; }
.logo:hover { text-decoration: none; }
.logo-tag { margin-left: 6px; color: #9a9a9a; font-size: 13px; }
.mast-buttons { display: flex; gap: 6px; margin-top: 10px; }
.mini-btn { display: inline-block; padding: 2px 8px; background: var(--page); border: 1px solid #9db4d4; color: var(--link); font-size: 12px; }
.search-area { flex: 1; min-width: 0; background: var(--page); border: 1px solid var(--line); padding: 6px 10px 8px; }
.search-tabs { display: flex; flex-wrap: wrap; font-size: 12px; color: var(--link); }
.search-tabs span + span::before { content: "|"; color: #bbb; margin: 0 7px; }
.search-tabs .on { color: var(--text); font-weight: bold; }
.search-row { display: flex; gap: 6px; margin-top: 6px; }
.search-box { flex: 1; min-width: 0; height: 24px; border: 1px solid #7f9db9; background: var(--page); }
input.search-box { padding: 2px 6px; font: 13px Arial, Helvetica, sans-serif; color: var(--text); }
input.search-box:focus { outline: 2px solid #9db4d4; outline-offset: 0; }
.search-btn {
  flex: none; padding: 3px 22px; font: bold 13px Arial, Helvetica, sans-serif; color: var(--text);
  background: linear-gradient(var(--green-a), var(--green-b)); border: 1px solid var(--green-line);
}
button.search-btn { cursor: pointer; }
button.search-btn:hover { background: linear-gradient(#ecf8cf, #b9dd73); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.search-foot { padding: 8px 0; }
.hot { margin-top: 5px; font-size: 10px; }

/* Three columns */
.columns { display: grid; grid-template-columns: 150px minmax(0, 1fr) 234px; gap: 10px; margin-top: 10px; align-items: start; }
.col-left, .col-mid, .col-right { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* Left: directory and lists */
.col-left .box { background: var(--cream); padding: 6px 8px 8px; }
.col-left h2 { font-size: 13px; padding-bottom: 3px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.directory li { display: flex; gap: 5px; align-items: center; padding: 2px 0; color: var(--link); font: bold 11px Arial, Helvetica, sans-serif; }
.directory .icon { width: 16px; text-align: center; font-size: 12px; }
.green-btn {
  display: block; margin-top: 8px; padding: 3px 4px; text-align: center; font: bold 11px Arial, Helvetica, sans-serif;
  background: linear-gradient(var(--green-a), var(--green-b)); border: 1px solid var(--green-line); cursor: default;
}
.side-list li { padding: 2px 0; color: var(--link); font: bold 11px Arial, Helvetica, sans-serif; }

/* Middle: featured survivor */
.featured { background: var(--cream); padding: 8px; }
.feature-body { display: flex; gap: 12px; align-items: flex-start; }
.feature-photo { flex: none; width: 190px; }
.feature-label { background: var(--tab-2); padding: 2px 6px; font: bold 11px Arial, Helvetica, sans-serif; }
.feature-img { display: block; width: 190px; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line); }
.feature-img.no-portrait { display: grid; place-items: center; background: var(--page); color: var(--line); font-size: 40px; font-weight: bold; }
.feature-text { min-width: 0; }
.feature-text h1 { font-size: 24px; line-height: 1.1; }
.feature-text h1 a { color: var(--text); }
.byline { margin: 3px 0 6px; color: var(--muted); font-size: 12px; }
.teaser { font-size: 12px; margin-top: 2px; }
.sub-head { margin-top: 8px; font: bold 12px Arial, Helvetica, sans-serif; }
.arrows li { font-size: 12px; padding: 1px 0; }
.arrows li::before { content: "· "; color: #999; }
.sheet-block { margin-top: 8px; }
.sheet-block h3 { font-size: 12px; padding-bottom: 2px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.sheet-block dl { margin: 0; display: grid; gap: 3px; font-size: 12px; }
.sheet-block dl > div { display: grid; grid-template-columns: minmax(90px, 140px) 1fr; gap: 6px; }
.sheet-block dt { font-weight: bold; }
.sheet-block dd { margin: 0; }
.sheet-block dd p + p { margin-top: .4em; }
.feature-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 8px; padding: 5px 6px; background: var(--page); border: 1px solid var(--line); font-size: 12px; font-weight: bold;
}
.feature-bar a { font-weight: normal; }
.pager { display: inline-flex; align-items: center; gap: 3px; font-weight: normal; }
.pg { display: inline-grid; place-items: center; width: 20px; height: 18px; font-size: 9px; color: var(--text); border: 1px solid var(--line); background: var(--page); text-decoration: none; }
.pg:hover { background: var(--cream); text-decoration: none; }

/* Tab boxes (journals, local info): radio buttons drive the panels */
.tabbox { position: relative; }
.tab-input { position: absolute; opacity: 0; pointer-events: none; }
.tabs { display: flex; gap: 3px; padding: 6px 6px 0; background: var(--page); border-bottom: 1px solid var(--line); }
.tabs label {
  flex: 1; text-align: center; padding: 4px 6px; margin-bottom: -1px; cursor: pointer; color: var(--link);
  background: linear-gradient(var(--tab), var(--tab-2)); border: 1px solid var(--line);
}
.tab-panel { display: none; padding: 8px 12px 10px; }
.tab-input:nth-of-type(1):checked ~ .p0, .tab-input:nth-of-type(2):checked ~ .p1,
.tab-input:nth-of-type(3):checked ~ .p2, .tab-input:nth-of-type(4):checked ~ .p3 { display: block; }
.tab-input:nth-of-type(1):checked ~ .tabs .t0, .tab-input:nth-of-type(2):checked ~ .tabs .t1,
.tab-input:nth-of-type(3):checked ~ .tabs .t2, .tab-input:nth-of-type(4):checked ~ .tabs .t3 {
  background: var(--page); border-bottom-color: var(--page); color: var(--text); font-weight: bold;
}
.tab-input:nth-of-type(1):focus-visible ~ .tabs .t0, .tab-input:nth-of-type(2):focus-visible ~ .tabs .t1,
.tab-input:nth-of-type(3):focus-visible ~ .tabs .t2, .tab-input:nth-of-type(4):focus-visible ~ .tabs .t3 { outline: 2px solid var(--link); outline-offset: -3px; }

.asof { color: var(--muted); font-size: 11px; margin-bottom: 6px; }
.headlines li { padding: 3px 0; font-size: 13px; }
.headlines li::before { content: "· "; color: #999; }
.headlines .hl { color: var(--link); }
.headlines .when, .entry .when { color: var(--muted); font-size: 11px; }
.headlines .ex { display: block; margin-left: 9px; color: #444; font-size: 12px; }
.who { font-size: 12px; }
.entry + .entry { margin-top: 10px; padding-top: 10px; border-top: 1px dotted var(--line); }
.entry h3 { font-size: 15px; }
.entry .when { margin: 1px 0 6px; }
.entry p + p { margin-top: .6em; }
.more { margin-top: 2px; padding: 4px 12px 8px; text-align: right; font: bold 11px Arial, Helvetica, sans-serif; color: var(--link); }

/* Small tables (gas prices) */
.mini { border-collapse: collapse; font-size: 12px; }
.mini th { text-align: left; font-weight: normal; color: var(--link); padding: 1px 8px 1px 0; border-bottom: 1px solid var(--line); }
.mini td { padding: 1px 8px 1px 0; }
.mini th.num, .mini td.num { padding-right: 0; padding-left: 10px; }
.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--muted); }
.sponsor { font-size: 11px; }
.sponsor-name { font: italic 900 15px "Arial Black", Arial, sans-serif; color: #6b2fa3; }
.search-row.small { margin-top: 4px; }
.search-row.small .search-box { height: 20px; }
.search-row.small .search-btn { padding: 1px 12px; }

/* All Survivors: one table per survivor, two side by side */
.list-head { font-size: 15px; padding: 2px 0; border-bottom: 2px solid var(--line); }
.list-head span { color: var(--muted); font-weight: normal; font-size: 13px; }
.survivor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.survivor { width: 100%; border-collapse: collapse; font-size: 11px; table-layout: fixed; }
.survivor th {
  text-align: left; padding: 4px 6px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: linear-gradient(var(--tab), var(--tab-2)); border-bottom: 1px solid var(--line);
}
.survivor th a { color: var(--text); }
.survivor .rec { float: right; margin-left: 6px; color: var(--muted); font-size: 10px; font-weight: normal; padding-top: 2px; }
.survivor td { padding: 3px 6px; border-bottom: 1px dotted var(--line); vertical-align: top; overflow-wrap: anywhere; }
.survivor tr:last-child td { border-bottom: 0; }
.survivor .photo { width: 66px; padding: 5px 6px; border-right: 1px solid var(--line); border-bottom: 0; }
.survivor-img { display: block; width: 54px; height: 54px; object-fit: cover; border: 1px solid var(--line); }
.survivor-img.no-portrait { display: grid; place-items: center; background: var(--cream); color: var(--line); font-size: 20px; font-weight: bold; }
.survivor .label { width: 74px; color: var(--muted); overflow-wrap: normal; }

/* Page buttons under the survivor list */
.page-buttons { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 0; border-top: 1px solid var(--line); }
.page-buttons .mini-btn.off { color: #aaa; border-color: #ddd; cursor: default; }
.page-nos { display: flex; gap: 2px; }
.page-no { min-width: 22px; padding: 2px 6px; text-align: center; border: 1px solid var(--line); background: var(--page); font-size: 12px; }
.page-no.on { background: var(--tab-2); color: var(--text); font-weight: bold; }
.page-of { margin-left: auto; color: var(--muted); font-size: 11px; }

/* Right: sign-in tiles, big ad, freebies, tabs */
.signin { background: var(--cream); }
.signin-head { display: flex; justify-content: space-between; padding: 4px 6px; font: bold 12px Arial, Helvetica, sans-serif; color: var(--link); }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 0 2px; }
.tile { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 1px; background: var(--page); border: 1px solid var(--line); color: var(--link); font: bold 10px Arial, Helvetica, sans-serif; cursor: default; overflow-wrap: anywhere; text-align: center; }
.tile-icon { font-size: 20px; line-height: 1.1; }
.signin-foot { padding: 4px 6px; text-align: center; font-size: 11px; color: var(--link); }

.big-ad-wrap { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.big-ad {
  width: 100%; min-height: 200px; display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 14px 12px; text-align: center; background: var(--ad-bg); color: var(--ad-ink);
  border: 3px solid rgba(0, 0, 0, .3); outline: 2px dashed rgba(0, 0, 0, .25); outline-offset: -10px;
}
.big-ad .ad-tag { font: bold 11px Arial, Helvetica, sans-serif; text-transform: uppercase; letter-spacing: .14em; opacity: .85; }
.big-ad .ad-brand { font: 900 25px/1 "Arial Black", Arial, Helvetica, sans-serif; text-transform: uppercase; }
.big-ad .ad-headline { font: bold 16px/1.15 Arial, Helvetica, sans-serif; }
.big-ad .ad-body { font-size: 12px; }
.big-ad .ad-foot { font-size: 10px; opacity: .8; text-transform: uppercase; letter-spacing: .1em; }
.big-ad.ad-image { padding: 0; min-height: 0; outline: 0; border-width: 1px; background: var(--page); }
.big-ad.ad-image img { display: block; width: 100%; height: auto; }
.ad-feedback { font-size: 11px; color: var(--link); }

.free-from { padding: 6px 10px 0; }
.free-from h2 { font-size: 14px; margin-bottom: 4px; }
.free-body { display: flex; gap: 10px; align-items: flex-start; }
.free-icon { flex: none; width: 44px; height: 44px; display: grid; place-items: center; font-size: 24px; background: #cfe8ec; border: 1px solid var(--line); }
.free-from li { color: var(--link); font-size: 12px; padding: 1px 0; }
.free-from li::before { content: "· "; color: #999; }
.free-from .more { padding: 4px 0 6px; }
.refi { font-size: 12px; }
.fake-link { color: var(--link); }
.plain li { padding: 2px 0; font-size: 12px; }
.local-tabs .tabs { gap: 2px; padding: 4px 4px 0; }
.local-tabs .tabs label { padding: 3px 2px; font-size: 11px; }
.local-tabs .tab-panel { padding: 6px 8px 8px; }
.small-head { font-weight: bold; margin-bottom: 4px; }

.portal-foot { margin-top: 16px; padding-top: 8px; border-top: 1px solid var(--line); text-align: center; color: var(--muted); font-size: 11px; }

/* Narrow screens: middle column first, then the right, then the left */
@media (max-width: 900px) {
  .columns { grid-template-columns: 1fr; }
  .col-mid { order: 1; }
  .col-right { order: 2; }
  .col-left { order: 3; }
  .masthead { flex-direction: column; align-items: stretch; }
}
@media (max-width: 560px) {
  .survivor-grid { grid-template-columns: 1fr; }
  .feature-body { flex-direction: column; }
  .feature-photo, .feature-img { width: 100%; }
  .sheet-block dl > div { grid-template-columns: 1fr; gap: 0; }
  .tabs label { padding: 4px 2px; font-size: 12px; }
}