/* ==================================================================
   Portfolio — bespoke layout + interactions (2024 refresh)
   ================================================================== */

body.portfolio-page{
  background-color:#f6f2e9;
  background-image:radial-gradient(circle at 10% 20%, rgba(228,221,204,.85), rgba(228,221,204,.32) 42%, rgba(228,221,204,0) 72%),
                   linear-gradient(180deg, #f8f6f1 0%, #f4f0e8 38%, #f9f6ef 72%, #ffffff 100%);
  background-repeat:no-repeat;
  background-attachment:fixed;
  color:var(--slate);
  min-height:100vh;
}

body.portfolio-page::before{opacity:.6;}
body.portfolio-page::after{opacity:.42;}

.visually-hidden{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  margin:-1px !important;
  padding:0 !important;
  border:0 !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
}

body.portfolio-page main{
  padding-top:calc(var(--nav-h) + 40px);
}

.portfolio-hero{
  position:relative;
  display:flex;
  align-items:center;
  min-height:calc(100vh - var(--nav-h));
  padding:clamp(96px, 12vh, 160px) 0 120px;
  overflow:hidden;
}

.hero-background{
  position:absolute;
  inset:0;
  z-index:-2;
  overflow:hidden;
}

.flux-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  filter:saturate(0.92) contrast(0.98);
}

.hero-gradient{
  position:absolute;
  inset:auto -12% -52% -12%;
  height:52%;
  background:linear-gradient(180deg, rgba(244,239,230,0) 0%, rgba(244,239,230,.8) 46%, rgba(254,252,247,.96) 100%);
  z-index:-1;
}

.hero-layout{
  display:grid;
  grid-template-columns:minmax(0, 620px) minmax(0, 360px);
  align-items:start;
  gap:clamp(40px, 6vw, 96px);
}

@media (max-width:1024px){
  .hero-layout{grid-template-columns:1fr;}
  .portfolio-hero{padding-bottom:80px;}
}

.hero-content{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.hero-title{
  font-family:'Playfair Display', Georgia, serif;
  font-size:clamp(2.7rem, 6vw, 4.6rem);
  color:var(--slate-strong);
}

.hero-subtitle{
  font-size:clamp(1.05rem, 2.4vw, 1.4rem);
  max-width:52ch;
  margin:0;
  color:rgba(43,47,51,.72);
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px clamp(16px, 4vw, 36px);
}

.hero-button{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:18px 34px;
  border-radius:999px;
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:.08em;
  border:1px solid rgba(31,35,39,.2);
  background:rgba(255,255,255,.9);
  color:var(--slate-strong);
  box-shadow:0 18px 40px rgba(0,0,0,.09);
  transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.hero-button .arrow{transition:transform .25s ease;}

.hero-button:hover{
  transform:translateY(-2px);
  box-shadow:0 26px 48px rgba(0,0,0,.16);
  background:var(--slate-strong);
  color:#fff;
}

.hero-button:hover .arrow{transform:translateX(4px);}

.hero-scroll-hint{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.9rem;
  color:rgba(43,47,51,.55);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.hero-scroll-hint .dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(43,47,51,.28);
  position:relative;
  overflow:hidden;
}

.hero-scroll-hint .dot::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:rgba(43,47,51,.8);
  animation:pulse 2.6s ease-in-out infinite;
}

@keyframes pulse{
  0%, 20%{transform:scale(.2);opacity:0;}
  45%{transform:scale(1);opacity:.85;}
  100%{transform:scale(1.7);opacity:0;}
}

.hero-stats{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
  align-content:start;
  padding:26px;
  border-radius:26px;
  background:rgba(255,255,255,.82);
  box-shadow:0 20px 40px rgba(0,0,0,.12);
  backdrop-filter:blur(10px);
}

.hero-stats .stat{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:14px 18px;
  border-radius:18px;
  background:linear-gradient(145deg, rgba(240,236,228,.9), rgba(255,255,255,.55));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}

.hero-stats .stat-value{
  font-size:2.2rem;
  font-weight:800;
  color:var(--slate-strong);
}

.hero-stats .stat-label{
  font-size:.95rem;
  color:rgba(43,47,51,.6);
}

@media (max-width:1024px){
  .hero-stats{
    grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  }
}

@media (max-width:640px){
  .hero-actions{flex-direction:column;align-items:flex-start;}
  .hero-button{width:100%;justify-content:center;}
  .hero-scroll-hint{padding-top:8px;}
  .hero-stats{margin-top:16px;padding:20px;}
}

.category-block{
  position:relative;
  padding:96px 0;
}

.category-block::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.68) 0%, rgba(255,255,255,.34) 58%, rgba(255,255,255,0) 100%);
  opacity:.6;
  pointer-events:none;
}

.category-block:nth-of-type(even){
  background:linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(232,225,209,.28) 58%, rgba(255,255,255,.98) 100%);
}

.section-heading{
  position:relative;
  z-index:1;
  max-width:720px;
  margin-bottom:38px;
}

.section-heading h2{
  font-family:'Playfair Display', Georgia, serif;
  font-size:clamp(2rem, 4vw, 3.1rem);
  color:var(--slate-strong);
}

.section-heading p{
  margin:0;
  font-size:1.05rem;
  color:rgba(43,47,51,.65);
}

.project-rail{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.rail-window{
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding-bottom:18px;
  margin:0 -24px;
  padding-left:24px;
}

.rail-window::-webkit-scrollbar{height:12px;}
.rail-window::-webkit-scrollbar-thumb{
  background:rgba(43,47,51,.25);
  border-radius:999px;
}

@media (min-width:960px){
  .rail-window{margin:0; padding-left:0;}
}

.rail-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(280px, clamp(320px, 32vw, 420px));
  gap:clamp(18px, 4vw, 36px);
  scroll-snap-align:start;
}

.project-card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:rgba(255,255,255,.82);
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 24px 50px rgba(0,0,0,.12);
  min-height:100%;
  scroll-snap-align:start;
  border:1px solid rgba(43,47,51,.08);
  transition:transform .35s ease, box-shadow .35s ease;
  will-change:transform;
}

.project-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.12) 100%);
  opacity:0;
  transition:opacity .35s ease;
  pointer-events:none;
}

.project-card:focus-within::after,
.project-card:hover::after{opacity:1;}

.project-card.is-active,
.project-card:hover{
  transform:translateY(-8px);
  box-shadow:0 36px 74px rgba(0,0,0,.18);
}

.project-media{aspect-ratio:4/3;background:#f4f1eb;overflow:hidden;position:relative;}
.project-media img,.project-media model-viewer{width:100%;height:100%;object-fit:cover;display:block;}
.project-media--viewer model-viewer{--poster-color:transparent;background:radial-gradient(circle at 50% 20%, rgba(255,255,255,.8), rgba(228,221,204,.4));}

.project-body{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:24px 26px 28px;
}

.project-kicker{
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:.01em;
  color:var(--slate-strong);
}

.project-summary{
  margin:0;
  color:rgba(43,47,51,.68);
  font-size:.98rem;
  line-height:1.6;
}

.project-action{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 20px;
  border-radius:999px;
  background:rgba(43,47,51,.08);
  border:1px solid rgba(43,47,51,.12);
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--slate-strong);
  transition:transform .25s ease, background-color .25s ease, color .25s ease;
}

.project-action span[aria-hidden="true"]{transition:transform .25s ease;}

.project-action:hover{
  transform:translateY(-1px);
  background:var(--slate-strong);
  color:#fff;
}

.project-action:hover span[aria-hidden="true"]{transform:translateX(3px);}

.rail-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:0 4px;
}

.rail-label{
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.78rem;
  color:rgba(43,47,51,.55);
  white-space:nowrap;
}

.rail-buttons{
  display:flex;
  gap:12px;
}

.rail-buttons button{
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid rgba(43,47,51,.15);
  background:rgba(255,255,255,.9);
  color:var(--slate-strong);
  display:grid;
  place-items:center;
  font-size:1.2rem;
  cursor:pointer;
  transition:transform .25s ease, background-color .25s ease, color .25s ease, box-shadow .25s ease;
  box-shadow:0 12px 24px rgba(0,0,0,.12);
}

.rail-buttons button:hover{
  transform:translateY(-2px);
  background:var(--slate-strong);
  color:#fff;
  box-shadow:0 18px 36px rgba(0,0,0,.16);
}

.rail-buttons button:disabled{
  opacity:.35;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

.rail-progress{
  position:relative;
  flex:1;
  height:4px;
  border-radius:999px;
  background:rgba(43,47,51,.12);
  overflow:hidden;
}

.rail-progress__bar{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(43,47,51,.2), rgba(43,47,51,.72));
  transform-origin:left;
  transform:scaleX(0);
  transition:transform .3s ease;
}

@media (max-width:680px){
  .rail-controls{flex-direction:column;align-items:flex-start;gap:16px;}
  .rail-label{letter-spacing:.2em;}
  .rail-progress{width:100%;}
}

.footer{margin-top:80px;}

/* ============================= Modal ============================= */

body.modal-open{overflow:hidden;}

.portfolio-modal{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  background:rgba(23,26,29,.55);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
  z-index:120;
}

.portfolio-modal.open{
  opacity:1;
  pointer-events:auto;
}

.portfolio-modal__backdrop{
  position:absolute;
  inset:0;
}

.portfolio-modal__dialog{
  position:relative;
  max-width:min(960px, 92vw);
  max-height:min(88vh, 960px);
  width:100%;
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
  transform:translateY(24px);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}

.portfolio-modal.open .portfolio-modal__dialog{transform:translateY(0);}

.portfolio-modal__close{
  position:absolute;
  top:20px;
  right:22px;
  width:42px;
  height:42px;
  border-radius:50%;
  border:0;
  background:rgba(43,47,51,.08);
  color:var(--slate-strong);
  font-size:1.4rem;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:background .25s ease, color .25s ease, transform .25s ease;
}

.portfolio-modal__close:hover{
  background:var(--slate-strong);
  color:#fff;
  transform:scale(1.05);
}

.portfolio-modal__header{
  padding:48px clamp(28px, 6vw, 48px) 24px;
  background:linear-gradient(140deg, rgba(228,221,204,.6), rgba(255,255,255,.9));
}

.portfolio-modal__kicker{
  margin:0;
  letter-spacing:.28em;
  font-size:.76rem;
  text-transform:uppercase;
  color:rgba(43,47,51,.6);
}

.portfolio-modal__header h2{
  margin:12px 0 18px;
  font-family:'Playfair Display', Georgia, serif;
  font-size:clamp(2rem, 4vw, 3rem);
  color:var(--slate-strong);
}

.portfolio-modal__summary{
  margin:0;
  font-size:1.05rem;
  color:rgba(43,47,51,.72);
  max-width:65ch;
}

.portfolio-modal__body{
  position:relative;
  flex:1;
  overflow-y:auto;
  padding:28px clamp(28px, 6vw, 48px) 40px;
  display:flex;
  flex-direction:column;
  gap:28px;
  background:linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(244,241,234,1) 100%);
}

.portfolio-modal__body::-webkit-scrollbar{width:12px;}
.portfolio-modal__body::-webkit-scrollbar-thumb{background:rgba(43,47,51,.25);border-radius:999px;}

.modal-gallery{
  display:flex;
  gap:18px;
  overflow-x:auto;
  padding-bottom:12px;
}

.modal-gallery figure{
  margin:0;
  min-width:min(320px, 75vw);
  border-radius:20px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 18px 32px rgba(0,0,0,.16);
}

.modal-gallery img{width:100%;height:100%;object-fit:cover;display:block;}

.modal-note{
  padding:22px 24px;
  border-left:4px solid rgba(43,47,51,.3);
  background:rgba(255,255,255,.85);
  border-radius:18px;
  color:rgba(43,47,51,.72);
  font-size:.98rem;
  line-height:1.6;
  box-shadow:0 16px 28px rgba(0,0,0,.12);
}

.modal-collection{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}

.modal-collection__label{
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.74rem;
  color:rgba(43,47,51,.55);
}

.modal-collection__btn{
  border:1px solid rgba(43,47,51,.16);
  background:rgba(255,255,255,.92);
  border-radius:999px;
  padding:8px 16px;
  font-size:.85rem;
  font-weight:700;
  letter-spacing:.02em;
  cursor:pointer;
  transition:transform .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.modal-collection__btn:hover{
  transform:translateY(-2px);
  background:var(--slate-strong);
  color:#fff;
  box-shadow:0 10px 22px rgba(0,0,0,.14);
}

.modal-viewer{min-height:360px;border-radius:22px;overflow:hidden;box-shadow:0 22px 40px rgba(0,0,0,.14);background:#f3eee2;}
.modal-viewer model-viewer{width:100%;height:100%;display:block;}

.viewer-placeholder{
  padding:40px 32px;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:center;
  color:rgba(43,47,51,.7);
}

.viewer-placeholder strong{font-size:1.3rem;color:var(--slate-strong);}

.viewer-placeholder__status{margin:0;font-size:.95rem;line-height:1.5;color:rgba(43,47,51,.7);}

.viewer-placeholder__refs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-family:"JetBrains Mono", "Courier New", monospace;font-size:.85rem;}
.viewer-placeholder__ref-status{font-weight:700;margin-left:4px;text-transform:uppercase;}
.viewer-placeholder__ref-status[data-status="missing"]{color:#b94a4a;}
.viewer-placeholder__ref-status[data-status="found"]{color:#2a7b4f;}
.viewer-placeholder__ref-status[data-status="check manually"],
.viewer-placeholder__ref-status[data-status="unknown"]{color:#b07f2a;}

@media (max-width:720px){
  .portfolio-modal__dialog{border-radius:0;max-width:100%;max-height:100vh;}
  .portfolio-modal__header{padding-top:72px;}
}