/* Portfolio "Darkroom Archive" (draft on ?v=2, 2026-10-18), portfolio_v2.blade.php + portfolio-v2.js. Scoped to #main.pv.
   Paper, ink and red from pf-vars (footer.css). The photos stay black and white; the colour second photo develops under the cursor. */
#main.pv{--e:cubic-bezier(.25,.1,.25,1);--o:cubic-bezier(.19,1,.22,1);color:var(--page-ink);position:relative}
/* a faint film grain over the page, never over the header */
#main.pv::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  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='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
#main.pv .portfolio-long .portfolio-content{padding-bottom:0!important}
#main.pv .pv-wrap{position:relative;z-index:2;padding-bottom:clamp(64px,8vw,120px)}

/* ---------- the sentence filter, the count and the view switch ---------- */
#main.pv .pv-bar{position:relative;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 40px;margin:clamp(18px,2.4vw,34px) 0 clamp(40px,5vw,72px);padding-bottom:22px;border-bottom:1px solid var(--page-line)}
#main.pv .pv-sentence{margin:0;font-weight:100;font-size:clamp(26px,3.1vw,48px);line-height:1.12;letter-spacing:-.025em;color:var(--page-ink)}
#main.pv .pv-word{position:relative;display:inline;padding:0 0 .04em;margin:0 .06em;border:0;background:none;font:inherit;font-weight:300;letter-spacing:inherit;color:var(--red);cursor:pointer;
  background-image:linear-gradient(var(--red),var(--red));background-repeat:no-repeat;background-position:0 100%;background-size:100% 1px;transition:background-size .8s var(--o),color .6s var(--e)}
#main.pv .pv-word::after{content:"";display:inline-block;width:.32em;height:.32em;margin:0 0 .18em .22em;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);transition:transform .6s var(--o)}
#main.pv .pv-word[aria-expanded="true"]::after{transform:rotate(-135deg) translate(-.1em,-.1em)}
#main.pv .pv-word:hover{color:var(--red-lo)}
#main.pv .pv-tools{display:flex;align-items:center;gap:28px}
#main.pv .pv-count{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--page-mute)}
#main.pv .pv-count b{font-weight:400;color:var(--page-ink)}
#main.pv .pv-views{display:flex;padding:3px;border:1px solid var(--page-line);border-radius:999px}
#main.pv .pv-view{padding:8px 16px;border:0;border-radius:999px;background:none;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--page-soft);cursor:pointer;transition:background-color .6s var(--e),color .6s var(--e)}
#main.pv .pv-view.is-on{background:var(--page-ink);color:var(--paper)}
#main.pv .pv-panel{position:absolute;left:0;right:0;top:100%;z-index:20;margin-top:-1px;padding:28px 0 32px;background:var(--paper);border-bottom:1px solid var(--page-line);box-shadow:0 30px 40px -30px rgba(45,25,20,.25)}
#main.pv .pv-panel[hidden]{display:none}
#main.pv .pv-panel__k{margin:0 0 14px;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--page-mute)}
#main.pv .pv-panel ul{display:flex;flex-wrap:wrap;gap:6px 34px;margin:0;padding:0;list-style:none}
#main.pv .pv-panel a{font-weight:200;font-size:clamp(20px,2vw,30px);letter-spacing:-.015em;color:var(--page-ink);text-decoration:none;transition:color .5s var(--e)}
#main.pv .pv-panel a sup{font-size:11px;font-weight:400;letter-spacing:.06em;color:var(--red);margin-left:3px}
#main.pv .pv-panel a:hover,#main.pv .pv-panel a.is-on{color:var(--red)}

/* ---------- the grid: twelve columns, eight frames to a phrase, then it repeats ---------- */
#main.pv .pv-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);row-gap:clamp(56px,7vw,110px);align-items:start}
#main.pv .pv-card{position:relative;grid-column:span 4;min-width:0}
#main.pv .pv-card:nth-child(8n+1){grid-column:1 / span 7}
#main.pv .pv-card:nth-child(8n+2){grid-column:9 / span 4;margin-top:clamp(80px,12vw,200px)}
#main.pv .pv-card:nth-child(8n+3){grid-column:1 / span 4}
#main.pv .pv-card:nth-child(8n+4){grid-column:5 / span 4;margin-top:clamp(40px,6vw,100px)}
#main.pv .pv-card:nth-child(8n+5){grid-column:9 / span 4}
#main.pv .pv-card:nth-child(8n+6){grid-column:2 / span 5}
#main.pv .pv-card:nth-child(8n+7){grid-column:8 / span 5;margin-top:clamp(70px,10vw,170px)}
#main.pv .pv-card:nth-child(8n+8){grid-column:3 / span 8}
#main.pv .pv-media{position:relative;display:block;overflow:hidden;aspect-ratio:1/1;background:#E6E0D6;cursor:none}
#main.pv .pv-card:nth-child(8n+1) .pv-media{aspect-ratio:7/5}
#main.pv .pv-card:nth-child(8n+2) .pv-media,#main.pv .pv-card:nth-child(8n+4) .pv-media,#main.pv .pv-card:nth-child(8n+6) .pv-media{aspect-ratio:4/5}
#main.pv .pv-card:nth-child(8n+8) .pv-media{aspect-ratio:16/8}
#main.pv .pv-mi{position:absolute;left:0;right:0;top:-7%;bottom:-7%;display:block}
#main.pv .pv-media img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;transition:scale 2.2s var(--o),filter 1.4s var(--e)}
#main.pv .pv-img1{filter:grayscale(1) contrast(1.04)}
#main.pv .pv-media:hover .pv-img1{scale:1.015}
/* the colour photo, without WebGL: a circle opening from the cursor */
#main.pv .pv-img2{clip-path:circle(0 at var(--x,50%) var(--y,50%));transition:clip-path 1.8s var(--o)}
#main.pv .pv-media.is-open .pv-img2{clip-path:circle(150% at var(--x,50%) var(--y,50%))}
/* with WebGL the canvas does the developing and the CSS photo stays shut */
#main.pv.pv-gl .pv-media .pv-img2{display:none}
#main.pv.pv-gl .pv-media:hover .pv-img1{scale:1} /* the shader zooms the photo itself */
#main.pv .pv-glcanvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
#main.pv .pv-new{position:absolute;top:14px;left:14px;z-index:3;padding:5px 10px 4px;border-radius:999px;background:var(--red);color:#FFF7EE;font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
#main.pv .pv-meta{display:flex;align-items:baseline;gap:16px;margin-top:16px;font-size:10px;letter-spacing:.2em;text-transform:uppercase}
#main.pv .pv-code{color:var(--page-mute);font-variant-numeric:tabular-nums}
#main.pv .pv-type{color:var(--red);text-decoration:none;font-weight:600;cursor:none}
#main.pv .pv-type:hover{color:var(--red-lo)}
#main.pv .pv-year{margin-left:auto;color:var(--page-mute)}
#main.pv .pv-title{margin:8px 0 0;font-weight:300;font-size:clamp(22px,2.1vw,34px);line-height:1.08;letter-spacing:-.02em;text-transform:none;text-align:left}
#main.pv .pv-card:nth-child(8n+1) .pv-title,#main.pv .pv-card:nth-child(8n+8) .pv-title{font-size:clamp(28px,3vw,48px)}
#main.pv .pv-title a{color:var(--page-soft);text-decoration:none;background-image:linear-gradient(var(--red),var(--red));background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;transition:background-size .9s var(--o),color .6s var(--e)}
#main.pv .pv-card:hover .pv-title a{background-size:100% 1px}
/* one quiet line only: the site has an old rule that underlines every link into the corporate websites section on hover
   (pagestyle.css, a[href*="portfolio/korporativnyye-sayty"]:hover), which doubled the line on those projects */
#main.pv a[href]:hover,#main.pv a[href]:focus{text-decoration:none!important}
#main.pv .pv-title a{padding-bottom:.07em}

/* entry: each frame rises and its picture is uncovered from below (only once JS has armed the grid) */
#main.pv .pv-grid.is-armed .pv-card{opacity:0;transform:translateY(46px);transition:opacity 1s var(--e),transform 1.3s var(--o);transition-delay:calc(var(--d,0) * 90ms)}
#main.pv .pv-grid.is-armed .pv-card .pv-media{clip-path:inset(100% 0 0 0);transition:clip-path 1.4s var(--o);transition-delay:calc(var(--d,0) * 90ms + 80ms)}
#main.pv .pv-grid.is-armed .pv-card.is-in{opacity:1;transform:none}
#main.pv .pv-grid.is-armed .pv-card.is-in .pv-media{clip-path:inset(0 0 0 0)}

/* ---------- index view ---------- */
#main.pv .pv-index[hidden],#main.pv .pv-grid[hidden]{display:none}
#main.pv .pv-row{display:grid;grid-template-columns:minmax(0,1fr) 220px 200px 70px;gap:20px;align-items:baseline;padding:18px 0 16px;border-bottom:1px solid var(--page-line);color:var(--page-ink);text-decoration:none;cursor:none;transition:padding .7s var(--o),color .5s var(--e)}
#main.pv .pv-row--head{padding:0 0 12px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--page-mute);cursor:default}
#main.pv .pv-row__t{font-weight:300;color:var(--page-soft);font-size:clamp(26px,3.2vw,52px);line-height:1.05;letter-spacing:-.025em;transition:transform .8s var(--o),font-weight .4s}
#main.pv .pv-row__c,#main.pv .pv-row__y{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--page-soft)}
#main.pv .pv-row__y{text-align:right;color:var(--page-mute)}
@media (hover:hover){
  #main.pv .pv-index:hover .pv-row:not(.pv-row--head) .pv-row__t{color:rgba(94,88,83,.45)}
  #main.pv .pv-index .pv-row:not(.pv-row--head):hover .pv-row__t{color:var(--page-ink)}
}
#main.pv .pv-row:not(.pv-row--head):hover .pv-row__t{transform:translateX(18px)}
#main.pv .pv-row:not(.pv-row--head):hover .pv-code{color:var(--red)}
#main.pv .pv-float{position:fixed;left:0;top:0;z-index:30;width:clamp(240px,22vw,340px);pointer-events:none;opacity:0;transform:translate3d(-999px,-999px,0) scale(.85);transition:opacity .45s var(--e)}
#main.pv .pv-float.is-on{opacity:1}
#main.pv .pv-float .pv-media{aspect-ratio:4/5;cursor:none;box-shadow:0 30px 60px -20px rgba(45,25,20,.35)}

/* ---------- the cursor: a small disc that names what a click does ---------- */
/* the anchor follows the pointer from the script only (no CSS transition on its position, which made it jerk);
   the disc inside only grows and fades in */
#main.pv .pv-cursor{position:fixed;left:0;top:0;z-index:40;width:0;height:0;pointer-events:none;transform:translate3d(var(--cx,-200px),var(--cy,-200px),0);will-change:transform}
#main.pv .pv-cursor span{position:absolute;left:-42px;top:-42px;width:84px;height:84px;border-radius:50%;background:var(--page-ink);color:var(--paper);display:grid;place-items:center;
  font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;scale:0;opacity:0;transition:scale .55s cubic-bezier(.19,1,.22,1),opacity .35s cubic-bezier(.25,.1,.25,1),background-color .4s cubic-bezier(.25,.1,.25,1)}
#main.pv .pv-cursor.is-on span{scale:1;opacity:1}
#main.pv .pv-cursor.is-filter span{background:var(--red)}

/* pagination in the same quiet register */
#main.pv .pv-pages{margin-top:clamp(56px,7vw,100px)}

@media (max-width:1023px){
  #main.pv .pv-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:48px}
  #main.pv .pv-card,#main.pv .pv-card:nth-child(n){grid-column:auto;margin-top:0}
  #main.pv .pv-card:nth-child(4n+1){grid-column:1 / -1}
  #main.pv .pv-card:nth-child(n) .pv-media{aspect-ratio:4/5}
  #main.pv .pv-card:nth-child(4n+1) .pv-media{aspect-ratio:3/2}
  #main.pv .pv-card:nth-child(4n+3){margin-top:60px}
  #main.pv .pv-row{grid-template-columns:minmax(0,1fr) 70px}
  #main.pv .pv-row__c{display:none}
  #main.pv .pv-cursor,#main.pv .pv-float{display:none}
  #main.pv .pv-media,#main.pv .pv-row,#main.pv .pv-type{cursor:pointer}
}
@media (max-width:767px){
  #main.pv .pv-grid{grid-template-columns:1fr}
  #main.pv .pv-card:nth-child(n){grid-column:auto;margin-top:0}
  #main.pv .pv-card:nth-child(n) .pv-media{aspect-ratio:4/5}
  #main.pv .pv-tools{width:100%;justify-content:space-between}
  #main.pv .pv-row__t{font-size:24px}
}
/* phones and tablets: no hover effects at all (owner, 2026-10-18: they played by themselves and slowed the page);
   the colour second photos are not even loaded there */
@media (hover:none){
  #main.pv .pv-img2{display:none!important}
  #main.pv .pv-media:hover .pv-img1{scale:1}
}
@media (prefers-reduced-motion:reduce){
  #main.pv .pv-grid.is-armed .pv-card,#main.pv .pv-grid.is-armed .pv-card .pv-media{opacity:1;transform:none;clip-path:none;transition:none}
}

/* ---------- the space: an endless edge-to-edge mosaic of the project photos (portfolio-space.js) ---------- */
#main.pv .pv-space{position:relative;z-index:2;height:clamp(520px,82vh,980px);overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;background:#171312}
#main.pv .pv-space.is-off{display:none}
#main.pv .pv-space canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity 1.6s var(--e)}
#main.pv .pv-space.is-ready canvas{opacity:1}
/* only a low shade under the name, so the white type reads over any photo */
#main.pv .pv-space::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:1;height:46%;pointer-events:none;background:linear-gradient(rgba(23,19,18,0),rgba(23,19,18,.38) 55%,rgba(23,19,18,.72))}
#main.pv .pv-sp-title{position:absolute;z-index:2;left:clamp(16px,4vw,64px);right:22%;bottom:clamp(22px,4vw,56px);pointer-events:none;opacity:0}
#main.pv .pv-sp-title.is-on{animation:pvRise .9s var(--o) both}
@keyframes pvRise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
#main.pv .pv-sp-meta{margin:0 0 12px;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;white-space:pre;color:#F2C9B8}
#main.pv .pv-sp-name{margin:0;font-weight:100;font-size:clamp(40px,7.2vw,132px);line-height:.92;letter-spacing:-.045em;color:#FBF7F0}
#main.pv .pv-sp-hint{position:absolute;z-index:2;right:clamp(16px,4vw,64px);bottom:clamp(26px,4vw,60px);margin:0;display:flex;align-items:center;gap:12px;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(251,247,240,.75);pointer-events:none;transition:opacity .6s var(--e)}
#main.pv .pv-sp-hint::before{content:"";width:44px;height:1px;background:currentColor;animation:pvHint 2.4s var(--e) infinite}
@keyframes pvHint{0%,100%{transform:translateX(0)}50%{transform:translateX(-12px)}}
#main.pv .pv-space.is-hot .pv-sp-hint{opacity:0}
#main.pv .pv-sp-hint__touch{display:none}
@media (hover:none){#main.pv .pv-sp-hint__fine{display:none}#main.pv .pv-sp-hint__touch{display:inline}}
#main.pv .portfolio-long .sort-holder{margin-bottom:0}

/* the filter band holds under the fixed header (its height in --pv-hdr, set by portfolio-v2.js) */
#main.pv > .pv-sticky{position:sticky;top:var(--pv-hdr,64px);z-index:40;margin:0!important;padding:0!important;background:var(--paper)}
#main.pv > .pv-sticky .portfolio-content{padding-top:0!important;padding-bottom:0!important}

/* into the case: the frame becomes the case's first picture while the page clears around it (window.pvFly);
   the case page takes it on from here (fly_in.blade.php) */
.pv-fly{position:fixed;z-index:2147483000;pointer-events:none;background:#171312;overflow:hidden;transition:transform .6s cubic-bezier(.19,1,.22,1)}
.pv-fly i,.pv-fly b{position:absolute;inset:0;background:center/cover no-repeat}
.pv-fly b{opacity:0;transition:opacity .45s cubic-bezier(.25,.1,.25,1)}
.pv-fly.is-hero b{opacity:1}
html.pv-leaving #main.pv{opacity:0;transition:opacity .45s cubic-bezier(.25,.1,.25,1) .05s}
/* the way back: the case's hero returning into its frame (a copy, where the native transition is missing or for the mosaic tile) */
.pv-back{position:fixed;z-index:2147483000;pointer-events:none;background:#171312 center/cover no-repeat;overflow:hidden}
.pv-back i{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;transition:opacity .6s cubic-bezier(.25,.1,.25,1) .35s}
.pv-back.is-go{transition:left .85s cubic-bezier(.65,0,.2,1),top .85s cubic-bezier(.65,0,.2,1),width .85s cubic-bezier(.65,0,.2,1),height .85s cubic-bezier(.65,0,.2,1),opacity .45s cubic-bezier(.25,.1,.25,1)}
.pv-back.is-go i{opacity:1}
.pv-back.is-out{opacity:0;transition:opacity .55s cubic-bezier(.25,.1,.25,1)}
/* the index row a case came back to lights up for a moment */
#main.pv .pv-row.is-back .pv-row__t{color:var(--red);transform:translateX(18px)}

/* the catalogue below: a section heading with the red rule and the grid / index switch */
#main.pv .pv-wrap--cat{padding-top:0}
#main.pv .pv-cathead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:clamp(56px,7vw,100px) 0 clamp(36px,4vw,56px)}
#main.pv .pv-cathead h2{margin:0;padding-top:26px;font-weight:400;font-size:clamp(26px,2.6vw,40px);line-height:1.08;letter-spacing:-.025em;text-transform:none;text-align:left;color:var(--page-ink);background:linear-gradient(var(--red),var(--red)) no-repeat 0 0/28px 1px}
#main.pv .pv-bar{margin-bottom:0;border-bottom:0}
#main.pv .pv-open{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--red);text-decoration:none}
#main.pv .pv-open i{font-style:normal;display:inline-block;transition:transform .7s var(--o)}
#main.pv .pv-open:hover i{transform:translateX(5px)}
#main.pv .pv-card,#main.pv .pv-row{transition-property:opacity,transform,filter,color,padding}
#main.pv .pv-card.is-out,#main.pv .pv-row.is-out{opacity:.14!important;filter:grayscale(1)}
@media (max-width:767px){#main.pv .pv-space{height:64vh}#main.pv .pv-sp-title{right:16px;bottom:64px}#main.pv .pv-sp-hint{left:16px;right:auto;bottom:24px}}

/* ---------- movement in step with the scroll (2026-10-18): Lenis smooths the wheel; where the browser supports scroll-driven
   animations the frames rise, open and glide inside their windows exactly with the scroll, on the compositor ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    #main.pv .pv-card{animation:pvCardIn linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
    #main.pv .pv-card .pv-media{animation:pvOpen linear both;animation-timeline:view();animation-range:entry 0% cover 32%}
    #main.pv .pv-card .pv-mi{animation:pvGlide linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    #main.pv .pv-index .pv-row:not(.pv-row--head){animation:pvRowIn linear both;animation-timeline:view();animation-range:entry 0% cover 18%}
    #main.pv .pv-cathead h2{animation:pvRowIn linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
  }
}
@keyframes pvCardIn{from{opacity:0;translate:0 90px}to{opacity:1;translate:0 0}}
@keyframes pvOpen{from{clip-path:inset(14% 8% 14% 8%)}to{clip-path:inset(0 0 0 0)}}
@keyframes pvGlide{from{translate:0 -6%}to{translate:0 6%}}
@keyframes pvRowIn{from{opacity:0;translate:0 28px}to{opacity:1;translate:0 0}}

/* the native page transition (vt_head.blade.php has the same rules for the case pages) */
@view-transition{navigation:auto}
::view-transition-group(pv-hero){animation-duration:.9s;animation-timing-function:cubic-bezier(.65,0,.2,1)}
::view-transition-old(pv-hero),::view-transition-new(pv-hero){width:100%;height:100%;object-fit:cover;animation-duration:.9s}
::view-transition-old(root){animation:pvVtOut .45s cubic-bezier(.4,0,.2,1) both}
::view-transition-new(root){animation:pvVtIn .7s cubic-bezier(.19,1,.22,1) .12s both}
@keyframes pvVtOut{to{opacity:0}}
@keyframes pvVtIn{from{opacity:0;transform:translateY(22px)}}

/* ---------- the filter bar in the page's own language (2026-10-18): paper, a hairline, small spaced capitals, a thin chevron;
   the open menu slides out of the bar across the full width, its lines large and light in columns with their counts;
   the old select.js still opens and closes them (.select-panel.active + .select-content), the old view icon gives way
   to a text switch (portfolio-v2.js) ---------- */
#main.pv > .pv-sticky{background:rgba(249,246,240,.9);-webkit-backdrop-filter:saturate(1.15) blur(14px);backdrop-filter:saturate(1.15) blur(14px);border-bottom:1px solid var(--page-line)} /* no top line: under the header it read as a seam */
#main.pv .pv-sticky .sort-holder{position:relative;display:flex;align-items:center;justify-content:space-between;height:58px;margin:0!important;padding:0!important;background:none!important;top:auto!important;font-size:11px!important;text-transform:none!important}
#main.pv .pv-sticky .item-holder{display:flex;align-items:center;gap:clamp(24px,3vw,48px);height:100%;flex:1 1 auto;min-width:0}
#main.pv .pv-sticky .sort-item{position:static!important;height:100%}
#main.pv .pv-sticky .select-list{position:static;height:100%}
#main.pv .pv-sticky .select-panel{position:relative;display:flex;align-items:center;gap:10px;height:100%;padding:0 18px 0 0!important;cursor:pointer}
#main.pv .pv-sticky .select-panel p{margin:0;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--page-soft);transition:color .5s var(--e)}
#main.pv .pv-sticky .select-panel:before{right:0!important;top:50%!important;width:6px!important;height:6px!important;margin-top:-5px;border-color:currentColor!important;color:var(--page-mute);transition:transform .6s var(--o),margin .6s var(--o),color .5s var(--e)!important}
#main.pv .pv-sticky .select-panel.active:before{margin-top:-1px;color:var(--red)}
#main.pv .pv-sticky .select-panel:after{content:"";position:absolute;left:0;right:18px;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--red-hi),var(--red-lo));transform:scaleX(0);transform-origin:0 50%;transition:transform .8s var(--o)}
#main.pv .pv-sticky .select-panel:hover p,#main.pv .pv-sticky .select-panel.active p{color:var(--page-ink)}
#main.pv .pv-sticky .select-panel.active:after{transform:none}
/* the open menu: out of the bar across the full width, a slim band */
#main.pv .pv-sticky .select-content{position:absolute;left:0;right:0;top:calc(100% + 1px);z-index:50;width:auto;padding:16px 0 18px;margin:0;
  background:var(--paper);overflow:visible!important;box-shadow:0 0 0 100vmax var(--paper);clip-path:inset(0 -100vmax -40px);display:none}
#main.pv .pv-sticky .select-content::after{content:"";position:absolute;left:-100vmax;right:-100vmax;bottom:0;height:1px;background:var(--page-line)}
#main.pv .pv-sticky .select-panel.active + .select-content{display:block!important;animation:pvDd .55s var(--o) both}
@keyframes pvDd{from{opacity:0;translate:0 -10px}to{opacity:1;translate:0 0}}
#main.pv .pv-sticky .select-content ul{max-height:none!important;overflow:visible!important;margin:0;padding:0;list-style:none;columns:2;column-gap:clamp(32px,6vw,96px);max-width:900px;scrollbar-width:none}
#main.pv .pv-sticky .select-content ul::-webkit-scrollbar{display:none}
#main.pv .pv-sticky .select-content li{break-inside:avoid;margin:0;padding:0;opacity:0;translate:0 10px;transition:opacity .5s var(--e),translate .7s var(--o);transition-delay:calc(var(--i,0) * 35ms + 60ms)}
#main.pv .pv-sticky .select-panel.active + .select-content li{opacity:1;translate:0 0}
#main.pv .pv-sticky .select-content a{display:inline-flex;align-items:baseline;gap:6px;padding:8px 0;font-size:clamp(12px,.95vw,14px)!important;font-weight:500!important;letter-spacing:.14em!important;line-height:1.3!important;
  text-transform:uppercase!important;color:var(--page-soft)!important;transition:color .45s var(--e),translate .7s var(--o)}
#main.pv .pv-sticky .select-content a sup{font-size:9px;font-weight:600;letter-spacing:.06em;color:var(--red);top:-.5em}
@media (hover:hover){#main.pv .pv-sticky .select-content ul:hover a{color:rgba(94,88,83,.5)!important}}
#main.pv .pv-sticky .select-content ul a:hover{color:var(--red)!important;translate:5px 0}
/* the view switch: words instead of the old icon */
#main.pv .pv-sticky .change-view{display:none!important}
#main.pv .pv-vsw{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--page-line);border-radius:999px;flex:0 0 auto;margin-left:16px}
#main.pv .pv-vsw button{padding:7px 14px;border:0;border-radius:999px;background:none;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--page-soft);cursor:pointer;transition:background-color .5s var(--e),color .5s var(--e)}
#main.pv .pv-vsw button.is-on{background:var(--page-ink);color:var(--paper)}
@media (max-width:767px){
  #main.pv .pv-sticky .sort-holder{height:52px}
  #main.pv .pv-sticky .item-holder{gap:18px}
  #main.pv .pv-sticky .select-content ul{columns:2;column-gap:20px} /* two columns on phones too (owner) */
  #main.pv .pv-sticky .select-content a{font-size:11px!important;padding:7px 0;letter-spacing:.1em!important}
  /* phones: both views as small icons (list, grid), the current one filled, so the state reads at a glance */
  #main.pv .pv-vsw{padding:2px}
  #main.pv .pv-vsw button{width:34px;height:28px;padding:0;font-size:0}
  #main.pv .pv-vsw button[data-v="index"]{background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 14 14%27%3E%3Cpath d=%27M0 2h14M0 7h14M0 12h14%27 stroke=%27%235E5853%27 stroke-width=%271.4%27/%3E%3C/svg%3E") center/14px 14px no-repeat}
  #main.pv .pv-vsw button[data-v="grid"]{background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 14 14%27%3E%3Cpath d=%27M1 1h5v5H1zM8 1h5v5H8zM1 8h5v5H1zM8 8h5v5H8z%27 fill=%27none%27 stroke=%27%235E5853%27 stroke-width=%271.3%27/%3E%3C/svg%3E") center/14px 14px no-repeat}
  #main.pv .pv-vsw button[data-v="index"].is-on{background:var(--page-ink) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 14 14%27%3E%3Cpath d=%27M0 2h14M0 7h14M0 12h14%27 stroke=%27%23F9F6F0%27 stroke-width=%271.4%27/%3E%3C/svg%3E") center/14px 14px no-repeat}
  #main.pv .pv-vsw button[data-v="grid"].is-on{background:var(--page-ink) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 14 14%27%3E%3Cpath d=%27M1 1h5v5H1zM8 1h5v5H8zM1 8h5v5H1zM8 8h5v5H8z%27 fill=%27none%27 stroke=%27%23F9F6F0%27 stroke-width=%271.3%27/%3E%3C/svg%3E") center/14px 14px no-repeat}
  #main.pv .pv-sticky .item-holder{gap:12px}
  #main.pv .pv-sticky .select-panel{padding-right:14px!important}
  #main.pv .pv-sticky .select-panel p{font-size:9.5px;letter-spacing:.08em;white-space:nowrap}
  #main.pv .pv-sticky .select-panel:after{right:14px}
  /* the index header on phones: only the columns the rows show */
  #main.pv .pv-row--head span:nth-child(2),#main.pv .pv-row--head span:nth-child(3){display:none}
}

/* ---------- the category and industry pages in the same look (2026-10-18) ---------- */
#main.pv--section .pv-wrap--section{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(40px,5vw,72px)}
#main.pv .pv-cathead--bare{height:0;margin:0;padding:0}
#main.pv--section .pv-after .portfolio-content{padding-top:0!important}
/* the section or industry of this page, marked in its menu */
#main.pv .pv-sticky .select-content a.is-on{color:var(--red)!important}
/* the section text under the catalogue: its headings like the catalogue heading (light, natural case, the short red rule) */
#main.pv--section .pv-after .ed-head h2{padding-top:26px;font-weight:400!important;font-size:clamp(26px,2.6vw,40px)!important;line-height:1.08!important;letter-spacing:-.025em;text-transform:none!important;color:var(--page-ink);background:linear-gradient(var(--red),var(--red)) no-repeat 0 0/28px 1px}
/* a section's intro on phones: five lines fading out, the rest opens with the button under it (portfolio-v2.js) */
@media (max-width:767px){
  #main.pv--section .industry-intro.pv-fold{max-height:7.6em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 45%,transparent);mask-image:linear-gradient(#000 45%,transparent);transition:max-height .5s cubic-bezier(.25,.1,.25,1)}
  #main.pv--section .industry-intro.pv-fold.is-open{max-height:none;-webkit-mask-image:none;mask-image:none}
  #main.pv--section .industry-intro.pv-fold{margin-bottom:0!important}
  #main.pv--section .pv-more{display:inline-flex;align-items:center;gap:8px;margin:6px 0 24px;padding:6px 0;border:0;background:none;font:inherit;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--red);cursor:pointer}
  #main.pv--section .pv-more::after{content:"";width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s}
  #main.pv--section .pv-more[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
}