/* ============================================================
   The work: /work/ (every client) and a story page for each one
   (2026-10-07, Karan: "every time a person clicks the cards ... it
   goes to this portfolio page ... and if a brand is clicked, it
   shows one more page fully based on that brand").

   Loaded after the homepage's own sheets, so the ground, the ink,
   the type, the pills and the white cards are the homepage's; this
   adds only the layouts those pages need. Same tokens, same card
   tab, same orange italic for the second word, same entrances.
   ============================================================ */

html[data-v="editorial"] .wk-page main{padding-top:var(--hdr-h)}
html[data-v="editorial"] .wk-eyebrow{
  display:flex;align-items:center;gap:14px;margin:0 0 clamp(16px,2.2vh,24px);
  font:600 12px/1 var(--f-text);letter-spacing:.2em;text-transform:uppercase;color:var(--acc-ink);
}
html[data-v="editorial"] .wk-eyebrow::before{content:"";width:34px;height:2px;border-radius:2px;background:var(--acc-display)}
html[data-v="editorial"] .wk-back{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;margin:clamp(18px,3vh,34px) 0 0;
  font:600 14px/1 var(--f-text);color:var(--ink-2);text-decoration:none;
}
html[data-v="editorial"] .wk-back svg{width:16px;height:16px;transition:transform .4s var(--ease-out)}
html[data-v="editorial"] .wk-back:hover{color:var(--ink)}
html[data-v="editorial"] .wk-back:hover svg{transform:translateX(-4px)}

/* ---- /work/: the head, then every client as a big card ---- */
html[data-v="editorial"] .wk-head{padding:clamp(48px,9vh,110px) 0 clamp(40px,7vh,80px)}
html[data-v="editorial"] .wk-head .hl{font-size:clamp(48px,7.4vw,118px);line-height:.92}
html[data-v="editorial"] .wk-head .hl .ln--2{
  font-size:1.08em;margin:.02em 0 0 -.03em;font-weight:800;font-style:italic;letter-spacing:-.03em;color:var(--acc-display);
}
html[data-v="editorial"] .wk-head__row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,64px);align-items:end;margin-top:clamp(26px,4vh,44px);
}
html[data-v="editorial"] .wk-head .lede{max-width:46ch;margin:0}
html[data-v="editorial"] .wk-count{display:flex;gap:clamp(22px,3vw,44px);margin:0;padding:0;list-style:none}
html[data-v="editorial"] .wk-count li{display:flex;flex-direction:column;gap:6px}
html[data-v="editorial"] .wk-count b{font:200 clamp(40px,4vw,60px)/1 var(--f-display);color:var(--ink);letter-spacing:-.02em}
html[data-v="editorial"] .wk-count span{font:600 11px/1.3 var(--f-text);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}

html[data-v="editorial"] .wk-list{padding:0 0 var(--sec-pad)}
html[data-v="editorial"] .wk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.6vw,38px)}

/* a whole card is the link; the homepage's .cl card, larger, with a footer line */
html[data-v="editorial"] a.cl{text-decoration:none;color:inherit;transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out)}
html[data-v="editorial"] a.cl:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(14,20,32,.08),0 2px 4px rgba(60,42,24,.06),0 26px 50px -24px rgba(60,42,24,.42)}
html[data-v="editorial"] a.cl:focus-visible{outline:2px solid var(--acc-display);outline-offset:4px}
html[data-v="editorial"] .wk-grid .cl__pic{aspect-ratio:16 / 10}
html[data-v="editorial"] .wk-grid .cl__name{font-size:clamp(38px,3.8vw,60px)}
html[data-v="editorial"] .wk-grid .cl__line{max-width:44ch}
html[data-v="editorial"] .cl__foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:auto;padding-top:22px;
}
html[data-v="editorial"] .cl__foot .cl__tags{margin:0;padding:0}
html[data-v="editorial"] .cl__go{
  display:inline-flex;align-items:center;gap:10px;flex:none;
  font:600 14px/1 var(--f-text);color:var(--ink);white-space:nowrap;
}
html[data-v="editorial"] .cl__go i{
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--ink);color:#fff;transition:transform .5s var(--ease-out),background-color .3s var(--ease-out);
}
html[data-v="editorial"] .cl__go svg{width:16px;height:16px}
html[data-v="editorial"] a.cl:hover .cl__go i{transform:translateX(4px);background:var(--v3-cta,#CA4A14)}
html[data-v="editorial"] .wk-grid .cl--next{grid-column:1 / -1;flex-direction:row;align-items:center;gap:clamp(24px,4vw,64px)}
html[data-v="editorial"] .wk-grid .cl--next .cl__mark{margin:0}
html[data-v="editorial"] .wk-grid .cl--next .cl__next{margin:0}
html[data-v="editorial"] .wk-grid .cl--next .cl__line{margin:0;max-width:38ch}
html[data-v="editorial"] .wk-grid .cl--next .cl__cta{margin-left:auto;align-self:center}
html.js[data-v="editorial"] .wk-grid .cl.rv:nth-child(2){transition-delay:.12s}

/* ---- a client's story ---- */
html[data-v="editorial"] .cs-hero{padding:0 0 clamp(36px,6vh,64px)}
html[data-v="editorial"] .cs-hero__top{padding-top:clamp(28px,5vh,60px)}
html[data-v="editorial"] .cs-name{
  margin:0;font:800 italic clamp(56px,9.6vw,156px)/.9 var(--f-display);letter-spacing:-.04em;color:var(--ink);text-wrap:balance;
}
html[data-v="editorial"] .cs-name--freddys span{display:inline-block;font-weight:200;font-style:normal;letter-spacing:-.03em;color:var(--acc-display)}
html[data-v="editorial"] .cs-name--lecookie{font-weight:200;font-style:normal;letter-spacing:-.03em}
html[data-v="editorial"] .cs-name--lecookie em{font-weight:800;font-style:italic;letter-spacing:-.04em;color:var(--acc-display)}
html[data-v="editorial"] .cs-hero__row{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,5vw,90px);align-items:start;
  margin-top:clamp(28px,4.4vh,52px);
}
html[data-v="editorial"] .cs-lede{margin:0;font:400 clamp(20px,1.7vw,27px)/1.45 var(--f-text);color:var(--ink);max-width:36ch;text-wrap:pretty}
html[data-v="editorial"] .cs-facts{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px}
html[data-v="editorial"] .cs-facts div{padding-top:14px;border-top:1px solid rgba(14,20,32,.14)}
html[data-v="editorial"] .cs-facts dt{margin:0 0 8px;font:600 11px/1.3 var(--f-text);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
html[data-v="editorial"] .cs-facts dd{margin:0;font:400 16px/1.45 var(--f-text);color:var(--ink)}
html[data-v="editorial"] .cs-facts a{color:var(--acc-ink);text-underline-offset:3px}

/* pictures: the homepage's rounded card, its orange tab under the picture */
html[data-v="editorial"] .cs-shot{
  position:relative;margin:0;overflow:hidden;border-radius:var(--r-card,20px);background:#E4DDD2;
  box-shadow:0 0 0 1px rgba(14,20,32,.06),var(--card-shadow);
}
html[data-v="editorial"] .cs-shot img,html[data-v="editorial"] .cs-shot video{display:block;width:100%;height:100%;object-fit:cover}
html[data-v="editorial"] .cs-shot--tab::after{content:"";position:absolute;left:clamp(24px,2.4vw,34px);bottom:-1px;width:46px;height:4px;border-radius:3px 3px 0 0;background:var(--acc-display)}
html[data-v="editorial"] .cs-cover{aspect-ratio:21 / 9}
html[data-v="editorial"] .cs-cap{margin:12px 0 0;font:400 14px/1.5 var(--f-text);color:var(--ink-3)}

/* the chapters: a rail of their names that stays in view, the chapter beside it */
html[data-v="editorial"] .cs-body{
  display:grid;grid-template-columns:minmax(170px,220px) minmax(0,1fr);gap:clamp(32px,6vw,110px);
  padding:clamp(56px,10vh,120px) 0 0;
}
html[data-v="editorial"] .cs-rail{position:sticky;top:calc(var(--hdr-h) + 36px);align-self:start}
html[data-v="editorial"] .cs-rail ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px;border-left:1px solid rgba(14,20,32,.14)}
html[data-v="editorial"] .cs-rail a{
  position:relative;display:flex;gap:12px;align-items:baseline;padding:10px 0 10px 18px;
  font:400 15px/1.3 var(--f-text);color:var(--ink-3);text-decoration:none;transition:color .3s var(--ease-out);
}
html[data-v="editorial"] .cs-rail a b{font:600 11px/1 var(--f-text);letter-spacing:.12em;color:inherit;opacity:.8}
html[data-v="editorial"] .cs-rail a::before{
  content:"";position:absolute;left:-1px;top:8px;bottom:8px;width:2px;border-radius:2px;
  background:var(--acc-display);transform:scaleY(0);transition:transform .45s var(--ease-out);
}
html[data-v="editorial"] .cs-rail a:hover{color:var(--ink)}
html[data-v="editorial"] .cs-rail a[aria-current]{color:var(--ink);font-weight:600}
html[data-v="editorial"] .cs-rail a[aria-current]::before{transform:none}

html[data-v="editorial"] .cs-ch{padding:0 0 clamp(72px,12vh,140px);scroll-margin-top:calc(var(--hdr-h) + 28px)}
html[data-v="editorial"] .cs-ch__n{display:block;margin:0 0 14px;font:600 12px/1 var(--f-text);letter-spacing:.2em;text-transform:uppercase;color:var(--acc-ink)}
html[data-v="editorial"] .cs-ch__h{
  margin:0 0 clamp(22px,3.4vh,36px);font:200 clamp(34px,4vw,64px)/1 var(--f-display);letter-spacing:-.02em;
  text-transform:uppercase;color:var(--ink);text-wrap:balance;
}
html[data-v="editorial"] .cs-ch__h em{font-weight:800;font-style:italic;letter-spacing:-.03em;color:var(--acc-display)}
html[data-v="editorial"] .cs-p{margin:0 0 1.1em;font:400 clamp(17px,1.25vw,19px)/1.65 var(--f-text);color:var(--ink-2);max-width:62ch;text-wrap:pretty}
html[data-v="editorial"] .cs-p strong{font-weight:600;color:var(--ink)}
html[data-v="editorial"] .cs-pull{
  margin:clamp(28px,4vh,44px) 0;padding:0 0 0 clamp(20px,2vw,28px);border-left:3px solid var(--acc-display);
  font:300 clamp(24px,2.3vw,36px)/1.25 var(--f-display);letter-spacing:-.01em;color:var(--ink);max-width:30ch;
}
html[data-v="editorial"] .cs-pull em{font-weight:800;font-style:italic;color:var(--acc-display)}

/* the build, in steps on a rising rail (the picker's rail, on its side) */
html[data-v="editorial"] .cs-steps{margin:clamp(26px,4vh,40px) 0 0;padding:0;list-style:none;counter-reset:st;display:grid;gap:14px}
html[data-v="editorial"] .cs-steps li{
  counter-increment:st;position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 20px;
  padding:clamp(20px,2vw,26px) clamp(20px,2.2vw,30px);background:#FBF9F5;border-radius:16px;
  box-shadow:0 0 0 1px rgba(14,20,32,.06),var(--card-shadow);
}
html[data-v="editorial"] .cs-steps li::before{
  content:counter(st,decimal-leading-zero);grid-row:1 / span 2;
  font:200 clamp(30px,2.6vw,40px)/1 var(--f-display);color:var(--acc-display);letter-spacing:-.02em;
}
html[data-v="editorial"] .cs-steps b{font:600 clamp(17px,1.3vw,19px)/1.3 var(--f-text);color:var(--ink)}
html[data-v="editorial"] .cs-steps span{font:400 16px/1.6 var(--f-text);color:var(--ink-2)}

/* the stack, as the homepage's pills */
html[data-v="editorial"] .cs-stack{display:flex;flex-wrap:wrap;gap:8px;margin:clamp(22px,3vh,30px) 0 0;padding:0;list-style:none}
html[data-v="editorial"] .cs-stack li{padding:8px 14px;border-radius:999px;background:rgba(14,20,32,.06);font:600 13px/1 var(--f-text);color:var(--ink-2)}

/* what's different: the usual way beside ours */
html[data-v="editorial"] .cs-vs{display:grid;gap:14px;margin:clamp(26px,4vh,40px) 0 0}
html[data-v="editorial"] .cs-vs__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px rgba(14,20,32,.06),var(--card-shadow)}
html[data-v="editorial"] .cs-vs__row > div{padding:clamp(18px,2vw,26px) clamp(20px,2.2vw,30px)}
html[data-v="editorial"] .cs-vs__usual{background:rgba(14,20,32,.035)}
html[data-v="editorial"] .cs-vs__ours{background:#FBF9F5}
html[data-v="editorial"] .cs-vs__row small{display:block;margin:0 0 8px;font:600 11px/1 var(--f-text);letter-spacing:.16em;text-transform:uppercase}
html[data-v="editorial"] .cs-vs__usual small{color:var(--ink-3)}
html[data-v="editorial"] .cs-vs__ours small{color:var(--acc-ink)}
html[data-v="editorial"] .cs-vs__row p{margin:0;font:400 16px/1.55 var(--f-text)}
html[data-v="editorial"] .cs-vs__usual p{color:var(--ink-3)}
html[data-v="editorial"] .cs-vs__ours p{color:var(--ink)}

/* the special touches: small white cards */
html[data-v="editorial"] .cs-touches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:clamp(26px,4vh,40px) 0 0;padding:0;list-style:none}
html[data-v="editorial"] .cs-touches li{
  position:relative;padding:clamp(22px,2.2vw,30px);background:#FBF9F5;border-radius:16px;
  box-shadow:0 0 0 1px rgba(14,20,32,.06),var(--card-shadow);
}
html[data-v="editorial"] .cs-touches li::before{content:"";display:block;width:28px;height:3px;border-radius:2px;background:var(--acc-display);margin:0 0 16px}
html[data-v="editorial"] .cs-touches b{display:block;margin:0 0 8px;font:600 clamp(17px,1.3vw,19px)/1.3 var(--f-text);color:var(--ink)}
html[data-v="editorial"] .cs-touches span{font:400 15px/1.6 var(--f-text);color:var(--ink-2)}

/* the colours a build was made in */
html[data-v="editorial"] .cs-swatches{display:flex;flex-wrap:wrap;gap:12px;margin:clamp(22px,3vh,30px) 0 0;padding:0;list-style:none}
html[data-v="editorial"] .cs-swatches li{display:flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:999px;background:#FBF9F5;box-shadow:0 0 0 1px rgba(14,20,32,.07)}
html[data-v="editorial"] .cs-swatches i{width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(14,20,32,.12)}
html[data-v="editorial"] .cs-swatches span{font:600 12px/1.2 var(--f-text);color:var(--ink-2)}
html[data-v="editorial"] .cs-swatches code{display:block;font:400 11px/1.2 ui-monospace,Menlo,Consolas,monospace;color:var(--ink-3)}

/* pictures inside a chapter */
html[data-v="editorial"] .cs-pics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);margin:clamp(30px,4.6vh,48px) 0 0}
html[data-v="editorial"] .cs-pics figure{margin:0}
html[data-v="editorial"] .cs-pics .cs-shot{aspect-ratio:4 / 3}
html[data-v="editorial"] .cs-pics--wide .cs-shot{aspect-ratio:16 / 10}
html[data-v="editorial"] .cs-pics .is-wide{grid-column:1 / -1}
html[data-v="editorial"] .cs-pics .is-wide .cs-shot{aspect-ratio:16 / 8}
html[data-v="editorial"] .cs-pics .is-tall .cs-shot{aspect-ratio:3 / 4}
html[data-v="editorial"] .cs-shot--contain img{object-fit:contain;padding:clamp(12px,2vw,28px)}
/* a clip of the real site moving: wide clips keep their own 16:10 frame */
html[data-v="editorial"] .cs-pics.cs-pics--wide .is-wide .cs-shot{aspect-ratio:16 / 10}
html[data-v="editorial"] .cs-shot--clip{background:#F4EFE8}
html[data-v="editorial"] .cs-pics figcaption.cs-cap{margin:12px 2px 0}
/* a slot waiting for its screenshot: the homepage's open card, dashed */
html[data-v="editorial"] .cs-shot--slot{
  display:grid;place-items:center;align-content:center;gap:10px;padding:24px;text-align:center;
  background:transparent;box-shadow:none;border:1.5px dashed rgba(94,72,50,.34);
}
html[data-v="editorial"] .cs-shot--slot b{font:600 12px/1.3 var(--f-text);letter-spacing:.16em;text-transform:uppercase;color:var(--acc-ink)}
html[data-v="editorial"] .cs-shot--slot span{font:400 15px/1.5 var(--f-text);color:var(--ink-3);max-width:30ch}

/* the end: the next story and the homepage's open card */
html[data-v="editorial"] .cs-end{padding:clamp(24px,4vh,40px) 0 var(--sec-pad)}
html[data-v="editorial"] .cs-end__grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(20px,2.6vw,38px)}
html[data-v="editorial"] .cs-next{flex-direction:row;min-height:clamp(240px,30vh,320px)}
html[data-v="editorial"] .cs-next .cl__pic{flex:0 0 46%;aspect-ratio:auto}
html[data-v="editorial"] .cs-next .cl__pic::after{display:none}
html[data-v="editorial"] .cs-next .cl__kind{color:var(--acc-ink)}

@media (max-width:1100px){
  html[data-v="editorial"] .cs-body{grid-template-columns:minmax(0,1fr)}
  html[data-v="editorial"] .cs-rail{display:none}
  html[data-v="editorial"] .cs-end__grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  html[data-v="editorial"] .wk-grid{grid-template-columns:minmax(0,1fr)}
  html[data-v="editorial"] .wk-grid .cl--next{flex-direction:column;align-items:flex-start}
  html[data-v="editorial"] .wk-grid .cl--next .cl__cta{margin-left:0}
  html[data-v="editorial"] .wk-head__row{grid-template-columns:minmax(0,1fr)}
  html[data-v="editorial"] .cs-hero__row{grid-template-columns:minmax(0,1fr)}
  html.js[data-v="editorial"] .wk-grid .cl.rv:nth-child(2){transition-delay:0s}
}
@media (max-width:640px){
  html[data-v="editorial"] .cs-cover{aspect-ratio:4 / 3}
  html[data-v="editorial"] .cs-touches,html[data-v="editorial"] .cs-pics{grid-template-columns:minmax(0,1fr)}
  html[data-v="editorial"] .cs-pics .is-wide .cs-shot{aspect-ratio:4 / 3}
  html[data-v="editorial"] .cs-vs__row{grid-template-columns:minmax(0,1fr)}
  html[data-v="editorial"] .cs-next{flex-direction:column}
  html[data-v="editorial"] .cs-next .cl__pic{flex:none;aspect-ratio:16 / 10}
  html[data-v="editorial"] .cl__foot{flex-direction:column;align-items:flex-start}
  html[data-v="editorial"] .cs-facts{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  html[data-v="editorial"] a.cl,html[data-v="editorial"] .cl__go i,html[data-v="editorial"] .wk-back svg{transition:none}
  html[data-v="editorial"] a.cl:hover{transform:none}
}

/* ---- the live window (2026-10-07, Karan: "instead of the big photos ... show a live website that a
   person can interact with, like an iframe"): the homepage's dashboard window, holding the client's real
   site. Until someone asks for it, it shows the picture with one button, so the page stays light and the
   scroll is never caught by the site inside. Desktop shows the site at a laptop's width, scaled to fit;
   Phone shows it at a phone's width in a rounded screen. With no address set (data-src empty) it is
   simply the picture ---- */
html[data-v="editorial"] .live{
  position:relative;margin:0;border-radius:var(--r-card,20px);overflow:hidden;background:#FBF9F5;
  box-shadow:0 0 0 1px rgba(14,20,32,.07),var(--card-shadow);
}
html[data-v="editorial"] .live__bar{
  display:flex;align-items:center;gap:8px;height:48px;padding:0 10px 0 16px;
  border-bottom:1px solid rgba(14,20,32,.08);background:#FBF9F5;
}
html[data-v="editorial"] .live__bar > i{flex:none;width:10px;height:10px;border-radius:50%;background:rgba(14,20,32,.12)}
html[data-v="editorial"] .live__url{
  flex:0 1 340px;min-width:0;margin:0 auto;padding:7px 14px;border-radius:999px;background:rgba(14,20,32,.05);
  font:400 13px/1 var(--f-text);color:var(--ink-3);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
html[data-v="editorial"] .live__url b{font-weight:600;color:var(--ink-2)}
html[data-v="editorial"] .live__tools{display:flex;align-items:center;gap:6px;flex:none}
html[data-v="editorial"] .live__modes{display:flex;padding:3px;border-radius:999px;background:rgba(14,20,32,.06)}
html[data-v="editorial"] .live__mode{
  min-height:32px;padding:0 12px;border:0;border-radius:999px;background:transparent;
  font:600 12px/1 var(--f-text);color:var(--ink-3);transition:background-color .3s var(--ease-out),color .3s var(--ease-out);
}
html[data-v="editorial"] .live__mode[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(14,20,32,.14)}
html[data-v="editorial"] .live__btn{
  display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 12px;border:0;border-radius:999px;background:transparent;
  font:600 12px/1 var(--f-text);color:var(--ink-2);text-decoration:none;
}
html[data-v="editorial"] .live__btn:hover{color:var(--ink);background:rgba(14,20,32,.05)}
html[data-v="editorial"] .live__btn svg{width:14px;height:14px}
html[data-v="editorial"] .live:not(.is-on) .live__modes,
html[data-v="editorial"] .live:not(.is-on) .live__close{display:none}
html[data-v="editorial"] .live:not([data-src]) .live__tools,
html[data-v="editorial"] .live[data-src=""] .live__tools{display:none}

html[data-v="editorial"] .live__screen{position:relative;aspect-ratio:16 / 9;overflow:hidden;background:#E4DDD2}
html[data-v="editorial"] .live__still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s var(--ease-out),transform 1.2s var(--ease-out)}
html[data-v="editorial"] .live.is-on .live__still{opacity:0;pointer-events:none}
html[data-v="editorial"] .live__go{
  position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:0 26px 0 12px;border:0;border-radius:999px;
  background:var(--v3-cta,#CA4A14);color:#fff;font:600 16px/1 var(--f-text);
  box-shadow:0 10px 30px -10px rgba(120,40,10,.6);transition:transform .5s var(--ease-out),background-color .3s var(--ease-out);
}
html[data-v="editorial"] .live__go i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.2)}
html[data-v="editorial"] .live__go svg{width:14px;height:14px}
html[data-v="editorial"] .live__go:hover{background:var(--v3-cta-hover,#B5410F);transform:translate(-50%,-50%) scale(1.04)}
html[data-v="editorial"] .live__go::before{
  content:"";position:absolute;inset:-6px;border-radius:inherit;border:2px solid rgba(202,74,20,.45);
  animation:livering 2.4s var(--ease-out) infinite;
}
@keyframes livering{0%{opacity:.9;transform:scale(.96)}70%,100%{opacity:0;transform:scale(1.12)}}
html[data-v="editorial"] .live.is-on .live__go,
html[data-v="editorial"] .live:not([data-src]) .live__go,
html[data-v="editorial"] .live[data-src=""] .live__go{display:none}
html[data-v="editorial"] .live__shade{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(14,20,32,0) 40%,rgba(14,20,32,.28));pointer-events:none}
html[data-v="editorial"] .live.is-on .live__shade,
html[data-v="editorial"] .live[data-src=""] .live__shade,
html[data-v="editorial"] .live:not([data-src]) .live__shade{display:none}

/* the site inside: drawn at its own width, then scaled to the window */
html[data-v="editorial"] .live__view{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .5s var(--ease-out)}
html[data-v="editorial"] .live.is-ready .live__view{opacity:1}
html[data-v="editorial"] .live__view iframe{position:absolute;left:0;top:0;border:0;background:#fff;transform-origin:0 0}
html[data-v="editorial"] .live[data-mode="phone"] .live__screen{background:radial-gradient(120% 90% at 50% 0%,#F1ECE4,#E2DACE)}
html[data-v="editorial"] .live[data-mode="phone"] .live__view iframe{border-radius:28px;box-shadow:0 0 0 10px #0E1420,0 30px 60px -20px rgba(14,20,32,.5)}
html[data-v="editorial"] .live__wait{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:600 12px/1 var(--f-text);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
}
html[data-v="editorial"] .live.is-ready .live__wait,html[data-v="editorial"] .live:not(.is-on) .live__wait{display:none}
html[data-v="editorial"] .live__note{margin:12px 0 0;font:400 14px/1.5 var(--f-text);color:var(--ink-3)}

@media (max-width:760px){
  html[data-v="editorial"] .live__screen{aspect-ratio:4 / 5}
  html[data-v="editorial"] .live__bar > i,html[data-v="editorial"] .live__url{display:none}
  html[data-v="editorial"] .live__bar{justify-content:flex-end;padding-left:10px}
  html[data-v="editorial"] .live__tools{width:100%;justify-content:flex-end}
  html[data-v="editorial"] .live.is-on .live__tools{justify-content:space-between}
  html[data-v="editorial"] .live__go{font-size:15px;padding-right:20px;white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
  html[data-v="editorial"] .live__go::before{animation:none;display:none}
  html[data-v="editorial"] .live__still,html[data-v="editorial"] .live__view{transition:none}
}