.wrap { width:min(100% - 40px,1160px); }
body.modal-open { overflow:hidden; }
.hero { padding:82px 0 53px; }
.hero-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:70px; align-items:end; }
.hero-copy { margin:0; color:var(--muted); font-size:17px; line-height:1.75; }
.portfolio { padding:0 0 96px; }
.toolbar { position:sticky; z-index:15; top:0; margin-bottom:28px; padding:18px 0; border-block:1px solid var(--line); background:#f6f1e7f2; backdrop-filter:blur(12px); }
.toolbar .wrap { display:flex; align-items:center; }
.count { margin:0; color:#625b50; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; }
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.project { position:relative; border:1px solid var(--line); background:var(--paper); transition:transform .22s ease,box-shadow .22s ease; }
.project[hidden], .project.is-page-hidden { display:none; }
.project img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; object-position:center 52%; background:#191c18; }
.copy { min-height:166px; padding:23px; }
.copy h2 { margin:0 0 11px; font:600 23px/1.18 "Playfair Display",serif; }
.copy h2 span { display:block; margin-top:5px; color:var(--deepgold); font-style:italic; font-size:.78em; }
.copy p { margin:0; color:var(--muted); font-size:13px; line-height:1.65; }
.open { position:absolute; z-index:2; inset:0; width:100%; height:100%; border:0; background:transparent; cursor:zoom-in; }
.open:focus-visible { outline:3px solid var(--deepgold); outline-offset:-5px; }
.lightbox { position:fixed; z-index:400; inset:0; display:grid; place-items:center; padding:28px; background:#10130ff2; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .22s ease,visibility .22s ease; }
.lightbox[hidden] { display:none; }
.lightbox.open { opacity:1; visibility:visible; pointer-events:auto; }
.panel { position:relative; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr); width:min(1080px,100%); max-height:calc(100vh - 56px); overflow:auto; background:#1b201c; box-shadow:0 30px 80px #0008; opacity:.92; transform:translateY(10px) scale(.985); transition:transform .22s cubic-bezier(.2,.8,.2,1),opacity .22s ease; }
.lightbox.open .panel { opacity:1; transform:none; }
.lightbox img { display:block; width:100%; height:auto; max-height:min(760px,84vh); object-fit:contain; object-position:center; background:#10130f; }
.modal-copy { display:flex; flex-direction:column; justify-content:center; padding:42px; color:#f8f4ea; }
.modal-copy h2 { margin:0 0 14px; font:600 32px/1.15 "Playfair Display",serif; }
.modal-copy p { color:#c6c3ba; line-height:1.7; }
.modal-copy a { display:inline-flex; align-items:center; justify-content:center; align-self:flex-start; min-height:50px; margin-top:18px; padding:0 18px; border:1px solid #d4af70; color:#fff; font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.close { position:absolute; z-index:5; top:18px; right:18px; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid #ffffff70; border-radius:50%; color:#fff; background:#10130fd9; cursor:pointer; font-size:24px; line-height:1; touch-action:manipulation; }
.close-text { display:none; }
.cta { padding:70px 0; background:#eee3d2; }
.cta .wrap { display:flex; align-items:center; justify-content:space-between; gap:28px; }
.cta h2 { margin:0 0 8px; }
.cta p { margin:0; color:var(--muted); }
.pager { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:34px; }
.pager[hidden] { display:none; }
.pager-status { min-width:92px; margin:0; color:#6f604a; font-size:10px; font-weight:700; letter-spacing:.12em; text-align:center; text-transform:uppercase; }
.pager-btn { min-height:44px; padding:0 17px; border:1px solid var(--gold); color:var(--deepgold); background:transparent; cursor:pointer; font:700 10px/1 "DM Sans",sans-serif; letter-spacing:.1em; text-transform:uppercase; }
.pager-btn:hover:not(:disabled), .pager-btn:focus-visible { color:#fff; background:var(--ink); outline:none; }
.pager-btn:disabled { border-color:#d9d2c5; color:#aaa396; cursor:not-allowed; }
@media (hover:hover) and (pointer:fine) {
  .project:hover { transform:translateY(-5px); box-shadow:0 18px 34px #251c111b; }
}
@media (max-width:820px) {
  .hero-grid { grid-template-columns:1fr; gap:24px; }
  .toolbar { position:static; }
  .grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lightbox { display:flex; flex-direction:column; place-items:stretch; padding:0; padding-top:env(safe-area-inset-top); }
  .panel { grid-template-columns:1fr; flex:1 1 auto; min-height:0; width:100%; max-height:none; overflow:auto; order:1; }
  .modal-copy { padding:28px; }
  .lightbox img { max-height:48vh; }
  .close { position:static; order:2; width:100%; height:calc(56px + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); border:0; border-radius:0; color:#1c211d; background:#d8b575; font:700 13px/1 "DM Sans",sans-serif; letter-spacing:.14em; text-transform:uppercase; }
  .close-x { display:none; }
  .close-text { display:inline; }
  .cta .wrap { display:block; }
  .cta .button { width:100%; margin-top:24px; }
}
@media (max-width:560px) {
  .wrap { width:min(100% - 28px,1160px); }
  .hero { padding:56px 0 40px; }
  .grid { grid-template-columns:1fr; }
  .copy { min-height:0; }
}

@media (prefers-reduced-motion:reduce) {
  .panel { transform:none; opacity:1; }
}