/* Ink & Thread / Red: a colour study based on the white sketchbook layout. */
.red-edition{--red:#8a2028;--ink:#201516;--line:#bda6a4}
.red-edition .wordmark,.red-edition .ink-title h1 em{color:var(--red)}
.red-edition .nav{border-bottom-color:#d8c8c8}
.red-edition .hero-ink{isolation:isolate;background:#fff}
.red-edition .hero-ink:before{content:"";position:absolute;z-index:-1;right:0;top:0;bottom:0;width:36%;background:#8a2028}
.red-edition .hero-video{border:0;box-shadow:0 15px 40px #26080942}
.red-edition .hand-note{color:#fff;text-shadow:0 1px 3px #280707;font-size:27px}
.red-edition .art-label{color:#fff}
.red-edition .hero-side{color:#fff}
.red-edition .section-head{border-color:#9c393c}
.red-edition .work{background:#fff}
.red-edition .look-index{background:#8a2028;color:white}
.red-edition .project-intro h2 em,.red-edition .archive h2 em{color:#8a2028}
.red-edition .process-band{border-color:#a9363e}
.red-edition .photoshoots{background:#8a2028;color:#fff}
.red-edition .photoshoots .section-head{border-color:#d9a1a4}
.red-edition .photoshoots h2,.red-edition .photoshoots h2 em,.red-edition .photoshoots a,.red-edition .photoshoots figcaption{color:#fff}
.red-edition .photoshoots .text-link:hover{color:#ffdcdb}
.red-edition .archive{background:#fff}
.red-edition .retail{background:#fff;border-top:1px solid #9c393c}
.red-edition .retail h2 em,.red-edition .retail-facts span{color:#8a2028}
.red-edition .footer{border-top:1px solid #9c393c}
.red-edition .footer h2 em{color:#8a2028}
.red-edition .compare-link{border-color:#8a2028;color:#8a2028}
@media(max-width:600px){.red-edition .hero-ink:before{top:auto;bottom:20px;height:365px;width:37%}.red-edition .hero-art{z-index:1}.red-edition .hand-note{right:-25px}.red-edition .hero-scroll{color:#201516}.red-edition .hero-side{display:none}}
/* Keep handwritten labels readable where the white sketch overlaps red. */
.red-edition .hand-note{color:#8a2028;text-shadow:none}
.red-edition .art-label{color:#8a2028;background:#fff;padding:3px 6px}
/* Richer red study: the first screen becomes a full-colour canvas. */
.red-edition .hero-ink{background:#8a2028;color:#fff}
.red-edition .hero-ink:before{display:none}
.red-edition .ink-title h1,.red-edition .ink-title h1 em,.red-edition .ink-title p,.red-edition .hero-scroll,.red-edition .hero-side{color:#fff}
.red-edition .ink-title .pill{color:#fff;border-bottom-color:#fff}
.red-edition .ink-title .pill:hover{color:#f8d3d0;border-bottom-color:#f8d3d0}
.red-edition .retail{background:#f9eeee;border-top:1px solid #9c393c}
.red-edition .archive-list article span,.red-edition .section-head .eyebrow{color:#8a2028}
.red-edition .photoshoots .section-head .eyebrow{color:#fff}
@media(max-width:600px){.red-edition .hero-scroll{color:#fff}}
.red-edition .hand-note{background:#fff;padding:3px 8px;right:0;top:16px;z-index:2}
@media(max-width:600px){.red-edition .hand-note{right:-12px;top:18px}}
/* Type layers are decorative: the real project names and image descriptions stay accessible. */
.red-edition .look-type,.red-edition .gallery-type{position:absolute;z-index:2;pointer-events:none;color:#fff;text-shadow:0 1px 9px rgba(0,0,0,.65);white-space:nowrap}
.red-edition .look-type span,.red-edition .gallery-type span{display:block;font:600 10px/1.2 var(--sans);letter-spacing:.17em}
.red-edition .look-type em,.red-edition .gallery-type em{display:block;font:400 clamp(52px,6.3vw,94px)/.9 var(--serif);letter-spacing:-.035em;position:relative;top:-.15em}
.red-edition .look-type{bottom:7%;left:8%;transform:rotate(-5deg)}
.red-edition .look-type span{transform:translate(8px,13px)}
.red-edition .gallery-main{position:relative}
.red-edition .gallery-type{top:15%;left:6%;transform:rotate(-3deg)}
.red-edition .gallery-type span{font-size:11px;transform:translate(18px,14px);opacity:.85}
.red-edition .gallery-type em{font-size:clamp(64px,8vw,126px)}
@media(max-width:600px){.red-edition .look-type{bottom:8%;left:7%}.red-edition .look-type em{font-size:64px}.red-edition .gallery-type{top:10%;left:5%}.red-edition .gallery-type em{font-size:clamp(52px,14vw,72px)}.red-edition .gallery-type span{font-size:9px;transform:translate(12px,12px)}}
/* A large editorial gesture crosses the page, images and printed type. */
@font-face{font-family:Dawning;src:url('../assets/fonts/DawningOfANewDay-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
.red-edition .editorial-spread{position:relative;isolation:isolate;overflow:hidden;margin:30px -5.556% 100px;min-height:clamp(700px,78vw,1050px);padding:7vw 0 10vw;background:#fff}
.red-edition .spread-images{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,30px);width:min(66%,960px);height:clamp(440px,50vw,720px);margin:0 auto}
.red-edition .spread-images figure{min-width:0;overflow:hidden;background:#eee}
.red-edition .spread-images img{height:100%;width:100%;object-fit:cover}
.red-edition .spread-images figure:first-child img{object-position:center top}
.red-edition .spread-caption{width:min(66%,960px);margin:20px auto 0;display:flex;justify-content:space-between;gap:12px;font:600 10px/1.5 var(--sans);letter-spacing:.08em}
.red-edition .spread-gesture{position:absolute;z-index:2;left:0;right:0;top:40%;pointer-events:none;color:#fff;mix-blend-mode:difference}
.red-edition .spread-gesture em{position:relative;display:block;width:max-content;font:400 clamp(160px,24vw,390px)/1.25 Dawning,cursive;letter-spacing:-.08em;white-space:nowrap;transform:translateX(-5%) rotate(-4deg);transform-origin:center}
.red-edition .spread-print{position:absolute;left:40%;top:35%;font:600 clamp(12px,1.35vw,20px)/1.2 var(--sans);letter-spacing:.18em;text-align:center;transform:rotate(2deg)}
.red-edition .photoshoots{overflow:hidden}
.red-edition .gallery{position:relative}
.red-edition .gallery-gesture{position:absolute;z-index:3;left:-10vw;top:29%;pointer-events:none;color:#fff;white-space:nowrap}
.red-edition .gallery-gesture em{display:block;font:400 clamp(155px,21vw,330px)/1.15 Dawning,cursive;letter-spacing:-.08em;transform:rotate(-5deg);transform-origin:center;text-shadow:0 1px 9px #0005}
.red-edition .gallery-gesture span{position:absolute;top:45%;left:39%;font:600 10px/1.2 var(--sans);letter-spacing:.17em;transform:rotate(2deg)}
@media(max-width:900px){.red-edition .spread-images,.red-edition .spread-caption{width:78%}.red-edition .editorial-spread{min-height:690px}.red-edition .spread-gesture{top:39%}}
@media(max-width:600px){.red-edition .editorial-spread{min-height:570px;margin-top:10px;margin-bottom:65px;padding:45px 0 80px}.red-edition .spread-images{width:78%;height:390px;gap:10px}.red-edition .spread-caption{width:78%;font-size:8px}.red-edition .spread-gesture{top:38%}.red-edition .spread-gesture em{font-size:clamp(150px,45vw,205px);transform:translateX(-7%) rotate(-5deg)}.red-edition .spread-print{left:37%;top:35%;font-size:10px}.red-edition .gallery-gesture{left:-15vw;top:25%}.red-edition .gallery-gesture em{font-size:clamp(165px,43vw,220px)}.red-edition .gallery-gesture span{left:36%;font-size:9px}}
/* Keep the stroke ink-black instead of inverting the garment colours beneath it. */
.red-edition .spread-gesture{color:#171414;mix-blend-mode:normal}
.red-edition .gallery-gesture{top:4%}
@media(max-width:600px){.red-edition .gallery-gesture{top:7%}}
@supports(animation-timeline:view()){
 @media(prefers-reduced-motion:no-preference){
  .red-edition .spread-gesture em{animation:ink-drift linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  @keyframes ink-drift{from{transform:translateX(-8%) rotate(-4deg)}to{transform:translateX(-1%) rotate(-4deg)}}
 }
}
/* One outdoor photograph of both looks anchors the editorial spread. */
.red-edition .spread-images{display:block;width:min(62%,650px);height:auto}
.red-edition .spread-images figure{width:100%;aspect-ratio:4/5}
.red-edition .spread-images img{height:100%;width:100%;object-position:center}
.red-edition .spread-caption{width:min(62%,650px)}
@media(max-width:600px){.red-edition .spread-images,.red-edition .spread-caption{width:78%}.red-edition .spread-images{height:auto}}
/* Display the full landscape photograph at its natural proportions. */
.red-edition .editorial-spread{min-height:0;padding:7vw 0 9vw}
.red-edition .spread-images{width:min(78%,1100px);height:auto}
.red-edition .spread-images figure{aspect-ratio:auto;overflow:visible}
.red-edition .spread-images img,.red-edition .spread-images figure:first-child img{display:block;width:100%;height:auto;object-fit:contain;object-position:center}
.red-edition .spread-caption{width:min(78%,1100px)}
.red-edition .spread-gesture{top:25%}
@media(max-width:900px){.red-edition .editorial-spread{min-height:0}}
@media(max-width:600px){.red-edition .editorial-spread{min-height:0;padding:40px 0 80px}.red-edition .spread-images,.red-edition .spread-caption{width:90%}.red-edition .spread-images{height:auto}.red-edition .spread-gesture{top:20%}}
/* Keep the handwritten gesture above the garments. */
.red-edition .spread-gesture{top:-2%}
@media(max-width:600px){.red-edition .spread-gesture{top:-10%}}
/* Fine slanted handwriting with a light edge across both dark and light areas. */
@font-face{font-family:SaintDelafield;src:url('../assets/fonts/MrsSaintDelafield-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
.red-edition .spread-gesture{color:#8a2028}
.red-edition .spread-gesture em{font-family:SaintDelafield,cursive;letter-spacing:0;-webkit-text-stroke:1.5px #fffdf8;paint-order:stroke fill;text-shadow:0 1px 2px #0008}
@media(max-width:600px){.red-edition .spread-gesture em{-webkit-text-stroke:1px #fffdf8;text-shadow:0 1px 2px #0008}}
.red-edition .spread-gesture{color:#fff9ef}
.red-edition .spread-gesture em{-webkit-text-stroke:1.5px #8a2028;paint-order:stroke fill;text-shadow:0 1px 2px #2a060688}
@media(max-width:600px){.red-edition .spread-gesture em{-webkit-text-stroke:1px #8a2028;text-shadow:0 1px 2px #2a060688}}
/* The handwritten overlay has a clean, unoutlined stroke. */
.red-edition .spread-gesture em{-webkit-text-stroke:0;text-shadow:none}
@media(max-width:600px){.red-edition .spread-gesture em{-webkit-text-stroke:0;text-shadow:none}}
/* Two staggered lines retain the loose, edge-to-edge handwritten gesture. */
.red-edition .spread-gesture{top:calc(-2% + 32px)}
.red-edition .spread-gesture em{line-height:.78}
.red-edition .spread-gesture em span{display:block;width:max-content}
.red-edition .spread-gesture em span:nth-child(2){margin-left:40vw;font-size:1.18em}
@media(max-width:600px){.red-edition .spread-gesture{top:calc(-10% + 20px)}.red-edition .spread-gesture em{line-height:.82}.red-edition .spread-gesture em span:nth-child(2){margin-left:37vw;font-size:1.15em}}
@media(max-width:600px){.red-edition .spread-gesture em span:nth-child(2){margin-left:51vw;font-size:.7em}}
.red-edition .spread-gesture{color:#8a2028}
/* Slightly smaller, lower lettering while preserving its full-width sweep. */
.red-edition .spread-gesture{top:calc(-2% + 50px)}
.red-edition .spread-gesture em{font-size:clamp(140px,21.5vw,350px);transform-origin:left center;transform:translateX(-5%) rotate(-4deg) scaleX(1.12)}
@supports(animation-timeline:view()){
 @media(prefers-reduced-motion:no-preference){
  @keyframes ink-drift{from{transform:translateX(-8%) rotate(-4deg) scaleX(1.12)}to{transform:translateX(-1%) rotate(-4deg) scaleX(1.12)}}
 }
}
@media(max-width:600px){.red-edition .spread-gesture{top:calc(-10% + 32px)}.red-edition .spread-gesture em{font-size:clamp(135px,40vw,185px);transform:translateX(-7%) rotate(-5deg) scaleX(1.12)}}
/* Let the two lines sit closer to the centre of the photograph. */
.red-edition .spread-gesture{top:calc(13% + 50px);opacity:.9}
@media(max-width:600px){.red-edition .spread-gesture{top:calc(0% + 32px)}}
.red-edition .editorial-spread .spread-images img{filter:brightness(1.1)}
/* Align the two shoot captions and separate them from the images. */
.red-edition .gallery{align-items:end}
.red-edition .gallery-second{margin-top:0}
.red-edition .gallery figcaption{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;column-gap:16px;min-height:60px;padding-top:22px;line-height:1.55}
.red-edition .gallery figcaption span:last-child{text-align:right}
@media(max-width:600px){.red-edition .gallery-second{margin-top:30px}.red-edition .gallery figcaption{padding-top:18px;min-height:50px;column-gap:10px}}
@media(max-width:600px){.red-edition .compare-link{position:static;display:block;width:max-content;margin:0 5% 24px;box-shadow:none}}
.red-edition .gallery figcaption span:only-child{text-align:left}
/* Avoid the scaled image extending into the caption gap. */
.red-edition.js-motion .gallery-main img{transform:none;will-change:auto}
