.kujira-portfolio-page__inner {
  width: min(1200px, calc(100% - 40px));
  margin-inline: auto;
  padding-block: 40px 64px;
}

.kujira-portfolio-page__header { margin-bottom: 28px; }
.kujira-portfolio,
.kujira-portfolio button,
.kujira-portfolio a { font-family: inherit; }
.kujira-portfolio { --kp-ink:#17161a; --kp-muted:#8a8680; --kp-line:#e3e1db; --kp-surface:#fff; --kp-accent:#1f2a44; --kp-shadow:0 18px 40px rgba(23,22,26,.16); color:inherit; line-height:inherit; max-width:100%; }
.kujira-portfolio *, .kujira-portfolio *::before, .kujira-portfolio *::after { box-sizing:border-box; }

.kujira-portfolio__filters { display:flex; flex-wrap:wrap; gap:6px 18px; align-items:baseline; margin:0 0 28px; padding:0 0 14px; border-bottom:1px solid var(--kp-line); }
.kujira-portfolio__filter { appearance:none; border:0; background:transparent; padding:6px 2px; margin:0; cursor:pointer; color:var(--kp-muted); font:inherit; font-size:.9rem; letter-spacing:.04em; position:relative; }
.kujira-portfolio__filter::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
.kujira-portfolio__filter:hover, .kujira-portfolio__filter.is-active { color:var(--kp-ink); }
.kujira-portfolio__filter.is-active::after { transform:scaleX(1); }

.kujira-portfolio__grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr)); gap:20px; }
.kujira-portfolio__item { margin:0; }
.kujira-portfolio__item[hidden] { display:none; }
.kujira-portfolio__card { appearance:none; border:0; padding:0; margin:0; width:100%; display:block; position:relative; overflow:hidden; border-radius:4px; background:var(--kp-surface); cursor:pointer; aspect-ratio:4/3; isolation:isolate; }
.kujira-portfolio__thumb { display:block; width:100%; height:100%; object-fit:cover; transform:scale(1.001); transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .5s ease; }
.kujira-portfolio__placeholder { display:block; width:100%; height:100%; background:#efeee9; }
.kujira-portfolio__card:hover .kujira-portfolio__thumb, .kujira-portfolio__card:focus-visible .kujira-portfolio__thumb { transform:scale(1.05); filter:brightness(.92); }
.kujira-portfolio__overlay { position:absolute; left:0; right:0; bottom:0; padding:42px 16px 14px; display:flex; flex-direction:column; gap:3px; text-align:left; color:#fff; background:linear-gradient(to top,rgba(17,16,20,.78),rgba(17,16,20,0)); opacity:0; transform:translateY(8px); transition:opacity .35s ease,transform .35s ease; pointer-events:none; }
.kujira-portfolio__card:hover .kujira-portfolio__overlay, .kujira-portfolio__card:focus-visible .kujira-portfolio__overlay { opacity:1; transform:translateY(0); }
.kujira-portfolio__title { font-family:var(--kp-heading-font-family,inherit); font-weight:var(--kp-heading-font-weight,inherit); font-style:var(--kp-heading-font-style,normal); font-size:1.02rem; line-height:1.4; }
.kujira-portfolio__cat { font-family:var(--kp-body-font-family,inherit); font-weight:var(--kp-body-font-weight,inherit); font-style:var(--kp-body-font-style,normal); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; opacity:.85; }
.kujira-portfolio__card:focus-visible { outline:2px solid var(--kp-accent); outline-offset:3px; }

.kujira-portfolio__modal[hidden] { display:none; }
.kujira-portfolio__modal { position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; padding:20px; }
.kujira-portfolio__backdrop { position:absolute; inset:0; background:rgba(17,16,20,.62); opacity:0; transition:opacity .3s ease; }
.kujira-portfolio__modal.is-open .kujira-portfolio__backdrop { opacity:1; }
.kujira-portfolio__dialog { position:relative; width:min(920px,100%); max-height:calc(100vh - 40px); overflow:auto; background:var(--kp-surface); border-radius:4px; box-shadow:var(--kp-shadow); display:grid; grid-template-columns:1.25fr 1fr; opacity:0; transform:translateY(12px); transition:opacity .32s ease,transform .32s ease; }
.kujira-portfolio__modal.is-open .kujira-portfolio__dialog { opacity:1; transform:none; }
.kujira-portfolio__media { background:#efeee9; min-height:100%; }
.kujira-portfolio__modal-img { display:block; width:100%; height:100%; max-height:calc(100vh - 40px); object-fit:cover; }
.kujira-portfolio__body { padding:30px 30px 34px; }
.kujira-portfolio__modal-cat { margin:0 0 8px; font-family:var(--kp-body-font-family,inherit); font-weight:var(--kp-body-font-weight,inherit); font-style:var(--kp-body-font-style,normal); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--kp-muted); }
.kujira-portfolio__modal-title { margin:0 0 16px; font-family:var(--kp-heading-font-family,inherit); font-weight:var(--kp-heading-font-weight,inherit); font-style:var(--kp-heading-font-style,normal); }
.kujira-portfolio__modal-detail { font-family:var(--kp-body-font-family,inherit); font-weight:var(--kp-body-font-weight,inherit); font-style:var(--kp-body-font-style,normal); }
.kujira-portfolio__modal-detail p, .kujira-portfolio__modal-detail li, .kujira-portfolio__modal-detail a { font-family:inherit; }
.kujira-portfolio__modal-detail p:first-child { margin-top:0; }
.kujira-portfolio__modal-link { font-family:var(--kp-body-font-family,inherit); font-weight:var(--kp-body-font-weight,inherit); font-style:var(--kp-body-font-style,normal); display:inline-block; margin-top:18px; padding:11px 22px; border:1px solid currentColor; border-radius:999px; color:inherit; text-decoration:none; font:inherit; font-size:.85rem; letter-spacing:.06em; }
.kujira-portfolio__modal-link[hidden] { display:none; }
.kujira-portfolio__modal-link:hover, .kujira-portfolio__modal-link:focus-visible { background:var(--kp-ink); color:#fff; }
.kujira-portfolio__close { position:absolute; top:10px; right:10px; z-index:2; width:40px; height:40px; border:0; border-radius:999px; background:rgba(255,255,255,.92); color:var(--kp-ink); font:inherit; font-size:1.5rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }

@media (max-width:767px) {
  .kujira-portfolio-page__inner { width:min(100% - 28px,1200px); padding-block:28px 48px; }
  .kujira-portfolio__grid { grid-template-columns:1fr; gap:14px; }
  .kujira-portfolio__dialog { grid-template-columns:1fr; }
  .kujira-portfolio__media { min-height:auto; }
  .kujira-portfolio__modal-img { max-height:48vh; }
  .kujira-portfolio__body { padding:24px 20px 28px; }
}

@media (prefers-reduced-motion:reduce) {
  .kujira-portfolio__filter::after,
  .kujira-portfolio__thumb,
  .kujira-portfolio__overlay,
  .kujira-portfolio__backdrop,
  .kujira-portfolio__dialog { transition:none !important; }
}