/* tokens, locked off Doglas's own banner (kitchen wallpaper cream/tan, navy ink, bill-paper white) */
:root {
  --tile-bg: #ECE0BE;
  --tile-dot: #CBB989;
  --paper: #FFFDF3;
  --ink: #1a1a1a;
  --link: #0000EE;
  --link-visited: #551A8B;
  --heading: #16255E;
  --maroon: #7A1F1F;
  --grey: #808080;
  --grey-dark: #555555;
  --constr-yellow: #F2C230;
  --constr-black: #1a1a1a;
  --lcd-bg: #101a10;
  --lcd-fg: #58f06a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Times New Roman", Times, serif;
  color: var(--ink);
  font-size: 15px;
  background-color: var(--tile-bg);
  background-image:
    radial-gradient(var(--tile-dot) 1.4px, transparent 1.5px),
    radial-gradient(var(--tile-dot) 1.4px, transparent 1.5px);
  background-size: 18px 18px;
  background-position: 0 0, 9px 9px;
}

a {
  color: var(--link);
}
a:visited {
  color: var(--link-visited);
}
a { text-decoration: underline; }

hr.rule {
  border: none;
  border-top: 2px groove var(--grey);
  margin: 14px 0;
}

/* outer centered table layout */
table.page {
  width: 100%;
  border-collapse: collapse;
}
table.page > tr > td {
  text-align: center;
  padding: 22px 12px;
}

table.frame {
  table-layout: fixed;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  background: var(--paper);
  border: 3px outset #c7bfa0;
  text-align: left;
}

.titlebar {
  background: var(--heading);
  color: #fff;
  font-weight: bold;
  letter-spacing: 1px;
  padding: 6px 10px;
  border-bottom: 2px solid #0c1638;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.content-cell {
  padding: 16px 20px 22px;
}

/* marquee */
.marquee-wrap {
  overflow: hidden;
  white-space: nowrap;
  background: #fff6d6;
  border: 1px solid var(--grey);
  padding: 3px 0;
  margin-bottom: 10px;
}
.marquee-track {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 16s linear infinite;
  color: var(--maroon);
  font-weight: bold;
  font-size: 13px;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

.site-title {
  color: var(--heading);
  font-size: 30px;
  margin: 6px 0 2px;
  text-align: center;
}
.site-sub {
  text-align: center;
  color: var(--grey-dark);
  margin: 0 0 12px;
  font-style: italic;
}

table.topbar {
  border-collapse: collapse;
  margin-bottom: 10px;
}
table.topbar td {
  border: 1px solid var(--grey);
  vertical-align: middle;
}
.nav-cell {
  background: #f2ecd6;
  padding: 8px 10px;
  font-weight: bold;
}
.counter-cell {
  background: #f2ecd6;
  padding: 6px 10px;
  text-align: center;
  width: 220px;
}
.counter-label {
  font-size: 11px;
  color: var(--grey-dark);
}
.counter {
  font-family: "Courier New", Courier, monospace;
  background: var(--lcd-bg);
  color: var(--lcd-fg);
  letter-spacing: 3px;
  font-size: 18px;
  padding: 3px 6px;
  display: inline-block;
  border: 2px inset #444;
  margin-top: 2px;
}

.construction {
  background-image: repeating-linear-gradient(
    45deg,
    var(--constr-yellow) 0px, var(--constr-yellow) 16px,
    var(--constr-black) 16px, var(--constr-black) 32px
  );
  border: 2px solid var(--constr-black);
  padding: 6px 8px;
  text-align: center;
  margin-bottom: 10px;
}
.construction-text {
  background: var(--constr-black);
  color: var(--constr-yellow);
  font-weight: bold;
  padding: 3px 10px;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink {
  50% { opacity: 0.25; }
}

.section-head {
  color: var(--maroon);
  font-size: 20px;
  margin: 4px 0 6px;
  border-bottom: 1px solid var(--grey);
  padding-bottom: 2px;
}

table.section-table {
  border-collapse: collapse;
  margin-bottom: 4px;
}
table.section-table td {
  border: 1px solid var(--grey);
  background: #fffefa;
}
table.section-table p {
  margin: 0 0 10px;
  line-height: 1.5;
}
table.section-table p:last-child {
  margin-bottom: 0;
}

.bounce-note {
  color: var(--maroon);
  font-size: 13px;
  font-style: italic;
}

table.photos-table {
  border-collapse: collapse;
  margin: 4px auto 10px;
}
.photo-cell {
  padding: 10px;
  text-align: center;
  vertical-align: top;
}
.photo-cell img {
  border: 4px inset #b9b09a;
  padding: 3px;
  background: #fff;
  max-width: 100%;
  height: auto;
}
.photo-caption {
  font-size: 12px;
  font-style: italic;
  color: var(--grey-dark);
  margin-top: 4px;
}

table.details-table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 6px;
}
table.details-table td {
  border: 1px solid var(--grey);
}
.dt {
  background: #e4dcc0;
  font-weight: bold;
  width: 140px;
  vertical-align: top;
}
.dd {
  background: #fffefa;
}
.dd.mono {
  font-family: "Courier New", Courier, monospace;
}

.ca-copy {
  font-family: "Courier New", Courier, monospace;
  background: #efe9d5;
  border: 2px outset #c7bfa0;
  padding: 3px 6px;
  cursor: pointer;
  font-size: 13px;
}
.ca-copy:active {
  border-style: inset;
}
.copied-note {
  margin-left: 8px;
  font-size: 12px;
  color: var(--maroon);
}

.webbtn {
  display: inline-block;
  font-weight: bold;
  font-size: 12px;
  color: #fff !important;
  text-decoration: none;
  border: 2px outset #999;
  padding: 4px 9px;
  margin-right: 6px;
}
.webbtn:active { border-style: inset; }
.webbtn-navy { background: var(--heading); }
.webbtn-maroon { background: var(--maroon); }
.webbtn-green { background: #1f5c2e; }

.footer-note {
  text-align: center;
  font-size: 11px;
  color: var(--grey-dark);
  margin-top: 8px;
}

.sound-toggle {
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  background: #e8e0c4;
  color: var(--ink);
  border: 2px outset #c7bfa0;
  padding: 3px 8px;
  cursor: pointer;
  flex: none;
}
.sound-toggle:active { border-style: inset; }

@media (max-width: 640px) {
  table.topbar, table.topbar tr, table.topbar td { display: block; width: 100% !important; }
  table.photos-table, table.photos-table tr, .photo-cell { display: block; width: 100% !important; }
  .site-title { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; padding-left: 0; }
  .construction-text { animation: none; }
}

/* the contract has to be readable without scrolling: it sits in the header cell under
   the visitor counter, in the same 2004 register (owner, 2026-08-29) */
.ca-top { font-family: ui-monospace, "Courier New", monospace; font-size: 10px;
  line-height: 1.3; color: #202020; word-break: break-all; max-width: 190px;
  margin: 0 auto; text-align: center; }