/* drewrothstein.com — the whole stylesheet.
   Each section is a full-height photo (<div class="banner"><img></div>) followed by its text on white. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #fff;
  color: #363636;
  font: 15px/1.7 "Avenir Next", "Helvetica Neue", Arial, sans-serif;
}

/* Futura for the name, the menu, headings and the footer; body text stays light. */
header, h2, .hero p, footer { font-family: "Futura", "Avenir Next", "Helvetica Neue", Arial, sans-serif; }

a { color: inherit; }

/* Top bar over the first photo: name on the left, pages on the right. */
header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px 24px;
  padding: 24px 40px;
  color: #fff;
  text-shadow: 0 1px 4px rgb(0 0 0 / .5);
}
header a { text-decoration: none; }
header .name {
  max-width: 6em;
  font-size: 28px;
  font-weight: bold;
  line-height: 1.1;
  letter-spacing: .1em;
  text-transform: uppercase;
}
header nav { display: flex; gap: 24px; padding-top: 8px; font-size: 11px; font-weight: bold; letter-spacing: .15em; text-transform: uppercase; }
header nav a[aria-current] { border-bottom: 1px solid; }

/* Full-height photo with the "wiper" effect: the photo is pinned to the screen (position: fixed) and only
   shows through its .banner window (clip-path), so scrolling slides the page over it. .short is half height. */
.banner { position: relative; height: 100vh; clip-path: inset(0); }
.banner.short { height: 50vh; }
.banner img { position: fixed; inset: 0; width: 100%; height: 100vh; object-fit: cover; }

/* Home page opener: "Hello World" centered over the first photo. */
.hero { display: flex; align-items: center; justify-content: center; padding: 24px; }
.hero p { position: relative; margin: 0; color: #fff;font-size: clamp(36px, 7vw, 56px); font-weight: bold; text-align: center; text-shadow: 0 1px 6px rgb(0 0 0 / .4); }

/* The text under each photo. */
.text { max-width: 1000px; padding: 40px; }
.text p { margin: 0 0 .8em; }
h2 { margin: 0 0 .6em; font-size: 20px; color: #000; }
* + h2 { margin-top: 1.4em; }

/* Photo grid on the home page: two across, one on phones. Panoramas (.wide) take a full row. */
.photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 40px;
}
.photos figure { margin: 0; }
.photos .wide { grid-column: 1 / -1; }
.photos img { display: block; width: 100%; height: auto; }
.photos figcaption { padding: 6px 0; font-size: 13px; color: #777; text-align: center; }

/* "Thank you for stopping by." under the photos. */
.note { margin: 0 auto; max-width: 600px; text-align: center; }

/* Contact address: one word-group per line, and not selectable, so it has to be typed. */
.email {
  display: flex;
  flex-direction: column;
  font-size: 22px;
  font-weight: bold;
  letter-spacing: .1em;
  color: #000;
  user-select: none;
  -webkit-user-select: none;
}
.hint { font-size: 13px; color: #777; }

/* Down-arrow at the bottom of the first photo; shows "Scroll down" on hover. */
.scroll {
  position: absolute;
  bottom: 24px;
  left: 50%;
  translate: -50%;
  color: #fff;
  font: bold 12px Futura, "Avenir Next", sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
  filter: drop-shadow(0 1px 3px rgb(0 0 0 / .6));
}
.scroll svg { display: block; width: 32px; height: 32px; }
.scroll span, .scroll:hover svg { display: none; }
.scroll:hover span { display: block; }

/* Dark footer: a white "Top" circle on its top edge, then the social icons centered. */
footer { position: relative; padding: 56px 20px 40px; background: #171717; }
footer .top {
  position: absolute;
  top: -25px;
  left: 50%;
  translate: -50%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  color: #363636;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
}
footer .top svg { display: block; width: 16px; height: 16px; margin: 6px auto 0; rotate: 180deg; }
.social { display: flex; justify-content: center; gap: 8px; }
.social a { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; color: #fff; opacity: .9; }
.social a:hover { opacity: 1; }
.social svg { display: block; width: 100%; height: 100%; fill: currentColor; }

@media (max-width: 600px) {
  header, .text, .photos { padding-left: 20px; padding-right: 20px; }
  .photos { grid-template-columns: 1fr; }
}