/* Selected Work (2026-10-15, Max brief "Scene 1 to Concepts"): the Scene 1 portfolio as the Concepts view (desktop data-dv-only, phone data-pv).
   Scene 1 vw values kept as ratios of the headline size --hs (Scene: 13.5vw). Phone = Scene's <=600px block, applied <=940px. */
.sw{--bg:#08080a;--fg:#f1f0ec;--mute:#a5a5a5;--sub:#b2b2b2;--lime:#d9ed73;--ease:cubic-bezier(.65,0,.35,1);--out:cubic-bezier(.22,1,.36,1);
  --px:clamp(20px,3.8vw,80px);--hs:clamp(5.5rem,min(13.5vw,21.5vh),16rem);
  position:relative;background:var(--bg);color:var(--fg);font-family:'InterHeroVar',Inter,Arial,Helvetica,sans-serif;font-weight:400;
  padding:0 var(--px) clamp(56px,6vw,120px);overflow:clip;-webkit-font-smoothing:antialiased}
.sw *{box-sizing:border-box}
.sw a{color:inherit;text-decoration:none}
.sw h2,.sw h3,.sw p{margin:0;font-weight:400;font-family:inherit;color:inherit;text-transform:none}
.sw-intro{position:relative;padding:calc(var(--sw-top,96px) + clamp(16px,2vw,40px)) 0 calc(var(--hs)*.63)}
.sw-eye{font-size:clamp(11px,.85vw,15px);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);line-height:1.4}
.sw-headline{font-size:var(--hs)!important;line-height:.82!important;letter-spacing:-.07em!important;font-weight:400!important;margin:calc(var(--hs)*.163) 0 0!important;white-space:nowrap;color:var(--fg)!important}
.sw-word{display:inline-block;text-transform:uppercase}
.sw-line{display:flex;align-items:center;gap:.125em}
.sw-badge{display:inline-flex;width:.755em;height:.755em;flex:none;border-radius:50%;background:var(--lime);align-items:center;justify-content:center;overflow:hidden}
.sw-badge svg{width:85%;height:85%;display:block}
.sw-arr{font-size:.35em;align-self:flex-start;letter-spacing:0;line-height:1}
.sw-sub{position:absolute;right:.04em;bottom:calc(var(--hs)*.31);max-width:min(20vw,330px);font-size:clamp(14px,1.03vw,19px)!important;line-height:1.35!important;color:var(--sub)!important}
.sw-sub small{display:block;margin-top:.8em;font-size:.82em;color:#8a8a8a}
.sw-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(48px,6.5vw,128px)}
.sw-case{position:relative}
.sw-field{position:relative;height:clamp(500px,min(46vw,82vh),980px);border-radius:clamp(18px,1.8vw,34px);background:var(--f);color:var(--k);overflow:hidden;isolation:isolate}
.sw-ghost{position:absolute;left:-.04em;right:-.04em;top:50%;margin-top:-.5em;font-size:clamp(7rem,12.6vw,15rem);line-height:1;letter-spacing:-.065em;white-space:nowrap;color:var(--g);pointer-events:none;user-select:none;z-index:0;will-change:transform}
.sw-case:nth-child(even) .sw-ghost{text-align:right}
.sw-meta{position:absolute;top:clamp(22px,3vw,58px);left:clamp(22px,3vw,58px);z-index:3;font-size:clamp(11px,1vw,16px);letter-spacing:.1em;text-transform:uppercase}
.sw-media{position:absolute;z-index:1;top:50%;left:62%;height:80%;aspect-ratio:var(--ar,3/4);max-width:46%;transform:translate(-50%,-50%);border-radius:clamp(10px,1vw,18px);overflow:hidden;background:#111;will-change:transform;box-shadow:0 2.4vw 4vw -1.6vw rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.08)}
.sw-case:nth-child(even) .sw-media{left:38%}
.sw-media img,.sw-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform .5s var(--out)}
.sw-media video{opacity:0;transition:opacity .45s var(--out),transform .5s var(--out)}
.sw-media video.is-on{opacity:1}
.sw-bottom{position:absolute;left:clamp(22px,3vw,58px);right:clamp(22px,3vw,58px);bottom:clamp(20px,2.5vw,50px);z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:2vw;pointer-events:none}
.sw-case:nth-child(even) .sw-bottom{flex-direction:row-reverse;text-align:right}
.sw-case h3{font-size:clamp(2.75rem,min(5.5vw,9vh),6.75rem)!important;line-height:.95!important;letter-spacing:-.064em!important;max-width:min(40%,11em);text-wrap:balance;color:var(--k)!important}
.sw-case h3.-long{font-size:clamp(2.25rem,min(4.2vw,7vh),5.25rem)!important}
.sw-tag{font-size:clamp(12px,1vw,16px);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;padding-bottom:.4em}
.sw-arw{display:inline-block;margin-left:.9em;font-size:1.5em;line-height:1;transition:transform .3s var(--out)}
.sw-cap{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:clamp(14px,1.7vw,30px) 0 0;font-size:clamp(14px,1.1vw,19px);line-height:1.3}
.sw-cap p span{color:var(--sub)}
.sw-link{white-space:nowrap;border-bottom:1px solid transparent;transition:border-color .25s}
.sw-link::after{content:"";position:absolute;inset:0;z-index:4}
.sw-case:has(.sw-link:focus-visible) .sw-field{outline:2px solid var(--lime);outline-offset:4px}
@media (hover:hover){.sw-case:hover .sw-media img,.sw-case:hover .sw-media video{transform:scale(1.035)}.sw-case:hover .sw-arw{transform:translate(.12em,-.12em)}.sw-case:hover .sw-link{border-color:currentColor}}
.sw-js .sw-rv{opacity:0;transform:translateY(clamp(24px,4vh,56px))}
.sw-js .sw-rv.is-in{opacity:1;transform:none;transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.sw-js .sw-headline .sw-word{opacity:0;transform:translateY(.18em)}
.sw-js .sw-intro.is-in .sw-word{opacity:1;transform:none;transition:opacity .8s var(--ease),transform 1s var(--ease)}
.sw-js .sw-badge{transform:scale(.6) rotate(-40deg)}
.sw-js .sw-intro.is-in .sw-badge{transform:none;transition:transform 1.1s var(--ease) .12s}
@media (min-width:941px){
  html[data-dv="concepts"] h1.dsub-h1{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important}
}
@media (min-width:941px) and (max-height:820px){.sw{--hs:clamp(5.5rem,min(12vw,22vh),16rem)}.sw-field{height:clamp(460px,80vh,700px)}}
@media (max-width:940px){
  .sw{--hs:min(18.5vw,7.5rem);--px:20px;padding-bottom:56px}
  .sw-intro{padding:calc(var(--sw-top,84px) + 20px) 0 0}
  .sw-eye{font-size:11px}
  .sw-headline{line-height:.91!important;letter-spacing:-.083em!important;margin-top:26px!important}
  .sw-badge{width:.917em;height:.917em}
  .sw-sub{position:static;max-width:300px;font-size:15px!important;margin:28px 0 40px}
  .sw-list{gap:16px;max-width:600px;margin:0 auto}
  .sw-field{height:auto;min-height:min(740px,calc(100svh - 104px));border-radius:14px;padding:24px 20px 76px;display:flex;flex-direction:column}
  .sw-ghost{display:none}
  .sw-meta{position:static;font-size:11px;letter-spacing:.12em;margin-bottom:20px}
  .sw-media,.sw-case:nth-child(even) .sw-media{position:relative;left:auto;top:auto;height:auto;width:100%;max-width:none;aspect-ratio:359/413;transform:none;border-radius:10px;box-shadow:none;margin:0 0 24px;background:var(--a)}
  .sw-bottom,.sw-case:nth-child(even) .sw-bottom{position:static;display:block;text-align:left}
  .sw-case h3{font-size:clamp(44px,15.9vw,76px)!important;line-height:.9!important;letter-spacing:-.065em!important;max-width:none}
  .sw-case h3.-long{font-size:clamp(38px,11.5vw,60px)!important}
  .sw-tag{display:block;margin-top:14px;font-size:14px;line-height:1.4;letter-spacing:0;text-transform:none;white-space:normal;padding:0;max-width:260px}
  .sw-arw{display:none}   /* 2026-10-27 Max phone r4 fix 1: no bottom-right arrow on phone Concepts cards (was absolute right:23px bottom:26px 34px); the stretched .sw-link stays the tap target */
  .sw-cap{display:none}
}
@media (prefers-reduced-motion:reduce){
  .sw-js .sw-rv,.sw-js .sw-headline .sw-word,.sw-js .sw-badge{opacity:1!important;transform:none!important;transition:none!important}
  .sw-media img,.sw-media video,.sw-arw{transition:none!important}
}
/* project field: ghost type = accent mixed into the field */
.sw-case{position:relative}
.sw .sw-field .sw-ghost{color:var(--g)}
.sw-field{--g:color-mix(in srgb,var(--a) 24%,var(--f))}
.sw-media picture{display:contents}
@media (min-width:941px){
  /* pass 10: the concepts-view dark nav overrides were removed (Max: global nav as on the references view) */
}
@media (max-width:940px){
  /* the caption row is desktop-only; its link stays as the full-card hit area */
  .sw-cap{display:block;height:0;overflow:hidden;padding:0}
}
/* project fields (in CSS, not inline: the page bakes without style attributes) */
.sw-case[data-cat="pmu"] .sw-field{--f:#FFFFFF;--k:#141414;--a:#9C6B63}
.sw-case[data-cat="architect"] .sw-field{--f:#181213;--k:#FFFFFF;--a:#B0AAA8}
.sw-case[data-cat="realestate"] .sw-field{--f:#F4F4F1;--k:#13161B;--a:#2236C4}
.sw-case[data-cat="homeware"] .sw-field{--f:#C4CDDB;--k:#1C2130;--a:#A63D1A}
.sw-case[data-cat="pilates"] .sw-field{--f:#F7E7DE;--k:#25140C;--a:#B61540}
.sw-case[data-cat="photo"] .sw-field{--f:#1F5C5A;--k:#F4EFE6;--a:#E8553A}
.sw-case[data-cat="renov"] .sw-field{--f:#111111;--k:#F2EFE6;--a:#FFD400}
.sw-case[data-cat="physio"] .sw-field{--f:#F6F4EE;--k:#1E2B24;--a:#C5DC5A}
.sw-case[data-cat="fashion"] .sw-field{--f:#FFFFFF;--k:#1A1A1A;--a:#7A1E14}
.sw-case[data-cat="bridal"] .sw-field{--f:#F6F5F1;--k:#1C2232;--a:#45629C}
/* pass 4 (2026-10-15, visual-critic deltas) */
.sw-ghost{font-size:clamp(6rem,10.7vw,12.75rem)}
/* selected-work.js fits the ghost to ~92% of the field; the cap-height optical centre sits ~.12em above the em centre */
@media (min-width:941px){.sw .sw-field .sw-ghost{margin-top:-.62em}}
@media (min-width:941px){
  /* the site-wide floating badge sat on the project fields at every width (critic passes 3+4); the concepts view hides it,
     the outro CTA and nav Kontakt stay (DECISIONS 2026-10-15 pass 4) */
  html[data-dv="concepts"] .intouch{display:none!important}
}
@media (max-width:940px){
  /* .sw p{margin:0} outranked .sw-sub, so the phone sub sat ~10px under WORK */
  .sw .sw-sub{margin:24px 0 40px}
  .sw-arr{font-size:.45em}
  /* media keeps the poster's own 359/413 (taller cropped the concept's headline); the card hugs its content instead of a
     740px floor, which left a ~170px band above the arrow */
  .sw-field{min-height:0}
}
/* pass 5: the rotated media corner reached the tag line at 1440; the phone tag margin lost to .sw p{margin:0} */
@media (min-width:941px){.sw .sw-media{height:74%;top:46%}}
@media (max-width:940px){.sw .sw-tag{margin-top:14px}}
@media (max-width:940px){.sw .sw-tag{max-width:none;text-wrap:balance}}   /* critic pass 5: the 260px cap split "· Miami" */
/* pass 6 (2026-10-15, Max: "cards smaller and the websites displayed fitted the rectangles"): shorter fields; the media is the
   concept's real 1440x900 first view (dcon_desk_*, 16:10) in a 16:10 frame, so nothing is cropped. Desktop portrait loops dropped. */
@media (min-width:941px){
  .sw .sw-field{height:clamp(420px,min(34vw,66vh),720px);container-type:size}
  .sw .sw-media{height:auto;width:min(50cqw,calc(68cqh * 1.6));aspect-ratio:16/10;max-width:none;top:44%}
  .sw .sw-case h3{font-size:clamp(2.5rem,min(4.6vw,7.5vh),5.5rem)!important}
  .sw .sw-case h3.-long{font-size:clamp(2rem,min(3.6vw,6vh),4.4rem)!important}
}
/* pass 8 (2026-10-15, Max on pass 7: "you got rid of the boxes ... they should appear to come in from the right then the next one
   from the left ... looks awkward with just the website and no name"): pass 6 boxes and ghost name back; the website frame is
   larger (80% of the field height); cards slide in from the right (odd) / left (even), each title from the opposite side. */
@media (min-width:941px){
  .sw .sw-field{height:clamp(440px,min(38vw,70vh),760px)}
  .sw .sw-media{width:auto;height:80%;top:46%;left:63%}
  .sw .sw-case:nth-child(even) .sw-media{left:37%}
  .sw .sw-case h3{max-width:min(34%,11em)}
  /* pass 10: the pass 8 CSS slide-in transitions were removed; selected-work.js v4 drives a scroll-linked progress instead */
}
@media (prefers-reduced-motion:reduce){.sw-js .sw-case.sw-rv:nth-child(n),.sw-js .sw-case.sw-rv:nth-child(n) h3{opacity:1!important;transform:none!important;transition:none!important}}
/* pass 8b: the tag sat under the larger frame (probe d14 overlap up to 5028px2) and the even index on its corner: both move to
   the title side, the tag stacked under the title */
@media (min-width:941px){
  .sw .sw-bottom{flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:clamp(10px,1vw,18px)}
  .sw .sw-case:nth-child(even) .sw-bottom{flex-direction:column;align-items:flex-end}
  .sw .sw-case:nth-child(even) .sw-meta{left:auto;right:clamp(22px,3vw,58px)}
  .sw .sw-tag{padding-bottom:0;max-width:34%;white-space:normal}
}

/* Pass 9 (Max 2026-10-15 "i like it just make it smaller"): desktop intro lockup ~37% smaller (1440: 194px -> 122px). Phone untouched. */
@media (min-width:941px){.sw{--hs:clamp(4.5rem,min(8.5vw,14vh),10rem)}}

/* Pass 10 (Max 2026-10-15 brief, DECISIONS pass 10): CONCEPTS lockup ~6vw, no eyebrow, larger sub; narrower cards with the
   front-facing 16:10 preview on the right of every card, the name visible in the left column (JS-fitted), per-concept art
   direction from --f/--k/--a, scroll-linked reversible motion in selected-work.js v4. The dark lives on .sw itself, offset under
   the global nav (nav untouched). Phone: only the headline text changed (size tuned so CONCEPTS fits one line). */
@media (min-width:941px){
  .sw{--hs:clamp(3.5rem,min(6vw,10vh),7rem);margin-top:var(--sw-nav,73px);overflow-x:clip}
  .sw-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:4vw;padding:clamp(48px,5.5vw,104px) 0 clamp(48px,5vw,96px)}
  .sw .sw-headline{margin:0!important}
  .sw .sw-sub{position:static;flex:0 1 400px;max-width:400px;font-size:clamp(17px,1.35vw,23px)!important;line-height:1.4!important;margin:0 0 .1em}
  .sw .sw-sub small{font-size:.84em;margin-top:.9em}
  .sw-list{width:min(1320px,82vw);margin:0 auto;gap:clamp(56px,6vw,112px)}
  .sw-case{--fh:calc(clamp(460px,min(46vw,80vh),980px)*.8);--mh:min(40%,calc(var(--fh)*.94))}
  .sw .sw-field{height:var(--fh);container-type:size;display:grid;grid-template-columns:4.5% minmax(0,calc(100% - 11% - var(--mh)*1.6));
    grid-template-rows:auto minmax(0,1fr) auto auto;padding:calc((var(--fh) - var(--mh))/2) 0;border-radius:clamp(16px,1.4vw,26px)}
  .sw .sw-meta,.sw .sw-case:nth-child(even) .sw-meta{position:relative;grid-column:2;grid-row:1;left:auto;right:auto;top:auto;font-size:clamp(11px,.85vw,14px);letter-spacing:.12em}
  .sw .sw-field .sw-ghost,.sw .sw-case:nth-child(even) .sw-ghost{position:relative;grid-column:2;grid-row:3;left:auto;right:auto;top:auto;margin:0 0 clamp(10px,1vw,18px);
    color:var(--k);text-align:left;font-size:clamp(2.5rem,5vw,6rem);line-height:.92;letter-spacing:-.055em;z-index:2;user-select:auto}
  .sw .sw-bottom,.sw .sw-case:nth-child(even) .sw-bottom{position:relative;grid-column:2;grid-row:4;left:auto;right:auto;bottom:auto;display:flex;flex-direction:column;
    align-items:flex-start;justify-content:flex-end;text-align:left;gap:clamp(10px,.9vw,16px)}
  .sw .sw-case h3,.sw .sw-case h3.-long{font-size:clamp(20px,1.7vw,30px)!important;line-height:1.12!important;letter-spacing:-.025em!important;max-width:none;text-wrap:balance}
  .sw .sw-tag{max-width:none;font-size:clamp(11px,.8vw,13px);line-height:1.45;white-space:normal}
  .sw .sw-arw{font-size:1.3em;margin-left:.6em}
  .sw .sw-media,.sw .sw-case:nth-child(even) .sw-media{--mw:min(64cqw,131.2cqh);position:absolute;left:auto;right:3.5cqw;top:calc(50cqh - var(--mw)/3.2);
    width:var(--mw);height:calc(var(--mw)/1.6);max-width:none;aspect-ratio:auto;transform:none;border-radius:10px;
    box-shadow:0 28px 60px -28px rgba(0,0,0,.5),0 10px 24px -14px rgba(0,0,0,.28),0 0 0 1px rgba(0,0,0,.06);transform-origin:50% 60%}
  .sw .sw-media img{object-fit:cover;object-position:top center}
  .sw-js .sw-case.sw-rv:nth-child(n),.sw-js .sw-case.sw-rv:nth-child(n) h3{opacity:1;transform:none;transition:none}
  /* art direction: one low-contrast field per concept, from its own colours; ::before sits under the text and the preview */
  .sw .sw-field::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none}
  .sw .sw-case[data-cat="photo"] .sw-field{background:radial-gradient(ellipse 48% 62% at 70% 46%,rgba(255,236,214,.17),transparent 70%),radial-gradient(circle at 66% 58%,rgba(232,85,58,.12),transparent 46%),#1F5C5A}
  .sw .sw-case[data-cat="photo"] .sw-field::before{background:radial-gradient(ellipse 85% 95% at 55% 48%,transparent 50%,rgba(4,18,18,.55) 100%)}
  .sw .sw-case[data-cat="renov"] .sw-field{background:linear-gradient(118deg,transparent 34%,rgba(255,212,0,.075) 47%,rgba(255,212,0,.025) 58%,transparent 66%),#111}
  .sw .sw-case[data-cat="renov"] .sw-field::before{background:repeating-linear-gradient(118deg,transparent 0 119px,rgba(255,212,0,.06) 119px 120px),linear-gradient(0deg,transparent calc(100% - 1px),rgba(255,212,0,.08) 0) 0 18%/100% 1px no-repeat;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent)}
  .sw .sw-case[data-cat="pmu"] .sw-field{background:radial-gradient(ellipse 50% 70% at 70% 50%,rgba(156,107,99,.17),transparent 70%),linear-gradient(135deg,#FFFFFF 0%,#FBF4F2 55%,#F5E8E4 100%)}
  .sw .sw-case[data-cat="physio"] .sw-field{background:radial-gradient(ellipse 46% 62% at 72% 52%,rgba(197,220,90,.32),transparent 72%),linear-gradient(160deg,#F6F4EE 0%,#ECEFE3 60%,#E2E8D8 100%)}
  .sw .sw-case[data-cat="fashion"] .sw-field{background:radial-gradient(ellipse 60% 75% at 100% 100%,rgba(122,30,20,.11),transparent 70%),linear-gradient(135deg,#FDFBF6 0%,#F7F2E8 100%)}
  .sw .sw-case[data-cat="pilates"] .sw-field{background:radial-gradient(ellipse 48% 64% at 72% 50%,rgba(182,21,64,.13),transparent 72%),linear-gradient(140deg,#F8EBE3 0%,#F7E1D7 100%)}
  .sw .sw-case[data-cat="pilates"] .sw-field::before{inset:auto;left:46%;width:52%;top:7%;height:130%;border:1.5px solid rgba(182,21,64,.13);border-radius:999px 999px 0 0}
  .sw .sw-case[data-cat="realestate"] .sw-field{background:#F4F4F1}
  .sw .sw-case[data-cat="realestate"] .sw-field::before{background:linear-gradient(rgba(34,54,196,.075) 1px,transparent 1px) 0 0/56px 56px,linear-gradient(90deg,rgba(34,54,196,.075) 1px,transparent 1px) 0 0/56px 56px,
    linear-gradient(90deg,transparent calc(50% - 1px),rgba(34,54,196,.1) 0 calc(50% + 1px),transparent 0) 0 0/336px 336px;
    -webkit-mask-image:radial-gradient(ellipse 70% 80% at 64% 50%,#000 30%,transparent 85%);mask-image:radial-gradient(ellipse 70% 80% at 64% 50%,#000 30%,transparent 85%)}
  .sw .sw-case[data-cat="architect"] .sw-field{background:radial-gradient(ellipse 70% 26% at 60% 63%,rgba(150,170,205,.13),transparent 75%),linear-gradient(180deg,#181213 0%,#1A1618 58%,#1E1D24 63%,#151012 100%)}
  .sw .sw-case[data-cat="architect"] .sw-field::before{background:linear-gradient(90deg,transparent 4%,rgba(176,170,168,.32) 40%,rgba(176,170,168,.32) 80%,transparent 98%) 0 63%/100% 1px no-repeat}
  .sw .sw-case[data-cat="homeware"] .sw-field{background:radial-gradient(ellipse 55% 70% at 92% 100%,rgba(166,61,26,.16),transparent 70%),linear-gradient(160deg,rgba(255,255,255,.28) 0%,transparent 45%),#C4CDDB}
}
@media (min-width:941px) and (max-height:820px){.sw .sw-field{height:var(--fh)}}
@media (max-width:940px){.sw{--hs:min(14vw,7.5rem)}}
/* Pass 10b (blind critic 2026-10-15): one name size, wraps allowed; every preview gets a visible screen edge; Petalline/Hallway/Datum Nine
   fields separated from their neighbours; intro aligned to the card column, sub bottom on the title baseline */
@media (min-width:941px){
  .sw .sw-field .sw-ghost,.sw .sw-case:nth-child(even) .sw-ghost{white-space:normal;text-wrap:balance}
  .sw-intro{width:min(1320px,82vw);margin-inline:auto;box-sizing:border-box;padding-top:clamp(24px,2vw,40px)}
  /* Max 2026-10-15 "the width is too small": cards back to the full content width (pre-pass-10), intro follows */
  .sw-list,.sw-intro{width:auto}
  .sw .sw-sub{margin-bottom:calc(var(--hs) * -.16)}
  .sw .sw-media,.sw .sw-case:nth-child(even) .sw-media{box-shadow:0 32px 64px -26px rgba(0,0,0,.55),0 12px 28px -14px rgba(0,0,0,.3),0 0 0 1px rgba(0,0,0,.16)}
  .sw .sw-case:is([data-cat="photo"],[data-cat="renov"],[data-cat="architect"]) .sw-media{box-shadow:0 32px 64px -26px rgba(0,0,0,.7),0 12px 28px -14px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.18)}
  .sw .sw-case[data-cat="pmu"] .sw-field{background:radial-gradient(ellipse 50% 70% at 70% 50%,rgba(156,107,99,.16),transparent 70%),linear-gradient(135deg,#F6E7DC 0%,#EFD8C9 100%)}
  .sw .sw-case[data-cat="realestate"] .sw-field{background:linear-gradient(160deg,#E9E3D8 0%,#DED5C6 100%)}
  .sw .sw-case[data-cat="architect"] .sw-field{background:radial-gradient(ellipse 70% 26% at 60% 63%,rgba(150,190,175,.12),transparent 75%),linear-gradient(180deg,#0F1F1D 0%,#132622 58%,#17302B 63%,#0D1A18 100%)}
}
@media (prefers-reduced-motion:reduce){.sw .sw-case,.sw .sw-ghost,.sw .sw-bottom,.sw .sw-media{transform:none!important;opacity:1!important}}

@media (min-width:941px){.sw .sw-media,.sw .sw-case:nth-child(even) .sw-media{top:calc(50% - var(--mw)/3.2)}.sw-list{gap:clamp(32px, 3.4vw, 64px)}}

/* Max 2026-10-22 (examples#konzepte): the intro used too much height in a 400px column; it now takes the free width left of it */
@media (min-width:941px){
  .sw .sw-sub{flex:0 1 min(940px,50vw);max-width:min(940px,50vw);text-wrap:pretty}
}

/* r5 Area 2A (Max 2026-10-27): new intro copy + a separate disclosure line (.sw-disc) under it, both inside .sw-copy.
   Desktop: the copy fills the width right of the title (two to three lines at 1366/1920, quieter than the title); phone has its own measures. */
@media (min-width:941px){
  .sw .sw-copy{flex:1 1 0;min-width:0;max-width:min(1000px,100%);margin:0 0 calc(var(--hs) * -.16)}
  .sw .sw-copy .sw-sub{flex:none;max-width:none;margin:0;font-size:clamp(15px,1.1vw,20px)!important;line-height:1.45!important;text-wrap:pretty}
  .sw .sw-disc{margin:.8em 0 0;font-size:clamp(12.5px,.85vw,15px);line-height:1.4;color:#8f8f8f}
}
@media (max-width:940px){
  .sw .sw-copy{margin:24px 0 40px}
  .sw .sw-copy .sw-sub{margin:0}
  .sw .sw-disc{max-width:300px;margin:12px 0 0;font-size:13px;line-height:1.4;color:#8f8f8f}
}

/* Brief r5 area 2 / B: one material or photographic detail per card, taken from that concept's own assets (concepts/<slug>/...), blurred and masked
   into the empty field left of the recording; opacity per card (--bgo). Critic pick 2026-10-27: photographic detail over a drawn mark. */
.sw .sw-field::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--bgi) var(--bgp,50% 50%)/cover no-repeat;opacity:var(--bgo,.2);filter:blur(2px) saturate(.7);
  -webkit-mask-image:radial-gradient(ellipse 48% 75% at 38% 52%,#000 15%,transparent 76%);mask-image:radial-gradient(ellipse 48% 75% at 38% 52%,#000 15%,transparent 76%)}
@media (max-width:940px){.sw .sw-field::after{-webkit-mask-image:linear-gradient(180deg,#000 0,transparent 70%);mask-image:linear-gradient(180deg,#000 0,transparent 70%)}}
.sw .sw-case[data-cat="pmu"] .sw-field{--bgi:url("../concepts/pmu/img/beauty/g-lips.webp");--bgo:0.3;--bgp:40% 45%}
.sw .sw-case[data-cat="physio"] .sw-field{--bgi:url("../concepts/physio/img/ed-mats.webp");--bgo:0.2;--bgp:50% 50%}
.sw .sw-case[data-cat="photo"] .sw-field{--bgi:url("../concepts/photography/assets/img/set3.webp");--bgo:0.2;--bgp:50% 50%}
.sw .sw-case[data-cat="renov"] .sw-field{--bgi:url("../concepts/renovation/assets/img/plaster.webp");--bgo:0.2;--bgp:50% 50%}
.sw .sw-case[data-cat="pilates"] .sw-field{--bgi:url("../concepts/pilates/assets/stock-concept/reformers-warm-light.jpg");--bgo:0.22;--bgp:50% 50%}
.sw .sw-case[data-cat="realestate"] .sw-field{--bgi:url("../concepts/realestate/img/a-hall-s.webp");--bgo:0.16;--bgp:50% 50%}
.sw .sw-case[data-cat="fashion"] .sw-field{--bgi:url("../concepts/fashion/img/a-spools.webp");--bgo:0.2;--bgp:50% 50%}
.sw .sw-case[data-cat="architect"] .sw-field{--bgi:url("../concepts/architect/images/cove-1-s.webp");--bgo:0.2;--bgp:50% 60%}
.sw .sw-case[data-cat="homeware"] .sw-field{--bgi:url("../concepts/homeware/img/b-objects.webp");--bgo:0.22;--bgp:50% 50%}
.sw .sw-case[data-cat="bridal"] .sw-field{--bgi:url("../concepts/bridal/img/detail-train.webp");--bgo:0.2;--bgp:50% 50%}