/* Hollis Crane Architects (fictional). Flaws on purpose: hamburger-only nav on every screen size,
   fixed 960px column, slider hero with no message or action, tiny low-contrast footer contact. */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Georgia, "Times New Roman", serif; color: #222; background: #fff; line-height: 1.5; }
a { color: inherit; text-decoration: none; }

.top { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; padding: 22px 28px; mix-blend-mode: difference; color: #fff; }
.top .name { font-size: 15px; letter-spacing: .18em; text-transform: uppercase; }
.burger { width: 30px; height: 20px; position: relative; background: none; border: 0; cursor: pointer; }
.burger span { position: absolute; left: 0; width: 100%; height: 1px; background: #fff; }
.burger span:nth-child(1) { top: 2px; } .burger span:nth-child(2) { top: 10px; } .burger span:nth-child(3) { top: 18px; }

.overlay { position: fixed; inset: 0; z-index: 15; background: #111; color: #fff; display: none; align-items: center; justify-content: center; }
.overlay.open { display: flex; }
.overlay ul { list-style: none; text-align: center; }
.overlay li { margin: 18px 0; font-size: 34px; font-style: italic; }
.overlay a:hover { opacity: .5; }

.slider { position: relative; height: 100vh; overflow: hidden; background: #111; }
.slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.6s ease; }
.slide.on { opacity: 1; }
.tag { position: absolute; left: 0; right: 0; bottom: 14vh; text-align: center; color: #fff; font-size: 26px; font-style: italic; letter-spacing: .04em; text-shadow: 0 1px 12px rgba(0,0,0,.45); }

.wrap { max-width: 960px; margin: 0 auto; padding: 90px 24px; }
.wrap h2 { font-weight: normal; font-size: 22px; margin-bottom: 28px; }
.wrap p { font-size: 15px; color: #555; max-width: 560px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 34px; }
.grid a { display: block; aspect-ratio: 1; background-size: cover; background-position: center; }
.grid.list img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }

.page { padding-top: 110px; }
.page h1 { font-weight: normal; font-size: 26px; margin-bottom: 30px; }

footer { background: #f4f4f4; padding: 60px 24px; text-align: center; font-size: 11px; color: #aaa; letter-spacing: .06em; }
footer a { color: #aaa; }

@media (max-width: 700px) {
  .grid { grid-template-columns: 1fr 1fr; }
  .tag { font-size: 20px; padding: 0 20px; }
}