@import url('/portfolio/assets/styles.css?v=3');
.gallery-intro{padding-bottom:32px}
.portfolio-limitations{display:flex;align-items:flex-start;gap:16px;margin-bottom:36px;padding:24px 28px;background:#FFF7E8;border:1px solid #EED8AE;border-left:4px solid #BC7B16;border-radius:12px;color:#704A15}
.portfolio-limitations p{margin:0;font-size:16px;font-weight:650;line-height:1.85;word-break:keep-all;overflow-wrap:anywhere}
.limitations-icon{display:grid;place-items:center;flex:0 0 24px;height:24px;margin-top:3px;border:1.5px solid currentColor;border-radius:50%;font-size:15px;font-weight:750;line-height:1}
@media(max-width:760px){.gallery-intro{padding-bottom:24px}.portfolio-limitations{gap:12px;padding:18px 16px;margin-bottom:28px}.portfolio-limitations p{font-size:13px;line-height:1.85}.limitations-icon{flex-basis:20px;height:20px;font-size:13px;margin-top:2px}}
/* Photography supplies context; the actual interface is the primary subject. */
.project-preview{background:#28343C;isolation:isolate;aspect-ratio:3/2}
.project-preview::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#111D2510 0%,#111D2520 45%,#111D2570 100%);z-index:0;pointer-events:none}
.project-preview>.project-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;filter:saturate(.82)}
/* Collection covers use one symbolic illustration without the browser overlay. */
.project-preview.project-symbolic{background:#f4eee7}
.project-preview.project-symbolic::after{display:none}
.project-preview.project-symbolic>.project-scene{object-position:center;filter:none}
.project-preview .image-label{z-index:3;background:#FFFFFFE8;color:#263447;box-shadow:0 2px 10px #00000008}
.browser-preview{position:absolute;z-index:2;left:7%;top:23%;width:88%;border:1px solid #FFFFFFB8;border-radius:9px;overflow:hidden;background:white;box-shadow:0 16px 40px #07132155;transform:rotate(-2deg);transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.browser-chrome{height:24px;padding:0 11px;display:flex;align-items:center;gap:12px;background:#F8FAFD;color:#6C7787;font:9px Arial,sans-serif;border-bottom:1px solid #DEE4EC;white-space:nowrap}
.browser-dots{color:#B2BBC8;letter-spacing:2px;font-size:7px}.browser-domain{margin-left:auto;font-size:8px;color:#8994A4}
.project-preview .project-screen{width:100%;height:auto;object-fit:contain;object-position:top;transform:none!important;transition:none}
.project-open:hover .browser-preview{transform:translateY(-5px) rotate(0deg)}
.project-preview .image-open{z-index:4;background:#17243C;color:white;box-shadow:0 4px 15px #00000020}
.project-preview[data-project="artagency"] .browser-preview,.project-preview[data-project="purchaseagency"] .browser-preview{transform:rotate(2deg);left:5%}
.project-open:hover .project-preview[data-project="artagency"] .browser-preview,.project-open:hover .project-preview[data-project="purchaseagency"] .browser-preview{transform:translateY(-5px) rotate(0deg)}
.cover-mosaic .mosaic-main img{padding:0;object-fit:cover;object-position:top left}
.cover-mosaic .mosaic-main>span{background:#FFFFFFF0;left:0;bottom:0;right:0;padding:10px 16px}
.cover-mosaic .mosaic-small img{object-position:top left}
@media(max-width:760px){.browser-preview{border-radius:6px;top:24%}.browser-chrome{height:18px;padding:0 7px;font-size:7px;gap:8px}.browser-dots{font-size:5px;letter-spacing:1px}.browser-domain{font-size:6px}.project-preview .image-label{font-size:9px;padding:6px 9px}.cover-mosaic .mosaic-main img{object-position:45% top}.cover-mosaic .mosaic-small img{object-position:25% top}}

/* Keep the technology summary below each project's existing content. */
.project-environment{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;align-items:baseline;margin-top:16px;padding-top:12px;border-top:1px solid #e4eaf1;text-align:left}
.project-environment .environment-label{font-size:12px;font-weight:700;line-height:1.65;color:#596579;white-space:nowrap}
.project-environment p{margin:0;font-size:13px;font-weight:500;line-height:1.65;color:#263447;word-break:keep-all;overflow-wrap:anywhere}
@media(max-width:760px){.project-environment{margin:14px 14px 6px;gap:8px}.project-environment p{font-size:12px}}

@media(max-width:760px){.gallery-intro-copy>p:first-child{display:block;font-size:17px;line-height:1.6;margin:0 0 10px}}

/* Every category stays reachable with keyboard and touch on narrow screens. */
#collection .collection-toolbar{align-items:flex-start;flex-wrap:wrap;gap:16px;margin-bottom:28px}
#collection #filters{display:flex;flex:1 1 760px;flex-wrap:wrap;gap:8px;min-width:0;overflow:visible}
#collection .filter{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;max-width:100%;padding:10px 14px;border:1px solid var(--line);background:var(--white);font-size:13px;line-height:1.4;white-space:normal}
#collection .filter:hover{background:var(--ice)}
#collection .filter[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--white)}
#collection .filter-count{font-size:11px;font-weight:500;font-variant-numeric:tabular-nums;opacity:.8}
#collection #project-count{display:block;white-space:normal;overflow-wrap:anywhere;line-height:1.6;font-size:13px}
#collection .filter:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
@media(max-width:760px){
  #collection .filter{padding:10px 12px;font-size:12px;gap:6px}
  #collection .collection-toolbar{margin-bottom:20px;padding-bottom:18px}
}

/* A compact account guide beside the collection heading. */
#gallery-view .gallery-intro {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 36px;
}
#gallery-view .gallery-intro-copy {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 46px;
  align-items: center;
  gap: 20px;
  padding: 26px;
  min-width: 0;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(115deg, #f0f5ff, #eaf1ff);
  color: #18253e;
}
#gallery-view .gallery-login-icon {
  display: grid;
  place-items: center;
  align-self: start;
  width: 48px;
  height: 50px;
  border-radius: 12px;
  background: #e0eaff;
  color: #3566ff;
}
#gallery-view .gallery-login-icon svg { width: 28px; height: 28px; }
#gallery-view .gallery-login-content { min-width: 0; }
#gallery-view .gallery-intro-copy .gallery-login-title {
  margin: 0 0 10px;
  color: #18253e;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -.04em;
  word-break: keep-all;
}
#gallery-view .gallery-login-title .gallery-login-label { color: #315eff; font-weight: 800; white-space: nowrap; }
#gallery-view .gallery-intro-copy .gallery-login-guide {
  margin: 0;
  color: #667897;
  font-size: 15px;
  line-height: 1.65;
  letter-spacing: -.025em;
  word-break: keep-all;
}
#gallery-view .gallery-login-guide strong { color: #566a89; font-weight: 700; }
#gallery-view .gallery-login-arrow {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(145deg, #4474ff, #2455f5);
  color: #fff;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
#gallery-view .gallery-login-arrow svg { width: 25px; height: 25px; }
#gallery-view .gallery-login-arrow:hover { transform: translateX(3px); box-shadow: 0 5px 16px #315eff30; }
#gallery-view .gallery-login-arrow:focus-visible { outline: 3px solid #18253e; outline-offset: 4px; }
#collection { scroll-margin-top: 24px; }
@media (min-width: 761px) and (max-width: 1080px) {
  #gallery-view .gallery-intro { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 760px) {
  #gallery-view .gallery-intro { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  #gallery-view .gallery-intro-copy { grid-template-columns: 38px minmax(0, 1fr) 44px; gap: 12px; padding: 20px 16px; }
  #gallery-view .gallery-login-icon { width: 38px; height: 40px; border-radius: 10px; }
  #gallery-view .gallery-login-icon svg { width: 24px; height: 24px; }
  #gallery-view .gallery-intro-copy .gallery-login-title { font-size: 18px; margin-bottom: 8px; }
  #gallery-view .gallery-intro-copy .gallery-login-guide { font-size: 14px; }
  #gallery-view .gallery-login-arrow { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  #gallery-view .gallery-login-arrow { transition: none; }
  #gallery-view .gallery-login-arrow:hover { transform: none; }
}