*{box-sizing:border-box;margin:0;padding:0;}
  html{-webkit-text-size-adjust:100%;}
  body{background:#FAFAFA;color:#000;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
  a{color:inherit;text-decoration:none;}
  img{display:block;}
  ::selection{background:#000;color:#fff;}

  /* ---------- header ---------- */
  .site-header{position:fixed;top:0;left:0;right:0;height:86px;z-index:1000;background:#000;transform:translateY(0);transition:transform .4s cubic-bezier(.4,0,.2,1);}
  .site-header.hidden{transform:translateY(-100%);}
  .header-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 clamp(20px,4vw,48px);}
  .brand{display:inline-flex;align-items:center;flex:none;}
  .brand img{height:46px;width:auto;display:block;}
  .header-left{display:flex;align-items:center;gap:clamp(18px,3vw,34px);}
  .header-right{display:flex;align-items:center;gap:16px;}
  .socials{display:flex;align-items:center;gap:16px;}
  .soc{color:#fff;display:inline-flex;opacity:.9;transition:opacity .2s;}
  .soc:hover{opacity:.55;}
  .soc svg{width:22px;height:22px;fill:currentColor;display:block;}
  .nav{display:flex;gap:24px;align-items:center;}
  .nav-link{color:#fff;font-size:16px;font-weight:400;line-height:1;padding-bottom:3px;border-bottom:1px solid transparent;transition:opacity .2s;white-space:nowrap;}
  .nav-link:hover{opacity:.7;}
  .nav-link.active{border-bottom-color:#fff;}
  .nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:6px;}
  .nav-toggle svg{width:26px;height:26px;stroke:#fff;stroke-width:2;fill:none;}

  /* ---------- views ---------- */
  .view{min-height:100vh;}
  .view[hidden]{display:none;}

  /* ---------- home / masonry ---------- */
  .view-home{padding-top:86px;}
  .masonry{display:flex;gap:15px;padding:0 14px 14px;align-items:flex-start;}
  .mcol{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:15px;}
  .mitem{display:block;width:100%;border:0;padding:0;margin:0;background:#ececec;cursor:pointer;overflow:hidden;line-height:0;opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s ease;}
  .mitem.in{opacity:1;transform:none;}
  .mitem img{width:100%;height:auto;display:block;transition:opacity .25s ease;}
  .mitem:hover img{opacity:.88;}
  .mitem:focus-visible{outline:2px solid #000;outline-offset:2px;}

  /* ---------- text pages ---------- */
  .view-text{display:flex;align-items:center;min-height:100vh;padding:130px clamp(24px,7vw,110px) 14vh;}
  .text-wrap{max-width:780px;}
  .page-h{font-size:30px;font-weight:700;line-height:1.25;letter-spacing:-.01em;margin-bottom:20px;}
  .page-p{font-size:16px;line-height:1.8;margin-bottom:16px;max-width:70ch;}
  .page-p a{text-decoration:underline;text-underline-offset:2px;}

  /* ---------- lightbox ---------- */
  .lightbox{position:fixed;inset:0;z-index:2000;display:none;background:rgba(16,16,16,.95);}
  .lightbox.open{display:flex;align-items:center;justify-content:center;}
  .lb-img{max-width:92vw;max-height:88vh;object-fit:contain;box-shadow:0 24px 70px rgba(0,0,0,.55);}
  .lb-btn{position:absolute;background:none;border:0;cursor:pointer;color:#fff;opacity:.8;transition:opacity .2s;padding:8px;}
  .lb-btn:hover{opacity:1;}
  .lb-btn svg{stroke:#fff;fill:none;stroke-width:1.8;display:block;}
  .lb-close{top:18px;right:22px;} .lb-close svg{width:26px;height:26px;}
  .lb-prev{left:14px;top:50%;transform:translateY(-50%);} .lb-next{right:14px;top:50%;transform:translateY(-50%);}
  .lb-prev svg,.lb-next svg{width:36px;height:36px;}
  .lb-count{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:#fff;font-size:12px;letter-spacing:.18em;opacity:.75;}

  /* ---------- mobile ---------- */
  @media (max-width:767px){
    .header-inner{padding:0 20px;}
    .nav{position:fixed;top:86px;left:0;right:0;flex-direction:column;gap:0;align-items:stretch;
      background:rgba(0,0,0,.97);backdrop-filter:blur(10px);padding:6px 0;border-bottom:1px solid rgba(255,255,255,.12);box-shadow:0 10px 24px rgba(0,0,0,.3);
      transform:translateY(-10px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;}
    .nav.open{opacity:1;transform:none;pointer-events:auto;}
    .nav-link{padding:15px 24px;border-bottom:0;}
    .nav-link.active{border-bottom:0;text-decoration:underline;text-underline-offset:3px;}
    .nav-toggle{display:inline-flex;}
    .lb-prev{left:2px;} .lb-next{right:2px;}
    .lb-prev svg,.lb-next svg{width:28px;height:28px;}
  }
  @media (prefers-reduced-motion:reduce){
    .mitem{opacity:1;transform:none;transition:none;}
    .site-header{transition:none;}
  }

  /* ---------- added: a11y helper + centered contact ---------- */
  .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;}
  .view-contact{justify-content:center;text-align:center;}
  .view-contact .text-wrap{margin-inline:auto;}
  .view-contact .page-p{max-width:none;}

/* ---------- about page: profile photo behind text, offset up (Squarespace-style) ---------- */
/* Tweak --about-offset to move the photo vertically: more negative = shifts it further UP. */
.view-about{position:relative;overflow:hidden;isolation:isolate;--about-offset:-10%;}
.about-bg{position:absolute;inset:0;z-index:0;overflow:hidden;}
.about-bg img{width:100%;height:140%;object-fit:cover;object-position:center;transform:translateY(var(--about-offset));display:block;}
.about-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(0,0,0,.62),rgba(0,0,0,.34) 55%,rgba(0,0,0,.14));}
.view-about .text-wrap{position:relative;z-index:1;}
.view-about .page-h,.view-about .page-p,.view-about .page-p a{color:#fff;}
@media (max-width:767px){ .about-bg::after{background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.55));} }