/* Illustration & Image-making, with the same 1px, 40px vertical rules as case-stream. */
.illustration-page .case-intro{margin-bottom:clamp(48px,6vw,84px)}
.illustration-gallery{width:min(100%,1080px);margin:0 auto}
.illustration-gallery figure{margin:0;min-width:0}
.illustration-gallery img{display:block;max-width:100%;height:auto;margin:0 auto}
/* Centred section rules: 32px clearance above and below each 40px rule. */
.illustration-gallery>*+*{position:relative;margin-top:104px}
.illustration-gallery>*+*::before{content:"";position:absolute;top:-72px;left:50%;transform:translateX(-50%);width:1px;height:40px;background:#d8d8d8}
.illustration-feature,.illustration-pair,.illustration-wide,.illustration-stills,.illustration-parallax{width:100%}
.illustration-feature{display:flex;justify-content:center;align-items:center}
.illustration-feature--cover img{width:min(100%,560px)}
.illustration-feature--bathlife img{width:min(100%,540px)}
.illustration-feature--set img{width:min(100%,690px)}
.illustration-feature--paradiso img{width:min(100%,750px)}
.illustration-feature--ulysses img{width:min(100%,750px)}
.illustration-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;column-gap:clamp(20px,3vw,42px)}
.illustration-pair figure{display:flex;justify-content:center;align-items:center;min-width:0}
.illustration-pair img{max-height:700px;object-fit:contain}
.illustration-pair--published img{max-height:510px}
.illustration-pair--published figure:last-child img{width:100%;max-height:none}
.illustration-pair--primary img{max-height:690px}
.illustration-pair--airy img{max-height:520px}
.illustration-pair--editorial img{max-height:700px}
.illustration-pair--editorial figure:first-child img{border:1px solid #d6d6d6}
.illustration-wide img{width:100%}
.illustration-stills__row{display:grid;align-items:start;gap:clamp(14px,2vw,24px)}
.illustration-stills__row--three{grid-template-columns:repeat(3,minmax(0,1fr))}
.illustration-stills__row--two{grid-template-columns:repeat(2,minmax(0,1fr))}
.illustration-stills__row img{width:100%}
.illustration-stills__row+.illustration-stills__row{position:relative;margin-top:104px}
.illustration-stills__row+.illustration-stills__row::before{content:"";position:absolute;top:-72px;left:50%;transform:translateX(-50%);width:1px;height:40px;background:#d8d8d8}
.illustration-parallax iframe{display:block;width:100%;aspect-ratio:1366/768;border:0;background:#080808;overflow:hidden}
/* Each image gets its own section rule when a side-by-side grid stacks on mobile. */
@media(max-width:820px){
 .illustration-pair{column-gap:18px}
 .illustration-pair img{max-height:580px}
 .illustration-pair--airy img{max-height:420px}
 .illustration-feature--set img{width:min(100%,620px)}
}
@media(max-width:670px){
 .illustration-gallery{max-width:520px}
 .illustration-gallery>*+*{margin-top:82px}
 .illustration-gallery>*+*::before{top:-57px;height:32px}
 .illustration-pair{grid-template-columns:1fr;row-gap:0}
 .illustration-pair img{max-height:none;max-width:min(100%,430px)}
 .illustration-pair figure+figure{position:relative;margin-top:82px}
 .illustration-pair figure+figure::before{content:"";position:absolute;top:-57px;left:50%;transform:translateX(-50%);width:1px;height:32px;background:#d8d8d8}
 .illustration-stills__row{grid-template-columns:1fr;row-gap:0}
 .illustration-stills__row figure+figure{position:relative;margin-top:82px}
 .illustration-stills__row figure+figure::before{content:"";position:absolute;top:-57px;left:50%;transform:translateX(-50%);width:1px;height:32px;background:#d8d8d8}
 .illustration-stills__row+.illustration-stills__row{margin-top:82px}
 .illustration-stills__row+.illustration-stills__row::before{top:-57px;height:32px}
}

/* V12: self-contained model-making project group, separated with generous breathing space. */
.illustration-gallery>.illustration-project-group{
  position:relative;margin-top:clamp(144px,17vw,210px);
  margin-bottom:clamp(144px,17vw,210px);
  padding-block:clamp(68px,8vw,104px);
}
.illustration-gallery>.illustration-project-group::before,
.illustration-gallery>.illustration-project-group::after{
  content:"";position:absolute;left:0;right:0;width:100%;height:1px;
  background:#cfcfcf;transform:none;
}
.illustration-gallery>.illustration-project-group::before{top:0}
.illustration-gallery>.illustration-project-group::after{bottom:0;top:auto}
.illustration-project-group>.illustration-stills,
.illustration-project-group>.illustration-parallax{margin-top:clamp(48px,6vw,80px)}
.illustration-project-group>.illustration-stills::before,
.illustration-project-group>.illustration-parallax::before,
.illustration-project-group .illustration-stills__row+.illustration-stills__row::before,
.illustration-project-group .illustration-stills__row figure+figure::before{display:none}
.illustration-project-group .illustration-stills__row+.illustration-stills__row{margin-top:clamp(18px,2.5vw,32px)}
/* Remove inherited separator before the following editorial pair: horizontal divider replaces it. */
.illustration-gallery>.illustration-project-group+.illustration-pair--editorial{margin-top:0}
.illustration-gallery>.illustration-project-group+.illustration-pair--editorial::before{display:none}
/* Both editorial images scale to the same displayed height, preserving their full crops. */
.illustration-pair--editorial{align-items:center}
.illustration-pair--editorial img{width:auto;height:min(60vw,700px);max-width:100%;max-height:none;object-fit:contain}
@media(max-width:670px){
 .illustration-gallery>.illustration-project-group{margin-top:126px;margin-bottom:126px;padding-block:64px}
 .illustration-project-group>.illustration-stills,.illustration-project-group>.illustration-parallax{margin-top:48px}
 .illustration-project-group .illustration-stills__row figure+figure{margin-top:16px}
 .illustration-project-group .illustration-stills__row+.illustration-stills__row{margin-top:16px}
 .illustration-pair--editorial img{height:auto;width:100%;max-height:none}
}

/* V12 correction: Nina artwork has more whitespace inside the source image.
   Scale only the right-hand illustration so the visible art matches Scarlet Luxe. */
@media (min-width:671px){
 .illustration-pair--editorial figure:last-child img{transform:scale(1.1776);transform-origin:center center}
}

/* Keep the salon poster’s red rectangular FRAME aligned with Scarlet Luxe.
   Source artwork extends beyond that frame intentionally. On stacked mobile,
   images revert to natural size to avoid clipping. */
@media (min-width:671px){.illustration-pair--editorial{overflow:visible}.illustration-pair--editorial figure{overflow:visible}}

/* Restore a clearly visible, complete border around Scarlet Luxe. */
.illustration-pair--editorial figure:first-child img{border:1px solid #bcbcbc;outline:1px solid #bcbcbc;outline-offset:-1px}