/* clean variant 2026-10-31 — overrides only; site/portfolio.css stays untouched */

/* section heads: shorter blurb, less air between head and first work */
.head__blurb{max-width:34ch}

/* film library: keeps the original stage + side list, now 3 films */


/* tools: one shelf, no rule above it */
.toollib .shelf{border-top:0; padding-top:0}

/* phones: the reel starts under the bar, the 3 films sit in one row */
@media (max-width:48rem){
  .intro{min-height:0; align-content:start; padding-bottom:3rem}
  .intro__l, .intro__r{display:none}
  .lib{grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem .6rem}
  .lib__tools{display:none}
}

/* ===== version D: the original intro (thumbnails, shelves as tall as the reel),
   without the counts, the Next card and the chapter bar. The bar stays in the
   page, hidden, because it drives the "now in the reel" highlight ===== */
.chap{display:none}
.intro .display{margin-top:1.6rem}

/* ===== version E ===== */
/* library covers: one calm treatment — grey until chosen or hovered */
.lib__item img{filter:grayscale(1) contrast(.92) brightness(1.04); transition:filter var(--fast) var(--ease)}
.lib__item:hover img, .lib__item.is-on img{filter:none}


/* ==========================================================================
   version F — one grid, colour where you are
   Three vertical lines carry every text on the page:
     col 1  titles (section, project, tools)
     col 5  what it is (section blurb, project sentence, links)
     col 10 the facts (kind · year · tools)
   Media always spans the full width above its caption.
   ========================================================================== */
@media (min-width:64.01rem){
  .f #top .head .head__l{grid-column:1 / 5}
  .f #top .head .head__blurb{grid-column:5 / 10; max-width:44ch}

  .f #top .proj .proj__media{grid-column:1 / -1; grid-row:1}
  .f #top .proj .proj__text{grid-column:1 / -1; grid-row:2; position:static; padding:0; margin-top:1.1rem;
    display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap); row-gap:0;
    text-align:start; align-items:start}
  .f #top .proj .proj__text .proj__t{grid-column:1 / 5; grid-row:1; margin:0; direction:ltr}
  .f #top .proj .proj__text .trans{grid-column:1 / 5; grid-row:2; margin:.35rem 0 0}
  .f #top .proj .proj__text .proj__s{grid-column:5 / 10; grid-row:1 / span 2; margin:.3rem 0 0; max-width:46ch}
  .f #top .proj .proj__text .proj__k{grid-column:10 / 13; grid-row:1; margin:.45rem 0 0}
  .f #top .proj .proj__text .meta{grid-column:10 / 13; grid-row:2; justify-content:flex-start}
  .f #top .proj .proj__text .actions{grid-column:5 / 10; grid-row:3; justify-content:flex-start}

  /* the library sits on the same lines: stage 1–9, list 10–12 */
  .f #top .library .stage{grid-column:1 / 10}
  .f #top .library .lib{grid-column:10 / 13}
}

/* media on the grid */
.f .grabrow{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gap)}
.f .grabrow > *, .f .grabrow > img{width:auto; height:auto; aspect-ratio:9/16}
.f .posterwall{grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap)}
.f .posterwall video{aspect-ratio:4/5; object-position:50% 72%}
@media (max-width:48rem){
  .f .grabrow{grid-template-columns:1fr 1fr}
  .f .posterwall{gap:3px}
}

/* focus: colour only where you are, a thin ink line marks it */
.f .proj :is(img, video, iframe, .specimen), .f .library :is(img, video){transition:filter .6s var(--ease)}
.f :is(.proj, .library):not(.is-here) :is(img, video, iframe, .specimen){filter:grayscale(1)}
.f .proj, .f .library{transition:border-color .4s var(--ease)}
.f .proj.is-here, .f .library.is-here{border-top-color:var(--ink)}


/* ===== version G ===== */

/* sections: a numbered ink rule and more air, so a new chapter reads as one */
.f2 #top{counter-reset:sec}
.f2 #top .section:not(.intro):not(.section--contact){padding-top:clamp(6rem, 14vh, 9.5rem)}
.f2 #top .head{border-top:2px solid var(--ink); padding-top:1rem}
.f2 #top .head .head__l::before{counter-increment:sec; content:counter(sec, decimal-leading-zero) " / 03";
  display:block; margin-bottom:1rem; font-family:var(--mono); font-size:var(--t-label); letter-spacing:.04em; color:var(--ink-3)}
.f2 #top .head .head__t{font-size:clamp(2.4rem, 1.4rem + 2.6vw, 4rem); line-height:1}
.f2 #top .head .head__blurb{align-self:end}

/* Meir Ariel: the film at 16:9 (cols 1–8), the typeface beside it (9–12) */
.meirpair{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap); align-items:stretch}
.meirpair .vplay{grid-column:1 / 9}
.meirpair .specimen{grid-column:9 / 13; aspect-ratio:auto; height:100%; display:flex; flex-direction:column; justify-content:space-between;
  padding:1.4rem 1.5rem; background:#fff; border-radius:var(--r); box-shadow:var(--card)}
.meirpair .specimen__abc{font-size:clamp(1.6rem, 1rem + 1.4vw, 2.6rem); line-height:1.35}
@media (max-width:48rem){
  .meirpair .vplay, .meirpair .specimen{grid-column:1 / -1}
  .meirpair .specimen{margin-top:.6rem; height:auto}
}

/* the original pins the tools media to row 2 with two ids; put it back above its caption */
.f #top #tools .proj__media{grid-row:1}
/* the typeface card: alphabet centred, name at the foot */
.meirpair .specimen{justify-content:center; gap:1.4rem}
.meirpair .specimen__abc{font-size:clamp(1.9rem, 1.1rem + 1.9vw, 3.2rem); line-height:1.3; margin:0}


/* ===== version I: tools back on their four shelves ===== */
.shelves{border-bottom:1px solid var(--line)}
.sh{border-top:1px solid var(--line)}
.sh__row{list-style:none; cursor:pointer; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap);
  align-items:center; padding:.9rem 0}
.sh__row::-webkit-details-marker{display:none}
.sh__t{grid-column:1 / 5; font-size:var(--t-lead); font-weight:500; letter-spacing:-.02em}
.sh__p{grid-column:5 / 10; font-size:var(--t-small); color:var(--ink-3)}
.sh__th{grid-column:10 / 12; display:flex; gap:4px}
.sh__th img{width:2.6rem; height:2rem; object-fit:cover; border-radius:3px; filter:grayscale(1); opacity:.8;
  transition:filter var(--fast) var(--ease), opacity var(--fast) var(--ease)}
.sh__go{grid-column:12 / 13; justify-self:end; display:inline-flex; align-items:center; gap:.6rem; font-size:var(--t-label); color:var(--ink-3)}
.sh__go i{font-style:normal; display:grid; place-items:center; width:1.8rem; height:1.8rem; border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--line); color:var(--ink); font-size:1rem; transition:transform .25s var(--ease), background var(--fast) var(--ease)}
.sh__row:hover .sh__t{text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1px}
.sh__row:hover .sh__th img{filter:none; opacity:1}
.sh__row:hover .sh__go i{background:var(--ink); color:#fff; box-shadow:none}
/* open: the thumbs give way to the cards, + turns to × */
.sh[open] .sh__th, .sh[open] .sh__n{visibility:hidden}
.sh[open] .sh__go i{transform:rotate(45deg)}
.sh__c{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap); padding:.2rem 0 1.6rem}
.sh__c .tc{margin:0 !important; grid-column:auto !important}
@media (max-width:64rem){
  .sh__t{grid-column:1 / 7} .sh__p{grid-column:1 / 12; grid-row:2; margin-top:.2rem}
  .sh__th{grid-column:7 / 12} .sh__go{grid-row:1}
}
@media (max-width:48rem){
  .sh__th{display:none} .sh__t{grid-column:1 / 11} .sh__go{grid-column:11 / 13}
  .sh__n{display:none}
  .sh__c{grid-template-columns:1fr}
}

/* ===== version J: three representatives above the shelves ===== */
.feat{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap); margin-bottom:clamp(2rem, 5vh, 3rem)}
.feat .tc{margin:0 !important; grid-column:auto !important}
.feat .tc__p{box-sizing:border-box; height:calc(8.6rem + 1.5rem)}
.feat .tc--stack .tc__p{align-content:center}
.feat .tc--stack .tc__i img, .feat .tc--stack .tc__o img{max-height:3.2rem}
.tc__s{margin:.7rem 0 0; font-family:var(--mono); font-size:.66rem; letter-spacing:.04em; color:var(--ink-3)}
.tc__s + .tc__n{margin-top:.15rem}
.shelves__h{margin:0 0 .5rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.04em; color:var(--ink-3)}
@media (max-width:48rem){ .feat{grid-template-columns:1fr} }

/* ===== version K ===== */

/* Meir Ariel: the typeface card on the film's own black, so the two read as one piece */
.meirpair .specimen{background:#0c0c0b; box-shadow:none}
.meirpair .specimen, .meirpair .specimen p{color:#F1EEE7}
.specimen__src{margin:0; direction:ltr; text-align:right; font-family:var(--mono); font-size:.66rem; letter-spacing:.04em; color:#9C978E !important}

/* the showreel stage: an opener and an end card in the cover's language */
.stage__v{position:relative}
.sr{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; padding:6% 8%;
  background:#14120F; color:#F1EEE7; border-radius:var(--r); pointer-events:none}
.sr[hidden]{display:none}
.sr__t{display:block; font-family:var(--sans); font-weight:600; letter-spacing:-.045em; line-height:1;
  font-size:clamp(3rem, 8.4vw, 8.6rem); color:transparent;
  background:url(img/band_wash.jpg) 0% 50% / 300% auto; -webkit-background-clip:text; background-clip:text}
.sr__k{position:absolute; top:8%; left:8%; font-family:var(--mono); font-size:.7rem; letter-spacing:.04em; color:#9C978E}
.sr__k--r{left:auto; right:8%}
/* opener: hidden until the reel is reached, then the title washes through the reel's colours */
.sr--open{opacity:0}
.sr--open.is-on{opacity:1}
.sr--open.is-on .sr__t{animation:srwash 4.2s cubic-bezier(.5,0,.2,1) both}
.sr--open.is-out{opacity:0; transition:opacity .9s var(--ease)}
@keyframes srwash{
  0%{background-position:0% 50%; opacity:0; transform:translateY(.12em)}
  22%{opacity:1; transform:none}
  100%{background-position:100% 50%}
}
/* end card: my name washed the same way, the ways to reach me under it */
.sr--end{pointer-events:auto; gap:1.1rem}
.sr__t--name{font-size:clamp(2.4rem, 6.2vw, 6.4rem)}
@keyframes srdrift{from{background-position:10% 50%} to{background-position:90% 50%}}
.sr__role{margin:0; font-family:var(--mono); font-size:.76rem; letter-spacing:.04em; color:#9C978E}
.sr__links{display:flex; flex-wrap:wrap; gap:.4rem 1.6rem; margin:.6rem 0 0; padding:0; list-style:none}
.sr__links a{color:#F1EEE7; font-size:var(--t-small); text-decoration:underline; text-decoration-color:rgba(241,238,231,.35); text-underline-offset:.25em}
.sr__links a:hover{text-decoration-color:#F1EEE7}
.sr__again{position:absolute; right:6%; bottom:7%; border:0; background:none; padding:0; font:inherit; font-size:var(--t-label);
  color:#9C978E; cursor:pointer}
.sr__again:hover{color:#F1EEE7}
.sr__snd{position:absolute; top:1rem; right:1rem; border:0; border-radius:999px; padding:.5em 1em; cursor:pointer;
  background:#F1EEE7; color:#14120F; font:inherit; font-size:var(--t-label); font-weight:500}
.sr__snd[hidden]{display:none}
@media (prefers-reduced-motion:reduce){ .sr__t, .sr__t--name{animation:none !important} }
@media (max-width:48rem){ .sr__links{gap:.3rem 1rem} .sr__k{display:none} }

/* out of focus, the stage's own cards go grey with everything else */
.f .library:not(.is-here) .sr{filter:grayscale(1)}

/* ===== version L ===== */
/* the ending: the card fades over the reel's last frame, the name washes in the way the title did, then keeps drifting */
.sr--end{opacity:0}
.sr--end.is-in{opacity:1; transition:opacity 1.2s var(--ease)}
.sr--end.is-in .sr__t--name{animation:srwash 3.2s cubic-bezier(.5,0,.2,1) both, srdrift 9s ease-in-out 3.2s infinite alternate}
.sr--end.is-in .sr__role, .sr--end.is-in .sr__links, .sr--end.is-in .sr__again{animation:srup .8s var(--ease) both}
.sr--end.is-in .sr__role{animation-delay:1.6s} .sr--end.is-in .sr__links{animation-delay:1.9s} .sr--end.is-in .sr__again{animation-delay:2.4s}
@keyframes srup{from{opacity:0; transform:translateY(.4rem)} to{opacity:1; transform:none}}

/* Meir Ariel: on arrival the film runs silently and his letters write themselves in */
#meirFilm.is-preview video{display:block}
#meirFilm.is-preview:not(.is-playing) .vplay__btn{left:auto; top:auto; right:1rem; bottom:1rem; transform:none}
.specimen__abc span{display:inline-block; opacity:.12; transform:translateY(.15em);
  transition:opacity .5s var(--ease), transform .5s var(--ease); transition-delay:0s}
.f #meir.is-here .specimen__abc span{opacity:1; transform:none; transition-delay:calc(var(--i) * 70ms)}
@media (prefers-reduced-motion:reduce){ .specimen__abc span{opacity:1; transform:none; transition:none} }

/* ===== version M: the frame strip replaces the wash ===== */
/* opener and ending: the title in plain paper white; the colour comes from the reel's own frames */
.sr .sr__t{background:none; color:#F1EEE7; -webkit-background-clip:border-box; background-clip:border-box}
.sr__strip{position:absolute; left:8%; right:8%; bottom:9%; display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:.5%}
.sr__strip img{width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:3px; filter:grayscale(1) brightness(.7); opacity:.55}
/* opener: the title rises, then the frames light up one by one, left to right */
.sr--open.is-on .sr__t{animation:srrise 1.2s var(--ease) both}
.sr--open.is-on .sr__strip img{animation:srlight .5s var(--ease) both; animation-delay:calc(.9s + var(--i) * .32s)}
@keyframes srrise{from{opacity:0; transform:translateY(.15em)} to{opacity:1; transform:none}}
@keyframes srlight{from{filter:grayscale(1) brightness(.7); opacity:.55} to{filter:none; opacity:1}}
/* ending: the same strip, all in colour, under my name and the ways to reach me */
.sr--end .sr__strip img{filter:none; opacity:1}
.sr--end.is-in .sr__t--name{animation:srrise 1.2s var(--ease) both}
.sr--end.is-in .sr__strip img{animation:srlight .5s var(--ease) both; animation-delay:calc(.4s + var(--i) * .12s)}
.sr--end{justify-content:flex-start; padding-top:12%}
.sr__again{bottom:auto; top:7%}
@media (max-width:48rem){ .sr__strip{grid-template-columns:repeat(4,minmax(0,1fr)); bottom:6%} .sr__strip img:nth-child(n+5){display:none} .sr--end{padding-top:6%} .sr__links{font-size:.8rem} }

/* tools: three cards, then the four shelves as one row of chips */
.feat .tc__s{display:none}
.chips{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gap)}
.chip{display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto; align-items:center; gap:.5rem .6rem;
  width:100%; padding:.8rem 0 .2rem; border:0; border-top:1px solid var(--line); background:none; font:inherit; color:var(--ink); text-align:start; cursor:pointer}
.chip__t{font-size:var(--t-body); font-weight:500}
.chip i{font-style:normal; display:grid; place-items:center; width:1.7rem; height:1.7rem; border-radius:50%; box-shadow:inset 0 0 0 1px var(--line);
  transition:transform .25s var(--ease), background var(--fast) var(--ease), color var(--fast) var(--ease)}
.chip__th{grid-column:1 / -1; display:flex; gap:4px}
.chip__th img{width:calc((100% - 8px) / 3); aspect-ratio:4/3; object-fit:cover; border-radius:3px; filter:grayscale(1); opacity:.75;
  transition:filter var(--fast) var(--ease), opacity var(--fast) var(--ease)}
.chip:hover .chip__th img, .chip[aria-expanded="true"] .chip__th img{filter:none; opacity:1}
.chip:hover i{background:var(--ink); color:#fff; box-shadow:none}
.chip[aria-expanded="true"]{border-top:2px solid var(--ink); padding-top:calc(.8rem - 1px)}
.chip[aria-expanded="true"] i{transform:rotate(45deg); background:var(--ink); color:#fff; box-shadow:none}
.chip__panel{margin-top:1.4rem}
.chip__panel[hidden]{display:none}
.chip__p{margin:0 0 .8rem; font-size:var(--t-small); color:var(--ink-3)}
@media (max-width:48rem){ .chips{grid-template-columns:1fr 1fr} }

/* contact: the works, in colour, each one a way back to it */
.contact .cstrip{grid-column:1 / -1; display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:6px; margin-bottom:clamp(2rem, 5vh, 3.2rem)}
.cstrip a{display:block; color:var(--ink-3); text-decoration:none; font-size:var(--t-label)}
.cstrip img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:4px; transition:transform var(--fast) var(--ease)}
.cstrip span{display:block; margin-top:.4rem}
.cstrip a:hover{color:var(--ink)}
.cstrip a:hover img{transform:translateY(-3px)}
@media (max-width:48rem){ .contact .cstrip{grid-template-columns:repeat(4,minmax(0,1fr))} }
/* chip: name and + on one line, the thumbs under them; labels all start on the left edge */
.chip__t{grid-column:1; grid-row:1} .chip i{grid-column:2; grid-row:1} .chip__th{grid-row:2}
.chip__th img{aspect-ratio:16/10}
.cstrip span{text-align:left}

/* ===== version N: the end card takes the reel's own cut to black ===== */
/* no fade over the last frame: the card appears whole on the cut, starts at the reel's pure black,
   warms to the card's ink while the name, the details and the strip build in */
.sr--end.is-in{opacity:1; transition:none; animation:srblack 1.4s var(--ease) both}
@keyframes srblack{from{background-color:#000} to{background-color:#14120F}}
.sr--end.is-in .sr__t--name{animation:srrise 1s var(--ease) .35s both}
.sr--end.is-in .sr__role{animation-delay:.9s} .sr--end.is-in .sr__links{animation-delay:1.1s} .sr--end.is-in .sr__again{animation-delay:1.6s}
.sr--end.is-in .sr__strip img{animation-delay:calc(1.2s + var(--i) * .12s)}

/* Meir Ariel (N): the only paper in the section — the sheet his letters were traced from.
   On arrival a scan line runs down it once, the way the letters were read into a typeface */
.meirpair .sheet{grid-column:9 / 13; position:relative; margin:0; display:flex; flex-direction:column; justify-content:center;
  padding:1rem 1rem .9rem; background:#fff; border-radius:var(--r); box-shadow:var(--card); overflow:hidden}
.sheet img{display:block; width:100%; height:auto}
.sheet figcaption{margin-top:.8rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.04em; color:var(--ink-3)}
.sheet__scan{position:absolute; left:0; right:0; top:0; height:2px; background:var(--ink); opacity:0; pointer-events:none}
.f #meir.is-here .sheet__scan{animation:scan 2.2s cubic-bezier(.45,0,.25,1) .3s 1 both}
@keyframes scan{0%{top:0; opacity:0} 8%{opacity:.85} 92%{opacity:.85} 100%{top:100%; opacity:0}}
@media (prefers-reduced-motion:reduce){ .sheet__scan{display:none} }
@media (max-width:48rem){ .meirpair .sheet{grid-column:1 / -1; margin-top:.6rem} }

/* ==========================================================================
   version O — one screen per thing, and a chapter page between sections
   ========================================================================== */

/* tools: while you are in the section the shelves keep their colour, only quieter */
.f #tools.is-here .chip__th img{filter:none; opacity:.4}
.f #tools.is-here .chip:hover .chip__th img, .f #tools.is-here .chip[aria-expanded="true"] .chip__th img{opacity:1}

/* scrolling settles on each screen (proximity: it helps, never traps) */

@media (min-width:64.01rem){
  /* sections no longer add their own air: the chapter page is the pause */
  .f3 #top .section:not(.intro):not(.section--contact){padding-top:0; padding-bottom:0}

  /* every project, and the film library, is one screen tall, its content centred in it */
  .f3 #top .proj, .f3 #top .library{box-sizing:border-box; min-height:calc(100svh - var(--chrome)); margin:0;
    align-content:center; padding-block:2rem}
  /* media capped so a screen always holds the work AND its caption */
  .f3 .showcase{--kh:calc(100svh - var(--chrome) - 19rem)}
  .f3 .grabrow{max-width:calc((100svh - var(--chrome) - 15rem) * 9 / 16 * 4 + 3 * var(--gap))}
  .f3 .meirpair{max-height:calc(100svh - var(--chrome) - 15rem)}
  .f3 .meirpair .vplay video{max-height:calc(100svh - var(--chrome) - 15rem)}
  .f3 .posterwall{max-width:calc((100svh - var(--chrome) - 15rem) * 4 / 5 * 3 + 2 * var(--gap))}

}

/* ===== version P: the section head stays compact (as in N) and rides on top of its first screen ===== */
@media (min-width:64.01rem){
  .f3 #top .section:not(.intro):not(.section--contact){padding-top:clamp(4rem, 9vh, 6rem)}
  .f3 #top .head{margin-bottom:0}
}
@media (min-width:64.01rem){ .f3 #top .head{padding-bottom:2rem; align-items:end} }

/* ===== version Q: free scrolling again; a project is AT LEAST one screen, never squeezed into one ===== */

/* ===== version R: final polish ===== */
/* Hebrew titles read right to left inside English lines: «האמנם — ?» keeps its question mark on the left */
.he{direction:rtl; unicode-bidi:isolate}
/* phones: film titles get the whole card width (the duration is in the player) */
@media (max-width:48rem){
  .lib__d{display:none}
  .lib__t{white-space:normal; overflow:visible; text-overflow:clip; font-size:.8rem; line-height:1.25}
}

/* ===== version S ===== */
/* Softmax: no grey mat; a frame like every other work. The page scrolls straight over it */
.smx{position:relative; border-radius:var(--r); overflow:hidden; box-shadow:var(--card)}
.smx .frame{pointer-events:none; display:block}
.smx.is-live .frame{pointer-events:auto}
.smx.is-live{box-shadow:0 0 0 2px var(--ink), var(--card)}
.tryit, .tryit__off{position:absolute; z-index:3; left:1.2rem; bottom:1.2rem; display:inline-flex; align-items:center; gap:.5em;
  border:0; border-radius:999px; padding:.6em 1.1em; cursor:pointer; font:inherit; font-size:var(--t-small); font-weight:500;
  background:var(--ink); color:#fff; box-shadow:0 8px 24px rgba(0,0,0,.18)}
.tryit i{width:.5em; height:.5em; border-radius:50%; background:#5fd38a; animation:livePulse 1.6s ease-in-out infinite}
.tryit__off{left:auto; right:1.2rem; top:1.2rem; bottom:auto; background:#fff; color:var(--ink)}
.tryit[hidden], .tryit__off[hidden]{display:none}
.smx:not(.is-live):hover .tryit{transform:translateY(-2px)}
@media (max-width:48rem){ .tryit, .tryit__off{display:none !important} }

/* CHEERS previews in place while you are on it */
#cheersFilm.is-preview:not(.is-playing) .vplay__btn{left:auto; top:auto; right:1rem; bottom:1rem; transform:none}

/* closing: a printer's colour bar of the works, one band each */
.contact .cbar{grid-column:1 / -1; display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); height:clamp(5rem, 11vh, 7.5rem);
  margin-bottom:clamp(2rem, 5vh, 3.2rem); border-radius:var(--r); overflow:hidden}
.cbar a{position:relative; display:flex; align-items:flex-end; padding:.6rem .7rem; background:var(--c); text-decoration:none;
  color:#fff; font-size:var(--t-label); transition:flex-grow .3s var(--ease)}
.cbar a span{opacity:0; transform:translateY(.3rem); transition:opacity var(--fast) var(--ease), transform var(--fast) var(--ease)}
.cbar a:hover span, .cbar a:focus-visible span{opacity:1; transform:none}
.cbar a[style*="#c8cef2"]{color:var(--ink)}
.cbar span.he{direction:rtl}
@media (max-width:48rem){ .cbar a span{opacity:1; font-size:.62rem} .contact .cbar{grid-template-columns:repeat(4,minmax(0,1fr)); height:auto} .cbar a{aspect-ratio:1} }
.smx.frame-wrap:hover{box-shadow:var(--card)} .smx.is-live.frame-wrap:hover{box-shadow:0 0 0 2px var(--ink), var(--card)}

/* ===== version T: the closing ends like the reel ===== */
.contact .estrip{grid-column:1 / -1; display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:.5%;
  margin-bottom:clamp(2rem, 5vh, 3.2rem); padding-top:.9rem; border-top:2px solid var(--ink)}
.estrip a{display:block; color:var(--ink-3); text-decoration:none; font-size:var(--t-label)}
.estrip img{display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:3px;
  filter:grayscale(1) brightness(.92); opacity:.6; transition:filter .5s var(--ease), opacity .5s var(--ease), transform var(--fast) var(--ease)}
.estrip.is-on img{filter:none; opacity:1; transition-delay:calc(.15s + var(--i) * .22s)}
.estrip span{display:block; margin-top:.45rem; text-align:left}
.estrip a:hover{color:var(--ink)}
.estrip a:hover img{transform:translateY(-3px); transition-delay:0s}
@media (prefers-reduced-motion:reduce){ .estrip img{filter:none; opacity:1} }
@media (max-width:48rem){ .contact .estrip{grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px} }

/* the vertical reels: the play chip stays in its corner on hover (the generic hover re-centred it over the text) */
.vplay.vplay--v:hover .vplay__btn{transform:translateY(-2px)}
@media (max-width:48rem){ .smx .frame{display:none} .smx{box-shadow:none; overflow:visible} }