/* =========================================================
   PROJECT SECTIONS  —  themes and the blocks they draw
   =========================================================
   The body of a project built from sections lands inside
   .dt-custom, so everything main.css already says about a
   project page (type, rhythm, the dt- components) still
   holds. This file adds two things on top:

     1. tokens .pt sets and every block below reads, so a
        theme is a handful of values rather than a rewrite;
     2. the blocks that have no dt- component already — text,
        image, split, quote, stats, palette, video, and the ten
        that move: kinetic, marquee, sticky, device, carousel,
        mosaic, compare, timeline, accordion, banner.

   A theme changes the tokens, never the markup. Anything
   here has to work in both site themes and in both
   directions, so colour comes from the site's own custom
   properties and every offset is logical (inline-start,
   never left).
   ========================================================= */

.pt{
  /* voice */
  --pt-accent:var(--accent);
  --pt-head:var(--sans);
  --pt-body:var(--sans);
  --pt-kicker:var(--mono);

  /* type */
  --pt-h2:clamp(1.5rem,3.4vw,2.6rem);
  --pt-h3:clamp(1.2rem,2.4vw,1.9rem);
  --pt-head-weight:500;
  --pt-head-track:-.04em;
  --pt-head-lh:1.05;
  --pt-copy:15px;
  --pt-copy-lh:1.65;
  --pt-lead:clamp(1.15rem,2.4vw,1.9rem);
  --pt-measure:66ch;
  --pt-kicker-size:11px;
  --pt-kicker-track:.16em;
  --pt-kicker-case:uppercase;

  /* rhythm */
  --pt-rhythm:clamp(60px,11vh,140px);
  --pt-gap:clamp(14px,2.4vw,30px);
  --pt-radius:0px;

  font-family:var(--pt-body);
}

/* One rhythm for the whole page, set once: a section decides
   what it is, never how far it sits from its neighbour. */
.pt .pt-sec + .pt-sec{margin-top:var(--pt-rhythm);}
.pt .pt-sec--spacer + .pt-sec,
.pt .pt-sec + .pt-sec--spacer{margin-top:0;}

/* ---------- kicker ---------- */
.pt .sec-kicker{
  font-family:var(--pt-kicker);font-size:var(--pt-kicker-size);
  letter-spacing:var(--pt-kicker-track);text-transform:var(--pt-kicker-case);
  color:var(--pt-accent);display:flex;align-items:center;gap:10px;margin:0 0 14px;
}
.pt .sec-kicker i{display:block;width:26px;height:1px;background:currentColor;flex:none;}

/* ---------- lead ---------- */
.pt .dt-lead{
  font-family:var(--pt-head);
  font-size:var(--pt-lead);font-weight:var(--pt-head-weight);
  letter-spacing:var(--pt-head-track);line-height:1.28;color:var(--fg);
  max-width:24ch;max-width:min(24ch,100%);
}
.pt .pt-lead p + p{margin-top:.5em;}

/* ---------- text ---------- */
.pt .pt-text h2{
  font-family:var(--pt-head);font-size:var(--pt-h2);font-weight:var(--pt-head-weight);
  letter-spacing:var(--pt-head-track);line-height:var(--pt-head-lh);
  margin:0 0 clamp(14px,2vh,24px);color:var(--fg);max-width:20ch;
}
.pt .pt-text p{
  font-family:var(--pt-body);font-size:var(--pt-copy);line-height:var(--pt-copy-lh);
  color:var(--muted);max-width:var(--pt-measure);margin:0 0 1.15em;
}
.pt .pt-text p:last-child{margin-bottom:0;}
.pt .pt-text--wide h2{max-width:none;}
.pt .pt-text--wide p{max-width:none;column-count:1;}

/* ---------- button ---------- */
.pt .pt-cta__note{
  margin:14px 0 0;font-size:13px;color:var(--dim);max-width:52ch;
  font-family:var(--pt-body);
}

/* ---------- one image ---------- */
.pt .pt-image{margin:0;}
.pt .pt-image__frame{
  overflow:hidden;background:var(--bg-2);border-radius:var(--pt-radius);
}
.pt .pt-image__frame img,
.pt .pt-image__frame video,
.pt .pt-image__frame svg{width:100%;height:100%;object-fit:cover;display:block;}
.pt .pt-image--bleed{margin-inline:calc(var(--gut) * -1);}
.pt .pt-image--bleed .pt-image__frame{border-radius:0;}
.pt .pt-image--inset{max-width:min(760px,100%);margin-inline:auto;}
.pt .pt-image figcaption{
  margin:12px 0 0;font-family:var(--pt-kicker);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
}
.pt .pt-image--bleed figcaption{padding-inline:var(--gut);}

/* ---------- image + text ---------- */
.pt .pt-split{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center;
}
.pt .pt-split--end .pt-split__media{order:2;}
.pt .pt-split__media{
  overflow:hidden;background:var(--bg-2);border-radius:var(--pt-radius);aspect-ratio:4/3;
}
.pt .pt-split__media img,
.pt .pt-split__media video,
.pt .pt-split__media svg{width:100%;height:100%;object-fit:cover;display:block;}
.pt .pt-split__copy h3{
  font-family:var(--pt-head);font-size:var(--pt-h3);font-weight:var(--pt-head-weight);
  letter-spacing:var(--pt-head-track);line-height:1.12;margin:0 0 14px;color:var(--fg);
}
.pt .pt-split__copy p{
  font-size:var(--pt-copy);line-height:var(--pt-copy-lh);color:var(--muted);margin:0 0 1.1em;
}
.pt .pt-split__copy p:last-child{margin-bottom:0;}

/* ---------- quote ---------- */
.pt .pt-quote{
  margin:0;padding-inline-start:clamp(18px,3vw,34px);
  border-inline-start:2px solid var(--pt-accent);
}
.pt .pt-quote blockquote{
  margin:0;font-family:var(--pt-head);
  font-size:clamp(1.25rem,3vw,2.3rem);font-weight:var(--pt-head-weight);
  letter-spacing:var(--pt-head-track);line-height:1.22;color:var(--fg);max-width:22ch;
}
.pt .pt-quote figcaption{
  margin-top:clamp(14px,2vh,22px);display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;
  font-family:var(--pt-kicker);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}
.pt .pt-quote figcaption span{color:var(--fg);}
.pt .pt-quote figcaption em{font-style:normal;color:var(--dim);}

/* ---------- numbers ---------- */
.pt .pt-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(20px,3vw,44px);
}
.pt .pt-stat strong{
  display:block;font-family:var(--pt-head);
  font-size:clamp(2rem,5vw,4rem);font-weight:var(--pt-head-weight);
  letter-spacing:-.05em;line-height:1;color:var(--fg);
}
.pt .pt-stat span{
  display:block;margin-top:12px;font-size:13px;line-height:1.5;color:var(--muted);max-width:26ch;
}

/* ---------- palette ---------- */
.pt .pt-pal__row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--pt-gap);
}
.pt .pt-pal__chip{
  display:block;aspect-ratio:1/1;background:var(--c);border-radius:var(--pt-radius);
  border:1px solid var(--line-soft);
}
.pt .pt-pal__name{display:block;margin-top:12px;font-size:13px;color:var(--fg);}
.pt .pt-pal__hex{
  display:block;margin-top:3px;font-family:var(--mono);font-size:11px;
  letter-spacing:.08em;color:var(--dim);
}
.pt .pt-pal__note{margin:18px 0 0;font-size:13px;color:var(--dim);max-width:52ch;}

/* ---------- video loop ---------- */
.pt .pt-video{margin:0;}
.pt .pt-video video{
  width:100%;display:block;background:var(--bg-2);border-radius:var(--pt-radius);
}
.pt .pt-video figcaption{
  margin:12px 0 0;font-family:var(--pt-kicker);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
}

/* ---------- space ---------- */
.pt .pt-space{height:clamp(40px,7vh,90px);}
.pt .pt-space--s{height:clamp(20px,3vh,40px);}
.pt .pt-space--l{height:clamp(80px,14vh,190px);}
.pt .pt-space.is-ruled{
  height:0;border-top:1px solid var(--line);
  margin-block:clamp(40px,7vh,90px);
}

/* the gallery grid keeps main.css's own spacing between its
   figures, but the block itself is spaced by the rhythm above */
.pt .dt-visuals,
.pt .dt-process{margin-top:0;}
.pt .dt-facts{margin-top:0;}


/* =========================================================
   THE THEMES
   =========================================================
   Each one is the same page in a different voice. Only tokens
   change here — where a theme needs a rule of its own it is
   because the block itself is different in that voice (a
   ruled row, a filled quote), never because the markup is.
   ========================================================= */

/* ---------- Studio — the site's own voice ----------
   The base above is already Studio, so this holds nothing.
   It exists so the set reads as five, not four and a
   default. */

/* ---------- Editorial ---------- */
.pt[data-ptheme="editorial"]{
  --pt-head:Georgia,'Iowan Old Style','Times New Roman',serif;
  --pt-head-weight:400;
  --pt-head-track:-.02em;
  --pt-h2:clamp(1.7rem,3.8vw,3rem);
  --pt-h3:clamp(1.3rem,2.6vw,2.1rem);
  --pt-lead:clamp(1.25rem,2.6vw,2.05rem);
  --pt-copy:16.5px;
  --pt-copy-lh:1.75;
  --pt-measure:62ch;
  --pt-kicker:Georgia,'Times New Roman',serif;
  --pt-kicker-case:none;
  --pt-kicker-size:13px;
  --pt-kicker-track:.02em;
  --pt-rhythm:clamp(72px,14vh,170px);
}
.pt[data-ptheme="editorial"] .sec-kicker{font-style:italic;}
.pt[data-ptheme="editorial"] .dt-lead{max-width:32ch;line-height:1.34;}
.pt[data-ptheme="editorial"] .pt-text h2{max-width:24ch;}
/* a drop of the old page: the first paragraph after a heading
   carries the eye in, so it is set a size up */
.pt[data-ptheme="editorial"] .pt-text h2 + p{font-size:1.06em;color:var(--fg);}
.pt[data-ptheme="editorial"] .pt-quote{
  border-inline-start:0;padding-inline-start:0;text-align:center;
  max-width:34ch;margin-inline:auto;
}
.pt[data-ptheme="editorial"] .pt-quote blockquote{max-width:none;font-style:italic;}
.pt[data-ptheme="editorial"] .pt-quote figcaption{justify-content:center;}

/* ---------- Technical ---------- */
.pt[data-ptheme="mono"]{
  --pt-head:var(--mono);
  --pt-body:var(--sans);
  --pt-head-weight:500;
  --pt-head-track:-.01em;
  --pt-h2:clamp(1.15rem,2.2vw,1.7rem);
  --pt-h3:clamp(1rem,1.8vw,1.35rem);
  --pt-lead:clamp(1rem,1.9vw,1.4rem);
  --pt-copy:14px;
  --pt-copy-lh:1.7;
  --pt-kicker-size:10px;
  --pt-kicker-track:.2em;
  --pt-rhythm:clamp(44px,8vh,96px);
}
.pt[data-ptheme="mono"] .pt-sec + .pt-sec{
  border-top:1px solid var(--line-soft);padding-top:var(--pt-rhythm);
}
.pt[data-ptheme="mono"] .pt-sec--spacer + .pt-sec{border-top:0;}
.pt[data-ptheme="mono"] .dt-lead{max-width:46ch;line-height:1.5;color:var(--muted);}
.pt[data-ptheme="mono"] .dt-fact span,
.pt[data-ptheme="mono"] .pt-stat span{font-family:var(--mono);letter-spacing:.1em;}
.pt[data-ptheme="mono"] .pt-stat strong{
  font-size:clamp(1.6rem,3.4vw,2.6rem);letter-spacing:-.02em;
}
.pt[data-ptheme="mono"] .dt-step em{font-size:10px;letter-spacing:.2em;}

/* ---------- Bold ---------- */
.pt[data-ptheme="bold"]{
  --pt-head-weight:600;
  --pt-head-track:-.055em;
  --pt-head-lh:.94;
  --pt-h2:clamp(2.1rem,6.5vw,5.4rem);
  --pt-h3:clamp(1.5rem,3.4vw,2.6rem);
  --pt-lead:clamp(1.6rem,4.6vw,3.6rem);
  --pt-copy:16px;
  --pt-measure:58ch;
  --pt-kicker-track:.22em;
  --pt-rhythm:clamp(72px,13vh,160px);
  --pt-radius:0px;
}
.pt[data-ptheme="bold"] .dt-lead{max-width:16ch;line-height:1.02;}
.pt[data-ptheme="bold"] .pt-text h2{max-width:14ch;}
.pt[data-ptheme="bold"] .pt-stat strong{font-size:clamp(2.6rem,7vw,6rem);color:var(--pt-accent);}
.pt[data-ptheme="bold"] .pt-quote{
  border:0;padding:clamp(28px,5vw,64px);
  background:var(--pt-accent);color:var(--on-accent);
  margin-inline:calc(var(--gut) * -1);
}
.pt[data-ptheme="bold"] .pt-quote blockquote{color:var(--on-accent);max-width:18ch;}
.pt[data-ptheme="bold"] .pt-quote figcaption span,
.pt[data-ptheme="bold"] .pt-quote figcaption em{color:var(--on-accent);opacity:.78;}

/* ---------- Gallery ---------- */
.pt[data-ptheme="gallery"]{
  --pt-head-weight:400;
  --pt-head-track:-.03em;
  --pt-h2:clamp(1.3rem,2.6vw,2rem);
  --pt-lead:clamp(1.1rem,2.2vw,1.6rem);
  --pt-copy:14px;
  --pt-copy-lh:1.7;
  --pt-measure:56ch;
  --pt-kicker-size:10px;
  --pt-kicker-track:.2em;
  --pt-rhythm:clamp(30px,5vh,72px);
  --pt-gap:clamp(6px,1vw,12px);
}
.pt[data-ptheme="gallery"] .dt-visuals{gap:var(--pt-gap);}
.pt[data-ptheme="gallery"] .dt-lead{max-width:34ch;color:var(--muted);line-height:1.45;}
.pt[data-ptheme="gallery"] .pt-image--full{margin-inline:calc(var(--gut) * -1);}
.pt[data-ptheme="gallery"] .pt-sec--facts,
.pt[data-ptheme="gallery"] .pt-sec--cta,
.pt[data-ptheme="gallery"] .pt-sec--lead,
.pt[data-ptheme="gallery"] .pt-sec--text{margin-block:clamp(50px,9vh,120px);}


/* =========================================================
   THE ONES THAT MOVE
   =========================================================
   A project page cannot run a script, so every movement here
   is CSS, and all of it obeys the same two rules.

   A block rests in its finished state. `is-in` — added by the
   site when the reader arrives — is what replays the movement,
   so a page that never receives the class still shows the whole
   thing, standing still. Nothing is hidden by an animation that
   might not run.

   Order is a custom property. `--i` on a child is what staggers
   it, which is why a list of nine needs one rule and not nine.

   Which is also why every animation here fills `backwards` and
   never `both`: backwards holds the offset through the delay
   and then hands the property back to the base rule, so a block
   whose animation never runs — or never finishes, in a tab
   nobody is looking at — is simply the finished block.
   ========================================================= */

@keyframes pt-rise  { from { opacity:0; transform:translateY(.5em) } to { opacity:1; transform:none } }
@keyframes pt-lift  { from { opacity:0; transform:translateY(34px) scale(.985) } to { opacity:1; transform:none } }
@keyframes pt-fade  { from { opacity:0; transform:translateY(14px) } to { opacity:1; transform:none } }
@keyframes pt-draw  { from { transform:scaleY(0) } to { transform:scaleY(1) } }
@keyframes pt-wipe  { from { clip-path:inset(0 0 0 100%) } to { clip-path:inset(0 0 0 0) } }
@keyframes pt-mq    { to   { transform:translateX(-50%) } }
@keyframes pt-shot  { from { object-position:50% 0% } to { object-position:50% 100% } }
@keyframes pt-open  { from { opacity:0; transform:translateY(-6px) } to { opacity:1; transform:none } }

/* ---------- kinetic statement ---------- */
.pt .pt-kin{
  margin:0;font-family:var(--pt-head);font-weight:var(--pt-head-weight);
  letter-spacing:var(--pt-head-track);line-height:.98;color:var(--fg);
}
.pt .pt-kin--huge{font-size:clamp(2.1rem,8vw,7rem);}
.pt .pt-kin--large{font-size:clamp(1.7rem,5.4vw,4.4rem);}
.pt .pt-kin--medium{font-size:clamp(1.35rem,3.6vw,2.8rem);}
.pt .pt-kin--center{text-align:center;}
.pt .pt-kin__w{display:inline-block;}
.pt .pt-kin__w.is-hot{color:var(--pt-accent);}
.pt .pt-kin.is-in .pt-kin__w{
  animation:pt-rise .9s var(--e-out,cubic-bezier(.16,1,.3,1)) backwards;
  animation-delay:calc(var(--i,0) * 55ms);
}

/* ---------- marquee ---------- */
.pt .pt-mq{
  margin-inline:calc(var(--gut) * -1);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.pt .pt-mq__track{display:flex;width:max-content;animation:pt-mq var(--dur,28s) linear infinite;}
.pt .pt-mq__run{display:flex;flex:none;}
.pt .pt-mq:hover .pt-mq__track{animation-play-state:paused;}
.pt .pt-mq--rev .pt-mq__track,
[dir="rtl"] .pt .pt-mq__track{animation-direction:reverse;}
[dir="rtl"] .pt .pt-mq--rev .pt-mq__track{animation-direction:normal;}
.pt .pt-mq__w{
  display:inline-flex;align-items:center;gap:.42em;padding-inline-end:.42em;white-space:nowrap;
  font-family:var(--pt-head);font-weight:var(--pt-head-weight);letter-spacing:var(--pt-head-track);
  color:var(--fg);
}
.pt .pt-mq__w i{font-style:normal;color:var(--pt-accent);font-size:.6em;}
.pt .pt-mq--slow{--dur:46s;}
.pt .pt-mq--medium{--dur:28s;}
.pt .pt-mq--fast{--dur:15s;}
.pt .pt-mq--small{font-size:clamp(.95rem,2vw,1.5rem);}
.pt .pt-mq--large{font-size:clamp(1.5rem,4vw,3.2rem);}
.pt .pt-mq--huge{font-size:clamp(2.2rem,7vw,6rem);}
.pt .pt-mq--outline .pt-mq__w{
  color:transparent;-webkit-text-stroke:1px var(--fg);
}

/* ---------- sticky text + visuals ---------- */
.pt .pt-stick{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(24px,4vw,64px);align-items:start;
}
.pt .pt-stick--end .pt-stick__copy{order:2;}
/* the sticky element may not sit under a transform, which is why the
   reveal is on the figures in the other column and never on this one */
.pt .pt-stick__inner{position:sticky;top:clamp(30px,11vh,110px);}
.pt .pt-stick__inner h3{
  font-family:var(--pt-head);font-size:var(--pt-h3);font-weight:var(--pt-head-weight);
  letter-spacing:var(--pt-head-track);line-height:1.12;margin:0 0 14px;color:var(--fg);
}
.pt .pt-stick__inner p{
  font-size:var(--pt-copy);line-height:var(--pt-copy-lh);color:var(--muted);
  margin:0 0 1.1em;max-width:46ch;
}
.pt .pt-stick__col{display:flex;flex-direction:column;gap:clamp(14px,2.4vw,30px);}
.pt .pt-stick__fig{margin:0;overflow:hidden;background:var(--bg-2);border-radius:var(--pt-radius);}
.pt .pt-stick__fig img,
.pt .pt-stick__fig video,
.pt .pt-stick__fig svg{width:100%;height:auto;display:block;}
.pt .pt-stick__fig figcaption{
  padding:10px 2px 0;font-family:var(--pt-kicker);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
}

/* ---------- device ---------- */
.pt .pt-dev{margin:0;display:grid;justify-items:center;}
.pt .pt-dev--on-plate{background:var(--bg-2);padding:clamp(26px,6vw,80px) clamp(18px,4vw,60px);}
.pt .pt-dev--on-accent{background:var(--pt-accent);padding:clamp(26px,6vw,80px) clamp(18px,4vw,60px);}
.pt .pt-dev--on-plate,
.pt .pt-dev--on-accent{margin-inline:calc(var(--gut) * -1);}
.pt .pt-dev__body{position:relative;margin-inline:auto;overflow:hidden;background:var(--fg);}
.pt .pt-dev--phone .pt-dev__body{
  width:min(290px,72%);aspect-ratio:9/19;border:9px solid var(--fg);border-radius:36px;
}
.pt .pt-dev--laptop .pt-dev__body{
  width:min(860px,100%);aspect-ratio:16/10;border:11px solid var(--fg);border-bottom-width:18px;border-radius:12px;
}
.pt .pt-dev--browser .pt-dev__body{
  width:min(920px,100%);aspect-ratio:16/10;border:1px solid var(--line);border-radius:12px;background:var(--bg);
}
.pt .pt-dev__bar{
  display:flex;align-items:center;gap:6px;height:30px;padding-inline:12px;
  background:var(--bg-2);border-bottom:1px solid var(--line);
}
.pt .pt-dev__bar i{width:9px;height:9px;border-radius:50%;background:var(--line);}
.pt .pt-dev__win{position:relative;height:100%;overflow:hidden;background:var(--bg);border-radius:inherit;}
.pt .pt-dev--browser .pt-dev__win{height:calc(100% - 30px);border-radius:0;}
.pt .pt-dev__win img,
.pt .pt-dev__win video,
.pt .pt-dev__win svg{width:100%;height:100%;object-fit:cover;object-position:50% 0%;display:block;}
/* the screen travels the length of the capture and back — object-position
   rather than a transform, so nothing has to know how tall the file is */
.pt .pt-dev--slow .pt-dev__win img{animation:pt-shot 30s ease-in-out infinite alternate;}
.pt .pt-dev--medium .pt-dev__win img{animation:pt-shot 18s ease-in-out infinite alternate;}
.pt .pt-dev--fast .pt-dev__win img{animation:pt-shot 10s ease-in-out infinite alternate;}
.pt .pt-dev figcaption{
  margin:14px 0 0;font-family:var(--pt-kicker);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
}
.pt .pt-dev--on-accent figcaption{color:var(--on-accent);opacity:.8;}

/* ---------- carousel ---------- */
.pt .pt-car--bleed{margin-inline:calc(var(--gut) * -1);}
.pt .pt-car__track{
  display:flex;gap:var(--pt-gap);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-block:2px;scrollbar-width:none;-ms-overflow-style:none;
}
.pt .pt-car--bleed .pt-car__track{padding-inline:var(--gut);}
.pt .pt-car__track::-webkit-scrollbar{display:none;}
.pt .pt-car__cell{
  flex:none;margin:0;width:min(72%,420px);scroll-snap-align:center;
  background:var(--bg-2);overflow:hidden;border-radius:var(--pt-radius);
  transition:transform .5s var(--e-out,cubic-bezier(.16,1,.3,1));
}
.pt .pt-car--wide .pt-car__cell{width:min(86%,760px);}
.pt .pt-car__cell:hover{transform:translateY(-6px);}
.pt .pt-car__cell img,
.pt .pt-car__cell video,
.pt .pt-car__cell svg{width:100%;height:100%;object-fit:cover;display:block;}
.pt .pt-car--portrait .pt-car__cell img,
.pt .pt-car--portrait .pt-car__cell video,
.pt .pt-car--portrait .pt-car__cell svg{aspect-ratio:4/5;}
.pt .pt-car--square .pt-car__cell img,
.pt .pt-car--square .pt-car__cell video,
.pt .pt-car--square .pt-car__cell svg{aspect-ratio:1/1;}
.pt .pt-car--wide .pt-car__cell img,
.pt .pt-car--wide .pt-car__cell video,
.pt .pt-car--wide .pt-car__cell svg{aspect-ratio:16/9;}
.pt .pt-car__cell figcaption{
  padding:10px 12px 12px;font-family:var(--pt-kicker);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--dim);background:var(--bg);
}

/* ---------- mosaic ---------- */
.pt .pt-mos{
  display:grid;grid-template-columns:repeat(6,1fr);gap:var(--pt-gap);align-items:start;
}
.pt .pt-mos__cell{
  margin:0;overflow:hidden;background:var(--bg-2);border-radius:var(--pt-radius);
}
.pt .pt-mos__cell--s{grid-column:span 2;aspect-ratio:1/1;}
.pt .pt-mos__cell--m{grid-column:span 3;aspect-ratio:4/3;}
.pt .pt-mos__cell--l{grid-column:span 4;aspect-ratio:3/2;}
.pt .pt-mos__cell--xl{grid-column:span 6;aspect-ratio:16/9;}
.pt .pt-mos__cell:nth-child(even){margin-top:clamp(8px,3vw,42px);}
.pt .pt-mos__cell img,
.pt .pt-mos__cell video,
.pt .pt-mos__cell svg{width:100%;height:100%;object-fit:cover;display:block;}
.pt .pt-mos__cell figcaption{
  position:absolute;inset-inline-start:12px;bottom:10px;
  font-family:var(--pt-kicker);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg);background:var(--bg);padding:4px 8px;
}
.pt .pt-mos__cell{position:relative;}
.pt .pt-mos__cell.is-in{
  animation:pt-lift .95s var(--e-out,cubic-bezier(.16,1,.3,1)) backwards;
  animation-delay:calc(var(--i,0) * 80ms);
}
/* Scroll-linked drift, where the browser can do it without a script. The
   image is taller than its frame and travels inside it as the frame crosses
   the viewport; everywhere else it simply sits still. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .pt .pt-mos.is-drifting .pt-mos__cell img{
      height:116%;
      animation:pt-par linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }
    @keyframes pt-par{ from{ transform:translateY(-7%) } to{ transform:translateY(0) } }
  }
}

/* ---------- before / after ---------- */
.pt .pt-cmp{margin:0;}
.pt .pt-cmp__frame{
  position:relative;aspect-ratio:var(--ratio,16/9);overflow:hidden;
  background:var(--bg-2);border-radius:var(--pt-radius);
}
.pt .pt-cmp__side{position:absolute;inset:0;}
.pt .pt-cmp__side img,
.pt .pt-cmp__side video,
.pt .pt-cmp__side svg{width:100%;height:100%;object-fit:cover;display:block;}
/* the after sits over the before, whole. The pointer takes it back, and
   arriving replays the wipe — with no fill, so the transition still owns
   the property once the animation is done. */
.pt .pt-cmp__side--after{clip-path:inset(0 0 0 0);transition:clip-path .8s var(--e-inout,cubic-bezier(.76,0,.24,1));}
.pt .pt-cmp:hover .pt-cmp__side--after{clip-path:inset(0 0 0 100%);}
.pt .pt-cmp.is-in .pt-cmp__side--after{animation:pt-wipe 1.1s var(--e-inout,cubic-bezier(.76,0,.24,1));}
.pt .pt-cmp__tag{
  position:absolute;inset-block-start:12px;inset-inline-start:12px;
  font-family:var(--pt-kicker);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  background:var(--bg);color:var(--fg);padding:5px 9px;
}
.pt .pt-cmp__side--after .pt-cmp__tag{inset-inline-start:auto;inset-inline-end:12px;}
.pt .pt-cmp figcaption{
  margin:12px 0 0;font-family:var(--pt-kicker);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
}

/* ---------- timeline ---------- */
.pt .pt-time{--rail:clamp(20px,4vw,44px);}
.pt .pt-time__rail{position:relative;padding-inline-start:var(--rail);}
.pt .pt-time__rail::before{
  content:'';position:absolute;inset-block:4px;inset-inline-start:0;width:1px;
  background:var(--line);transform-origin:top;
}
.pt .pt-time__rail.is-in::before{animation:pt-draw 1.2s var(--e-out,cubic-bezier(.16,1,.3,1)) backwards;}
.pt .pt-time__row{
  position:relative;display:grid;grid-template-columns:minmax(80px,150px) 1fr;
  gap:clamp(12px,2.4vw,32px);padding-block:clamp(14px,2.4vh,26px);
  border-top:1px solid var(--line-soft);
}
.pt .pt-time__row:first-child{border-top:0;}
.pt .pt-time__rail.is-in .pt-time__row{
  animation:pt-fade .8s var(--e-out,cubic-bezier(.16,1,.3,1)) backwards;
  animation-delay:calc(180ms + var(--i,0) * 90ms);
}
.pt .pt-time__dot{
  position:absolute;inset-inline-start:calc(var(--rail) * -1);
  top:calc(clamp(14px,2.4vh,26px) + .45em);
  width:7px;height:7px;border-radius:50%;background:var(--pt-accent);
  transform:translateX(-3px);
}
[dir="rtl"] .pt .pt-time__dot{transform:translateX(3px);}
.pt .pt-time__when{
  font-family:var(--pt-kicker);font-size:11px;letter-spacing:.14em;
  text-transform:var(--pt-kicker-case);color:var(--dim);padding-top:.35em;
}
.pt .pt-time__what h4{
  margin:0 0 6px;font-family:var(--pt-head);font-size:clamp(1.05rem,1.9vw,1.4rem);
  font-weight:var(--pt-head-weight);letter-spacing:var(--pt-head-track);color:var(--fg);
}
.pt .pt-time__what p{margin:0 0 .8em;font-size:var(--pt-copy);line-height:var(--pt-copy-lh);color:var(--muted);max-width:58ch;}
.pt .pt-time__what p:last-child{margin-bottom:0;}

/* ---------- accordion ---------- */
.pt .pt-acc__row{border-top:1px solid var(--line-soft);}
.pt .pt-acc__row:last-child{border-bottom:1px solid var(--line-soft);}
.pt .pt-acc__row summary{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:clamp(13px,2.2vh,22px) 0;cursor:pointer;list-style:none;
  font-family:var(--pt-head);font-size:clamp(1rem,1.9vw,1.35rem);
  font-weight:var(--pt-head-weight);letter-spacing:var(--pt-head-track);color:var(--fg);
}
.pt .pt-acc__row summary::-webkit-details-marker{display:none;}
.pt .pt-acc__row summary:hover{color:var(--pt-accent);}
.pt .pt-acc__row summary i{position:relative;width:13px;height:13px;flex:none;}
.pt .pt-acc__row summary i::before,
.pt .pt-acc__row summary i::after{
  content:'';position:absolute;inset-block-start:6px;inset-inline-start:0;
  width:13px;height:1px;background:var(--pt-accent);transition:transform .35s var(--e-out,cubic-bezier(.16,1,.3,1));
}
.pt .pt-acc__row summary i::after{transform:rotate(90deg);}
.pt .pt-acc__row[open] summary i::after{transform:rotate(0);}
.pt .pt-acc__body{padding-bottom:clamp(12px,2vh,22px);}
.pt .pt-acc__row[open] .pt-acc__body{animation:pt-open .5s var(--e-out,cubic-bezier(.16,1,.3,1));}
.pt .pt-acc__body p{
  margin:0 0 .9em;font-size:var(--pt-copy);line-height:var(--pt-copy-lh);
  color:var(--muted);max-width:var(--pt-measure);
}
.pt .pt-acc__body p:last-child{margin-bottom:0;}

/* ---------- banner ---------- */
.pt .pt-ban{
  margin-inline:calc(var(--gut) * -1);
  padding:clamp(38px,8vw,110px) var(--gut);overflow:hidden;
}
.pt .pt-ban--accent{background:var(--pt-accent);color:var(--on-accent);}
.pt .pt-ban--ink{background:var(--fg);color:var(--bg);}
.pt .pt-ban--quiet{background:var(--bg-2);color:var(--fg);}
.pt .pt-ban--center{text-align:center;}
.pt .pt-ban__text{
  margin:0;max-width:20ch;color:inherit;
  font-family:var(--pt-head);font-size:clamp(1.5rem,5vw,4rem);
  font-weight:var(--pt-head-weight);letter-spacing:var(--pt-head-track);line-height:1.03;
}
.pt .pt-ban--center .pt-ban__text{margin-inline:auto;}
.pt .pt-ban.is-in .pt-ban__text{animation:pt-rise 1s var(--e-out,cubic-bezier(.16,1,.3,1)) backwards;}
.pt .pt-ban__note{margin:16px 0 0;font-size:13px;line-height:1.6;color:inherit;opacity:.72;max-width:52ch;}
.pt .pt-ban--center .pt-ban__note{margin-inline:auto;}

/* =========================================================
   WHAT THE THEMES DO TO THEM
   ========================================================= */
.pt[data-ptheme="editorial"] .pt-kin,
.pt[data-ptheme="editorial"] .pt-ban__text{line-height:1.1;}
.pt[data-ptheme="editorial"] .pt-mq__w{font-style:italic;}
.pt[data-ptheme="mono"] .pt-mq__w,
.pt[data-ptheme="mono"] .pt-kin{text-transform:uppercase;letter-spacing:.02em;}
.pt[data-ptheme="mono"] .pt-acc__row summary{font-size:clamp(.95rem,1.5vw,1.15rem);}
.pt[data-ptheme="bold"] .pt-mos__cell,
.pt[data-ptheme="bold"] .pt-car__cell{border-radius:0;}
.pt[data-ptheme="gallery"] .pt-mos{gap:var(--pt-gap);}
.pt[data-ptheme="gallery"] .pt-ban--accent{background:var(--fg);color:var(--bg);}

/* =========================================================
   NARROW
   ========================================================= */
@media (max-width:820px){
  .pt .pt-stick{grid-template-columns:1fr;}
  .pt .pt-stick--end .pt-stick__copy{order:0;}
  .pt .pt-stick__inner{position:static;}
  .pt .pt-mos{grid-template-columns:repeat(4,1fr);}
  .pt .pt-mos__cell--s{grid-column:span 2;}
  .pt .pt-mos__cell--m,
  .pt .pt-mos__cell--l,
  .pt .pt-mos__cell--xl{grid-column:span 4;}
  .pt .pt-mos__cell:nth-child(even){margin-top:0;}
  .pt .pt-time__row{grid-template-columns:1fr;gap:6px;}
  .pt .pt-car__cell{width:min(82%,340px);}
  .pt .pt-dev--phone .pt-dev__body{width:min(240px,68%);}
}

/* =========================================================
   LESS MOTION
   The reader asked for the content, not the choreography:
   everything below rests where it would have ended.
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .pt .pt-mq__track,
  .pt .pt-dev__win img,
  .pt .pt-kin.is-in .pt-kin__w,
  .pt .pt-mos__cell.is-in,
  .pt .pt-time__rail.is-in::before,
  .pt .pt-time__rail.is-in .pt-time__row,
  .pt .pt-cmp.is-in .pt-cmp__side--after,
  .pt .pt-ban.is-in .pt-ban__text,
  .pt .pt-acc__row[open] .pt-acc__body{animation:none !important;}
  .pt .pt-mq__track{transform:none !important;}
  .pt .pt-car__track{scroll-behavior:auto;}
}

/* =========================================================
   NARROW
   ========================================================= */
@media (max-width:820px){
  .pt .pt-split{grid-template-columns:1fr;}
  .pt .pt-split--end .pt-split__media{order:0;}
  .pt .pt-stats{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));}
  .pt[data-ptheme="bold"]{--pt-lead:clamp(1.5rem,8vw,2.6rem);}
}