/* craiganewman.com — quiet holding page. Cool slate and stone, taken from the
   winter landscape photography that was already on the site. */

:root {
  --bg:      #14171b;
  --surface: #1f242a;
  --line:    #333b44;
  --text:    #e8ebee;
  --muted:   #97a1ac;
  --accent:  #d4b483;   /* warm stone, picked out of the photos */
  --max:     46rem;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 17px/1.7 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display: flex; flex-direction: column; min-height: 100vh;
}
main { max-width: var(--max); width: 100%; margin: 0 auto; padding: 4rem 1.5rem 0; flex: 1; }

h1 { font-size: clamp(2.2rem, 6vw, 3.2rem); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 1rem; }
h1 em { font-style: normal; color: var(--accent); }
p { margin: 0 0 1.15rem; }
.lead { font-size: 1.2rem; color: #c3ccd5; }
.muted { color: var(--muted); }
a { color: var(--accent); }

.shot {
  margin: 3rem 0 0; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line); line-height: 0;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.shot p { margin: 0; line-height: 0; }
.shot img { display: block; width: 100%; height: auto; }

footer.site {
  max-width: var(--max); width: 100%; margin: 4rem auto 0;
  padding: 0 1.5rem 3rem; color: var(--muted); font-size: .92rem;
}
.forsale {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 8px;
  padding: 1.4rem 1.6rem; margin: 0 0 1.5rem;
}
.forsale p { margin: .2rem 0; }
.forsale strong { color: var(--text); font-size: 1.05rem; }
.forsale p:has(.email-img) { margin-top: .9rem; }
.email-img { display: block; width: 207px; height: auto; max-width: 100%; }

@media (max-width: 40rem) { main { padding-top: 2.5rem; } }