/* Cascadia palette — all site colors live here */
:root {
  --color-primary:    #405b38;  /* old-growth Douglas fir — headers, nav */
  --color-secondary:  #498c3f;  /* lighter forest green — h4 */
  --color-bg:         #6b5540;  /* brown tweed — page background */
  --color-link:       #406B38;  /* forest green — unvisited links */
  --color-visited:    #993300;  /* cedar brown — visited links */
  --color-hover:      #ff0000;  /* red — link hover */
  --color-content-bg: #f0fff0;  /* pale mint — main content area */
  --color-text:       #111111;  /* near-black — body text */
  --color-border:     #000000;  /* black — frame borders */
  --color-brick:      #8B1A1A;  /* brick red — PGP key block */
  --color-pgp-text:   #f0e0d0;  /* warm cream — PGP key text */
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary:    #5a7850;  /* lightened fir green — readable on dark */
    --color-secondary:  #6aac5f;  /* lightened forest green */
    --color-bg:         #1a1410;  /* dark brown tweed background */
    --color-link:       #7dc070;  /* light green — links on dark bg */
    --color-visited:    #cc6633;  /* lighter cedar — visited on dark bg */
    --color-content-bg: #1a221a;  /* dark green-tinted content area */
    --color-text:       #d4d4b8;  /* warm off-white — body text */
    --color-border:     #555555;
  }
}

/* Main page styles */
p {
  text-align: left;
}
h3 {
  font-size:150%;
  color: var(--color-primary);
}
h4 {
  font-size:120%;
  color: var(--color-secondary);
}
h5 {
  font-size:110%;
  color: var(--color-primary);
}
body {
  color: var(--color-text);
  background-color: var(--color-bg);
  background-image:
    repeating-linear-gradient( 45deg,
      transparent 0, transparent 3px,
      rgba(255,255,255,.04) 3px, rgba(255,255,255,.04) 4px),
    repeating-linear-gradient(-45deg,
      transparent 0, transparent 3px,
      rgba(0,0,0,.05) 3px, rgba(0,0,0,.05) 4px),
    repeating-linear-gradient( 90deg,
      transparent 0, transparent 11px,
      rgba(0,0,0,.03) 11px, rgba(0,0,0,.03) 12px);
  background-size: 8px 8px, 8px 8px, 24px 24px;
  background-attachment: fixed;
  font-family: Verdana,sans-serif;
}
#cap {
  font-size:50px;
  color: var(--color-primary);
  font-weight:bold;
  float:left;
  height:34px;
  line-height:34px;
  margin-top:2px;
  margin-right:1px;
}
* html #cap {margin-right:-2px; margin-top:3px;}
a:link {
  color: var(--color-link);
  text-decoration:underline;
}
a:active {
  color: var(--color-link);
  text-decoration:underline;
}
a:visited {
  color: var(--color-visited);
  text-decoration:underline;
}
a:hover {
  color: var(--color-hover);
  text-decoration:none;
}
.plain-text {
  text-decotation:none;
}
.solid-frame {
  border:5px solid var(--color-border);
  border-collapse: collapse;
  margin:1em;
}
.dashed-frame {
  border:5px dashed var(--color-border);
  border-collapse: collapse;
  margin:1em;
}
.dotted-frame {
  border:5px dotted var(--color-border);
  border-collapse: collapse;
  margin:1em;
}
.invisible {
  border:none;
  border-collapse: collapse;
  padding:0px;
  margin:0px;
}
.frame-picture {
  padding:0px;
  margin:0px;
}
.frame-text {
  padding:5px;
}
.nav-cell {
  padding:0px;
  margin:0px;
  background-color: var(--color-primary);
  text-decoration:none;
  //border-top: 1px solid var(--color-secondary);
  background:url("/scott/images/tabrightC.gif");
  border-bottom: 4px solid var(--color-border);
}
.bottom-cell {
  padding:0px;
  margin:0px;
  background-color: var(--color-primary);
  background:url("/scott/images/tabrightC.gif");
  border-top: 2px solid var(--color-border);
  border-bottom: 0px;
}
.main-page {
  padding:1em;
  background-color: var(--color-content-bg);
  border: 0px;
}
/* Old navigation style */
.nav-here {
  color:#111111;
  font-variant:small-caps;
  font-weight:bold;
  font-size:14px;
  text-decoration:none;
  letter-spacing:6px;
}
.nav-other {
  color:#333333;
  font-size:14px;
  text-decoration:none;
  letter-spacing:6px;
}
.nav-line {
  color: var(--color-border);
  letter-spacing:6px;
}
/* Info page — photo floats right, text wraps around it */
.info-photo {
  float: right;
  margin: 0 0 1em 1.5em;
}

/* Contact page */
.contact-list dt { font-weight: bold; margin-top: 0.5em; }
.contact-list dd { margin-left: 1em; margin-bottom: 0.25em; }
.signal-info { display: flex; gap: 1em; align-items: flex-start; margin-top: 1em; }
.pgp-key {
  background-color: var(--color-brick);
  color: var(--color-pgp-text);
  font-family: monospace;
  font-size: 0.8em;
  text-align: left;
  white-space: pre;
  overflow-x: auto;
  padding: 0.75em;
  margin: 0;
  border: none;
}

/* Location page map grid */
.map-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  justify-content: center;
  margin-top: 1em;
}
.map-grid iframe {
  flex: 1 1 400px;
  max-width: 500px;
  height: 300px;
  border: 0;
}

/* Page chrome frame (replaces outer layout table) */
.page-frame {
  width: 95%;
  margin: 1em auto;
  border: 5px solid var(--color-border);
}

/* Section header banner (replaces per-section GIF images).
   Section/sub text is auto-derived from the URL by the SSI wrapper. */
.header-banner {
  background-color: var(--color-primary);
  position: relative;
  padding: 0.45em 1em;
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  overflow: hidden;
}
.header-banner::after {
  content: '';
  position: absolute;
  right: -2em;
  top: -2em;
  width: 8em;
  height: 8em;
  background: var(--color-secondary);
  border-radius: 50%;
  pointer-events: none;
}
.header-banner-section {
  font-family: 'Trebuchet MS', Verdana, sans-serif;
  font-style: italic;
  font-weight: normal;
  font-size: 2em;
  color: #fff;
  position: relative;
}
.header-banner-sub {
  font-family: 'Trebuchet MS', Verdana, sans-serif;
  font-style: italic;
  font-weight: normal;
  font-size: 1em;
  color: rgba(255, 255, 255, 0.85);
  position: relative;
}

/* Global responsive helpers */
img { max-width: 100%; height: auto; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Splash page */
.splash-tagline {
  text-align: center;
  color: rgba(255,255,255,0.75);
  font-size: 0.95em;
  font-style: italic;
  margin: 0.5em 0 0;
  letter-spacing: 0.04em;
}

/* Card grid */
.splash-grid {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 520px;
  gap: 1em;
  padding: 1.25em 0 2em;
  margin: 0 auto;
}
.splash-card {
  display: block;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #2e4d24 0%, var(--color-primary) 60%, #1a3018 100%);
  border: 2px solid rgba(0,0,0,0.5);
  border-left: 5px solid var(--color-secondary);
  border-radius: 5px;
  padding: 1.6em 1.2em 1.6em 1.4em;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  transition: border-left-color 0.15s, transform 0.12s, box-shadow 0.12s;
}
.splash-card::before {
  content: attr(data-initial);
  position: absolute;
  right: -0.05em;
  bottom: -0.2em;
  font-size: 8em;
  font-weight: bold;
  font-family: 'Trebuchet MS', Verdana, sans-serif;
  color: rgba(255, 255, 255, 0.08);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.splash-card,
.splash-card:visited {
  color: #fff;
}
.splash-card:hover {
  border-left-color: #a0e090;
  color: #fff;
  text-decoration: none;
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.splash-card-title {
  font-size: 1.5em;
  font-weight: bold;
  font-family: 'Trebuchet MS', Verdana, sans-serif;
  margin-bottom: 0.3em;
  letter-spacing: 0.03em;
}
.splash-card-desc {
  font-size: 0.88em;
  opacity: 0.80;
  line-height: 1.45;
}

/* Photo drop shadows */
.img-shadow {
  float:left;
  background: url(/scott/images/shadow.png) no-repeat bottom right !important;
  background: url(/scott/images/shadow.png) no-repeat bottom right;
  margin: 10px 0 0 10px !important;
  margin: 10px 0 0 5px;
}
.img-shadow img {
  display: block;
  position: relative;
  background-color: #fff;
  border: 1px solid #a9a9a9;
  margin: -6px 6px 6px -6px;
  padding: 4px;
}