/* Punto Due Studio v7 — Projects as Digital Territories */

/*
  Portfolio principle:
  the studio grid stays constant while every featured project introduces
  its own material, rhythm and motion language. All artwork is native CSS
  to avoid heavy media, external dependencies and layout shift.
*/

.portfolio-v7-home{padding-top:clamp(108px,12vw,190px)}
.portfolio-v7-head{margin-bottom:clamp(42px,5vw,72px)}
.portfolio-v7-head h2{max-width:920px}
.portfolio-v7-head>div:last-child{align-self:end}
.portfolio-v7-head .text-link{margin-top:18px}

.portfolio-v7-grid{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(320px,.78fr);gap:12px;align-items:start}
.territory-card{position:relative;display:block;overflow:hidden;background:var(--v5-dark);border:1px solid var(--v5-line);min-height:clamp(520px,55vw,760px);isolation:isolate;transition:transform .55s var(--v5-ease),border-color .55s var(--v5-ease)}
.territory-card:nth-child(2){margin-top:clamp(70px,7vw,116px);min-height:clamp(500px,48vw,680px)}
.territory-card:nth-child(3){grid-column:1/-1;min-height:clamp(390px,34vw,520px);margin-top:0}
.territory-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--v5-ink) 35%,transparent)}
.territory-card:focus-visible{outline:3px solid var(--v5-accent);outline-offset:5px}

.territory-art{position:absolute;inset:0;overflow:hidden;transform:translateZ(0)}
.territory-art::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(8,10,9,.20),transparent 45%)}
.territory-meta{position:absolute;z-index:8;left:22px;right:22px;bottom:20px;display:flex;align-items:end;justify-content:space-between;gap:24px}
.territory-meta span{font-size:10px;font-weight:650;letter-spacing:.14em;text-transform:uppercase}
.territory-meta h3{font-size:clamp(38px,4.4vw,68px);font-weight:500;line-height:.92;letter-spacing:-.06em;margin-top:8px}
.territory-open{display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:10px!important}
.territory-open::after{content:"↗";display:grid;place-items:center;width:38px;height:38px;border:1px solid currentColor;font-size:15px;transition:transform .35s var(--v5-ease),background .35s var(--v5-ease),color .35s var(--v5-ease)}
.territory-card:hover .territory-open::after{transform:translate(2px,-2px)}

/* NODO — calm relational geometry */
.territory-card--nodo{background:#dfdac9;color:#171b16}
.territory-nodo{background:radial-gradient(circle at 52% 42%,rgba(255,255,255,.52),transparent 25%),linear-gradient(145deg,#eee9db 0%,#d9d4c3 100%)}
.nodo-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(23,27,22,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(23,27,22,.055) 1px,transparent 1px);background-size:54px 54px;mask-image:radial-gradient(circle at 52% 42%,#000 0%,rgba(0,0,0,.72) 38%,transparent 76%)}
.nodo-orbit{position:absolute;left:52%;top:43%;width:var(--orbit);aspect-ratio:1;border:1px solid rgba(32,38,30,.19);border-radius:50%;transform:translate(-50%,-50%);animation:nodo-breathe calc(8s + var(--i)*1.5s) ease-in-out infinite alternate}
.nodo-orbit--1{--orbit:180px;--i:1}.nodo-orbit--2{--orbit:270px;--i:2}.nodo-orbit--3{--orbit:370px;--i:3}.nodo-orbit--4{--orbit:490px;--i:4}
.nodo-core{position:absolute;left:52%;top:43%;width:34px;aspect-ratio:1;border-radius:50%;background:#4d5748;transform:translate(-50%,-50%);box-shadow:0 0 0 12px rgba(77,87,72,.07),0 20px 60px rgba(37,44,35,.16)}
.nodo-axis{position:absolute;left:52%;top:43%;width:min(68%,720px);height:1px;background:rgba(32,38,30,.13);transform:translate(-50%,-50%) rotate(-18deg);transform-origin:center}
.territory-card--nodo .territory-art::after{background:linear-gradient(to top,rgba(223,218,201,.96) 0%,rgba(223,218,201,.22) 34%,transparent 54%)}
.territory-card--nodo .territory-open::after{background:#171b16;color:#eee9db;border-color:#171b16}

/* INNESTO — architectural transformation */
.territory-card--innesto{background:#48443b;color:#f5f1e8}
.territory-innesto{background:linear-gradient(145deg,#555045 0%,#403d36 100%)}
.innesto-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(239,231,211,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(239,231,211,.09) 1px,transparent 1px);background-size:62px 62px;transform:scale(1.08) rotate(-2deg)}
.innesto-block{position:absolute;box-shadow:0 30px 80px rgba(0,0,0,.18);transition:transform .9s var(--v5-ease)}
.innesto-block--a{width:44%;height:31%;left:12%;top:31%;background:#9b876a;transform:rotate(-4deg)}
.innesto-block--b{width:39%;height:28%;right:11%;top:27%;background:#c2b49b;transform:rotate(5deg)}
.innesto-line{position:absolute;left:12%;right:12%;height:1px;background:rgba(245,241,232,.22)}
.innesto-line--1{top:22%}.innesto-line--2{top:39%}.innesto-line--3{top:56%}.innesto-line--4{top:73%}
.territory-card--innesto:hover .innesto-block--a{transform:rotate(-7deg) translate(-10px,9px)}
.territory-card--innesto:hover .innesto-block--b{transform:rotate(7deg) translate(11px,-8px)}
.territory-card--innesto .territory-art::after{background:linear-gradient(to top,rgba(36,35,31,.88),transparent 48%)}
.territory-card--innesto .territory-open::after{background:#f5f1e8;color:#2e2c27;border-color:#f5f1e8}

/* TRAMA ZERO — editorial material experimentation */
.territory-card--trama{background:#171719;color:#fbf8f0}
.territory-trama{background:#171719}
.trama-strip{position:absolute;top:-14%;height:128%;width:16%;transform-origin:center;transition:transform 1s var(--v5-ease)}
.trama-strip--1{left:5%;background:#29292d;transform:rotate(-7deg)}
.trama-strip--2{left:24%;background:#3a3734;transform:rotate(7deg)}
.trama-strip--3{left:43%;background:#bf3e29;transform:rotate(-8deg)}
.trama-strip--4{left:63%;background:#3f3a31;transform:rotate(7deg)}
.trama-strip--5{left:82%;background:#62553d;transform:rotate(-6deg)}
.trama-slash{position:absolute;left:10%;top:49%;width:80%;height:6px;background:#f1ede2;transform:rotate(-9deg);box-shadow:0 0 0 1px rgba(0,0,0,.04)}
.trama-index{position:absolute;right:5%;top:7%;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.54);writing-mode:vertical-rl}
.territory-card--trama:hover .trama-strip--1{transform:rotate(-10deg) translateX(-6px)}
.territory-card--trama:hover .trama-strip--2{transform:rotate(9deg) translateX(5px)}
.territory-card--trama:hover .trama-strip--3{transform:rotate(-5deg) translateY(-8px)}
.territory-card--trama:hover .trama-strip--4{transform:rotate(10deg) translateX(7px)}
.territory-card--trama:hover .trama-strip--5{transform:rotate(-9deg) translateX(8px)}
.territory-card--trama .territory-art::after{background:linear-gradient(to top,rgba(16,16,17,.90),transparent 50%)}
.territory-card--trama .territory-open::after{background:#fbf8f0;color:#171719;border-color:#fbf8f0}

.portfolio-v7-index{display:grid;grid-template-columns:.42fr 1.58fr;margin-top:clamp(56px,7vw,94px);border-top:1px solid var(--v5-line);border-bottom:1px solid var(--v5-line)}
.portfolio-v7-index>span{padding:24px 24px 24px 0;font-size:10px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--v5-muted)}
.portfolio-v7-index-links{border-left:1px solid var(--v5-line)}
.portfolio-v7-index a{display:grid;grid-template-columns:58px 1fr auto;gap:18px;align-items:center;padding:21px 0 21px 24px;border-bottom:1px solid var(--v5-line);transition:background .3s var(--v5-ease),padding-left .3s var(--v5-ease)}
.portfolio-v7-index a:last-child{border-bottom:0}
.portfolio-v7-index a:hover{background:rgba(159,176,107,.10);padding-left:30px}
.portfolio-v7-index a span:first-child{font-size:10px;letter-spacing:.12em;color:var(--v5-muted)}
.portfolio-v7-index a strong{font-size:clamp(20px,2.2vw,30px);font-weight:500;letter-spacing:-.04em}
.portfolio-v7-index a span:last-child{padding-right:18px;font-size:16px}

/* Projects page */
.projects-page-v7{background:var(--v5-dark);color:var(--v5-bg);padding-block:clamp(90px,10vw,160px)}
.projects-page-v7 .section-intro{padding-bottom:0;margin-bottom:clamp(76px,9vw,130px)}
.projects-page-v7 .section-intro h2{color:var(--v5-bg)}
.projects-page-v7 .section-intro p{color:rgba(255,255,255,.58)}

.premium-projects-v7{display:grid;gap:clamp(110px,13vw,190px)}
.premium-project-v7{display:grid;grid-template-columns:minmax(230px,.44fr) minmax(0,1.56fr);gap:clamp(46px,6.5vw,96px);align-items:center}
.premium-project-v7:nth-child(even){grid-template-columns:minmax(0,1.56fr) minmax(230px,.44fr)}
.premium-project-v7:nth-child(even) .premium-copy-v7{order:2}
.premium-project-v7:nth-child(even) .project-territory-v7{order:1}
.premium-copy-v7{min-height:430px;display:flex;flex-direction:column;justify-content:space-between}
.premium-copy-v7 .project-index{color:var(--v5-accent-soft);margin-bottom:18px}
.premium-copy-v7 h2{font-size:clamp(48px,5.7vw,88px);color:var(--v5-bg);font-weight:480;letter-spacing:-.06em}
.premium-copy-v7 p{margin-top:22px;max-width:42ch;color:rgba(255,255,255,.60);font-size:14px;line-height:1.75}
.premium-copy-v7 .project-tags{margin-top:26px;margin-bottom:34px}
.premium-copy-v7 .text-link{width:max-content;color:var(--v5-bg);border-color:rgba(255,255,255,.28)}
.project-territory-v7{position:relative;display:block;min-height:clamp(560px,58vw,820px);overflow:hidden;border:1px solid rgba(255,255,255,.13);isolation:isolate;transition:border-color .4s var(--v5-ease),transform .6s var(--v5-ease)}
.project-territory-v7:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.26)}
.project-territory-v7 .territory-art{inset:0}
.project-territory-v7 .territory-meta{left:24px;right:24px;bottom:22px}
.project-territory-v7 .territory-meta h3{font-size:clamp(44px,6vw,86px)}
.project-territory-v7 .territory-open{font-size:10px!important}
.project-territory-v7--nodo{background:#dfdac9;color:#171b16}
.project-territory-v7--innesto{background:#48443b;color:#f5f1e8}
.project-territory-v7--trama{background:#171719;color:#fbf8f0}

.project-archive-v7{margin-top:clamp(130px,16vw,230px);padding-top:32px;border-top:1px solid rgba(255,255,255,.16)}
.archive-head-v7{display:grid;grid-template-columns:.42fr 1.58fr;gap:32px;align-items:start;margin-bottom:44px}
.archive-head-v7 .page-index{color:var(--v5-accent-soft)}
.archive-head-v7 h2{font-size:clamp(36px,4.7vw,66px);color:var(--v5-bg)}
.archive-grid-v7{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.archive-card-v7{display:block;border:1px solid rgba(255,255,255,.14);transition:border-color .35s var(--v5-ease),transform .35s var(--v5-ease)}
.archive-card-v7:hover{border-color:rgba(255,255,255,.30);transform:translateY(-2px)}
.archive-media-v7{aspect-ratio:16/10;overflow:hidden;background:#111}
.archive-media-v7 img{width:100%;height:100%;object-fit:cover;filter:saturate(.86) contrast(1.03);transition:transform .7s var(--v5-ease),filter .7s var(--v5-ease)}
.archive-card-v7:hover img{transform:scale(1.02);filter:saturate(1)}
.archive-meta-v7{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:end;padding:22px}
.archive-meta-v7 span{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.54)}
.archive-meta-v7 h3{font-size:clamp(28px,3vw,44px);font-weight:500;color:var(--v5-bg);margin-top:7px}
.archive-meta-v7>span:last-child{color:var(--v5-bg);font-size:18px}

.demo-disclosure-v7{margin-top:clamp(80px,10vw,130px);display:grid;grid-template-columns:.42fr 1.58fr;gap:32px;padding:28px 0;border-top:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16)}
.demo-disclosure-v7 .page-index{color:var(--v5-accent-soft)}
.demo-disclosure-v7 p{max-width:900px;color:rgba(255,255,255,.64);font-size:clamp(18px,2vw,28px);line-height:1.35;letter-spacing:-.025em}

@keyframes nodo-breathe{
  from{transform:translate(-50%,-50%) scale(.985);opacity:.72}
  to{transform:translate(-50%,-50%) scale(1.035);opacity:1}
}

@media(max-width:980px){
  .portfolio-v7-grid{grid-template-columns:1fr 1fr}
  .territory-card:nth-child(2){margin-top:72px}
  .territory-card:nth-child(3){grid-column:1/-1}
  .premium-project-v7,.premium-project-v7:nth-child(even){grid-template-columns:1fr;gap:34px}
  .premium-project-v7:nth-child(even) .premium-copy-v7,.premium-project-v7:nth-child(even) .project-territory-v7{order:initial}
  .premium-copy-v7{min-height:0}
  .premium-copy-v7 .text-link{margin-top:12px}
  .project-territory-v7{min-height:620px}
}

@media(max-width:760px){
  .portfolio-v7-home{padding-top:86px}
  .portfolio-v7-grid{grid-template-columns:1fr;gap:10px}
  .territory-card,.territory-card:nth-child(2),.territory-card:nth-child(3){grid-column:auto;min-height:430px;margin-top:0}
  .territory-meta{left:16px;right:16px;bottom:16px;gap:14px}
  .territory-meta h3{font-size:38px}
  .territory-open{font-size:0!important;gap:0}
  .territory-open::after{width:36px;height:36px}
  .nodo-orbit--4{--orbit:410px}
  .portfolio-v7-index{grid-template-columns:1fr;margin-top:48px}
  .portfolio-v7-index>span{padding:20px 0 14px}
  .portfolio-v7-index-links{border-left:0}
  .portfolio-v7-index a{padding-left:0;grid-template-columns:42px 1fr auto}
  .portfolio-v7-index a:hover{padding-left:0;background:transparent}
  .projects-page-v7{padding-block:78px}
  .projects-page-v7 .section-intro{margin-bottom:68px}
  .premium-projects-v7{gap:78px}
  .premium-copy-v7 h2{font-size:48px}
  .project-territory-v7{min-height:470px}
  .project-territory-v7 .territory-meta h3{font-size:42px}
  .project-territory-v7 .territory-open{font-size:0!important}
  .project-archive-v7{margin-top:96px}
  .archive-head-v7,.demo-disclosure-v7{grid-template-columns:1fr;gap:14px}
  .archive-grid-v7{grid-template-columns:1fr}
  .archive-meta-v7{padding:18px}
  .demo-disclosure-v7{margin-top:70px}
  .demo-disclosure-v7 p{font-size:20px}
}

@media(max-width:430px){
  .territory-card,.territory-card:nth-child(2),.territory-card:nth-child(3){min-height:390px}
  .project-territory-v7{min-height:430px}
  .nodo-orbit--3{--orbit:300px}.nodo-orbit--4{--orbit:380px}
  .portfolio-v7-index a strong{font-size:21px}
}

@media(prefers-reduced-motion:reduce){
  .nodo-orbit{animation:none}
  .territory-card,.project-territory-v7,.innesto-block,.trama-strip,.portfolio-v7-index a,.archive-card-v7,.archive-media-v7 img{transition:none!important}
  .territory-card:hover,.project-territory-v7:hover,.archive-card-v7:hover{transform:none}
  .innesto-block--a,.innesto-block--b,.trama-strip{transform:initial}
  .innesto-block--a{transform:rotate(-4deg)}.innesto-block--b{transform:rotate(5deg)}
  .trama-strip--1{transform:rotate(-7deg)}.trama-strip--2{transform:rotate(7deg)}.trama-strip--3{transform:rotate(-8deg)}.trama-strip--4{transform:rotate(7deg)}.trama-strip--5{transform:rotate(-6deg)}
}