/* RDLB · THE BRAND WORKSHOP, DRAWN
   One sticky hand drawn SVG, eight scroll steps beside it. Lives on studio-workshop.html.
   Everything is scoped under .bws so nothing here can reach the nav, the footer or case.css.
   Many colours while the business is undecided, one magenta once it is. Paper for the
   Studio, ink once the Lab takes over. Markup: studio-workshop.html. Behaviour: bws.js. */
.bws{
  --bws-bg:var(--bone); --bws-ink:var(--ink); --bws-ln:#0b0b0a; --bws-dim:var(--dim);
  --bws-faint:var(--faint); --bws-line:var(--line); --bws-mag:var(--mag);
  --bws-sans:'Lufga',system-ui,sans-serif; --bws-serif:var(--serif); --bws-mono:var(--mono);
  --bws-nav:60px; /* height of the fixed site nav. bws.js measures the real one and keeps this current */
  background:var(--bws-bg);color:var(--bws-ink);transition:background .9s var(--ease),color .9s var(--ease);
  border-top:1px solid var(--line);
}
.bws.is-lab{
  --bws-bg:#0b0b0a; --bws-ink:#ffffff; --bws-ln:#f4f1ea; --bws-dim:rgba(255,255,255,.74);
  --bws-faint:rgba(255,255,255,.52); --bws-line:rgba(255,255,255,.16); --bws-mag:#ff2d9a;
}
.bws-head{padding:12vh var(--pad) 3vh}

/* THE PAGE OPENS ON THE DRAWING (.bws-hero). The page's own headline, intro and Studio links are the
   first thing in the text column: beside the drawing on a desktop, under it on a phone. */
.bws.bws-hero{border-top:0}
.bws-intro{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-block:calc(var(--bws-nav) + 3vh) 6vh}
.bws-intro h1{font-weight:500;font-size:clamp(34px,3.7vw,60px);letter-spacing:-.04em;line-height:1;margin-top:16px;text-wrap:balance}
.bws-intro h1 em{font-family:var(--bws-serif);font-style:italic;font-weight:400;color:var(--bws-mag)}
.bws-intro .sub{margin-top:20px;font-weight:300;font-size:clamp(15px,1.15vw,17px);line-height:1.65;color:var(--bws-dim);max-width:46ch}
.bws-intro .metaline{margin-top:22px;display:flex;gap:8px 22px;flex-wrap:wrap;font-family:var(--bws-mono);font-size:10px;letter-spacing:.18em;color:var(--bws-faint)}
.bws-pn{margin-top:30px}
.bws-pn .pnk{margin-bottom:13px}
.bws-pn .pnnote{margin-top:14px;font-weight:300;font-size:13.5px;line-height:1.6;color:var(--bws-dim);max-width:46ch}
.bws-cue{margin-top:32px;font-family:var(--bws-serif);font-style:italic;font-size:clamp(19px,1.5vw,23px);line-height:1.3;color:var(--bws-ink);text-wrap:balance}
.bws-cue span{display:block;margin-top:10px;font-family:var(--bws-mono);font-style:normal;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--bws-faint)}
.bws-cue span::after{content:"";display:inline-block;width:1px;height:26px;margin-left:12px;vertical-align:middle;background:var(--bws-mag)}
.bws em.f{color:var(--bws-mag);transition:color .9s var(--ease)}
.bws-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(24px,4vw,64px);padding-inline:var(--pad)}
.bws-stage{position:sticky;top:0;align-self:start;height:100vh;height:100svh;display:flex;align-items:center;padding-top:var(--bws-nav)}
.bws-frame{position:relative;width:100%}
.bws-canvas{position:relative;width:100%;aspect-ratio:1.28;max-height:calc(100vh - var(--bws-nav) - 64px);max-height:calc(100svh - var(--bws-nav) - 64px)}
.bws-svg{position:absolute;inset:0;display:block;width:100%;height:100%}
.bws-ov{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.bws-ov>*{position:absolute;left:0;top:0;transform-origin:0 0;opacity:0;will-change:transform,opacity}
.bws-ov .clip{width:200px;height:200px;border-radius:50%;border:6px solid var(--c,var(--bws-ln));background-color:#0b0b0a;background-repeat:no-repeat}
@keyframes bwsclip{to{background-position:100% 0}}
.bws-ov .print{width:200px;margin:0;padding:7px;background:#fff;border:1px solid rgba(11,11,10,.14);box-shadow:0 14px 34px -18px rgba(0,0,0,.55)}
.bws-ov .print img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}

.bws-meta{display:flex;gap:16px;align-items:center;margin-top:14px;font-family:var(--bws-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bws-faint);transition:color .9s var(--ease);white-space:nowrap}
.bws-meta .bws-name{color:var(--bws-mag);transition:color .9s var(--ease);overflow:hidden;text-overflow:ellipsis;min-width:0}
.bws-rail{margin-left:auto;display:flex;gap:2px}
.bws-rail button{width:22px;height:22px;background:none;border:0;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.bws-rail button i{display:block;width:14px;height:2px;border-radius:2px;background:var(--bws-line);transition:background .5s var(--ease),transform .5s var(--ease)}
.bws-rail button.past i{background:var(--bws-faint)}
.bws-rail button.on i{background:var(--bws-mag);transform:scaleY(2)}
.bws-rail button:focus-visible{outline:2px solid var(--bws-mag);outline-offset:1px}

.bws-step{min-height:86vh;min-height:86svh;display:flex;flex-direction:column;justify-content:center;
  opacity:.22;transition:opacity .6s var(--ease)}
.bws-step.on{opacity:1}
.bws-step:last-child{min-height:130vh;min-height:130svh}
/* the last step keeps its words where every other step has them and leaves room underneath:
   that room is the scroll in which the customer walks the line while the drawing is still parked */
.bws-step:last-child::after{content:"";display:block;flex:0 0 44vh;flex-basis:44svh}
.bws-step .k{color:var(--bws-faint);transition:color .9s var(--ease)}
.bws-step h3{font-weight:500;font-size:clamp(26px,2.9vw,44px);letter-spacing:-.03em;line-height:1.06;margin-top:14px;max-width:16ch;text-wrap:balance}
.bws-step p{margin-top:18px;font-weight:300;font-size:clamp(15px,1.12vw,17px);line-height:1.7;color:var(--bws-dim);max-width:40ch;transition:color .9s var(--ease)}
.bws-step .gl{width:58px;height:58px;margin-bottom:18px}
.bws-step .gl svg{width:100%;height:100%;overflow:visible}
.bws-proof{margin-top:24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:40ch}
.bws-proof figure{margin:0}
.bws-proof img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;background:var(--bws-line)}
.bws-proof figcaption{margin-top:7px;font-family:var(--bws-mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--bws-faint)}
.bws-cta{display:inline-block;margin-top:28px;align-self:flex-start;border-radius:100px;padding:13px 24px;font-size:13.5px;
  background:var(--bws-mag);color:#fff;text-decoration:none;transition:.45s var(--ease)}
.bws-cta:hover{background:#fff;color:#0b0b0a}
.bws-cta:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* the drawing */
.bws .ln{fill:none;stroke:var(--bws-ln);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:stroke .9s var(--ease)}
.bws .ln.thin{stroke-width:1.8}
.bws .ln.mag{stroke:var(--bws-mag)}
.bws .ln.col{stroke:var(--c,var(--bws-ln))}
.bws .ln.fillbg{fill:var(--bws-bg);transition:stroke .9s var(--ease),fill .9s var(--ease)}
.bws .ln.bst.hit{fill:var(--bws-mag);stroke:var(--bws-mag)}
.bws .d{stroke-dasharray:1.001 2;stroke-dashoffset:1;visibility:hidden}
.bws .ln.sc{stroke-width:2.6;stroke:var(--c,var(--bws-ln));stroke-dasharray:1.001 2;stroke-dashoffset:1}
.bws.in .ln.sc{animation:bwsdraw 1.5s var(--ease) forwards;animation-delay:calc(var(--i)*70ms)}
@keyframes bwsdraw{to{stroke-dashoffset:0}}
.bws .t{fill:var(--bws-ln);transition:fill .9s var(--ease)}
.bws .t.ann{font-family:var(--bws-serif);font-style:italic;font-size:30px}
.bws .t.ann.sm{font-size:24px}
.bws .t.ann.lbl{font-size:22px}
.bws .t.mono{font-family:var(--bws-mono);font-size:15px;letter-spacing:.2em;fill:var(--bws-faint)}
.bws .t.aos{font-family:var(--bws-sans);font-weight:500;font-size:32px;letter-spacing:.22em}
.bws .t.num{font-family:var(--bws-sans);font-weight:500;font-size:86px;letter-spacing:-.04em}
.bws .t.mag{fill:var(--bws-mag)}
.bws .dot{fill:var(--bws-mag);transition:fill .9s var(--ease)}
.bws .pt{fill:var(--c,var(--bws-ln))}
.bws .pulse{animation:bwspulse 2.4s var(--ease) infinite;animation-delay:calc(var(--i)*.28s)}
@keyframes bwspulse{0%,100%{opacity:1}50%{opacity:.25}}

/* step glyphs draw themselves when the step is read */
.bws-step .gl .ln{stroke-width:2.2;stroke-dasharray:1.001 2;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s var(--ease),stroke .9s var(--ease)}
.bws-step.seen .gl .ln{stroke-dashoffset:0}

/* a small drawing, wherever it is: the hand labels and the small caps step up so they stay readable.
   bws.js adds .sm when the drawing is under 520px wide. */
.bws.sm .t.ann.sm{font-size:32px}
.bws.sm .t.ann.lbl{font-size:26px}
.bws.sm .t.ann.sm.fit{font-size:26px}
.bws.sm .t.ann.lbl.fit{font-size:21px}
.bws.sm .t.mono{font-size:22px;letter-spacing:.1em}
.bws.sm .t.mono.nm{font-size:19px;letter-spacing:.05em}

/* phones and tablets held upright: the drawing parks under the site nav, the steps scroll beneath it.
   bws.js reads this same query (STACK). change one, change both. */
@media (max-width:860px) and (orientation:portrait){
  .bws-grid{grid-template-columns:minmax(0,1fr);gap:0;padding-inline:0}
  .bws-head{padding:8vh var(--pad) 3vh}
  .bws-stage{top:var(--bws-nav);height:46vh;height:46svh;min-height:236px;align-items:stretch;z-index:2;background:var(--bws-bg);border-bottom:1px solid var(--bws-line);
    padding:10px var(--pad) 8px;transition:background .9s var(--ease),border-color .9s var(--ease)}
  /* the site nav is see-through. this strip sits behind it, above the parked drawing, so the words
     scrolling up underneath do not show through the nav as ghosts. */
  .bws-stage::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:var(--bws-nav);background:var(--bws-bg);transition:background .9s var(--ease)}
  .bws-frame{height:100%;display:flex;flex-direction:column}
  .bws-canvas{aspect-ratio:auto;flex:1;min-height:0;max-height:none}
  .bws-meta{margin-top:4px;font-size:9px;gap:10px}
  .bws-rail button{width:14px}
  .bws-rail button i{width:9px}
  .bws-steps{padding-inline:var(--pad)}
  .bws-step{min-height:54vh;min-height:54svh;padding-block:5vh}
  .bws-step:last-child{min-height:0}
  .bws-step:last-child::after{flex-basis:16vh;flex-basis:16svh}
  /* opening on a phone: the drawing starts under the nav, the headline is the first thing below it */
  .bws-hero .bws-grid{padding-top:var(--bws-nav)}
  .bws-intro{min-height:0;justify-content:flex-start;padding-block:24px 8vh}
  .bws-intro h1{font-size:clamp(28px,8.2vw,46px);margin-top:10px}
  .bws-pn{margin-top:26px}
  .bws-step .gl{width:46px;height:46px;margin-bottom:12px}
  .bws-step p,.bws-proof{max-width:none}
}

/* a phone on its side, or any short wide window: two columns stay, the drawing clears the nav */
@media (max-height:560px) and (orientation:landscape){
  .bws-head{padding-top:calc(var(--bws-nav) + 6vh)}
  .bws-canvas{max-height:calc(100vh - var(--bws-nav) - 40px);max-height:calc(100svh - var(--bws-nav) - 40px)}
  .bws-meta{margin-top:6px}
  .bws-step{min-height:100vh;min-height:100svh;padding-block:calc(var(--bws-nav) + 12px) 24px;justify-content:flex-start}
  .bws-step .gl{width:42px;height:42px;margin-bottom:10px}
  .bws-intro{justify-content:flex-start;padding-block:calc(var(--bws-nav) + 12px) 24px}
  .bws-intro h1{font-size:clamp(26px,3.4vw,40px)}
}

/* touch screens: the bar under the drawing shows where you are. its marks are too small to be fair
   tap targets, so on touch they are not targets at all. a thumb scrolls. */
@media (hover:none) and (pointer:coarse){
  .bws-rail{pointer-events:none}
}

@media (prefers-reduced-motion:reduce){
  .bws .ln.sc{stroke-dashoffset:0;animation:none!important}
  .bws .pulse{animation:none}
  .bws-ov .clip{animation:none!important}
  .bws,.bws *{transition:none!important}
  .bws-step .gl .ln{stroke-dashoffset:0}
}