/* jwcampbe.com home, 2026 — design "A" from the redesign canvas.
   Kept from 2008: the night skyline, "prose and other things", the Times Square
   photo with E. B. White's whole passage, the pale yellow, and the four city
   corners that swap to a photo on hover (each in its own 2008 colour).
   The coming-soon and 404 pages still use the 2008 style.css. */

:root {
  --ground: #0b0b0d;
  --paper: #ffffcc;
  --soft: #ece9c8;
  --muted: #a9a68e;
  --rule: #26262b;
  --red: #ef4a4a;
  --serif: 'Crimson Pro', 'Book Antiqua', Palatino, Georgia, serif;
  --display: 'Cormorant Garamond', 'Book Antiqua', Palatino, Georgia, serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--paper); font-family: var(--serif); }
a { color: var(--paper); }
a:hover { color: #fff; }

/* The skyline, large, fading into the page */
.sky { position: relative; height: clamp(110px, 15vw, 170px); background: #000; overflow: hidden; }
.sky img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; display: block; }
.sky::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
  background: linear-gradient(to bottom, rgba(11,11,13,0), var(--ground)); }

main { max-width: 760px; margin: 0 auto; padding: 36px 16px 40px;
  display: flex; flex-direction: column; align-items: center; gap: 44px; }

.tagline { margin: 0; font-family: var(--display); font-style: italic; font-weight: 500;
  font-size: clamp(24px, 4vw, 32px); color: #d9d6b8; letter-spacing: .02em; text-align: center; }

figure { margin: 0; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.square { width: 100%; max-width: 640px; height: auto; border-radius: 4px; display: block; }
.quote { margin: 0; max-width: 620px; width: 100%; font-family: var(--display);
  font-size: clamp(20px, 2.5vw, 25px); line-height: 1.6; color: #85826d; }
/* Prose poetry: the whole passage stays, in one paragraph, but most of it recedes;
   the lit phrases read on their own as a found poem — the city as poem. */
.prose p { margin: 0; text-align: justify; hyphens: auto; }
.prose .lit { color: var(--paper); font-style: italic; hyphens: manual; }
figcaption { font-size: 15px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; text-align: center; }

/* The four corners: a flat colour each, swapping to a photo on hover, as in 2008.
   Crisp: no shadows. The hover photos (images/*-hover.jpg, 2x) are cut fresh from
   the full-size 2008 source photos in _source/drive-images/images/main nav source
   images/: manhattan008, boston012, darwin009, london010. */
.corners { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; padding: 3px; background: #000; }
.corner { display: block; width: 116px; height: 72px; background-size: cover; background-position: center; }
.corner:focus-visible { outline: 2px solid var(--paper); outline-offset: -2px; }
#manhattan { background-color: #003399; }
#boston { background-color: #003366; }
#darwin { background-color: #336699; }
#london { background-color: #999966; }
#manhattan:hover, #manhattan:focus-visible { background-image: url(../images/manhattan-hover.jpg); }
#boston:hover, #boston:focus-visible { background-image: url(../images/boston-hover.jpg); }
#darwin:hover, #darwin:focus-visible { background-image: url(../images/darwin-hover.jpg); }
#london:hover, #london:focus-visible { background-image: url(../images/london-hover.jpg); }

.write { display: inline-flex; align-items: center; min-height: 44px; padding: 0 26px; border: 1px solid var(--red);
  border-radius: 999px; text-decoration: none; font-size: 19px; }
.write:hover { background: var(--red); color: var(--ground); }
.write[hidden] { display: none; }

footer { max-width: 760px; margin: 0 auto; padding: 22px 16px 40px; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 16px; color: var(--muted); }
footer .links { display: flex; gap: 20px; }

@media (max-width: 480px) {
  main { padding-top: 32px; gap: 32px; }
  .corner { width: 100px; height: 62px; }
}