/* Project pages — "studio wall": pages pinned and taped to a wall, slightly crooked. */
:root{
  --wall:#e8e5de; --ink:#262626; --soft:#6f6f6f;
  --display:"Bodoni Moda",Didot,"Bodoni MT","Times New Roman",serif;
  --text:"EB Garamond",Garamond,"Times New Roman",serif;
  --hand:"Caveat","Bradley Hand","Segoe Print",cursive;
  --gutter:clamp(16px,4.5vw,80px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:var(--text);-webkit-font-smoothing:antialiased;
  background-color:var(--wall);
  /* plaster / pinboard grain */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .32  0 0 0 0 .28  0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    radial-gradient(ellipse at 30% 0%,rgba(255,255,255,.55),transparent 60%),
    radial-gradient(ellipse at 100% 100%,rgba(0,0,0,.06),transparent 55%);
}
body{overflow-x:hidden}
main{overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}

/* top bar */
.bar{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px var(--gutter);background:linear-gradient(var(--wall) 60%,transparent)}
.bar .brand img{width:118px;height:auto}
.bar .back{font-family:var(--display);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.bar .back:hover{text-decoration:underline;text-underline-offset:4px}

/* heading */
.project-head{padding:clamp(28px,7vh,80px) var(--gutter) clamp(20px,4vh,40px);display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 28px}
.project-head h1{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(48px,8vw,140px);line-height:.9;letter-spacing:-.04em}
.project-head p{margin:0 0 .6em;font-family:var(--display);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft)}

/* the wall */
.wall{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(18px,2.6vw,46px) clamp(14px,2vw,36px);
  padding:clamp(20px,4vh,50px) var(--gutter) clamp(80px,14vh,160px);align-items:start}
.paper{position:relative;grid-column:span var(--span,4);margin:0;cursor:zoom-in;z-index:1;
  --tx:var(--x,0px); --ty:var(--y,0px);
  transform:translate(var(--tx),var(--ty)) rotate(var(--rot,0deg));
  transition:transform .6s cubic-bezier(.22,.61,.36,1),box-shadow .6s,z-index 0s .3s}
.paper .sheet{background:#fff;padding:clamp(5px,.5vw,9px);
  box-shadow:0 1px 1px rgba(0,0,0,.08),0 10px 22px -8px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.08);transition:box-shadow .6s}
.paper img{width:100%;height:auto}
.paper:hover,.paper:focus-visible{z-index:20;transform:translate(var(--tx),calc(var(--ty) - 6px)) rotate(0deg) scale(1.03);transition:transform .45s cubic-bezier(.22,.61,.36,1),box-shadow .45s,z-index 0s}
.paper:hover .sheet{box-shadow:0 2px 2px rgba(0,0,0,.08),0 30px 50px -18px rgba(0,0,0,.45)}
.paper:focus-visible{outline:2px solid var(--ink);outline-offset:6px}

/* fixings: pin, tape, clip */
.paper::before{content:"";position:absolute;z-index:3;pointer-events:none}
.pin::before{width:16px;height:16px;border-radius:50%;top:-6px;left:calc(50% - 8px);
  background:radial-gradient(circle at 35% 30%,#fff 0 12%,var(--pc,#b3261e) 30% 62%,rgba(0,0,0,.55) 100%);
  box-shadow:3px 5px 5px rgba(0,0,0,.35)}
.pin.l::before{left:14%} .pin.r::before{left:auto;right:14%}
.tape::before{width:clamp(70px,22%,130px);height:26px;top:-13px;left:calc(50% - clamp(35px,11%,65px));
  background:rgba(238,228,200,.72);box-shadow:0 1px 2px rgba(0,0,0,.12);rotate:var(--tr,-3deg);
  -webkit-mask:linear-gradient(90deg,transparent 0 2px,#000 2px calc(100% - 2px),transparent calc(100% - 2px)),repeating-linear-gradient(#000 0 3px,transparent 3px 4px);
  -webkit-mask-composite:source-over}
.tape.corners::before{left:-14px;top:-8px;rotate:-38deg;width:90px}
.tape.corners::after{content:"";position:absolute;z-index:3;width:90px;height:26px;right:-14px;bottom:-8px;rotate:-38deg;background:rgba(238,228,200,.72);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.clip::before{width:22px;height:52px;top:-22px;left:22%;border:3px solid #8d8d8d;border-radius:12px;border-bottom-color:transparent;box-shadow:1px 2px 2px rgba(0,0,0,.2)}

/* handwritten labels and the index card */
.paper figcaption{position:absolute;bottom:-30px;right:6%;font-family:var(--hand);font-size:clamp(17px,1.4vw,22px);color:#3a3a3a;rotate:-2deg;white-space:nowrap}
.card{grid-column:span var(--span,3);position:relative;background:#fbfaf4;padding:26px 24px 22px;
  background-image:repeating-linear-gradient(transparent 0 27px,rgba(70,110,170,.18) 27px 28px);background-position:0 54px;
  box-shadow:0 10px 20px -10px rgba(0,0,0,.35);transform:translate(var(--x,0),var(--y,0)) rotate(var(--rot,0deg));font-family:var(--hand);font-size:21px;line-height:28px}
.card::before{content:"";position:absolute;top:-7px;left:calc(50% - 8px);width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff 0 12%,#1f1f1f 30% 62%,#000 100%);box-shadow:3px 5px 5px rgba(0,0,0,.35)}
.card h2{margin:0 0 6px;font-family:var(--display);font-weight:400;font-size:13px;letter-spacing:.16em;text-transform:uppercase;line-height:1.4;border-bottom:1px solid rgba(180,60,60,.4);padding-bottom:6px}
.card p{margin:0}

/* arrival: papers drop onto the wall as they come into view */
.js .paper,.js .card{opacity:0;transform:translate(var(--x,0px),calc(var(--y,0px) - 34px)) rotate(calc(var(--rot,0deg) + 5deg)) scale(1.05)}
.js .paper.in,.js .card.in{opacity:1;transform:translate(var(--x,0px),var(--y,0px)) rotate(var(--rot,0deg));
  transition:opacity .7s ease var(--d,0s),transform .9s cubic-bezier(.2,.9,.25,1.15) var(--d,0s)}
.js .paper.in:hover{transform:translate(var(--x,0px),calc(var(--y,0px) - 6px)) rotate(0deg) scale(1.03);transition:transform .45s cubic-bezier(.22,.61,.36,1)}

.foot-nav{display:flex;justify-content:space-between;gap:16px;padding:0 var(--gutter) 40px;font-family:var(--display);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.foot-nav a{text-decoration:none}.foot-nav a:hover{text-decoration:underline;text-underline-offset:4px}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(232,229,222,.97);display:flex;align-items:center;justify-content:center;padding:60px 64px 30px}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}
.lightbox img{max-width:100%;max-height:calc(100% - 34px);object-fit:contain;box-shadow:0 20px 50px -20px rgba(0,0,0,.4);background:#fff}
.lb-cap{margin-top:12px;font-family:var(--display);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.lightbox button{position:absolute;border:0;background:none;font:inherit;cursor:pointer;color:var(--ink)}
.lb-close{top:16px;right:20px;font-family:var(--display)!important;font-size:11px!important;letter-spacing:.16em;text-transform:uppercase;padding:8px}
.lb-prev,.lb-next{top:50%;translate:0 -50%;font-size:24px!important;padding:18px}
.lb-prev{left:8px}.lb-next{right:8px}

@media (max-width:760px){
  .bar .brand img{width:100px}
  .wall{grid-template-columns:1fr;gap:38px;padding-top:10px}
  .paper,.card{grid-column:auto;--x:0px!important;--y:0px!important;--rot:var(--mrot,0deg)}
  .paper figcaption{bottom:-27px}
  .card{max-width:86%;justify-self:center}
  .lightbox{padding:56px 10px 70px}
  .lb-prev,.lb-next{top:auto;bottom:12px;translate:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .paper,.js .card{opacity:1;transition:none}
}
@media (min-width:761px){.paper.c4{grid-column:4 / span 6}}

/* ---------- dark walls (set data-wall on <body>) ---------- */
body[data-wall]{color:#efeae0;--soft:#b9b2a6}
body[data-wall="charcoal"]{--wall:#1d1c1b}
body[data-wall="red"]{--wall:#9b0a28}
body[data-wall]{background-color:var(--wall);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    radial-gradient(ellipse at 30% 0%,rgba(255,255,255,.07),transparent 60%),
    radial-gradient(ellipse at 100% 100%,rgba(0,0,0,.35),transparent 60%)}
body[data-wall="red"]{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    radial-gradient(ellipse at 30% 0%,rgba(255,120,130,.14),transparent 60%),
    radial-gradient(ellipse at 100% 100%,rgba(60,0,10,.22),transparent 60%)}
body[data-wall] .bar .brand img{filter:invert(1)}
body[data-wall] .paper figcaption{color:#efeae0}
body[data-wall] .paper .sheet{box-shadow:0 1px 1px rgba(0,0,0,.3),0 14px 28px -8px rgba(0,0,0,.7)}
body[data-wall] .paper:hover .sheet{box-shadow:0 2px 2px rgba(0,0,0,.3),0 34px 60px -18px rgba(0,0,0,.85)}
body[data-wall] .card{color:#262626;box-shadow:0 14px 26px -10px rgba(0,0,0,.7)}
body[data-wall] .lightbox{background:rgba(20,18,17,.96)}
body[data-wall="red"] .lightbox{background:rgba(110,6,26,.97)}
body[data-wall] .lightbox button{color:#efeae0}
body[data-wall] .pin::before{box-shadow:3px 5px 6px rgba(0,0,0,.6)}

/* ---------- cork wall ---------- */
body[data-wall="cork"]{--wall:#b88f60;color:#2a2118;--soft:#4d3c2a;background-color:var(--wall);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .2  0 0 0 0 .12  0 0 0 0 .05  0 0 0 1.4 -.55'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='130' height='130'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='1' seed='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .92  0 0 0 0 .78  0 0 0 1.6 -.85'/></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>"),
    radial-gradient(ellipse at 30% 0%,rgba(255,240,215,.25),transparent 60%),radial-gradient(ellipse at 100% 100%,rgba(60,30,5,.25),transparent 60%)}
body[data-wall="cork"] .bar{background:linear-gradient(var(--wall) 60%,transparent)}
body[data-wall="cork"] .paper .sheet{box-shadow:0 1px 1px rgba(0,0,0,.15),0 12px 24px -8px rgba(40,20,0,.55)}

/* ---------- source picture + hanging fabric ---------- */
.pair{display:flex;align-items:flex-start;gap:clamp(10px,1.6vw,26px)}
.pair .photo{position:relative;flex:0 0 40%;background:#fff;padding:7px 7px 30px;rotate:var(--pr,-2deg);margin-top:var(--py,24px);
  box-shadow:0 1px 1px rgba(0,0,0,.15),0 12px 22px -8px rgba(40,20,0,.55)}
.pair .photo::before{content:"";position:absolute;top:-7px;left:calc(50% - 8px);width:16px;height:16px;border-radius:50%;z-index:2;
  background:radial-gradient(circle at 35% 30%,#fff 0 12%,var(--pc,#1f1f1f) 30% 62%,rgba(0,0,0,.55) 100%);box-shadow:3px 5px 5px rgba(0,0,0,.35)}
.pair .photo span{position:absolute;left:10px;bottom:5px;font-family:var(--hand);font-size:17px;color:#444}
.pair .fabric{position:relative;flex:1;transform-origin:50% 0;rotate:var(--fr,1deg);filter:url(#ripple) drop-shadow(0 14px 12px rgba(40,20,0,.45))}
.pair .cloth{position:relative;aspect-ratio:4/5;background-size:cover;background-position:center;clip-path:polygon(0% 0%,100% 0%,100% 96%,97.73% 100%,95.45% 96%,93.18% 100%,90.91% 96%,88.64% 100%,86.36% 96%,84.09% 100%,81.82% 96%,79.55% 100%,77.27% 96%,75.00% 100%,72.73% 96%,70.45% 100%,68.18% 96%,65.91% 100%,63.64% 96%,61.36% 100%,59.09% 96%,56.82% 100%,54.55% 96%,52.27% 100%,50.00% 96%,47.73% 100%,45.45% 96%,43.18% 100%,40.91% 96%,38.64% 100%,36.36% 96%,34.09% 100%,31.82% 96%,29.55% 100%,27.27% 96%,25.00% 100%,22.73% 96%,20.45% 100%,18.18% 96%,15.91% 100%,13.64% 96%,11.36% 100%,9.09% 96%,6.82% 100%,4.55% 96%,2.27% 100%,0.00% 96%)}
.pair .cloth::after{content:"";position:absolute;inset:0;mix-blend-mode:soft-light;
  background:linear-gradient(90deg,rgba(0,0,0,.45) 0%,rgba(255,255,255,.35) 14%,rgba(0,0,0,.25) 30%,rgba(255,255,255,.3) 47%,rgba(0,0,0,.3) 63%,rgba(255,255,255,.28) 80%,rgba(0,0,0,.5) 100%),
             linear-gradient(rgba(0,0,0,.35),transparent 9%,transparent 85%,rgba(0,0,0,.2))}
.pair .fabric::before,.pair .fabric::after{content:"";position:absolute;top:-5px;width:14px;height:14px;border-radius:50%;z-index:2;
  background:radial-gradient(circle at 35% 30%,#fff 0 12%,#b08d57 30% 62%,rgba(0,0,0,.55) 100%);box-shadow:2px 4px 4px rgba(0,0,0,.4)}
.pair .fabric::before{left:9%} .pair .fabric::after{right:9%}
.pair .tag{position:absolute;right:-6px;bottom:12%;rotate:6deg;background:#f4efe2;padding:3px 10px 4px;font-family:var(--hand);font-size:17px;color:#333;box-shadow:0 3px 6px rgba(0,0,0,.25)}
.paper.pair:hover{transform:translate(var(--x,0px),calc(var(--y,0px) - 4px)) rotate(var(--rot,0deg))}
.paper.pair:hover .fabric{animation:sway 2.6s ease-in-out infinite}
@keyframes sway{0%,100%{rotate:var(--fr,1deg)}50%{rotate:calc(var(--fr,1deg) - 2.2deg)}}
@media (max-width:760px){.pair .photo span,.pair .tag{font-size:15px}}
@media (prefers-reduced-motion:reduce){.paper.pair:hover .fabric{animation:none}}
.pair-in{display:flex;align-items:flex-start;gap:clamp(10px,1.6vw,26px)}
.project-head h1{max-width:14ch}
@media (max-width:760px){.spacer{display:none}}
.pair-in{flex:1;width:100%}.pair .photo{flex-basis:38%}

/* ---------- trend clusters (forecast board) ---------- */
.cluster{grid-column:1/-1;display:flex;align-items:flex-start;gap:clamp(8px,1.1vw,18px);margin-bottom:clamp(30px,6vh,70px)}
.cluster.rev .card{order:99}
.cluster .card{flex:0 0 21%;grid-column:auto;font-size:19px;line-height:27px;margin-top:var(--cy,0px)}
.cluster .card .no{font-family:var(--display);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#9a3b3b;display:block;margin-bottom:2px}
.look{flex:1;min-width:0;grid-column:auto}
.look .sheet{padding:5px 5px 6px}
.look figcaption{position:static;rotate:none;text-align:center;margin-top:8px;white-space:normal;font-size:clamp(14px,1.05vw,18px);line-height:1.1}
@media (max-width:760px){
  .cluster{flex-wrap:wrap;gap:26px 14px}
  .cluster.rev .card{order:-1}
  .cluster .card{flex:1 1 100%;max-width:none;margin-top:0}
  .look{flex:0 0 calc(50% - 7px)}
}

/* ---------- light grey wall ---------- */
body[data-wall="grey"]{--wall:#d6d5d2;color:var(--ink);--soft:#5e5d5a;background-color:var(--wall);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .3  0 0 0 0 .3  0 0 0 .16 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    radial-gradient(ellipse at 30% 0%,rgba(255,255,255,.6),transparent 60%),radial-gradient(ellipse at 100% 100%,rgba(0,0,0,.07),transparent 55%)}
body[data-wall="grey"] .bar .brand img{filter:none}
body[data-wall="grey"] .paper figcaption{color:#2e2e2e}
body[data-wall="grey"] .paper .sheet{box-shadow:0 1px 1px rgba(0,0,0,.12),0 12px 22px -8px rgba(0,0,0,.4)}
body[data-wall="grey"] .lightbox{background:rgba(226,225,222,.97)}
body[data-wall="grey"] .lightbox button{color:var(--ink)}

/* trend rows: alternate tall / short prints instead of a slope */
.cluster .look:nth-of-type(odd){flex:1.22;--y:0px !important}
.cluster .look:nth-of-type(even){flex:.82;--y:clamp(30px,4.5vw,70px) !important}
@media (max-width:760px){
  .cluster .look:nth-of-type(odd),.cluster .look:nth-of-type(even){flex:0 0 calc(50% - 7px)}
  .cluster .look:nth-of-type(even){--y:0px !important}
  .cluster .look:nth-of-type(even) .sheet{width:82%;margin:30px auto 0}
}
@media (min-width:761px){.cluster{align-items:stretch}.cluster .card{align-self:flex-start}.cluster .look:nth-of-type(odd){align-self:flex-start}.cluster .look:nth-of-type(even){align-self:center;--y:-10px !important}}

/* outfit illustration + its 3D render, always side by side */
.duo{grid-column:span 6;display:flex;align-items:flex-start;gap:clamp(10px,1.4vw,22px)}
.duo .paper{grid-column:auto}
.duo .paper:first-child{flex:0 0 33%}
.duo .paper:last-child{flex:1}
.duo:nth-of-type(even){flex-direction:row-reverse}
@media (max-width:760px){.duo{grid-column:auto;gap:12px}.duo .paper:first-child{flex-basis:36%}}

/* ---------- warm stone wall ---------- */
body[data-wall="stone"]{--wall:#d9cfc0;color:var(--ink);--soft:#5f574b;background-color:var(--wall);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .3  0 0 0 0 .22  0 0 0 .2 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    linear-gradient(115deg,transparent 30%,rgba(255,250,240,.35) 42%,transparent 55%),
    radial-gradient(ellipse at 100% 100%,rgba(60,40,10,.12),transparent 55%)}
body[data-wall="stone"] .bar{background:linear-gradient(var(--wall) 60%,transparent)}
body[data-wall="stone"] .paper .sheet{box-shadow:0 1px 1px rgba(0,0,0,.12),0 12px 22px -8px rgba(50,30,0,.45)}
body[data-wall="stone"] .lightbox{background:rgba(222,213,200,.97)}
.duo.acc .paper:first-child{flex:0 0 36%}
body[data-wall="stone"] .bar .brand img,body[data-wall="cork"] .bar .brand img{filter:none}
body[data-wall="stone"] .paper figcaption,body[data-wall="cork"] .paper figcaption{color:#2e2a24}
body[data-wall="stone"] .lightbox button,body[data-wall="cork"] .lightbox button{color:var(--ink)}
body[data-wall="cork"] .lightbox{background:rgba(214,190,160,.97)}
.duo{margin-bottom:clamp(14px,2vw,30px)}

/* top menu on project pages */
.pnav{display:flex;align-items:center;gap:24px;font-family:var(--display);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.pnav a{text-decoration:none}
.pnav a:hover{text-decoration:underline;text-underline-offset:4px}
@media (max-width:760px){.pnav{gap:16px;font-size:10px}.pnav .hide-s{display:none}}