/* v5 · C · Proof · round 4 · front B (sections 02 manifesto, 07 show-first, 08 me). Mobile first: 390, then 768 / 1000.
   Own classes only (mf4, show4/bento/bt, me4, st4, tp4) so page.js's generic collage physics never touches these pieces.
   Modes: .b4 is set by js/r4-mid.js; pre-states live under .b4.motion. Without JS / reduced / ?static = final state. */

/* ─────────────── shared: stamp (copy of the .stamp look), tape, drift ─────────────── */
.st4 { position: relative; z-index: 4; display: inline-block; flex: none; width: var(--ss, 110px); aspect-ratio: 1; rotate: var(--r, 0deg); color: var(--film); mix-blend-mode: multiply; }
.st4 svg { display: block; width: 100%; height: 100%; overflow: visible; }
.st4__o { fill: none; stroke: currentColor; stroke-width: 4.5; }
.st4__i { fill: none; stroke: currentColor; stroke-width: 2; }
.st4__ring { fill: currentColor; font: 400 15px var(--f-mono); letter-spacing: .04em; }
.st4__c { fill: currentColor; font-family: var(--f-sans); font-weight: 600; letter-spacing: -.04em; }
.st4__ast { fill: none; stroke: currentColor; stroke-width: 2.6px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.st4--marker { color: var(--marker); mix-blend-mode: normal; }
.st4--paper { color: var(--paper); mix-blend-mode: normal; }
.tp4 { position: absolute; z-index: 7; width: var(--tw, 96px); height: auto; pointer-events: none; rotate: var(--r, -5deg); filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--film) 16%, transparent)); }

@keyframes b4drift {
  0% { translate: 0 0; }
  33% { translate: var(--dxa, 1.6px) var(--dya, -2.4px); }
  66% { translate: calc(var(--dxa, 1.6px) * -.7) var(--dyb, 1.8px); }
  100% { translate: 0 0; }
}
.b4.motion-ready .is-live [data-b4-drift] { animation: b4drift var(--dd, 7s) ease-in-out var(--ddl, 0s) infinite; }

/* ═════════════════════ 02 · manifesto ═════════════════════ */
.mf4 { position: relative; max-width: 17.4em; font-size: clamp(30px, 7.9vw, 78px); line-height: 1.13; letter-spacing: -.042em; font-weight: 500; color: var(--film); text-wrap: pretty; }
.mf4__v { display: block; text-indent: .9em; }
.mf4__v .focus { font-weight: 400; letter-spacing: -.02em; }
.mf4__k { white-space: nowrap; }
.mf4__w { display: inline-block; white-space: nowrap; text-indent: 0; }
.mf4__c { display: inline-block; }
.mf4__u { position: relative; white-space: nowrap; }
.mf4__line { position: absolute; left: -2%; bottom: -.13em; width: 104%; height: .3em; overflow: visible; pointer-events: none; }
.mf4__line path { fill: none; stroke: var(--marker); stroke-width: 3.2px; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: url(#wax-l); }

/* the pictograms: small prints of paper, each at its own angle, drawn in ink with one marker accent */
.mf4__ic { position: relative; display: inline-block; width: 1.14em; height: 1.14em; margin: 0 .05em 0 .02em; vertical-align: -.22em; text-indent: 0;
  border-radius: .24em; background: linear-gradient(165deg, var(--print), color-mix(in srgb, var(--print) 82%, var(--silver)));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--film) 14%, transparent), 0 .12em .22em -.08em color-mix(in srgb, var(--film) 45%, transparent);
  rotate: var(--ir, 0deg); transform-origin: 50% 70%; }
.mf4__ic svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mf4__ic .ic-ink { fill: none; stroke: var(--film); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mf4__ic .ic-thin { stroke-width: 1.1; }
.mf4__ic .ic-mk { fill: var(--marker); }
.mf4__ic .ic-line { fill: none; stroke: var(--marker); stroke-width: 1.9; stroke-linecap: round; }
.mf4__ic .ic-fr { fill: color-mix(in srgb, var(--frost) 62%, var(--print)); }
.mf4__ic .ic-dot { fill: var(--film); }
.mf4__ic .ic-glint { fill: var(--print); }
.mf4__ic .ic-mkf { fill: var(--marker); }
.mf4__ic .ic-tap { fill: none; stroke: var(--marker); stroke-width: 1.3; opacity: 0; }
.mf4__ic .ic-scroll, .mf4__ic .ic-tap, .mf4__ic .ic-card, .mf4__ic .ic-lid, .mf4__ic .ic-look, .mf4__ic .ic-hand, .mf4__ic .ic-drop { transform-box: fill-box; transform-origin: 50% 50%; }
.mf4__ic .ic-lid { transform-origin: 50% 50%; }
.mf4__ic .ic-drop { transform-origin: 50% 0; }
.mf4__ic .ic-write { stroke-dasharray: 1; stroke-dashoffset: 0; }

/* each pictogram keeps living once it has popped in (only while the section is on screen) */
@keyframes ic-scroll { 0%, 18% { transform: translateY(0); } 42%, 58% { transform: translateY(-13px); } 80%, 92% { transform: translateY(-26px); } 100% { transform: translateY(0); } }
@keyframes ic-tap { 0%, 54% { opacity: 0; transform: scale(.3); } 62% { opacity: .95; transform: scale(1); } 84%, 100% { opacity: 0; transform: scale(2.3); } }
@keyframes ic-card { 0%, 50% { transform: translateY(0) rotate(0); } 58% { transform: translateY(.9px) rotate(-1.4deg); } 70%, 100% { transform: translateY(0) rotate(0); } }
@keyframes ic-blink { 0%, 44%, 52%, 90%, 95%, 100% { transform: scaleY(1); } 48%, 92.5% { transform: scaleY(.08); } }
@keyframes ic-look { 0%, 20% { transform: translate(0, 0); } 30%, 55% { transform: translate(2.6px, -.6px); } 65%, 86% { transform: translate(-2.4px, .5px); } 100% { transform: translate(0, 0); } }
@keyframes ic-write { 0% { stroke-dashoffset: 1; } 55%, 72% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
@keyframes ic-hand { 0% { transform: translate(-19.6px, 1px) rotate(-4deg); } 12% { transform: translate(-15px, -1.4px) rotate(2deg); } 24% { transform: translate(-11px, 1.2px) rotate(-3deg); } 36% { transform: translate(-6.6px, -1.2px) rotate(3deg); } 48% { transform: translate(-2.2px, 1px) rotate(-2deg); } 55%, 72% { transform: translate(0, 0) rotate(0); } 86% { transform: translate(3px, -4px) rotate(8deg); } 100% { transform: translate(-19.6px, 1px) rotate(-4deg); } }
@keyframes ic-drop { 0% { transform: translateY(-3px) scale(.2, .2); opacity: 0; } 12% { transform: translateY(0) scale(1, 1); opacity: 1; } 40% { transform: translateY(0) scale(.92, 1.1); opacity: 1; } 64% { transform: translateY(9px) scale(.86, 1.22); opacity: 1; } 72% { transform: translateY(10.6px) scale(1.5, .35); opacity: .7; } 80%, 100% { transform: translateY(10.6px) scale(1.9, .1); opacity: 0; } }
.b4.motion-ready .mf4__ic.is-on .ic-scroll { animation: ic-scroll 4.6s cubic-bezier(.16, 1, .3, 1) infinite; }
.b4.motion-ready .mf4__ic.is-on .ic-tap { animation: ic-tap 3.1s ease-out infinite; }
.b4.motion-ready .mf4__ic.is-on .ic-card { animation: ic-card 3.1s cubic-bezier(.34, 1.56, .64, 1) infinite; }
.b4.motion-ready .mf4__ic.is-on .ic-lid { animation: ic-blink 4.3s linear infinite; }
.b4.motion-ready .mf4__ic.is-on .ic-look { animation: ic-look 5.7s cubic-bezier(.45, 0, .2, 1) infinite; }
.b4.motion-ready .mf4__ic.is-on .ic-write { animation: ic-write 3.4s cubic-bezier(.5, 0, .3, 1) infinite; }
.b4.motion-ready .mf4__ic.is-on .ic-hand { animation: ic-hand 3.4s cubic-bezier(.5, 0, .3, 1) infinite; }
.b4.motion-ready .mf4__ic.is-on .ic-drop--1 { animation: ic-drop 2.6s cubic-bezier(.55, 0, .75, .3) infinite; }
.b4.motion-ready .mf4__ic.is-on .ic-drop--2 { animation: ic-drop 2.6s cubic-bezier(.55, 0, .75, .3) .45s infinite; }
.b4.motion-ready .mf4__ic.is-on .ic-drop--3 { animation: ic-drop 2.6s cubic-bezier(.55, 0, .75, .3) .95s infinite; }
.manifesto:not(.is-live) .mf4__ic * { animation-play-state: paused !important; }

/* pre-state: the letters wait faint; the pictograms wait small (the script takes it from here) */
.b4.motion .mf4__v { color: color-mix(in srgb, var(--film) 14%, var(--paper)); }
.b4.motion .mf4__ic { opacity: 0; transform: scale(.3); }
.b4.motion .mf4__line path { opacity: 0; }

/* ═════════════════════ 07 · show-first: the darkroom wall ═════════════════════ */
.show4 { padding: 80px var(--gutter) 92px; }
.show4__head { position: relative; z-index: 3; }
.show4__h { margin-top: 22px; font-size: clamp(44px, 12.2vw, 132px); line-height: .9; letter-spacing: -.058em; font-weight: 500; color: var(--paper); text-wrap: balance; }
.show4__a, .show4__b { display: block; }
.show4__b { padding-left: .72em; }
.show4__text { margin-top: 22px; max-width: 30em; font-size: 17px; line-height: 1.5; color: color-mix(in srgb, var(--paper) 80%, var(--film)); }

.show4__stage { position: relative; z-index: 2; margin-top: 44px; perspective: 1150px; perspective-origin: 50% 35%; }
.bento { --gap: 12px; --ru: 62px; position: relative; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: var(--ru); gap: var(--gap);
  grid-template-areas: "prep black" "prep black" "prep black" "prep black" "prep black" "note clock" "note clock" "note clock" "guel guel" "guel guel" "guel guel" "inv uk" "inv uk" "inv uk" "otr otr" "otr otr" "otr otr" "otr otr";
  transform-style: preserve-3d; transform-origin: 50% 40%; }
.bt { position: relative; min-width: 0; min-height: 0; transform-style: preserve-3d; }
.bt--prep { grid-area: prep; } .bt--otr { grid-area: otr; } .bt--note { grid-area: note; } .bt--guel { grid-area: guel; } .bt--black { grid-area: black; }
.bt--clock { grid-area: clock; } .bt--inv { grid-area: inv; } .bt--uk { grid-area: uk; } .bt--pen { grid-area: pen; display: none; } .bt--imp { grid-area: imp; display: none; }
.bt__in { position: relative; height: 100%; transform-origin: 50% 60%; }
/* the print's shadow is a plain box behind it (no filters: the wall moves in 3D every frame) */
/* deeper prints throw a longer shadow on the wall */
.bt::before { content: ""; position: absolute; inset: 6% 4% 0; z-index: -1; border-radius: 4px; background: #000; opacity: .5; transform: translateY(calc(6px + var(--z, 20) * .2px)) scale(.96); box-shadow: 0 calc(10px + var(--z, 20) * .25px) calc(18px + var(--z, 20) * .3px) 4px rgba(0, 0, 0, .55); pointer-events: none; transition: transform .5s var(--ease-out), opacity .5s var(--ease-out); }

/* a print: paper border, the picture, an honest label in the border */
.bt__print { display: flex; flex-direction: column; height: 100%; margin: 0; padding: 5px 5px 0; border-radius: 3px; background: linear-gradient(170deg, var(--print), color-mix(in srgb, var(--print) 88%, var(--silver))); }
.bt__win { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 1.5px; background: var(--night); isolation: isolate; }
.bt__win--night { background: #070a12; }
.bt__win::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background-image: var(--grain); background-size: 200px; opacity: .12; mix-blend-mode: overlay; }
.bt__win picture, .bt__still, .bt__vid { position: absolute; inset: 0; width: 100%; height: 100%; }
.bt__still, .bt__vid { object-fit: cover; }
.bt__vid { z-index: 1; background: transparent; }
.bt--otr .bt__still, .bt--otr .bt__vid { object-position: 44% 50%; }
.bt__cap { display: flex; flex-direction: column; gap: 2px; padding: 8px 3px 9px; }
.bt__lab { font: 400 11px/1.25 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--graphite); }
.bt__name { font: 500 15px/1.2 var(--f-sans); letter-spacing: -.015em; color: var(--film); }

/* browser: the page scrolls inside, like a visitor reading it */
.bt__win--browser { display: flex; flex-direction: column; background: #fff; }
.bt__bar { position: relative; z-index: 4; flex: none; display: flex; gap: 4px; align-items: center; height: 16px; padding: 0 7px; background: color-mix(in srgb, var(--silver) 70%, var(--print)); border-bottom: 1px solid var(--line); }
.bt__bar i { width: 5px; height: 5px; border-radius: 50%; background: color-mix(in srgb, var(--film) 28%, transparent); }
.bt__bar i:first-child { background: var(--marker); }
.bt__view { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.bt__strip { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; }

/* phone: a real frame (black edge, island), the page scrolls inside */
.bt__print--phone { align-items: center; }
.bt__phone { position: relative; flex: 1; min-height: 0; aspect-ratio: 390 / 844; max-width: 100%; margin: 4px auto 0; padding: 4px; border-radius: 17px; background: var(--film); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paper) 18%, transparent), 0 0 0 1.5px color-mix(in srgb, var(--film) 60%, var(--silver)); }
.bt__phone .bt__view { position: absolute; inset: 4px; border-radius: 13px; background: #000; }
.bt__isl { position: absolute; z-index: 3; top: 8px; left: 50%; width: 28%; height: 9px; border-radius: 9px; background: #000; translate: -50% 0; }
.bt__print--phone .bt__cap { align-self: stretch; }
.bt__kb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.bt--uk .bt__kb { object-position: 30% 50%; }

/* paper tiles (the UI moments) */
.bt__slip, .bt__card { height: 100%; padding: 16px 13px 12px; border-radius: 3px; background: linear-gradient(172deg, var(--print), color-mix(in srgb, var(--print) 84%, var(--silver))); color: var(--film); }
.bt__slip { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--film) 6%, transparent); }
.bt__meta { display: flex; align-items: center; gap: 7px; font: 400 11px/1.25 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--graphite); }
.bt__meta b { flex: none; font-weight: 400; color: var(--film); padding: 2px 5px 1px; box-shadow: inset 0 0 0 1px var(--film); border-radius: 2px; }
.bt--note .bt__tape { top: -9px; right: 16%; --tw: 74px; --r: 7deg; }
.bt__leaks { margin-top: 8px; }
.bt__leaks li { position: relative; display: flex; gap: 7px; align-items: baseline; padding: 3px 0; }
.bt__n { flex: none; font: 400 11px/1 var(--f-mono); color: var(--marker); }
.bt__w { font-size: 19.5px; line-height: .98; color: var(--film); }
.bt__ring { position: absolute; left: 12px; top: -4px; width: calc(100% - 4px); height: calc(100% + 8px); overflow: visible; pointer-events: none; }
.bt__ring path { fill: none; stroke: var(--marker); stroke-width: 2.2px; stroke-linecap: round; vector-effect: non-scaling-stroke; }

.bt__card { position: relative; display: flex; flex-direction: column; gap: 6px; }
.bt__dial { position: relative; flex: 1; min-height: 0; margin: 2px 0; }
.bt__dial svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.d-face { fill: none; stroke: var(--film); stroke-width: 1.6px; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: url(#wax-l); }
.d-ticks path { stroke: var(--film); stroke-width: 1.1px; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .55; }
.d-ticks path.is-major { stroke-width: 1.8px; opacity: 1; }
.d-arc { fill: none; stroke-width: 4.2; stroke-linecap: round; }
.d-arc--a { stroke: var(--film); }
.d-arc--b { stroke: var(--marker); }
.d-hand { transform-box: view-box; transform-origin: 100px 100px; }
.d-knob { fill: var(--print); stroke: var(--film); stroke-width: 2.4; }
.d-knob-i { fill: var(--marker); }
.bt__hrs { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; text-align: center; font: 600 30px/1 var(--f-sans); letter-spacing: -.05em; color: var(--film); font-variant-numeric: tabular-nums; }
.bt__hrs small { font-size: .55em; font-weight: 500; letter-spacing: 0; }
.bt__legend { display: flex; flex-direction: column; gap: 2px; }
.bt__tag { font: 400 11px/1.2 var(--f-mono); letter-spacing: .02em; white-space: nowrap; color: color-mix(in srgb, var(--film) 34%, transparent); transition: color .35s var(--ease-out); }
.bt__tag.is-on { color: var(--film); }
.bt__tag--b.is-on { color: var(--marker); }
.bt__st--72 { position: absolute; z-index: 6; right: -12px; bottom: -16px; --ss: 64px; }

.bt__slip--inv { display: flex; flex-direction: column; gap: 6px; }
.bt__row { display: flex; flex-direction: column; gap: 2px; padding-top: 8px; border-top: 1px dashed var(--line-2); font-size: 15px; line-height: 1.25; }
.bt__row--sub { border: 0; padding: 0; font: 400 11px/1.3 var(--f-mono); letter-spacing: .03em; color: var(--graphite); }
.bt__amt { display: inline-block; font-size: 28px; line-height: 1.05; font-weight: 600; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.bt__no { font-size: 23px; line-height: 1; rotate: -3deg; margin-top: auto; }
.bt__st--inv { position: absolute; z-index: 6; right: 8px; top: 40%; --ss: 72px; mix-blend-mode: multiply; }
.bt__st--cur { position: absolute; z-index: 6; right: 6px; top: 6px; --ss: 54px; }
.bt--inv .bt__meta { padding-right: 50px; }
.bt--inv, .bt--clock { z-index: 3; }

/* hover (desktop) / touch: the print lifts off the wall */
.bt.is-up::before { transform: translateY(calc(18px + var(--z, 20) * .3px)) scale(1.02); opacity: .7; }

/* pre-state: the wall is empty until each print comes in */
.b4.motion .bt { opacity: 0; }

/* ═════════════════════ 08 · me: a note, in writing ═════════════════════ */
.me4 { position: relative; padding: 88px var(--gutter) 100px; }
.me4__h { margin-top: 18px; }
.me4__photo { position: relative; z-index: 3; width: min(70vw, 290px); margin: 50px auto 0; }
.me4__film { --tilt: -2.4deg; padding: 28px 10px; transition: translate .45s var(--ease-out); }
.me4__film::before { top: 7px; } .me4__film::after { bottom: 7px; }
.me4__film .film__code { top: 17px; left: 12px; right: 12px; font-size: 8px; }
.me4__film .film__img { --ar: 3 / 4; }
.me4__img { filter: contrast(1.06) brightness(.98); object-position: 50% 30%; }
.me4__film .burn { --burn-o: .38; }
.me4__dev { position: absolute; inset: 0; z-index: 4; background: var(--print); opacity: 0; pointer-events: none; }
.b4.motion .me4__dev { will-change: opacity; } /* round 7: its fade never repaints the film under it (js/r4-mid.js drops the layer at the end) */
.me4__cap { position: absolute; left: -2px; bottom: -34px; font-size: 28px; rotate: -4deg; }
.me4__tape { top: -13px; left: 16%; --tw: 82px; --r: -8deg; }
.me4__clock { position: absolute; z-index: 5; right: -40px; top: 31%; }
.me4__st--clock { --ss: 112px; }
.me4__dial { position: absolute; left: 25%; top: 25%; width: 50%; height: 50%; overflow: visible; }
.me4__face { fill: none; stroke: var(--film); stroke-width: 1.8px; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: url(#wax-l); }

.me4__letter { position: relative; z-index: 2; margin: 62px -4px 0; }
.me4__letter::before { content: ""; position: absolute; inset: 3% 2% 1%; z-index: -1; border-radius: 6px; box-shadow: 0 22px 40px -16px color-mix(in srgb, var(--film) 40%, transparent), 0 4px 10px -4px color-mix(in srgb, var(--film) 24%, transparent); }
.me4__paper { position: relative; padding: 34px 22px 22px; background: linear-gradient(174deg, var(--print), color-mix(in srgb, var(--print) 86%, var(--silver))); -webkit-mask: url(../img/collage/torn-2.svg) 0 0 / 100% 100%; mask: url(../img/collage/torn-2.svg) 0 0 / 100% 100%; }
.me4__tape2 { top: -12px; right: 14%; --tw: 118px; --r: 4deg; }
.me4__code { display: flex; justify-content: space-between; font: 400 11px/1 var(--f-mono); letter-spacing: .16em; color: color-mix(in srgb, var(--marker) 88%, var(--film)); }
.me4__e { position: relative; padding: 20px 0 22px; }
.me4__e + .me4__e { border-top: 1px dashed var(--line-2); }
.me4__n { font: 400 11px/1 var(--f-mono); letter-spacing: .1em; color: var(--graphite); }
.me4__xh { margin: 9px 0 0; font: 500 25px/1.08 var(--f-sans); letter-spacing: -.035em; color: var(--film); text-wrap: balance; }
.me4__p { margin-top: 9px; max-width: 32em; font-size: 16.5px; line-height: 1.52; color: var(--graphite); }
.me4__p strong { font-weight: 600; }
.me4__e:nth-of-type(2) .me4__xh, .me4__e:nth-of-type(2) .me4__p { padding-right: 78px; }
/* the old price stays readable: a clean hand stroke, not a scribble */
.me4__was { position: relative; display: inline-block; text-decoration: none; white-space: nowrap; color: var(--graphite); }
.me4__num { position: relative; }
.me4__strike { position: absolute; left: -7%; top: 16%; width: 114%; height: 66%; overflow: visible; pointer-events: none; }
.me4__strike path { fill: none; stroke: var(--marker); stroke-width: 2.3px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.me4__st--1h { position: absolute; right: -6px; top: 24px; --ss: 80px; }
.me4__sign { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.me4__sig { font-size: 44px; line-height: 1; rotate: -4deg; color: var(--film); }
.me4__st--ai { --ss: 104px; margin: -8px -6px -10px 0; }

@media (hover: hover) {
  .me4__photo:hover .me4__film { translate: 0 -8px; }
  .st4:hover { animation: stopmo .36s steps(1, end) 1; }
}

/* pre-states (Me) */
.b4.motion .me4__film, .b4.motion .me4__letter, .b4.motion .me4 .tp4, .b4.motion .me4 .st4 { opacity: 0; }
.b4.motion .me4__cap, .b4.motion .me4__sig { clip-path: inset(-60% 100% -60% -10%); }
.b4.motion .me4__strike path { opacity: 0; }

/* ═════════════════════ ≥ 430 ═════════════════════ */
@media (min-width: 430px) {
  .bento { --ru: 66px; }
}

/* ═════════════════════ ≥ 768 · tablet ═════════════════════ */
@media (min-width: 768px) {
  .manifesto .mf4 { grid-column: 3 / -1; }
  .mf4__v { text-indent: 1.4em; }

  .show4__b { text-align: right; padding-left: 0; }
  .show4__text { font-size: 18px; }
  .show4__stage { margin-top: 56px; perspective: 1500px; }
  .bento { --gap: 14px; --ru: 74px; grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-areas:
      "prep prep prep prep note note" "prep prep prep prep note note" "prep prep prep prep note note" "prep prep prep prep note note"
      "guel guel guel guel black black" "guel guel guel guel black black" "guel guel guel guel black black" "guel guel guel guel black black"
      "clock clock inv inv uk uk" "clock clock inv inv uk uk" "clock clock inv inv uk uk"
      "otr otr otr otr pen pen" "otr otr otr otr pen pen" "otr otr otr otr pen pen" "otr otr otr otr pen pen"; }
  .bt--pen { display: block; }
  .bt__cap { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 4px 10px; }
  .bt__print--phone .bt__cap, .bt--uk .bt__cap { flex-direction: column; align-items: flex-start; gap: 2px; }
  .bt__w { font-size: 25px; }

  .me4__photo { width: min(46vw, 340px); }
  .me4__letter { max-width: 600px; margin: 70px auto 0; }
  .me4__paper { padding: 40px 36px 26px; }
}

/* ═════════════════════ ≥ 1000 · desktop ═════════════════════ */
@media (min-width: 1000px) {
  .show4 { padding: 128px var(--gutter) 150px; }
  .show4__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; align-items: end; }
  .show4__fr { grid-column: 1 / -1; }
  .show4__h { grid-column: 1 / span 9; font-size: clamp(64px, 7.6vw, 132px); }
  .show4__b { text-align: left; padding-left: 1.1em; }
  .show4__text { grid-column: 10 / -1; margin: 0 0 .6em; font-size: 18px; }
  .show4__stage { margin-top: 72px; perspective: 2000px; perspective-origin: 50% 30%; }
  .bento { --gap: 16px; --ru: clamp(66px, 6vw, 92px); grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas:
      "prep prep prep prep prep prep prep otr otr otr otr otr" "prep prep prep prep prep prep prep otr otr otr otr otr" "prep prep prep prep prep prep prep otr otr otr otr otr" "prep prep prep prep prep prep prep otr otr otr otr otr"
      "note note note guel guel guel guel black black clock clock clock" "note note note guel guel guel guel black black clock clock clock"
      "note note note guel guel guel guel black black inv inv inv" "note note note guel guel guel guel black black inv inv inv"
      "pen pen imp imp imp imp imp uk uk uk uk uk" "pen pen imp imp imp imp imp uk uk uk uk uk" "pen pen imp imp imp imp imp uk uk uk uk uk" "pen pen imp imp imp imp imp uk uk uk uk uk"; }
  .bt--imp { display: block; }
  .bt__print { padding: 7px 7px 0; }
  .bt__slip, .bt__card { padding: 22px 20px 16px; }
  .bt__w { font-size: 27px; }
  .bt__leaks { margin-top: 14px; }
  .bt__leaks li { padding: 6px 0; }
  .bt--clock .bt__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 18px; }
  .bt--clock .bt__meta { grid-column: 2; grid-row: 1; flex-wrap: wrap; }
  .bt--clock .bt__dial { grid-column: 1; grid-row: 1 / -1; margin: 0; }
  .bt--clock .bt__legend { grid-column: 2; grid-row: 3; flex-direction: column; gap: 4px; }
  .bt__hrs { font-size: 34px; }
  .bt__st--72 { --ss: 78px; right: -24px; bottom: -24px; }
  .bt__slip--inv { gap: 8px; }
  .bt__row:not(.bt__row--sub) { font-size: 16px; }
  .bt__row--sub { font-size: 12px; }
  .bt__amt { font-size: 34px; }
  .bt__st--inv { --ss: 84px; right: 16px; top: auto; bottom: 12px; }
  .bt__st--cur { --ss: 64px; right: 12px; top: 10px; }
  .bt--inv .bt__meta { padding-right: 70px; }

  .me4 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; align-items: start; padding: 132px var(--gutter) 140px; }
  .me4__head { grid-column: 1 / -1; }
  .me4__h { font-size: clamp(56px, 6.6vw, 112px); max-width: 11em; }
  .me4__photo { grid-column: 1 / span 5; grid-row: 2; width: min(100%, 440px); margin: 64px 0 0 3%; }
  .me4__cap { font-size: 32px; left: auto; right: 4px; bottom: -40px; }
  .me4__clock { right: -78px; top: 30%; }
  .me4__st--clock { --ss: 136px; }
  .me4__letter { grid-column: 6 / -1; grid-row: 2; max-width: 740px; margin: 104px 0 0 -2%; }
  .me4__paper { padding: 46px 52px 28px; }
  .me4__xh { font-size: clamp(28px, 2.3vw, 34px); }
  .me4__p { font-size: 18px; }
  .me4__e:nth-of-type(2) .me4__xh, .me4__e:nth-of-type(2) .me4__p { padding-right: 130px; }
  .me4__st--1h { --ss: 112px; right: 0; top: 16px; }
  .me4__sig { font-size: 54px; }
  .me4__st--ai { --ss: 128px; }
}

/* ═════════════════════ reduced motion: everything final and still ═════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .mf4__ic *, [data-b4-drift] { animation: none !important; }
}
.is-reduced .mf4__ic *, .is-static .mf4__ic *, .is-reduced [data-b4-drift], .is-static [data-b4-drift] { animation: none !important; }