:root{
  --bg:#fbf7f2;
  --paper:#fffaf0;
  --ink:#1d1b16;
  --muted:#6b665a;
  --gold:#d9a441;
  --sage:#6d9773;
  --accent:#b1677d; /* pulled from logo type */
  --border:#e8e1d2;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --max:1100px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;color:var(--ink);background:var(--bg);font-family:Inter,system-ui,Arial,Helvetica,sans-serif;line-height:1.55}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--max);margin:auto;padding:0 1rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center}
@media (max-width:900px){.grid-3{grid-template-columns:1fr} .grid-2{grid-template-columns:1fr}}
.site-header{
  position:sticky;
  top:0;
  background:rgba(251,247,242,.9);
  backdrop-filter:saturate(180%) blur(8px);
  -webkit-backdrop-filter:saturate(180%) blur(8px); /* Safari support */
  border-bottom:1px solid var(--border);
  z-index:10;
}

.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:.6rem}
.brand__logo{width:40px;height:40px;border-radius:8px;object-fit:cover;background:#fff}
.brand__logo--sm{width:28px;height:28px;border-radius:6px;object-fit:cover;background:#fff}
.brand__text{font-family:Gloock,serif;font-size:1.1rem;color:var(--ink);letter-spacing:.3px}
.accent{color:var(--accent)}
.site-nav{display:flex;gap:1rem;align-items:center}
.site-nav a{padding:.4rem .6rem;border-radius:8px}
.site-nav a:hover{background:var(--paper)}
.nav-toggle{display:none;background:none;border:1px solid var(--border);padding:.4rem .6rem;border-radius:8px}
@media (max-width:900px){
  .nav-toggle{display:block}
  .site-nav{position:absolute;inset:64px 0 auto 0;display:none;flex-direction:column;background:var(--paper);padding:1rem;border-bottom:1px solid var(--border)}
  .site-nav.open{display:flex}
}
.hero{padding:3rem 0 2rem}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center}
.hero h1{font-family:Gloock,serif;font-weight:400;line-height:1.15;font-size:clamp(2rem,5vw,3rem);margin:.2rem 0 1rem}
.hero p{color:var(--muted);max-width:42ch}
.hero-card{background:var(--paper);padding:1.2rem;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border);display:flex;align-items:center;justify-content:center}
.hero-card img{max-width:260px}
.cta-row{display:flex;gap:.8rem;margin-top:1rem}
.btn{display:inline-block;padding:.75rem 1rem;border-radius:12px;border:1px solid var(--ink);font-weight:600}
.btn-primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.link-arrow{font-weight:600}
.section-head{display:flex;justify-content:space-between;align-items:baseline}
.highlights{padding:2rem 0}
.highlight{background:var(--paper);padding:1.2rem;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border)}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.card{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.card-body{padding:1rem}
.card h4,.card h3{margin:.2rem 0 .4rem 0}
@media (max-width:900px){.card-grid{grid-template-columns:1fr}}
.page-hero{padding:2.2rem 0 1.2rem;border-bottom:1px solid var(--border);background:linear-gradient(180deg,#fffaf0,transparent)}
.page-hero h1{font-family:Gloock,serif;margin:0 0 .4rem}
.page-hero p{color:var(--muted)}
.filters{display:flex;gap:.5rem;margin-top:1rem;flex-wrap:wrap}
.chip{padding:.4rem .7rem;border-radius:999px;border:1px solid var(--border);background:var(--paper);cursor:pointer}
.chip.is-active,.chip:focus{outline:none;border-color:var(--ink)}
.tags{display:flex;gap:.4rem;list-style:none;padding:0;margin:.6rem 0 0}
.tags li{font-size:.8rem;background:#f4eee0;border:1px solid var(--border);padding:.2rem .5rem;border-radius:999px}
.about{padding:2rem 0}
.about-list{list-style:"✓ ";padding-left:1rem}
.contact-box{margin-top:1rem;border:1px dashed var(--sage);padding:1rem;border-radius:12px;background:#f5fbf7}
.email-line {
  display: flex;
  align-items: center;
  gap: 0.4rem; /* tighten the spacing a bit */
  flex-wrap: nowrap; /* keeps everything on one line */
}

.email-line a {
  word-break: break-all; /* allows long emails to wrap gracefully if needed */
}
.band-cta{padding:2rem 0}
.band-inner{background:var(--ink);color:#fff;border-radius:var(--radius);padding:1.5rem;border:1px solid #000;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.band-inner p{margin:0;opacity:.9}
.band-inner .btn{background:#fff;color:var(--ink);border-color:#fff}
.site-footer{margin-top:2rem;border-top:1px solid var(--border);padding:1.2rem 0;background:#fff}
.footer-inner{display:grid;grid-template-columns:1.2fr .6fr 1fr;gap:1rem;align-items:start}
.footnote{color:var(--muted);font-size:.85rem;margin:.6rem 0 0}
.footer-brand{display:flex;gap:.6rem;align-items:center}
.footer-links{display:flex;flex-direction:column;gap:.4rem}
@media (max-width:900px){.footer-inner{grid-template-columns:1fr}}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.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}

.social-links {
  margin-top: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.social-links img {
  width: 32px;
  height: 32px;
  display: block;
  transition: transform 0.2s ease;
}

.social-links img:hover {
  transform: scale(1.1);
}

/* === Thumbnail & Lightbox Essentials (robust) === */
.card { display:flex; flex-direction:column; }
.card__media { position:relative; overflow:hidden; height: var(--thumb, 260px); flex-shrink:0; background:#f2eee5; }
.card__media > img { width:100%; height:100%; object-fit:cover; object-position: top center; display:block;  }
@media (max-width:900px){ .card__media { height: var(--thumb-mobile, 200px); } }

/* Lightbox container visuals */
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,.8); display:none; align-items:center; justify-content:center; z-index:1000; padding:1rem; }
.lightbox.is-open { display:flex; }
.lightbox__img { width:auto; height:auto; max-width:min(92vw,1100px); max-height:90vh; border-radius:12px; box-shadow:var(--shadow); }
.lightbox__close { position:absolute; top:1rem; right:1rem; background:#fff; border:0; border-radius:999px; padding:.5rem .7rem; cursor:pointer; }



/* Scope click cursor to projects page only */
.page-projects .card__media > img { cursor: pointer; }

/* =========================
   Mobile & accessibility polish
   ========================= */

/* Stack hero and tighten spacing on small screens */
@media (max-width: 900px){
  .hero-inner{ grid-template-columns: 1fr; }
}

/* Small-phone tweaks */
@media (max-width: 600px){
  .container{ padding: 0 .75rem; }

  .header-inner{ height: 56px; }
  .brand__text{ font-size: 1rem; }

  .cta-row{ flex-direction: column; align-items: flex-start; gap: .6rem; }

  .section-head{
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
  }

  .band-inner{
    flex-direction: column;
    align-items: flex-start;
  }

  /* Slightly shorter thumbs on small screens */
  .card__media{ --thumb-mobile: 180px; }

  /* Touch-friendly targets */
  .site-nav a,
  .btn,
  .copy-btn,
  .nav-toggle{
    min-height: 44px; /* recommended tap size */
  }

  /* Footer always stacks */
  .footer-inner{ grid-template-columns: 1fr; }
}

/* Respect iOS safe areas for the sticky header */
.site-header{
  padding-top: env(safe-area-inset-top, 0);
}

:root{ --header-h: 64px; }

@media (max-width: 600px){
  .header-inner{ height: 56px; }
  :root{ --header-h: 56px; }
}

/* Anchor targets won’t hide under the sticky header */
[id]{ scroll-margin-top: calc(var(--header-h) + 16px); }


/* Reduce motion for sensitive users */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
}

/* Make the “Featured Projects” header wrap cleanly on narrow widths */
.section-head{ flex-wrap: wrap; gap: .5rem; }

.lightbox__img{
  max-width: min(92vw, 1100px);
  max-height: 92dvh; /* was 90vh */
}