/* Replica of the 2018 one-page lamesageophysical.com (WordPress theme "renden",
   Think Up Themes, SiteOrigin Panels layout). Layout and copy are faithful to the
   2018-06-04 Internet Archive capture; the original theme CSS is not reused.

   Two quirks of the original are reproduced deliberately:
   - Body copy was marked up as <h4>, so it renders larger than normal paragraph
     text. That is how the page actually looked.
   - The page background was #2878bf (set by the theme's custom-background). */

/* Fonts are bundled, not fetched. Open Sans is what the original site loaded. */
@import url('fonts-os.css');

:root {
  --blue: #2878bf;
  --blue-deep: #1b5488;
  --ink: #3a3a3a;
  --muted: #8a8f96;
  --rule: #e4e7ea;
  --shell: 1100px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--blue);
  color: var(--ink);
  font: 400 16px/1.7 'Open Sans', Helvetica, Arial, sans-serif;
}

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  background: #fff;
}

/* ---------- header ---------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 40px;
  background: #fff;
  border-bottom: 1px solid var(--rule);
}

.logo img { display: block; height: 40px; width: auto; }

.nav ul {
  display: flex;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav a {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #555;
  text-decoration: none;
}

.nav a:hover, .nav a.current { color: var(--blue); }

/* ---------- panels ---------- */

.panels { padding: 0 40px 60px; }

.row {
  display: grid;
  gap: 30px;
  margin-bottom: 30px;
  align-items: start;
}

.row.one   { grid-template-columns: 1fr; }
.row.half  { grid-template-columns: 1fr 1fr; }
.row.third { grid-template-columns: 1fr 1fr 1fr; }
.row.two-one { grid-template-columns: 2fr 1fr; }        /* 66.7 / 33.3 */
.row.golden  { grid-template-columns: 38.2fr 61.8fr; }  /* the theme's actual split */

.row.tight { margin-bottom: 15px; }

/* section headings */

.panels h1 {
  font-size: 34px;
  font-weight: 300;
  line-height: 1.25;
  color: var(--blue-deep);
  margin: 44px 0 4px;
}

.panels h2 {
  font-size: 40px;
  font-weight: 300;
  line-height: 1.2;
  color: var(--blue-deep);
  margin: 44px 0 4px;
}

/* the original used h4 for running copy */
.panels h4 {
  font-size: 19px;
  font-weight: 300;
  line-height: 1.6;
  margin: 0 0 20px;
  color: var(--ink);
}

.panels img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
}

.divider {
  height: 1px;
  background: var(--rule);
  margin: 34px 0;
}

/* ---------- contact ---------- */

.contact-form { max-width: 620px; }

.contact-form label {
  display: block;
  margin-bottom: 16px;
  font-size: 15px;
  color: #555;
}

.contact-form input, .contact-form textarea {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 9px 11px;
  border: 1px solid #c8ccd0;
  font: inherit;
  font-size: 15px;
}

.contact-form textarea { min-height: 150px; resize: vertical; }

.contact-form button {
  padding: 11px 30px;
  border: 0;
  background: var(--blue);
  color: #fff;
  font: 600 14px/1 'Open Sans', sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor: pointer;
}

.contact-form button:hover { background: var(--blue-deep); }

/* ---------- footer ---------- */

.colophon {
  padding: 22px 40px 30px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  color: var(--muted);
}

/* ---------- replica banner ---------- */

.replica-bar {
  background: #333a42;
  color: #cfd4da;
  font: 400 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 8px 16px;
  text-align: center;
}

.replica-bar b { color: #fff; font-weight: 700; }
.replica-bar a { color: #8fc3f2; }

.note {
  font: 400 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--muted);
  margin: 6px 0 0;
}

@media (max-width: 860px) {
  .row.half, .row.third, .row.two-one, .row.golden { grid-template-columns: 1fr; }
  .panels { padding: 0 22px 40px; }
  .masthead { padding: 14px 22px; }
}