/* Matches the original WordPress (Blank Canvas) theme: Times, #333 on white, 620px column. */
:root { --text: #333; --bg: #fff; color-scheme: light; }
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font-family: "Times New Roman", Times, serif; font-size: 18px; line-height: 1.6; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }

header { position: relative; height: 114px; }
.menu { position: absolute; top: 18px; left: 18px; z-index: 10; }
.menu summary { list-style: none; cursor: pointer; width: 48px; height: 48px; padding: 14px 8px; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span { display: block; height: 2px; background: var(--text); margin: 0 0 12px; transition: transform .15s; }
.menu[open] summary span:first-child { transform: translateY(7px) rotate(45deg); }
.menu[open] summary span:last-child { transform: translateY(-7px) rotate(-45deg); }
.menu nav { position: fixed; inset: 0; top: 84px; background: var(--bg); display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 24px; font-size: 26px; }
.menu nav a { text-decoration: none; }
.menu nav a:hover { text-decoration: underline; }

.title { text-align: center; font-weight: 400; margin: 0 20px 30px; font-size: 48px; line-height: 54px; }
h2.title { font-size: 32px; line-height: 36px; }
.title a { text-decoration: none; }

.hero { display: block; margin-bottom: 120px; }
.hero img { width: 100%; }

/* Portfolio grid: 200px-tall thumbnails (240 incl. padding), wide ones cropped to 200px wide. */
.grid { list-style: none; margin: 0 auto; padding: 0 0 64px; max-width: 620px; display: flex; flex-wrap: wrap; justify-content: center; }
.grid li { margin-bottom: 18px; }
.grid img { box-sizing: border-box; height: 240px; width: auto; max-width: 240px; padding: 20px; object-fit: cover; transition: opacity .2s; }
.grid a:hover img { opacity: .85; }

.work { margin: 0 auto 64px; display: flex; justify-content: center; }
.work img { max-height: 700px; width: auto; }

.text { max-width: 620px; margin: 0 auto 64px; }
.text.center { text-align: center; }

@media (max-width: 660px) {
  header { height: 93px; }
  .menu { top: 8px; left: 8px; }
  .menu nav { top: 64px; }
  .work img { max-height: none; width: 100%; }
  .grid, .text { margin-left: 20px; margin-right: 20px; }
}