/* Shared homepage and About layout; typography comes from the existing theme. */
.landing { max-width: 800px; margin: 0 auto; padding: 0 28px; color: #333; font-size: 16px; line-height: 1.75; }
.landing *, .landing *::before, .landing *::after { box-sizing: border-box; }
.landing a { color: #222; text-underline-offset: 4px; }
.landing a:hover { text-decoration-color: #47785b; }
.landing a:focus-visible, .landing-skip:focus-visible { outline: 3px solid #47785b; outline-offset: 5px; }
.landing-intro { display: grid; grid-template-columns: minmax(0, 1fr) 260px; align-items: center; gap: 32px; padding-top: 55px; }
.landing h1 { font-size: 32px; line-height: 1.25; margin: 0 0 8px; }
.landing-tagline { font: 18px/1.5 'Lato', sans-serif; color: #626262; margin: 0 0 24px; }
.landing-intro-text > p:not(.landing-tagline) { margin: 0 0 20px; }
.landing-portrait { display: flex; align-items: center; justify-content: center; height: 100%; }
.landing-portrait img { display: block; width: 260px; height: 260px; border-radius: 50%; object-fit: cover; object-position: center; }
.landing-section { margin-top: 60px; }
.landing-section:last-child { margin-bottom: 45px; }
.landing h2 { font-size: 26px; line-height: 1.3; margin: 0 0 12px; }
.section-description { color: #626262; font-size: 15px; margin: 0 0 26px; }
.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.work-card { display: block; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; text-decoration: none; background: rgba(255,255,255,.8); }
.work-card:hover { border-color: #7e9b88; }
.work-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; }
.work-card-body { padding: 16px 18px 20px; }
.work-card-body h3 { font-size: 19px; line-height: 1.35; margin: 0 0 8px; }
.work-card-body p { margin: 0; font-size: 14px; line-height: 1.65; color: #555; }
.work-more { margin: 24px 0 0; font: 600 15px/1.6 'Lato', sans-serif; }
.blog-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; align-items: baseline; border-bottom: 1px solid #ddd; padding: 18px 0; }
.blog-row time { font: 14px/1.6 'Lato', sans-serif; color: #626262; }
.blog-row h3 { font-size: 19px; line-height: 1.45; margin: 0; }
.blog-row a { text-decoration: none; }
.blog-row a:hover { text-decoration: underline; }
.landing-skip { position: absolute; top: -100px; left: 16px; padding: 8px 14px; background: white; z-index: 5; }
.landing-skip:focus { top: 10px; }
@media (max-width: 800px) {
  .landing-intro { grid-template-columns: minmax(0, 1fr) 230px; gap: 25px; }
  .landing-portrait img { width: 220px; height: 220px; }
}
@media (max-width: 640px) {
  .landing { padding: 0 22px; }
  .landing-intro { grid-template-columns: 1fr; padding-top: 36px; gap: 30px; }
  .landing h1 { font-size: 28px; }
  .landing-tagline { font-size: 17px; }
  .landing-portrait img { width: 220px; height: 220px; }
  .landing-section { margin-top: 42px; }
  .work-grid { grid-template-columns: 1fr; }
  .blog-row { grid-template-columns: 1fr; gap: 5px; }
}