/* The Factory at work (muellerco.ca home, section #ask): the "Factory at a glance" film slot + sample work as simulated ads.
   Adam 10/26 12:33 PM Phoenix. Cards read as an ad in a feed (white, the platform's own grey); the page around them stays navy. */
#ask{overflow-x:clip}
#ask .fw-head{max-width:760px}
#ask .fw-film{position:relative;margin:clamp(30px,5vw,54px) 0 0;aspect-ratio:16/9;background:#050b19;border:1px solid var(--line-gold);overflow:hidden}
#ask .fw-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#050b19}
#ask .fw-film.ph{background:#050b19 url('img/silk-epic.webp') center/cover no-repeat}
#ask .fw-film.ph::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 90% at 50% 50%,rgba(7,14,31,.35),rgba(7,14,31,.88))}
#ask .fw-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px}
#ask .fw-ph .k{font-family:var(--sans);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
#ask .fw-ph .t{font-family:var(--display);font-size:clamp(26px,3.6vw,46px);line-height:1.1;color:var(--ivory);margin:0}
#ask .fw-ph .t i{color:var(--gold)}
#ask .fw-ph .s{font-family:var(--sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(250,248,244,.62)}
#ask .fw-snd{position:absolute;left:14px;bottom:14px;font:600 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);background:rgba(7,14,31,.78);border:1px solid var(--line-gold);padding:9px 12px;cursor:pointer}

#ask .fw-work{margin-top:clamp(48px,7vw,84px)}
#ask .fw-sub{font-family:var(--display);font-size:clamp(26px,2.8vw,36px);line-height:1.12;color:var(--ivory);margin:0 0 10px}
#ask .fw-sub .it{font-style:italic;color:var(--gold)}
#ask .fw-note{font-family:var(--serif);font-size:19px;line-height:1.5;color:rgba(250,248,244,.78);margin:0 0 30px;max-width:640px}
#ask .fw-kind{font-family:var(--sans);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin:34px 0 16px;display:flex;align-items:center;gap:14px}
#ask .fw-kind::after{content:"";flex:1;height:1px;background:var(--line-gold)}
#ask .fw-row{display:flex;flex-wrap:wrap;justify-content:center;gap:28px 20px;align-items:flex-start}   /* five: three, then two centred */
#ask .fw-cell{min-width:0;flex:0 0 calc((100% - (var(--c,3) - 1) * 20px) / var(--c,3))}

/* the simulated ad: a post in a feed */
#ask .ad{background:#fff;color:#1c1e21;border-radius:10px;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;box-shadow:0 18px 40px -22px rgba(0,0,0,.65)}
#ask .ad-h{display:flex;align-items:center;gap:9px;padding:11px 12px 8px}
#ask .ad-av{flex:0 0 auto;width:34px;height:34px;border-radius:50%;overflow:hidden;background:#eef0f3}
#ask .ad-av img{width:100%;height:100%}
#ask .ad-id{min-width:0;display:flex;flex-direction:column;line-height:1.2}
#ask .ad-id b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ask .ad-id i{font-style:normal;font-size:12px;color:#65676b}
#ask .ad-dots{margin-left:auto;color:#65676b;font-size:18px;line-height:1;letter-spacing:1px}
#ask .ad-tx{position:relative;margin:0 12px 10px}
#ask .ad-t{--n:3;--lh:1.38;margin:0;padding:0;font-size:13.5px;line-height:var(--lh);white-space:pre-line;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--n);overflow:hidden}
#ask .ad.open .ad-t{-webkit-line-clamp:unset;display:block}
/* "... See more" on the text's last line, as a feed shows it */
#ask .ad-more{display:none;position:absolute;right:0;bottom:0;padding:0 0 0 30px;border:0;background:linear-gradient(90deg,rgba(255,255,255,0),#fff 26px);font:inherit;font-size:13.5px;font-weight:600;line-height:1.38;color:#65676b;cursor:pointer}
#ask .ad-more::before{content:"\2026\00a0";color:#1c1e21;font-weight:400}
#ask .ad.long .ad-more{display:block}
#ask .ad.open .ad-more{display:none}
/* work.js's "… See more" (Adam 10/26 11:14 PM, "Polish both"): the text cut after a whole word, the ellipsis and the button
   inline behind it, never a word split under the button; the full text stays for screen readers and opens on the tap */
#ask .ad-cut{display:none}
#ask .ad.fit .ad-t{display:block;-webkit-line-clamp:unset;max-height:calc(var(--n) * var(--lh) * 1em)}   /* the same lines, as plain text: the clamp's box would stack the button under the words */
#ask .ad.fit.open .ad-t{max-height:none}
#ask .ad.fit .ad-more{display:none;position:static;margin:0;padding:0;border:0;background:none;-webkit-appearance:none;appearance:none;font-size:inherit;line-height:inherit;vertical-align:baseline}
#ask .ad.fit .ad-more::before{content:none}
#ask .ad.fit.long:not(.open) .ad-cut,#ask .ad.fit.long:not(.open) .ad-more{display:inline}
#ask .ad.fit.long:not(.open) .ad-all{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
#ask .ad-m{position:relative;background:#000;aspect-ratio:var(--ar,1/1)}
#ask .ad-m img,#ask .ad-m video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#ask .ad-snd{position:absolute;right:10px;bottom:10px;display:flex;align-items:center;gap:6px;font:600 11px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;color:#fff;background:rgba(0,0,0,.6);border:0;border-radius:14px;padding:7px 10px;cursor:pointer}
#ask .ad-snd svg{width:13px;height:13px}
#ask .ad-f{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#f0f2f5}
#ask .ad-hl{flex:1;min-width:0;margin:0;font-size:14px;font-weight:600;line-height:1.25}
#ask .ad-cta{flex:0 0 auto;font-size:13px;font-weight:600;color:#1c1e21;background:#e2e5e9;border-radius:6px;padding:8px 12px;white-space:nowrap}
#ask .fw-time{display:flex;align-items:center;gap:8px;margin:14px 2px 0;font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
#ask .fw-time svg{flex:0 0 auto;width:14px;height:14px}
#ask .fw-time b{font-weight:600;color:var(--ivory);letter-spacing:.12em}
#ask .fw-fine{font-family:var(--serif);font-style:italic;font-size:16px;line-height:1.5;color:rgba(250,248,244,.6);margin:34px 0 0;max-width:720px}
#ask .fw-ctas{margin-top:34px;display:flex;flex-wrap:wrap;align-items:center;gap:22px}

#ask .fw-dots{display:none}   /* a phone's swipe rows only (work.js adds them) */
/* a phone: each row becomes a swipe row with the next card peeking */
@media (max-width:820px){
  #ask .fw-row{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72%;justify-content:start;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 calc(-1 * var(--gx));padding:0 var(--gx) 4px;scroll-padding:0 var(--gx);gap:12px}
  #ask .fw-row::-webkit-scrollbar{display:none}
  #ask .fw-cell{scroll-snap-align:start}
  #ask .fw-dots{display:flex;justify-content:center;gap:7px;margin:14px 0 0}
  #ask .fw-dots i{width:6px;height:6px;border-radius:50%;background:rgba(250,248,244,.28);transition:background .2s,transform .2s}
  #ask .fw-dots i.on{background:var(--gold);transform:scale(1.2)}
}
@media (max-width:820px) and (min-width:560px){#ask .fw-row{grid-auto-columns:36%}#ask .fw-row.img{grid-auto-columns:40%}}
#ask .fw-cell{container-type:inline-size}
@container (max-width:300px){#ask .ad-f{flex-wrap:wrap;gap:8px}#ask .ad-hl{flex-basis:100%}#ask .ad-cta{padding:7px 11px;font-size:12.5px}#ask .ad-id b{white-space:normal}}   /* a narrow card: the headline takes the row, the page name may wrap */
/* a phone held upright (Adam 10/26 7:43 PM: "too sprawling on mobile ... shrink the ad so that it doesn't cover so much vertical
   real estate. Turn it into a carousel where half of the next ad is visible"): smaller cards, each keeping its own shape, the next
   one cut off at the screen's edge (a little over half of it shows), and the card's type and spacing tightened to match */
@media (max-width:559px){
  #ask .fw-row,#ask .fw-row.img{grid-auto-columns:calc((100% + var(--gx) - 12px) / var(--k,1.6))}
  /* a film never taller than half the screen Safari leaves with its bars showing (svh); a browser without svh keeps the line above */
  #ask .fw-row:not(.img){grid-auto-columns:clamp(180px,calc(55svh * 9 / 16),calc((100% + var(--gx) - 12px) / var(--k,1.6)))}
  #ask .fw-kind{margin:28px 0 12px}
  #ask .fw-note{font-size:17px;margin-bottom:22px}
  #ask .ad{border-radius:9px}
  #ask .ad-h{gap:7px;padding:8px 9px 6px}
  #ask .ad-av{width:26px;height:26px}
  #ask .ad-id b{font-size:12px}
  #ask .ad-id i{font-size:10.5px}
  #ask .ad-dots{font-size:15px}
  #ask .ad-tx{margin:0 9px 7px}
  #ask .ad-t{--n:2;--lh:1.34;font-size:12px}
  #ask .ad-more{padding-left:26px;font-size:12px;line-height:1.34}
  #ask .ad-snd{right:7px;bottom:7px;gap:5px;padding:6px 8px;font-size:10px}
  #ask .ad-snd svg{width:11px;height:11px}
  #ask .ad-f{gap:6px;padding:7px 9px 8px}
  #ask .ad-hl{font-size:12px;line-height:1.25}
  #ask .ad-cta{font-size:11.5px;padding:5px 9px;border-radius:5px}
  #ask .fw-time{gap:6px;margin-top:9px;font-size:9.5px;letter-spacing:.14em}
  #ask .fw-time svg{width:12px;height:12px}
  @container (min-width:220px){#ask .ad-f{flex-wrap:nowrap;align-items:center}#ask .ad-hl{flex-basis:auto}}   /* the headline beside the button, as a feed has it */
}
@media (prefers-reduced-motion:reduce){#ask .fw-row{scroll-behavior:auto}}
/* the welcome film's corner player (film-v26.js) steps aside while the sample ads pass under it (work.js), so it never covers
   a sound button or a "See more" (Adam 10/26 11:14 PM, "Polish both"); out of the tab order too until it comes back */
.mfc.in.aside{opacity:0;transform:translateY(14px);pointer-events:none;visibility:hidden;transition:opacity .35s ease,transform .35s ease,visibility 0s linear .35s}
@media print{#ask .ad-snd,#ask .fw-snd{display:none}}