:root { --ink:#20201d; --paper:#fbf9f5; --gold:#bc8a32; --muted:#696862; --page-pad:clamp(1.25rem,4vw,4.2rem); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans",sans-serif; -webkit-font-smoothing:antialiased; } body:has(.lightbox[open]) { overflow:hidden; } a { color:inherit; text-decoration:none; } button { font:inherit; }
.skip-link { position:fixed; z-index:100; top:.75rem; left:.75rem; padding:.75rem 1rem; color:var(--ink); background:#fff; transform:translateY(-160%); } .skip-link:focus { transform:translateY(0); }
.gallery-header { position:absolute; z-index:2; top:0; left:0; display:grid; width:100%; min-height:5.5rem; padding:1.1rem var(--page-pad); grid-template-columns:minmax(11rem,1fr) auto minmax(11rem,1fr); align-items:center; border-bottom:1px solid rgba(255,255,255,.16); color:#fff; } .gallery-brand { width:clamp(10.5rem,14vw,13.6rem); } .gallery-brand img { display:block; width:100%; height:auto; filter:brightness(0) invert(1); } .gallery-nav { display:flex; gap:clamp(1.2rem,2.8vw,3.2rem); align-items:center; } .gallery-nav a,.gallery-contact { position:relative; padding:.55rem 0; color:rgba(255,255,255,.88); font-size:.7rem; font-weight:600; letter-spacing:.04em; } .gallery-nav a::after { position:absolute; right:0; bottom:0; left:0; height:1px; content:""; background:var(--gold); transform:scaleX(0); transition:transform .2s ease; } .gallery-nav a:hover::after,.gallery-nav a:focus-visible::after,.gallery-nav a.is-active::after { transform:scaleX(1); } .gallery-nav a.is-active { color:#e1b45d; } .gallery-contact { justify-self:end; border-bottom:1px solid rgba(255,255,255,.5); }
.portfolio-hero { position:relative; display:grid; min-height:clamp(31rem,51vw,43rem); overflow:hidden; color:#fff; } .portfolio-hero__image,.gallery-cta>img { position:absolute; width:100%; height:100%; object-fit:cover; } .portfolio-hero__image { inset:0; object-position:center 43%; } .portfolio-hero__shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,8,6,.82) 0%,rgba(7,8,6,.61) 34%,rgba(7,8,6,.05) 72%),linear-gradient(0deg,rgba(7,8,6,.22),transparent 47%); } .portfolio-hero__content { position:relative; z-index:1; width:min(100% - (var(--page-pad) * 2),75rem); margin:0 auto; padding:clamp(9rem,15vw,12rem) 0 clamp(3.5rem,6vw,6rem); align-self:end; } .gallery-eyebrow { margin:0 0 .8rem; color:var(--gold); font-size:.64rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; } .portfolio-hero h1 { display:grid; margin:0; font-family:"Bodoni Moda",Georgia,serif; font-weight:400; line-height:.85; } .portfolio-hero h1 span { font-size:clamp(2.9rem,5vw,5.5rem); } .portfolio-hero h1 em { color:#dfb356; font-size:clamp(3.3rem,6vw,6.6rem); font-style:normal; } .portfolio-hero__rule { display:block; width:2.5rem; height:2px; margin:1.5rem 0 1.2rem; background:var(--gold); } .portfolio-hero__content>p:last-child { max-width:26rem; margin:0; font-family:"Bodoni Moda",Georgia,serif; font-size:clamp(1rem,1.55vw,1.35rem); line-height:1.38; }
.portfolio-shell { width:min(100% - (var(--page-pad) * 2),75rem); margin:0 auto; } .portfolio-switcher { display:flex; gap:1rem; margin-top:-1.45rem; align-items:center; justify-content:space-between; } .gallery-filters { position:relative; z-index:1; display:flex; max-width:calc(100% - 12rem); overflow:auto; border-radius:.8rem; background:rgba(255,255,255,.94); box-shadow:0 .8rem 1.8rem rgba(44,33,17,.1); scrollbar-width:none; } .gallery-filters::-webkit-scrollbar { display:none; } .gallery-filters a { display:inline-flex; min-width:max-content; gap:.55rem; padding:1rem clamp(.85rem,1.55vw,1.45rem); align-items:center; border-bottom:2px solid transparent; color:#78756e; font-family:"Bodoni Moda",Georgia,serif; font-size:clamp(.82rem,1.1vw,1rem); white-space:nowrap; transition:color .2s ease,background .2s ease; } .gallery-filters a:hover,.gallery-filters a:focus-visible,.gallery-filters a.is-active { border-color:var(--gold); color:var(--gold); background:#fffdfa; } .gallery-filters svg { width:1.45rem; height:1.45rem; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.6; } .back-link { display:inline-flex; flex:0 0 auto; gap:.55rem; padding:.75rem 1.1rem; align-items:center; border:1px solid #dfd7ca; border-radius:999px; color:#4e4c47; font-family:"Bodoni Moda",Georgia,serif; font-size:.76rem; white-space:nowrap; transition:background .2s ease,border-color .2s ease; } .back-link:hover,.back-link:focus-visible { border-color:var(--gold); background:#fff; } .back-link svg { width:1rem; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5; }
.gallery-story { max-width:42rem; margin:clamp(3.8rem,7vw,6.5rem) auto 2.3rem; text-align:center; } .gallery-story .gallery-eyebrow { margin-bottom:.7rem; } .gallery-story h2,.gallery-cta h2 { margin:0; font-family:"Bodoni Moda",Georgia,serif; font-size:clamp(1.85rem,3vw,3rem); font-weight:400; line-height:1.08; } .gallery-story h2 span { color:var(--gold); } .gallery-story>i { display:block; width:3rem; height:2px; margin:1.1rem auto; background:#d4a44d; } .gallery-story>p:last-child { margin:0; color:var(--muted); font-size:.82rem; line-height:1.65; }
.portfolio-values { display:grid; margin:2.3rem 0 2.5rem; grid-template-columns:repeat(3,1fr); gap:1rem; } .portfolio-values article { display:flex; gap:.85rem; min-height:6.7rem; padding:1.25rem; align-items:flex-start; border:1px solid #eee8df; border-radius:.75rem; background:rgba(255,255,255,.62); box-shadow:0 .55rem 1.25rem rgba(71,57,36,.05); } .portfolio-values>article>span { color:var(--gold); font-family:"Bodoni Moda",serif; font-size:2rem; line-height:.9; } .portfolio-values h3 { margin:0 0 .35rem; font-family:"Bodoni Moda",Georgia,serif; font-size:.92rem; font-weight:500; } .portfolio-values p { margin:0; color:#6d6b65; font-size:.68rem; line-height:1.5; }
.photo-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(.55rem,1vw,.9rem); } .photo-item { position:relative; min-height:clamp(14rem,27vw,25rem); padding:0; grid-column:span 4; overflow:hidden; border:0; border-radius:.6rem; background:#e8e0d5; cursor:zoom-in; } .photo-item:nth-child(8n + 1) { min-height:clamp(27rem,48vw,42rem); grid-column:span 3; grid-row:span 2; } .photo-item:nth-child(8n + 2),.photo-item:nth-child(8n + 3),.photo-item:nth-child(8n + 4),.photo-item:nth-child(8n + 6),.photo-item:nth-child(8n + 7) { grid-column:span 3; } .photo-item:nth-child(8n + 5) { min-height:clamp(27rem,48vw,42rem); grid-column:span 3; grid-row:span 2; } .photo-item:nth-child(8n) { grid-column:span 6; } .photo-item img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .25s ease; } .photo-item:hover img,.photo-item:focus-visible img { filter:saturate(1.08); transform:scale(1.04); } .photo-item:focus-visible { outline:3px solid var(--gold); outline-offset:3px; } .gallery-count { margin:2.5rem 0 5rem; color:#79756d; text-align:center; font-family:"Bodoni Moda",Georgia,serif; font-size:.88rem; } .gallery-count strong { color:var(--gold); font-size:1.1rem; }
.gallery-cta { position:relative; width:min(100% - (var(--page-pad) * 2),84rem); min-height:14rem; margin:0 auto clamp(3rem,6vw,5rem); overflow:hidden; border-radius:.75rem; color:#fff; background:#1d1c18; } .gallery-cta::after { position:absolute; inset:0; content:""; background:linear-gradient(90deg,rgba(13,13,12,.93),rgba(13,13,12,.63) 43%,rgba(13,13,12,.1)); } .gallery-cta>img { inset:0; object-position:center 44%; } .gallery-cta>div { position:relative; z-index:1; max-width:38rem; padding:clamp(1.8rem,4vw,3.2rem); } .gallery-cta p { margin:0 0 .6rem; color:#e5b659; font-size:.64rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; } .gallery-cta h2 { font-size:clamp(1.65rem,3vw,2.55rem); } .gallery-cta span { display:block; margin-top:.7rem; color:rgba(255,255,255,.78); font-size:.76rem; } .gallery-cta a { display:inline-flex; gap:.7rem; margin-top:1.1rem; padding:.75rem 1.05rem; border-radius:999px; color:#fff; background:var(--gold); font-family:"Bodoni Moda",Georgia,serif; font-size:.76rem; } .gallery-cta b { font-family:"DM Sans",sans-serif; font-size:1rem; font-weight:400; }
.lightbox { width:100vw; max-width:none; height:100vh; max-height:none; margin:0; padding:1.5rem; overflow:hidden; border:0; color:#fff; background:rgba(6,7,6,.97); } .lightbox::backdrop { background:rgba(6,7,6,.92); } .lightbox[open] { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; } .lightbox figure { display:flex; height:calc(100vh - 3rem); margin:0; flex-direction:column; align-items:center; justify-content:center; } .lightbox figure img { display:block; max-width:100%; max-height:calc(100vh - 6rem); object-fit:contain; box-shadow:0 1rem 4rem rgba(0,0,0,.3); } .lightbox figcaption { position:absolute; bottom:1rem; font-size:.65rem; letter-spacing:.16em; } .lightbox__close,.lightbox__nav { display:grid; width:3rem; height:3rem; padding:0; place-items:center; border:1px solid rgba(255,255,255,.28); border-radius:50%; color:#fff; background:rgba(255,255,255,.05); cursor:pointer; } .lightbox__close { position:absolute; z-index:2; top:1.25rem; right:1.25rem; } .lightbox__nav { position:relative; z-index:1; } .lightbox svg { width:1.2rem; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5; }
@media (max-width:800px) { .gallery-header { min-height:4.75rem; grid-template-columns:1fr auto; padding-top:.85rem; padding-bottom:.85rem; } .gallery-brand { width:10.5rem; } .gallery-nav { display:none; } .gallery-contact { font-size:0; } .gallery-contact::after { content:"Contact"; font-size:.68rem; } .portfolio-hero { min-height:33rem; } .portfolio-hero__shade { background:linear-gradient(90deg,rgba(7,8,6,.85),rgba(7,8,6,.22) 105%),linear-gradient(0deg,rgba(7,8,6,.3),transparent); } .portfolio-switcher { display:block; margin-top:-1rem; } .gallery-filters { max-width:none; width:100%; } .gallery-filters a { padding:.85rem 1rem; } .back-link { width:fit-content; margin:1rem auto 0; } .gallery-story { margin-top:3.7rem; } .portfolio-values { grid-template-columns:1fr; gap:.7rem; } .portfolio-values article { min-height:0; padding:1rem 1.1rem; } .photo-grid { grid-template-columns:repeat(2,1fr); gap:.55rem; } .photo-item,.photo-item:nth-child(n) { min-height:14rem; grid-column:span 1; grid-row:span 1; } .photo-item:nth-child(5n + 1) { min-height:22rem; grid-row:span 2; } .photo-item:nth-child(5n + 4) { grid-column:span 2; } .gallery-count { margin-bottom:3rem; } .gallery-cta { min-height:18rem; } .gallery-cta::after { background:linear-gradient(90deg,rgba(13,13,12,.93),rgba(13,13,12,.4)); } .lightbox { padding:.75rem; } .lightbox[open] { grid-template-columns:1fr; } .lightbox__nav { position:absolute; bottom:1rem; } .lightbox__nav--prev { left:1rem; } .lightbox__nav--next { right:1rem; } .lightbox figure { height:calc(100vh - 1.5rem); } .lightbox figure img { max-height:calc(100vh - 5rem); } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition-duration:.01ms !important; } }

/* Păstrează toate elementele de navigare în afara imaginii de hero. */
.gallery-header {
  position: relative;
  background: #1d1c18;
  border-bottom-color: rgba(255,255,255,.18);
}

/* Navbar comun cu homepage-ul. */
body.menu-open { overflow: hidden; }

.gallery-page {
  --gallery-header-offset: 5.5rem;
  padding-top: var(--gallery-header-offset);
}

.gallery-site-header {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  display: grid;
  width: 100%;
  height: 7.5rem;
  padding: 1.7rem clamp(1.25rem, 4vw, 5.5rem);
  grid-template-columns: minmax(12rem, 1fr) auto minmax(12rem, 1fr);
  align-items: center;
  border-bottom: 1px solid transparent;
  color: #fff;
  transition: height 300ms ease, padding 300ms ease, background 300ms ease,
    border-color 300ms ease, backdrop-filter 300ms ease;
}

.gallery-site-header.is-scrolled {
  height: 5.8rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(12, 17, 12, 0.82);
  backdrop-filter: blur(14px);
}

.gallery-site-header .brand {
  position: relative;
  z-index: 22;
  justify-self: start;
}

.gallery-site-header .brand__surface {
  display: flex;
  width: clamp(12.5rem, 16vw, 15.5rem);
  align-items: center;
}

.gallery-site-header .brand img {
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1) drop-shadow(0 0.35rem 0.8rem rgba(0, 0, 0, 0.35));
}

.gallery-site-header .desktop-nav {
  display: flex;
  gap: clamp(1.4rem, 2.7vw, 3.25rem);
  align-items: center;
}

.gallery-site-header .desktop-nav a {
  position: relative;
  padding: 0.5rem 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transition: color 180ms ease;
}

.gallery-site-header .desktop-nav a::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  content: "";
  background: #f5f0e7;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 220ms ease;
}

.gallery-site-header .desktop-nav a:hover,
.gallery-site-header .desktop-nav a:focus-visible,
.gallery-site-header .desktop-nav a.is-active { color: #fff; }

.gallery-site-header .desktop-nav a:hover::after,
.gallery-site-header .desktop-nav a:focus-visible::after,
.gallery-site-header .desktop-nav a.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.gallery-site-header .header-cta {
  display: inline-flex;
  gap: 0.8rem;
  padding: 0.8rem 0 0.8rem 1rem;
  justify-self: end;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.54);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.gallery-site-header .header-cta svg {
  width: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
  transition: transform 180ms ease;
}

.gallery-site-header .header-cta:hover svg,
.gallery-site-header .header-cta:focus-visible svg { transform: translateX(0.28rem); }

.gallery-site-header .menu-toggle,
.gallery-site-header .mobile-menu { display: none; }

.gallery-site-header .mobile-menu nav a.is-active { color: #8fd1f2; }
.gallery-site-header .mobile-menu nav a.is-active span { color: #79c9f1; }

@media (max-width: 1060px) {
  .gallery-site-header { grid-template-columns: 1fr auto; }

  .gallery-site-header .desktop-nav,
  .gallery-site-header .header-cta { display: none; }

  .gallery-site-header .menu-toggle {
    position: relative;
    z-index: 22;
    display: flex;
    width: 3rem;
    height: 3rem;
    padding: 0;
    flex-direction: column;
    gap: 0.42rem;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    background: rgba(10, 14, 9, 0.22);
    cursor: pointer;
  }

  .gallery-site-header .menu-toggle span {
    display: block;
    width: 1.15rem;
    height: 1px;
    background: currentColor;
    transition: transform 220ms ease;
  }

  .gallery-site-header .menu-toggle[aria-expanded="true"] span:first-child {
    transform: translateY(0.23rem) rotate(45deg);
  }

  .gallery-site-header .menu-toggle[aria-expanded="true"] span:last-child {
    transform: translateY(-0.23rem) rotate(-45deg);
  }

  .gallery-site-header .mobile-menu {
    position: fixed;
    z-index: 21;
    inset: 0;
    display: flex;
    visibility: hidden;
    padding: 9rem clamp(1.25rem, 4vw, 5.5rem) 3rem;
    flex-direction: column;
    justify-content: space-between;
    background: #101810;
    opacity: 0;
    transform: translateY(-1rem);
    transition: opacity 250ms ease, transform 250ms ease, visibility 250ms;
  }

  .gallery-site-header .mobile-menu.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

  .gallery-site-header .mobile-menu nav {
    display: flex;
    flex-direction: column;
  }

  .gallery-site-header .mobile-menu nav a {
    display: flex;
    gap: 1.4rem;
    padding: 0.8rem 0;
    align-items: baseline;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    color: #fff;
    font-family: "Bodoni Moda", Georgia, serif;
    font-size: clamp(2.5rem, 8vw, 4.5rem);
  }

  .gallery-site-header .mobile-menu nav span {
    color: #26a9ed;
    font-family: "DM Sans", sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
  }

  .gallery-site-header .mobile-menu p {
    margin: 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
    line-height: 1.7;
  }
}

@media (max-width: 720px) {
  .gallery-page {
    --gallery-header-offset: calc(4.75rem + env(safe-area-inset-top));
    padding-top: var(--gallery-header-offset);
  }

  .gallery-site-header {
    height: calc(4.75rem + env(safe-area-inset-top));
    padding-top: max(0.85rem, env(safe-area-inset-top));
    padding-bottom: 0.85rem;
  }

  .gallery-site-header.is-scrolled { height: calc(4.6rem + env(safe-area-inset-top)); }
  .gallery-site-header .brand__surface { width: 11.5rem; }

  .gallery-site-header .mobile-menu {
    height: 100dvh;
    min-height: 100dvh;
    padding-top: calc(5.5rem + env(safe-area-inset-top));
    padding-bottom: max(2rem, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .gallery-site-header .mobile-menu nav a {
    min-height: 2.7rem;
    font-size: clamp(1.75rem, 7vh, 2.45rem);
  }
}

@media (max-width: 390px) {
  .gallery-site-header .brand__surface { width: 10.3rem; }
  .gallery-site-header .menu-toggle { width: 2.8rem; height: 2.8rem; }
}

.portfolio-switcher {
  margin-top: clamp(.9rem,2vw,1.5rem);
  margin-bottom: clamp(.5rem,1vw,1rem);
}

.portfolio-hero__content {
  align-self: end;
  padding: clamp(9rem,15vw,12rem) 0 clamp(3.5rem,6vw,6rem);
}

.gallery-story {
  margin-top: clamp(2rem,3.5vw,3rem);
}

@media (max-width:800px) {
  .portfolio-switcher { margin-top: .9rem; }
  .portfolio-hero__content { padding: 8rem 0 3rem; }
  .gallery-story { margin-top: 2rem; }
}

/* Accentele portofoliului folosesc albastrul identitar al homepage-ului. */
:root {
  --gold: #26a9ed;
  --accent-light: #79c9f1;
}

.gallery-nav a.is-active,
.portfolio-hero h1 em,
.gallery-cta p {
  color: var(--accent-light);
}

.gallery-story > i {
  background: var(--gold);
}

.portfolio-hero h1,
.gallery-story h2,
.gallery-cta h2 {
  font-weight: 500;
}

:root { --display-font: "Lora", Georgia, serif; }

.portfolio-hero h1,
.portfolio-hero__content > p:last-child,
.gallery-filters a,
.back-link,
.gallery-story h2,
.gallery-cta h2,
.portfolio-values h3,
.gallery-count,
.gallery-cta a {
  font-family: var(--display-font);
}

/* Finisaj responsive și pânză cromatică unitară cu pagina principală. */
body { overflow-x: clip; background: #101512; }

.gallery-page {
  background:
    linear-gradient(#101512 0 var(--gallery-header-offset), transparent var(--gallery-header-offset)),
    radial-gradient(ellipse at 8% 42%, rgba(38, 169, 237, 0.06), transparent 30%),
    #f7f5ef;
}

.portfolio-switcher { scroll-margin-top: 1rem; }

.gallery-filters {
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.gallery-filters a { scroll-snap-align: center; }

.gallery-empty {
  padding: clamp(3rem, 8vw, 7rem) 1.5rem;
  grid-column: 1 / -1;
  border: 1px dashed #cbd7d3;
  border-radius: 1rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.56);
}
.gallery-empty h2 { margin: 0; font-family: var(--display-font); font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 400; }
.gallery-empty p { margin: 0.7rem 0 0; color: var(--muted); font-size: 0.82rem; }

:where(a, button):focus-visible { outline: 3px solid rgba(38, 169, 237, 0.38); outline-offset: 4px; }

.lightbox { height: 100dvh; padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); }
.lightbox figure { height: calc(100dvh - 3rem); }
.lightbox figure img { max-height: calc(100dvh - 6rem); }

@media (max-width: 800px) {
  .gallery-header {
    min-height: calc(4.75rem + env(safe-area-inset-top));
    padding-top: max(0.85rem, env(safe-area-inset-top));
  }

  .portfolio-shell { width: min(100% - 2rem, 75rem); }
  .gallery-filters { scroll-padding-inline: 1rem; }

  .photo-grid {
    display: block;
    columns: 2;
    column-gap: 0.55rem;
  }

  .photo-item,
  .photo-item:nth-child(n) {
    display: block;
    width: 100%;
    min-height: 0;
    height: auto;
    margin: 0 0 0.55rem;
    overflow: hidden;
    break-inside: avoid;
    border-radius: 0.7rem;
    aspect-ratio: auto;
  }

  .photo-item img { width: 100%; height: auto; }

  .lightbox__nav { bottom: max(1rem, env(safe-area-inset-bottom)); }
  .lightbox__close { top: max(1rem, env(safe-area-inset-top)); right: max(1rem, env(safe-area-inset-right)); }
  .lightbox figure { height: calc(100dvh - 1.5rem); }
  .lightbox figure img { max-height: calc(100dvh - 5.5rem); }
}

@media (max-width: 430px) {
  .portfolio-hero { min-height: 31rem; }
  .portfolio-hero__content { padding: 7.5rem 0 2.6rem; }
  .portfolio-hero h1 span { font-size: 2.5rem; }
  .portfolio-hero h1 em { font-size: 3rem; }
  .gallery-story { margin-top: 3rem; }
  .portfolio-values article { border-radius: 0.85rem; }
  .gallery-cta { width: calc(100% - 2rem); border-radius: 1rem; }
}

/* Portofoliu editorial: fotografia hero rămâne integrală, iar grila respectă proporțiile cadrelor. */
.portfolio-hero {
  --gallery-hero-image: none;
  --gallery-secondary-image: var(--gallery-hero-image);
  position: relative;
  z-index: 0;
  display: block;
  min-height: clamp(42rem, 55vw, 48rem);
  overflow: hidden;
  background: #101512;
  isolation: isolate;
}

.portfolio-hero::before,
.portfolio-hero::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.portfolio-hero::before {
  z-index: -2;
  inset: -2rem;
  background-image: var(--gallery-hero-image);
  background-position: center;
  background-size: cover;
  filter: blur(28px) saturate(0.88);
  opacity: 0.48;
  transform: scale(1.08);
}

.portfolio-hero::after {
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 76% 48%, rgba(38, 169, 237, 0.12), transparent 31%),
    linear-gradient(90deg, rgba(7, 12, 9, 0.96) 0%, rgba(8, 13, 10, 0.88) 38%, rgba(8, 12, 10, 0.45) 100%);
}

.portfolio-hero__shade {
  z-index: 0;
  background: linear-gradient(180deg, rgba(4, 8, 6, 0.08), rgba(4, 8, 6, 0.28));
  pointer-events: none;
}

.portfolio-hero__decorations {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.portfolio-hero__reel {
  position: absolute;
  display: block;
  aspect-ratio: 1;
  border: 1px solid rgba(225, 219, 202, 0.42);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(234, 229, 214, 0.78) 0 7%, rgba(61, 68, 64, 0.94) 8% 11%, transparent 12%),
    radial-gradient(circle, transparent 0 58%, rgba(229, 223, 207, 0.34) 59% 63%, transparent 64%),
    conic-gradient(from 18deg, #6e746f, #c4beb0 12%, #777c76 25%, #d0c9b8 38%, #6d736e 52%, #bbb5a8 67%, #737974 83%, #d3ccba);
  box-shadow:
    inset 0 0 0 0.35rem rgba(18, 25, 21, 0.28),
    inset 0 0 1.6rem rgba(255, 255, 255, 0.2),
    0 1rem 2.4rem rgba(0, 0, 0, 0.28);
  filter: saturate(0.72);
}

.portfolio-hero__reel::before {
  position: absolute;
  inset: 14%;
  content: "";
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 12%, rgba(5, 12, 9, 0.94) 0 11%, transparent 12%),
    radial-gradient(circle at 86% 38%, rgba(5, 12, 9, 0.94) 0 11%, transparent 12%),
    radial-gradient(circle at 72% 84%, rgba(5, 12, 9, 0.94) 0 11%, transparent 12%),
    radial-gradient(circle at 28% 84%, rgba(5, 12, 9, 0.94) 0 11%, transparent 12%),
    radial-gradient(circle at 14% 38%, rgba(5, 12, 9, 0.94) 0 11%, transparent 12%);
  box-shadow: inset 0 0 1rem rgba(0, 0, 0, 0.32);
}

.portfolio-hero__reel::after {
  position: absolute;
  inset: 42%;
  content: "";
  border: 1px solid rgba(238, 233, 219, 0.58);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #d9d3c4, #656c67 72%);
  box-shadow: 0 0.25rem 0.55rem rgba(0, 0, 0, 0.3);
}

.portfolio-hero__reel--large {
  top: 3.25rem;
  bottom: auto;
  left: -5.25rem;
  width: clamp(13rem, 18vw, 16rem);
  opacity: 0.13;
  transform: rotate(12deg);
}

.portfolio-hero__reel--medium {
  top: 13.25rem;
  left: 27%;
  width: clamp(9rem, 11vw, 11rem);
  opacity: 0.12;
  transform: rotate(22deg);
}

.portfolio-hero__reel--small {
  top: 1.35rem;
  left: 44%;
  width: clamp(6.5rem, 8vw, 8rem);
  opacity: 0.16;
  transform: rotate(-9deg);
}

.portfolio-hero__reel--mini {
  top: 8.25rem;
  right: -1.75rem;
  width: clamp(5rem, 6.5vw, 6.5rem);
  opacity: 0.11;
  transform: rotate(31deg);
}

.portfolio-hero__film-strip {
  position: absolute;
  bottom: 0.75rem;
  left: 30%;
  display: grid;
  width: clamp(31rem, 58vw, 49rem);
  height: 7rem;
  padding: 0.92rem 0.85rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.34rem;
  border: 1px solid rgba(229, 223, 207, 0.28);
  border-radius: 0.2rem;
  background: rgba(3, 8, 6, 0.88);
  box-shadow: 0 1rem 2.8rem rgba(0, 0, 0, 0.32);
  opacity: 0.24;
  transform: rotate(-5deg);
  transform-origin: center;
}

.portfolio-hero__film-strip::before,
.portfolio-hero__film-strip::after {
  position: absolute;
  right: 0.55rem;
  left: 0.55rem;
  height: 0.4rem;
  content: "";
  border-radius: 0.06rem;
  background: repeating-linear-gradient(90deg, rgba(235, 230, 214, 0.62) 0 0.48rem, transparent 0.48rem 0.84rem);
}

.portfolio-hero__film-strip::before { top: 0.24rem; }
.portfolio-hero__film-strip::after { bottom: 0.24rem; }

.portfolio-hero__film-strip i {
  display: block;
  min-width: 0;
  border: 1px solid rgba(236, 230, 213, 0.26);
  border-radius: 0.08rem;
  background-image: var(--gallery-hero-image);
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 0 1rem rgba(0, 0, 0, 0.34);
  filter: grayscale(0.18) sepia(0.08) contrast(1.05);
}

.portfolio-hero__film-strip i:nth-child(even) { background-image: var(--gallery-secondary-image); }
.portfolio-hero__film-strip i:nth-child(3) { background-position: center 32%; }

.portfolio-hero__film-code {
  position: absolute;
  bottom: 1.25rem;
  left: var(--page-pad);
  padding-left: 1rem;
  border-left: 1px solid rgba(121, 201, 241, 0.38);
  color: rgba(232, 228, 216, 0.43);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.portfolio-hero__film-code b { color: rgba(121, 201, 241, 0.74); font-weight: 700; }

.portfolio-hero__focus-mark {
  position: absolute;
  top: 12%;
  left: 34%;
  width: 5.4rem;
  height: 5.4rem;
  border: 1px solid rgba(121, 201, 241, 0.12);
  border-radius: 50%;
  opacity: 0.7;
}

.portfolio-hero__focus-mark::before,
.portfolio-hero__focus-mark::after {
  position: absolute;
  content: "";
  background: rgba(121, 201, 241, 0.2);
}

.portfolio-hero__focus-mark::before { top: 50%; right: -1.1rem; left: -1.1rem; height: 1px; }
.portfolio-hero__focus-mark::after { top: -1.1rem; bottom: -1.1rem; left: 50%; width: 1px; }
.portfolio-hero__focus-mark i { position: absolute; inset: 45%; border: 1px solid rgba(121, 201, 241, 0.36); border-radius: 50%; }

.portfolio-hero__frame {
  position: absolute;
  z-index: 2;
  top: clamp(3.8rem, 5vw, 4.5rem);
  right: clamp(2rem, 4vw, 4rem);
  bottom: auto;
  display: grid;
  width: clamp(18rem, 30vw, 26rem);
  margin: 0;
  padding: 0.78rem 0.78rem 0.58rem;
  grid-template-rows: auto auto;
  overflow: visible;
  border: 1px solid rgba(76, 65, 47, 0.24);
  border-radius: 0.22rem;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.68), transparent 38%),
    repeating-linear-gradient(0deg, rgba(76, 65, 47, 0.018) 0 1px, transparent 1px 3px),
    #f1ecdf;
  box-shadow:
    0 2rem 4.3rem rgba(0, 0, 0, 0.34),
    0 0.4rem 1rem rgba(0, 0, 0, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.68);
  transform: rotate(0.85deg);
  transform-origin: center 64%;
  isolation: isolate;
}

.portfolio-hero__frame::before,
.portfolio-hero__frame::after {
  position: absolute;
  inset: 0.18rem;
  content: "";
  border: 1px solid rgba(69, 58, 42, 0.18);
  border-radius: 0.2rem;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.58), transparent 42%),
    #ddd5c7;
  box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

.portfolio-hero__frame::before {
  z-index: -2;
  transform: translate(-0.52rem, 0.38rem) rotate(-3.1deg);
}

.portfolio-hero__frame::after {
  z-index: -1;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.62), transparent 45%),
    #e8e1d4;
  transform: translate(0.46rem, 0.42rem) rotate(2.2deg);
}

.portfolio-hero__matte {
  position: relative;
  display: grid;
  min-height: 0;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(38, 33, 25, 0.34);
  border-radius: 0.08rem;
  background: #121714;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 0 1.6rem rgba(0, 0, 0, 0.24);
  isolation: isolate;
}

.portfolio-hero__matte::before,
.portfolio-hero__matte::after {
  position: absolute;
  inset: -1.5rem;
  content: "";
  pointer-events: none;
}

.portfolio-hero__matte::before {
  z-index: -2;
  background-image: var(--gallery-hero-image);
  background-position: center;
  background-size: cover;
  filter: blur(16px) saturate(0.82);
  opacity: 0.4;
  transform: scale(1.1);
}

.portfolio-hero__matte::after {
  z-index: -1;
  background: rgba(5, 9, 7, 0.2);
}

.portfolio-hero__frame .portfolio-hero__image {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 0.65rem 0.9rem rgba(0, 0, 0, 0.2)) saturate(0.98) contrast(1.01);
}

.portfolio-hero__frame figcaption {
  position: relative;
  display: flex;
  min-height: 4.15rem;
  gap: 1rem;
  padding: 0.9rem 0.35rem 0.35rem;
  align-items: flex-start;
  justify-content: space-between;
  color: #62594c;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.portfolio-hero__frame figcaption::after {
  position: absolute;
  bottom: 0.14rem;
  left: 0.35rem;
  color: rgba(78, 69, 56, 0.42);
  content: "GV / PRINT 01";
  font-size: 0.43rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.portfolio-hero__frame figcaption strong {
  max-width: 54%;
  color: #2c2924;
  font-family: var(--display-font);
  font-size: clamp(1.02rem, 1.25vw, 1.24rem);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  text-align: right;
  text-transform: none;
  transform: rotate(-1.4deg);
  transform-origin: right center;
}

.portfolio-hero__frame--secondary {
  z-index: 1;
  top: clamp(3.8rem, 5vw, 4.5rem);
  right: clamp(16rem, 29vw, 25rem);
  width: clamp(18rem, 30vw, 26rem);
  opacity: 0;
  transform: rotate(-0.85deg) translateY(0.8rem);
  transition: opacity 320ms ease, transform 520ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.portfolio-hero__frame--secondary.is-ready {
  opacity: 1;
  transform: rotate(-0.85deg) translateY(0);
}

.portfolio-hero__frame--secondary .portfolio-hero__matte { aspect-ratio: 2 / 3; }

.portfolio-hero__frame--secondary::before {
  transform: translate(0.35rem, 0.34rem) rotate(-1.8deg);
}

.portfolio-hero__frame--secondary::after { display: none; }

.portfolio-hero__frame--secondary figcaption {
  min-height: 4.15rem;
  padding-top: 0.9rem;
}

.portfolio-hero__frame--secondary figcaption::after { content: "GV / PRINT 02"; }
.portfolio-hero__frame--secondary figcaption strong { font-size: clamp(1.02rem, 1.25vw, 1.24rem); }

.portfolio-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  width: min(100% - (var(--page-pad) * 2), 82rem);
  min-height: inherit;
  margin: 0 auto;
  padding: clamp(3rem, 5vw, 4.5rem) 0;
  flex-direction: column;
  justify-content: center;
  align-self: auto;
}

.portfolio-hero__content > * { max-width: min(34vw, 29rem); }
.portfolio-hero h1 { line-height: 0.9; }
.portfolio-hero h1 span { font-size: clamp(2.7rem, 4.4vw, 5rem); }
.portfolio-hero h1 em { font-size: clamp(3.2rem, 5.5vw, 6.1rem); }
.portfolio-hero__content > p:last-child { max-width: min(33vw, 26rem); }

.portfolio-shell { width: min(100% - (var(--page-pad) * 2), 82rem); }

.gallery-grid-heading {
  display: grid;
  margin: clamp(3.2rem, 6vw, 5.5rem) 0 clamp(1.5rem, 3vw, 2.4rem);
  padding-top: clamp(1.6rem, 3vw, 2.4rem);
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.48fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
  border-top: 1px solid rgba(31, 55, 61, 0.14);
}

.gallery-grid-heading .gallery-eyebrow { margin-bottom: 0.7rem; }
.gallery-grid-heading h2 {
  margin: 0;
  font-family: var(--display-font);
  font-size: clamp(2rem, 3.7vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.02;
}
.gallery-grid-heading h2 em { color: #337ea5; font-style: normal; }
.gallery-grid-heading > p {
  max-width: 27rem;
  margin: 0 0 0.3rem;
  color: #727a75;
  font-size: 0.78rem;
  line-height: 1.65;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: row;
  grid-auto-rows: 4px;
  column-gap: clamp(0.65rem, 1.15vw, 1rem);
  row-gap: clamp(0.65rem, 1.15vw, 1rem);
  align-items: start;
}

.photo-item,
.photo-item:nth-child(n) {
  position: relative;
  display: block;
  width: 100%;
  min-height: 0;
  height: auto;
  aspect-ratio: 3 / 2;
  margin: 0;
  padding: 0;
  grid-column: span 1;
  grid-row-start: auto;
  grid-row-end: span 16;
  align-self: start;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 0.88rem;
  background: #e4e2dc;
  box-shadow: 0 0.8rem 2.2rem rgba(38, 48, 44, 0.08);
  cursor: zoom-in;
}

.photo-item.photo-item--wide { grid-column: span 2; }

.photo-item img,
.photo-item:nth-child(n) img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1), filter 260ms ease;
}

.photo-item::after {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  display: grid;
  width: 2.4rem;
  height: 2.4rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 50%;
  color: #fff;
  content: "+";
  background: rgba(7, 14, 11, 0.48);
  box-shadow: 0 0.5rem 1.2rem rgba(0, 0, 0, 0.16);
  font-size: 1rem;
  opacity: 0;
  transform: translateY(0.35rem);
  transition: opacity 180ms ease, transform 180ms ease, background 180ms ease;
  backdrop-filter: blur(8px);
  pointer-events: none;
}

.photo-item:hover img,
.photo-item:focus-visible img { filter: saturate(1.04); transform: scale(1.018); }
.photo-item:hover::after,
.photo-item:focus-visible::after { opacity: 1; transform: translateY(0); }

@media (max-width: 980px) {
  .portfolio-hero { min-height: 0; padding-top: clamp(32rem, 78vw, 39rem); }

  .portfolio-hero::after {
    background:
      linear-gradient(180deg, rgba(6, 11, 8, 0.48), rgba(7, 12, 9, 0.94)),
      radial-gradient(circle at 50% 20%, rgba(38, 169, 237, 0.12), transparent 34%);
  }

  .portfolio-hero__reel--large {
    top: -4.5rem;
    bottom: auto;
    left: -4.75rem;
    display: block;
    width: 12.5rem;
    opacity: 0.08;
  }
  .portfolio-hero__reel--medium {
    top: 40%;
    right: -3.25rem;
    left: auto;
    width: 9rem;
    opacity: 0.09;
  }
  .portfolio-hero__reel--small {
    top: 37%;
    left: -3rem;
    width: 8.5rem;
    opacity: 0.12;
  }
  .portfolio-hero__reel--mini {
    top: 1.25rem;
    right: auto;
    left: 47%;
    width: 5.75rem;
    opacity: 0.09;
  }
  .portfolio-hero__film-strip {
    top: clamp(23rem, 55vw, 29rem);
    bottom: auto;
    left: -5%;
    width: 110%;
    height: 5.6rem;
    padding: 0.78rem 0.7rem;
    opacity: 0.18;
    transform: rotate(-3.5deg);
  }
  .portfolio-hero__film-code { display: none; }
  .portfolio-hero__focus-mark { display: none; }

  .portfolio-hero__frame {
    position: absolute;
    top: clamp(2.7rem, 5vw, 3.5rem);
    right: var(--page-pad);
    bottom: auto;
    left: auto;
    width: min(44vw, 21rem);
    height: auto;
    margin: 0;
    transform: rotate(0.75deg);
  }

  .portfolio-hero__frame--secondary {
    z-index: 1;
    top: clamp(2.7rem, 5vw, 3.5rem);
    right: auto;
    left: max(0.75rem, calc(var(--page-pad) - 1.5rem));
    width: min(44vw, 21rem);
    margin: 0;
    opacity: 0;
    transform: rotate(-0.75deg) translateY(0.65rem);
  }

  .portfolio-hero__frame--secondary.is-ready {
    opacity: 1;
    transform: rotate(-0.75deg) translateY(0);
  }

  .portfolio-hero__content {
    width: min(100% - (var(--page-pad) * 2), 45rem);
    min-height: 0;
    padding: clamp(2.2rem, 5vw, 3.2rem) 0 clamp(3rem, 7vw, 4.5rem);
  }

  .portfolio-hero__content > *,
  .portfolio-hero__content > p:last-child { max-width: 38rem; }

  .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .gallery-grid-heading {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }
  .gallery-grid-heading > p { margin: 0; }
}

@media (max-width: 560px) {
  .portfolio-hero { padding-top: clamp(27rem, 126vw, 31rem); }
  .portfolio-hero__frame {
    top: 3rem;
    right: 0.75rem;
    left: auto;
    width: min(65vw, 17rem);
    height: auto;
    margin: 0;
    padding: 0.68rem 0.68rem 0.48rem;
    border-radius: 0.18rem;
    transform: rotate(0.65deg);
  }
  .portfolio-hero__frame--secondary {
    top: 1rem;
    right: auto;
    left: 0.25rem;
    width: min(65vw, 17rem);
    margin: 0;
    padding: 0.68rem 0.68rem 0.48rem;
    transform: rotate(-0.65deg) translateY(0.55rem);
  }
  .portfolio-hero__frame--secondary.is-ready { transform: rotate(-0.65deg) translateY(0); }
  .portfolio-hero__reel--large,
  .portfolio-hero__reel--mini { display: none; }
  .portfolio-hero__reel--medium {
    top: 18.5rem;
    right: auto;
    left: -2.8rem;
    width: 7.5rem;
    opacity: 0.08;
  }
  .portfolio-hero__reel--small {
    top: -0.35rem;
    right: -2.8rem;
    left: auto;
    width: 8.5rem;
    opacity: 0.1;
  }
  .portfolio-hero__film-strip {
    top: 21.5rem;
    left: -18%;
    width: 136%;
    height: 4.35rem;
    padding: 0.65rem 0.55rem;
    gap: 0.22rem;
    opacity: 0.14;
    transform: rotate(-3deg);
  }
  .portfolio-hero__matte { border-radius: 0.06rem; }
  .portfolio-hero__frame figcaption { min-height: 3.9rem; font-size: 0.5rem; }
  .portfolio-hero__frame figcaption strong { font-size: 1.02rem; }
  .portfolio-hero__content { width: calc(100% - 2rem); }
  .portfolio-hero h1 span { font-size: clamp(2.3rem, 11vw, 3.1rem); }
  .portfolio-hero h1 em { font-size: clamp(2.9rem, 14vw, 4rem); }
  .portfolio-hero__content > p:last-child { font-size: 0.98rem; }

  .portfolio-shell { width: calc(100% - 2rem); }
  .photo-grid { grid-template-columns: 1fr; }
  .photo-item.photo-item--wide { grid-column: span 1; }
  .photo-item,
  .photo-item:nth-child(n) { min-height: 0; border-radius: 0.8rem; }
  .photo-item::after { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-hero::before { filter: blur(22px); }
  .portfolio-hero__frame--secondary { transition: none; }
  .photo-item img { transition: none; }
}