/* ───────── MLYNČEK: the pinned mill sequence (#system) ─────────
   Every rule here is .ml-*. It reads the :root tokens of index.html (--ink --pink --white --navh --gut --text
   --fs-h2 --fs-h3 --fs-lead --fs-body) and the page's .wrap .disp .btn .arr .o-phone.
   The geometry comes from the brand mark (viewBox 200): its holes sit on a 17-unit pitch, a small hole is 8 units (one
   contact), the centre hole is 32 units (a meeting's width, set 2:1). Everything scales with the plate, --P.
   Default (no JS, reduced motion, short screens): a composed still frame in normal flow. With scripting on and motion
   allowed, the stage pins (about 1.2 screens on desktop, 0.7 on phones) while mill.js runs the sequence.
   --ml-bar (set by mill.js on #system): the height of the fixed bar at the screen's foot (the consent bar) while one is up, so the pinned stage never sits under it. */

.ml-frame{
  /* desktop plate: 28vw, but never more than the pinned stage has left after the nav, a bar, the two-line heading and
     ~258px for the parts row and paddings (the frame is the heading + 0.605P + 24px) */
  --P:clamp(200px,min(28vw,calc((100svh - var(--navh) - var(--ml-bar,0px) - 2.32 * var(--fs-h2) - 258px) / .605)),420px);
  --pitch:calc(var(--P) * .085);
  --hole:calc(var(--P) * .04);
  --bw:calc(var(--P) * .16);
  --bh:calc(var(--P) * .08);
  --bg:calc(var(--P) * .03);
  --lane-pad:24px;
  --band:calc(2 * var(--pitch) + var(--hole) + 2 * var(--lane-pad));
  position:relative;
  display:grid;
  grid-template-columns:1fr var(--P) 1fr;
  grid-template-rows:minmax(calc(var(--P) / 2 - var(--band) / 2),auto) var(--band) calc(var(--P) / 2 - var(--band) / 2);
  column-gap:clamp(24px,3vw,48px);
}

/* the headline: real text, static, never rotated. In white, out pink, as the machine turns white into pink */
.ml-h{grid-column:1/-1;grid-row:1;display:grid;grid-template-columns:subgrid;align-items:end;font-size:var(--fs-h2);line-height:1.16}
.ml-h .ln{display:block}
.ml-hin{grid-column:1;justify-self:end;text-align:right}
.ml-hout{grid-column:3;justify-self:start;color:var(--pink)}

/* the plate: the brand mark, turned by mill.js in ratchet clicks. An ink core under it hides what passes behind */
.ml-plate{grid-column:2;grid-row:2/4;position:relative;height:var(--P);margin-top:calc(var(--band) / 2 - var(--P) / 2)}
.ml-disc{position:absolute;inset:0;z-index:2}
.ml-disc::before{content:"";position:absolute;inset:11%;border-radius:50%;background:var(--ink)}
.ml-disc::after{content:"";position:absolute;inset:0;background:var(--pink);-webkit-mask:url("/assets/znak-ruzovy.svg") center/contain no-repeat;mask:url("/assets/znak-ruzovy.svg") center/contain no-repeat}

/* contacts: three lanes on the mark's own hole rows, from the screen edge into the plate's centre */
.ml-feed{position:absolute;z-index:1;right:50%;top:50%;width:50vw;height:var(--band);margin-top:calc(var(--band) / -2);overflow:hidden;pointer-events:none}
.ml-feed i{position:absolute;left:0;top:0;width:var(--hole);height:var(--hole);background:var(--white);
  transform:translate(calc(var(--b) * var(--pitch) - var(--pitch)),calc(var(--band) / 2 + var(--l) * var(--pitch) - var(--hole) / 2))}

/* meetings: pink 2:1 blocks stacked from the floor of the plate, under VON STRETNUTIA. */
.ml-stack{grid-column:3;grid-row:2/4;align-self:end;justify-self:start;position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,var(--bw));grid-auto-rows:var(--bh);gap:var(--bg)}
.ml-stack i{display:block;background:var(--pink)}

/* the four parts sit under the stage of the machine they describe: meat in, the machine, the taste, together */
.ml-parts{display:grid;grid-template-columns:repeat(4,1fr);column-gap:24px;row-gap:28px;margin-top:clamp(28px,5.5svh,64px)}
.ml-parts h3{font-size:var(--fs-h3);line-height:1.16}
.ml-parts p{margin-top:8px;max-width:16em}

/* 1024-1365: four across would set 15-25 characters a line. Two by two, each head beside its line on one baseline,
   reads at 30+ and is no taller, so the pinned stage still fits with the consent bar up */
@media (min-width:1024px) and (max-width:1365px){
  .ml-parts{grid-template-columns:1fr 1fr;column-gap:clamp(32px,4vw,56px);row-gap:16px;margin-top:clamp(24px,4svh,48px)}
  .ml-parts li{display:grid;grid-template-columns:calc(var(--fs-h3) * 2.6) minmax(0,1fr);column-gap:20px;align-items:baseline}
  .ml-parts h3{line-height:1}   /* one word, never wraps */
  .ml-parts p{margin-top:0;max-width:22em}
}

.ml-stage{display:flex;flex-direction:column;justify-content:center}

/* after the machine: what the word means, the punchline, the channels and the one action */
.ml-after{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;row-gap:28px;margin-top:clamp(56px,7vw,112px)}
.ml-sub{grid-column:1/7;font-size:var(--fs-lead);line-height:1.4;max-width:21em}
.ml-kick{grid-column:7/13;font:700 var(--fs-lead)/1.4 var(--text);max-width:21em}
.ml-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:20px 40px;margin-top:clamp(8px,1.4vw,20px)}
.ml-foot p{font:500 var(--fs-body)/1.45 var(--text);max-width:34em}
.ml-foot p b{display:block}

/* ── pinned (desktop): the whole stage holds while the plate makes one full turn ── */
@media (scripting:enabled) and (prefers-reduced-motion:no-preference) and (min-width:1024px) and (min-height:680px){
  .ml-pin{height:220svh}
  .ml-stage{position:sticky;top:var(--navh);height:calc(100svh - var(--navh));padding:16px 0 calc(16px + var(--ml-bar,0px))}
  .ml-after{margin-top:clamp(16px,2vw,32px)}
}

/* ── phones and tablets: the same story, top to bottom ── */
@media (max-width:1023px){
  .ml-frame{
    --P:clamp(160px,min(58vw,calc((100svh - var(--navh) - var(--ml-bar,0px)) * .36)),300px);
    --lane-pad:16px;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto var(--feed,clamp(120px,22svh,220px)) var(--P) auto auto;
    justify-items:center;
  }
  .ml-h{grid-column:1;grid-row:1/-1;grid-template-columns:none;grid-template-rows:subgrid;justify-items:center}
  .ml-h .ln{display:inline}
  .ml-hin{grid-column:1;grid-row:1;align-self:end;justify-self:center;text-align:center}
  .ml-hout{grid-column:1;grid-row:5;align-self:start;justify-self:center;text-align:center;margin-top:calc(var(--P) * .1)}
  .ml-plate{grid-column:1;grid-row:2/4;width:var(--P);height:auto;margin:0;align-self:stretch}
  .ml-disc{inset:auto 0 0;height:var(--P)}
  .ml-feed{right:auto;left:50%;top:0;bottom:calc(var(--P) / 2);width:var(--band);height:auto;margin:0 0 0 calc(var(--band) / -2);
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22%);mask-image:linear-gradient(to bottom,transparent 0,#000 22%)}
  .ml-feed i{transform:translate(calc(var(--band) / 2 + var(--l) * var(--pitch) - var(--hole) / 2),calc(var(--b) * var(--pitch) - var(--pitch)))}
  .ml-stack{grid-column:1;grid-row:4;align-self:start;justify-self:center;margin-top:calc(var(--P) * .1)}
  .ml-parts{grid-template-columns:1fr 1fr;margin-top:clamp(40px,6vw,56px)}
  .ml-parts p{max-width:22em}
  .ml-after{grid-template-columns:1fr;margin-top:clamp(44px,7vw,64px)}
  .ml-sub,.ml-kick,.ml-foot{grid-column:1/-1}
}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference) and (max-width:1023px) and (min-height:640px){
  .ml-show{height:calc(170svh - var(--navh))}
  .ml-frame{--feed:1fr;position:sticky;top:var(--navh);height:calc(100svh - var(--navh));padding-top:20px;padding-bottom:calc(24px + var(--ml-bar,0px))}
}
@media (max-width:639px){
  .ml-parts{grid-template-columns:1fr;row-gap:24px}
  .ml-foot{gap:16px}
  .ml-foot p b{display:inline}
  .ml-foot .btn{width:100%}
}