/* Development reel. Sizes follow a 1440x960 frame: --u is one frame pixel. */
.dev-reel{--reel-h:calc(100svh - 86px);--u:min(calc(100vw / 1440),calc(var(--reel-h) / 960));--reel-tone:#0E4B4F;--reel-accent:#0E4B4F;position:relative;isolation:isolate;background:var(--reel-tone);color:#1b2226}
.dev-reel:not(.is-enhanced) .dev-reel-stage>:not(.dev-reel-steps){display:none}
.dev-reel-steps{display:grid;gap:56px;padding:72px var(--gutter)}
.dev-reel-step{display:grid;gap:18px;max-width:1100px}
.dev-reel-step:focus{outline:none}
.dev-reel-title{margin:0;font-family:Archivo,Switzer,sans-serif;font-weight:900;font-size:clamp(40px,6.5vw,94px);line-height:.955;letter-spacing:-.012em;text-transform:uppercase}
.dev-reel-line{display:block;white-space:nowrap}
.dev-reel-note{max-width:44ch;font-size:16px;line-height:1.5}
.dev-reel-note p{margin:0}
.dev-reel-note .text-button{margin-top:14px;color:#1b2226;pointer-events:auto}
.dev-reel-facility{margin-top:12px!important;font-size:13px;color:#465151}
.dev-reel-step-plate{width:100%;height:auto}

/* Pinned: one screen plus .8 screen of scroll per later step (matches span() in the script). */
.dev-reel.is-enhanced{height:calc(var(--reel-h) * 6.6);min-height:3400px}
.is-enhanced .dev-reel-stage{position:sticky;top:86px;height:var(--reel-h);min-height:520px;overflow:clip;background:var(--reel-tone)}
.dev-reel-film,.dev-reel-plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dev-reel[data-motion=film] .dev-reel-plate,.dev-reel[data-motion=still] .dev-reel-film{display:none}
.is-enhanced .dev-reel-steps{position:absolute;inset:0;display:block;padding:0;pointer-events:none;z-index:2}
.is-enhanced .dev-reel-step{position:absolute;inset:0;max-width:none}
.is-enhanced .dev-reel-step-plate{display:none}
.is-enhanced .dev-reel-title{position:absolute;left:calc(101 * var(--u));bottom:calc(76 * var(--u));font-size:calc(94 * var(--u))}
.is-enhanced .dev-reel-title[hidden],.is-enhanced .dev-reel-note[hidden]{display:none}
.dev-reel-letter{display:inline-block;will-change:transform,filter,opacity}
.is-enhanced .dev-reel-note{position:absolute;left:calc(104 * var(--u));top:calc(110 * var(--u));width:calc(430 * var(--u));min-width:300px;font-size:clamp(14px,calc(16.5 * var(--u)),18px);line-height:1.45}
.dev-reel-aside{position:absolute;z-index:2;right:calc(105 * var(--u));top:calc(110 * var(--u));margin:0;text-align:right;font-weight:500;font-size:clamp(13px,calc(16.5 * var(--u)),18px);line-height:1.22;letter-spacing:.02em;text-transform:uppercase}
.dev-reel-meta{position:absolute;z-index:3;left:calc(104 * var(--u));width:calc(520 * var(--u));min-width:300px;top:calc(676 * var(--u));display:flex;align-items:center;gap:calc(24 * var(--u));font-weight:500;font-size:max(11px,calc(10.5 * var(--u)));letter-spacing:.08em;text-transform:uppercase}
.dev-reel-count{margin:0;flex:none;width:calc(120 * var(--u));min-width:56px;font-variant-numeric:tabular-nums}
.dev-reel-name{margin:0;opacity:.85}
.dev-reel-index{position:absolute;z-index:3;right:calc(105 * var(--u));top:calc(186 * var(--u));font-weight:500;font-size:max(11px,calc(10.5 * var(--u)));letter-spacing:.08em;text-transform:uppercase;text-align:right}
.dev-reel-index ol{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.dev-reel-index a{display:inline-block;padding:6px 0;color:#1b2226;opacity:.78;text-decoration:none}
.dev-reel-index a:hover,.dev-reel-index a:focus-visible{opacity:1}
.dev-reel-index a[aria-current=step]{opacity:1;text-decoration:underline;text-underline-offset:5px}
.dev-reel-next,.dev-reel-pause{display:grid;place-items:center;flex:none;padding:0;border:0;background:none;color:#1b2226;cursor:pointer}
.dev-reel-next{position:absolute;z-index:3;left:calc(104 * var(--u));top:calc(620 * var(--u));width:max(44px,calc(46 * var(--u)));height:44px;justify-content:start}
.dev-reel-next svg{width:max(40px,calc(46 * var(--u)));height:12px;fill:none;stroke:currentColor;stroke-width:1.4;transition:transform .25s}
.dev-reel-next:hover svg{transform:translateX(6px)}
.dev-reel-pause{width:44px;height:44px;border:1px solid rgb(27 34 38/.4);border-radius:50%}
.dev-reel-pause svg{width:12px;height:12px;fill:currentColor}
.dev-reel-icon-play,.dev-reel-pause[aria-pressed=true] .dev-reel-icon-pause{display:none}
.dev-reel-pause[aria-pressed=true] .dev-reel-icon-play{display:inline}
.dev-reel-badge{position:absolute;z-index:3;right:calc(105 * var(--u));bottom:calc(68 * var(--u));width:max(72px,calc(98 * var(--u)));aspect-ratio:1;padding:0;border:0;border-radius:50%;background:#1b2226;color:#fff;cursor:pointer;transition:transform .25s}
.dev-reel-badge:hover{transform:scale(1.06)}
.dev-reel-badge svg{width:100%;height:100%;fill:currentColor}
.dev-reel-ring{transform-origin:50px 50px;transform:rotate(var(--reel-spin,0deg))}
.dev-reel-badge text{font-family:Archivo,Switzer,sans-serif;font-weight:900;font-size:9.4px;letter-spacing:.04em}
.dev-reel-credit{position:absolute;z-index:2;left:calc(104 * var(--u));bottom:calc(26 * var(--u));margin:0;font-size:11px;color:#465151}
:is(.dev-reel-next,.dev-reel-pause,.dev-reel-badge):focus-visible{outline:2px solid #1b2226;outline-offset:4px}

@media(max-width:767px){
  .is-enhanced .dev-reel-note{left:20px;top:22px;width:auto;min-width:0;right:20px;font-size:13px;line-height:1.45}
  /* The note wraps around the corner tag (two lines), then uses the full width, so it stays short above the garment. */
  .is-enhanced .dev-reel-note::before{content:"";float:right;width:calc(32% + 14px);height:2.2em}
  /* The Make step's factory line runs on after its paragraph, so the note stays above the taller jacket. */
  .is-enhanced .dev-reel-note p:has(+ .dev-reel-facility),.is-enhanced .dev-reel-facility{display:inline}
  .is-enhanced .dev-reel-facility{margin-left:.3em}
  .dev-reel-aside{right:20px;top:22px;width:32%;font-size:11px}
  /* Phones size the film by height. Short screens also drop it (--film-top), so the garments sit smaller and lower,
     below the note. Its faded sides meet the step colour, and the stage shades the floor to match the film. */
  .is-enhanced .dev-reel-stage{container-type:size;background:linear-gradient(var(--reel-tone) 70%,color-mix(in srgb,var(--reel-tone),#000 7.5%))}
  .dev-reel-film,.dev-reel-plate{--film-top:max(0px,calc(206px - 28cqh));inset:var(--film-top) auto auto 50%;width:auto;height:calc(100% - var(--film-top));aspect-ratio:810/1440;transform:translateX(-50%)}
  @container (min-aspect-ratio:9/17){.dev-reel-film,.dev-reel-plate{mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}}
  .is-enhanced .dev-reel-title{left:20px;bottom:142px;font-size:42px}
  .dev-reel-next{display:none}
  .dev-reel-meta{left:20px;right:96px;width:auto;min-width:0;top:auto;bottom:22px;gap:12px;font-size:10px}
  .dev-reel-count{width:auto;min-width:0}
  .dev-reel-index{top:auto;bottom:74px;left:20px;right:96px;font-size:10px;text-align:left;overflow-x:auto;scrollbar-width:none}
  /* All eight steps fit on a phone: a four-by-two grid instead of a clipped sideways row. */
  .dev-reel-index ol{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:0 18px}
  .dev-reel-index a{padding:7px 0}
  .dev-reel-name{display:none}
  .dev-reel-badge{right:20px;bottom:20px;width:58px}
  .dev-reel-credit{display:none}
}
@media(prefers-reduced-motion:reduce){.dev-reel-badge,.dev-reel-next svg{transition:none}.dev-reel-pause{display:none}}