:root{
  --bg:#faf7f3;
  --muted:#6b6b6b;
  --accent:#8b6f5a;
  --container:980px;
  --max-width-content:820px;
  --text:#222222;
  --lead:1.6;
}
*{box-sizing:border-box}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
html{font-size:16px}
body{font-family:Montserrat, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;line-height:var(--lead);color:var(--text);background:var(--bg);margin:0;-webkit-font-smoothing:antialiased}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
.header-inner{display:flex;align-items:center;justify-content:center;padding:22px 0;position:relative;gap:18px;flex-wrap:nowrap}
.site-header .container{padding-left:0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);transition:transform .18s ease;padding-right:14px;border-right:1px solid rgba(0,0,0,0.06);margin-right:18px;z-index:60}
.brand:hover{transform:none}
.brand-text{font-family:Merriweather, serif;font-weight:700;font-size:1.05rem;color:var(--text);letter-spacing:0.01em;white-space:nowrap;display:inline-block;line-height:1;margin-left:6px}
.logo{height:64px;width:64px;display:block;border-radius:12px;padding:6px;background:transparent;box-shadow:0 10px 30px rgba(20,20,20,0.08);border:1px solid rgba(0,0,0,0.04);object-fit:contain;mix-blend-mode:multiply}
.nav-toggle{display:none;background:none;border:0;font-size:1.4rem; flex-wrap:nowrap}
.main-nav{position:static;margin-left:0;z-index:50}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:22px;align-items:center;flex-wrap:nowrap;white-space:nowrap}
.main-nav a{color:var(--muted);text-decoration:none;font-size:0.95rem;padding:6px 3px;letter-spacing:0.02em;white-space:nowrap}
.main-nav a:hover{color:var(--text)}
.main-nav a.active{color:var(--accent);font-weight:600}

.hero{background-image:linear-gradient(rgba(250,247,243,0.82),rgba(250,247,243,0.62)),url('../assets/home-hero.jpg');background-size:cover;background-position:center;padding:110px 0;display:flex;align-items:center}
.hero-inner{padding:24px 0 24px 8px;text-align:left;max-width:var(--max-width-content)}
.hero h1{font-family:Merriweather,serif;font-size:3.2rem;margin:0 0 8px;color:var(--text);line-height:1.02}
.subtitle{color:var(--muted);margin:0 0 14px;font-size:1.05rem}
.quote{font-style:italic;color:var(--accent);margin-top:10px;font-size:1.5rem}

.hero .hero-meta{margin-top:20px;display:flex;gap:16px;align-items:center}
.hero .hero-meta img{height:80px;width:80px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,0.88);box-shadow:0 8px 24px rgba(0,0,0,0.08)}

.intro{padding:42px 0}
.row{display:flex;gap:30px;align-items:center}
.col{flex:1}
.col.image img{width:100%;height:auto;border-radius:6px}
.profile{width:200px;height:200px;max-width:none;border-radius:50%;object-fit:cover;display:block;margin-left:auto;border:6px solid var(--bg);box-shadow:0 10px 30px rgba(0,0,0,0.08)}

/* Float and wrap text around circular profile on article pages */
.profile--float{float:left;shape-outside:circle(50% at 50% 50%);-webkit-shape-outside:circle(50% at 50% 50%);width:220px;height:220px;margin:6px 28px 18px 0;border-radius:50%;object-fit:cover}

/* Fade (blend) the main profile image vertically on the intro (index) page */
.intro .col.image .profile,
.intro .profile{
  /* smoother, stronger bottom fade: mid-opaque area ends earlier so the bottom tapers gradually */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.98) 12%, rgba(0,0,0,0.98) 60%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.98) 12%, rgba(0,0,0,0.98) 60%, rgba(0,0,0,0) 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 120% 140%;
  mask-size: 140% 90%;
}

/* Professional bio layout: two-column grid for portrait + content */
.bio{display:grid;grid-template-columns:300px 1fr;gap:36px;align-items:start}
.bio-photo .profile{width:300px;height:300px;border-radius:50%;object-fit:cover;border:8px solid var(--bg);box-shadow:0 20px 50px rgba(0,0,0,0.14);display:block}
.bio-content{max-width:820px}
.bio-content h1{margin-top:0;font-size:1.6rem}
.bio-content .subtitle{margin-top:6px;margin-bottom:16px;font-size:1.05rem;color:var(--muted)}
.bio-content p{font-size:1.05rem;line-height:1.8;color:var(--text);margin-bottom:18px}

@media(max-width:900px){
  .bio{grid-template-columns:1fr;gap:18px}
  .bio-photo .profile{width:180px;height:180px;margin:0 auto;display:block}
  .bio-content{padding:0 12px}
}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;padding:36px 0}
.card{background:white;padding:22px;border-radius:10px;box-shadow:0 6px 20px rgba(20,20,20,0.06);transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 14px 36px rgba(20,20,20,0.09)}
.card h3{margin-top:0}
.more{display:inline-block;margin-top:10px;color:var(--accent);text-decoration:none}

.site-footer{border-top:1px solid #eee;padding:28px 0;background:transparent;color:var(--muted)}
.site-footer p{margin:6px 0;font-size:0.95rem}

.meta-small{color:var(--muted);font-size:0.95rem}

/* Gallery styles */
.gallery{padding:26px 0 36px}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
.gallery-item{display:block;border:0;padding:0;background:transparent;position:relative;overflow:hidden}
.gallery-item img{width:100%;height:100%;object-fit:cover;border-radius:8px;display:block;box-shadow:0 8px 20px rgba(0,0,0,0.08);transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .25s}
.gallery-item .caption{position:absolute;left:12px;bottom:12px;background:rgba(0,0,0,0.45);color:#fff;padding:8px 10px;border-radius:6px;opacity:0;transition:opacity .25s;font-size:0.95rem}
.gallery-item:hover .caption{opacity:1}

/* Featured layout: make the first tile larger on wide screens */
.gallery-grid .gallery-item:first-child{grid-column:span 2;height:360px}
.gallery-grid .gallery-item{height:260px}
.gallery-item:hover img{transform:scale(1.04)}
/* Make thumbnails uniform now that hero is top-first */
.gallery-grid .gallery-item:first-child{grid-column:span 1;height:260px}

/* Lightbox overlay */
.lb-overlay{position:fixed;inset:0;background:rgba(10,10,10,0.85);display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px}
.lb-overlay img{max-width:100%;max-height:100%;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,0.6)}
.lb-close{position:absolute;right:18px;top:18px;background:transparent;border:0;color:#fff;font-size:28px}

/* Lightbox layout enhancements */
.lb-inner{position:relative;max-width:1100px;width:100%;display:flex;align-items:center;justify-content:center}
.lb-figure{margin:0;max-width:90%;text-align:center}
.lb-figure img{max-width:100%;max-height:80vh;border-radius:6px}
.lb-caption{color:#fff;margin-top:12px;font-size:0.95rem;opacity:0.95}
.lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(-50%);background:transparent;border:0;color:#fff;font-size:44px;padding:8px 12px;cursor:pointer}
.lb-prev{left:8px}
.lb-next{right:8px}
.lb-prev:focus,.lb-next:focus,.lb-close:focus{outline:3px solid rgba(255,255,255,0.12);outline-offset:4px;border-radius:6px}

.page-hero{background-size:cover;background-position:center;padding:70px 0;display:flex;align-items:center}
.page-hero .container{max-width:var(--max-width-content)}
.page-hero h1{font-family:Merriweather,serif;font-size:2rem;color:var(--text);margin:0}

/* Improved page-hero layout using an inline image to avoid aggressive cropping */
.page-hero{position:relative;margin-bottom:28px}
.page-hero-figure{width:100%;overflow:hidden}
.page-hero-figure img{width:100%;height:420px;object-fit:cover;object-position:center center;border-radius:10px;display:block;box-shadow:0 14px 40px rgba(20,20,20,0.08)}
/* slightly reduce opacity so hero image reads as backdrop for text */
.page-hero-figure img{opacity:0.72}
.hero-overlay{position:absolute;left:0;right:0;bottom:0;pointer-events:none}
.hero-overlay .container{position:relative}
.hero-overlay .hero-text{pointer-events:auto;padding:28px 20px;max-width:820px}
.hero-overlay .hero-text h1{font-family:Merriweather,serif;font-size:2.4rem;color:#fff;margin:0 0 8px;line-height:1.02;text-shadow:0 6px 20px rgba(0,0,0,0.35)}
.hero-overlay .hero-text .subtitle{color:rgba(255,255,255,0.92);margin:0 0 6px}
/* soft gradient to fade image into the page background so text remains readable */
.page-hero .hero-overlay::before{content:'';position:absolute;left:0;right:0;bottom:0;height:56%;background:linear-gradient(180deg,rgba(0,0,0,0.16) 0%, rgba(250,247,243,0.94) 90%);z-index:0}
.hero-overlay .hero-text{position:relative;z-index:2}

/* Page hero figure: single image per page, sized to avoid extreme crops */
.page-hero-figure{margin-top:9px}
.page-hero-figure img{width:100%;height:440px;object-fit:cover;object-position:center center;border-radius:10px;box-shadow:0 10px 30px rgba(20,20,20,0.08);display:block}

/* On small screens prefer contain to avoid cropping important faces/details */
@media(max-width:900px){
  .page-hero-figure img{height:220px;object-fit:contain;background:#f5f2ee;padding:8px;border-radius:10px}
}


/* Bottom figure used for a second large photo on each page */
.page-bottom-figure{padding:28px 0}
.page-bottom-figure img{width:100%;height:380px;object-fit:cover;border-radius:10px;box-shadow:0 12px 36px rgba(20,20,20,0.06);display:block}
@media(max-width:900px){
  .page-bottom-figure img{height:240px;object-fit:contain;background:#f5f2ee;padding:8px}
}
@media(max-width:900px){
  .page-hero-figure img{height:260px;object-fit:contain;background:#f5f2ee;padding:8px;border-radius:10px}
  .hero-overlay .hero-text h1{font-size:1.6rem}
  
}



@media(max-width:900px){
  .container{padding:0 18px}
  .row{flex-direction:column}
  .main-nav{display:none}
  .nav-toggle{display:block}
  .main-nav.open{display:block;background:white;padding:12px;border-radius:8px;position:absolute;right:20px;top:72px;box-shadow:0 8px 24px rgba(0,0,0,0.08)}
  .main-nav ul{flex-direction:column;gap:10px}
  .brand{flex-direction:column;align-items:center;gap:8px;position:static;left:auto;top:auto;transform:none;padding-right:0;border-right:none;margin-right:0}
  .brand-text{display:block;font-size:0.95rem;text-align:center}
  .logo{height:56px;width:56px}
  .profile{width:120px;height:120px;max-width:none;border-radius:50%;object-fit:cover;margin-left:auto}
  .profile--float{float:none;shape-outside:none;margin:0 auto 18px;display:block}
  .hero{padding:56px 0}
  .hero h1{font-size:1.5rem}
  .hero .hero-meta img{height:64px;width:64px}
}

/* left-edge brand shift removed to keep header centered */

@media(max-width:520px){
  .hero{padding:40px 0}
  .hero h1{font-size:1.25rem}
  .cards{grid-template-columns:1fr}
}

/* Accessibility and focus */
.skip-link{position:absolute;left:12px;top:12px;background:#111;color:#fff;padding:8px 12px;border-radius:6px;z-index:120;transform:translateY(-120%);transition:transform .18s ease;box-shadow:0 6px 18px rgba(0,0,0,0.12)}
.skip-link:focus{transform:translateY(0)}

a:focus,button:focus,input:focus,textarea:focus{outline:3px solid rgba(139,111,90,0.18);outline-offset:3px}
.nav-toggle:focus{outline:3px solid rgba(139,111,90,0.18);border-radius:6px}

.main-nav a:focus{background:rgba(139,111,90,0.04);border-radius:4px;padding:6px 6px}

@media(max-width:900px){
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-grid .gallery-item:first-child{grid-column:span 2;height:280px}
  .gallery-grid .gallery-item{height:220px}
}

@media(max-width:520px){
  .gallery-grid{grid-template-columns:1fr}
  .gallery-grid .gallery-item:first-child{grid-column:span 1;height:260px}
}