*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#f4f3ef;--ink:#18181b;--muted:#66666f;--line:#d8d6d1;--blue:#2459d3;--sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}.site-header{align-items:center;background:rgba(244,243,239,.92);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;padding:17px 40px;position:sticky;top:0;z-index:30;backdrop-filter:blur(12px)}.site-name{font-size:14px;font-weight:650}.site-header nav{display:flex;gap:22px}.site-header nav a{color:var(--muted);font-size:13px}.site-header nav a:hover{color:var(--ink)}.intro{border-bottom:1px solid var(--line);display:grid;gap:64px;grid-template-columns:minmax(0,1fr) 380px;padding:92px 40px 76px}.eyebrow{color:#939198;font-size:11px;font-weight:650;letter-spacing:.09em;margin-bottom:17px;text-transform:uppercase}.intro h1{font-size:clamp(42px,6vw,76px);font-weight:560;letter-spacing:-.045em;line-height:1.02;max-width:900px}.intro-copy{color:var(--muted);font-size:17px;line-height:1.75;margin-top:28px;max-width:720px}.intro-actions{display:flex;gap:12px;margin-top:32px}.button{border-radius:7px;font-size:14px;font-weight:600;padding:11px 18px}.button.primary{background:var(--ink);color:#fff}.button.primary:hover{opacity:.84}.button.secondary{border:1px solid var(--line);color:var(--muted)}.button.secondary:hover{border-color:#a8a6a0;color:var(--ink)}.availability-card{align-self:end;background:#171719;border-radius:14px;color:#fff;padding:28px 30px}.availability-status{align-items:center;color:#58d68d;display:flex;font-size:12px;font-weight:650;gap:9px}.availability-status span{background:#58d68d;border-radius:50%;box-shadow:0 0 0 4px rgba(88,214,141,.14);height:7px;width:7px}.availability-card h2{font-size:20px;font-weight:560;line-height:1.35;margin-top:18px}.availability-card>p{color:#a4a4ad;font-size:13px;line-height:1.65;margin-top:9px}.quick-links{border-top:1px solid #343438;display:flex;flex-direction:column;margin-top:22px;padding-top:14px}.quick-links a{align-items:center;color:#b7b7bf;display:flex;font-size:13px;justify-content:space-between;padding:6px 0}.quick-links a:hover{color:#fff}.project-intro{border-bottom:1px solid var(--line);padding:68px 40px}.project-intro h2,.bottom-grid h2{font-size:clamp(27px,4vw,42px);font-weight:550;letter-spacing:-.025em}.project-intro>p:last-child{color:var(--muted);font-size:16px;line-height:1.75;margin-top:18px;max-width:760px}.project{border-bottom:1px solid var(--line)}.project-visual{display:grid;grid-template-columns:285px minmax(0,1fr);height:430px;overflow:hidden}.trace-theme{background:#17365e}.wiki-theme{background:#181d2c}.port-theme{background:#183a2c}.project-identity{color:#fff;padding:38px 34px}.project-number{color:rgba(255,255,255,.32);font-size:11px;letter-spacing:.08em;margin-bottom:85px}.project-identity h2{font-size:35px;font-weight:550;letter-spacing:-.03em}.project-identity>p:not(.project-number){color:rgba(255,255,255,.5);font-size:12px;line-height:1.5;margin-top:8px}.live-status{align-items:center;color:rgba(255,255,255,.57);display:flex;font-size:12px;gap:7px;margin-top:18px}.live-status i{background:#54dc8d;border-radius:50%;height:6px;width:6px}.gallery-shell{min-width:0;padding-top:30px;position:relative}.gallery{display:flex;height:372px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.gallery::-webkit-scrollbar{display:none}.gallery figure{background:rgba(255,255,255,.05);border-radius:9px 0 0 0;flex:0 0 100%;height:100%;overflow:auto;scroll-snap-align:start;scrollbar-width:thin}.gallery img{display:block;width:100%}.gallery-arrow{align-items:center;background:rgba(0,0,0,.43);border:1px solid rgba(255,255,255,.27);border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:25px;height:34px;justify-content:center;position:absolute;top:190px;width:34px;z-index:10}.gallery-arrow:hover{background:rgba(0,0,0,.7)}.gallery-arrow.previous{left:13px}.gallery-arrow.next{right:13px}.gallery-dots{align-items:center;display:flex;gap:7px;height:28px;justify-content:center}.gallery-dots button{background:rgba(255,255,255,.22);border:0;border-radius:50%;cursor:pointer;height:5px;width:5px}.gallery-dots button.active{background:rgba(255,255,255,.8)}.project-details{display:grid;gap:56px;grid-template-columns:minmax(0,1fr) 320px;padding:44px 40px 50px}.project-copy{max-width:900px}.project-copy p{color:#4f4f57;font-size:15px;line-height:1.82;margin-top:14px}.project-copy .project-focus{color:var(--ink);font-size:19px;font-weight:550;line-height:1.55;margin-top:0}.project-meta>div{border-top:1px solid var(--line);padding:15px 0}.project-meta span{color:#aaa8ad;display:block;font-size:10px;font-weight:650;letter-spacing:.08em;margin-bottom:7px;text-transform:uppercase}.project-meta p,.project-links a{color:var(--muted);font-size:13px;line-height:1.6}.project-links{display:flex;flex-direction:column}.project-links a{color:var(--blue);font-weight:600;margin-bottom:5px}.project-links a:hover{opacity:.7}.portlore-preview{align-items:end;display:flex;gap:22px;min-width:0;overflow:hidden;padding:34px 35px 0 0;position:relative}.desktop-map-card{background:#e5eadf;border-radius:12px 12px 0 0;box-shadow:0 25px 60px rgba(0,0,0,.22);height:330px;overflow:hidden;position:relative;width:min(54%,650px)}.map-grid{background-image:linear-gradient(rgba(48,77,63,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(48,77,63,.09) 1px,transparent 1px);background-size:30px 30px;height:100%}.map-pin{background:#244e38;border:4px solid #f2f4eb;border-radius:50% 50% 50% 0;height:25px;position:absolute;transform:rotate(-45deg);width:25px}.map-pin.one{left:28%;top:28%}.map-pin.two{left:62%;top:46%}.map-pin.three{left:45%;top:67%}.map-caption{background:rgba(255,255,255,.92);bottom:18px;left:18px;padding:13px 15px;position:absolute;width:230px}.map-caption strong,.map-caption small{display:block}.map-caption strong{font-size:12px}.map-caption small{color:#6c746e;font-size:10px;margin-top:4px}.phone-mockup{background:#101412;border:5px solid #101412;border-radius:28px 28px 0 0;box-shadow:0 18px 50px rgba(0,0,0,.25);height:340px;padding:7px;width:180px}.phone-two{height:305px}.phone-screen{background:#f6f2e9;border-radius:18px 18px 0 0;color:#163325;height:100%;padding:18px 13px;position:relative}.phone-label{font-size:8px;font-weight:750;letter-spacing:.11em}.phone-hero{background:linear-gradient(135deg,#8da58f,#d4caa7);border-radius:8px;height:84px;margin:12px 0}.phone-screen strong{display:block;font-size:13px}.phone-screen small{color:#69746d;display:block;font-size:9px;line-height:1.4;margin-top:5px}.mini-card{background:#fff;border:1px solid #e1ddd4;border-radius:7px;height:54px;margin-top:14px}.mini-card.short{height:42px;margin-top:8px}.route-line{background:#8bac92;height:190px;left:30px;position:absolute;top:62px;width:2px}.route-stop{background:#24523b;border:4px solid #f6f2e9;border-radius:50%;height:14px;left:24px;position:absolute;top:68px;width:14px}.route-stop.second{top:145px}.route-stop.third{top:237px}.phone-two small{bottom:20px;left:48px;position:absolute}.bottom-grid{display:grid;grid-template-columns:1fr 1fr}.bottom-grid>div{padding:60px 40px}.bottom-grid>div:first-child{border-right:1px solid var(--line)}.bottom-grid>div>p:not(.eyebrow){color:var(--muted);font-size:15px;line-height:1.8;margin-top:17px;max-width:690px}.contact-list{display:flex;flex-direction:column}.contact-list a{align-items:center;border-top:1px solid var(--line);display:flex;justify-content:space-between;padding:14px 0}.contact-list a:last-child{border-bottom:1px solid var(--line)}.contact-list strong{font-size:14px;font-weight:600}.contact-list span{color:var(--muted);font-size:13px}.contact-list a:hover span{color:var(--ink)}footer{border-top:1px solid var(--line);color:#aaa8ad;display:flex;font-size:12px;justify-content:space-between;padding:18px 40px}@media(max-width:850px){.intro{grid-template-columns:1fr}.availability-card{align-self:auto}.project-visual{grid-template-columns:190px 1fr}.project-details{grid-template-columns:1fr}.bottom-grid{grid-template-columns:1fr}.bottom-grid>div:first-child{border-bottom:1px solid var(--line);border-right:0}.portlore-preview{gap:12px}.desktop-map-card{width:48%}.phone-mockup{width:150px}}@media(max-width:620px){.site-header{padding:14px 18px}.site-header nav{gap:14px}.site-header nav a:nth-child(2){display:none}.intro{gap:34px;padding:56px 18px 44px}.intro h1{font-size:43px}.intro-actions{align-items:stretch;flex-direction:column}.button{text-align:center}.project-intro{padding:46px 18px}.project-visual{display:block;height:auto}.project-identity{padding:25px 18px}.project-number{margin-bottom:28px}.project-identity h2{font-size:29px}.gallery-shell{padding:0 0 0 18px}.gallery{height:250px}.gallery-arrow{top:106px}.project-details{gap:35px;padding:32px 18px 38px}.project-copy .project-focus{font-size:18px}.portlore-preview{height:300px;padding:12px 12px 0 18px}.desktop-map-card{height:255px;min-width:190px}.phone-mockup{height:270px;min-width:135px}.phone-two{display:none}.bottom-grid>div{padding:44px 18px}.contact-list a{align-items:flex-start;gap:10px}.contact-list span{text-align:right}footer{padding:16px 18px}.site-header nav a:first-child{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.gallery-arrow {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 0;
  top: calc(50% - 16px);
}
.gallery-arrow:hover { background: rgba(0,0,0,.65); }
.gallery-arrow svg { display: block; flex: 0 0 auto; }

.gallery-shell:not(.portlore-desktop-shell)::before,
.gallery-shell:not(.portlore-desktop-shell)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 24px;
  pointer-events: none;
  z-index: 6;
  transition: opacity .25s;
}
.gallery-shell:not(.portlore-desktop-shell)::before {
  top: 30px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(to bottom, rgba(255,255,255,.22) 0%, transparent 100%);
  opacity: 0;
}
.gallery-shell:not(.portlore-desktop-shell)::after {
  bottom: 28px;
  background: linear-gradient(to top, rgba(255,255,255,.22) 0%, transparent 100%);
  opacity: 1;
}
.gallery-shell:not(.portlore-desktop-shell).scrolled::before { opacity: 1; }
.gallery-shell:not(.portlore-desktop-shell).at-bottom::after { opacity: 0; }

.portlore-gallery-wrap {
  min-width: 0;
  padding-top: 20px;
  position: relative;
}
.portlore-tabs {
  display: flex;
  gap: 8px;
  padding: 0 18px 10px;
}
.portlore-tab {
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: rgba(255,255,255,.58);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 13px;
}
.portlore-tab.active {
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.28);
  color: #fff;
}
.portlore-panel[hidden] { display: none; }
.portlore-desktop-shell {
  height: 360px;
  padding-top: 0;
}
.portlore-desktop-shell::before,
.portlore-desktop-shell::after { display: none; }
.portlore-desktop-shell .gallery {
  height: 332px;
}
.portlore-desktop-shell .gallery figure {
  background: transparent;
  border-radius: 0;
}
.portlore-desktop-shell .gallery img { opacity: .94; }
.portlore-desktop-shell .gallery-arrow { top: calc(50% - 14px); }

.mobile-carousel-shell {
  height: 360px;
  min-width: 0;
  overflow: hidden;
  position: relative;
}
.mobile-carousel-viewport {
  height: 328px;
  overflow: hidden;
  position: relative;
  touch-action: pan-y;
}
.mobile-carousel-track {
  height: 100%;
  position: relative;
}
.mobile-carousel-card {
  background: #0f1311;
  border: 4px solid #0f1311;
  border-radius: 25px 25px 0 0;
  box-shadow: 0 18px 38px rgba(0,0,0,.24);
  height: 285px;
  left: 50%;
  opacity: .52;
  overflow-y: auto;
  position: absolute;
  top: 26px;
  transform: translateX(-50%) scale(.78);
  transition: left .28s ease, opacity .28s ease, transform .28s ease;
  width: 142px;
  scrollbar-width: none;
}
.mobile-carousel-card::-webkit-scrollbar { display: none; }
.mobile-carousel-card img {
  border-radius: 17px 17px 0 0;
  display: block;
  width: 100%;
}
.mobile-carousel-card.position-prev { left: 17%; }
.mobile-carousel-card.position-current {
  height: 320px;
  left: 50%;
  opacity: 1;
  top: 8px;
  transform: translateX(-50%) scale(1);
  width: 178px;
  z-index: 2;
}
.mobile-carousel-card.position-next { left: 83%; }
.mobile-carousel-track.shift-next .position-prev {
  left: -16%;
  opacity: 0;
}
.mobile-carousel-track.shift-next .position-current {
  height: 285px;
  left: 17%;
  opacity: .52;
  top: 26px;
  transform: translateX(-50%) scale(.78);
  width: 142px;
}
.mobile-carousel-track.shift-next .position-next {
  height: 320px;
  left: 50%;
  opacity: 1;
  top: 8px;
  transform: translateX(-50%) scale(1);
  width: 178px;
  z-index: 2;
}
.mobile-carousel-track.shift-previous .position-prev {
  height: 320px;
  left: 50%;
  opacity: 1;
  top: 8px;
  transform: translateX(-50%) scale(1);
  width: 178px;
  z-index: 2;
}
.mobile-carousel-track.shift-previous .position-current {
  height: 285px;
  left: 83%;
  opacity: .52;
  top: 26px;
  transform: translateX(-50%) scale(.78);
  width: 142px;
}
.mobile-carousel-track.shift-previous .position-next {
  left: 116%;
  opacity: 0;
}
.mobile-carousel-track.resetting .mobile-carousel-card { transition: none; }
.mobile-carousel-shell .gallery-arrow { top: 150px; }
.mobile-carousel-shell .gallery-dots { height: 32px; }

@media(max-width:850px) {
  .mobile-carousel-card.position-prev { left: 14%; }
  .mobile-carousel-card.position-next { left: 86%; }
}

@media(max-width:620px) {
  .gallery-shell:not(.portlore-desktop-shell)::before { top: 0; }
  .gallery-shell:not(.portlore-desktop-shell)::after { bottom: 28px; }
  .portlore-gallery-wrap { padding-top: 8px; }
  .portlore-tabs { padding: 0 18px 8px; }
  .portlore-desktop-shell { height: 280px; padding-left: 0; }
  .portlore-desktop-shell .gallery { height: 252px; }
  .portlore-desktop-shell .gallery-arrow.previous { left: 12px; }
  .portlore-desktop-shell .gallery-arrow.next { right: 12px; }
  .mobile-carousel-shell { height: 300px; }
  .mobile-carousel-viewport { height: 270px; }
  .mobile-carousel-card {
    height: 225px;
    top: 28px;
    width: 112px;
  }
  .mobile-carousel-card.position-current,
  .mobile-carousel-track.shift-next .position-next,
  .mobile-carousel-track.shift-previous .position-prev {
    height: 262px;
    top: 7px;
    width: 146px;
  }
  .mobile-carousel-track.shift-next .position-current,
  .mobile-carousel-track.shift-previous .position-current {
    height: 225px;
    top: 28px;
    width: 112px;
  }
  .mobile-carousel-card.position-prev { left: 12%; }
  .mobile-carousel-card.position-next { left: 88%; }
  .mobile-carousel-track.shift-next .position-current { left: 12%; }
  .mobile-carousel-track.shift-previous .position-current { left: 88%; }
  .mobile-carousel-shell .gallery-arrow { top: 126px; }
}

.portlore-tab {
  background: transparent;
  border-color: transparent;
  border-radius: 6px;
  color: rgba(255,255,255,.58);
  padding: 7px 12px;
}
.portlore-tab:hover {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.82);
}
.portlore-tab.active,
.portlore-tab[aria-selected="true"] {
  background: #fff;
  border-color: #fff;
  color: #183a2c;
}

.portlore-desktop-shell::before,
.portlore-desktop-shell::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  height: 24px;
  pointer-events: none;
  z-index: 6;
  transition: opacity .25s;
}
.portlore-desktop-shell::before {
  top: 0;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(to bottom, rgba(255,255,255,.22) 0%, transparent 100%);
  opacity: 0;
}
.portlore-desktop-shell::after {
  bottom: 28px;
  background: linear-gradient(to top, rgba(255,255,255,.22) 0%, transparent 100%);
  opacity: 1;
}
.portlore-desktop-shell.scrolled::before { opacity: 1; }
.portlore-desktop-shell.at-bottom::after { opacity: 0; }
.portlore-desktop-shell .gallery figure {
  border: 0;
  box-shadow: none;
}

.mobile-carousel-shell {
  height: 370px;
}
.mobile-carousel-viewport {
  height: 340px;
}
.mobile-carousel-card {
  height: 312px;
  top: 18px;
  width: 139px;
  transform: translateX(-50%) scale(.9);
}
.mobile-carousel-card.position-prev { left: 29%; }
.mobile-carousel-card.position-current {
  height: 336px;
  top: 2px;
  width: 150px;
}
.mobile-carousel-card.position-next { left: 71%; }
.mobile-carousel-track.shift-next .position-prev { left: 8%; }
.mobile-carousel-track.shift-next .position-current {
  height: 312px;
  left: 29%;
  top: 18px;
  transform: translateX(-50%) scale(.9);
  width: 139px;
}
.mobile-carousel-track.shift-next .position-next {
  height: 336px;
  left: 50%;
  top: 2px;
  width: 150px;
}
.mobile-carousel-track.shift-previous .position-prev {
  height: 336px;
  left: 50%;
  top: 2px;
  width: 150px;
}
.mobile-carousel-track.shift-previous .position-current {
  height: 312px;
  left: 71%;
  top: 18px;
  transform: translateX(-50%) scale(.9);
  width: 139px;
}
.mobile-carousel-track.shift-previous .position-next { left: 92%; }
.mobile-carousel-shell .gallery-arrow { top: 165px; }
.mobile-carousel-shell .gallery-dots { height: 30px; }

@media(max-width:850px) {
  .mobile-carousel-card.position-prev { left: 27%; }
  .mobile-carousel-card.position-next { left: 73%; }
  .mobile-carousel-track.shift-next .position-current { left: 27%; }
  .mobile-carousel-track.shift-previous .position-current { left: 73%; }
}

@media(max-width:620px) {
  .portlore-tab { padding: 7px 11px; }
  .mobile-carousel-shell { height: 330px; }
  .mobile-carousel-viewport { height: 300px; }
  .mobile-carousel-card {
    height: 270px;
    top: 18px;
    width: 120px;
  }
  .mobile-carousel-card.position-prev { left: 25%; }
  .mobile-carousel-card.position-current,
  .mobile-carousel-track.shift-next .position-next,
  .mobile-carousel-track.shift-previous .position-prev {
    height: 296px;
    top: 2px;
    width: 132px;
  }
  .mobile-carousel-card.position-next { left: 75%; }
  .mobile-carousel-track.shift-next .position-current {
    height: 270px;
    left: 25%;
    top: 18px;
    width: 120px;
  }
  .mobile-carousel-track.shift-previous .position-current {
    height: 270px;
    left: 75%;
    top: 18px;
    width: 120px;
  }
  .mobile-carousel-shell .gallery-arrow { top: 145px; }
}

.portfolio-layout .project {
  align-items: center;
  display: grid;
  gap: clamp(42px, 6vw, 78px);
  grid-template-columns: minmax(0, 1fr) minmax(420px, 560px);
  padding: 78px 40px;
}

.portfolio-layout .project .project-details {
  display: block;
  padding: 0;
}

.portfolio-layout .project .project-meta {
  margin-top: 34px;
}

.portfolio-layout #tracetray .project-details,
.portfolio-layout #portlore .project-details {
  order: 1;
}

.portfolio-layout #tracetray .project-visual,
.portfolio-layout #portlore .project-visual {
  order: 2;
}

.portfolio-layout #wikiracr .project-visual {
  order: 1;
}

.portfolio-layout #wikiracr .project-details {
  order: 2;
}

.portfolio-layout .project-visual {
  aspect-ratio: 1;
  position: relative;
  border-radius: 18px;
  box-shadow: 0 26px 70px rgba(25, 25, 29, .14);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 132px minmax(0, 1fr);
  height: auto;
  min-width: 0;
  overflow: hidden;
  width: 100%;
}

.portfolio-layout .project-identity {
  align-content: center;
  display: grid;
  padding: 24px 30px 20px;
  position: relative;
}

.portfolio-layout .project-number {
  margin: 0;
  position: absolute;
  right: 28px;
  top: 24px;
}

.portfolio-layout .project-identity h2 {
  font-size: 32px;
}

.portfolio-layout .project-identity > p:not(.project-number) {
  margin-top: 6px;
}

.portfolio-layout .live-status {
  margin-top: 12px;
}

.portfolio-layout .gallery-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding-top: 0;
}

.portfolio-layout .gallery-shell .gallery {
  flex: 1;
  height: auto;
  min-height: 0;
}

.portfolio-layout .gallery-shell .gallery-dots {
  flex: 0 0 28px;
}

.portfolio-layout .gallery-shell .gallery-arrow {
  top: calc(50% - 14px);
}

.portfolio-layout .gallery-shell:not(.portlore-desktop-shell)::before,
.portfolio-layout .portlore-desktop-shell::before {
  top: 0;
}

.portfolio-layout .gallery-shell:not(.portlore-desktop-shell)::after,
.portfolio-layout .portlore-desktop-shell::after {
  bottom: 28px;
}

.portfolio-layout .project-copy .project-focus {
  font-size: clamp(21px, 2.1vw, 28px);
  line-height: 1.35;
}

.portfolio-layout .project-copy p {
  font-size: 15px;
  line-height: 1.78;
}

.portfolio-layout .project-meta {
  display: grid;
  gap: 0 24px;
  grid-template-columns: 1fr 1fr;
}

.portfolio-layout .project-meta .project-links {
  grid-column: 1 / -1;
}

.portfolio-layout .portlore-gallery-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding-top: 10px;
}

.portfolio-layout .portlore-tabs {
  flex: 0 0 auto;
  padding-bottom: 8px;
}

.portfolio-layout .portlore-panel {
  flex: 1;
  min-height: 0;
}

.portfolio-layout .portlore-panel.active {
  display: flex;
  min-height: 0;
}

.portfolio-layout .portlore-desktop-shell {
  flex: 1;
  height: auto;
  min-height: 0;
}

.portfolio-layout .portlore-desktop-shell .gallery {
  height: auto;
}

.portfolio-layout .mobile-carousel-shell {
  flex: 1;
  height: auto;
  min-height: 0;
  width: 100%;
}

.portfolio-layout .mobile-carousel-viewport {
  height: calc(100% - 30px);
  min-height: 0;
}

.portfolio-layout .mobile-carousel-track {
  height: 100%;
}

.portfolio-layout .mobile-carousel-card {
  height: 86%;
  top: 7%;
  width: 126px;
}

.portfolio-layout .mobile-carousel-card.position-prev {
  left: 28%;
}

.portfolio-layout .mobile-carousel-card.position-current {
  height: 96%;
  top: 1%;
  width: 150px;
}

.portfolio-layout .mobile-carousel-card.position-next {
  left: 72%;
}

.portfolio-layout .mobile-carousel-track.shift-next .position-current {
  height: 86%;
  left: 28%;
  top: 7%;
  width: 126px;
}

.portfolio-layout .mobile-carousel-track.shift-next .position-next,
.portfolio-layout .mobile-carousel-track.shift-previous .position-prev {
  height: 96%;
  top: 1%;
  width: 150px;
}

.portfolio-layout .mobile-carousel-track.shift-previous .position-current {
  height: 86%;
  left: 72%;
  top: 7%;
  width: 126px;
}

.portfolio-layout .mobile-carousel-shell .gallery-arrow {
  top: calc(50% - 15px);
}

@media (max-width: 980px) {
  .portfolio-layout .project {
    gap: 40px;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 470px);
  }

  .portfolio-layout .project-meta {
    grid-template-columns: 1fr;
  }

  .portfolio-layout .project-meta .project-links {
    grid-column: auto;
  }
}

@media (max-width: 790px) {
  .portfolio-layout .project {
    display: flex;
    flex-direction: column;
    padding: 54px 20px;
  }

  .portfolio-layout .project .project-visual,
  .portfolio-layout .project .project-details {
    order: initial;
    width: 100%;
  }

  .portfolio-layout .project-visual {
    max-width: 600px;
  }

  .portfolio-layout .project-details {
    max-width: 650px;
  }
}

@media (max-width: 520px) {
  .portfolio-layout .project {
    padding-inline: 16px;
  }

  .portfolio-layout .project-visual {
    border-radius: 14px;
    grid-template-rows: 118px minmax(0, 1fr);
  }

  .portfolio-layout .project-identity {
    padding: 20px 22px 16px;
  }

  .portfolio-layout .project-number {
    right: 20px;
    top: 20px;
  }

  .portfolio-layout .project-identity h2 {
    font-size: 28px;
  }

  .portfolio-layout .mobile-carousel-card.position-prev {
    left: 24%;
  }

  .portfolio-layout .mobile-carousel-card.position-next {
    left: 76%;
  }

  .portfolio-layout .mobile-carousel-track.shift-next .position-current {
    left: 24%;
  }

  .portfolio-layout .mobile-carousel-track.shift-previous .position-current {
    left: 76%;
  }
}

.portfolio-layout .project {
  gap: clamp(36px, 5vw, 64px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.portfolio-layout .project-visual,
.portfolio-layout .project-details {
  min-width: 0;
  width: 100%;
}

.portfolio-layout .mobile-carousel-card {
  transition: left .28s ease, top .28s ease, width .28s ease, height .28s ease, opacity .28s ease, transform .28s ease;
}

.portfolio-layout .mobile-carousel-card.position-prev {
  left: 34%;
}

.portfolio-layout .mobile-carousel-card.position-next {
  left: 66%;
}

.portfolio-layout .mobile-carousel-track.shift-next .position-prev {
  left: 18%;
}

.portfolio-layout .mobile-carousel-track.shift-next .position-current {
  left: 34%;
}

.portfolio-layout .mobile-carousel-track.shift-previous .position-current {
  left: 66%;
}

.portfolio-layout .mobile-carousel-track.shift-previous .position-next {
  left: 82%;
}

@media (max-width: 980px) {
  .portfolio-layout .project {
    gap: 36px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 790px) {
  .portfolio-layout .project {
    display: flex;
  }
}

@media (max-width: 520px) {
  .portfolio-layout .mobile-carousel-card.position-prev {
    left: 32%;
  }

  .portfolio-layout .mobile-carousel-card.position-next {
    left: 68%;
  }

  .portfolio-layout .mobile-carousel-track.shift-next .position-current {
    left: 32%;
  }

  .portfolio-layout .mobile-carousel-track.shift-previous .position-current {
    left: 68%;
  }
}

.portfolio-layout .project-visual {
  aspect-ratio: auto;
  align-self: center;
  grid-template-rows: 132px auto;
}

.portfolio-layout .gallery-shell {
  height: auto;
}

.portfolio-layout .gallery-shell .gallery {
  aspect-ratio: 2.02 / 1;
  flex: none;
  height: auto;
}

.portfolio-layout .gallery-shell .gallery figure {
  height: 100%;
}

.portfolio-layout .gallery-shell .gallery-dots {
  flex: 0 0 28px;
  margin: 0;
}

.portfolio-layout .portlore-gallery-wrap {
  height: auto;
}

.portfolio-layout .portlore-panel,
.portfolio-layout .portlore-panel.active,
.portfolio-layout .portlore-desktop-shell {
  flex: none;
  height: auto;
}

.portfolio-layout .portlore-desktop-shell .gallery {
  aspect-ratio: 2.02 / 1;
  height: auto;
}

.portfolio-layout .mobile-carousel-shell {
  flex: none;
  height: 350px;
}

.portfolio-layout .mobile-carousel-viewport {
  height: 320px;
}

@media (max-width: 520px) {
  .portfolio-layout .project-visual {
    grid-template-rows: 118px auto;
  }

  .portfolio-layout .mobile-carousel-shell {
    height: 320px;
  }

  .portfolio-layout .mobile-carousel-viewport {
    height: 290px;
  }
}

@media (min-width: 791px) {
  .portfolio-layout .project {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }

  .portfolio-layout #wikiracr {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
}

.portfolio-layout .project-visual {
  max-width: none;
}

.portfolio-layout .portlore-desktop-shell,
.portfolio-layout .portlore-desktop-shell .gallery {
  height: auto;
  min-height: 0;
}

.portfolio-layout .portlore-desktop-shell .gallery {
  aspect-ratio: 1914 / 945;
  flex: none;
  width: 100%;
}

.portfolio-layout .portlore-desktop-shell .gallery figure {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.portfolio-layout #portlore .project-visual {
  grid-template-rows: 112px auto;
}

.portfolio-layout #portlore .project-identity {
  padding-bottom: 14px;
  padding-top: 18px;
}

.portfolio-layout #portlore .portlore-gallery-wrap {
  padding-top: 0;
}

.portfolio-layout #portlore .portlore-tabs {
  padding-bottom: 4px;
  position: relative;
  z-index: 12;
}

.portfolio-layout .mobile-carousel-shell {
  height: 440px;
  margin-top: -20px;
}

.portfolio-layout .mobile-carousel-viewport {
  height: 410px;
}

.portfolio-layout .mobile-carousel-card {
  border-radius: 27px;
  height: 370px;
  overflow: hidden;
  top: 28px;
  width: 165px;
}

.portfolio-layout .mobile-carousel-card img {
  border-radius: 19px;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.portfolio-layout .mobile-carousel-card.position-prev {
  left: 35%;
}

.portfolio-layout .mobile-carousel-card.position-current {
  height: 405px;
  top: 2px;
  width: 181px;
}

.portfolio-layout .mobile-carousel-card.position-next {
  left: 65%;
}

.portfolio-layout .mobile-carousel-track.shift-next .position-prev {
  left: 20%;
}

.portfolio-layout .mobile-carousel-track.shift-next .position-current {
  height: 370px;
  left: 35%;
  top: 28px;
  width: 165px;
}

.portfolio-layout .mobile-carousel-track.shift-next .position-next,
.portfolio-layout .mobile-carousel-track.shift-previous .position-prev {
  height: 405px;
  top: 2px;
  width: 181px;
}

.portfolio-layout .mobile-carousel-track.shift-previous .position-current {
  height: 370px;
  left: 65%;
  top: 28px;
  width: 165px;
}

.portfolio-layout .mobile-carousel-track.shift-previous .position-next {
  left: 80%;
}

.portfolio-layout .mobile-carousel-shell .gallery-arrow {
  top: 197px;
}

@media (max-width: 790px) {
  .portfolio-layout .mobile-carousel-shell {
    height: 400px;
    margin-top: -12px;
  }

  .portfolio-layout .mobile-carousel-viewport {
    height: 370px;
  }

  .portfolio-layout .mobile-carousel-card {
    height: 332px;
    top: 25px;
    width: 148px;
  }

  .portfolio-layout .mobile-carousel-card.position-current,
  .portfolio-layout .mobile-carousel-track.shift-next .position-next,
  .portfolio-layout .mobile-carousel-track.shift-previous .position-prev {
    height: 365px;
    top: 2px;
    width: 163px;
  }

  .portfolio-layout .mobile-carousel-track.shift-next .position-current,
  .portfolio-layout .mobile-carousel-track.shift-previous .position-current {
    height: 332px;
    top: 25px;
    width: 148px;
  }

  .portfolio-layout .mobile-carousel-shell .gallery-arrow {
    top: 180px;
  }
}

@media (max-width: 520px) {
  .portfolio-layout #portlore .project-visual {
    grid-template-rows: 104px auto;
  }

  .portfolio-layout .mobile-carousel-shell {
    height: 360px;
  }

  .portfolio-layout .mobile-carousel-viewport {
    height: 330px;
  }

  .portfolio-layout .mobile-carousel-card {
    height: 296px;
    top: 22px;
    width: 132px;
  }

  .portfolio-layout .mobile-carousel-card.position-current,
  .portfolio-layout .mobile-carousel-track.shift-next .position-next,
  .portfolio-layout .mobile-carousel-track.shift-previous .position-prev {
    height: 326px;
    top: 2px;
    width: 146px;
  }

  .portfolio-layout .mobile-carousel-track.shift-next .position-current,
  .portfolio-layout .mobile-carousel-track.shift-previous .position-current {
    height: 296px;
    top: 22px;
    width: 132px;
  }

  .portfolio-layout .mobile-carousel-card.position-prev,
  .portfolio-layout .mobile-carousel-track.shift-next .position-current {
    left: 34%;
  }

  .portfolio-layout .mobile-carousel-card.position-next,
  .portfolio-layout .mobile-carousel-track.shift-previous .position-current {
    left: 66%;
  }

  .portfolio-layout .mobile-carousel-shell .gallery-arrow {
    top: 158px;
  }
}

.portfolio-layout .portlore-desktop-shell {
  height: 328px;
  min-height: 0;
}

.portfolio-layout .portlore-desktop-shell .gallery {
  aspect-ratio: auto;
  height: 300px;
  min-height: 0;
}

.portfolio-layout .portlore-desktop-shell .gallery figure {
  height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
}

.portfolio-layout .portlore-desktop-shell .gallery img {
  height: auto;
  object-fit: initial;
  width: 100%;
}

.portfolio-layout #portlore .project-visual {
  grid-template-rows: 104px auto;
  overflow: visible;
}

.portfolio-layout #portlore .portlore-gallery-wrap {
  overflow: visible;
}

.portfolio-layout #portlore .portlore-tabs {
  order: 2;
}

.portfolio-layout .portlore-panel[data-portlore-panel="mobile"] {
  margin-top: -76px;
  overflow: visible;
}

.portfolio-layout .mobile-carousel-shell {
  height: 520px;
  margin-top: 0;
  overflow: visible;
}

.portfolio-layout .mobile-carousel-viewport {
  height: 488px;
  overflow: hidden;
}

.portfolio-layout .mobile-carousel-track {
  height: 100%;
  overflow: visible;
}

.portfolio-layout .mobile-carousel-card {
  border: 5px solid #0f1311;
  border-radius: 31px;
  bottom: 4px;
  box-shadow: 0 18px 38px rgba(0,0,0,.24);
  height: 458px;
  left: 50%;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  top: auto;
  transform: translateX(-50%) scale(.7);
  transition: left .42s cubic-bezier(.22,.61,.36,1), opacity .42s ease, transform .42s cubic-bezier(.22,.61,.36,1);
  width: 204px;
}

.portfolio-layout .mobile-carousel-card img {
  border-radius: 23px;
  height: 100%;
  object-fit: cover;
  object-position: top;
  width: 100%;
}

.portfolio-layout .mobile-carousel-card.position-far-prev {
  left: 8%;
  opacity: 0;
  transform: translateX(-50%) scale(.7);
  z-index: 0;
}

.portfolio-layout .mobile-carousel-card.position-prev {
  left: 31%;
  opacity: .56;
  transform: translateX(-50%) scale(.83);
  z-index: 1;
}

.portfolio-layout .mobile-carousel-card.position-current {
  left: 50%;
  opacity: 1;
  transform: translateX(-50%) scale(1);
  z-index: 3;
}

.portfolio-layout .mobile-carousel-card.position-next {
  left: 69%;
  opacity: .56;
  transform: translateX(-50%) scale(.83);
  z-index: 1;
}

.portfolio-layout .mobile-carousel-card.position-far-next {
  left: 92%;
  opacity: 0;
  transform: translateX(-50%) scale(.7);
  z-index: 0;
}

.portfolio-layout .mobile-carousel-card.position-exit-left {
  left: -15%;
  opacity: 0;
  transform: translateX(-50%) scale(.64);
}

.portfolio-layout .mobile-carousel-card.position-exit-right {
  left: 115%;
  opacity: 0;
  transform: translateX(-50%) scale(.64);
}

.portfolio-layout .mobile-carousel-track.resetting .mobile-carousel-card {
  transition: none;
}

.portfolio-layout .mobile-carousel-shell .gallery-arrow {
  top: 236px;
}

.portfolio-layout .mobile-carousel-shell .gallery-dots {
  height: 32px;
}

@media (max-width: 790px) {
  .portfolio-layout .portlore-panel[data-portlore-panel="mobile"] {
    margin-top: -56px;
  }

  .portfolio-layout .mobile-carousel-shell {
    height: 480px;
  }

  .portfolio-layout .mobile-carousel-viewport {
    height: 448px;
  }

  .portfolio-layout .mobile-carousel-card {
    height: 420px;
    width: 187px;
  }
}

.portfolio-layout .portlore-desktop-shell {
  height: auto;
  min-height: 0;
  width: 100%;
}

.portfolio-layout .portlore-desktop-shell .gallery {
  aspect-ratio: auto;
  height: clamp(290px, 27vw, 350px);
  min-height: 0;
  overflow-x: auto;
  width: 100%;
}

.portfolio-layout .portlore-desktop-shell .gallery figure {
  flex: 0 0 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
}

.portfolio-layout .portlore-desktop-shell .gallery img {
  display: block;
  height: auto;
  max-width: none;
  min-width: 100%;
  object-fit: initial;
  width: 100%;
}

.portfolio-layout .portlore-panel[data-portlore-panel="mobile"] {
  margin-top: -76px;
}

.portfolio-layout .mobile-carousel-shell {
  height: 532px;
}

.portfolio-layout .mobile-carousel-viewport {
  height: 500px;
}

.portfolio-layout .mobile-carousel-card {
  bottom: auto;
  height: 410px;
  top: 12px;
  width: 183px;
}

.portfolio-layout .mobile-carousel-card.position-current {
  height: 480px;
  top: 12px;
  width: 214px;
}

.portfolio-layout .mobile-carousel-card.position-prev,
.portfolio-layout .mobile-carousel-card.position-next {
  top: 12px;
}

.portfolio-layout .mobile-carousel-shell .gallery-arrow {
  top: 246px;
}

@media (max-width: 790px) {
  .portfolio-layout .portlore-panel[data-portlore-panel="mobile"] {
    margin-top: -58px;
  }

  .portfolio-layout .mobile-carousel-shell {
    height: 476px;
  }

  .portfolio-layout .mobile-carousel-viewport {
    height: 444px;
  }

  .portfolio-layout .mobile-carousel-card {
    height: 360px;
    top: 10px;
    width: 161px;
  }

  .portfolio-layout .mobile-carousel-card.position-current {
    height: 425px;
    top: 10px;
    width: 190px;
  }

  .portfolio-layout .mobile-carousel-shell .gallery-arrow {
    top: 216px;
  }
}

@media (max-width: 520px) {
  .portfolio-layout .portlore-panel[data-portlore-panel="mobile"] {
    margin-top: -42px;
  }

  .portfolio-layout .mobile-carousel-shell {
    height: 410px;
  }

  .portfolio-layout .mobile-carousel-viewport {
    height: 378px;
  }

  .portfolio-layout .mobile-carousel-card {
    height: 306px;
    top: 8px;
    width: 137px;
  }

  .portfolio-layout .mobile-carousel-card.position-current {
    height: 360px;
    top: 8px;
    width: 161px;
  }

  .portfolio-layout .mobile-carousel-shell .gallery-arrow {
    top: 184px;
  }
}

.portfolio-layout .portlore-desktop-shell {
  height: auto;
}

.portfolio-layout .portlore-desktop-shell .gallery {
  aspect-ratio: 1914 / 945;
  height: auto;
  overflow: hidden;
  width: 100%;
}

.portfolio-layout .portlore-desktop-shell .gallery figure {
  height: 100%;
  overflow: hidden;
}

.portfolio-layout .portlore-desktop-shell .gallery img {
  height: 100%;
  max-width: 100%;
  min-width: 0;
  object-fit: contain;
  width: 100%;
}

.portfolio-layout .mobile-carousel-card {
  transition-duration: .52s;
  transition-timing-function: cubic-bezier(.22, .75, .28, 1);
}

.dark {
  --bg: #111114;
  --ink: #eeeeF3;
  --muted: #aaaab6;
  --line: rgba(255,255,255,.09);
  --blue: #7f9cf5;
}

.dark body {
  background: var(--bg);
}

.dark .site-header {
  background: rgba(17,17,20,.92);
}

.dark .eyebrow {
  color: #8d8d9d;
}

.dark .button.primary {
  background: #eeeeF3;
  color: #17171b;
}

.dark .button.secondary {
  border-color: var(--line);
}

.dark .project-copy p {
  color: #b8b8c3;
}

.dark .project-copy .project-focus,
.dark .contact-list strong {
  color: var(--ink);
}

.dark .project-meta span {
  color: #777785;
}

.dark .contact-list span,
.dark footer {
  color: #81818e;
}

.dark .availability-card {
  background: #08080b;
  border: 1px solid rgba(255,255,255,.07);
}

.theme-toggle {
  align-items: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  height: 31px;
  justify-content: center;
  margin-left: 2px;
  transition: border-color .15s, color .15s, background .15s;
  width: 35px;
}

.theme-toggle:hover {
  background: rgba(127,127,140,.08);
  border-color: var(--muted);
  color: var(--ink);
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .5s ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

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

@media (min-width: 791px) {
  html {
    zoom: 1.1;
  }

  .intro h1 {
    font-size: clamp(36px, 5.2vw, 66px);
  }
}

.portfolio-layout .project {
  scroll-margin-top: 0;
}

.portfolio-layout .project-identity {
  padding-top: 38px;
}

.portfolio-layout .project-nav {
  align-items: center;
  background: rgba(8, 10, 14, .28);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: rgba(255,255,255,.78);
  display: flex;
  gap: 7px;
  left: 18px;
  padding: 4px 6px;
  position: absolute;
  top: 18px;
  z-index: 4;
}

.portfolio-layout .project-nav > span {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  letter-spacing: .08em;
  min-width: 22px;
  text-align: center;
}

.portfolio-layout .project-nav-button {
  align-items: center;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  color: rgba(255,255,255,.82);
  cursor: pointer;
  display: flex;
  height: 25px;
  justify-content: center;
  transition: background .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
  width: 25px;
}

.portfolio-layout .project-nav-button:not(:disabled):hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.38);
  color: #fff;
}

.portfolio-layout .project-nav-button:disabled {
  cursor: default;
  opacity: .28;
}

@media (max-width: 790px) {
  .portfolio-layout .project-nav {
    left: 18px;
    top: 14px;
  }

  .portfolio-layout .project-identity {
    padding-top: 36px;
  }
}

.portfolio-layout .project {
  position: relative;
}

.portfolio-layout .project-nav {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border-color: var(--line);
  color: var(--muted);
  left: 40px;
  top: 20px;
  box-shadow: 0 5px 18px rgba(20, 20, 24, .08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.portfolio-layout .project-nav-button {
  border-color: var(--line);
  color: var(--muted);
}

.portfolio-layout .project-nav-button:not(:disabled):hover {
  background: var(--surface-2);
  border-color: var(--muted-2);
  color: var(--ink);
}

.dark .portfolio-layout .project-nav {
  box-shadow: 0 6px 20px rgba(0, 0, 0, .24);
}

.portfolio-layout .project-identity {
  padding-top: 24px;
}

@media (max-width: 790px) {
  .portfolio-layout .project-nav {
    left: 18px;
    top: 14px;
  }

  .portfolio-layout .project-identity {
    padding-top: 24px;
  }
}

.gallery img,
.mobile-carousel-card img {
  cursor: zoom-in;
}

.gallery-lightbox {
  align-items: center;
  background: rgba(7, 8, 11, .94);
  display: flex;
  inset: 0;
  justify-content: center;
  opacity: 0;
  padding: 54px 76px 42px;
  pointer-events: none;
  position: fixed;
  transition: opacity .22s ease;
  z-index: 1000;
}

.gallery-lightbox.open {
  opacity: 1;
  pointer-events: auto;
}

.gallery-lightbox-image {
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .42);
  display: block;
  max-height: calc(100vh - 108px);
  max-width: calc(100vw - 152px);
  object-fit: contain;
  transform: scale(.985);
  transition: transform .22s ease;
  user-select: none;
}

.gallery-lightbox.open .gallery-lightbox-image {
  transform: scale(1);
}

.gallery-lightbox-close,
.gallery-lightbox-arrow {
  align-items: center;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  cursor: pointer;
  display: flex;
  justify-content: center;
  position: absolute;
  transition: background .15s ease, border-color .15s ease;
}

.gallery-lightbox-close:hover,
.gallery-lightbox-arrow:hover {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .34);
}

.gallery-lightbox-close {
  border-radius: 50%;
  font-size: 25px;
  height: 40px;
  line-height: 1;
  right: 22px;
  top: 18px;
  width: 40px;
}

.gallery-lightbox-arrow {
  border-radius: 50%;
  height: 44px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
}

.gallery-lightbox-arrow.previous { left: 18px; }
.gallery-lightbox-arrow.next { right: 18px; }

.gallery-lightbox-count {
  bottom: 16px;
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  left: 50%;
  letter-spacing: .08em;
  position: absolute;
  transform: translateX(-50%);
}

body.lightbox-open {
  overflow: hidden;
}

@media (max-width: 680px) {
  .gallery-lightbox {
    padding: 54px 18px 50px;
  }

  .gallery-lightbox-image {
    max-height: calc(100vh - 104px);
    max-width: calc(100vw - 36px);
  }

  .gallery-lightbox-arrow {
    bottom: 10px;
    top: auto;
    transform: none;
  }

  .gallery-lightbox-arrow.previous { left: 18px; }
  .gallery-lightbox-arrow.next { right: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-lightbox,
  .gallery-lightbox-image {
    transition: none;
  }
}

.gallery-lightbox-close {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  right: max(18px, env(safe-area-inset-right));
  top: max(18px, env(safe-area-inset-top));
  z-index: 3;
}

.gallery-lightbox-close svg {
  fill: none;
  height: 20px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
  width: 20px;
}

@media (min-width: 791px) {
  .intro h1 {
    font-size: clamp(34px, 4.6vw, 58px);
  }
}

@media (max-width: 790px) {
  .intro h1 {
    font-size: clamp(34px, 9vw, 40px);
  }
}

.gallery-lightbox-close,
.gallery-lightbox-arrow {
  background: rgba(0, 0, 0, .43);
  border-color: rgba(255, 255, 255, .27);
  box-shadow: none;
  color: #fff;
}

.gallery-lightbox-close:hover,
.gallery-lightbox-arrow:hover {
  background: rgba(0, 0, 0, .7);
  border-color: rgba(255, 255, 255, .27);
}

.gallery-lightbox-close svg,
.gallery-lightbox-arrow svg {
  filter: none;
  stroke-width: 2;
}

.gallery-lightbox-image {
  position: relative;
  z-index: 1;
}

.gallery-lightbox-arrow {
  z-index: 4;
}