/* MAZ Project Showcase — shared social links and authentic project photography. */
.social-links { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; }
.social-icon { display: inline-flex; flex: 0 0 48px; width: 48px; height: 48px; align-items: center; justify-content: center; border: 1px solid rgba(232,238,247,.4); border-radius: 12px; background: linear-gradient(160deg,#fff2,transparent 45%),linear-gradient(#222c3a,#080c13); box-shadow: inset 0 1px #ffffff40,0 7px 16px #0008; transition: transform .18s ease,box-shadow .18s ease,border-color .18s ease; text-decoration: none; }
.social-icon img { width: 27px; height: 27px; }
.social-icon:hover,.social-icon:focus-visible { transform: translateY(-3px); border-color: var(--blue-bright); box-shadow: 0 0 22px #087dff55,0 9px 20px #0009; }
.social-icon:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.header-social { flex-wrap: nowrap; flex-shrink: 0; margin-left: .2rem; gap: .45rem; }
.header-social .social-icon { flex-basis: 44px; width: 44px; height: 44px; border-radius: 10px; }
.footer-social { margin-top: 1.35rem; }
.nav-wrap { gap: clamp(.8rem,2vw,2rem); }
.project-showcase { position: relative; padding-block: clamp(3.8rem,6vw,6.5rem); overflow: clip; background: radial-gradient(ellipse at 5% 20%,#087dff12,transparent 50%),linear-gradient(180deg,#040609,#0b1017 55%,#030507); border-block: 1px solid #ffffff14; }
.project-showcase .section-head { margin-bottom: 2rem; }
.project-showcase h2 { font-size: clamp(2.8rem,5.3vw,5.5rem); }
.showcase-note { color: var(--silver); font-size: .9rem; max-width: 45rem; }
.showcase-topline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: 1rem; }
.showcase-tag { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--headline); font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.showcase-tag::before { content: ''; width: 26px; height: 5px; background: var(--red); box-shadow: 0 0 14px #ff233866; transform: skewX(-22deg); }
.showcase-count { font-family: var(--headline); font-size: .85rem; letter-spacing: .09em; color: #aab6c6; text-transform: uppercase; }
.project-gallery { position: relative; min-width: 0; padding: clamp(.75rem,1.8vw,1.4rem); border: 1px solid #dbe6f248; border-radius: 24px; background: linear-gradient(150deg,#ffffff0d,transparent 27%),repeating-linear-gradient(105deg,#ffffff04 0 1px,transparent 1px 7px),linear-gradient(145deg,#1a2330,#090d14 50%,#030507); box-shadow: inset 0 1px #ffffff38,0 25px 60px #0009,0 0 36px #087dff12; }
.project-gallery::after { content: ''; position: absolute; height: 4px; bottom: -1px; left: 8%; right: 8%; border-radius: 8px; background: linear-gradient(90deg,var(--blue),var(--gold),var(--red)); box-shadow: 0 0 24px #087dff55; }
.project-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; padding-bottom: 1rem; }
.project-filter { min-height: 44px; padding: .55rem .85rem; color: #b6c1cf; font-size: .75rem; font-weight: 800; border: 1px solid #ffffff24; border-radius: 8px; background: #05080dc4; cursor: pointer; }
.project-filter[aria-pressed="true"] { color: #080b10; border-color: var(--gold); background: linear-gradient(#ffe690,var(--gold)); box-shadow: 0 0 15px #ffc92824; }
.project-filter:disabled { opacity: .35; cursor: default; }
.project-filter:focus-visible,.project-arrow:focus-visible,.project-image-open:focus-visible,.project-thumb:focus-visible,.lightbox-close:focus-visible { outline: 3px solid var(--blue-bright); outline-offset: 4px; }
.project-frame { position: relative; display: grid; grid-template-columns: 58px minmax(0,1fr) 58px; align-items: center; gap: clamp(.5rem,1.1vw,1rem); padding: .9rem; min-width: 0; border: 1px solid #ffffff1c; border-radius: 15px; background: radial-gradient(ellipse at 50% 100%,#087dff10,transparent 70%),#020305; }
.project-image-open { display: grid; place-items: center; width: 100%; min-width: 0; height: clamp(320px,48vw,650px); overflow: hidden; border-radius: 5px; text-decoration: none; cursor: zoom-in; background: #020305; }
.project-image { width: 100%; height: 100%; max-height: 650px; object-fit: contain; transition: opacity .18s ease; }
.project-arrow { display: inline-grid; place-items: center; width: 56px; min-width: 0; height: 70px; padding: 0 0 8px; font-family: Arial,sans-serif; font-size: 4rem; font-weight: 400; line-height: 1; color: white; border: 1px solid #ff9aa5a6; border-radius: 10px; background: linear-gradient(160deg,#ff6472,#d10c25 48%,#710513); box-shadow: inset 0 1px #ffffff55,inset 0 -3px #4b000acc,0 0 20px #ff23382c; cursor: pointer; transition: transform .18s ease,box-shadow .18s ease; }
.project-arrow:hover { transform: translateY(-2px); box-shadow: 0 0 28px #ff23385c; }
.project-arrow:disabled { opacity: .35; cursor: default; transform: none; }
.project-zoom { position: absolute; right: 91px; bottom: 24px; pointer-events: none; padding: .35rem .65rem; border: 1px solid #ffffff38; border-radius: 6px; background: #030508dc; font-family: var(--headline); font-size: .75rem; letter-spacing: .08em; color: #fff; text-transform: uppercase; }
.project-caption-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .8rem; align-items: center; padding: 1.15rem .3rem .8rem; }
.project-caption { margin: .4rem 0 0; max-width: 75ch; color: #d0d8e3; font-size: .85rem; overflow-wrap: anywhere; }
.project-stage { display: inline-flex; align-items: center; gap: .45rem; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #a8d3ff; }
.project-stage::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--blue-bright); }
.project-stage[data-stage="installed"] { color: #b4d9c5; }
.project-stage[data-stage="installed"]::before { background: #5bba88; }
.project-stage[data-stage="before"] { color: #f3d690; }
.project-stage[data-stage="before"]::before { background: var(--gold); }
.project-counter { font-family: var(--headline); color: var(--gold); font-size: clamp(1.5rem,3vw,2.2rem); white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.project-thumbs { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: .6rem; min-width: 0; padding: .4rem 0 .8rem; }
.project-thumb { display: grid; place-items: center; width: 100%; height: clamp(52px,8vw,100px); padding: 3px; overflow: hidden; border: 1px solid #ffffff2b; border-radius: 7px; background: #020305; cursor: pointer; transition: border-color .18s ease,box-shadow .18s ease; }
.project-thumb img { width: 100%; height: 100%; object-fit: contain; }
.project-thumb[aria-current="true"] { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold),0 0 17px #ffc9282b; }
.project-thumb:hover { border-color: var(--blue-bright); }
.project-instructions { margin: .3rem .3rem 0; color: #93a2b6; font-size: .76rem; }
.project-status { min-height: 1.4em; margin: .65rem .3rem 0; color: var(--gold); font-size: .78rem; }
.project-status:empty { display: none; }
.project-retry { margin: .5rem .3rem; }
.project-retry[hidden] { display: none; }
.project-empty { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 2rem; padding: clamp(1.8rem,4vw,4rem); border: 1px solid #ffffff38; border-radius: 22px; background: radial-gradient(circle at 5% 50%,#087dff1a,transparent 50%),linear-gradient(140deg,#111925,#040609); }
.project-empty-mark { font-family: var(--headline); font-size: clamp(4rem,8vw,7rem); line-height: 1; letter-spacing: -.03em; color: #fff; text-shadow: 3px 3px 0 var(--red),-2px -2px 0 var(--blue); }
.project-empty h3 { margin: 0; font-size: clamp(1.7rem,3vw,2.7rem); }
.project-empty p { color: var(--silver); max-width: 42rem; }
.project-lightbox-open { overflow: hidden; }
.project-lightbox { box-sizing: border-box; width: min(1500px,calc(100vw - 2rem)); max-width: calc(100vw - 2rem); max-height: calc(100dvh - 2rem); padding: 1rem; color: white; border: 1px solid #e8edf466; border-radius: 18px; background: #05080d; box-shadow: 0 0 70px #000; }
.project-lightbox::backdrop { background: #000e; backdrop-filter: blur(8px); }
.lightbox-top,.lightbox-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.lightbox-top { padding: 0 .25rem .8rem; }
.lightbox-wordmark { font-family: var(--headline); color: var(--gold); font-size: 1.2rem; letter-spacing: .06em; }
.lightbox-wordmark span { color: #b9c5d4; font-size: .8rem; margin-left: .6rem; }
.lightbox-close { width: 48px; height: 48px; flex: 0 0 auto; border: 1px solid #ffffff55; border-radius: 8px; background: #17202c; color: white; font-size: 2rem; cursor: pointer; }
.lightbox-stage { display: grid; grid-template-columns: 56px minmax(0,1fr) 56px; align-items: center; gap: .8rem; min-width: 0; }
.lightbox-stage img { width: 100%; height: min(72dvh,1000px); object-fit: contain; background: #000; }
.lightbox-bottom { padding: .6rem .2rem 0; font-size: .8rem; }
.lightbox-bottom p { margin: 0; max-width: 75ch; overflow-wrap: anywhere; }
.lightbox-bottom span { color: var(--gold); flex: 0 0 auto; }
.project-portal-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 1.15rem; }
.project-portal { grid-column: span 2; min-width: 0; overflow: hidden; border: 1px solid #ffffff30; border-radius: 17px; background: linear-gradient(145deg,#18212d,#05080d); text-decoration: none; box-shadow: 0 16px 35px #0006; transition: transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.project-portal:nth-last-child(-n+2) { grid-column: span 3; }
.project-portal:hover,.project-portal:focus-visible { transform: translateY(-5px); border-color: var(--blue-bright); box-shadow: 0 0 28px #087dff25,0 20px 35px #0008; }
.project-portal:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.project-portal-photo { display: grid; place-items: center; height: clamp(210px,20vw,310px); padding: .65rem; background: radial-gradient(ellipse at 50% 100%,#087dff14,transparent),#020305; }
.project-portal img { width: 100%; height: 100%; object-fit: contain; }
.project-portal-copy { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: 1.1rem 1.2rem 1.3rem; border-top: 1px solid #ffffff1c; }
.project-portal h3 { font-size: clamp(1.4rem,2.4vw,2rem); margin: 0 0 .2rem; }
.project-portal small { color: var(--silver); font-size: .76rem; }
.project-portal-arrow { display: grid; place-items: center; flex: 0 0 40px; height: 40px; color: white; background: linear-gradient(#ff4f63,#b30920); border: 1px solid #ff7385; border-radius: 8px; font-size: 1.5rem; }
@media (max-width:1240px) { .header-social { margin-left: auto; order: 2; } .nav-wrap .menu-toggle { order: 3; } }
@media (max-width:760px) {
  .header-social { gap: .4rem; } .header-social .social-icon { width: 42px; height: 44px; flex-basis: 42px; } .header-social .social-icon img { width: 25px; height: 25px; }
  .project-showcase { padding-block: 3.6rem; }
  .project-gallery { border-radius: 17px; padding: .65rem; }
  .project-frame { grid-template-columns: 44px minmax(0,1fr) 44px; padding: .5rem .25rem; gap: .6rem; border-radius: 10px; }
  .project-image-open { height: 390px; grid-column: 1 / -1; grid-row: 1; } .project-image { max-height: 390px; }
  .project-frame > .project-arrow { grid-row: 2; } .project-frame > .project-arrow:first-child { grid-column: 1; } .project-frame > .project-arrow[data-gallery-move="1"] { grid-column: 3; }
  .project-arrow { width: 44px; height: 62px; font-size: 3.5rem; border-radius: 8px; }
  .project-zoom { right: 12px; bottom: 85px; padding: .25rem .4rem; font-size: .62rem; }
  .project-caption-row { align-items: start; gap: .5rem; }
  .project-thumbs { grid-template-columns: repeat(5,minmax(0,1fr)); gap: .35rem; } .project-thumb { height: 56px; padding: 2px; } .project-thumb:nth-child(n+6) { display: none; }
  .project-filter { padding: .5rem .65rem; font-size: .68rem; }
  .project-empty { grid-template-columns: 1fr; gap: 1.2rem; }
  .project-portal-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; }
  .project-portal,.project-portal:nth-last-child(-n+2) { grid-column: auto; }
  .project-portal:last-child { grid-column: 1 / -1; }
  .project-portal-photo { height: 220px; }
  .project-portal-copy { padding: .9rem; } .project-portal-arrow { display: none; }
  .project-lightbox { width: calc(100vw - 1rem); max-width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); padding: .6rem; }
  .lightbox-stage { grid-template-columns: 44px minmax(0,1fr) 44px; gap: .4rem; }
  .lightbox-stage img { height: 55dvh; grid-column: 1 / -1; grid-row: 1; } .lightbox-stage > .project-arrow { grid-row: 2; } .lightbox-stage > .project-arrow:first-child { grid-column: 1; } .lightbox-stage > .project-arrow:last-child { grid-column: 3; } .lightbox-bottom { display: grid; gap: .35rem; }
}
@media (max-width:420px) { .nav-wrap { gap: .65rem; } .header-social .social-icon { width: 40px; flex-basis: 40px; } .project-image-open { height: 320px; } .project-thumb { height: 48px; } .project-portal-photo { height: 175px; } .project-portal-copy { padding: .8rem; } .project-portal h3 { font-size: 1.25rem; } .lightbox-wordmark span { display: none; } }
@media (prefers-reduced-motion:reduce) { .social-icon,.project-image,.project-arrow,.project-thumb,.project-portal { transition: none; } }